@public-ui/components 4.1.0 → 4.1.1-rc.1

package/dist/kolibri/kol-dialog.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-0LQrricW.js";import{g as t}from"./component-names-CqTpXVIM.js";import"./common-BIkdAxr0.js";const o='@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: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .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-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return e(t,{key:"24744fff4cfebb9ef188926e5390064ce7ec6931",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"c8844dc7d6b9d16567ce400ae10f992018c6849d"}))}};i.style={default:o};export{i as kol_dialog};
+import{r as n,h as e}from"./index-rqIkzkgG.js";import{g as t}from"./component-names-CqTpXVIM.js";import"./common-BIkdAxr0.js";const o='@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: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .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-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return e(t,{key:"24744fff4cfebb9ef188926e5390064ce7ec6931",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"c8844dc7d6b9d16567ce400ae10f992018c6849d"}))}};i.style={default:o};export{i as kol_dialog};

package/dist/kolibri/kol-drawer.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as o}from"./index-0LQrricW.js";import{f as i}from"./component-names-CqTpXVIM.js";import{s as a}from"./common-BIkdAxr0.js";import{v as r}from"./align-DDUsWnWP.js";import{v as l}from"./has-closer-BbY1hw6m.js";import{v as s}from"./label-C18ud7Yt.js";import{v as d}from"./open-BhLtfnQI.js";import{c as h}from"./clsx-COFh-Vc8.js";import{d as c,K as p}from"./events-DHTi_wtD.js";import{h as m}from"./tooltip-open-tracking-rBbBgPWP.js";const f='@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: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .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-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: "header  close" "content content";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}',b=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e(i,{ref:this.getWrapperRef,class:h("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_label:this.state._label,_hasCloser:this.state._hasCloser,_on:{onClose:()=>{this.close()}}},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(t,{key:"55a5a4b9532c8a02329e9b0b67a2183655143fd4",class:"kol-drawer"},e("dialog",{key:"fbc41355c0d2c16f0edfae36c8282a3caff5059b","aria-label":this.state._label,class:"kol-drawer__dialog",onCancel:m,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){r(this,n)}validateHasCloser(n){l(this,n)}validateOpen(n){"boolean"==typeof n&&(d(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.open():await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&c(this.host,p.close)}handleClose(){(async()=>{await this.close(),this.handleCloseDialog()})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateOn(this._on)}get host(){return o(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_open:["validateOpen"],_on:["validateOn"]}}};b.style={default:f};export{b as kol_drawer};
+import{r as n,h as e,H as t,g as o}from"./index-rqIkzkgG.js";import{f as i}from"./component-names-CqTpXVIM.js";import{s as a}from"./common-BIkdAxr0.js";import{v as r}from"./align-DDUsWnWP.js";import{v as l}from"./has-closer-BbY1hw6m.js";import{v as s}from"./label-C18ud7Yt.js";import{v as d}from"./open-BhLtfnQI.js";import{c as h}from"./clsx-COFh-Vc8.js";import{d as c,K as p}from"./events-DHTi_wtD.js";import{h as m}from"./tooltip-open-tracking-rBbBgPWP.js";const f='@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: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .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-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-template-areas: "header  close" "content content";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}',b=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e(i,{ref:this.getWrapperRef,class:h("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_label:this.state._label,_hasCloser:this.state._hasCloser,_on:{onClose:()=>{this.close()}}},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(t,{key:"55a5a4b9532c8a02329e9b0b67a2183655143fd4",class:"kol-drawer"},e("dialog",{key:"fbc41355c0d2c16f0edfae36c8282a3caff5059b","aria-label":this.state._label,class:"kol-drawer__dialog",onCancel:m,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){r(this,n)}validateHasCloser(n){l(this,n)}validateOpen(n){"boolean"==typeof n&&(d(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.open():await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e),this.host&&c(this.host,p.close)}handleClose(){(async()=>{await this.close(),this.handleCloseDialog()})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateOn(this._on)}get host(){return o(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_open:["validateOpen"],_on:["validateOn"]}}};b.style={default:f};export{b as kol_drawer};

package/dist/kolibri/kol-form.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,H as e,g as i}from"./index-0LQrricW.js";import{b as o,e as l,g as r}from"./common-BIkdAxr0.js";import{t as a}from"./i18n-DvMeCREp.js";import{e as s}from"./component-names-CqTpXVIM.js";import{K as d}from"./Alert-D1w-DbWU.js";import{d as h,K as c}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-B0PxCYiM.js";import"./browser-KcXKIKON.js";import"./Heading-CEAHWwGh.js";const m=(n,t)=>{o(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),t)},f="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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}",p=class{constructor(t){n(this,t),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n)),this.host&&h(this.host,c.submit)},this.onReset=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n)),this.host&&h(this.host,c.reset)},this.handleLinkClick=n=>{const t=document.querySelector(n);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return t(d,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},t("nav",{"aria-label":this.translateErrorList},t("ul",null,null==n?void 0:n.map((n,e)=>t("li",{key:e},t(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return t("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,t("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return t(e,{key:"24abdec4e796efe805b3e29fa9f2e4d0189e64d4"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,t;null===(t=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===t||t.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){m(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return i(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:f};export{p as kol_form};
+import{r as n,h as t,H as e,g as i}from"./index-rqIkzkgG.js";import{b as o,e as l,g as a}from"./common-BIkdAxr0.js";import{t as r}from"./i18n-DvMeCREp.js";import{e as s}from"./component-names-CqTpXVIM.js";import{K as d}from"./Alert-DY4wIJCN.js";import{d as h,K as c}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./Heading-DjpTyUay.js";const m=(n,t)=>{o(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),t)},f="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\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}",p=class{constructor(t){n(this,t),this.translateErrorListMessage=r("kol-error-list-message"),this.translateErrorList=r("kol-error-list"),this.translateFormDescription=r("kol-form-description"),this.onSubmit=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n)),this.host&&h(this.host,c.submit)},this.onReset=n=>{var t,e;n.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n)),this.host&&h(this.host,c.reset)},this.handleLinkClick=n=>{const t=document.querySelector(n);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return t(d,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},t("nav",{"aria-label":this.translateErrorList},t("ul",null,null==n?void 0:n.map((n,e)=>t("li",{key:e},t(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===e?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return t("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?t("p",null,t("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,t("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return t(e,{key:"24abdec4e796efe805b3e29fa9f2e4d0189e64d4"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,t;null===(t=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===t||t.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):a(this,"_requiredText",n)}validateErrorList(n){m(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return i(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:f};export{p as kol_form};

package/dist/kolibri/kol-heading.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-0LQrricW.js";import"./Alert-D1w-DbWU.js";import{K as t}from"./Heading-CEAHWwGh.js";import{g as i}from"./common-BIkdAxr0.js";import{a as o}from"./label-C18ud7Yt.js";import"./i18n-DvMeCREp.js";import"./markdown-BWEzLPZi.js";import{w as a}from"./validation-QdERp-08.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./component-names-CqTpXVIM.js";import"./bem-registry-B0PxCYiM.js";import"./browser-KcXKIKON.js";import"./i18n-B0tfVPMa.js";const l="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",s=class{constructor(e){n(this,e),this._level=0,this.state={_label:"",_level:0}}validateLabel(n){o(this,n)}validateLevel(n){a(this,n)}validateSecondaryHeadline(n){i(this,"_secondaryHeadline",n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:n,_label:i,_level:o}=this.state;return e(t,{key:"e0215bf6a8c6689b9661f08a0216f36bf6d2f332",secondaryHeadline:n,level:o},i,e("slot",{key:"1cd10de7df8a97779b57dd91247f6d3505e10f61",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};s.style={default:l};export{s as kol_heading};
+import{r as n,h as e}from"./index-rqIkzkgG.js";import"./Alert-DY4wIJCN.js";import{K as t}from"./Heading-DjpTyUay.js";import{g as i}from"./common-BIkdAxr0.js";import{a as o}from"./label-C18ud7Yt.js";import"./i18n-DvMeCREp.js";import"./markdown-BWEzLPZi.js";import{w as a}from"./validation-QdERp-08.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./component-names-CqTpXVIM.js";import"./bem-registry-DRYZs7IX.js";import"./browser-KcXKIKON.js";import"./i18n-B0tfVPMa.js";const l="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-headline--secondary {\n    margin: 0;\n  }\n}",s=class{constructor(e){n(this,e),this._level=0,this.state={_label:"",_level:0}}validateLabel(n){o(this,n)}validateLevel(n){a(this,n)}validateSecondaryHeadline(n){i(this,"_secondaryHeadline",n)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline)}render(){const{_secondaryHeadline:n,_label:i,_level:o}=this.state;return e(t,{key:"e0215bf6a8c6689b9661f08a0216f36bf6d2f332",secondaryHeadline:n,level:o},i,e("slot",{key:"1cd10de7df8a97779b57dd91247f6d3505e10f61",name:"expert",slot:"expert"}))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"]}}};s.style={default:l};export{s as kol_heading};

package/dist/kolibri/kol-icon.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,H as o,r as e}from"./index-0LQrricW.js";import{g as t}from"./common-BIkdAxr0.js";import{v as i}from"./label-C18ud7Yt.js";import{c}from"./clsx-COFh-Vc8.js";import{c as r}from"./browser-KcXKIKON.js";class l{constructor(n){this.component=n}validateIcons(n){t(this.component,"_icons",n,{required:!0})}validateLabel(n){i(this.component,n,{required:!0,defaultValue:""})}componentWillLoad(){this.validateIcons(this.component._icons),this.validateLabel(this.component._label)}}const s=r(),a=s("kol-icon"),f=s("kol-icon","icon"),k='/* forward the rem function */\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1772115102975"); /* IE9*/\n  src: url("kolicons.eot?t=1772115102975#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1772115102975") format("woff2"), url("kolicons.woff?t=1772115102975") format("woff"), url("kolicons.ttf?t=1772115102975") format("truetype"), url("kolicons.svg?t=1772115102975#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-size: inherit;\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\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-version::before {\n  content: "\\ea1a";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',b=class{render(){const e=this.state._label.length>0;return n(o,{key:"7b2a85f8eb0a0c273fda83c6ff49463401539c3b",exportparts:"icon",class:a},n("i",{key:"8ee3dbcf5cc0196e51b96ffb53f71e5fdb97eb8f","aria-hidden":e?void 0:"true","aria-label":e?this.state._label:void 0,class:c(f,this.state._icons),part:"icon",role:e?"img":"presentation"}))}constructor(n){e(this,n),this.state={_icons:"kolicon-logo",_label:""},this.controller=new l(this)}validateIcons(n){this.controller.validateIcons(n)}validateLabel(n){this.controller.validateLabel(n)}componentWillLoad(){this.controller.componentWillLoad()}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};b.style={default:k};export{b as kol_icon};
+import{h as n,H as o,r as e}from"./index-rqIkzkgG.js";import{g as t}from"./common-BIkdAxr0.js";import{v as i}from"./label-C18ud7Yt.js";import{c}from"./clsx-COFh-Vc8.js";import{c as r}from"./browser-KcXKIKON.js";class l{constructor(n){this.component=n}validateIcons(n){t(this.component,"_icons",n,{required:!0})}validateLabel(n){i(this.component,n,{required:!0,defaultValue:""})}componentWillLoad(){this.validateIcons(this.component._icons),this.validateLabel(this.component._label)}}const s=r(),a=s("kol-icon"),f=s("kol-icon","icon"),k='/* forward the rem function */\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1772777938670"); /* IE9*/\n  src: url("kolicons.eot?t=1772777938670#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1772777938670") format("woff2"), url("kolicons.woff?t=1772777938670") format("woff"), url("kolicons.ttf?t=1772777938670") format("truetype"), url("kolicons.svg?t=1772777938670#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-size: inherit;\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\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-version::before {\n  content: "\\ea1a";\n}\n\n@layer kol-component {\n  /* :host implicitly inherits font-size, see below */\n  :host {\n    color: inherit;\n    display: contents;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n}',b=class{render(){const e=this.state._label.length>0;return n(o,{key:"7b2a85f8eb0a0c273fda83c6ff49463401539c3b",exportparts:"icon",class:a},n("i",{key:"8ee3dbcf5cc0196e51b96ffb53f71e5fdb97eb8f","aria-hidden":e?void 0:"true","aria-label":e?this.state._label:void 0,class:c(f,this.state._icons),part:"icon",role:e?"img":"presentation"}))}constructor(n){e(this,n),this.state={_icons:"kolicon-logo",_label:""},this.controller=new l(this)}validateIcons(n){this.controller.validateIcons(n)}validateLabel(n){this.controller.validateLabel(n)}componentWillLoad(){this.controller.componentWillLoad()}static get watchers(){return{_icons:["validateIcons"],_label:["validateLabel"]}}};b.style={default:k};export{b as kol_icon};

package/dist/kolibri/kol-image.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-image.entry.esm.js","sources":["src/schema/props/alt.ts","src/schema/props/image-sizes.ts","src/schema/props/image-source.ts","src/schema/props/image-srcset.ts","src/schema/props/loading.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type AltPropType = string;\n\n/**\n * Sets the alternative text of the image.\n */\nexport type PropAlt = {\n\talt: AltPropType;\n};\n\n/* validator */\nexport const validateAlt = (component: Generic.Element.Component, value?: AltPropType, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_alt', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type ImageSizesPropType = string;\n\n/**\n * Defines the image sizes for different screen resolutions, supporting _srcset.\n */\nexport type PropImageSizes = {\n\tsizes: ImageSizesPropType;\n};\n\n/* validator */\nexport const validateImageSizes = (component: Generic.Element.Component, value?: ImageSizesPropType, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_sizes', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type ImageSourcePropType = string;\n\n/**\n * Sets the image `src` attribute to the given string.\n */\nexport type PropImageSource = {\n\tsrc: ImageSourcePropType;\n};\n\n/* validator */\nexport const validateImageSource = (component: Generic.Element.Component, value?: ImageSourcePropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_src', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type ImageSrcsetPropType = string;\n\n/**\n * Sets a list of source URLs with widths of the images.\n */\nexport type PropImageSrcset = {\n\tsrcset: ImageSrcsetPropType;\n};\n\n/* validator */\nexport const validateImageSrcset = (component: Generic.Element.Component, value?: ImageSrcsetPropType, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_srcset', value, options);\n};\n","import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst loadingOptions = ['eager', 'lazy'] as const;\nexport type Loading = (typeof loadingOptions)[number];\n\n/**\n * Sets the loading strategy for the image element.\n */\nexport type PropLoading = {\n\tloading: Loading;\n};\n\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);\n}\n","@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-image {\n\t\tdisplay: inline-block;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport type { ImageAPI, ImageSourcePropType, ImageStates, Loading } from '../../schema';\nimport { validateAlt, validateImageSizes, validateImageSource, validateImageSrcset, validateLoading } from '../../schema';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements ImageAPI {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: ImageStates = {\n\t\t_alt: '', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\tvalidateAlt(this, value, { required: true });\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\tvalidateImageSizes(this, value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\tvalidateImageSrcset(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<img\n\t\t\t\tclass=\"kol-image\"\n\t\t\t\talt={this.state._alt}\n\t\t\t\tloading={this.state._loading}\n\t\t\t\tsizes={this.state._sizes}\n\t\t\t\tsrc={this.state._src}\n\t\t\t\tsrcset={this.state._srcset}\n\t\t\t></img>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-image.entry.esm.js","sources":["src/internal/props/alt.ts","src/internal/props/sizes.ts","src/internal/props/srcset.ts","src/internal/functional-components/image/component.tsx","src/internal/functional-components/image/controller.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type AltProp = SimpleProp<'alt', string>;\nexport const altProp = createPropDefinition<AltProp>(normalizeString, (v) => v.length > 0);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SizesProp = SimpleProp<'sizes', string>;\nexport const sizesProp = createPropDefinition<SizesProp>(normalizeString, () => true);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SrcsetProp = SimpleProp<'srcset', string>;\nexport const srcsetProp = createPropDefinition<SrcsetProp>(normalizeString, () => true);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { ImageApi } from './api';\n\nexport const ImageFC: FC<FunctionalComponentProps<ImageApi>> = (props) => {\n\tconst { alt, loading, sizes, src, srcset } = props;\n\n\treturn <img class=\"kol-image\" alt={alt} loading={loading} sizes={sizes || undefined} src={src} srcset={srcset || undefined} />;\n};\n","import type { AltProp, LoadingProp, LoadingType, SizesProp, SrcProp, SrcsetProp } from '../../props';\nimport { altProp, loadingProp, sizesProp, srcProp, srcsetProp, withValidPropValue } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps } from '../generic-types';\nimport type { ImageApi } from './api';\n\nexport class ImageController extends BaseController<ImageApi> implements ControllerInterface<ImageApi> {\n\tpublic constructor(states: ImageApi['States'] = {}) {\n\t\tsuper(states, {\n\t\t\talt: '',\n\t\t\tloading: 'lazy',\n\t\t\tsizes: '',\n\t\t\tsrc: '',\n\t\t\tsrcset: '',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<ImageApi>): void {\n\t\tconst { alt, loading, sizes, src, srcset } = props;\n\t\tthis.watchAlt(alt);\n\t\tthis.watchLoading(loading);\n\t\tthis.watchSizes(sizes);\n\t\tthis.watchSrc(src);\n\t\tthis.watchSrcset(srcset);\n\t}\n\n\tpublic watchAlt(value?: string): void {\n\t\twithValidPropValue<AltProp>(altProp, value, (v) => {\n\t\t\tthis.setProp('alt', v);\n\t\t});\n\t}\n\n\tpublic watchLoading(value?: LoadingType): void {\n\t\twithValidPropValue<LoadingProp>(loadingProp, value, (v) => {\n\t\t\tthis.setProp('loading', v);\n\t\t});\n\t}\n\n\tpublic watchSizes(value?: string): void {\n\t\twithValidPropValue<SizesProp>(sizesProp, value, (v) => {\n\t\t\tthis.setProp('sizes', v);\n\t\t});\n\t}\n\n\tpublic watchSrc(value?: string): void {\n\t\twithValidPropValue<SrcProp>(srcProp, value, (v) => {\n\t\t\tthis.setProp('src', v);\n\t\t});\n\t}\n\n\tpublic watchSrcset(value?: string): void {\n\t\twithValidPropValue<SrcsetProp>(srcsetProp, value, (v) => {\n\t\t\tthis.setProp('srcset', v);\n\t\t});\n\t}\n}\n","@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-image {\n\t\tdisplay: inline-block;\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { ImageApi } from '../../internal/functional-components/image/api';\nimport { ImageFC } from '../../internal/functional-components/image/component';\nimport { ImageController } from '../../internal/functional-components/image/controller';\nimport type { LoadingType } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements WebComponentInterface<ImageApi> {\n\tprivate readonly ctrl = new ImageController();\n\n\t/**\n\t * Sets the alternative text of the image.\n\t */\n\t@Prop()\n\tpublic _alt!: string;\n\n\t@Watch('_alt')\n\tpublic watchAlt(value?: string): void {\n\t\tthis.ctrl.watchAlt(value);\n\t}\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop()\n\tpublic _loading?: LoadingType;\n\n\t@Watch('_loading')\n\tpublic watchLoading(value?: LoadingType): void {\n\t\tthis.ctrl.watchLoading(value);\n\t}\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop()\n\tpublic _sizes?: string;\n\n\t@Watch('_sizes')\n\tpublic watchSizes(value?: string): void {\n\t\tthis.ctrl.watchSizes(value);\n\t}\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop()\n\tpublic _src!: string;\n\n\t@Watch('_src')\n\tpublic watchSrc(value?: string): void {\n\t\tthis.ctrl.watchSrc(value);\n\t}\n\n\t/**\n\t * Sets a list of source URLs with widths of the images.\n\t */\n\t@Prop()\n\tpublic _srcset?: string;\n\n\t@Watch('_srcset')\n\tpublic watchSrcset(value?: string): void {\n\t\tthis.ctrl.watchSrcset(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\talt: this._alt,\n\t\t\tloading: this._loading,\n\t\t\tsizes: this._sizes,\n\t\t\tsrc: this._src,\n\t\t\tsrcset: this._srcset,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { alt, loading, sizes, src, srcset } = this.ctrl.getProps();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<ImageFC alt={alt} loading={loading} sizes={sizes} src={src} srcset={srcset} />\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/kolibri/kol-image.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-0LQrricW.js";import{g as t,b as i}from"./common-BIkdAxr0.js";const o=(n,e,i={})=>{t(n,"_alt",e,i)},a=(n,e,i={})=>{t(n,"_sizes",e,i)},l=(n,e,i)=>{t(n,"_src",e,i)},s=(n,e,i={})=>{t(n,"_srcset",e,i)},r=["eager","lazy"];function d(n,e){i(n,"_loading",n=>"string"==typeof n&&r.includes(n),new Set(r),e)}const h="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",c=class{constructor(e){n(this,e),this._loading="lazy",this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(n){o(this,n,{required:!0})}validateLoading(n){d(this,n)}validateSizes(n){a(this,n)}validateSrc(n){l(this,n,{required:!0})}validateSrcset(n){s(this,n)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return e("img",{key:"c17e012e1bef61d097f2b64d9b22714ef02a793e",class:"kol-image",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset})}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}};c.style={default:h};export{c as kol_image};
+import{h as n,r as e,H as t}from"./index-rqIkzkgG.js";import{c as i,n as o,B as s,w as a,l}from"./base-controller-CUXUgRY-.js";import"./common-BIkdAxr0.js";import{s as r}from"./src-CdIzLWIb.js";const c=i(o,n=>n.length>0),d=i(o,()=>!0),h=i(o,()=>!0),m=e=>{const{alt:t,loading:i,sizes:o,src:s,srcset:a}=e;return n("img",{class:"kol-image",alt:t,loading:i,sizes:o||void 0,src:s,srcset:a||void 0})};class p extends s{constructor(n={}){super(n,{alt:"",loading:"lazy",sizes:"",src:"",srcset:""})}componentWillLoad(n){const{alt:e,loading:t,sizes:i,src:o,srcset:s}=n;this.watchAlt(e),this.watchLoading(t),this.watchSizes(i),this.watchSrc(o),this.watchSrcset(s)}watchAlt(n){a(c,n,n=>{this.setProp("alt",n)})}watchLoading(n){a(l,n,n=>{this.setProp("loading",n)})}watchSizes(n){a(d,n,n=>{this.setProp("sizes",n)})}watchSrc(n){a(r,n,n=>{this.setProp("src",n)})}watchSrcset(n){a(h,n,n=>{this.setProp("srcset",n)})}}const f="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-image {\n    display: inline-block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",u=class{constructor(n){e(this,n),this.ctrl=new p}watchAlt(n){this.ctrl.watchAlt(n)}watchLoading(n){this.ctrl.watchLoading(n)}watchSizes(n){this.ctrl.watchSizes(n)}watchSrc(n){this.ctrl.watchSrc(n)}watchSrcset(n){this.ctrl.watchSrcset(n)}componentWillLoad(){this.ctrl.componentWillLoad({alt:this._alt,loading:this._loading,sizes:this._sizes,src:this._src,srcset:this._srcset})}render(){const{alt:e,loading:i,sizes:o,src:s,srcset:a}=this.ctrl.getProps();return n(t,{key:"9c00292c9961637155bfcc81fbb758fabd87ff54"},n(m,{key:"e793818eaee3d037838c8931aa603e720bec618f",alt:e,loading:i,sizes:o,src:s,srcset:a}))}static get watchers(){return{_alt:["watchAlt"],_loading:["watchLoading"],_sizes:["watchSizes"],_src:["watchSrc"],_srcset:["watchSrcset"]}}};u.style={default:f};export{u as kol_image};

package/dist/kolibri/kol-image.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","watchString","watchValidator","validateAlt","component","value","options","validateImageSizes","validateImageSource","validateImageSrcset","loadingOptions","validateLoading","includes","Set","defaultStyleCss","KolImage","constructor","hostRef","this","_loading","state","_alt","_src","required","validateSizes","validateSrc","validateSrcset","componentWillLoad","_sizes","_srcset","render","key","class","alt","loading","sizes","src","srcset","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,MAAS,kCAC3BC,OAAkBC,MAAsB,uBAEtD,MAAMC,EAAc,CAACC,EAAWC,EAAOC,EAAU,CAAC,KAC9CL,EAAYG,EAAW,OAAQC,EAAOC,EAAQ,EAGlD,MAAMC,EAAqB,CAACH,EAAWC,EAAOC,EAAU,CAAC,KACrDL,EAAYG,EAAW,SAAUC,EAAOC,EAAQ,EAGpD,MAAME,EAAsB,CAACJ,EAAWC,EAAOC,KAC3CL,EAAYG,EAAW,OAAQC,EAAOC,EAAQ,EAGlD,MAAMG,EAAsB,CAACL,EAAWC,EAAOC,EAAU,CAAC,KACtDL,EAAYG,EAAW,UAAWC,EAAOC,EAAQ,EAGrD,MAAMI,EAAiB,CAAC,QAAS,QACjC,SAASC,EAAgBP,EAAWC,GAChCH,EAAeE,EAAW,YAAaC,UAAiBA,IAAU,UAAYK,EAAeE,SAASP,IAAQ,IAAIQ,IAAIH,GAAiBL,EAC3I,CAEA,MAAMS,EAAkB,w3KAExB,MAAMC,EAAW,MACb,WAAAC,CAAYC,GACRlB,EAAiBmB,KAAMD,GACvBC,KAAKC,SAAW,OAChBD,KAAKE,MAAQ,CACTC,KAAM,GACNF,SAAU,OACVG,KAAM,GAEd,CACA,WAAAnB,CAAYE,GACRF,EAAYe,KAAMb,EAAO,CAAEkB,SAAU,MACzC,CACA,eAAAZ,CAAgBN,GACZM,EAAgBO,KAAMb,EAC1B,CACA,aAAAmB,CAAcnB,GACVE,EAAmBW,KAAMb,EAC7B,CACA,WAAAoB,CAAYpB,GACRG,EAAoBU,KAAMb,EAAO,CAC7BkB,SAAU,MAElB,CACA,cAAAG,CAAerB,GACXI,EAAoBS,KAAMb,EAC9B,CACA,iBAAAsB,GACIT,KAAKf,YAAYe,KAAKG,MACtBH,KAAKP,gBAAgBO,KAAKC,UAC1BD,KAAKM,cAAcN,KAAKU,QACxBV,KAAKO,YAAYP,KAAKI,MACtBJ,KAAKQ,eAAeR,KAAKW,QAC7B,CACA,MAAAC,GACI,OAAQ9B,EAAE,MAAO,CAAE+B,IAAK,2CAA4CC,MAAO,YAAaC,IAAKf,KAAKE,MAAMC,KAAMa,QAAShB,KAAKE,MAAMD,SAAUgB,MAAOjB,KAAKE,MAAMQ,OAAQQ,IAAKlB,KAAKE,MAAME,KAAMe,OAAQnB,KAAKE,MAAMS,SACnN,CACA,mBAAWS,GAAa,MAAO,CAC3BjB,KAAQ,CAAC,eACTF,SAAY,CAAC,mBACbS,OAAU,CAAC,iBACXN,KAAQ,CAAC,eACTO,QAAW,CAAC,kBACb,GAEPd,EAASwB,MAAQ,CACbC,QAAS1B,UAGJC","ignoreList":[]}
+{"version":3,"names":["h","registerInstance","Host","createPropDefinition","normalizeString","BaseController","withValidPropValue","loadingProp","srcProp","altProp","v","length","sizesProp","srcsetProp","ImageFC","props","alt","loading","sizes","src","srcset","class","undefined","ImageController","constructor","states","super","componentWillLoad","this","watchAlt","watchLoading","watchSizes","watchSrc","watchSrcset","value","setProp","defaultStyleCss","KolImage","hostRef","ctrl","_alt","_loading","_sizes","_src","_srcset","render","getProps","key","watchers","style","default"],"sources":["0"],"mappings":";;;YAGSA,OAAQC,OAAuBC,MAAY,kCACtCC,OAA2BC,OAAsBC,OAAqBC,EAAyBC,MAAmB,sCACzH,mCACOC,MAAe,oBAE7B,MAAMC,EAAUN,EAAqBC,GAAkBM,GAAMA,EAAEC,OAAS,IAExE,MAAMC,EAAYT,EAAqBC,GAAiB,IAAM,OAE9D,MAAMS,EAAaV,EAAqBC,GAAiB,IAAM,OAE/D,MAAMU,EAAWC,IACb,MAAMC,IAAEA,EAAGC,QAAEA,EAAOC,MAAEA,EAAKC,IAAEA,EAAGC,OAAEA,GAAWL,EAC7C,OAAOf,EAAE,MAAO,CAAEqB,MAAO,YAAaL,IAAKA,EAAKC,QAASA,EAASC,MAAOA,GAASI,UAAWH,IAAKA,EAAKC,OAAQA,GAAUE,WAAY,EAGzI,MAAMC,UAAwBlB,EAC1B,WAAAmB,CAAYC,EAAS,CAAC,GAClBC,MAAMD,EAAQ,CACVT,IAAK,GACLC,QAAS,OACTC,MAAO,GACPC,IAAK,GACLC,OAAQ,IAEhB,CACA,iBAAAO,CAAkBZ,GACd,MAAMC,IAAEA,EAAGC,QAAEA,EAAOC,MAAEA,EAAKC,IAAEA,EAAGC,OAAEA,GAAWL,EAC7Ca,KAAKC,SAASb,GACdY,KAAKE,aAAab,GAClBW,KAAKG,WAAWb,GAChBU,KAAKI,SAASb,GACdS,KAAKK,YAAYb,EACrB,CACA,QAAAS,CAASK,GACL5B,EAAmBG,EAASyB,GAAQxB,IAChCkB,KAAKO,QAAQ,MAAOzB,EAAE,GAE9B,CACA,YAAAoB,CAAaI,GACT5B,EAAmBC,EAAa2B,GAAQxB,IACpCkB,KAAKO,QAAQ,UAAWzB,EAAE,GAElC,CACA,UAAAqB,CAAWG,GACP5B,EAAmBM,EAAWsB,GAAQxB,IAClCkB,KAAKO,QAAQ,QAASzB,EAAE,GAEhC,CACA,QAAAsB,CAASE,GACL5B,EAAmBE,EAAS0B,GAAQxB,IAChCkB,KAAKO,QAAQ,MAAOzB,EAAE,GAE9B,CACA,WAAAuB,CAAYC,GACR5B,EAAmBO,EAAYqB,GAAQxB,IACnCkB,KAAKO,QAAQ,SAAUzB,EAAE,GAEjC,EAGJ,MAAM0B,EAAkB,w3KAExB,MAAMC,EAAW,MACb,WAAAb,CAAYc,GACRrC,EAAiB2B,KAAMU,GACvBV,KAAKW,KAAO,IAAIhB,CACpB,CACA,QAAAM,CAASK,GACLN,KAAKW,KAAKV,SAASK,EACvB,CACA,YAAAJ,CAAaI,GACTN,KAAKW,KAAKT,aAAaI,EAC3B,CACA,UAAAH,CAAWG,GACPN,KAAKW,KAAKR,WAAWG,EACzB,CACA,QAAAF,CAASE,GACLN,KAAKW,KAAKP,SAASE,EACvB,CACA,WAAAD,CAAYC,GACRN,KAAKW,KAAKN,YAAYC,EAC1B,CACA,iBAAAP,GACIC,KAAKW,KAAKZ,kBAAkB,CACxBX,IAAKY,KAAKY,KACVvB,QAASW,KAAKa,SACdvB,MAAOU,KAAKc,OACZvB,IAAKS,KAAKe,KACVvB,OAAQQ,KAAKgB,SAErB,CACA,MAAAC,GACI,MAAM7B,IAAEA,EAAGC,QAAEA,EAAOC,MAAEA,EAAKC,IAAEA,EAAGC,OAAEA,GAAWQ,KAAKW,KAAKO,WACvD,OAAQ9C,EAAEE,EAAM,CAAE6C,IAAK,4CAA8C/C,EAAEc,EAAS,CAAEiC,IAAK,2CAA4C/B,IAAKA,EAAKC,QAASA,EAASC,MAAOA,EAAOC,IAAKA,EAAKC,OAAQA,IACnM,CACA,mBAAW4B,GAAa,MAAO,CAC3BR,KAAQ,CAAC,YACTC,SAAY,CAAC,gBACbC,OAAU,CAAC,cACXC,KAAQ,CAAC,YACTC,QAAW,CAAC,eACb,GAEPP,EAASY,MAAQ,CACbC,QAASd,UAGJC","ignoreList":[]}