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

package/assets/kolicons/style.css

@@ -1,11 +1,11 @@
   @font-face {
     font-family: "kolicons";
-    src: url('kolicons.eot?t=1780050253507'); /* IE9*/
-    src: url('kolicons.eot?t=1780050253507#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url("kolicons.woff2?t=1780050253507") format("woff2"),
-    url("kolicons.woff?t=1780050253507") format("woff"),
-    url('kolicons.ttf?t=1780050253507') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-    url('kolicons.svg?t=1780050253507#kolicons') format('svg'); /* iOS 4.1- */
+    src: url('kolicons.eot?t=1780914078349'); /* IE9*/
+    src: url('kolicons.eot?t=1780914078349#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("kolicons.woff2?t=1780914078349") format("woff2"),
+    url("kolicons.woff?t=1780914078349") format("woff"),
+    url('kolicons.ttf?t=1780914078349') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url('kolicons.svg?t=1780914078349#kolicons') format('svg'); /* iOS 4.1- */
   }
 
 @layer kol-component {

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.2.0",
+  "version": "4.3.0-rc.0",
   "tags": [
     {
       "name": "kol-abbr",
@@ -65,7 +65,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [
@@ -198,7 +198,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -357,7 +357,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -496,7 +496,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -680,7 +680,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -739,7 +739,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [
@@ -1151,7 +1151,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -1292,7 +1292,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -1472,7 +1472,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -1671,7 +1671,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -1813,7 +1813,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -1997,7 +1997,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -2185,7 +2185,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -2310,7 +2310,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -2465,7 +2465,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -2665,7 +2665,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -2848,7 +2848,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -2970,7 +2970,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [
@@ -3359,7 +3359,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "hidePopover",
@@ -3594,7 +3594,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -3744,7 +3744,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -3786,7 +3786,7 @@
         {
           "name": "focus",
           "description": "Focuses the interactive element of the component.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "toggle",
@@ -3820,7 +3820,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -3983,7 +3983,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -4202,7 +4202,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the current tab button.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -4380,7 +4380,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         },
         {
           "name": "getValue",
@@ -4424,7 +4424,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the currently active toolbar item.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -4447,7 +4447,7 @@
         {
           "name": "focus",
           "description": "Sets focus on the first focusable tree item.",
-          "signature": "focus() => Promise<void>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<void>"
         }
       ],
       "slots": [],
@@ -4498,7 +4498,7 @@
         {
           "name": "focus",
           "description": "Focuses the link element.",
-          "signature": "focus() => Promise<any>"
+          "signature": "focus(options?: KolFocusOptions) => Promise<any>"
         },
         {
           "name": "isOpen",

package/dist/cjs/Alert-CVPzTxE7.js

@@ -0,0 +1,93 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
+var index = require('./index-DBbl8tEq.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+var componentNames = require('./component-names-5KS_pYRF.js');
+var i18n = require('./i18n-DL7vJXNn.js');
+var bemRegistry = require('./bem-registry-D9uDM1GJ.js');
+var component = require('./component-C1vBQDN-.js');
+var Heading = require('./Heading-Cswcjs5-.js');
+
+const alertBem$1 = bemRegistry.bem.forBlock('kol-alert');
+const BEM_CLASS_ALERT__ICON = alertBem$1('icon');
+const ALERT_ICON_CONFIG = {
+    error: {
+        label: i18n.translate('kol-error'),
+        icon: 'kolicon-alert-error',
+    },
+    info: {
+        label: i18n.translate('kol-info'),
+        icon: 'kolicon-alert-info',
+    },
+    warning: {
+        label: i18n.translate('kol-warning'),
+        icon: 'kolicon-alert-warning',
+    },
+    success: {
+        label: i18n.translate('kol-success'),
+        icon: 'kolicon-alert-success',
+    },
+    default: {
+        label: i18n.translate('kol-message'),
+        icon: 'kolicon-alert-info',
+    },
+};
+const AlertIcon = ({ type = 'default' }) => {
+    const config = ALERT_ICON_CONFIG[type || 'default'];
+    return (index.h(index.Fragment, null, index.h("span", { class: "visually-hidden" }, config.label), index.h(component.IconFC, { class: BEM_CLASS_ALERT__ICON, label: "", icons: config.icon })));
+};
+
+const alertBem = bemRegistry.bem.forBlock('kol-alert');
+const BEM_CLASS_ALERT__CLOSER = alertBem('closer');
+const BEM_CLASS_ALERT__CONTENT = alertBem('content');
+const vibrateOnError = () => {
+    if (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {
+        return;
+    }
+    const ua = navigator.userActivation;
+    const hasGesture = (ua === null || ua === void 0 ? void 0 : ua.isActive) || (ua === null || ua === void 0 ? void 0 : ua.hasBeenActive);
+    if (!hasGesture) {
+        return;
+    }
+    if (!matchMedia('(any-pointer: coarse)').matches) {
+        return;
+    }
+    try {
+        navigator.vibrate([100, 75, 100, 75, 100]);
+    }
+    catch (_a) {
+    }
+};
+const KolAlertFc = (props, children) => {
+    const { class: classNames = {}, alert = false, hasCloser = false, label, level = 0, type = 'default', variant = 'msg', onAlertTimeout, onCloserClick } = props, other = tslib_es6.__rest(props, ["class", "alert", "hasCloser", "label", "level", "type", "variant", "onAlertTimeout", "onCloserClick"]);
+    const translateCloseAlert = i18n.translate('kol-close-alert');
+    if (alert) {
+        vibrateOnError();
+        setTimeout(() => {
+            onAlertTimeout === null || onAlertTimeout === void 0 ? void 0 : onAlertTimeout();
+        }, 10000);
+    }
+    const BEM_CLASS_ROOT = alertBem({
+        hasCloser: !!hasCloser,
+        [`type-${type}`]: true,
+        [`variant-${variant}`]: true,
+    });
+    const BEM_CLASS__HEADING = alertBem('heading', {
+        [`h${level}`]: true,
+    });
+    const rootProps = Object.assign({ class: clsx.clsx(classNames, BEM_CLASS_ROOT) }, other);
+    return (index.h("div", Object.assign({ role: alert ? 'alert' : undefined }, rootProps, { "data-testid": "alert" }), index.h("div", { class: "kol-alert__container" }, index.h(AlertIcon, { label: label, type: type }), index.h("div", { class: "kol-alert__container-content" }, label && (index.h(Heading.KolHeadingFc, { class: BEM_CLASS__HEADING, level: level, id: "heading" }, label)), variant === 'msg' && (index.h("span", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))), hasCloser && (index.h(componentNames.KolButtonWcTag, { class: BEM_CLASS_ALERT__CLOSER + ' kol-close-button', "data-testid": "alert-close-button", _ariaDescription: (label === null || label === void 0 ? void 0 : label.trim()) || '', _hideLabel: true, _icons: {
+            left: {
+                icon: 'kolicon-cross',
+            },
+        }, _label: translateCloseAlert, _on: { onClick: onCloserClick }, _tooltipAlign: "left" }))), variant === 'card' && (index.h("div", { class: BEM_CLASS_ALERT__CONTENT, "aria-describedby": label ? 'heading' : undefined }, children))));
+};
+
+exports.KolAlertFc = KolAlertFc;
+//# sourceMappingURL=Alert-CVPzTxE7.js.map
+
+//# sourceMappingURL=Alert-CVPzTxE7.js.map

package/dist/cjs/Alert-CVPzTxE7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-CVPzTxE7.js","sources":["src/functional-components/AlertIcon/AlertIcon.tsx","src/functional-components/Alert/Alert.tsx"],"sourcesContent":["import { Fragment, h, type FunctionalComponent as FC } from '@stencil/core';\nimport { translate } from '../../i18n';\nimport { IconFC } from '../../internal/functional-components/icon/component';\nimport type { AlertType } from '../../schema';\nimport { bem } from '../../schema/bem-registry';\n\nconst alertBem = bem.forBlock('kol-alert');\nconst BEM_CLASS_ALERT__ICON = alertBem('icon');\n\n/**\n * The icon uses a visually-hidden span instead of an aria-label because the Alert might be referenced as content for aria-describedby.\n * In this scenario, Firefox with NVDA does not properly read the aria-label, so the visually-hidden span ensures correct screen reader behavior.\n * @see https://github.com/public-ui/kolibri/issues/7119\n */\nconst ALERT_ICON_CONFIG: Record<AlertType | 'default', { label: string; icon: string }> = {\n\terror: {\n\t\tlabel: translate('kol-error'),\n\t\ticon: 'kolicon-alert-error',\n\t},\n\tinfo: {\n\t\tlabel: translate('kol-info'),\n\t\ticon: 'kolicon-alert-info',\n\t},\n\twarning: {\n\t\tlabel: translate('kol-warning'),\n\t\ticon: 'kolicon-alert-warning',\n\t},\n\tsuccess: {\n\t\tlabel: translate('kol-success'),\n\t\ticon: 'kolicon-alert-success',\n\t},\n\tdefault: {\n\t\tlabel: translate('kol-message'),\n\t\ticon: 'kolicon-alert-info',\n\t},\n};\n\nconst AlertIcon: FC<{ label?: string; type?: AlertType }> = ({ type = 'default' }) => {\n\tconst config = ALERT_ICON_CONFIG[type || 'default'];\n\treturn (\n\t\t<>\n\t\t\t<span class=\"visually-hidden\">{config.label}</span>\n\t\t\t<IconFC class={BEM_CLASS_ALERT__ICON} label=\"\" icons={config.icon} />\n\t\t</>\n\t);\n};\n\nexport default AlertIcon;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport { type JSXBase } from '@stencil/core/internal';\nimport clsx from '../../utils/clsx';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { type InternalAlertProps } from '../../schema';\nimport { bem } from '../../schema/bem-registry';\nimport AlertIcon from '../AlertIcon';\nimport KolHeadingFc from '../Heading';\n\nconst alertBem = bem.forBlock('kol-alert');\nconst BEM_CLASS_ALERT__CLOSER = alertBem('closer');\nconst BEM_CLASS_ALERT__CONTENT = alertBem('content');\n\nexport type KolAlertFcProps = JSXBase.HTMLAttributes<HTMLDivElement> &\n\tPartial<Omit<InternalAlertProps, 'on'>> & {\n\t\tonCloserClick?: () => void;\n\t\tonAlertTimeout?: () => void;\n\t};\n\n/**\n * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n * - https://googlechrome.github.io/samples/vibration/\n * - Ongoing discussion: https://github.com/public-ui/kolibri/issues/7191\n * @todo Move side-effect out of render-function to avoid multiple incarnations.\n */\nconst vibrateOnError = (): void => {\n\tif (typeof navigator === 'undefined' || typeof navigator.vibrate !== 'function') {\n\t\treturn;\n\t}\n\tconst ua = navigator.userActivation;\n\tconst hasGesture = ua?.isActive || ua?.hasBeenActive;\n\tif (!hasGesture) {\n\t\treturn;\n\t}\n\tif (!matchMedia('(any-pointer: coarse)').matches) {\n\t\treturn;\n\t}\n\ttry {\n\t\tnavigator.vibrate([100, 75, 100, 75, 100]);\n\t} catch {\n\t\t/* no-op */\n\t}\n};\n\nconst KolAlertFc: FC<KolAlertFcProps> = (props, children) => {\n\tconst {\n\t\tclass: classNames = {},\n\t\talert = false,\n\t\thasCloser = false,\n\t\tlabel,\n\t\tlevel = 0,\n\t\ttype = 'default',\n\t\tvariant = 'msg',\n\t\tonAlertTimeout,\n\t\tonCloserClick,\n\t\t...other\n\t} = props;\n\n\tconst translateCloseAlert = translate('kol-close-alert');\n\n\tif (alert) {\n\t\tvibrateOnError();\n\n\t\tsetTimeout(() => {\n\t\t\tonAlertTimeout?.();\n\t\t}, 10000);\n\t}\n\n\t/**\n\t * Define the dynamic BEM class names for the alert component.\n\t */\n\tconst BEM_CLASS_ROOT = alertBem({\n\t\thasCloser: !!hasCloser,\n\t\t[`type-${type}`]: true,\n\t\t[`variant-${variant}`]: true,\n\t});\n\tconst BEM_CLASS__HEADING = alertBem('heading', {\n\t\t[`h${level}`]: true,\n\t});\n\n\tconst rootProps: Partial<JSXBase.HTMLAttributes<HTMLDivElement>> = {\n\t\tclass: clsx(classNames, BEM_CLASS_ROOT),\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<div role={alert ? 'alert' : undefined} {...rootProps} data-testid=\"alert\">\n\t\t\t<div class=\"kol-alert__container\">\n\t\t\t\t<AlertIcon label={label} type={type} />\n\t\t\t\t<div class=\"kol-alert__container-content\">\n\t\t\t\t\t{label && (\n\t\t\t\t\t\t<KolHeadingFc class={BEM_CLASS__HEADING} level={level} id=\"heading\">\n\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'msg' && (\n\t\t\t\t\t\t<span class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{hasCloser && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={BEM_CLASS_ALERT__CLOSER + ' kol-close-button'}\n\t\t\t\t\t\tdata-testid=\"alert-close-button\"\n\t\t\t\t\t\t_ariaDescription={label?.trim() || ''}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\ticon: 'kolicon-cross',\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={translateCloseAlert}\n\t\t\t\t\t\t_on={{ onClick: onCloserClick }}\n\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{variant === 'card' && (\n\t\t\t\t<div class={BEM_CLASS_ALERT__CONTENT} aria-describedby={label ? 'heading' : undefined}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default KolAlertFc;\n"],"names":["alertBem","bem","translate","h","Fragment","IconFC","__rest","clsx","KolHeadingFc","KolButtonWcTag"],"mappings":"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"}

package/dist/cjs/Collapsible-DgZrS8sE.js

@@ -0,0 +1,27 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
+var index = require('./index-DBbl8tEq.js');
+var componentNames = require('./component-names-5KS_pYRF.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+var dev_utils = require('./dev.utils-Cdn-EtYb.js');
+var Heading = require('./Heading-Cswcjs5-.js');
+
+const KolCollapsibleFc = (props, children) => {
+    const { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {} } = props, other = tslib_es6.__rest(props, ["id", "class", "label", "level", "disabled", "open", "onClick", "HeadingProps", "HeadingButtonProps", "ContentProps"]);
+    const icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';
+    const headingId = dev_utils.createRelatedUniqueId(id, 'heading');
+    const controlId = dev_utils.createRelatedUniqueId(id, 'control');
+    return (index.h("div", Object.assign({ id: id, class: clsx.clsx('collapsible', {
+            'collapsible--disabled': disabled === true,
+            'collapsible--open': open === true,
+        }, classNames) }, other), index.h(Heading.KolHeadingFc, { ref: HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.ref, level: level, class: clsx.clsx('collapsible__heading', HeadingProps === null || HeadingProps === void 0 ? void 0 : HeadingProps.class) }, index.h(componentNames.KolButtonWcTag, { class: clsx.clsx('collapsible__heading-button', HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.class), ref: HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps.ref, slot: "expert", id: headingId, _ariaControls: controlId, _ariaExpanded: open, _disabled: disabled, _icons: (HeadingButtonProps === null || HeadingButtonProps === void 0 ? void 0 : HeadingButtonProps._icons) || `${icon}`, _label: label, _on: { onClick } })), index.h("div", { class: clsx.clsx('collapsible__wrapper', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.wrapperClass) }, index.h("div", { class: clsx.clsx('collapsible__wrapper-animation', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.animationClass) }, index.h("div", { "aria-hidden": open === false ? 'true' : undefined, "aria-labelledby": headingId, role: "region", class: clsx.clsx('collapsible__content', ContentProps === null || ContentProps === void 0 ? void 0 : ContentProps.class), id: controlId }, children)))));
+};
+
+exports.KolCollapsibleFc = KolCollapsibleFc;
+//# sourceMappingURL=Collapsible-DgZrS8sE.js.map
+
+//# sourceMappingURL=Collapsible-DgZrS8sE.js.map

package/dist/cjs/Collapsible-DgZrS8sE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible-DgZrS8sE.js","sources":["src/functional-components/Collapsible/Collapsible.tsx"],"sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { createRelatedUniqueId } from '../../utils/dev.utils';\nimport KolHeadingFc from '../Heading';\n\ntype ClassType =\n\t| string\n\t| {\n\t\t\t[className: string]: boolean;\n\t  };\n\nexport type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {\n\tid: string;\n\topen?: boolean;\n\tdisabled?: boolean;\n\tlevel?: HeadingLevel;\n\tlabel: string;\n\tonClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;\n\n\tHeadingProps?: {\n\t\tref?: ((elm?: HTMLElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t};\n\n\tHeadingButtonProps?: {\n\t\tref?: ((elm?: HTMLKolButtonWcElement | undefined) => void) | undefined;\n\t\tclass?: ClassType;\n\t\t_icons?: IconsPropType;\n\t};\n\n\tContentProps?: {\n\t\tclass?: ClassType;\n\t\tanimationClass?: ClassType;\n\t\twrapperClass?: ClassType;\n\t};\n};\n\nconst KolCollapsibleFc: FC<CollapsibleProps> = (props, children) => {\n\tconst { id, class: classNames, label, level = 1, disabled, open, onClick, HeadingProps = {}, HeadingButtonProps = {}, ContentProps = {}, ...other } = props;\n\tconst icon = open ? 'kolicon-chevron-down' : 'kolicon-chevron-right';\n\n\tconst headingId = createRelatedUniqueId(id, 'heading');\n\tconst controlId = createRelatedUniqueId(id, 'control');\n\n\treturn (\n\t\t<div\n\t\t\tid={id}\n\t\t\tclass={clsx(\n\t\t\t\t'collapsible',\n\t\t\t\t{\n\t\t\t\t\t'collapsible--disabled': disabled === true,\n\t\t\t\t\t'collapsible--open': open === true,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\t{...other}\n\t\t>\n\t\t\t<KolHeadingFc ref={HeadingProps?.ref} level={level} class={clsx('collapsible__heading', HeadingProps?.class)}>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass={clsx('collapsible__heading-button', HeadingButtonProps?.class)}\n\t\t\t\t\tref={HeadingButtonProps?.ref}\n\t\t\t\t\tslot=\"expert\"\n\t\t\t\t\tid={headingId}\n\t\t\t\t\t_ariaControls={controlId}\n\t\t\t\t\t_ariaExpanded={open}\n\t\t\t\t\t_disabled={disabled}\n\t\t\t\t\t_icons={HeadingButtonProps?._icons || `${icon}`}\n\t\t\t\t\t_label={label}\n\t\t\t\t\t_on={{ onClick }}\n\t\t\t\t></KolButtonWcTag>\n\t\t\t</KolHeadingFc>\n\t\t\t<div class={clsx('collapsible__wrapper', ContentProps?.wrapperClass)}>\n\t\t\t\t<div class={clsx('collapsible__wrapper-animation', ContentProps?.animationClass)}>\n\t\t\t\t\t<div\n\t\t\t\t\t\taria-hidden={open === false ? 'true' : undefined}\n\t\t\t\t\t\taria-labelledby={headingId}\n\t\t\t\t\t\trole=\"region\"\n\t\t\t\t\t\tclass={clsx('collapsible__content', ContentProps?.class)}\n\t\t\t\t\t\tid={controlId}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default KolCollapsibleFc;\n"],"names":["__rest","createRelatedUniqueId","h","clsx","KolHeadingFc","KolButtonWcTag"],"mappings":"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"}

package/dist/cjs/CustomSuggestionsOptionsGroup-Cu-DKRH_.js

@@ -0,0 +1,31 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var index = require('./index-DBbl8tEq.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+
+const CustomSuggestionsOptionFc = ({ disabled, index: index$1, ref, selected, onClick, onMouseOver, onFocus, onKeyDown, option, searchTerm, }) => {
+    const highlightSearchTerm = (text, searchTerm) => {
+        if (!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.trim()))
+            return text;
+        const regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+        const parts = text.split(regex);
+        return parts.map((part, partIndex) => (partIndex % 2 === 1 ? index.h("mark", null, part) : part));
+    };
+    return (index.h("li", { id: `option-${index$1}`, key: `-${index$1}`, ref: ref, "data-index": index$1, tabIndex: -1, role: "option", "aria-selected": selected ? 'true' : undefined, "aria-disabled": disabled ? 'true' : undefined, onClick: onClick, onMouseOver: onMouseOver, onFocus: onFocus, class: clsx.clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled }), onKeyDown: onKeyDown }, index.h("span", null, highlightSearchTerm(String(option), searchTerm || ''))));
+};
+
+const CustomSuggestionsOptionsGroupFc = ({ blockSuggestionMouseOver, onKeyDown, style, hidden, id }, children) => {
+    return (index.h("ul", { id: id, role: "listbox", style: style, class: clsx.clsx('kol-custom-suggestions-options-group', {
+            'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,
+            'kol-custom-suggestions-options-group--open': !hidden,
+        }), hidden: hidden, onKeyDown: onKeyDown }, children));
+};
+
+exports.CustomSuggestionsOptionFc = CustomSuggestionsOptionFc;
+exports.CustomSuggestionsOptionsGroupFc = CustomSuggestionsOptionsGroupFc;
+//# sourceMappingURL=CustomSuggestionsOptionsGroup-Cu-DKRH_.js.map
+
+//# sourceMappingURL=CustomSuggestionsOptionsGroup-Cu-DKRH_.js.map

package/dist/cjs/CustomSuggestionsOptionsGroup-Cu-DKRH_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSuggestionsOptionsGroup-Cu-DKRH_.js","sources":["src/functional-components/CustomSuggestionsOption/CustomSuggestionsOption.tsx","src/functional-components/CustomSuggestionsOptionsGroup/CustomSuggestionsOptionsGroup.tsx"],"sourcesContent":["import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { W3CInputValue } from '../../schema';\nimport clsx from '../../utils/clsx';\n\nexport type CustomSuggestionsProps = JSXBase.HTMLAttributes<HTMLLIElement> & {\n\tdisabled: boolean;\n\tindex: number;\n\toption: W3CInputValue;\n\tselected: boolean;\n\tsearchTerm?: string;\n\tref?: ((elm?: HTMLLIElement | undefined) => void) | undefined;\n};\n\nconst CustomSuggestionsOptionFc: FC<CustomSuggestionsProps> = ({\n\tdisabled,\n\tindex,\n\tref,\n\tselected,\n\tonClick,\n\tonMouseOver,\n\tonFocus,\n\tonKeyDown,\n\toption,\n\tsearchTerm,\n}) => {\n\tconst highlightSearchTerm = (text: string, searchTerm: string) => {\n\t\tif (!searchTerm?.trim()) return text;\n\n\t\tconst regex = new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')})`, 'gi');\n\t\tconst parts = text.split(regex);\n\n\t\treturn parts.map((part, partIndex) => (partIndex % 2 === 1 ? <mark>{part}</mark> : part));\n\t};\n\n\treturn (\n\t\t<li\n\t\t\tid={`option-${index}`}\n\t\t\tkey={`-${index}`}\n\t\t\tref={ref}\n\t\t\tdata-index={index}\n\t\t\ttabIndex={-1}\n\t\t\trole=\"option\"\n\t\t\taria-selected={selected ? 'true' : undefined}\n\t\t\taria-disabled={disabled ? 'true' : undefined}\n\t\t\tonClick={onClick}\n\t\t\tonMouseOver={onMouseOver}\n\t\t\tonFocus={onFocus}\n\t\t\tclass={clsx('kol-custom-suggestions-option', { 'kol-custom-suggestions-option--disabled': disabled })}\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t<span>{highlightSearchTerm(String(option), searchTerm || '')}</span>\n\t\t</li>\n\t);\n};\nexport default CustomSuggestionsOptionFc;\n","import { type FunctionalComponent as FC, h } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from '../../utils/clsx';\n\nexport type CustomSuggestionsOptionsGroupProps = JSXBase.HTMLAttributes<HTMLUListElement> & {\n\tblockSuggestionMouseOver: boolean;\n};\n\nconst CustomSuggestionsOptionsGroupFc: FC<CustomSuggestionsOptionsGroupProps> = ({ blockSuggestionMouseOver, onKeyDown, style, hidden, id }, children) => {\n\treturn (\n\t\t<ul\n\t\t\tid={id}\n\t\t\trole=\"listbox\"\n\t\t\tstyle={style}\n\t\t\tclass={clsx('kol-custom-suggestions-options-group', {\n\t\t\t\t'kol-custom-suggestions-options-group--cursor-hidden': blockSuggestionMouseOver,\n\t\t\t\t'kol-custom-suggestions-options-group--open': !hidden,\n\t\t\t})}\n\t\t\thidden={hidden}\n\t\t\tonKeyDown={onKeyDown}\n\t\t>\n\t\t\t{children}\n\t\t</ul>\n\t);\n};\nexport default CustomSuggestionsOptionsGroupFc;\n"],"names":["index","h","clsx"],"mappings":";;;;;;;;AAcM,MAAA,yBAAyB,GAA+B,CAAC,EAC9D,QAAQ,SACRA,OAAK,EACL,GAAG,EACH,QAAQ,EACR,OAAO,EACP,WAAW,EACX,OAAO,EACP,SAAS,EACT,MAAM,EACN,UAAU,GACV,KAAI;AACJ,IAAA,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,UAAkB,KAAI;QAChE,IAAI,EAAC,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,IAAI,EAAE,CAAA;AAAE,YAAA,OAAO,IAAI;AAEpC,QAAA,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,CAAA,CAAA,EAAI,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC;QACxF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAE/B,QAAA,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,GAAGC,OAAO,CAAA,MAAA,EAAA,IAAA,EAAA,IAAI,CAAQ,GAAG,IAAI,CAAC,CAAC;AAC1F,KAAC;IAED,QACCA,OACC,CAAA,IAAA,EAAA,EAAA,EAAE,EAAE,CAAU,OAAA,EAAAD,OAAK,CAAE,CAAA,EACrB,GAAG,EAAE,CAAA,CAAA,EAAIA,OAAK,CAAA,CAAE,EAChB,GAAG,EAAE,GAAG,EAAA,YAAA,EACIA,OAAK,EACjB,QAAQ,EAAE,EAAE,EACZ,IAAI,EAAC,QAAQ,EACE,eAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC7B,eAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAC5C,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAEE,SAAI,CAAC,+BAA+B,EAAE,EAAE,yCAAyC,EAAE,QAAQ,EAAE,CAAC,EACrG,SAAS,EAAE,SAAS,EAAA,EAEpBD,OAAA,CAAA,MAAA,EAAA,IAAA,EAAO,mBAAmB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,UAAU,IAAI,EAAE,CAAC,CAAQ,CAChE;AAEP;;AC9CA,MAAM,+BAA+B,GAA2C,CAAC,EAAE,wBAAwB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,QAAQ,KAAI;IACxJ,QACCA,OACC,CAAA,IAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,EAAEC,SAAI,CAAC,sCAAsC,EAAE;AACnD,YAAA,qDAAqD,EAAE,wBAAwB;YAC/E,4CAA4C,EAAE,CAAC,MAAM;AACrD,SAAA,CAAC,EACF,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EAEnB,EAAA,QAAQ,CACL;AAEP;;;;;"}

package/dist/cjs/FieldControlStateWrapper-CElQn7sN.js

@@ -0,0 +1,123 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
+var index = require('./index-DBbl8tEq.js');
+var variantQuote = require('./variant-quote-DUWZtljE.js');
+var component$1 = require('./component-CYZTV5r0.js');
+var controller = require('./controller-DHsc-8t1.js');
+require('./common-DAAt5YQ7.js');
+var component = require('./component-4yrnT9ww.js');
+var FormFieldStateWrapper = require('./FormFieldStateWrapper-C93KLp60.js');
+var clsx = require('./clsx-Bm_HQUnh.js');
+var dev_utils = require('./dev.utils-Cdn-EtYb.js');
+
+const fieldControlTooltipControllerById = new Map();
+const getFieldControlTooltipController = (id) => {
+    const tooltipController = fieldControlTooltipControllerById.get(id);
+    if (tooltipController) {
+        return tooltipController;
+    }
+    const nextTooltipController = new controller.TooltipController(variantQuote.BaseWebComponent.stateLess);
+    nextTooltipController.componentWillLoad({ label: '' });
+    fieldControlTooltipControllerById.set(id, nextTooltipController);
+    return nextTooltipController;
+};
+const destroyFieldControlTooltipController = (id) => {
+    const tooltipController = fieldControlTooltipControllerById.get(id);
+    if (tooltipController) {
+        tooltipController.destroy();
+        fieldControlTooltipControllerById.delete(id);
+    }
+};
+const InputContainer = (_a, children) => {
+    var { class: classNames } = _a, other = tslib_es6.__rest(_a, ["class"]);
+    return (index.h("div", Object.assign({ class: clsx.clsx('kol-field-control__input', classNames) }, other), children));
+};
+const KolFieldControlFc = (props, children) => {
+    const { class: classNames, id, disabled, label, hideLabel, labelAlign, renderNoTooltip, hint, renderNoHint, accessKey, shortKey, msg, touched, required, readonly, tooltipAlign, tooltipFloatingRef, fieldControlInputProps, fieldControlLabelProps, fieldControlTooltipProps, fieldControlHintProps } = props, other = tslib_es6.__rest(props, ["class", "id", "disabled", "label", "hideLabel", "labelAlign", "renderNoTooltip", "hint", "renderNoHint", "accessKey", "shortKey", "msg", "touched", "required", "readonly", "tooltipAlign", "tooltipFloatingRef", "fieldControlInputProps", "fieldControlLabelProps", "fieldControlTooltipProps", "fieldControlHintProps"]);
+    const canShowHint = !renderNoHint;
+    const canShowTooltip = !renderNoTooltip;
+    const hasExpertSlot = component.showExpertSlot(label);
+    const useTooltipInsteadOfLabel = canShowTooltip && !hasExpertSlot && hideLabel;
+    const badgeText = component.buildBadgeTextString(accessKey, shortKey);
+    const labelId = dev_utils.createRelatedUniqueId(id, 'label');
+    const tooltipController = useTooltipInsteadOfLabel ? getFieldControlTooltipController(id) : undefined;
+    if (tooltipController) {
+        tooltipController.watchAlign(tooltipAlign);
+        tooltipController.watchBadgeText(badgeText || '');
+        tooltipController.watchId(labelId);
+        tooltipController.watchLabel(label);
+    }
+    else {
+        destroyFieldControlTooltipController(id);
+    }
+    const forwardedInputRef = fieldControlInputProps === null || fieldControlInputProps === void 0 ? void 0 : fieldControlInputProps.ref;
+    const setInputContainerRef = (el) => {
+        forwardedInputRef === null || forwardedInputRef === void 0 ? void 0 : forwardedInputRef(el);
+        if (tooltipController && el) {
+            tooltipController.initContext(el);
+            tooltipController.syncListeners(undefined, el, true);
+        }
+    };
+    const components = [
+        index.h(index.Fragment, null, index.h(InputContainer, Object.assign({}, fieldControlInputProps, { ref: setInputContainerRef }), children), useTooltipInsteadOfLabel && (index.h("div", { class: clsx.clsx('kol-form-field__tooltip', fieldControlTooltipProps === null || fieldControlTooltipProps === void 0 ? void 0 : fieldControlTooltipProps.class) }, index.h(component$1.TooltipFC, { badgeText: badgeText || '', label: label, align: tooltipAlign, id: labelId, refFloating: tooltipFloatingRef !== null && tooltipFloatingRef !== void 0 ? tooltipFloatingRef : ((el) => {
+                tooltipController === null || tooltipController === void 0 ? void 0 : tooltipController.setTooltipElementRef(el);
+            }) })))),
+        index.h(FormFieldStateWrapper.KolFormFieldLabelFc, Object.assign({}, (fieldControlLabelProps || {}), { id: id, baseClassName: "kol-field-control", class: clsx.clsx(fieldControlLabelProps === null || fieldControlLabelProps === void 0 ? void 0 : fieldControlLabelProps.class, {
+                ['kol-field-control__label--visually-hidden']: Boolean(hideLabel),
+            }), hasExpertSlot: hasExpertSlot, label: label, accessKey: accessKey, shortKey: shortKey })),
+    ];
+    if (labelAlign === 'left') {
+        components.reverse();
+    }
+    const stateCssClasses = {
+        ['kol-field-control--disabled']: Boolean(disabled),
+        ['kol-field-control--required']: Boolean(required),
+        ['kol-field-control--touched']: Boolean(touched),
+        ['kol-field-control--hide-label']: Boolean(hideLabel),
+        ['kol-field-control--read-only']: Boolean(readonly),
+        [`kol-field-control--${FormFieldStateWrapper.getMsgType(msg)}`]: Boolean(FormFieldStateWrapper.isMsgDefinedAndInputTouched(msg, touched)),
+        [`kol-field-control--label-align-${labelAlign}`]: Boolean(labelAlign),
+    };
+    return (index.h("div", Object.assign({ class: clsx.clsx('kol-field-control', stateCssClasses, classNames) }, other), components, canShowHint && index.h(FormFieldStateWrapper.KolFormFieldHintFc, Object.assign({}, (fieldControlHintProps || {}), { baseClassName: "kol-field-control", id: id, hint: hint }))));
+};
+
+function getFieldControlProps(state) {
+    const props = {
+        id: state._id,
+        disabled: state._disabled,
+        msg: state._msg,
+        hint: state._hint,
+        label: state._label,
+        hideLabel: state._hideLabel,
+        touched: state._touched,
+    };
+    if ('_required' in state) {
+        props.required = state._required;
+    }
+    if ('_readOnly' in state) {
+        props.readonly = state._readOnly;
+    }
+    if ('_labelAlign' in state) {
+        props.labelAlign = state._labelAlign;
+    }
+    if ('_accessKey' in state) {
+        props.accessKey = state._accessKey;
+    }
+    if ('_shortKey' in state) {
+        props.shortKey = state._shortKey;
+    }
+    return props;
+}
+const FieldControlStateWrapper = (_a, children) => {
+    var { state } = _a, other = tslib_es6.__rest(_a, ["state"]);
+    return (index.h(KolFieldControlFc, Object.assign({}, getFieldControlProps(state), other), children));
+};
+
+exports.FieldControlStateWrapper = FieldControlStateWrapper;
+//# sourceMappingURL=FieldControlStateWrapper-CElQn7sN.js.map
+
+//# sourceMappingURL=FieldControlStateWrapper-CElQn7sN.js.map