@dbcdk/react-components 0.0.108 → 0.0.110

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,213 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Download, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { MetaBar } from '../../client';
+import styles from './Lightbox.module.css';
+import { Button } from '../button/Button';
+
+function extFromMime(mime) {
+  var _a;
+  const map = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif"
+  };
+  return (_a = mime && map[mime]) != null ? _a : "jpg";
+}
+function Lightbox({
+  items,
+  title,
+  initialIndex = 0,
+  thumbnailHeight = 300,
+  showDownload = true,
+  getDownloadFilename,
+  buttonAddition,
+  trigger
+}) {
+  var _a;
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(initialIndex);
+  const [downloading, setDownloading] = useState(false);
+  const current = items[index];
+  const multiple = items.length > 1;
+  useEffect(() => {
+    setIndex((i) => Math.min(Math.max(i, 0), Math.max(items.length - 1, 0)));
+  }, [items.length]);
+  const openAt = useCallback((i = 0) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+  const close = useCallback(() => {
+    var _a2;
+    setDownloading(false);
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+    setOpen(false);
+  }, []);
+  const prev = useCallback(() => {
+    setIndex((i) => (i - 1 + items.length) % items.length);
+  }, [items.length]);
+  const next = useCallback(() => {
+    setIndex((i) => (i + 1) % items.length);
+  }, [items.length]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    const onClose = () => {
+      setOpen(false);
+      setDownloading(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("close", onClose);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+  }, [close]);
+  useEffect(() => {
+    if (!open || !multiple) return;
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, multiple, prev, next]);
+  const download = useCallback(async () => {
+    var _a2;
+    if (!(current == null ? void 0 : current.downloadSrc)) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(current.downloadSrc, { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const ext = extFromMime((_a2 = current.mimeType) != null ? _a2 : blob.type);
+      const filename = getDownloadFilename ? getDownloadFilename(current, index) : `image-${index + 1}.${ext}`;
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.warn("[Lightbox] download failed", err);
+    } finally {
+      setDownloading(false);
+    }
+  }, [current, index, getDownloadFilename]);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? trigger(openAt) : /* @__PURE__ */ jsx("div", { className: styles.thumbnails, children: items.map((item, i) => {
+      var _a2;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.thumbnailBtn,
+          onClick: () => openAt(i),
+          "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: styles.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail }),
+            /* @__PURE__ */ jsx("div", { className: styles.thumbnailMeta, children: /* @__PURE__ */ jsx(
+              MetaBar,
+              {
+                items: [
+                  { label: "H\xF8jde", value: item.height != null ? `${item.height}px` : "-" },
+                  { label: "Bredde", value: item.width != null ? `${item.width}px` : "-" }
+                ]
+              }
+            ) })
+          ]
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": title != null ? title : "Lightbox",
+        tabIndex: -1,
+        className: styles.dialog,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: current && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.panel,
+            "data-surface": "inverse",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) close();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarInfo, children: [
+                  title && /* @__PURE__ */ jsx("span", { className: styles.titleMain, children: title }),
+                  current.title && /* @__PURE__ */ jsxs("span", { className: styles.titleItem, children: [
+                    title ? "\xB7 " : "",
+                    current.title
+                  ] }),
+                  multiple && /* @__PURE__ */ jsxs("span", { className: styles.counter, children: [
+                    title || current.title ? "\xB7 " : "",
+                    index + 1,
+                    "/",
+                    items.length
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarActions, children: [
+                  buttonAddition && /* @__PURE__ */ jsx("div", { className: styles.buttonAdditionSlot, children: buttonAddition }),
+                  showDownload && current.downloadSrc && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(Download, { size: 16 }),
+                      onClick: download,
+                      loading: downloading,
+                      "aria-label": "Download",
+                      children: "Download"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(X, { size: 16 }),
+                      onClick: close,
+                      "aria-label": "Luk",
+                      children: "Luk"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.imageArea, children: (_a = current.preview) != null ? _a : current.thumbnail }),
+              multiple && /* @__PURE__ */ jsxs("div", { className: styles.nav, children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: prev, "aria-label": "Forrige billede", children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.navHint, children: "\u2190 \u2192 \xB7 Esc" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: next, "aria-label": "N\xE6ste billede", children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Lightbox };

package/dist/components/lightbox/Lightbox.module.css

@@ -0,0 +1,161 @@
+.thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-md);
+}
+
+.thumbnailBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex: none;
+  text-align: left;
+}
+
+.thumbnailImg {
+  overflow: hidden;
+  border-radius: var(--border-radius-default);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.thumbnailBtn:hover .thumbnailImg {
+  transform: scale(1.02);
+}
+
+.thumbnailImg > img {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+.thumbnailMeta {
+  display: flex;
+  gap: var(--spacing-2xs);
+}
+
+.dialog {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.dialog::backdrop {
+  background: color-mix(in srgb, black 85%, transparent);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: var(--spacing-sm);
+  box-sizing: border-box;
+  gap: var(--spacing-sm);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────── */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  flex-shrink: 0;
+}
+
+.toolbarInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.titleMain {
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titleItem {
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.counter {
+  color: var(--color-fg-subtle);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.toolbarActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.buttonAdditionSlot {
+  margin-inline-end: var(--spacing-sm);
+}
+
+.imageArea {
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  background: black;
+  border-radius: var(--border-radius-default);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.imageArea > img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  flex-shrink: 0;
+}
+
+.navHint {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family);
+}

package/dist/components/menu/Menu.cjs

@@ -30,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }
@@ -211,7 +211,26 @@ const MenuCheckItem = React__namespace.forwardRef(
 );
 MenuCheckItem.displayName = "Menu.CheckItem";
 const MenuRadioItem = React__namespace.forwardRef(
-  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles__default.default.interactiveChild,
+      styles__default.default.item,
+      active ? styles__default.default.active : "",
+      checked ? styles__default.default.selected : ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx(
       "li",
       {
@@ -222,14 +241,32 @@ const MenuRadioItem = React__namespace.forwardRef(
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: styles__default.default.interactiveChild,
+            ref: interactiveRef,
+            role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
+            tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
+            "aria-checked": checked || void 0,
+            "aria-selected": checked || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
             onClick: (event) => {
-              var _a;
+              var _a2, _b2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented) return;
               if (disabled) return;
               const target = event.target;
-              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              if ((_b2 = target.closest("label")) != null ? _b2 : target.closest("input")) return;
               onValueChange == null ? void 0 : onValueChange(value);
             },
+            onKeyDown: (event) => {
+              var _a2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onKeyDown) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onValueChange == null ? void 0 : onValueChange(value);
+              }
+            },
             children: /* @__PURE__ */ jsxRuntime.jsx(
               RadioButton.RadioButton,
               {

package/dist/components/menu/Menu.d.ts

@@ -40,8 +40,11 @@ export interface MenuRadioItemProps extends Omit<React.LiHTMLAttributes<HTMLLIEl
     name: string;
     value: string;
     checked: boolean;
+    active?: boolean;
     disabled?: boolean;
     label: string;
+    interactiveRef?: React.Ref<HTMLDivElement>;
+    interactiveProps?: React.HTMLAttributes<HTMLDivElement>;
     onValueChange?: (value: string) => void;
 }
 export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>> & {

package/dist/components/menu/Menu.js

@@ -5,7 +5,7 @@ import styles from './Menu.module.css';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { RadioButton } from '../forms/radio-buttons/RadioButton';
 
-const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
+const INTERACTIVE_SELECTOR = 'a:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"]):not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="option"]:not([aria-disabled="true"])';
 function getMenuItems(el) {
   return Array.from(el.querySelectorAll(INTERACTIVE_SELECTOR));
 }
@@ -186,7 +186,26 @@ const MenuCheckItem = React.forwardRef(
 );
 MenuCheckItem.displayName = "Menu.CheckItem";
 const MenuRadioItem = React.forwardRef(
-  ({ name, value, checked, disabled, label, onValueChange, className, ...liProps }, ref) => {
+  ({
+    name,
+    value,
+    checked,
+    active,
+    disabled,
+    label,
+    interactiveRef,
+    interactiveProps,
+    onValueChange,
+    className,
+    ...liProps
+  }, ref) => {
+    var _a, _b;
+    const interactiveClass = [
+      styles.interactiveChild,
+      styles.item,
+      active ? styles.active : "",
+      checked ? styles.selected : ""
+    ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx(
       "li",
       {
@@ -197,14 +216,32 @@ const MenuRadioItem = React.forwardRef(
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles.interactiveChild,
+            ref: interactiveRef,
+            role: (_a = interactiveProps == null ? void 0 : interactiveProps.role) != null ? _a : "menuitemradio",
+            tabIndex: (_b = interactiveProps == null ? void 0 : interactiveProps.tabIndex) != null ? _b : 0,
+            "aria-checked": checked || void 0,
+            "aria-selected": checked || void 0,
+            "aria-disabled": disabled || void 0,
+            className: interactiveClass,
+            ...interactiveProps,
             onClick: (event) => {
-              var _a;
+              var _a2, _b2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onClick) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented) return;
               if (disabled) return;
               const target = event.target;
-              if ((_a = target.closest("label")) != null ? _a : target.closest("input")) return;
+              if ((_b2 = target.closest("label")) != null ? _b2 : target.closest("input")) return;
               onValueChange == null ? void 0 : onValueChange(value);
             },
+            onKeyDown: (event) => {
+              var _a2;
+              (_a2 = interactiveProps == null ? void 0 : interactiveProps.onKeyDown) == null ? void 0 : _a2.call(interactiveProps, event);
+              if (event.defaultPrevented || disabled) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onValueChange == null ? void 0 : onValueChange(value);
+              }
+            },
             children: /* @__PURE__ */ jsx(
               RadioButton,
               {

package/dist/components/metric-tile/MetricTile.cjs

@@ -8,15 +8,22 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
 function MetricTile({
   severity,
   label,
   value,
   tooltip,
   size = "md",
-  width
+  minWidth,
+  maxWidth
 }) {
-  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(client.Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.tile, "data-severity": severity, "data-size": size, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: value })

package/dist/components/metric-tile/MetricTile.d.ts

@@ -1,13 +1,15 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
 type MetricTileSize = 'sm' | 'md' | 'lg';
+type SizeValue = number | string;
 interface MetricTileProps {
     severity: Severity;
     label: string;
     value: string | number;
     tooltip?: ReactNode;
     size?: MetricTileSize;
-    width?: number | string;
+    minWidth?: SizeValue;
+    maxWidth?: SizeValue;
 }
-export declare function MetricTile({ severity, label, value, tooltip, size, width, }: MetricTileProps): JSX.Element;
+export declare function MetricTile({ severity, label, value, tooltip, size, minWidth, maxWidth, }: MetricTileProps): JSX.Element;
 export {};

package/dist/components/metric-tile/MetricTile.js

@@ -2,15 +2,22 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tooltip } from '../../client';
 import styles from './MetricTile.module.css';
 
+function toSize(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
 function MetricTile({
   severity,
   label,
   value,
   tooltip,
   size = "md",
-  width
+  minWidth,
+  maxWidth
 }) {
-  const style = width != null ? { width: typeof width === "number" ? `${width}px` : width } : void 0;
+  const style = minWidth != null || maxWidth != null ? {
+    ...minWidth != null ? { minWidth: toSize(minWidth) } : {},
+    ...maxWidth != null ? { maxWidth: toSize(maxWidth) } : {}
+  } : void 0;
   return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsxs("span", { className: styles.tile, "data-severity": severity, "data-size": size, style, children: [
     /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
     /* @__PURE__ */ jsx("span", { className: styles.value, children: value })

package/dist/components/metric-tile/MetricTile.module.css

@@ -3,9 +3,9 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-2xs);
-  padding: var(--spacing-sm) var(--spacing-md);
-  min-width: 72px;
+  gap: 2px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  min-width: 64px;
   overflow: hidden;
   box-sizing: border-box;
   border-radius: var(--border-radius-md);
@@ -14,35 +14,37 @@
 }
 
 .tile[data-size='sm'] {
-  padding: var(--spacing-xs) var(--spacing-sm);
+  gap: 1px;
+  padding: 6px var(--spacing-sm);
   min-width: 56px;
   border-radius: var(--border-radius-sm);
 }
 
 .tile[data-size='lg'] {
+  gap: var(--spacing-2xs);
   padding: var(--spacing-md) var(--spacing-lg);
   min-width: 96px;
   border-radius: var(--border-radius-lg);
 }
 
 .tile[data-severity='success'] {
-  background-color: var(--color-status-success-bg);
-  color: var(--color-status-success-fg);
+  background-color: var(--color-status-success-bg-soft);
+  color: var(--color-status-success-fg-soft);
 }
 
 .tile[data-severity='error'] {
-  background-color: var(--color-status-error-bg);
-  color: var(--color-status-error-fg);
+  background-color: var(--color-status-error-bg-soft);
+  color: var(--color-status-error-fg-soft);
 }
 
 .tile[data-severity='warning'] {
-  background-color: var(--color-status-warning-bg);
-  color: var(--color-status-warning-fg);
+  background-color: var(--color-status-warning-bg-soft);
+  color: var(--color-status-warning-fg-soft);
 }
 
 .tile[data-severity='info'] {
-  background-color: var(--color-status-info-bg);
-  color: var(--color-status-info-fg);
+  background-color: var(--color-status-info-bg-soft);
+  color: var(--color-status-info-fg-soft);
 }
 
 .tile[data-severity='neutral'] {
@@ -57,7 +59,7 @@
 
 .label {
   font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold, 600);
   text-transform: uppercase;
   letter-spacing: var(--letter-spacing-wide);
   line-height: 1;
@@ -69,9 +71,10 @@
 }
 
 .value {
-  font-size: var(--font-size-lg);
+  font-size: var(--font-size-md);
   font-weight: var(--font-weight-bold);
   line-height: 1;
+  font-variant-numeric: tabular-nums;
   max-width: 100%;
   overflow: hidden;
   white-space: nowrap;
@@ -79,7 +82,8 @@
 }
 
 .tile[data-size='sm'] .label {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
+  letter-spacing: normal;
 }
 
 .tile[data-size='sm'] .value {