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

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

@@ -1 +1 @@
-{"version":3,"file":"kol-details.entry.cjs.js","sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Callback.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/collapsible.mixin' as *;\n@use '../@shared/icon.mixin' as *;\n@use '../@shared/button.mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-icon-styles();\n\t.kol-details {\n\t\t.collapsible--open &__heading-button {\n\t\t\t.kol-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, type JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tDetailsAPI,\n\tDetailsCallbacksPropType,\n\tDetailsStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tKolFocusOptions,\n\tLabelPropType,\n} from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * The **Details** component allows additional information to be initially shown with a short introductory text,\n * which is only fully expanded after the user clicks on an arrow icon.\n *\n * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\n * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\n * changes its orientation from **_right_** to **_down_**.\n * The component can also be closed again to hide the content.\n *\n * @slot - The content displayed in the detail description.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly id = createUniqueId('details');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Triggers a click on the summary/toggle button.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'kol-details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"names":["watchValidator","createUniqueId","createCtaRef","dispatchDomEvent","KolEvent","h","KolCollapsibleFc","validateDisabled","validateLabel","watchHeadingLevel","validateOpen","__decorate","delegateFocus","delegateClick"],"mappings":"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"}
+{"version":3,"file":"kol-details.entry.cjs.js","sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Callback.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/collapsible.mixin' as *;\n@use '../@shared/icon.mixin' as *;\n@use '../@shared/button.mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n\t@include kol-icon-styles();\n\t.kol-details {\n\t\t.collapsible--open &__heading-button {\n\t\t\t.kol-icon {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, type JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tClickableElement,\n\tDetailsAPI,\n\tDetailsCallbacksPropType,\n\tDetailsStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tKolFocusOptions,\n\tLabelPropType,\n} from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * The **Details** component allows additional information to be initially shown with a short introductory text,\n * which is only fully expanded after the user clicks on an arrow icon.\n *\n * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\n * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\n * changes its orientation from **_right_** to **_down_**.\n * The component can also be closed again to hide the content.\n *\n * @slot - The content displayed in the detail description.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements ClickableElement, DetailsAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly id = createUniqueId('details');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Triggers a click on the summary/toggle button.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'kol-details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"names":["watchValidator","createUniqueId","createCtaRef","dispatchDomEvent","KolEvent","h","KolCollapsibleFc","validateDisabled","validateLabel","watchHeadingLevel","validateOpen","__decorate","delegateFocus","delegateClick"],"mappings":"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"}

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

@@ -3,12 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-DBbl8tEq.js');
+var index = require('./index-Bo9_lDIt.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 var common = require('./common-DAAt5YQ7.js');
 var label = require('./label-VzToxIES.js');
 var clsx = require('./clsx-Bm_HQUnh.js');
-var dev_utils = require('./dev.utils-Cdn-EtYb.js');
+var dev_utils = require('./dev.utils-DvNz4B2G.js');
 var events = require('./events-DN9qldnr.js');
 var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
 var validation = require('./validation-DwarFcC9.js');
@@ -94,7 +94,7 @@ const KolDialogWc = class {
         return this.close();
     }
     render() {
-        return (index.h("dialog", { key: '740fd9b18343e873a7961173848be648bbd0ff8a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx.clsx('kol-dialog', 'kol-modal', {
+        return (index.h("dialog", { key: 'b622c4990e105ebbb64d26e211ff6dc37208a10a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx.clsx('kol-dialog', 'kol-modal', {
                 'kol-dialog__blank': this.state._variant === 'blank',
                 'kol-dialog__card': this.state._variant === 'card',
                 'kol-modal__blank': this.state._variant === 'blank',
@@ -103,7 +103,7 @@ const KolDialogWc = class {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            } }, this.state._variant === 'blank' && index.h("slot", { key: '183bbb7224ca0ec06bbd84e354fa7b58882a4879' }), this.state._variant === 'card' && (index.h(componentNames.KolCardWcTag, { key: 'e0270ea31e33d61760aa8fca356c08f88a56fffe', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, index.h("slot", { key: 'a18c03fd1f0cdcc25a8bddfffd5b0753fc81cdb5' })))));
+            } }, this.state._variant === 'blank' && index.h("slot", { key: '850a1ade034d6444cf1f665e788c140a7b0c90b8' }), this.state._variant === 'card' && (index.h(componentNames.KolCardWcTag, { key: 'd4ee4734987ccde37930a628b11a6ddf540143bd', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, index.h("slot", { key: 'cdecd18053b687089733f88d6b6314c64d27d206' })))));
     }
     validateLabel(value) {
         label.validateLabel(this, value, {

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

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-DBbl8tEq.js');
+var index = require('./index-Bo9_lDIt.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 require('./common-DAAt5YQ7.js');
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1780914078349\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1780914078349#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780914078349\") format(\"woff2\"), url(\"kolicons.woff?t=1780914078349\") format(\"woff\"), url(\"kolicons.ttf?t=1780914078349\") format(\"truetype\"), url(\"kolicons.svg?t=1780914078349#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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    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-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\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}";
+const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1782311579243\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1782311579243#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1782311579243\") format(\"woff2\"), url(\"kolicons.woff?t=1782311579243\") format(\"woff\"), url(\"kolicons.ttf?t=1782311579243\") format(\"truetype\"), url(\"kolicons.svg?t=1782311579243#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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    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-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\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}";
 
 const KolDialog = class {
     constructor(hostRef) {
@@ -38,7 +38,7 @@ const KolDialog = class {
         return this.close();
     }
     render() {
-        return (index.h(componentNames.KolDialogWcTag, { key: 'a17abd1f58ac28397c5645822518998209c455e9', ref: this.catchRef, _label: this._label, _level: this._level, _on: this._on, _variant: this._variant, _width: this._width }, index.h("slot", { key: 'bc9895ef49e81444df9ce3d2634ae950bfc0f115' })));
+        return (index.h(componentNames.KolDialogWcTag, { key: '150e1d8672c53f3398d974bdb49d82386ccc45b5', ref: this.catchRef, _label: this._label, _level: this._level, _on: this._on, _variant: this._variant, _width: this._width }, index.h("slot", { key: 'aee06f0dc639103bf837b36be0c249640c453c3c' })));
     }
 };
 KolDialog.style = {

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

@@ -1 +1 @@
-{"version":3,"file":"kol-dialog.entry.cjs.js","sources":["src/components/dialog/style.scss?tag=kol-dialog&mode=default&encapsulation=shadow","src/components/dialog/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-dialog,\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\t}\n\n\t.kol-dialog__close-button,\n\t.kol-modal__close-button {\n\t\tposition: absolute;\n\t\ttop: to-rem(1);\n\t\tright: to-rem(1);\n\t\tz-index: 1;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolDialogWcTag } from '../../core/component-names';\nimport type { DialogProps, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\n\n/**\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDialog implements DialogProps {\n\tprivate dialogRef?: HTMLKolDialogWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolDialogWcElement) => {\n\t\tthis.dialogRef = ref;\n\t};\n\n\t/**\n\t * Opens the dialog.\n\t * @deprecated Use showModal() instead.\n\t */\n\t@Method()\n\tpublic openModal(): Promise<void> {\n\t\treturn this.showModal();\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.dialogRef?.showModal() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\n\t */\n\t@Method()\n\tpublic show(modal: boolean = false): Promise<void> {\n\t\treturn this.dialogRef?.show(modal) ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t */\n\t@Method()\n\tpublic close(): Promise<void> {\n\t\treturn this.dialogRef?.close() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t * @deprecated Use close() instead.\n\t */\n\t@Method()\n\tpublic closeModal(): Promise<void> {\n\t\treturn this.close();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolDialogWcTag ref={this.catchRef} _label={this._label} _level={this._level} _on={this._on} _variant={this._variant} _width={this._width}>\n\t\t\t\t<slot />\n\t\t\t</KolDialogWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n}\n"],"names":["h","KolDialogWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,wgWAAwgW;;MCgBnhW,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AA4Dc,QAAA,IAAM,CAAA,MAAA,GAAkB,CAAC;AAUzB,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAKxB,QAAA,IAAQ,CAAA,QAAA,GAA0B,OAAO;AACxD;IArEO,SAAS,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;;IAOjB,SAAS,GAAA;;QACf,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,IAAI,CAAC,QAAiB,KAAK,EAAA;;QACjC,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,KAAK,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,KAAK,GAAA;;QACX,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAQ7C,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;;IAGb,MAAM,GAAA;QACZ,QACCA,OAAC,CAAAC,6BAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EACxID,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACQ;;;;;;;;;"}
+{"version":3,"file":"kol-dialog.entry.cjs.js","sources":["src/components/dialog/style.scss?tag=kol-dialog&mode=default&encapsulation=shadow","src/components/dialog/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-dialog,\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\t}\n\n\t.kol-dialog__close-button,\n\t.kol-modal__close-button {\n\t\tposition: absolute;\n\t\ttop: to-rem(1);\n\t\tright: to-rem(1);\n\t\tz-index: 1;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolDialogWcTag } from '../../core/component-names';\nimport type { DialogProps, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\n\n/**\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDialog implements DialogProps {\n\tprivate dialogRef?: HTMLKolDialogWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolDialogWcElement) => {\n\t\tthis.dialogRef = ref;\n\t};\n\n\t/**\n\t * Opens the dialog.\n\t * @deprecated Use showModal() instead.\n\t */\n\t@Method()\n\tpublic openModal(): Promise<void> {\n\t\treturn this.showModal();\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.dialogRef?.showModal() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\n\t */\n\t@Method()\n\tpublic show(modal: boolean = false): Promise<void> {\n\t\treturn this.dialogRef?.show(modal) ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t */\n\t@Method()\n\tpublic close(): Promise<void> {\n\t\treturn this.dialogRef?.close() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t * @deprecated Use close() instead.\n\t */\n\t@Method()\n\tpublic closeModal(): Promise<void> {\n\t\treturn this.close();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolDialogWcTag ref={this.catchRef} _label={this._label} _level={this._level} _on={this._on} _variant={this._variant} _width={this._width}>\n\t\t\t\t<slot />\n\t\t\t</KolDialogWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n}\n"],"names":["h","KolDialogWcTag"],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,yzWAAyzW;;MCgBp0W,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AA4Dc,QAAA,IAAM,CAAA,MAAA,GAAkB,CAAC;AAUzB,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAKxB,QAAA,IAAQ,CAAA,QAAA,GAA0B,OAAO;AACxD;IArEO,SAAS,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;;IAOjB,SAAS,GAAA;;QACf,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,IAAI,CAAC,QAAiB,KAAK,EAAA;;QACjC,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,KAAK,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,KAAK,GAAA;;QACX,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAQ7C,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;;IAGb,MAAM,GAAA;QACZ,QACCA,OAAC,CAAAC,6BAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EACxID,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACQ;;;;;;;;;"}

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

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DBbl8tEq.js');
+var index = require('./index-Bo9_lDIt.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 var common = require('./common-DAAt5YQ7.js');
 var align = require('./align-e4FQ7dUp.js');
@@ -11,7 +11,7 @@ var hasCloser = require('./has-closer-CuErOOct.js');
 var label = require('./label-VzToxIES.js');
 var open = require('./open-CLOzqgir.js');
 var clsx = require('./clsx-Bm_HQUnh.js');
-var dev_utils = require('./dev.utils-Cdn-EtYb.js');
+var dev_utils = require('./dev.utils-DvNz4B2G.js');
 var events = require('./events-DN9qldnr.js');
 var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
 var validation = require('./validation-DwarFcC9.js');
@@ -20,7 +20,7 @@ require('./normalizers-R90MJyQR.js');
 require('./_Uint8Array-BAQUGozM.js');
 require('./isArray-BOIOdEQh.js');
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1780914078349\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1780914078349#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780914078349\") format(\"woff2\"), url(\"kolicons.woff?t=1780914078349\") format(\"woff\"), url(\"kolicons.ttf?t=1780914078349\") format(\"truetype\"), url(\"kolicons.svg?t=1780914078349#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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    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}";
+const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1782311579243\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1782311579243#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1782311579243\") format(\"woff2\"), url(\"kolicons.woff?t=1782311579243\") format(\"woff\"), url(\"kolicons.ttf?t=1782311579243\") format(\"truetype\"), url(\"kolicons.svg?t=1782311579243#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\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    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}";
 
 const KolDrawer = class {
     constructor(hostRef) {
@@ -111,7 +111,7 @@ const KolDrawer = class {
             }), _hasCloser: this.state._hasCloser, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, index.h("div", { class: "kol-drawer__content" }, index.h("slot", null))));
     }
     render() {
-        return (index.h(index.Host, { key: '9ddd7432cb3f0a79b4020144378e951d76d6429b', class: "kol-drawer" }, index.h("dialog", { key: '4187cc6a21ca4471a30f1db9f860d5a141372157', "aria-labelledby": this.cardHeadingId, "aria-modal": this.isModal ? 'true' : 'false', class: "kol-drawer__dialog", onCancel: this.handleCancelEvent, ref: this.getRef }, this.renderDialogContent())));
+        return (index.h(index.Host, { key: '14aa4c6b978a89943fe8d83901ede517d8ff6032', class: "kol-drawer" }, index.h("dialog", { key: 'db250f54f95e8658e6929c3cfd4b2afd21ca62ab', "aria-labelledby": this.cardHeadingId, "aria-modal": this.isModal ? 'true' : 'false', class: "kol-drawer__dialog", onCancel: this.handleCancelEvent, ref: this.getRef }, this.renderDialogContent())));
     }
     validateLabel(value) {
         label.validateLabel(this, value, {

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

@@ -1 +1 @@
-{"version":3,"file":"kol-drawer.entry.cjs.js","sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-drawer {\n\t\t$root: &;\n\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\n\t\t\t&--left,\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tmax-width: 100vw;\n\t\t\t\theight: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--left {\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&--bottom,\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-height: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tbottom: 0;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t}\n\t}\n\n\t.kol-drawer__dialog .kol-card__content {\n\t\toverflow-y: auto;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type {\n\tAlignPropType,\n\tDrawerAPI,\n\tDrawerStates,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tKoliBriModalEventCallbacks,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLKolCardWcElement;\n\tprivate readonly cardHeadingId = createUniqueId('drawer-heading');\n\n\t@State() private isModal: boolean = true;\n\n\t/**\n\t * Opens the drawer. Pass true to open as a modal drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async show(modal: boolean = false): Promise<void> {\n\t\tif (this.dialogElement?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tif (modal) {\n\t\t\tthis.dialogElement?.showModal?.();\n\t\t} else {\n\t\t\tthis.dialogElement?.show?.();\n\t\t}\n\t\tthis._on?.onToggle?.(true);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.toggle);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the drawer as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.show(true);\n\t}\n\n\t/**\n\t * Opens the drawer.\n\t * @deprecated Use show() or showModal() instead.\n\t */\n\t@Method()\n\tpublic open(): Promise<void> {\n\t\treturn this.show(false);\n\t}\n\n\t/**\n\t * Closes the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) {\n\t\t\treturn;\n\t\t}\n\t\tif (window.getComputedStyle(wrapper).animationName === 'none') {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t}\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tprivate getWrapperRef = (el: HTMLKolCardWcElement | undefined) => (this.dialogWrapperElement = el as HTMLKolCardWcElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {\n\t\t\t\t\t'kol-drawer__wrapper--open': this.state._open,\n\t\t\t\t\t'kol-drawer__wrapper--is-closing': this.state._open === false,\n\t\t\t\t})}\n\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t_headingId={this.cardHeadingId}\n\t\t\t\t_label={this.state._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_on={this._cardOn}\n\t\t\t>\n\t\t\t\t<div class=\"kol-drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => {\n\t\tthis.dialogElement = el as HTMLDialogElement;\n\t\tsetTimeout(() => {\n\t\t\tvoid this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready\n\t\t});\n\t};\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-drawer\">\n\t\t\t\t<dialog\n\t\t\t\t\taria-labelledby={this.cardHeadingId}\n\t\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\t\tclass=\"kol-drawer__dialog\"\n\t\t\t\t\tonCancel={this.handleCancelEvent}\n\t\t\t\t\tref={this.getRef}\n\t\t\t\t>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType) {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\n\t\t\tif (this.dialogElement) {\n\t\t\t\t// handle property changes but not the initial validateOpen call\n\t\t\t\tvoid this.openOrCloseBasedOnState();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openOrCloseBasedOnState() {\n\t\tif (this.state._open) {\n\t\t\tawait this.show(this.isModal);\n\t\t} else {\n\t\t\tawait this.close();\n\t\t}\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onCancel === 'function') {\n\t\t\t\tcallbacks.onCancel = value.onCancel;\n\t\t\t}\n\t\t\tif (typeof value.onClose === 'function') {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tif (typeof value.onToggle === 'function') {\n\t\t\t\tcallbacks.onToggle = value.onToggle;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\tprivate handleCancelEvent = (event: Event): void => {\n\t\thandleCancelOverlay(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tthis.state._on?.onCancel?.(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tif (this.host && !dispatchDomEvent(this.host, KolEvent.cancel)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate handleCloseDialog() {\n\t\tthis._on?.onClose?.();\n\t\tthis._on?.onToggle?.(false);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t\tdispatchDomEvent(this.host, KolEvent.toggle);\n\t\t}\n\t}\n\n\tprivate readonly handleClose = () => {\n\t\tvoid (async () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t})();\n\t};\n\n\tprivate readonly handleAnimationEnd = (e: Event): void => {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose);\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"names":["createUniqueId","handleCancelOverlay","dispatchDomEvent","KolEvent","h","KolCardWcTag","clsx","Host","validateLabel","validateAlign","validateHasCloser","watchHeadingLevel","validateOpen","setState"],"mappings":"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"}
+{"version":3,"file":"kol-drawer.entry.cjs.js","sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-drawer {\n\t\t$root: &;\n\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\n\t\t\t&--left,\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tmax-width: 100vw;\n\t\t\t\theight: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--left {\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&--bottom,\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-height: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tbottom: 0;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t}\n\t}\n\n\t.kol-drawer__dialog .kol-card__content {\n\t\toverflow-y: auto;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type {\n\tAlignPropType,\n\tDrawerAPI,\n\tDrawerStates,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tKoliBriModalEventCallbacks,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLKolCardWcElement;\n\tprivate readonly cardHeadingId = createUniqueId('drawer-heading');\n\n\t@State() private isModal: boolean = true;\n\n\t/**\n\t * Opens the drawer. Pass true to open as a modal drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async show(modal: boolean = false): Promise<void> {\n\t\tif (this.dialogElement?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tif (modal) {\n\t\t\tthis.dialogElement?.showModal?.();\n\t\t} else {\n\t\t\tthis.dialogElement?.show?.();\n\t\t}\n\t\tthis._on?.onToggle?.(true);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.toggle);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the drawer as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.show(true);\n\t}\n\n\t/**\n\t * Opens the drawer.\n\t * @deprecated Use show() or showModal() instead.\n\t */\n\t@Method()\n\tpublic open(): Promise<void> {\n\t\treturn this.show(false);\n\t}\n\n\t/**\n\t * Closes the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) {\n\t\t\treturn;\n\t\t}\n\t\tif (window.getComputedStyle(wrapper).animationName === 'none') {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t}\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tprivate getWrapperRef = (el: HTMLKolCardWcElement | undefined) => (this.dialogWrapperElement = el as HTMLKolCardWcElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {\n\t\t\t\t\t'kol-drawer__wrapper--open': this.state._open,\n\t\t\t\t\t'kol-drawer__wrapper--is-closing': this.state._open === false,\n\t\t\t\t})}\n\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t_headingId={this.cardHeadingId}\n\t\t\t\t_label={this.state._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_on={this._cardOn}\n\t\t\t>\n\t\t\t\t<div class=\"kol-drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => {\n\t\tthis.dialogElement = el as HTMLDialogElement;\n\t\tsetTimeout(() => {\n\t\t\tvoid this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready\n\t\t});\n\t};\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-drawer\">\n\t\t\t\t<dialog\n\t\t\t\t\taria-labelledby={this.cardHeadingId}\n\t\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\t\tclass=\"kol-drawer__dialog\"\n\t\t\t\t\tonCancel={this.handleCancelEvent}\n\t\t\t\t\tref={this.getRef}\n\t\t\t\t>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType) {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\n\t\t\tif (this.dialogElement) {\n\t\t\t\t// handle property changes but not the initial validateOpen call\n\t\t\t\tvoid this.openOrCloseBasedOnState();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openOrCloseBasedOnState() {\n\t\tif (this.state._open) {\n\t\t\tawait this.show(this.isModal);\n\t\t} else {\n\t\t\tawait this.close();\n\t\t}\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onCancel === 'function') {\n\t\t\t\tcallbacks.onCancel = value.onCancel;\n\t\t\t}\n\t\t\tif (typeof value.onClose === 'function') {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tif (typeof value.onToggle === 'function') {\n\t\t\t\tcallbacks.onToggle = value.onToggle;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\tprivate handleCancelEvent = (event: Event): void => {\n\t\thandleCancelOverlay(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tthis.state._on?.onCancel?.(event);\n\t\tif (event.defaultPrevented) return;\n\n\t\tif (this.host && !dispatchDomEvent(this.host, KolEvent.cancel)) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t};\n\n\tprivate handleCloseDialog() {\n\t\tthis._on?.onClose?.();\n\t\tthis._on?.onToggle?.(false);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t\tdispatchDomEvent(this.host, KolEvent.toggle);\n\t\t}\n\t}\n\n\tprivate readonly handleClose = () => {\n\t\tvoid (async () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t})();\n\t};\n\n\tprivate readonly handleAnimationEnd = (e: Event): void => {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose);\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"names":["createUniqueId","handleCancelOverlay","dispatchDomEvent","KolEvent","h","KolCardWcTag","clsx","Host","validateLabel","validateAlign","validateHasCloser","watchHeadingLevel","validateOpen","setState"],"mappings":"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"}

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

@@ -3,28 +3,32 @@
  */
 'use strict';
 
-var index = require('./index-DBbl8tEq.js');
+var index = require('./index-Bo9_lDIt.js');
 var common = require('./common-DAAt5YQ7.js');
-var i18n = require('./i18n-DL7vJXNn.js');
+var i18n = require('./i18n-BVrSOH9l.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
-var Alert = require('./Alert-CVPzTxE7.js');
+var Alert = require('./Alert-sCyOqN4Y.js');
 var events = require('./events-DN9qldnr.js');
-require('./i18n-CgUN6lev.js');
+require('./i18n-D1iTbPTC.js');
 require('./tslib.es6-Cm0ytgPY.js');
 require('./clsx-Bm_HQUnh.js');
-require('./bem-registry-D9uDM1GJ.js');
-require('./component-C1vBQDN-.js');
-require('./Heading-Cswcjs5-.js');
+require('./bem-registry-bkUwdl0m.js');
+require('./component-D25hbRHL.js');
+require('./Heading-B6Xi_fyv.js');
 
 const validateErrorList = (component, value) => {
     common.watchValidator(component, 'errorList', (value) => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined, new Set(['string', 'function']), value);
 };
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1780914078349\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1780914078349#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1780914078349\") format(\"woff2\"), url(\"kolicons.woff?t=1780914078349\") format(\"woff\"), url(\"kolicons.ttf?t=1780914078349\") format(\"truetype\"), url(\"kolicons.svg?t=1780914078349#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+const defaultStyleCss = "@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1782311579243\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1782311579243#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1782311579243\") format(\"woff2\"), url(\"kolicons.woff?t=1782311579243\") format(\"woff\"), url(\"kolicons.ttf?t=1782311579243\") format(\"truetype\"), url(\"kolicons.svg?t=1782311579243#kolicons\") format(\"svg\"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=\" kolicon-\"] {\n    font-family: \"kolicons\";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: \"\\ea01\";\n  }\n  .kolicon-alert-info::before {\n    content: \"\\ea02\";\n  }\n  .kolicon-alert-success::before {\n    content: \"\\ea03\";\n  }\n  .kolicon-alert-warning::before {\n    content: \"\\ea04\";\n  }\n  .kolicon-check::before {\n    content: \"\\ea05\";\n  }\n  .kolicon-chevron-double-left::before {\n    content: \"\\ea06\";\n  }\n  .kolicon-chevron-double-right::before {\n    content: \"\\ea07\";\n  }\n  .kolicon-chevron-down::before {\n    content: \"\\ea08\";\n  }\n  .kolicon-chevron-left::before {\n    content: \"\\ea09\";\n  }\n  .kolicon-chevron-right::before {\n    content: \"\\ea0a\";\n  }\n  .kolicon-chevron-up::before {\n    content: \"\\ea0b\";\n  }\n  .kolicon-cogwheel::before {\n    content: \"\\ea0c\";\n  }\n  .kolicon-cross::before {\n    content: \"\\ea0d\";\n  }\n  .kolicon-eye-closed::before {\n    content: \"\\ea0e\";\n  }\n  .kolicon-eye::before {\n    content: \"\\ea0f\";\n  }\n  .kolicon-house::before {\n    content: \"\\ea10\";\n  }\n  .kolicon-kolibri::before {\n    content: \"\\ea11\";\n  }\n  .kolicon-link-external::before {\n    content: \"\\ea12\";\n  }\n  .kolicon-link::before {\n    content: \"\\ea13\";\n  }\n  .kolicon-minus::before {\n    content: \"\\ea14\";\n  }\n  .kolicon-plus::before {\n    content: \"\\ea15\";\n  }\n  .kolicon-settings::before {\n    content: \"\\ea16\";\n  }\n  .kolicon-sort-asc::before {\n    content: \"\\ea17\";\n  }\n  .kolicon-sort-desc::before {\n    content: \"\\ea18\";\n  }\n  .kolicon-sort-neutral::before {\n    content: \"\\ea19\";\n  }\n  .kolicon-up::before {\n    content: \"\\ea1a\";\n  }\n  .kolicon-version::before {\n    content: \"\\ea1b\";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\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  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
 const KolForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.scrollOptionsFallback = {
+            behavior: 'smooth',
+            block: 'nearest',
+        };
         this.translateErrorListMessage = i18n.translate('kol-error-list-message');
         this.translateErrorList = i18n.translate('kol-error-list');
         this.translateFormDescription = i18n.translate('kol-form-description');
@@ -48,11 +52,10 @@ const KolForm = class {
                 events.dispatchDomEvent(this.host, events.KolEvent.reset);
             }
         };
-        this.handleLinkClick = (selector) => {
+        this.handleLinkClick = (selector, options) => {
             const targetElement = document.querySelector(selector);
             if (targetElement && typeof targetElement.focus === 'function') {
-                targetElement.scrollIntoView({ behavior: 'smooth' });
-                targetElement.focus();
+                targetElement.focus(options ? options : this.scrollOptionsFallback);
             }
         };
         this.setBlockElement = (el) => (this.errorListBlock = el);
@@ -61,28 +64,23 @@ const KolForm = class {
         this.state = {};
     }
     renderErrorList(errorList) {
-        return (index.h(Alert.KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, index.h("nav", { "aria-label": this.translateErrorList }, index.h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index$1) => (index.h("li", { key: index$1 }, index.h(componentNames.KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index$1 === 0 ? this.setFirstLinkElement : undefined }))))))));
+        return (index.h(Alert.KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, index.h("nav", { "aria-label": this.translateErrorList }, index.h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index$1) => (index.h("li", { key: index$1 }, index.h(componentNames.KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector), error.options) : error.selector }, ref: index$1 === 0 ? this.setFirstLinkElement : undefined }))))))));
     }
     renderFormElement() {
         return (index.h("form", { class: "kol-form", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (index.h("p", null, index.h("div", { class: "kol-form__mandatory-fields-hint" }, this.translateFormDescription))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (index.h("p", null, index.h("div", { class: "kol-form__mandatory-fields-hint" }, this.state._requiredText))) : null, index.h("slot", null)));
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (index.h(index.Host, { key: 'd002ea1e6be732b787b8e9823fb7812dd43abbc7' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (index.h(index.Host, { key: 'f894eb6482f6c8ea9542ff608eb8281449a6f424' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
-    scrollToErrorList() {
-        var _a;
-        (_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-        });
+    scrollToErrorList(options) {
         setTimeout(() => {
             var _a, _b;
-            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus(options ? options : this.scrollOptionsFallback);
         }, 250);
     }
-    async focusErrorList() {
-        this.scrollToErrorList();
+    async focusErrorList(options) {
+        this.scrollToErrorList(options);
         return Promise.resolve();
     }
     validateOn(value) {

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

@@ -1 +1 @@
-{"version":3,"file":"kol-form.entry.cjs.js","sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/link.mixin' as *;\n@use '../@shared/alert.mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n\t@include kol-alert;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"names":["watchValidator","translate","dispatchDomEvent","KolEvent","h","KolAlertFc","index","KolLinkWcTag","Host","watchBoolean","watchString"],"mappings":"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"}
+{"version":3,"file":"kol-form.entry.cjs.js","sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { KolFocusOptions } from '../interfaces';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n\toptions?: KolFocusOptions;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n@use '../@shared/link.mixin' as *;\n@use '../@shared/alert.mixin' as *;\n\n@layer kol-component {\n\t@include kol-link-styles('kol-link');\n\t@include kol-alert;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KolFocusOptions, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tscrollOptionsFallback: KolFocusOptions = {\n\t\tbehavior: 'smooth',\n\t\tblock: 'nearest',\n\t};\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string, options?: KolFocusOptions) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.focus(options ? options : this.scrollOptionsFallback);\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector), error.options) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(options?: KolFocusOptions): void {\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus(options ? options : this.scrollOptionsFallback);\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(options?: KolFocusOptions): Promise<void> {\n\t\tthis.scrollToErrorList(options);\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"names":["watchValidator","translate","dispatchDomEvent","KolEvent","h","KolAlertFc","index","KolLinkWcTag","Host","watchBoolean","watchString"],"mappings":"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"}