@dbcdk/react-components 0.0.211 → 0.0.212

package/README.md

@@ -100,6 +100,11 @@ export default function Header() {
 }
 ```
 
+Light is the default color scheme, including before hydration. `ThemeScript`,
+`useColorScheme()`, and the color scheme controls preserve saved Dark or System
+preferences. To default to the OS preference explicitly, use
+`<ThemeScript defaultColorScheme="system" />` and `useColorScheme('system')`.
+
 The hook updates `data-product-theme`, applies the selected product theme's
 token overrides, and persists the selection.
 
@@ -150,7 +155,7 @@ elsewhere it's the `storageKey` option passed to `useColorScheme`):
 
 ```tsx
 const { theme, switchTheme } = useTheme({ defaultTheme: 'dbc', storageKey: 'my-app-theme' })
-const { colorScheme, switchColorScheme } = useColorScheme('system', {
+const { colorScheme, switchColorScheme } = useColorScheme(undefined, {
   storageKey: 'my-app-color-scheme',
 })
 ```

package/dist/components/button/Button.cjs

@@ -54,7 +54,8 @@ const Button = React__namespace.forwardRef(function Button2({
   const computedClassName = cx(
     styles__default.default.button,
     styles__default.default[variant],
-    styles__default.default[size],
+    // A class name can't start with a digit.
+    size === "2xs" ? styles__default.default.size2xs : styles__default.default[size],
     fullWidth ? styles__default.default.fullWidth : "",
     active ? styles__default.default.active : "",
     loading ? styles__default.default.loading : "",

package/dist/components/button/Button.d.ts

@@ -7,7 +7,12 @@ export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     shape?: 'default' | 'rounded' | 'round';
-    size?: ButtonSize;
+    /**
+     * `2xs`: an icon button that fits within a line of text, e.g. next to a form label - no
+     * border or padding, so it doesn't make the line taller. Use it with `variant="inline"`
+     * and an `aria-label`. Its click target is small, so keep other controls at a distance.
+     */
+    size?: ButtonSize | '2xs';
     fullWidth?: boolean;
     icon?: React.ReactNode;
     loading?: boolean;

package/dist/components/button/Button.js

@@ -30,7 +30,8 @@ const Button = React.forwardRef(function Button2({
   const computedClassName = cx(
     styles.button,
     styles[variant],
-    styles[size],
+    // A class name can't start with a digit.
+    size === "2xs" ? styles.size2xs : styles[size],
     fullWidth ? styles.fullWidth : "",
     active ? styles.active : "",
     loading ? styles.loading : "",

package/dist/components/button/Button.module.css

@@ -292,3 +292,17 @@
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
 }
+
+/* Fits within a line of text: no border or padding to make the line taller. */
+.button.size2xs {
+  height: auto;
+  min-block-size: 0;
+  padding: 0;
+  border-width: 0;
+  line-height: 1;
+}
+
+.button.size2xs svg {
+  inline-size: var(--icon-size-xs);
+  block-size: var(--icon-size-xs);
+}

package/dist/components/color-scheme-button/ColorSchemeButton.cjs

@@ -16,7 +16,7 @@ const COLOR_SCHEME_OPTIONS = [
 function ColorSchemeMenuSection({
   storageKey
 } = {}) {
-  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: "Udseende" }),
     COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -37,7 +37,7 @@ function ColorSchemeButton({
   variant = "outlined",
   storageKey
 }) {
-  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme.useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Popover.Popover,
     {

package/dist/components/color-scheme-button/ColorSchemeButton.js

@@ -14,7 +14,7 @@ const COLOR_SCHEME_OPTIONS = [
 function ColorSchemeMenuSection({
   storageKey
 } = {}) {
-  const { colorScheme, switchColorScheme } = useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Menu.Header, { children: "Udseende" }),
     COLOR_SCHEME_OPTIONS.map((option) => /* @__PURE__ */ jsx(
@@ -35,7 +35,7 @@ function ColorSchemeButton({
   variant = "outlined",
   storageKey
 }) {
-  const { colorScheme, switchColorScheme } = useColorScheme("system", { storageKey });
+  const { colorScheme, switchColorScheme } = useColorScheme(void 0, { storageKey });
   return /* @__PURE__ */ jsx(
     Popover,
     {

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -22,6 +22,8 @@ const FileUpload = react.forwardRef(function FileUpload2({
   fullWidth = false,
   required,
   modified,
+  modifiedLabel,
+  labelAlignment,
   onChange,
   children,
   hint,
@@ -78,6 +80,8 @@ const FileUpload = react.forwardRef(function FileUpload2({
       fullWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "label",
         {

package/dist/components/forms/file-upload/FileUpload.js

@@ -16,6 +16,8 @@ const FileUpload = forwardRef(function FileUpload2({
   fullWidth = false,
   required,
   modified,
+  modifiedLabel,
+  labelAlignment,
   onChange,
   children,
   hint,
@@ -72,6 +74,8 @@ const FileUpload = forwardRef(function FileUpload2({
       fullWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "label",
         {

package/dist/components/forms/form-select/FormSelect.cjs

@@ -67,6 +67,8 @@ function FormSelect({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // FormSelect props
   id,
   name,
@@ -130,6 +132,8 @@ function FormSelect({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {

package/dist/components/forms/form-select/FormSelect.d.ts

@@ -31,5 +31,5 @@ export type FormSelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor
      */
     allowClearWhenRequired?: boolean;
 };
-export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
+export declare function FormSelect<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, modifiedLabel, labelAlignment, id, name, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, includePlaceholderOption, allowClearWhenRequired, }: FormSelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/form-select/FormSelect.js

@@ -42,6 +42,8 @@ function FormSelect({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // FormSelect props
   id,
   name,
@@ -105,6 +107,8 @@ function FormSelect({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/components/forms/input/Input.cjs

@@ -36,6 +36,8 @@ const Input = react.forwardRef(function Input2({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   icon,
   autoFocus,
   minWidth,
@@ -104,6 +106,8 @@ const Input = react.forwardRef(function Input2({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {

package/dist/components/forms/input/Input.js

@@ -30,6 +30,8 @@ const Input = forwardRef(function Input2({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   icon,
   autoFocus,
   minWidth,
@@ -98,6 +100,8 @@ const Input = forwardRef(function Input2({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/components/forms/radio-buttons/RadioButtonGroup.cjs

@@ -4,8 +4,13 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var RadioButton = require('./RadioButton');
+var styles = require('./RadioButtons.module.css');
 var InputContainer = require('../input-container/InputContainer');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
 function RadioButtonGroup({
   name,
   value,
@@ -31,11 +36,7 @@ function RadioButtonGroup({
       role: "radiogroup",
       "aria-invalid": Boolean(error) || void 0,
       "data-cy": dataCy,
-      style: {
-        display: "flex",
-        flexDirection: direction,
-        gap: "8px"
-      },
+      className: [styles__default.default.group, direction === "row" ? styles__default.default.groupRow : void 0].filter(Boolean).join(" "),
       children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
         RadioButton.RadioButton,
         {

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -2,6 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import { RadioButton } from './RadioButton';
+import styles from './RadioButtons.module.css';
 import { InputContainer } from '../input-container/InputContainer';
 
 function RadioButtonGroup({
@@ -29,11 +30,7 @@ function RadioButtonGroup({
       role: "radiogroup",
       "aria-invalid": Boolean(error) || void 0,
       "data-cy": dataCy,
-      style: {
-        display: "flex",
-        flexDirection: direction,
-        gap: "8px"
-      },
+      className: [styles.group, direction === "row" ? styles.groupRow : void 0].filter(Boolean).join(" "),
       children: options.map((opt) => /* @__PURE__ */ jsx(
         RadioButton,
         {

package/dist/components/forms/radio-buttons/RadioButtons.module.css

@@ -129,3 +129,18 @@
   width: 12px;
   height: 12px;
 }
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.groupRow {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.groupRow > * {
+  flex-shrink: 0;
+}

package/dist/components/forms/select/Select.cjs

@@ -29,6 +29,8 @@ function Select({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   id,
   options,
   selectedValue,
@@ -199,6 +201,8 @@ function Select({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Popover.Popover,
         {

package/dist/components/forms/select/Select.d.ts

@@ -20,5 +20,5 @@ export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' |
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
 };
-export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
+export declare function Select<T extends string | number | Record<string, any>>({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, modified, modifiedLabel, labelAlignment, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, disabled, minWidth, menuHeader, }: SelectProps<T>): React.ReactNode;
 export {};

package/dist/components/forms/select/Select.js

@@ -23,6 +23,8 @@ function Select({
   tooltip,
   tooltipPlacement = "right",
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   id,
   options,
   selectedValue,
@@ -193,6 +195,8 @@ function Select({
       labelWidth,
       required,
       modified,
+      modifiedLabel,
+      labelAlignment,
       children: /* @__PURE__ */ jsx(
         Popover,
         {

package/dist/components/forms/text-area/Textarea.cjs

@@ -26,6 +26,8 @@ const Textarea = function Textarea2({
   adjustHeight,
   id,
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // InputContainer props
   label,
   error,
@@ -97,6 +99,8 @@ const Textarea = function Textarea2({
     InputContainer.InputContainer,
     {
       modified,
+      modifiedLabel,
+      labelAlignment,
       label,
       htmlFor: textareaId,
       error,

package/dist/components/forms/text-area/Textarea.js

@@ -20,6 +20,8 @@ const Textarea = function Textarea2({
   adjustHeight,
   id,
   modified = false,
+  modifiedLabel,
+  labelAlignment,
   // InputContainer props
   label,
   error,
@@ -91,6 +93,8 @@ const Textarea = function Textarea2({
     InputContainer,
     {
       modified,
+      modifiedLabel,
+      labelAlignment,
       label,
       htmlFor: textareaId,
       error,

package/dist/components/forms/typeahead/Typeahead.cjs

@@ -32,6 +32,23 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function orderByGroup(options) {
+  if (!options.some((option) => option.group)) return options;
+  const groups = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const group = option.group || void 0;
+    const entries = groups.get(group);
+    if (entries) entries.push(option);
+    else groups.set(group, [option]);
+  }
+  return Array.from(groups.values()).flat();
+}
+function findEnabledIndex(items, start, step) {
+  for (let index = start; index >= 0 && index < items.length; index += step) {
+    if (!items[index].disabled) return index;
+  }
+  return -1;
+}
 function parseLengthToPx(value, referenceFontSize = 16) {
   if (!value) return 0;
   const trimmed = value.trim();
@@ -197,16 +214,25 @@ function Typeahead({
       filteredOptions = options;
     } else {
       filteredOptions = options.filter(
-        (option) => option.label.toLocaleLowerCase().includes(normalizedQuery)
+        (option) => {
+          var _a2, _b, _c, _d;
+          return option.label.toLocaleLowerCase().includes(normalizedQuery) || ((_b = (_a2 = option.description) == null ? void 0 : _a2.toLocaleLowerCase().includes(normalizedQuery)) != null ? _b : false) || ((_d = (_c = option.group) == null ? void 0 : _c.toLocaleLowerCase().includes(normalizedQuery)) != null ? _d : false);
+        }
       );
     }
   }
+  filteredOptions = orderByGroup(filteredOptions);
   if (typeof maxVisibleOptions === "number" && Number.isFinite(maxVisibleOptions)) {
     filteredOptions = filteredOptions.slice(0, Math.max(0, maxVisibleOptions));
   }
+  const groupStarts = /* @__PURE__ */ new Map();
+  filteredOptions.forEach((option, index) => {
+    if (option.group && !groupStarts.has(option.group)) groupStarts.set(option.group, index);
+  });
   const commitSelection = React__namespace.useCallback(
     (option) => {
       var _a2, _b;
+      if (option == null ? void 0 : option.disabled) return;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -334,24 +360,21 @@ function Typeahead({
   }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React__namespace.useCallback(
     (items) => {
-      if (items.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (mode === "multi") {
-        if (!Array.isArray(selectedValue) || selectedValue.length === 0) return 0;
-        const firstSelectedIndex = items.findIndex((option) => selectedValue.includes(option.value));
-        return firstSelectedIndex >= 0 ? firstSelectedIndex : 0;
-      }
-      const singleSelectedIndex = items.findIndex((option) => option.value === selectedValue);
-      return singleSelectedIndex >= 0 ? singleSelectedIndex : 0;
+      const firstEnabled = findEnabledIndex(items, 0, 1);
+      if (firstEnabled < 0 || locallyClearedRef.current) return firstEnabled;
+      const selectedIndex = items.findIndex(
+        (option) => !option.disabled && (mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue)
+      );
+      return selectedIndex >= 0 ? selectedIndex : firstEnabled;
     },
     [mode, selectedValue]
   );
   React.useEffect(() => {
     setActiveIndex((current) => {
-      if (filteredOptions.length === 0) return -1;
-      if (locallyClearedRef.current) return 0;
-      if (current < 0) return getSelectedIndex(filteredOptions);
-      return Math.min(current, filteredOptions.length - 1);
+      if (locallyClearedRef.current || current < 0 || !filteredOptions[current] || filteredOptions[current].disabled) {
+        return getSelectedIndex(filteredOptions);
+      }
+      return current;
     });
   }, [filteredOptions, getSelectedIndex]);
   React.useEffect(() => {
@@ -452,7 +475,14 @@ function Typeahead({
     }
     const exactLabelMatch = options.find((option) => option.label === inputValue);
     if (exactLabelMatch) {
-      commitSelection(exactLabelMatch);
+      if (exactLabelMatch.disabled) {
+        setInputValue(selectedSingleText);
+        setQuery("");
+        setOpen(false);
+        setActiveIndex(-1);
+      } else {
+        commitSelection(exactLabelMatch);
+      }
       return;
     }
     if (allowCustomValue) {
@@ -484,7 +514,7 @@ function Typeahead({
     if (justClearedRef.current) return;
     setQuery("");
     setOpen(true);
-    setActiveIndex(getSelectedIndex(options));
+    setActiveIndex(getSelectedIndex(orderByGroup(options)));
   }, [getSelectedIndex, options]);
   const openWithCurrentFilter = React__namespace.useCallback(() => {
     if (justClearedRef.current) return;
@@ -526,7 +556,7 @@ function Typeahead({
       if (isAlreadyFocused && mode === "single" && selectedOption && !locallyClearedRef.current) {
         prepareSingleSearchInput();
         setOpen(true);
-        setActiveIndex(getSelectedIndex(options));
+        setActiveIndex(getSelectedIndex(orderByGroup(options)));
       } else if (isAlreadyFocused && !open) {
         setOpen(true);
         setActiveIndex(getSelectedIndex(filteredOptions));
@@ -573,7 +603,8 @@ function Typeahead({
         setActiveIndex((index) => {
           if (filteredOptions.length === 0) return -1;
           if (index < 0) return getSelectedIndex(filteredOptions);
-          return Math.min(index + 1, filteredOptions.length - 1);
+          const next = findEnabledIndex(filteredOptions, index + 1, 1);
+          return next >= 0 ? next : index;
         });
         return;
       case "ArrowUp":
@@ -583,20 +614,23 @@ function Typeahead({
           return;
         }
         setActiveIndex((index) => {
-          if (filteredOptions.length === 0) return -1;
-          if (index < 0) return filteredOptions.length - 1;
-          return Math.max(index - 1, 0);
+          const next = findEnabledIndex(
+            filteredOptions,
+            index < 0 ? filteredOptions.length - 1 : index - 1,
+            -1
+          );
+          return next >= 0 ? next : index;
         });
         return;
       case "Home":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(0);
+        setActiveIndex(findEnabledIndex(filteredOptions, 0, 1));
         return;
       case "End":
         if (!open || filteredOptions.length === 0) return;
         e.preventDefault();
-        setActiveIndex(filteredOptions.length - 1);
+        setActiveIndex(findEnabledIndex(filteredOptions, filteredOptions.length - 1, -1));
         return;
       case "Enter":
         if (!open) return;
@@ -650,7 +684,7 @@ function Typeahead({
               if (nextOpen) {
                 if (mode === "single" && selectedOption && !locallyClearedRef.current) {
                   setQuery("");
-                  setActiveIndex(getSelectedIndex(options));
+                  setActiveIndex(getSelectedIndex(orderByGroup(options)));
                 } else {
                   setActiveIndex(getSelectedIndex(filteredOptions));
                 }
@@ -768,41 +802,74 @@ function Typeahead({
               const isActive = index === activeIndex;
               const isSelected = mode === "multi" ? Array.isArray(selectedValue) && selectedValue.includes(option.value) : option.value === selectedValue && !hideSelectedHighlight;
               const optionId = `${listboxId}-option-${index}`;
-              return mode === "multi" ? /* @__PURE__ */ jsxRuntime.jsx(
+              const groupId = option.group ? `${listboxId}-group-${groupStarts.get(option.group)}` : void 0;
+              const startsGroup = !!option.group && groupStarts.get(option.group) === index;
+              const descriptionId = option.description ? `${optionId}-description` : void 0;
+              const describedBy = [groupId, descriptionId].filter(Boolean).join(" ") || void 0;
+              const labelContent = /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.optionText, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+                option.description && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: styles__default.default.description, children: option.description })
+              ] });
+              const item = mode === "multi" ? /* @__PURE__ */ jsxRuntime.jsx(
                 Menu.Menu.CheckItem,
                 {
                   checked: isSelected,
+                  disabled: option.disabled,
                   active: isActive,
                   interactiveProps: {
                     id: optionId,
                     role: "option",
-                    onMouseEnter: () => setActiveIndex(index),
+                    "aria-describedby": describedBy,
+                    "aria-label": option.label,
+                    "aria-disabled": option.disabled || void 0,
+                    onMouseEnter: () => {
+                      if (!option.disabled) setActiveIndex(index);
+                    },
                     onMouseDown: (e) => {
                       interactingWithOptionsRef.current = true;
                       e.preventDefault();
                     },
                     onKeyDown: (e) => handleTabKeyDown(e)
                   },
-                  label: /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label }),
+                  label: labelContent,
                   onCheckedChange: () => commitSelection(option)
                 },
                 option.value
-              ) : /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                Menu.Menu.Item,
                 {
-                  id: optionId,
-                  type: "button",
-                  role: "option",
-                  "aria-selected": isSelected,
-                  onMouseEnter: () => setActiveIndex(index),
-                  onMouseDown: (e) => {
-                    e.preventDefault();
-                  },
-                  onKeyDown: (e) => handleTabKeyDown(e),
-                  onClick: () => commitSelection(option),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-                }
-              ) }, option.value);
+                  active: isActive,
+                  selected: isSelected,
+                  disabled: option.disabled,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      id: optionId,
+                      type: "button",
+                      role: "option",
+                      "aria-selected": isSelected,
+                      "aria-describedby": describedBy,
+                      "aria-label": option.label,
+                      "aria-disabled": option.disabled || void 0,
+                      disabled: option.disabled,
+                      onMouseEnter: () => {
+                        if (!option.disabled) setActiveIndex(index);
+                      },
+                      onMouseDown: (e) => {
+                        e.preventDefault();
+                      },
+                      onKeyDown: (e) => handleTabKeyDown(e),
+                      onClick: () => commitSelection(option),
+                      children: labelContent
+                    }
+                  )
+                },
+                option.value
+              );
+              return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+                startsGroup && /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { id: groupId, children: option.group }),
+                item
+              ] }, option.value);
             }) : /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { disabled: true, children: emptyMessage }) })
           }
         ),

package/dist/components/forms/typeahead/Typeahead.d.ts

@@ -3,6 +3,12 @@ import { InputProps, InputVariant } from '../../../components/forms/input/Input'
 type TypeaheadOption<T> = {
     label: string;
     value: T;
+    /** Optional section header; groups follow their first occurrence in the list. */
+    group?: string;
+    /** Secondary option text, included in default search but not the selected input value. */
+    description?: string;
+    /** Visible but unavailable for selection by pointer, keyboard, or exact-label commit. */
+    disabled?: boolean;
 };
 type MultiValueDisplayMode = 'chips' | 'count';
 type MultiSelectedValuesDisplayMode = 'hidden' | 'below-input';