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

package/dist/collection/components/button/shadow.js

@@ -13,7 +13,6 @@ export class KolButton {
         this._inline = false;
         this._tooltipAlign = 'top';
         this._type = 'button';
-        this._variant = 'normal';
     }
     async getValue() {
         return this._value;
@@ -21,7 +20,7 @@ export class KolButton {
     async focus(options) { }
     async click() { }
     render() {
-        return (h(KolButtonWcTag, { key: '41b2536e3e6b54740d680dbb066573cdd2fd55ca', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: 'b057fc01616b75ea83b3a9eb4355f728aa2f7bcc', name: "expert", slot: "expert" })));
+        return (h(KolButtonWcTag, { key: '1d5a15e4e38f1c51b52d377661ad34f0d5b5e5a0', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: '6a429fbfe82675a50cc4e8598a83669bdcd6d608', name: "expert", slot: "expert" })));
     }
     static get is() { return "kol-button"; }
     static get encapsulation() { return "shadow"; }
@@ -497,13 +496,13 @@ export class KolButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ButtonVariantPropType",
-                    "resolved": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
+                    "original": "VariantClassNamePropType",
+                    "resolved": "string | string[] | undefined",
                     "references": {
-                        "ButtonVariantPropType": {
+                        "VariantClassNamePropType": {
                             "location": "import",
                             "path": "../../schema",
-                            "id": "src/schema/index.ts::ButtonVariantPropType"
+                            "id": "src/schema/index.ts::VariantClassNamePropType"
                         }
                     }
                 },
@@ -516,8 +515,7 @@ export class KolButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "_variant",
-                "defaultValue": "'normal'"
+                "attribute": "_variant"
             }
         };
     }

package/dist/collection/components/button/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;QAUtC,aAAQ,GAA2B,QAAQ,CAAC;KAC3D;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons.\n */\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAqB5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,SAAS;IAPtB;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAyFpD,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QAU7B,YAAO,GAAoB,KAAK,CAAC;QAsCjC,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;KAWrD;IAzJO,KAAK,CAAC,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACjB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GD;AA9Ia;IAHZ,aAAa,CAAC,QAAQ,CAAC;sCAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;sCACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons.\n */\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, ClickableElement, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Clicks the primary interactive element inside this component.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_inline={this._inline}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component's interactive element.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.\n\t */\n\t@Prop() public _inline?: InlinePropType = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t *\n\t * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value of the element.\n\t */\n\t@Prop() public _value?: StencilUnknown;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n}\n"]}

package/dist/collection/components/button/style.css

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

@@ -20,7 +20,7 @@ export class KolButtonLink {
     async focus(options) { }
     async click() { }
     render() {
-        return (h(KolButtonWcTag, { key: 'df23fa8f5f67dc5dce1220da351022df66a0258a', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: '08cc099a46b194d65d93998cfb7410147502c988', name: "expert", slot: "expert" })));
+        return (h(KolButtonWcTag, { key: '65eaf3802d0891d38a45bc12b3a889d455bd26fe', ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _on: this._on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: 'e5c692d51c9d33a15d816fde9c87c502752dce60', name: "expert", slot: "expert" })));
     }
     static get is() { return "kol-button-link"; }
     static get encapsulation() { return "shadow"; }
@@ -487,7 +487,7 @@ export class KolButtonLink {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

package/dist/collection/components/button-link/style.css

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

package/dist/collection/components/card/component.js

@@ -33,7 +33,7 @@ export class KolCardWc {
         this.validateOnValue = (value) => typeof value === 'object' && value !== null && typeof value.onClose === 'function';
     }
     render() {
-        return (h(Host, { key: '905724688ad5dfff280a7eeede9fdceb73de3e0c' }, h("article", { key: '0e7e76ab026256aa23be06e344ae4c03f04a4c28', "aria-labelledby": this._headingId, class: "kol-card" }, h(KolHeadingFc, { key: '2a1973bf10c9fb2fe586c6088d423c592900e070', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label), h("div", { key: '1baec62ec367f3f485c600a492a4774ed4d79295', class: "kol-card__content" }, h("slot", { key: 'd76c9377075c7cda65d85c14b5ed06cac4f04a58' })), this.state._hasCloser && (h(KolButtonWcTag, { key: 'df56bebb19cb1c99f48fe66fd6bfa265e779a028', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
+        return (h(Host, { key: '909cc395209bdb2eba2f674f5fe9f4b8750fccef' }, h("article", { key: '8bbd3d853a4ea8bc6f83dedf245414e8d9421461', "aria-labelledby": this._headingId, class: "kol-card" }, h(KolHeadingFc, { key: '2609f6812d8d909de20b00162cb119b32c0d7f23', class: "kol-card__header", id: this._headingId, level: this.state._level }, this.state._label), h("div", { key: 'a953cb61794cf76980111256849685184cc5dcf9', class: "kol-card__content" }, h("slot", { key: '31d86a46cb4e9d9cee62692aeea43f08db236ccb' })), this.state._hasCloser && (h(KolButtonWcTag, { key: '763993312892b16856634e6d0d10de5cb1454629', class: "kol-card__close-button kol-close-button", "data-testid": "card-close-button", _hideLabel: true, _icons: {
                 left: {
                     icon: 'kolicon-cross',
                 },

package/dist/collection/components/card/shadow.js

@@ -9,7 +9,7 @@ export class KolCard {
         this._level = 0;
     }
     render() {
-        return (h(KolCardWcTag, { key: 'b7e95eac842a1cbcfb328656f17596283f17284a', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, h("slot", { key: '7b686b0f83c138ab0d497f9b6a0d7d5927bce63c' })));
+        return (h(KolCardWcTag, { key: 'f62c4259173d32d200f56a4e8b5d94e80d125a7c', _on: this._on, _hasCloser: this._hasCloser, _label: this._label, _level: this._level }, h("slot", { key: '20ba15197879de826bbd47dca19616ec30267f6a' })));
     }
     static get is() { return "kol-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/style.css

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
-  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  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- */
 }
 @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;

package/dist/collection/components/combobox/shadow.js

@@ -143,7 +143,7 @@ export class KolCombobox {
     }
     render() {
         const isDisabled = this.state._disabled === true;
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '0617897b0eb7dab9914467d1a70a18abee705750' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '11db0e080c401390d710d8562bed29fa62013b2f', state: this.state }, h("div", { key: 'd21daa250b70a9a37d4d73c26af069a426e9b89e', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '843a71c0f5760301179a60692e3f83d302d251a7' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: 'a8e6e4337b2a4b08f13ff811c7193e24aba92a51', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '5d29dc592fe2292e261ef170fe75841d25f85aea' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '631741b70ef2a1b8d428a95c0fab4cb58c911cef', state: this.state }, h("div", { key: '9d66ed4035974fd3e377d974301495dd28eb418a', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '8f2c831fec6b647adbb86f8429f19334a17de2ae' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: '5a7b9faa823f8c5f2ef0f18a8a92b5c9587a61fc', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
                 onClick: () => {
                     this.clearSelection();
                 },
@@ -153,7 +153,7 @@ export class KolCombobox {
                 onBlur: () => {
                     this.clearButtonFocused = false;
                 },
-            } })), h("button", { key: 'd2eaaa6e43af3e35fa61813d50ca25e87ccb86cb', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: 'db649c7f98aed2f51775b47b8023b9a5bd0e1167', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: '612551e4511599b7245661e442e64954285c74a5', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
+            } })), h("button", { key: '9c260edf0a6488606a13d4ff9b12d08e0fdb3790', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: '122243913c7f7e1fe7032636901f4863194dfd87', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: 'eee2b35d66c4aea8dbb9d2b6603edb67d8369b5e', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
             this._filteredSuggestions.length > 0 &&
             this._filteredSuggestions.map((option, index) => (h(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
                     if (el)
@@ -909,7 +909,7 @@ export class KolCombobox {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

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

@@ -212,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
-  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  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- */
 }
 @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

@@ -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

@@ -269,8 +269,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
-  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  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- */
 }
 @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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
-  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  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- */
 }
 @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

@@ -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

@@ -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"]}
+{"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

@@ -207,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1783496448056"); /* IE9*/
-  src: url("kolicons.eot?t=1783496448056#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1783496448056") format("woff2"), url("kolicons.woff?t=1783496448056") format("woff"), url("kolicons.ttf?t=1783496448056") format("truetype"), url("kolicons.svg?t=1783496448056#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1784281062679"); /* IE9*/
+  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- */
 }
 @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

@@ -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(() => {