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

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/link-button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAoB1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,aAAa;IAP1B;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;QAwElD,cAAS,GAAa,KAAK,CAAC;QAY5B,eAAU,GAAa,KAAK,CAAC;QA0C7B,kBAAa,GAA0B,OAAO,CAAC;QAK/C,aAAQ,GAA2B,QAAQ,CAAC;KAC3D;IA3Ha,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDACZ,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FD;AA3Ha;IAHZ,aAAa,CAAC,QAAQ,CAAC;0CAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;0CACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons.\n */\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements LinkButtonProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolLinkButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolLinkWcElement>();\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<KolLinkWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\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</KolLinkWcTag>\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 the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\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 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 * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\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.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\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 * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\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/link-button/shadow.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAqB1D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAc7F,MAAM,OAAO,aAAa;IAP1B;QASoB,WAAM,GAAG,YAAY,EAAwB,CAAC;QAwElD,cAAS,GAAa,KAAK,CAAC;QAY5B,eAAU,GAAa,KAAK,CAAC;QA0C7B,kBAAa,GAA0B,OAAO,CAAC;QAK/C,aAAQ,GAA2B,QAAQ,CAAC;KAC3D;IA3Ha,AAAN,KAAK,CAAC,KAAK,CAAC,OAAyB,IAAkB,CAAC;IAOlD,AAAN,KAAK,CAAC,KAAK,KAAmB,CAAC;IAE/B,MAAM;QACZ,OAAO,CACN,EAAC,YAAY,qDACZ,GAAG,EAAE,IAAI,CAAC,MAAM,EAChB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACf,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FD;AA3Ha;IAHZ,aAAa,CAAC,QAAQ,CAAC;0CAGuC;AAOlD;IADZ,aAAa,CAAC,QAAQ,CAAC;0CACc","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.\n *\n * @slot expert - Custom label content, e.g. for rich text or icons.\n */\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements ClickableElement, FocusableElement, LinkButtonProps {\n\t@Element() protected readonly host?: HTMLKolLinkButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolLinkWcElement>();\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<KolLinkWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\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</KolLinkWcTag>\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 the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\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 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 * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType;\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 target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\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.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\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 * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\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 = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"]}

package/dist/collection/components/link-button/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,
@@ -202,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/meter/component.js

@@ -7,7 +7,7 @@ import { MeterFC } from "../../internal/functional-components/meter/component";
 import { MeterController } from "../../internal/functional-components/meter/controller";
 export class KolMeter extends BaseWebComponent {
     constructor() {
-        this.ctrl = new MeterController(this.stateAccess);
+        this.ctrl = new MeterController(BaseWebComponent.stateLess);
         this._max = 1;
         this._min = 0;
         this._orientation = 'horizontal';
@@ -56,7 +56,7 @@ export class KolMeter extends BaseWebComponent {
     }
     render() {
         const { high, low, optimum } = this.ctrl.getMeterData();
-        return (h(Host, { key: '69ec1520b0cf6db98a038e285bc4cddea86c4531' }, h(MeterFC, { key: '2d8fadf97a3734760c4384e5b68c7bd059d299c3', high: high, label: this.ctrl.getRenderProp('label'), low: low, max: this.ctrl.getRenderProp('max'), min: this.ctrl.getRenderProp('min'), optimum: optimum, orientation: this.ctrl.getRenderProp('orientation'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value') })));
+        return (h(Host, { key: '7ea5b381bf22f86968a7abd2a80afbabe32a4ba3' }, h(MeterFC, { key: 'a860ba33e7a08de68091a9e1f3855c9082214893', high: high, label: this.ctrl.getRenderProp('label'), low: low, max: this.ctrl.getRenderProp('max'), min: this.ctrl.getRenderProp('min'), optimum: optimum, orientation: this.ctrl.getRenderProp('orientation'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value') })));
     }
     static get is() { return "kol-meter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/meter/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAG3F,OAAO,EAAE,OAAO,EAAE,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,uDAAuD,CAAC;AAUxF,MAAM,OAAO,QAAS,SAAQ,gBAA0B;;QACtC,SAAI,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAwCvD,SAAI,GAAW,CAAC,CAAC;QAYjB,SAAI,GAAW,CAAC,CAAC;QAyBjB,iBAAY,GAAwB,YAAY,CAAC;QAWjD,UAAK,GAAW,GAAG,CAAC;;;IA/EpB,SAAS,CAAC,KAAc;QAC9B,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,QAAQ,CAAC,KAAc;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAUM,QAAQ,CAAC,KAAc;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAUM,QAAQ,CAAC,KAAc;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAYM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IASM,gBAAgB,CAAC,KAA2B;QAClD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IASM,SAAS,CAAC,KAAc;QAC9B,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;IAEM,iBAAiB;QACvB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAC3B,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,GAAG,EAAE,IAAI,CAAC,IAAI;YACd,GAAG,EAAE,IAAI,CAAC,IAAI;YACd,GAAG,EAAE,IAAI,CAAC,IAAI;YACd,OAAO,EAAE,IAAI,CAAC,QAAQ;YACtB,WAAW,EAAE,IAAI,CAAC,YAAY;YAC9B,IAAI,EAAE,IAAI,CAAC,KAAK;YAChB,KAAK,EAAE,IAAI,CAAC,MAAM;SAClB,CAAC,CAAC;IACJ,CAAC;IAEM,MAAM;QACZ,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QACxD,OAAO,CACN,EAAC,IAAI;YACJ,EAAC,OAAO,qDACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EACvC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EACnC,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EACrC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,GACtC,CACI,CACP,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { MeterApi } from '../../internal/functional-components/meter/api';\nimport { MeterFC } from '../../internal/functional-components/meter/component';\nimport { MeterController } from '../../internal/functional-components/meter/controller';\nimport type { OrientationPropType } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-meter',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolMeter extends BaseWebComponent<MeterApi> implements WebComponentInterface<MeterApi> {\n\tprivate readonly ctrl = new MeterController(this.stateAccess);\n\n\t/**\n\t * From this value to the max value is the high range of the meter. Below this value is the middle range.\n\t */\n\t@Prop()\n\tpublic _high?: number;\n\n\t@Watch('_high')\n\tpublic watchHigh(value?: number): void {\n\t\tthis.ctrl.watchHigh(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 * From this value to the min value is the low range of the meter. Above this value is the middle range.\n\t */\n\t@Prop()\n\tpublic _low?: number;\n\n\t@Watch('_low')\n\tpublic watchLow(value?: number): void {\n\t\tthis.ctrl.watchLow(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t * Default like native component.\n\t */\n\t@Prop()\n\tpublic _max: number = 1;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the minimum value of the element.\n\t * Default like native component.\n\t */\n\t@Prop()\n\tpublic _min: number = 0;\n\n\t@Watch('_min')\n\tpublic watchMin(value?: number): void {\n\t\tthis.ctrl.watchMin(value);\n\t}\n\n\t/**\n\t * Indicates the optimal range of the element.\n\t * If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical.\n\t * If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical.\n\t * If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical.\n\t */\n\t@Prop()\n\tpublic _optimum?: number;\n\n\t@Watch('_optimum')\n\tpublic watchOptimum(value?: number): void {\n\t\tthis.ctrl.watchOptimum(value);\n\t}\n\n\t/**\n\t * Defines whether the meter bar is displayed horizontally or vertically.\n\t */\n\t@Prop()\n\tpublic _orientation: OrientationPropType = 'horizontal';\n\n\t@Watch('_orientation')\n\tpublic watchOrientation(value?: OrientationPropType): void {\n\t\tthis.ctrl.watchOrientation(value);\n\t}\n\n\t/**\n\t * Defines the unit of the value.\n\t */\n\t@Prop()\n\tpublic _unit: string = '%';\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element. Is capped between min and max.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thigh: this._high,\n\t\t\tlabel: this._label,\n\t\t\tlow: this._low,\n\t\t\tmax: this._max,\n\t\t\tmin: this._min,\n\t\t\toptimum: this._optimum,\n\t\t\torientation: this._orientation,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { high, low, optimum } = this.ctrl.getMeterData();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MeterFC\n\t\t\t\t\thigh={high}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlow={low}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tmin={this.ctrl.getRenderProp('min')}\n\t\t\t\t\toptimum={optimum}\n\t\t\t\t\torientation={this.ctrl.getRenderProp('orientation')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\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/meter/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { MeterApi } from '../../internal/functional-components/meter/api';\nimport { MeterFC } from '../../internal/functional-components/meter/component';\nimport { MeterController } from '../../internal/functional-components/meter/controller';\nimport type { OrientationPropType } from '../../internal/props';\n\n@Component({\n\ttag: 'kol-meter',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolMeter extends BaseWebComponent<MeterApi> implements WebComponentInterface<MeterApi> {\n\tprivate readonly ctrl = new MeterController(BaseWebComponent.stateLess);\n\n\t/**\n\t * From this value to the max value is the high range of the meter. Below this value is the middle range.\n\t */\n\t@Prop()\n\tpublic _high?: number;\n\n\t@Watch('_high')\n\tpublic watchHigh(value?: number): void {\n\t\tthis.ctrl.watchHigh(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 * From this value to the min value is the low range of the meter. Above this value is the middle range.\n\t */\n\t@Prop()\n\tpublic _low?: number;\n\n\t@Watch('_low')\n\tpublic watchLow(value?: number): void {\n\t\tthis.ctrl.watchLow(value);\n\t}\n\n\t/**\n\t * Defines the maximum value of the element.\n\t * Default like native component.\n\t */\n\t@Prop()\n\tpublic _max: number = 1;\n\n\t@Watch('_max')\n\tpublic watchMax(value?: number): void {\n\t\tthis.ctrl.watchMax(value);\n\t}\n\n\t/**\n\t * Defines the minimum value of the element.\n\t * Default like native component.\n\t */\n\t@Prop()\n\tpublic _min: number = 0;\n\n\t@Watch('_min')\n\tpublic watchMin(value?: number): void {\n\t\tthis.ctrl.watchMin(value);\n\t}\n\n\t/**\n\t * Indicates the optimal range of the element.\n\t * If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical.\n\t * If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical.\n\t * If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical.\n\t */\n\t@Prop()\n\tpublic _optimum?: number;\n\n\t@Watch('_optimum')\n\tpublic watchOptimum(value?: number): void {\n\t\tthis.ctrl.watchOptimum(value);\n\t}\n\n\t/**\n\t * Defines whether the meter bar is displayed horizontally or vertically.\n\t */\n\t@Prop()\n\tpublic _orientation: OrientationPropType = 'horizontal';\n\n\t@Watch('_orientation')\n\tpublic watchOrientation(value?: OrientationPropType): void {\n\t\tthis.ctrl.watchOrientation(value);\n\t}\n\n\t/**\n\t * Defines the unit of the value.\n\t */\n\t@Prop()\n\tpublic _unit: string = '%';\n\n\t@Watch('_unit')\n\tpublic watchUnit(value?: string): void {\n\t\tthis.ctrl.watchUnit(value);\n\t}\n\n\t/**\n\t * Defines the value of the element. Is capped between min and max.\n\t */\n\t@Prop()\n\tpublic _value!: number;\n\n\t@Watch('_value')\n\tpublic watchValue(value?: number): void {\n\t\tthis.ctrl.watchValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\thigh: this._high,\n\t\t\tlabel: this._label,\n\t\t\tlow: this._low,\n\t\t\tmax: this._max,\n\t\t\tmin: this._min,\n\t\t\toptimum: this._optimum,\n\t\t\torientation: this._orientation,\n\t\t\tunit: this._unit,\n\t\t\tvalue: this._value,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { high, low, optimum } = this.ctrl.getMeterData();\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<MeterFC\n\t\t\t\t\thigh={high}\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlow={low}\n\t\t\t\t\tmax={this.ctrl.getRenderProp('max')}\n\t\t\t\t\tmin={this.ctrl.getRenderProp('min')}\n\t\t\t\t\toptimum={optimum}\n\t\t\t\t\torientation={this.ctrl.getRenderProp('orientation')}\n\t\t\t\t\tunit={this.ctrl.getRenderProp('unit')}\n\t\t\t\t\tvalue={this.ctrl.getRenderProp('value')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/meter/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/modal/shadow.js

@@ -30,7 +30,7 @@ export class KolModal {
         return this.close();
     }
     render() {
-        return (h(KolDialogWcTag, { key: '99ab60573ded95d3aebfca05d99052c73bbb32b2', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, h("slot", { key: 'dd8fc56c1757d4ebf641d796a24e228bbe432d2e' })));
+        return (h(KolDialogWcTag, { key: '229646dc28b741e758e1491f52066fc19561bf75', ref: this.catchRef, _label: this._label, _on: this._on, _variant: this._variant, _width: this._width }, h("slot", { key: 'de215c31b357584a003ed672f2168a93f9bdf122' })));
     }
     static get is() { return "kol-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/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,
@@ -202,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/nav/shadow.js

@@ -150,9 +150,9 @@ export class KolNav {
     }
     render() {
         const collapsible = this.state._collapsible === true;
-        return (h("div", { key: '168e77bd4e310d31ec72afcc5dc4633df3a5852c', class: clsx('kol-nav', {
+        return (h("div", { key: '402617cd0f836b2d08ee8093a51f913e4d567902', class: clsx('kol-nav', {
                 'kol-nav--is-compact': this.state._hideLabel,
-            }) }, h("nav", { key: 'd27ea32253853f5ab13df4cceec8245a69564179', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, h(this.linkList, { key: '43080dfc66978e4161adb904094f8b7a4585798c', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (h("div", { key: '917c25c8c29c3f980dd95c19cac2b3857c9f06fd', class: "kol-nav__compact" }, h(KolButtonWcTag, { key: 'c08ed259ed0721edaa769a44e7b9b96c50091f30', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
+            }) }, h("nav", { key: '832817240d45524e08be60b5ced9dd382ed2bd3e', "aria-label": this.state._label, class: "kol-nav__navigation", id: this.navId }, h(this.linkList, { key: '223c298a6d3b0febc74eb1909a7f4a8a8ef45051', collapsible: collapsible, deep: 0, links: this.state._links, id: this.listId })), this.state._hasCompactButton && (h("div", { key: 'd1290d23eb7bcccc812704dbeabe655bdea21f09', class: "kol-nav__compact" }, h(KolButtonWcTag, { key: 'b66548183b4a9627cb52be1656f3914d44b583c7', class: "kol-nav__toggle-button", _ariaControls: this.navId, _ariaExpanded: !this.state._hideLabel, _icons: this.state._hideLabel ? 'kolicon-chevron-right' : 'kolicon-chevron-left', _hideLabel: true, _label: translate(this.state._hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
                 onClick: () => {
                     this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: !this.state._hideLabel });
                 },

package/dist/collection/components/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/pagination/shadow.js

@@ -13,7 +13,7 @@ export class KolPagination {
         this._tooltipAlign = 'top';
     }
     render() {
-        return (h(KolPaginationWcTag, { key: 'bc90292d4f75a96446852b57fbcae6d90988d553', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
+        return (h(KolPaginationWcTag, { key: '30a11ebf44cb4a4bb32c9ba95dfd0c156bbe406d', _boundaryCount: this._boundaryCount, _label: this._label, _customClass: this._customClass, _on: this._on, _hasButtons: this._hasButtons, _page: this._page, _pageSize: this._pageSize, _pageSizeOptions: this._pageSizeOptions, _siblingCount: this._siblingCount, _tooltipAlign: this._tooltipAlign, _max: this._max }));
     }
     static get is() { return "kol-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/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,
@@ -202,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-"] {
@@ -420,7 +425,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/popover-button/component.js

@@ -56,11 +56,11 @@ export class KolPopoverButtonWc {
     async focus(options) { }
     async click() { }
     render() {
-        return (h(Fragment, null, h(KolButtonWcTag, { key: '9e1a7324de0e3164562d41b81d9b794304508658', class: clsx('kol-popover-button', {
+        return (h(Fragment, null, h(KolButtonWcTag, { key: '2d1b167c6ced479392dd8764e284e6e098803e17', class: clsx('kol-popover-button', {
                 'kol-popover-button--open': this.popoverOpen,
                 'kol-popover-button--inline': this.state._inline === true,
                 'kol-popover-button--standalone': this.state._inline === false,
-            }), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, h("slot", { key: '647d8e36914dd39d3b5ed610051ba0a3fb081052', name: "expert", slot: "expert" })), h(PopoverFC, { key: '4158958c2efaf7f7bf7c02537e9aa4c45b855c88', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '0cc270905c7835fc7db5119b7609553d86b49050' }))));
+            }), _accessKey: this._accessKey, _ariaControls: this.popoverId, _ariaDescription: this._ariaDescription, _ariaExpanded: this.popoverOpen, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _inline: this._inline, _label: this._label, _name: this._name, _on: this.on, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant, ref: this.setButtonElementRef }, h("slot", { key: '30edf43ae3c307ad352e2731d1a378bd3bf114af', name: "expert", slot: "expert" })), h(PopoverFC, { key: '939edeb43402a010d9a15ebfb98aaf4c07df3ff1', align: this.state._popoverAlign || 'bottom', popoverRef: this.setPopoverElementRef, class: "kol-popover-button__popover", id: this.popoverId }, h("slot", { key: '48827da834b0eddb7052fb6a4718d8c16a1d9089' }))));
     }
     validateInline(value) {
         validateInline(this, value, {

package/dist/collection/components/popover-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/popover-button/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { PopoverFC } from '../../internal/functional-components/popover/component';\nimport { PopoverController } from '../../internal/functional-components/popover/controller';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\n\n/**\n * @internal\n * @slot - The popover content.\n *\n * **Note:** The `_on` button callback prop is not supported. The button's `onClick` is reserved for toggling the popover.\n * Manage the popover visibility state and coordinate with the internal popover element.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButtonWc implements PopoverButtonProps, FocusableElement {\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate readonly popoverCtrl = new PopoverController();\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate readonly popoverId = createUniqueId('popover');\n\n\tprivate readonly setPopoverElementRef = (element?: HTMLDivElement) => {\n\t\tthis.popoverElement = element;\n\t\tthis.popoverCtrl.setPopoverElementRef(element);\n\t};\n\n\tprivate readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {\n\t\tthis.ctaRef(element);\n\t\tif (element) {\n\t\t\tthis.popoverCtrl.setTriggerElement(element as HTMLElement);\n\t\t}\n\t};\n\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: () => {\n\t\t\tthis.popoverCtrl.setShow(!this.popoverOpen);\n\t\t},\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t\t_inline: false,\n\t};\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tthis.popoverCtrl.setShow(false);\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tthis.popoverCtrl.setShow(true);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@directFocus('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@directClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate handleToggle = (event: Event): void => {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t\t})}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this.popoverId}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tref={this.setButtonElementRef}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t\t<PopoverFC align={this.state._popoverAlign || 'bottom'} popoverRef={this.setPopoverElementRef} class=\"kol-popover-button__popover\" id={this.popoverId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</PopoverFC>\n\t\t\t</>\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t\tif (value) {\n\t\t\tthis.popoverCtrl.setAlign(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n\n\tpublic componentDidRender() {\n\t\t// The popoverElement is already set via popoverRef callback from PopoverFC.\n\t\t// Register the toggle listener once the popover element is available.\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.addEventListener('toggle', this.handleToggle);\n\t\t}\n\t\t// Ensure align value is synced with controller\n\t\tif (this.state._popoverAlign) {\n\t\t\tthis.popoverCtrl.setAlign(this.state._popoverAlign);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.removeEventListener('toggle', this.handleToggle);\n\t\t}\n\t\tthis.popoverCtrl.destroy();\n\t\tthis.popoverElement = undefined;\n\t}\n}\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../src/components/popover-button/component.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Fragment, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { PopoverFC } from '../../internal/functional-components/popover/component';\nimport { PopoverController } from '../../internal/functional-components/popover/controller';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tIdPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { validateInline, validatePopoverAlign } from '../../schema';\nimport type { PopoverButtonProps, PopoverButtonStates } from '../../schema/components/popover-button';\nimport clsx from '../../utils/clsx';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, directClick, directFocus } from '../../utils/element-interaction';\n\n/**\n * @internal\n * @slot - The popover content.\n *\n * **Note:** The `_on` button callback prop is not supported. The button's `onClick` is reserved for toggling the popover.\n * Manage the popover visibility state and coordinate with the internal popover element.\n */\n@Component({\n\ttag: 'kol-popover-button-wc',\n\tshadow: false,\n})\n// class implementing PopoverButtonProps and not API because we don't want to repeat the entire state and validation for button props\nexport class KolPopoverButtonWc implements ClickableElement, FocusableElement, PopoverButtonProps {\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\n\tprivate readonly popoverCtrl = new PopoverController();\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate readonly popoverId = createUniqueId('popover');\n\n\tprivate readonly setPopoverElementRef = (element?: HTMLDivElement) => {\n\t\tthis.popoverElement = element;\n\t\tthis.popoverCtrl.setPopoverElementRef(element);\n\t};\n\n\tprivate readonly setButtonElementRef = (element?: HTMLKolButtonWcElement) => {\n\t\tthis.ctaRef(element);\n\t\tif (element) {\n\t\t\tthis.popoverCtrl.setTriggerElement(element as HTMLElement);\n\t\t}\n\t};\n\n\tprivate on: ButtonCallbacksPropType<StencilUnknown> = {\n\t\tonClick: () => {\n\t\t\tthis.popoverCtrl.setShow(!this.popoverOpen);\n\t\t},\n\t};\n\n\t@State() public state: PopoverButtonStates = {\n\t\t_label: '',\n\t\t_popoverAlign: 'bottom',\n\t\t_inline: false,\n\t};\n\t@State() private popoverOpen = false;\n\n\t/**\n\t * Hides the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tthis.popoverCtrl.setShow(false);\n\t}\n\n\t/**\n\t * Show the popover programmatically by calling the PopoverController.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tthis.popoverCtrl.setShow(true);\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t@directFocus('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@directClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate handleToggle = (event: Event): void => {\n\t\tthis.popoverOpen = (event as ToggleEvent).newState === 'open';\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('kol-popover-button', {\n\t\t\t\t\t\t'kol-popover-button--open': this.popoverOpen,\n\t\t\t\t\t\t'kol-popover-button--inline': this.state._inline === true,\n\t\t\t\t\t\t'kol-popover-button--standalone': this.state._inline === false,\n\t\t\t\t\t})}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this.popoverId}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_ariaExpanded={this.popoverOpen}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_inline={this._inline}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this.on}\n\t\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\tref={this.setButtonElementRef}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t\t<PopoverFC align={this.state._popoverAlign || 'bottom'} popoverRef={this.setPopoverElementRef} class=\"kol-popover-button__popover\" id={this.popoverId}>\n\t\t\t\t\t<slot />\n\t\t\t\t</PopoverFC>\n\t\t\t</>\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 internal ID of the primary component element.\n\t * @internal\n\t */\n\t@Prop() public _id?: IdPropType;\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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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@Watch('_inline')\n\tpublic validateInline(value?: InlinePropType): void {\n\t\tvalidateInline(this, value, {\n\t\t\tdefaultValue: false,\n\t\t});\n\t}\n\n\t@Watch('_popoverAlign')\n\tpublic validatePopoverAlign(value?: PopoverAlignPropType): void {\n\t\tvalidatePopoverAlign(this, value);\n\t\tif (value) {\n\t\t\tthis.popoverCtrl.setAlign(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateInline(this._inline);\n\t\tthis.validatePopoverAlign(this._popoverAlign);\n\t}\n\n\tpublic componentDidRender() {\n\t\t// The popoverElement is already set via popoverRef callback from PopoverFC.\n\t\t// Register the toggle listener once the popover element is available.\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.addEventListener('toggle', this.handleToggle);\n\t\t}\n\t\t// Ensure align value is synced with controller\n\t\tif (this.state._popoverAlign) {\n\t\t\tthis.popoverCtrl.setAlign(this.state._popoverAlign);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback() {\n\t\tif (this.popoverElement) {\n\t\t\tthis.popoverElement.removeEventListener('toggle', this.handleToggle);\n\t\t}\n\t\tthis.popoverCtrl.destroy();\n\t\tthis.popoverElement = undefined;\n\t}\n}\n"]}

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

@@ -27,7 +27,7 @@ export class KolPopoverButton {
     async click() { }
     async focus(options) { }
     render() {
-        return (h(KolPopoverButtonWcTag, { key: '31a6eafd923d75089ccfb44e87945efec18702dd', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: 'eea141f244c65bd7cf21a63e8346df619fba2c89', name: "expert", slot: "expert" }), h("slot", { key: '2a4f7297ed377a7a58ce30a3a30806a35761bd71' })));
+        return (h(KolPopoverButtonWcTag, { key: '31f3f10dd9eee8e1e3432b78f0fc1474476e8024', ref: this.ctaRef, _accessKey: this._accessKey, _ariaDescription: this._ariaDescription, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _inline: this._inline, _label: this._label, _name: this._name, _popoverAlign: this._popoverAlign, _shortKey: this._shortKey, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, h("slot", { key: 'dd9f7dddf8364233210c1674b9a64f32cbb50b7b', name: "expert", slot: "expert" }), h("slot", { key: '2e2fe5c0f3d3ec6b370e446dbcad0479d76b244d' })));
     }
     static get is() { return "kol-popover-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/popover-button/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements PopoverButtonProps, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\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\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\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_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\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\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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/popover-button/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop } from '@stencil/core';\nimport { KolPopoverButtonWcTag } from '../../core/component-names';\nimport type {\n\tAccessKeyPropType,\n\tAriaDescriptionPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tClickableElement,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tInlinePropType,\n\tKolFocusOptions,\n\tLabelWithExpertSlotPropType,\n\tPopoverAlignPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { PopoverButtonProps } from '../../schema/components/popover-button';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\n\n/**\n * A button that toggles the visibility of a popover overlay containing arbitrary content.\n * The popover uses the native HTML Popover API for lightweight, non-modal overlays.\n *\n * @slot - The popover content (displayed when the button is clicked).\n * @slot expert - Custom label content for the button (when `_label` is `false`).\n */\n@Component({\n\ttag: 'kol-popover-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolPopoverButton implements ClickableElement, FocusableElement, PopoverButtonProps {\n\t@Element() protected readonly host?: HTMLKolPopoverButtonElement;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolPopoverButtonWcElement>();\n\n\t/**\n\t * Hides the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async hidePopover() {\n\t\tvoid this.ctaRef.el?.hidePopover();\n\t}\n\n\t/**\n\t * Shows the popover programmatically by forwarding the call to the web component.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async showPopover() {\n\t\tvoid this.ctaRef.el?.showPopover();\n\t}\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\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\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={this.ctaRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaDescription={this._ariaDescription}\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_popoverAlign={this._popoverAlign}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tabIndex={this._tabIndex}\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\t<slot />\n\t\t\t</KolPopoverButtonWcTag>\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 where to show the Popover preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _popoverAlign?: PopoverAlignPropType = 'bottom';\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\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"]}

package/dist/collection/components/popover-button/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,
@@ -202,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/progress/component.js

@@ -39,7 +39,7 @@ export class KolProgress extends BaseWebComponent {
         this.ctrl.destroy();
     }
     render() {
-        return (h(Host, { key: '875e3cb3b7b18f3a73be1115a577e7681e7f2c6d' }, h(ProgressFC, { key: '89fc086cc42ec754a47faf0ee6ba99800aac90dd', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
+        return (h(Host, { key: '70710a5592ba3177b7d4e657c36ee496c92fb879' }, h(ProgressFC, { key: '19414781e2a8b8b4daa4df4ca0734afcc7507830', label: this.ctrl.getRenderProp('label'), max: this.ctrl.getRenderProp('max'), unit: this.ctrl.getRenderProp('unit'), value: this.ctrl.getRenderProp('value'), variant: this.ctrl.getRenderProp('variant'), liveValue: this.liveValue })));
     }
     static get is() { return "kol-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress/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/quote/component.js

@@ -31,7 +31,7 @@ export class KolQuote {
         });
     }
     render() {
-        return (h(Host, { key: '6dbdd16912a99997f52326f7cca426f704a7357b' }, h(QuoteFC, { key: 'a523fb0f75067faad16629169193f76e9e879ace', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
+        return (h(Host, { key: '0e6593206846694c7a999d1a00d1776c5507112c' }, h(QuoteFC, { key: '8e4b699204dd80e609632c82ab6e3db688d0c3ef', href: this.ctrl.getRenderProp('href'), label: this.ctrl.getRenderProp('label'), quote: this.ctrl.getRenderProp('quote'), variant: this.ctrl.getRenderProp('variant') })));
     }
     static get is() { return "kol-quote"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/quote/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,

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

@@ -43,13 +43,16 @@ export class KolSelectWc {
             } });
     }
     render() {
-        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '1aa065d33eb61c13e5d46118820fb1517c116ef8' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '5c56852755b4dbf5f808d128bb221c7b9c50d59c', state: this.state }, h("form", { key: '6974fa1eef19077680e0825f50d576c7e8fb0ad1', onSubmit: (event) => {
+        return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'f4650685f51b81d569c58b83d9cb3e0fcbe1e3ac' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '8c667a237948d5a16fbfa7386cf2fa570b1aabda', state: this.state }, h("form", { key: '797df79691c959d00703ab3c4ed75f3ce184a8c0', onSubmit: (event) => {
                 event.preventDefault();
                 propagateSubmitEventToForm({
                     form: this.host,
                     ref: this.ctaRef.el,
                 });
-            } }, h("input", { key: 'dca06d50c09696120b037147e9df5d2d7167cc9e', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: 'c382d84c4c6c8098f850eeaa68acc5e03a65e66b' }, this.getSelectProps()))))));
+            } }, h("input", { key: 'e156192b09a158149fa310b2d81cbfad4657a875', type: "submit", hidden: true }), h(KolSelectStateWrapperFc, Object.assign({ key: 'dee324e9704157bc659671c582743eb4771509d6' }, this.getSelectProps()))))));
+    }
+    validateAriaDetails(value) {
+        this.controller.validateAriaDetails(value);
     }
     constructor() {
         this.ctaRef = createCtaRef();
@@ -137,6 +140,7 @@ export class KolSelectWc {
         this.controller.validateVariant(value);
     }
     componentWillLoad() {
+        this.validateAriaDetails(this._ariaDetails);
         this._touched = this._touched === true;
         this.controller.componentWillLoad();
         this.state._hasValue = !!this.state._value;
@@ -187,6 +191,31 @@ export class KolSelectWc {
                 "reflect": false,
                 "attribute": "_access-key"
             },
+            "_ariaDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AriaDetailsPropType",
+                    "resolved": "string | undefined",
+                    "references": {
+                        "AriaDetailsPropType": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::AriaDetailsPropType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "References an external element by ID that provides accessible details for this select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_aria-details"
+            },
             "_disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -756,6 +785,9 @@ export class KolSelectWc {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "_ariaDetails",
+                "methodName": "validateAriaDetails"
+            }, {
                 "propName": "_accessKey",
                 "methodName": "validateAccessKey"
             }, {