@public-ui/components 3.0.0-638ed75dd472d3e3ad4c1c3a3c72d705e6022731.0 → 3.0.0-9da5848955ab6cd75fb6415b51b281e3e7c3ae3d.0

package/dist/components/kol-tree-item.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{o as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link .kol-link {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n}",KolTreeItemDefaultStyle0=defaultStyleCss,KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"3032a3d111e3e5e128780afc16db7ff73fa9d4c4",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"a080cb772039fe0c9e7699926c87f1cf94933ea8"}))}static get style(){return{default:KolTreeItemDefaultStyle0}}},[33,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach((e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)}))}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{u as KolTreeItemWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree-item {\n    --indentation: var(--tree-item-indentation, calc(10rem / var(--kolibri-root-font-size, 16)));\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link .kol-link {\n    align-items: center;\n    display: inline-flex;\n    min-height: var(--a11y-min-size);\n    padding-left: max(var(--indentation) * var(--level) + (8rem / var(--kolibri-root-font-size, 16)), 8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(6rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-tree-item__link--first-level .kol-link {\n    padding-left: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link-inner {\n    display: flex;\n    align-items: center;\n  }\n  .kol-tree-item__children {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree-item .kol-span {\n    place-items: unset;\n  }\n  .kol-tree-item__toggle-button, .kol-tree-item__toggle-button-placeholder {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n  }\n  .kol-tree-item__text {\n    text-decoration: underline;\n  }\n}",KolTreeItemDefaultStyle0=defaultStyleCss,KolTreeItem$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._active=void 0,this._label=void 0,this._open=void 0,this._href=void 0}async focusLink(){this.element&&await this.element.focusLink()}async expand(){this.element&&await this.element.expand()}async collapse(){this.element&&await this.element.collapse()}async isOpen(){var e,n;return null!==(n=await(null===(e=this.element)||void 0===e?void 0:e.isOpen()))&&void 0!==n&&n}render(){return h(KolTreeItemWcTag,{key:"058ffb876889218e812b8d16395cf3d4735e9786",_active:this._active,_label:this._label,_open:this._open,_href:this._href,ref:e=>this.element=e},h("slot",{key:"a084e5ba793a60fd5696756cd16d92e50f6c9c9f"}))}static get style(){return{default:KolTreeItemDefaultStyle0}}},[33,"kol-tree-item",{_active:[4],_label:[1],_open:[4],_href:[1],focusLink:[64],expand:[64],collapse:[64],isOpen:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-item"].forEach((e=>{if("kol-tree-item"===e)customElements.get(e)||customElements.define(e,KolTreeItem$1)}))}const KolTreeItem=KolTreeItem$1,defineCustomElement=defineCustomElement$1;export{KolTreeItem,defineCustomElement};

package/dist/components/kol-tree-item.js.map

@@ -1 +1 @@
-{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,wrKAAwrK,CAAC;AACjtK,iCAAe,eAAe;;MCWjBA,aAAW;;;;;;;;;;IAuBb,MAAM,SAAS;QACxB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;SAC/B;KACD;IAES,MAAM,MAAM;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;SAC5B;KACD;IAES,MAAM,QAAQ;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;SAC9B;KACD;IAES,MAAM,MAAM;;QACrB,OAAO,OAAC,OAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC,mCAAI,KAAK,CAAC;KAC/C;IAEM,MAAM;QACZ,QACC,EAAC,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,IAErE,8DAAQ,CACU,EAClB;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.kol-tree-item {\n\t\t$root: &;\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t\tfont-size: rem(16);\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\tpadding-right: rem(6);\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: rem(6);\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-item.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,y2KAAy2K,CAAC;AACl4K,iCAAe,eAAe;;MCWjBA,aAAW;;;;;;;;;;IAuBb,MAAM,SAAS;QACxB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;SAC/B;KACD;IAES,MAAM,MAAM;QACrB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;SAC5B;KACD;IAES,MAAM,QAAQ;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,MAAM,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;SAC9B;KACD;IAES,MAAM,MAAM;;QACrB,OAAO,OAAC,OAAM,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAA,CAAC,mCAAI,KAAK,CAAC;KAC/C;IAEM,MAAM;QACZ,QACC,EAAC,gBAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,IAErE,8DAAQ,CACU,EAClB;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTreeItem"],"sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t$base-horizontal-padding: rem(8);\n\n\t.kol-tree-item {\n\t\t$root: &;\n\t\t--indentation: var(--tree-item-indentation, #{rem(10)}); // Set `--tree-item-indentation` in themes to control padding\n\t\tfont-size: rem(16);\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\talign-items: center;\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\tpadding-left: max(calc((var(--indentation) * var(--level)) + $base-horizontal-padding), $base-horizontal-padding);\n\t\t\t\tpadding-right: rem(6);\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\n\t\t\t&--first-level .kol-link {\n\t\t\t\tpadding-left: rem(6);\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: var(--a11y-min-size);\n\t\t\tdisplay: inline-flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\nimport { KolTreeItemWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t@Method() async focusLink() {\n\t\tif (this.element) {\n\t\t\tawait this.element.focusLink();\n\t\t}\n\t}\n\n\t@Method() async expand() {\n\t\tif (this.element) {\n\t\t\tawait this.element.expand();\n\t\t}\n\t}\n\n\t@Method() async collapse() {\n\t\tif (this.element) {\n\t\t\tawait this.element.collapse();\n\t\t}\n\t}\n\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{q as KolTreeItemTag,p as KolTreeTag}from"./component-names.js";import{v as validateLabel}from"./label.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={_label:""},this._label=void 0}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"2e097d024c19c4e809e27805ad12cdf4eadfd038",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"9f23c7a5071ae9e7af8cd93c0f80098b4b593854",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"aaa8d6cce48afca57ec0181bf8b22c3fdef39973",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"a133ede01d7c41852d097cb1c88f0750cb6492ed"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var t,a,l;return null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const a=t.querySelectorAll(KolTreeItemTag);return[...e,t,...a]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async a=>!e.isTreeItem(a.parentElement)||await a.parentElement.isOpen()&&await t(a.parentElement);return(await Promise.all(this.treeItemElements.map((async e=>({value:e,include:await t(e)}))))).filter((e=>e.include)).map((e=>e.value))}async handleKeyDown(e){var t,a,l,i,n,s,o,r,c;const d=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),v=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!d||!u)return;const m=null==d?void 0:d.findIndex((e=>e===u));switch(e.key){case"ArrowDown":await(null===(a=d[m+1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(l=d[m-1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=d[m+1])||void 0===i?void 0:i.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=d.findIndex((e=>e===u.parentElement));-1!==e&&await(null===(n=d[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(s=d[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(o=d[d.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(r=e.key.match(/[a-zA-Z0-9]/))||void 0===r?void 0:r.input:if(!v){const t=e.key.toLowerCase(),a=d.indexOf(u)+1,l=d.concat(d),i=l.slice(a,a+d.length).findIndex((e=>{var a;return null===(a=e.getAttribute("_label"))||void 0===a?void 0:a.trim().toLowerCase().startsWith(t)}));-1!==i&&(await l[a+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(KolTreeItemTag);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=a=>{e.isTreeItem(a.parentElement)&&(a.parentElement.expand(),t(a.parentElement))},a=(()=>{var t,a,l,i;const n=null!==(i=null===(l=null===(a=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===a?void 0:a.call(t))||void 0===l?void 0:l.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();a&&t(a)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[4,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach((e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)}))}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as KolTreeItemTag,v as KolTreeTag}from"./component-names.js";import{v as validateLabel}from"./label.js";const KolTreeWc$1=proxyCustomElement(class e extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={_label:""},this._label=void 0}validateLabel(e){validateLabel(this,e)}render(){return h(Host,{key:"05d1fdf7fc5589847e2fdce7b3d307860721ccd2",onSlotchange:this.handleSlotchange.bind(this)},h("nav",{key:"b03ad56f3ce550d09d22efa04e23273588093034",class:"kol-tree","aria-label":this.state._label},h("ul",{key:"7b7e4fc2e98037621beb67e6dcdd00f7072d3878",class:"kol-tree__treeview-navigation",role:"tree","aria-label":this.state._label},h("slot",{key:"c6bd99309dd93b1eb88031533f17f25c0e9952c7"}))))}static isTreeItem(e){return(null==e?void 0:e.tagName)===KolTreeItemTag.toUpperCase()}componentWillLoad(){this.validateLabel(this._label),this.handleTreeChange(),this.observeChildListMutations()}disconnectedCallback(){var e;null===(e=this.observer)||void 0===e||e.disconnect()}observeChildListMutations(){this.observer=new MutationObserver(this.handleTreeChange.bind(this)),this.observeTopLevelItems()}handleSlotchange(){this.observeTopLevelItems(),this.handleTreeChange()}observeTopLevelItems(){var e;null===(e=this.getTopLevelTreeItems())||void 0===e||e.forEach((e=>{var t;null===(t=this.observer)||void 0===t||t.observe(e,{childList:!0,subtree:!0})}))}getTopLevelTreeItems(){var t,l,a;return null===(a=null===(l=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===l?void 0:l.call(t))||void 0===a?void 0:a.filter(e.isTreeItem)}handleTreeChange(){this.treeItemElements=this.getTreeItemElements(),this.ensureActiveItemVisibility()}getTreeItemElements(){var e;return null===(e=this.getTopLevelTreeItems())||void 0===e?void 0:e.reduce(((e,t)=>{const l=t.querySelectorAll(KolTreeItemTag);return[...e,t,...l]}),[])}async getOpenTreeItemElements(){if(!this.treeItemElements)return;const t=async l=>!e.isTreeItem(l.parentElement)||await l.parentElement.isOpen()&&await t(l.parentElement);return(await Promise.all(this.treeItemElements.map((async e=>({value:e,include:await t(e)}))))).filter((e=>e.include)).map((e=>e.value))}async handleKeyDown(e){var t,l,a,i,n,s,o,r,c;const d=await this.getOpenTreeItemElements(),u=null===(t=document.activeElement)||void 0===t?void 0:t.closest(KolTreeItemTag),v=e.metaKey||e.altKey||e.ctrlKey||e.shiftKey;if(!d||!u)return;const m=null==d?void 0:d.findIndex((e=>e===u));switch(e.key){case"ArrowDown":await(null===(l=d[m+1])||void 0===l?void 0:l.focusLink()),e.preventDefault();break;case"ArrowUp":await(null===(a=d[m-1])||void 0===a?void 0:a.focusLink()),e.preventDefault();break;case"Right":case"ArrowRight":e.preventDefault(),await u.isOpen()?await(null===(i=d[m+1])||void 0===i?void 0:i.focusLink()):await u.expand();break;case"Left":case"ArrowLeft":if(e.preventDefault(),await u.isOpen())await u.collapse();else{const e=d.findIndex((e=>e===u.parentElement));-1!==e&&await(null===(n=d[e])||void 0===n?void 0:n.focusLink())}break;case"Home":await(null===(s=d[0])||void 0===s?void 0:s.focusLink()),e.preventDefault();break;case"End":await(null===(o=d[d.length-1])||void 0===o?void 0:o.focusLink()),e.preventDefault();break;case null===(r=e.key.match(/^[a-zA-Z0-9]$/))||void 0===r?void 0:r.input:if(!v){const t=e.key.toLowerCase(),l=d.indexOf(u)+1,a=d.concat(d),i=a.slice(l,l+d.length).findIndex((e=>{var l;return null===(l=e.getAttribute("_label"))||void 0===l?void 0:l.trim().toLowerCase().startsWith(t)}));-1!==i&&(await a[l+i].focusLink(),e.preventDefault())}break;case"*":{const e=null===(c=u.parentElement)||void 0===c?void 0:c.querySelectorAll(KolTreeItemTag);null==e||e.forEach((e=>{e.expand()}));break}}}async handleFocusOut(e){e.relatedTarget&&!e.relatedTarget.closest(KolTreeTag)&&await this.ensureActiveItemVisibility()}async ensureActiveItemVisibility(){const t=l=>{e.isTreeItem(l.parentElement)&&(l.parentElement.expand(),t(l.parentElement))},l=(()=>{var t,l,a,i;const n=null!==(i=null===(a=null===(l=null===(t=this.host.querySelector("slot"))||void 0===t?void 0:t.assignedNodes)||void 0===l?void 0:l.call(t))||void 0===a?void 0:a.filter(e.isTreeItem))&&void 0!==i?i:[];for(const e of n){if(e._active)return e;const t=e.querySelector(`${KolTreeItemTag}[_active="true"]`);if(t&&t._active)return t}})();l&&t(l)}get host(){return this}static get watchers(){return{_label:["validateLabel"]}}},[4,"kol-tree-wc",{_label:[1],state:[32]},[[0,"keydown","handleKeyDown"],[0,"focusout","handleFocusOut"]],{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree-wc"].forEach((e=>{if("kol-tree-wc"===e)customElements.get(e)||customElements.define(e,KolTreeWc$1)}))}const KolTreeWc=KolTreeWc$1,defineCustomElement=defineCustomElement$1;export{KolTreeWc,defineCustomElement};

package/dist/components/kol-tree-wc.js.map

@@ -1 +1 @@
-{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/[a-zA-Z0-9]/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-tree-wc.js","mappings":"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","names":["KolTreeWc"],"sources":["src/components/tree/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nimport type { LabelPropType, TreeAPI, TreeStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { KolTreeItemTag, KolTreeTag } from '../../core/component-names';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-tree-wc',\n\tshadow: false,\n})\nexport class KolTreeWc implements TreeAPI {\n\t@Element() host!: HTMLElement;\n\n\t@State() public state: TreeStates = {\n\t\t_label: '',\n\t};\n\tprivate observer?: MutationObserver;\n\tprivate treeItemElements?: HTMLKolTreeItemElement[];\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t@Watch('_label') validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host onSlotchange={this.handleSlotchange.bind(this)}>\n\t\t\t\t<nav class=\"kol-tree\" aria-label={this.state._label}>\n\t\t\t\t\t<ul class=\"kol-tree__treeview-navigation\" role=\"tree\" aria-label={this.state._label}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate static isTreeItem(this: void, element?: HTMLElement | null): element is HTMLKolTreeItemElement {\n\t\treturn element?.tagName === KolTreeItemTag.toUpperCase();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\n\t\tthis.handleTreeChange();\n\t\tthis.observeChildListMutations();\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.observer?.disconnect();\n\t}\n\n\tprivate observeChildListMutations() {\n\t\tthis.observer = new MutationObserver(this.handleTreeChange.bind(this));\n\t\tthis.observeTopLevelItems();\n\t}\n\n\tprivate handleSlotchange() {\n\t\tthis.observeTopLevelItems();\n\t\tthis.handleTreeChange();\n\t}\n\n\tprivate observeTopLevelItems() {\n\t\tthis.getTopLevelTreeItems()?.forEach((treeItem) => {\n\t\t\tthis.observer?.observe(treeItem, { childList: true, subtree: true });\n\t\t});\n\t}\n\n\tprivate getTopLevelTreeItems(): HTMLKolTreeItemElement[] {\n\t\treturn (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem);\n\t}\n\n\tprivate handleTreeChange(): void {\n\t\tthis.treeItemElements = this.getTreeItemElements();\n\t\tvoid this.ensureActiveItemVisibility();\n\t}\n\n\t/**\n\t * Returns array of all TreeItem elements in the order they appear\n\t */\n\tprivate getTreeItemElements(): HTMLKolTreeItemElement[] {\n\t\treturn this.getTopLevelTreeItems()?.reduce((accumulator: HTMLKolTreeItemElement[], currentValue: HTMLKolTreeItemElement) => {\n\t\t\tconst children = currentValue.querySelectorAll(KolTreeItemTag);\n\n\t\t\treturn [...accumulator, currentValue, ...children];\n\t\t}, []);\n\t}\n\n\tprivate async getOpenTreeItemElements(): Promise<HTMLKolTreeItemElement[] | undefined> {\n\t\tif (!this.treeItemElements) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst areElementAndAllParentsOpen = async (element: HTMLKolTreeItemElement): Promise<boolean> => {\n\t\t\tif (!KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\t// parent is tree itself, top level is always open\n\t\t\t\treturn true;\n\t\t\t} else {\n\t\t\t\treturn (await element.parentElement.isOpen()) && (await areElementAndAllParentsOpen(element.parentElement));\n\t\t\t}\n\t\t};\n\n\t\tconst elementsWithInclude = await Promise.all(\n\t\t\tthis.treeItemElements.map(async (element) => ({\n\t\t\t\tvalue: element,\n\t\t\t\tinclude: await areElementAndAllParentsOpen(element),\n\t\t\t})),\n\t\t);\n\n\t\treturn elementsWithInclude.filter((element) => element.include).map((element) => element.value);\n\t}\n\n\t@Listen('keydown')\n\tpublic async handleKeyDown(event: KeyboardEvent) {\n\t\tconst openItems = await this.getOpenTreeItemElements();\n\t\tconst currentTreeItem: HTMLKolTreeItemElement | undefined | null = document.activeElement?.closest(KolTreeItemTag);\n\t\tconst hasModifierKeyPressed = event.metaKey || event.altKey || event.ctrlKey || event.shiftKey;\n\n\t\tif (!openItems || !currentTreeItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentIndex = openItems?.findIndex((elem) => elem === currentTreeItem);\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tawait openItems[currentIndex - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Right':\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait openItems[currentIndex + 1]?.focusLink();\n\t\t\t\t} else {\n\t\t\t\t\tawait currentTreeItem.expand();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Left':\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (await currentTreeItem.isOpen()) {\n\t\t\t\t\tawait currentTreeItem.collapse();\n\t\t\t\t} else {\n\t\t\t\t\tconst parentIndex = openItems.findIndex((item) => item === currentTreeItem.parentElement);\n\t\t\t\t\tparentIndex !== -1 && (await openItems[parentIndex]?.focusLink());\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tawait openItems[0]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tawait openItems[openItems.length - 1]?.focusLink();\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase event.key.match(/^[a-zA-Z0-9]$/)?.input: {\n\t\t\t\t/* Ignore events with any modifier key to avoid breaking native browser or OS shortcuts such as ⌘+L */\n\t\t\t\tif (!hasModifierKeyPressed) {\n\t\t\t\t\tconst char = event.key.toLowerCase();\n\t\t\t\t\tconst startIndex = openItems.indexOf(currentTreeItem) + 1;\n\t\t\t\t\tconst wrapAroundItems = openItems.concat(openItems);\n\t\t\t\t\tconst matchIndex = wrapAroundItems\n\t\t\t\t\t\t.slice(startIndex, startIndex + openItems.length)\n\t\t\t\t\t\t.findIndex((item) => item.getAttribute('_label')?.trim().toLowerCase().startsWith(char));\n\n\t\t\t\t\tif (matchIndex !== -1) {\n\t\t\t\t\t\tawait wrapAroundItems[startIndex + matchIndex].focusLink();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tconst siblings = currentTreeItem.parentElement?.querySelectorAll(KolTreeItemTag);\n\t\t\t\tsiblings?.forEach((element) => {\n\t\t\t\t\tvoid element.expand();\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t@Listen('focusout')\n\tpublic async handleFocusOut(event: FocusEvent) {\n\t\tif (event.relatedTarget && !(event.relatedTarget as Element).closest(KolTreeTag)) {\n\t\t\t/* Tree lost focus */\n\t\t\tawait this.ensureActiveItemVisibility();\n\t\t}\n\t}\n\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tprivate async ensureActiveItemVisibility() {\n\t\tconst findActiveItem = (): HTMLKolTreeItemElement | undefined => {\n\t\t\tconst rootNodes = (this.host.querySelector('slot')?.assignedNodes?.() as HTMLElement[])?.filter(KolTreeWc.isTreeItem) ?? [];\n\t\t\tfor (const rootNode of rootNodes) {\n\t\t\t\tif (rootNode._active) {\n\t\t\t\t\treturn rootNode;\n\t\t\t\t}\n\t\t\t\tconst childMatch = rootNode.querySelector(`${KolTreeItemTag}[_active=\"true\"]`);\n\t\t\t\tif (childMatch && (childMatch as HTMLKolTreeItemElement)._active) {\n\t\t\t\t\treturn childMatch as HTMLKolTreeItemElement;\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst expandParentElements = (element: HTMLKolTreeItemElement) => {\n\t\t\tif (KolTreeWc.isTreeItem(element.parentElement)) {\n\t\t\t\tvoid element.parentElement.expand();\n\t\t\t\texpandParentElements(element.parentElement);\n\t\t\t}\n\t\t};\n\n\t\tconst target = findActiveItem();\n\t\tif (target) {\n\t\t\texpandParentElements(target);\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/kol-tree.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{n as KolTreeWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTreeDefaultStyle0=defaultStyleCss,KolTree$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0}render(){return h(KolTreeWcTag,{key:"d80ef53eb88006c0247391eefe6e13dbcfb06b81",_label:this._label},h("slot",{key:"7bd6fbba7b91939d863f0048a06ce2a74d4524fa"}))}static get style(){return{default:KolTreeDefaultStyle0}}},[33,"kol-tree",{_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree"].forEach((n=>{if("kol-tree"===n)customElements.get(n)||customElements.define(n,KolTree$1)}))}const KolTree=KolTree$1,defineCustomElement=defineCustomElement$1;export{KolTree,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{t as KolTreeWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-tree {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolTreeDefaultStyle0=defaultStyleCss,KolTree$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0}render(){return h(KolTreeWcTag,{key:"d9f26f840ce0ccdb32731859e6075cd0fd737dd5",_label:this._label},h("slot",{key:"8f020e01d6f839e2739e5cf0256afdd01eb5c0e5"}))}static get style(){return{default:KolTreeDefaultStyle0}}},[33,"kol-tree",{_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tree"].forEach((n=>{if("kol-tree"===n)customElements.get(n)||customElements.define(n,KolTree$1)}))}const KolTree=KolTree$1,defineCustomElement=defineCustomElement$1;export{KolTree,defineCustomElement};

package/dist/components/kol-tree.js.map

@@ -1 +1 @@
-{"file":"kol-tree.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,41IAA41I,CAAC;AACr3I,6BAAe,eAAe;;MCYjBA,SAAO;;;;;;;IAMZ,MAAM;QACZ,QACC,EAAC,YAAY,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,IAChC,8DAAQ,CACM,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTree"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-tree {\n\t\tfont-size: rem(16);\n\n\t\t&__treeview-navigation {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '../../schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-tree.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,i7IAAi7I,CAAC;AAC18I,6BAAe,eAAe;;MCYjBA,SAAO;;;;;;;IAMZ,MAAM;QACZ,QACC,EAAC,YAAY,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,IAChC,8DAAQ,CACM,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolTree"],"sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-tree {\n\t\tfont-size: rem(16);\n\n\t\t&__treeview-navigation {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nimport type { LabelPropType, TreeProps } from '../../schema';\nimport { KolTreeWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements TreeProps {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-version.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{r as KolBadgeTag}from"./component-names.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolVersionDefaultStyle0=defaultStyleCss,KolVersion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return h(Host,{key:"0dff30fe462330d3563acd3aa73aaef26677a973",class:"kol-version"},h(KolBadgeTag,{key:"7a720cd897c9f0d9ecb76e04395fd9f441335b96",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:translate("kol-version")}},_label:this.state._label}))}validateLabel(n){validateLabel(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}static get style(){return{default:KolVersionDefaultStyle0}}},[33,"kol-version",{_label:[1],state:[32]},void 0,{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-version"].forEach((n=>{if("kol-version"===n)customElements.get(n)||customElements.define(n,KolVersion$1)}))}const KolVersion=KolVersion$1,defineCustomElement=defineCustomElement$1;export{KolVersion,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{x as KolBadgeTag}from"./component-names.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolVersionDefaultStyle0=defaultStyleCss,KolVersion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return h(Host,{key:"abaf942617b20e8e900dde885533f035b3cda21a",class:"kol-version"},h(KolBadgeTag,{key:"ac1df455d3abf291c8a88debe0a0e2ae51ce6b61",_color:"#bec5c9",_icons:{left:{icon:"codicon codicon-versions",label:translate("kol-version")}},_label:this.state._label}))}validateLabel(n){validateLabel(this,n,{required:!0})}componentWillLoad(){this.validateLabel(this._label)}static get watchers(){return{_label:["validateLabel"]}}static get style(){return{default:KolVersionDefaultStyle0}}},[33,"kol-version",{_label:[1],state:[32]},void 0,{_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-version"].forEach((n=>{if("kol-version"===n)customElements.get(n)||customElements.define(n,KolVersion$1)}))}const KolVersion=KolVersion$1,defineCustomElement=defineCustomElement$1;export{KolVersion,defineCustomElement};

package/dist/components/kol-version.js.map

@@ -1 +1 @@
-{"file":"kol-version.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,mqIAAmqI,CAAC;AAC5rI,gCAAe,eAAe;;MCejBA,YAAU;;;;;;qBAoBiB;YACtC,MAAM,EAAE,eAAe;SACvB;;IArBM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACxB,EAAC,WAAW,qDACX,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAAE;aAC3E,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GACxB,CACI,EACN;KACF;IAYM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolVersion"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
+{"file":"kol-version.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,wvIAAwvI,CAAC;AACjxI,gCAAe,eAAe;;MCejBA,YAAU;;;;;;qBAoBiB;YACtC,MAAM,EAAE,eAAe;SACvB;;IArBM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACxB,EAAC,WAAW,qDACX,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAAE;aAC3E,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GACxB,CACI,EACN;KACF;IAYM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolVersion"],"sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n","import type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

package/dist/components/open.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{c as watchBoolean}from"./prop.validators.js";const validateOpen=(a,o,e)=>{watchBoolean(a,"_open",o,e)};export{validateOpen as v};
+import{b as watchBoolean}from"./prop.validators.js";const validateOpen=(a,o,e)=>{watchBoolean(a,"_open",o,e)};export{validateOpen as v};

package/dist/components/prop.validators.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{L as Log,g as getDocument,a as getExperimentalMode}from"./dev.utils.js";var commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},loglevel={exports:{}};!function(e){var t,o;t=commonjsGlobal,o=function(){var e=function(){},t="undefined",o=typeof window!==t&&typeof window.navigator!==t&&/Trident\/|MSIE /.test(window.navigator.userAgent),n=["trace","debug","info","warn","error"],r={},a=null;function l(e,t){var o=e[t];if("function"==typeof o.bind)return o.bind(e);try{return Function.prototype.bind.call(o,e)}catch(t){return function(){return Function.prototype.apply.apply(o,[e,arguments])}}}function i(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function s(){for(var o=this.getLevel(),r=0;r<n.length;r++){var a=n[r];this[a]=r<o?e:this.methodFactory(a,o,this.name)}if(this.log=this.debug,typeof console===t&&o<this.levels.SILENT)return"No console available for logging"}function c(e){return function(){typeof console!==t&&(s.call(this),this[e].apply(this,arguments))}}function u(n,r,a){return function(n){return"debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?i:void 0!==console[n]?l(console,n):void 0!==console.log?l(console,"log"):e)}(n)||c.apply(this,arguments)}function d(e,o){var l,i,c,d=this,h="loglevel";function f(){var e;if(typeof window!==t&&h){try{e=window.localStorage[h]}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(h),r=o.indexOf(n+"=");-1!==r&&(e=/^([^;]+)/.exec(o.slice(r+n.length+1))[1])}catch(e){}return void 0===d.levels[e]&&(e=void 0),e}}function g(e){var t=e;if("string"==typeof t&&void 0!==d.levels[t.toUpperCase()]&&(t=d.levels[t.toUpperCase()]),"number"==typeof t&&t>=0&&t<=d.levels.SILENT)return t;throw new TypeError("log.setLevel() called with invalid level: "+e)}"string"==typeof e?h+=":"+e:"symbol"==typeof e&&(h=void 0),d.name=e,d.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},d.methodFactory=o||u,d.getLevel=function(){return null!=c?c:null!=i?i:l},d.setLevel=function(e,o){return c=g(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&h){try{return void(window.localStorage[h]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(h)+"="+o+";"}catch(e){}}}(c),s.call(d)},d.setDefaultLevel=function(e){i=g(e),f()||d.setLevel(e,!1)},d.resetLevel=function(){c=null,function(){if(typeof window!==t&&h){try{window.localStorage.removeItem(h)}catch(e){}try{window.document.cookie=encodeURIComponent(h)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch(e){}}}(),s.call(d)},d.enableAll=function(e){d.setLevel(d.levels.TRACE,e)},d.disableAll=function(e){d.setLevel(d.levels.SILENT,e)},d.rebuild=function(){if(a!==d&&(l=g(a.getLevel())),s.call(d),a===d)for(var e in r)r[e].rebuild()},l=g(a?a.getLevel():"WARN");var m=f();null!=m&&(c=g(m)),s.call(d)}(a=new d).getLogger=function(e){if("symbol"!=typeof e&&"string"!=typeof e||""===e)throw new TypeError("You must supply a name when creating a logger.");var t=r[e];return t||(t=r[e]=new d(e,a.methodFactory)),t};var h=typeof window!==t?window.log:void 0;return a.noConflict=function(){return typeof window!==t&&window.log===a&&(window.log=h),a},a.getLoggers=function(){return r},a.default=a,a},e.exports?e.exports=o():t.log=o()}(loglevel);const l=loglevel.exports,R=(e,t)=>o=>o(e,t),H=(e,t)=>o=>o(e,t,{append:!1}),$=new Map,M=[],Y=new Map,a$1={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};let T=!0,y=!1;const I=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,O=e=>"string"==typeof e&&I.test(e),A=e=>{if(!1===O(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},k=(e,t,o,n)=>p(e,t,o,n),p=(e,t,o,n)=>{(n=n??{}).append=n.append??!1,A(e),!0===T&&!1===y&&(y=!0,l.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\n\timport { register } from 'adopted-style-sheets';\n\timport { defineCustomElements } from '...';\n\timport { THEME } from '...';\n\n\tregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\t// run your app or website\n\t})\n\t.catch(console.warn);`)),("object"!=typeof a$1.A11yUi.Themes[e]||null===a$1.A11yUi.Themes[e])&&(a$1.A11yUi.Themes[e]={}),n.append&&"string"==typeof a$1.A11yUi.Themes[e][t]?a$1.A11yUi.Themes[e][t]+=o:a$1.A11yUi.Themes[e][t]=o},P=(e,t,o,n)=>u$1(e,t,o,n),u$1=(e,t,o,n)=>(A(e),"object"==typeof t&&null!==t&&Object.getOwnPropertyNames(t).forEach((r=>{const a=t[r],l=r.toLowerCase(),i="function"!=typeof n?.transformTagName||["GLOBAL","PROPERTIES"].includes(r)?r:n.transformTagName(l);"string"==typeof a&&a.length>0&&p(e,i.toUpperCase(),a,o)})),e),S=e=>{if(e instanceof HTMLElement){if("string"==typeof e.dataset.theme)return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return S(t)}}return null},U=(e={})=>"false"!==e.themeEncroachCss&&"true"!==e.themeReset&&{mode:"after"===e.themeEncroachCssMode||"before"===e.themeEncroachCssMode?e.themeEncroachCssMode:"before"},E=()=>"object"==typeof a$1.A11yUi&&null!==a$1.A11yUi&&"object"==typeof a$1.A11yUi.Theme&&null!==a$1.A11yUi.Theme&&"boolean"==typeof a$1.A11yUi.Theme.cache&&"object"==typeof a$1.A11yUi.Theme.encroachCss&&null!==a$1.A11yUi.Theme.encroachCss&&"string"==typeof a$1.A11yUi.Theme.encroachCss.mode&&"string"==typeof a$1.A11yUi.Theme.name,D=()=>!("object"==typeof a$1.A11yUi&&null!==a$1.A11yUi&&"object"==typeof a$1.A11yUi.Theme&&null!==a$1.A11yUi.Theme&&"default"===a$1.A11yUi.Theme.name),b=e=>{if(E())return a$1.A11yUi.Theme;{const t={cache:!0,encroachCss:U(),loglevel:"silent",mode:"csr",name:null},o=S(e);return o instanceof HTMLElement&&(t.cache="false"!==o.dataset.themeCache,t.encroachCss=U(o.dataset),t.loglevel="debug"===o.dataset.themeLoglevel?o.dataset.themeLoglevel:"silent",t.mode="ssr"===o.dataset.themeMode?o.dataset.themeMode:"csr",t.name=o.dataset.theme||null),t}},K=(e,t)=>({cache:!1!==t.cache,detect:"auto"===t.detect?"auto":"fixed",encroachCss:!1!==t.encroachCss&&("object"!=typeof t.encroachCss||null==t.encroachCss||"after"!==t.encroachCss.mode&&"before"!==t.encroachCss.mode?{mode:"before"}:t.encroachCss),loglevel:"debug"===t.loglevel?t.loglevel:"silent",mode:"ssr"===t.mode?t.mode:"csr",name:"string"==typeof t.name?t.name:e}),Q=(e,t)=>{!1===E()&&D()&&"object"==typeof t&&null!==t&&("fixed"===(t=K(e,t)).detect?(null===t.name&&"string"==typeof e&&(t.name=e),e===t.name&&(a$1.A11yUi.Theme=t,l.info(`[Theming] Theme "${e}" was set as default theme.`))):y||(y=!0,l.warn("[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode.")))};let C=!1;const F=(e,t,o={})=>{!1===C&&(C=!0,T=!1),"function"==typeof e?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach((e=>{"function"==typeof e&&1===e.length?Q(e(((e,t,n)=>u$1(e,t,n,o))),{cache:o.theme?.cache,detect:o.theme?.detect,encroachCss:o.theme?.encroachCss,mode:o.theme?.mode,name:o.theme?.name}):l.error("[Theming] An attempt was made to load an incompatible theme.")})),T=!0,"function"==typeof t?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const n=[];return t.forEach((e=>{const t=e();t instanceof Promise&&n.push(t)})),Promise.all(n)},w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let o=t.match(q);if(Array.isArray(o)){o=o.filter((e=>J.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t)}w.add(e)},f$1=(e,t)=>"object"==typeof a$1.A11yUi&&null!==a$1.A11yUi&&"object"==typeof a$1.A11yUi.Themes&&null!==a$1.A11yUi.Themes&&"object"==typeof a$1.A11yUi.Themes[e]&&null!==a$1.A11yUi.Themes[e]&&"string"==typeof a$1.A11yUi.Themes[e][t]?a$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName&&void 0===t.dataset.themingFallback))break;e.removeChild(t)}},X=(e,t)=>{try{if("ssr"===a$1.A11yUi.Theme?.mode)throw new Error("SSR");const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t)})),e.adoptedStyleSheets=o}catch{[...t].reverse().forEach(((t,o)=>{if("string"!=typeof t||0===t.length)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown=""}n.innerHTML=t,e.insertBefore(n,e.firstChild)}))}},Z=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)]}catch{r=[]}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))))}},L=(e,t,o)=>{const n=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot}catch{r=e}if(a$1.A11yUi.CSS_STYLE_CACHE.get(n)?.has(e.tagName))_(e,r,a$1.A11yUi.CSS_STYLE_CACHE.get(n)?.get(e.tagName),o);else{const a=f$1(n,"PROPERTIES"),l=f$1(n,"GLOBAL"),i=f$1(n,e.tagName);!1===w.has(n)&&V(n,l);const s=[a,l,i];Z(r,s,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,s),!0===t.cache&&(!1===a$1.A11yUi.CSS_STYLE_CACHE.has(n)&&a$1.A11yUi.CSS_STYLE_CACHE.set(n,new Map),a$1.A11yUi.CSS_STYLE_CACHE.get(n)?.set(e.tagName,s)),_(e,r,s,o)}},_=(e,t,o,n)=>{W(t),X(t,o),e.style.display=n},N=e=>{"debug"===e.loglevel&&a$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a$1.A11yUi.STYLING_TASK_QUEUE.size})},ee=(e,t)=>{a$1.A11yUi.STYLING_TASK_QUEUE.set(e,{styleDisplay:e.style.display?`${e.style.display}`:null,themeDetails:t})},te=(e,t)=>{ee(e,t),N(t)},se=e=>{a$1.A11yUi.STYLING_TASK_QUEUE.delete(e)},j=(e,t)=>{se(e),N(t)},v=e=>{const t=setTimeout((()=>{if(clearTimeout(t),a$1.A11yUi.STYLING_TASK_QUEUE.has(e)&&e.classList.contains("hydrated")){const{styleDisplay:t,themeDetails:o}=a$1.A11yUi.STYLING_TASK_QUEUE.get(e);L(e,o,t),j(e,o)}else v(e)}),25)},oe=e=>{for(const t of e)if(a$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=a$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,e),j(t.target,o)}},ae={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let d;try{d=new MutationObserver(oe)}catch{d=null}const ne=(e,t)=>{t={...a$1.A11yUi.Theme,...t},te(e,t),d?d.observe(e,ae):v(e),e.style.display="none"};class re{constructor(e,t,o){this.createTheme=(e,t)=>H(e,t),this.createTranslation=(e,t)=>R(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o)}}const a11yCache=new Set,a11yHint=(e,t)=>{(!1===a11yCache.has(e)||(null==t?void 0:t.force))&&(a11yCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},deprecatedCache=new Set,deprecatedHint=(e,t)=>{(!1===deprecatedCache.has(e)||(null==t?void 0:t.force))&&(deprecatedCache.add(e),Log.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},devCache=new Set,devHint=(e,t)=>{(!1===devCache.has(e)||(null==t?void 0:t.force))&&(devCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},devWarning=(e,t)=>{(!1===devCache.has(e)||(null==t?void 0:t.force))&&(devCache.add(e),Log.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},featureCache=new Set,featureHint=(e,t=!1,o)=>{(!1===featureCache.has(e)||(null==o?void 0:o.force))&&(featureCache.add(e),e+=!0===t?" ✅":"",Log.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};devHint("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const uiUxCache=new Set,uiUxHint=(e,t)=>{(!1===uiUxCache.has(e)||(null==t?void 0:t.force))&&(uiUxCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},a11yHintDisabled=()=>{a11yHint('"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},a11yHintLabelingLandmarks=e=>{"string"==typeof e&&""!==e||a11yHint("Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},uiUxHintMillerscheZahl=(e,t=8)=>{t>7&&uiUxHint(`[${e}] Within navigation structures, it is recommended to use no more than 7 menu items.\n\nLink:\n- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`)};var n=.2126,r=.7152,t=.0722,e=1/12.92;function u(e){return Math.pow((e+.055)/1.055,2.4)}function a(o){var a=o[0]/255,l=o[1]/255,i=o[2]/255,s=a<=.03928?a*e:u(a),c=l<=.03928?l*e:u(l),d=i<=.03928?i*e:u(i);return s*n+c*r+d*t}function i(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var o=parseInt(e,16);return[o>>16,o>>8&255,255&o,t]}function c(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}function o(e,t){return c(a(e),a(t))}function s(e,t){return o(i(e),i(t))}function f(e){return e>=7?"AAA":e>=4.5?"AA":e>=3?"AA Large":"Fail"}var rgbaConvert={exports:{}};function arr(e){var t=parse(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function obj(e){var t=parse(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}}function css(e){var t=parse(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"}function hex(e){3==(t=parse(e)).length&&t.push(255);var t,o=255==t[3],n=num2hex(t[0]),r=num2hex(t[1]),a=num2hex(t[2]),l=isshort(n,r,a,t=num2hex(Math.round(t[3])));return o?l?"#"+n.charAt(0)+r.charAt(0)+a.charAt(0):"#"+n+r+a:l?"#"+n.charAt(0)+r.charAt(0)+a.charAt(0)+t.charAt(0):"#"+n+r+a+t}function num(e){var t=parse(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0}function parse(e){return"string"==typeof e?name(e=e.toLowerCase())||hex3(e)||hex6(e)||rgb(e)||rgba(e)||[0,0,0,255]:object(e)||array(e)||number(e)||[0,0,0,255]}function num2hex(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function isshort(e,t,o,n){var r=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=r.indexOf(e)&&-1!=r.indexOf(t)&&-1!=r.indexOf(o)&&-1!=r.indexOf(n)}function name(e){return"red"==e?[255,0,0]:"green"==e?[0,255,0]:"blue"==e?[0,0,255]:"black"==e?[0,0,0]:"white"==e?[255,255,255]:"cyan"==e?[0,255,255]:"gray"==e||"grey"==e?[128,128,128]:"magenta"==e||"pink"==e?[255,0,255]:"yellow"==e?[255,255,0]:void 0}function hex2num(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function hex3(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var n=hex2num(t[0]),r=hex2num(t[1]),a=hex2num(t[2]),l=3==o?255:hex2num(t[3]);if(isNaN(n)||isNaN(r)||isNaN(a)||isNaN(l))return;return[n,r,a,l]}}function hex6(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var n=hex2num(t.slice(0,2)),r=hex2num(t.slice(2,4)),a=hex2num(t.slice(4,6)),l=6==o?255:hex2num(t.slice(6,8));if(isNaN(n)||isNaN(r)||isNaN(a)||isNaN(l))return;return[n,r,a,l]}}function getnum(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function object(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=getnum(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=getnum(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=getnum(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),r=getnum(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=o&&-1!=n&&-1!=r)return[t,o,n,r]}}function array(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=getnum(e[0],!0),o=getnum(e[1],!0),n=getnum(e[2],!0),r=getnum(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=n&&-1!=r)return[t,o,n,r]}}function number(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}function rgb(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=getnum(t[0],!0),n=getnum(t[1],!0),r=getnum(t[2],!0);if(-1!=o&&-1!=n&&-1!=r)return[o,n,r,255]}}function rgba(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=getnum(t[0],!0),n=getnum(t[1],!0),r=getnum(t[2],!0),a=getnum(255*t[3]);if(-1!=o&&-1!=n&&-1!=r&&-1!=a)return[o,n,r,a]}}rgbaConvert.exports=arr,rgbaConvert.exports.arr=arr,rgbaConvert.exports.obj=obj,rgbaConvert.exports.css=css,rgbaConvert.exports.hex=hex,rgbaConvert.exports.num=num;const rgba$1=rgbaConvert.exports,pushNodes=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},querySelectorAll=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;pushNodes(o,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const r=n[t].shadowRoot;pushNodes(o,querySelectorAll(e,"object"==typeof r&&null!==r?r:n[t]))}return Array.from(o)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},querySelector=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let o=t.querySelector(e);if(null===o){const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const r=n[t].shadowRoot;if(o=querySelector(e,"object"==typeof r&&null!==r?r:n[t]),null!==o)break}}return o}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},OBJECT_OBJECT=/\[object Object\]/,objectObjectHandler=(e,t)=>{"string"==typeof e&&OBJECT_OBJECT.test(e)||t()},emptyStringByArrayHandler=(e,t)=>{"string"==typeof e&&""===e||t()},setEventTarget=(e,t)=>{getExperimentalMode()&&(Log.debug([e,t]),Log.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},patchState=e=>{var t,o,n;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,o)=>{var n;const r=t.get("beforePatch");"function"==typeof r&&r(null===(n=e.nextState)||void 0===n?void 0:n.get(o),e.nextState,e,o)})),(null===(o=e.nextState)||void 0===o?void 0:o.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(n=e.nextHooks)||void 0===n||n.forEach(((t,o)=>{const n=t.get("afterPatch");"function"==typeof n&&n(e.state[o],e.state,e,o)}))),delete e.nextHooks},setState=(e,t,o,n={})=>{var r,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map);e.nextHooks.get(t)instanceof Map==!1&&e.nextHooks.set(t,new Map),"function"==typeof n.afterPatch&&(null===(r=e.nextHooks.get(t))||void 0===r||r.set("afterPatch",n.afterPatch)),"function"==typeof n.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",n.beforePatch)),e.nextState.set(t,o),patchState(e)},logWarn=(e,t,o,n)=>{devHint(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(n).join(", ")}`)};function watchValidator(e,t,o,n,r,a={}){o(r)?setState(e,t,r,a.hooks):void 0===r&&!0!==a.required&&o(a.defaultValue)?setState(e,t,a.defaultValue,a.hooks):(a.required||n.add(null),logWarn(e,t,r,n))}const watchBoolean=(e,t,o,n)=>{watchValidator(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,n)},watchString=(e,t,o,n={})=>{const r="number"==typeof n.minLength?null==n?void 0:n.minLength:0;watchValidator(e,t,(e=>"string"==typeof e&&e.length>=r&&(void 0===(null==n?void 0:n.maxLength)||e.length<=n.maxLength)),new Set(["String"]),o,n)},watchNumber=(e,t,o,n)=>{watchValidator(e,t,(e=>"number"==typeof e&&(void 0===(null==n?void 0:n.min)||"number"==typeof(null==n?void 0:n.min)&&e>=n.min)&&(void 0===(null==n?void 0:n.max)||"number"==typeof(null==n?void 0:n.max)&&e<=n.max)),new Set(["Number"]),o,n)},watchJsonArrayString=(e,t,o,n,r=e=>e==e,a={})=>{emptyStringByArrayHandler(n,(()=>{objectObjectHandler(n,(()=>{void 0===n&&(n=[]);try{try{n=parseJson(n)}catch(e){}if(Array.isArray(n)){const l=n.find((e=>!o(e)));void 0===l&&r(n)?setState(e,t,n,a.hooks):objectObjectHandler(l,(()=>{throw Log.debug(l),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else objectObjectHandler(n,(()=>{throw Log.debug(n),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){Log.debug(e)}}))}))},stringifyJson=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw Log.warn(["stringifyJson",e]),Log.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},JSON_CHARS=/^[{[]/,parseJson=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(JSON_CHARS.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){Log.warn(["parseJson",e]),Log.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).")}}throw new Error},mapBoolean2String=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,mapStringOrBoolean2String=e=>"string"==typeof e?e:mapBoolean2String(e),koliBriQuerySelector=(e,t)=>querySelector(e,t||getDocument()),koliBriQuerySelectorAll=(e,t)=>querySelectorAll(e,t||getDocument());let DEFAULT_COLOR_CONTRAST=null;const getDefaultColorContrast=()=>(DEFAULT_COLOR_CONTRAST=DEFAULT_COLOR_CONTRAST||{backgroundColor:"#00000000",color:"#00000000",domNode:getDocument().body,level:"Fail",score:1},DEFAULT_COLOR_CONTRAST),TRANSPARENT_REGEXP=/(\d+, ){3}0\)/,koliBriA11yColorContrast=(e,t=getDefaultColorContrast())=>{const o=getComputedStyle(e),n=TRANSPARENT_REGEXP.test(o.backgroundColor)?t.backgroundColor:rgba$1.hex(o.backgroundColor),r=TRANSPARENT_REGEXP.test(o.color)?t.color:rgba$1.hex(o.color),a=s(n,r),l={backgroundColor:n,color:r,domNode:e,level:f(a),score:a};return a<4.5&&Log.error(["Color-Contrast-Error",{backgroundColor:l.backgroundColor,color:l.color,level:l.level,score:l.score},l.domNode]),l},koliBriQuerySelectorColors=(e,t=getDefaultColorContrast())=>{t.domNode instanceof HTMLElement&&(t=koliBriA11yColorContrast(t.domNode,t));const o=t.domNode.querySelector(e);if(null===o){const o=t.domNode.querySelectorAll('[class="hydrated"]');for(let n=0;n<o.length&&(t.domNode=o[n],null===(t=koliBriQuerySelectorColors(e,t)).domNode);n++);return t}return koliBriA11yColorContrast(o,t)};class KoliBriUtils{static queryHtmlElementColors(e,t,o=!1,n=!0){let r=null;if(!0===o||!1===KoliBriUtils.executionLock)if(!1===o&&(KoliBriUtils.cache.clear(),KoliBriUtils.cache.set(t.domNode,t),KoliBriUtils.executionLock=!0,!0===n&&Log.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)r=t;else{const o=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)o.add(e[t])}const n=t.domNode;if("function"==typeof n.assignedNodes){const e=n.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&o.add(e[t])}const a=t.domNode.children;for(let e=0;e<a.length;e++)o.add(a[e]);const l=Array.from(o);for(let o=0;o<l.length;o++){let n=KoliBriUtils.cache.get(l[o]);void 0===n&&(n=koliBriA11yColorContrast(l[o],t)),KoliBriUtils.cache.set(l[o],n);const a=KoliBriUtils.queryHtmlElementColors(e,n,!0,!1);if(null!==a){r=a;break}}}else Log.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===n&&Log.debug(`[KoliBriUtils] Color contrast analysis finished (${KoliBriUtils.cache.size} DOM elements are analysed).`),KoliBriUtils.executionLock=!1,KoliBriUtils.cache.clear()),r}}KoliBriUtils.executionLock=!1,KoliBriUtils.cache=new Map;class KoliBriDevHelper{}KoliBriDevHelper.getCssStyle=f$1,KoliBriDevHelper.patchTheme=P,KoliBriDevHelper.patchThemeTag=k,KoliBriDevHelper.querySelector=koliBriQuerySelector,KoliBriDevHelper.querySelectorAll=koliBriQuerySelectorAll,KoliBriDevHelper.stringifyJson=stringifyJson;export{koliBriQuerySelector as A,koliBriA11yColorContrast as B,koliBriQuerySelectorAll as C,koliBriQuerySelectorColors as D,KoliBriUtils as E,F,stringifyJson as G,KoliBriDevHelper as K,a11yHint as a,b,watchBoolean as c,a11yHintDisabled as d,watchString as e,featureHint as f,rgba$1 as g,s as h,a11yHintLabelingLandmarks as i,watchJsonArrayString as j,uiUxHintMillerscheZahl as k,mapStringOrBoolean2String as l,mapBoolean2String as m,ne as n,objectObjectHandler as o,parseJson as p,setEventTarget as q,re as r,setState as s,devHint as t,uiUxHint as u,devWarning as v,watchValidator as w,watchNumber as x,deprecatedHint as y,emptyStringByArrayHandler as z};
+import{L as Log,g as getDocument,a as getExperimentalMode}from"./dev.utils.js";var commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},loglevel={exports:{}};!function(e){var t,o;t=commonjsGlobal,o=function(){var e=function(){},t="undefined",o=typeof window!==t&&typeof window.navigator!==t&&/Trident\/|MSIE /.test(window.navigator.userAgent),n=["trace","debug","info","warn","error"],r={},a=null;function i(e,t){var o=e[t];if("function"==typeof o.bind)return o.bind(e);try{return Function.prototype.bind.call(o,e)}catch(t){return function(){return Function.prototype.apply.apply(o,[e,arguments])}}}function l(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace()}function s(){for(var o=this.getLevel(),r=0;r<n.length;r++){var a=n[r];this[a]=r<o?e:this.methodFactory(a,o,this.name)}if(this.log=this.debug,typeof console===t&&o<this.levels.SILENT)return"No console available for logging"}function c(e){return function(){typeof console!==t&&(s.call(this),this[e].apply(this,arguments))}}function u(n,r,a){return function(n){return"debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?l:void 0!==console[n]?i(console,n):void 0!==console.log?i(console,"log"):e)}(n)||c.apply(this,arguments)}function d(e,o){var i,l,c,d=this,h="loglevel";function f(){var e;if(typeof window!==t&&h){try{e=window.localStorage[h]}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(h),r=o.indexOf(n+"=");-1!==r&&(e=/^([^;]+)/.exec(o.slice(r+n.length+1))[1])}catch(e){}return void 0===d.levels[e]&&(e=void 0),e}}function g(e){var t=e;if("string"==typeof t&&void 0!==d.levels[t.toUpperCase()]&&(t=d.levels[t.toUpperCase()]),"number"==typeof t&&t>=0&&t<=d.levels.SILENT)return t;throw new TypeError("log.setLevel() called with invalid level: "+e)}"string"==typeof e?h+=":"+e:"symbol"==typeof e&&(h=void 0),d.name=e,d.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},d.methodFactory=o||u,d.getLevel=function(){return null!=c?c:null!=l?l:i},d.setLevel=function(e,o){return c=g(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&h){try{return void(window.localStorage[h]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(h)+"="+o+";"}catch(e){}}}(c),s.call(d)},d.setDefaultLevel=function(e){l=g(e),f()||d.setLevel(e,!1)},d.resetLevel=function(){c=null,function(){if(typeof window!==t&&h){try{window.localStorage.removeItem(h)}catch(e){}try{window.document.cookie=encodeURIComponent(h)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC"}catch(e){}}}(),s.call(d)},d.enableAll=function(e){d.setLevel(d.levels.TRACE,e)},d.disableAll=function(e){d.setLevel(d.levels.SILENT,e)},d.rebuild=function(){if(a!==d&&(i=g(a.getLevel())),s.call(d),a===d)for(var e in r)r[e].rebuild()},i=g(a?a.getLevel():"WARN");var m=f();null!=m&&(c=g(m)),s.call(d)}(a=new d).getLogger=function(e){if("symbol"!=typeof e&&"string"!=typeof e||""===e)throw new TypeError("You must supply a name when creating a logger.");var t=r[e];return t||(t=r[e]=new d(e,a.methodFactory)),t};var h=typeof window!==t?window.log:void 0;return a.noConflict=function(){return typeof window!==t&&window.log===a&&(window.log=h),a},a.getLoggers=function(){return r},a.default=a,a},e.exports?e.exports=o():t.log=o()}(loglevel);const h=loglevel.exports,j=(e,t)=>o=>o(e,t),H=(e,t)=>o=>o(e,t,{append:!1}),M=new Map,Y=[],$=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:M,HYDRATED_HISTORY:Y,STYLING_TASK_QUEUE:$,Themes:{}}};let T=!0,y=!1;const I=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,O=e=>"string"==typeof e&&I.test(e),p=e=>{if(!1===O(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},R=(e,t,o,n)=>u$1(e,t,o,n),u$1=(e,t,o,n)=>{(n=n??{}).append=n.append??!1,p(e),!0===T&&!1===y&&(y=!0,h.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\n\timport { register } from 'adopted-style-sheets';\n\timport { defineCustomElements } from '...';\n\timport { THEME } from '...';\n\n\tregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\t// run your app or website\n\t})\n\t.catch(console.warn);`)),("object"!=typeof o$1.A11yUi.Themes[e]||null===o$1.A11yUi.Themes[e])&&(o$1.A11yUi.Themes[e]={}),n.append&&"string"==typeof o$1.A11yUi.Themes[e][t]?o$1.A11yUi.Themes[e][t]+=o:o$1.A11yUi.Themes[e][t]=o},P=(e,t,o,n)=>g(e,t,o,n),g=(e,t,o,n)=>(p(e),"object"==typeof t&&null!==t&&Object.getOwnPropertyNames(t).forEach((r=>{const a=t[r],i=r.toLowerCase(),l="function"!=typeof n?.transformTagName||["GLOBAL","PROPERTIES"].includes(r)?r:n.transformTagName(i);"string"==typeof a&&a.length>0&&u$1(e,l.toUpperCase(),a,o)})),e),A=e=>{if(e instanceof HTMLElement){if("string"==typeof e.dataset.theme)return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return A(t)}}return null},U=(e={})=>"false"!==e.themeEncroachCss&&"true"!==e.themeReset&&{mode:"after"===e.themeEncroachCssMode||"before"===e.themeEncroachCssMode?e.themeEncroachCssMode:"before"},E=()=>"object"==typeof o$1.A11yUi&&null!==o$1.A11yUi&&"object"==typeof o$1.A11yUi.Theme&&null!==o$1.A11yUi.Theme&&"boolean"==typeof o$1.A11yUi.Theme.cache&&"object"==typeof o$1.A11yUi.Theme.encroachCss&&null!==o$1.A11yUi.Theme.encroachCss&&"string"==typeof o$1.A11yUi.Theme.encroachCss.mode&&"string"==typeof o$1.A11yUi.Theme.name,k=()=>!("object"==typeof o$1.A11yUi&&null!==o$1.A11yUi&&"object"==typeof o$1.A11yUi.Theme&&null!==o$1.A11yUi.Theme&&"default"===o$1.A11yUi.Theme.name),S=e=>{if(E())return o$1.A11yUi.Theme;{const t={cache:!0,encroachCss:U(),loglevel:"silent",mode:"csr",name:null},o=A(e);return o instanceof HTMLElement&&(t.cache="false"!==o.dataset.themeCache,t.encroachCss=U(o.dataset),t.loglevel="debug"===o.dataset.themeLoglevel?o.dataset.themeLoglevel:"silent",t.mode="ssr"===o.dataset.themeMode?o.dataset.themeMode:"csr",t.name=o.dataset.theme||null),t}},K=(e,t)=>({cache:!1!==t.cache,detect:"auto"===t.detect?"auto":"fixed",encroachCss:!1!==t.encroachCss&&("object"!=typeof t.encroachCss||null==t.encroachCss||"after"!==t.encroachCss.mode&&"before"!==t.encroachCss.mode?{mode:"before"}:t.encroachCss),loglevel:"debug"===t.loglevel?t.loglevel:"silent",mode:"ssr"===t.mode?t.mode:"csr",name:"string"==typeof t.name?t.name:e}),D=(e,t)=>{!1===E()&&k()&&"object"==typeof t&&null!==t&&("fixed"===(t=K(e,t)).detect?(null===t.name&&"string"==typeof e&&(t.name=e),e===t.name&&(o$1.A11yUi.Theme=t,h.info(`[Theming] Theme "${e}" was set as default theme.`))):y||(y=!0,h.warn("[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode.")))};let b=!1;const B=(e,t,o={})=>{!1===b&&(b=!0,T=!1),"function"==typeof e?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach((e=>{"function"==typeof e&&1===e.length?D(e(((e,t,n)=>g(e,t,n,o))),{cache:o.theme?.cache,detect:o.theme?.detect,encroachCss:o.theme?.encroachCss,mode:o.theme?.mode,name:o.theme?.name}):h.error("[Theming] An attempt was made to load an incompatible theme.")})),T=!0,"function"==typeof t?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const n=[];return t.forEach((e=>{const t=e();t instanceof Promise&&n.push(t)})),Promise.all(n)},C=new Set,F=/--[^;]+/g,V=/:/,q=(e,t)=>{let o=t.match(F);if(Array.isArray(o)){o=o.filter((e=>V.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t)}C.add(e)},f$1=(e,t)=>"object"==typeof o$1.A11yUi&&null!==o$1.A11yUi&&"object"==typeof o$1.A11yUi.Themes&&null!==o$1.A11yUi.Themes&&"object"==typeof o$1.A11yUi.Themes[e]&&null!==o$1.A11yUi.Themes[e]&&"string"==typeof o$1.A11yUi.Themes[e][t]?o$1.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",J=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName&&void 0===t.dataset.themingFallback))break;e.removeChild(t)}},W=(e,t)=>{try{if("ssr"===o$1.A11yUi.Theme?.mode)throw new Error("SSR");const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t)})),e.adoptedStyleSheets=o}catch{[...t].reverse().forEach(((t,o)=>{if("string"!=typeof t||0===t.length)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown=""}n.innerHTML=t,e.insertBefore(n,e.firstChild)}))}},X=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)]}catch{r=[]}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))))}},w=(e,t,o)=>{const n=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot}catch{r=e}if(o$1.A11yUi.CSS_STYLE_CACHE.get(n)?.has(e.tagName))L(e,r,o$1.A11yUi.CSS_STYLE_CACHE.get(n)?.get(e.tagName),o);else{const a=f$1(n,"PROPERTIES"),i=f$1(n,"GLOBAL"),l=f$1(n,e.tagName);!1===C.has(n)&&q(n,i);const s=[a,i,l];X(r,s,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,s),!0===t.cache&&(!1===o$1.A11yUi.CSS_STYLE_CACHE.has(n)&&o$1.A11yUi.CSS_STYLE_CACHE.set(n,new Map),o$1.A11yUi.CSS_STYLE_CACHE.get(n)?.set(e.tagName,s)),L(e,r,s,o)}},L=(e,t,o,n)=>{J(t),W(t,o),e.style.visibility=n},v=e=>{"debug"===e.loglevel&&o$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o$1.A11yUi.STYLING_TASK_QUEUE.size})},Z=(e,t)=>{o$1.A11yUi.STYLING_TASK_QUEUE.set(e,{styleVisibility:e.style.visibility?`${e.style.visibility}`:null,themeDetails:t})},ee=(e,t)=>{Z(e,t),v(t)},te=e=>{o$1.A11yUi.STYLING_TASK_QUEUE.delete(e)},_=(e,t)=>{te(e),v(t)},N=e=>{const t=setTimeout((()=>{if(clearTimeout(t),o$1.A11yUi.STYLING_TASK_QUEUE.has(e)&&e.classList.contains("hydrated")){const{styleVisibility:t,themeDetails:o}=o$1.A11yUi.STYLING_TASK_QUEUE.get(e);w(e,o,t),_(e,o)}else N(e)}),25)},se=e=>{for(const t of e)if(o$1.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleVisibility:e,themeDetails:o}=o$1.A11yUi.STYLING_TASK_QUEUE.get(t.target);w(t.target,o,e),_(t.target,o)}},ae={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let d;try{d=new MutationObserver(se)}catch{d=null}const oe=(e,t)=>{t={...o$1.A11yUi.Theme,...t},ee(e,t),d?d.observe(e,ae):N(e),e.style.visibility="hidden"};class ne{Prefix;Key;Tag;createTheme=(e,t)=>H(e,t);createTranslation=(e,t)=>j(e,t);constructor(e,t,o){this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o)}}const a11yCache=new Set,a11yHint=(e,t)=>{(!1===a11yCache.has(e)||(null==t?void 0:t.force))&&(a11yCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"✋ a11y",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #09f"}))},deprecatedCache=new Set,deprecatedHint=(e,t)=>{(!1===deprecatedCache.has(e)||(null==t?void 0:t.force))&&(deprecatedCache.add(e),Log.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"🔥 deprecated",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f00"}))},devCache=new Set,devHint=(e,t)=>{(!1===devCache.has(e)||(null==t?void 0:t.force))&&(devCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"💻 dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},devWarning=(e,t)=>{(!1===devCache.has(e)||(null==t?void 0:t.force))&&(devCache.add(e),Log.warn([e].concat((null==t?void 0:t.details)||[]),{classifier:"⚠️ dev",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #f09"}))},featureCache=new Set,featureHint=(e,t=!1,o)=>{(!1===featureCache.has(e)||(null==o?void 0:o.force))&&(featureCache.add(e),e+=!0===t?" ✅":"",Log.debug([e].concat((null==o?void 0:o.details)||[]),{classifier:"🌟 feature",forceLog:!!(null==o?void 0:o.force),overwriteStyle:"; background-color: #309"}))};devHint("We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!");const uiUxCache=new Set,uiUxHint=(e,t)=>{(!1===uiUxCache.has(e)||(null==t?void 0:t.force))&&(uiUxCache.add(e),Log.debug([e].concat((null==t?void 0:t.details)||[]),{classifier:"📑 ui/ux",forceLog:!!(null==t?void 0:t.force),overwriteStyle:"; background-color: #060;"}))},a11yHintDisabled=()=>{a11yHint('"Disabled" limits accessibility and visibility. From an accessibility perspective, we recommend using the readonly attribute instead of disabled.\n- https://uxdesign.cc/is-it-ok-to-grey-out-disabled-buttons-8afa74a0fae')},a11yHintLabelingLandmarks=e=>{"string"==typeof e&&""!==e||a11yHint("Some structural elements, such as the nav tag, can be used multiple times on a webpage. To distinguish between similarly named structural elements, it is necessary to set an ARIA label.\n- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role#accessibility_concerns")},uiUxHintMillerscheZahl=(e,t=8)=>{t>7&&uiUxHint(`[${e}] Within navigation structures, it is recommended to use no more than 7 menu items.\n\nLink:\n- https://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two`)};var n=.2126,r=.7152,t=.0722,e=1/12.92;function u(e){return Math.pow((e+.055)/1.055,2.4)}function a(o){var a=o[0]/255,i=o[1]/255,l=o[2]/255,s=a<=.03928?a*e:u(a),c=i<=.03928?i*e:u(i),d=l<=.03928?l*e:u(l);return s*n+c*r+d*t}function i(e){var t=255;8===(e=e.replace(/^#/,"")).length&&(t=parseInt(e.slice(6,8),16),e=e.substring(0,6)),4===e.length&&(t=parseInt(e.slice(3,4).repeat(2),16),e=e.substring(0,3)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]);var o=parseInt(e,16);return[o>>16,o>>8&255,255&o,t]}function c(e,t){return(Math.max(e,t)+.05)/(Math.min(e,t)+.05)}function o(e,t){return c(a(e),a(t))}function s(e,t){return o(i(e),i(t))}function f(e){return e>=7?"AAA":e>=4.5?"AA":e>=3?"AA Large":"Fail"}var rgbaConvert={exports:{}};function arr(e){var t=parse(e);return 3==t.length?t.concat(255):(t[3]=Math.round(t[3]),t)}function obj(e){var t=parse(e);return{r:t[0],g:t[1],b:t[2],a:3==t.length?255:Math.round(t[3])}}function css(e){var t=parse(e);return 3==t.length&&t.push(255),255==t[3]?"rgb("+t[0]+", "+t[1]+", "+t[2]+")":0==t[3]?"rgba("+t[0]+", "+t[1]+", "+t[2]+", 0)":"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+String(t[3]/255).substr(1)+")"}function hex(e){3==(t=parse(e)).length&&t.push(255);var t,o=255==t[3],n=num2hex(t[0]),r=num2hex(t[1]),a=num2hex(t[2]),i=isshort(n,r,a,t=num2hex(Math.round(t[3])));return o?i?"#"+n.charAt(0)+r.charAt(0)+a.charAt(0):"#"+n+r+a:i?"#"+n.charAt(0)+r.charAt(0)+a.charAt(0)+t.charAt(0):"#"+n+r+a+t}function num(e){var t=parse(e);return 3==t.length?t.push(255):t[3]=Math.round(t[3]),(t[3]<<24>>>0|t[0]<<16|t[1]<<8|t[2])>>>0}function parse(e){return"string"==typeof e?name(e=e.toLowerCase())||hex3(e)||hex6(e)||rgb(e)||rgba(e)||[0,0,0,255]:object(e)||array(e)||number(e)||[0,0,0,255]}function num2hex(e){var t=e.toString(16);return 1==t.length?"0"+t:t}function isshort(e,t,o,n){var r=["ff","00","11","22","33","44","55","66","77","88","99","aa","bb","cc","dd","ee"];return-1!=r.indexOf(e)&&-1!=r.indexOf(t)&&-1!=r.indexOf(o)&&-1!=r.indexOf(n)}function name(e){return"red"==e?[255,0,0]:"green"==e?[0,255,0]:"blue"==e?[0,0,255]:"black"==e?[0,0,0]:"white"==e?[255,255,255]:"cyan"==e?[0,255,255]:"gray"==e||"grey"==e?[128,128,128]:"magenta"==e||"pink"==e?[255,0,255]:"yellow"==e?[255,255,0]:void 0}function hex2num(e){return 1==e.length?parseInt(e+e,16):parseInt(e,16)}function hex3(e){var t=e.replace(/^#/,""),o=t.length;if(3==o||4==o){var n=hex2num(t[0]),r=hex2num(t[1]),a=hex2num(t[2]),i=3==o?255:hex2num(t[3]);if(isNaN(n)||isNaN(r)||isNaN(a)||isNaN(i))return;return[n,r,a,i]}}function hex6(e){var t=e.replace(/^#/,""),o=t.length;if(6==o||8==o){var n=hex2num(t.slice(0,2)),r=hex2num(t.slice(2,4)),a=hex2num(t.slice(4,6)),i=6==o?255:hex2num(t.slice(6,8));if(isNaN(n)||isNaN(r)||isNaN(a)||isNaN(i))return;return[n,r,a,i]}}function getnum(e,t){return"number"!=typeof e||!0===t&&Math.floor(e)!==e?-1:e>=0&&e<=255?e:-1}function object(e){if("[object Object]"===Object.prototype.toString.call(e)&&Object.getPrototypeOf(e)===Object.getPrototypeOf({})){var t=getnum(null!=e.r?e.r:null!=e.red?e.red:0,!0),o=getnum(null!=e.g?e.g:null!=e.green?e.green:0,!0),n=getnum(null!=e.b?e.b:null!=e.blue?e.blue:0,!0),r=getnum(null!=e.a?e.a:null!=e.alpha?e.alpha:255,!0);if(-1!=t&&-1!=o&&-1!=n&&-1!=r)return[t,o,n,r]}}function array(e){if(Array.isArray(e)&&(3==e.length||4==e.length)){var t=getnum(e[0],!0),o=getnum(e[1],!0),n=getnum(e[2],!0),r=getnum(null!=e[3]?e[3]:255,!0);if(-1!=t&&-1!=o&&-1!=n&&-1!=r)return[t,o,n,r]}}function number(e){if("number"==typeof e&&Math.floor(e)==e&&e<=4294967295&&e>=0)return[e>>16&255,e>>8&255,255&e,e>>24&255]}function rgb(e){if("rgb("==e.substr(0,4)){var t=(e=e.match(/^rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=getnum(t[0],!0),n=getnum(t[1],!0),r=getnum(t[2],!0);if(-1!=o&&-1!=n&&-1!=r)return[o,n,r,255]}}function rgba(e){if("rgba("==e.substr(0,5)){var t=(e=e.match(/^rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number),o=getnum(t[0],!0),n=getnum(t[1],!0),r=getnum(t[2],!0),a=getnum(255*t[3]);if(-1!=o&&-1!=n&&-1!=r&&-1!=a)return[o,n,r,a]}}rgbaConvert.exports=arr,rgbaConvert.exports.arr=arr,rgbaConvert.exports.obj=obj,rgbaConvert.exports.css=css,rgbaConvert.exports.hex=hex,rgbaConvert.exports.num=num;const rgba$1=rgbaConvert.exports,pushNodes=(e,t)=>{t.forEach((t=>{!1===e.has(t)&&e.add(t)}))},querySelectorAll=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){const o=new Set;pushNodes(o,t.querySelectorAll(e));const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const r=n[t].shadowRoot;pushNodes(o,querySelectorAll(e,"object"==typeof r&&null!==r?r:n[t]))}return Array.from(o)}throw new Error("The parameter document for the method querySelectorAll is not type of Document, HTMLElement or ShadowRoot.")},querySelector=(e,t=document)=>{if(t instanceof Document||t instanceof HTMLElement||t instanceof ShadowRoot){let o=t.querySelector(e);if(null===o){const n=t.querySelectorAll('[class*="hydrated"]');for(let t=0;t<n.length;t++){const r=n[t].shadowRoot;if(o=querySelector(e,"object"==typeof r&&null!==r?r:n[t]),null!==o)break}}return o}throw new Error("The parameter document for the method querySelector is not type of Document, HTMLElement or ShadowRoot.")},OBJECT_OBJECT=/\[object Object\]/,objectObjectHandler=(e,t)=>{"string"==typeof e&&OBJECT_OBJECT.test(e)||t()},emptyStringByArrayHandler=(e,t)=>{"string"==typeof e&&""===e||t()},setEventTarget=(e,t)=>{getExperimentalMode()&&(Log.debug([e,t]),Log.debug("↑ We propagate the (submit) event to this target.")),Object.defineProperty(e,"target",{value:t,writable:!1})},patchState=e=>{var t,o,n;null===(t=e.nextHooks)||void 0===t||t.forEach(((t,o)=>{var n;const r=t.get("beforePatch");"function"==typeof r&&r(null===(n=e.nextState)||void 0===n?void 0:n.get(o),e.nextState,e,o)})),(null===(o=e.nextState)||void 0===o?void 0:o.size)>0&&(e.state=Object.assign(Object.assign({},e.state),Object.fromEntries(e.nextState)),delete e.nextState,null===(n=e.nextHooks)||void 0===n||n.forEach(((t,o)=>{const n=t.get("afterPatch");"function"==typeof n&&n(e.state[o],e.state,e,o)}))),delete e.nextHooks},setState=(e,t,o,n={})=>{var r,a;void 0===e.nextHooks&&(e.nextHooks=new Map),void 0===e.nextState&&(e.nextState=new Map);e.nextHooks.get(t)instanceof Map==!1&&e.nextHooks.set(t,new Map),"function"==typeof n.afterPatch&&(null===(r=e.nextHooks.get(t))||void 0===r||r.set("afterPatch",n.afterPatch)),"function"==typeof n.beforePatch&&(null===(a=e.nextHooks.get(t))||void 0===a||a.set("beforePatch",n.beforePatch)),e.nextState.set(t,o),patchState(e)},logWarn=(e,t,o,n)=>{devHint(`[${e.constructor.name}] The property value: (${o}) for '${t}' is not valid. Allowed values are: ${Array.from(n).join(", ")}`)};function watchValidator(e,t,o,n,r,a={}){o(r)?setState(e,t,r,a.hooks):void 0===r&&!0!==a.required&&o(a.defaultValue)?setState(e,t,a.defaultValue,a.hooks):(a.required||n.add(null),logWarn(e,t,r,n))}const watchBoolean=(e,t,o,n)=>{watchValidator(e,t,(e=>"boolean"==typeof e),new Set(["Boolean {true, false}"]),o,n)},watchString=(e,t,o,n={})=>{const r="number"==typeof n.minLength?null==n?void 0:n.minLength:0;watchValidator(e,t,(e=>"string"==typeof e&&e.length>=r&&(void 0===(null==n?void 0:n.maxLength)||e.length<=n.maxLength)),new Set(["String"]),o,n)},watchNumber=(e,t,o,n)=>{watchValidator(e,t,(e=>"number"==typeof e&&(void 0===(null==n?void 0:n.min)||"number"==typeof(null==n?void 0:n.min)&&e>=n.min)&&(void 0===(null==n?void 0:n.max)||"number"==typeof(null==n?void 0:n.max)&&e<=n.max)),new Set(["Number"]),o,n)},watchJsonArrayString=(e,t,o,n,r=e=>e==e,a={})=>{emptyStringByArrayHandler(n,(()=>{objectObjectHandler(n,(()=>{void 0===n&&(n=[]);try{try{n=parseJson(n)}catch(e){}if(Array.isArray(n)){const i=n.find((e=>!o(e)));void 0===i&&r(n)?setState(e,t,n,a.hooks):objectObjectHandler(i,(()=>{throw Log.debug(i),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}else objectObjectHandler(n,(()=>{throw Log.debug(n),new Error("↑ The schema for the property (_options) is not valid. The value will not be changed.")}))}catch(e){Log.debug(e)}}))}))},stringifyJson=e=>{try{return JSON.stringify(e).replace(/"/g,"'")}catch(t){throw Log.warn(["stringifyJson",e]),Log.error("↑ The JSON could not be converted to a string. A stringifiable JSON is expected."),new Error}},JSON_CHARS=/^[{[]/,parseJson=e=>{if("string"==typeof e)try{return JSON.parse(e)}catch(t){if(JSON_CHARS.test(e))try{return JSON.parse(e.replace(/'/g,'"'))}catch(t){Log.warn(["parseJson",e]),Log.error("↑ The JSON string could not be parsed. Make sure that single quotes in the text are escaped (&#8216;).")}}throw new Error},mapBoolean2String=e=>"boolean"==typeof e?!0===e?"true":"false":void 0,mapStringOrBoolean2String=e=>"string"==typeof e?e:mapBoolean2String(e),koliBriQuerySelector=(e,t)=>querySelector(e,t||getDocument()),koliBriQuerySelectorAll=(e,t)=>querySelectorAll(e,t||getDocument());let DEFAULT_COLOR_CONTRAST=null;const getDefaultColorContrast=()=>(DEFAULT_COLOR_CONTRAST=DEFAULT_COLOR_CONTRAST||{backgroundColor:"#00000000",color:"#00000000",domNode:getDocument().body,level:"Fail",score:1},DEFAULT_COLOR_CONTRAST),TRANSPARENT_REGEXP=/(\d+, ){3}0\)/,koliBriA11yColorContrast=(e,t=getDefaultColorContrast())=>{const o=getComputedStyle(e),n=TRANSPARENT_REGEXP.test(o.backgroundColor)?t.backgroundColor:rgba$1.hex(o.backgroundColor),r=TRANSPARENT_REGEXP.test(o.color)?t.color:rgba$1.hex(o.color),a=s(n,r),i={backgroundColor:n,color:r,domNode:e,level:f(a),score:a};return a<4.5&&Log.error(["Color-Contrast-Error",{backgroundColor:i.backgroundColor,color:i.color,level:i.level,score:i.score},i.domNode]),i},koliBriQuerySelectorColors=(e,t=getDefaultColorContrast())=>{t.domNode instanceof HTMLElement&&(t=koliBriA11yColorContrast(t.domNode,t));const o=t.domNode.querySelector(e);if(null===o){const o=t.domNode.querySelectorAll('[class="hydrated"]');for(let n=0;n<o.length&&(t.domNode=o[n],null===(t=koliBriQuerySelectorColors(e,t)).domNode);n++);return t}return koliBriA11yColorContrast(o,t)};class KoliBriUtils{static queryHtmlElementColors(e,t,o=!1,n=!0){let r=null;if(!0===o||!1===KoliBriUtils.executionLock)if(!1===o&&(KoliBriUtils.cache.clear(),KoliBriUtils.cache.set(t.domNode,t),KoliBriUtils.executionLock=!0,!0===n&&Log.debug("[KoliBriUtils] Color contrast analysis started...")),e===t.domNode)r=t;else{const o=new Set;if(t.domNode.shadowRoot){const e=t.domNode.shadowRoot.children;for(let t=0;t<e.length;t++)o.add(e[t])}const n=t.domNode;if("function"==typeof n.assignedNodes){const e=n.assignedNodes();for(let t=0;t<e.length;t++)e[t]instanceof HTMLElement&&o.add(e[t])}const a=t.domNode.children;for(let e=0;e<a.length;e++)o.add(a[e]);const i=Array.from(o);for(let o=0;o<i.length;o++){let n=KoliBriUtils.cache.get(i[o]);void 0===n&&(n=koliBriA11yColorContrast(i[o],t)),KoliBriUtils.cache.set(i[o],n);const a=KoliBriUtils.queryHtmlElementColors(e,n,!0,!1);if(null!==a){r=a;break}}}else Log.debug("[KoliBriUtils] Call aborted because a color contrast analysis is currently being executed.");return!1===o&&(!0===n&&Log.debug(`[KoliBriUtils] Color contrast analysis finished (${KoliBriUtils.cache.size} DOM elements are analysed).`),KoliBriUtils.executionLock=!1,KoliBriUtils.cache.clear()),r}}KoliBriUtils.executionLock=!1,KoliBriUtils.cache=new Map;class KoliBriDevHelper{}KoliBriDevHelper.getCssStyle=f$1,KoliBriDevHelper.patchTheme=P,KoliBriDevHelper.patchThemeTag=R,KoliBriDevHelper.querySelector=koliBriQuerySelector,KoliBriDevHelper.querySelectorAll=koliBriQuerySelectorAll,KoliBriDevHelper.stringifyJson=stringifyJson;export{koliBriA11yColorContrast as A,B,koliBriQuerySelectorAll as C,koliBriQuerySelectorColors as D,KoliBriUtils as E,stringifyJson as F,KoliBriDevHelper as K,S,a11yHint as a,watchBoolean as b,a11yHintDisabled as c,watchString as d,objectObjectHandler as e,featureHint as f,s as g,a11yHintLabelingLandmarks as h,watchJsonArrayString as i,uiUxHintMillerscheZahl as j,mapStringOrBoolean2String as k,setEventTarget as l,mapBoolean2String as m,ne as n,oe as o,parseJson as p,devHint as q,rgba$1 as r,setState as s,devWarning as t,uiUxHint as u,watchNumber as v,watchValidator as w,deprecatedHint as x,emptyStringByArrayHandler as y,koliBriQuerySelector as z};