npm - @public-ui/components - Versions diffs - 4.3.0-rc.4 → 4.3.0-rc.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1284) hide show

package/dist/collection/components/combobox/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -489,7 +490,6 @@
   }
   .kol-input-container__adornment .kol-icon {
     display: grid;
-    min-height: var(--a11y-min-size);
     place-items: center;
   }
   .kol-input {
@@ -519,6 +519,7 @@
   }
   .kol-combobox__delete .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/details/shadow.js CHANGED Viewed

@@ -58,7 +58,7 @@ export class KolDetails {
                 animationClass: `${rootClass}__wrapper-animation`,
             },
         };
-        return (h(KolCollapsibleFc, Object.assign({ key: 'ef8a48734ffed34c090994e6139e088f2018746d' }, props), h("slot", { key: 'f83bdcdf3b1ed258741428d6ae6b25c1d3f7120e' })));
+        return (h(KolCollapsibleFc, Object.assign({ key: '73b9635276faea75c483aa6fa5f8a8453fc8dea3' }, props), h("slot", { key: '456cedf9e4ad010e7e1e8bdaef51a2574e2b550f' })));
     }
     validateDisabled(value) {
         validateDisabled(this, value);

package/dist/collection/components/details/style.css CHANGED Viewed

@@ -269,8 +269,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -445,6 +445,7 @@
   }
   .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/dialog/component.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { validateModalVariant } from "../../schema/props/variant/modal";
 import clsx from "../../utils/clsx";
 import { createUniqueId } from "../../utils/dev.utils";
 import { dispatchDomEvent, KolEvent } from "../../utils/events";
+import { lockScroll, unlockScroll } from "../../utils/scroll-lock";
 import { handleCancelOverlay } from "../../utils/tooltip-open-tracking";
 import { watchHeadingLevel } from "../heading/validation";
 export class KolDialogWc {
@@ -37,12 +38,14 @@ export class KolDialogWc {
     }
     disconnectedCallback() {
         void this.close();
+        unlockScroll(this);
     }
     handleNativeCloseEvent(event) {
         var _a;
         if (event.target !== this.refDialog) {
             return;
         }
+        unlockScroll(this);
         if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClose) === 'function') {
             this.state._on.onClose();
         }
@@ -58,6 +61,9 @@ export class KolDialogWc {
         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) {
+                lockScroll(this);
+            }
         }
         else {
             (_e = (_d = this.refDialog) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
@@ -77,7 +83,7 @@ export class KolDialogWc {
         return this.close();
     }
     render() {
-        return (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('kol-dialog', 'kol-modal', {
+        return (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('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',
@@ -86,7 +92,7 @@ export class KolDialogWc {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            } }, this.state._variant === 'blank' && h("slot", { key: '850a1ade034d6444cf1f665e788c140a7b0c90b8' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: 'd4ee4734987ccde37930a628b11a6ddf540143bd', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: 'cdecd18053b687089733f88d6b6314c64d27d206' })))));
+            } }, this.state._variant === 'blank' && h("slot", { key: '28072f7d98f0d8eb8e5ad0905d36c428918132bc' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: '09ff7490f73fec88ecf3df489ce18bf3932dcaa6', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: '232599ca2f9f0d76424a5e476600a2d622ce5610' })))));
     }
     validateLabel(value) {
         validateLabel(this, value, {

package/dist/collection/components/dialog/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/dialog/component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/dialog/component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/dialog/shadow.js CHANGED Viewed

@@ -31,7 +31,7 @@ export class KolDialog {
         return this.close();
     }
     render() {
-        return (h(KolDialogWcTag, { key: '150e1d8672c53f3398d974bdb49d82386ccc45b5', ref: this.catchRef, _label: this._label, _level: this._level, _on: this._on, _variant: this._variant, _width: this._width }, h("slot", { key: 'aee06f0dc639103bf837b36be0c249640c453c3c' })));
+        return (h(KolDialogWcTag, { key: 'a17abd1f58ac28397c5645822518998209c455e9', ref: this.catchRef, _label: this._label, _level: this._level, _on: this._on, _variant: this._variant, _width: this._width }, h("slot", { key: 'bc9895ef49e81444df9ce3d2634ae950bfc0f115' })));
     }
     static get is() { return "kol-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dialog/style.css CHANGED Viewed

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -390,6 +390,7 @@
   }
   .kol-card .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -427,6 +428,8 @@
     min-height: var(--a11y-min-size);
     padding: 0;
     border: 0;
+    /* Prevent scroll chaining from scrollable dialog content to the page. */
+    overscroll-behavior: contain;
   }
   .kol-dialog__close-button,
   .kol-modal__close-button {

package/dist/collection/components/drawer/shadow.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { setState, validateAlign, validateHasCloser, validateLabel, validateOpen
 import clsx from "../../utils/clsx";
 import { createUniqueId } from "../../utils/dev.utils";
 import { dispatchDomEvent, KolEvent } from "../../utils/events";
+import { lockScroll, unlockScroll } from "../../utils/scroll-lock";
 import { handleCancelOverlay } from "../../utils/tooltip-open-tracking";
 import { watchHeadingLevel } from "../heading/validation";
 export class KolDrawer {
@@ -41,6 +42,7 @@ export class KolDrawer {
             }
         };
         this.handleClose = () => {
+            unlockScroll(this);
             void (async () => {
                 await this.close();
                 this.handleCloseDialog();
@@ -63,6 +65,9 @@ export class KolDrawer {
         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) {
+                lockScroll(this);
+            }
         }
         else {
             (_e = (_d = this.dialogElement) === null || _d === void 0 ? void 0 : _d.show) === null || _e === void 0 ? void 0 : _e.call(_d);
@@ -97,7 +102,7 @@ export class KolDrawer {
             }), _hasCloser: this.state._hasCloser, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("div", { class: "kol-drawer__content" }, h("slot", null))));
     }
     render() {
-        return (h(Host, { key: '14aa4c6b978a89943fe8d83901ede517d8ff6032', class: "kol-drawer" }, 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 (h(Host, { key: 'fce90ab944d3f6a38b2e1e309237fa59c7a82d97', class: "kol-drawer" }, 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) {
         validateLabel(this, value, {
@@ -162,6 +167,7 @@ export class KolDrawer {
         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);
+        unlockScroll(this);
     }
     componentWillLoad() {
         this.validateAlign(this._align);

package/dist/collection/components/drawer/shadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/drawer/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/drawer/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/drawer/style.css CHANGED Viewed

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -390,6 +390,7 @@
   }
   .kol-card .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -425,10 +426,13 @@
   .kol-drawer__dialog {
     padding: 0;
     border: none;
+    /* Prevent scroll chaining from scrollable drawer content to the page. */
+    overscroll-behavior: contain;
   }
   .kol-drawer__wrapper {
     position: fixed;
     overflow: auto;
+    overscroll-behavior: contain;
   }
   .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {
     top: 0;
@@ -463,5 +467,6 @@
   }
   .kol-drawer__dialog .kol-card__content {
     overflow-y: auto;
+    overscroll-behavior: contain;
   }
 }

package/dist/collection/components/form/shadow.js CHANGED Viewed

@@ -55,7 +55,7 @@ export class KolForm {
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (h(Host, { key: 'f894eb6482f6c8ea9542ff608eb8281449a6f424' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (h(Host, { key: 'ad626b181c4deee9845e65b351e5cdb6aa2c54f9' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
     scrollToErrorList(options) {
         setTimeout(() => {

package/dist/collection/components/form/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -425,6 +425,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;

package/dist/collection/components/heading/component.js CHANGED Viewed

@@ -27,7 +27,7 @@ export class KolHeading {
         });
     }
     render() {
-        return (h(Host, { key: '5d87ccb29dc05fdbd165bf482d18e80fbaa62b7d' }, h(HeadingFC, { key: '3d4d078165c93bc620c850644b4fcced6e4390ca', label: this.ctrl.getRenderProp('label'), level: this.ctrl.getRenderProp('level'), secondaryHeadline: this.ctrl.getRenderProp('secondaryHeadline') })));
+        return (h(Host, { key: '5879d577d6dfb5d0716b5f201a9b9a094f4b36e9' }, h(HeadingFC, { key: '85896384df9a2a200e7a196ec3d52a5282da0639', label: this.ctrl.getRenderProp('label'), level: this.ctrl.getRenderProp('level'), secondaryHeadline: this.ctrl.getRenderProp('secondaryHeadline') })));
     }
     static get is() { return "kol-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/component.js CHANGED Viewed

@@ -22,7 +22,7 @@ export class KolIcon {
         });
     }
     render() {
-        return (h(Host, { key: 'af39984255995f183c5dce6bc5a6433b84940131' }, h(IconFC, { key: '1a03c1c01121ec2cc03ade18bc299a00bee5f0cd', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
+        return (h(Host, { key: '0127f2d35f4164f440a30fec825e10158fc833a5' }, h(IconFC, { key: '6fa23897706337c29bc4ef2551904436b2a65785', icons: this.ctrl.getRenderProp('icons'), label: this.ctrl.getRenderProp('label') })));
     }
     static get is() { return "kol-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/style.css CHANGED Viewed

@@ -1,7 +1,7 @@
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

package/dist/collection/components/image/component.js CHANGED Viewed

@@ -49,7 +49,7 @@ export class KolImage {
         });
     }
     render() {
-        return (h(Host, { key: '3b39257fa87e6d0961ded3dba73922ebf8834626' }, h(ImageFC, { key: '648ddf0d233b1b0896c5cdf43ee8ba50f95b2ea8', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset'), handleError: this.handleError, handleLoad: this.handleLoad })));
+        return (h(Host, { key: '94e7aed9e787f996ddb733a9e398018ae618d948' }, h(ImageFC, { key: 'dd81b84b4048db6d9367efcb48ce5ca0f00afb5b', alt: this.ctrl.getRenderProp('alt'), loading: this.ctrl.getRenderProp('loading'), sizes: this.ctrl.getRenderProp('sizes'), src: this.ctrl.getRenderProp('src'), srcset: this.ctrl.getRenderProp('srcset'), handleError: this.handleError, handleLoad: this.handleLoad })));
     }
     static get is() { return "kol-image"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-checkbox/shadow.js CHANGED Viewed

@@ -82,7 +82,7 @@ export class KolInputCheckbox {
         return this.state._icons.unchecked;
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '18b0444342bea59b5816806b7a8d92e94e3a8d62' }, this.getFormFieldProps(), { renderNoLabel: true }), h(KolFieldControlStateWrapperFc, Object.assign({ key: '10d2b816d41571778d6e053f5494505a014a3130' }, this.getFieldControlProps(), { renderNoHint: true }), h(KolCheckboxStateWrapperFc, Object.assign({ key: '331f086f4bbf5d136857d117d98215e3e09c2fa1' }, this.getInputProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '0ea0966fe542da9d5fd29c6a440ebea8ccb25956' }, this.getFormFieldProps(), { renderNoLabel: true }), h(KolFieldControlStateWrapperFc, Object.assign({ key: 'a0fa6137a59dcc2ee59a09e965c4cb84fd7a12d7' }, this.getFieldControlProps(), { renderNoHint: true }), h(KolCheckboxStateWrapperFc, Object.assign({ key: 'f10b121933fdf4f3aebb7767852a49e7157c2a6e' }, this.getInputProps())))));
     }
     constructor() {
         this.ctaRef = createCtaRef();

package/dist/collection/components/input-checkbox/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -467,6 +468,7 @@
     grid-area: label;
   }
   .kol-field-control__label--visually-hidden {
+    display: none;
     height: 0;
     margin: 0;
     padding: 0;

package/dist/collection/components/input-color/shadow.js CHANGED Viewed

@@ -37,7 +37,7 @@ export class KolInputColor {
         return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, this.state), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '1820310cf40b91e5a8e0c6ef843a5df1b2f2f491' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '4f2ebd57878fe5754b6ec99a08c749ba36f97bb5', state: this.state, class: "kol-input-color__inputs-wrapper" }, h("div", { key: '6769fd4c2e758a5fc27736abbfb5dc8f2a18d368', class: "kol-input-color__inputs-wrapper" }, h(KolInputStateWrapperFc, Object.assign({ key: '4625bea3279a0c4e35da9080b92e9ef2077f69bf', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), h(KolInputStateWrapperFc, Object.assign({ key: '60d489cdd2c0bbfb29a56a25ecea2dc7d5fb3bcf', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'd501916efbd6a66c5462aa3c2194ca6f2b61e1e8' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '99f0cbea5d9d8412aa7fa69d6185946c9e997858', state: this.state, class: "kol-input-color__inputs-wrapper" }, h("div", { key: 'dd3ac029b3ccd5996568303663dd54a10a595f13', class: "kol-input-color__inputs-wrapper" }, h(KolInputStateWrapperFc, Object.assign({ key: '46ac0a3cca6da0814c1c24a28c60e76ac9fbc280', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), h(KolInputStateWrapperFc, Object.assign({ key: '7fa5c7a7069c2650c600a7aef82dd704a31383de', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -488,7 +488,7 @@ export class KolInputColor {
                 "mutable": false,
                 "complexType": {
                     "original": "Stringified<InternalButtonProps>",
-                    "resolved": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }",
+                    "resolved": "string | undefined | { _label: string; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: VariantClassNamePropType | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }",
                     "references": {
                         "Stringified": {
                             "location": "import",
@@ -639,7 +639,7 @@ export class KolInputColor {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

package/dist/collection/components/input-color/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -451,7 +452,6 @@
   }
   .kol-input-container__adornment .kol-icon {
     display: grid;
-    min-height: var(--a11y-min-size);
     place-items: center;
   }
   .kol-input {

package/dist/collection/components/input-date/shadow.js CHANGED Viewed

@@ -57,7 +57,7 @@ export class KolInputDate {
         return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'bdb5b2be3c97955e8036ff0eb2da5929b5fe7340' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: 'ea6eaa82809610fe695a0fa769ccafc05823dbb6', state: this.state }, h(KolInputStateWrapperFc, Object.assign({ key: 'd3df3c7f6806029661795c6e60052b6c077f0f0c' }, this.getInputProps())))));
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '560c6fc7b440b11761c0ce5fa6df733e76d37aed' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '7f209f7f09df80bea881782d755f53d34e4c7127', state: this.state }, h(KolInputStateWrapperFc, Object.assign({ key: '5396171b4c7438586a2f3e171e04ce0e820e7f07' }, this.getInputProps())))));
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -649,7 +649,7 @@ export class KolInputDate {
                 "mutable": false,
                 "complexType": {
                     "original": "Stringified<InternalButtonProps>",
-                    "resolved": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }",
+                    "resolved": "string | undefined | { _label: string; } & { _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: \"button\" | \"reset\" | \"submit\" | undefined; _variant?: VariantClassNamePropType | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }",
                     "references": {
                         "Stringified": {
                             "location": "import",
@@ -861,7 +861,7 @@ export class KolInputDate {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

package/dist/collection/components/input-date/style.css CHANGED Viewed

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783501930981"); /* IE9*/
-  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- */
+  src: url("kolicons.eot?t=1785404144300"); /* IE9*/
+  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -388,6 +388,7 @@
   }
   .kol-alert .kol-button {
     display: flex;
+    height: 100%;
     min-height: var(--a11y-min-size);
     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
     text-decoration-line: none;
@@ -451,7 +452,6 @@
   }
   .kol-input-container__adornment .kol-icon {
     display: grid;
-    min-height: var(--a11y-min-size);
     place-items: center;
   }
   .kol-input {