@public-ui/sample-react 3.0.3 → 3.0.4-fa8bcfa66607a9847a1359c0ca7d77fe673660d7.0

package/dist/assets/{kol-skip-nav.entry-DfSQhZLf.js → kol-skip-nav.entry-BhHpIk7O.js}

@@ -1,4 +1,4 @@
-import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label-DAfXJvJZ-BAobf5Rl.js";import{r as i,a as r}from"./unique-nav-labels-PqHnrOFf-CtmqqHik.js";import{w as d}from"./validation-DhcHxkL2-QAWZ6u9e.js";/*!
+import{r as o,h as e,j as l}from"./index-evyzSoa8.js";import{v as s}from"./label-DAfXJvJZ-C-PmADS4.js";import{r as i,a as r}from"./unique-nav-labels-PqHnrOFf-D313eNEB.js";import{w as d}from"./validation-DhcHxkL2-C8t-8nw4.js";/*!
  * KoliBri - The accessible HTML-Standard
  */const h=`/* forward the rem function */
 /*
@@ -10,13 +10,13 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
      * Minimum size of interactive elements.
      */
     --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));
+    color: black;
     /*
      * No element should be used without a background and font color whose contrast ratio has
      * not been checked. By initially setting the background color to white and the font color
      * to black, the contrast ratio is ensured and explicit adjustment is forced.
      */
     background-color: white;
-    color: black;
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
@@ -50,8 +50,8 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
   [role=button],
   button:not([role=link]),
   .kol-input .input {
-    min-height: var(--a11y-min-size);
     min-width: var(--a11y-min-size);
+    min-height: var(--a11y-min-size);
   }
   /*
    * Some interactive elements should not inherit the font-family and font-size.
@@ -92,13 +92,13 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
   * - https://www.a11yproject.com/posts/how-to-hide-content/
   */
   .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    position: absolute;
+    width: 1px;
     height: 1px;
     overflow: hidden;
-    position: absolute;
     white-space: nowrap;
-    width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
   }
 }
 @layer kol-global {
@@ -108,10 +108,10 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
    */
   :is(a, button) {
     background-color: transparent;
-    border: none;
+    width: 100%;
     margin: 0;
     padding: 0;
-    width: 100%;
+    border: none;
     /* 100% needed for custom width from outside */
   }
   /*
@@ -122,18 +122,18 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
     display: none !important;
   }
   .badge-text-hint {
-    background-color: lightgray;
     color: black;
+    background-color: lightgray;
   }
 }
 @layer kol-global {
   :host {
-    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
     /*
      * The max-width is needed to prevent the table from overflowing the
      * parent node, if the table is wider than the parent node.
      */
     max-width: 100%;
+    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
   }
   * {
     /*
@@ -168,9 +168,9 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
   [aria-disabled=true]:focus,
   [disabled],
   [disabled]:focus {
-    cursor: not-allowed;
     opacity: 0.5;
     outline: none;
+    cursor: not-allowed;
   }
   [aria-disabled=true]:focus .kol-span,
   [disabled]:focus .kol-span {
@@ -180,23 +180,23 @@ import{r as o,h as e,j as l}from"./index-DuJ2kw-o.js";import{v as s}from"./label
 @layer kol-component {
   .kol-skip-nav__list {
     display: grid;
-    list-style: none;
     place-items: center;
+    list-style: none;
   }
   .kol-skip-nav__list-item {
     height: 0;
   }
   .kol-skip-nav .kol-link {
-    left: calc(-99999rem / var(--kolibri-root-font-size, 16));
-    overflow: hidden;
     position: absolute;
+    left: calc(-99999rem / var(--kolibri-root-font-size, 16));
     z-index: 9999999;
+    overflow: hidden;
     line-height: 1;
   }
   .kol-skip-nav .kol-link:focus {
     background-color: #fff;
-    left: unset;
     position: unset;
+    left: unset;
   }
 }`,c=class{constructor(n){o(this,n),this.state={_label:"",_links:[]}}render(){return e("nav",{key:"912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9",class:"kol-skip-nav","aria-label":this.state._label},e("ul",{key:"79991f7d918e9bbf6891d479804f2520356f2a41",class:"kol-skip-nav__list"},this.state._links.map((n,t)=>e("li",{class:"kol-skip-nav__list-item",key:t},e(l,Object.assign({},n))))))}validateLabel(n,t,a=!1){a||i(this.state._label),s(this,n,{required:!0}),r(this.state._label)}validateLinks(n){d("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:h};export{c as kol_skip_nav};
-//# sourceMappingURL=kol-skip-nav.entry-DfSQhZLf.js.map
+//# sourceMappingURL=kol-skip-nav.entry-BhHpIk7O.js.map

package/dist/assets/{kol-skip-nav.entry-DfSQhZLf.js.map → kol-skip-nav.entry-BhHpIk7O.js.map}

@@ -1 +1 @@
-{"version":3,"file":"kol-skip-nav.entry-DfSQhZLf.js","sources":["../../../../components/dist/esm/kol-skip-nav.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-CElQfBOC.js';\nimport './common-7RW_NFNf.js';\nimport { v as validateLabel } from './label-DAfXJvJZ.js';\nimport { r as removeNavLabel, a as addNavLabel } from './unique-nav-labels-PqHnrOFf.js';\nimport { w as watchNavLinks } from './validation-DhcHxkL2.js';\nimport { f as KolLinkWcTag } from './component-names-CkE54Ym7.js';\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     */\\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without a background and font color whose contrast ratio has\\n     * not been checked. By initially setting the background color to white and the font color\\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    background-color: white;\\n    color: black;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  [role=button],\\n  button:not([role=link]),\\n  .kol-input .input {\\n    min-height: var(--a11y-min-size);\\n    min-width: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * 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    clip: rect(0 0 0 0);\\n    clip-path: inset(50%);\\n    height: 1px;\\n    overflow: hidden;\\n    position: absolute;\\n    white-space: nowrap;\\n    width: 1px;\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    border: none;\\n    margin: 0;\\n    padding: 0;\\n    width: 100%;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    background-color: lightgray;\\n    color: black;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: grid;\\n    place-items: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    place-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    cursor: not-allowed;\\n    opacity: 0.5;\\n    outline: none;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-skip-nav__list {\\n    display: grid;\\n    list-style: none;\\n    place-items: center;\\n  }\\n  .kol-skip-nav__list-item {\\n    height: 0;\\n  }\\n  .kol-skip-nav .kol-link {\\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\\n    overflow: hidden;\\n    position: absolute;\\n    z-index: 9999999;\\n    line-height: 1;\\n  }\\n  .kol-skip-nav .kol-link:focus {\\n    background-color: #fff;\\n    left: unset;\\n    position: unset;\\n  }\\n}\";\n\nconst KolSkipNav = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.state = {\n            _label: '',\n            _links: [],\n        };\n    }\n    render() {\n        return (h(\"nav\", { key: '912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9', class: \"kol-skip-nav\", \"aria-label\": this.state._label }, h(\"ul\", { key: '79991f7d918e9bbf6891d479804f2520356f2a41', class: \"kol-skip-nav__list\" }, this.state._links.map((link, index) => {\n            return (h(\"li\", { class: \"kol-skip-nav__list-item\", key: index }, h(KolLinkWcTag, Object.assign({}, link))));\n        }))));\n    }\n    validateLabel(value, _oldValue, initial = false) {\n        if (!initial) {\n            removeNavLabel(this.state._label);\n        }\n        validateLabel(this, value, {\n            required: true,\n        });\n        addNavLabel(this.state._label);\n    }\n    validateLinks(value) {\n        watchNavLinks('KolSkipNav', this, value);\n    }\n    componentWillLoad() {\n        this.validateLabel(this._label, undefined, true);\n        this.validateLinks(this._links);\n    }\n    disconnectedCallback() {\n        removeNavLabel(this.state._label);\n    }\n    static get watchers() { return {\n        \"_label\": [\"validateLabel\"],\n        \"_links\": [\"validateLinks\"]\n    }; }\n};\nKolSkipNav.style = {\n    default: defaultStyleCss\n};\n\nexport { KolSkipNav as kol_skip_nav };\n//# sourceMappingURL=kol-skip-nav.entry.js.map\n\n//# sourceMappingURL=kol-skip-nav.entry.js.map"],"names":["defaultStyleCss","KolSkipNav","hostRef","registerInstance","h","link","index","KolLinkWcTag","value","_oldValue","initial","removeNavLabel","validateLabel","addNavLabel","watchNavLinks"],"mappings":"iOAAA;AAAA;AAAA,GAUA,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAElBC,EAAa,KAAM,CACrB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,MAAQ,CACT,OAAQ,GACR,OAAQ,CAAE,CACb,CACT,CACI,QAAS,CACL,OAAQE,EAAE,MAAO,CAAE,IAAK,2CAA4C,MAAO,eAAgB,aAAc,KAAK,MAAM,MAAM,EAAIA,EAAE,KAAM,CAAE,IAAK,2CAA4C,MAAO,oBAAsB,EAAE,KAAK,MAAM,OAAO,IAAI,CAACC,EAAMC,IACzOF,EAAE,KAAM,CAAE,MAAO,0BAA2B,IAAKE,CAAK,EAAIF,EAAEG,EAAc,OAAO,OAAO,CAAA,EAAIF,CAAI,CAAC,CAAC,CAC7G,CAAC,CAAC,CACX,CACI,cAAcG,EAAOC,EAAWC,EAAU,GAAO,CACxCA,GACDC,EAAe,KAAK,MAAM,MAAM,EAEpCC,EAAc,KAAMJ,EAAO,CACvB,SAAU,EACtB,CAAS,EACDK,EAAY,KAAK,MAAM,MAAM,CACrC,CACI,cAAcL,EAAO,CACjBM,EAAc,aAAc,KAAMN,CAAK,CAC/C,CACI,mBAAoB,CAChB,KAAK,cAAc,KAAK,OAAQ,OAAW,EAAI,EAC/C,KAAK,cAAc,KAAK,MAAM,CACtC,CACI,sBAAuB,CACnBG,EAAe,KAAK,MAAM,MAAM,CACxC,CACI,WAAW,UAAW,CAAE,MAAO,CAC3B,OAAU,CAAC,eAAe,EAC1B,OAAU,CAAC,eAAe,CAClC,CAAM,CACN,EACAV,EAAW,MAAQ,CACf,QAASD,CACb"}
+{"version":3,"file":"kol-skip-nav.entry-BhHpIk7O.js","sources":["../../../../components/dist/esm/kol-skip-nav.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-DTM8XbOu.js';\nimport './common-7RW_NFNf.js';\nimport { v as validateLabel } from './label-DAfXJvJZ.js';\nimport { r as removeNavLabel, a as addNavLabel } from './unique-nav-labels-PqHnrOFf.js';\nimport { w as watchNavLinks } from './validation-DhcHxkL2.js';\nimport { f as KolLinkWcTag } from './component-names-CkE54Ym7.js';\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     */\\n    --a11y-min-size: calc(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 to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  [role=button],\\n  button:not([role=link]),\\n  .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: absolute;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip: rect(0 0 0 0);\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(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  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: grid;\\n    place-items: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    place-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-skip-nav__list {\\n    display: grid;\\n    place-items: center;\\n    list-style: none;\\n  }\\n  .kol-skip-nav__list-item {\\n    height: 0;\\n  }\\n  .kol-skip-nav .kol-link {\\n    position: absolute;\\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\\n    z-index: 9999999;\\n    overflow: hidden;\\n    line-height: 1;\\n  }\\n  .kol-skip-nav .kol-link:focus {\\n    background-color: #fff;\\n    position: unset;\\n    left: unset;\\n  }\\n}\";\n\nconst KolSkipNav = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.state = {\n            _label: '',\n            _links: [],\n        };\n    }\n    render() {\n        return (h(\"nav\", { key: '912f8ac6ce63cddd0fa738db9ef6ff987b2a2db9', class: \"kol-skip-nav\", \"aria-label\": this.state._label }, h(\"ul\", { key: '79991f7d918e9bbf6891d479804f2520356f2a41', class: \"kol-skip-nav__list\" }, this.state._links.map((link, index) => {\n            return (h(\"li\", { class: \"kol-skip-nav__list-item\", key: index }, h(KolLinkWcTag, Object.assign({}, link))));\n        }))));\n    }\n    validateLabel(value, _oldValue, initial = false) {\n        if (!initial) {\n            removeNavLabel(this.state._label);\n        }\n        validateLabel(this, value, {\n            required: true,\n        });\n        addNavLabel(this.state._label);\n    }\n    validateLinks(value) {\n        watchNavLinks('KolSkipNav', this, value);\n    }\n    componentWillLoad() {\n        this.validateLabel(this._label, undefined, true);\n        this.validateLinks(this._links);\n    }\n    disconnectedCallback() {\n        removeNavLabel(this.state._label);\n    }\n    static get watchers() { return {\n        \"_label\": [\"validateLabel\"],\n        \"_links\": [\"validateLinks\"]\n    }; }\n};\nKolSkipNav.style = {\n    default: defaultStyleCss\n};\n\nexport { KolSkipNav as kol_skip_nav };\n//# sourceMappingURL=kol-skip-nav.entry.js.map\n\n//# sourceMappingURL=kol-skip-nav.entry.js.map"],"names":["defaultStyleCss","KolSkipNav","hostRef","registerInstance","h","link","index","KolLinkWcTag","value","_oldValue","initial","removeNavLabel","validateLabel","addNavLabel","watchNavLinks"],"mappings":"iOAAA;AAAA;AAAA,GAUA,MAAMA,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAElBC,EAAa,KAAM,CACrB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,MAAQ,CACT,OAAQ,GACR,OAAQ,CAAE,CACb,CACT,CACI,QAAS,CACL,OAAQE,EAAE,MAAO,CAAE,IAAK,2CAA4C,MAAO,eAAgB,aAAc,KAAK,MAAM,MAAM,EAAIA,EAAE,KAAM,CAAE,IAAK,2CAA4C,MAAO,oBAAsB,EAAE,KAAK,MAAM,OAAO,IAAI,CAACC,EAAMC,IACzOF,EAAE,KAAM,CAAE,MAAO,0BAA2B,IAAKE,CAAK,EAAIF,EAAEG,EAAc,OAAO,OAAO,CAAA,EAAIF,CAAI,CAAC,CAAC,CAC7G,CAAC,CAAC,CACX,CACI,cAAcG,EAAOC,EAAWC,EAAU,GAAO,CACxCA,GACDC,EAAe,KAAK,MAAM,MAAM,EAEpCC,EAAc,KAAMJ,EAAO,CACvB,SAAU,EACtB,CAAS,EACDK,EAAY,KAAK,MAAM,MAAM,CACrC,CACI,cAAcL,EAAO,CACjBM,EAAc,aAAc,KAAMN,CAAK,CAC/C,CACI,mBAAoB,CAChB,KAAK,cAAc,KAAK,OAAQ,OAAW,EAAI,EAC/C,KAAK,cAAc,KAAK,MAAM,CACtC,CACI,sBAAuB,CACnBG,EAAe,KAAK,MAAM,MAAM,CACxC,CACI,WAAW,UAAW,CAAE,MAAO,CAC3B,OAAU,CAAC,eAAe,EAC1B,OAAU,CAAC,eAAe,CAClC,CAAM,CACN,EACAV,EAAW,MAAQ,CACf,QAASD,CACb"}

package/dist/assets/{kol-spin.entry-D7zO8hes.js → kol-spin.entry-BbnkGZJB.js}

@@ -1,4 +1,4 @@
-import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}from"./label-DAfXJvJZ-BAobf5Rl.js";import{v as p}from"./show-C_i9p0dk-bLB1-1Zs.js";import{t as o}from"./i18n-yBVLeHdv-B4Obv0JZ.js";import{c as h}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
+import{r,h as e,H as s,F as l,w as d}from"./index-evyzSoa8.js";import{v as c}from"./label-DAfXJvJZ-C-PmADS4.js";import{v as p}from"./show-C_i9p0dk-BZAFtC-U.js";import{t as o}from"./i18n-yBVLeHdv-CYQJSVOF.js";import{c as h}from"./clsx-eK3rPvPS-BT_IL7Fz.js";/*!
  * KoliBri - The accessible HTML-Standard
  */const a=["cycle","dot","none"],m=(n,t)=>{d(n,"_variant",i=>typeof i=="string"&&a.includes(i),new Set(a),t)},b=`/* forward the rem function */
 /*
@@ -10,13 +10,13 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
      * Minimum size of interactive elements.
      */
     --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));
+    color: black;
     /*
      * No element should be used without a background and font color whose contrast ratio has
      * not been checked. By initially setting the background color to white and the font color
      * to black, the contrast ratio is ensured and explicit adjustment is forced.
      */
     background-color: white;
-    color: black;
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
@@ -50,8 +50,8 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
   [role=button],
   button:not([role=link]),
   .kol-input .input {
-    min-height: var(--a11y-min-size);
     min-width: var(--a11y-min-size);
+    min-height: var(--a11y-min-size);
   }
   /*
    * Some interactive elements should not inherit the font-family and font-size.
@@ -92,13 +92,13 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
   * - https://www.a11yproject.com/posts/how-to-hide-content/
   */
   .visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
+    position: absolute;
+    width: 1px;
     height: 1px;
     overflow: hidden;
-    position: absolute;
     white-space: nowrap;
-    width: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
   }
 }
 @layer kol-global {
@@ -108,10 +108,10 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
    */
   :is(a, button) {
     background-color: transparent;
-    border: none;
+    width: 100%;
     margin: 0;
     padding: 0;
-    width: 100%;
+    border: none;
     /* 100% needed for custom width from outside */
   }
   /*
@@ -122,18 +122,18 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
     display: none !important;
   }
   .badge-text-hint {
-    background-color: lightgray;
     color: black;
+    background-color: lightgray;
   }
 }
 @layer kol-global {
   :host {
-    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
     /*
      * The max-width is needed to prevent the table from overflowing the
      * parent node, if the table is wider than the parent node.
      */
     max-width: 100%;
+    font-size: calc(16rem / var(--kolibri-root-font-size, 16));
   }
   * {
     /*
@@ -168,9 +168,9 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
   [aria-disabled=true]:focus,
   [disabled],
   [disabled]:focus {
-    cursor: not-allowed;
     opacity: 0.5;
     outline: none;
+    cursor: not-allowed;
   }
   [aria-disabled=true]:focus .kol-span,
   [disabled]:focus .kol-span {
@@ -178,26 +178,6 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
   }
 }
 @layer kol-component {
-  .kol-spin__spinner--cycle {
-    width: calc(48rem / var(--kolibri-root-font-size, 16));
-    height: calc(48rem / var(--kolibri-root-font-size, 16));
-  }
-  .kol-spin__loader {
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    position: relative;
-    animation: 2s linear infinite rotate;
-  }
-  .kol-spin__loader::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    border: 5px solid #333;
-    animation: 3s linear infinite prixClipFix;
-  }
   @keyframes rotate {
     100% {
       transform: rotate(360deg);
@@ -234,45 +214,28 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
       animation-duration: 6s;
     }
   }
-}
-@layer kol-component {
-  .kol-spin__spinner--dot {
-    height: calc(16rem / var(--kolibri-root-font-size, 16));
+  .kol-spin__spinner--cycle {
     width: calc(48rem / var(--kolibri-root-font-size, 16));
+    height: calc(48rem / var(--kolibri-root-font-size, 16));
   }
-  .kol-spin__spinner-element {
-    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  .kol-spin__loader {
     border-radius: 50%;
-    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;
-    height: calc(12.8rem / var(--kolibri-root-font-size, 16));
-    position: absolute;
-    top: calc(0.16rem / var(--kolibri-root-font-size, 16));
-    width: calc(12.8rem / var(--kolibri-root-font-size, 16));
-  }
-  .kol-spin__spinner-element--1 {
-    background-color: #000;
-    z-index: 0;
-    animation: 1s infinite spin1;
-    left: calc(0.16rem / var(--kolibri-root-font-size, 16));
-  }
-  .kol-spin__spinner-element--2 {
-    background-color: #000;
-    z-index: 1;
-    animation: 1s infinite spin2;
-    left: calc(0.16rem / var(--kolibri-root-font-size, 16));
-  }
-  .kol-spin__spinner-element--3 {
-    background-color: #000;
-    z-index: 1;
-    animation: 1s infinite spin2;
-    left: calc(17.6rem / var(--kolibri-root-font-size, 16));
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    animation: 2s linear infinite rotate;
   }
-  .kol-spin__spinner-element--neutral {
-    background-color: #666;
-    z-index: 0;
-    animation: 1s infinite spin3;
-    left: calc(33.6rem / var(--kolibri-root-font-size, 16));
+  .kol-spin__loader::before {
+    border-radius: 50%;
+    position: absolute;
+    inset: 0;
+    content: "";
+    animation: 3s linear infinite prixClipFix;
+    border: 5px solid #333;
   }
+}
+@layer kol-component {
   @keyframes spin1 {
     0% {
       transform: scale(0);
@@ -303,12 +266,49 @@ import{r,h as e,H as s,F as l,w as d}from"./index-DuJ2kw-o.js";import{v as c}fro
       animation-duration: 2s;
     }
   }
+  .kol-spin__spinner--dot {
+    width: calc(48rem / var(--kolibri-root-font-size, 16));
+    height: calc(16rem / var(--kolibri-root-font-size, 16));
+  }
+  .kol-spin__spinner-element {
+    border-radius: 50%;
+    position: absolute;
+    top: calc(0.16rem / var(--kolibri-root-font-size, 16));
+    width: calc(12.8rem / var(--kolibri-root-font-size, 16));
+    height: calc(12.8rem / var(--kolibri-root-font-size, 16));
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;
+  }
+  .kol-spin__spinner-element--1 {
+    background-color: #000;
+    left: calc(0.16rem / var(--kolibri-root-font-size, 16));
+    z-index: 0;
+    animation: 1s infinite spin1;
+  }
+  .kol-spin__spinner-element--2 {
+    background-color: #000;
+    left: calc(0.16rem / var(--kolibri-root-font-size, 16));
+    z-index: 1;
+    animation: 1s infinite spin2;
+  }
+  .kol-spin__spinner-element--3 {
+    background-color: #000;
+    left: calc(17.6rem / var(--kolibri-root-font-size, 16));
+    z-index: 1;
+    animation: 1s infinite spin2;
+  }
+  .kol-spin__spinner-element--neutral {
+    background-color: #666;
+    left: calc(33.6rem / var(--kolibri-root-font-size, 16));
+    z-index: 0;
+    animation: 1s infinite spin3;
+  }
 }
 @layer kol-component {
   .kol-spin__spinner {
     display: block;
-    padding: calc(2rem / var(--kolibri-root-font-size, 16));
     position: relative;
+    padding: calc(2rem / var(--kolibri-root-font-size, 16));
   }
 }`;function f(n){switch(n){case"cycle":return e("span",{class:"kol-spin__loader"});case"none":return e("slot",{name:"expert"});default:return e(l,null,e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--1"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--2"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--3"}),e("span",{class:"kol-spin__spinner-element kol-spin__spinner-element--neutral"}))}}const u=class{constructor(n){r(this,n),this.showToggled=!1,this.translateActionRunning=o("kol-action-running"),this.translateActionDone=o("kol-action-done"),this._show=!1,this._variant="dot",this.state={_variant:"dot",_label:void 0}}render(){var n,t;return e(s,{key:"c93b62db81e8d08c9758963db96b9c493913ea57",class:"kol-spin","aria-live":"polite"},this.state._label&&(this.state._show||this.showToggled)&&e("span",{key:"b4015521e2461e12607aab303be8e86482d826e6",class:"visually-hidden"},this.state._label),this.state._show?e("span",{"aria-busy":"true","aria-label":(n=this.state._label)!==null&&n!==void 0?n:this.translateActionRunning,class:h("kol-spin__spinner",`kol-spin__spinner--${this.state._variant}`),role:"alert"},f(this.state._variant)):this.showToggled&&e("span",{"aria-label":(t=this.state._label)!==null&&t!==void 0?t:this.translateActionDone,"aria-busy":"false",role:"alert"}))}validateShow(n){this.showToggled=this.state._show===!0&&this._show===!1,p(this,n)}validateLabel(n){c(this,n)}validateVariant(n){m(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant),this.validateLabel(this._label)}static get watchers(){return{_show:["validateShow"],_label:["validateLabel"],_variant:["validateVariant"]}}};u.style={default:b};export{u as kol_spin};
-//# sourceMappingURL=kol-spin.entry-D7zO8hes.js.map
+//# sourceMappingURL=kol-spin.entry-BbnkGZJB.js.map

package/dist/assets/{kol-spin.entry-D7zO8hes.js.map → kol-spin.entry-BbnkGZJB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"kol-spin.entry-D7zO8hes.js","sources":["../../../../components/dist/esm/kol-spin.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h, H as Host, F as Fragment } from './index-CElQfBOC.js';\nimport { w as watchValidator } from './common-7RW_NFNf.js';\nimport { v as validateLabel } from './label-DAfXJvJZ.js';\nimport { v as validateShow } from './show-C_i9p0dk.js';\nimport { t as translate } from './i18n-yBVLeHdv.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport './i18n-CjhRejiw.js';\n\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];\nconst validateSpinVariant = (component, value) => {\n    watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);\n};\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     */\\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without a background and font color whose contrast ratio has\\n     * not been checked. By initially setting the background color to white and the font color\\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    background-color: white;\\n    color: black;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  [role=button],\\n  button:not([role=link]),\\n  .kol-input .input {\\n    min-height: var(--a11y-min-size);\\n    min-width: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * 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    clip: rect(0 0 0 0);\\n    clip-path: inset(50%);\\n    height: 1px;\\n    overflow: hidden;\\n    position: absolute;\\n    white-space: nowrap;\\n    width: 1px;\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    border: none;\\n    margin: 0;\\n    padding: 0;\\n    width: 100%;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    background-color: lightgray;\\n    color: black;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: grid;\\n    place-items: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    place-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    cursor: not-allowed;\\n    opacity: 0.5;\\n    outline: none;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-spin__spinner--cycle {\\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__loader {\\n    display: block;\\n    width: 100%;\\n    height: 100%;\\n    border-radius: 50%;\\n    position: relative;\\n    animation: 2s linear infinite rotate;\\n  }\\n  .kol-spin__loader::before {\\n    content: \\\"\\\";\\n    position: absolute;\\n    inset: 0;\\n    border-radius: 50%;\\n    border: 5px solid #333;\\n    animation: 3s linear infinite prixClipFix;\\n  }\\n  @keyframes rotate {\\n    100% {\\n      transform: rotate(360deg);\\n    }\\n  }\\n  @keyframes prixClipFix {\\n    0% {\\n      border-color: #fff;\\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\\n    }\\n    25% {\\n      border-color: #666;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\\n    }\\n    50% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\\n    }\\n    75% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\\n    }\\n    100% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\\n    }\\n  }\\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\\n  @media (prefers-reduced-motion) {\\n    .kol-spin__loader {\\n      animation-duration: 4s;\\n    }\\n    .kol-spin__loader::before {\\n      animation-duration: 6s;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  .kol-spin__spinner--dot {\\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element {\\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\\n    border-radius: 50%;\\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\\n    position: absolute;\\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element--1 {\\n    background-color: #000;\\n    z-index: 0;\\n    animation: 1s infinite spin1;\\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element--2 {\\n    background-color: #000;\\n    z-index: 1;\\n    animation: 1s infinite spin2;\\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element--3 {\\n    background-color: #000;\\n    z-index: 1;\\n    animation: 1s infinite spin2;\\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element--neutral {\\n    background-color: #666;\\n    z-index: 0;\\n    animation: 1s infinite spin3;\\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\\n  }\\n  @keyframes spin1 {\\n    0% {\\n      transform: scale(0);\\n    }\\n    100% {\\n      transform: scale(1);\\n    }\\n  }\\n  @keyframes spin2 {\\n    0% {\\n      transform: translate(0, 0);\\n    }\\n    100% {\\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\\n    }\\n  }\\n  @keyframes spin3 {\\n    0% {\\n      transform: scale(1);\\n    }\\n    100% {\\n      transform: scale(0);\\n    }\\n  }\\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\\n  @media (prefers-reduced-motion) {\\n    .kol-spin__spinner-element {\\n      animation-duration: 2s;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  .kol-spin__spinner {\\n    display: block;\\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\\n    position: relative;\\n  }\\n}\";\n\nfunction renderSpin(variant) {\n    switch (variant) {\n        case 'cycle':\n            return h(\"span\", { class: \"kol-spin__loader\" });\n        case 'none':\n            return h(\"slot\", { name: \"expert\" });\n        default:\n            return (h(Fragment, null, h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--1\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--2\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--3\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--neutral\" })));\n    }\n}\nconst KolSpin = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.showToggled = false;\n        this.translateActionRunning = translate('kol-action-running');\n        this.translateActionDone = translate('kol-action-done');\n        this._show = false;\n        this._variant = 'dot';\n        this.state = {\n            _variant: 'dot',\n            _label: undefined,\n        };\n    }\n    render() {\n        var _a, _b;\n        return (h(Host, { key: 'c93b62db81e8d08c9758963db96b9c493913ea57', class: \"kol-spin\", \"aria-live\": \"polite\" }, this.state._label && (this.state._show || this.showToggled) && h(\"span\", { key: 'b4015521e2461e12607aab303be8e86482d826e6', class: \"visually-hidden\" }, this.state._label), this.state._show ? (h(\"span\", { \"aria-busy\": \"true\", \"aria-label\": (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning, class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: \"alert\" }, renderSpin(this.state._variant))) : (this.showToggled && h(\"span\", { \"aria-label\": (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone, \"aria-busy\": \"false\", role: \"alert\" }))));\n    }\n    validateShow(value) {\n        this.showToggled = this.state._show === true && this._show === false;\n        validateShow(this, value);\n    }\n    validateLabel(value) {\n        validateLabel(this, value);\n    }\n    validateVariant(value) {\n        validateSpinVariant(this, value);\n    }\n    componentWillLoad() {\n        this.validateShow(this._show);\n        this.validateVariant(this._variant);\n        this.validateLabel(this._label);\n    }\n    static get watchers() { return {\n        \"_show\": [\"validateShow\"],\n        \"_label\": [\"validateLabel\"],\n        \"_variant\": [\"validateVariant\"]\n    }; }\n};\nKolSpin.style = {\n    default: defaultStyleCss\n};\n\nexport { KolSpin as kol_spin };\n//# sourceMappingURL=kol-spin.entry.js.map\n\n//# sourceMappingURL=kol-spin.entry.js.map"],"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","defaultStyleCss","renderSpin","variant","h","Fragment","KolSpin","hostRef","registerInstance","translate","_a","_b","Host","clsx","validateShow","validateLabel"],"mappings":"gQAAA;AAAA;AAAA,GAWA,MAAMA,EAA6B,CAAC,QAAS,MAAO,MAAM,EACpDC,EAAsB,CAACC,EAAWC,IAAU,CAC9CC,EAAeF,EAAW,WAAaC,GAAU,OAAOA,GAAU,UAAYH,EAA2B,SAASG,CAAK,EAAG,IAAI,IAAIH,CAA0B,EAAGG,CAAK,CACxK,EAEME,EAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAExB,SAASC,EAAWC,EAAS,CACzB,OAAQA,EAAO,CACX,IAAK,QACD,OAAOC,EAAE,OAAQ,CAAE,MAAO,kBAAkB,CAAE,EAClD,IAAK,OACD,OAAOA,EAAE,OAAQ,CAAE,KAAM,QAAQ,CAAE,EACvC,QACI,OAAQA,EAAEC,EAAU,KAAMD,EAAE,OAAQ,CAAE,MAAO,wDAAwD,CAAE,EAAGA,EAAE,OAAQ,CAAE,MAAO,wDAA0D,CAAA,EAAGA,EAAE,OAAQ,CAAE,MAAO,wDAAwD,CAAE,EAAGA,EAAE,OAAQ,CAAE,MAAO,8DAAgE,CAAA,CAAC,CAC1W,CACA,CACK,MAACE,EAAU,KAAM,CAClB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,YAAc,GACnB,KAAK,uBAAyBE,EAAU,oBAAoB,EAC5D,KAAK,oBAAsBA,EAAU,iBAAiB,EACtD,KAAK,MAAQ,GACb,KAAK,SAAW,MAChB,KAAK,MAAQ,CACT,SAAU,MACV,OAAQ,MACX,CACT,CACI,QAAS,CACL,IAAIC,EAAIC,EACR,OAAQP,EAAEQ,EAAM,CAAE,IAAK,2CAA4C,MAAO,WAAY,YAAa,QAAU,EAAE,KAAK,MAAM,SAAW,KAAK,MAAM,OAAS,KAAK,cAAgBR,EAAE,OAAQ,CAAE,IAAK,2CAA4C,MAAO,iBAAiB,EAAI,KAAK,MAAM,MAAM,EAAG,KAAK,MAAM,MAASA,EAAE,OAAQ,CAAE,YAAa,OAAQ,cAAeM,EAAK,KAAK,MAAM,UAAY,MAAQA,IAAO,OAASA,EAAK,KAAK,uBAAwB,MAAOG,EAAK,oBAAqB,sBAAsB,KAAK,MAAM,QAAQ,EAAE,EAAG,KAAM,OAAO,EAAIX,EAAW,KAAK,MAAM,QAAQ,CAAC,EAAM,KAAK,aAAeE,EAAE,OAAQ,CAAE,cAAeO,EAAK,KAAK,MAAM,UAAY,MAAQA,IAAO,OAASA,EAAK,KAAK,oBAAqB,YAAa,QAAS,KAAM,OAAS,CAAA,CAAE,CAC3uB,CACI,aAAaZ,EAAO,CAChB,KAAK,YAAc,KAAK,MAAM,QAAU,IAAQ,KAAK,QAAU,GAC/De,EAAa,KAAMf,CAAK,CAChC,CACI,cAAcA,EAAO,CACjBgB,EAAc,KAAMhB,CAAK,CACjC,CACI,gBAAgBA,EAAO,CACnBF,EAAoB,KAAME,CAAK,CACvC,CACI,mBAAoB,CAChB,KAAK,aAAa,KAAK,KAAK,EAC5B,KAAK,gBAAgB,KAAK,QAAQ,EAClC,KAAK,cAAc,KAAK,MAAM,CACtC,CACI,WAAW,UAAW,CAAE,MAAO,CAC3B,MAAS,CAAC,cAAc,EACxB,OAAU,CAAC,eAAe,EAC1B,SAAY,CAAC,iBAAiB,CACtC,CAAM,CACN,EACAO,EAAQ,MAAQ,CACZ,QAASL,CACb"}
+{"version":3,"file":"kol-spin.entry-BbnkGZJB.js","sources":["../../../../components/dist/esm/kol-spin.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h, H as Host, F as Fragment } from './index-DTM8XbOu.js';\nimport { w as watchValidator } from './common-7RW_NFNf.js';\nimport { v as validateLabel } from './label-DAfXJvJZ.js';\nimport { v as validateShow } from './show-C_i9p0dk.js';\nimport { t as translate } from './i18n-yBVLeHdv.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport './i18n-CjhRejiw.js';\n\nconst spinVariantPropTypeOptions = ['cycle', 'dot', 'none'];\nconst validateSpinVariant = (component, value) => {\n    watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);\n};\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n     * Minimum size of interactive elements.\\n     */\\n    --a11y-min-size: calc(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 to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  [role=button],\\n  button:not([role=link]),\\n  .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: absolute;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip: rect(0 0 0 0);\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(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  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: grid;\\n    place-items: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    place-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  @keyframes rotate {\\n    100% {\\n      transform: rotate(360deg);\\n    }\\n  }\\n  @keyframes prixClipFix {\\n    0% {\\n      border-color: #fff;\\n      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\\n    }\\n    25% {\\n      border-color: #666;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\\n    }\\n    50% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\\n    }\\n    75% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\\n    }\\n    100% {\\n      border-color: #000;\\n      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\\n    }\\n  }\\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\\n  @media (prefers-reduced-motion) {\\n    .kol-spin__loader {\\n      animation-duration: 4s;\\n    }\\n    .kol-spin__loader::before {\\n      animation-duration: 6s;\\n    }\\n  }\\n  .kol-spin__spinner--cycle {\\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\\n    height: calc(48rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__loader {\\n    border-radius: 50%;\\n    display: block;\\n    position: relative;\\n    width: 100%;\\n    height: 100%;\\n    animation: 2s linear infinite rotate;\\n  }\\n  .kol-spin__loader::before {\\n    border-radius: 50%;\\n    position: absolute;\\n    inset: 0;\\n    content: \\\"\\\";\\n    animation: 3s linear infinite prixClipFix;\\n    border: 5px solid #333;\\n  }\\n}\\n@layer kol-component {\\n  @keyframes spin1 {\\n    0% {\\n      transform: scale(0);\\n    }\\n    100% {\\n      transform: scale(1);\\n    }\\n  }\\n  @keyframes spin2 {\\n    0% {\\n      transform: translate(0, 0);\\n    }\\n    100% {\\n      transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\\n    }\\n  }\\n  @keyframes spin3 {\\n    0% {\\n      transform: scale(1);\\n    }\\n    100% {\\n      transform: scale(0);\\n    }\\n  }\\n  /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\\n  @media (prefers-reduced-motion) {\\n    .kol-spin__spinner-element {\\n      animation-duration: 2s;\\n    }\\n  }\\n  .kol-spin__spinner--dot {\\n    width: calc(48rem / var(--kolibri-root-font-size, 16));\\n    height: calc(16rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-spin__spinner-element {\\n    border-radius: 50%;\\n    position: absolute;\\n    top: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n    width: calc(12.8rem / var(--kolibri-root-font-size, 16));\\n    height: calc(12.8rem / var(--kolibri-root-font-size, 16));\\n    animation-timing-function: cubic-bezier(0, 1, 1, 0);\\n    border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\\n  }\\n  .kol-spin__spinner-element--1 {\\n    background-color: #000;\\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n    z-index: 0;\\n    animation: 1s infinite spin1;\\n  }\\n  .kol-spin__spinner-element--2 {\\n    background-color: #000;\\n    left: calc(0.16rem / var(--kolibri-root-font-size, 16));\\n    z-index: 1;\\n    animation: 1s infinite spin2;\\n  }\\n  .kol-spin__spinner-element--3 {\\n    background-color: #000;\\n    left: calc(17.6rem / var(--kolibri-root-font-size, 16));\\n    z-index: 1;\\n    animation: 1s infinite spin2;\\n  }\\n  .kol-spin__spinner-element--neutral {\\n    background-color: #666;\\n    left: calc(33.6rem / var(--kolibri-root-font-size, 16));\\n    z-index: 0;\\n    animation: 1s infinite spin3;\\n  }\\n}\\n@layer kol-component {\\n  .kol-spin__spinner {\\n    display: block;\\n    position: relative;\\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\\n  }\\n}\";\n\nfunction renderSpin(variant) {\n    switch (variant) {\n        case 'cycle':\n            return h(\"span\", { class: \"kol-spin__loader\" });\n        case 'none':\n            return h(\"slot\", { name: \"expert\" });\n        default:\n            return (h(Fragment, null, h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--1\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--2\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--3\" }), h(\"span\", { class: \"kol-spin__spinner-element kol-spin__spinner-element--neutral\" })));\n    }\n}\nconst KolSpin = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.showToggled = false;\n        this.translateActionRunning = translate('kol-action-running');\n        this.translateActionDone = translate('kol-action-done');\n        this._show = false;\n        this._variant = 'dot';\n        this.state = {\n            _variant: 'dot',\n            _label: undefined,\n        };\n    }\n    render() {\n        var _a, _b;\n        return (h(Host, { key: 'c93b62db81e8d08c9758963db96b9c493913ea57', class: \"kol-spin\", \"aria-live\": \"polite\" }, this.state._label && (this.state._show || this.showToggled) && h(\"span\", { key: 'b4015521e2461e12607aab303be8e86482d826e6', class: \"visually-hidden\" }, this.state._label), this.state._show ? (h(\"span\", { \"aria-busy\": \"true\", \"aria-label\": (_a = this.state._label) !== null && _a !== void 0 ? _a : this.translateActionRunning, class: clsx('kol-spin__spinner', `kol-spin__spinner--${this.state._variant}`), role: \"alert\" }, renderSpin(this.state._variant))) : (this.showToggled && h(\"span\", { \"aria-label\": (_b = this.state._label) !== null && _b !== void 0 ? _b : this.translateActionDone, \"aria-busy\": \"false\", role: \"alert\" }))));\n    }\n    validateShow(value) {\n        this.showToggled = this.state._show === true && this._show === false;\n        validateShow(this, value);\n    }\n    validateLabel(value) {\n        validateLabel(this, value);\n    }\n    validateVariant(value) {\n        validateSpinVariant(this, value);\n    }\n    componentWillLoad() {\n        this.validateShow(this._show);\n        this.validateVariant(this._variant);\n        this.validateLabel(this._label);\n    }\n    static get watchers() { return {\n        \"_show\": [\"validateShow\"],\n        \"_label\": [\"validateLabel\"],\n        \"_variant\": [\"validateVariant\"]\n    }; }\n};\nKolSpin.style = {\n    default: defaultStyleCss\n};\n\nexport { KolSpin as kol_spin };\n//# sourceMappingURL=kol-spin.entry.js.map\n\n//# sourceMappingURL=kol-spin.entry.js.map"],"names":["spinVariantPropTypeOptions","validateSpinVariant","component","value","watchValidator","defaultStyleCss","renderSpin","variant","h","Fragment","KolSpin","hostRef","registerInstance","translate","_a","_b","Host","clsx","validateShow","validateLabel"],"mappings":"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"}