@public-ui/components 4.3.0-rc.6 → 4.3.0-rc.8

package/dist/cjs/kol-tree-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-tree-item.entry.cjs.js","sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\n\t.kol-tree-item {\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\tmin-width: var(--a11y-min-size);\n\t\t\tmin-height: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, KolFocusOptions, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus(options?: KolFocusOptions) {\n\t\treturn this.element?.focus(options);\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"names":["h","KolTreeItemWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,swRAAswR;;MCYjxR,WAAW,GAAA,MAAA;;;;IA0Bb,MAAM,KAAK,CAAC,OAAyB,EAAA;;AAC9C,QAAA,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,OAAO,CAAC;;AAM1B,IAAA,MAAM,MAAM,GAAA;;AACrB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAC;;AAMrC,IAAA,MAAM,QAAQ,GAAA;;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;;AAMvC,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACCA,OAAC,CAAAC,+BAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErED,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;"}
+{"version":3,"file":"kol-tree-item.entry.cjs.js","sources":["src/components/tree-item/style.scss?tag=kol-tree-item&mode=default&encapsulation=shadow","src/components/tree-item/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\n\t.kol-tree-item {\n\t\t$root: &;\n\n\t\t&__link {\n\t\t\t.kol-link {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmin-height: var(--a11y-min-size);\n\t\t\t\talign-items: center;\n\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&__link-inner {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__children {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t.kol-span {\n\t\t\tplace-items: unset; // unset 'center' style from global layer\n\t\t}\n\n\t\t&__toggle-button,\n\t\t&__toggle-button-placeholder {\n\t\t\tdisplay: inline-flex;\n\t\t\tmin-width: var(--a11y-min-size);\n\t\t\tmin-height: var(--a11y-min-size);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\t&__text {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n","import { Component, h, type JSX, Method, Prop } from '@stencil/core';\n\nimport { KolTreeItemWcTag } from '../../core/component-names';\nimport type { HrefPropType, KolFocusOptions, LabelPropType, OpenPropType, TreeItemProps } from '../../schema';\n\n@Component({\n\ttag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTreeItem implements TreeItemProps {\n\tprivate element?: HTMLKolTreeItemWcElement;\n\n\t/**\n\t * If set (to true) the tree item is the active one.\n\t */\n\t@Prop() _active?: OpenPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() _open?: OpenPropType;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() _href!: HrefPropType;\n\n\t/**\n\t * Focuses the link element.\n\t */\n\t@Method() async focus(options?: KolFocusOptions) {\n\t\treturn this.element?.focus(options);\n\t}\n\n\t/**\n\t * Expands the tree item.\n\t */\n\t@Method() async expand() {\n\t\treturn Promise.resolve(this.element?.expand());\n\t}\n\n\t/**\n\t * Collapses the tree item.\n\t */\n\t@Method() async collapse() {\n\t\treturn Promise.resolve(this.element?.collapse());\n\t}\n\n\t/**\n\t * Returns whether the tree item is expanded.\n\t */\n\t@Method() async isOpen() {\n\t\treturn (await this.element?.isOpen()) ?? false;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeItemWcTag\n\t\t\t\t_active={this._active}\n\t\t\t\t_label={this._label}\n\t\t\t\t_open={this._open}\n\t\t\t\t_href={this._href}\n\t\t\t\tref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</KolTreeItemWcTag>\n\t\t);\n\t}\n}\n"],"names":["h","KolTreeItemWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,47RAA47R;;MCYv8R,WAAW,GAAA,MAAA;;;;IA0Bb,MAAM,KAAK,CAAC,OAAyB,EAAA;;AAC9C,QAAA,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,0CAAE,KAAK,CAAC,OAAO,CAAC;;AAM1B,IAAA,MAAM,MAAM,GAAA;;AACrB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAC;;AAMrC,IAAA,MAAM,QAAQ,GAAA;;AACvB,QAAA,OAAO,OAAO,CAAC,OAAO,CAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAC;;AAMvC,IAAA,MAAM,MAAM,GAAA;;QACrB,OAAO,CAAA,EAAA,IAAC,OAAM,MAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,EAAE,CAAA,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,KAAK;;IAGxC,MAAM,GAAA;AACZ,QAAA,QACCA,OAAC,CAAAC,+BAAgB,qDAChB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,OAAkC,MAAM,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,EAAA,EAErED,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACU;;;;;;;;;"}

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
+var index = require('./index-PpdE67jR.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 require('./common-Bwi0J8Cv.js');
 var label = require('./label-Dx1QO2M-.js');

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

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
+var index = require('./index-PpdE67jR.js');
 var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 var elementInteraction = require('./element-interaction-CmOQWzhR.js');
 require('./common-Bwi0J8Cv.js');
 require('./element-focus-B4BhAkh_.js');
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
+const defaultStyleCss = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tree__treeview-navigation {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n  .kol-tree:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}";
 
 const KolTree = class {
     constructor(hostRef) {

package/dist/cjs/kol-tree.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-tree.entry.cjs.js","sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-tree {\n\t\t&__treeview-navigation {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\n\nimport { KolTreeWcTag } from '../../core/component-names';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, TreeProps } from '../../schema';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements FocusableElement, TreeProps {\n\t@Element() protected readonly host?: HTMLKolTreeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolTreeWcElement>();\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label} ref={this.ctaRef}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"],"names":["createCtaRef","h","KolTreeWcTag","__decorate","delegateFocus"],"mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6vLAA6vL;;MCcxwL,OAAO,GAAA,MAAA;AAPpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAGA,+BAAY,EAAwB;AAuBhE;AATO,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACCC,OAAA,CAACC,2BAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAA,EAClDD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACM;;;;AANJE,oBAAA,CAAA;IAHZC,gCAAa,CAAC,QAAQ;CAGwC,EAAA,OAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}
+{"version":3,"file":"kol-tree.entry.cjs.js","sources":["src/components/tree/style.scss?tag=kol-tree&mode=default&encapsulation=shadow","src/components/tree/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-tree {\n\t\t&__treeview-navigation {\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tlist-style: none;\n\t\t}\n\n\t\t&:focus-within {\n\t\t\toutline: 1px solid;\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\n\nimport { KolTreeWcTag } from '../../core/component-names';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, TreeProps } from '../../schema';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n@Component({\n\ttag: 'kol-tree',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTree implements FocusableElement, TreeProps {\n\t@Element() protected readonly host?: HTMLKolTreeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolTreeWcElement>();\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() _label!: LabelPropType;\n\n\t/**\n\t * Sets focus on the first focusable tree item.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTreeWcTag _label={this._label} ref={this.ctaRef}>\n\t\t\t\t<slot />\n\t\t\t</KolTreeWcTag>\n\t\t);\n\t}\n}\n"],"names":["createCtaRef","h","KolTreeWcTag","__decorate","delegateFocus"],"mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,m7LAAm7L;;MCc97L,OAAO,GAAA,MAAA;AAPpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AASoB,QAAA,IAAM,CAAA,MAAA,GAAGA,+BAAY,EAAwB;AAuBhE;AATO,IAAA,MAAM,KAAK,CAAC,OAAyB;IAErC,MAAM,GAAA;AACZ,QAAA,QACCC,OAAA,CAACC,2BAAY,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAA,EAClDD,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACM;;;;AANJE,oBAAA,CAAA;IAHZC,gCAAa,CAAC,QAAQ;CAGwC,EAAA,OAAA,CAAA,SAAA,EAAA,OAAA,EAAA,IAAA,CAAA;;;;;;;"}

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

@@ -3,14 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
+var index = require('./index-PpdE67jR.js');
 require('./common-Bwi0J8Cv.js');
 var label = require('./label-Dx1QO2M-.js');
 var i18n = require('./i18n-Cp31h8Qy.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 require('./i18n-c5BjxWQc.js');
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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  .hastooltip {\n    z-index: 900 !important;\n  }\n}";
+const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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  .hastooltip {\n    z-index: 900 !important;\n  }\n}";
 
 const KolVersion = class {
     constructor(hostRef) {

package/dist/cjs/kol-version.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-version.entry.cjs.js","sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tprivate readonly translateVersion = translate('kol-version');\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'kolicon-version', label: this.translateVersion },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"names":["translate","h","Host","KolBadgeTag","validateLabel"],"mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,6iLAA6iL;;MCgBxjL,UAAU,GAAA,MAAA;AAPvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQkB,QAAA,IAAA,CAAA,gBAAgB,GAAGA,cAAS,CAAC,aAAa,CAAC;QAoB5C,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,eAAe;SACvB;AAYD;IAjCO,MAAM,GAAA;AACZ,QAAA,QACCC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACxBD,OAAA,CAACE,0BAAW,EACX,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;aAC/D,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,CACxB,CACI;;AAcF,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAAC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;;IAGI,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;"}
+{"version":3,"file":"kol-version.entry.cjs.js","sources":["src/components/version/style.scss?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { LabelPropType, VersionAPI, VersionStates } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport { KolBadgeTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements VersionAPI {\n\tprivate readonly translateVersion = translate('kol-version');\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-version\">\n\t\t\t\t<KolBadgeTag\n\t\t\t\t\t_color=\"#bec5c9\"\n\t\t\t\t\t_icons={{\n\t\t\t\t\t\tleft: { icon: 'kolicon-version', label: this.translateVersion },\n\t\t\t\t\t}}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: VersionStates = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"names":["translate","h","Host","KolBadgeTag","validateLabel"],"mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,muLAAmuL;;MCgB9uL,UAAU,GAAA,MAAA;AAPvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQkB,QAAA,IAAA,CAAA,gBAAgB,GAAGA,cAAS,CAAC,aAAa,CAAC;QAoB5C,IAAA,CAAA,KAAK,GAAkB;AACtC,YAAA,MAAM,EAAE,eAAe;SACvB;AAYD;IAjCO,MAAM,GAAA;AACZ,QAAA,QACCC,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACxBD,OAAA,CAACE,0BAAW,EACX,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;aAC/D,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAA,CACxB,CACI;;AAcF,IAAA,aAAa,CAAC,KAAqB,EAAA;AACzC,QAAAC,mBAAa,CAAC,IAAI,EAAE,KAAK,EAAE;AAC1B,YAAA,QAAQ,EAAE,IAAI;AACd,SAAA,CAAC;;IAGI,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;;;;;;;;;;;;"}

package/dist/cjs/kolibri.cjs.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
-var appGlobals = require('./app-globals-Ca-u9rrU.js');
+var index = require('./index-PpdE67jR.js');
+var appGlobals = require('./app-globals-hKB4iA5u.js');
 require('./common-Bwi0J8Cv.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;

package/dist/cjs/loader.cjs.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
-var appGlobals = require('./app-globals-Ca-u9rrU.js');
+var index = require('./index-PpdE67jR.js');
+var appGlobals = require('./app-globals-hKB4iA5u.js');
 require('./common-Bwi0J8Cv.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/test-component.cjs.entry.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-uy6c1C7T.js');
+var index = require('./index-PpdE67jR.js');
 require('./common-Bwi0J8Cv.js');
 
 const TestComponent = class {

package/dist/collection/components/abbr/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/accordion/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -269,8 +272,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/alert/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -212,8 +215,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -402,16 +405,22 @@
   }
   .kol-alert {
     display: grid;
+    grid-template-areas: "icon heading close" "icon content close";
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
   }
-  .kol-alert__container {
-    display: flex;
-    place-items: center;
+  .kol-alert__icon {
+    grid-area: icon;
   }
-  .kol-alert__container-content {
-    flex-grow: 1;
+  .kol-alert__heading {
+    grid-area: heading;
   }
   .kol-alert__closer {
     /* Visible with forced colors */
     outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    grid-area: close;
+  }
+  .kol-alert__content {
+    grid-area: content;
   }
 }

package/dist/collection/components/avatar/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */

package/dist/collection/components/badge/shadow.js

@@ -36,12 +36,12 @@ export class KolBadge {
     async focus(options) { }
     render() {
         const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
-        return (h("span", { key: '9091b07e3ef752f765f96bbd66eaa329ae89543d', class: clsx('kol-badge', {
+        return (h("span", { key: 'ce393c9b3887fa2a1fd1545830766fc398495d92', class: clsx('kol-badge', {
                 'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
             }), style: {
                 backgroundColor: this.bgColorStr,
                 color: this.colorStr,
-            } }, h(SpanFC, { key: '9a0ee2dd77bfad8c7043cca5229b4398af16e6b8', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
+            } }, h(SpanFC, { key: '6c4fed34445543666bf3f3b9bf3830ee51411938', class: "kol-badge__label", id: hasSmartButton ? this.id : undefined, allowMarkdown: true, icons: this.state._icons, label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton)));
     }
     validateIcons(value) {
         validateIcons(this, value);

package/dist/collection/components/badge/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type {\n\tBadgeAPI,\n\tBadgeStates,\n\tFocusableElement,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tPropColor,\n\tStringified,\n} from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/**\n * The **Badge** component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n */\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/badge/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { SpanFC } from '../../internal/functional-components/span/component';\nimport type {\n\tBadgeAPI,\n\tBadgeStates,\n\tFocusableElement,\n\tInternalButtonProps,\n\tKolFocusOptions,\n\tKoliBriIconsProp,\n\tLabelPropType,\n\tPropColor,\n\tStringified,\n} from '../../schema';\nimport { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor, validateIcons } from '../../schema';\n\nimport { createUniqueId } from '../../utils/dev.utils';\n\nimport type { JSX } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\n/**\n * The **Badge** component allows you to visually highlight specific information.\n * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot\n */\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements BadgeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolBadgeElement;\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\tprivate readonly id = createUniqueId('badge-label');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\tprivate renderSmartButton(props: InternalButtonProps): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\tclass=\"kol-badge__smart-button\"\n\t\t\t\t_ariaControls={this.id}\n\t\t\t\t_ariaDescription={props._ariaDescription}\n\t\t\t\t_variant={props._variant}\n\t\t\t\t_customClass={props._customClass}\n\t\t\t\t_disabled={props._disabled}\n\t\t\t\t_hideLabel={true}\n\t\t\t\t_icons={props._icons}\n\t\t\t\t_id={props._id}\n\t\t\t\t_label={props._label}\n\t\t\t\t_on={props._on}\n\t\t\t\t_tooltipAlign={props._tooltipAlign}\n\t\t\t/>\n\t\t);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;\n\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass={clsx('kol-badge', {\n\t\t\t\t\t'kol-badge--has-smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t})}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SpanFC class=\"kol-badge__label\" id={hasSmartButton ? this.id : undefined} allowMarkdown icons={this.state._icons} label={this._label} />\n\t\t\t\t{hasSmartButton && this.renderSmartButton(this.state._smartButton as InternalButtonProps)}\n\t\t\t</span>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the backgroundColor and foregroundColor.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#000';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriIconsProp>;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<InternalButtonProps>;\n\n\t@State() public state: BadgeStates = {\n\t\t_color: {\n\t\t\tbackgroundColor: '#000',\n\t\t\tforegroundColor: '#fff',\n\t\t},\n\t\t_icons: {},\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tconst colorPair = handleColorChange(value);\n\t\tthis.bgColorStr = colorPair.backgroundColor;\n\t\tthis.colorStr = colorPair.foregroundColor;\n\t};\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: KoliBriIconsProp): void {\n\t\tvalidateIcons(this, value);\n\t}\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#000',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: InternalButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<InternalButtonProps>(value as string);\n\t\t\t} catch {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateIcons(this._icons);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"]}

package/dist/collection/components/badge/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/breadcrumb/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/button/shadow.js

@@ -20,7 +20,7 @@ export class KolButton {
     async focus(options) { }
     async click() { }
     render() {
-        return (h(KolButtonWcTag, { key: '1d5a15e4e38f1c51b52d377661ad34f0d5b5e5a0', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _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, _variant: this._variant }, h("slot", { key: '6a429fbfe82675a50cc4e8598a83669bdcd6d608', name: "expert", slot: "expert" })));
+        return (h(KolButtonWcTag, { key: '676a47a291dc485c9bd2fb41ccd87a7d3c267d59', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _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, _variant: this._variant }, h("slot", { key: '393c40fe3beb2cb2fe1f2533feb7a3a99ee3b4cf', name: "expert", slot: "expert" })));
     }
     static get is() { return "kol-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;KAWrD;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons.\n */\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;KAWrD;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot\n */\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}

package/dist/collection/components/button/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/button-link/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/card/style.css

@@ -31,12 +31,15 @@
      * By initially setting the background color to white and the font color to black,
      * the contrast ratio is ensured and explicit adjustment is forced.
      */
-    color: black;
-    background-color: white;
+    --kol-a11y-font-color: black;
+    --kol-a11y-background-color: white;
+    color: var(--kol-a11y-font-color);
+    background-color: var(--kol-a11y-background-color);
     /*
      * Verdana is an accessible font that can be used without requiring additional loading time.
      */
-    font-family: Verdana;
+    --kol-a11y-font-family: Verdana;
+    font-family: var(--kol-a11y-font-family);
     /*
      * Letter spacing is required for all texts.
      */
@@ -207,8 +210,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
-  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1785745220083"); /* IE9*/
+  src: url("kolicons.eot?t=1785745220083#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785745220083") format("woff2"), url("kolicons.woff?t=1785745220083") format("woff"), url("kolicons.ttf?t=1785745220083") format("truetype"), url("kolicons.svg?t=1785745220083#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {