@public-ui/components 4.5.0-rc.6 → 4.5.0-rc.8

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

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

package/dist/collection/internal/functional-components/form-field/select-value.js

@@ -12,7 +12,9 @@ export const assertSelectValueMatchesMultiplicity = (value, multiple, source) =>
         throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (${source} = ${JSON.stringify(value)})`);
     }
 };
-const flattenSelectOptions = (options) => options.flatMap((entry) => ('options' in entry && Array.isArray(entry.options) ? flattenSelectOptions(entry.options) : [entry]));
+const flattenSelectOptions = (options, groupDisabled = false) => options.flatMap((entry) => 'options' in entry && Array.isArray(entry.options)
+    ? flattenSelectOptions(entry.options, Boolean(groupDisabled || entry.disabled))
+    : [Object.assign(Object.assign({}, entry), { disabled: Boolean(groupDisabled || entry.disabled) })]);
 export const normalizeSelectValue = (value, options, multiple) => {
     if (options.length === 0) {
         return value;

package/dist/collection/internal/functional-components/form-field/select-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-value.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select-value.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAAc,EAAE,QAAiB,EAAE,MAA8B,EAAQ,EAAE;IAC/H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAErC,IAAI,QAAQ,EAAE,CAAC;QACd,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC;YACrC,MAAM,IAAI,KAAK,CACd,6HAA6H,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CACjK,CAAC;QACH,CAAC;IACF,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CACd,iIAAiI,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CACrK,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAGF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAA4B,EAAE,CACrF,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,KAA+B,CAAC,CAAC,CAAC,CAAC;AAQ5J,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,OAA0B,EAAE,QAA6B,EAAoB,EAAE;IAC5I,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC;IACd,CAAC;IACD,MAAM,WAAW,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAClI,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC;QAC5E,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvD,CAAC;IACD,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import type { Option, StencilUnknown } from '../../../schema';\nimport type { SelectOptionsList } from '../../props/options-with-optgroup';\n\n/**\n * Throws when the shape of a `_value` does not match `_multiple`: a list in single mode, or a single\n * value in multiple mode. The field throws from its watcher, so the value is not applied. `source`\n * names the value in the message: the received value of a `_value` change, or the current value on\n * a `_multiple` change.\n */\nexport const assertSelectValueMatchesMultiplicity = (value: unknown, multiple: boolean, source: 'current' | 'received'): void => {\n\tconst isArray = Array.isArray(value);\n\n\tif (multiple) {\n\t\tif (value !== undefined && !isArray) {\n\t\t\tthrow new Error(\n\t\t\t\t`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (${source} = ${JSON.stringify(value)})`,\n\t\t\t);\n\t\t}\n\t} else if (isArray) {\n\t\tthrow new Error(\n\t\t\t`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (${source} = ${JSON.stringify(value)})`,\n\t\t);\n\t}\n};\n\n/** The options of the list, with the options of each optgroup in place of the optgroup. */\nconst flattenSelectOptions = (options: SelectOptionsList): Option<StencilUnknown>[] =>\n\toptions.flatMap((entry) => ('options' in entry && Array.isArray(entry.options) ? flattenSelectOptions(entry.options) : [entry as Option<StencilUnknown>]));\n\n/**\n * Keeps only the values that belong to an option. Then, in single mode (`multiple === false`, not\n * merely falsy) without a value, the value becomes the value of the first enabled option, which is\n * the option the native select shows. Without options, the value is kept as it is, because the\n * options can follow the value.\n */\nexport const normalizeSelectValue = (value: StencilUnknown[], options: SelectOptionsList, multiple: boolean | undefined): StencilUnknown[] => {\n\tif (options.length === 0) {\n\t\treturn value;\n\t}\n\tconst flatOptions = flattenSelectOptions(options);\n\tconst optionValues = flatOptions.map((option) => option.value);\n\tconst filtered = value.every((item) => optionValues.includes(item)) ? value : value.filter((item) => optionValues.includes(item));\n\tif (multiple === false && filtered.length === 0) {\n\t\tconst firstEnabled = flatOptions.find((option) => option.disabled !== true);\n\t\treturn firstEnabled ? [firstEnabled.value] : filtered;\n\t}\n\treturn filtered;\n};\n"]}
+{"version":3,"file":"select-value.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select-value.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,oCAAoC,GAAG,CAAC,KAAc,EAAE,QAAiB,EAAE,MAA8B,EAAQ,EAAE;IAC/H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAErC,IAAI,QAAQ,EAAE,CAAC;QACd,IAAI,KAAK,KAAK,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC;YACrC,MAAM,IAAI,KAAK,CACd,6HAA6H,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CACjK,CAAC;QACH,CAAC;IACF,CAAC;SAAM,IAAI,OAAO,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CACd,iIAAiI,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CACrK,CAAC;IACH,CAAC;AACF,CAAC,CAAC;AAGF,MAAM,oBAAoB,GAAG,CAAC,OAA0B,EAAE,aAAa,GAAG,KAAK,EAA4B,EAAE,CAC5G,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACzB,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;IACjD,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC/E,CAAC,CAAC,iCAAO,KAAgC,KAAE,QAAQ,EAAE,OAAO,CAAC,aAAa,IAAK,KAAgC,CAAC,QAAQ,CAAC,IAAG,CAC7H,CAAC;AAQH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAuB,EAAE,OAA0B,EAAE,QAA6B,EAAoB,EAAE;IAC5I,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC;IACd,CAAC;IACD,MAAM,WAAW,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAClI,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACjD,MAAM,YAAY,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC;QAC5E,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvD,CAAC;IACD,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import type { Option, StencilUnknown } from '../../../schema';\nimport type { SelectOptionsList } from '../../props/options-with-optgroup';\n\n/**\n * Throws when the shape of a `_value` does not match `_multiple`: a list in single mode, or a single\n * value in multiple mode. The field throws from its watcher, so the value is not applied. `source`\n * names the value in the message: the received value of a `_value` change, or the current value on\n * a `_multiple` change.\n */\nexport const assertSelectValueMatchesMultiplicity = (value: unknown, multiple: boolean, source: 'current' | 'received'): void => {\n\tconst isArray = Array.isArray(value);\n\n\tif (multiple) {\n\t\tif (value !== undefined && !isArray) {\n\t\t\tthrow new Error(\n\t\t\t\t`↑ The schema for the property (_value) is not valid for multiple mode. Expected an array. The value will not be changed. (${source} = ${JSON.stringify(value)})`,\n\t\t\t);\n\t\t}\n\t} else if (isArray) {\n\t\tthrow new Error(\n\t\t\t`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (${source} = ${JSON.stringify(value)})`,\n\t\t);\n\t}\n};\n\n/** The options of the list, with the options of each optgroup in place of the optgroup. */\nconst flattenSelectOptions = (options: SelectOptionsList, groupDisabled = false): Option<StencilUnknown>[] =>\n\toptions.flatMap((entry) =>\n\t\t'options' in entry && Array.isArray(entry.options)\n\t\t\t? flattenSelectOptions(entry.options, Boolean(groupDisabled || entry.disabled))\n\t\t\t: [{ ...(entry as Option<StencilUnknown>), disabled: Boolean(groupDisabled || (entry as Option<StencilUnknown>).disabled) }],\n\t);\n\n/**\n * Keeps only the values that belong to an option. Then, in single mode (`multiple === false`, not\n * merely falsy) without a value, the value becomes the value of the first enabled option, which is\n * the option the native select shows. Without options, the value is kept as it is, because the\n * options can follow the value.\n */\nexport const normalizeSelectValue = (value: StencilUnknown[], options: SelectOptionsList, multiple: boolean | undefined): StencilUnknown[] => {\n\tif (options.length === 0) {\n\t\treturn value;\n\t}\n\tconst flatOptions = flattenSelectOptions(options);\n\tconst optionValues = flatOptions.map((option) => option.value);\n\tconst filtered = value.every((item) => optionValues.includes(item)) ? value : value.filter((item) => optionValues.includes(item));\n\tif (multiple === false && filtered.length === 0) {\n\t\tconst firstEnabled = flatOptions.find((option) => option.disabled !== true);\n\t\treturn firstEnabled ? [firstEnabled.value] : filtered;\n\t}\n\treturn filtered;\n};\n"]}

package/dist/collection/internal/functional-components/form-field/select.js

@@ -19,13 +19,18 @@ export const SelectOptionListFC = ({ preKey, options, disabled, value: selectedV
         return null;
     }
     return (h(Fragment, null, options.map((option, index) => {
+        var _a;
         const key = [preKey, `-${index}`].join('');
         if ('options' in option) {
+            if (!((_a = option.options) === null || _a === void 0 ? void 0 : _a.length)) {
+                return null;
+            }
+            const isOptgroupDisabled = Boolean(disabled || option.disabled);
             const { label } = option, other = __rest(option, ["label"]);
-            return (h("optgroup", Object.assign({ class: selectBem('optgroup', { disabled: Boolean(disabled) }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: disabled }), h(SelectOptionListFC, Object.assign({ OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other))));
+            return (h("optgroup", Object.assign({ class: selectBem('optgroup', { disabled: isOptgroupDisabled }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: isOptgroupDisabled }), h(SelectOptionListFC, Object.assign({ OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other, { disabled: isOptgroupDisabled }))));
         }
         if ('value' in option) {
-            return h(SelectOptionFC, Object.assign({ key: key }, OptionProps, { index: key, selectedValue: selectedValue }, option));
+            return (h(SelectOptionFC, Object.assign({ key: key }, OptionProps, { index: key, selectedValue: selectedValue }, option, { disabled: Boolean(disabled || option.disabled) })));
         }
         return null;
     })));
@@ -33,6 +38,6 @@ export const SelectOptionListFC = ({ preKey, options, disabled, value: selectedV
 export const SelectFC = (props) => {
     const { class: classNames, msg, touched, disabled, required, options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "disabled", "required", "options", "value", "OptionProps", "OptionGroupProps", "ariaDescribedBy", "hideLabel", "label"]);
     const selectProps = Object.assign(Object.assign({ class: clsx(selectBem(Object.assign({ disabled: Boolean(disabled), required: Boolean(required), touched: Boolean(touched) }, (isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg)]: true } : {}))), classNames), required: required, disabled: disabled }, getDefaultInputProps({ ariaDescribedBy, hideLabel, label })), other);
-    return (h("select", Object.assign({}, selectProps), h(SelectOptionListFC, { options: options, value: value, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps })));
+    return (h("select", Object.assign({}, selectProps), h(SelectOptionListFC, { OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, disabled: disabled, options: options, value: value })));
 };
 //# sourceMappingURL=select.js.map

package/dist/collection/internal/functional-components/form-field/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { MsgPropType, SelectOption, StencilUnknown, Stringified, W3CInputValue } from '../../../schema';\nimport { getMsgType, isMsgDefinedAndInputTouched } from '../../../schema';\nimport clsx from '../../../utils/clsx';\nimport { getBlockBem } from '../bem-root-node/block-bem';\nimport type { DefaultInputProps } from './default-input-props';\nimport { getDefaultInputProps } from './default-input-props';\n\nconst selectBem = getBlockBem('kol-select');\n\ntype SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;\n\nexport type SelectOptionFCProps = Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'> & {\n\t/** The value, or the list of values, of the selected options. */\n\tselectedValue?: StencilUnknown | StencilUnknown[];\n\tvalue: StencilUnknown;\n\tlabel: W3CInputValue;\n\t/** The key of the option, rendered as its native value; the field maps it back to `value`. */\n\tindex?: string | number;\n};\n\nexport type SelectOptionListFCProps = {\n\t/** Key prefix of the options in an optgroup. */\n\tpreKey?: string;\n\tdisabled?: boolean;\n\tvalue?: StencilUnknown | StencilUnknown[];\n\toptions?: SelectOption<StencilUnknown>[];\n\tOptionProps?: Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'>;\n\tOptionGroupProps?: Omit<JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>, 'label'>;\n};\n\nexport type SelectFCProps = DefaultInputProps<SelectAttributes> &\n\tSelectOptionListFCProps & {\n\t\ttouched?: boolean;\n\t\tmsg?: Stringified<MsgPropType>;\n\t} & {\n\t\t[key: `aria-${string}`]: unknown;\n\t\t[key: `data-${string}`]: unknown;\n\t};\n\n/**\n * Native `<option>`. Its native value is the key (`-<index>`, in an optgroup `-<group>-<index>`), not\n * the option value, because a native value can only be a string.\n */\nexport const SelectOptionFC: FC<SelectOptionFCProps> = ({ class: classNames, index, selectedValue, selected, value, label, disabled, ...other }) => {\n\tconst selectedValues = selectedValue === undefined ? [] : Array.isArray(selectedValue) ? selectedValue : [selectedValue];\n\tconst isSelected = selected || selectedValues.includes(value);\n\n\treturn (\n\t\t<option\n\t\t\tclass={clsx(selectBem('option', { selected: Boolean(isSelected), disabled: Boolean(disabled) }), classNames)}\n\t\t\tselected={isSelected}\n\t\t\tdisabled={disabled}\n\t\t\tvalue={index}\n\t\t\t{...other}\n\t\t>\n\t\t\t{label}\n\t\t</option>\n\t);\n};\n\n/** Options and optgroups of a native select, recursively; an optgroup prefixes the keys of its options. */\nexport const SelectOptionListFC: FC<SelectOptionListFCProps> = ({\n\tpreKey,\n\toptions,\n\tdisabled,\n\tvalue: selectedValue,\n\tOptionProps = {},\n\tOptionGroupProps = {},\n}) => {\n\tif (!options?.length) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst key = [preKey, `-${index}`].join('');\n\n\t\t\t\tif ('options' in option) {\n\t\t\t\t\tconst { label, ...other } = option;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<optgroup\n\t\t\t\t\t\t\tclass={selectBem('optgroup', { disabled: Boolean(disabled) })}\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t{...OptionGroupProps}\n\t\t\t\t\t\t\tlabel={label?.toString()}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SelectOptionListFC OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} value={selectedValue} preKey={key} {...other} />\n\t\t\t\t\t\t</optgroup>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn <SelectOptionFC key={key} {...OptionProps} index={key} selectedValue={selectedValue} {...option} />;\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t})}\n\t\t</>\n\t);\n};\n\n/**\n * Native `<select>` of a form field with its options. The select itself is the root of the\n * `kol-select` block, so the block classes are set on it directly instead of through `BemRootNodeFC`.\n */\nexport const SelectFC: FC<SelectFCProps> = (props) => {\n\tconst {\n\t\tclass: classNames,\n\t\tmsg,\n\t\ttouched,\n\t\tdisabled,\n\t\trequired,\n\t\toptions,\n\t\tvalue,\n\t\tOptionProps,\n\t\tOptionGroupProps,\n\t\tariaDescribedBy,\n\t\thideLabel,\n\t\tlabel,\n\t\t...other\n\t} = props;\n\n\tconst selectProps: SelectAttributes = {\n\t\tclass: clsx(\n\t\t\tselectBem({\n\t\t\t\tdisabled: Boolean(disabled),\n\t\t\t\trequired: Boolean(required),\n\t\t\t\ttouched: Boolean(touched),\n\t\t\t\t...(isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg) as string]: true } : {}),\n\t\t\t}),\n\t\t\tclassNames,\n\t\t),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\t...getDefaultInputProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<select {...selectProps}>\n\t\t\t<SelectOptionListFC options={options} value={value} OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} />\n\t\t</select>\n\t);\n};\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { MsgPropType, SelectOption, StencilUnknown, Stringified, W3CInputValue } from '../../../schema';\nimport { getMsgType, isMsgDefinedAndInputTouched } from '../../../schema';\nimport clsx from '../../../utils/clsx';\nimport { getBlockBem } from '../bem-root-node/block-bem';\nimport type { DefaultInputProps } from './default-input-props';\nimport { getDefaultInputProps } from './default-input-props';\n\nconst selectBem = getBlockBem('kol-select');\n\ntype SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;\n\nexport type SelectOptionFCProps = Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'> & {\n\t/** The value, or the list of values, of the selected options. */\n\tselectedValue?: StencilUnknown | StencilUnknown[];\n\tvalue: StencilUnknown;\n\tlabel: W3CInputValue;\n\t/** The key of the option, rendered as its native value; the field maps it back to `value`. */\n\tindex?: string | number;\n};\n\nexport type SelectOptionListFCProps = {\n\t/** Key prefix of the options in an optgroup. */\n\tpreKey?: string;\n\tdisabled?: boolean;\n\tvalue?: StencilUnknown | StencilUnknown[];\n\toptions?: SelectOption<StencilUnknown>[];\n\tOptionProps?: Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'>;\n\tOptionGroupProps?: Omit<JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>, 'label'>;\n};\n\nexport type SelectFCProps = DefaultInputProps<SelectAttributes> &\n\tSelectOptionListFCProps & {\n\t\ttouched?: boolean;\n\t\tmsg?: Stringified<MsgPropType>;\n\t} & {\n\t\t[key: `aria-${string}`]: unknown;\n\t\t[key: `data-${string}`]: unknown;\n\t};\n\n/**\n * Native `<option>`. Its native value is the key (`-<index>`, in an optgroup `-<group>-<index>`), not\n * the option value, because a native value can only be a string.\n */\nexport const SelectOptionFC: FC<SelectOptionFCProps> = ({ class: classNames, index, selectedValue, selected, value, label, disabled, ...other }) => {\n\tconst selectedValues = selectedValue === undefined ? [] : Array.isArray(selectedValue) ? selectedValue : [selectedValue];\n\tconst isSelected = selected || selectedValues.includes(value);\n\n\treturn (\n\t\t<option\n\t\t\tclass={clsx(selectBem('option', { selected: Boolean(isSelected), disabled: Boolean(disabled) }), classNames)}\n\t\t\tselected={isSelected}\n\t\t\tdisabled={disabled}\n\t\t\tvalue={index}\n\t\t\t{...other}\n\t\t>\n\t\t\t{label}\n\t\t</option>\n\t);\n};\n\n/** Options and optgroups of a native select, recursively; an optgroup prefixes the keys of its options. */\nexport const SelectOptionListFC: FC<SelectOptionListFCProps> = ({\n\tpreKey,\n\toptions,\n\tdisabled,\n\tvalue: selectedValue,\n\tOptionProps = {},\n\tOptionGroupProps = {},\n}) => {\n\tif (!options?.length) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst key = [preKey, `-${index}`].join('');\n\n\t\t\t\tif ('options' in option) {\n\t\t\t\t\tif (!option.options?.length) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst isOptgroupDisabled = Boolean(disabled || option.disabled);\n\t\t\t\t\tconst { label, ...other } = option;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<optgroup\n\t\t\t\t\t\t\tclass={selectBem('optgroup', { disabled: isOptgroupDisabled })}\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t{...OptionGroupProps}\n\t\t\t\t\t\t\tlabel={label?.toString()}\n\t\t\t\t\t\t\tdisabled={isOptgroupDisabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SelectOptionListFC\n\t\t\t\t\t\t\t\tOptionGroupProps={OptionGroupProps}\n\t\t\t\t\t\t\t\tOptionProps={OptionProps}\n\t\t\t\t\t\t\t\tvalue={selectedValue}\n\t\t\t\t\t\t\t\tpreKey={key}\n\t\t\t\t\t\t\t\t{...other}\n\t\t\t\t\t\t\t\tdisabled={isOptgroupDisabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</optgroup>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SelectOptionFC key={key} {...OptionProps} index={key} selectedValue={selectedValue} {...option} disabled={Boolean(disabled || option.disabled)} />\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t})}\n\t\t</>\n\t);\n};\n\n/**\n * Native `<select>` of a form field with its options. The select itself is the root of the\n * `kol-select` block, so the block classes are set on it directly instead of through `BemRootNodeFC`.\n */\nexport const SelectFC: FC<SelectFCProps> = (props) => {\n\tconst {\n\t\tclass: classNames,\n\t\tmsg,\n\t\ttouched,\n\t\tdisabled,\n\t\trequired,\n\t\toptions,\n\t\tvalue,\n\t\tOptionProps,\n\t\tOptionGroupProps,\n\t\tariaDescribedBy,\n\t\thideLabel,\n\t\tlabel,\n\t\t...other\n\t} = props;\n\n\tconst selectProps: SelectAttributes = {\n\t\tclass: clsx(\n\t\t\tselectBem({\n\t\t\t\tdisabled: Boolean(disabled),\n\t\t\t\trequired: Boolean(required),\n\t\t\t\ttouched: Boolean(touched),\n\t\t\t\t...(isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg) as string]: true } : {}),\n\t\t\t}),\n\t\t\tclassNames,\n\t\t),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\t...getDefaultInputProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<select {...selectProps}>\n\t\t\t<SelectOptionListFC OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} disabled={disabled} options={options} value={value} />\n\t\t</select>\n\t);\n};\n"]}

package/dist/collection/internal/functional-components/form-field/select.test.js

@@ -28,16 +28,104 @@ describe('SelectFC', () => {
         const page = await renderFunctionalComponentToSpecPage(() => h(SelectFC, Object.assign({ id: "id", label: "Label", options: options }, props)));
         expect(page.root).toMatchSnapshot();
     });
+    it('forwards disabled to optgroups and options when select is disabled', async () => {
+        var _a, _b, _c, _d, _e;
+        const optgroupOptions = [
+            {
+                label: 'Group 1',
+                options: [{ label: 'Option 1', value: '1' }],
+            },
+        ];
+        const page = await renderFunctionalComponentToSpecPage(() => h(SelectFC, { disabled: true, id: "test", label: "Label", options: optgroupOptions }));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')).toBe(true);
+        expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);
+        expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);
+        expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);
+        expect((_e = page.root) === null || _e === void 0 ? void 0 : _e.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);
+    });
 });
 describe('SelectOptionListFC', () => {
     it('renders nothing without options', async () => {
         const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: [] }))));
         expect(page.root).toMatchSnapshot();
     });
+    it('does not render an optgroup without options', async () => {
+        var _a;
+        const emptyGroupOptions = [
+            {
+                label: 'Empty Group',
+                options: [],
+            },
+        ];
+        const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: emptyGroupOptions }))));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelector('optgroup')).toBeNull();
+    });
     it('disables the optgroups and prefixes the keys', async () => {
         const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: options, preKey: "-9", disabled: true }))));
         expect(page.root).toMatchSnapshot();
     });
+    it('renders with disabled option group', async () => {
+        var _a, _b, _c, _d;
+        const disabledGroupOptions = [
+            {
+                disabled: true,
+                label: 'Group 1',
+                options: [{ label: 'Option 1', value: '1' }],
+            },
+        ];
+        const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: disabledGroupOptions }))));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);
+        expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);
+        expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);
+        expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);
+    });
+    it('renders option with disabled: false inside a disabled group as disabled', async () => {
+        var _a, _b, _c, _d;
+        const disabledGroupOptions = [
+            {
+                disabled: true,
+                label: 'Group 1',
+                options: [{ disabled: false, label: 'Option 1', value: '1' }],
+            },
+        ];
+        const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: disabledGroupOptions }))));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);
+        expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);
+        expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);
+        expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);
+    });
+    it('renders option with disabled: false inside a disabled list as disabled', async () => {
+        var _a, _b;
+        const disabledListOptions = [{ disabled: false, label: 'Option 1', value: '1' }];
+        const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { disabled: true, options: disabledListOptions }))));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);
+        expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);
+    });
+    it('renders with enabled group containing a disabled option', async () => {
+        var _a, _b, _c, _d, _e, _f;
+        const mixedOptions = [
+            {
+                label: 'Group 1',
+                options: [
+                    { disabled: true, label: 'Option 1', value: '1' },
+                    { disabled: false, label: 'Option 2', value: '2' },
+                ],
+            },
+        ];
+        const page = await renderFunctionalComponentToSpecPage(() => (h("select", null, h(SelectOptionListFC, { options: mixedOptions }))));
+        expect(page.root).toMatchSnapshot();
+        expect((_a = page.root) === null || _a === void 0 ? void 0 : _a.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(false);
+        expect((_b = page.root) === null || _b === void 0 ? void 0 : _b.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(false);
+        expect((_c = page.root) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);
+        expect((_d = page.root) === null || _d === void 0 ? void 0 : _d.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);
+        expect((_e = page.root) === null || _e === void 0 ? void 0 : _e.querySelectorAll('option')[1].hasAttribute('disabled')).toBe(false);
+        expect((_f = page.root) === null || _f === void 0 ? void 0 : _f.querySelectorAll('option')[1].classList.contains('kol-select__option--disabled')).toBe(false);
+    });
 });
 describe('SelectOptionFC', () => {
     it.each([

package/dist/collection/internal/functional-components/form-field/select.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.test.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,mCAAmC,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAExE,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,OAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;AACjE,MAAM,OAAO,GAAG;IACf,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;IAC3B;QACC,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE;YACR,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;YAC3B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;SAC3C;KACD;CACD,CAAC;AAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,IAAI,CAAC;QACP,CAAC,aAAa,EAAE,EAAE,CAAC;QACnB,CAAC,kCAAkC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACpD,CAAC,0BAA0B,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QACxE,CAAC,uBAAuB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC7D,CAAC,iBAAiB,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAClD,CAAC,iCAAiC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;QAC1F,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC;KAC3C,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,IAAI,GAAG,MAAM,mCAAmC,CAAC,GAAG,EAAE,CAAC,EAAC,QAAQ,kBAAC,EAAE,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,IAAM,KAAK,EAAI,CAAC,CAAC;QAC9H,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,mCAAmC,CAAC,GAAG,EAAE,CAAC,CAC5D;YACC,EAAC,kBAAkB,IAAC,OAAO,EAAE,EAAE,GAAI,CAC3B,CACT,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC7D,MAAM,IAAI,GAAG,MAAM,mCAAmC,CAAC,GAAG,EAAE,CAAC,CAC5D;YACC,EAAC,kBAAkB,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAC,IAAI,EAAC,QAAQ,SAAG,CACrD,CACT,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,IAAI,CAAC;QACP,CAAC,yBAAyB,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAC5C,CAAC,yBAAyB,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,CAAC;QACvD,CAAC,wBAAwB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC9C,CAAC,mBAAmB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACzC,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,IAAI,GAAG,MAAM,mCAAmC,CAAC,GAAG,EAAE,CAAC,EAAC,cAAc,kBAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,IAAK,KAAK,EAAI,CAAC,CAAC;QACxH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { renderFunctionalComponentToSpecPage } from '../../../utils/testing';\nimport { SelectFC, SelectOptionFC, SelectOptionListFC } from './select';\n\nconst error = { _type: 'error' as const, _description: 'Error' };\nconst options = [\n\t{ label: 'Eins', value: 1 },\n\t{\n\t\tlabel: 'Gruppe',\n\t\toptions: [\n\t\t\t{ label: 'Zwei', value: 2 },\n\t\t\t{ label: 'Drei', value: 3, disabled: true },\n\t\t],\n\t},\n];\n\ndescribe('SelectFC', () => {\n\tit.each([\n\t\t['the default', {}],\n\t\t['a selected option in an optgroup', { value: [2] }],\n\t\t['several selected options', { multiple: true, size: 3, value: [1, 2] }],\n\t\t['disabled and required', { disabled: true, required: true }],\n\t\t['a touched error', { msg: error, touched: true }],\n\t\t['a hidden label and descriptions', { hideLabel: true, ariaDescribedBy: ['hint', 'msg'] }],\n\t\t['a merged class', { class: 'kol-custom' }],\n\t])('renders %s', async (_, props) => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => <SelectFC id=\"id\" label=\"Label\" options={options} {...props} />);\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n});\n\ndescribe('SelectOptionListFC', () => {\n\tit('renders nothing without options', async () => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={[]} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('disables the optgroups and prefixes the keys', async () => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={options} preKey=\"-9\" disabled />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n});\n\ndescribe('SelectOptionFC', () => {\n\tit.each([\n\t\t['the key as native value', { index: '-1' }],\n\t\t['a selected single value', { selectedValue: 'value' }],\n\t\t['the selected attribute', { selected: true }],\n\t\t['a disabled option', { disabled: true }],\n\t])('renders %s', async (_, props) => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => <SelectOptionFC value=\"value\" label=\"Label\" {...props} />);\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n});\n"]}
+{"version":3,"file":"select.test.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/select.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { renderFunctionalComponentToSpecPage } from '../../../utils/testing';\nimport { SelectFC, SelectOptionFC, SelectOptionListFC } from './select';\n\nconst error = { _type: 'error' as const, _description: 'Error' };\nconst options = [\n\t{ label: 'Eins', value: 1 },\n\t{\n\t\tlabel: 'Gruppe',\n\t\toptions: [\n\t\t\t{ label: 'Zwei', value: 2 },\n\t\t\t{ label: 'Drei', value: 3, disabled: true },\n\t\t],\n\t},\n];\n\ndescribe('SelectFC', () => {\n\tit.each([\n\t\t['the default', {}],\n\t\t['a selected option in an optgroup', { value: [2] }],\n\t\t['several selected options', { multiple: true, size: 3, value: [1, 2] }],\n\t\t['disabled and required', { disabled: true, required: true }],\n\t\t['a touched error', { msg: error, touched: true }],\n\t\t['a hidden label and descriptions', { hideLabel: true, ariaDescribedBy: ['hint', 'msg'] }],\n\t\t['a merged class', { class: 'kol-custom' }],\n\t])('renders %s', async (_, props) => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => <SelectFC id=\"id\" label=\"Label\" options={options} {...props} />);\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('forwards disabled to optgroups and options when select is disabled', async () => {\n\t\tconst optgroupOptions = [\n\t\t\t{\n\t\t\t\tlabel: 'Group 1',\n\t\t\t\toptions: [{ label: 'Option 1', value: '1' }],\n\t\t\t},\n\t\t];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => <SelectFC disabled={true} id=\"test\" label=\"Label\" options={optgroupOptions} />);\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);\n\t});\n});\n\ndescribe('SelectOptionListFC', () => {\n\tit('renders nothing without options', async () => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={[]} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('does not render an optgroup without options', async () => {\n\t\tconst emptyGroupOptions = [\n\t\t\t{\n\t\t\t\tlabel: 'Empty Group',\n\t\t\t\toptions: [],\n\t\t\t},\n\t\t];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={emptyGroupOptions} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.querySelector('optgroup')).toBeNull();\n\t});\n\n\tit('disables the optgroups and prefixes the keys', async () => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={options} preKey=\"-9\" disabled />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('renders with disabled option group', async () => {\n\t\tconst disabledGroupOptions = [\n\t\t\t{\n\t\t\t\tdisabled: true,\n\t\t\t\tlabel: 'Group 1',\n\t\t\t\toptions: [{ label: 'Option 1', value: '1' }],\n\t\t\t},\n\t\t];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={disabledGroupOptions} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);\n\t});\n\n\tit('renders option with disabled: false inside a disabled group as disabled', async () => {\n\t\tconst disabledGroupOptions = [\n\t\t\t{\n\t\t\t\tdisabled: true,\n\t\t\t\tlabel: 'Group 1',\n\t\t\t\toptions: [{ disabled: false, label: 'Option 1', value: '1' }],\n\t\t\t},\n\t\t];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={disabledGroupOptions} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);\n\t});\n\n\tit('renders option with disabled: false inside a disabled list as disabled', async () => {\n\t\tconst disabledListOptions = [{ disabled: false, label: 'Option 1', value: '1' }];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC disabled={true} options={disabledListOptions} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);\n\t});\n\n\tit('renders with enabled group containing a disabled option', async () => {\n\t\tconst mixedOptions = [\n\t\t\t{\n\t\t\t\tlabel: 'Group 1',\n\t\t\t\toptions: [\n\t\t\t\t\t{ disabled: true, label: 'Option 1', value: '1' },\n\t\t\t\t\t{ disabled: false, label: 'Option 2', value: '2' },\n\t\t\t\t],\n\t\t\t},\n\t\t];\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => (\n\t\t\t<select>\n\t\t\t\t<SelectOptionListFC options={mixedOptions} />\n\t\t\t</select>\n\t\t));\n\t\texpect(page.root).toMatchSnapshot();\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].hasAttribute('disabled')).toBe(false);\n\t\texpect(page.root?.querySelectorAll('optgroup')[0].classList.contains('kol-select__optgroup--disabled')).toBe(false);\n\t\texpect(page.root?.querySelectorAll('option')[0].hasAttribute('disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[0].classList.contains('kol-select__option--disabled')).toBe(true);\n\t\texpect(page.root?.querySelectorAll('option')[1].hasAttribute('disabled')).toBe(false);\n\t\texpect(page.root?.querySelectorAll('option')[1].classList.contains('kol-select__option--disabled')).toBe(false);\n\t});\n});\n\ndescribe('SelectOptionFC', () => {\n\tit.each([\n\t\t['the key as native value', { index: '-1' }],\n\t\t['a selected single value', { selectedValue: 'value' }],\n\t\t['the selected attribute', { selected: true }],\n\t\t['a disabled option', { disabled: true }],\n\t])('renders %s', async (_, props) => {\n\t\tconst page = await renderFunctionalComponentToSpecPage(() => <SelectOptionFC value=\"value\" label=\"Label\" {...props} />);\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n});\n"]}

package/dist/collection/internal/functional-components/form-field/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAkC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAsC,MAAM,iBAAiB,CAAC;AAC9G,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAe7D,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,KAAe,KAAK,EAAf,KAAK,UAAK,KAAK,EAAtH,wGAA8G,CAAQ,CAAC;IAE7H,MAAM,aAAa,iCAClB,KAAK,EAAE,IAAI,CACV,WAAW,CAAC,cAAc,CAAC,iBAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC3B,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC3B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EACzB,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,IACxB,CAAC,2BAA2B,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1F,EACF,UAAU,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IACf,oBAAoB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAC3D,KAAK,CACR,CAAC;IAEF,OAAO,gCAAc,aAAa,EAAI,CAAC;AACxC,CAAC,CAAC","sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { getMsgType, isMsgDefinedAndInputTouched, type MsgPropType, type Stringified } from '../../../schema';\nimport clsx from '../../../utils/clsx';\nimport { getBlockBem } from '../bem-root-node/block-bem';\nimport type { DefaultInputProps } from './default-input-props';\nimport { getDefaultInputProps } from './default-input-props';\n\nexport type TextAreaFCProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {\n\tvalue?: string;\n\ttouched?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n} & {\n\t[key: `aria-${string}`]: unknown;\n\t[key: `data-${string}`]: unknown;\n};\n\n/**\n * Native `<textarea>` of a form field. The textarea itself is the root of the `kol-textarea` block,\n * so the block classes are set on it directly instead of through `BemRootNodeFC`.\n */\nexport const TextAreaFC: FC<TextAreaFCProps> = (props) => {\n\tconst { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst textareaProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n\t\tclass: clsx(\n\t\t\tgetBlockBem('kol-textarea')({\n\t\t\t\tdisabled: Boolean(disabled),\n\t\t\t\trequired: Boolean(required),\n\t\t\t\ttouched: Boolean(touched),\n\t\t\t\treadonly: Boolean(readonly),\n\t\t\t\t...(isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg) as string]: true } : {}),\n\t\t\t}),\n\t\t\tclassNames,\n\t\t),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\treadonly: readonly,\n\t\t...getDefaultInputProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn <textarea {...textareaProps} />;\n};\n"]}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/form-field/textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAkC,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,UAAU,EAAE,2BAA2B,EAAsC,MAAM,iBAAiB,CAAC;AAC9G,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAgB7D,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,KAAe,KAAK,EAAf,KAAK,UAAK,KAAK,EAAtH,wGAA8G,CAAQ,CAAC;IAE7H,MAAM,aAAa,iCAClB,KAAK,EAAE,IAAI,CACV,WAAW,CAAC,cAAc,CAAC,iBAC1B,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC3B,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,EAC3B,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,EACzB,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,IACxB,CAAC,2BAA2B,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,CAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1F,EACF,UAAU,CACV,EACD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IACf,oBAAoB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GAC3D,KAAK,CACR,CAAC;IAEF,OAAO,gCAAc,aAAa,EAAI,CAAC;AACxC,CAAC,CAAC","sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { getMsgType, isMsgDefinedAndInputTouched, type MsgPropType, type Stringified } from '../../../schema';\nimport clsx from '../../../utils/clsx';\nimport { getBlockBem } from '../bem-root-node/block-bem';\nimport type { DefaultInputProps } from './default-input-props';\nimport { getDefaultInputProps } from './default-input-props';\n\nexport type TextAreaFCProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {\n\tvalue?: string;\n\ttouched?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n\tspellcheck?: boolean;\n} & {\n\t[key: `aria-${string}`]: unknown;\n\t[key: `data-${string}`]: unknown;\n};\n\n/**\n * Native `<textarea>` of a form field. The textarea itself is the root of the `kol-textarea` block,\n * so the block classes are set on it directly instead of through `BemRootNodeFC`.\n */\nexport const TextAreaFC: FC<TextAreaFCProps> = (props) => {\n\tconst { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst textareaProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n\t\tclass: clsx(\n\t\t\tgetBlockBem('kol-textarea')({\n\t\t\t\tdisabled: Boolean(disabled),\n\t\t\t\trequired: Boolean(required),\n\t\t\t\ttouched: Boolean(touched),\n\t\t\t\treadonly: Boolean(readonly),\n\t\t\t\t...(isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg) as string]: true } : {}),\n\t\t\t}),\n\t\t\tclassNames,\n\t\t),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\treadonly: readonly,\n\t\t...getDefaultInputProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn <textarea {...textareaProps} />;\n};\n"]}

package/dist/collection/internal/functional-components/toolbar/api.js.map

@@ -1 +1 @@
-{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/api.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAYzF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IACjC,QAAQ,EAAE,CAAC,uBAAuB,EAAE,gBAAgB,CAAC;IACrD,QAAQ,EAAE,CAAC,eAAe,CAAC;CACS,CAAC","sourcesContent":["import type { KolFocusOptions } from '../../../schema';\nimport { labelWithExpertSlotProp, orientationProp, toolbarItemsProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\nimport type { ToolbarButtonItem, ToolbarLinkItem } from './item';\n\n/**\n * Props configuration for the toolbar component.\n *\n * Notes on prop choices:\n * - `labelWithExpertSlotProp`, not `labelProp`: the predecessor's `validateLabel` accepted any\n *   string; `labelProp` would reject one-character labels. The toolbar has no expert slot.\n * - `orientationProp` defaults to `'horizontal'`, like the predecessor's `validateOrientation`.\n */\nexport const toolbarPropsConfig = {\n\trequired: [labelWithExpertSlotProp, toolbarItemsProp],\n\toptional: [orientationProp],\n} as const satisfies PropsConfigShape;\n\nexport type ToolbarApi = ApiFromConfig<\n\ttypeof toolbarPropsConfig,\n\t{\n\t\tMethods: {\n\t\t\tclick: () => void;\n\t\t\tfocus: (options?: KolFocusOptions) => void;\n\t\t};\n\t\tStates: {\n\t\t\t/**\n\t\t\t * Index of the item carrying the roving tabindex. `-1` while no item is enabled.\n\t\t\t */\n\t\t\tcurrentIndex: number;\n\t\t\t/**\n\t\t\t * Orchestration records for the items (everything `ButtonFC` or `LinkFC` needs, built by\n\t\t\t * `createToolbarItem`), rebuilt whenever `_items` changes.\n\t\t\t */\n\t\t\titemRecords: Array<ToolbarButtonItem | ToolbarLinkItem>;\n\t\t\t/**\n\t\t\t * The current location reported by the aria-current service, `''` until one is reported.\n\t\t\t * Drives the links' `aria-current`.\n\t\t\t */\n\t\t\tlocation: string;\n\t\t};\n\t}\n>;\n"]}
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/api.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAYzF,MAAM,CAAC,MAAM,kBAAkB,GAAG;IACjC,QAAQ,EAAE,CAAC,uBAAuB,EAAE,gBAAgB,CAAC;IACrD,QAAQ,EAAE,CAAC,eAAe,CAAC;CACS,CAAC","sourcesContent":["import type { KolFocusOptions } from '../../../schema';\nimport { labelWithExpertSlotProp, orientationProp, toolbarItemsProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\nimport type { ToolbarButtonItem, ToolbarHRItem, ToolbarLinkItem } from './item';\n\n/**\n * Props configuration for the toolbar component.\n *\n * Notes on prop choices:\n * - `labelWithExpertSlotProp`, not `labelProp`: the predecessor's `validateLabel` accepted any\n *   string; `labelProp` would reject one-character labels. The toolbar has no expert slot.\n * - `orientationProp` defaults to `'horizontal'`, like the predecessor's `validateOrientation`.\n */\nexport const toolbarPropsConfig = {\n\trequired: [labelWithExpertSlotProp, toolbarItemsProp],\n\toptional: [orientationProp],\n} as const satisfies PropsConfigShape;\n\nexport type ToolbarApi = ApiFromConfig<\n\ttypeof toolbarPropsConfig,\n\t{\n\t\tMethods: {\n\t\t\tclick: () => void;\n\t\t\tfocus: (options?: KolFocusOptions) => void;\n\t\t};\n\t\tStates: {\n\t\t\t/**\n\t\t\t * Index of the item carrying the roving tabindex. `-1` while no item is enabled.\n\t\t\t */\n\t\t\tcurrentIndex: number;\n\t\t\t/**\n\t\t\t * Orchestration records for the items (everything `ButtonFC` or `LinkFC` needs, built by\n\t\t\t * `createToolbarItem`), rebuilt whenever `_items` changes.\n\t\t\t */\n\t\t\titemRecords: Array<ToolbarButtonItem | ToolbarLinkItem | ToolbarHRItem>;\n\t\t\t/**\n\t\t\t * The current location reported by the aria-current service, `''` until one is reported.\n\t\t\t * Drives the links' `aria-current`.\n\t\t\t */\n\t\t\tlocation: string;\n\t\t};\n\t}\n>;\n"]}

package/dist/collection/internal/functional-components/toolbar/component.js

@@ -9,7 +9,7 @@ import { LinkFC } from "../link/component";
 const BEM_CLASS_TOOLBAR__ITEM = bem.forBlock('kol-toolbar')('item');
 const renderItem = (record, index, currentIndex, location) => {
     const tabIndex = index === currentIndex && !record.disabled ? 0 : -1;
-    return (h("div", { class: BEM_CLASS_TOOLBAR__ITEM, key: index, ref: record.refWrapper }, record.type === 'link' ? h(LinkFC, Object.assign({}, record.getFcProps(tabIndex, location))) : h(ButtonFC, Object.assign({}, record.getFcProps(tabIndex)))));
+    return (h("div", { class: BEM_CLASS_TOOLBAR__ITEM, key: index, ref: record.refWrapper }, record.type === 'link' ? (h(LinkFC, Object.assign({}, record.getFcProps(tabIndex, location)))) : record.type === 'button' ? (h(ButtonFC, Object.assign({}, record.getFcProps(tabIndex)))) : (h("hr", null))));
 };
 export const ToolbarFC = ({ class: hostClass, currentIndex, itemRecords, label, location, orientation }) => (h(BemRootNodeFC, { block: "kol-toolbar", class: hostClass, modifiers: { 'orientation-horizontal': orientation === 'horizontal', 'orientation-vertical': orientation === 'vertical' }, role: "toolbar", "aria-label": label }, itemRecords.map((record, index) => renderItem(record, index, currentIndex, location))));
 //# sourceMappingURL=component.js.map

package/dist/collection/internal/functional-components/toolbar/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAI3C,MAAM,uBAAuB,GAAG,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAYpE,MAAM,UAAU,GAAG,CAAC,MAA2C,EAAE,KAAa,EAAE,YAAoB,EAAE,QAAgB,EAAE,EAAE;IACzH,MAAM,QAAQ,GAAG,KAAK,KAAK,YAAY,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,OAAO,CACN,WAAK,KAAK,EAAE,uBAAuB,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,UAAU,IACrE,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,EAAC,MAAM,oBAAK,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAI,CAAC,CAAC,CAAC,EAAC,QAAQ,oBAAK,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAI,CAC1H,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAC/H,EAAC,aAAa,IACb,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,EAAE,wBAAwB,EAAE,WAAW,KAAK,YAAY,EAAE,sBAAsB,EAAE,WAAW,KAAK,UAAU,EAAE,EACzH,IAAI,EAAC,SAAS,gBACF,KAAK,IAEhB,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CACvE,CAChB,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { BemRootNodeFC } from '../bem-root-node/component';\nimport { ButtonFC } from '../button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport { LinkFC } from '../link/component';\nimport type { ToolbarApi } from './api';\nimport type { ToolbarButtonItem, ToolbarLinkItem } from './item';\n\nconst BEM_CLASS_TOOLBAR__ITEM = bem.forBlock('kol-toolbar')('item');\n\ntype ToolbarFCProps = Pick<FunctionalComponentProps<ToolbarApi>, 'currentIndex' | 'itemRecords' | 'label' | 'location' | 'orientation'> & {\n\tclass?: string;\n};\n\n/**\n * Renders one entry. `.kol-toolbar__item` stays on a wrapper around the functional component\n * rather than merging onto its root: the themes address it as an ancestor of the button's and\n * link's inner elements (`.kol-toolbar__item:first-child .kol-button__text`), and a wrapper in\n * the place of the former custom element keeps the flex-item box tree unchanged.\n */\nconst renderItem = (record: ToolbarButtonItem | ToolbarLinkItem, index: number, currentIndex: number, location: string) => {\n\tconst tabIndex = index === currentIndex && !record.disabled ? 0 : -1;\n\n\treturn (\n\t\t<div class={BEM_CLASS_TOOLBAR__ITEM} key={index} ref={record.refWrapper}>\n\t\t\t{record.type === 'link' ? <LinkFC {...record.getFcProps(tabIndex, location)} /> : <ButtonFC {...record.getFcProps(tabIndex)} />}\n\t\t</div>\n\t);\n};\n\nexport const ToolbarFC: FC<ToolbarFCProps> = ({ class: hostClass, currentIndex, itemRecords, label, location, orientation }) => (\n\t<BemRootNodeFC\n\t\tblock=\"kol-toolbar\"\n\t\tclass={hostClass}\n\t\tmodifiers={{ 'orientation-horizontal': orientation === 'horizontal', 'orientation-vertical': orientation === 'vertical' }}\n\t\trole=\"toolbar\"\n\t\taria-label={label}\n\t>\n\t\t{itemRecords.map((record, index) => renderItem(record, index, currentIndex, location))}\n\t</BemRootNodeFC>\n);\n"]}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAI3C,MAAM,uBAAuB,GAAG,GAAG,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAYpE,MAAM,UAAU,GAAG,CAAC,MAA2D,EAAE,KAAa,EAAE,YAAoB,EAAE,QAAgB,EAAE,EAAE;IACzI,MAAM,QAAQ,GAAG,KAAK,KAAK,YAAY,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAErE,OAAO,CACN,WAAK,KAAK,EAAE,uBAAuB,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,UAAU,IACrE,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CACzB,EAAC,MAAM,oBAAK,MAAM,CAAC,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC,EAAI,CACrD,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,EAAC,QAAQ,oBAAK,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAI,CAC7C,CAAC,CAAC,CAAC,CACH,aAAM,CACN,CACI,CACN,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAuB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAC/H,EAAC,aAAa,IACb,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,EAAE,wBAAwB,EAAE,WAAW,KAAK,YAAY,EAAE,sBAAsB,EAAE,WAAW,KAAK,UAAU,EAAE,EACzH,IAAI,EAAC,SAAS,gBACF,KAAK,IAEhB,WAAW,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CACvE,CAChB,CAAC","sourcesContent":["import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport { bem } from '../../../schema/bem-registry';\nimport { BemRootNodeFC } from '../bem-root-node/component';\nimport { ButtonFC } from '../button/component';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport { LinkFC } from '../link/component';\nimport type { ToolbarApi } from './api';\nimport type { ToolbarButtonItem, ToolbarHRItem, ToolbarLinkItem } from './item';\n\nconst BEM_CLASS_TOOLBAR__ITEM = bem.forBlock('kol-toolbar')('item');\n\ntype ToolbarFCProps = Pick<FunctionalComponentProps<ToolbarApi>, 'currentIndex' | 'itemRecords' | 'label' | 'location' | 'orientation'> & {\n\tclass?: string;\n};\n\n/**\n * Renders one entry. `.kol-toolbar__item` stays on a wrapper around the functional component\n * rather than merging onto its root: the themes address it as an ancestor of the button's and\n * link's inner elements (`.kol-toolbar__item:first-child .kol-button__text`), and a wrapper in\n * the place of the former custom element keeps the flex-item box tree unchanged.\n */\nconst renderItem = (record: ToolbarButtonItem | ToolbarLinkItem | ToolbarHRItem, index: number, currentIndex: number, location: string) => {\n\tconst tabIndex = index === currentIndex && !record.disabled ? 0 : -1;\n\n\treturn (\n\t\t<div class={BEM_CLASS_TOOLBAR__ITEM} key={index} ref={record.refWrapper}>\n\t\t\t{record.type === 'link' ? (\n\t\t\t\t<LinkFC {...record.getFcProps(tabIndex, location)} />\n\t\t\t) : record.type === 'button' ? (\n\t\t\t\t<ButtonFC {...record.getFcProps(tabIndex)} />\n\t\t\t) : (\n\t\t\t\t<hr />\n\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport const ToolbarFC: FC<ToolbarFCProps> = ({ class: hostClass, currentIndex, itemRecords, label, location, orientation }) => (\n\t<BemRootNodeFC\n\t\tblock=\"kol-toolbar\"\n\t\tclass={hostClass}\n\t\tmodifiers={{ 'orientation-horizontal': orientation === 'horizontal', 'orientation-vertical': orientation === 'vertical' }}\n\t\trole=\"toolbar\"\n\t\taria-label={label}\n\t>\n\t\t{itemRecords.map((record, index) => renderItem(record, index, currentIndex, location))}\n\t</BemRootNodeFC>\n);\n"]}

package/dist/collection/internal/functional-components/toolbar/item.js

@@ -11,7 +11,15 @@ import { BaseWebComponent } from "../base-web-component";
 import { resolveButtonProps } from "../button/resolve-props";
 import { resolveLinkProps } from "../link/resolve-props";
 import { TooltipBehavior } from "../tooltip/behavior";
-export const createToolbarItem = (item, getFlagHost) => item.type === 'link' ? createLinkItem(item, getFlagHost) : createButtonItem(item, getFlagHost);
+export const createToolbarItem = (item, getFlagHost) => {
+    if (item.type === 'link') {
+        return createLinkItem(item, getFlagHost);
+    }
+    else if (item.type === 'button') {
+        return createButtonItem(item, getFlagHost);
+    }
+    return createHRItem();
+};
 const createButtonItem = (item, getFlagHost) => {
     const tooltipBehavior = new TooltipBehavior(BaseWebComponent.stateLess);
     const ctaRef = createCtaRef();
@@ -114,4 +122,15 @@ const createLinkItem = (item, getFlagHost) => {
         destroy: () => tooltipBehavior.destroy(),
     };
 };
+const createHRItem = () => {
+    const ctaRef = createCtaRef();
+    return {
+        type: 'hr',
+        disabled: true,
+        getElement: () => ctaRef.el,
+        refWrapper: () => { },
+        syncListeners: () => { },
+        destroy: () => { },
+    };
+};
 //# sourceMappingURL=item.js.map

package/dist/collection/internal/functional-components/toolbar/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/item.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFeatureFlag } from 'adopted-style-sheets';\n\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../../../components/form/controller';\nimport type { ToolbarItemPropType } from '../../../schema';\nimport { setEventTarget } from '../../../schema';\nimport { nonce } from '../../../utils/dev.utils';\nimport { createCtaRef } from '../../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../../utils/events';\nimport { BaseWebComponent } from '../base-web-component';\nimport type { ButtonApi } from '../button/api';\nimport { resolveButtonProps } from '../button/resolve-props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { LinkApi } from '../link/api';\nimport type { EmbeddedLinkProps } from '../link/resolve-props';\nimport { resolveLinkProps } from '../link/resolve-props';\nimport { TooltipBehavior } from '../tooltip/behavior';\n\ntype ToolbarItemBase = {\n\t/** Whether the item refuses interaction; the roving tabindex skips it. */\n\tdisabled: boolean;\n\t/** The item's interactive element, once rendered. */\n\tgetElement(): HTMLAnchorElement | HTMLButtonElement | undefined;\n\t/**\n\t * Ref for the item's wrapper. The public `KolEvent` DOM events are dispatched on it, i.e. on\n\t * the node that the transitional `kol-button-wc`/`kol-link-wc` host occupied before.\n\t */\n\trefWrapper: (element?: HTMLElement) => void;\n\t/** Re-registers the tooltip listeners on the current element. Call from `componentDidRender`. */\n\tsyncListeners(): void;\n\t/** Tears down the tooltip behavior. Call when the item is replaced or the toolbar disconnects. */\n\tdestroy(): void;\n};\n\nexport type ToolbarButtonItem = ToolbarItemBase & {\n\ttype: 'button';\n\t/** Fully resolved `ButtonFC` props for the given roving tabindex. */\n\tgetFcProps(tabIndex: number): FunctionalComponentProps<ButtonApi>;\n};\n\nexport type ToolbarLinkItem = ToolbarItemBase & {\n\ttype: 'link';\n\t/**\n\t * Fully resolved `LinkFC` props for the given roving tabindex and current location (`''` while\n\t * no location has been reported).\n\t */\n\tgetFcProps(tabIndex: number, location: string): FunctionalComponentProps<LinkApi>;\n};\n\n/**\n * One orchestrated toolbar entry: everything `ButtonFC` or `LinkFC` needs to render it, plus the\n * lifecycle hooks the toolbar has to drive — what the transitional `kol-button-wc` and\n * `kol-link-wc` did per entry before the toolbar rendered the functional components directly.\n *\n * A plain object with closures, like `breadcrumb/link-item.ts` and `popover-button/item.ts`, so\n * the toolbar rebuilds it cheaply whenever `_items` changes while tooltip behavior and refs\n * survive by reference.\n *\n * The toolbar's own defaults — `_inline: false` and the theme's `buttonVariantDefault` — apply\n * only where the entry leaves the prop unset, and an entry's own `_tabIndex` wins over the roving\n * tabindex, exactly like the predecessor's `{...defaults} {...item}` spread.\n */\nexport const createToolbarItem = (item: ToolbarItemPropType, getFlagHost: () => HTMLElement | undefined): ToolbarButtonItem | ToolbarLinkItem =>\n\titem.type === 'link' ? createLinkItem(item, getFlagHost) : createButtonItem(item, getFlagHost);\n\nconst createButtonItem = (item: Extract<ToolbarItemPropType, { type: 'button' }>, getFlagHost: () => HTMLElement | undefined): ToolbarButtonItem => {\n\tconst tooltipBehavior = new TooltipBehavior(BaseWebComponent.stateLess);\n\tconst ctaRef = createCtaRef<HTMLButtonElement>();\n\tconst ariaDescriptionId = nonce();\n\tlet wrapper: HTMLElement | undefined;\n\n\tconst props = resolveButtonProps(item, getFlagHost());\n\tconst value = item._value;\n\n\ttooltipBehavior.componentWillLoad({ label: props.label, align: props.tooltipAlign });\n\n\tconst dispatch = (event: KolEvent, detail?: unknown): void => {\n\t\tif (wrapper) {\n\t\t\tdispatchDomEvent(wrapper, event, detail);\n\t\t}\n\t};\n\n\tconst handleClick = (event: MouseEvent): void => {\n\t\tevent.stopPropagation();\n\t\ttooltipBehavior.hideTooltip();\n\n\t\tif (props.type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({ form: wrapper, ref: ctaRef.el });\n\t\t} else if (props.type === 'reset') {\n\t\t\tpropagateResetEventToForm({ form: wrapper, ref: ctaRef.el });\n\t\t} else if (typeof props.on.onClick === 'function') {\n\t\t\tsetEventTarget(event, ctaRef.el);\n\t\t\tprops.on.onClick(event, value);\n\t\t}\n\n\t\tdispatch(KolEvent.click, value);\n\t};\n\n\tconst handleMouseDown = (event: MouseEvent): void => {\n\t\tprops.on.onMouseDown?.(event);\n\t\tdispatch(KolEvent.mousedown);\n\t};\n\n\tconst handleFocus = (event: FocusEvent): void => {\n\t\tprops.on.onFocus?.(event);\n\t\tdispatch(KolEvent.focus);\n\t};\n\n\tconst handleBlur = (event: FocusEvent): void => {\n\t\tprops.on.onBlur?.(event);\n\t\tdispatch(KolEvent.blur);\n\t};\n\n\treturn {\n\t\ttype: 'button',\n\t\tdisabled: props.disabled,\n\t\tgetElement: () => ctaRef.el,\n\t\tgetFcProps: (tabIndex) => ({\n\t\t\t...props,\n\t\t\tariaDescriptionId,\n\t\t\thandleBlur,\n\t\t\thandleClick,\n\t\t\thandleFocus,\n\t\t\thandleMouseDown,\n\t\t\trefButton: ctaRef,\n\t\t\trefTooltip: tooltipBehavior.setTooltipElementRef,\n\t\t\ttabIndex: typeof item._tabIndex === 'number' ? props.tabIndex : tabIndex,\n\t\t}),\n\t\trefWrapper: (element) => {\n\t\t\twrapper = element;\n\t\t},\n\t\tsyncListeners: () => {\n\t\t\tif (ctaRef.el) {\n\t\t\t\ttooltipBehavior.syncListeners(undefined, ctaRef.el, true);\n\t\t\t}\n\t\t},\n\t\tdestroy: () => tooltipBehavior.destroy(),\n\t};\n};\n\nconst createLinkItem = (item: Extract<ToolbarItemPropType, { type: 'link' }>, getFlagHost: () => HTMLElement | undefined): ToolbarLinkItem => {\n\tconst tooltipBehavior = new TooltipBehavior(BaseWebComponent.stateLess);\n\tconst ctaRef = createCtaRef<HTMLAnchorElement>();\n\tconst ariaDescriptionId = nonce();\n\tlet wrapper: HTMLElement | undefined;\n\n\tconst link: EmbeddedLinkProps = item;\n\tconst props = resolveLinkProps({\n\t\t...link,\n\t\t_inline: link._inline ?? false,\n\t\t_variant: link._variant ?? getFeatureFlag('buttonVariantDefault', getFlagHost()) ?? 'normal',\n\t});\n\n\t// A link without a label shows its href, and so does its tooltip.\n\ttooltipBehavior.componentWillLoad({ label: props.label.length > 0 ? props.label : props.href, align: props.tooltipAlign });\n\n\tconst handleAnchorClick = (event: Event): void => {\n\t\ttooltipBehavior.hideTooltip();\n\t\tif (props.disabled) {\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\t\tif (typeof props.on.onClick === 'function') {\n\t\t\tsetEventTarget(event, ctaRef.el);\n\t\t\tprops.on.onClick(event, props.href);\n\t\t}\n\t\tif (wrapper) {\n\t\t\tdispatchDomEvent(wrapper, KolEvent.click, props.href);\n\t\t}\n\t};\n\n\treturn {\n\t\ttype: 'link',\n\t\tdisabled: props.disabled,\n\t\tgetElement: () => ctaRef.el,\n\t\tgetFcProps: (tabIndex, location) => ({\n\t\t\t...props,\n\t\t\tariaCurrent: location !== '' && location === props.href ? props.ariaCurrentValue : '',\n\t\t\tariaDescriptionId,\n\t\t\texpertSlot: item._label === '',\n\t\t\thandleAnchorClick,\n\t\t\trefAnchor: ctaRef,\n\t\t\trefTooltip: tooltipBehavior.setTooltipElementRef,\n\t\t\ttabIndex: typeof item._tabIndex === 'number' ? props.tabIndex : tabIndex,\n\t\t}),\n\t\trefWrapper: (element) => {\n\t\t\twrapper = element;\n\t\t},\n\t\tsyncListeners: () => {\n\t\t\tif (ctaRef.el) {\n\t\t\t\ttooltipBehavior.syncListeners(undefined, ctaRef.el, true);\n\t\t\t}\n\t\t},\n\t\tdestroy: () => tooltipBehavior.destroy(),\n\t};\n};\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/internal/functional-components/toolbar/item.ts"],"names":[],"mappings":"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","sourcesContent":["import { getFeatureFlag } from 'adopted-style-sheets';\n\nimport { propagateResetEventToForm, propagateSubmitEventToForm } from '../../../components/form/controller';\nimport type { ToolbarItemPropType } from '../../../schema';\nimport { setEventTarget } from '../../../schema';\nimport { nonce } from '../../../utils/dev.utils';\nimport { createCtaRef } from '../../../utils/element-interaction';\nimport { dispatchDomEvent, KolEvent } from '../../../utils/events';\nimport { BaseWebComponent } from '../base-web-component';\nimport type { ButtonApi } from '../button/api';\nimport { resolveButtonProps } from '../button/resolve-props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { LinkApi } from '../link/api';\nimport type { EmbeddedLinkProps } from '../link/resolve-props';\nimport { resolveLinkProps } from '../link/resolve-props';\nimport { TooltipBehavior } from '../tooltip/behavior';\n\ntype ToolbarItemBase = {\n\t/** Whether the item refuses interaction; the roving tabindex skips it. */\n\tdisabled: boolean;\n\t/** The item's interactive element, once rendered. */\n\tgetElement(): HTMLAnchorElement | HTMLButtonElement | HTMLHRElement | undefined;\n\t/**\n\t * Ref for the item's wrapper. The public `KolEvent` DOM events are dispatched on it, i.e. on\n\t * the node that the transitional `kol-button-wc`/`kol-link-wc` host occupied before.\n\t */\n\trefWrapper: (element?: HTMLElement) => void;\n\t/** Re-registers the tooltip listeners on the current element. Call from `componentDidRender`. */\n\tsyncListeners(): void;\n\t/** Tears down the tooltip behavior. Call when the item is replaced or the toolbar disconnects. */\n\tdestroy(): void;\n};\n\nexport type ToolbarButtonItem = ToolbarItemBase & {\n\ttype: 'button';\n\t/** Fully resolved `ButtonFC` props for the given roving tabindex. */\n\tgetFcProps(tabIndex: number): FunctionalComponentProps<ButtonApi>;\n};\n\nexport type ToolbarLinkItem = ToolbarItemBase & {\n\ttype: 'link';\n\t/**\n\t * Fully resolved `LinkFC` props for the given roving tabindex and current location (`''` while\n\t * no location has been reported).\n\t */\n\tgetFcProps(tabIndex: number, location: string): FunctionalComponentProps<LinkApi>;\n};\n\nexport type ToolbarHRItem = ToolbarItemBase & {\n\ttype: 'hr';\n};\n\n/**\n * One orchestrated toolbar entry: everything `ButtonFC` or `LinkFC` needs to render it, plus the\n * lifecycle hooks the toolbar has to drive — what the transitional `kol-button-wc` and\n * `kol-link-wc` did per entry before the toolbar rendered the functional components directly.\n *\n * A plain object with closures, like `breadcrumb/link-item.ts` and `popover-button/item.ts`, so\n * the toolbar rebuilds it cheaply whenever `_items` changes while tooltip behavior and refs\n * survive by reference.\n *\n * The toolbar's own defaults — `_inline: false` and the theme's `buttonVariantDefault` — apply\n * only where the entry leaves the prop unset, and an entry's own `_tabIndex` wins over the roving\n * tabindex, exactly like the predecessor's `{...defaults} {...item}` spread.\n */\nexport const createToolbarItem = (\n\titem: ToolbarItemPropType,\n\tgetFlagHost: () => HTMLElement | undefined,\n): ToolbarButtonItem | ToolbarLinkItem | ToolbarHRItem => {\n\tif (item.type === 'link') {\n\t\treturn createLinkItem(item, getFlagHost);\n\t} else if (item.type === 'button') {\n\t\treturn createButtonItem(item, getFlagHost);\n\t}\n\treturn createHRItem();\n};\n\nconst createButtonItem = (item: Extract<ToolbarItemPropType, { type: 'button' }>, getFlagHost: () => HTMLElement | undefined): ToolbarButtonItem => {\n\tconst tooltipBehavior = new TooltipBehavior(BaseWebComponent.stateLess);\n\tconst ctaRef = createCtaRef<HTMLButtonElement>();\n\tconst ariaDescriptionId = nonce();\n\tlet wrapper: HTMLElement | undefined;\n\n\tconst props = resolveButtonProps(item, getFlagHost());\n\tconst value = item._value;\n\n\ttooltipBehavior.componentWillLoad({ label: props.label, align: props.tooltipAlign });\n\n\tconst dispatch = (event: KolEvent, detail?: unknown): void => {\n\t\tif (wrapper) {\n\t\t\tdispatchDomEvent(wrapper, event, detail);\n\t\t}\n\t};\n\n\tconst handleClick = (event: MouseEvent): void => {\n\t\tevent.stopPropagation();\n\t\ttooltipBehavior.hideTooltip();\n\n\t\tif (props.type === 'submit') {\n\t\t\tpropagateSubmitEventToForm({ form: wrapper, ref: ctaRef.el });\n\t\t} else if (props.type === 'reset') {\n\t\t\tpropagateResetEventToForm({ form: wrapper, ref: ctaRef.el });\n\t\t} else if (typeof props.on.onClick === 'function') {\n\t\t\tsetEventTarget(event, ctaRef.el);\n\t\t\tprops.on.onClick(event, value);\n\t\t}\n\n\t\tdispatch(KolEvent.click, value);\n\t};\n\n\tconst handleMouseDown = (event: MouseEvent): void => {\n\t\tprops.on.onMouseDown?.(event);\n\t\tdispatch(KolEvent.mousedown);\n\t};\n\n\tconst handleFocus = (event: FocusEvent): void => {\n\t\tprops.on.onFocus?.(event);\n\t\tdispatch(KolEvent.focus);\n\t};\n\n\tconst handleBlur = (event: FocusEvent): void => {\n\t\tprops.on.onBlur?.(event);\n\t\tdispatch(KolEvent.blur);\n\t};\n\n\treturn {\n\t\ttype: 'button',\n\t\tdisabled: props.disabled,\n\t\tgetElement: () => ctaRef.el,\n\t\tgetFcProps: (tabIndex) => ({\n\t\t\t...props,\n\t\t\tariaDescriptionId,\n\t\t\thandleBlur,\n\t\t\thandleClick,\n\t\t\thandleFocus,\n\t\t\thandleMouseDown,\n\t\t\trefButton: ctaRef,\n\t\t\trefTooltip: tooltipBehavior.setTooltipElementRef,\n\t\t\ttabIndex: typeof item._tabIndex === 'number' ? props.tabIndex : tabIndex,\n\t\t}),\n\t\trefWrapper: (element) => {\n\t\t\twrapper = element;\n\t\t},\n\t\tsyncListeners: () => {\n\t\t\tif (ctaRef.el) {\n\t\t\t\ttooltipBehavior.syncListeners(undefined, ctaRef.el, true);\n\t\t\t}\n\t\t},\n\t\tdestroy: () => tooltipBehavior.destroy(),\n\t};\n};\n\nconst createLinkItem = (item: Extract<ToolbarItemPropType, { type: 'link' }>, getFlagHost: () => HTMLElement | undefined): ToolbarLinkItem => {\n\tconst tooltipBehavior = new TooltipBehavior(BaseWebComponent.stateLess);\n\tconst ctaRef = createCtaRef<HTMLAnchorElement>();\n\tconst ariaDescriptionId = nonce();\n\tlet wrapper: HTMLElement | undefined;\n\n\tconst link: EmbeddedLinkProps = item;\n\tconst props = resolveLinkProps({\n\t\t...link,\n\t\t_inline: link._inline ?? false,\n\t\t_variant: link._variant ?? getFeatureFlag('buttonVariantDefault', getFlagHost()) ?? 'normal',\n\t});\n\n\t// A link without a label shows its href, and so does its tooltip.\n\ttooltipBehavior.componentWillLoad({ label: props.label.length > 0 ? props.label : props.href, align: props.tooltipAlign });\n\n\tconst handleAnchorClick = (event: Event): void => {\n\t\ttooltipBehavior.hideTooltip();\n\t\tif (props.disabled) {\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\t\tif (typeof props.on.onClick === 'function') {\n\t\t\tsetEventTarget(event, ctaRef.el);\n\t\t\tprops.on.onClick(event, props.href);\n\t\t}\n\t\tif (wrapper) {\n\t\t\tdispatchDomEvent(wrapper, KolEvent.click, props.href);\n\t\t}\n\t};\n\n\treturn {\n\t\ttype: 'link',\n\t\tdisabled: props.disabled,\n\t\tgetElement: () => ctaRef.el,\n\t\tgetFcProps: (tabIndex, location) => ({\n\t\t\t...props,\n\t\t\tariaCurrent: location !== '' && location === props.href ? props.ariaCurrentValue : '',\n\t\t\tariaDescriptionId,\n\t\t\texpertSlot: item._label === '',\n\t\t\thandleAnchorClick,\n\t\t\trefAnchor: ctaRef,\n\t\t\trefTooltip: tooltipBehavior.setTooltipElementRef,\n\t\t\ttabIndex: typeof item._tabIndex === 'number' ? props.tabIndex : tabIndex,\n\t\t}),\n\t\trefWrapper: (element) => {\n\t\t\twrapper = element;\n\t\t},\n\t\tsyncListeners: () => {\n\t\t\tif (ctaRef.el) {\n\t\t\t\ttooltipBehavior.syncListeners(undefined, ctaRef.el, true);\n\t\t\t}\n\t\t},\n\t\tdestroy: () => tooltipBehavior.destroy(),\n\t};\n};\n\nconst createHRItem = (): ToolbarHRItem => {\n\tconst ctaRef = createCtaRef<HTMLHRElement>();\n\n\treturn {\n\t\ttype: 'hr',\n\t\tdisabled: true,\n\t\tgetElement: () => ctaRef.el,\n\t\trefWrapper: () => {},\n\t\tsyncListeners: () => {},\n\t\tdestroy: () => {},\n\t};\n};\n"]}

package/dist/collection/schema/props/toolbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar-items.js","sourceRoot":"","sources":["../../../src/schema/props/toolbar-items.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAoB/F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,EAAQ,EAAE;IAChH,yBAAyB,CAAC,KAAK,EAAE,GAAG,EAAE;QACrC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE;YAC/B,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE,CAAC;gBAClC,KAAK,GAAG,EAAE,CAAC;YACZ,CAAC;YACD,IAAI,CAAC;gBACJ,KAAK,GAAG,SAAS,CAAwB,KAAK,CAAC,CAAC;YACjD,CAAC;YAAC,WAAM,CAAC;YAET,CAAC;YACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,KAA0B,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,CAAC;gBACtH,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;YACtC,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { InternalButtonProps, LinkProps } from '../../schema';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\n\n/* types */\nexport type ToolbarItemPropType =\n\t| ({\n\t\t\ttype: 'button';\n\t  } & InternalButtonProps)\n\t| ({\n\t\t\ttype: 'link';\n\t  } & LinkProps);\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t} catch {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n"]}
+{"version":3,"file":"toolbar-items.js","sourceRoot":"","sources":["../../../src/schema/props/toolbar-items.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAuB/F,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B,EAAQ,EAAE;IAChH,yBAAyB,CAAC,KAAK,EAAE,GAAG,EAAE;QACrC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE;YAC/B,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE,CAAC;gBAClC,KAAK,GAAG,EAAE,CAAC;YACZ,CAAC;YACD,IAAI,CAAC;gBACJ,KAAK,GAAG,SAAS,CAAwB,KAAK,CAAC,CAAC;YACjD,CAAC;YAAC,WAAM,CAAC;YAET,CAAC;YACD,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,KAA0B,EAAE,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE,CAAC;gBACtH,QAAQ,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;YACtC,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { InternalButtonProps, LinkProps } from '../../schema';\nimport { emptyStringByArrayHandler, objectObjectHandler, parseJson, setState } from '../utils';\n\n/* types */\nexport type ToolbarItemPropType =\n\t| ({\n\t\t\ttype: 'button';\n\t  } & InternalButtonProps)\n\t| ({\n\t\t\ttype: 'link';\n\t  } & LinkProps)\n\t| {\n\t\t\ttype: 'hr';\n\t  };\nexport type ToolbarItemsPropType = ToolbarItemPropType[];\n\n/**\n * Defines the primary toolbar items.\n */\nexport type PropToolbarItems = {\n\titems: ToolbarItemsPropType;\n};\n\n/* validator */\nexport const validateToolbarItems = (component: Generic.Element.Component, value?: ToolbarItemsPropType): void => {\n\temptyStringByArrayHandler(value, () => {\n\t\tobjectObjectHandler(value, () => {\n\t\t\tif (typeof value === 'undefined') {\n\t\t\t\tvalue = [];\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ToolbarItemPropType[]>(value);\n\t\t\t} catch {\n\t\t\t\t// value keeps the original items\n\t\t\t}\n\t\t\tif (Array.isArray(value) && value.every((items: ToolbarItemPropType) => typeof items === 'object' && items !== null)) {\n\t\t\t\tsetState(component, '_items', value);\n\t\t\t}\n\t\t});\n\t});\n};\n"]}

package/dist/collection/schema/utils/contrast.js

@@ -27,18 +27,10 @@ export const calcColorContrast = (baseColor, contrastColor, ratio, dir = 1) => {
         return calcColorContrast(baseColor, color, ratio, dir);
     }
 };
-const cache = new Map();
-export const getColorContrast = (baseColor, contrastColor, ratio, dir = 1) => {
-    if (cache.has(baseColor)) {
-        return cache.get(baseColor);
-    }
-    const color = calcColorContrast(baseColor, contrastColor, ratio, dir);
-    cache.set(baseColor, color);
-    return color;
-};
+export const getColorContrast = (baseColor, contrastColor, ratio, dir = 1) => calcColorContrast(baseColor, contrastColor, ratio, dir);
 const chooseColorContrast = (baseColor, contrastColor, ratio) => {
     const dir = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);
-    const suggested = getColorContrast(baseColor, contrastColor, ratio, dir);
+    const suggested = calcColorContrast(baseColor, contrastColor, ratio, dir);
     if (suggested.contrast >= ratio) {
         return suggested;
     }

package/dist/collection/schema/utils/contrast.js.map

@@ -1 +1 @@
-{"version":3,"file":"contrast.js","sourceRoot":"","sources":["../../../src/schema/utils/contrast.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,WAAW,MAAM,cAAc,CAAC;AA6BvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAU,EAAE;IACzE,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACjD,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAE,GAAG,GAAG,CAAC,EAAsB,EAAE;IACnH,MAAM,KAAK,GAAQ;QAClB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACpG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACpG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;KACpG,CAAC;IACF,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACvH,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC7C,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;QACtD,OAAO;YACN,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,KAAK;YACjB,QAAQ;SACR,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,iBAAiB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACxD,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,KAAK,GAAqC,IAAI,GAAG,EAAE,CAAC;AAE1D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAE,GAAG,GAAG,CAAC,EAAsB,EAAE;IAClH,IAAI,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;QAC1B,OAAO,KAAK,CAAC,GAAG,CAAC,SAAS,CAAuB,CAAC;IACnD,CAAC;IACD,MAAM,KAAK,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACtE,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC5B,OAAO,KAAK,CAAC;AACd,CAAC,CAAC;AASF,MAAM,mBAAmB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAsB,EAAE;IACrG,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACzE,IAAI,SAAS,CAAC,QAAQ,IAAI,KAAK,EAAE,CAAC;QACjC,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,MAAM,QAAQ,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IAC1E,OAAO,QAAQ,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAiC,EAAE,aAAa,GAAG,CAAC,EAAyB,EAAE;IACtH,IAAI,SAAS,GAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACnC,IAAI,aAAa,GAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC/B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,aAAa,GAAG,SAAS,CAAC;IAC3B,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QACxI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnC,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC1C,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,aAAa,GAAG,SAAS,CAAC;QAC3B,CAAC;IACF,CAAC;IACD,MAAM,aAAa,GAAG,mBAAmB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IAC7J,aAAa,GAAG,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAEjD,OAAO;QACN,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAC3D,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAC/D,QAAQ,EAAE,aAAa,CAAC,QAAQ;KAChC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { RGB } from 'color-convert';\nimport { hex } from 'wcag-contrast';\n\nimport rgba from 'color-rgba';\nimport rgbaConvert from 'rgba-convert';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n//   Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n//   color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n//   if (c <= 0.03928) {\n//     return c / 12.92;\n//   } else {\n//     return ((c + 0.055) / 1.055) ** 2.4;\n//   }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n//   return (\n//     0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n//   );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 || summe === 765 || contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\n/**\n * Adjusts the foreground in the direction the YIQ brightness of the background suggests. YIQ is only\n * an estimate of the WCAG contrast ratio: for medium bright backgrounds such as `#00aa00` it suggests\n * a light foreground, although even white stays below the ratio there. If the suggested direction does\n * not reach the ratio, the opposite direction is tried and the foreground with the higher WCAG contrast\n * ratio wins, which is black or white at the latest.\n */\nconst chooseColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number): ColorContrast<RGB> => {\n\tconst dir = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst suggested = getColorContrast(baseColor, contrastColor, ratio, dir);\n\tif (suggested.contrast >= ratio) {\n\t\treturn suggested;\n\t}\n\t// Bypasses the cache of `getColorContrast`, which ignores the direction.\n\tconst opposite = calcColorContrast(baseColor, contrastColor, ratio, -dir);\n\treturn opposite.contrast > suggested.contrast ? opposite : suggested;\n};\n\nexport const createContrastColorPair = (color: string | ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = rgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = rgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = rgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst colorContrast = chooseColorContrast([baseColor[0], baseColor[1], baseColor[2]], [contrastColor[0], contrastColor[1], contrastColor[2]], contrastRatio);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n"]}
+{"version":3,"file":"contrast.js","sourceRoot":"","sources":["../../../src/schema/utils/contrast.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,WAAW,MAAM,cAAc,CAAC;AA6BvC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAU,EAAE;IACzE,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACjD,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC5B,CAAC,CAAC;AAWF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAE,GAAG,GAAG,CAAC,EAAsB,EAAE;IACnH,MAAM,KAAK,GAAQ;QAClB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACpG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;QACpG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;KACpG,CAAC;IACF,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACvH,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC7C,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,GAAG,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;QACtD,OAAO;YACN,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,KAAK;YACjB,QAAQ;SACR,CAAC;IACH,CAAC;SAAM,CAAC;QACP,OAAO,iBAAiB,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACxD,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAE,GAAG,GAAG,CAAC,EAAsB,EAAE,CAClH,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AASzD,MAAM,mBAAmB,GAAG,CAAC,SAAc,EAAE,aAAkB,EAAE,KAAa,EAAsB,EAAE;IACrG,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAC1E,IAAI,SAAS,CAAC,QAAQ,IAAI,KAAK,EAAE,CAAC;QACjC,OAAO,SAAS,CAAC;IAClB,CAAC;IACD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IAC1E,OAAO,QAAQ,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;AACtE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAiC,EAAE,aAAa,GAAG,CAAC,EAAyB,EAAE;IACtH,IAAI,SAAS,GAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACnC,IAAI,aAAa,GAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IAC7C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC/B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,aAAa,GAAG,SAAS,CAAC;IAC3B,CAAC;SAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;QACxI,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnC,IAAI,OAAO,KAAK,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC1C,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,aAAa,GAAG,SAAS,CAAC;QAC3B,CAAC;IACF,CAAC;IACD,MAAM,aAAa,GAAG,mBAAmB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC;IAC7J,aAAa,GAAG,CAAC,GAAG,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;IAEjD,OAAO;QACN,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAC3D,UAAU,EAAE,WAAW,CAAC,GAAG,CAAC,QAAQ,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;QAC/D,QAAQ,EAAE,aAAa,CAAC,QAAQ;KAChC,CAAC;AACH,CAAC,CAAC","sourcesContent":["import type { RGB } from 'color-convert';\nimport { hex } from 'wcag-contrast';\n\nimport rgba from 'color-rgba';\nimport rgbaConvert from 'rgba-convert';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n//   Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n//   Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n//   color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n//   if (c <= 0.03928) {\n//     return c / 12.92;\n//   } else {\n//     return ((c + 0.055) / 1.055) ** 2.4;\n//   }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n//   return (\n//     0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n//   );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 || summe === 765 || contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> =>\n\tcalcColorContrast(baseColor, contrastColor, ratio, dir);\n\n/**\n * Adjusts the foreground in the direction the YIQ brightness of the background suggests. YIQ is only\n * an estimate of the WCAG contrast ratio: for medium bright backgrounds such as `#00aa00` it suggests\n * a light foreground, although even white stays below the ratio there. If the suggested direction does\n * not reach the ratio, the opposite direction is tried and the foreground with the higher WCAG contrast\n * ratio wins, which is black or white at the latest.\n */\nconst chooseColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number): ColorContrast<RGB> => {\n\tconst dir = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst suggested = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tif (suggested.contrast >= ratio) {\n\t\treturn suggested;\n\t}\n\tconst opposite = calcColorContrast(baseColor, contrastColor, ratio, -dir);\n\treturn opposite.contrast > suggested.contrast ? opposite : suggested;\n};\n\nexport const createContrastColorPair = (color: string | ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = rgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = rgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = rgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst colorContrast = chooseColorContrast([baseColor[0], baseColor[1], baseColor[2]], [contrastColor[0], contrastColor[1], contrastColor[2]], contrastRatio);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n"]}

package/dist/components/base-web-component4.js

@@ -79,13 +79,18 @@ const SelectOptionListFC = ({ preKey, options, disabled, value: selectedValue, O
         return null;
     }
     return (h(Fragment, null, options.map((option, index) => {
+        var _a;
         const key = [preKey, `-${index}`].join('');
         if ('options' in option) {
+            if (!((_a = option.options) === null || _a === void 0 ? void 0 : _a.length)) {
+                return null;
+            }
+            const isOptgroupDisabled = Boolean(disabled || option.disabled);
             const { label } = option, other = __rest(option, ["label"]);
-            return (h("optgroup", Object.assign({ class: selectBem('optgroup', { disabled: Boolean(disabled) }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: disabled }), h(SelectOptionListFC, Object.assign({ OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other))));
+            return (h("optgroup", Object.assign({ class: selectBem('optgroup', { disabled: isOptgroupDisabled }), key: key }, OptionGroupProps, { label: label === null || label === void 0 ? void 0 : label.toString(), disabled: isOptgroupDisabled }), h(SelectOptionListFC, Object.assign({ OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, value: selectedValue, preKey: key }, other, { disabled: isOptgroupDisabled }))));
         }
         if ('value' in option) {
-            return h(SelectOptionFC, Object.assign({ key: key }, OptionProps, { index: key, selectedValue: selectedValue }, option));
+            return (h(SelectOptionFC, Object.assign({ key: key }, OptionProps, { index: key, selectedValue: selectedValue }, option, { disabled: Boolean(disabled || option.disabled) })));
         }
         return null;
     })));
@@ -93,7 +98,7 @@ const SelectOptionListFC = ({ preKey, options, disabled, value: selectedValue, O
 const SelectFC = (props) => {
     const { class: classNames, msg, touched, disabled, required, options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label } = props, other = __rest(props, ["class", "msg", "touched", "disabled", "required", "options", "value", "OptionProps", "OptionGroupProps", "ariaDescribedBy", "hideLabel", "label"]);
     const selectProps = Object.assign(Object.assign({ class: clsx(selectBem(Object.assign({ disabled: Boolean(disabled), required: Boolean(required), touched: Boolean(touched) }, (isMsgDefinedAndInputTouched(msg, touched) ? { [getMsgType(msg)]: true } : {}))), classNames), required: required, disabled: disabled }, getDefaultInputProps({ ariaDescribedBy, hideLabel, label })), other);
-    return (h("select", Object.assign({}, selectProps), h(SelectOptionListFC, { options: options, value: value, OptionGroupProps: OptionGroupProps, OptionProps: OptionProps })));
+    return (h("select", Object.assign({}, selectProps), h(SelectOptionListFC, { OptionGroupProps: OptionGroupProps, OptionProps: OptionProps, disabled: disabled, options: options, value: value })));
 };
 
 const assertSelectValueMatchesMultiplicity = (value, multiple, source) => {
@@ -107,7 +112,9 @@ const assertSelectValueMatchesMultiplicity = (value, multiple, source) => {
         throw new Error(`↑ The schema for the property (_value) is not valid for single mode. Expected a single value. The value will not be changed. (${source} = ${JSON.stringify(value)})`);
     }
 };
-const flattenSelectOptions = (options) => options.flatMap((entry) => ('options' in entry && Array.isArray(entry.options) ? flattenSelectOptions(entry.options) : [entry]));
+const flattenSelectOptions = (options, groupDisabled = false) => options.flatMap((entry) => 'options' in entry && Array.isArray(entry.options)
+    ? flattenSelectOptions(entry.options, Boolean(groupDisabled || entry.disabled))
+    : [Object.assign(Object.assign({}, entry), { disabled: Boolean(groupDisabled || entry.disabled) })]);
 const normalizeSelectValue = (value, options, multiple) => {
     if (options.length === 0) {
         return value;