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

package/dist/collection/components/skip-nav/shadow.js

@@ -17,7 +17,7 @@ export class KolSkipNav {
         };
     }
     render() {
-        return (h("nav", { key: 'aa484fadf45377288d3bc7b099a34d8e381bfda0', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: '3549087a2157b6ee5135c3166e3a78f055bdf6dc', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
+        return (h("nav", { key: '1dd822317cce82a3d09ccd3777555e511430538e', class: "kol-skip-nav", "aria-label": this.state._label }, h("ul", { key: '372cfe14e0f58b7b7b33461d6d6641fcfd3b0818', class: "kol-skip-nav__list" }, this.state._links.map((link, index) => {
             return (h("li", { class: "kol-skip-nav__list-item", key: index }, h(KolLinkWcTag, Object.assign({}, link, { ref: index === 0 ? this.ctaRef : undefined }))));
         }))));
     }

package/dist/collection/components/skip-nav/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/skip-nav/shadow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAY9E,MAAM,OAAO,UAAU;IAPvB;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;QAqCjD,UAAK,GAAkB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV,CAAC;KA0BF;IAhEO,MAAM;QACZ,OAAO,CACN,4DAAK,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM;YACtD,2DAAI,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa,EAAE,EAAE;gBACzD,OAAO,CACN,UAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,KAAK;oBAC7C,EAAC,YAAY,oBAAK,IAAI,IAAE,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAAiB,CAC/E,CACL,CAAC;YACH,CAAC,CAAC,CACE,CACA,CACN,CAAC;IACH,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAkBxD,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAzCa;IAHZ,aAAa,CAAC,QAAQ,CAAC;uCAGuC","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements SkipNavAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolSkipNavElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolLinkWcElement>();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link} ref={index === 0 ? this.ctaRef : undefined}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\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 * 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 the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/skip-nav/shadow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAY9E,MAAM,OAAO,UAAU;IAPvB;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;QAqCjD,UAAK,GAAkB;YACtC,MAAM,EAAE,EAAE;YACV,MAAM,EAAE,EAAE;SACV,CAAC;KA0BF;IAhEO,MAAM;QACZ,OAAO,CACN,4DAAK,KAAK,EAAC,cAAc,gBAAa,IAAI,CAAC,KAAK,CAAC,MAAM;YACtD,2DAAI,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,KAAa,EAAE,EAAE;gBACzD,OAAO,CACN,UAAI,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,KAAK;oBAC7C,EAAC,YAAY,oBAAK,IAAI,IAAE,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IAAiB,CAC/E,CACL,CAAC;YACH,CAAC,CAAC,CACE,CACA,CACN,CAAC;IACH,CAAC;IASY,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAkBxD,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;QACrF,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACnC,CAAC;QACD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;QACH,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAGM,aAAa,CAAC,KAAgC;QACpD,aAAa,CAAC,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAEM,oBAAoB;QAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD;AAzCa;IAHZ,aAAa,CAAC,QAAQ,CAAC;uCAGuC","sourcesContent":["import { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport type { FocusableElement, KolFocusOptions, LabelPropType, LinkProps, SkipNavAPI, SkipNavStates, Stringified } from '../../schema';\nimport { validateLabel } from '../../schema';\n\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { watchNavLinks } from '../nav/validation';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport { createCtaRef, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.\n */\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements FocusableElement, SkipNavAPI {\n\t@Element() protected readonly host?: HTMLKolSkipNavElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolLinkWcElement>();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav class=\"kol-skip-nav\" aria-label={this.state._label}>\n\t\t\t\t<ul class=\"kol-skip-nav__list\">\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li class=\"kol-skip-nav__list-item\" key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag {...link} ref={index === 0 ? this.ctaRef : undefined}></KolLinkWcTag>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\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 * 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 the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: SkipNavStates = {\n\t\t_label: '', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"]}

package/dist/collection/components/skip-nav/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
@@ -17,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -201,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
-  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
+  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- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -28,7 +28,7 @@ export class KolSpin extends BaseWebComponent {
         });
     }
     render() {
-        return (h(Host, { key: 'b4fec1b0b595bf2eebe1c8f866b5f1352be06093' }, h(SpinFC, { key: '95988885799767328412a77384e5636b6444cc52', show: this.ctrl.getRenderProp('show'), label: this.ctrl.getRenderProp('label'), variant: this.ctrl.getRenderProp('variant'), showToggled: this.showToggled, handleGetTranslateActionRunning: this.ctrl.handleGetTranslateActionRunning, handleGetTranslateActionDone: this.ctrl.handleGetTranslateActionDone })));
+        return (h(Host, { key: '7379c127d8a30dc2175e50e2f7adaa45d4986a35' }, h(SpinFC, { key: 'e1992feadd19faa876ca24b9ef1856fba3b54350', show: this.ctrl.getRenderProp('show'), label: this.ctrl.getRenderProp('label'), variant: this.ctrl.getRenderProp('variant'), showToggled: this.showToggled })));
     }
     static get is() { return "kol-spin"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/spin/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/spin/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,MAAM,qDAAqD,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAUtF,MAAM,OAAO,OAAQ,SAAQ,gBAAyB;;QACpC,SAAI,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAoCtD,gBAAW,GAAY,KAAK,CAAC;;;IA3B7B,SAAS,CAAC,KAAe;QAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IASM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IASM,YAAY,CAAC,KAAuB;QAC1C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAKM,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,OAAO,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CAAC;IACJ,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,IAAI;YACJ,EAAC,MAAM,qDACN,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,EAC3C,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,+BAA+B,EAAE,IAAI,CAAC,IAAI,CAAC,+BAA+B,EAC1E,4BAA4B,EAAE,IAAI,CAAC,IAAI,CAAC,4BAA4B,GACnE,CACI,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { SpinApi } from '../../internal/functional-components/spin/api';\nimport { SpinFC } from '../../internal/functional-components/spin/component';\nimport { SpinController } from '../../internal/functional-components/spin/controller';\nimport type { SpinVariantType } from '../../internal/props/variant-spin';\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin extends BaseWebComponent<SpinApi> implements WebComponentInterface<SpinApi> {\n\tprivate readonly ctrl = new SpinController(this.stateAccess);\n\n\t/**\n\t * Makes the element show up.\n\t */\n\t@Prop()\n\tpublic _show?: boolean;\n\n\t@Watch('_show')\n\tpublic watchShow(value?: boolean): void {\n\t\tthis.ctrl.watchShow(value);\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: SpinVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: SpinVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t@State()\n\tpublic showToggled: boolean = false;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tshow: this._show,\n\t\t\tlabel: this._label,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SpinFC\n\t\t\t\t\tshow={this.ctrl.getRenderProp('show')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tshowToggled={this.showToggled}\n\t\t\t\t\thandleGetTranslateActionRunning={this.ctrl.handleGetTranslateActionRunning}\n\t\t\t\t\thandleGetTranslateActionDone={this.ctrl.handleGetTranslateActionDone}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/spin/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,MAAM,qDAAqD,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAUtF,MAAM,OAAO,OAAQ,SAAQ,gBAAyB;;QACpC,SAAI,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAoCtD,gBAAW,GAAY,KAAK,CAAC;;;IA3B7B,SAAS,CAAC,KAAe;QAC/B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IASM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;IASM,YAAY,CAAC,KAAuB;QAC1C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAKM,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,OAAO,EAAE,IAAI,CAAC,QAAQ;SACtB,CAAC,CAAC;IACJ,CAAC;IAEM,MAAM;QACZ,OAAO,CACN,EAAC,IAAI;YACJ,EAAC,MAAM,qDACN,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,EAC3C,WAAW,EAAE,IAAI,CAAC,WAAW,GAC5B,CACI,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { SpinApi } from '../../internal/functional-components/spin/api';\nimport { SpinFC } from '../../internal/functional-components/spin/component';\nimport { SpinController } from '../../internal/functional-components/spin/controller';\nimport type { SpinVariantType } from '../../internal/props/variant-spin';\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSpin extends BaseWebComponent<SpinApi> implements WebComponentInterface<SpinApi> {\n\tprivate readonly ctrl = new SpinController(this.stateAccess);\n\n\t/**\n\t * Makes the element show up.\n\t */\n\t@Prop()\n\tpublic _show?: boolean;\n\n\t@Watch('_show')\n\tpublic watchShow(value?: boolean): void {\n\t\tthis.ctrl.watchShow(value);\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()\n\tpublic _label?: string;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: string): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop()\n\tpublic _variant?: SpinVariantType;\n\n\t@Watch('_variant')\n\tpublic watchVariant(value?: SpinVariantType): void {\n\t\tthis.ctrl.watchVariant(value);\n\t}\n\n\t@State()\n\tpublic showToggled: boolean = false;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tshow: this._show,\n\t\t\tlabel: this._label,\n\t\t\tvariant: this._variant,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<SpinFC\n\t\t\t\t\tshow={this.ctrl.getRenderProp('show')}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tvariant={this.ctrl.getRenderProp('variant')}\n\t\t\t\t\tshowToggled={this.showToggled}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
@@ -17,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,

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

@@ -38,10 +38,10 @@ export class KolSplitButton {
     async click() { }
     render() {
         const i18nDropdownLabel = 'kol-split-button-dropdown-label';
-        return (h("div", { key: 'f93883a74c715adadb01e11a399aa9381dd8a3e5', class: "kol-split-button" }, h("div", { key: '6e7c6f7b2fb2af4616e7a72190c33d95de6730c9', class: "kol-split-button__root" }, h(KolButtonWcTag, { key: '6743560a7e81c95f0999cc44f38f23d99a5eb242', class: clsx('kol-split-button__button', {
+        return (h("div", { key: 'efb712282023ebd2eb5ba801cab698eacafb558b', class: "kol-split-button" }, h("div", { key: '331b05abd64211d21d8a67a3cff7c9db5b10870c', class: "kol-split-button__root" }, h(KolButtonWcTag, { key: 'fa270cf31c77bf0f125d52bbb951fa4c2f6fed30', class: clsx('kol-split-button__button', {
                 [this._variant]: this._variant !== 'custom',
                 [this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
-            }), ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), h("div", { key: '1c66f27f7339ed03db0e1464c0099e13fe1f22cf', class: "kol-split-button__horizontal-line" }), h(KolPopoverButtonWcTag, { key: '3553eb129e3c54b92dae1c368941239a41510596', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate(`${i18nDropdownLabel}-open`), _popoverAlign: "bottom" }, h("slot", { key: '366b100a15df2afc22bc89c2fdb40897e8ea880c' })))));
+            }), ref: this.ctaRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), h("div", { key: '70e8b56f252df5b250e20829ef5200b8e1f6ef12', class: "kol-split-button__horizontal-line" }), h(KolPopoverButtonWcTag, { key: '1b44af2b7bac2ea2e797cdee3cd604802eed78cf', class: "kol-split-button__secondary-button", ref: this.setPopoverButtonRef, _disabled: this._disabled, _hideLabel: true, _icons: "kolicon-chevron-down", _label: translate(`${i18nDropdownLabel}-open`), _popoverAlign: "bottom" }, h("slot", { key: 'd3e52b768ff7cda01eee60e1321c767c021eb82c' })))));
     }
     connectedCallback() {
         this.state = Object.assign(Object.assign({}, this.state), { _show: false });

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\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 SplitButtonProps, FocusableElement /*, 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":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAsB3E,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAe7F,MAAM,OAAO,cAAc;IAP3B;QASoB,WAAM,GAAG,YAAY,EAA0B,CAAC;QAGlD,wBAAmB,GAAG,CAAC,GAAmC,EAAE,EAAE;YAC9E,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC;QAC7B,CAAC,CAAC;QA2Be,uBAAkB,GAAG;YACrC,OAAO,EAAE,CAAC,KAAiB,EAAE,EAAE;;gBAC9B,KAAK,CAAC,eAAe,EAAE,CAAC;gBAExB,IAAI,OAAO,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE,CAAC;oBAC7C,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;gBACvC,CAAC;YACF,CAAC;SACD,CAAC;QA+Fa,cAAS,GAAa,KAAK,CAAC;QAO5B,eAAU,GAAa,KAAK,CAAC;QA2C7B,kBAAa,GAA0B,KAAK,CAAC;QAK7C,UAAK,GAAwB,QAAQ,CAAC;QAUtC,aAAQ,GAA2B,QAAQ,CAAC;QAE3C,UAAK,GAAsB;YAC1C,KAAK,EAAE,KAAK;SACZ,CAAC;KACF;IAjMO,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;IAY/B,MAAM;QACZ,MAAM,iBAAiB,GAAG,iCAAiC,CAAC;QAC5D,OAAO,CACN,4DAAK,KAAK,EAAC,kBAAkB;YAC5B,4DAAK,KAAK,EAAC,wBAAwB;gBAClC,EAAC,cAAc,qDACd,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE;wBACvC,CAAC,IAAI,CAAC,QAAkB,CAAC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;wBACrD,CAAC,IAAI,CAAC,YAAsB,CAAC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;qBAClI,CAAC,EACF,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,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,kBAAkB,EAC5B,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,GACN;gBAClB,4DAAK,KAAK,EAAC,mCAAmC,GAAO;gBACrD,EAAC,qBAAqB,qDACrB,KAAK,EAAC,oCAAoC,EAC1C,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,QACV,MAAM,EAAC,sBAAsB,EAC7B,MAAM,EAAE,SAAS,CAAC,GAAG,iBAAiB,OAAO,CAAC,EAC9C,aAAa,EAAC,QAAQ;oBAEtB,8DAAQ,CACe,CACnB,CACD,CACN,CAAC;IACH,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,KAAK,mCAAQ,IAAI,CAAC,KAAK,KAAE,KAAK,EAAE,KAAK,GAAE,CAAC;IAC9C,CAAC;IAMM,KAAK,CAAC,UAAU;;QACtB,KAAK,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,WAAW,EAAE,CAAA,CAAC;QAC1C,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC1B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGD;AAtLa;IAHZ,aAAa,CAAC,QAAQ,CAAC;2CAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;2CACc","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"]}

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* forward the rem function */
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
@@ -17,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -201,8 +207,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
-  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
+  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- */
 }
 @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: '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: {
+        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: {
                 onSort: (_, payload) => {
                     this.handleSort(payload);
                 },

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

@@ -18,9 +18,14 @@
 @layer kol-a11y {
   :host {
     /*
-                   * Minimum size of interactive elements.
-                   */
-    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));
+     * Minimum size of interactive elements.
+     *
+     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:
+     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose
+     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser's
+     * rounding, dropping just below the required minimum.
+     */
+    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);
     /*
      * No element should be used without verifying the contrast ratio of its background and font colors.
      * By initially setting the background color to white and the font color to black,
@@ -207,8 +212,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1780919027063"); /* IE9*/
-  src: url("kolicons.eot?t=1780919027063#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780919027063") format("woff2"), url("kolicons.woff?t=1780919027063") format("woff"), url("kolicons.ttf?t=1780919027063") format("truetype"), url("kolicons.svg?t=1780919027063#kolicons") format("svg"); /* iOS 4.1- */
+  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- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -752,7 +757,7 @@
     justify-content: flex-start;
   }
   .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,
-  .kol-form-field--required .kol-tooltip__content .kol-span__label::after {
+  .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }
   .kol-input-container {

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

@@ -616,7 +616,7 @@ export class KolTableStatelessWc {
             return h("td", { class: "kol-table__cell kol-table__cell--header", key: `thead-0` });
         }
         if (selection.multiple === false) {
-            return h("td", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" });
+            return (h("th", { scope: "col", key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" }, h("span", { class: "visually-hidden" }, translate('kol-table-selection'))));
         }
         const selectedKeyLength = (_b = (_a = this.getSelectedKeysWithoutDisabledKeys()) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         const dataLength = this.getDataWithSelectionEnabled().length;
@@ -630,7 +630,7 @@ export class KolTableStatelessWc {
             translationKey = 'kol-table-selection-all';
         }
         const label = translate(translationKey);
-        return (h("th", { key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" }, h("div", { class: clsx('kol-table__selection', {
+        return (h("th", { scope: "col", key: `thead-0-selection`, class: "kol-table__cell kol-table__cell--header kol-table__cell--selection" }, h("span", { class: "visually-hidden" }, translate('kol-table-selection')), h("div", { class: clsx('kol-table__selection', {
                 'kol-table__selection--indeterminate': indeterminate,
                 'kol-table__selection--checked': isChecked,
             }) }, h("label", { class: "kol-table__selection-label" }, h(IconFC, { class: "kol-table__selection-icon", icons: `kolicon ${indeterminate ? 'kolicon-minus' : isChecked ? 'kolicon-check' : ''}`, label: "" }), h("input", { class: clsx('kol-table__selection-input kol-table__selection-input--checkbox'), "data-testid": "selection-checkbox-all", ref: (el) => el && this.checkboxRefs.push(el), name: "selection", checked: isChecked && !indeterminate, indeterminate: indeterminate, "aria-label": label, type: "checkbox", onInput: (event) => {
@@ -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: '1ecc521f37fb57c7f5ce2e2c1daf06850c0c9372', class: clsx('kol-table', {
+        return (h("div", { key: 'a27c5b854dfe1e831aff39f07ee4d74be30ed67e', class: clsx('kol-table', {
                 [`kol-table--${this.state._variant}`]: this.state._variant !== undefined,
-            }) }, this.state._hasSettingsMenu && h(KolTableSettingsWcTag, { key: 'ec0d5f632c76388d10c3625a9f722db2d3bdf2de', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), h("div", { key: '61c5bf820ea7c00c768caa73864bedb0e247f5bd', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? (showInternalCaption ? '-1' : '0') : undefined }, h("table", { key: '1f407367ae428c6d64cc7a016d74d1b00192574c', ref: (el) => {
+            }) }, 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) => {
                 this.tableRef = el;
                 this.syncTableLabel(this.externalLabelElements);
             }, "aria-labelledby": showInternalCaption ? 'caption' : undefined, class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, showInternalCaption && (h("caption", { key: '92e0403f309f42a2345267cbb64e5b7bf8172ffa', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label)), Array.isArray(horizontalHeaders) && (h("thead", { key: 'fa962f7c34c749246879bec67d287619ac4afc2e', class: "kol-table__head" }, [
+            } }, 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" }, [
             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: 'd7a9b16f85081841beb7cb33b902a09f6da43805', class: "kol-table__body" }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
+        ])), h("tbody", { key: 'd2473c4cc03ff3c664118d08599083d28531090b', 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() {