@tedi-design-system/react 18.0.0-rc.18 → 18.0.0-rc.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tedi-design-system/react",
-  "version": "18.0.0-rc.18",
+  "version": "18.0.0-rc.19",
   "type": "module",
   "sideEffects": false,
   "exports": {

package/src/tedi/components/form/select/components/select-multi-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),S=require("../../../../../../external/classnames/index.cjs.js"),x=require("../../checkbox/checkbox.cjs.js"),l=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),g=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),A=({renderOption:f,...e})=>{var b;const u=e.data.value===t.SELECT_ALL_VALUE,r=t.isGroupSentinel(e.data),E=!!((b=e.data.customData)!=null&&b.__tediInGroup);let o=e.isSelected,_=!1;if(u){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),a=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);o=t.areAllSelected(a,i),_=t.isIndeterminate(a,i)}else if(r){const i=e.options,L=i.findIndex(d=>d.value===e.data.value),a=[];for(let d=L+1;d<i.length;d++){const s=i[d];if(!s||typeof s.value=="string"&&(s.value.startsWith(t.GROUP_OPTION_PREFIX)||s.value===t.SELECT_ALL_VALUE))break;s.isDisabled||a.push(s)}const n=e.getValue()??[];o=t.areAllSelected(n,a),_=t.isIndeterminate(n,a)}const h=S.default(l.default["tedi-select__option"],{[l.default["tedi-select__option--disabled"]]:e.isDisabled},{[l.default["tedi-select__option--focused"]]:e.isFocused},{[l.default["tedi-select__option--select-all"]]:u},{[l.default["tedi-select__option--group"]]:r},{[l.default["tedi-select__option--indented"]]:E}),{tabIndex:m,...v}=e.innerProps;return c.jsx(g.c.Option,{...e,innerProps:{...v,tabIndex:m,role:"option","aria-selected":o},className:h,children:f&&!u&&!r?f(e):c.jsxs(c.Fragment,{children:[c.jsx("span",{className:"sr-only",children:e.label}),c.jsx(x.Checkbox,{id:e.data.value,label:e.label,"aria-hidden":!0,className:l.default["tedi-select__checkbox"],value:e.data.value,name:e.data.value,checked:o,indeterminate:_,onChange:()=>null,disabled:e.isDisabled,hover:e.isFocused})]})})};exports.SelectMultiOption=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),I=require("../../../../../../external/classnames/index.cjs.js"),E=require("../../../misc/option-content/option-content.cjs.js"),a=require("../select.module.scss.cjs.js"),t=require("./select-bulk-helpers.cjs.js"),O=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),g=({renderOption:f,...e})=>{var L;const o=e.data.value===t.SELECT_ALL_VALUE,u=t.isGroupSentinel(e.data),S=!!((L=e.data.customData)!=null&&L.__tediInGroup);let c=e.isSelected,r=!1;if(o){const i=t.getEnabledOptions(e.options).filter(n=>n.value!==t.SELECT_ALL_VALUE),l=(e.getValue()??[]).filter(n=>n.value!==t.SELECT_ALL_VALUE);c=t.areAllSelected(l,i),r=t.isIndeterminate(l,i)}else if(u){const i=e.options,b=i.findIndex(d=>d.value===e.data.value),l=[];for(let d=b+1;d<i.length;d++){const s=i[d];if(!s||typeof s.value=="string"&&(s.value.startsWith(t.GROUP_OPTION_PREFIX)||s.value===t.SELECT_ALL_VALUE))break;s.isDisabled||l.push(s)}const n=e.getValue()??[];c=t.areAllSelected(n,l),r=t.isIndeterminate(n,l)}const m=I.default(a.default["tedi-select__option"],{[a.default["tedi-select__option--disabled"]]:e.isDisabled},{[a.default["tedi-select__option--focused"]]:e.isFocused},{[a.default["tedi-select__option--select-all"]]:o},{[a.default["tedi-select__option--group"]]:u},{[a.default["tedi-select__option--indented"]]:S}),{tabIndex:A,...x}=e.innerProps;return _.jsx(O.c.Option,{...e,innerProps:{...x,tabIndex:A,role:"option","aria-selected":c},className:m,children:f&&!o&&!u?f(e):_.jsx(E.OptionContent,{type:"checkbox",indicatorSemantics:"control",selected:c,indeterminate:r,disabled:e.isDisabled,children:_.jsx(E.OptionContent.Label,{children:e.children})})})};exports.SelectMultiOption=g;

package/src/tedi/components/form/select/components/select-multi-option.es.js

@@ -1,63 +1,55 @@
-import { jsx as m, jsxs as k, Fragment as E } from "react/jsx-runtime";
-import O from "../../../../../../external/classnames/index.es.js";
-import { Checkbox as P } from "../../checkbox/checkbox.es.js";
-import t from "../select.module.scss.es.js";
-import { SELECT_ALL_VALUE as o, isGroupSentinel as y, getEnabledOptions as G, areAllSelected as h, isIndeterminate as v, GROUP_OPTION_PREFIX as N } from "./select-bulk-helpers.es.js";
-import { c as A } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const M = ({ renderOption: _, ...e }) => {
-  var f;
-  const c = e.data.value === o, u = y(e.data), g = !!((f = e.data.customData) != null && f.__tediInGroup);
-  let d = e.isSelected, r = !1;
-  if (c) {
-    const l = G(e.options).filter((a) => a.value !== o), i = (e.getValue() ?? []).filter((a) => a.value !== o);
-    d = h(i, l), r = v(i, l);
-  } else if (u) {
-    const l = e.options, b = l.findIndex((s) => s.value === e.data.value), i = [];
-    for (let s = b + 1; s < l.length; s++) {
-      const n = l[s];
-      if (!n || typeof n.value == "string" && (n.value.startsWith(N) || n.value === o))
+import { jsx as m } from "react/jsx-runtime";
+import E from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as h } from "../../../misc/option-content/option-content.es.js";
+import s from "../select.module.scss.es.js";
+import { SELECT_ALL_VALUE as c, isGroupSentinel as P, getEnabledOptions as y, areAllSelected as I, isIndeterminate as v, GROUP_OPTION_PREFIX as G } from "./select-bulk-helpers.es.js";
+import { c as L } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const V = ({ renderOption: f, ...e }) => {
+  var _;
+  const d = e.data.value === c, r = P(e.data), S = !!((_ = e.data.customData) != null && _.__tediInGroup);
+  let a = e.isSelected, u = !1;
+  if (d) {
+    const t = y(e.options).filter((l) => l.value !== c), i = (e.getValue() ?? []).filter((l) => l.value !== c);
+    a = I(i, t), u = v(i, t);
+  } else if (r) {
+    const t = e.options, b = t.findIndex((o) => o.value === e.data.value), i = [];
+    for (let o = b + 1; o < t.length; o++) {
+      const n = t[o];
+      if (!n || typeof n.value == "string" && (n.value.startsWith(G) || n.value === c))
         break;
       n.isDisabled || i.push(n);
     }
-    const a = e.getValue() ?? [];
-    d = h(a, i), r = v(a, i);
+    const l = e.getValue() ?? [];
+    a = I(l, i), u = v(l, i);
   }
-  const I = O(
-    t["tedi-select__option"],
-    { [t["tedi-select__option--disabled"]]: e.isDisabled },
-    { [t["tedi-select__option--focused"]]: e.isFocused },
-    { [t["tedi-select__option--select-all"]]: c },
-    { [t["tedi-select__option--group"]]: u },
-    { [t["tedi-select__option--indented"]]: g }
-  ), { tabIndex: x, ...S } = e.innerProps;
+  const g = E(
+    s["tedi-select__option"],
+    { [s["tedi-select__option--disabled"]]: e.isDisabled },
+    { [s["tedi-select__option--focused"]]: e.isFocused },
+    { [s["tedi-select__option--select-all"]]: d },
+    { [s["tedi-select__option--group"]]: r },
+    { [s["tedi-select__option--indented"]]: S }
+  ), { tabIndex: O, ...x } = e.innerProps;
   return /* @__PURE__ */ m(
-    A.Option,
+    L.Option,
     {
       ...e,
-      innerProps: { ...S, tabIndex: x, role: "option", "aria-selected": d },
-      className: I,
-      children: _ && !c && !u ? _(e) : /* @__PURE__ */ k(E, { children: [
-        /* @__PURE__ */ m("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ m(
-          P,
-          {
-            id: e.data.value,
-            label: e.label,
-            "aria-hidden": !0,
-            className: t["tedi-select__checkbox"],
-            value: e.data.value,
-            name: e.data.value,
-            checked: d,
-            indeterminate: r,
-            onChange: () => null,
-            disabled: e.isDisabled,
-            hover: e.isFocused
-          }
-        )
-      ] })
+      innerProps: { ...x, tabIndex: O, role: "option", "aria-selected": a },
+      className: g,
+      children: f && !d && !r ? f(e) : /* @__PURE__ */ m(
+        h,
+        {
+          type: "checkbox",
+          indicatorSemantics: "control",
+          selected: a,
+          indeterminate: u,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ m(h.Label, { children: e.children })
+        }
+      )
     }
   );
 };
 export {
-  M as SelectMultiOption
+  V as SelectMultiOption
 };

package/src/tedi/components/form/select/components/select-single-option.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("../../../../../../external/classnames/index.cjs.js"),c=require("../../radio/radio.cjs.js"),i=require("../select.module.scss.cjs.js"),s=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),u=({showRadioButtons:t,renderOption:a,...e})=>{const d=n.default(i.default["tedi-select__option"],{[i.default["tedi-select__option--disabled"]]:e.isDisabled},{[i.default["tedi-select__option--selected"]]:e.isSelected&&!t},{[i.default["tedi-select__option--focused"]]:e.isFocused});return l.jsx(s.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:d,children:t?l.jsxs(l.Fragment,{children:[l.jsx("span",{className:"sr-only",children:e.label}),l.jsx(c.Radio,{label:e.label,id:e.data.value,name:e.data.value,className:i.default["tedi-select__radio"],value:e.data.value,checked:e.isSelected,disabled:e.isDisabled,onChange:()=>null})]}):a?a(e):e.children})};exports.SelectSingleOption=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("../../../../../../external/classnames/index.cjs.js"),d=require("../../../misc/option-content/option-content.cjs.js"),t=require("../select.module.scss.cjs.js"),o=require("../../../../../../external/react-select/dist/index-641ee5b8.esm.cjs.js"),a=({showRadioButtons:n,renderOption:l,...e})=>{const c=s.default(t.default["tedi-select__option"],{[t.default["tedi-select__option--disabled"]]:e.isDisabled},{[t.default["tedi-select__option--selected"]]:e.isSelected&&!n},{[t.default["tedi-select__option--focused"]]:e.isFocused});return i.jsx(o.c.Option,{...e,innerProps:{role:"option","aria-selected":e.isSelected,"aria-disabled":e.isDisabled,...e.innerProps},className:c,children:n?i.jsx(d.OptionContent,{type:"radio",indicatorSemantics:"control",selected:e.isSelected,disabled:e.isDisabled,children:i.jsx(d.OptionContent.Label,{children:e.children})}):l?l(e):e.children})};exports.SelectSingleOption=a;

package/src/tedi/components/form/select/components/select-single-option.es.js

@@ -1,17 +1,17 @@
-import { jsx as l, jsxs as c, Fragment as s } from "react/jsx-runtime";
-import n from "../../../../../../external/classnames/index.es.js";
-import { Radio as o } from "../../radio/radio.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import o from "../../../../../../external/classnames/index.es.js";
+import { OptionContent as d } from "../../../misc/option-content/option-content.es.js";
 import i from "../select.module.scss.es.js";
-import { c as m } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
-const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
-  const d = n(
+import { c as s } from "../../../../../../external/react-select/dist/index-641ee5b8.esm.es.js";
+const f = ({ showRadioButtons: l, renderOption: c, ...e }) => {
+  const n = o(
     i["tedi-select__option"],
     { [i["tedi-select__option--disabled"]]: e.isDisabled },
-    { [i["tedi-select__option--selected"]]: e.isSelected && !a },
+    { [i["tedi-select__option--selected"]]: e.isSelected && !l },
     { [i["tedi-select__option--focused"]]: e.isFocused }
   );
-  return /* @__PURE__ */ l(
-    m.Option,
+  return /* @__PURE__ */ t(
+    s.Option,
     {
       ...e,
       innerProps: {
@@ -20,26 +20,20 @@ const h = ({ showRadioButtons: a, renderOption: t, ...e }) => {
         "aria-disabled": e.isDisabled,
         ...e.innerProps
       },
-      className: d,
-      children: a ? /* @__PURE__ */ c(s, { children: [
-        /* @__PURE__ */ l("span", { className: "sr-only", children: e.label }),
-        /* @__PURE__ */ l(
-          o,
-          {
-            label: e.label,
-            id: e.data.value,
-            name: e.data.value,
-            className: i["tedi-select__radio"],
-            value: e.data.value,
-            checked: e.isSelected,
-            disabled: e.isDisabled,
-            onChange: () => null
-          }
-        )
-      ] }) : t ? t(e) : e.children
+      className: n,
+      children: l ? /* @__PURE__ */ t(
+        d,
+        {
+          type: "radio",
+          indicatorSemantics: "control",
+          selected: e.isSelected,
+          disabled: e.isDisabled,
+          children: /* @__PURE__ */ t(d.Label, { children: e.children })
+        }
+      ) : c ? c(e) : e.children
     }
   );
 };
 export {
-  h as SelectSingleOption
+  f as SelectSingleOption
 };

package/src/tedi/components/form/select/select.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__checkbox":"tedi-select__checkbox-e4f94b67","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-select__control":"tedi-select__control-dbce8bb7","tedi-select__value-container":"tedi-select__value-container-253d079a","tedi-select__indicators-container":"tedi-select__indicators-container-0fc8fa2a","tedi-select__input":"tedi-select__input-5525b622","tedi-select":"tedi-select-8b014852","tedi-select--disabled":"tedi-select--disabled-2d4b8ddd","tedi-select--invalid":"tedi-select--invalid-3901c89c","tedi-select--valid":"tedi-select--valid-969c0297","tedi-select__control--focused":"tedi-select__control--focused-0e632efe","tedi-select__arrow":"tedi-select__arrow-94b5ef4a","tedi-select__loading-indicator":"tedi-select__loading-indicator-a35a63ca","tedi-select__dropdown-indicator":"tedi-select__dropdown-indicator-5a948baa","tedi-select__clear-indicator":"tedi-select__clear-indicator-68b60b12","tedi-select__menu-portal":"tedi-select__menu-portal-d5349f37","tedi-select__menu":"tedi-select__menu-bf54b75b","tedi-select__menu-list--grid":"tedi-select__menu-list--grid-393f3232","tedi-select__menu-list":"tedi-select__menu-list-0aa06e24","tedi-select__menu-list-inner":"tedi-select__menu-list-inner-471e5cf8","tedi-select__menu-list-footer":"tedi-select__menu-list-footer-eb1d3bbc","tedi-select__option":"tedi-select__option-6f811381","tedi-select__option--disabled":"tedi-select__option--disabled-d3aff112","tedi-select__option--focused":"tedi-select__option--focused-1d972ff1","tedi-select__option--selected":"tedi-select__option--selected-a93e5fb0","tedi-select--small":"tedi-select--small-2659608b","tedi-select__multi-value-item":"tedi-select__multi-value-item-b8ec59ae","tedi-select__group":"tedi-select__group-b275e954","tedi-select__group-heading":"tedi-select__group-heading-02b3d9bc","tedi-select__group-heading--selectable":"tedi-select__group-heading--selectable-c84cd617","tedi-select__option--indented":"tedi-select__option--indented-bf4a1661","tedi-select__multi-value-clear":"tedi-select__multi-value-clear-d231f7de","tedi-select--tags-row":"tedi-select--tags-row-c9f33e4b","tedi-select__overflow-tag":"tedi-select__overflow-tag-c0391df2","tedi-select__menu-list--keyboard":"tedi-select__menu-list--keyboard-3d066942","tedi-select__select-all":"tedi-select__select-all-12c3e7f1","tedi-select__group-heading-toggle":"tedi-select__group-heading-toggle-34296a63","tedi-select--tags-stack":"tedi-select--tags-stack-ddb929a9","tedi-select__separator":"tedi-select__separator-b1045f3f","tedi-select--searchable":"tedi-select--searchable-d56eb325"};exports.default=e;

package/src/tedi/components/form/select/select.module.scss.es.js

@@ -24,7 +24,6 @@ const e = {
   "tedi-select__option--selected": "tedi-select__option--selected-a93e5fb0",
   "tedi-select--small": "tedi-select--small-2659608b",
   "tedi-select__multi-value-item": "tedi-select__multi-value-item-b8ec59ae",
-  "tedi-select__checkbox": "tedi-select__checkbox-e4f94b67",
   "tedi-select__group": "tedi-select__group-b275e954",
   "tedi-select__group-heading": "tedi-select__group-heading-02b3d9bc",
   "tedi-select__group-heading--selectable": "tedi-select__group-heading--selectable-c84cd617",

package/src/tedi/components/form/textfield/textfield.d.ts

@@ -65,6 +65,11 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * Also used to generate `aria-describedby` and helper IDs automatically.
      */
     id?: string;
+    /**
+     * The text or React node that serves as the label for the text field.
+     * If `hideLabel` is `true`, the label will be visually hidden but still accessible to screen readers.
+     * If `hideLabel` is `'keep-space'`, the label will be hidden but the space it occupies will be preserved.
+     */
     label?: React.ReactNode;
     /**
      * Name attribute for the underlying input/textarea element.
@@ -104,7 +109,13 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * Note: These are **not** attached to the input/textarea directly, but to the surrounding container.
      */
     onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * Key-down handler attached to the field's surrounding container (not the input directly).
+     */
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * Key-up handler attached to the field's surrounding container (not the input directly).
+     */
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
     /**
      * Default value for **uncontrolled** usage.
@@ -209,6 +220,9 @@ export interface TextFieldProps extends BreakpointSupport<TextFieldBreakpointPro
      * Additional attributes for the input element.
      */
     input?: React.InputHTMLAttributes<HTMLInputElement> | React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /**
+     * Optional start slot element to render inside the input container, before the input field.
+     */
     startSlot?: React.ReactNode;
     /**
      * Optional end slot element to render inside the input container, after the input field.

package/src/tedi/components/misc/option-content/option-content.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),o=require("react"),f=require("../../base/icon/icon.cjs.js"),e=require("./option-content.module.scss.cjs.js"),s=o.forwardRef(({children:t,className:n,id:i},c)=>a.jsx("span",{ref:c,id:i,className:l.default(e.default["tedi-option-content__label"],n),children:t}));s.displayName="OptionContentLabel";const _=o.forwardRef(({children:t,className:n},i)=>a.jsx("span",{ref:i,className:l.default(e.default["tedi-option-content__meta"],n),children:t}));_.displayName="OptionContentMeta";const M=(t,n)=>{const i=typeof t=="string"?{name:t}:t;return a.jsx(f.Icon,{size:18,...i,className:l.default(n,i.className)})},k=o.forwardRef(({children:t,type:n="default",layout:i="horizontal",selected:c=!1,indeterminate:r=!1,disabled:u=!1,icon:m,indicatorSemantics:N="presentation",className:j},O)=>{const b=o.useId(),p=N==="control",x=p&&n!=="default"&&o.Children.toArray(t).some(d=>o.isValidElement(d)&&d.type===s),h=x?b:void 0,v=p?{role:"checkbox","aria-checked":r?"mixed":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},y=p?{role:"radio","aria-checked":c,"aria-disabled":u||void 0,"aria-labelledby":h}:{"aria-hidden":!0},I=x?o.Children.map(t,d=>o.isValidElement(d)&&d.type===s?o.cloneElement(d,{id:b}):d):t;return a.jsxs("div",{ref:O,className:l.default(e.default["tedi-option-content"],e.default[`tedi-option-content--${i}`],{[e.default["tedi-option-content--checkbox"]]:n==="checkbox",[e.default["tedi-option-content--radio"]]:n==="radio",[e.default["tedi-option-content--disabled"]]:u},j),children:[n==="checkbox"&&a.jsx("span",{...v,className:l.default(e.default["tedi-option-content__indicator"],e.default["tedi-option-content__checkbox"],{[e.default["tedi-option-content__checkbox--checked"]]:c||r}),children:r?a.jsx(f.Icon,{name:"remove",size:16,className:e.default["tedi-option-content__check-icon"]}):c?a.jsx(f.Icon,{name:"check",size:16,className:e.default["tedi-option-content__check-icon"]}):null}),n==="radio"&&a.jsx("span",{...y,className:l.default(e.default["tedi-option-content__indicator"],e.default["tedi-option-content__radio"],{[e.default["tedi-option-content__radio--checked"]]:c})}),m&&M(m,e.default["tedi-option-content__icon"]),a.jsx("div",{className:e.default["tedi-option-content__content"],children:I})]})});k.displayName="OptionContent";const C=Object.assign(k,{Label:s,Meta:_});exports.OptionContent=C;exports.OptionContentLabel=s;exports.OptionContentMeta=_;exports.default=C;

package/src/tedi/components/misc/option-content/option-content.d.ts

@@ -0,0 +1,71 @@
+import { IconProps } from '../../base/icon/icon';
+export type OptionContentType = 'default' | 'checkbox' | 'radio';
+export type OptionContentLayout = 'horizontal' | 'vertical';
+export interface OptionContentSlotProps {
+    children?: React.ReactNode;
+    /** Additional class name. */
+    className?: string;
+    /** @internal id wired up by `OptionContent` to link the indicator's `aria-labelledby`. */
+    id?: string;
+}
+export declare const OptionContentLabel: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const OptionContentMeta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface OptionContentProps {
+    /**
+     * Content of the value row — typically `OptionContent.Label` and
+     * optionally `OptionContent.Meta`, but any node is allowed.
+     */
+    children?: React.ReactNode;
+    /**
+     * Selection-indicator type:
+     * - `default` — no indicator
+     * - `checkbox` — checkbox indicator (multi-select)
+     * - `radio` — radio indicator (single-select listbox)
+     * @default default
+     */
+    type?: OptionContentType;
+    /**
+     * Arrange the label and meta side-by-side (`horizontal`) or stacked
+     * (`vertical`, e.g. a title with a description below).
+     * @default horizontal
+     */
+    layout?: OptionContentLayout;
+    /**
+     * Whether the indicator renders as selected (checked).
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the checkbox indicator renders as indeterminate. Ignored for other types.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether the row renders as disabled (dims the indicator and text).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Leading icon, rendered before the content. Accepts an icon name or full `IconProps`.
+     */
+    icon?: string | IconProps;
+    /**
+     * How the selection indicator is exposed to assistive tech:
+     * - `presentation` (default) — the indicator is `aria-hidden`; the interactive
+     *   parent owns selection (menu pattern: `aria-checked` on the `DropdownItem`).
+     * - `control` — the indicator itself carries `role="checkbox"`/`"radio"`,
+     *   `aria-checked` and is named via `aria-labelledby` from `OptionContent.Label`
+     *   (listbox pattern, e.g. inside a `Select` option). Requires a `Label` child.
+     * @default presentation
+     */
+    indicatorSemantics?: 'presentation' | 'control';
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+export declare const OptionContent: import('react').ForwardRefExoticComponent<OptionContentProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Meta: import('react').ForwardRefExoticComponent<OptionContentSlotProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export default OptionContent;

package/src/tedi/components/misc/option-content/option-content.es.js

@@ -0,0 +1,92 @@
+import { jsx as a, jsxs as j } from "react/jsx-runtime";
+import s from "../../../../../external/classnames/index.es.js";
+import { forwardRef as _, useId as A, Children as N, isValidElement as x, cloneElement as M } from "react";
+import { Icon as m } from "../../base/icon/icon.es.js";
+import o from "./option-content.module.scss.es.js";
+const r = _(
+  ({ children: t, className: n, id: e }, i) => /* @__PURE__ */ a("span", { ref: i, id: e, className: s(o["tedi-option-content__label"], n), children: t })
+);
+r.displayName = "OptionContentLabel";
+const u = _(({ children: t, className: n }, e) => /* @__PURE__ */ a("span", { ref: e, className: s(o["tedi-option-content__meta"], n), children: t }));
+u.displayName = "OptionContentMeta";
+const g = (t, n) => {
+  const e = typeof t == "string" ? { name: t } : t;
+  return /* @__PURE__ */ a(m, { size: 18, ...e, className: s(n, e.className) });
+}, C = _(
+  ({
+    children: t,
+    type: n = "default",
+    layout: e = "horizontal",
+    selected: i = !1,
+    indeterminate: d = !1,
+    disabled: l = !1,
+    icon: b,
+    indicatorSemantics: O = "presentation",
+    className: y
+  }, v) => {
+    const h = A(), p = O === "control", f = p && n !== "default" && N.toArray(t).some((c) => x(c) && c.type === r), k = f ? h : void 0, I = p ? {
+      role: "checkbox",
+      "aria-checked": d ? "mixed" : i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": k
+    } : { "aria-hidden": !0 }, z = p ? {
+      role: "radio",
+      "aria-checked": i,
+      "aria-disabled": l || void 0,
+      "aria-labelledby": k
+    } : { "aria-hidden": !0 }, L = f ? N.map(
+      t,
+      (c) => x(c) && c.type === r ? M(c, { id: h }) : c
+    ) : t;
+    return /* @__PURE__ */ j(
+      "div",
+      {
+        ref: v,
+        className: s(
+          o["tedi-option-content"],
+          o[`tedi-option-content--${e}`],
+          {
+            [o["tedi-option-content--checkbox"]]: n === "checkbox",
+            [o["tedi-option-content--radio"]]: n === "radio",
+            [o["tedi-option-content--disabled"]]: l
+          },
+          y
+        ),
+        children: [
+          n === "checkbox" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...I,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__checkbox"], {
+                [o["tedi-option-content__checkbox--checked"]]: i || d
+              }),
+              children: d ? /* @__PURE__ */ a(m, { name: "remove", size: 16, className: o["tedi-option-content__check-icon"] }) : i ? /* @__PURE__ */ a(m, { name: "check", size: 16, className: o["tedi-option-content__check-icon"] }) : null
+            }
+          ),
+          n === "radio" && /* @__PURE__ */ a(
+            "span",
+            {
+              ...z,
+              className: s(o["tedi-option-content__indicator"], o["tedi-option-content__radio"], {
+                [o["tedi-option-content__radio--checked"]]: i
+              })
+            }
+          ),
+          b && g(b, o["tedi-option-content__icon"]),
+          /* @__PURE__ */ a("div", { className: o["tedi-option-content__content"], children: L })
+        ]
+      }
+    );
+  }
+);
+C.displayName = "OptionContent";
+const $ = Object.assign(C, {
+  Label: r,
+  Meta: u
+});
+export {
+  $ as OptionContent,
+  r as OptionContentLabel,
+  u as OptionContentMeta,
+  $ as default
+};

package/src/tedi/components/misc/option-content/option-content.module.scss.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={"tedi-option-content":"tedi-option-content-a433cd53","tedi-option-content--radio":"tedi-option-content--radio-63324c27","tedi-option-content--vertical":"tedi-option-content--vertical-f90f3336","tedi-option-content--checkbox":"tedi-option-content--checkbox-6d08b76f","tedi-option-content__indicator":"tedi-option-content__indicator-cbae42a3","tedi-option-content__icon":"tedi-option-content__icon-919cf745","tedi-option-content--disabled":"tedi-option-content--disabled-947cc3ca","tedi-option-content__label":"tedi-option-content__label-db712a00","tedi-option-content__meta":"tedi-option-content__meta-22706c1d","tedi-option-content__checkbox":"tedi-option-content__checkbox-114cba52","tedi-option-content__checkbox--checked":"tedi-option-content__checkbox--checked-dc7bff22","tedi-option-content__check-icon":"tedi-option-content__check-icon-2c8a9173","tedi-option-content__radio":"tedi-option-content__radio-05184514","tedi-option-content__radio--checked":"tedi-option-content__radio--checked-1980c552","tedi-option-content__content":"tedi-option-content__content-202040f6","tedi-option-content--horizontal":"tedi-option-content--horizontal-292043e8"};exports.default=t;

package/src/tedi/components/misc/option-content/option-content.module.scss.es.js

@@ -0,0 +1,21 @@
+const t = {
+  "tedi-option-content": "tedi-option-content-a433cd53",
+  "tedi-option-content--radio": "tedi-option-content--radio-63324c27",
+  "tedi-option-content--vertical": "tedi-option-content--vertical-f90f3336",
+  "tedi-option-content--checkbox": "tedi-option-content--checkbox-6d08b76f",
+  "tedi-option-content__indicator": "tedi-option-content__indicator-cbae42a3",
+  "tedi-option-content__icon": "tedi-option-content__icon-919cf745",
+  "tedi-option-content--disabled": "tedi-option-content--disabled-947cc3ca",
+  "tedi-option-content__label": "tedi-option-content__label-db712a00",
+  "tedi-option-content__meta": "tedi-option-content__meta-22706c1d",
+  "tedi-option-content__checkbox": "tedi-option-content__checkbox-114cba52",
+  "tedi-option-content__checkbox--checked": "tedi-option-content__checkbox--checked-dc7bff22",
+  "tedi-option-content__check-icon": "tedi-option-content__check-icon-2c8a9173",
+  "tedi-option-content__radio": "tedi-option-content__radio-05184514",
+  "tedi-option-content__radio--checked": "tedi-option-content__radio--checked-1980c552",
+  "tedi-option-content__content": "tedi-option-content__content-202040f6",
+  "tedi-option-content--horizontal": "tedi-option-content--horizontal-292043e8"
+};
+export {
+  t as default
+};

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),j=require("../../../../../../external/classnames/index.cjs.js"),T=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),K=({children:m,onClick:t,disabled:n,active:c,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:w=!1,className:y})=>{const{getItemProps:_,listItemsRef:l,setOpen:s,activeIndex:v,divided:b,variant:f}=T.useDropdownContext(),x=o?"div":"button",I=e=>typeof e!="number"?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},g=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&s(!1))},q=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&s(!1)}},a={ref(e){typeof u=="number"&&(l.current[u]=e)},tabIndex:v===u?0:-1,className:j.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:c,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:b,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:f==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:f==="tree"&&w},y),style:I(i),onClick:g,onKeyDown:q},D=o&&p===!1?a:_({role:"menuitem",disabled:o?void 0:n,...a});return P.jsx(x,{...D,children:m})};exports.DropdownItem=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react/jsx-runtime"),K=require("../../../../../../external/classnames/index.cjs.js"),R=require("../dropdown-context.cjs.js"),r=require("./dropdown-item.module.scss.cjs.js"),S=({children:c,onClick:t,disabled:n,active:w,index:u,indent:i,asChild:o=!1,closeOnSelect:p=!0,isParent:y=!1,className:_,role:s,...l})=>{const{getItemProps:v,listItemsRef:b,setOpen:f,activeIndex:x,divided:I,variant:a}=R.useDropdownContext(),g=o?"div":"button",q=e=>typeof e!="number"||e<=0?{}:{"--dropdown-indent-level":e,"--dropdown-indent":`${e}rem`},D=e=>{if(n)return;const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');if(d){d.click();return}o?t==null||t(e):(t==null||t(e),p&&f(!1))},P=e=>{if(!n&&(e.key==="Enter"||e.key===" ")){e.preventDefault();const d=e.currentTarget.querySelector('input[type="checkbox"], input[type="radio"]');d?d.click():t==null||t(e),!o&&p&&f(!1)}},m={ref(e){typeof u=="number"&&(b.current[u]=e)},tabIndex:x===u?0:-1,className:K.default(r.default["tedi-dropdown__item"],{[r.default["tedi-dropdown__item--active"]]:w,[r.default["tedi-dropdown__item--disabled"]]:n,[r.default["tedi-dropdown__item--divided"]]:I,[r.default["tedi-dropdown__item--indent"]]:i,[r.default["tedi-dropdown__item--tree-item"]]:a==="tree"&&i,[r.default["tedi-dropdown__item--tree-parent"]]:a==="tree"&&y},_),style:q(i),onClick:D,onKeyDown:P,...l},j=o&&p===!1?{...m,role:s}:v({role:s??"menuitem",disabled:o?void 0:n,...m});return T.jsx(g,{...j,children:c})};exports.DropdownItem=S;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.d.ts

@@ -63,5 +63,12 @@ export type DropdownItemProps = {
      */
     isParent?: boolean;
     className?: string;
-};
-export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * ARIA role for the item. Defaults to `menuitem`; override to convey selection
+     * semantics (e.g. `menuitemcheckbox` / `menuitemradio` / `option`) and pair it
+     * with the matching `aria-checked` / `aria-selected`.
+     * @default menuitem
+     */
+    role?: React.AriaRole;
+} & React.AriaAttributes;
+export declare const DropdownItem: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/tedi/components/overlays/dropdown/dropdown-item/dropdown-item.es.js

@@ -1,67 +1,70 @@
-import { jsx as K } from "react/jsx-runtime";
-import N from "../../../../../../external/classnames/index.es.js";
-import { useDropdownContext as T } from "../dropdown-context.es.js";
+import { jsx as T } from "react/jsx-runtime";
+import j from "../../../../../../external/classnames/index.es.js";
+import { useDropdownContext as E } from "../dropdown-context.es.js";
 import r from "./dropdown-item.module.scss.es.js";
-const V = ({
-  children: a,
+const l = ({
+  children: y,
   onClick: t,
-  disabled: p,
-  active: y,
+  disabled: n,
+  active: _,
   index: d,
   indent: i,
   asChild: o = !1,
   closeOnSelect: s = !0,
-  isParent: _ = !1,
-  className: w
+  isParent: w = !1,
+  className: c,
+  role: m,
+  ...v
 }) => {
-  const { getItemProps: c, listItemsRef: v, setOpen: m, activeIndex: b, divided: x, variant: f } = T(), D = o ? "div" : "button", I = (e) => typeof e != "number" ? {} : {
+  const { getItemProps: b, listItemsRef: x, setOpen: f, activeIndex: D, divided: I, variant: u } = E(), g = o ? "div" : "button", P = (e) => typeof e != "number" || e <= 0 ? {} : {
     "--dropdown-indent-level": e,
     "--dropdown-indent": `${e}rem`
-  }, g = (e) => {
-    if (p) return;
-    const n = e.currentTarget.querySelector(
+  }, q = (e) => {
+    if (n) return;
+    const p = e.currentTarget.querySelector(
       'input[type="checkbox"], input[type="radio"]'
     );
-    if (n) {
-      n.click();
+    if (p) {
+      p.click();
       return;
     }
-    o ? t == null || t(e) : (t == null || t(e), s && m(!1));
-  }, P = (e) => {
-    if (!p && (e.key === "Enter" || e.key === " ")) {
+    o ? t == null || t(e) : (t == null || t(e), s && f(!1));
+  }, K = (e) => {
+    if (!n && (e.key === "Enter" || e.key === " ")) {
       e.preventDefault();
-      const n = e.currentTarget.querySelector(
+      const p = e.currentTarget.querySelector(
         'input[type="checkbox"], input[type="radio"]'
       );
-      n ? n.click() : t == null || t(e), !o && s && m(!1);
+      p ? p.click() : t == null || t(e), !o && s && f(!1);
     }
-  }, u = {
+  }, a = {
     ref(e) {
-      typeof d == "number" && (v.current[d] = e);
+      typeof d == "number" && (x.current[d] = e);
     },
-    tabIndex: b === d ? 0 : -1,
-    className: N(
+    tabIndex: D === d ? 0 : -1,
+    className: j(
       r["tedi-dropdown__item"],
       {
-        [r["tedi-dropdown__item--active"]]: y,
-        [r["tedi-dropdown__item--disabled"]]: p,
-        [r["tedi-dropdown__item--divided"]]: x,
+        [r["tedi-dropdown__item--active"]]: _,
+        [r["tedi-dropdown__item--disabled"]]: n,
+        [r["tedi-dropdown__item--divided"]]: I,
         [r["tedi-dropdown__item--indent"]]: i,
-        [r["tedi-dropdown__item--tree-item"]]: f === "tree" && i,
-        [r["tedi-dropdown__item--tree-parent"]]: f === "tree" && _
+        [r["tedi-dropdown__item--tree-item"]]: u === "tree" && i,
+        [r["tedi-dropdown__item--tree-parent"]]: u === "tree" && w
       },
-      w
+      c
     ),
-    style: I(i),
-    onClick: g,
-    onKeyDown: P
-  }, q = o && s === !1 ? u : c({
-    role: "menuitem",
-    disabled: o ? void 0 : p,
-    ...u
+    style: P(i),
+    onClick: q,
+    onKeyDown: K,
+    ...v
+  }, N = o && s === !1 ? { ...a, role: m } : b({
+    role: m ?? "menuitem",
+    disabled: o ? void 0 : n,
+    ...a
   });
-  return /* @__PURE__ */ K(D, { ...q, children: a });
+  return /* @__PURE__ */ T(g, { ...N, children: y });
 };
 export {
-  V as DropdownItem
+  l as DropdownItem
 };

package/src/tedi/components/overlays/dropdown/dropdown.d.ts

@@ -78,7 +78,7 @@ export declare const Dropdown: {
     Content: ({ children }: {
         children: React.ReactNode;
     }) => null;
-    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, }: import('./dropdown-item/dropdown-item').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, onClick, disabled, active, index, indent, asChild, closeOnSelect, isParent, className, role, ...aria }: import('./dropdown-item/dropdown-item').DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
     Separator: () => import("react/jsx-runtime").JSX.Element;
 };
 export {};