@public-ui/components 4.3.0-rc.0 → 4.3.0-rc.2

package/dist/collection/components/combobox/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=1780914078349"); /* IE9*/
-  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1782311579243"); /* IE9*/
+  src: url("kolicons.eot?t=1782311579243#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1782311579243") format("woff2"), url("kolicons.woff?t=1782311579243") format("woff"), url("kolicons.ttf?t=1782311579243") format("truetype"), url("kolicons.svg?t=1782311579243#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -458,7 +463,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/component-list.js

@@ -1,7 +1,7 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import { KolAbbr } from "./abbr/shadow";
+import { KolAbbr } from "./abbr/component";
 import { KolAccordion } from "./accordion/shadow";
 import { KolAlertWc } from "./alert/component";
 import { KolAlert } from "./alert/shadow";

package/dist/collection/components/component-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-list.js","sourceRoot":"","sources":["../../src/components/component-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { KolAbbr } from './abbr/shadow';\nimport { KolAccordion } from './accordion/shadow';\nimport { KolAlertWc } from './alert/component';\nimport { KolAlert } from './alert/shadow';\nimport { KolAvatar } from './avatar/component';\nimport { KolBadge } from './badge/shadow';\nimport { KolBreadcrumb } from './breadcrumb/shadow';\nimport { KolButtonLink } from './button-link/shadow';\nimport { KolButtonWc } from './button/component';\nimport { KolButton } from './button/shadow';\nimport { KolCard } from './card/shadow';\nimport { KolCombobox } from './combobox/shadow';\nimport { KolDetails } from './details/shadow';\nimport { KolDialogWc } from './dialog/component';\nimport { KolDialog } from './dialog/shadow';\nimport { KolDrawer } from './drawer/shadow';\nimport { KolForm } from './form/shadow';\nimport { KolHeading } from './heading/component';\nimport { KolIcon } from './icon/component';\nimport { KolImage } from './image/component';\nimport { KolInputCheckbox } from './input-checkbox/shadow';\nimport { KolInputColor } from './input-color/shadow';\nimport { KolInputDate } from './input-date/shadow';\nimport { KolInputEmail } from './input-email/shadow';\nimport { KolInputFile } from './input-file/shadow';\nimport { KolInputNumber } from './input-number/shadow';\nimport { KolInputPassword } from './input-password/shadow';\nimport { KolInputRadio } from './input-radio/shadow';\nimport { KolInputRange } from './input-range/shadow';\nimport { KolInputText } from './input-text/shadow';\nimport { KolKolibri } from './kolibri/shadow';\nimport { KolLinkButton } from './link-button/shadow';\nimport { KolLinkWc } from './link/component';\nimport { KolLink } from './link/shadow';\nimport { KolMeter } from './meter/component';\nimport { KolModal } from './modal/shadow';\nimport { KolNav } from './nav/shadow';\nimport { KolPagination } from './pagination/shadow';\nimport { KolPopoverButton } from './popover-button/shadow';\nimport { KolProgress } from './progress/component';\nimport { KolQuote } from './quote/component';\nimport { KolSelect } from './select/shadow';\nimport { KolSingleSelect } from './single-select/shadow';\nimport { KolSkipNav } from './skip-nav/shadow';\nimport { KolSpin } from './spin/component';\nimport { KolSplitButton } from './split-button/shadow';\nimport { KolTabs } from './tabs/shadow';\nimport { KolTextarea } from './textarea/shadow';\nimport { KolToastContainer } from './toaster/shadow';\nimport { KolToolbar } from './toolbar/shadow';\nimport { KolTooltipWc } from './tooltip/component';\nimport { KolTreeItemWc } from './tree-item/component';\nimport { KolTreeItem } from './tree-item/shadow';\nimport { KolTreeWc } from './tree/component';\nimport { KolTree } from './tree/shadow';\nimport { KolVersion } from './version/shadow';\n\nexport const COMPONENTS = [\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolAlertWc,\n\tKolAvatar,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolButtonWc,\n\tKolCard,\n\tKolCombobox,\n\tKolDetails,\n\tKolDialog,\n\tKolDialogWc,\n\tKolDrawer,\n\tKolForm,\n\tKolHeading,\n\tKolIcon,\n\tKolImage,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolLinkWc,\n\tKolMeter,\n\tKolModal,\n\tKolNav,\n\tKolPagination,\n\tKolProgress,\n\tKolPopoverButton,\n\tKolQuote,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolSkipNav,\n\tKolSpin,\n\tKolSplitButton,\n\tKolTabs,\n\tKolTextarea,\n\tKolToastContainer,\n\tKolToolbar,\n\tKolTooltipWc,\n\tKolTree,\n\tKolTreeItem,\n\tKolTreeItemWc,\n\tKolTreeWc,\n\tKolVersion,\n];\n"]}
+{"version":3,"file":"component-list.js","sourceRoot":"","sources":["../../src/components/component-list.ts"],"names":[],"mappings":"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","sourcesContent":["import { KolAbbr } from './abbr/component';\nimport { KolAccordion } from './accordion/shadow';\nimport { KolAlertWc } from './alert/component';\nimport { KolAlert } from './alert/shadow';\nimport { KolAvatar } from './avatar/component';\nimport { KolBadge } from './badge/shadow';\nimport { KolBreadcrumb } from './breadcrumb/shadow';\nimport { KolButtonLink } from './button-link/shadow';\nimport { KolButtonWc } from './button/component';\nimport { KolButton } from './button/shadow';\nimport { KolCard } from './card/shadow';\nimport { KolCombobox } from './combobox/shadow';\nimport { KolDetails } from './details/shadow';\nimport { KolDialogWc } from './dialog/component';\nimport { KolDialog } from './dialog/shadow';\nimport { KolDrawer } from './drawer/shadow';\nimport { KolForm } from './form/shadow';\nimport { KolHeading } from './heading/component';\nimport { KolIcon } from './icon/component';\nimport { KolImage } from './image/component';\nimport { KolInputCheckbox } from './input-checkbox/shadow';\nimport { KolInputColor } from './input-color/shadow';\nimport { KolInputDate } from './input-date/shadow';\nimport { KolInputEmail } from './input-email/shadow';\nimport { KolInputFile } from './input-file/shadow';\nimport { KolInputNumber } from './input-number/shadow';\nimport { KolInputPassword } from './input-password/shadow';\nimport { KolInputRadio } from './input-radio/shadow';\nimport { KolInputRange } from './input-range/shadow';\nimport { KolInputText } from './input-text/shadow';\nimport { KolKolibri } from './kolibri/shadow';\nimport { KolLinkButton } from './link-button/shadow';\nimport { KolLinkWc } from './link/component';\nimport { KolLink } from './link/shadow';\nimport { KolMeter } from './meter/component';\nimport { KolModal } from './modal/shadow';\nimport { KolNav } from './nav/shadow';\nimport { KolPagination } from './pagination/shadow';\nimport { KolPopoverButton } from './popover-button/shadow';\nimport { KolProgress } from './progress/component';\nimport { KolQuote } from './quote/component';\nimport { KolSelect } from './select/shadow';\nimport { KolSingleSelect } from './single-select/shadow';\nimport { KolSkipNav } from './skip-nav/shadow';\nimport { KolSpin } from './spin/component';\nimport { KolSplitButton } from './split-button/shadow';\nimport { KolTabs } from './tabs/shadow';\nimport { KolTextarea } from './textarea/shadow';\nimport { KolToastContainer } from './toaster/shadow';\nimport { KolToolbar } from './toolbar/shadow';\nimport { KolTooltipWc } from './tooltip/component';\nimport { KolTreeItemWc } from './tree-item/component';\nimport { KolTreeItem } from './tree-item/shadow';\nimport { KolTreeWc } from './tree/component';\nimport { KolTree } from './tree/shadow';\nimport { KolVersion } from './version/shadow';\n\nexport const COMPONENTS = [\n\tKolAbbr,\n\tKolAccordion,\n\tKolAlert,\n\tKolAlertWc,\n\tKolAvatar,\n\tKolBadge,\n\tKolBreadcrumb,\n\tKolButton,\n\tKolButtonLink,\n\tKolButtonWc,\n\tKolCard,\n\tKolCombobox,\n\tKolDetails,\n\tKolDialog,\n\tKolDialogWc,\n\tKolDrawer,\n\tKolForm,\n\tKolHeading,\n\tKolIcon,\n\tKolImage,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolKolibri,\n\tKolLink,\n\tKolLinkButton,\n\tKolLinkWc,\n\tKolMeter,\n\tKolModal,\n\tKolNav,\n\tKolPagination,\n\tKolProgress,\n\tKolPopoverButton,\n\tKolQuote,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolSkipNav,\n\tKolSpin,\n\tKolSplitButton,\n\tKolTabs,\n\tKolTextarea,\n\tKolToastContainer,\n\tKolToolbar,\n\tKolTooltipWc,\n\tKolTree,\n\tKolTreeItem,\n\tKolTreeItemWc,\n\tKolTreeWc,\n\tKolVersion,\n];\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/details/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, type JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tDetailsAPI,\n\tDetailsCallbacksPropType,\n\tDetailsStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tKolFocusOptions,\n\tLabelPropType,\n} from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * The **Details** component allows additional information to be initially shown with a short introductory text,\n * which is only fully expanded after the user clicks on an arrow icon.\n *\n * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\n * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\n * changes its orientation from **_right_** to **_down_**.\n * The component can also be closed again to hide the content.\n *\n * @slot - The content displayed in the detail description.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly id = createUniqueId('details');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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 * Triggers a click on the summary/toggle button.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'kol-details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\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 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/details/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, type JSX, Method, Prop, State, Watch } from '@stencil/core';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport type {\n\tClickableElement,\n\tDetailsAPI,\n\tDetailsCallbacksPropType,\n\tDetailsStates,\n\tDisabledPropType,\n\tFocusableElement,\n\tHeadingLevel,\n\tKolFocusOptions,\n\tLabelPropType,\n} from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport { createUniqueId } from '../../utils/dev.utils';\nimport { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * The **Details** component allows additional information to be initially shown with a short introductory text,\n * which is only fully expanded after the user clicks on an arrow icon.\n *\n * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\n * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\n * changes its orientation from **_right_** to **_down_**.\n * The component can also be closed again to hide the content.\n *\n * @slot - The content displayed in the detail description.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements ClickableElement, DetailsAPI, FocusableElement {\n\t@Element() protected readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly id = createUniqueId('details');\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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 * Triggers a click on the summary/toggle button.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tif (this.host) {\n\t\t\t\tdispatchDomEvent(this.host, KolEvent.toggle, Boolean(this._open));\n\t\t\t}\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'kol-details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.id,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.ctaRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'kolicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t<slot />\n\t\t\t</KolCollapsibleFc>\n\t\t);\n\t}\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 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"]}

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

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

@@ -77,7 +77,7 @@ export class KolDialogWc {
         return this.close();
     }
     render() {
-        return (h("dialog", { key: '740fd9b18343e873a7961173848be648bbd0ff8a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx('kol-dialog', 'kol-modal', {
+        return (h("dialog", { key: 'b622c4990e105ebbb64d26e211ff6dc37208a10a', "aria-label": this.state._variant === 'blank' ? this.state._label : undefined, "aria-labelledby": this.state._variant === 'card' ? this.cardHeadingId : undefined, "aria-modal": this.isModal ? 'true' : 'false', class: clsx('kol-dialog', 'kol-modal', {
                 'kol-dialog__blank': this.state._variant === 'blank',
                 'kol-dialog__card': this.state._variant === 'card',
                 'kol-modal__blank': this.state._variant === 'blank',
@@ -86,7 +86,7 @@ export class KolDialogWc {
                 this.refDialog = el;
             }, style: {
                 width: this.state._width,
-            } }, this.state._variant === 'blank' && h("slot", { key: '183bbb7224ca0ec06bbd84e354fa7b58882a4879' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: 'e0270ea31e33d61760aa8fca356c08f88a56fffe', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: 'a18c03fd1f0cdcc25a8bddfffd5b0753fc81cdb5' })))));
+            } }, this.state._variant === 'blank' && h("slot", { key: '850a1ade034d6444cf1f665e788c140a7b0c90b8' }), this.state._variant === 'card' && (h(KolCardWcTag, { key: 'd4ee4734987ccde37930a628b11a6ddf540143bd', _hasCloser: true, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("slot", { key: 'cdecd18053b687089733f88d6b6314c64d27d206' })))));
     }
     validateLabel(value) {
         validateLabel(this, value, {

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

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

package/dist/collection/components/dialog/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=1780914078349"); /* IE9*/
-  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1782311579243"); /* IE9*/
+  src: url("kolicons.eot?t=1782311579243#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1782311579243") format("woff2"), url("kolicons.woff?t=1782311579243") format("woff"), url("kolicons.ttf?t=1782311579243") format("truetype"), url("kolicons.svg?t=1782311579243#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -97,7 +97,7 @@ export class KolDrawer {
             }), _hasCloser: this.state._hasCloser, _headingId: this.cardHeadingId, _label: this.state._label, _level: this._level, _on: this._cardOn }, h("div", { class: "kol-drawer__content" }, h("slot", null))));
     }
     render() {
-        return (h(Host, { key: '9ddd7432cb3f0a79b4020144378e951d76d6429b', class: "kol-drawer" }, h("dialog", { key: '4187cc6a21ca4471a30f1db9f860d5a141372157', "aria-labelledby": this.cardHeadingId, "aria-modal": this.isModal ? 'true' : 'false', class: "kol-drawer__dialog", onCancel: this.handleCancelEvent, ref: this.getRef }, this.renderDialogContent())));
+        return (h(Host, { key: '14aa4c6b978a89943fe8d83901ede517d8ff6032', class: "kol-drawer" }, h("dialog", { key: 'db250f54f95e8658e6929c3cfd4b2afd21ca62ab', "aria-labelledby": this.cardHeadingId, "aria-modal": this.isModal ? 'true' : 'false', class: "kol-drawer__dialog", onCancel: this.handleCancelEvent, ref: this.getRef }, this.renderDialogContent())));
     }
     validateLabel(value) {
         validateLabel(this, value, {

package/dist/collection/components/drawer/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=1780914078349"); /* IE9*/
-  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1782311579243"); /* IE9*/
+  src: url("kolicons.eot?t=1782311579243#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1782311579243") format("woff2"), url("kolicons.woff?t=1782311579243") format("woff"), url("kolicons.ttf?t=1782311579243") format("truetype"), url("kolicons.svg?t=1782311579243#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

@@ -9,6 +9,10 @@ import KolAlertFc from "../../functional-components/Alert";
 import { dispatchDomEvent, KolEvent } from "../../utils/events";
 export class KolForm {
     constructor() {
+        this.scrollOptionsFallback = {
+            behavior: 'smooth',
+            block: 'nearest',
+        };
         this.translateErrorListMessage = translate('kol-error-list-message');
         this.translateErrorList = translate('kol-error-list');
         this.translateFormDescription = translate('kol-form-description');
@@ -32,11 +36,10 @@ export class KolForm {
                 dispatchDomEvent(this.host, KolEvent.reset);
             }
         };
-        this.handleLinkClick = (selector) => {
+        this.handleLinkClick = (selector, options) => {
             const targetElement = document.querySelector(selector);
             if (targetElement && typeof targetElement.focus === 'function') {
-                targetElement.scrollIntoView({ behavior: 'smooth' });
-                targetElement.focus();
+                targetElement.focus(options ? options : this.scrollOptionsFallback);
             }
         };
         this.setBlockElement = (el) => (this.errorListBlock = el);
@@ -45,28 +48,23 @@ export class KolForm {
         this.state = {};
     }
     renderErrorList(errorList) {
-        return (h(KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, h("nav", { "aria-label": this.translateErrorList }, h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (h("li", { key: index }, h(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
+        return (h(KolAlertFc, { class: "kol-form__alert", ref: this.setBlockElement, type: "error", variant: "card", label: this.translateErrorListMessage }, h("nav", { "aria-label": this.translateErrorList }, h("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (h("li", { key: index }, h(KolLinkWcTag, { class: "kol-form__link", _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector), error.options) : error.selector }, ref: index === 0 ? this.setFirstLinkElement : undefined }))))))));
     }
     renderFormElement() {
         return (h("form", { class: "kol-form", method: "post", onSubmit: this.onSubmit, onReset: this.onReset, noValidate: true }, this.state._requiredText === true ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.translateFormDescription))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (h("p", null, h("div", { class: "kol-form__mandatory-fields-hint" }, this.state._requiredText))) : null, h("slot", null)));
     }
     render() {
         const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
-        return (h(Host, { key: 'd002ea1e6be732b787b8e9823fb7812dd43abbc7' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
+        return (h(Host, { key: 'f894eb6482f6c8ea9542ff608eb8281449a6f424' }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
     }
-    scrollToErrorList() {
-        var _a;
-        (_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: 'smooth',
-            block: 'start',
-        });
+    scrollToErrorList(options) {
         setTimeout(() => {
             var _a, _b;
-            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
+            (_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus(options ? options : this.scrollOptionsFallback);
         }, 250);
     }
-    async focusErrorList() {
-        this.scrollToErrorList();
+    async focusErrorList(options) {
+        this.scrollToErrorList(options);
         return Promise.resolve();
     }
     validateOn(value) {
@@ -187,12 +185,21 @@ export class KolForm {
         return {
             "focusErrorList": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
+                    "signature": "(options?: KolFocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "KolFocusOptions | undefined",
+                            "docs": ""
+                        }],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "KolFocusOptions": {
+                            "location": "import",
+                            "path": "../../schema",
+                            "id": "src/schema/index.ts::KolFocusOptions"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/form/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"]}
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../../src/components/form/shadow.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KolFocusOptions, KoliBriFormCallbacks, Stringified } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.\n *\n * @slot - The content of the form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\t@Element() private readonly host?: HTMLKolFormElement;\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\tscrollOptionsFallback: KolFocusOptions = {\n\t\tbehavior: 'smooth',\n\t\tblock: 'nearest',\n\t};\n\tprivate readonly translateErrorListMessage = translate('kol-error-list-message');\n\tprivate readonly translateErrorList = translate('kol-error-list');\n\tprivate readonly translateFormDescription = translate('kol-form-description');\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.submit);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.reset);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string, options?: KolFocusOptions) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.focus(options ? options : this.scrollOptionsFallback);\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLKolLinkWcElement) => (this.errorListFirstLink = el as HTMLElement);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc class=\"kol-form__alert\" ref={this.setBlockElement} type=\"error\" variant=\"card\" label={this.translateErrorListMessage}>\n\t\t\t\t<nav aria-label={this.translateErrorList}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\tclass=\"kol-form__link\"\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector), error.options) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form class=\"kol-form\" method=\"post\" onSubmit={this.onSubmit} onReset={this.onReset} noValidate>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.translateFormDescription}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"kol-form__mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(options?: KolFocusOptions): void {\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus(options ? options : this.scrollOptionsFallback);\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses the first link.\n\t */\n\t@Method()\n\tasync focusErrorList(options?: KolFocusOptions): Promise<void> {\n\t\tthis.scrollToErrorList(options);\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"]}

package/dist/collection/components/form/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=1780914078349"); /* IE9*/
-  src: url("kolicons.eot?t=1780914078349#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1780914078349") format("woff2"), url("kolicons.woff?t=1780914078349") format("woff"), url("kolicons.ttf?t=1780914078349") format("truetype"), url("kolicons.svg?t=1780914078349#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1782311579243"); /* IE9*/
+  src: url("kolicons.eot?t=1782311579243#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1782311579243") format("woff2"), url("kolicons.woff?t=1782311579243") format("woff"), url("kolicons.ttf?t=1782311579243") format("truetype"), url("kolicons.svg?t=1782311579243#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {

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

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

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -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/icon/component.js

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 * This file defines the layer order for all CSS layers used in KoliBri.
 * The order is important as it determines the cascade priority.
@@ -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/input-adapter-leanup/associated.controller.js

@@ -3,6 +3,8 @@
  */
 import { devHint, devWarning, getExperimentalMode, validateName } from "../../schema";
 import { getOptions } from "../../core/bootstrap";
+import { validateAriaDetails } from "../../schema/props/aria-details";
+import { attachInternals } from "../../utils/aria-labelledby";
 const isAssociatedTagName = (name) => name === 'KOL-BUTTON' ||
     name === 'KOL-COMBOBOX' ||
     name === 'KOL-INPUT-CHECKBOX' ||
@@ -35,6 +37,7 @@ export class AssociatedInputController {
         this.component = component;
         this.host = this.findHostWithShadowRoot(host);
         this.type = type;
+        this.internals = attachInternals(this.host);
         if (((_a = getOptions()) === null || _a === void 0 ? void 0 : _a.reflectInputValues) && isAssociatedTagName((_b = this.host) === null || _b === void 0 ? void 0 : _b.tagName) && component._name) {
             (_c = this.host) === null || _c === void 0 ? void 0 : _c.querySelectorAll('input,select,textarea').forEach((el) => {
                 var _a;
@@ -171,6 +174,9 @@ export class AssociatedInputController {
             }
         }
     }
+    validateAriaDetails(value) {
+        validateAriaDetails(this.component, this.host, this.internals, value);
+    }
     componentWillLoad() {
         this.validateName(this.component._name);
         this.validateSyncValueBySelector(this.component._syncValueBySelector);