@dbcdk/react-components 0.0.158 → 0.0.159

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

@@ -57,7 +57,7 @@ function AccordionRow({
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);

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

@@ -51,7 +51,7 @@ function AccordionRow({
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = isOpen ? variant === "outlined" ? 500 : 600 : variant === "outlined" ? 400 : 500;
+  const headlineWeight = variant === "outlined" ? 400 : 500;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -5,6 +5,7 @@
 .breadcrumbs ul {
   display: flex;
   align-items: center;
+  gap: var(--spacing-xs);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -17,7 +18,7 @@
   gap: var(--spacing-xxs);
   padding-block: calc(var(--spacing-xxs) + var(--density));
   padding-inline: 0;
-  color: var(--color-fg-default);
+  color: var(--color-fg-muted);
   border-radius: var(--border-radius-sm);
   position: relative;
   transition:
@@ -27,7 +28,6 @@
 
 .breadcrumbs li:hover button {
   color: var(--color-fg-default);
-  background-color: var(--color-bg-contextual);
   cursor: pointer;
 }
 
@@ -39,14 +39,12 @@
 
 .breadcrumbs li[aria-current='page'] button,
 .breadcrumbs li:last-of-type button {
-  background-color: var(--color-bg-contextual) !important;
   font-weight: var(--font-weight-medium);
 }
 
 .separator {
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing-xs);
   color: var(--color-fg-subtle);
   font-size: var(--font-size-md);
 }
@@ -62,8 +60,7 @@
   all: unset;
   color: inherit;
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-contextual-subtle);
-  padding: var(--spacing-xxs) var(--spacing-sm);
+  padding-block: var(--spacing-xxs);
 }
 
 .breadcrumbs a:focus-visible,

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

@@ -48,7 +48,10 @@ function NavBar({
   });
   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 })
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+      /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
   ] }) : null;
   const productNameNode = (() => {
     if (!productName || !productNameContent) return null;

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

@@ -42,7 +42,10 @@ function NavBar({
   });
   const productNameContent = productName ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Logo, {}),
-    /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+    /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+      /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, children: productName })
+    ] })
   ] }) : null;
   const productNameNode = (() => {
     if (!productName || !productNameContent) return null;

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

@@ -111,6 +111,24 @@
   color: inherit;
   text-decoration: none;
 }
+
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-default);
+}
+
+.productNameSquare {
+  inline-size: 5px;
+  block-size: 5px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-sm);
+}
 .productName svg {
   inline-size: auto;
   block-size: var(--icon-size-md);

package/dist/components/sidebar/Sidebar.cjs

@@ -6,6 +6,7 @@ var SidebarProvider = require('./providers/SidebarProvider');
 
 function Sidebar({
   items,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -21,6 +22,7 @@ function Sidebar({
   return /* @__PURE__ */ jsxRuntime.jsx(SidebarProvider.SidebarProvider, { items, children: /* @__PURE__ */ jsxRuntime.jsx(
     SidebarContainer.SidebarContainer,
     {
+      productName,
       productLogo,
       activeLink,
       version,

package/dist/components/sidebar/Sidebar.d.ts

@@ -19,5 +19,5 @@ interface SidebarProps {
     minWidth?: number;
     storageKey?: string;
 }
-export declare function Sidebar({ items, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ items, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarProps): JSX.Element;
 export {};

package/dist/components/sidebar/Sidebar.js

@@ -4,6 +4,7 @@ import { SidebarProvider } from './providers/SidebarProvider';
 
 function Sidebar({
   items,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -19,6 +20,7 @@ function Sidebar({
   return /* @__PURE__ */ jsx(SidebarProvider, { items, children: /* @__PURE__ */ jsx(
     SidebarContainer,
     {
+      productName,
       productLogo,
       activeLink,
       version,

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.cjs

@@ -6,6 +6,7 @@ var lucideReact = require('lucide-react');
 var react = require('react');
 var logo = require('../../../../assets/logo');
 var Button = require('../../../../components/button/Button');
+var Headline = require('../../../../components/headline/Headline');
 var SidebarItems = require('../../../../components/sidebar/components/sidebar-items/SidebarItems');
 var SidenavFiltering = require('../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering');
 var SidebarProvider = require('../../../../components/sidebar/providers/SidebarProvider');
@@ -43,6 +44,7 @@ function removeStoredWidth(key) {
 }
 function SidebarContainer({
   logo: logo$1,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -165,7 +167,10 @@ function SidebarContainer({
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.header, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.productHeader, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productGroup, children: productLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.productNameLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.productNameSquare }),
+            /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             Button.Button,
             {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.d.ts

@@ -14,5 +14,5 @@ interface SidebarContainerProps {
     minWidth?: number;
     storageKey?: string;
 }
-export declare function SidebarContainer({ logo, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
+export declare function SidebarContainer({ logo, productName, productLogo, activeLink, version, hideSearch, searchPlaceholder, showSettings, footer, resizable, defaultWidth, minWidth, storageKey, }: SidebarContainerProps): JSX.Element;
 export {};

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.js

@@ -4,6 +4,7 @@ import { PanelLeftOpen, PanelLeft } from 'lucide-react';
 import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { Logo } from '../../../../assets/logo';
 import { Button } from '../../../../components/button/Button';
+import { Headline } from '../../../../components/headline/Headline';
 import { SidebarItems } from '../../../../components/sidebar/components/sidebar-items/SidebarItems';
 import SidenavFiltering from '../../../../components/sidebar/components/sidenav-filteirng/SidenavFiltering';
 import { useSidebar } from '../../../../components/sidebar/providers/SidebarProvider';
@@ -36,6 +37,7 @@ function removeStoredWidth(key) {
 }
 function SidebarContainer({
   logo,
+  productName,
   productLogo,
   activeLink,
   version,
@@ -158,7 +160,10 @@ function SidebarContainer({
       style: containerStyle,
       children: [
         /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: styles.productHeader, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }),
+          /* @__PURE__ */ jsx("div", { className: styles.productGroup, children: productLogo ? /* @__PURE__ */ jsx("div", { className: styles.productLogo, children: productLogo }) : productName && /* @__PURE__ */ jsxs("span", { className: styles.productNameLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.productNameSquare }),
+            /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, allowWrap: false, children: productName })
+          ] }) }),
           /* @__PURE__ */ jsx(
             Button,
             {

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -64,6 +64,15 @@
   flex-grow: 1;
 }
 
+/* Product logo + name group */
+.productGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  overflow: hidden;
+}
+
 /* Product logo container */
 .productLogo {
   display: flex;
@@ -73,6 +82,25 @@
   min-width: 0;
 }
 
+.productNameLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  color: var(--color-fg-default);
+  min-width: 0;
+}
+
+.productNameSquare {
+  inline-size: 7px;
+  block-size: 7px;
+  flex: 0 0 auto;
+  background-color: var(--color-logo);
+}
+
+.productNameLabel h1 {
+  font-size: var(--font-size-md);
+}
+
 /* Let wrapper elements such as Next.js <Link> inherit the logo sizing context */
 .productLogo > * {
   display: flex;
@@ -245,8 +273,8 @@
 }
 
 /* === Collapsed header behavior ===
-   Hide product logo entirely so the collapse button can truly center. */
-.container.collapsed .productLogo {
+   Hide product logo + name entirely so the collapse button can truly center. */
+.container.collapsed .productGroup {
   display: none;
 }
 

package/dist/components/table/Table.cjs

@@ -31,7 +31,6 @@ function Table({
   variant = "primary",
   size = "md",
   viewMode,
-  striped,
   fillViewport = false,
   fillViewportBottomOffset = 16,
   containScrolling = true,
@@ -53,6 +52,7 @@ function Table({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover = true,
+  expandableRows = false,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -67,6 +67,18 @@ function Table({
   const tableRootRefWrapper = react.useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = react.useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = react.useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill.useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
@@ -94,7 +106,6 @@ function Table({
       data,
       dataKey,
       columns: visibleColumns,
-      striped,
       selectedRows,
       hasSelection,
       selectionMode,
@@ -103,9 +114,12 @@ function Table({
       getRowSeverity,
       getContextMenuItems,
       showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
       onRowClick,
       onRowMouseEnter,
-      onRowSelect
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
     }
   );
   const paginationEl = hasPagination ? /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/table/Table.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 import type { TableProps } from './Table.types';
-export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, striped, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
+export declare function Table<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, selectionMode, allRowsSelected, sortById, sortDirection, loading, emptyConfig, variant, size, viewMode, fillViewport, fillViewportBottomOffset, containScrolling, stickyHeader, tableWidth, tableRootRef, measuringLayout, toolbar, headerExtras, take, skip, totalItemsCount, paginationPlacement, showFirstLast, showGoToPage, showPageSize, pageSizeOptions, showHeader, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, onRowClick, onRowMouseEnter, onRowSelect, onSelectAllRows, onSortChange, onPageChange, ...rest }: TableProps<T>): JSX.Element;
 export type { ColumnItem } from './Table.types';

package/dist/components/table/Table.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useId, useRef, useCallback } from 'react';
+import { useMemo, useId, useRef, useState, useCallback } from 'react';
 import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoader } from '../../components/skeleton-loader/SkeletonLoader';
 import { useViewportFill } from '../../hooks/useViewportFill';
@@ -25,7 +25,6 @@ function Table({
   variant = "primary",
   size = "md",
   viewMode,
-  striped,
   fillViewport = false,
   fillViewportBottomOffset = 16,
   containScrolling = true,
@@ -47,6 +46,7 @@ function Table({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover = true,
+  expandableRows = false,
   onRowClick,
   onRowMouseEnter,
   onRowSelect,
@@ -61,6 +61,18 @@ function Table({
   const tableRootRefWrapper = useRef(tableRootRef);
   const hasSelection = Boolean(selectedRows && onRowSelect);
   const hasPagination = Boolean(onPageChange && (loading || data.length > 0));
+  const [expandedRows, setExpandedRows] = useState(() => /* @__PURE__ */ new Set());
+  const handleToggleRowExpand = useCallback((rowId) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) {
+        next.delete(rowId);
+      } else {
+        next.add(rowId);
+      }
+      return next;
+    });
+  }, []);
   const paginationOffset = hasPagination ? 72 : 0;
   const { style: viewportFillStyle, maxHeight } = useViewportFill(internalTableRootRef, {
     bottomOffset: fillViewportBottomOffset + paginationOffset,
@@ -88,7 +100,6 @@ function Table({
       data,
       dataKey,
       columns: visibleColumns,
-      striped,
       selectedRows,
       hasSelection,
       selectionMode,
@@ -97,9 +108,12 @@ function Table({
       getRowSeverity,
       getContextMenuItems,
       showContextMenuOnHover,
+      expandableRows,
+      expandedRows,
       onRowClick,
       onRowMouseEnter,
-      onRowSelect
+      onRowSelect,
+      onToggleRowExpand: handleToggleRowExpand
     }
   );
   const paginationEl = hasPagination ? /* @__PURE__ */ jsx(

package/dist/components/table/Table.module.css

@@ -50,8 +50,7 @@
   --table-component-header-fg: var(--table-header-fg);
   --table-component-header-font-weight: var(--font-weight-medium);
   --table-component-row-bg: var(--table-row-bg);
-  --table-component-row-bg-alt: var(--table-row-bg-alt);
-  --table-component-row-bg-hover: var(--table-row-bg-hover);
+  --table-component-row-bg-hover: var(--color-bg-hover-subtle);
   --table-component-row-bg-selected: var(--table-row-bg-selected);
   --table-component-row-bg-selected-hover: var(--table-row-bg-selected-hover);
   --table-component-cell-fg: var(--table-cell-fg);
@@ -79,11 +78,6 @@
   --table-component-header-fg: var(--color-fg-subtle);
   --table-component-header-font-weight: var(--font-weight-default);
   --table-component-row-bg: transparent;
-  --table-component-row-bg-alt: color-mix(
-    in srgb,
-    var(--color-bg-contextual-subtle) 55%,
-    transparent
-  );
   --table-component-row-bg-hover: var(--color-bg-contextual-subtle);
   --table-component-row-bg-selected: color-mix(in srgb, var(--color-bg-selected) 55%, transparent);
   --table-component-row-bg-selected-hover: color-mix(
@@ -207,15 +201,9 @@
   height: 32px;
 }
 
-.sm .contextMenuOverlay {
-  min-block-size: 0;
-  block-size: min(100%, 32px);
-}
-
 .sm .contextMenuTrigger {
   min-block-size: 0;
   block-size: 100%;
-  border-radius: 0;
 }
 
 .cell[data-vertical-align='top'] {
@@ -310,10 +298,6 @@
   background-color: var(--table-component-row-bg-selected-hover);
 }
 
-.striped > .row:nth-child(even):not(.selectedRow):not(:hover) > .cell {
-  background-color: var(--table-component-row-bg-alt);
-}
-
 .row:focus-within > .cell {
   box-shadow:
     inset 0 2px 0 var(--color-brand),
@@ -573,29 +557,35 @@
 
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
-  min-inline-size: var(--component-size-sm);
-  min-block-size: var(--component-size-sm);
-  border-radius: var(--border-radius-rounded);
-}
-
-.contextMenuAnchorCell {
-  overflow: visible;
+  min-inline-size: calc(var(--component-size-md) + 4px);
+  min-block-size: calc(var(--component-size-md) + 4px);
+  border-radius: 999px;
+  background-color: transparent;
+  position: relative;
   z-index: 1;
-}
-
-.contextMenuAnchorCell .cellValueEllipsis,
-.contextMenuAnchorCell .cellValueNoEllipsis {
-  padding-inline-end: calc(var(--component-size-sm) + var(--spacing-sm));
+  overflow: hidden;
 }
 
 .contextMenuOverlay {
   position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
+  inset-block-start: 50%;
+  inset-inline-end: var(--spacing-2xs);
+  transform: translateY(-50%);
   display: inline-flex;
-  justify-content: center;
-  min-inline-size: 40px;
-  z-index: 3;
+  align-items: center;
+  justify-content: flex-end;
+  inline-size: max-content;
+  block-size: auto;
+  min-inline-size: 0;
+  padding: 0;
+  border-radius: var(--border-radius-rounded);
+  background-color: transparent;
+  z-index: 2;
+}
+
+.contextMenuHoverOnly .contextMenuOverlay {
+  opacity: 0;
+  pointer-events: none;
 }
 
 /*
@@ -610,11 +600,24 @@
 .contextMenuOverlay > div,
 .contextMenuOverlay > div > div {
   align-items: center;
+  background-color: transparent;
+  overflow: visible;
+  border-radius: 999px;
 }
 
-.contextMenuOverlay:hover .contextMenuTrigger,
-.contextMenuOverlay:focus-within .contextMenuTrigger {
-  background-color: var(--opac-bg-light);
+.actionCell {
+  overflow: visible;
+  position: relative;
+}
+
+.cellContentWithActions {
+  padding-inline-end: calc(var(--component-size-md) + 4px + var(--spacing-sm));
+}
+
+.contextMenuTrigger:hover,
+.contextMenuTrigger:focus-visible {
+  background-color: var(--table-component-row-bg-hover);
+  z-index: 2;
 }
 
 .contextMenuItemLabel {
@@ -628,13 +631,7 @@
   min-width: 0;
 }
 
-.contextMenuHoverOnly .contextMenuTrigger {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.contextMenuHoverOnly:hover .contextMenuTrigger,
-.contextMenuHoverOnly:focus-within .contextMenuTrigger {
+.contextMenuHoverOnly:hover .contextMenuOverlay {
   opacity: 1;
   pointer-events: auto;
 }

package/dist/components/table/Table.types.d.ts

@@ -56,7 +56,6 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
     variant?: TableVariant;
     size?: 'sm' | 'md';
     viewMode?: ViewMode;
-    striped?: boolean;
     fillViewport?: boolean;
     fillViewportBottomOffset?: number;
     containScrolling?: boolean;
@@ -82,6 +81,7 @@ export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTML
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover?: boolean;
+    expandableRows?: boolean;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;

package/dist/components/table/components/TableBody.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var table_classes = require('../table.classes');
 var styles = require('../Table.module.css');
 var TableRow = require('./TableRow');
 
@@ -13,7 +12,6 @@ function TableBody({
   data,
   dataKey,
   columns,
-  striped,
   selectedRows,
   hasSelection,
   selectionMode,
@@ -22,11 +20,14 @@ function TableBody({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: table_classes.cx(styles__default.default.body, striped && styles__default.default.striped), children: data.map((row) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: data.map((row) => {
     const rowId = row[dataKey];
     return /* @__PURE__ */ jsxRuntime.jsx(
       TableRow.TableRow,
@@ -42,9 +43,12 @@ function TableBody({
         getRowSeverity,
         getContextMenuItems,
         showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
         onRowClick,
         onRowMouseEnter,
-        onRowSelect
+        onRowSelect,
+        onToggleRowExpand
       },
       `gridRow-${rowId}`
     );

package/dist/components/table/components/TableBody.d.ts

@@ -5,7 +5,6 @@ type Props<T extends Record<string, any>> = {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
-    striped?: boolean;
     selectedRows?: Set<number | string>;
     hasSelection: boolean;
     selectionMode: 'single' | 'multiple';
@@ -18,9 +17,12 @@ type Props<T extends Record<string, any>> = {
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover: boolean;
+    expandableRows?: boolean;
+    expandedRows?: Set<number | string>;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onToggleRowExpand?: (rowId: number | string) => void;
 };
-export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, striped, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): ReactNode;
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): ReactNode;
 export {};

package/dist/components/table/components/TableBody.js

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../table.classes';
 import styles from '../Table.module.css';
 import { TableRow } from './TableRow';
 
@@ -7,7 +6,6 @@ function TableBody({
   data,
   dataKey,
   columns,
-  striped,
   selectedRows,
   hasSelection,
   selectionMode,
@@ -16,11 +14,14 @@ function TableBody({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  return /* @__PURE__ */ jsx("tbody", { className: cx(styles.body, striped && styles.striped), children: data.map((row) => {
+  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: data.map((row) => {
     const rowId = row[dataKey];
     return /* @__PURE__ */ jsx(
       TableRow,
@@ -36,9 +37,12 @@ function TableBody({
         getRowSeverity,
         getContextMenuItems,
         showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
         onRowClick,
         onRowMouseEnter,
-        onRowSelect
+        onRowSelect,
+        onToggleRowExpand
       },
       `gridRow-${rowId}`
     );

package/dist/components/table/components/TableRow.cjs

@@ -30,14 +30,19 @@ function TableRow({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  var _a;
+  var _a, _b;
   const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const isExpanded = (_b = expandedRows == null ? void 0 : expandedRows.has(rowId)) != null ? _b : false;
   const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
   const canSelect = Boolean(selectedRows && onRowSelect);
+  const canExpand = Boolean(expandableRows && onToggleRowExpand);
   const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
     row,
     rowId,
@@ -128,32 +133,32 @@ function TableRow({
             )
           }
         ) }) : null,
-        columns.map((column) => {
-          var _a2, _b, _c, _d, _e;
-          const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+        columns.map((column, index) => {
+          var _a2, _b2, _c, _d;
+          const allowWrap = table_utils.shouldAllowWrap(column.allowWrap, isSelected || isExpanded, viewMode);
           const allowOverflow = column.allowOverflow;
           const cellValue = table_utils.getCellDisplayValue(row, column);
-          const isLastColumn = column.id === ((_a2 = columns[columns.length - 1]) == null ? void 0 : _a2.id);
+          const showRowActions = index === columns.length - 1 && hasContextMenu;
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                showRowActions && styles__default.default.actionCell,
                 allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,
-                hasContextMenu && isLastColumn && styles__default.default.contextMenuAnchorCell,
                 column.divider === "left" && styles__default.default.dividerLeft,
                 column.divider === "right" && styles__default.default.dividerRight
               ),
-              "data-align": (_b = column.align) != null ? _b : "left",
-              "data-vertical-align": (_c = column.verticalAlign) != null ? _c : "top",
+              "data-align": (_a2 = column.align) != null ? _a2 : "left",
+              "data-vertical-align": (_b2 = column.verticalAlign) != null ? _b2 : "top",
               "data-divider": column.divider,
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  className: styles__default.default.cellContent,
-                  "data-align": (_d = column.align) != null ? _d : "left",
-                  "data-vertical-align": (_e = column.verticalAlign) != null ? _e : "top",
+                  className: table_classes.cx(styles__default.default.cellContent, showRowActions && styles__default.default.cellContentWithActions),
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
@@ -162,11 +167,14 @@ function TableRow({
                         children: cellValue
                       }
                     ),
-                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(
-                      RowContextMenu,
+                    showRowActions ? /* @__PURE__ */ jsxRuntime.jsx(
+                      RowActions,
                       {
                         rowId,
                         items: contextMenuItems,
+                        expandable: canExpand && viewMode !== "wrapped",
+                        isExpanded,
+                        onToggleExpand: onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
                         onRowClick: onRowClick ? () => onRowClick(row) : void 0
                       }
                     ) : null
@@ -181,12 +189,23 @@ function TableRow({
     }
   );
 }
-function RowContextMenu({
+function RowActions({
   rowId,
   items,
+  expandable,
+  isExpanded,
+  onToggleExpand,
   onRowClick
 }) {
   const toggleRef = react.useRef(null);
+  const expandItem = expandable ? {
+    label: "Udvid r\xE6kke",
+    active: isExpanded,
+    icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { size: 16 }),
+    onClick: () => onToggleExpand == null ? void 0 : onToggleExpand()
+  } : null;
+  const menuItems = [...expandItem ? [expandItem] : [], ...items != null ? items : []];
+  const hasMenu = Boolean(menuItems.length);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -194,15 +213,17 @@ function RowContextMenu({
       "data-row-context-menu": "true",
       onClick: (e) => {
         var _a;
+        if (!hasMenu) return;
         e.stopPropagation();
         (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
       },
       onContextMenu: (e) => {
+        if (!hasMenu) return;
         e.preventDefault();
         e.stopPropagation();
         onRowClick == null ? void 0 : onRowClick();
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: hasMenu ? /* @__PURE__ */ jsxRuntime.jsx(
         Popover.Popover,
         {
           matchTriggerWidth: false,
@@ -229,7 +250,7 @@ function RowContextMenu({
               }
             );
           },
-          children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: items.map(
+          children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map(
             (item, index) => item.type === "header" ? /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsxRuntime.jsx(
               Menu.Menu.Item,
               {
@@ -258,7 +279,7 @@ function RowContextMenu({
             )
           ) })
         }
-      )
+      ) : null
     }
   );
 }

package/dist/components/table/components/TableRow.d.ts

@@ -17,9 +17,12 @@ type Props<T extends Record<string, any>> = {
         open: () => void;
     }) => TableContextMenuItem[];
     showContextMenuOnHover: boolean;
+    expandableRows?: boolean;
+    expandedRows?: Set<number | string>;
     onRowClick?: (row: T) => void;
     onRowMouseEnter?: (row: T) => void;
     onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onToggleRowExpand?: (rowId: number | string) => void;
 };
-export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, onRowClick, onRowMouseEnter, onRowSelect, }: Props<T>): React.ReactNode;
+export declare function TableRow<T extends Record<string, any>>({ row, rowId, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): React.ReactNode;
 export {};

package/dist/components/table/components/TableRow.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { MoreVertical } from 'lucide-react';
+import { MoreVertical, ChevronsUpDown } from 'lucide-react';
 import { useRef } from 'react';
 import { Checkbox } from '../../../components/forms/checkbox/Checkbox';
 import { RadioButton } from '../../../components/forms/radio-buttons/RadioButton';
@@ -24,14 +24,19 @@ function TableRow({
   getRowSeverity,
   getContextMenuItems,
   showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
   onRowClick,
   onRowMouseEnter,
-  onRowSelect
+  onRowSelect,
+  onToggleRowExpand
 }) {
-  var _a;
+  var _a, _b;
   const isSelected = (_a = selectedRows == null ? void 0 : selectedRows.has(rowId)) != null ? _a : false;
+  const isExpanded = (_b = expandedRows == null ? void 0 : expandedRows.has(rowId)) != null ? _b : false;
   const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
   const canSelect = Boolean(selectedRows && onRowSelect);
+  const canExpand = Boolean(expandableRows && onToggleRowExpand);
   const contextMenuItems = getContextMenuItems == null ? void 0 : getContextMenuItems({
     row,
     rowId,
@@ -122,32 +127,32 @@ function TableRow({
             )
           }
         ) }) : null,
-        columns.map((column) => {
-          var _a2, _b, _c, _d, _e;
-          const allowWrap = shouldAllowWrap(column.allowWrap, isSelected, viewMode);
+        columns.map((column, index) => {
+          var _a2, _b2, _c, _d;
+          const allowWrap = shouldAllowWrap(column.allowWrap, isSelected || isExpanded, viewMode);
           const allowOverflow = column.allowOverflow;
           const cellValue = getCellDisplayValue(row, column);
-          const isLastColumn = column.id === ((_a2 = columns[columns.length - 1]) == null ? void 0 : _a2.id);
+          const showRowActions = index === columns.length - 1 && hasContextMenu;
           return /* @__PURE__ */ jsx(
             "td",
             {
               className: cx(
                 styles.cell,
+                showRowActions && styles.actionCell,
                 allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,
-                hasContextMenu && isLastColumn && styles.contextMenuAnchorCell,
                 column.divider === "left" && styles.dividerLeft,
                 column.divider === "right" && styles.dividerRight
               ),
-              "data-align": (_b = column.align) != null ? _b : "left",
-              "data-vertical-align": (_c = column.verticalAlign) != null ? _c : "top",
+              "data-align": (_a2 = column.align) != null ? _a2 : "left",
+              "data-vertical-align": (_b2 = column.verticalAlign) != null ? _b2 : "top",
               "data-divider": column.divider,
               children: /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: styles.cellContent,
-                  "data-align": (_d = column.align) != null ? _d : "left",
-                  "data-vertical-align": (_e = column.verticalAlign) != null ? _e : "top",
+                  className: cx(styles.cellContent, showRowActions && styles.cellContentWithActions),
+                  "data-align": (_c = column.align) != null ? _c : "left",
+                  "data-vertical-align": (_d = column.verticalAlign) != null ? _d : "top",
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",
@@ -156,11 +161,14 @@ function TableRow({
                         children: cellValue
                       }
                     ),
-                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(
-                      RowContextMenu,
+                    showRowActions ? /* @__PURE__ */ jsx(
+                      RowActions,
                       {
                         rowId,
                         items: contextMenuItems,
+                        expandable: canExpand && viewMode !== "wrapped",
+                        isExpanded,
+                        onToggleExpand: onToggleRowExpand ? () => onToggleRowExpand(rowId) : void 0,
                         onRowClick: onRowClick ? () => onRowClick(row) : void 0
                       }
                     ) : null
@@ -175,12 +183,23 @@ function TableRow({
     }
   );
 }
-function RowContextMenu({
+function RowActions({
   rowId,
   items,
+  expandable,
+  isExpanded,
+  onToggleExpand,
   onRowClick
 }) {
   const toggleRef = useRef(null);
+  const expandItem = expandable ? {
+    label: "Udvid r\xE6kke",
+    active: isExpanded,
+    icon: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 16 }),
+    onClick: () => onToggleExpand == null ? void 0 : onToggleExpand()
+  } : null;
+  const menuItems = [...expandItem ? [expandItem] : [], ...items != null ? items : []];
+  const hasMenu = Boolean(menuItems.length);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -188,15 +207,17 @@ function RowContextMenu({
       "data-row-context-menu": "true",
       onClick: (e) => {
         var _a;
+        if (!hasMenu) return;
         e.stopPropagation();
         (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
       },
       onContextMenu: (e) => {
+        if (!hasMenu) return;
         e.preventDefault();
         e.stopPropagation();
         onRowClick == null ? void 0 : onRowClick();
       },
-      children: /* @__PURE__ */ jsx(
+      children: hasMenu ? /* @__PURE__ */ jsx(
         Popover,
         {
           matchTriggerWidth: false,
@@ -223,7 +244,7 @@ function RowContextMenu({
               }
             );
           },
-          children: (close) => /* @__PURE__ */ jsx(Menu, { children: items.map(
+          children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map(
             (item, index) => item.type === "header" ? /* @__PURE__ */ jsx(Menu.Header, { children: item.label }, index) : /* @__PURE__ */ jsx(
               Menu.Item,
               {
@@ -252,7 +273,7 @@ function RowContextMenu({
             )
           ) })
         }
-      )
+      ) : null
     }
   );
 }

package/dist/components/table/components/table-settings/TableSettings.cjs

@@ -73,7 +73,7 @@ function TableSettings({
       children: (close) => /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
         additionalSettings == null ? void 0 : additionalSettings(close),
         /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsDownUp, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListChevronsUpDown, {}),
           "Ombryd tekst"
         ] }) }),
         hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ListChevronsDownUp, Settings } from 'lucide-react';
+import { ListChevronsUpDown, Settings } from 'lucide-react';
 import { useMemo } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
@@ -71,7 +71,7 @@ function TableSettings({
       children: (close) => /* @__PURE__ */ jsxs(Menu, { children: [
         additionalSettings == null ? void 0 : additionalSettings(close),
         /* @__PURE__ */ jsx(Menu.Item, { active: viewMode === "wrapped", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [
-          /* @__PURE__ */ jsx(ListChevronsDownUp, {}),
+          /* @__PURE__ */ jsx(ListChevronsUpDown, {}),
           "Ombryd tekst"
         ] }) }),
         hideableColumns.length > 0 && onVisibleColumnIdsChange ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/table/table.utils.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 const SELECTION_COLUMN_PX = 40;
+const ACTIONS_COLUMN_PX = 0;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -44,6 +45,7 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
+exports.ACTIONS_COLUMN_PX = ACTIONS_COLUMN_PX;
 exports.DEFAULT_COLUMN_PX = DEFAULT_COLUMN_PX;
 exports.SELECTION_COLUMN_PX = SELECTION_COLUMN_PX;
 exports.getAriaSort = getAriaSort;

package/dist/components/table/table.utils.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ColumnItem } from './Table.types';
 export declare const SELECTION_COLUMN_PX: 40;
+export declare const ACTIONS_COLUMN_PX: 0;
 export declare const DEFAULT_COLUMN_PX: 150;
 export type SortDirection = 'asc' | 'desc' | null;
 export declare function getVisibleColumns<T>(columns: Array<ColumnItem<T>>): Array<ColumnItem<T>>;

package/dist/components/table/table.utils.js

@@ -1,4 +1,5 @@
 const SELECTION_COLUMN_PX = 40;
+const ACTIONS_COLUMN_PX = 0;
 const DEFAULT_COLUMN_PX = 150;
 function getVisibleColumns(columns) {
   return columns.filter((column) => !column.hidden);
@@ -42,4 +43,4 @@ function getCellDisplayValue(row, column) {
   return empty;
 }
 
-export { DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };
+export { ACTIONS_COLUMN_PX, DEFAULT_COLUMN_PX, SELECTION_COLUMN_PX, getAriaSort, getCellDisplayValue, getHeaderLabel, getNextSortDirection, getVisibleColumns, isActiveSort, isModifierClick, shouldAllowWrap, shouldToggleOnKey };

package/dist/styles/themes/dbc/colors.css

@@ -239,6 +239,12 @@ html {
   --button-bg-primary-hover: var(--color-brand-hover);
   --button-fg-primary: var(--color-fg-on-brand);
 
+  /* Product / logo lockup — generic defaults; apps with a custom identity
+     override these tokens only (see e.g. filmstriben-budget/theme.css) */
+  --color-logo: var(--color-brand);
+  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
+  --color-logo-fg: var(--color-fg-default);
+
   /* Tables */
   --table-header-bg: light-dark(#f8f9fb, #1b2533);
   --table-row-bg: light-dark(#ffffff, #111827);

package/dist/styles/themes/filmstriben-budget/theme.css

@@ -0,0 +1,22 @@
+/* Filmstriben Budget theme entrypoint.
+ *
+ * Usage in the consuming app — only two imports needed:
+ *   @import '@dbcdk/react-components/styles/themes/dbc/base.css';
+ *   @import '@dbcdk/react-components/styles/themes/filmstriben-budget/theme.css';
+ *
+ * Pulls in the shared DBC color layer, then overrides only the
+ * --color-logo-* tokens. --color-brand and every other semantic/app color
+ * stay on the shared DBC palette — buttons, links, focus rings, selected
+ * states, charts, and warnings are unaffected.
+ */
+
+@import '../dbc/colors.css';
+
+:root {
+  --filmstriben-yellow: #ffc107;
+  --filmstriben-black: #212529;
+
+  --color-logo: var(--filmstriben-yellow);
+  --color-logo-bg: color-mix(in srgb, var(--color-logo) 10%, var(--color-bg-surface));
+  --color-logo-fg: var(--filmstriben-black);
+}

package/dist/themes/filmstriben-budget.css

@@ -0,0 +1,3 @@
+@import '../styles/themes/dbc/base.css';
+@import '../styles/themes/filmstriben-budget/theme.css';
+@import '../index.css';

package/dist/utils/date/formatDate.cjs

@@ -3,7 +3,15 @@
 function formatDate(date, options = {}) {
   const d = date instanceof Date ? date : new Date(date);
   if (isNaN(d.getTime())) return "";
-  const { showTime = false, showSeconds = false, userFriendlyLabel = false } = options;
+  const {
+    showTime = false,
+    showSeconds = false,
+    userFriendlyLabel = false,
+    timeOnly = false,
+    ignoreDate = false,
+    ignoreDateIfSame = false
+  } = options;
+  const useTimeOnly = timeOnly || ignoreDate;
   const pad = (n) => n.toString().padStart(2, "0");
   const formatTime = () => {
     const hours = pad(d.getHours());
@@ -13,6 +21,12 @@ function formatDate(date, options = {}) {
     return `${hours}:${minutes}:${seconds}`;
   };
   const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+  if (useTimeOnly) {
+    return formatTime();
+  }
+  if (ignoreDateIfSame && isSameCalendarDay(d, /* @__PURE__ */ new Date())) {
+    return formatTime();
+  }
   if (userFriendlyLabel) {
     const now = /* @__PURE__ */ new Date();
     const yesterday = new Date(now);

package/dist/utils/date/formatDate.d.ts

@@ -1,20 +1,28 @@
 /**
- * Formats a Date as "dd/mm/yyyy" or "dd/mm/yyyy hh:mm:ss".
+ * Formats a Date as "dd/mm/yyyy", "dd/mm/yyyy hh:mm:ss", or time-only.
  * Optionally returns user-friendly Danish labels like "I dag" or "I går".
  *
  * Examples:
  * - formatDate(new Date(), { userFriendlyLabel: true }) => "I dag"
  * - formatDate(new Date(), { userFriendlyLabel: true, showTime: true }) => "I dag, kl. 14:30"
  * - formatDate(date, { showTime: true }) => "10.03.2026 14:30"
+ * - formatDate(date, { timeOnly: true }) => "14:30"
+ * - formatDate(date, { showTime: true, ignoreDateIfSame: true }) => "14:30" for today, otherwise "10.03.2026 14:30"
  *
  * @param date - The Date or date-parsable value to format
  * @param options.showTime - If true, append time "hh:mm" or "hh:mm:ss"
  * @param options.showSeconds - If true, append seconds when showTime is enabled
  * @param options.userFriendlyLabel - If true, use "I dag" / "I går" when applicable
+ * @param options.timeOnly - If true, return only the time portion
+ * @param options.ignoreDate - Alias for timeOnly
+ * @param options.ignoreDateIfSame - If true, return only the time when the date is today
  * @returns A formatted string
  */
 export declare function formatDate(date: Date | string | number, options?: {
     showTime?: boolean;
     showSeconds?: boolean;
     userFriendlyLabel?: boolean;
+    timeOnly?: boolean;
+    ignoreDate?: boolean;
+    ignoreDateIfSame?: boolean;
 }): string;

package/dist/utils/date/formatDate.js

@@ -1,7 +1,15 @@
 function formatDate(date, options = {}) {
   const d = date instanceof Date ? date : new Date(date);
   if (isNaN(d.getTime())) return "";
-  const { showTime = false, showSeconds = false, userFriendlyLabel = false } = options;
+  const {
+    showTime = false,
+    showSeconds = false,
+    userFriendlyLabel = false,
+    timeOnly = false,
+    ignoreDate = false,
+    ignoreDateIfSame = false
+  } = options;
+  const useTimeOnly = timeOnly || ignoreDate;
   const pad = (n) => n.toString().padStart(2, "0");
   const formatTime = () => {
     const hours = pad(d.getHours());
@@ -11,6 +19,12 @@ function formatDate(date, options = {}) {
     return `${hours}:${minutes}:${seconds}`;
   };
   const isSameCalendarDay = (a, b) => a.getDate() === b.getDate() && a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
+  if (useTimeOnly) {
+    return formatTime();
+  }
+  if (ignoreDateIfSame && isSameCalendarDay(d, /* @__PURE__ */ new Date())) {
+    return formatTime();
+  }
   if (userFriendlyLabel) {
     const now = /* @__PURE__ */ new Date();
     const yesterday = new Date(now);

package/package.json

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