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

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/split-button/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { KolButtonWcTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for\n * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\n *\n * @slot - Allows arbitrary HTML to be inserted into the dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements ClickableElement, FocusableElement, SplitButtonProps /*, SplitButtonAPI*/ {\n\t@Element() protected readonly host?: HTMLKolSplitButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate popoverButtonRef?: HTMLKolPopoverButtonWcElement;\n\n\tprivate readonly setPopoverButtonRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.popoverButtonRef = ref;\n\t};\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\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation();\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.ctaRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolPopoverButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\tref={this.setPopoverButtonRef}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t_label={translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_popoverAlign=\"bottom\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolPopoverButtonWcTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tpublic connectedCallback(): void {\n\t\tthis.state = { ...this.state, _show: false };\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tvoid this.popoverButtonRef?.hidePopover();\n\t\treturn Promise.resolve();\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 the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\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\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/split-button/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tVariantClassNamePropType,\n} from '../../schema';\n\nimport { KolButtonWcTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport clsx from '../../utils/clsx';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for\n * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.\n *\n * @slot - Allows arbitrary HTML to be inserted into the dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements ClickableElement, FocusableElement, SplitButtonProps /*, SplitButtonAPI*/ {\n\t@Element() protected readonly host?: HTMLKolSplitButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate popoverButtonRef?: HTMLKolPopoverButtonWcElement;\n\n\tprivate readonly setPopoverButtonRef = (ref?: HTMLKolPopoverButtonWcElement) => {\n\t\tthis.popoverButtonRef = ref;\n\t};\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\tprivate readonly clickButtonHandler = {\n\t\tonClick: (event: MouseEvent) => {\n\t\t\tevent.stopPropagation();\n\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\tthis._on?.onClick(event, this._value);\n\t\t\t}\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<div class=\"kol-split-button\">\n\t\t\t\t<div class=\"kol-split-button__root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={clsx('kol-split-button__button', {\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tref={this.ctaRef}\n\t\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"kol-split-button__horizontal-line\"></div>\n\t\t\t\t\t<KolPopoverButtonWcTag\n\t\t\t\t\t\tclass=\"kol-split-button__secondary-button\"\n\t\t\t\t\t\tref={this.setPopoverButtonRef}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t_label={translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_popoverAlign=\"bottom\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolPopoverButtonWcTag>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tpublic connectedCallback(): void {\n\t\tthis.state = { ...this.state, _show: false };\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\t@Method()\n\tpublic async closePopup() {\n\t\tvoid this.popoverButtonRef?.hidePopover();\n\t\treturn Promise.resolve();\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 the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\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 = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"]}

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

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

package/dist/collection/components/table-stateful/shadow.js

@@ -430,7 +430,7 @@ export class KolTableStateful {
         const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination('top') : null;
         const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination('bottom') : null;
         const headerCells = this.buildHeaderCells();
-        return (h(Host, { key: 'b20bfc7f61b6e5aaf05c40d61cb3250a1cb61779', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, h(KolTableStatelessWcTag, { key: '186d1b0d90b8516149d1f5939bb6c1460ce34949', externalLabelElements: this.resolvedElements, ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
+        return (h(Host, { key: '90a24351760bff3f69028dff8a3cde65a9648953', class: "kol-table-stateful" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, h(KolTableStatelessWcTag, { key: '4b3f6706a8c37ac9cbc741334d9d424e96c0d789', externalLabelElements: this.resolvedElements, ref: this.catchRef, _data: displayedData, _fixedCols: this._fixedCols, _headerCells: headerCells, _label: this.state._label, _dataFoot: this.state._dataFoot, _on: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },
@@ -766,7 +766,7 @@ export class KolTableStateful {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",

package/dist/collection/components/table-stateful/style.css

@@ -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;
@@ -425,6 +426,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;
@@ -463,18 +465,18 @@
     border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));
     border: 1px solid black;
   }
-  .kol-table-settings__columns-container {
-    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));
-    overflow: auto;
-  }
   .kol-table-settings__columns {
     display: grid;
-    align-items: center;
+    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));
+    overflow: auto;
     grid-auto-rows: min-content;
     grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;
   }
   .kol-table-settings__column {
-    display: contents;
+    display: grid;
+    align-items: center;
+    grid-template-columns: subgrid;
+    grid-column: 1/6;
   }
   .kol-icon {
     color: inherit;
@@ -571,6 +573,7 @@
   }
   .kol-table__cell--actions .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;
@@ -720,6 +723,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;
@@ -783,7 +787,6 @@
   }
   .kol-input-container__adornment .kol-icon {
     display: grid;
-    min-height: var(--a11y-min-size);
     place-items: center;
   }
   .kol-select {
@@ -797,6 +800,9 @@
   .kol-select:not([multiple], [size]) {
     height: 2.75em;
   }
+  .kol-select[multiple][size="1"] {
+    height: 2.75em;
+  }
   .kol-select:focus {
     outline: none;
   }
@@ -808,6 +814,12 @@
     min-height: var(--a11y-min-size);
     align-items: center;
   }
+  .kol-select[multiple][size="1"] option::checkmark {
+    height: 100%;
+  }
+  .kol-select[multiple][size="1"] option:checked::before {
+    display: none;
+  }
   .kol-icon {
     color: inherit;
     display: inline-block;

package/dist/collection/components/table-stateless/component.js

@@ -8,7 +8,7 @@ import { KolButtonWcTag, KolLinkWcTag, KolTableSettingsWcTag } from "../../core/
 import { translate } from "../../i18n";
 import { IconFC } from "../../internal/functional-components/icon/component";
 import { TooltipFC } from "../../internal/functional-components/tooltip/component";
-import { Log, setState, validateFixedCols, validateHasSettingsMenu, validateLabel, validateTableCallbacks, validateTableData, validateTableDataFoot, validateTableHeaderCells, validateTableSelection, validateVariantClassName, } from "../../schema";
+import { classNameFromVariant, Log, setState, validateFixedCols, validateHasSettingsMenu, validateLabel, validateTableCallbacks, validateTableData, validateTableDataFoot, validateTableHeaderCells, validateTableSelection, validateVariantClassName, } from "../../schema";
 import { Callback } from "../../schema/enums";
 import clsx from "../../utils/clsx";
 import { nonce } from "../../utils/dev.utils";
@@ -731,17 +731,17 @@ export class KolTableStatelessWc {
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
         const showInternalCaption = !((_a = this.externalLabelElements) === null || _a === void 0 ? void 0 : _a.length);
-        return (h("div", { key: 'a27c5b854dfe1e831aff39f07ee4d74be30ed67e', class: clsx('kol-table', {
-                [`kol-table--${this.state._variant}`]: this.state._variant !== undefined,
-            }) }, this.state._hasSettingsMenu && h(KolTableSettingsWcTag, { key: 'a7fa12d347cb52bc834dc83f0db0c7c71dee4cb9', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), h("div", { key: '47c90b5b6f233572fa2143b496e246b34c2a5a7d', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? (showInternalCaption ? '-1' : '0') : undefined }, h("table", { key: '8a8076f5dbf9102c2b34064fff4ee01c3510f7b3', ref: (el) => {
+        return (h("div", { key: '5e695caed3d8fa3e0c02628ff4683a808ff90118', class: clsx('kol-table', {
+                [classNameFromVariant(this.state._variant, 'table')]: this.state._variant !== undefined,
+            }) }, this.state._hasSettingsMenu && h(KolTableSettingsWcTag, { key: 'b1ab207ce8d70eea77a1539b98602e3f1ae6d838', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), h("div", { key: 'c2e77bdb173e4c07b87e961122bedcdbdfcf500c', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? (showInternalCaption ? '-1' : '0') : undefined }, h("table", { key: 'aa63facbff8823756c31be35fcffc86a5c452740', ref: (el) => {
                 this.tableRef = el;
                 this.syncTableLabel(this.externalLabelElements);
             }, "aria-labelledby": showInternalCaption ? 'caption' : undefined, class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, showInternalCaption && (h("caption", { key: '0ccf4e13f484de3f44f3282fcc99a8521c17aea4', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label)), Array.isArray(horizontalHeaders) && (h("thead", { key: '602f2f0157b40379bbfeabcecf4f03f54a4a161d', class: "kol-table__head" }, [
+            } }, showInternalCaption && (h("caption", { key: '7d84c6675e6807c7db1af0c32f41d24fb232cbd4', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label)), Array.isArray(horizontalHeaders) && (h("thead", { key: '3d64cd804254f659ba3cf2473b77873dac3820a9', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (h("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), h("tbody", { key: 'd2473c4cc03ff3c664118d08599083d28531090b', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), h("tbody", { key: '0eac18af80cf7c63b1b7df70852bc554b731efca', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }
     static get is() { return "kol-table-stateless-wc"; }
     static get properties() {
@@ -963,7 +963,7 @@ export class KolTableStatelessWc {
                 "mutable": false,
                 "complexType": {
                     "original": "VariantClassNamePropType",
-                    "resolved": "string | undefined",
+                    "resolved": "string | string[] | undefined",
                     "references": {
                         "VariantClassNamePropType": {
                             "location": "import",