@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
39 lines (34 loc) • 4.08 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
const skipLinkCss = ".utrecht-skip-link{align-items:center;background-color:var(--utrecht-skip-link-background-color, ButtonFace);box-sizing:border-box;color:var(--utrecht-skip-link-color, ButtonText);display:inline-flex;justify-content:center;min-block-size:var(--utrecht-skip-link-min-block-size, 44px);min-inline-size:var(--utrecht-skip-link-min-inline-size, 44px);padding-block-end:var(--utrecht-skip-link-padding-block-end);padding-block-start:var(--utrecht-skip-link-padding-block-start);padding-inline-end:var(--utrecht-skip-link-padding-inline-end);padding-inline-start:var(--utrecht-skip-link-padding-inline-start);text-decoration:var(--utrecht-skip-link-text-decoration)}.utrecht-skip-link--hidden{inset-block-start:-200%;position:fixed}.utrecht-skip-link--visible-on-focus{inset-block-start:-200%;position:fixed}.utrecht-skip-link--visible-on-focus:focus{--_utrecht-skip-link-inset:calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));inset-block-start:var(--_utrecht-skip-link-inset, 0);inset-inline-start:var(--_utrecht-skip-link-inset, 0);position:fixed;z-index:var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index))}.utrecht-skip-link--visible{--_utrecht-skip-link-inset:calc(var(--utrecht-focus-outline-width, 0px) + var(--utrecht-focus-outline-offset, 0px));inset-block-start:var(--_utrecht-skip-link-inset, 0);inset-inline-start:var(--_utrecht-skip-link-inset, 0);position:fixed;z-index:var(--utrecht-skip-link-z-index, var(--utrecht-layer-focus-z-index))}.utrecht-skip-link--focus{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1;text-decoration:var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration))}.utrecht-skip-link--focus-visible,.utrecht-skip-link:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert);z-index:1;text-decoration:var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration))}:host{display:inline-flex}:host([hidden]){display:none !important}";
const UtrechtSkipLinkStyle0 = skipLinkCss;
const SkipLink = /*@__PURE__*/ proxyCustomElement(class SkipLink extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.href = undefined;
}
render() {
return (h("a", { key: 'b51a15421675dd33b7c96f7da367a0a355ba42c9', href: typeof this.href === 'string' ? this.href : undefined, class: "utrecht-skip-link utrecht-skip-link--visible-on-focus" }, h("slot", { key: 'b116757a22c64dfc335143d0a70bbf55aee5a04e' })));
}
static get style() { return UtrechtSkipLinkStyle0; }
}, [1, "utrecht-skip-link", {
"href": [1]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-skip-link"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-skip-link":
if (!customElements.get(tagName)) {
customElements.define(tagName, SkipLink);
}
break;
} });
}
const UtrechtSkipLink = SkipLink;
const defineCustomElement = defineCustomElement$1;
export { UtrechtSkipLink, defineCustomElement };
//# sourceMappingURL=utrecht-skip-link.js.map