@public-ui/components 4.3.0-rc.4 → 4.3.0-rc.5

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

@@ -3,13 +3,14 @@
  */
 'use strict';
 
-var index = require('./index-BSJggleu.js');
+var index = require('./index-DhVkdQYo.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 var common = require('./common-Bwi0J8Cv.js');
 var label = require('./label-Dx1QO2M-.js');
 var clsx = require('./clsx-Bm_HQUnh.js');
-var dev_utils = require('./dev.utils-Dyp3JZWV.js');
+var dev_utils = require('./dev.utils-BvCL1ZhC.js');
 var events = require('./events-DN9qldnr.js');
+var scrollLock = require('./scroll-lock-BCh6v3Nm.js');
 var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
 var validation = require('./validation-BWHIPSSp.js');
 require('./level-BytieNof.js');
@@ -54,12 +55,14 @@ const KolDialogWc = class {
     }
     disconnectedCallback() {
         void this.close();
+        scrollLock.unlockScroll(this);
     }
     handleNativeCloseEvent(event) {
         var _a;
         if (event.target !== this.refDialog) {
             return;
         }
+        scrollLock.unlockScroll(this);
         if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === 'function') {
             this.state._on.onClose();
         }
@@ -75,6 +78,9 @@ const KolDialogWc = class {
         this.isModal = modal;
         if (modal) {
             (_c = (_b = this.refDialog) === null || _b === void 0 ? void 0 : _b.showModal) === null || _c === void 0 ? void 0 : _c.call(_b);
+            if (this.refDialog) {
+                scrollLock.lockScroll(this);
+            }
         }
         else {
             (_e = (_d = this.refDialog) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
@@ -94,7 +100,7 @@ const KolDialogWc = class {
         return this.close();
     }
     render() {
-        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', {
+        return (index.h("dialog", { key: '49c6404f7d7f623b96b6b5de4cb7d91bbc4d594e', "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 +109,7 @@ const KolDialogWc = class {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            } }, 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' })))));
+            } }, this.state._variant === 'blank' && index.h("slot", { key: '28072f7d98f0d8eb8e5ad0905d36c428918132bc' }), this.state._variant === 'card' && (index.h(componentNames.KolCardWcTag, { key: '09ff7490f73fec88ecf3df489ce18bf3932dcaa6', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, index.h("slot", { key: '232599ca2f9f0d76424a5e476600a2d622ce5610' })))));
     }
     validateLabel(value) {
         label.validateLabel(this, value, {

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

@@ -1 +1 @@
-{"version":3,"file":"kol-dialog-wc.entry.cjs.js","sources":["src/schema/props/width.ts","src/schema/props/variant/dialog.ts","src/components/dialog/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst DialogVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type DialogVariantPropType = (typeof DialogVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Dialog.\n */\nexport type PropDialogVariant = {\n\tvariant: DialogVariantPropType;\n};\n\n/* validator */\nexport const validateDialogVariant = (component: Generic.Element.Component, value?: DialogVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value),\n\t\tnew Set(DialogVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { DialogAPI, DialogStates, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\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 * https://en.wikipedia.org/wiki/Modal_window\n *\n * @internal\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog-wc',\n\tshadow: false,\n})\nexport class KolDialogWc implements DialogAPI {\n\t@Element() private readonly host?: HTMLKolDialogWcElement;\n\tprivate refDialog?: HTMLDialogElement;\n\tprivate readonly cardHeadingId = createUniqueId('dialog-heading');\n\n\t@State() private isModal: boolean = true;\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.close();\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 handleNativeCloseEvent(event: Event) {\n\t\t// Ignore close events that bubble up from child components (e.g. KolAlert).\n\t\t// Only react when the dialog element itself is the event origin.\n\t\tif (event.target !== this.refDialog) {\n\t\t\treturn;\n\t\t}\n\t\tif (typeof this.state._on?.onClose === 'function') {\n\t\t\tthis.state._on.onClose();\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\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.refDialog?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tif (modal) {\n\t\t\tthis.refDialog?.showModal?.();\n\t\t} else {\n\t\t\tthis.refDialog?.show?.();\n\t\t}\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.show(true);\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\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 * Closes the dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\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<dialog\n\t\t\t\taria-label={this.state._variant === 'blank' ? this.state._label : undefined}\n\t\t\t\taria-labelledby={this.state._variant === 'card' ? this.cardHeadingId : undefined}\n\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\tclass={clsx('kol-dialog', 'kol-modal', {\n\t\t\t\t\t'kol-dialog__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-dialog__card': this.state._variant === 'card',\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonCancel={this.handleCancelEvent}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _hasCloser _headingId={this.cardHeadingId} _label={this.state._label} _level={this._level} _on={this._cardOn}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\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\t@State() public state: DialogStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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(value?: KoliBriDialogEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriDialogEventCallbacks = {};\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\tsetState<KoliBriDialogEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["watchString","watchValidator","createUniqueId","handleCancelOverlay","dispatchDomEvent","KolEvent","h","clsx","KolCardWcTag","validateLabel","watchHeadingLevel","setState","validateModalVariant"],"mappings":"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"}
+{"version":3,"file":"kol-dialog-wc.entry.cjs.js","sources":["src/schema/props/width.ts","src/schema/props/variant/dialog.ts","src/components/dialog/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst DialogVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type DialogVariantPropType = (typeof DialogVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Dialog.\n */\nexport type PropDialogVariant = {\n\tvariant: DialogVariantPropType;\n};\n\n/* validator */\nexport const validateDialogVariant = (component: Generic.Element.Component, value?: DialogVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value),\n\t\tnew Set(DialogVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { DialogAPI, DialogStates, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { lockScroll, unlockScroll } from '../../utils/scroll-lock';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @internal\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog-wc',\n\tshadow: false,\n})\nexport class KolDialogWc implements DialogAPI {\n\t@Element() private readonly host?: HTMLKolDialogWcElement;\n\tprivate refDialog?: HTMLDialogElement;\n\tprivate readonly cardHeadingId = createUniqueId('dialog-heading');\n\n\t@State() private isModal: boolean = true;\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.close();\n\t\tunlockScroll(this);\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 handleNativeCloseEvent(event: Event) {\n\t\t// Ignore close events that bubble up from child components (e.g. KolAlert).\n\t\t// Only react when the dialog element itself is the event origin.\n\t\tif (event.target !== this.refDialog) {\n\t\t\treturn;\n\t\t}\n\t\tunlockScroll(this);\n\t\tif (typeof this.state._on?.onClose === 'function') {\n\t\t\tthis.state._on.onClose();\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\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.refDialog?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tif (modal) {\n\t\t\tthis.refDialog?.showModal?.();\n\t\t\tif (this.refDialog) {\n\t\t\t\tlockScroll(this);\n\t\t\t}\n\t\t} else {\n\t\t\tthis.refDialog?.show?.();\n\t\t}\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.show(true);\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\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 * Closes the dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\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<dialog\n\t\t\t\taria-label={this.state._variant === 'blank' ? this.state._label : undefined}\n\t\t\t\taria-labelledby={this.state._variant === 'card' ? this.cardHeadingId : undefined}\n\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\tclass={clsx('kol-dialog', 'kol-modal', {\n\t\t\t\t\t'kol-dialog__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-dialog__card': this.state._variant === 'card',\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonCancel={this.handleCancelEvent}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _hasCloser _headingId={this.cardHeadingId} _label={this.state._label} _level={this._level} _on={this._cardOn}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\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\t@State() public state: DialogStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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(value?: KoliBriDialogEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriDialogEventCallbacks = {};\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\tsetState<KoliBriDialogEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["watchString","watchValidator","createUniqueId","handleCancelOverlay","dispatchDomEvent","KolEvent","unlockScroll","lockScroll","h","clsx","KolCardWcTag","validateLabel","watchHeadingLevel","setState","validateModalVariant"],"mappings":"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"}

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

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-BSJggleu.js');
+var index = require('./index-DhVkdQYo.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 require('./common-Bwi0J8Cv.js');
 
-const defaultStyleCss = "@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     *\n     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: white;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: \"kolicons\";\n  src: url(\"kolicons.eot?t=1783501930981\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1783501930981#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1783501930981\") format(\"woff2\"), url(\"kolicons.woff?t=1783501930981\") format(\"woff\"), url(\"kolicons.ttf?t=1783501930981\") format(\"truetype\"), url(\"kolicons.svg?t=1783501930981#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=1784281062679\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1784281062679#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1784281062679\") format(\"woff2\"), url(\"kolicons.woff?t=1784281062679\") format(\"woff\"), url(\"kolicons.ttf?t=1784281062679\") format(\"truetype\"), url(\"kolicons.svg?t=1784281062679#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    height: 100%;\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    /* Prevent scroll chaining from scrollable dialog content to the page. */\n    overscroll-behavior: contain;\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: '150e1d8672c53f3398d974bdb49d82386ccc45b5', ref: this.catchRef, _label: this._label, _level: this._level, _on: this._on, _variant: this._variant, _width: this._width }, index.h("slot", { key: 'aee06f0dc639103bf837b36be0c249640c453c3c' })));
+        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' })));
     }
 };
 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,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;;;;;;;;;"}
+{"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\t/* Prevent scroll chaining from scrollable dialog content to the page. */\n\t\toverscroll-behavior: contain;\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,87WAA87W;;MCgBz8W,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-BSJggleu.js');
+var index = require('./index-DhVkdQYo.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
 var common = require('./common-Bwi0J8Cv.js');
 var align = require('./align-0TiDiqlj.js');
@@ -11,8 +11,9 @@ var hasCloser = require('./has-closer-CxDnGxl6.js');
 var label = require('./label-Dx1QO2M-.js');
 var open = require('./open-DV5ESeHO.js');
 var clsx = require('./clsx-Bm_HQUnh.js');
-var dev_utils = require('./dev.utils-Dyp3JZWV.js');
+var dev_utils = require('./dev.utils-BvCL1ZhC.js');
 var events = require('./events-DN9qldnr.js');
+var scrollLock = require('./scroll-lock-BCh6v3Nm.js');
 var tooltipOpenTracking = require('./tooltip-open-tracking-Ba0udJRU.js');
 var validation = require('./validation-BWHIPSSp.js');
 require('./level-BytieNof.js');
@@ -20,7 +21,7 @@ require('./normalizers-g6OpZE8-.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     * 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=1783501930981\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1783501930981#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1783501930981\") format(\"woff2\"), url(\"kolicons.woff?t=1783501930981\") format(\"woff\"), url(\"kolicons.ttf?t=1783501930981\") format(\"truetype\"), url(\"kolicons.svg?t=1783501930981#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=1784281062679\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1784281062679#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1784281062679\") format(\"woff2\"), url(\"kolicons.woff?t=1784281062679\") format(\"woff\"), url(\"kolicons.ttf?t=1784281062679\") format(\"truetype\"), url(\"kolicons.svg?t=1784281062679#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    height: 100%;\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    /* Prevent scroll chaining from scrollable drawer content to the page. */\n    overscroll-behavior: contain;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n    overscroll-behavior: contain;\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    overscroll-behavior: contain;\n  }\n}";
 
 const KolDrawer = class {
     constructor(hostRef) {
@@ -55,6 +56,7 @@ const KolDrawer = class {
             }
         };
         this.handleClose = () => {
+            scrollLock.unlockScroll(this);
             void (async () => {
                 await this.close();
                 this.handleCloseDialog();
@@ -77,6 +79,9 @@ const KolDrawer = class {
         this.state = Object.assign(Object.assign({}, this.state), { _open: true });
         if (modal) {
             (_c = (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.showModal) === null || _c === void 0 ? void 0 : _c.call(_b);
+            if (this.dialogElement) {
+                scrollLock.lockScroll(this);
+            }
         }
         else {
             (_e = (_d = this.dialogElement) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
@@ -111,7 +116,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: '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())));
+        return (index.h(index.Host, { key: 'fce90ab944d3f6a38b2e1e309237fa59c7a82d97', class: "kol-drawer" }, index.h("dialog", { key: '065f8d9bc2403e85df8de15bafc21e2a62a64ed1', "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, {
@@ -176,6 +181,7 @@ const KolDrawer = class {
         var _a, _b;
         (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('animationend', this.handleAnimationEnd);
         (_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleClose);
+        scrollLock.unlockScroll(this);
     }
     componentWillLoad() {
         this.validateAlign(this._align);

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\t/* Prevent scroll chaining from scrollable drawer content to the page. */\n\t\t\toverscroll-behavior: contain;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\t\t\toverscroll-behavior: contain;\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\toverscroll-behavior: contain;\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 { lockScroll, unlockScroll } from '../../utils/scroll-lock';\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\tif (this.dialogElement) {\n\t\t\t\tlockScroll(this);\n\t\t\t}\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\tunlockScroll(this);\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\tunlockScroll(this);\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","unlockScroll","lockScroll","h","KolCardWcTag","clsx","Host","validateLabel","validateAlign","validateHasCloser","watchHeadingLevel","validateOpen","setState"],"mappings":"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"}

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

@@ -3,24 +3,24 @@
  */
 'use strict';
 
-var index = require('./index-BSJggleu.js');
+var index = require('./index-DhVkdQYo.js');
 var common = require('./common-Bwi0J8Cv.js');
-var i18n = require('./i18n-tEETJDrM.js');
+var i18n = require('./i18n-Cp31h8Qy.js');
 var componentNames = require('./component-names-5KS_pYRF.js');
-var Alert = require('./Alert-C3sKH6fH.js');
+var Alert = require('./Alert-Bc3nD9fM.js');
 var events = require('./events-DN9qldnr.js');
-require('./i18n-D1iTbPTC.js');
+require('./i18n-c5BjxWQc.js');
 require('./tslib.es6-Cm0ytgPY.js');
 require('./clsx-Bm_HQUnh.js');
 require('./bem-registry-Dcmcb0tm.js');
-require('./component-BEMjIhx2.js');
-require('./Heading-1C9KPhMM.js');
+require('./component-CsFihTmd.js');
+require('./Heading-C1XTgfdd.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     * 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=1783501930981\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1783501930981#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1783501930981\") format(\"woff2\"), url(\"kolicons.woff?t=1783501930981\") format(\"woff\"), url(\"kolicons.ttf?t=1783501930981\") format(\"truetype\"), url(\"kolicons.svg?t=1783501930981#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=1784281062679\"); /* IE9*/\n  src: url(\"kolicons.eot?t=1784281062679#iefix\") format(\"embedded-opentype\"), url(\"kolicons.woff2?t=1784281062679\") format(\"woff2\"), url(\"kolicons.woff?t=1784281062679\") format(\"woff\"), url(\"kolicons.ttf?t=1784281062679\") format(\"truetype\"), url(\"kolicons.svg?t=1784281062679#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    height: 100%;\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) {
@@ -71,7 +71,7 @@ const KolForm = class {
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (index.h(index.Host, { key: 'f894eb6482f6c8ea9542ff608eb8281449a6f424' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (index.h(index.Host, { key: 'ad626b181c4deee9845e65b351e5cdb6aa2c54f9' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
     scrollToErrorList(options) {
         setTimeout(() => {