@dbcdk/react-components 0.0.10 → 0.0.13

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

@@ -1,5 +1,5 @@
-import type { ReactNode, JSX } from 'react';
-import { Severity } from '../../constants/severity.types';
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
 export interface AccordionItem {
     header: string;
     headerIcon?: ReactNode;

package/dist/components/accordion/Accordion.js

@@ -1,42 +1,43 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useId, useMemo, useState } from 'react';
 import styles from './Accordion.module.css';
-import { Headline } from '../headline/Headline';
+import { AccordionRow } from './components/AccordionRow';
 function uniqSorted(nums) {
     return Array.from(new Set(nums)).sort((a, b) => a - b);
 }
+function normalizeMultiple(indexes) {
+    return uniqSorted((indexes !== null && indexes !== void 0 ? indexes : []).filter(n => Number.isFinite(n)));
+}
 export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
     const uid = useId();
-    const isControlledSingle = mode === 'single' && openIndex !== undefined;
-    const isControlledMultiple = mode === 'multiple' && openIndexes !== undefined;
-    const [internalOpenIndex, setInternalOpenIndex] = useState(mode === 'single' ? defaultOpenIndex : null);
-    const [internalOpenIndexes, setInternalOpenIndexes] = useState(mode === 'multiple' ? uniqSorted(defaultOpenIndexes) : []);
-    const currentOpenIndex = mode === 'single' ? (isControlledSingle ? openIndex : internalOpenIndex) : null;
-    const currentOpenIndexes = useMemo(() => mode === 'multiple'
-        ? isControlledMultiple
-            ? uniqSorted(openIndexes)
-            : internalOpenIndexes
-        : [], [mode, isControlledMultiple, openIndexes, internalOpenIndexes]);
-    const openSet = useMemo(() => new Set(mode === 'single'
-        ? currentOpenIndex !== null
-            ? [currentOpenIndex]
-            : []
-        : currentOpenIndexes), [mode, currentOpenIndex, currentOpenIndexes]);
-    function setSingle(next) {
-        if (isControlledSingle)
-            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
-        else {
-            setInternalOpenIndex(next);
-            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+    const isControlled = mode === 'single' ? openIndex !== undefined : openIndexes !== undefined;
+    const [internalSingle, setInternalSingle] = useState(mode === 'single' ? defaultOpenIndex : null);
+    const [internalMultiple, setInternalMultiple] = useState(mode === 'multiple' ? normalizeMultiple(defaultOpenIndexes) : []);
+    const currentOpenIndexes = useMemo(() => {
+        if (mode === 'single') {
+            const current = isControlled ? (openIndex !== null && openIndex !== void 0 ? openIndex : null) : internalSingle;
+            return current === null ? [] : [current];
         }
-    }
-    function setMultiple(next) {
-        const normalized = uniqSorted(next);
-        if (isControlledMultiple)
+        return isControlled ? normalizeMultiple(openIndexes) : internalMultiple;
+    }, [mode, isControlled, openIndex, openIndexes, internalSingle, internalMultiple]);
+    const openSet = useMemo(() => new Set(currentOpenIndexes), [currentOpenIndexes]);
+    function commit(nextIndexes) {
+        if (mode === 'single') {
+            const next = nextIndexes.length ? nextIndexes[0] : null;
+            if (isControlled)
+                onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+            else {
+                setInternalSingle(next);
+                onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+            }
+            return;
+        }
+        const normalized = uniqSorted(nextIndexes);
+        if (isControlled)
             onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
         else {
-            setInternalOpenIndexes(normalized);
+            setInternalMultiple(normalized);
             onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
         }
     }
@@ -44,23 +45,15 @@ export function Accordion({ items, mode = 'single', size = 'md', defaultOpenInde
         const item = items[index];
         if (!item || item.disabled)
             return;
+        const isOpen = openSet.has(index);
         if (mode === 'single') {
-            const isOpen = openSet.has(index);
-            setSingle(isOpen ? null : index);
+            commit(isOpen ? [] : [index]);
             return;
         }
-        // multiple
-        const isOpen = openSet.has(index);
         if (isOpen)
-            setMultiple(currentOpenIndexes.filter(i => i !== index));
+            commit(currentOpenIndexes.filter(i => i !== index));
         else
-            setMultiple([...currentOpenIndexes, index]);
+            commit([...currentOpenIndexes, index]);
     }
-    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => {
-            const isOpen = openSet.has(i);
-            const isDisabled = !!item.disabled;
-            const buttonId = `${uid}-acc-btn-${i}`;
-            const panelId = `${uid}-acc-panel-${i}`;
-            return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(i), disabled: isDisabled, children: [_jsx("span", { className: styles.title, children: _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }) }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: _jsx("path", { d: "M5.5 7.5L10 12l4.5-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, "data-open": isOpen ? 'true' : 'false', children: _jsx("div", { className: styles.content, children: item.children }) })] }, i));
-        }) }));
+    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => (_jsx(AccordionRow, { uid: uid, index: i, item: item, isOpen: openSet.has(i), onToggle: toggle }, i))) }));
 }

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

@@ -8,80 +8,21 @@
   gap: var(--spacing-xxs);
 }
 
-.trigger {
-  all: unset;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-  cursor: pointer;
-  user-select: none;
-  padding: var(--spacing-xs) var(--spacing-md);
-  background: var(--color-bg-contextual);
-
-  /* IMPORTANT: allow flex children to actually shrink */
-  min-width: 0;
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.disabled .trigger {
-  cursor: not-allowed;
-  color: var(--color-disabled-fg);
-}
-
-.title {
-  /* IMPORTANT: this is the shrinking area that contains Headline */
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  flex: 1 1 auto;
-
-  /* ensures any overflow is clipped so ellipsis can show */
-  overflow: hidden;
-}
-
-.chevron {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-  flex: 0 0 auto;
-  transition: transform var(--transition-normal) var(--ease-standard);
-}
-
-.open .chevron {
-  transform: rotate(180deg);
-}
-
-/* Collapsible panel using max-height */
-.panel {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height var(--transition-slow) var(--ease-decelerate);
-}
-
-.panel[data-open='true'] {
-  max-height: 999px;
-}
-
-.content {
-  padding: var(--spacing-md) 0;
-}
-
-/* Sizes */
-.sm .trigger,
-.sm .content {
-  padding: var(--spacing-sm) var(--spacing-md);
+/* Size variables (consumed by AccordionRow) */
+.sm {
+  --acc-trigger-py: var(--spacing-sm);
+  --acc-trigger-px: var(--spacing-md);
+  --acc-content-py: var(--spacing-sm);
 }
 
-.md .trigger {
-  padding: var(--spacing-sm) var(--spacing-md);
+.md {
+  --acc-trigger-py: var(--spacing-sm);
+  --acc-trigger-px: var(--spacing-md);
+  --acc-content-py: var(--spacing-md);
 }
 
-.lg .trigger {
-  padding: var(--spacing-md) var(--spacing-md);
+.lg {
+  --acc-trigger-py: var(--spacing-md);
+  --acc-trigger-px: var(--spacing-md);
+  --acc-content-py: var(--spacing-md);
 }

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

@@ -0,0 +1,10 @@
+import type { JSX } from 'react';
+import { AccordionItem } from '../Accordion';
+export type AccordionRowProps = {
+    uid: string;
+    index: number;
+    item: AccordionItem;
+    isOpen: boolean;
+    onToggle: (index: number) => void;
+};
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, }: AccordionRowProps): JSX.Element;

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './AccordionRow.module.css';
+function useCollapsibleHeight(isOpen) {
+    const innerRef = useRef(null);
+    const [height, setHeight] = useState('0px');
+    useLayoutEffect(() => {
+        var _a, _b;
+        const el = innerRef.current;
+        if (!el)
+            return;
+        const prefersReduced = typeof window !== 'undefined' &&
+            ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)')) === null || _b === void 0 ? void 0 : _b.matches);
+        if (prefersReduced) {
+            setHeight(isOpen ? 'auto' : '0px');
+            return;
+        }
+        if (isOpen) {
+            // 0 -> scrollHeight
+            setHeight('0px');
+            requestAnimationFrame(() => {
+                setHeight(`${el.scrollHeight}px`);
+            });
+        }
+        else {
+            // lock -> 0 (important when currently 'auto')
+            setHeight(`${el.scrollHeight}px`);
+            requestAnimationFrame(() => {
+                setHeight('0px');
+            });
+        }
+    }, [isOpen]);
+    function onTransitionEnd(e) {
+        if (e.propertyName !== 'height')
+            return;
+        if (!innerRef.current)
+            return;
+        if (isOpen)
+            setHeight('auto');
+    }
+    return { innerRef, height, onTransitionEnd };
+}
+export function AccordionRow({ uid, index, item, isOpen, onToggle, }) {
+    const isDisabled = !!item.disabled;
+    const buttonId = `${uid}-acc-btn-${index}`;
+    const panelId = `${uid}-acc-panel-${index}`;
+    const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen);
+    return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsx("h3", { className: styles.heading, children: _jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => onToggle(index), disabled: isDisabled, children: [_jsxs("span", { className: styles.title, children: [item.headerIcon ? _jsx("span", { className: styles.icon, children: item.headerIcon }) : null, _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header })] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, {}) })] }) }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, style: { height }, onTransitionEnd: onTransitionEnd, children: _jsx("div", { ref: innerRef, className: styles.content, children: item.children }) })] }));
+}

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

@@ -0,0 +1,82 @@
+.heading {
+  margin: 0;
+}
+
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+
+  cursor: pointer;
+  user-select: none;
+
+  padding: var(--acc-trigger-py) var(--acc-trigger-px);
+  background: var(--color-bg-contextual);
+
+  min-width: 0;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+}
+
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.chevron svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.open .chevron {
+  transform: rotate(180deg);
+}
+
+.panel {
+  overflow: hidden;
+  height: 0px;
+  transition: height var(--transition-slow) var(--ease-decelerate);
+}
+
+/* Padding inside so scrollHeight includes it */
+.content {
+  padding: var(--acc-content-py) var(--acc-trigger-px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    transition: none;
+  }
+}

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

@@ -1,6 +1,5 @@
 .breadcrumbs {
   font-family: var(--font-family);
-  text-transform: var(--breadcrumb-transform);
 }
 
 .breadcrumbs ul {

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

@@ -13,10 +13,10 @@
   line-height: 1;
 
   height: var(--component-size-md);
-  min-block-size: calc(var(--component-size-md) + var(--density));
+  min-block-size: var(--component-size-md);
 
-  padding-inline: var(--control-padding-x);
-  padding-block: calc(var(--control-padding-y) + var(--density));
+  padding-inline: var(--spacing-sm);
+  padding-block: var(--spacing-xs);
 
   border-width: var(--border-width-thin, 1px);
   border-style: solid;
@@ -86,19 +86,19 @@
 
 .button.xs {
   height: var(--component-size-xs);
-  min-block-size: calc(var(--component-size-sm) + var(--density));
+  min-block-size: var(--component-size-sm);
   padding-inline: var(--spacing-sm);
 }
 
 .button.sm {
   height: var(--component-size-sm);
-  min-block-size: calc(var(--component-size-sm) + var(--density));
+  min-block-size: var(--component-size-sm);
   padding-inline: var(--spacing-sm);
 }
 
 .button.xs {
   height: var(--component-size-xs);
-  min-block-size: calc(var(--component-size-xs) + var(--density));
+  min-block-size: var(--component-size-xs);
   padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
 }
@@ -110,7 +110,7 @@
 
 .button.lg {
   height: var(--component-size-lg);
-  min-block-size: calc(var(--component-size-lg) + var(--density));
+  min-block-size: var(--component-size-lg);
   padding-inline: var(--spacing-lg);
 }
 

package/dist/components/card/Card.d.ts

@@ -1,10 +1,10 @@
-import { JSXElementConstructor, ReactElement } from 'react';
-import type { ReactNode, JSX } from 'react';
-import { Severity } from '../../constants/severity.types';
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+import { CardMeta, CardMetaRow } from './components/CardMeta';
 type CardVariant = 'default' | 'subtle' | 'strong';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
-interface CardProps {
+export interface CardProps {
     title?: string;
     loading?: boolean;
     variant?: CardVariant;
@@ -20,8 +20,17 @@ interface CardProps {
     sectionTitle?: string;
     showSectionDivider?: boolean;
     children?: ReactNode;
-    link?: ReactElement<any, string | JSXElementConstructor<any>>;
+    /**
+     * Keep current behavior: if provided, Card becomes "linked".
+     * NOTE: this assumes your Hyperlink component can render the passed element correctly.
+     * If Hyperlink expects an <a>, pass <a href="...">...</a> or whatever your existing pattern is.
+     */
+    link?: ReactNode;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
 }
-export declare function Card({ title, loading, variant, size, headerMarker, headerIcon, severity, image, imgPlacement, mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider, children, link, width, }: CardProps): JSX.Element;
+type CardComponent = ((props: CardProps) => JSX.Element) & {
+    Meta: typeof CardMeta;
+    MetaRow: typeof CardMetaRow;
+};
+export declare const Card: CardComponent;
 export {};

package/dist/components/card/Card.js

@@ -1,22 +1,48 @@
-'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Card.module.css';
+import { CardMeta, CardMetaRow } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-export function Card({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
-    const outerContainerStyle = width
-        ? { ['--width']: `${width}%` }
-        : undefined;
+function getInnerPlacementClass(imgPlacement, s) {
+    switch (imgPlacement) {
+        case 'top':
+            return s.innerImgTop;
+        case 'right':
+            return s.innerImgRight;
+        case 'left':
+        default:
+            return s.innerImgLeft;
+    }
+}
+function getVariantClass(variant, s) {
+    switch (variant) {
+        case 'subtle':
+            return s.variantSubtle;
+        case 'strong':
+            return s.variantStrong;
+        case 'default':
+        default:
+            return s.variantDefault;
+    }
+}
+function CardImpl({ title, loading = false, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
+    const outerStyle = width ? { ['--width']: `${width}%` } : undefined;
     const mediaStyle = mediaWidth
         ? { ['--card-media-width']: `${mediaWidth}px` }
         : undefined;
-    const innerPlacementClass = imgPlacement === 'top'
-        ? styles.innerImgTop
-        : imgPlacement === 'right'
-            ? styles.innerImgRight
-            : styles.innerImgLeft;
-    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image && (_jsx("div", { className: styles.media, style: mediaStyle, children: image })), _jsxs("div", { className: styles.content, children: [(title || headerMeta) && (_jsxs("header", { className: styles.header, children: [title && (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })), headerMeta && _jsx("div", { className: styles.headerMeta, children: headerMeta })] })), loading && (_jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })), !loading && (showSectionDivider || sectionTitle) && (_jsxs("div", { className: styles.section, children: [showSectionDivider && _jsx("div", { className: styles.sectionDivider }), sectionTitle && _jsx("div", { className: styles.sectionTitle, children: sectionTitle })] })), !loading && children && _jsx("div", { className: styles.body, children: children }), !loading && actions && _jsx("div", { className: styles.actions, children: actions })] })] }));
-    const cardWithLink = link ? _jsx(Hyperlink, { component: link }) : inner;
-    return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: _jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(' '), children: cardWithLink }) }));
+    const innerPlacementClass = getInnerPlacementClass(imgPlacement, styles);
+    const variantClass = getVariantClass(variant, styles);
+    const hasHeader = !!title || !!headerMeta;
+    const showSection = !loading && (showSectionDivider || !!sectionTitle);
+    const showBody = !loading && !!children;
+    const showActions = !loading && !!actions;
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image ? (_jsx("div", { className: styles.media, style: mediaStyle, children: image })) : null, _jsxs("div", { className: styles.content, children: [hasHeader ? (_jsxs("header", { className: styles.header, children: [title ? (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })) : null, headerMeta ? _jsx("div", { className: styles.headerMeta, children: headerMeta }) : null] })) : null, loading ? (_jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })) : null, showSection ? (_jsxs("div", { className: styles.section, children: [showSectionDivider ? _jsx("div", { className: styles.sectionDivider }) : null, sectionTitle ? _jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null] })) : null, showBody ? _jsx("div", { className: styles.body, children: children }) : null, showActions ? _jsx("div", { className: styles.actions, children: actions }) : null] })] }));
+    // keep existing behavior
+    const cardContent = link ? _jsx(Hyperlink, { children: link }) : inner;
+    return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerStyle, children: _jsx("div", { className: `${styles.container} ${variantClass}`, children: cardContent }) }));
 }
+export const Card = Object.assign(CardImpl, {
+    Meta: CardMeta,
+    MetaRow: CardMetaRow,
+});

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

@@ -12,7 +12,6 @@
   border-radius: var(--border-radius-md);
   border: var(--border-width-thin) solid var(--color-border-subtle);
   box-shadow: var(--shadow-xs);
-  padding-block: 0;
   transition:
     color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
@@ -24,33 +23,31 @@
 }
 
 /* BACKGROUND VARIANTS */
-.container.default {
+.variantDefault {
   background-color: var(--card-bg-default, var(--color-bg-surface));
 }
 
-.container.subtle {
+.variantSubtle {
   background-color: var(--card-bg-subtle, var(--color-bg-surface-subtle));
 }
 
-.container.strong {
+.variantStrong {
   background-color: var(--card-bg-strong, var(--color-bg-surface-strong));
   color: var(--card-fg-on-strong, var(--color-fg-on-strong));
 }
 
-/* SIZE VARIANTS */
-.sm .inner {
-  padding: var(--spacing-md);
-  gap: var(--spacing-md);
+/* SIZE VARIANTS (define vars once; inner uses them) */
+.sm {
+  --card-pad: var(--spacing-md);
+  --card-gap: var(--spacing-md);
 }
-
-.md .inner {
-  padding: var(--spacing-lg);
-  gap: var(--spacing-lg);
+.md {
+  --card-pad: var(--spacing-lg);
+  --card-gap: var(--spacing-lg);
 }
-
-.lg .inner {
-  padding: var(--spacing-xl);
-  gap: var(--spacing-xl);
+.lg {
+  --card-pad: var(--spacing-xl);
+  --card-gap: var(--spacing-xl);
 }
 
 /* INNER LAYOUT */
@@ -58,6 +55,8 @@
   margin-inline: auto;
   display: flex;
   align-items: flex-start;
+  padding: var(--card-pad);
+  gap: var(--card-gap);
 }
 
 /* Media placement */
@@ -103,8 +102,8 @@
 
 /* CONTENT */
 .content {
-  flex: 1 1 auto; /* important: allow content column to grow */
-  min-inline-size: 0; /* prevents overflow in flex layouts */
+  flex: 1 1 auto;
+  min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
@@ -118,11 +117,6 @@
   gap: var(--spacing-sm);
 }
 
-.value {
-  font-weight: 600;
-  white-space: nowrap;
-}
-
 .headerMeta {
   display: flex;
   align-items: center;
@@ -156,18 +150,18 @@
 }
 
 .sectionTitle {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* BODY */
 .body {
-  /* leave this as a neutral container; consumers render their own layout */
+  /* neutral container */
 }
 
-/* ACTIONS (bottom-right) */
+/* ACTIONS */
 .actions {
-  margin-top: auto; /* pushes actions to bottom of the content column */
+  margin-top: auto;
   display: flex;
-  justify-content: flex-end; /* right-align buttons */
+  justify-content: flex-end;
   gap: var(--spacing-sm);
 }

package/dist/components/card/components/CardMeta.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+export type CardMetaProps = {
+    columns?: 1 | 2 | 3;
+    className?: string;
+    children: ReactNode;
+} & Omit<HTMLAttributes<HTMLDListElement>, 'children'>;
+export type CardMetaRowProps = {
+    label: ReactNode;
+    value: ReactNode;
+    className?: string;
+    nowrapValue?: boolean;
+    labelWidth?: string;
+};
+export declare function CardMeta({ columns, className, children, ...rest }: CardMetaProps): JSX.Element;
+export declare function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }: CardMetaRowProps): JSX.Element;

package/dist/components/card/components/CardMeta.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './CardMeta.module.css';
+function getColsClass(columns) {
+    switch (columns) {
+        case 1:
+            return styles.cols1;
+        case 3:
+            return styles.cols3;
+        case 2:
+        default:
+            return styles.cols2;
+    }
+}
+export function CardMeta({ columns = 2, className, children, ...rest }) {
+    const colsClass = getColsClass(columns);
+    return (_jsx("dl", { ...rest, className: [styles.grid, colsClass, className].filter(Boolean).join(' '), children: children }));
+}
+export function CardMetaRow({ label, value, className, nowrapValue, labelWidth, }) {
+    return (_jsxs("div", { className: [styles.row, className].filter(Boolean).join(' '), style: labelWidth ? { ['--label-width']: labelWidth } : undefined, children: [_jsx("dt", { className: styles.label, children: label }), _jsx("dd", { className: [styles.value, nowrapValue ? styles.nowrap : ''].filter(Boolean).join(' '), children: value })] }));
+}