import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './ic-link2.js';

const icSkipLinkCss = ":host{display:block}ic-link{position:absolute;left:-9999px}ic-link:focus{z-index:var(--ic-z-index-skip-link);left:var(--ic-space-sm);padding:var(--ic-space-sm);box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);width:-moz-fit-content;width:fit-content}.display-top:focus{top:var(--ic-skip-link-position-top, var(--ic-space-sm))}.inline:focus{position:static;display:inline-block;margin:var(--ic-space-xs) 0}.full-width:focus{display:flex;right:var(--ic-space-sm);width:auto}.inline.full-width:focus{justify-content:start}.show-background{background:var(--ic-skip-link-background)}";
const IcSkipLinkStyle0 = icSkipLinkCss;

const SkipLink = /*@__PURE__*/ proxyCustomElement(class SkipLink extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        /**
         * If `true`, the skip link will fill the width of the page.
         */
        this.fullWidth = false;
        /**
         * If `true`, the skip link will appear inline with surrounding page content when focused.
         */
        this.inline = false;
        /**
         * The label displayed when the skip link is focused.
         */
        this.label = "Skip to main content";
        /**
         * If `true`, the skip link will display as black in the light theme, and white in the dark theme.
         */
        this.monochrome = false;
        /**
         * Sets the theme color to the dark or light theme color. `inherit` will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * If `true`, the background will be hidden.
         */
        this.transparentBackground = false;
    }
    /**
     * Sets focus on the element.
     */
    async setFocus() {
        if (this.linkEl)
            this.linkEl.setFocus();
    }
    render() {
        const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
        return (h(Host, { key: '90a25f2594d0169a8ee6f1d03b30a30fccb17168', class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("ic-link", { key: '79c0f5121c3ac8bae5992756f3c628f381ebe576', class: {
                "display-top": !inline,
                "full-width": !!fullWidth,
                "show-background": !transparentBackground,
                inline: !!inline,
            }, href: `#${target}`, monochrome: monochrome, theme: theme, ref: (el) => (this.linkEl = el) }, label)));
    }
    get el() { return this; }
    static get style() { return IcSkipLinkStyle0; }
}, [1, "ic-skip-link", {
        "fullWidth": [4, "full-width"],
        "inline": [4],
        "label": [1],
        "monochrome": [4],
        "target": [1],
        "theme": [1],
        "transparentBackground": [4, "transparent-background"],
        "setFocus": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-skip-link", "ic-link"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-skip-link":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SkipLink);
            }
            break;
        case "ic-link":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcSkipLink = SkipLink;
const defineCustomElement = defineCustomElement$1;

export { IcSkipLink, defineCustomElement };

//# sourceMappingURL=ic-skip-link.js.map