@dbcdk/react-components 0.0.189 → 0.0.190

package/dist/components/accordion/Accordion.cjs

@@ -23,7 +23,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
-  variant = "default",
+  variant = "filled",
   renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
@@ -35,6 +35,7 @@ function Accordion({
   ...rest
 }) {
   const uid = react.useId();
+  const resolvedVariant = variant === "default" ? "filled" : variant;
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
   const [hasMounted, setHasMounted] = react.useState(false);
   react.useEffect(() => {
@@ -96,12 +97,7 @@ function Accordion({
     "div",
     {
       ...rest,
-      className: [
-        styles__default.default.container,
-        styles__default.default[size],
-        variant !== "default" ? styles__default.default[variant] : "",
-        className
-      ].filter(Boolean).join(" "),
+      className: [styles__default.default.container, styles__default.default[size], styles__default.default[resolvedVariant], className].filter(Boolean).join(" "),
       children: items.map((item, i) => {
         var _a;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -114,7 +110,7 @@ function Accordion({
             onToggle: toggle,
             shouldAnimate: hasMounted,
             headlineSize: size === "sm" ? 4 : 3,
-            variant,
+            variant: resolvedVariant,
             renderMode
           },
           (_a = item.id) != null ? _a : i

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

@@ -13,7 +13,7 @@ export interface AccordionItem {
 }
 type Size = 'sm' | 'md' | 'lg';
 type Mode = 'single' | 'multiple';
-type Variant = 'default' | 'outlined';
+type Variant = 'filled' | 'outlined' | 'default';
 type OpenIndexes = number[] | 'all';
 type RenderMode = 'lazy' | 'eager';
 export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {

package/dist/components/accordion/Accordion.js

@@ -17,7 +17,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
-  variant = "default",
+  variant = "filled",
   renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
@@ -29,6 +29,7 @@ function Accordion({
   ...rest
 }) {
   const uid = useId();
+  const resolvedVariant = variant === "default" ? "filled" : variant;
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
   const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
@@ -90,12 +91,7 @@ function Accordion({
     "div",
     {
       ...rest,
-      className: [
-        styles.container,
-        styles[size],
-        variant !== "default" ? styles[variant] : "",
-        className
-      ].filter(Boolean).join(" "),
+      className: [styles.container, styles[size], styles[resolvedVariant], className].filter(Boolean).join(" "),
       children: items.map((item, i) => {
         var _a;
         return /* @__PURE__ */ jsx(
@@ -108,7 +104,7 @@ function Accordion({
             onToggle: toggle,
             shouldAnimate: hasMounted,
             headlineSize: size === "sm" ? 4 : 3,
-            variant,
+            variant: resolvedVariant,
             renderMode
           },
           (_a = item.id) != null ? _a : i

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

@@ -1,41 +1,90 @@
 .container {
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-surface);
+  background-color: transparent;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  gap: var(--spacing-xs);
+  gap: 0;
+}
+
+.filled {
+  --acc-item-bg: transparent;
+  --acc-trigger-bg: color-mix(
+    in srgb,
+    var(--color-bg-contextual-subtle) 66%,
+    var(--color-bg-surface)
+  );
+  --acc-trigger-bg-hover: color-mix(
+    in srgb,
+    var(--color-bg-contextual-subtle) 74%,
+    var(--color-bg-surface)
+  );
+  --acc-content-bg: var(--color-bg-surface);
+  --acc-item-separator: none;
+  --acc-item-gap: calc((var(--spacing-xxs) + var(--spacing-xs)) / 2);
+  --acc-item-radius: var(--border-radius-sm);
+  --acc-content-px: var(--acc-trigger-px);
+  --acc-content-open-pt: var(--spacing-2xs);
 }
 
 .outlined {
-  background-color: transparent;
+  background-color: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--border-radius-md);
   gap: 0;
+  --acc-item-bg: transparent;
+  --acc-content-bg: transparent;
+  --acc-item-gap: 0;
+  --acc-item-radius: 0;
   --acc-trigger-bg: transparent;
+  --acc-trigger-bg-hover: transparent;
   --acc-content-px: var(--acc-trigger-px);
   --acc-item-separator: 1px solid var(--color-border-subtle);
 }
 
 /* Size variables (consumed by AccordionRow) */
 .sm {
-  --acc-trigger-py: var(--spacing-xs);
+  --acc-trigger-py: var(--spacing-xxs);
   --acc-trigger-px: var(--spacing-sm);
   --acc-content-py: var(--spacing-sm);
   --acc-font-size: var(--font-size-sm);
 }
 
 .md {
-  --acc-trigger-py: var(--spacing-sm);
+  --acc-trigger-py: var(--spacing-xs);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
   --acc-font-size: var(--font-size-md);
 }
 
 .lg {
-  --acc-trigger-py: var(--spacing-md);
+  --acc-trigger-py: var(--spacing-sm);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
   --acc-font-size: var(--font-size-md);
 }
+
+.filled.sm {
+  --acc-trigger-py: var(--spacing-2xs);
+}
+
+.filled.md {
+  --acc-trigger-py: calc((var(--spacing-xs) + var(--spacing-xxs)) / 2);
+}
+
+.filled.lg {
+  --acc-trigger-py: calc((var(--spacing-sm) + var(--spacing-xs)) / 2);
+}
+
+.outlined.sm {
+  --acc-trigger-py: var(--spacing-xs);
+}
+
+.outlined.md {
+  --acc-trigger-py: var(--spacing-sm);
+}
+
+.outlined.lg {
+  --acc-trigger-py: var(--spacing-md);
+}

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

@@ -19,11 +19,11 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default",
+  variant: _variant = "filled",
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const headlineWeight = 400;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight.useCollapsibleHeight(isOpen, shouldAnimate);

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

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

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

@@ -13,11 +13,11 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default",
+  variant: _variant = "filled",
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const headlineWeight = 400;
   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.module.css

@@ -5,6 +5,15 @@
   background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
 }
 
+.item:not(.disabled):hover .headerRow {
+  background: var(--acc-trigger-bg-hover, var(--acc-trigger-bg, var(--color-bg-contextual-subtle)));
+}
+
+.item:not(.disabled):hover .title,
+.item:not(.disabled):hover .chevron {
+  color: var(--color-fg-default);
+}
+
 .trigger {
   all: unset;
   box-sizing: border-box;
@@ -75,9 +84,10 @@
 }
 
 .chevron {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
   flex: 0 0 auto;
+  color: var(--color-fg-muted);
   transition: transform var(--transition-normal) var(--ease-standard);
 }
 
@@ -108,12 +118,24 @@
 
 .content {
   padding: var(--acc-content-py) var(--acc-content-px, 0);
+  background: var(--acc-content-bg, transparent);
+}
+
+.item[data-state='open'] .content {
+  padding-top: var(--acc-content-open-pt, var(--acc-content-py));
 }
 
 .item {
+  background: var(--acc-item-bg, transparent);
+  border-radius: var(--acc-item-radius, 0);
+  overflow: hidden;
   border-bottom: var(--acc-item-separator, none);
 }
 
+.item + .item {
+  margin-top: var(--acc-item-gap, 0);
+}
+
 :global(.outlined) .item[data-state='open'] .headerRow {
   box-shadow: inset 3px 0 0 var(--color-border-selected);
 }

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -12,13 +12,16 @@ function Breadcrumbs({
   items,
   ...navProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => {
+    const isCurrent = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("li", { "aria-current": isCurrent ? "page" : void 0, children: [
+        item.icon && item.icon,
+        item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+      ] }),
+      index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
+    ] }, `breadcrumbItem-${item.label}-${index}`);
+  }) }) });
 }
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -6,13 +6,16 @@ function Breadcrumbs({
   items,
   ...navProps
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
+  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => {
+    const isCurrent = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("li", { "aria-current": isCurrent ? "page" : void 0, children: [
+        item.icon && item.icon,
+        item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
+      ] }),
+      index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
+    ] }, `breadcrumbItem-${item.label}-${index}`);
+  }) }) });
 }
 
 export { Breadcrumbs };

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

@@ -34,12 +34,8 @@
 .breadcrumbs li[aria-current='page'],
 .breadcrumbs li:last-of-type {
   color: var(--color-fg-default);
-  cursor: default;
-}
-
-.breadcrumbs li[aria-current='page'] button,
-.breadcrumbs li:last-of-type button {
   font-weight: var(--font-weight-medium);
+  cursor: default;
 }
 
 .separator {

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

@@ -259,7 +259,8 @@
 }
 
 .header:hover {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
+  background-color: transparent;
+  border-color: var(--color-navbar-fg);
 }
 
 .header:focus-visible {
@@ -275,7 +276,8 @@
 }
 
 .header.active:hover {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 22%, transparent);
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
+  border-color: var(--color-navbar-fg);
 }
 
 .button.xs {

package/dist/components/chip/Chip.module.css

@@ -24,6 +24,10 @@
     transform var(--transition-fast) var(--ease-standard);
 }
 
+.hasClose {
+  gap: var(--spacing-2xs);
+}
+
 .container:focus-visible {
   outline: none;
 }
@@ -120,6 +124,15 @@
   box-shadow: none;
 }
 
+.neutral .close {
+  color: var(--color-fg-subtle);
+}
+
+.neutral .close:hover,
+.neutral .close:focus-visible {
+  color: var(--color-fg-default);
+}
+
 .success {
   --chip-bg: var(--color-status-success-bg);
   --chip-fg: var(--color-status-success-fg);

package/dist/components/forms/input/Input.module.css

@@ -191,7 +191,8 @@
 }
 
 .header:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+  background-color: transparent;
+  border-color: var(--color-navbar-fg);
 }
 
 .header:focus-within:not([aria-disabled='true']) {

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -3,9 +3,9 @@ export interface InputContainerProps {
     label?: string;
     labelAction?: React.ReactNode;
     htmlFor?: string;
-    error?: string;
-    helpText?: string;
-    helpTextAddition?: string;
+    error?: React.ReactNode;
+    helpText?: React.ReactNode;
+    helpTextAddition?: React.ReactNode;
     fullWidth?: boolean;
     required?: boolean;
     children: React.ReactNode;

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

@@ -4,6 +4,7 @@ export type NavBarItem = NavBarLinkItem | NavBarExpandableItem | NavBarGroupItem
 type NavBarBase = {
     label: string;
     icon?: ReactNode;
+    badge?: number | string;
     iconWidth?: string | number;
     enabled?: boolean;
     tags?: string[];

package/dist/components/page-layout/PageLayout.module.css

@@ -16,6 +16,9 @@
   --page-layout-banner-height: calc(
     var(--spacing-2xs) * 2 + var(--font-size-md) * var(--line-height-normal)
   );
+
+  /* Structural bottom breathing room for all page content. */
+  --page-layout-content-padding-bottom: var(--spacing-2xl);
 }
 
 /* Viewport handling:
@@ -215,7 +218,11 @@
   align-items: center;
 
   background: var(--color-bg-surface);
-  padding: var(--spacing-md);
+  padding-block-start: var(--spacing-md);
+  padding-inline: var(--spacing-md);
+  padding-block-end: calc(
+    var(--page-layout-content-padding-bottom) + env(safe-area-inset-bottom, 0px)
+  );
   overflow: visible;
 }
 

package/dist/components/sidebar/components/SidebarItem.cjs

@@ -7,6 +7,7 @@ function SidebarItem({
   component: Component,
   label,
   icon,
+  badge,
   href,
   iconWidth,
   truncateLabel
@@ -18,6 +19,7 @@ function SidebarItem({
     SidebarItemContent.SidebarItemContent,
     {
       icon,
+      badge,
       iconWidth,
       label,
       href,

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

@@ -3,9 +3,10 @@ interface SidebarItemProps {
     component?: React.ElementType;
     label: string;
     icon: React.ReactNode;
+    badge?: number | string;
     href?: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
 }
-export declare function SidebarItem({ component: Component, label, icon, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
+export declare function SidebarItem({ component: Component, label, icon, badge, href, iconWidth, truncateLabel, }: SidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/SidebarItem.js

@@ -5,6 +5,7 @@ function SidebarItem({
   component: Component,
   label,
   icon,
+  badge,
   href,
   iconWidth,
   truncateLabel
@@ -16,6 +17,7 @@ function SidebarItem({
     SidebarItemContent,
     {
       icon,
+      badge,
       iconWidth,
       label,
       href,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.cjs

@@ -21,6 +21,7 @@ function ExpandableSidebarItem({
   items,
   label,
   icon,
+  badge,
   component: Component,
   href,
   iconWidth,
@@ -85,6 +86,7 @@ function ExpandableSidebarItem({
           items: (_b = item.children) != null ? _b : [],
           label: item.label,
           icon: item.icon,
+          badge: item.badge,
           href: item.href,
           iconWidth: item.iconWidth,
           component: item.component
@@ -98,6 +100,7 @@ function ExpandableSidebarItem({
         component: item.component,
         label: item.label,
         icon: item.icon,
+        badge: item.badge,
         href: item.href,
         iconWidth: item.iconWidth,
         truncateLabel: item.truncateLabel
@@ -112,6 +115,7 @@ function ExpandableSidebarItem({
         {
           headerStyle: expanded,
           icon,
+          badge,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.d.ts

@@ -5,9 +5,10 @@ type ExpandableSidebarItemProps = {
     label: string;
     component: React.ElementType;
     icon: React.ReactNode;
+    badge?: number | string;
     href: string;
     iconWidth?: string | number;
     truncateLabel?: boolean;
 };
-export declare function ExpandableSidebarItem({ items, label, icon, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
+export declare function ExpandableSidebarItem({ items, label, icon, badge, component: Component, href, iconWidth, truncateLabel, }: ExpandableSidebarItemProps): React.ReactNode;
 export {};

package/dist/components/sidebar/components/expandable-sidebar-item/ExpandableSidebarItem.js

@@ -15,6 +15,7 @@ function ExpandableSidebarItem({
   items,
   label,
   icon,
+  badge,
   component: Component,
   href,
   iconWidth,
@@ -79,6 +80,7 @@ function ExpandableSidebarItem({
           items: (_b = item.children) != null ? _b : [],
           label: item.label,
           icon: item.icon,
+          badge: item.badge,
           href: item.href,
           iconWidth: item.iconWidth,
           component: item.component
@@ -92,6 +94,7 @@ function ExpandableSidebarItem({
         component: item.component,
         label: item.label,
         icon: item.icon,
+        badge: item.badge,
         href: item.href,
         iconWidth: item.iconWidth,
         truncateLabel: item.truncateLabel
@@ -106,6 +109,7 @@ function ExpandableSidebarItem({
         {
           headerStyle: expanded,
           icon,
+          badge,
           iconWidth,
           label,
           href,

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var getHighlightedSegments = require('../../../../utils/text/get-highlighted-segments');
 var styles = require('./SidebarItemContent.module.css');
+var Chip = require('../../../chip/Chip');
 var SidebarProvider = require('../../providers/SidebarProvider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -15,6 +16,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 function SidebarItemContent({
   icon,
   label,
+  badge,
   suffixIcon,
   href,
   iconWidth,
@@ -45,7 +47,10 @@ function SidebarItemContent({
             }
           )
         ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon })
+        !isSidebarCollapsed && (badge != null || suffixIcon) ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.trailing, children: [
+          badge != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: typeof badge === "number" ? badge.toLocaleString("da-DK") : badge }) }) : null,
+          suffixIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.suffixIcon, children: suffixIcon }) : null
+        ] }) : null
       ]
     }
   );

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.d.ts

@@ -3,6 +3,7 @@ import type { JSX } from 'react';
 export interface SidebarItemContentProps {
     icon?: React.ReactNode;
     label: React.ReactNode;
+    badge?: number | string;
     suffixIcon?: React.ReactNode;
     href?: string;
     iconWidth?: string | number;
@@ -10,4 +11,4 @@ export interface SidebarItemContentProps {
     headerStyle?: boolean;
     truncateLabel?: boolean;
 }
-export declare function SidebarItemContent({ icon, label, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;
+export declare function SidebarItemContent({ icon, label, badge, suffixIcon, href, iconWidth, disableActiveStyles, headerStyle, truncateLabel, }: SidebarItemContentProps): JSX.Element;

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.js

@@ -3,11 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { getHighlightedSegments } from '../../../../utils/text/get-highlighted-segments';
 import styles from './SidebarItemContent.module.css';
+import { Chip } from '../../../chip/Chip';
 import { useSidebar } from '../../providers/SidebarProvider';
 
 function SidebarItemContent({
   icon,
   label,
+  badge,
   suffixIcon,
   href,
   iconWidth,
@@ -38,7 +40,10 @@ function SidebarItemContent({
             }
           )
         ] }),
-        suffixIcon && !isSidebarCollapsed && /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon })
+        !isSidebarCollapsed && (badge != null || suffixIcon) ? /* @__PURE__ */ jsxs("span", { className: styles.trailing, children: [
+          badge != null ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: typeof badge === "number" ? badge.toLocaleString("da-DK") : badge }) }) : null,
+          suffixIcon ? /* @__PURE__ */ jsx("span", { className: styles.suffixIcon, children: suffixIcon }) : null
+        ] }) : null
       ]
     }
   );

package/dist/components/sidebar/components/sidebar-item-content/SidebarItemContent.module.css

@@ -87,6 +87,20 @@
   color: inherit;
 }
 
+.trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  min-inline-size: 0;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+}
+
 .collapsed svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -26,13 +26,23 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      const {
+        component: Component2,
+        label: label2,
+        icon: icon2,
+        badge: badge2,
+        children,
+        href: href2,
+        iconWidth: iconWidth2,
+        truncateLabel: truncateLabel2
+      } = item;
       return /* @__PURE__ */ jsxRuntime.jsx(
         ExpandableSidebarItem.ExpandableSidebarItem,
         {
           items: children,
           label: label2,
           icon: icon2,
+          badge: badge2,
           href: href2,
           iconWidth: iconWidth2,
           truncateLabel: truncateLabel2,
@@ -41,13 +51,14 @@ function SidebarItems({ activeLink }) {
         key
       );
     }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    const { component: Component, label, icon, badge, href, iconWidth, truncateLabel } = item;
     return /* @__PURE__ */ jsxRuntime.jsx(
       SidebarItem.SidebarItem,
       {
         component: Component,
         label,
         icon,
+        badge,
         href,
         iconWidth,
         truncateLabel

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -20,13 +20,23 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const { component: Component2, label: label2, icon: icon2, children, href: href2, iconWidth: iconWidth2, truncateLabel: truncateLabel2 } = item;
+      const {
+        component: Component2,
+        label: label2,
+        icon: icon2,
+        badge: badge2,
+        children,
+        href: href2,
+        iconWidth: iconWidth2,
+        truncateLabel: truncateLabel2
+      } = item;
       return /* @__PURE__ */ jsx(
         ExpandableSidebarItem,
         {
           items: children,
           label: label2,
           icon: icon2,
+          badge: badge2,
           href: href2,
           iconWidth: iconWidth2,
           truncateLabel: truncateLabel2,
@@ -35,13 +45,14 @@ function SidebarItems({ activeLink }) {
         key
       );
     }
-    const { component: Component, label, icon, href, iconWidth, truncateLabel } = item;
+    const { component: Component, label, icon, badge, href, iconWidth, truncateLabel } = item;
     return /* @__PURE__ */ jsx(
       SidebarItem,
       {
         component: Component,
         label,
         icon,
+        badge,
         href,
         iconWidth,
         truncateLabel

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

@@ -185,16 +185,15 @@
   background: var(--table-component-row-bg);
   overflow: hidden;
   line-height: 20px;
-  height: 40px;
 }
 
 .md .headerCell {
-  padding-block: var(--spacing-xxs);
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-xs);
 }
 
 .md .cell {
-  padding-block: var(--spacing-xxs);
+  padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-xs);
 }
 
@@ -208,7 +207,6 @@
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   line-height: 20px;
-  height: 32px;
 }
 
 .sm .contextMenuTrigger {

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

@@ -12,6 +12,7 @@ export interface ColumnItem<T> {
     render?: (item: T) => ReactNode;
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
+    muted?: boolean;
     verticalAlign?: 'top' | 'middle' | 'bottom';
     divider?: 'right' | 'left';
     allowWrap?: boolean;

package/dist/components/table/components/TableHeaderCell.cjs

@@ -31,7 +31,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "th",
     {
-      className: styles__default.default.headerCell,
+      className: table_classes.cx(styles__default.default.headerCell, column.muted && "dbc-muted-text"),
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,

package/dist/components/table/components/TableHeaderCell.js

@@ -25,7 +25,7 @@ function TableHeaderCell({
   return /* @__PURE__ */ jsxs(
     "th",
     {
-      className: styles.headerCell,
+      className: cx(styles.headerCell, column.muted && "dbc-muted-text"),
       scope: "col",
       "aria-sort": ariaSort,
       "data-align": align,

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

@@ -144,6 +144,7 @@ function TableRow({
             {
               className: table_classes.cx(
                 styles__default.default.cell,
+                column.muted && "dbc-muted-text",
                 showRowActions && styles__default.default.actionCell,
                 allowOverflow && styles__default.default.allowOverflow,
                 allowWrap ? styles__default.default.allowWrap : styles__default.default.nowrap,

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

@@ -138,6 +138,7 @@ function TableRow({
             {
               className: cx(
                 styles.cell,
+                column.muted && "dbc-muted-text",
                 showRowActions && styles.actionCell,
                 allowOverflow && styles.allowOverflow,
                 allowWrap ? styles.allowWrap : styles.nowrap,

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

@@ -20,7 +20,7 @@ function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
   return defs.map((def, index) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = getColumnId(def, index);
     const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
@@ -52,9 +52,10 @@ function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
       verticalAlign: meta.verticalAlign,
       emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
       allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      muted: (_g = meta.muted) != null ? _g : false,
       severity: meta.severity,
       divider: meta.divider,
-      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+      allowOverflow: (_h = meta.allowOverflow) != null ? _h : false
     };
   });
 }

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

@@ -18,7 +18,7 @@ function buildColumnVisibilityFromVisibleIds(defs, visibleColumnIds) {
 }
 function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
   return defs.map((def, index) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const id = getColumnId(def, index);
     const accessorKey = def.accessorKey;
     const accessorFn = def.accessorFn;
@@ -50,9 +50,10 @@ function mapDefsToColumnItems(defs, columnVisibility, resolvedLayout = {}) {
       verticalAlign: meta.verticalAlign,
       emptyPlaceholder: (_e = meta.emptyPlaceholder) != null ? _e : "-",
       allowWrap: (_f = meta.allowWrap) != null ? _f : false,
+      muted: (_g = meta.muted) != null ? _g : false,
       severity: meta.severity,
       divider: meta.divider,
-      allowOverflow: (_g = meta.allowOverflow) != null ? _g : false
+      allowOverflow: (_h = meta.allowOverflow) != null ? _h : false
     };
   });
 }

package/dist/components/tabs/Tabs.module.css

@@ -47,7 +47,7 @@
    squeezing it. */
 .tabListAddition {
   display: flex;
-  align-items: center;
+  align-items: start;
   flex-shrink: 0;
   gap: var(--spacing-sm);
   margin-inline-start: auto;
@@ -242,6 +242,15 @@
   border-start-start-radius: var(--border-radius-md);
 }
 
+.filled > .tabList > .tabButtons > .tab > .tabButton {
+  padding-block: var(--spacing-xs);
+}
+
+.filled > .tabList > .tabButtons > .tab > .tabButton .icon svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 .filled > .tabList > .tabButtons.tabButtonsEnd {
   border-start-end-radius: var(--border-radius-md);
 }
@@ -260,6 +269,7 @@
 .filled > .tabList > .tabButtons > .tab {
   border: 1px solid transparent;
   border-block-end-width: 1px;
+  margin-block-end: -1px;
   color: var(--color-fg-muted);
   position: relative;
   transition:
@@ -281,7 +291,6 @@
   border-block-end-color: var(--color-bg-surface);
   border-start-start-radius: var(--border-radius-md);
   border-start-end-radius: var(--border-radius-md);
-  margin-block-end: -1px;
   z-index: 1;
   color: var(--color-fg-default);
 }
@@ -301,7 +310,7 @@
   border-block-start: none;
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
   box-shadow: var(--shadow-xs);
-  padding: var(--spacing-md);
+  padding: calc(var(--spacing-md) + var(--spacing-xs)) var(--spacing-md) var(--spacing-md);
 }
 
 /* =========================
@@ -381,7 +390,7 @@
 
   .filled > .tabContent,
   .panelStyle.outlined > .tabContent {
-    padding-block: var(--spacing-sm);
+    padding-block: calc(var(--spacing-sm) + var(--spacing-xs)) var(--spacing-sm);
     padding-inline: var(--spacing-sm);
   }
 

package/dist/styles/styles.css

@@ -72,9 +72,45 @@ body.dbc-app {
   font-family: monospace;
 }
 
-/* ==========================================================================
-   Tables
-   ========================================================================== */
+.dbc-pulse {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-round);
+  color: var(--color-primary-500, var(--color-brand));
+  transform-origin: center;
+}
+
+.dbc-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: dbc-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dbc-pulse {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 0.55;
+  }
+  60% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dbc-pulse::after {
+    animation: none;
+  }
+}
 
 .dbc-table {
   --card-label-width: 260px;

package/dist/styles.css

@@ -72,9 +72,45 @@ body.dbc-app {
   font-family: monospace;
 }
 
-/* ==========================================================================
-   Tables
-   ========================================================================== */
+.dbc-pulse {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-round);
+  color: var(--color-primary-500, var(--color-brand));
+  transform-origin: center;
+}
+
+.dbc-pulse::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: dbc-pulse 1.8s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes dbc-pulse {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 0.55;
+  }
+  60% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dbc-pulse::after {
+    animation: none;
+  }
+}
 
 .dbc-table {
   --card-label-width: 260px;

package/package.json

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