@public-ui/components 3.1.0-rc.1 → 3.1.0

package/dist/components/kol-alert.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{b as KolAlertWcTag}from"./component-names.js";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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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}",KolAlert$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._alert=!1,this._hasCloser=!1,this._level=0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return h(KolAlertWcTag,{key:"bf51c76e2d6568eea0d1a0c3047da6987aa249d8",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},h("slot",{key:"b754666af76f0fcbb15ffeaa4d11b2f61d93abc4"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-alert",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-alert"].forEach(n=>{if("kol-alert"===n)customElements.get(n)||customElements.define(n,KolAlert$1)})}const KolAlert=KolAlert$1,defineCustomElement=defineCustomElement$1;export{KolAlert,defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as t,h as i,transformTag as e}from"@stencil/core/internal/client";import{b as a}from"./component-names.js";const l=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this._alert=!1,this._hasCloser=!1,this._level=0,this._type="default",this._variant="msg",this.state={_level:0}}render(){return i(a,{key:"bf51c76e2d6568eea0d1a0c3047da6987aa249d8",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},i("slot",{key:"b754666af76f0fcbb15ffeaa4d11b2f61d93abc4"}))}static get style(){return{default:" @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   } }"}}},[289,"kol-alert",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]}]),n=l,r=function(){"undefined"!=typeof customElements&&["kol-alert"].forEach(o=>{"kol-alert"===o&&(customElements.get(e(o))||customElements.define(e(o),l))})};export{n as KolAlert,r as defineCustomElement};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./common.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{v as validateImageSource}from"./image-source.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";const formatNameAsInitial=a=>0===a.length?"":a[0].toUpperCase(),formatLabelAsInitials=a=>{const t=a.split(/\s+/),e=t[0],o=t[t.length-1];return t.length>=2&&e&&o?`${formatNameAsInitial(e)}${formatNameAsInitial(o)}`:formatNameAsInitial(a)},KolAvatarWc$1=proxyCustomElement(class extends HTMLElement{constructor(a){super(),!1!==a&&this.__registerHost(),this.bgColorStr="#d3d3d3",this.colorStr="#000",this.handleColorChange=a=>{const t=handleColorChange(a);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#d3d3d3",this.state={_src:"",_label:"",_color:{backgroundColor:"#d3d3d3",foregroundColor:"#000"}}}render(){return h("div",{key:"04d0b5653648f532391c0b8f611ef3bd7d4e8bbf","aria-label":translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img",style:{backgroundColor:this.bgColorStr,color:this.colorStr}},this.state._src?h("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):h("span",{"aria-hidden":"true",class:"kol-avatar__initials"},formatLabelAsInitials(this.state._label.trim())))}validateColor(a){validateColor(this,a,{defaultValue:"#d3d3d3",hooks:{beforePatch:this.handleColorChange}})}validateSrc(a){validateImageSource(this,a)}validateLabel(a){validateLabel(this,a,{required:!0})}componentWillLoad(){this.validateColor(this._color),this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_color:["validateColor"],_src:["validateSrc"],_label:["validateLabel"]}}},[256,"kol-avatar-wc",{_color:[1],_src:[1],_label:[1],state:[32]},void 0,{_color:["validateColor"],_src:["validateSrc"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar-wc"].forEach(a=>{if("kol-avatar-wc"===a)customElements.get(a)||customElements.define(a,KolAvatarWc$1)})}const KolAvatarWc=KolAvatarWc$1,defineCustomElement=defineCustomElement$1;export{KolAvatarWc,defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as a,h as o,transformTag as s}from"@stencil/core/internal/client";import"./common.js";import{h as r,v as e}from"./color.js";import{v as l}from"./image-source.js";import{v as i}from"./label.js";import{t as c}from"./i18n.js";const d=t=>0===t.length?"":t[0].toUpperCase(),n=t(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.bgColorStr="#d3d3d3",this.colorStr="#000",this.handleColorChange=t=>{const a=r(t);this.bgColorStr=a.backgroundColor,this.colorStr=a.foregroundColor},this._color="#d3d3d3",this.state={_src:"",_label:"",_color:{backgroundColor:"#d3d3d3",foregroundColor:"#000"}}}render(){return o("div",{key:"04d0b5653648f532391c0b8f611ef3bd7d4e8bbf","aria-label":c("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"kol-avatar",role:"img",style:{backgroundColor:this.bgColorStr,color:this.colorStr}},this.state._src?o("img",{alt:"","aria-hidden":"true",class:"kol-avatar__image",src:this.state._src}):o("span",{"aria-hidden":"true",class:"kol-avatar__initials"},(t=>{const a=t.split(/\s+/),o=a[0],r=a[a.length-1];return a.length>=2&&o&&r?`${d(o)}${d(r)}`:d(t)})(this.state._label.trim())))}validateColor(t){e(this,t,{defaultValue:"#d3d3d3",hooks:{beforePatch:this.handleColorChange}})}validateSrc(t){l(this,t)}validateLabel(t){i(this,t,{required:!0})}componentWillLoad(){this.validateColor(this._color),this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_color:[{validateColor:0}],_src:[{validateSrc:0}],_label:[{validateLabel:0}]}}},[0,"kol-avatar-wc",{_color:[1],_src:[1],_label:[1],state:[32]},void 0,{_color:[{validateColor:0}],_src:[{validateSrc:0}],_label:[{validateLabel:0}]}]),h=n,m=function(){"undefined"!=typeof customElements&&["kol-avatar-wc"].forEach(t=>{"kol-avatar-wc"===t&&(customElements.get(s(t))||customElements.define(s(t),n))})};export{h as KolAvatarWc,m as defineCustomElement};

package/dist/components/kol-avatar.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as KolAvatarWcTag}from"./component-names.js";const defaultStyleCss="/* 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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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  .kol-avatar,\n  .kol-avatar__image,\n  .kol-avatar__initials {\n    border-radius: 50%;\n  }\n  .kol-avatar {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-avatar__image, .kol-avatar__initials {\n    width: 100%;\n    height: 100%;\n  }\n  .kol-avatar__initials {\n    background-color: inherit;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._color="#d3d3d3"}render(){return h(KolAvatarWcTag,{key:"b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf",_color:this._color,_src:this._src,_label:this._label})}static get style(){return{default:defaultStyleCss}}},[289,"kol-avatar",{_color:[1],_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar"].forEach(n=>{if("kol-avatar"===n)customElements.get(n)||customElements.define(n,KolAvatar$1)})}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as t,h as e,transformTag as a}from"@stencil/core/internal/client";import{c as i}from"./component-names.js";const l=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this._color="#d3d3d3"}render(){return e(i,{key:"b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf",_color:this._color,_src:this._src,_label:this._label})}static get style(){return{default:"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-avatar,   .kol-avatar__image,   .kol-avatar__initials {     border-radius: 50%;   }   .kol-avatar {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));     width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-avatar__image, .kol-avatar__initials {     width: 100%;     height: 100%;   }   .kol-avatar__initials {     background-color: inherit;     display: flex;     align-items: center;     justify-content: center;     font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));   } }"}}},[33,"kol-avatar",{_color:[1],_src:[1],_label:[1]}]),n=l,r=function(){"undefined"!=typeof customElements&&["kol-avatar"].forEach(o=>{"kol-avatar"===o&&(customElements.get(a(o))||customElements.define(a(o),l))})};export{n as KolAvatar,r as defineCustomElement};

package/dist/components/kol-badge.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import"./Alert.js";import{c as clsx}from"./clsx.js";import{d as KolButtonWcTag}from"./component-names.js";import{f as featureHint,o as objectObjectHandler,p as parseJson,s as setState}from"./common.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{v as validateIcons}from"./icons.js";import"./i18n.js";import{K as KolSpanFc}from"./Span.js";import{n as nonce}from"./dev.utils.js";const defaultStyleCss="/* 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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-badge {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  .kol-badge .kol-badge__smart-button .button {\n    color: inherit;\n  }\n}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.catchSmartButtonRef=n=>{this.smartButtonRef=n},this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=n=>{const t=handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor}}renderSmartButton(n){return h(KolButtonWcTag,{ref:this.catchSmartButtonRef,class:"kol-badge__smart-button",_ariaControls:this.id,_ariaDescription:n._ariaDescription,_buttonVariant:n._variant,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign})}async focus(){var n;return Promise.resolve(null===(n=this.smartButtonRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return h("span",{key:"aa434ba6ebe2fd58562931d192cc7747b3d4c429",class:clsx("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h(KolSpanFc,{key:"fa0dd9eadb49f101a9e85348187cfecd9958dfc4",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){validateIcons(this,n)}validateColor(n){validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){objectObjectHandler(n,()=>{try{n=parseJson(n)}catch(n){}setState(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32],focus:[64],kolFocus:[64]},void 0,{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-badge"].forEach(n=>{if("kol-badge"===n)customElements.get(n)||customElements.define(n,KolBadge$1)})}const KolBadge=KolBadge$1,defineCustomElement=defineCustomElement$1;export{KolBadge,defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as t,h as i,transformTag as a}from"@stencil/core/internal/client";import"./Alert.js";import{c as e}from"./clsx.js";import{d as n}from"./component-names.js";import{f as l,o as s,p as r,s as c}from"./common.js";import{h as d,v as h}from"./color.js";import{v as m}from"./icons.js";import"./i18n.js";import{K as p}from"./Span.js";import{n as u}from"./dev.utils.js";l("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const b=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=u(),this.catchSmartButtonRef=o=>{this.smartButtonRef=o},this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=o=>{const t=d(o);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor}}renderSmartButton(o){return i(n,{ref:this.catchSmartButtonRef,class:"kol-badge__smart-button",_ariaControls:this.id,_ariaDescription:o._ariaDescription,_buttonVariant:o._variant,_customClass:o._customClass,_disabled:o._disabled,_hideLabel:!0,_icons:o._icons,_id:o._id,_label:o._label,_on:o._on,_tooltipAlign:o._tooltipAlign})}async focus(){var o;return Promise.resolve(null===(o=this.smartButtonRef)||void 0===o?void 0:o.focus())}async kolFocus(){return this.focus()}render(){const o="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return i("span",{key:"aa434ba6ebe2fd58562931d192cc7747b3d4c429",class:e("kol-badge",{"kol-badge--has-smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},i(p,{key:"fa0dd9eadb49f101a9e85348187cfecd9958dfc4",class:"kol-badge__label",id:o?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),o&&this.renderSmartButton(this.state._smartButton))}validateIcons(o){m(this,o)}validateColor(o){h(this,o,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(o){s(o,()=>{try{o=r(o)}catch(o){}c(this,"_smartButton",o)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:[{validateIcons:0}],_color:[{validateColor:0}],_smartButton:[{validateSmartButton:0}]}}static get style(){return{default:"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-badge {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));     display: inline-flex;     place-items: center;   }   .kol-badge .kol-badge__smart-button .button {     color: inherit;   } }"}}},[33,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32],focus:[64],kolFocus:[64]},void 0,{_icons:[{validateIcons:0}],_color:[{validateColor:0}],_smartButton:[{validateSmartButton:0}]}]),f=b,k=function(){"undefined"!=typeof customElements&&["kol-badge"].forEach(o=>{"kol-badge"===o&&(customElements.get(a(o))||customElements.define(a(o),b))})};export{f as KolBadge,k as defineCustomElement};

package/dist/components/kol-breadcrumb.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Fragment}from"@stencil/core/internal/client";import{d as a11yHintLabelingLandmarks}from"./common.js";import{v as validateLabel}from"./label.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,f as KolLinkWcTag}from"./component-names.js";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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n    list-style: none;\n  }\n  .kol-breadcrumb__icon::part(separator) {\n    font-size: 0.7em;\n    font-weight: 900;\n  }\n  .kol-breadcrumb__icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{class:"kol-breadcrumb__list-element",key:e},0!==e&&h(KolIconTag,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},n._hideLabel?h(KolIconTag,{class:"kol-breadcrumb__icon",_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkWcTag,Object.assign({class:"kol-breadcrumb__link",_inline:!1},n)))},this.state={_label:"",_links:[]}}render(){return h("nav",{key:"357295b7fe9e9db5be6862cca0dc46143888dfde",class:"kol-breadcrumb","aria-label":this.state._label},h("ul",{key:"98a45620a07b02908b3d9d7394e5555c65f5c79b",class:"kol-breadcrumb__list"},0===this.state._links.length&&h("li",{key:"c11594ab4dcd6d864fe6183124ad764ffa758962"},h(KolIconTag,{key:"ec80421edc40cd8195c97b63b65e3ce35806849b",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach(n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)})}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as i,h as e,Fragment as t,transformTag as a}from"@stencil/core/internal/client";import{d as l}from"./common.js";import{v as n}from"./label.js";import{r,a as s}from"./unique-nav-labels.js";import{w as c}from"./validation2.js";import{e as d,f as b}from"./component-names.js";const m=o(class extends i{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.renderLink=(i,o)=>{const a=this.state._links.length-1;return e("li",{class:"kol-breadcrumb__list-element",key:o},0!==o&&e(d,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),o===a?e("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},i._hideLabel?e(d,{class:"kol-breadcrumb__icon",_label:i._label,_icons:"string"==typeof i._icons?i._icons:"codicon codicon-symbol-event"}):e(t,null,i._label)):e(b,Object.assign({class:"kol-breadcrumb__link",_inline:!1},i)))},this.state={_label:"",_links:[]}}render(){return e("nav",{key:"357295b7fe9e9db5be6862cca0dc46143888dfde",class:"kol-breadcrumb","aria-label":this.state._label},e("ul",{key:"98a45620a07b02908b3d9d7394e5555c65f5c79b",class:"kol-breadcrumb__list"},0===this.state._links.length&&e("li",{key:"c11594ab4dcd6d864fe6183124ad764ffa758962"},e(d,{key:"ec80421edc40cd8195c97b63b65e3ce35806849b",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(e,i,o=!1){o||r(this.state._label),n(this,e,{required:!0}),l(e),s(this.state._label)}validateLinks(e){c("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){r(this.state._label)}static get watchers(){return{_label:[{validateLabel:0}],_links:[{validateLinks:0}]}}static get style(){return{default:' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   :host {     display: inline-block;   }   .kol-link {     display: inline-flex;     max-width: fit-content;     align-items: baseline;     place-items: center;     text-align: left;     text-decoration-line: none;   }   .kol-link--standalone {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }   .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {     text-decoration-thickness: 0.2em;   }   .kol-link__text .kol-span__label {     text-decoration-line: underline;   }   .kol-link__icon {     display: inline-flex;     margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-breadcrumb__list, .kol-breadcrumb__list-element {     display: flex;     margin: 0;     padding: 0;     gap: 0.5em;     flex-wrap: wrap;     place-items: center;     list-style: none;   }   .kol-breadcrumb__icon::part(separator) {     font-size: 0.7em;     font-weight: 900;   }   .kol-breadcrumb__icon::part(separator):before {     content: "\\f054";     font-family: "Font Awesome 6 Free";   } }'}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:[{validateLabel:0}],_links:[{validateLinks:0}]}]),p=m,k=function(){"undefined"!=typeof customElements&&["kol-breadcrumb"].forEach(e=>{"kol-breadcrumb"===e&&(customElements.get(a(e))||customElements.define(a(e),m))})};export{p as KolBreadcrumb,k as defineCustomElement};

package/dist/components/kol-button-link.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as KolButtonWcTag}from"./component-names.js";const defaultStyleCss="/* 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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-button--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-button__text .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-button__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--inline {\n    min-width: unset;\n    min-height: unset;\n  }\n}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._variant="inline",this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async focus(){var n;return Promise.resolve(null===(n=this.buttonWcRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}render(){return h(KolButtonWcTag,{key:"fcbd8b1c16714336207186854cdec13ad4b51af5",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:void 0!==this._inline?this._inline:"inline"===this._variant||"standalone"!==this._variant&&void 0,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{key:"137fbfe36f98126f0291b21a358fd4386ba53eb0",name:"expert",slot:"expert"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_variant:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],getValue:[64],focus:[64],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link"].forEach(n=>{if("kol-button-link"===n)customElements.get(n)||customElements.define(n,KolButtonLink$1)})}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};
+import{proxyCustomElement as i,HTMLElement as t,h as o,transformTag as e}from"@stencil/core/internal/client";import{d as n}from"./component-names.js";const a=i(class extends t{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.buttonWcRef=t},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._variant="inline",this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async focus(){var t;return Promise.resolve(null===(t=this.buttonWcRef)||void 0===t?void 0:t.focus())}async kolFocus(){return this.focus()}render(){return o(n,{key:"fcbd8b1c16714336207186854cdec13ad4b51af5",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:void 0!==this._inline?this._inline:"inline"===this._variant||"standalone"!==this._variant&&void 0,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{key:"137fbfe36f98126f0291b21a358fd4386ba53eb0",name:"expert",slot:"expert"}))}static get style(){return{default:"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   :host {     display: inline-block;   }   .kol-button {     display: inline-flex;     max-width: fit-content;     align-items: baseline;     place-items: center;     text-align: left;     text-decoration-line: none;   }   .kol-button--standalone {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }   .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {     text-decoration-thickness: 0.2em;   }   .kol-button__text .kol-span__label {     text-decoration-line: underline;   }   .kol-button__icon {     display: inline-flex;     margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-button--inline {     min-width: unset;     min-height: unset;   } }"}}},[289,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_variant:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],getValue:[64],focus:[64],kolFocus:[64]}]),l=a,s=function(){"undefined"!=typeof customElements&&["kol-button-link"].forEach(t=>{"kol-button-link"===t&&(customElements.get(e(t))||customElements.define(e(t),a))})};export{l as KolButtonLink,s as defineCustomElement};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as watchBoolean,w as watchValidator,m as mapStringOrBoolean2String,e as mapBoolean2String,g as setEventTarget,h as watchString,s as setState}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{v as validateInline}from"./inline.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{c as clsx}from"./clsx.js";import{a as KolTooltipWcTag}from"./component-names.js";import"./Alert.js";import"./i18n.js";import{K as KolSpanFc}from"./Span.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";const validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async focus(){var t;return Promise.resolve(null===(t=this.buttonRef)||void 0===t?void 0:t.focus())}async kolFocus(){return this.focus()}render(){var t;const a=showExpertSlot(this.state._label),e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),i=this.state._accessKey||this.state._shortKey,s=!0===this.state._disabled,l=!0===this.state._hideLabel;return h(Host,{key:"0d3d25815145b6edb52f339e7c856fd562a9d8c4"},h("button",{key:"8645454cf97c128e930ddb3968e1a4ec8865664e",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":e||void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":l&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:clsx("kol-button",{"kol-button--disabled":s,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,"kol-button--inline":!0===this.state._inline,"kol-button--standalone":!1===this.state._inline,"kol-button--hide-label":l,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:s,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},h(KolSpanFc,{key:"5c9c0d4b1128b1c693f20efd92b3a6ee85a78a23",class:"kol-button__text",badgeText:i,icons:this.state._icons,hideLabel:l,label:a?"":this.state._label},h("slot",{key:"3c30ccb15fe9026b96e1e606be9c5d5566ef875f",name:"expert",slot:"expert"}))),l&&h(KolTooltipWcTag,{key:"9bd70dbe2ca962b34cb59c2a1dd32055a854b286",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:a,class:"kol-button__tooltip",_badgeText:i,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){super(),!1!==t&&this.__registerHost(),this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),"submit"===this.state._type?propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?propagateResetEventToForm({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value))),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateInline(t){validateInline(this,t,{defaultValue:!1})}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateInline(this._inline),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach(t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)})}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as i,h as a,Host as e,transformTag as s}from"@stencil/core/internal/client";import{c as l,w as o,m as n,e as d,g as r,h,s as c}from"./common.js";import{s as v}from"./reuse.js";import{v as _,a as u,b,c as p}from"./access-and-short-key.js";import{v as m,a as y,b as f,c as k,d as x}from"./button-variant.js";import{v as A}from"./custom-class.js";import{v as S}from"./disabled.js";import{v as j}from"./hide-label.js";import{v as g}from"./icons.js";import{v as C}from"./inline.js";import{a as V}from"./label.js";import{v as I}from"./tooltip-align.js";import{c as K}from"./clsx.js";import{a as T}from"./component-names.js";import"./Alert.js";import"./i18n.js";import{K as B}from"./Span.js";import{d as D,K as E}from"./events.js";import{p as L,a as w}from"./controller.js";import{A as H}from"./associated.controller.js";const N=["button","reset","submit"],O=t(class extends i{async focus(){var t;return Promise.resolve(null===(t=this.buttonRef)||void 0===t?void 0:t.focus())}async kolFocus(){return this.focus()}render(){var t;const i=v(this.state._label),s=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),l=this.state._accessKey||this.state._shortKey,o=!0===this.state._disabled,r=!0===this.state._hideLabel;return a(e,{key:"0d3d25815145b6edb52f339e7c856fd562a9d8c4"},a("button",{key:"8645454cf97c128e930ddb3968e1a4ec8865664e",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":s||void 0,"aria-expanded":d(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":r&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":n(this.state._ariaSelected),class:K("kol-button",{"kol-button--disabled":o,["kol-button--"+this.state._buttonVariant]:"custom"!==this.state._buttonVariant,"kol-button--inline":!0===this.state._inline,"kol-button--standalone":!1===this.state._inline,"kol-button--hide-label":r,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:o,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},a(B,{key:"5c9c0d4b1128b1c693f20efd92b3a6ee85a78a23",class:"kol-button__text",badgeText:l,icons:this.state._icons,hideLabel:r,label:i?"":this.state._label},a("slot",{key:"3c30ccb15fe9026b96e1e606be9c5d5566ef875f",name:"expert",slot:"expert"}))),r&&a(T,{key:"9bd70dbe2ca962b34cb59c2a1dd32055a854b286",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:i,class:"kol-button__tooltip",_badgeText:l,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){super(),!1!==t&&this.__registerHost(),this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),"submit"===this.state._type?L({form:this.host}):"reset"===this.state._type?w({form:this.host}):(this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(r(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value))),this.host&&D(this.host,E.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&D(this.host,E.mousedown)},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"normal"},this.controller=new H(this,"button",this.host)}validateAccessKey(t){_(this,t),u(t,this._shortKey)}validateAriaControls(t){m(this,t)}validateAriaDescription(t){y(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaSelected(t){((t,a)=>{l(this,"_ariaSelected",a)})(0,t)}validateCustomClass(t){A(this,t)}validateDisabled(t){S(this,t)}validateHideLabel(t){j(this,t)}validateIcons(t){g(this,t)}validateId(t){h(this,"_id",t)}validateInline(t){C(this,t,{defaultValue:!1})}validateLabel(t){V(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){((t,a)=>{o(this,"_on",t=>"object"==typeof t&&null!==t,new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)})(0,t)}validateRole(t){k(this,t)}validateShortKey(t){b(this,t),u(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){p(this,t)}validateTooltipAlign(t){I(this,t)}validateType(t){((t,a)=>{o(this,"_type",t=>"string"==typeof t&&N.includes(t),new Set(["KoliBriButtonType {"+N.join(", ")]),a)})(0,t)}validateValue(t){c(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateButtonVariant(t){x(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateInline(this._inline),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateButtonVariant(this._buttonVariant),u(this._accessKey,this._shortKey)}get host(){return this}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_ariaControls:[{validateAriaControls:0}],_ariaDescription:[{validateAriaDescription:0}],_ariaExpanded:[{validateAriaExpanded:0}],_ariaSelected:[{validateAriaSelected:0}],_customClass:[{validateCustomClass:0}],_disabled:[{validateDisabled:0}],_hideLabel:[{validateHideLabel:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_inline:[{validateInline:0}],_label:[{validateLabel:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_role:[{validateRole:0}],_shortKey:[{validateShortKey:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_tabIndex:[{validateTabIndex:0}],_tooltipAlign:[{validateTooltipAlign:0}],_type:[{validateType:0}],_value:[{validateValue:0}],_buttonVariant:[{validateButtonVariant:0}]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],focus:[64],kolFocus:[64]},void 0,{_accessKey:[{validateAccessKey:0}],_ariaControls:[{validateAriaControls:0}],_ariaDescription:[{validateAriaDescription:0}],_ariaExpanded:[{validateAriaExpanded:0}],_ariaSelected:[{validateAriaSelected:0}],_customClass:[{validateCustomClass:0}],_disabled:[{validateDisabled:0}],_hideLabel:[{validateHideLabel:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_inline:[{validateInline:0}],_label:[{validateLabel:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_role:[{validateRole:0}],_shortKey:[{validateShortKey:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_tabIndex:[{validateTabIndex:0}],_tooltipAlign:[{validateTooltipAlign:0}],_type:[{validateType:0}],_value:[{validateValue:0}],_buttonVariant:[{validateButtonVariant:0}]}]),P=O,R=function(){"undefined"!=typeof customElements&&["kol-button-wc"].forEach(t=>{"kol-button-wc"===t&&(customElements.get(s(t))||customElements.define(s(t),O))})};export{P as KolButtonWc,R as defineCustomElement};

package/dist/components/kol-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as KolButtonWcTag}from"./component-names.js";const 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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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  }\n}",KolButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._variant="normal"}async getValue(){return this._value}async focus(){var n;return Promise.resolve(null===(n=this.buttonWcRef)||void 0===n?void 0:n.focus())}async kolFocus(){return this.focus()}render(){return h(KolButtonWcTag,{key:"04885e75c1664f013521070617765c168714c6db",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant},h("slot",{key:"5f2085cc413dfee10d13ecc5b0a681645b4052ee",name:"expert",slot:"expert"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],getValue:[64],focus:[64],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button"].forEach(n=>{if("kol-button"===n)customElements.get(n)||customElements.define(n,KolButton$1)})}const KolButton=KolButton$1,defineCustomElement=defineCustomElement$1;export{KolButton,defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as o,h as i,transformTag as e}from"@stencil/core/internal/client";import{d as n}from"./component-names.js";const a=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.buttonWcRef=t},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._variant="normal"}async getValue(){return this._value}async focus(){var t;return Promise.resolve(null===(t=this.buttonWcRef)||void 0===t?void 0:t.focus())}async kolFocus(){return this.focus()}render(){return i(n,{key:"04885e75c1664f013521070617765c168714c6db",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant},i("slot",{key:"5f2085cc413dfee10d13ecc5b0a681645b4052ee",name:"expert",slot:"expert"}))}static get style(){return{default:'@charset "UTF-8";   @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   :host {     display: inline-block;   }   .kol-button {     display: inline-flex;     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     text-decoration-line: none;   }   .kol-button::before {          content: "​";   }   .kol-button__text {     width: 100%;   } }'}}},[289,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],getValue:[64],focus:[64],kolFocus:[64]}]),l=a,s=function(){"undefined"!=typeof customElements&&["kol-button"].forEach(t=>{"kol-button"===t&&(customElements.get(e(t))||customElements.define(e(t),a))})};export{l as KolButton,s as defineCustomElement};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{s as setState}from"./common.js";import{v as validateHasCloser}from"./has-closer.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{w as watchHeadingLevel}from"./validation.js";import{d as KolButtonWcTag}from"./component-names.js";import"./Alert.js";import{K as KolHeadingFc}from"./Heading.js";import"./markdown.js";import{n as nonce}from"./dev.utils.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const KolCardWc$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.nonce=nonce(),this.translateClose=translate("kol-close"),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close")),this.host&&dispatchDomEvent(this.host,KolEvent.close)},this.on={onClick:this.close},this._hasCloser=!1,this._level=0,this.state={_label:""},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose}render(){return h(Host,{key:"31a21a7dd16b81042127406bc4cd091f16f230d4"},h("div",{key:"22001ed9c1f73d9b6445b0b6e36109c9cc8ef608","aria-labelledby":this.nonce,class:"kol-card",role:"group"},h(KolHeadingFc,{key:"5b6760cafee75437ba6ef208d35e05e96ec3f76a",class:"kol-card__header",id:this.nonce,level:this.state._level},this.state._label),h("div",{key:"9b780b199200df0ce78ad4f3d2f1ad746f838a8e",class:"kol-card__content"},h("slot",{key:"cdf53c951f6980b6827db3bf37ea7ad216037c69"})),this.state._hasCloser&&h(KolButtonWcTag,{key:"dd2b363336c1f891f7c6dfa4a46eca9ab1850dcf",class:"kol-card__close-button kol-close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return this}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}},[260,"kol-card-wc",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card-wc"].forEach(e=>{if("kol-card-wc"===e)customElements.get(e)||customElements.define(e,KolCardWc$1)})}const KolCardWc=KolCardWc$1,defineCustomElement=defineCustomElement$1;export{KolCardWc,defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,h as s,Host as a,transformTag as o}from"@stencil/core/internal/client";import{s as l}from"./common.js";import{v as i}from"./has-closer.js";import{v as c}from"./label.js";import{t as d}from"./i18n.js";import{w as r}from"./validation.js";import{d as n}from"./component-names.js";import"./Alert.js";import{K as h}from"./Heading.js";import"./markdown.js";import{n as f}from"./dev.utils.js";import{d as m,K as v}from"./events.js";const b=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.nonce=f(),this.translateClose=d("kol-close"),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close")),this.host&&m(this.host,v.close)},this.on={onClick:this.close},this._hasCloser=!1,this._level=0,this.state={_label:""},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose}render(){return s(a,{key:"31a21a7dd16b81042127406bc4cd091f16f230d4"},s("div",{key:"22001ed9c1f73d9b6445b0b6e36109c9cc8ef608","aria-labelledby":this.nonce,class:"kol-card",role:"group"},s(h,{key:"5b6760cafee75437ba6ef208d35e05e96ec3f76a",class:"kol-card__header",id:this.nonce,level:this.state._level},this.state._label),s("div",{key:"9b780b199200df0ce78ad4f3d2f1ad746f838a8e",class:"kol-card__content"},s("slot",{key:"cdf53c951f6980b6827db3bf37ea7ad216037c69"})),this.state._hasCloser&&s(n,{key:"dd2b363336c1f891f7c6dfa4a46eca9ab1850dcf",class:"kol-card__close-button kol-close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&l(this,"_on",{onClose:e.onClose})}validateHasCloser(e){i(this,e)}validateLabel(e){c(this,e,{required:!0})}validateLevel(e){r(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return this}static get watchers(){return{_on:[{validateOn:0}],_hasCloser:[{validateHasCloser:0}],_label:[{validateLabel:0}],_level:[{validateLevel:0}]}}},[260,"kol-card-wc",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],state:[32]},void 0,{_on:[{validateOn:0}],_hasCloser:[{validateHasCloser:0}],_label:[{validateLabel:0}],_level:[{validateLevel:0}]}]),_=b,p=function(){"undefined"!=typeof customElements&&["kol-card-wc"].forEach(e=>{"kol-card-wc"===e&&(customElements.get(o(e))||customElements.define(o(e),b))})};export{_ as KolCardWc,p as defineCustomElement};

package/dist/components/kol-card.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{g as KolCardWcTag}from"./component-names.js";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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    height: 100%;\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._hasCloser=!1,this._level=0}render(){return h(KolCardWcTag,{key:"db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97",_on:this._on,_hasCloser:this._hasCloser,_label:this._label,_level:this._level},h("slot",{key:"f7ad1dd60427b5e2ae00f0e2260309a025d1ed44"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card"].forEach(n=>{if("kol-card"===n)customElements.get(n)||customElements.define(n,KolCard$1)})}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};
+import{proxyCustomElement as o,HTMLElement as t,h as i,transformTag as e}from"@stencil/core/internal/client";import{g as a}from"./component-names.js";const n=o(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this._hasCloser=!1,this._level=0}render(){return i(a,{key:"db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97",_on:this._on,_hasCloser:this._hasCloser,_label:this._label,_level:this._level},i("slot",{key:"f7ad1dd60427b5e2ae00f0e2260309a025d1ed44"}))}static get style(){return{default:" @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-card {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));     position: relative;     height: 100%;   }   .kol-card__close-button {     position: absolute;     top: 0;     right: 0;   } }"}}},[289,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2]}]),l=n,r=function(){"undefined"!=typeof customElements&&["kol-card"].forEach(o=>{"kol-card"===o&&(customElements.get(e(o))||customElements.define(e(o),n))})};export{l as KolCard,r as defineCustomElement};

package/dist/components/kol-combobox.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{d as KolButtonWcTag,e as KolIconTag}from"./component-names.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsOptionsGroupFc,a as CustomSuggestionsOptionFc}from"./CustomSuggestionsOptionsGroup.js";import{t as translate}from"./i18n.js";import{n as nonce}from"./dev.utils.js";import{c as watchBoolean,h as watchString}from"./common.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class ComboboxController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validateHideClearButton(e){watchBoolean(this.component,"_hideClearButton",e)}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateValue(e){watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateHideClearButton(this.component._hideClearButton),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),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     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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 text color from his parent element.\n     */\n    color: inherit;\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\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, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\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  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\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-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n  .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {\n    cursor: not-allowed;\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: transparent;\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-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-combobox__delete .kol-button {\n    cursor: pointer;\n  }\n  .kol-combobox__delete--disabled .kol-button {\n    cursor: not-allowed;\n  }\n  .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {\n    cursor: pointer;\n  }\n  .kol-custom-suggestions-toggle--disabled {\n    opacity: 0.5;\n  }\n}',KolCombobox$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}clearSelection(){var e;if(!0===this.state._disabled)return;const t="";this._focusedOptionIndex=-1,this._value=t,this.state._value=t,this._filteredSuggestions=[...this.state._suggestions],this._isOpen=!1;const n={name:this.state._name,value:t};this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:n}),!0,t),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:n}),t),this.controller.setFormAssociatedValue(t),null===(e=this.refInput)||void 0===e||e.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this.state._suggestions]:(this._filteredSuggestions=Array.isArray(this.state._suggestions)?this.state._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof n&&this.focusOption(n)}getFormFieldProps(){return{state:this.state,class:clsx("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return h(FormFieldStateWrapper,Object.assign({key:"c5afe28a1d16ea7880bf51e27eea443ce569a8ff"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"dbccf31419288c4bec6e081c5a4c7dcf56c42f9c",state:this.state},h("div",{key:"99e682a31fdc8dbbcb92621b6618108c433f321e",class:"kol-combobox__group"},h(InputStateWrapper,Object.assign({key:"c9da0b608dabe6adc24221722287fe373273ece4"},this.getInputProps())),this.state._value&&!this.state._hideClearButton&&h(KolButtonWcTag,{key:"58e6def1c6e17c1e0e7ad8540700de3576164eef",_icons:"codicon codicon-close",_label:this.translateDeleteSelection,_hideLabel:!0,_disabled:e,"data-testid":"combobox-delete",class:clsx("kol-combobox__delete",{"kol-combobox__delete--disabled":e}),_on:{onClick:()=>{this.clearSelection()}}}),h(KolIconTag,{key:"e6b4d8abc7b46bcf94c6abdd3b3929a655cdda11",_icons:"codicon codicon-triangle-down",_label:"",class:clsx("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":e}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!e&&h(CustomSuggestionsOptionsGroupFc,{key:"e6fb48734b7c3e4f0abc466a9be4ba4fcedd5c36",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,t)=>h(CustomSuggestionsOptionFc,{disabled:!1,index:t,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const o=(t,n)=>{var o;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(o=this.refInput)||void 0===o||o.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,o(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,o(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,o(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.translateDeleteSelection=translate("kol-delete-selection"),this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else if(Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hideClearButton=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideClearButton:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new ComboboxController(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(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)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}get host(){return this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_hideClearButton:["validateHideClearButton"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[289,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_hideClearButton:[4,"_hide-clear-button"],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_hideClearButton:["validateHideClearButton"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-combobox"].forEach(e=>{if("kol-combobox"===e)customElements.get(e)||customElements.define(e,KolCombobox$1)})}const KolCombobox=KolCombobox$1,defineCustomElement=defineCustomElement$1;export{KolCombobox,defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as i,h as e,transformTag as o}from"@stencil/core/internal/client";import{c as s}from"./clsx.js";import{d as a,e as l}from"./component-names.js";import{g as n,F as r}from"./controller2.js";import{I as h,a as d}from"./controller-icon.js";import{I as c}from"./InputStateWrapper.js";import{C as u,a as m}from"./CustomSuggestionsOptionsGroup.js";import{t as b}from"./i18n.js";import{n as p}from"./dev.utils.js";import{c as g,h as v}from"./common.js";import{v as _}from"./placeholder.js";import{v as f}from"./required.js";import{v as k}from"./suggestions.js";class y extends h{constructor(e,t,o){super(e,t,o),this.component=e}validateHideClearButton(e){g(this.component,"_hideClearButton",e)}validatePlaceholder(e){_(this.component,e)}validateRequired(e){f(this.component,e)}validateSuggestions(e){k(this.component,e)}validateValue(e){v(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validateHideClearButton(this.component._hideClearButton),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const w=t(class extends i{async getValue(){return this.state._value}async focus(){var e;return Promise.resolve(null===(e=this.refInput)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}clearSelection(){var e;if(!0===this.state._disabled)return;const t="";this._focusedOptionIndex=-1,this._value=t,this.state._value=t,this._filteredSuggestions=[...this.state._suggestions],this._isOpen=!1;const o={name:this.state._name,value:t};this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:o}),!0,t),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:o}),t),this.controller.setFormAssociatedValue(t),null===(e=this.refInput)||void 0===e||e.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this.state._suggestions]:(this._filteredSuggestions=Array.isArray(this.state._suggestions)?this.state._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,this._isOpen=!!(this._filteredSuggestions&&this._filteredSuggestions.length>0))}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),o=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex(e=>e.toLowerCase().startsWith(t));"number"==typeof o&&this.focusOption(o)}getFormFieldProps(){return{state:this.state,class:s("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=n(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?"option-"+this._focusedOptionIndex:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const t=!0===this.state._disabled;return e(r,Object.assign({key:"c5afe28a1d16ea7880bf51e27eea443ce569a8ff"},this.getFormFieldProps()),e(d,{key:"dbccf31419288c4bec6e081c5a4c7dcf56c42f9c",state:this.state},e("div",{key:"99e682a31fdc8dbbcb92621b6618108c433f321e",class:"kol-combobox__group"},e(c,Object.assign({key:"c9da0b608dabe6adc24221722287fe373273ece4"},this.getInputProps())),this.state._value&&!this.state._hideClearButton&&e(a,{key:"58e6def1c6e17c1e0e7ad8540700de3576164eef",_icons:"codicon codicon-close",_label:this.translateDeleteSelection,_hideLabel:!0,_disabled:t,"data-testid":"combobox-delete",class:s("kol-combobox__delete",{"kol-combobox__delete--disabled":t}),_on:{onClick:()=>{this.clearSelection()}}}),e(l,{key:"e6b4d8abc7b46bcf94c6abdd3b3929a655cdda11",_icons:"codicon codicon-triangle-down",_label:"",class:s("kol-custom-suggestions-toggle",{"kol-custom-suggestions-toggle--disabled":t}),onClick:this.toggleListbox.bind(this)})),this._isOpen&&!t&&e(u,{key:"e6fb48734b7c3e4f0abc466a9be4ba4fcedd5c36",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((t,o)=>e(m,{disabled:!1,index:o,option:t,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[o]=e)},selected:this.state._value===t,onClick:()=>{this.selectOption(t),this.toggleListbox(),this._isOpen=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(o)},onFocus:()=>{this.focusOption(o)},onKeyDown:e=>{"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(t),this.toggleListbox(),e.preventDefault())}})))))}handleKeyDown(e){var t,o;const i=(t,o)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==o||o()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._isOpen=!1,e.preventDefault(),null===(o=this.refInput)||void 0===o||o.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.translateDeleteSelection=b("kol-delete-selection"),this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),this._isOpen)this._isOpen=!1;else if(Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hideClearButton=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideClearButton:!1,_hideMsg:!1,_id:"id-"+p(),_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new y(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return!!this.state._touched&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(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)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateHideClearButton(e){this.controller.validateHideClearButton(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e),this._filteredSuggestions=this.state._suggestions}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}get host(){return this}static get watchers(){return{_placeholder:[{validatePlaceholder:0}],_accessKey:[{validateAccessKey:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_shortKey:[{validateShortKey:0}],_suggestions:[{validateSuggestions:0}],_hideClearButton:[{validateHideClearButton:0}],_required:[{validateRequired:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}static get style(){return{default:' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-custom-suggestions-option {     line-height: 1.5;     white-space: normal;     cursor: pointer;     overflow-wrap: break-word;   }   .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {     cursor: none !important;   }   .kol-custom-suggestions-option--disabled:focus, .kol-custom-suggestions-option--disabled:focus * {     cursor: not-allowed;   }   .kol-custom-suggestions-options-group {     background-color: white;     display: block;     position: absolute;     z-index: 2;     max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));     margin: 0;     padding: 0;     overflow-x: hidden;     overflow-y: auto;     list-style-type: none;   }   .kol-custom-suggestions-toggle {     display: flex;     width: var(--a11y-min-size);     height: var(--a11y-min-size);     align-items: center;     justify-content: center;     cursor: default;   }   .kol-custom-suggestions-toggle.kol-custom-suggestions-toggle--disabled {     cursor: not-allowed;   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-input {     background-color: transparent;     width: 100%;     min-width: var(--a11y-min-size);   }   .kol-input:focus {     outline: none;   }   .kol-combobox__delete .kol-button {     cursor: pointer;   }   .kol-combobox__delete--disabled .kol-button {     cursor: not-allowed;   }   .kol-custom-suggestions-toggle:not(.kol-custom-suggestions-toggle--disabled) {     cursor: pointer;   }   .kol-custom-suggestions-toggle--disabled {     opacity: 0.5;   } }'}}},[33,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_hideClearButton:[4,"_hide-clear-button"],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_placeholder:[{validatePlaceholder:0}],_accessKey:[{validateAccessKey:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_shortKey:[{validateShortKey:0}],_suggestions:[{validateSuggestions:0}],_hideClearButton:[{validateHideClearButton:0}],_required:[{validateRequired:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}]),x=w,S=function(){"undefined"!=typeof customElements&&["kol-combobox"].forEach(e=>{"kol-combobox"===e&&(customElements.get(o(e))||customElements.define(o(e),w))})};export{x as KolCombobox,S as defineCustomElement};