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

package/dist/esm/kol-input-range.entry.js

@@ -1,48 +1,50 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, g as getElement } from './index-DqvPZ16l.js';
+import { h, r as registerInstance, g as getElement } from './index-CwtGN7ID.js';
 import { _ as __decorate } from './tslib.es6-QNbPBOk5.js';
 import { c as clsx } from './clsx-COFh-Vc8.js';
-import { F as FormFieldStateWrapper } from './FormFieldStateWrapper-C31luuWs.js';
-import { I as InputIconController, a as InputContainerStateWrapperFc } from './controller-icon-D3_aQk9W.js';
-import { I as InputStateWrapper, S as SuggestionsFc } from './InputStateWrapper-CcDZH7W5.js';
-import { a as createRelatedUniqueId, c as createUniqueId } from './dev.utils-Cv9uCwkA.js';
+import { F as FormFieldStateWrapper } from './FormFieldStateWrapper-D1Q6Lpff.js';
+import { I as InputIconController, a as InputContainerStateWrapperFc } from './controller-icon-DaBPXypo.js';
+import { I as InputStateWrapper, S as SuggestionsFc } from './InputStateWrapper-Cl_V9Vuo.js';
+import { a as createRelatedUniqueId, c as createUniqueId } from './dev.utils-Ce_5C3Pe.js';
 import { d as delegateFocus, a as delegateClick, c as createCtaRef } from './element-interaction-C5-6aPzz.js';
-import { p as propagateSubmitEventToForm } from './controller-D0y9uwX0.js';
-import './common-DEEjER7G.js';
-import { v as validateAutoComplete } from './auto-complete-CrQJr3SH.js';
-import { v as validateSuggestions } from './suggestions-Cnn1r8zc.js';
-import './access-and-short-key-CnWGdP5U.js';
-import './disabled-CtaJsBT2.js';
-import './hide-label-CWFMK5Iz.js';
-import './label-Cg7TG_7b.js';
-import './tooltip-align-DzHPWEpv.js';
-import './align-ChLoh-Dq.js';
-import './variant-class-name-CkfE8oGZ.js';
+import { p as propagateSubmitEventToForm } from './controller-B21n_zqt.js';
+import './common-DyILLof-.js';
+import { v as validateAutoComplete } from './auto-complete-p-8iouPy.js';
+import { v as validateSuggestions } from './suggestions-C2o-U3UR.js';
+import './access-and-short-key-C7QS_Tel.js';
+import './disabled-DzYBnXfG.js';
+import './hide-label-jbOZNqJV.js';
+import './label-BiOix5de.js';
+import './tooltip-align-BZrIplzz.js';
+import './align-DdWzcKWR.js';
+import './variant-class-name-B1jsQGPM.js';
 import './events-BhfZTW2e.js';
-import './associated.controller-D55JWKjs.js';
-import './bootstrap-UOb6OarC.js';
+import './associated.controller-Da2zylzp.js';
+import './aria-details-CG4GFq8t.js';
+import './aria-labelledby-6-ki3akM.js';
+import './bootstrap-C2nJoN6K.js';
 import './component-names-Dy77vq43.js';
-import './i18n-B2d_exHc.js';
+import './i18n-CMA39edx.js';
 import './_Uint8Array-kJHDjtoP.js';
 import './isArray-CcrBs4JM.js';
-import './variant-quote-BMV8GZX8.js';
-import './normalizers-pgU77mXp.js';
-import './component-BFsdrctP.js';
-import './component-4RtkhTfb.js';
-import './bem-registry-B9CzNnO1.js';
-import './component-ijX_kUom.js';
-import './controller-oT8Y98Yc.js';
-import './align-floating-elements-DTTpkCAK.js';
+import './base-web-component-CArCAUxk.js';
+import './normalizers-B5NKuJgN.js';
+import './component-fsnfw59D.js';
+import './component-DbrY6RW_.js';
+import './bem-registry-CqAKWtWY.js';
+import './component-DI3pO3QY.js';
+import './controller-CJs4fTO0.js';
+import './align-floating-elements-CqZdcuwL.js';
 import './tooltip-open-tracking-D3tCiiGP.js';
-import './label-DPd4-fag.js';
+import './label-BT-6lb8r.js';
 import './base-controller-CXhqh4cR.js';
-import './i18n-CaL2ODdQ.js';
-import './Alert-2bYvhb8i.js';
-import './Heading-C9p_CRv4.js';
-import './icons-DOGnS2Iv.js';
-import './Input-CwcyFZhB.js';
+import './i18n-BkwRYsvE.js';
+import './Alert-LeFfZ8Oj.js';
+import './Heading-uCdB_mbH.js';
+import './icons-BfxrxChI.js';
+import './Input-Cu811opH.js';
 import './element-focus-BQXzaLL9.js';
 
 class InputRangeController extends InputIconController {
@@ -81,7 +83,7 @@ class InputRangeController extends InputIconController {
     }
 }
 
-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    --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: 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  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1780919027063\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1780919027063#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780919027063\") format(\"woff2\"), url(\"kolicons.woff?t=1780919027063\") format(\"woff\"), url(\"kolicons.ttf?t=1780919027063\") format(\"truetype\"), url(\"kolicons.svg?t=1780919027063#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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: black;\n    background-color: white;\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: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-range__inputs-wrapper {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n    align-items: center;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    background-color: white;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    flex-grow: 1;\n    line-height: 1.5;\n    appearance: none;\n    border: 1px solid black;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: black;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: black;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\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    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  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1782311579243\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1782311579243#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1782311579243\") format(\"woff2\"), url(\"kolicons.woff?t=1782311579243\") format(\"woff\"), url(\"kolicons.ttf?t=1782311579243\") format(\"truetype\"), url(\"kolicons.svg?t=1782311579243#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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: black;\n    background-color: white;\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: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n  .kol-input-range__inputs-wrapper {\n    display: flex;\n    flex-grow: 1;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n    text-align: right;\n  }\n  .kol-input-range__input--range {\n    background-color: white;\n    display: inline-block;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n    min-width: calc(128 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    flex-grow: 1;\n    line-height: 1.5;\n    appearance: none;\n    border: 1px solid black;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: black;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -webkit-appearance: none;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: black;\n    border-radius: 20px;\n    width: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n    -moz-appearance: none;\n  }\n}";
 
 const KolInputRange = class {
     async focus(options) { }
@@ -150,10 +152,11 @@ const KolInputRange = class {
         }
     }
     render() {
+        var _a, _b;
         const inputsWrapperStyle = {
-            '--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,
+            '--kolibri-input-range--input-number--width': `calc(${Math.max(String((_a = this.state._max) !== null && _a !== void 0 ? _a : 100).length, String((_b = this.state._min) !== null && _b !== void 0 ? _b : 0).length, 4)}ch + 2em)`,
         };
-        return (h(FormFieldStateWrapper, Object.assign({ key: '9d235aa31440e43482cb463b1b475aeb68a9dd94' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '78e85141f986e8e050d0b274880a9dac5e74b65f', state: this.state }, h("div", { key: 'f4f9abc28b36455d07f417c57925beda6ae0fb6b', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, h(InputStateWrapper, Object.assign({ key: 'bd3a29d4535ed31fc57604c8a62c9f6380d5b35d', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), h(InputStateWrapper, Object.assign({ key: '7da3cd0db585db871fb2b95af78be4971a7aa8ff', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && h(SuggestionsFc, { key: 'fbe44f4147118da156d43d4b8f98843db9325869', id: this.state._id, suggestions: this.state._suggestions }))));
+        return (h(FormFieldStateWrapper, Object.assign({ key: '976da4c458a376af3ae6f6f103c4d450e05d768d' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '7e5abf2bd7ea68b8c8955f825483d6624aabb9ed', state: this.state }, h("div", { key: 'cc49bcec37b1703efdb71aa74ddc536d04b37c8d', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, h(InputStateWrapper, Object.assign({ key: 'f9527d9515d9fb3f3d0e53b6885337c26b400d37', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), h(InputStateWrapper, Object.assign({ key: 'd41e09a3ace1204169e2e2594724ba12cd73f0a7', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && h(SuggestionsFc, { key: 'f63013002b6d2b504562630df901e7e6a94ccc89', id: this.state._id, suggestions: this.state._suggestions }))));
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -217,6 +220,9 @@ const KolInputRange = class {
     validateAccessKey(value) {
         this.controller.validateAccessKey(value);
     }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
+    }
     validateAutoComplete(value) {
         this.controller.validateAutoComplete(value);
     }
@@ -282,11 +288,13 @@ const KolInputRange = class {
             this.setInitialValueType(this._value);
         }
         this._touched = this._touched === true;
+        this.validateAriaDetails(this._ariaDetails);
         this.controller.componentWillLoad();
     }
     get host() { return getElement(this); }
     static get watchers() { return {
         "_accessKey": ["validateAccessKey"],
+        "_ariaDetails": ["validateAriaDetails"],
         "_autoComplete": ["validateAutoComplete"],
         "_disabled": ["validateDisabled"],
         "_hideMsg": ["validateHideMsg"],

package/dist/esm/kol-input-range.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-input-range.entry.js","sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { AutoCompletePropType, InputRangeProps, InputRangeWatches, NumberString, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number | NumberString): void {\n\t\tthis.validateNumber('_value', value);\n\t\tthis.component._value = value;\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../@shared/global' as *;\n@use '../@shared/alert.mixin' as *;\n@use '../@shared/form-field.mixin' as *;\n@use '../@shared/input-container.mixin' as *;\n@use '../@shared/input.mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\t@include kol-input;\n\n\t.kol-input-range {\n\t\t&__inputs-wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-grow: 1;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\t$input: &;\n\n\t\t\t&--number {\n\t\t\t\twidth: var(--kolibri-input-range--input-number--width);\n\t\t\t}\n\n\t\t\t&--range {\n\t\t\t\tbackground-color: white;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\t/* Design-Hack - related with flex-grow */\n\t\t\t\twidth: 0;\n\t\t\t\theight: to-rem(8);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\tflex-grow: 1;\n\n\t\t\t\tline-height: 1.5;\n\t\t\t\tappearance: none;\n\t\t\t\tborder: 1px solid black;\n\n\t\t\t\t&::-webkit-slider-thumb {\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\tbackground-color: black;\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\twidth: to-rem(20);\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\t-webkit-appearance: none;\n\n\t\t\t\t\t@media (prefers-contrast: more) or (forced-colors: active) {\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&::-moz-range-thumb {\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\tbackground-color: black;\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\twidth: to-rem(20);\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\t-moz-appearance: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tAutoCompletePropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRangeController } from './controller';\n\n/**\n * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolInputRangeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\tprivate refInputRange?: HTMLInputElement;\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\tprivate readonly setInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ctaRef(element);\n\t\t\tif (!this._value && element.value) {\n\t\t\t\tthis.validateValue(parseFloat(element.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly setInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | undefined> {\n\t\tif (this.ctaRef.el !== undefined) {\n\t\t\tconst value = this.ctaRef.el.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ctaRef.el,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\treturn {\n\t\t\tstate: { ...this.state, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.setInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.setInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max value plus some space for the number input arrow buttons\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${String(this.state._max).length}ch + 2em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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?: string;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: 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 hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\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 maximum value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\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 * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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 * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number | NumberString;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-range'),\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"names":["KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolSuggestionsFc"],"mappings":"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"}
+{"version":3,"file":"kol-input-range.entry.js","sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { AutoCompletePropType, InputRangeProps, InputRangeWatches, NumberString, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number | NumberString): void {\n\t\tthis.validateNumber('_value', value);\n\t\tthis.component._value = value;\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../@shared/global' as *;\n@use '../@shared/alert.mixin' as *;\n@use '../@shared/form-field.mixin' as *;\n@use '../@shared/input-container.mixin' as *;\n@use '../@shared/input.mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\t@include kol-input;\n\n\t.kol-input-range {\n\t\t&__inputs-wrapper {\n\t\t\tdisplay: flex;\n\t\t\tflex-grow: 1;\n\t\t\tflex-direction: row;\n\t\t\tflex-wrap: wrap;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\t$input: &;\n\n\t\t\t&--number {\n\t\t\t\twidth: var(--kolibri-input-range--input-number--width);\n\t\t\t\ttext-align: right;\n\t\t\t}\n\n\t\t\t&--range {\n\t\t\t\tbackground-color: white;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\t/* Design-Hack - related with flex-grow */\n\t\t\t\twidth: 0;\n\t\t\t\tmin-width: to-rem(128);\n\t\t\t\theight: to-rem(8);\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t\tflex-grow: 1;\n\n\t\t\t\tline-height: 1.5;\n\t\t\t\tappearance: none;\n\t\t\t\tborder: 1px solid black;\n\n\t\t\t\t&::-webkit-slider-thumb {\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\tbackground-color: black;\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\twidth: to-rem(20);\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\t-webkit-appearance: none;\n\n\t\t\t\t\t@media (prefers-contrast: more) or (forced-colors: active) {\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&::-moz-range-thumb {\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t\tbackground-color: black;\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\twidth: to-rem(20);\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\t-moz-appearance: none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from '../../utils/clsx';\n\nimport type {\n\tAriaDetailsPropType,\n\tAutoCompletePropType,\n\tClickableElement,\n\tDisabledPropType,\n\tFocusableElement,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\nimport { createRelatedUniqueId, createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { InputRangeController } from './controller';\n\n/**\n * The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.\n *\n * @slot - The label of the input field.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ClickableElement, FocusableElement, InputRangeAPI {\n\t@Element() protected readonly host?: HTMLKolInputRangeElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLInputElement>();\n\tprivate refInputRange?: HTMLInputElement;\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\tprivate readonly setInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ctaRef(element);\n\t\t\tif (!this._value && element.value) {\n\t\t\t\tthis.validateValue(parseFloat(element.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly setInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | undefined> {\n\t\tif (this.ctaRef.el !== undefined) {\n\t\t\tconst value = this.ctaRef.el.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tthis.controller.onFacade.onKeyDown(event);\n\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ctaRef.el,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\treturn {\n\t\t\tstate: { ...this.state, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: FocusEvent) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.setInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? createRelatedUniqueId(this.state._id, 'list') : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.setInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max or min value plus some space for the number input arrow buttons; minimum 4 digits\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${Math.max(String(this.state._max ?? 100).length, String(this.state._min ?? 0).length, 4)}ch + 2em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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?: string;\n\n\t/**\n\t * References an external element by ID that provides accessible details for this input.\n\t * Uses ElementInternals.ariaDetailsElements to cross the Shadow DOM boundary.\n\t * Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\n\t * Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS).\n\t */\n\t@Prop() public _ariaDetails?: AriaDetailsPropType;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: AutoCompletePropType = 'off';\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: 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 hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\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 maximum value of the element.\n\t */\n\t@Prop() public _max?: number | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\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 * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number | NumberString;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\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 * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number | NumberString;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\t@State() public state: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: createUniqueId('input-range'),\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_ariaDetails')\n\tpublic validateAriaDetails(value?: AriaDetailsPropType): void {\n\t\tthis.controller.validateAriaDetails(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: VariantClassNamePropType): void {\n\t\tthis.controller.validateVariant(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.validateAriaDetails(this._ariaDetails);\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"names":["KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolSuggestionsFc"],"mappings":"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"}

package/dist/esm/kol-input-text.entry.js

@@ -1,58 +1,60 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { h, r as registerInstance, g as getElement } from './index-DqvPZ16l.js';
+import { h, r as registerInstance, g as getElement } from './index-CwtGN7ID.js';
 import { _ as __decorate } from './tslib.es6-QNbPBOk5.js';
 import { c as clsx } from './clsx-COFh-Vc8.js';
-import { F as FormFieldStateWrapper } from './FormFieldStateWrapper-C31luuWs.js';
-import { a as InputContainerStateWrapperFc } from './controller-icon-D3_aQk9W.js';
-import { I as InputStateWrapper } from './InputStateWrapper-CcDZH7W5.js';
-import { a as createRelatedUniqueId, c as createUniqueId } from './dev.utils-Cv9uCwkA.js';
+import { F as FormFieldStateWrapper } from './FormFieldStateWrapper-D1Q6Lpff.js';
+import { a as InputContainerStateWrapperFc } from './controller-icon-DaBPXypo.js';
+import { I as InputStateWrapper } from './InputStateWrapper-Cl_V9Vuo.js';
+import { a as createRelatedUniqueId, c as createUniqueId } from './dev.utils-Ce_5C3Pe.js';
 import { d as delegateFocus, a as delegateClick, c as createCtaRef } from './element-interaction-C5-6aPzz.js';
-import { p as propagateSubmitEventToForm } from './controller-D0y9uwX0.js';
-import { a as InputTextController } from './controller-B4DO-yV0.js';
-import './common-DEEjER7G.js';
-import './access-and-short-key-CnWGdP5U.js';
-import './disabled-CtaJsBT2.js';
-import './hide-label-CWFMK5Iz.js';
-import './label-Cg7TG_7b.js';
-import './tooltip-align-DzHPWEpv.js';
-import './align-ChLoh-Dq.js';
-import './variant-class-name-CkfE8oGZ.js';
+import { p as propagateSubmitEventToForm } from './controller-B21n_zqt.js';
+import { a as InputTextController } from './controller-BuikHDKh.js';
+import './common-DyILLof-.js';
+import './access-and-short-key-C7QS_Tel.js';
+import './disabled-DzYBnXfG.js';
+import './hide-label-jbOZNqJV.js';
+import './label-BiOix5de.js';
+import './tooltip-align-BZrIplzz.js';
+import './align-DdWzcKWR.js';
+import './variant-class-name-B1jsQGPM.js';
 import './events-BhfZTW2e.js';
-import './associated.controller-D55JWKjs.js';
-import './bootstrap-UOb6OarC.js';
+import './associated.controller-Da2zylzp.js';
+import './aria-details-CG4GFq8t.js';
+import './aria-labelledby-6-ki3akM.js';
+import './bootstrap-C2nJoN6K.js';
 import './component-names-Dy77vq43.js';
-import './i18n-B2d_exHc.js';
+import './i18n-CMA39edx.js';
 import './_Uint8Array-kJHDjtoP.js';
 import './isArray-CcrBs4JM.js';
-import './variant-quote-BMV8GZX8.js';
-import './normalizers-pgU77mXp.js';
-import './component-BFsdrctP.js';
-import './component-4RtkhTfb.js';
-import './bem-registry-B9CzNnO1.js';
-import './component-ijX_kUom.js';
-import './controller-oT8Y98Yc.js';
-import './align-floating-elements-DTTpkCAK.js';
+import './base-web-component-CArCAUxk.js';
+import './normalizers-B5NKuJgN.js';
+import './component-fsnfw59D.js';
+import './component-DbrY6RW_.js';
+import './bem-registry-CqAKWtWY.js';
+import './component-DI3pO3QY.js';
+import './controller-CJs4fTO0.js';
+import './align-floating-elements-CqZdcuwL.js';
 import './tooltip-open-tracking-D3tCiiGP.js';
-import './label-DPd4-fag.js';
+import './label-BT-6lb8r.js';
 import './base-controller-CXhqh4cR.js';
-import './i18n-CaL2ODdQ.js';
-import './Alert-2bYvhb8i.js';
-import './Heading-C9p_CRv4.js';
-import './icons-DOGnS2Iv.js';
-import './Input-CwcyFZhB.js';
+import './i18n-BkwRYsvE.js';
+import './Alert-LeFfZ8Oj.js';
+import './Heading-uCdB_mbH.js';
+import './icons-BfxrxChI.js';
+import './Input-Cu811opH.js';
 import './element-focus-BQXzaLL9.js';
-import './spell-check-CSnDB95u.js';
-import './suggestions-Cnn1r8zc.js';
-import './controller-CcrsrzWi.js';
-import './auto-complete-CrQJr3SH.js';
-import './max-length-behavior-426q5CU6.js';
-import './placeholder-CSgrK1Zh.js';
-import './read-only-DyuIPHMt.js';
-import './required-DAsW5lI1.js';
+import './spell-check-CKvoSTJE.js';
+import './suggestions-C2o-U3UR.js';
+import './controller-DiWO-Gw_.js';
+import './auto-complete-p-8iouPy.js';
+import './max-length-behavior-CRJOkECl.js';
+import './placeholder-B4wceSsL.js';
+import './read-only-DIC7Vhiy.js';
+import './required-By197yB9.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    --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: 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  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1780919027063\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1780919027063#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780919027063\") format(\"woff2\"), url(\"kolicons.woff?t=1780919027063\") format(\"woff\"), url(\"kolicons.ttf?t=1780919027063\") format(\"truetype\"), url(\"kolicons.svg?t=1780919027063#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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: black;\n    background-color: white;\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: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
+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}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1782311579243\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1782311579243#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1782311579243\") format(\"woff2\"), url(\"kolicons.woff?t=1782311579243\") format(\"woff\"), url(\"kolicons.ttf?t=1782311579243\") format(\"truetype\"), url(\"kolicons.svg?t=1782311579243#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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: black;\n    background-color: white;\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: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field__label-text {\n    flex-flow: row;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,\n  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {\n    content: \"*\"/\"\";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    position: relative;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n    z-index: 1;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    background-color: transparent;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}";
 
 const KolInputText = class {
     async getValue() {
@@ -102,7 +104,10 @@ const KolInputText = class {
         return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, ariaDescribedBy }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
     }
     render() {
-        return (h(FormFieldStateWrapper, Object.assign({ key: 'f916b5fc7d8b75363ed424073a1bbc148910baa7' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: '73c4d7e43d2be5a8d14fcd704011f15d98429d48', state: this.state }, h(InputStateWrapper, Object.assign({ key: 'f52d7ff366664842dd6b49deeae473945899eac8' }, this.getInputProps())))));
+        return (h(FormFieldStateWrapper, Object.assign({ key: 'ca2182ec192a54f1effab268e269e99d5774947a' }, this.getFormFieldProps()), h(InputContainerStateWrapperFc, { key: 'b7d6dd863fe609d3d08f51fef0c2621d08c585d0', state: this.state }, h(InputStateWrapper, Object.assign({ key: 'd8b302a685f0606666a33d553882b3759a2a400b' }, this.getInputProps())))));
+    }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
     }
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -246,6 +251,7 @@ const KolInputText = class {
         this.controller.validateVariant(value);
     }
     componentWillLoad() {
+        this.validateAriaDetails(this._ariaDetails);
         this._touched = this._touched === true;
         this.oldValue = this._value;
         this.controller.componentWillLoad();
@@ -254,6 +260,7 @@ const KolInputText = class {
     }
     get host() { return getElement(this); }
     static get watchers() { return {
+        "_ariaDetails": ["validateAriaDetails"],
         "_accessKey": ["validateAccessKey"],
         "_autoComplete": ["validateAutoComplete"],
         "_maxLengthBehavior": ["validateMaxLengthBehavior"],