@public-ui/components 2.2.16-rc.1 → 2.2.16-rc.2

package/dist/cjs/kol-abbr.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js");require("./index-397ed1bf.js");const dev_utils=require("./dev.utils-2628f528.js"),componentNames=require("./component-names-2c750b1b.js"),label=require("./label-49026737.js"),tooltipAlign=require("./tooltip-align-b9f6c389.js");require("./align-990ce192.js");const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > abbr {\n    cursor: help;\n  }\n}",KolAbbrDefaultStyle0=defaultStyleCss,KolAbbr=class{constructor(n){index.registerInstance(this,n),this.nonce=dev_utils.nonce(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return index.h(index.Host,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},index.h("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},index.h("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},index.h("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),index.h(componentNames.KolTooltipWcTag,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateTooltipAlign(n){tooltipAlign.validateTooltipAlign(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:KolAbbrDefaultStyle0},exports.kol_abbr=KolAbbr;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js");require("./index-397ed1bf.js");const dev_utils=require("./dev.utils-35a8105a.js"),componentNames=require("./component-names-2c750b1b.js"),label=require("./label-49026737.js"),tooltipAlign=require("./tooltip-align-b9f6c389.js");require("./align-990ce192.js");const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > abbr {\n    cursor: help;\n  }\n}",KolAbbrDefaultStyle0=defaultStyleCss,KolAbbr=class{constructor(n){index.registerInstance(this,n),this.nonce=dev_utils.nonce(),this._label=void 0,this._tooltipAlign="top",this.state={_label:"",_tooltipAlign:"top"}}render(){return index.h(index.Host,{key:"598d706f074db11649d068894821a214d3373d11",class:"kol-abbr"},index.h("abbr",{key:"cea033577a07ea9cbc48cf32f2afa798b2f70c1b","aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},index.h("span",{key:"f28a0dacfb9e1d5807f763e03401e1b71c0414c3",title:""},index.h("slot",{key:"c72ee140bfc1c43d781a5309c07f9a47689d6f4e"}))),index.h(componentNames.KolTooltipWcTag,{key:"2743bb91c1b770375bda8e19668e7ad698b10baa",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateTooltipAlign(n){tooltipAlign.validateTooltipAlign(this,n)}componentWillLoad(){this.validateLabel(this._label),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_tooltipAlign:["validateTooltipAlign"]}}};KolAbbr.style={default:KolAbbrDefaultStyle0},exports.kol_abbr=KolAbbr;

package/dist/cjs/kol-accordion.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-c776c56b.js"),index=require("./index-397ed1bf.js"),dev_utils=require("./dev.utils-2628f528.js"),validation=require("./validation-c9325cc4.js"),Collapsible=require("./Collapsible-c9efc75a.js"),disabled=require("./disabled-eebeb967.js"),open=require("./open-475bf62b.js"),label=require("./label-49026737.js");require("./tslib.es6-5e301284.js"),require("./clsx-dd4d6dd1.js"),require("./component-names-2c750b1b.js");const validateAccordionCallbacks=(n,e)=>{index.watchValidator(n,"_on",n=>index.isObject(n),new Set(["AccordionCallbacksPropType {Events.onClick}"]),e)},defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    /**\n     * The `overflow: hidden` ensures that the content is not visible during the animated\n     * opening and closing. This should also cut off overlays containing content, but it\n     *does not.\n     */\n    overflow: hidden;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: visibility 0.3s;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}",KolAccordionDefaultStyle0=defaultStyleCss;index.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),index.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(n){index$1.registerInstance(this,n),this.nonce=dev_utils.nonce(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,setTimeout(()=>{var e,i;null===(i=null===(e=this.state._on)||void 0===e?void 0:e.onClick)||void 0===i||i.call(e,n,!0===this._open)})},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:e,_disabled:i,_level:t}=this.state,a="accordion",o={id:this.nonce,label:e,open:n,disabled:i,level:t,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`},ContentProps:{class:`${a}__content`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return index$1.h(index$1.Host,{key:"7ddae7d5f74257c2b7c6210b99e2fe96664a92de",class:"kol-accordion"},index$1.h(Collapsible.KolCollapsibleFc,Object.assign({key:"95da6a5f290091ac0356ba4481f6fed24cfe832e"},o),index$1.h("slot",{key:"cc563067a38896c68041a3a40a3cc3b5c3bc2353"})))}validateDisabled(n){disabled.validateDisabled(this,n)}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateLevel(n){validation.watchHeadingLevel(this,n)}validateOn(n){validateAccordionCallbacks(this,n)}validateOpen(n){open.validateOpen(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:KolAccordionDefaultStyle0},exports.kol_accordion=KolAccordion;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-95de0efa.js"),index=require("./index-397ed1bf.js"),dev_utils=require("./dev.utils-35a8105a.js"),validation=require("./validation-c9325cc4.js"),Collapsible=require("./Collapsible-690551e6.js"),disabled=require("./disabled-eebeb967.js"),open=require("./open-475bf62b.js"),label=require("./label-49026737.js");require("./tslib.es6-5e301284.js"),require("./clsx-dd4d6dd1.js"),require("./component-names-2c750b1b.js");const validateAccordionCallbacks=(n,e)=>{index.watchValidator(n,"_on",n=>index.isObject(n),new Set(["AccordionCallbacksPropType {Events.onClick}"]),e)},defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ */\n@layer kol-component {\n  .collapsible {\n    /* @see https://github.com/public-ui/kolibri/issues/5952 */\n    /*\n          * Inside a button, the caption text is always centered.\n          * So we have to align the text to the left.\n          */\n  }\n  .collapsible__wrapper {\n    /* Forces the element into its own GPU compositing layer (via 3D transform). Helps prevent rendering/layout bugs (e.g. #7511) and may improve animation performance. */\n    transform: translateZ(0);\n    display: grid;\n    /**\n     * The `overflow: hidden` ensures that the content is not visible during the animated\n     * opening and closing. This should also cut off overlays containing content, but it\n     *does not.\n     */\n    overflow: hidden;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 0.3s;\n  }\n  .collapsible__wrapper-animation {\n    min-height: 0;\n    /* This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. */\n    visibility: hidden;\n    transition: visibility 0.3s;\n  }\n  .open .collapsible__wrapper {\n    grid-template-rows: 1fr;\n  }\n  .open .collapsible__wrapper-animation {\n    visibility: visible;\n  }\n  @media (prefers-reduced-motion) {\n    .collapsible__wrapper-animation, .collapsible__wrapper {\n      transition-duration: 0s;\n    }\n  }\n  @media print {\n    :not(.open) .collapsible__wrapper-animation {\n      display: none;\n    }\n  }\n  .collapsible__heading-button button .kol-span-wc {\n    justify-items: start;\n  }\n}",KolAccordionDefaultStyle0=defaultStyleCss;index.featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),index.featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion=class{constructor(n){index$1.registerInstance(this,n),this.nonce=dev_utils.nonce(),this.catchRef=n=>{this.buttonWcRef=n},this.handleOnClick=n=>{this._open=!this._open,setTimeout(()=>{var e,i;null===(i=null===(e=this.state._on)||void 0===e?void 0:e.onClick)||void 0===i||i.call(e,n,!0===this._open)})},this._disabled=!1,this._label=void 0,this._level=0,this._on=void 0,this._open=!1,this.state={_label:"",_level:0,_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){const{_open:n,_label:e,_disabled:i,_level:t}=this.state,a="accordion",o={id:this.nonce,label:e,open:n,disabled:i,level:t,onClick:this.handleOnClick,class:a,HeadingProps:{class:`${a}__heading`},HeadingButtonProps:{ref:this.catchRef,class:`${a}__heading-button`},ContentProps:{class:`${a}__content`,wrapperClass:`${a}__wrapper`,animationClass:`${a}__wrapper-animation`}};return index$1.h(index$1.Host,{key:"7ddae7d5f74257c2b7c6210b99e2fe96664a92de",class:"kol-accordion"},index$1.h(Collapsible.KolCollapsibleFc,Object.assign({key:"95da6a5f290091ac0356ba4481f6fed24cfe832e"},o),index$1.h("slot",{key:"cc563067a38896c68041a3a40a3cc3b5c3bc2353"})))}validateDisabled(n){disabled.validateDisabled(this,n)}validateLabel(n){label.validateLabel(this,n,{required:!0})}validateLevel(n){validation.watchHeadingLevel(this,n)}validateOn(n){validateAccordionCallbacks(this,n)}validateOpen(n){open.validateOpen(this,n)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};KolAccordion.style={default:KolAccordionDefaultStyle0},exports.kol_accordion=KolAccordion;

package/dist/cjs/kol-alert-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),index$1=require("./index-397ed1bf.js"),validation=require("./validation-c9325cc4.js"),Alert=require("./Alert-32a5cc5e.js"),hasCloser=require("./has-closer-98eb7947.js"),label=require("./label-49026737.js");require("./tslib.es6-5e301284.js"),require("./clsx-dd4d6dd1.js"),require("./i18n-ae496e9d.js"),require("./i18n-1c001171.js"),require("./component-names-2c750b1b.js");const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],KolAlertWc=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e,t;null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e,new Event("Close"))},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){const{_alert:e,_hasCloser:t,_label:a,_level:i,_type:l,_variant:s}=this.state,r={alert:e,hasCloser:t,label:a,level:i,type:l,variant:s,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return index.h(index.Host,{key:"93a18daf255ec95713c85ec926081163cb70df4a"},index.h(Alert.KolAlertFc,Object.assign({key:"dcfb772612cbe77e683b839474ce1e6e56e22dc4"},r),index.h("slot",{key:"daaca45ea2680f9f458dd24c41947214f391d8b2"})))}validateAlert(e){index$1.watchBoolean(this,"_alert",e)}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&index$1.setState(this,"_on",{onClose:e.onClose})}validateType(e){index$1.watchValidator(this,"_type",e=>"string"==typeof e&&alertTypeOptions.includes(e),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){index$1.watchValidator(this,"_variant",e=>"string"==typeof e&&alertVariantOptions.includes(e),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};exports.kol_alert_wc=KolAlertWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),index$1=require("./index-397ed1bf.js"),validation=require("./validation-c9325cc4.js"),Alert=require("./Alert-dcc456e0.js"),hasCloser=require("./has-closer-98eb7947.js"),label=require("./label-49026737.js");require("./tslib.es6-5e301284.js"),require("./clsx-dd4d6dd1.js"),require("./i18n-ae496e9d.js"),require("./i18n-1c001171.js"),require("./component-names-2c750b1b.js");const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],KolAlertWc=class{constructor(e){index.registerInstance(this,e),this.close=()=>{var e,t;null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e,new Event("Close"))},this.handleAlertTimeout=()=>{this.validateAlert(!1)},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){const{_alert:e,_hasCloser:t,_label:a,_level:i,_type:l,_variant:s}=this.state,r={alert:e,hasCloser:t,label:a,level:i,type:l,variant:s,onCloserClick:this.close,onAlertTimeout:this.handleAlertTimeout};return index.h(index.Host,{key:"93a18daf255ec95713c85ec926081163cb70df4a"},index.h(Alert.KolAlertFc,Object.assign({key:"dcfb772612cbe77e683b839474ce1e6e56e22dc4"},r),index.h("slot",{key:"daaca45ea2680f9f458dd24c41947214f391d8b2"})))}validateAlert(e){index$1.watchBoolean(this,"_alert",e)}validateHasCloser(e){hasCloser.validateHasCloser(this,e)}validateLabel(e){label.validateLabel(this,e)}validateLevel(e){validation.watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&index$1.setState(this,"_on",{onClose:e.onClose})}validateType(e){index$1.watchValidator(this,"_type",e=>"string"==typeof e&&alertTypeOptions.includes(e),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){index$1.watchValidator(this,"_variant",e=>"string"==typeof e&&alertVariantOptions.includes(e),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};exports.kol_alert_wc=KolAlertWc;

package/dist/cjs/kol-alert.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert=class{constructor(n){index.registerInstance(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,{key:"a982a3bcc1c141e059ac207df60455adcec5d402",class:"kol-alert"},index.h(componentNames.KolAlertWcTag,{key:"e0d95edabcfd5d1aff26d51f9dee5ccbf3c91951",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",{key:"149a58b2f2222989a7447cc6235b49f80b9f4fc1"})))}};KolAlert.style={default:KolAlertDefaultStyle0},exports.kol_alert=KolAlert;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert=class{constructor(n){index.registerInstance(this,n),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return index.h(index.Host,{key:"a982a3bcc1c141e059ac207df60455adcec5d402",class:"kol-alert"},index.h(componentNames.KolAlertWcTag,{key:"e0d95edabcfd5d1aff26d51f9dee5ccbf3c91951",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},index.h("slot",{key:"149a58b2f2222989a7447cc6235b49f80b9f4fc1"})))}};KolAlert.style={default:KolAlertDefaultStyle0},exports.kol_alert=KolAlert;

package/dist/cjs/kol-avatar-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js");require("./index-397ed1bf.js");const i18n=require("./i18n-ae496e9d.js"),imageSource=require("./image-source-d1d24cc8.js"),label=require("./label-49026737.js");require("./i18n-1c001171.js");const formatNameAsInitial=e=>0===e.length?"":e[0].toUpperCase(),formatLabelAsInitials=e=>{const a=e.split(/\s+/),t=a[0],i=a[a.length-1];return a.length>=2&&t&&i?`${formatNameAsInitial(t)}${formatNameAsInitial(i)}`:formatNameAsInitial(e)},KolAvatarWc=class{constructor(e){index.registerInstance(this,e),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return index.h(index.Host,{key:"b45a03c214f69fa12120c1ab077cbdda68af4d03",class:"kol-avatar-wc"},index.h("div",{key:"11c5ec00e290a3e045ec6d355bd9afd9b65cb396","aria-label":i18n.translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?index.h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):index.h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(e){imageSource.validateImageSource(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};exports.kol_avatar_wc=KolAvatarWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js");require("./index-397ed1bf.js");const i18n=require("./i18n-ae496e9d.js"),imageSource=require("./image-source-d1d24cc8.js"),label=require("./label-49026737.js");require("./i18n-1c001171.js");const formatNameAsInitial=e=>0===e.length?"":e[0].toUpperCase(),formatLabelAsInitials=e=>{const a=e.split(/\s+/),t=a[0],i=a[a.length-1];return a.length>=2&&t&&i?`${formatNameAsInitial(t)}${formatNameAsInitial(i)}`:formatNameAsInitial(e)},KolAvatarWc=class{constructor(e){index.registerInstance(this,e),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return index.h(index.Host,{key:"b45a03c214f69fa12120c1ab077cbdda68af4d03",class:"kol-avatar-wc"},index.h("div",{key:"11c5ec00e290a3e045ec6d355bd9afd9b65cb396","aria-label":i18n.translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?index.h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):index.h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(e){imageSource.validateImageSource(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}};exports.kol_avatar_wc=KolAvatarWc;

package/dist/cjs/kol-avatar.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .container,\n  .image,\n  .initials {\n    border-radius: 50%;\n  }\n  .image,\n  .initials {\n    width: 100%;\n    height: 100%;\n  }\n  .container {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    width: calc(100rem / var(--kolibri-root-font-size, 16));\n    height: calc(100rem / var(--kolibri-root-font-size, 16));\n  }\n  .initials {\n    background-color: #d3d3d3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar=class{constructor(n){index.registerInstance(this,n),this._src=void 0,this._label=void 0}render(){return index.h(index.Host,{key:"177cf2f61660902db5c1680e3e10fc7f3c567695",class:"kol-avatar"},index.h(componentNames.KolAvatarWcTag,{key:"9103d11ec31279584865dd3acf92a9ef0d04ca61",_src:this._src,_label:this._label}))}};KolAvatar.style={default:KolAvatarDefaultStyle0},exports.kol_avatar=KolAvatar;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .container,\n  .image,\n  .initials {\n    border-radius: 50%;\n  }\n  .image,\n  .initials {\n    width: 100%;\n    height: 100%;\n  }\n  .container {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    width: calc(100rem / var(--kolibri-root-font-size, 16));\n    height: calc(100rem / var(--kolibri-root-font-size, 16));\n  }\n  .initials {\n    background-color: #d3d3d3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar=class{constructor(n){index.registerInstance(this,n),this._src=void 0,this._label=void 0}render(){return index.h(index.Host,{key:"177cf2f61660902db5c1680e3e10fc7f3c567695",class:"kol-avatar"},index.h(componentNames.KolAvatarWcTag,{key:"9103d11ec31279584865dd3acf92a9ef0d04ca61",_src:this._src,_label:this._label}))}};KolAvatar.style={default:KolAvatarDefaultStyle0},exports.kol_avatar=KolAvatar;

package/dist/cjs/kol-badge.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-c776c56b.js"),index=require("./index-397ed1bf.js"),componentNames=require("./component-names-2c750b1b.js"),dev_utils=require("./dev.utils-2628f528.js"),color=require("./color-72baae00.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > span {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;index.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index$1.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.handleColorChange=n=>{const t=color.handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return index$1.h(componentNames.KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index$1.h(index$1.Host,{key:"e18cef57a5d00c73f9040d17f16e53a22bb21c2d",class:"kol-badge"},index$1.h("span",{key:"6375f9d2c8c8863165d6e0dce77ad89f708275b5",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index$1.h(componentNames.KolSpanWcTag,{key:"a74d942a94c5bbeb002bbd42a5d45a9e75c704e8",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){index.objectObjectHandler(n,()=>{try{n=index.parseJson(n)}catch(n){}index.setState(this,"_smartButton",n)})}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:KolBadgeDefaultStyle0},exports.kol_badge=KolBadge;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-95de0efa.js"),index=require("./index-397ed1bf.js"),componentNames=require("./component-names-2c750b1b.js"),dev_utils=require("./dev.utils-35a8105a.js"),color=require("./color-72baae00.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host > span {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;index.featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge=class{constructor(n){index$1.registerInstance(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=dev_utils.nonce(),this.handleColorChange=n=>{const t=color.handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return index$1.h(componentNames.KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return index$1.h(index$1.Host,{key:"e18cef57a5d00c73f9040d17f16e53a22bb21c2d",class:"kol-badge"},index$1.h("span",{key:"6375f9d2c8c8863165d6e0dce77ad89f708275b5",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},index$1.h(componentNames.KolSpanWcTag,{key:"a74d942a94c5bbeb002bbd42a5d45a9e75c704e8",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){color.validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){index.objectObjectHandler(n,()=>{try{n=index.parseJson(n)}catch(n){}index.setState(this,"_smartButton",n)})}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};KolBadge.style={default:KolBadgeDefaultStyle0},exports.kol_badge=KolBadge;

package/dist/cjs/kol-breadcrumb.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),index$1=require("./index-397ed1bf.js"),uniqueNavLabels=require("./unique-nav-labels-32603a3d.js"),validation=require("./validation-ffd5fb05.js"),componentNames=require("./component-names-2c750b1b.js"),label=require("./label-49026737.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  li,\n  ul {\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-icon::part(separator) {\n    font-size: 0.7em;\n    font-weight: 900;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb=class{constructor(n){index.registerInstance(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return index.h("li",{key:e},0!==e&&index.h(componentNames.KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?index.h("span",null,n._hideLabel?index.h(componentNames.KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):index.h(index.Fragment,null,n._label)):index.h(componentNames.KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h(index.Host,{key:"329c1062de3097aac33fd6ddbafd65f4df37a375",class:"kol-breadcrumb"},index.h("nav",{key:"dfd7dc319fdac349fd221ce266364c8e3bc6d7ab","aria-label":this.state._label},index.h("ul",{key:"4503b6418e33303a4763de3d1f97a5279d4fae37"},0===this.state._links.length&&index.h("li",{key:"6f0cddb0ad668f37c302b85f783a4a427608cf71"},index.h(componentNames.KolIconTag,{key:"9672fa3ed1ad96eef3e98b53d89840fbb121de40",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),index$1.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:KolBreadcrumbDefaultStyle0},exports.kol_breadcrumb=KolBreadcrumb;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),index$1=require("./index-397ed1bf.js"),uniqueNavLabels=require("./unique-nav-labels-32603a3d.js"),validation=require("./validation-ffd5fb05.js"),componentNames=require("./component-names-2c750b1b.js"),label=require("./label-49026737.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  li,\n  ul {\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-icon::part(separator) {\n    font-size: 0.7em;\n    font-weight: 900;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb=class{constructor(n){index.registerInstance(this,n),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return index.h("li",{key:e},0!==e&&index.h(componentNames.KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?index.h("span",null,n._hideLabel?index.h(componentNames.KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):index.h(index.Fragment,null,n._label)):index.h(componentNames.KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return index.h(index.Host,{key:"329c1062de3097aac33fd6ddbafd65f4df37a375",class:"kol-breadcrumb"},index.h("nav",{key:"dfd7dc319fdac349fd221ce266364c8e3bc6d7ab","aria-label":this.state._label},index.h("ul",{key:"4503b6418e33303a4763de3d1f97a5279d4fae37"},0===this.state._links.length&&index.h("li",{key:"6f0cddb0ad668f37c302b85f783a4a427608cf71"},index.h(componentNames.KolIconTag,{key:"9672fa3ed1ad96eef3e98b53d89840fbb121de40",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||uniqueNavLabels.removeNavLabel(this.state._label),label.validateLabel(this,n,{required:!0}),index$1.a11yHintLabelingLandmarks(n),uniqueNavLabels.addNavLabel(this.state._label)}validateLinks(n){validation.watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){uniqueNavLabels.removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};KolBreadcrumb.style={default:KolBreadcrumbDefaultStyle0},exports.kol_breadcrumb=KolBreadcrumb;

package/dist/cjs/kol-button-group-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),KolButtonGroupWc=class{constructor(e){index.registerInstance(this,e),this.state={}}render(){return index.h(index.Host,{key:"c6f45fc1a9b73541e97f8bd14481c053df9d22b8",class:"kol-button-group-wc"},index.h("slot",{key:"e6e47348a642909c61fe042ab15e9cb8eb29adee"}))}};exports.kol_button_group_wc=KolButtonGroupWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),KolButtonGroupWc=class{constructor(e){index.registerInstance(this,e),this.state={}}render(){return index.h(index.Host,{key:"c6f45fc1a9b73541e97f8bd14481c053df9d22b8",class:"kol-button-group-wc"},index.h("slot",{key:"e6e47348a642909c61fe042ab15e9cb8eb29adee"}))}};exports.kol_button_group_wc=KolButtonGroupWc;

package/dist/cjs/kol-button-group.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup=class{constructor(n){index.registerInstance(this,n)}render(){return index.h(index.Host,{key:"5d9e4a2275cb34811dabead3a0fc42feaded6fad",class:"kol-button-group"},index.h(componentNames.KolButtonGroupWcTag,{key:"b87c020718ba902dc4c4ef4aa9dc0ca3eff65021"},index.h("slot",{key:"e1d613b3027f4fcbe054d5f751c73eddd68cfcdf"})))}};KolButtonGroup.style={default:KolButtonGroupDefaultStyle0},exports.kol_button_group=KolButtonGroup;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}",KolButtonGroupDefaultStyle0=defaultStyleCss,KolButtonGroup=class{constructor(n){index.registerInstance(this,n)}render(){return index.h(index.Host,{key:"5d9e4a2275cb34811dabead3a0fc42feaded6fad",class:"kol-button-group"},index.h(componentNames.KolButtonGroupWcTag,{key:"b87c020718ba902dc4c4ef4aa9dc0ca3eff65021"},index.h("slot",{key:"e1d613b3027f4fcbe054d5f751c73eddd68cfcdf"})))}};KolButtonGroup.style={default:KolButtonGroupDefaultStyle0},exports.kol_button_group=KolButtonGroup;

package/dist/cjs/kol-button-link.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c776c56b.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\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  :is(a, button) {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n    padding: 1em;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  button {\n    min-height: unset;\n  }\n}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return index.h(index.Host,{key:"74a1c493bcd94ecbdcf72abeca56d9cbbd6aaf93",class:"kol-button-link"},index.h(componentNames.KolButtonWcTag,{key:"9bcabede025937492ce8082a3ceb14184352d5b0",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},index.h("slot",{key:"091e5f56f9184bbee891e6e12430d3aafe3690de",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};KolButtonLink.style={default:KolButtonLinkDefaultStyle0},exports.kol_button_link=KolButtonLink;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-95de0efa.js"),componentNames=require("./component-names-2c750b1b.js"),defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\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-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\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  :is(a, button) {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n    padding: 1em;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  button {\n    min-height: unset;\n  }\n}",KolButtonLinkDefaultStyle0=defaultStyleCss,KolButtonLink=class{constructor(n){index.registerInstance(this,n),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return index.h(index.Host,{key:"74a1c493bcd94ecbdcf72abeca56d9cbbd6aaf93",class:"kol-button-link"},index.h(componentNames.KolButtonWcTag,{key:"9bcabede025937492ce8082a3ceb14184352d5b0",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},index.h("slot",{key:"091e5f56f9184bbee891e6e12430d3aafe3690de",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}};KolButtonLink.style={default:KolButtonLinkDefaultStyle0},exports.kol_button_link=KolButtonLink;

package/dist/cjs/kol-button-link.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-button-link.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,y8MAAy8M,CAAC;AACl+M,mCAAe,eAAe;;MC8BjB,aAAa;;;QAGR,aAAQ,GAAG,CAAC,GAA4B;YACxD,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;SACvB,CAAC;;;;;;yBAwFmC,KAAK;0BAOJ,KAAK;;;;;;;;;;6BAqDW,KAAK;qBAKf,QAAQ;;;IAlJ7C,MAAM,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IAMM,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAMM,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACnC;IAEM,MAAM;QACZ,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,iBAAiB,IAC5BD,QAACE,6BAAc,qDACd,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBF,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACX,EACN;KACF;;;;;;;;;","names":["h","Host","KolButtonWcTag"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n@use '../link' as *;\n\n@layer kol-component {\n\tbutton {\n\t\tmin-height: unset; // Inline links may have the height of the flowing text and do not necessarily have to be 44px high.\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Focuses the button element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-link\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}
+{"file":"kol-button-link.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,y8MAAy8M,CAAC;AACl+M,mCAAe,eAAe;;MC8BjB,aAAa;;;QAGR,aAAQ,GAAG,CAAC,GAA4B;YACxD,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;SACvB,CAAC;;;;;;yBAwFmC,KAAK;0BAOJ,KAAK;;;;;;;;;;6BAqDW,KAAK;qBAKf,QAAQ;;;IAlJ7C,MAAM,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IAMM,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAMM,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACnC;IAEM,MAAM;QACZ,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,iBAAiB,IAC5BD,QAACE,6BAAc,qDACd,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnBF,mEAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACX,EACN;KACF;;;;;;;;;","names":["h","Host","KolButtonWcTag"],"sources":["src/components/button-link/style.scss?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n@use '../link' as *;\n\n@layer kol-component {\n\tbutton {\n\t\tmin-height: unset; // Inline links may have the height of the flowing text and do not necessarily have to be 44px high.\n\t}\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonLinkProps,\n\tButtonTypePropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tLabelWithExpertSlotPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolButtonLink implements ButtonLinkProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Focuses the button element.\n\t */\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-link\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}

package/dist/cjs/kol-button-wc.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-c776c56b.js"),index=require("./index-397ed1bf.js"),events=require("./events-221fcb43.js"),dev_utils=require("./dev.utils-2628f528.js"),controller=require("./controller-4d2fa3e0.js"),associated_controller=require("./associated.controller-f1c92ada.js"),componentNames=require("./component-names-2c750b1b.js"),accessAndShortKey=require("./access-and-short-key-d5fd6a06.js"),buttonVariant=require("./button-variant-5e036f33.js"),customClass=require("./custom-class-65e2f9b5.js"),disabled=require("./disabled-eebeb967.js"),hideLabel=require("./hide-label-66a55661.js"),icons=require("./icons-4d6827f7.js"),label=require("./label-49026737.js"),tooltipAlign=require("./tooltip-align-b9f6c389.js");require("./align-990ce192.js");const validateAriaControls=(t,e)=>{index.watchString(t,"_ariaControls",e)},validateAriaSelected=(t,e)=>{index.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{index.watchValidator(t,"_on",t=>index.isObject(t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{index.watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},KolButtonWc=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,e;const a=index.showExpertSlot(this.state._label),i=Boolean(null===(e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===e?void 0:e.length);return index$1.h(index$1.Host,{key:"d45ad337e0a56f359cf274d2955bd75841647804",class:"kol-button-wc"},index$1.h("button",Object.assign({key:"3b926e8d0bb625b36119a8f8ba1865530473c097",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":index.mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":index.mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),index$1.h(componentNames.KolSpanWcTag,{key:"54be590b87352dcf4580c08184927326a87eed4c",class:"button-inner",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},index$1.h("slot",{key:"b6cc8540a5012bbe70b41b971e462fb143f3c23d",name:"expert",slot:"expert"}))),index$1.h(componentNames.KolTooltipWcTag,{key:"64fe65b5784df3ed17a49ef8cbfbade9f1f59369","aria-hidden":"true",hidden:a||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&index$1.h("span",{key:"15bf98431ffac9f6739639277b1b3b8ba9477304",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){index$1.registerInstance(this,t),this.internalDescriptionById=dev_utils.nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,a;"submit"===this.state._type?controller.propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?controller.propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(events.stopPropagation(t),events.tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(index.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaHasPopup=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessAndShortKey.validateAccessKey(this,t),accessAndShortKey.validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){buttonVariant.validateAriaDescription(this,t)}validateAriaExpanded(t){buttonVariant.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){index.watchString(this,"_id",t)}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){buttonVariant.validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){accessAndShortKey.validateShortKey(this,t),accessAndShortKey.validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){accessAndShortKey.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){index.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){buttonVariant.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.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.validateVariant(this._variant),accessAndShortKey.validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return index$1.getElement(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"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index$1=require("./index-95de0efa.js"),index=require("./index-397ed1bf.js"),events=require("./events-221fcb43.js"),dev_utils=require("./dev.utils-35a8105a.js"),controller=require("./controller-4d2fa3e0.js"),associated_controller=require("./associated.controller-f1c92ada.js"),componentNames=require("./component-names-2c750b1b.js"),accessAndShortKey=require("./access-and-short-key-d5fd6a06.js"),buttonVariant=require("./button-variant-5e036f33.js"),customClass=require("./custom-class-65e2f9b5.js"),disabled=require("./disabled-eebeb967.js"),hideLabel=require("./hide-label-66a55661.js"),icons=require("./icons-4d6827f7.js"),label=require("./label-49026737.js"),tooltipAlign=require("./tooltip-align-b9f6c389.js");require("./align-990ce192.js");const validateAriaControls=(t,e)=>{index.watchString(t,"_ariaControls",e)},validateAriaSelected=(t,e)=>{index.watchBoolean(t,"_ariaSelected",e)},validateButtonCallbacks=(t,e)=>{index.watchValidator(t,"_on",t=>index.isObject(t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),e)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,e)=>{index.watchValidator(t,"_type",t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),e)},KolButtonWc=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,e;const a=index.showExpertSlot(this.state._label),i=Boolean(null===(e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===e?void 0:e.length);return index$1.h(index$1.Host,{key:"d45ad337e0a56f359cf274d2955bd75841647804",class:"kol-button-wc"},index$1.h("button",Object.assign({key:"9bda0691767c6dbb8e658713861002fae8ffa300",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":index.mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":index.mapStringOrBoolean2String(this.state._ariaSelected),"aria-keyshortcuts":this.state._shortKey,class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),index$1.h(componentNames.KolSpanWcTag,{key:"13089e55131105e244e8854e88b31377cc0d55aa",class:"button-inner",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:a?"":this.state._label},index$1.h("slot",{key:"2a1c1c36e6caf742592cbbe2237884ce88ab6feb",name:"expert",slot:"expert"}))),index$1.h(componentNames.KolTooltipWcTag,{key:"41a4acf8b8eb0264dc516559309844f2862d507d","aria-hidden":"true",hidden:a||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&index$1.h("span",{key:"144acc2f013a343e77f81b0a902d2105f31bba86",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){index$1.registerInstance(this,t),this.internalDescriptionById=dev_utils.nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var e,a;"submit"===this.state._type?controller.propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?controller.propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(events.stopPropagation(t),events.tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(index.setEventTarget(t,this.buttonRef),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaHasPopup=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new associated_controller.AssociatedInputController(this,"button",this.host)}validateAccessKey(t){accessAndShortKey.validateAccessKey(this,t),accessAndShortKey.validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){buttonVariant.validateAriaDescription(this,t)}validateAriaExpanded(t){buttonVariant.validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){customClass.validateCustomClass(this,t)}validateDisabled(t){disabled.validateDisabled(this,t)}validateHideLabel(t){hideLabel.validateHideLabel(this,t)}validateIcons(t){icons.validateIcons(this,t)}validateId(t){index.watchString(this,"_id",t)}validateLabel(t){label.validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){buttonVariant.validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){accessAndShortKey.validateShortKey(this,t),accessAndShortKey.validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){accessAndShortKey.validateTabIndex(this,t)}validateTooltipAlign(t){tooltipAlign.validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){index.setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){buttonVariant.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.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.validateVariant(this._variant),accessAndShortKey.validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return index$1.getElement(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"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};exports.kol_button_wc=KolButtonWc;