@dbcdk/react-components 0.0.104 → 0.0.106

package/dist/components/accordion/Accordion.cjs

@@ -13,20 +13,26 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function uniqSorted(nums) {
   return Array.from(new Set(nums)).sort((a, b) => a - b);
 }
-function normalizeMultiple(indexes) {
-  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isFinite(n)));
+function normalizeMultiple(indexes, itemCount) {
+  if (indexes === "all") {
+    return Array.from({ length: itemCount }, (_, i) => i);
+  }
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isInteger(n) && n >= 0 && n < itemCount));
 }
 function Accordion({
   items,
   mode = "single",
   size = "md",
   variant = "default",
+  renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
   openIndexes,
   onOpenIndexChange,
-  onOpenIndexesChange
+  onOpenIndexesChange,
+  className,
+  ...rest
 }) {
   const uid = react.useId();
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
@@ -34,35 +40,40 @@ function Accordion({
   react.useEffect(() => {
     setHasMounted(true);
   }, []);
-  const [internalSingle, setInternalSingle] = react.useState(
-    mode === "single" ? defaultOpenIndex : null
-  );
+  const [internalSingle, setInternalSingle] = react.useState(() => {
+    if (mode !== "single") return null;
+    if (defaultOpenIndex !== null && Number.isInteger(defaultOpenIndex) && defaultOpenIndex >= 0 && defaultOpenIndex < items.length) {
+      return defaultOpenIndex;
+    }
+    return null;
+  });
   const [internalMultiple, setInternalMultiple] = react.useState(() => {
     if (mode !== "multiple") return [];
-    if (defaultOpenIndexes === "all") return items.map((_, i) => i);
-    return normalizeMultiple(defaultOpenIndexes);
+    return normalizeMultiple(defaultOpenIndexes, items.length);
   });
   const currentOpenIndexes = react.useMemo(() => {
     if (mode === "single") {
       const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
-      return current === null ? [] : [current];
+      return current !== null && Number.isInteger(current) && current >= 0 && current < items.length ? [current] : [];
     }
-    return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
-  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
+    return isControlled ? normalizeMultiple(openIndexes, items.length) : normalizeMultiple(internalMultiple, items.length);
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple, items.length]);
   const openSet = react.useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
   function commit(nextIndexes) {
     if (mode === "single") {
       const next = nextIndexes.length ? nextIndexes[0] : null;
-      if (isControlled) onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
-      else {
+      if (isControlled) {
+        onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      } else {
         setInternalSingle(next);
         onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
       }
       return;
     }
-    const normalized = uniqSorted(nextIndexes);
-    if (isControlled) onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
-    else {
+    const normalized = normalizeMultiple(nextIndexes, items.length);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
       setInternalMultiple(normalized);
       onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
     }
@@ -75,27 +86,40 @@ function Accordion({
       commit(isOpen ? [] : [index]);
       return;
     }
-    if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
-    else commit([...currentOpenIndexes, index]);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: [styles__default.default.container, styles__default.default[size], variant !== "default" ? styles__default.default[variant] : ""].filter(Boolean).join(" "),
-      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        AccordionRow.AccordionRow,
-        {
-          uid,
-          index: i,
-          item,
-          isOpen: openSet.has(i),
-          onToggle: toggle,
-          shouldAnimate: hasMounted,
-          headlineSize: size === "sm" ? 4 : 3,
-          variant
-        },
-        i
-      ))
+      ...rest,
+      className: [
+        styles__default.default.container,
+        styles__default.default[size],
+        variant !== "default" ? styles__default.default[variant] : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          AccordionRow.AccordionRow,
+          {
+            uid,
+            index: i,
+            item,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            headlineSize: size === "sm" ? 4 : 3,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
     }
   );
 }

package/dist/components/accordion/Accordion.d.ts

@@ -1,9 +1,11 @@
-import type { JSX, ReactNode } from 'react';
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
 import type { Severity } from '../../constants/severity.types';
 export interface AccordionItem {
-    header: string;
+    id?: string;
+    header: ReactNode;
     subheader?: ReactNode;
     headerAddition?: ReactNode;
+    headerActions?: ReactNode;
     headerIcon?: ReactNode;
     severity?: Severity;
     children: ReactNode;
@@ -12,20 +14,23 @@ export interface AccordionItem {
 type Size = 'sm' | 'md' | 'lg';
 type Mode = 'single' | 'multiple';
 type Variant = 'default' | 'outlined';
-export interface AccordionProps {
+type OpenIndexes = number[] | 'all';
+type RenderMode = 'lazy' | 'eager';
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     items: AccordionItem[];
     mode?: Mode;
     size?: Size;
     variant?: Variant;
+    renderMode?: RenderMode;
     /** Uncontrolled defaults */
     defaultOpenIndex?: number | null;
-    defaultOpenIndexes?: number[] | 'all';
+    defaultOpenIndexes?: OpenIndexes;
     /** Controlled state */
     openIndex?: number | null;
-    openIndexes?: number[];
+    openIndexes?: OpenIndexes;
     /** Change callbacks */
     onOpenIndexChange?: (index: number | null) => void;
     onOpenIndexesChange?: (indexes: number[]) => void;
 }
-export declare function Accordion({ items, mode, size, variant, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
+export declare function Accordion({ items, mode, size, variant, renderMode, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, className, ...rest }: AccordionProps): JSX.Element;
 export {};

package/dist/components/accordion/Accordion.js

@@ -7,20 +7,26 @@ import { AccordionRow } from './components/AccordionRow';
 function uniqSorted(nums) {
   return Array.from(new Set(nums)).sort((a, b) => a - b);
 }
-function normalizeMultiple(indexes) {
-  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isFinite(n)));
+function normalizeMultiple(indexes, itemCount) {
+  if (indexes === "all") {
+    return Array.from({ length: itemCount }, (_, i) => i);
+  }
+  return uniqSorted((indexes != null ? indexes : []).filter((n) => Number.isInteger(n) && n >= 0 && n < itemCount));
 }
 function Accordion({
   items,
   mode = "single",
   size = "md",
   variant = "default",
+  renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
   openIndex,
   openIndexes,
   onOpenIndexChange,
-  onOpenIndexesChange
+  onOpenIndexesChange,
+  className,
+  ...rest
 }) {
   const uid = useId();
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
@@ -28,35 +34,40 @@ function Accordion({
   useEffect(() => {
     setHasMounted(true);
   }, []);
-  const [internalSingle, setInternalSingle] = useState(
-    mode === "single" ? defaultOpenIndex : null
-  );
+  const [internalSingle, setInternalSingle] = useState(() => {
+    if (mode !== "single") return null;
+    if (defaultOpenIndex !== null && Number.isInteger(defaultOpenIndex) && defaultOpenIndex >= 0 && defaultOpenIndex < items.length) {
+      return defaultOpenIndex;
+    }
+    return null;
+  });
   const [internalMultiple, setInternalMultiple] = useState(() => {
     if (mode !== "multiple") return [];
-    if (defaultOpenIndexes === "all") return items.map((_, i) => i);
-    return normalizeMultiple(defaultOpenIndexes);
+    return normalizeMultiple(defaultOpenIndexes, items.length);
   });
   const currentOpenIndexes = useMemo(() => {
     if (mode === "single") {
       const current = isControlled ? openIndex != null ? openIndex : null : internalSingle;
-      return current === null ? [] : [current];
+      return current !== null && Number.isInteger(current) && current >= 0 && current < items.length ? [current] : [];
     }
-    return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
-  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
+    return isControlled ? normalizeMultiple(openIndexes, items.length) : normalizeMultiple(internalMultiple, items.length);
+  }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple, items.length]);
   const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
   function commit(nextIndexes) {
     if (mode === "single") {
       const next = nextIndexes.length ? nextIndexes[0] : null;
-      if (isControlled) onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
-      else {
+      if (isControlled) {
+        onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
+      } else {
         setInternalSingle(next);
         onOpenIndexChange == null ? void 0 : onOpenIndexChange(next);
       }
       return;
     }
-    const normalized = uniqSorted(nextIndexes);
-    if (isControlled) onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
-    else {
+    const normalized = normalizeMultiple(nextIndexes, items.length);
+    if (isControlled) {
+      onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
+    } else {
       setInternalMultiple(normalized);
       onOpenIndexesChange == null ? void 0 : onOpenIndexesChange(normalized);
     }
@@ -69,27 +80,40 @@ function Accordion({
       commit(isOpen ? [] : [index]);
       return;
     }
-    if (isOpen) commit(currentOpenIndexes.filter((i) => i !== index));
-    else commit([...currentOpenIndexes, index]);
+    if (isOpen) {
+      commit(currentOpenIndexes.filter((i) => i !== index));
+    } else {
+      commit([...currentOpenIndexes, index]);
+    }
   }
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: [styles.container, styles[size], variant !== "default" ? styles[variant] : ""].filter(Boolean).join(" "),
-      children: items.map((item, i) => /* @__PURE__ */ jsx(
-        AccordionRow,
-        {
-          uid,
-          index: i,
-          item,
-          isOpen: openSet.has(i),
-          onToggle: toggle,
-          shouldAnimate: hasMounted,
-          headlineSize: size === "sm" ? 4 : 3,
-          variant
-        },
-        i
-      ))
+      ...rest,
+      className: [
+        styles.container,
+        styles[size],
+        variant !== "default" ? styles[variant] : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: items.map((item, i) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          AccordionRow,
+          {
+            uid,
+            index: i,
+            item,
+            isOpen: openSet.has(i),
+            onToggle: toggle,
+            shouldAnimate: hasMounted,
+            headlineSize: size === "sm" ? 4 : 3,
+            variant,
+            renderMode
+          },
+          (_a = item.id) != null ? _a : i
+        );
+      })
     }
   );
 }

package/dist/components/accordion/components/AccordionRow.cjs

@@ -53,48 +53,62 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default"
+  variant = "default",
+  renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
+  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  const [hasBeenOpened, setHasBeenOpened] = react.useState(isOpen);
+  const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: `${styles__default.default.item} ${isOpen ? styles__default.default.open : ""} ${isDisabled ? styles__default.default.disabled : ""}`,
+      "data-state": isOpen ? "open" : "closed",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            id: buttonId,
-            className: styles__default.default.trigger,
-            "aria-expanded": isOpen,
-            "aria-controls": panelId,
-            onClick: () => onToggle(index),
-            disabled: isDisabled,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.title, children: [
-                item.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: item.headerIcon }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Headline.Headline,
-                  {
-                    disableMargin: true,
-                    size: headlineSize,
-                    weight: variant === "outlined" ? 400 : 500,
-                    severity: item.severity,
-                    subheader: item.subheader,
-                    allowWrap: isOpen,
-                    children: item.header
-                  }
-                ),
-                item.headerAddition
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headerRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              id: buttonId,
+              className: styles__default.default.trigger,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.title, children: [
+                  item.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: item.headerIcon }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Headline.Headline,
+                    {
+                      disableMargin: true,
+                      size: headlineSize,
+                      weight: headlineWeight,
+                      severity: item.severity,
+                      subheader: item.subheader,
+                      allowWrap: isOpen,
+                      children: item.header
+                    }
+                  ),
+                  item.headerAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerAddition, children: item.headerAddition }) : null
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
+              ]
+            }
+          ),
+          item.headerActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerActions, onClick: (event) => event.stopPropagation(), children: item.headerActions }) : null
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -104,7 +118,7 @@ function AccordionRow({
             className: `${styles__default.default.panel} ${shouldAnimate ? styles__default.default.animate : styles__default.default.noAnimate}`,
             style: { height },
             onTransitionEnd,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: styles__default.default.content, children: item.children })
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: innerRef, className: styles__default.default.content, children: shouldRenderChildren ? item.children : null })
           }
         )
       ]

package/dist/components/accordion/components/AccordionRow.d.ts

@@ -9,5 +9,6 @@ export type AccordionRowProps = {
     shouldAnimate?: boolean;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: 'default' | 'outlined';
+    renderMode?: 'lazy' | 'eager';
 };
-export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, }: AccordionRowProps): JSX.Element;
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, renderMode, }: AccordionRowProps): JSX.Element;

package/dist/components/accordion/components/AccordionRow.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useRef, useState, useLayoutEffect } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 import { Headline } from '../../../components/headline/Headline';
 import styles from './AccordionRow.module.css';
 
@@ -47,48 +47,62 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default"
+  variant = "default",
+  renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
+  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);
+  const [hasBeenOpened, setHasBeenOpened] = useState(isOpen);
+  const shouldRenderChildren = renderMode === "eager" || isOpen || hasBeenOpened;
+  function handleToggle() {
+    if (!isOpen) {
+      setHasBeenOpened(true);
+    }
+    onToggle(index);
+  }
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: `${styles.item} ${isOpen ? styles.open : ""} ${isDisabled ? styles.disabled : ""}`,
+      "data-state": isOpen ? "open" : "closed",
       children: [
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            id: buttonId,
-            className: styles.trigger,
-            "aria-expanded": isOpen,
-            "aria-controls": panelId,
-            onClick: () => onToggle(index),
-            disabled: isDisabled,
-            children: [
-              /* @__PURE__ */ jsxs("span", { className: styles.title, children: [
-                item.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.headerIcon }) : null,
-                /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    disableMargin: true,
-                    size: headlineSize,
-                    weight: variant === "outlined" ? 400 : 500,
-                    severity: item.severity,
-                    subheader: item.subheader,
-                    allowWrap: isOpen,
-                    children: item.header
-                  }
-                ),
-                item.headerAddition
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id: buttonId,
+              className: styles.trigger,
+              "aria-expanded": isOpen,
+              "aria-controls": panelId,
+              onClick: handleToggle,
+              disabled: isDisabled,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.title, children: [
+                  item.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: item.headerIcon }) : null,
+                  /* @__PURE__ */ jsx(
+                    Headline,
+                    {
+                      disableMargin: true,
+                      size: headlineSize,
+                      weight: headlineWeight,
+                      severity: item.severity,
+                      subheader: item.subheader,
+                      allowWrap: isOpen,
+                      children: item.header
+                    }
+                  ),
+                  item.headerAddition ? /* @__PURE__ */ jsx("div", { className: styles.headerAddition, children: item.headerAddition }) : null
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: styles.chevron, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+              ]
+            }
+          ),
+          item.headerActions ? /* @__PURE__ */ jsx("div", { className: styles.headerActions, onClick: (event) => event.stopPropagation(), children: item.headerActions }) : null
+        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -98,7 +112,7 @@ function AccordionRow({
             className: `${styles.panel} ${shouldAnimate ? styles.animate : styles.noAnimate}`,
             style: { height },
             onTransitionEnd,
-            children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: item.children })
+            children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: styles.content, children: shouldRenderChildren ? item.children : null })
           }
         )
       ]

package/dist/components/accordion/components/AccordionRow.module.css

@@ -1,23 +1,41 @@
+.headerRow {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
+}
+
 .trigger {
   all: unset;
   box-sizing: border-box;
-
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-sm);
+  flex: 1 1 auto;
 
   cursor: pointer;
   user-select: none;
 
   font-size: var(--acc-font-size);
   padding: var(--acc-trigger-py) var(--acc-trigger-px);
-  background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
+  background: transparent;
 
   min-width: 0;
 }
 
+.headerActions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding-block: var(--acc-trigger-py);
+  padding-inline: 0 var(--acc-trigger-px);
+}
+
+.headerActions > * {
+  flex: 0 0 auto;
+}
+
 .trigger:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -37,10 +55,18 @@
   overflow: hidden;
 }
 
+.headerAddition {
+  display: flex;
+  align-items: baseline;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .icon {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
+  align-self: center;
 }
 
 .icon svg {
@@ -88,6 +114,14 @@
   border-bottom: var(--acc-item-separator, none);
 }
 
+.item[data-state='open'] .headerRow {
+  background: var(--color-bg-contextual);
+}
+
+:global(.outlined) .item[data-state='open'] .headerRow {
+  box-shadow: inset 3px 0 0 var(--color-border-selected);
+}
+
 .item:last-child {
   border-bottom: none;
 }

package/dist/components/headline/CollapsibleHeadline.cjs

@@ -27,17 +27,26 @@ function CollapsibleHeadline({
 }) {
   const generatedId = react.useId();
   const panelId = controls != null ? controls : generatedId;
-  const [internalExpanded, setInternalExpanded] = react.useState(() => {
-    if (!storageKey || typeof window === "undefined") return expanded != null ? expanded : true;
-    const stored = localStorage.getItem(storageKey);
-    return stored !== null ? stored === "true" : expanded != null ? expanded : true;
-  });
-  const isExpanded = storageKey ? internalExpanded : expanded != null ? expanded : false;
+  const isControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = react.useState(false);
+  const [hasToggled, setHasToggled] = react.useState(false);
+  const persistedExpanded = react.useSyncExternalStore(
+    () => () => void 0,
+    () => {
+      if (isControlled || !storageKey) return false;
+      return localStorage.getItem(storageKey) === "true";
+    },
+    () => false
+  );
+  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
   const handleToggle = () => {
-    if (storageKey) {
-      const next = !internalExpanded;
+    const next = !isExpanded;
+    if (!isControlled) {
+      setHasToggled(true);
       setInternalExpanded(next);
-      localStorage.setItem(storageKey, String(next));
+      if (storageKey) {
+        localStorage.setItem(storageKey, String(next));
+      }
     }
     onToggle == null ? void 0 : onToggle();
   };

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

@@ -3,7 +3,7 @@ import type { HeadlineProps } from './Headline';
 export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition' | 'children'> {
     /** The headline text — always visible. */
     header: React.ReactNode;
-    /** Controlled expanded state. Required when `storageKey` is not set. */
+    /** Controlled expanded state. When omitted, the component manages its own state. */
     expanded?: boolean;
     /** Called when the toggle is clicked. */
     onToggle?: () => void;
@@ -12,9 +12,9 @@ export interface CollapsibleHeadlineProps extends Omit<HeadlineProps, 'addition'
     /** Extra content rendered between the headline text and the toggle button. */
     addition?: React.ReactNode;
     /**
-     * When set the component manages its own expanded state, persisted to
-     * localStorage under this key. `expanded` is used as the initial value
-     * if nothing is stored yet; `onToggle` is still called after each toggle.
+     * When set in uncontrolled mode, the component persists its expanded
+     * state to localStorage under this key. The server render still starts
+     * collapsed to stay hydration-safe.
      */
     storageKey?: string;
 }

package/dist/components/headline/CollapsibleHeadline.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown } from 'lucide-react';
-import { useId, useState } from 'react';
+import { useId, useState, useSyncExternalStore } from 'react';
 import { Headline } from './Headline';
 import styles from './Headline.module.css';
 import { Button } from '../button/Button';
@@ -21,17 +21,26 @@ function CollapsibleHeadline({
 }) {
   const generatedId = useId();
   const panelId = controls != null ? controls : generatedId;
-  const [internalExpanded, setInternalExpanded] = useState(() => {
-    if (!storageKey || typeof window === "undefined") return expanded != null ? expanded : true;
-    const stored = localStorage.getItem(storageKey);
-    return stored !== null ? stored === "true" : expanded != null ? expanded : true;
-  });
-  const isExpanded = storageKey ? internalExpanded : expanded != null ? expanded : false;
+  const isControlled = expanded !== void 0;
+  const [internalExpanded, setInternalExpanded] = useState(false);
+  const [hasToggled, setHasToggled] = useState(false);
+  const persistedExpanded = useSyncExternalStore(
+    () => () => void 0,
+    () => {
+      if (isControlled || !storageKey) return false;
+      return localStorage.getItem(storageKey) === "true";
+    },
+    () => false
+  );
+  const isExpanded = isControlled ? expanded : hasToggled ? internalExpanded : persistedExpanded;
   const handleToggle = () => {
-    if (storageKey) {
-      const next = !internalExpanded;
+    const next = !isExpanded;
+    if (!isControlled) {
+      setHasToggled(true);
       setInternalExpanded(next);
-      localStorage.setItem(storageKey, String(next));
+      if (storageKey) {
+        localStorage.setItem(storageKey, String(next));
+      }
     }
     onToggle == null ? void 0 : onToggle();
   };

package/dist/components/nav-bar/NavBar.cjs

@@ -19,6 +19,7 @@ function NavBar({
   logo: logo$1,
   items = [],
   productName,
+  productNameComponent: ProductNameComponent,
   addition,
   activeLink,
   size
@@ -45,6 +46,17 @@ function NavBar({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
     ] }) }, id);
   });
+  const productNameContent = productName ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+  ] }) : null;
+  const productNameNode = (() => {
+    if (!productName || !productNameContent) return null;
+    if (ProductNameComponent) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ProductNameComponent, { className: styles__default.default.productName, children: productNameContent });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productName, children: productNameContent });
+  })();
   return /* @__PURE__ */ jsxRuntime.jsx(AppHeader.AppHeader, { size, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -54,10 +66,7 @@ function NavBar({
       children: [
         (logo$1 || productName) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.logoRow, children: [
           logo$1,
-          productName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productName, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
-          ] })
+          productNameNode
         ] }),
         (navLinks == null ? void 0 : navLinks.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.navContent, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: styles__default.default.navItems, role: "list", children: navLinks }) }),
         addition && !isMobile && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.addition, children: addition }),

package/dist/components/nav-bar/NavBar.d.ts

@@ -31,13 +31,14 @@ export type NavBarGroupItem = NavBarBase & {
     type: 'group';
     children: NavBarItem[];
 };
-interface NavBarProps {
+export interface NavBarProps {
     logo?: ReactNode;
     items?: NavBarLinkItem[];
     productName?: string;
+    productNameComponent?: ElementType<any>;
     addition?: ReactNode;
     activeLink?: string;
     size?: AppHeaderSize;
 }
-export declare function NavBar({ logo, items, productName, addition, activeLink, size, }: NavBarProps): JSX.Element;
+export declare function NavBar({ logo, items, productName, productNameComponent: ProductNameComponent, addition, activeLink, size, }: NavBarProps): JSX.Element;
 export {};

package/dist/components/nav-bar/NavBar.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { X, Menu } from 'lucide-react';
 import { useState, useRef } from 'react';
 import styles from './NavBar.module.css';
@@ -13,6 +13,7 @@ function NavBar({
   logo,
   items = [],
   productName,
+  productNameComponent: ProductNameComponent,
   addition,
   activeLink,
   size
@@ -39,6 +40,17 @@ function NavBar({
       /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
     ] }) }, id);
   });
+  const productNameContent = productName ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Logo, {}),
+    /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+  ] }) : null;
+  const productNameNode = (() => {
+    if (!productName || !productNameContent) return null;
+    if (ProductNameComponent) {
+      return /* @__PURE__ */ jsx(ProductNameComponent, { className: styles.productName, children: productNameContent });
+    }
+    return /* @__PURE__ */ jsx("span", { className: styles.productName, children: productNameContent });
+  })();
   return /* @__PURE__ */ jsx(AppHeader, { size, children: /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -48,10 +60,7 @@ function NavBar({
       children: [
         (logo || productName) && /* @__PURE__ */ jsxs("div", { className: styles.logoRow, children: [
           logo,
-          productName && /* @__PURE__ */ jsxs("span", { className: styles.productName, children: [
-            /* @__PURE__ */ jsx(Logo, {}),
-            /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
-          ] })
+          productNameNode
         ] }),
         (navLinks == null ? void 0 : navLinks.length) > 0 && /* @__PURE__ */ jsx("div", { className: styles.navContent, children: /* @__PURE__ */ jsx("ul", { className: styles.navItems, role: "list", children: navLinks }) }),
         addition && !isMobile && /* @__PURE__ */ jsx("div", { className: styles.addition, children: addition }),

package/dist/components/nav-bar/NavBar.module.css

@@ -112,7 +112,7 @@
   text-decoration: none;
 }
 .productName svg {
-  inline-size: var(--icon-size-md);
+  inline-size: auto;
   block-size: var(--icon-size-md);
 }
 

package/dist/components/page/Page.module.css

@@ -38,7 +38,7 @@
   display: flex;
   align-items: flex-start;
   padding: var(--spacing-lg) 0;
-  padding-block-end: var(--spacing-lg);
+  padding-block-end: var(--spacing-md);
   gap: var(--spacing-md);
   min-width: 0;
   flex: 0 0 auto;

package/dist/components/split-pane/SplitPane.cjs

@@ -21,7 +21,8 @@ function SplitPane({
   direction = "horizontal",
   showDivider = "hover",
   gutterSize = 16,
-  storageKey
+  storageKey,
+  fillViewport = false
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SplitPaneContext.SplitPaneProvider,
@@ -31,14 +32,23 @@ function SplitPane({
       minPrimarySize,
       minSecondarySize,
       storageKey,
-      children: /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContainer, { showDivider, gutterSize, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
     }
   );
 }
 function SplitPaneContainer({
   children,
   showDivider,
-  gutterSize
+  gutterSize,
+  fillViewport
 }) {
   const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
   const style = react.useMemo(
@@ -55,6 +65,7 @@ function SplitPaneContainer({
       className: styles__default.default.container,
       "data-direction": direction,
       "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
       style,
       children
     }

package/dist/components/split-pane/SplitPane.d.ts

@@ -9,8 +9,9 @@ export interface SplitPaneProps {
     showDivider?: 'hover' | 'always' | 'never';
     gutterSize?: number;
     storageKey?: string;
+    fillViewport?: boolean;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): JSX.Element;
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
     children: ReactNode;
 }): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -15,7 +15,8 @@ function SplitPane({
   direction = "horizontal",
   showDivider = "hover",
   gutterSize = 16,
-  storageKey
+  storageKey,
+  fillViewport = false
 }) {
   return /* @__PURE__ */ jsx(
     SplitPaneProvider,
@@ -25,14 +26,23 @@ function SplitPane({
       minPrimarySize,
       minSecondarySize,
       storageKey,
-      children: /* @__PURE__ */ jsx(SplitPaneContainer, { showDivider, gutterSize, children })
+      children: /* @__PURE__ */ jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
     }
   );
 }
 function SplitPaneContainer({
   children,
   showDivider,
-  gutterSize
+  gutterSize,
+  fillViewport
 }) {
   const { direction, primarySize, containerRef } = useSplitPaneContext();
   const style = useMemo(
@@ -49,6 +59,7 @@ function SplitPaneContainer({
       className: styles.container,
       "data-direction": direction,
       "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
       style,
       children
     }

package/dist/components/split-pane/SplitPane.module.css

@@ -6,6 +6,13 @@
   min-block-size: 0;
 }
 
+.container[data-fill-viewport='true'] {
+  block-size: 100%;
+  max-block-size: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
 .container[data-direction='horizontal'] {
   flex-direction: row;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.104",
+  "version": "0.0.106",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",