@dbcdk/react-components 0.0.89 → 0.0.91

package/dist/components/avatar/Avatar.js

@@ -4,14 +4,16 @@ import styles from './Avatar.module.css';
 import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
 import { sizes } from '../../constants/sizes';
 export function Avatar({ image, imgSrc, imgAlt, fullName, color = 'brand', button, size = 'md', className, fullWidth = false, photographerCredit, ...rest }) {
-    const text = fullName
-        ? fullName
-            .trim()
-            .split(/\s+/)
-            .map(name => name.charAt(0))
-            .join('')
-            .toUpperCase()
-        : '';
+    const text = (() => {
+        if (!fullName)
+            return '';
+        const parts = fullName.trim().split(/\s+/);
+        if (parts.length === 1) {
+            return parts[0].charAt(0).toUpperCase();
+        }
+        // Use first letter of first and last part only
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+    })();
     const styleVars = {
         '--bg': SeverityBgColor[color],
         '--text': SeverityTextColor[color],
@@ -31,9 +33,13 @@ export function Avatar({ image, imgSrc, imgAlt, fullName, color = 'brand', butto
         if (imgSrc) {
             return _jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
         }
-        return (_jsx("span", { className: styles.avatar, "aria-hidden": "true", children: text }));
+        const avatarSizeClass = [styles.avatar];
+        if (size === 'xs')
+            avatarSizeClass.push(styles['size-xs']);
+        if (size === 'sm')
+            avatarSizeClass.push(styles['size-sm']);
+        return (_jsx("span", { className: avatarSizeClass.join(' '), "aria-hidden": "true", children: text }));
     };
-    // Keep button behavior as before (no circular credit)
     if (button) {
         return (_jsx("button", { type: "button", ...rest, className: [styles.container, styles.button, className].filter(Boolean).join(' '), style: styleVars, children: renderImage() }));
     }

package/dist/components/avatar/Avatar.module.css

@@ -4,64 +4,85 @@
   max-inline-size: var(--component-size-xl);
   aspect-ratio: 1 / 1;
   border-radius: var(--border-radius-round);
-  background-color: var(--bg);
-  color: var(--text);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-normal);
   overflow: hidden;
 }
 
 .container.button {
   cursor: pointer;
   border: 0;
-  background: var(--bg);
-  transition: opacity var(--transition-fast) var(--ease-standard);
+  padding: 0;
+  background: transparent; /* important */
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-fast) var(--ease-standard);
+}
+
+.container.button:hover .avatar {
+  background-color: color-mix(in srgb, var(--bg) 25%, var(--color-bg-surface));
 }
 
-.container.button:hover {
+.container.button:active {
   opacity: 0.8;
 }
 
 .avatar {
-  display: flex;
+  inline-size: 80%;
+  block-size: 80%;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
+
+  /* moved here */
+  background-color: color-mix(in srgb, var(--bg) 20%, var(--color-bg-surface));
+  color: var(--bg);
+
   font-size: var(--font-size-sm);
   line-height: 1;
   text-transform: uppercase;
 }
 
+.avatar.size-xs,
+.avatar.size-sm {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+}
+
 .image {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   display: block;
+  border-radius: 50%; /* important if image fills avatar */
 }
 
 .imageSlot {
   display: contents;
 }
 
-/* Wrapper for non-button avatar so we can overlay SVG */
 .wrapper {
   position: relative;
   display: inline-block;
+  inline-size: var(--size);
+  block-size: var(--size);
+  max-inline-size: var(--component-size-xl);
+  aspect-ratio: 1 / 1;
   color: var(--text);
 }
 
-/* Circular photographer credit text overlay */
 .creditText {
   position: absolute;
   inset: 0;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   pointer-events: none;
   fill: currentColor;
 }
 
-/* Make sure the font is large enough and clearly visible */
 .creditText text {
   font-size: 11px;
   font-weight: 600;

package/dist/components/card/Card.module.css

@@ -38,6 +38,11 @@
   padding: var(--spacing-lg);
 }
 
+.md .content,
+.lg .content {
+  gap: var(--spacing-lg);
+}
+
 .lg .container {
   padding: var(--spacing-xl);
 }
@@ -91,6 +96,7 @@
 /* Body */
 .body {
   min-width: 0;
+  flex: 1 1 auto;
 }
 
 /* Actions */

package/dist/components/grid/Grid.d.ts

@@ -3,17 +3,19 @@ export type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface GridProps {
     children?: ReactNode;
     gap?: GridGap;
+    /** Stretch direct children so cards/items in the same row get equal height */
+    equalHeight?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare function Grid({ children, gap, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+export declare function Grid({ children, gap, equalHeight, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface GridItemProps {
     children?: ReactNode;
-    /** Default span (mobile-first, 1–12) */
+    /** Default span: <768px */
     base?: number;
-    /** Override at ≥768px */
+    /** Medium span: ≥768px */
     md?: number;
-    /** Override at ≥1024px */
+    /** Large span: ≥1200px */
     lg?: number;
     className?: string;
     style?: CSSProperties;

package/dist/components/grid/Grid.js

@@ -8,8 +8,10 @@ const GAP_TOKEN = {
     lg: 'var(--spacing-lg)',
     xl: 'var(--spacing-xl)',
 };
-export function Grid({ children, gap = 'md', className, style }) {
-    return (_jsx("div", { className: [styles.grid, className].filter(Boolean).join(' '), style: { gap: GAP_TOKEN[gap], ...style }, children: children }));
+export function Grid({ children, gap = 'md', equalHeight = false, className, style }) {
+    return (_jsx("div", { className: [styles.grid, equalHeight && styles.equalHeight, className]
+            .filter(Boolean)
+            .join(' '), style: { gap: GAP_TOKEN[gap], ...style }, children: children }));
 }
 export function GridItem({ children, base = 12, md, lg, className, style }) {
     return (_jsx("div", { className: [styles.item, className].filter(Boolean).join(' '), style: {

package/dist/components/grid/Grid.module.css

@@ -1,10 +1,25 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+}
+
+.equalHeight {
+  align-items: stretch;
 }
 
 .item {
   grid-column: span var(--span-base, 12);
+  min-inline-size: 0;
+}
+
+.equalHeight .item {
+  display: flex;
+}
+
+.equalHeight .item > * {
+  flex: 1;
+  min-inline-size: 0;
 }
 
 @media (min-width: 768px) {
@@ -13,7 +28,7 @@
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1200px) {
   .item {
     grid-column: span var(--span-lg, var(--span-md, var(--span-base, 12)));
   }

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

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from 'react';
+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. */
+    expanded?: boolean;
+    /** Called when the toggle is clicked. */
+    onToggle?: () => void;
+    /** id of the panel element, used for aria-controls. Generated automatically if omitted. */
+    controls?: string;
+    /** Extra content rendered between the headline text and the toggle button. */
+    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.
+     */
+    storageKey?: string;
+}
+export declare function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size, variant, weight, ...headlineProps }: PropsWithChildren<CollapsibleHeadlineProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/headline/CollapsibleHeadline.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useId, useState } from 'react';
+import { Headline } from './Headline';
+import styles from './Headline.module.css';
+import { Button } from '../button/Button';
+export function CollapsibleHeadline({ header, expanded, onToggle, controls, addition, storageKey, children, size = 2, variant = 'muted', weight = 400, ...headlineProps }) {
+    const generatedId = useId();
+    const panelId = controls !== null && controls !== void 0 ? controls : generatedId;
+    const [internalExpanded, setInternalExpanded] = useState(() => {
+        if (!storageKey || typeof window === 'undefined')
+            return expanded !== null && expanded !== void 0 ? expanded : false;
+        const stored = localStorage.getItem(storageKey);
+        return stored !== null ? stored === 'true' : (expanded !== null && expanded !== void 0 ? expanded : false);
+    });
+    const isExpanded = storageKey ? internalExpanded : (expanded !== null && expanded !== void 0 ? expanded : false);
+    const handleToggle = () => {
+        if (storageKey) {
+            const next = !internalExpanded;
+            setInternalExpanded(next);
+            localStorage.setItem(storageKey, String(next));
+        }
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle();
+    };
+    return (_jsxs("div", { className: styles.collapsibleRoot, children: [_jsxs(Headline, { ...headlineProps, variant: variant, weight: weight, size: size, addition: addition, children: [header, _jsx(Button, { shape: "round", type: "button", variant: "inline", "aria-expanded": isExpanded, "aria-controls": panelId, onClick: handleToggle, children: _jsx(ChevronDown, { "aria-hidden": true, className: [styles.toggleChevron, isExpanded ? styles.toggleChevronExpanded : '']
+                                .filter(Boolean)
+                                .join(' ') }) })] }), isExpanded && (_jsx("div", { id: panelId, className: styles.collapsiblePanel, children: children }))] }));
+}

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

@@ -1,17 +1,19 @@
 import React, { PropsWithChildren } from 'react';
 import { Severity } from '../../constants/severity.types';
 type HeadlineTone = 'dark' | 'light';
-interface HeadlineProps extends React.AriaAttributes {
+type HeadlineVariant = 'default' | 'muted';
+export interface HeadlineProps extends React.AriaAttributes {
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     marker?: boolean;
     disableMargin?: boolean;
     severity?: Severity;
-    weight?: 500 | 600 | 700;
+    weight?: 400 | 500 | 600 | 700;
     subheader?: React.ReactNode;
     addition?: React.ReactNode;
     icon?: React.ReactNode;
     allowWrap?: boolean;
     tone?: HeadlineTone;
+    variant?: HeadlineVariant;
 }
-export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, allowWrap, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
+export declare function Headline({ size, marker, disableMargin, children, severity, weight, subheader, addition, icon, tone, variant, allowWrap, }: PropsWithChildren<HeadlineProps>): React.JSX.Element;
 export {};

package/dist/components/headline/Headline.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Headline.module.css';
 import { SeverityBgColor } from '../../constants/severity';
 import { Icon } from '../icon/Icon';
-export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subheader, addition, icon, tone, allowWrap = true, }) {
+export function Headline({ size = 2, marker, disableMargin, children, severity, weight = 600, subheader, addition, icon, tone, variant, allowWrap = true, }) {
     const Tag = `h${size}`;
     const containerClassName = [styles.headlineContainer, tone ? styles[`tone-${tone}`] : '']
         .filter(Boolean)
@@ -12,6 +12,7 @@ export function Headline({ size = 2, marker, disableMargin, children, severity,
         styles.headline,
         disableMargin ? styles.noMargin : '',
         marker ? styles.marker : '',
+        variant === 'muted' ? styles['variant-muted'] : '',
     ]
         .filter(Boolean)
         .join(' ');

package/dist/components/headline/Headline.module.css

@@ -11,6 +11,7 @@
   flex-direction: column;
   flex: 1 1 auto;
   min-width: 0;
+  gap: var(--spacing-xxs);
 }
 
 .headlineRow {
@@ -29,7 +30,7 @@
   margin-block: var(--spacing-xs);
 
   /* Typography */
-  font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight, 600);
   letter-spacing: var(--letter-spacing-tight);
   line-height: var(--line-height-tight);
   color: inherit;
@@ -39,6 +40,56 @@
   min-width: 0; /* required for truncation inside flex */
 }
 
+/* CollapsibleHeadline wrapper */
+.collapsibleRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.collapsiblePanel {
+  display: contents;
+}
+
+/* CollapsibleHeadline toggle button */
+.toggleButton {
+  all: unset;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  color: var(--color-fg-subtle);
+  transition: color var(--transition-fast) var(--ease-standard);
+}
+
+.toggleButton:hover {
+  color: var(--color-fg-default);
+}
+
+.toggleButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.toggleChevron {
+  display: block;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.toggleChevronExpanded {
+  transform: rotate(180deg);
+}
+
+/* Variant overrides */
+.variant-muted {
+  color: var(--color-fg-subtle);
+}
+
 /* Tone overrides */
 .tone-dark .headline {
   color: var(--color-fg-default);
@@ -72,9 +123,9 @@
 
 /* Subheader */
 .subheader {
-  color: var(--color-fg-muted);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   margin-block-start: calc(var(--spacing-2xs) * -1);
+  color: var(--color-fg-subtle);
   line-height: var(--line-height-normal);
 }
 
@@ -83,7 +134,6 @@
   flex: 1 1 auto;
   min-width: 0;
   align-items: center;
-  justify-content: flex-end;
 }
 
 /* Icon */
@@ -109,4 +159,7 @@
 .wrap {
   white-space: normal;
   overflow: visible;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
 }

package/dist/components/popover/Popover.js

@@ -219,7 +219,7 @@ export const Popover = forwardRef(function Popover({ trigger: Trigger, children,
             return;
         (_b = (_a = triggerElRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
     }, [isOpen, returnFocus]);
-    const icon = isOpen ? _jsx(ChevronUp, { size: 20 }) : _jsx(ChevronDown, { size: 20 });
+    const icon = isOpen ? (_jsx(ChevronUp, { className: "dbc-muted-text", size: 20 })) : (_jsx(ChevronDown, { className: "dbc-muted-text", size: 20 }));
     const setOverlayRef = React.useCallback((node) => {
         assignRef(overlayRef, node);
     }, [overlayRef]);

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
+export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';

package/dist/index.js

@@ -9,6 +9,7 @@ export * from './components/icon/Icon';
 export * from './components/user-display/UserDisplay';
 export * from './components/tabs/Tabs';
 export * from './components/headline/Headline';
+export * from './components/headline/CollapsibleHeadline';
 export * from './components/page-layout/PageLayout';
 export * from './components/page-layout/components/layout-footer/LayoutFooter';
 export * from './components/forms/input/Input';

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

@@ -147,12 +147,12 @@ html {
   /* Chart colors */
   --color-chart-empty: var(--color-bg-surface-strong);
   --color-chart-neutral: color-mix(in srgb, var(--color-fg-default) 15%, var(--color-bg-surface));
-  --color-chart-blue: var(--dbc-blue-500);
-  --color-chart-green: var(--dbc-green-500);
-  --color-chart-amber: var(--dbc-amber-400);
-  --color-chart-pink: var(--dbc-pink-500);
-  --color-chart-sky: var(--dbc-info-500);
-  --color-chart-red: var(--dbc-red-300);
+  --color-chart-blue: color-mix(in srgb, var(--dbc-blue-500) 75%, transparent);
+  --color-chart-green: color-mix(in srgb, var(--dbc-green-500) 75%, transparent);
+  --color-chart-amber: color-mix(in srgb, var(--dbc-amber-500) 75%, transparent);
+  --color-chart-pink: color-mix(in srgb, var(--dbc-pink-500) 75%, transparent);
+  --color-chart-sky: color-mix(in srgb, var(--dbc-info-500) 75%, transparent);
+  --color-chart-red: color-mix(in srgb, var(--dbc-red-500) 75%, transparent);
 
   /* Disabled */
   --color-disabled-bg: var(--dbc-neutral-100);

package/package.json

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