@public-ui/components 3.0.6 → 3.0.7-d0e38f2b24188b03316351f07d939c4524a2fd81.0

package/dist/components/kol-quote.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{e as watchString,w as watchValidator}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateLabel}from"./label.js";import{l as KolLinkTag}from"./component-names.js";import{c as clsx}from"./clsx.js";const validateQuote=(e,n)=>{watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){validateLabel(this,e)}validateHref(e){watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=showExpertSlot(this.state._quote);return h("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))):h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},h("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},h(KolLinkTag,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{h as watchString,w as watchValidator}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateLabel}from"./label.js";import{l as KolLinkTag}from"./component-names.js";import{c as clsx}from"./clsx.js";const validateQuote=(e,n)=>{watchString(e,"_quote",n,{required:!0})},quoteVariantOptions=["block","inline"],isQuoteVariantPropType=e=>"string"==typeof e&&quoteVariantOptions.includes(e),validateVariantQuote=(e,n)=>{watchValidator(e,"_variant",isQuoteVariantPropType,new Set(quoteVariantOptions),n)},defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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-quote {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuote$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){validateLabel(this,e)}validateHref(e){watchString(this,"_href",e,{required:!0})}validateQuote(e){validateQuote(this,e)}validateVariant(e){validateVariantQuote(this,e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=showExpertSlot(this.state._quote);return h("figure",{key:"3577d4eb15e4d4fb90bb23b73b070b84af133407",class:clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))):h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,h("span",{"aria-hidden":e?void 0:"true",hidden:!e},h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&h("figcaption",{key:"1b5f3dd6c8b687afdc02679fb0d4a2ec978c2adf",class:"kol-quote__figcaption"},h("cite",{key:"bfe86e4a9b0e10a45973d76f68c699771f59b4be",class:"kol-quote__cite"},h(KolLinkTag,{key:"146d5d83a83a8b8a5688be828a605c65c0d703dd",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-quote",{_label:[1],_href:[1],_quote:[1],_variant:[1],state:[32]},void 0,{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-quote"].forEach(e=>{if("kol-quote"===e)customElements.get(e)||customElements.define(e,KolQuote$1)})}const KolQuote=KolQuote$1,defineCustomElement=defineCustomElement$1;export{KolQuote,defineCustomElement};

package/dist/components/kol-table-stateful.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{i as KolPaginationWcTag,q as KolTableStatelessWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as watchBoolean,w as watchValidator,s as setState,Q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,e as watchString,l as devHint}from"./common.js";import{v as validateTableData,a as validateTableDataFoot,b as validateHasSettingsMenu,c as validateTableSelection,d as validateTableStatefulCallbacks,e as validateTableSettings}from"./table-settings.js";import{v as validateLabel}from"./label.js";import{C as Callback}from"./keyboard.js";import{K as KolEvent,d as dispatchDomEvent}from"./events.js";const validateAllowMultiSort=(t,e,n={})=>{watchBoolean(t,"_allowMultiSort",e,Object.assign({defaultValue:!1},n))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{watchValidator(t,"_paginationPosition",t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    overflow: hidden;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,e)=>{for(let n=0;n<this.sortData.length;n++){const a=this.sortData[n],i=a.compareFn(t,e);if(0!==i)return"ASC"===a.direction?i:-i}return 0}),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}validateHasSettingsMenu(t){validateHasSettingsMenu(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex(e=>e.key===t.key);if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,()=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,a,i;const o=t=>{let e=!1;t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void devHint("[KolTableStateful] A sortable column requires the 'key' property.");const n=t.key;if(!n)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:n,compareFn:t.compareFn,direction:a}),e=!0)}),e&&setTimeout(()=>this.updateSortedData())},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})})})}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validateTableSettings(t){validateTableSettings(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationWcTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find(e=>e.key===t.key);if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find(e=>e.key===t);e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const a=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",i=this.state._sortedData.filter(e=>t.includes(e[a]));if(!1===(null==n?void 0:n.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,e){var n;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof e?e:[e]})}));const i=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,a,i,o;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,d={horizontal:null!==(a=null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==a?a:[],vertical:null!==(o=null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==o?o:[]};return h(Host,{key:"d2b36026a0c931eebdff9269a19c2e61b32ae9a2",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"9125f5790496178db69cfb865ce666dcf67acf27",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return this}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-table-stateful",{_allowMultiSort:[4,"_allow-multi-sort"],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],_paginationPosition:[1,"_pagination-position"],_selection:[1],_on:[16],_tableSettings:[16,"_table-settings"],_hasSettingsMenu:[4,"_has-settings-menu"],state:[32],getSelection:[64]},void 0,{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-stateful"].forEach(t=>{if("kol-table-stateful"===t)customElements.get(t)||customElements.define(t,KolTableStateful$1)})}const KolTableStateful=KolTableStateful$1,defineCustomElement=defineCustomElement$1;export{KolTableStateful,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{i as KolPaginationWcTag,q as KolTableStatelessWcTag}from"./component-names.js";import{t as translate}from"./i18n.js";import{c as watchBoolean,w as watchValidator,s as setState,Q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,h as watchString,l as devHint}from"./common.js";import{v as validateTableData,a as validateTableDataFoot,b as validateHasSettingsMenu,c as validateTableSelection,d as validateTableStatefulCallbacks,e as validateTableSettings}from"./table-settings.js";import{v as validateLabel}from"./label.js";import{C as Callback}from"./keyboard.js";import{K as KolEvent,d as dispatchDomEvent}from"./events.js";const validateAllowMultiSort=(t,e,n={})=>{watchBoolean(t,"_allowMultiSort",e,Object.assign({defaultValue:!1},n))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{watchValidator(t,"_paginationPosition",t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    overflow: hidden;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}',PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,e)=>{for(let n=0;n<this.sortData.length;n++){const a=this.sortData[n],i=a.compareFn(t,e);if(0!==i)return"ASC"===a.direction?i:-i}return 0}),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}validateHasSettingsMenu(t){validateHasSettingsMenu(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex(e=>e.key===t.key);if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,()=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",t=>"object"==typeof t&&null!==t,new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,a,i;const o=t=>{let e=!1;t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void devHint("[KolTableStateful] A sortable column requires the 'key' property.");const n=t.key;if(!n)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:n,compareFn:t.compareFn,direction:a}),e=!0)}),e&&setTimeout(()=>this.updateSortedData())},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})})})}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validateTableSettings(t){validateTableSettings(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationWcTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:e})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find(e=>e.key===t.key);if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find(e=>e.key===t);e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const a=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",i=this.state._sortedData.filter(e=>t.includes(e[a]));if(!1===(null==n?void 0:n.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,e){var n;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof e?e:[e]})}));const i=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,a,i,o;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,d={horizontal:null!==(a=null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==a?a:[],vertical:null!==(o=null===(i=this.state._headers.vertical)||void 0===i?void 0:i.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==o?o:[]};return h(Host,{key:"d2b36026a0c931eebdff9269a19c2e61b32ae9a2",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"9125f5790496178db69cfb865ce666dcf67acf27",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return this}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-table-stateful",{_allowMultiSort:[4,"_allow-multi-sort"],_data:[1],_dataFoot:[1,"_data-foot"],_headers:[1],_label:[1],_minWidth:[1,"_min-width"],_pagination:[8],_paginationPosition:[1,"_pagination-position"],_selection:[1],_on:[16],_tableSettings:[16,"_table-settings"],_hasSettingsMenu:[4,"_has-settings-menu"],state:[32],getSelection:[64]},void 0,{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-table-stateful"].forEach(t=>{if("kol-table-stateful"===t)customElements.get(t)||customElements.define(t,KolTableStateful$1)})}const KolTableStateful=KolTableStateful$1,defineCustomElement=defineCustomElement$1;export{KolTableStateful,defineCustomElement};

package/dist/components/kol-textarea.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,proxyCustomElement,HTMLElement}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as checkHasMsg,d as getDefaultProps,g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{_ as __rest}from"./Heading.js";import{w as watchValidator,e as watchString}from"./common.js";import{n as nonce}from"./dev.utils.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{v as validateRows}from"./rows.js";import{v as validateSpellCheck}from"./spell-check.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:a,touched:n,readonly:i,disabled:o,required:l,ariaDescribedBy:r,hideLabel:s,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),u=checkHasMsg(a,n),m="string"==typeof a?"error":null==a?void 0:a._type,p={"kol-textarea--disabled":Boolean(o),"kol-textarea--required":Boolean(l),"kol-textarea--touched":Boolean(n),"kol-textarea--readonly":Boolean(i),[`kol-textarea--${m||"error"}`]:u},v=Object.assign(Object.assign({class:clsx("kol-textarea",p,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:r,hideLabel:s,label:d})),c);return h("textarea",Object.assign({},v))};function getTextAreaProps(e,t){var a;const n=[...getRenderStates(e).ariaDescribedBy,...null!==(a=t.ariaDescribedBy)&&void 0!==a?a:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:n});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const TextAreaStateWrapper=e=>{var{state:t}=e,a=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,a)))};class TextareaController extends InputIconController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const n=Math.round(e.scrollHeight/a);return e.rows=t,n},KolTextarea$1=proxyCustomElement(class extends HTMLElement{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"a04967ea2fecb1a7c6f238600d52f2d4d4b4cc72"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"db4f3ed0dfa745c109a3a21346df79722b0f7595",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"71376e1ff01a524c589632fff16023da5bb9774b"},this.getTextAreaProps()))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[305,"kol-textarea",{_accessKey:[1,"_access-key"],_adjustHeight:[4,"_adjust-height"],_disabled:[4],_hideMsg:[1540,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_hasCounter:[4,"_has-counter"],_maxLengthBehavior:[1,"_max-length-behavior"],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_resize:[1],_required:[4],_rows:[1026],_shortKey:[1,"_short-key"],_spellCheck:[4,"_spell-check"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-textarea"].forEach(e=>{if("kol-textarea"===e)customElements.get(e)||customElements.define(e,KolTextarea$1)})}const KolTextarea=KolTextarea$1,defineCustomElement=defineCustomElement$1;export{KolTextarea,defineCustomElement};
+import{h,proxyCustomElement,HTMLElement}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{c as checkHasMsg,d as getDefaultProps,g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{_ as __rest}from"./Heading.js";import{w as watchValidator,h as watchString}from"./common.js";import{n as nonce}from"./dev.utils.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateReadOnly}from"./read-only.js";import{v as validateRequired}from"./required.js";import{v as validateRows}from"./rows.js";import{v as validateSpellCheck}from"./spell-check.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:a,touched:n,readonly:i,disabled:o,required:l,ariaDescribedBy:r,hideLabel:s,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),u=checkHasMsg(a,n),m="string"==typeof a?"error":null==a?void 0:a._type,p={"kol-textarea--disabled":Boolean(o),"kol-textarea--required":Boolean(l),"kol-textarea--touched":Boolean(n),"kol-textarea--readonly":Boolean(i),[`kol-textarea--${m||"error"}`]:u},v=Object.assign(Object.assign({class:clsx("kol-textarea",p,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:r,hideLabel:s,label:d})),c);return h("textarea",Object.assign({},v))};function getTextAreaProps(e,t){var a;const n=[...getRenderStates(e).ariaDescribedBy,...null!==(a=t.ariaDescribedBy)&&void 0!==a?a:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:n});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const TextAreaStateWrapper=e=>{var{state:t}=e,a=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,a)))};class TextareaController extends InputIconController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\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    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\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    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const n=Math.round(e.scrollHeight/a);return e.rows=t,n},KolTextarea$1=proxyCustomElement(class extends HTMLElement{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"a04967ea2fecb1a7c6f238600d52f2d4d4b4cc72"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"db4f3ed0dfa745c109a3a21346df79722b0f7595",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"71376e1ff01a524c589632fff16023da5bb9774b"},this.getTextAreaProps()))))}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[305,"kol-textarea",{_accessKey:[1,"_access-key"],_adjustHeight:[4,"_adjust-height"],_disabled:[4],_hideMsg:[1540,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_hasCounter:[4,"_has-counter"],_maxLengthBehavior:[1,"_max-length-behavior"],_msg:[1],_name:[1],_on:[16],_placeholder:[1],_readOnly:[4,"_read-only"],_resize:[1],_required:[4],_rows:[1026],_shortKey:[1,"_short-key"],_spellCheck:[4,"_spell-check"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-textarea"].forEach(e=>{if("kol-textarea"===e)customElements.get(e)||customElements.define(e,KolTextarea$1)})}const KolTextarea=KolTextarea$1,defineCustomElement=defineCustomElement$1;export{KolTextarea,defineCustomElement};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements.js";import{e as watchString,D as getDocument}from"./common.js";import{v as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import"./Alert.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";const validateBadgeText=(t,e)=>{watchString(t,"_badgeText",e)},validateId=(t,e)=>{watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach(t=>{t.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const TOOLTIP_DELAY=300,KolTooltipWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),getDocument().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=autoUpdate(t,e,()=>{this.alignTooltip()})}},this.showTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),clearTimeout(this.showTooltipTimeout),this.showTooltipTimeout=setTimeout(()=>{this.showTooltip()},300)},this.hideTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),this.hideTooltipTimeout=setTimeout(()=>{this.hideTooltip()},300)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){clearTimeout(this.showTooltipTimeout),this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){this.showTooltipWithDelay()}handleMouseleave(){this.hideTooltipWithDelay()}handleFocusIn(){this.showTooltipWithDelay()}handleFocusout(){this.hideTooltipWithDelay()}render(){return h(Host,{key:"60be1bd258bc5ae2b0ecce9374607d11476071b1",class:"kol-tooltip"},""!==this.state._label&&h("div",{key:"2af044756ca7d87c5b789181da84556a517c0ee4",class:"kol-tooltip__floating",ref:this.catchTooltipElement},h("div",{key:"057fc2de5c87f0f82e9477568992048bf3918e77",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),h(KolSpanFc,{key:"1ba456fb877c04c0dc1e93431f90db07f2e90b47",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){validateBadgeText(this,t)}validateAlign(t){validateAlign(this,t)}validateId(t){validateId(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return this}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}},[256,"kol-tooltip-wc",{_badgeText:[1,"_badge-text"],_align:[1],_id:[1],_label:[1],state:[32],hideTooltip:[64]},void 0,{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tooltip-wc"].forEach(t=>{if("kol-tooltip-wc"===t)customElements.get(t)||customElements.define(t,KolTooltipWc$1)})}const KolTooltipWc=KolTooltipWc$1,defineCustomElement=defineCustomElement$1;export{KolTooltipWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{b as autoUpdate,a as alignFloatingElements}from"./align-floating-elements.js";import{h as watchString,D as getDocument}from"./common.js";import{v as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import"./Alert.js";import{K as KolSpanFc}from"./Span.js";import"./i18n.js";const validateBadgeText=(t,e)=>{watchString(t,"_badgeText",e)},validateId=(t,e)=>{watchString(t,"_id",e)},VISIBLE_OVERLAYS=new Set;function showOverlay(t){VISIBLE_OVERLAYS.forEach(t=>{t.style.setProperty("z-index","999")}),VISIBLE_OVERLAYS.add(t),t.style.setProperty("z-index","1000")}function hideOverlay(t){if(VISIBLE_OVERLAYS.delete(t),VISIBLE_OVERLAYS.size>0){const t=Array.from(VISIBLE_OVERLAYS).pop();t&&t.style.setProperty("z-index","1000")}}const TOOLTIP_DELAY=300,KolTooltipWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){showOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),getDocument().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=autoUpdate(t,e,()=>{this.alignTooltip()})}},this.showTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),clearTimeout(this.showTooltipTimeout),this.showTooltipTimeout=setTimeout(()=>{this.showTooltip()},300)},this.hideTooltipWithDelay=()=>{clearTimeout(this.hideTooltipTimeout),this.hideTooltipTimeout=setTimeout(()=>{this.hideTooltip()},300)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,e,i=!1)=>{t&&this.removeListeners(t),e&&(i&&(this.previousSibling=e),this.addListeners(e))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""}}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await alignFloatingElements({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){clearTimeout(this.showTooltipTimeout),this.tooltipElement&&(hideOverlay(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),getDocument().removeEventListener("keyup",this.hideTooltipByEscape)}handleMouseEnter(){this.showTooltipWithDelay()}handleMouseleave(){this.hideTooltipWithDelay()}handleFocusIn(){this.showTooltipWithDelay()}handleFocusout(){this.hideTooltipWithDelay()}render(){return h(Host,{key:"60be1bd258bc5ae2b0ecce9374607d11476071b1",class:"kol-tooltip"},""!==this.state._label&&h("div",{key:"2af044756ca7d87c5b789181da84556a517c0ee4",class:"kol-tooltip__floating",ref:this.catchTooltipElement},h("div",{key:"057fc2de5c87f0f82e9477568992048bf3918e77",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),h(KolSpanFc,{key:"1ba456fb877c04c0dc1e93431f90db07f2e90b47",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){validateBadgeText(this,t)}validateAlign(t){validateAlign(this,t)}validateId(t){validateId(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return this}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}},[256,"kol-tooltip-wc",{_badgeText:[1,"_badge-text"],_align:[1],_id:[1],_label:[1],state:[32],hideTooltip:[64]},void 0,{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-tooltip-wc"].forEach(t=>{if("kol-tooltip-wc"===t)customElements.get(t)||customElements.define(t,KolTooltipWc$1)})}const KolTooltipWc=KolTooltipWc$1,defineCustomElement=defineCustomElement$1;export{KolTooltipWc,defineCustomElement};

package/dist/components/link-variant.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as watchValidator,e as watchString,c as watchBoolean}from"./common.js";const alternativeButtonLinkRolePropTypeOptions=["tab","treeitem"],validateAlternativeButtonLinkRole=(t,a)=>{watchValidator(t,"_role",t=>"string"==typeof t&&alternativeButtonLinkRolePropTypeOptions.includes(t),new Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(", ")}`]),a)},validateAriaDescription=(t,a)=>{watchString(t,"_ariaDescription",a)},validateAriaExpanded=(t,a)=>{watchBoolean(t,"_ariaExpanded",a)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,a)=>{watchValidator(t,"_buttonVariant",t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),a,{defaultValue:"normal"})},linkVariantPropTypeOptions=["inline","standalone"],validateLinkVariant=(t,a)=>{watchValidator(t,"_linkVariant",t=>"string"==typeof t&&linkVariantPropTypeOptions.includes(t),new Set([`KoliBriLinkVariant {${linkVariantPropTypeOptions.join(", ")}`]),a)};export{validateAriaExpanded as a,validateLinkVariant as b,validateAlternativeButtonLinkRole as c,validateButtonVariant as d,validateAriaDescription as v};
+import{w as watchValidator,h as watchString,c as watchBoolean}from"./common.js";const alternativeButtonLinkRolePropTypeOptions=["tab","treeitem"],validateAlternativeButtonLinkRole=(a,t)=>{watchValidator(a,"_role",a=>"string"==typeof a&&alternativeButtonLinkRolePropTypeOptions.includes(a),new Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(", ")}`]),t)},validateAriaControls=(a,t)=>{watchString(a,"_ariaControls",t)},validateAriaDescription=(a,t)=>{watchString(a,"_ariaDescription",t)},validateAriaExpanded=(a,t)=>{watchBoolean(a,"_ariaExpanded",t)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(a,t)=>{watchValidator(a,"_buttonVariant",a=>"string"==typeof a&&buttonVariantPropTypeOptions.includes(a),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),t,{defaultValue:"normal"})},linkVariantPropTypeOptions=["inline","standalone"],validateLinkVariant=(a,t)=>{watchValidator(a,"_linkVariant",a=>"string"==typeof a&&linkVariantPropTypeOptions.includes(a),new Set([`KoliBriLinkVariant {${linkVariantPropTypeOptions.join(", ")}`]),t)};export{validateAriaDescription as a,validateAriaExpanded as b,validateLinkVariant as c,validateAlternativeButtonLinkRole as d,validateButtonVariant as e,validateAriaControls as v};

package/dist/components/link-variant.js.map

@@ -1 +1 @@
-{"file":"link-variant.js","mappings":";;;;;AAIA,MAAM,wCAAwC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAU;MAWhE,iCAAiC,GAAG,CAAC,SAAoC,EAAE,KAAyC,KAAI;AACpI,IAAA,cAAc,CACb,SAAS,EACT,CAAO,KAAA,CAAA,EACP,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,wCAAwC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAChG,IAAI,GAAG,CAAC,CAAC,CAAA,kCAAA,EAAqC,wCAAwC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC,CAAC,EACrG,KAAK,CACL;AACF;;MCTa,uBAAuB,GAAG,CAAC,SAAoC,EAAE,KAA+B,KAAU;AACtH,IAAA,WAAW,CAAC,SAAS,EAAE,kBAAkB,EAAE,KAAK,CAAC;AAClD;;MCAa,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,KAAU;AAChH,IAAA,YAAY,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC;AAChD;;ACdA,MAAM,4BAA4B,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU;MAW5G,qBAAqB,GAAG,CAAC,SAAoC,EAAE,KAA6B,KAAU;AAClH,IAAA,cAAc,CACb,SAAS,EACT,CAAgB,cAAA,CAAA,EAChB,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,4BAA4B,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpF,IAAI,GAAG,CAAC,CAAC,yBAAyB,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CAAC,CAAC,EAC7E,KAAK,EACL;AACC,QAAA,YAAY,EAAE,QAAQ;AACtB,KAAA,CACD;AACF;;ACtBA,MAAM,0BAA0B,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAU;MAWvD,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B,KAAU;AAC9G,IAAA,cAAc,CACb,SAAS,EACT,CAAc,YAAA,CAAA,EACd,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,CAAC,CAAA,oBAAA,EAAuB,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC,CAAC,EACzE,KAAK,CACL;AACF;;;;","names":[],"sources":["src/schema/props/alternative-button-link-role.ts","src/schema/props/aria-description.ts","src/schema/props/aria-expanded.ts","src/schema/props/button-variant.ts","src/schema/props/link-variant.ts"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst alternativeButtonLinkRolePropTypeOptions = ['tab', 'treeitem'] as const;\nexport type AlternativeButtonLinkRolePropType = (typeof alternativeButtonLinkRolePropTypeOptions)[number];\n\n/**\n * Defines the role of the components primary element.\n */\nexport type PropAlternativeButtonLinkRole = {\n\trole: AlternativeButtonLinkRolePropType;\n};\n\n/* validator */\nexport const validateAlternativeButtonLinkRole = (component: Generic.Element.Component, value?: AlternativeButtonLinkRolePropType) => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_role`,\n\t\t(value) => typeof value === 'string' && alternativeButtonLinkRolePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport { watchString } from '../utils';\n\n/* types */\nexport type AriaDescriptionPropType = string;\n\n/**\n * Defines the value for the aria-description attribute.\n */\nexport type PropAriaDescription = {\n\tariaDescription: AriaDescriptionPropType;\n};\n\n/* validator */\nexport const validateAriaDescription = (component: Generic.Element.Component, value?: AriaDescriptionPropType): void => {\n\twatchString(component, '_ariaDescription', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AriaExpandedPropType = boolean;\n\n/**\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n */\nexport type PropAriaExpanded = {\n\tariaExpanded: AriaExpandedPropType;\n};\n\n/* validator */\nexport const validateAriaExpanded = (component: Generic.Element.Component, value?: AriaExpandedPropType): void => {\n\twatchBoolean(component, '_ariaExpanded', value);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const;\nexport type ButtonVariantPropType = (typeof buttonVariantPropTypeOptions)[number];\n\n/**\n * Defines which variant should be used for presentation.\n */\nexport type PropButtonVariant = {\n\tvariant: ButtonVariantPropType;\n};\n\n/* validator */\nexport const validateButtonVariant = (component: Generic.Element.Component, value?: ButtonVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_buttonVariant`,\n\t\t(value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'normal',\n\t\t},\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst linkVariantPropTypeOptions = ['inline', 'standalone'] as const;\nexport type LinkVariantPropType = (typeof linkVariantPropTypeOptions)[number];\n\n/**\n * Defines which variant should be used for presentation.\n */\nexport type PropLinkVariant = {\n\tvariant: LinkVariantPropType;\n};\n\n/* validator */\nexport const validateLinkVariant = (component: Generic.Element.Component, value?: LinkVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_linkVariant`,\n\t\t(value) => typeof value === 'string' && linkVariantPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriLinkVariant {${linkVariantPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n"],"version":3}
+{"file":"link-variant.js","mappings":";;;;;AAIA,MAAM,wCAAwC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAU;MAWhE,iCAAiC,GAAG,CAAC,SAAoC,EAAE,KAAyC,KAAI;AACpI,IAAA,cAAc,CACb,SAAS,EACT,CAAO,KAAA,CAAA,EACP,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,wCAAwC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAChG,IAAI,GAAG,CAAC,CAAC,CAAA,kCAAA,EAAqC,wCAAwC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC,CAAC,EACrG,KAAK,CACL;AACF;;MCRa,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,KAAU;AAChH,IAAA,WAAW,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC;AAC/C;;MCHa,uBAAuB,GAAG,CAAC,SAAoC,EAAE,KAA+B,KAAU;AACtH,IAAA,WAAW,CAAC,SAAS,EAAE,kBAAkB,EAAE,KAAK,CAAC;AAClD;;MCAa,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,KAAU;AAChH,IAAA,YAAY,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC;AAChD;;ACdA,MAAM,4BAA4B,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU;MAW5G,qBAAqB,GAAG,CAAC,SAAoC,EAAE,KAA6B,KAAU;AAClH,IAAA,cAAc,CACb,SAAS,EACT,CAAgB,cAAA,CAAA,EAChB,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,4BAA4B,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpF,IAAI,GAAG,CAAC,CAAC,yBAAyB,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAE,CAAC,CAAC,EAC7E,KAAK,EACL;AACC,QAAA,YAAY,EAAE,QAAQ;AACtB,KAAA,CACD;AACF;;ACtBA,MAAM,0BAA0B,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAU;MAWvD,mBAAmB,GAAG,CAAC,SAAoC,EAAE,KAA2B,KAAU;AAC9G,IAAA,cAAc,CACb,SAAS,EACT,CAAc,YAAA,CAAA,EACd,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,CAAC,CAAA,oBAAA,EAAuB,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAA,CAAC,CAAC,EACzE,KAAK,CACL;AACF;;;;","names":[],"sources":["src/schema/props/alternative-button-link-role.ts","src/schema/props/aria-controls.ts","src/schema/props/aria-description.ts","src/schema/props/aria-expanded.ts","src/schema/props/button-variant.ts","src/schema/props/link-variant.ts"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst alternativeButtonLinkRolePropTypeOptions = ['tab', 'treeitem'] as const;\nexport type AlternativeButtonLinkRolePropType = (typeof alternativeButtonLinkRolePropTypeOptions)[number];\n\n/**\n * Defines the role of the components primary element.\n */\nexport type PropAlternativeButtonLinkRole = {\n\trole: AlternativeButtonLinkRolePropType;\n};\n\n/* validator */\nexport const validateAlternativeButtonLinkRole = (component: Generic.Element.Component, value?: AlternativeButtonLinkRolePropType) => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_role`,\n\t\t(value) => typeof value === 'string' && alternativeButtonLinkRolePropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriAlternativeButtonLinkRole {${alternativeButtonLinkRolePropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchString } from '../utils';\n\n/* types */\n/**\n * Defines which elements are being controlled. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n */\ntype AriaControlsPropType = string;\n\nexport type PropAriaControls = {\n\tariaControls: AriaControlsPropType;\n};\n\n/* validator */\nexport const validateAriaControls = (component: Generic.Element.Component, value?: AriaControlsPropType): void => {\n\twatchString(component, '_ariaControls', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport { watchString } from '../utils';\n\n/* types */\nexport type AriaDescriptionPropType = string;\n\n/**\n * Defines the value for the aria-description attribute.\n */\nexport type PropAriaDescription = {\n\tariaDescription: AriaDescriptionPropType;\n};\n\n/* validator */\nexport const validateAriaDescription = (component: Generic.Element.Component, value?: AriaDescriptionPropType): void => {\n\twatchString(component, '_ariaDescription', value);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type AriaExpandedPropType = boolean;\n\n/**\n * Marks this element as open/expanded, or that the connected element (aria-controls/aria-owns) is open/expanded.\n * (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n */\nexport type PropAriaExpanded = {\n\tariaExpanded: AriaExpandedPropType;\n};\n\n/* validator */\nexport const validateAriaExpanded = (component: Generic.Element.Component, value?: AriaExpandedPropType): void => {\n\twatchBoolean(component, '_ariaExpanded', value);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst buttonVariantPropTypeOptions = ['primary', 'secondary', 'normal', 'tertiary', 'danger', 'ghost', 'custom'] as const;\nexport type ButtonVariantPropType = (typeof buttonVariantPropTypeOptions)[number];\n\n/**\n * Defines which variant should be used for presentation.\n */\nexport type PropButtonVariant = {\n\tvariant: ButtonVariantPropType;\n};\n\n/* validator */\nexport const validateButtonVariant = (component: Generic.Element.Component, value?: ButtonVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_buttonVariant`,\n\t\t(value) => typeof value === 'string' && buttonVariantPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t\t{\n\t\t\tdefaultValue: 'normal',\n\t\t},\n\t);\n};\n","/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst linkVariantPropTypeOptions = ['inline', 'standalone'] as const;\nexport type LinkVariantPropType = (typeof linkVariantPropTypeOptions)[number];\n\n/**\n * Defines which variant should be used for presentation.\n */\nexport type PropLinkVariant = {\n\tvariant: LinkVariantPropType;\n};\n\n/* validator */\nexport const validateLinkVariant = (component: Generic.Element.Component, value?: LinkVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_linkVariant`,\n\t\t(value) => typeof value === 'string' && linkVariantPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriLinkVariant {${linkVariantPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n"],"version":3}

package/dist/components/placeholder.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{e as watchString}from"./common.js";const validatePlaceholder=(a,e,o={})=>{watchString(a,"_placeholder",e,o)};export{validatePlaceholder as v};
+import{h as watchString}from"./common.js";const validatePlaceholder=(a,e,o={})=>{watchString(a,"_placeholder",e,o)};export{validatePlaceholder as v};

package/dist/esm/{Alert-R2nEqfd2.js → Alert-C3ktyZF6.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{_ as __rest,K as KolHeadingFc}from"./Heading-DT8fK42U.js";import{h,F as Fragment}from"./index-44UAWlcO.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag,d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";import{t as translate}from"./i18n-CdSCDnmA.js";import{a as BEM_CLASS_ALERT__ICON,b as bem,c as BEM_CLASS_ALERT__CONTENT,d as BEM_CLASS_ALERT__CLOSER}from"./bem-DhwfdDrM.js";const translateError=translate("kol-error"),translateInfo=translate("kol-info"),translateWarning=translate("kol-warning"),translateSuccess=translate("kol-success"),translateMessage=translate("kol-message"),Icon=({ariaLabel:a,icon:e})=>h(Fragment,null,h("span",{class:"visually-hidden"},a),h(KolIconTag,{class:BEM_CLASS_ALERT__ICON,_label:"",_icons:e})),AlertIcon=({type:a,label:e})=>{switch(a){case"error":return h(Icon,{ariaLabel:translateError,icon:"codicon codicon-error",label:e});case"info":return h(Icon,{ariaLabel:translateInfo,icon:"codicon codicon-info",label:e});case"warning":return h(Icon,{ariaLabel:translateWarning,icon:"codicon codicon-warning",label:e});case"success":return h(Icon,{ariaLabel:translateSuccess,icon:"codicon codicon-pass",label:e});default:return h(Icon,{ariaLabel:translateMessage,icon:"codicon codicon-comment",label:e})}},translateCloseAlert=translate("kol-close-alert"),vibrateOnError=()=>{if("undefined"==typeof navigator||"function"!=typeof navigator.vibrate)return;const a=navigator.userActivation;if(((null==a?void 0:a.isActive)||(null==a?void 0:a.hasBeenActive))&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch(a){}},KolAlertFc=(a,e)=>{const{class:t={},alert:o=!1,hasCloser:l=!1,label:n,level:r=0,type:s="default",variant:c="msg",onAlertTimeout:i,onCloserClick:d}=a,_=__rest(a,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);o&&(vibrateOnError(),setTimeout(()=>{null==i||i()},1e4));const b=bem("kol-alert",{hasCloser:!!l,[`type-${s}`]:!0,[`variant-${c}`]:!0}),m=bem("kol-alert","heading",{[`h${r}`]:!0}),g=Object.assign({class:clsx(t,b),role:o?"error"===s?"alert":"status":void 0},_);return h("div",Object.assign({},g,{"data-testid":"alert"}),h("div",{class:"kol-alert__container"},h(AlertIcon,{label:n,type:s}),h("div",{class:"kol-alert__container-content"},n&&h(KolHeadingFc,{class:m,level:r,id:"heading"},n),"msg"===c&&h("span",{class:BEM_CLASS_ALERT__CONTENT,"aria-describedby":n?"heading":void 0},e)),l&&h(KolButtonWcTag,{class:BEM_CLASS_ALERT__CLOSER,"data-testid":"alert-close-button",_ariaDescription:(null==n?void 0:n.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translateCloseAlert,_on:{onClick:d},_tooltipAlign:"left"})),"card"===c&&h("div",{class:BEM_CLASS_ALERT__CONTENT,"aria-describedby":n?"heading":void 0},e))};export{KolAlertFc as K};
+import{_ as __rest,K as KolHeadingFc}from"./Heading-CF5mGt3A.js";import{h,F as Fragment}from"./index-BEYG-0cN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag,d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";import{t as translate}from"./i18n-CdSCDnmA.js";import{a as BEM_CLASS_ALERT__ICON,b as bem,c as BEM_CLASS_ALERT__CONTENT,d as BEM_CLASS_ALERT__CLOSER}from"./bem-DhwfdDrM.js";const translateError=translate("kol-error"),translateInfo=translate("kol-info"),translateWarning=translate("kol-warning"),translateSuccess=translate("kol-success"),translateMessage=translate("kol-message"),Icon=({ariaLabel:a,icon:e})=>h(Fragment,null,h("span",{class:"visually-hidden"},a),h(KolIconTag,{class:BEM_CLASS_ALERT__ICON,_label:"",_icons:e})),AlertIcon=({type:a,label:e})=>{switch(a){case"error":return h(Icon,{ariaLabel:translateError,icon:"codicon codicon-error",label:e});case"info":return h(Icon,{ariaLabel:translateInfo,icon:"codicon codicon-info",label:e});case"warning":return h(Icon,{ariaLabel:translateWarning,icon:"codicon codicon-warning",label:e});case"success":return h(Icon,{ariaLabel:translateSuccess,icon:"codicon codicon-pass",label:e});default:return h(Icon,{ariaLabel:translateMessage,icon:"codicon codicon-comment",label:e})}},translateCloseAlert=translate("kol-close-alert"),vibrateOnError=()=>{if("undefined"==typeof navigator||"function"!=typeof navigator.vibrate)return;const a=navigator.userActivation;if(((null==a?void 0:a.isActive)||(null==a?void 0:a.hasBeenActive))&&matchMedia("(any-pointer: coarse)").matches)try{navigator.vibrate([100,75,100,75,100])}catch(a){}},KolAlertFc=(a,e)=>{const{class:t={},alert:o=!1,hasCloser:l=!1,label:n,level:r=0,type:s="default",variant:c="msg",onAlertTimeout:i,onCloserClick:d}=a,_=__rest(a,["class","alert","hasCloser","label","level","type","variant","onAlertTimeout","onCloserClick"]);o&&(vibrateOnError(),setTimeout(()=>{null==i||i()},1e4));const b=bem("kol-alert",{hasCloser:!!l,[`type-${s}`]:!0,[`variant-${c}`]:!0}),m=bem("kol-alert","heading",{[`h${r}`]:!0}),g=Object.assign({class:clsx(t,b),role:o?"error"===s?"alert":"status":void 0},_);return h("div",Object.assign({},g,{"data-testid":"alert"}),h("div",{class:"kol-alert__container"},h(AlertIcon,{label:n,type:s}),h("div",{class:"kol-alert__container-content"},n&&h(KolHeadingFc,{class:m,level:r,id:"heading"},n),"msg"===c&&h("span",{class:BEM_CLASS_ALERT__CONTENT,"aria-describedby":n?"heading":void 0},e)),l&&h(KolButtonWcTag,{class:BEM_CLASS_ALERT__CLOSER,"data-testid":"alert-close-button",_ariaDescription:(null==n?void 0:n.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translateCloseAlert,_on:{onClick:d},_tooltipAlign:"left"})),"card"===c&&h("div",{class:BEM_CLASS_ALERT__CONTENT,"aria-describedby":n?"heading":void 0},e))};export{KolAlertFc as K};

package/dist/esm/{Alert-R2nEqfd2.js.map → Alert-C3ktyZF6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Alert-R2nEqfd2.js","sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { Fragment, type FunctionalComponent as FC, h } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport type { AlertType } from '../../schema';\nimport { translate } from '../../i18n';\nimport { BEM_CLASS_ALERT__ICON } from '../Alert/bem';\n\nconst translateError = translate('kol-error');\nconst translateInfo = translate('kol-info');\nconst translateWarning = translate('kol-warning');\nconst translateSuccess = translate('kol-success');\nconst translateMessage = translate('kol-message');\n\n/**\n * The icon uses a visually-hidden span instead of an aria-label because the Alert might be referenced as content for aria-describedby.\n * In this scenario, Firefox with NVDA does not properly read the aria-label, so the visually-hidden span ensures correct screen reader behavior.\n * @see https://github.com/public-ui/kolibri/issues/7119\n */\nconst Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {\n\treturn (\n\t\t<>\n\t\t\t<span class=\"visually-hidden\">{ariaLabel}</span>\n\t\t\t<KolIconTag class={BEM_CLASS_ALERT__ICON} _label=\"\" _icons={icon} />\n\t\t</>\n\t);\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {\n\tswitch (type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translateError} icon=\"codicon codicon-error\" label={label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translateInfo} icon=\"codicon codicon-info\" label={label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translateWarning} icon=\"codicon codicon-warning\" label={label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translateSuccess} icon=\"codicon codicon-pass\" label={label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translateMessage} icon=\"codicon codicon-comment\" label={label} />;\n\t}\n};\n\nexport default AlertIcon;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport { type JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { type InternalAlertProps } from '../../schema';\nimport AlertIcon from '../AlertIcon';\nimport KolHeadingFc from '../Heading';\nimport { genBemAlert as bem, BEM_CLASS_ALERT__CLOSER, BEM_CLASS_ALERT__CONTENT } from './bem';\n\nconst translateCloseAlert = translate('kol-close-alert');\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\n/**\n * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n * - https://googlechrome.github.io/samples/vibration/\n * - Ongoing discussion: https://github.com/public-ui/kolibri/issues/7191\n * @todo Move side-effect out of render-function to avoid multiple incarnations.\n */\nconst vibrateOnError = (): void => {\n\tif (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {\n\t\treturn;\n\t}\n\tconst ua = navigator.userActivation;\n\tconst hasGesture = ua?.isActive || ua?.hasBeenActive;\n\tif (!hasGesture) {\n\t\treturn;\n\t}\n\tif (!matchMedia('(any-pointer: coarse)').matches) {\n\t\treturn;\n\t}\n\ttry {\n\t\tnavigator.vibrate([100, 75, 100, 75, 100]);\n\t} catch {\n\t\t/* no-op */\n\t}\n};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst {\n\t\tclass: classNames = {},\n\t\talert = false,\n\t\thasCloser = false,\n\t\tlabel,\n\t\tlevel = 0,\n\t\ttype = 'default',\n\t\tvariant = 'msg',\n\t\tonAlertTimeout,\n\t\tonCloserClick,\n\t\t...other\n\t} = props;\n\n\tif (alert) {\n\t\tvibrateOnError();\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\t/**\n\t * Define the dynamic BEM class names for the alert component.\n\t */\n\tconst BEM_CLASS_ROOT = bem('kol-alert', {\n\t\thasCloser: !!hasCloser,\n\t\t[`type-${type}`]: true,\n\t\t[`variant-${variant}`]: true,\n\t});\n\tconst BEM_CLASS__HEADING = bem('kol-alert', 'heading', {\n\t\t[`h${level}`]: true,\n\t});\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx(classNames, BEM_CLASS_ROOT),\n\t\trole: alert ? (type === 'error' ? 'alert' : 'status') : undefined,\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div {...rootProps} data-testid=\"alert\">\n\t\t\t<div class=\"kol-alert__container\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"kol-alert__container-content\">\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<KolHeadingFc class={BEM_CLASS__HEADING} level={level} id=\"heading\">\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'msg' && (\n\t\t\t\t\t\t<span class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={BEM_CLASS_ALERT__CLOSER}\n\t\t\t\t\t\tdata-testid=\"alert-close-button\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translateCloseAlert}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && (\n\t\t\t\t<div class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Alert-C3ktyZF6.js","sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { Fragment, type FunctionalComponent as FC, h } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport type { AlertType } from '../../schema';\nimport { translate } from '../../i18n';\nimport { BEM_CLASS_ALERT__ICON } from '../Alert/bem';\n\nconst translateError = translate('kol-error');\nconst translateInfo = translate('kol-info');\nconst translateWarning = translate('kol-warning');\nconst translateSuccess = translate('kol-success');\nconst translateMessage = translate('kol-message');\n\n/**\n * The icon uses a visually-hidden span instead of an aria-label because the Alert might be referenced as content for aria-describedby.\n * In this scenario, Firefox with NVDA does not properly read the aria-label, so the visually-hidden span ensures correct screen reader behavior.\n * @see https://github.com/public-ui/kolibri/issues/7119\n */\nconst Icon: FC<{ ariaLabel: string; icon: string; label?: string }> = ({ ariaLabel, icon }) => {\n\treturn (\n\t\t<>\n\t\t\t<span class=\"visually-hidden\">{ariaLabel}</span>\n\t\t\t<KolIconTag class={BEM_CLASS_ALERT__ICON} _label=\"\" _icons={icon} />\n\t\t</>\n\t);\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type, label }) => {\n\tswitch (type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translateError} icon=\"codicon codicon-error\" label={label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translateInfo} icon=\"codicon codicon-info\" label={label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translateWarning} icon=\"codicon codicon-warning\" label={label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translateSuccess} icon=\"codicon codicon-pass\" label={label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translateMessage} icon=\"codicon codicon-comment\" label={label} />;\n\t}\n};\n\nexport default AlertIcon;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport { type JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { type InternalAlertProps } from '../../schema';\nimport AlertIcon from '../AlertIcon';\nimport KolHeadingFc from '../Heading';\nimport { genBemAlert as bem, BEM_CLASS_ALERT__CLOSER, BEM_CLASS_ALERT__CONTENT } from './bem';\n\nconst translateCloseAlert = translate('kol-close-alert');\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\n/**\n * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n * - https://googlechrome.github.io/samples/vibration/\n * - Ongoing discussion: https://github.com/public-ui/kolibri/issues/7191\n * @todo Move side-effect out of render-function to avoid multiple incarnations.\n */\nconst vibrateOnError = (): void => {\n\tif (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {\n\t\treturn;\n\t}\n\tconst ua = navigator.userActivation;\n\tconst hasGesture = ua?.isActive || ua?.hasBeenActive;\n\tif (!hasGesture) {\n\t\treturn;\n\t}\n\tif (!matchMedia('(any-pointer: coarse)').matches) {\n\t\treturn;\n\t}\n\ttry {\n\t\tnavigator.vibrate([100, 75, 100, 75, 100]);\n\t} catch {\n\t\t/* no-op */\n\t}\n};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst {\n\t\tclass: classNames = {},\n\t\talert = false,\n\t\thasCloser = false,\n\t\tlabel,\n\t\tlevel = 0,\n\t\ttype = 'default',\n\t\tvariant = 'msg',\n\t\tonAlertTimeout,\n\t\tonCloserClick,\n\t\t...other\n\t} = props;\n\n\tif (alert) {\n\t\tvibrateOnError();\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\t/**\n\t * Define the dynamic BEM class names for the alert component.\n\t */\n\tconst BEM_CLASS_ROOT = bem('kol-alert', {\n\t\thasCloser: !!hasCloser,\n\t\t[`type-${type}`]: true,\n\t\t[`variant-${variant}`]: true,\n\t});\n\tconst BEM_CLASS__HEADING = bem('kol-alert', 'heading', {\n\t\t[`h${level}`]: true,\n\t});\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx(classNames, BEM_CLASS_ROOT),\n\t\trole: alert ? (type === 'error' ? 'alert' : 'status') : undefined,\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div {...rootProps} data-testid=\"alert\">\n\t\t\t<div class=\"kol-alert__container\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"kol-alert__container-content\">\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<KolHeadingFc class={BEM_CLASS__HEADING} level={level} id=\"heading\">\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'msg' && (\n\t\t\t\t\t\t<span class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={BEM_CLASS_ALERT__CLOSER}\n\t\t\t\t\t\tdata-testid=\"alert-close-button\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translateCloseAlert}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && (\n\t\t\t\t<div class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"names":[],"mappings":"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"}

package/dist/esm/{Collapsible-B4WnEb_T.js → Collapsible-DuN5vPyq.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{_ as __rest,K as KolHeadingFc}from"./Heading-DT8fK42U.js";import{h}from"./index-44UAWlcO.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";const KolCollapsibleFc=(l,o)=>{const{id:s,class:a,label:e,level:i=1,disabled:n,open:c,onClick:d,HeadingProps:r={},HeadingButtonProps:t={},ContentProps:p={}}=l,_=__rest(l,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),b=c?"remove":"add";return h("div",Object.assign({id:s,class:clsx("collapsible",{"collapsible--disabled":!0===n,"collapsible--open":!0===c},a)},_),h(KolHeadingFc,{ref:null==r?void 0:r.ref,level:i,class:clsx("collapsible__heading",null==r?void 0:r.class)},h(KolButtonWcTag,{class:clsx("collapsible__heading-button",null==t?void 0:t.class),ref:null==t?void 0:t.ref,slot:"expert",_ariaControls:`${s}-control`,_ariaExpanded:c,_disabled:n,_icons:(null==t?void 0:t._icons)||`codicon codicon-${b}`,_label:e,_on:{onClick:d}})),h("div",{class:clsx("collapsible__wrapper",null==p?void 0:p.wrapperClass)},h("div",{class:clsx("collapsible__wrapper-animation",null==p?void 0:p.animationClass)},h("div",{"aria-hidden":!1===c?"true":void 0,class:clsx("collapsible__content",null==p?void 0:p.class),id:`${s}-control`},o))))};export{KolCollapsibleFc as K};
+import{_ as __rest,K as KolHeadingFc}from"./Heading-CF5mGt3A.js";import{h}from"./index-BEYG-0cN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";const KolCollapsibleFc=(l,o)=>{const{id:s,class:a,label:e,level:i=1,disabled:n,open:c,onClick:d,HeadingProps:r={},HeadingButtonProps:t={},ContentProps:p={}}=l,_=__rest(l,["id","class","label","level","disabled","open","onClick","HeadingProps","HeadingButtonProps","ContentProps"]),b=c?"remove":"add";return h("div",Object.assign({id:s,class:clsx("collapsible",{"collapsible--disabled":!0===n,"collapsible--open":!0===c},a)},_),h(KolHeadingFc,{ref:null==r?void 0:r.ref,level:i,class:clsx("collapsible__heading",null==r?void 0:r.class)},h(KolButtonWcTag,{class:clsx("collapsible__heading-button",null==t?void 0:t.class),ref:null==t?void 0:t.ref,slot:"expert",_ariaControls:`${s}-control`,_ariaExpanded:c,_disabled:n,_icons:(null==t?void 0:t._icons)||`codicon codicon-${b}`,_label:e,_on:{onClick:d}})),h("div",{class:clsx("collapsible__wrapper",null==p?void 0:p.wrapperClass)},h("div",{class:clsx("collapsible__wrapper-animation",null==p?void 0:p.animationClass)},h("div",{"aria-hidden":!1===c?"true":void 0,class:clsx("collapsible__content",null==p?void 0:p.class),id:`${s}-control`},o))))};export{KolCollapsibleFc as K};

package/dist/esm/{Collapsible-B4WnEb_T.js.map → Collapsible-DuN5vPyq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Collapsible-B4WnEb_T.js","sources":["src/functional-components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';\nimport KolHeadingFc from '../Heading';\n\ntype ClassType =\n\t| string\n\t| {\n\t\t\t[className: string]: boolean;\n\t  };\n\nexport type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {\n\tid: string;\n\topen?: boolean;\n\tdisabled?: boolean;\n\tlevel?: HeadingLevel;\n\tlabel: string;\n\tonClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;\n\n\tHeadingProps?: {\n\t\tref?: ((elm?: HTMLElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t};\n\n\tHeadingButtonProps?: {\n\t\tref?: ((elm?: HTMLKolButtonWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t\t_icons?: IconsPropType;\n\t};\n\n\tContentProps?: {\n\t\tclass?: ClassType;\n\t\tanimationClass?: ClassType;\n\t\twrapperClass?: ClassType;\n\t};\n};\n\nconst KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {\n\tconst { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {}, ...other } = props;\n\tconst icon = open ? 'remove' : 'add';\n\n\treturn (\n\t\t<div\n\t\t\tid={id}\n\t\t\tclass={clsx(\n\t\t\t\t'collapsible',\n\t\t\t\t{\n\t\t\t\t\t'collapsible--disabled': disabled === true,\n\t\t\t\t\t'collapsible--open': open === true,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<KolHeadingFc ref={HeadingProps?.ref} level={level} class={clsx('collapsible__heading', HeadingProps?.class)}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('collapsible__heading-button', HeadingButtonProps?.class)}\n\t\t\t\t\tref={HeadingButtonProps?.ref}\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t\t_ariaControls={`${id}-control`}\n\t\t\t\t\t_ariaExpanded={open}\n\t\t\t\t\t_disabled={disabled}\n\t\t\t\t\t_icons={HeadingButtonProps?._icons || `codicon codicon-${icon}`}\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_on={{ onClick }}\n\t\t\t\t></KolButtonWcTag>\n\t\t\t</KolHeadingFc>\n\t\t\t<div class={clsx('collapsible__wrapper', ContentProps?.wrapperClass)}>\n\t\t\t\t<div class={clsx('collapsible__wrapper-animation', ContentProps?.animationClass)}>\n\t\t\t\t\t<div aria-hidden={open === false ? 'true' : undefined} class={clsx('collapsible__content', ContentProps?.class)} id={`${id}-control`}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default KolCollapsibleFc;\n"],"names":[],"mappings":";;;;;;;;AAwCA,MAAM,gBAAgB,GAAyB,CAAC,KAAK,EAAE,QAAQ,KAAI;AAClE,IAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAe,GAAA,KAAK,EAAf,KAAK,GAAA,MAAA,CAAK,KAAK,EAArJ,CAAA,IAAA,EAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,cAAA,CAA6I,CAAQ;IAC3J,MAAM,IAAI,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;AAEpC,IAAA,QACC,CACC,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,CACV,aAAa,EACb;YACC,uBAAuB,EAAE,QAAQ,KAAK,IAAI;YAC1C,mBAAmB,EAAE,IAAI,KAAK,IAAI;AAClC,SAAA,EACD,UAAU,CACV,EAAA,EACG,KAAK,CAAA,EAET,CAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,KAAK,CAAC,EAAA,EAC3G,CAAA,CAAC,cAAc,EAAA,EACd,KAAK,EAAE,IAAI,CAAC,6BAA6B,EAAE,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,MAAA,GAAA,MAAA,GAAA,kBAAkB,CAAE,KAAK,CAAC,EACrE,GAAG,EAAE,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,EAC5B,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,CAAA,EAAG,EAAE,CAAA,QAAA,CAAU,EAC9B,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,CAAA,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,MAAA,GAAA,MAAA,GAAA,kBAAkB,CAAE,MAAM,KAAI,CAAA,gBAAA,EAAmB,IAAI,CAAE,CAAA,EAC/D,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,EAAE,OAAO,EAAE,GACC,CACJ,EACf,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,YAAY,CAAC,EAAA,EACnE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,CAAC,gCAAgC,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,cAAc,CAAC,EAAA,EAC/E,CAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,IAAI,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAA,QAAA,CAAU,IAClI,QAAQ,CACJ,CACD,CACD,CACD;AAER;;;;"}
+{"version":3,"file":"Collapsible-DuN5vPyq.js","sources":["src/functional-components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';\nimport KolHeadingFc from '../Heading';\n\ntype ClassType =\n\t| string\n\t| {\n\t\t\t[className: string]: boolean;\n\t  };\n\nexport type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {\n\tid: string;\n\topen?: boolean;\n\tdisabled?: boolean;\n\tlevel?: HeadingLevel;\n\tlabel: string;\n\tonClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;\n\n\tHeadingProps?: {\n\t\tref?: ((elm?: HTMLElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t};\n\n\tHeadingButtonProps?: {\n\t\tref?: ((elm?: HTMLKolButtonWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t\t_icons?: IconsPropType;\n\t};\n\n\tContentProps?: {\n\t\tclass?: ClassType;\n\t\tanimationClass?: ClassType;\n\t\twrapperClass?: ClassType;\n\t};\n};\n\nconst KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {\n\tconst { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {}, ...other } = props;\n\tconst icon = open ? 'remove' : 'add';\n\n\treturn (\n\t\t<div\n\t\t\tid={id}\n\t\t\tclass={clsx(\n\t\t\t\t'collapsible',\n\t\t\t\t{\n\t\t\t\t\t'collapsible--disabled': disabled === true,\n\t\t\t\t\t'collapsible--open': open === true,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<KolHeadingFc ref={HeadingProps?.ref} level={level} class={clsx('collapsible__heading', HeadingProps?.class)}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('collapsible__heading-button', HeadingButtonProps?.class)}\n\t\t\t\t\tref={HeadingButtonProps?.ref}\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t\t_ariaControls={`${id}-control`}\n\t\t\t\t\t_ariaExpanded={open}\n\t\t\t\t\t_disabled={disabled}\n\t\t\t\t\t_icons={HeadingButtonProps?._icons || `codicon codicon-${icon}`}\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_on={{ onClick }}\n\t\t\t\t></KolButtonWcTag>\n\t\t\t</KolHeadingFc>\n\t\t\t<div class={clsx('collapsible__wrapper', ContentProps?.wrapperClass)}>\n\t\t\t\t<div class={clsx('collapsible__wrapper-animation', ContentProps?.animationClass)}>\n\t\t\t\t\t<div aria-hidden={open === false ? 'true' : undefined} class={clsx('collapsible__content', ContentProps?.class)} id={`${id}-control`}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default KolCollapsibleFc;\n"],"names":[],"mappings":";;;;;;;;AAwCA,MAAM,gBAAgB,GAAyB,CAAC,KAAK,EAAE,QAAQ,KAAI;AAClE,IAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,GAAG,EAAE,EAAE,kBAAkB,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAe,GAAA,KAAK,EAAf,KAAK,GAAA,MAAA,CAAK,KAAK,EAArJ,CAAA,IAAA,EAAA,OAAA,EAAA,OAAA,EAAA,OAAA,EAAA,UAAA,EAAA,MAAA,EAAA,SAAA,EAAA,cAAA,EAAA,oBAAA,EAAA,cAAA,CAA6I,CAAQ;IAC3J,MAAM,IAAI,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK;AAEpC,IAAA,QACC,CACC,CAAA,KAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,CACV,aAAa,EACb;YACC,uBAAuB,EAAE,QAAQ,KAAK,IAAI;YAC1C,mBAAmB,EAAE,IAAI,KAAK,IAAI;AAClC,SAAA,EACD,UAAU,CACV,EAAA,EACG,KAAK,CAAA,EAET,CAAA,CAAC,YAAY,EAAA,EAAC,GAAG,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,KAAK,CAAC,EAAA,EAC3G,CAAA,CAAC,cAAc,EAAA,EACd,KAAK,EAAE,IAAI,CAAC,6BAA6B,EAAE,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,KAAlB,MAAA,GAAA,MAAA,GAAA,kBAAkB,CAAE,KAAK,CAAC,EACrE,GAAG,EAAE,kBAAkB,KAAlB,IAAA,IAAA,kBAAkB,uBAAlB,kBAAkB,CAAE,GAAG,EAC5B,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,CAAA,EAAG,EAAE,CAAA,QAAA,CAAU,EAC9B,aAAa,EAAE,IAAI,EACnB,SAAS,EAAE,QAAQ,EACnB,MAAM,EAAE,CAAA,kBAAkB,KAAA,IAAA,IAAlB,kBAAkB,KAAlB,MAAA,GAAA,MAAA,GAAA,kBAAkB,CAAE,MAAM,KAAI,CAAA,gBAAA,EAAmB,IAAI,CAAE,CAAA,EAC/D,MAAM,EAAE,KAAK,EACb,GAAG,EAAE,EAAE,OAAO,EAAE,GACC,CACJ,EACf,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,YAAY,CAAC,EAAA,EACnE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,IAAI,CAAC,gCAAgC,EAAE,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,cAAc,CAAC,EAAA,EAC/E,CAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,IAAI,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,sBAAsB,EAAE,YAAY,KAAZ,IAAA,IAAA,YAAY,uBAAZ,YAAY,CAAE,KAAK,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAA,QAAA,CAAU,IAClI,QAAQ,CACJ,CACD,CACD,CACD;AAER;;;;"}

package/dist/esm/{CustomSuggestionsToggle-Dez_Y4wT.js → CustomSuggestionsToggle-Dy5sBs-i.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h}from"./index-44UAWlcO.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag}from"./component-names-CkE54Ym7.js";import{t as translate}from"./i18n-CdSCDnmA.js";const CustomSuggestionsOptionFc=({index:o,ref:s,selected:n,onClick:t,onMouseOver:e,onFocus:i,onKeyDown:l,option:r,searchTerm:c})=>h("li",{id:`option-${o}`,key:`-${o}`,ref:s,"data-index":o,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:t,onMouseOver:e,onFocus:i,class:"kol-custom-suggestions-option",onKeyDown:l},((o,s)=>{if(!(null==s?void 0:s.trim()))return o;const n=new RegExp(`(${s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return o.split(n).map((o,s)=>n.test(o)?h("mark",{key:s},o):o)})(String(r),c||"")),CustomSuggestionsOptionsGroupFc=({blockSuggestionMouseOver:o,onKeyDown:s,style:n},t)=>h("ul",{role:"listbox",style:n,class:clsx("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:s},t),translateDropdown=translate("kol-dropdown"),CustomSuggestionsToggleFc=({onClick:o,disabled:s})=>h("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:o,disabled:s},h(KolIconTag,{_icons:"codicon codicon-triangle-down",_label:translateDropdown}));export{CustomSuggestionsToggleFc as C,CustomSuggestionsOptionsGroupFc as a,CustomSuggestionsOptionFc as b};
+import{h}from"./index-BEYG-0cN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag}from"./component-names-CkE54Ym7.js";import{t as translate}from"./i18n-CdSCDnmA.js";const CustomSuggestionsOptionFc=({index:o,ref:s,selected:n,onClick:t,onMouseOver:e,onFocus:i,onKeyDown:l,option:r,searchTerm:c})=>h("li",{id:`option-${o}`,key:`-${o}`,ref:s,"data-index":o,tabIndex:-1,role:"option","aria-selected":n?"true":void 0,onClick:t,onMouseOver:e,onFocus:i,class:"kol-custom-suggestions-option",onKeyDown:l},((o,s)=>{if(!(null==s?void 0:s.trim()))return o;const n=new RegExp(`(${s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return o.split(n).map((o,s)=>n.test(o)?h("mark",{key:s},o):o)})(String(r),c||"")),CustomSuggestionsOptionsGroupFc=({blockSuggestionMouseOver:o,onKeyDown:s,style:n},t)=>h("ul",{role:"listbox",style:n,class:clsx("kol-custom-suggestions-options-group",{"kol-custom-suggestions-options-group--cursor-hidden":o}),onKeyDown:s},t),translateDropdown=translate("kol-dropdown"),CustomSuggestionsToggleFc=({onClick:o,disabled:s})=>h("button",{tabindex:"-1",class:"kol-custom-suggestions-toggle",onClick:o,disabled:s},h(KolIconTag,{_icons:"codicon codicon-triangle-down",_label:translateDropdown}));export{CustomSuggestionsToggleFc as C,CustomSuggestionsOptionsGroupFc as a,CustomSuggestionsOptionFc as b};

package/dist/esm/{CustomSuggestionsToggle-Dez_Y4wT.js.map → CustomSuggestionsToggle-Dy5sBs-i.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CustomSuggestionsToggle-Dez_Y4wT.js","sources":["src/functional-components/CustomSuggestionsOption/CustomSuggestionsOption.tsx","src/functional-components/CustomSuggestionsOptionsGroup/CustomSuggestionsOptionsGroup.tsx","src/functional-components/CustomSuggestionsToggle/CustomSuggestionsToggle.tsx"],"sourcesContent":["import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { W3CInputValue } from '../../schema';\n\nexport type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {\n\tindex: number;\n\toption: W3CInputValue;\n\tselected: boolean;\n\tsearchTerm?: string;\n\tref?: ((elm?: HTMLLIElement | undefined) => void) | undefined;\n};\n\nconst CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {\n\tconst highlightSearchTerm = (text: string, searchTerm: string) => {\n\t\tif (!searchTerm?.trim()) return text;\n\n\t\tconst regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n\t\tconst parts = text.split(regex);\n\n\t\treturn parts.map((part, partIndex) => (regex.test(part) ? <mark key={partIndex}>{part}</mark> : part));\n\t};\n\n\treturn (\n\t\t<li\n\t\t\tid={`option-${index}`}\n\t\t\tkey={`-${index}`}\n\t\t\tref={ref}\n\t\t\tdata-index={index}\n\t\t\ttabIndex={-1}\n\t\t\trole=\"option\"\n\t\t\taria-selected={selected ? 'true' : undefined}\n\t\t\tonClick={onClick}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonFocus={onFocus}\n\t\t\tclass=\"kol-custom-suggestions-option\"\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t{highlightSearchTerm(String(option), searchTerm || '')}\n\t\t</li>\n\t);\n};\nexport default CustomSuggestionsOptionFc;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nexport type CustomSuggestionsOptionsGroupProps = JSXBase.HTMLAttributes<HTMLUListElement> & {\n\tblockSuggestionMouseOver: boolean;\n};\n\nconst CustomSuggestionsOptionsGroupFc: FC<CustomSuggestionsOptionsGroupProps> = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {\n\treturn (\n\t\t<ul\n\t\t\trole=\"listbox\"\n\t\t\tstyle={style}\n\t\t\tclass={clsx('kol-custom-suggestions-options-group', {\n\t\t\t\t'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,\n\t\t\t})}\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t);\n};\nexport default CustomSuggestionsOptionsGroupFc;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { JSXBase } from '@stencil/core/internal';\n\nconst translateDropdown = translate('kol-dropdown');\n\nexport type CustomSuggestionsToggleProps = JSXBase.HTMLAttributes<HTMLButtonElement> & { disabled?: boolean };\n\nconst CustomSuggestionsToggleFc: FC<CustomSuggestionsToggleProps> = ({ onClick, disabled }) => {\n\treturn (\n\t\t<button tabindex=\"-1\" class=\"kol-custom-suggestions-toggle\" onClick={onClick} disabled={disabled}>\n\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translateDropdown} />\n\t\t</button>\n\t);\n};\nexport default CustomSuggestionsToggleFc;\n"],"names":[],"mappings":";;;;;;;;AAYM,MAAA,yBAAyB,GAA+B,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,KAAI;AACxJ,IAAA,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,UAAkB,KAAI;QAChE,IAAI,EAAC,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,IAAI,EAAE,CAAA;AAAE,YAAA,OAAO,IAAI;AAEpC,QAAA,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC;QACxF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAE/B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAA,EAAG,IAAI,CAAQ,GAAG,IAAI,CAAC,CAAC;AACvG,KAAC;AAED,IAAA,QACC,CAAA,CAAA,IAAA,EAAA,EACC,EAAE,EAAE,CAAU,OAAA,EAAA,KAAK,EAAE,EACrB,GAAG,EAAE,CAAI,CAAA,EAAA,KAAK,EAAE,EAChB,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC5C,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,SAAS,EAAA,EAEnB,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,IAAI,EAAE,CAAC,CAClD;AAEP;;AChCA,MAAM,+BAA+B,GAA2C,CAAC,EAAE,wBAAwB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,KAAI;AAC5I,IAAA,QACC,CAAA,CAAA,IAAA,EAAA,EACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,sCAAsC,EAAE;AACnD,YAAA,qDAAqD,EAAE,wBAAwB;SAC/E,CAAC,EACF,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACL;AAEP;;AChBA,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC;AAI7C,MAAA,yBAAyB,GAAqC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC7F,IAAA,QACC,CAAQ,CAAA,QAAA,EAAA,EAAA,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAA,EAC/F,CAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAC,+BAA+B,EAAC,MAAM,EAAE,iBAAiB,EAAA,CAAI,CACxE;AAEX;;;;"}
+{"version":3,"file":"CustomSuggestionsToggle-Dy5sBs-i.js","sources":["src/functional-components/CustomSuggestionsOption/CustomSuggestionsOption.tsx","src/functional-components/CustomSuggestionsOptionsGroup/CustomSuggestionsOptionsGroup.tsx","src/functional-components/CustomSuggestionsToggle/CustomSuggestionsToggle.tsx"],"sourcesContent":["import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { W3CInputValue } from '../../schema';\n\nexport type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {\n\tindex: number;\n\toption: W3CInputValue;\n\tselected: boolean;\n\tsearchTerm?: string;\n\tref?: ((elm?: HTMLLIElement | undefined) => void) | undefined;\n};\n\nconst CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({ index, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm }) => {\n\tconst highlightSearchTerm = (text: string, searchTerm: string) => {\n\t\tif (!searchTerm?.trim()) return text;\n\n\t\tconst regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n\t\tconst parts = text.split(regex);\n\n\t\treturn parts.map((part, partIndex) => (regex.test(part) ? <mark key={partIndex}>{part}</mark> : part));\n\t};\n\n\treturn (\n\t\t<li\n\t\t\tid={`option-${index}`}\n\t\t\tkey={`-${index}`}\n\t\t\tref={ref}\n\t\t\tdata-index={index}\n\t\t\ttabIndex={-1}\n\t\t\trole=\"option\"\n\t\t\taria-selected={selected ? 'true' : undefined}\n\t\t\tonClick={onClick}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonFocus={onFocus}\n\t\t\tclass=\"kol-custom-suggestions-option\"\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t{highlightSearchTerm(String(option), searchTerm || '')}\n\t\t</li>\n\t);\n};\nexport default CustomSuggestionsOptionFc;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\n\nexport type CustomSuggestionsOptionsGroupProps = JSXBase.HTMLAttributes<HTMLUListElement> & {\n\tblockSuggestionMouseOver: boolean;\n};\n\nconst CustomSuggestionsOptionsGroupFc: FC<CustomSuggestionsOptionsGroupProps> = ({ blockSuggestionMouseOver, onKeyDown, style }, children) => {\n\treturn (\n\t\t<ul\n\t\t\trole=\"listbox\"\n\t\t\tstyle={style}\n\t\t\tclass={clsx('kol-custom-suggestions-options-group', {\n\t\t\t\t'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,\n\t\t\t})}\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t);\n};\nexport default CustomSuggestionsOptionsGroupFc;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport { KolIconTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { JSXBase } from '@stencil/core/internal';\n\nconst translateDropdown = translate('kol-dropdown');\n\nexport type CustomSuggestionsToggleProps = JSXBase.HTMLAttributes<HTMLButtonElement> & { disabled?: boolean };\n\nconst CustomSuggestionsToggleFc: FC<CustomSuggestionsToggleProps> = ({ onClick, disabled }) => {\n\treturn (\n\t\t<button tabindex=\"-1\" class=\"kol-custom-suggestions-toggle\" onClick={onClick} disabled={disabled}>\n\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translateDropdown} />\n\t\t</button>\n\t);\n};\nexport default CustomSuggestionsToggleFc;\n"],"names":[],"mappings":";;;;;;;;AAYM,MAAA,yBAAyB,GAA+B,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,KAAI;AACxJ,IAAA,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,UAAkB,KAAI;QAChE,IAAI,EAAC,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,IAAI,EAAE,CAAA;AAAE,YAAA,OAAO,IAAI;AAEpC,QAAA,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC;QACxF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAE/B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,GAAG,EAAE,SAAS,EAAA,EAAG,IAAI,CAAQ,GAAG,IAAI,CAAC,CAAC;AACvG,KAAC;AAED,IAAA,QACC,CAAA,CAAA,IAAA,EAAA,EACC,EAAE,EAAE,CAAU,OAAA,EAAA,KAAK,EAAE,EACrB,GAAG,EAAE,CAAI,CAAA,EAAA,KAAK,EAAE,EAChB,GAAG,EAAE,GAAG,EACI,YAAA,EAAA,KAAK,EACjB,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC5C,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,SAAS,EAAA,EAEnB,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,IAAI,EAAE,CAAC,CAClD;AAEP;;AChCA,MAAM,+BAA+B,GAA2C,CAAC,EAAE,wBAAwB,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,KAAI;AAC5I,IAAA,QACC,CAAA,CAAA,IAAA,EAAA,EACC,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,IAAI,CAAC,sCAAsC,EAAE;AACnD,YAAA,qDAAqD,EAAE,wBAAwB;SAC/E,CAAC,EACF,SAAS,EAAE,SAAS,IAEnB,QAAQ,CACL;AAEP;;AChBA,MAAM,iBAAiB,GAAG,SAAS,CAAC,cAAc,CAAC;AAI7C,MAAA,yBAAyB,GAAqC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAI;AAC7F,IAAA,QACC,CAAQ,CAAA,QAAA,EAAA,EAAA,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAA,EAC/F,CAAA,CAAC,UAAU,EAAA,EAAC,MAAM,EAAC,+BAA+B,EAAC,MAAM,EAAE,iBAAiB,EAAA,CAAI,CACxE;AAEX;;;;"}

package/dist/esm/{FieldControlStateWrapper-CwL8LaZs.js → FieldControlStateWrapper-DC5e0v-Z.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{_ as __rest}from"./Heading-DT8fK42U.js";import{h,F as Fragment}from"./index-44UAWlcO.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./common-8fBdMvJM.js";import{b as buildBadgeTextString,s as showExpertSlot}from"./reuse-CX4AQDkS.js";import{a as FormFieldTooltipFc,K as KolFormFieldLabelFc,b as KolFormFieldHintFc,c as checkHasMsg}from"./FormFieldStateWrapper-B7PqxuTo.js";const InputContainer=(e,l)=>{var{class:o}=e,r=__rest(e,["class"]);return h("div",Object.assign({class:clsx("kol-field-control__input",o)},r),l)},KolFieldControlFc=(e,l)=>{const{class:o,id:r,disabled:t,label:i,hideLabel:s,labelAlign:n,renderNoTooltip:a,hint:d,renderNoHint:c,tooltipAlign:b,accessKey:p,shortKey:g,msg:F,touched:_,required:f,readonly:u,fieldControlInputProps:m,fieldControlLabelProps:y,fieldControlTooltipProps:K,fieldControlHintProps:C}=e,k=__rest(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),x=!c,j=!a,P=checkHasMsg(F,_),B=showExpertSlot(i),T=j&&!B&&s,v=buildBadgeTextString(p,g),O="string"==typeof F?"error":null==F?void 0:F._type,S=[h(Fragment,null,h(InputContainer,Object.assign({},m),l),T&&h(FormFieldTooltipFc,Object.assign({},K||{},{id:r,label:i,hideLabel:s,align:b,badgeText:v}))),h(KolFormFieldLabelFc,Object.assign({},y||{},{id:r,baseClassName:"kol-field-control",class:clsx(null==y?void 0:y.class,{"kol-field-control__label--visually-hidden":Boolean(s)}),hasExpertSlot:B,label:i,accessKey:p,shortKey:g}))];"left"===n&&S.reverse();const A={"kol-field-control--disabled":Boolean(t),"kol-field-control--required":Boolean(f),"kol-field-control--touched":Boolean(_),"kol-field-control--hide-label":Boolean(s),"kol-field-control--read-only":Boolean(u),[`kol-field-control--${O||"error"}`]:Boolean(P),[`kol-field-control--label-align-${n}`]:Boolean(n)};return h("div",Object.assign({class:clsx("kol-field-control",A,o)},k),S,x&&h(KolFormFieldHintFc,Object.assign({},C||{},{baseClassName:"kol-field-control",id:r,hint:d})))};function getFieldControlProps(e){const l={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(l.required=e._required),"_readOnly"in e&&(l.readonly=e._readOnly),"_labelAlign"in e&&(l.labelAlign=e._labelAlign),"_accessKey"in e&&(l.accessKey=e._accessKey),"_shortKey"in e&&(l.shortKey=e._shortKey),l}const FieldControlStateWrapper=(e,l)=>{var{state:o}=e,r=__rest(e,["state"]);return h(KolFieldControlFc,Object.assign({},getFieldControlProps(o),r),l)};export{FieldControlStateWrapper as F};
+import{_ as __rest}from"./Heading-CF5mGt3A.js";import{h,F as Fragment}from"./index-BEYG-0cN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./common-8fBdMvJM.js";import{b as buildBadgeTextString,s as showExpertSlot}from"./reuse-CX4AQDkS.js";import{a as FormFieldTooltipFc,K as KolFormFieldLabelFc,b as KolFormFieldHintFc,c as checkHasMsg}from"./FormFieldStateWrapper-CA5QfRbl.js";const InputContainer=(e,l)=>{var{class:o}=e,r=__rest(e,["class"]);return h("div",Object.assign({class:clsx("kol-field-control__input",o)},r),l)},KolFieldControlFc=(e,l)=>{const{class:o,id:r,disabled:t,label:i,hideLabel:s,labelAlign:n,renderNoTooltip:a,hint:d,renderNoHint:c,tooltipAlign:b,accessKey:p,shortKey:g,msg:F,touched:_,required:f,readonly:m,fieldControlInputProps:u,fieldControlLabelProps:y,fieldControlTooltipProps:C,fieldControlHintProps:K}=e,k=__rest(e,["class","id","disabled","label","hideLabel","labelAlign","renderNoTooltip","hint","renderNoHint","tooltipAlign","accessKey","shortKey","msg","touched","required","readonly","fieldControlInputProps","fieldControlLabelProps","fieldControlTooltipProps","fieldControlHintProps"]),j=!c,x=!a,B=checkHasMsg(F,_),P=showExpertSlot(i),v=x&&!P&&s,A=buildBadgeTextString(p,g),S="string"==typeof F?"error":null==F?void 0:F._type,H=[h(Fragment,null,h(InputContainer,Object.assign({},u),l),v&&h(FormFieldTooltipFc,Object.assign({},C||{},{id:r,label:i,hideLabel:s,align:b,badgeText:A}))),h(KolFormFieldLabelFc,Object.assign({},y||{},{id:r,baseClassName:"kol-field-control",class:clsx(null==y?void 0:y.class,{"kol-field-control__label--visually-hidden":Boolean(s)}),hasExpertSlot:P,label:i,accessKey:p,shortKey:g}))];"left"===n&&H.reverse();const L={"kol-field-control--disabled":Boolean(t),"kol-field-control--required":Boolean(f),"kol-field-control--touched":Boolean(_),"kol-field-control--hide-label":Boolean(s),"kol-field-control--read-only":Boolean(m),[`kol-field-control--${S||"error"}`]:Boolean(B),[`kol-field-control--label-align-${n}`]:Boolean(n)};return h("div",Object.assign({class:clsx("kol-field-control",L,o)},k),H,j&&h(KolFormFieldHintFc,Object.assign({},K||{},{baseClassName:"kol-field-control",id:r,hint:d})))};function getFieldControlProps(e){const l={id:e._id,disabled:e._disabled,msg:e._msg,hint:e._hint,label:e._label,hideLabel:e._hideLabel,touched:e._touched};return"_required"in e&&(l.required=e._required),"_readOnly"in e&&(l.readonly=e._readOnly),"_labelAlign"in e&&(l.labelAlign=e._labelAlign),"_accessKey"in e&&(l.accessKey=e._accessKey),"_shortKey"in e&&(l.shortKey=e._shortKey),l}const FieldControlStateWrapper=(e,l)=>{var{state:o}=e,r=__rest(e,["state"]);return h(KolFieldControlFc,Object.assign({},getFieldControlProps(o),r),l)};export{FieldControlStateWrapper as F};