@dbcdk/react-components 0.0.211 → 0.0.213

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';

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

@@ -8,6 +8,23 @@ import { Menu } from '../../../components/menu/Menu';
 import { Popover } from '../../../components/popover/Popover';
 import styles from './Typeahead.module.css';
 
+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();
@@ -173,16 +190,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.useCallback(
     (option) => {
       var _a2, _b;
+      if (option == null ? void 0 : option.disabled) return;
       locallyClearedRef.current = false;
       setHideSelectedHighlight(false);
       if (mode === "multi") {
@@ -310,24 +336,21 @@ function Typeahead({
   }, [selectedOption, selectedSingleText, mode]);
   const getSelectedIndex = React.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]
   );
   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]);
   useEffect(() => {
@@ -428,7 +451,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) {
@@ -460,7 +490,7 @@ function Typeahead({
     if (justClearedRef.current) return;
     setQuery("");
     setOpen(true);
-    setActiveIndex(getSelectedIndex(options));
+    setActiveIndex(getSelectedIndex(orderByGroup(options)));
   }, [getSelectedIndex, options]);
   const openWithCurrentFilter = React.useCallback(() => {
     if (justClearedRef.current) return;
@@ -502,7 +532,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));
@@ -549,7 +579,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":
@@ -559,20 +590,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;
@@ -626,7 +660,7 @@ function Typeahead({
               if (nextOpen) {
                 if (mode === "single" && selectedOption && !locallyClearedRef.current) {
                   setQuery("");
-                  setActiveIndex(getSelectedIndex(options));
+                  setActiveIndex(getSelectedIndex(orderByGroup(options)));
                 } else {
                   setActiveIndex(getSelectedIndex(filteredOptions));
                 }
@@ -744,41 +778,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__ */ 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__ */ jsxs("span", { className: styles.optionText, children: [
+                /* @__PURE__ */ jsx("span", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: styles.description, children: option.description })
+              ] });
+              const item = mode === "multi" ? /* @__PURE__ */ jsx(
                 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__ */ jsx("span", { children: option.label }),
+                  label: labelContent,
                   onCheckedChange: () => commitSelection(option)
                 },
                 option.value
-              ) : /* @__PURE__ */ jsx(Menu.Item, { active: isActive, selected: isSelected, children: /* @__PURE__ */ jsx(
-                "button",
+              ) : /* @__PURE__ */ jsx(
+                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__ */ jsx("span", { children: option.label })
-                }
-              ) }, option.value);
+                  active: isActive,
+                  selected: isSelected,
+                  disabled: option.disabled,
+                  children: /* @__PURE__ */ 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__ */ jsxs(React.Fragment, { children: [
+                startsGroup && /* @__PURE__ */ jsx(Menu.Header, { id: groupId, children: option.group }),
+                item
+              ] }, option.value);
             }) : /* @__PURE__ */ jsx(Menu.Item, { disabled: true, children: emptyMessage }) })
           }
         ),

package/dist/components/forms/typeahead/Typeahead.module.css

@@ -36,3 +36,19 @@
 .typeaheadInput {
   cursor: pointer;
 }
+
+/* Label and description share one row; the description wraps below only when space runs out. */
+.optionText {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: var(--spacing-md);
+  min-width: 0;
+}
+
+.description {
+  margin-inline-start: auto;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-muted);
+  text-align: end;
+}

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -7,7 +7,6 @@ var react = require('react');
 var usePersistentState = require('../../hooks/usePersistentState');
 var Headline = require('./Headline');
 var styles = require('./Headline.module.css');
-var Button = require('../button/Button');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -45,7 +44,7 @@ function CollapsibleHeadline({
     onToggle == null ? void 0 : onToggle();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.collapsibleRoot, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Headline.Headline,
       {
         ...headlineProps,
@@ -53,28 +52,26 @@ function CollapsibleHeadline({
         weight,
         size,
         addition,
-        children: [
-          header,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button.Button,
-            {
-              shape: "round",
-              type: "button",
-              variant: "inline",
-              style: { padding: "var(--spacing-2xs)" },
-              "aria-expanded": isExpanded,
-              "aria-controls": panelId,
-              onClick: handleToggle,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.toggleButton,
+            "aria-expanded": isExpanded,
+            "aria-controls": panelId,
+            onClick: handleToggle,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: header }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 lucideReact.ChevronDown,
                 {
                   "aria-hidden": true,
                   className: [styles__default.default.toggleChevron, isExpanded ? styles__default.default.toggleChevronExpanded : ""].filter(Boolean).join(" ")
                 }
               )
-            }
-          )
-        ]
+            ]
+          }
+        )
       }
     ),
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { id: panelId, className: styles__default.default.collapsiblePanel, children })

package/dist/components/headline/CollapsibleHeadline.d.ts

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { HeadlineProps } from './Headline';
 export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
-    /** The headline text — always visible. */
+    /** The headline text — always visible. Use addition for separate interactive content. */
     header: React.ReactNode;
     /** Controlled expanded state. When omitted, the component manages its own state. */
     expanded?: boolean;
@@ -9,7 +9,7 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
     onToggle?: () => void;
     /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
     controls?: string;
-    /** Extra content rendered between the headline text and the toggle button. */
+    /** Extra content rendered beside the heading, outside the toggle button. */
     addition?: React.ReactNode;
     /**
      * When set in uncontrolled mode, the component persists its expanded