@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.10

package/dist/assets/kol-avatar-wc.entry-BoycVXyw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-avatar-wc.entry-BoycVXyw.js","sources":["../../../../components/dist/esm/kol-avatar-wc.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-DXabIfEM.js';\nimport './common-L1K0yh1S.js';\nimport { h as handleColorChange, v as validateColor } from './color-DLhBoaj-.js';\nimport { v as validateImageSource } from './image-source-DqpWx57w.js';\nimport { v as validateLabel } from './label-ohY9ajP0.js';\nimport { t as translate } from './i18n-CQxlBXNV.js';\nimport './i18n-B-iJAw_i.js';\n\nconst formatNameAsInitial = (name) => {\n    if (name.length === 0) {\n        return '';\n    }\n    return name[0].toUpperCase();\n};\nconst formatLabelAsInitials = (label) => {\n    const names = label.split(/\\s+/);\n    const first = names[0];\n    const last = names[names.length - 1];\n    if (names.length >= 2 && first && last) {\n        return `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n    }\n    return formatNameAsInitial(label);\n};\n\nconst KolAvatarWc = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.bgColorStr = '#d3d3d3';\n        this.colorStr = '#000';\n        this.handleColorChange = (value) => {\n            const colorPair = handleColorChange(value);\n            this.bgColorStr = colorPair.backgroundColor;\n            this.colorStr = colorPair.foregroundColor;\n        };\n        this._color = '#d3d3d3';\n        this.state = {\n            _src: '',\n            _label: '',\n            _color: {\n                backgroundColor: '#d3d3d3',\n                foregroundColor: '#000',\n            },\n        };\n    }\n    render() {\n        return (h(\"div\", { key: '04d0b5653648f532391c0b8f611ef3bd7d4e8bbf', \"aria-label\": translate('kol-avatar-alt', { placeholders: { name: this.state._label } }), class: \"kol-avatar\", role: \"img\", style: {\n                backgroundColor: this.bgColorStr,\n                color: this.colorStr,\n            } }, this.state._src ? (h(\"img\", { alt: \"\", \"aria-hidden\": \"true\", class: \"kol-avatar__image\", src: this.state._src })) : (h(\"span\", { \"aria-hidden\": \"true\", class: \"kol-avatar__initials\" }, formatLabelAsInitials(this.state._label.trim())))));\n    }\n    validateColor(value) {\n        validateColor(this, value, {\n            defaultValue: '#d3d3d3',\n            hooks: {\n                beforePatch: this.handleColorChange,\n            },\n        });\n    }\n    validateSrc(value) {\n        validateImageSource(this, value);\n    }\n    validateLabel(value) {\n        validateLabel(this, value, {\n            required: true,\n        });\n    }\n    componentWillLoad() {\n        this.validateColor(this._color);\n        this.validateSrc(this._src);\n        this.validateLabel(this._label);\n    }\n    static get watchers() { return {\n        \"_color\": [\"validateColor\"],\n        \"_src\": [\"validateSrc\"],\n        \"_label\": [\"validateLabel\"]\n    }; }\n};\n\nexport { KolAvatarWc as kol_avatar_wc };\n//# sourceMappingURL=kol-avatar-wc.entry.js.map\n"],"names":["formatNameAsInitial","name","formatLabelAsInitials","label","names","first","last","KolAvatarWc","hostRef","registerInstance","value","colorPair","handleColorChange","h","translate","validateColor","validateImageSource","validateLabel"],"mappings":"gQAWA,MAAMA,EAAuBC,GACrBA,EAAK,SAAW,EACT,GAEJA,EAAK,CAAC,EAAE,YAAW,EAExBC,EAAyBC,GAAU,CACrC,MAAMC,EAAQD,EAAM,MAAM,KAAK,EACzBE,EAAQD,EAAM,CAAC,EACfE,EAAOF,EAAMA,EAAM,OAAS,CAAC,EACnC,OAAIA,EAAM,QAAU,GAAKC,GAASC,EACvB,GAAGN,EAAoBK,CAAK,CAAC,GAAGL,EAAoBM,CAAI,CAAC,GAE7DN,EAAoBG,CAAK,CACpC,EAEMI,EAAc,KAAM,CACtB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,WAAa,UAClB,KAAK,SAAW,OAChB,KAAK,kBAAqBE,GAAU,CAChC,MAAMC,EAAYC,EAAkBF,CAAK,EACzC,KAAK,WAAaC,EAAU,gBAC5B,KAAK,SAAWA,EAAU,eAC9B,EACA,KAAK,OAAS,UACd,KAAK,MAAQ,CACT,KAAM,GACN,OAAQ,GACR,OAAQ,CACJ,gBAAiB,UACjB,gBAAiB,MACjC,CACA,CACI,CACA,QAAS,CACL,OAAQE,EAAE,MAAO,CAAE,IAAK,2CAA4C,aAAcC,EAAU,iBAAkB,CAAE,aAAc,CAAE,KAAM,KAAK,MAAM,MAAM,EAAI,EAAG,MAAO,aAAc,KAAM,MAAO,MAAO,CAC/L,gBAAiB,KAAK,WACtB,MAAO,KAAK,QAC5B,CAAa,EAAI,KAAK,MAAM,KAAQD,EAAE,MAAO,CAAE,IAAK,GAAI,cAAe,OAAQ,MAAO,oBAAqB,IAAK,KAAK,MAAM,IAAI,CAAE,EAAMA,EAAE,OAAQ,CAAE,cAAe,OAAQ,MAAO,sBAAsB,EAAIX,EAAsB,KAAK,MAAM,OAAO,KAAI,CAAE,CAAC,CAAE,CACxP,CACA,cAAcQ,EAAO,CACjBK,EAAc,KAAML,EAAO,CACvB,aAAc,UACd,MAAO,CACH,YAAa,KAAK,iBAClC,CACA,CAAS,CACL,CACA,YAAYA,EAAO,CACfM,EAAoB,KAAMN,CAAK,CACnC,CACA,cAAcA,EAAO,CACjBO,EAAc,KAAMP,EAAO,CACvB,SAAU,EACtB,CAAS,CACL,CACA,mBAAoB,CAChB,KAAK,cAAc,KAAK,MAAM,EAC9B,KAAK,YAAY,KAAK,IAAI,EAC1B,KAAK,cAAc,KAAK,MAAM,CAClC,CACA,WAAW,UAAW,CAAE,MAAO,CAC3B,OAAU,CAAC,eAAe,EAC1B,KAAQ,CAAC,aAAa,EACtB,OAAU,CAAC,eAAe,CAClC,CAAO,CACP"}

package/dist/assets/{kol-avatar.entry-CX6KcZID.js → kol-avatar.entry-HqiALmid.js}

@@ -1,6 +1,4 @@
-import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const o=`/* forward the rem function */
+import{r as e,h as t,c as o}from"./index-D9ygQgpL.js";const i=`/* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -19,8 +17,8 @@ import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -41,6 +39,10 @@ import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -79,6 +81,10 @@ import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -155,13 +161,15 @@ import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -211,11 +219,11 @@ import{r as e,h as t,c as i}from"./index-BvWOSbaR.js";/*!
     height: 100%;
   }
   .kol-avatar__initials {
-    background-color: #d3d3d3;
+    background-color: inherit;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));
   }
-}`,a=class{constructor(n){e(this,n)}render(){return t(i,{key:"c4547a5724ed8d947c20de5128227bc71c14d401",_src:this._src,_label:this._label})}};a.style={default:o};export{a as kol_avatar};
-//# sourceMappingURL=kol-avatar.entry-CX6KcZID.js.map
+}`,a=class{constructor(n){e(this,n),this._color="#d3d3d3"}render(){return t(o,{key:"b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf",_color:this._color,_src:this._src,_label:this._label})}};a.style={default:i};export{a as kol_avatar};
+//# sourceMappingURL=kol-avatar.entry-HqiALmid.js.map

package/dist/assets/kol-avatar.entry-HqiALmid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-avatar.entry-HqiALmid.js","sources":["../../../../components/dist/esm/kol-avatar.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-DXabIfEM.js';\nimport { c as KolAvatarWcTag } from './component-names-CkE54Ym7.js';\nimport './common-L1K0yh1S.js';\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n                   * Minimum size of interactive elements.\\n                   */\\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without verifying the contrast ratio of its background and font colors.\\n     * By initially setting the background color to white and the font color to black,\\n     * the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    color: black;\\n    background-color: white;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n    /*\\n     * Text should be aligned left by default to provide a predictable starting point.\\n     */\\n    text-align: left;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  button,\\n  .kol-input .input {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the text color from his parent element.\\n     */\\n    color: inherit;\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  /**\\n  * Sometimes we need the semantic element for accessibility reasons,\\n  * but we don't want to show it.\\n  *\\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\\n  */\\n  .visually-hidden {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  :host {\\n    display: block;\\n  }\\n}\\n@layer kol-component {\\n  .kol-avatar,\\n  .kol-avatar__image,\\n  .kol-avatar__initials {\\n    border-radius: 50%;\\n  }\\n  .kol-avatar {\\n    /* Visible with forced colors  */\\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\\n    width: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\\n    height: calc(100 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-avatar__image, .kol-avatar__initials {\\n    width: 100%;\\n    height: 100%;\\n  }\\n  .kol-avatar__initials {\\n    background-color: inherit;\\n    display: flex;\\n    align-items: center;\\n    justify-content: center;\\n    font-size: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n}\";\n\nconst KolAvatar = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this._color = '#d3d3d3';\n    }\n    render() {\n        return h(KolAvatarWcTag, { key: 'b50d593f2fcc07fb3a1c8a92786df6ddcbc917cf', _color: this._color, _src: this._src, _label: this._label });\n    }\n};\nKolAvatar.style = {\n    default: defaultStyleCss\n};\n\nexport { KolAvatar as kol_avatar };\n//# sourceMappingURL=kol-avatar.entry.js.map\n"],"names":["defaultStyleCss","KolAvatar","hostRef","registerInstance","h","KolAvatarWcTag"],"mappings":"sDAOA,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;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAAY,KAAM,CACpB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,OAAS,SAClB,CACA,QAAS,CACL,OAAOE,EAAEC,EAAgB,CAAE,IAAK,2CAA4C,OAAQ,KAAK,OAAQ,KAAM,KAAK,KAAM,OAAQ,KAAK,MAAM,CAAE,CAC3I,CACJ,EACAJ,EAAU,MAAQ,CACd,QAASD,CACb"}

package/dist/assets/{kol-badge.entry-DELXn1iU.js → kol-badge.entry-8Ls5W1-H.js}

@@ -1,6 +1,4 @@
-import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js";import{h as c,v as h}from"./color-C3pYZKV3-0ShHSUZ4.js";import{v as m}from"./icons-72ER78AW-Cuv_9lnW.js";import"./Alert-yh8R3coC-BCYFPt1y.js";import{c as u}from"./clsx-eK3rPvPS-BT_IL7Fz.js";import{K as b}from"./Span-5ZR0JDnP-DY-b2WcQ.js";import"./i18n-CdSCDnmA-CsM0aySV.js";import{n as f}from"./dev.utils-0SH3ep_K-BGa3ho47.js";import"./tslib.es6-CxX45GIN-BAJoBDh7.js";import"./markdown-DL-PkOqb-CqqGVzr6.js";import"./isObject-DvSELytj-B0RigBxT.js";import"./Heading-KhwFHPZb-CVH-FD5x.js";import"./Icon-BsRmEtCa-1x6tgY8w.js";import"./reuse-CX4AQDkS-Cyh-fyjG.js";import"./InternalUnderlinedBadgeText-BnPUgbKl-BvtrJtYz.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const p=`/* forward the rem function */
+import{r as i,h as o,e as a,o as l,f as r,p as s,s as d}from"./index-D9ygQgpL.js";import"./Alert-DzpS4CJD-CznI58Av.js";import{c}from"./clsx-eK3rPvPS-B-dksMZM.js";import{h,v as m}from"./color-DLhBoaj--BGlcAOOS.js";import{v as u}from"./icons-CmMX8bbY-BsUQMS1k.js";import"./i18n-CQxlBXNV-Bs_gON2P.js";import{K as f}from"./Span-CNwuRioU-CpQJxJzY.js";import{n as p}from"./dev.utils-yQD-QKCU-CTXdCWUO.js";import"./tslib.es6-CxX45GIN-BGVaTf34.js";import"./markdown-CVks1MC0-Cgkgxqwt.js";import"./isObject-DvSELytj-DhzEQer1.js";import"./Heading-ClZtMSvA-B-SEEyYN.js";import"./Icon-B8-kh-9q-cdzuq2LQ.js";import"./reuse-CX4AQDkS-BaVSFETn.js";import"./InternalUnderlinedBadgeText-CF6FOiQi-FLLqVWFj.js";const b=`/* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -19,8 +17,8 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -41,6 +39,10 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -79,6 +81,10 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -155,13 +161,15 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -190,18 +198,11 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
   }
 }
 @layer kol-component {
-  @keyframes fadeInOpacity {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
   .kol-tooltip {
     display: contents;
   }
   .kol-tooltip__floating {
+    opacity: 0;
     display: none;
     position: fixed;
     /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
@@ -212,12 +213,19 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     max-width: 90vw;
     max-height: 90vh;
-    visibility: hidden;
-    animation-duration: 0.25s;
+    animation-direction: normal;
+    /* Can be used to specify the animation duration from the outside. 250ms by default. */
+    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
+    animation-fill-mode: forwards;
     animation-iteration-count: 1;
-    animation-name: fadeInOpacity;
     animation-timing-function: ease-in;
   }
+  .kol-tooltip__floating.hide {
+    animation-name: hideTooltip;
+  }
+  .kol-tooltip__floating.show {
+    animation-name: showTooltip;
+  }
   .kol-tooltip__arrow {
     transform: rotate(45deg);
     color: #000;
@@ -233,6 +241,23 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
     position: relative;
     z-index: 1000;
   }
+  @keyframes hideTooltip {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+  @keyframes showTooltip {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 @layer kol-component {
   .kol-badge {
@@ -244,5 +269,5 @@ import{r as i,h as t,e as a,o as l,f as r,p as s,s as d}from"./index-BvWOSbaR.js
   .kol-badge .kol-badge__smart-button .button {
     color: inherit;
   }
-}`;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const g=class{constructor(n){i(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=f(),this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=e=>{const o=c(e);this.bgColorStr=o.backgroundColor,this.colorStr=o.foregroundColor}}renderSmartButton(n){return t(a,{class:"kol-badge__smart-button",_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,_buttonVariant:n._variant})}render(){const n=typeof this.state._smartButton=="object"&&this.state._smartButton!==null;return t("span",{key:"5887c57c800757a960919276d5422054b6d7c17f",class:u("kol-badge",{"kol-badge--has-smart-button":typeof this.state._smartButton=="object"&&this.state._smartButton!==null}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t(b,{key:"d6650fca7447ba669d77f8c81cfbc70a67622b0b",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){m(this,n)}validateColor(n){h(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){l(n,()=>{try{n=s(n)}catch{}d(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};g.style={default:p};export{g as kol_badge};
-//# sourceMappingURL=kol-badge.entry-DELXn1iU.js.map
+}`;r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const g=class{constructor(n){i(this,n),this.bgColorStr="#000",this.colorStr="#fff",this.id=p(),this.catchSmartButtonRef=t=>{this.smartButtonRef=t},this._color="#000",this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"},_icons:{}},this.handleColorChange=t=>{const e=h(t);this.bgColorStr=e.backgroundColor,this.colorStr=e.foregroundColor}}renderSmartButton(n){return o(a,{ref:this.catchSmartButtonRef,class:"kol-badge__smart-button",_ariaControls:this.id,_ariaDescription:n._ariaDescription,_buttonVariant:n._variant,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign})}async kolFocus(){var n;await((n=this.smartButtonRef)===null||n===void 0?void 0:n.kolFocus())}render(){const n=typeof this.state._smartButton=="object"&&this.state._smartButton!==null;return o("span",{key:"1783be722727cb3b05b54342718cc09a753f9470",class:c("kol-badge",{"kol-badge--has-smart-button":typeof this.state._smartButton=="object"&&this.state._smartButton!==null}),style:{backgroundColor:this.bgColorStr,color:this.colorStr}},o(f,{key:"273924ed45d55804ef6a0636604b4f7a9fb7257c",class:"kol-badge__label",id:n?this.id:void 0,allowMarkdown:!0,icons:this.state._icons,label:this._label}),n&&this.renderSmartButton(this.state._smartButton))}validateIcons(n){u(this,n)}validateColor(n){m(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){l(n,()=>{try{n=s(n)}catch{}d(this,"_smartButton",n)})}componentWillLoad(){this.validateIcons(this._icons),this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_icons:["validateIcons"],_color:["validateColor"],_smartButton:["validateSmartButton"]}}};g.style={default:b};export{g as kol_badge};
+//# sourceMappingURL=kol-badge.entry-8Ls5W1-H.js.map

package/dist/assets/kol-badge.entry-8Ls5W1-H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-badge.entry-8Ls5W1-H.js","sources":["../../../../components/dist/esm/kol-badge.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h } from './index-DXabIfEM.js';\nimport './Alert-DzpS4CJD.js';\nimport { c as clsx } from './clsx-eK3rPvPS.js';\nimport { d as KolButtonWcTag } from './component-names-CkE54Ym7.js';\nimport { f as featureHint, o as objectObjectHandler, p as parseJson, s as setState } from './common-L1K0yh1S.js';\nimport { h as handleColorChange, v as validateColor } from './color-DLhBoaj-.js';\nimport { v as validateIcons } from './icons-CmMX8bbY.js';\nimport './i18n-CQxlBXNV.js';\nimport { K as KolSpanFc } from './Span-CNwuRioU.js';\nimport { n as nonce } from './dev.utils-yQD-QKCU.js';\nimport './tslib.es6-CxX45GIN.js';\nimport './bem-CIn1qsbp.js';\nimport './browser-CyCtPZc0.js';\nimport './Heading-ClZtMSvA.js';\nimport './i18n-B-iJAw_i.js';\nimport './Icon-B8-kh-9q.js';\nimport './reuse-CX4AQDkS.js';\nimport './markdown-CVks1MC0.js';\nimport './InternalUnderlinedBadgeText-CF6FOiQi.js';\nimport './isObject-DvSELytj.js';\n\nconst defaultStyleCss = \"/* forward the rem function */\\n/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n                   * Minimum size of interactive elements.\\n                   */\\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without verifying the contrast ratio of its background and font colors.\\n     * By initially setting the background color to white and the font color to black,\\n     * the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    color: black;\\n    background-color: white;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n    /*\\n     * Text should be aligned left by default to provide a predictable starting point.\\n     */\\n    text-align: left;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  button,\\n  .kol-input .input {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the text color from his parent element.\\n     */\\n    color: inherit;\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  /**\\n  * Sometimes we need the semantic element for accessibility reasons,\\n  * but we don't want to show it.\\n  *\\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\\n  */\\n  .visually-hidden {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-tooltip {\\n    display: contents;\\n  }\\n  .kol-tooltip__floating {\\n    opacity: 0;\\n    display: none;\\n    position: fixed;\\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\\n    top: 0;\\n    left: 0;\\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\\n    width: var(--kol-tooltip-width, max-content);\\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    max-width: 90vw;\\n    max-height: 90vh;\\n    animation-direction: normal;\\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\\n    animation-fill-mode: forwards;\\n    animation-iteration-count: 1;\\n    animation-timing-function: ease-in;\\n  }\\n  .kol-tooltip__floating.hide {\\n    animation-name: hideTooltip;\\n  }\\n  .kol-tooltip__floating.show {\\n    animation-name: showTooltip;\\n  }\\n  .kol-tooltip__arrow {\\n    transform: rotate(45deg);\\n    color: #000;\\n    background-color: #fff;\\n    position: absolute;\\n    z-index: 999;\\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-tooltip__content {\\n    color: #000;\\n    background-color: #fff;\\n    position: relative;\\n    z-index: 1000;\\n  }\\n  @keyframes hideTooltip {\\n    0% {\\n      opacity: 1;\\n    }\\n    100% {\\n      opacity: 0;\\n      display: none;\\n    }\\n  }\\n  @keyframes showTooltip {\\n    0% {\\n      opacity: 0;\\n    }\\n    100% {\\n      opacity: 1;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  .kol-badge {\\n    /* Visible with forced colors  */\\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\\n    display: inline-flex;\\n    place-items: center;\\n  }\\n  .kol-badge .kol-badge__smart-button .button {\\n    color: inherit;\\n  }\\n}\";\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\nconst KolBadge = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.bgColorStr = '#000';\n        this.colorStr = '#fff';\n        this.id = nonce();\n        this.catchSmartButtonRef = (ref) => {\n            this.smartButtonRef = ref;\n        };\n        this._color = '#000';\n        this.state = {\n            _color: {\n                backgroundColor: '#000',\n                foregroundColor: '#fff',\n            },\n            _icons: {},\n        };\n        this.handleColorChange = (value) => {\n            const colorPair = handleColorChange(value);\n            this.bgColorStr = colorPair.backgroundColor;\n            this.colorStr = colorPair.foregroundColor;\n        };\n    }\n    renderSmartButton(props) {\n        return (h(KolButtonWcTag, { ref: this.catchSmartButtonRef, class: \"kol-badge__smart-button\", _ariaControls: this.id, _ariaDescription: props._ariaDescription, _buttonVariant: props._variant, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign }));\n    }\n    async kolFocus() {\n        var _a;\n        await ((_a = this.smartButtonRef) === null || _a === void 0 ? void 0 : _a.kolFocus());\n    }\n    render() {\n        const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n        return (h(\"span\", { key: '1783be722727cb3b05b54342718cc09a753f9470', class: clsx('kol-badge', {\n                'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n            }), style: {\n                backgroundColor: this.bgColorStr,\n                color: this.colorStr,\n            } }, h(KolSpanFc, { key: '273924ed45d55804ef6a0636604b4f7a9fb7257c', class: \"kol-badge__label\", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));\n    }\n    validateIcons(value) {\n        validateIcons(this, value);\n    }\n    validateColor(value) {\n        validateColor(this, value, {\n            defaultValue: '#000',\n            hooks: {\n                beforePatch: this.handleColorChange,\n            },\n        });\n    }\n    validateSmartButton(value) {\n        objectObjectHandler(value, () => {\n            try {\n                value = parseJson(value);\n            }\n            catch (e) {\n            }\n            setState(this, '_smartButton', value);\n        });\n    }\n    componentWillLoad() {\n        this.validateIcons(this._icons);\n        this.validateColor(this._color);\n        this.validateSmartButton(this._smartButton);\n    }\n    static get watchers() { return {\n        \"_icons\": [\"validateIcons\"],\n        \"_color\": [\"validateColor\"],\n        \"_smartButton\": [\"validateSmartButton\"]\n    }; }\n};\nKolBadge.style = {\n    default: defaultStyleCss\n};\n\nexport { KolBadge as kol_badge };\n//# sourceMappingURL=kol-badge.entry.js.map\n"],"names":["defaultStyleCss","featureHint","KolBadge","hostRef","registerInstance","nonce","ref","value","colorPair","handleColorChange","props","h","KolButtonWcTag","_a","hasSmartButton","clsx","KolSpanFc","validateIcons","validateColor","objectObjectHandler","parseJson","setState"],"mappings":"mrBAwBA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAExBC,EAAY,qEAAqE,EAC5E,MAACC,EAAW,KAAM,CACnB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,WAAa,OAClB,KAAK,SAAW,OAChB,KAAK,GAAKE,EAAK,EACf,KAAK,oBAAuBC,GAAQ,CAChC,KAAK,eAAiBA,CAC1B,EACA,KAAK,OAAS,OACd,KAAK,MAAQ,CACT,OAAQ,CACJ,gBAAiB,OACjB,gBAAiB,MACjC,EACY,OAAQ,CAAA,CACpB,EACQ,KAAK,kBAAqBC,GAAU,CAChC,MAAMC,EAAYC,EAAkBF,CAAK,EACzC,KAAK,WAAaC,EAAU,gBAC5B,KAAK,SAAWA,EAAU,eAC9B,CACJ,CACA,kBAAkBE,EAAO,CACrB,OAAQC,EAAEC,EAAgB,CAAE,IAAK,KAAK,oBAAqB,MAAO,0BAA2B,cAAe,KAAK,GAAI,iBAAkBF,EAAM,iBAAkB,eAAgBA,EAAM,SAAU,aAAcA,EAAM,aAAc,UAAWA,EAAM,UAAW,WAAY,GAAM,OAAQA,EAAM,OAAQ,IAAKA,EAAM,IAAK,OAAQA,EAAM,OAAQ,IAAKA,EAAM,IAAK,cAAeA,EAAM,cAAe,CACnY,CACA,MAAM,UAAW,CACb,IAAIG,EACJ,OAAQA,EAAK,KAAK,kBAAoB,MAAQA,IAAO,OAAS,OAASA,EAAG,WAC9E,CACA,QAAS,CACL,MAAMC,EAAiB,OAAO,KAAK,MAAM,cAAiB,UAAY,KAAK,MAAM,eAAiB,KAClG,OAAQH,EAAE,OAAQ,CAAE,IAAK,2CAA4C,MAAOI,EAAK,YAAa,CACtF,8BAA+B,OAAO,KAAK,MAAM,cAAiB,UAAY,KAAK,MAAM,eAAiB,IAC1H,CAAa,EAAG,MAAO,CACP,gBAAiB,KAAK,WACtB,MAAO,KAAK,QAC5B,CAAa,EAAIJ,EAAEK,EAAW,CAAE,IAAK,2CAA4C,MAAO,mBAAoB,GAAIF,EAAiB,KAAK,GAAK,OAAW,cAAe,GAAM,MAAO,KAAK,MAAM,OAAQ,MAAO,KAAK,MAAM,CAAE,EAAGA,GAAkB,KAAK,kBAAkB,KAAK,MAAM,YAAY,CAAC,CACzR,CACA,cAAcP,EAAO,CACjBU,EAAc,KAAMV,CAAK,CAC7B,CACA,cAAcA,EAAO,CACjBW,EAAc,KAAMX,EAAO,CACvB,aAAc,OACd,MAAO,CACH,YAAa,KAAK,iBAClC,CACA,CAAS,CACL,CACA,oBAAoBA,EAAO,CACvBY,EAAoBZ,EAAO,IAAM,CAC7B,GAAI,CACAA,EAAQa,EAAUb,CAAK,CAC3B,MACU,CACV,CACAc,EAAS,KAAM,eAAgBd,CAAK,CACxC,CAAC,CACL,CACA,mBAAoB,CAChB,KAAK,cAAc,KAAK,MAAM,EAC9B,KAAK,cAAc,KAAK,MAAM,EAC9B,KAAK,oBAAoB,KAAK,YAAY,CAC9C,CACA,WAAW,UAAW,CAAE,MAAO,CAC3B,OAAU,CAAC,eAAe,EAC1B,OAAU,CAAC,eAAe,EAC1B,aAAgB,CAAC,qBAAqB,CAC9C,CAAO,CACP,EACAL,EAAS,MAAQ,CACb,QAASF,CACb"}

package/dist/assets/{kol-breadcrumb.entry-yPla1KmT.js → kol-breadcrumb.entry-C_q81ADT.js}

@@ -1,6 +1,4 @@
-import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";import{v as h}from"./label-CdtNxOKu-BgP05vXh.js";import{r as a,a as b}from"./unique-nav-labels-C_NhdgGz-CJ_GKjBg.js";import{w as m}from"./validation-DoIjmu3L-BY8kKKvI.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const p=`/*
+import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-D9ygQgpL.js";import{v as h}from"./label-ohY9ajP0-DL9LDU0L.js";import{r as l,a as m}from"./unique-nav-labels-C-bt2E8D-BEINIyfh.js";import{w as b}from"./validation-BmqW5reG-DI0TkU4B.js";const p=`/*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
 *
@@ -19,8 +17,8 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -41,6 +39,10 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -79,6 +81,10 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -155,13 +161,15 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -190,18 +198,11 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
   }
 }
 @layer kol-component {
-  @keyframes fadeInOpacity {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
   .kol-tooltip {
     display: contents;
   }
   .kol-tooltip__floating {
+    opacity: 0;
     display: none;
     position: fixed;
     /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
@@ -212,12 +213,19 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     max-width: 90vw;
     max-height: 90vh;
-    visibility: hidden;
-    animation-duration: 0.25s;
+    animation-direction: normal;
+    /* Can be used to specify the animation duration from the outside. 250ms by default. */
+    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
+    animation-fill-mode: forwards;
     animation-iteration-count: 1;
-    animation-name: fadeInOpacity;
     animation-timing-function: ease-in;
   }
+  .kol-tooltip__floating.hide {
+    animation-name: hideTooltip;
+  }
+  .kol-tooltip__floating.show {
+    animation-name: showTooltip;
+  }
   .kol-tooltip__arrow {
     transform: rotate(45deg);
     color: #000;
@@ -233,6 +241,23 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
     position: relative;
     z-index: 1000;
   }
+  @keyframes hideTooltip {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+  @keyframes showTooltip {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 @layer kol-component {
   :host {
@@ -250,12 +275,12 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
     min-width: var(--a11y-min-size);
     min-height: var(--a11y-min-size);
   }
-  .kol-link__text .kol-span__label {
-    text-decoration-line: underline;
-  }
   .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {
     text-decoration-thickness: 0.2em;
   }
+  .kol-link__text .kol-span__label {
+    text-decoration-line: underline;
+  }
   .kol-link__icon {
     display: inline-flex;
     margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
@@ -269,13 +294,8 @@ import{r as s,h as n,i as o,F as r,j as d,k as c}from"./index-BvWOSbaR.js";impor
     place-items: center;
     list-style: none;
   }
-  .kol-breadcrumb__icon::part(separator) {
-    font-size: 0.7em;
-    font-weight: 900;
-  }
-  .kol-breadcrumb__icon::part(separator):before {
-    content: "\\f054";
-    font-family: "Font Awesome 6 Free";
+  .kol-breadcrumb__list-element:first-child:last-child {
+    min-height: var(--a11y-min-size);
   }
-}`,f=class{constructor(t){s(this,t),this.renderLink=(e,i)=>{const l=this.state._links.length-1;return n("li",{class:"kol-breadcrumb__list-element",key:i},i!==0&&n(o,{class:"kol-breadcrumb__icon",_label:"",_icons:"codicon codicon-chevron-right"}),i===l?n("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},e._hideLabel?n(o,{class:"kol-breadcrumb__icon",_label:e._label,_icons:typeof e._icons=="string"?e._icons:"codicon codicon-symbol-event"}):n(r,null,e._label)):n(d,Object.assign({class:"kol-breadcrumb__link",_linkVariant:"standalone"},e)))},this.state={_label:"",_links:[]}}render(){return n("nav",{key:"2aa677c03f9df0fcca0ab77dacc43c27c2d16d89",class:"kol-breadcrumb","aria-label":this.state._label},n("ul",{key:"70aad9485b495366f0458769da35c8841111a816",class:"kol-breadcrumb__list"},this.state._links.length===0&&n("li",{key:"b78a562b80efff67fc05e5b9ad0b50c19db2a21d"},n(o,{key:"915a3797feadfe8fbb81878a63af7cfd8ef9f60a",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(t,e,i=!1){i||a(this.state._label),h(this,t,{required:!0}),c(t),b(this.state._label)}validateLinks(t){m("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};f.style={default:p};export{f as kol_breadcrumb};
-//# sourceMappingURL=kol-breadcrumb.entry-yPla1KmT.js.map
+}`,f=class{constructor(t){s(this,t),this.renderLink=(e,i)=>{const a=this.state._links.length-1;return n("li",{class:"kol-breadcrumb__list-element",key:i},i===a?n("span",{class:"kol-breadcrumb__list-element-span","aria-current":"page"},e._hideLabel?n(o,{class:"kol-breadcrumb__icon",_label:e._label,_icons:typeof e._icons=="string"?e._icons:"codicon codicon-symbol-event"}):n(r,null,e._label)):n(d,Object.assign({class:"kol-breadcrumb__link",_inline:!1},e)),i!==a&&n(o,{class:"kol-breadcrumb__separator",_label:"",_icons:"codicon codicon-chevron-right"}))},this.state={_label:"",_links:[]}}render(){return n("nav",{key:"cfe39ad7c9b3ff354087605a6e5db086185e4b07",class:"kol-breadcrumb","aria-label":this.state._label},n("ul",{key:"30ce6365f022addb4f52d628a8169a85454d3a29",class:"kol-breadcrumb__list"},this.state._links.length===0&&n("li",{key:"f3ec0aee1962e345bbefd5fe4fd99224ced565e9"},n(o,{key:"ee1e31c87b8bdfef77aadc425d53ac0a643ff0f6",class:"kol-breadcrumb_icon",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink)))}validateLabel(t,e,i=!1){i||l(this.state._label),h(this,t,{required:!0}),c(t),m(this.state._label)}validateLinks(t){b("KolBreadcrumb",this,t)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){l(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};f.style={default:p};export{f as kol_breadcrumb};
+//# sourceMappingURL=kol-breadcrumb.entry-C_q81ADT.js.map

package/dist/assets/kol-breadcrumb.entry-C_q81ADT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kol-breadcrumb.entry-C_q81ADT.js","sources":["../../../../components/dist/esm/kol-breadcrumb.entry.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { r as registerInstance, h, F as Fragment } from './index-DXabIfEM.js';\nimport { c as a11yHintLabelingLandmarks } from './common-L1K0yh1S.js';\nimport { v as validateLabel } from './label-ohY9ajP0.js';\nimport { r as removeNavLabel, a as addNavLabel } from './unique-nav-labels-C-bt2E8D.js';\nimport { w as watchNavLinks } from './validation-BmqW5reG.js';\nimport { e as KolIconTag, f as KolLinkWcTag } from './component-names-CkE54Ym7.js';\n\nconst defaultStyleCss = \"/*\\n* This file defines the layer order for all CSS layers used in KoliBri.\\n* The order is important as it determines the cascade priority.\\n*\\n* Layer order (lowest to highest priority):\\n* 1. kol-a11y - Accessibility defaults and requirements\\n* 2. kol-global - Global component styles and resets\\n* 3. kol-component - Component-specific styles\\n* 4. kol-theme-global - Theme-specific global styles\\n* 5. kol-theme-component - Theme-specific component styles\\n*/\\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\\n/* forward the rem function */\\n/*\\n * This file contains all rules for accessibility.\\n */\\n@layer kol-a11y {\\n  :host {\\n    /*\\n                   * Minimum size of interactive elements.\\n                   */\\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\\n    /*\\n     * No element should be used without verifying the contrast ratio of its background and font colors.\\n     * By initially setting the background color to white and the font color to black,\\n     * the contrast ratio is ensured and explicit adjustment is forced.\\n     */\\n    color: black;\\n    background-color: white;\\n    /*\\n     * Verdana is an accessible font that can be used without requiring additional loading time.\\n     */\\n    font-family: Verdana;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n    /*\\n     * Text should be aligned left by default to provide a predictable starting point.\\n     */\\n    text-align: left;\\n  }\\n  * {\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    hyphens: auto;\\n    /*\\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\\n     */\\n    word-break: break-word;\\n  }\\n  /*\\n   * All interactive elements should have a minimum size of to-rem(44).\\n   */\\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\\n  /* option, */\\n  /* select, */\\n  /* textarea, */\\n  button,\\n  .kol-input .input {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  /*\\n   * Some interactive elements should not inherit the font-family and font-size.\\n   */\\n  a,\\n  button,\\n  h1,\\n  h2,\\n  h3,\\n  h4,\\n  h5,\\n  h6,\\n  input,\\n  option,\\n  select,\\n  textarea {\\n    /*\\n     * All elements should inherit the text color from his parent element.\\n     */\\n    color: inherit;\\n    /*\\n     * All elements should inherit the font family from his parent element.\\n     */\\n    font-family: inherit;\\n    /*\\n     * All elements should inherit the font size from his parent element.\\n     */\\n    font-size: inherit;\\n    /*\\n     * Letter spacing is required for all texts.\\n     */\\n    letter-spacing: inherit;\\n    /*\\n     * Word spacing is required for all texts.\\n     */\\n    word-spacing: inherit;\\n  }\\n  /**\\n  * Sometimes we need the semantic element for accessibility reasons,\\n  * but we don't want to show it.\\n  *\\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\\n  */\\n  .visually-hidden {\\n    position: fixed;\\n    top: 0;\\n    left: 0;\\n    width: 1px;\\n    height: 1px;\\n    overflow: hidden;\\n    white-space: nowrap;\\n    clip-path: inset(50%);\\n  }\\n}\\n@layer kol-global {\\n  /*\\n   * Dieses CSS stellt sicher, dass der Standard-Style\\n   * von A und Button resettet werden.\\n   */\\n  :is(a, button) {\\n    background-color: transparent;\\n    width: 100%;\\n    margin: 0;\\n    padding: 0;\\n    border: none;\\n    /* 100% needed for custom width from outside */\\n  }\\n  /*\\n   * Ensure elements with hidden attribute to be actually not visible\\n   * @see https://meowni.ca/hidden.is.a.lie.html\\n   */\\n  [hidden] {\\n    display: none !important;\\n  }\\n  .badge-text-hint {\\n    color: black;\\n    background-color: lightgray;\\n  }\\n}\\n@layer kol-global {\\n  :host {\\n    /*\\n     * The max-width is needed to prevent the table from overflowing the\\n     * parent node, if the table is wider than the parent node.\\n     */\\n    max-width: 100%;\\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  * {\\n    /*\\n     * We prefer to box-sizing: border-box for all elements.\\n     */\\n    box-sizing: border-box;\\n  }\\n  .kol-span {\\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\\n    display: flex;\\n    flex-flow: column;\\n    align-items: center;\\n    justify-content: center;\\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\\n  }\\n  .kol-span__container {\\n    display: flex;\\n    align-items: center;\\n  }\\n  a,\\n  button {\\n    cursor: pointer;\\n  }\\n  .kol-span .kol-span__label--hide-label .kol-span__label {\\n    display: none;\\n  }\\n  /* Reset browser agent style. */\\n  button:disabled {\\n    color: unset;\\n  }\\n  .disabled label,\\n  .disabled:focus-within label,\\n  [aria-disabled=true],\\n  [aria-disabled=true]:focus,\\n  [disabled],\\n  [disabled]:focus {\\n    opacity: 0.5;\\n    outline: none;\\n    cursor: not-allowed;\\n  }\\n  [aria-disabled=true]:focus .kol-span,\\n  [disabled]:focus .kol-span {\\n    outline: none !important;\\n  }\\n}\\n@layer kol-component {\\n  .kol-tooltip {\\n    display: contents;\\n  }\\n  .kol-tooltip__floating {\\n    opacity: 0;\\n    display: none;\\n    position: fixed;\\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\\n    top: 0;\\n    left: 0;\\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\\n    width: var(--kol-tooltip-width, max-content);\\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n    max-width: 90vw;\\n    max-height: 90vh;\\n    animation-direction: normal;\\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\\n    animation-fill-mode: forwards;\\n    animation-iteration-count: 1;\\n    animation-timing-function: ease-in;\\n  }\\n  .kol-tooltip__floating.hide {\\n    animation-name: hideTooltip;\\n  }\\n  .kol-tooltip__floating.show {\\n    animation-name: showTooltip;\\n  }\\n  .kol-tooltip__arrow {\\n    transform: rotate(45deg);\\n    color: #000;\\n    background-color: #fff;\\n    position: absolute;\\n    z-index: 999;\\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-tooltip__content {\\n    color: #000;\\n    background-color: #fff;\\n    position: relative;\\n    z-index: 1000;\\n  }\\n  @keyframes hideTooltip {\\n    0% {\\n      opacity: 1;\\n    }\\n    100% {\\n      opacity: 0;\\n      display: none;\\n    }\\n  }\\n  @keyframes showTooltip {\\n    0% {\\n      opacity: 0;\\n    }\\n    100% {\\n      opacity: 1;\\n    }\\n  }\\n}\\n@layer kol-component {\\n  :host {\\n    display: inline-block;\\n  }\\n  .kol-link {\\n    display: inline-flex;\\n    max-width: fit-content;\\n    align-items: baseline;\\n    place-items: center;\\n    text-align: left;\\n    text-decoration-line: none;\\n  }\\n  .kol-link--standalone {\\n    min-width: var(--a11y-min-size);\\n    min-height: var(--a11y-min-size);\\n  }\\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\\n    text-decoration-thickness: 0.2em;\\n  }\\n  .kol-link__text .kol-span__label {\\n    text-decoration-line: underline;\\n  }\\n  .kol-link__icon {\\n    display: inline-flex;\\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\\n  }\\n  .kol-breadcrumb__list, .kol-breadcrumb__list-element {\\n    display: flex;\\n    margin: 0;\\n    padding: 0;\\n    gap: 0.5em;\\n    flex-wrap: wrap;\\n    place-items: center;\\n    list-style: none;\\n  }\\n  .kol-breadcrumb__list-element:first-child:last-child {\\n    min-height: var(--a11y-min-size);\\n  }\\n}\";\n\nconst KolBreadcrumb = class {\n    constructor(hostRef) {\n        registerInstance(this, hostRef);\n        this.renderLink = (link, index) => {\n            const lastIndex = this.state._links.length - 1;\n            return (h(\"li\", { class: \"kol-breadcrumb__list-element\", key: index }, index === lastIndex ? (h(\"span\", { class: \"kol-breadcrumb__list-element-span\", \"aria-current\": \"page\" }, link._hideLabel ? (h(KolIconTag, { class: \"kol-breadcrumb__icon\", _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (h(Fragment, null, link._label)))) : (h(KolLinkWcTag, Object.assign({ class: \"kol-breadcrumb__link\", _inline: false }, link))), index !== lastIndex && h(KolIconTag, { class: \"kol-breadcrumb__separator\", _label: \"\", _icons: \"codicon codicon-chevron-right\" })));\n        };\n        this.state = {\n            _label: '',\n            _links: [],\n        };\n    }\n    render() {\n        return (h(\"nav\", { key: 'cfe39ad7c9b3ff354087605a6e5db086185e4b07', class: \"kol-breadcrumb\", \"aria-label\": this.state._label }, h(\"ul\", { key: '30ce6365f022addb4f52d628a8169a85454d3a29', class: \"kol-breadcrumb__list\" }, this.state._links.length === 0 && (h(\"li\", { key: 'f3ec0aee1962e345bbefd5fe4fd99224ced565e9' }, h(KolIconTag, { key: 'ee1e31c87b8bdfef77aadc425d53ac0a643ff0f6', class: \"kol-breadcrumb_icon\", _label: \"\", _icons: \"codicon codicon-home\" }), \"\\u2026\")), this.state._links.map(this.renderLink))));\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        a11yHintLabelingLandmarks(value);\n        addNavLabel(this.state._label);\n    }\n    validateLinks(value) {\n        watchNavLinks('KolBreadcrumb', 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};\nKolBreadcrumb.style = {\n    default: defaultStyleCss\n};\n\nexport { KolBreadcrumb as kol_breadcrumb };\n//# sourceMappingURL=kol-breadcrumb.entry.js.map\n"],"names":["defaultStyleCss","KolBreadcrumb","hostRef","registerInstance","link","index","lastIndex","h","KolIconTag","Fragment","KolLinkWcTag","value","_oldValue","initial","removeNavLabel","validateLabel","a11yHintLabelingLandmarks","addNavLabel","watchNavLinks"],"mappings":"sPAUA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EAAgB,KAAM,CACxB,YAAYC,EAAS,CACjBC,EAAiB,KAAMD,CAAO,EAC9B,KAAK,WAAa,CAACE,EAAMC,IAAU,CAC/B,MAAMC,EAAY,KAAK,MAAM,OAAO,OAAS,EAC7C,OAAQC,EAAE,KAAM,CAAE,MAAO,+BAAgC,IAAKF,CAAK,EAAIA,IAAUC,EAAaC,EAAE,OAAQ,CAAE,MAAO,oCAAqC,eAAgB,MAAM,EAAIH,EAAK,WAAcG,EAAEC,EAAY,CAAE,MAAO,uBAAwB,OAAQJ,EAAK,OAAQ,OAAQ,OAAOA,EAAK,QAAW,SAAWA,EAAK,OAAS,8BAA8B,CAAE,EAAMG,EAAEE,EAAU,KAAML,EAAK,MAAM,CAAE,EAAMG,EAAEG,EAAc,OAAO,OAAO,CAAE,MAAO,uBAAwB,QAAS,EAAK,EAAIN,CAAI,CAAC,EAAIC,IAAUC,GAAaC,EAAEC,EAAY,CAAE,MAAO,4BAA6B,OAAQ,GAAI,OAAQ,+BAA+B,CAAE,CAAC,CACzmB,EACA,KAAK,MAAQ,CACT,OAAQ,GACR,OAAQ,CAAA,CACpB,CACI,CACA,QAAS,CACL,OAAQD,EAAE,MAAO,CAAE,IAAK,2CAA4C,MAAO,iBAAkB,aAAc,KAAK,MAAM,MAAM,EAAIA,EAAE,KAAM,CAAE,IAAK,2CAA4C,MAAO,wBAA0B,KAAK,MAAM,OAAO,SAAW,GAAMA,EAAE,KAAM,CAAE,IAAK,0CAA0C,EAAIA,EAAEC,EAAY,CAAE,IAAK,2CAA4C,MAAO,sBAAuB,OAAQ,GAAI,OAAQ,sBAAsB,CAAE,EAAG,GAAQ,EAAI,KAAK,MAAM,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CACjgB,CACA,cAAcG,EAAOC,EAAWC,EAAU,GAAO,CACxCA,GACDC,EAAe,KAAK,MAAM,MAAM,EAEpCC,EAAc,KAAMJ,EAAO,CACvB,SAAU,EACtB,CAAS,EACDK,EAA0BL,CAAK,EAC/BM,EAAY,KAAK,MAAM,MAAM,CACjC,CACA,cAAcN,EAAO,CACjBO,EAAc,gBAAiB,KAAMP,CAAK,CAC9C,CACA,mBAAoB,CAChB,KAAK,cAAc,KAAK,OAAQ,OAAW,EAAI,EAC/C,KAAK,cAAc,KAAK,MAAM,CAClC,CACA,sBAAuB,CACnBG,EAAe,KAAK,MAAM,MAAM,CACpC,CACA,WAAW,UAAW,CAAE,MAAO,CAC3B,OAAU,CAAC,eAAe,EAC1B,OAAU,CAAC,eAAe,CAClC,CAAO,CACP,EACAb,EAAc,MAAQ,CAClB,QAASD,CACb"}

package/dist/assets/{kol-button-link.entry-BZTjr2mF.js → kol-button-link.entry-kIBoCi0H.js}

@@ -1,6 +1,4 @@
-import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const a=`/* forward the rem function */
+import{r as i,h as e,e as o}from"./index-D9ygQgpL.js";const a=`/* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -19,8 +17,8 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
 @layer kol-a11y {
   :host {
     /*
-     * Minimum size of interactive elements.
-     */
+                   * Minimum size of interactive elements.
+                   */
     --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
@@ -41,6 +39,10 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
      * Word spacing is required for all texts.
      */
     word-spacing: inherit;
+    /*
+     * Text should be aligned left by default to provide a predictable starting point.
+     */
+    text-align: left;
   }
   * {
     /*
@@ -79,6 +81,10 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
   option,
   select,
   textarea {
+    /*
+     * All elements should inherit the text color from his parent element.
+     */
+    color: inherit;
     /*
      * All elements should inherit the font family from his parent element.
      */
@@ -155,13 +161,15 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
   }
   .kol-span {
     /* KolSpan is a layout component with icons in all directions and a label text in the middle. */
-    display: grid;
-    place-items: center;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: center;
     /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */
   }
   .kol-span__container {
     display: flex;
-    place-items: center;
+    align-items: center;
   }
   a,
   button {
@@ -190,18 +198,11 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
   }
 }
 @layer kol-component {
-  @keyframes fadeInOpacity {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
   .kol-tooltip {
     display: contents;
   }
   .kol-tooltip__floating {
+    opacity: 0;
     display: none;
     position: fixed;
     /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
@@ -212,12 +213,19 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     max-width: 90vw;
     max-height: 90vh;
-    visibility: hidden;
-    animation-duration: 0.25s;
+    animation-direction: normal;
+    /* Can be used to specify the animation duration from the outside. 250ms by default. */
+    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
+    animation-fill-mode: forwards;
     animation-iteration-count: 1;
-    animation-name: fadeInOpacity;
     animation-timing-function: ease-in;
   }
+  .kol-tooltip__floating.hide {
+    animation-name: hideTooltip;
+  }
+  .kol-tooltip__floating.show {
+    animation-name: showTooltip;
+  }
   .kol-tooltip__arrow {
     transform: rotate(45deg);
     color: #000;
@@ -233,6 +241,23 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
     position: relative;
     z-index: 1000;
   }
+  @keyframes hideTooltip {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
+  @keyframes showTooltip {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 @layer kol-component {
   :host {
@@ -250,18 +275,19 @@ import{r as i,h as e,e as o}from"./index-BvWOSbaR.js";/*!
     min-width: var(--a11y-min-size);
     min-height: var(--a11y-min-size);
   }
-  .kol-button__text .kol-span__label {
-    text-decoration-line: underline;
-  }
   .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {
     text-decoration-thickness: 0.2em;
   }
+  .kol-button__text .kol-span__label {
+    text-decoration-line: underline;
+  }
   .kol-button__icon {
     display: inline-flex;
     margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
   }
   .kol-button--inline {
+    min-width: unset;
     min-height: unset;
   }
-}`,l=class{constructor(n){i(this,n),this.catchRef=t=>{this.buttonWcRef=t},this._disabled=!1,this._hideLabel=!1,this._variant="inline",this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async kolFocus(){var n;await((n=this.buttonWcRef)===null||n===void 0?void 0:n.kolFocus())}render(){return e(o,{key:"e6642b69d02dc339b4e5ea56c66ba4677474cbb2",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_linkVariant:this._variant,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"7685d88852ee9e58593feba512e0d6a48fd43446",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}};l.style={default:a};export{l as kol_button_link};
-//# sourceMappingURL=kol-button-link.entry-BZTjr2mF.js.map
+}`,l=class{constructor(n){i(this,n),this.catchRef=t=>{this.buttonWcRef=t},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="top",this._type="button"}async getValue(){return this._value}async kolFocus(){var n;await((n=this.buttonWcRef)===null||n===void 0?void 0:n.kolFocus())}render(){return e(o,{key:"8f062537faeeb7c82846a2917e0f987ab8d2064d",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_inline:this._inline,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},e("slot",{key:"fa9d46e56fdbd2a4c3693cb2f6b1dcfd442f8eca",name:"expert",slot:"expert"}))}};l.style={default:a};export{l as kol_button_link};
+//# sourceMappingURL=kol-button-link.entry-kIBoCi0H.js.map