eidotter 0.40.2 → 0.41.0

package/dist/components/IconButton/components/IconButton.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { PressEvent } from 'react-aria-components';
+import type { IconName } from '../../Icon/components/Icon.js';
+/** `md` = 36×36 hit area, 20px glyph (every built-in adopter). `window` = 28×28, 16px glyph, for dense chrome. */
+export type IconButtonSize = 'md' | 'window';
+/** `outline` = 1px square outline at rest (default). `bare` = no resting outline. */
+export type IconButtonVariant = 'outline' | 'bare';
+export interface IconButtonProps {
+    /** Glyph from the `<Icon>` set: `Close` (X), `Cancel` (minus, minimise), `Fullscreen` (maximise), `Chevron Left/Right/Up/Down`. */
+    icon: IconName;
+    /** Accessible name. Required: the button has no visible text. Rendered as `aria-label`. */
+    label: string;
+    /** Hit-area size. Defaults to `md` (36×36). */
+    size?: IconButtonSize;
+    /**
+     * `outline` (default) shows the thin square outline at rest. `bare` drops
+     * it, for places where an outline would fight a neighbouring rule.
+     */
+    variant?: IconButtonVariant;
+    /** Disables the button (opacity 0.5, no hover invert). */
+    isDisabled?: boolean;
+    /** Called on press (mouse, touch, Enter, Space). */
+    onPress?: (e: PressEvent) => void;
+    /**
+     * Keep the button out of the Tab order. Only for controls whose action is
+     * reachable another way (Tag's remove, reachable via Delete/Backspace on
+     * the focused tag).
+     */
+    excludeFromTabOrder?: boolean;
+    /** Extra classes (placement) merged onto the button. */
+    className?: string;
+}
+/**
+ * IconButton: the one icon-only control (DMNC-1592).
+ *
+ * A pixel glyph from `<Icon>` inside a thin square outline: transparent fill,
+ * `text-accent` glyph at rest; hover inverts (amber fill, dark glyph); focus
+ * is a 2px brand outline offset 2px. Every close, prev/next and window
+ * control in the library uses it, so the glyph and states match everywhere.
+ *
+ * React Aria `Button` handles press, keyboard and focus-visible. Ref forwards
+ * to the `<button>`.
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton/components/IconButton.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { Icon } from '../../Icon/components/Icon.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * IconButton: the one icon-only control (DMNC-1592).
+ *
+ * A pixel glyph from `<Icon>` inside a thin square outline: transparent fill,
+ * `text-accent` glyph at rest; hover inverts (amber fill, dark glyph); focus
+ * is a 2px brand outline offset 2px. Every close, prev/next and window
+ * control in the library uses it, so the glyph and states match everywhere.
+ *
+ * React Aria `Button` handles press, keyboard and focus-visible. Ref forwards
+ * to the `<button>`.
+ */
+export const IconButton = forwardRef(({ icon, label, size = 'md', variant = 'outline', isDisabled, onPress, excludeFromTabOrder, className, }, ref) => (_jsx(AriaButton, { ref: ref, "aria-label": label, isDisabled: isDisabled, onPress: onPress, excludeFromTabOrder: excludeFromTabOrder, className: cn('inline-flex items-center justify-center shrink-0', 'eidotter-icon-button', size === 'window' && 'eidotter-icon-button--window', variant === 'bare' && 'eidotter-icon-button--bare', className), children: _jsx("span", { className: "eidotter-icon-button__glyph", "aria-hidden": "true", children: _jsx(Icon, { name: icon, size: "S" }) }) })));
+IconButton.displayName = 'IconButton';

package/dist/components/IconButton/components/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './IconButton.js';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.js';

package/dist/components/IconButton/components/index.js

@@ -0,0 +1 @@
+export { IconButton } from './IconButton.js';

package/dist/components/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export { IconButton } from './components/index.js';
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from './components/index.js';

package/dist/components/IconButton/index.js

@@ -0,0 +1 @@
+export { IconButton } from './components/index.js';

package/dist/components/Input/components/Input.js

@@ -13,6 +13,6 @@ const variantClasses = {
  */
 export const Input = forwardRef(({ variant = 'default', label, description, errorMessage, disabled, className, onChange, isRequired, ...props }, ref) => {
     const isInvalid = variant === 'error';
-    return (_jsxs(AriaTextField, { isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, className: cn('eidotter-text-field', 'flex flex-col gap-1', className), children: [label && (_jsx(AriaLabel, { className: "text-dos-text-brand font-dos text-xs uppercase tracking-wider", children: label })), _jsx(AriaInput, { ref: ref, className: cn('w-full bg-transparent text-dos-text-brand font-dos text-base p-2', 'border-2 border-dos-border-default outline-none box-border', 'eidotter-input', variantClasses[variant] || variantClasses.default, disabled && 'eidotter-input--disabled'), onChange: onChange, ...props }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: "text-dos-text-muted font-dos text-xs", children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: "text-dos-text-error font-dos text-xs", children: errorMessage }))] }));
+    return (_jsxs(AriaTextField, { isDisabled: disabled, isInvalid: isInvalid, isRequired: isRequired, className: cn('eidotter-text-field', 'flex flex-col gap-1', className), children: [label && (_jsx(AriaLabel, { className: "text-dos-text-brand font-dos text-dos-text-base uppercase tracking-wider", children: label })), _jsx(AriaInput, { ref: ref, className: cn('w-full bg-transparent text-dos-text-brand font-dos text-dos-text-base p-2', 'border-2 border-dos-border-default outline-none box-border', 'eidotter-input', variantClasses[variant] || variantClasses.default, disabled && 'eidotter-input--disabled'), onChange: onChange, ...props }), description && !isInvalid && (_jsx(AriaText, { slot: "description", className: "text-dos-text-muted font-dos text-dos-text-base", children: description })), errorMessage && isInvalid && (_jsx(AriaText, { slot: "errorMessage", className: "text-dos-text-error font-dos text-dos-text-base", children: errorMessage }))] }));
 });
 Input.displayName = 'Input';

package/dist/components/Lightbox/components/Lightbox.d.ts

@@ -13,10 +13,16 @@ export interface LightboxProps {
     onIndexChange?: (index: number) => void;
 }
 /**
- * Fullscreen image viewer built on the same React Aria primitives as Modal.
+ * Fullscreen image viewer on the DosDialog shell (DMNC-1592).
  *
- * Reuses Modal's CRT phosphor enter/exit animations, overlay tokens, and close
- * button styling. Adds prev/next, counter, caption, keyboard nav, and touch
- * swipe — see Tasks 4 and 5.
+ * The shell supplies the overlay, chrome, motion and the title strip;
+ * the `[ n / N ]` counter is the strip's title and the close control sits at
+ * its end (an IconButton). Lightbox adds prev/next (IconButtons with the pixel
+ * chevrons), caption, keyboard nav, and touch swipe.
+ * It shares the shell's z-index (`--z-index-modal`) with Modal; stacking a
+ * Lightbox over an open Modal is not a supported case.
+ *
+ * The close IconButton carries `eidotter-lightbox__close`. eidotter ships no
+ * CSS for it; it is kept as a stable consumer hook for targeting the control.
  */
 export declare const Lightbox: React.FC<LightboxProps>;

package/dist/components/Lightbox/components/Lightbox.js

@@ -1,15 +1,20 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button as AriaButton, ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
-import { Icon } from '../../Icon/components/Icon.js';
-import { cn } from '../../../utils/cn.js';
+import { IconButton } from '../../IconButton/components/IconButton.js';
+import { DosDialog } from '../../DosDialog/components/DosDialog.js';
 /**
- * Fullscreen image viewer built on the same React Aria primitives as Modal.
+ * Fullscreen image viewer on the DosDialog shell (DMNC-1592).
  *
- * Reuses Modal's CRT phosphor enter/exit animations, overlay tokens, and close
- * button styling. Adds prev/next, counter, caption, keyboard nav, and touch
- * swipe — see Tasks 4 and 5.
+ * The shell supplies the overlay, chrome, motion and the title strip;
+ * the `[ n / N ]` counter is the strip's title and the close control sits at
+ * its end (an IconButton). Lightbox adds prev/next (IconButtons with the pixel
+ * chevrons), caption, keyboard nav, and touch swipe.
+ * It shares the shell's z-index (`--z-index-modal`) with Modal; stacking a
+ * Lightbox over an open Modal is not a supported case.
+ *
+ * The close IconButton carries `eidotter-lightbox__close`. eidotter ships no
+ * CSS for it; it is kept as a stable consumer hook for targeting the control.
  */
 export const Lightbox = ({ images, initialIndex = 0, isOpen, onClose, onIndexChange, }) => {
     // Clamp the requested initial index so callers passing stale indices
@@ -78,8 +83,8 @@ export const Lightbox = ({ images, initialIndex = 0, isOpen, onClose, onIndexCha
         return () => window.removeEventListener('keydown', onKeyDown);
     }, [isOpen, goPrev, goNext]);
     // Empty array: nothing to show. (Note: do NOT early-return on !isOpen here —
-    // React Aria's AriaModalOverlay needs to stay mounted across isOpen
-    // transitions so it can play modal-crt-exit. The overlay handles its own
+    // the DosDialog overlay needs to stay mounted across isOpen transitions so
+    // it can play its exit animation. The overlay handles its own
     // visibility based on the `isOpen` prop.)
     if (images.length === 0) {
         return null;
@@ -91,7 +96,10 @@ export const Lightbox = ({ images, initialIndex = 0, isOpen, onClose, onIndexCha
     const current = images[safeIndex];
     const hasPrev = safeIndex > 0;
     const hasNext = safeIndex < images.length - 1;
-    return (_jsx(AriaModalOverlay, { isOpen: isOpen, onOpenChange: (open) => { if (!open)
-            onClose(); }, isDismissable: true, className: ({ isEntering, isExiting }) => cn('eidotter-lightbox-overlay', isEntering && 'eidotter-lightbox-overlay--entering', isExiting && 'eidotter-lightbox-overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-lightbox', isEntering && 'eidotter-lightbox--entering', isExiting && 'eidotter-lightbox--exiting'), children: _jsxs(AriaDialog, { "aria-label": current.alt || 'Image viewer', className: "eidotter-lightbox__container outline-none", children: [_jsx(AriaButton, { className: "eidotter-lightbox__close", onPress: onClose, "aria-label": "Close lightbox", children: _jsx(Icon, { name: "Close", size: "S" }) }), _jsx(AriaButton, { className: "eidotter-lightbox__nav eidotter-lightbox__nav--prev", onPress: goPrev, isDisabled: !hasPrev, "aria-label": "Previous image", children: "\u25C0" }), _jsx(AriaButton, { className: "eidotter-lightbox__nav eidotter-lightbox__nav--next", onPress: goNext, isDisabled: !hasNext, "aria-label": "Next image", children: "\u25B6" }), _jsxs("figure", { className: "eidotter-lightbox__figure", children: [_jsx("img", { className: "eidotter-lightbox__image", src: current.src, alt: current.alt, width: current.width, height: current.height, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }), current.caption && (_jsx("figcaption", { className: "eidotter-lightbox__caption", children: current.caption }))] }), _jsxs("span", { className: "eidotter-lightbox__counter", "aria-live": "polite", children: ["[ ", safeIndex + 1, " / ", images.length, " ]"] })] }) }) }));
+    return (_jsx(DosDialog, { open: isOpen, onOpenChange: (open) => { if (!open)
+            onClose(); }, placement: "center", size: "full", "aria-label": current.alt || 'Image viewer', className: "eidotter-lightbox__container", head: {
+            title: (_jsxs("span", { className: "eidotter-lightbox__counter", "aria-live": "polite", children: ["[ ", safeIndex + 1, " / ", images.length, " ]"] })),
+            end: (_jsx(IconButton, { icon: "Close", label: "Close lightbox", className: "eidotter-lightbox__close", onPress: onClose })),
+        }, children: _jsxs("figure", { className: "eidotter-lightbox__figure", children: [_jsx("img", { className: "eidotter-lightbox__image", src: current.src, alt: current.alt, width: current.width, height: current.height, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }), _jsx(IconButton, { icon: "Chevron Left", label: "Previous image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--prev", onPress: goPrev, isDisabled: !hasPrev }), _jsx(IconButton, { icon: "Chevron Right", label: "Next image", className: "eidotter-lightbox__nav eidotter-lightbox__nav--next", onPress: goNext, isDisabled: !hasNext }), current.caption && (_jsx("figcaption", { className: "eidotter-lightbox__caption", children: current.caption }))] }) }));
 };
 Lightbox.displayName = 'Lightbox';

package/dist/components/Meter/components/Meter.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { formatValue, isKnown, resolveBand, resolveLabels, PLACEHOLDER } from '../../../utils/health/index.js';
@@ -65,15 +65,19 @@ export const Meter = forwardRef(({ label, shortLabel, value, max = 100, unit, op
     const effectivePattern = pattern ?? tonePatterns[effectiveTone] ?? 'solid';
     const fillClass = patternClasses[effectivePattern] ?? patternClasses.solid;
     const valueText = unknown ? PLACEHOLDER : formatValue(value, { locale, unit }).text;
+    // Number and unit render in two spans so a narrow MeterGroup can drop the
+    // unit onto its own line; the accessible value text stays one string.
+    const numberText = unknown ? PLACEHOLDER : formatValue(value, { locale }).text;
+    const unitText = unknown ? undefined : unit || undefined;
     const valuetext = unknown ? labels.unknown : valueText;
     const name = `${ariaLabel ?? label}: ${valuetext}`;
     const isRange = Array.isArray(optimal);
     const optimalProps = maxValid ? optimalStyle(optimal, max) : undefined;
     const blockCount = segments !== undefined ? Math.max(0, Math.floor(segments)) : 0;
     const filledBlocks = Math.round(ratio * blockCount);
-    const valuePart = showValue || overflow ? (_jsxs("div", { className: "eidotter-meter__readout flex items-center gap-1 leading-none", children: [showValue && (_jsx("span", { className: "eidotter-meter__value text-dos-text-accent tabular-nums", children: valueText })), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-meter__overflow text-dos-text-warning", children: "+" }))] })) : null;
+    const valuePart = showValue || overflow ? (_jsxs("div", { className: "eidotter-meter__readout flex items-center gap-1 leading-none", children: [showValue && (_jsxs("span", { className: "eidotter-meter__value text-dos-text-accent tabular-nums text-center", children: [_jsx("span", { className: "eidotter-meter__number", children: numberText }), unitText && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-meter__unit", children: unitText })] }))] })), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-meter__overflow text-dos-text-warning", children: "+" }))] })) : null;
     const trackPart = (_jsxs("div", { className: "eidotter-meter__track relative bg-dos-bg-primary border border-dos-border-disabled", children: [blockCount > 0 ? (_jsx("div", { className: "eidotter-meter__segments", "aria-hidden": "true", children: Array.from({ length: blockCount }, (_, i) => (_jsx("span", { className: cn('eidotter-meter__segment', i < filledBlocks && `eidotter-meter__segment--filled ${fillClass}`) }, i))) })) : (_jsx("div", { className: cn('eidotter-meter__fill', fillClass), style: { '--eidotter-meter-fill': String(round4(ratio)) } })), optimalProps && (_jsx("div", { "aria-hidden": "true", className: cn('eidotter-meter__optimal', isRange && 'eidotter-meter__optimal--range'), style: optimalProps }))] }));
     const labelPart = (_jsxs("div", { className: "eidotter-meter__caption flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight min-w-0 max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-meter__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-meter__label truncate", title: label, children: [_jsx("span", { className: "eidotter-meter__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-meter__label--short", children: shortLabel })] }), resolved.label && (_jsx("span", { className: "eidotter-meter__band normal-case", children: resolved.label }))] }));
-    return (_jsx("div", { ref: ref, className: cn('eidotter-meter eidotter-health flex font-dos', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.sm, toneClasses[effectiveTone], className), role: "meter", "aria-valuemin": 0, "aria-valuemax": maxValid ? max : 100, "aria-valuenow": unknown ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, ...props, children: orientation === 'horizontal' ? (_jsxs(_Fragment, { children: [labelPart, trackPart, valuePart] })) : (_jsxs(_Fragment, { children: [valuePart, trackPart, labelPart] })) }));
+    return (_jsx("div", { ref: ref, className: cn('eidotter-meter eidotter-health flex font-dos', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.sm, toneClasses[effectiveTone], className), "data-has-short": shortLabel ? 'true' : 'false', role: "meter", "aria-valuemin": 0, "aria-valuemax": maxValid ? max : 100, "aria-valuenow": unknown ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, ...props, children: orientation === 'horizontal' ? (_jsxs(_Fragment, { children: [labelPart, trackPart, valuePart] })) : (_jsxs(_Fragment, { children: [valuePart, trackPart, labelPart] })) }));
 });
 Meter.displayName = 'Meter';

package/dist/components/Meter/components/MeterGroup.js

@@ -21,8 +21,8 @@ export const MeterGroup = forwardRef(({ layout = 'row', columns, sharedMax = fal
     const fixedColumns = layout === 'grid' && columns !== undefined;
     return (_jsx("div", { ref: ref, role: "group", className: cn('eidotter-meter-group', layoutClasses[layout] ?? layoutClasses.row, fixedColumns && 'eidotter-meter-group--columns', className), style: fixedColumns
             ? { '--eidotter-meter-columns': String(columns) }
-            : undefined, ...props, children: items
-            ? items.map((item, i) => (_jsx(Meter, { ...item, ...(scale !== undefined && { max: scale }) }, `${item.label}-${i}`)))
-            : children }));
+            : undefined, ...props, children: _jsx("div", { className: "eidotter-meter-group__layout", children: items
+                ? items.map((item, i) => (_jsx(Meter, { ...item, ...(scale !== undefined && { max: scale }) }, `${item.label}-${i}`)))
+                : children }) }));
 });
 MeterGroup.displayName = 'MeterGroup';

package/dist/components/Modal/components/Modal.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DosDialogSize } from '../../DosDialog/components/DosDialog.js';
 export interface ModalProps {
     /** Whether the modal is open */
     isOpen: boolean;
@@ -6,19 +7,30 @@ export interface ModalProps {
     onOpenChange?: (isOpen: boolean) => void;
     /** @deprecated Use `onOpenChange` instead. Called when modal should close. */
     onClose?: () => void;
-    /** Modal title (required for accessibility) */
+    /** Modal title (required for accessibility). Rendered in the title strip. */
     title: string;
     /** Modal body content */
     children: React.ReactNode;
     /** Footer content, typically action buttons */
     footer?: React.ReactNode;
-    /** Optional CSS class name */
+    /**
+     * Width step from the shared dialog map (DosDialog): `sm` 24rem,
+     * `md` 30rem (default, the historical 480px), `lg` 40rem, `full`.
+     */
+    size?: DosDialogSize;
+    /** Close on backdrop click. Escape and the close button always close. Defaults to `true`. */
+    isDismissable?: boolean;
+    /** Optional CSS class name, merged onto the dialog container */
     className?: string;
 }
 /**
- * DOS-styled Modal with React Aria Dialog.
- * React Aria provides focus trapping, scroll lock, backdrop dismiss, and escape handling.
- * CRT phosphor enter/exit animations via isEntering/isExiting render props.
- * Ref forwards to the inner AriaDialog element (not the overlay).
+ * DOS-styled Modal on the DosDialog shell (DMNC-1592).
+ * The title sits in the title strip with the close control at its end; the
+ * footer keeps its 1px top rule. React Aria provides focus trapping, scroll
+ * lock, backdrop dismiss, and escape handling.
+ * Ref forwards to the dialog element (not the overlay).
+ *
+ * The close IconButton carries `eidotter-modal__close`. eidotter ships no CSS
+ * for it; it is kept as a stable consumer hook for targeting the control.
  */
 export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLElement>>;

package/dist/components/Modal/components/Modal.js

@@ -1,16 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, forwardRef } from 'react';
-import { Button as AriaButton, ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
-import { Icon } from '../../Icon/components/Icon.js';
+import { IconButton } from '../../IconButton/components/IconButton.js';
+import { DosDialog } from '../../DosDialog/components/DosDialog.js';
 import { cn } from '../../../utils/cn.js';
 /**
- * DOS-styled Modal with React Aria Dialog.
- * React Aria provides focus trapping, scroll lock, backdrop dismiss, and escape handling.
- * CRT phosphor enter/exit animations via isEntering/isExiting render props.
- * Ref forwards to the inner AriaDialog element (not the overlay).
+ * DOS-styled Modal on the DosDialog shell (DMNC-1592).
+ * The title sits in the title strip with the close control at its end; the
+ * footer keeps its 1px top rule. React Aria provides focus trapping, scroll
+ * lock, backdrop dismiss, and escape handling.
+ * Ref forwards to the dialog element (not the overlay).
+ *
+ * The close IconButton carries `eidotter-modal__close`. eidotter ships no CSS
+ * for it; it is kept as a stable consumer hook for targeting the control.
  */
-export const Modal = forwardRef(({ isOpen, onOpenChange, onClose, title, children, footer, className, }, ref) => {
+export const Modal = forwardRef(({ isOpen, onOpenChange, onClose, title, children, footer, size = 'md', isDismissable = true, className, }, ref) => {
     const prevOpenRef = useRef(isOpen);
     const interactionRef = useRef(false);
     // Notify onOpenChange on prop-driven state changes only (observer pattern for agents).
@@ -32,6 +36,11 @@ export const Modal = forwardRef(({ isOpen, onOpenChange, onClose, title, childre
         if (!open)
             onClose?.();
     };
-    return (_jsx(AriaModalOverlay, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: true, className: ({ isEntering, isExiting }) => cn('eidotter-modal-overlay', isEntering && 'eidotter-modal-overlay--entering', isExiting && 'eidotter-modal-overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-modal', isEntering && 'eidotter-modal--entering', isExiting && 'eidotter-modal--exiting'), children: _jsxs(AriaDialog, { ref: ref, "aria-label": title, className: cn('eidotter-modal__container outline-none', className), children: [_jsxs("header", { className: "eidotter-modal__header", children: [_jsx("h2", { className: "eidotter-modal__title", children: title }), _jsx(AriaButton, { className: "eidotter-modal__close", onPress: () => handleOpenChange(false), "aria-label": "Close modal", children: _jsx(Icon, { name: "Close", size: "S" }) })] }), _jsx("div", { className: "eidotter-modal__body", children: children }), footer && (_jsx("footer", { className: "eidotter-modal__footer", children: footer }))] }) }) }));
+    return (_jsx(DosDialog, { ref: ref, open: isOpen, onOpenChange: handleOpenChange, isDismissable: isDismissable, size: size, "aria-label": title, className: cn('eidotter-modal__container', className), head: {
+            title,
+            end: (_jsx(IconButton, { icon: "Close", label: "Close modal", className: "eidotter-modal__close", onPress: () => handleOpenChange(false) })),
+        }, 
+        /* Modal keeps its <footer> element (role=contentinfo) inside the shell slot. */
+        footer: footer ? _jsx("footer", { className: "eidotter-modal__footer", children: footer }) : undefined, children: _jsx("div", { className: "eidotter-modal__body", children: children }) }));
 });
 Modal.displayName = 'Modal';

package/dist/components/Nav/components/Nav.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { isSafeHref } from '../../../utils/isSafeHref.js';
-import { Icon } from '../../Icon/index.js';
+import { IconButton } from '../../IconButton/components/IconButton.js';
 const variantClasses = {
     retro: 'eidotter-nav--retro',
     modern: 'eidotter-nav--modern',
@@ -14,7 +14,8 @@ export const DesktopNav = ({ items, activeHref, variant = 'retro', linkComponent
                 // Unsafe hrefs (javascript, data, vbscript, …) render the label as a
                 // plain span instead of an anchor.
                 const safeHref = isSafeHref(item.href) ? item.href : undefined;
-                const linkClassName = cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active');
+                // Retro labels render uppercase DOS, like the MENU trigger (DMNC-1584).
+                const linkClassName = cn('eidotter-nav__link', variant === 'retro' && 'uppercase', activeHref === item.href && 'eidotter-nav__link--active');
                 return (_jsx("li", { className: "eidotter-nav__desktop-item", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: linkClassName, "aria-current": activeHref === item.href ? 'page' : undefined, children: item.label })) : (_jsx("span", { className: linkClassName, children: item.label })) }, item.href));
             }) }) }));
 };
@@ -69,10 +70,10 @@ export const MobileNav = ({ items, activeHref, variant = 'retro', linkComponent,
             first.focus();
         }
     };
-    return (_jsxs("div", { className: cn('eidotter-nav eidotter-nav--mobile', variantClasses[variant], className), children: [_jsx("button", { ref: triggerRef, onClick: toggle, className: "eidotter-nav__menu-trigger", "aria-label": isOpen ? 'Close menu' : 'Open menu', "aria-expanded": isOpen, "aria-controls": "eidotter-mobile-nav-panel", children: "MENU" }), isOpen && (_jsx("div", { className: "eidotter-nav__overlay", onClick: close, "aria-hidden": "true" })), _jsxs("nav", { ref: panelRef, id: "eidotter-mobile-nav-panel", className: cn('eidotter-nav__panel', isOpen && 'eidotter-nav__panel--open'), "aria-label": "Mobile navigation", inert: !isOpen, onKeyDown: handlePanelKeyDown, children: [_jsx("div", { className: "eidotter-nav__panel-header", children: _jsx("button", { ref: closeButtonRef, onClick: close, className: "eidotter-nav__close", "aria-label": "Close menu", children: _jsx(Icon, { name: "Close", size: "S" }) }) }), _jsx("ul", { className: "eidotter-nav__list", children: items.map((item) => {
+    return (_jsxs("div", { className: cn('eidotter-nav eidotter-nav--mobile', variantClasses[variant], className), children: [_jsx("button", { ref: triggerRef, onClick: toggle, className: "eidotter-nav__menu-trigger", "aria-label": isOpen ? 'Close menu' : 'Open menu', "aria-expanded": isOpen, "aria-controls": "eidotter-mobile-nav-panel", children: "MENU" }), isOpen && (_jsx("div", { className: "eidotter-nav__overlay", onClick: close, "aria-hidden": "true" })), _jsxs("nav", { ref: panelRef, id: "eidotter-mobile-nav-panel", className: cn('eidotter-nav__panel', isOpen && 'eidotter-nav__panel--open'), "aria-label": "Mobile navigation", inert: !isOpen, onKeyDown: handlePanelKeyDown, children: [_jsx("div", { className: "eidotter-nav__panel-header", children: _jsx(IconButton, { ref: closeButtonRef, icon: "Close", label: "Close menu", className: "eidotter-nav__close", onPress: close }) }), _jsx("ul", { className: "eidotter-nav__list", children: items.map((item) => {
                             // Same guard as desktop — mobile panel is a second render path.
                             const safeHref = isSafeHref(item.href) ? item.href : undefined;
-                            const linkClassName = cn('eidotter-nav__link', activeHref === item.href && 'eidotter-nav__link--active');
+                            const linkClassName = cn('eidotter-nav__link', variant === 'retro' && 'uppercase', activeHref === item.href && 'eidotter-nav__link--active');
                             return (_jsx("li", { className: "eidotter-nav__item", children: safeHref ? (_jsx(LinkTag, { href: safeHref, className: linkClassName, "aria-current": activeHref === item.href ? 'page' : undefined, onClick: close, children: item.label })) : (_jsx("span", { className: linkClassName, children: item.label })) }, item.href));
                         }) })] })] }));
 };

package/dist/components/Notification/components/Notification.js

@@ -4,6 +4,7 @@ import { useEffect } from 'react';
 import { Button as AriaButton } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
 import { Icon } from '../../Icon/components/Icon.js';
+import { IconButton } from '../../IconButton/components/IconButton.js';
 import { Progress } from '../../Progress/components/Progress.js';
 import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
 const TYPE_ICONS = {
@@ -20,7 +21,7 @@ const TYPE_ICONS = {
  * Purely presentational — consumers handle positioning.
  */
 export const Notification = ({ type = 'primary', title, children, actions, onClose, avatar, image, progress, progressLabel, duration, showIcon = true, className, }) => {
-    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('notification-exit', onClose);
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('eidotter-pop-out', onClose);
     // Auto-dismiss timer
     useEffect(() => {
         if (duration == null || !onClose)
@@ -30,5 +31,5 @@ export const Notification = ({ type = 'primary', title, children, actions, onClo
     }, [duration, onClose, triggerClose]);
     const hasIcon = showIcon && !avatar;
     const hasProgress = progress != null;
-    return (_jsxs("div", { className: cn('w-full max-w-[400px]', 'font-dos text-dos-text-sm', 'border border-dos-border-default rounded-dos-base', 'eidotter-notification', `eidotter-notification--${type}`, isClosing && 'eidotter-notification--closing', className), onAnimationEnd: handleAnimationEnd, role: type === 'error' ? 'alert' : 'status', "data-type": type, children: [image && (_jsx("div", { className: "eidotter-notification__image", children: image })), _jsxs("div", { className: "flex flex-row gap-4 p-4", children: [avatar && (_jsx("div", { className: "eidotter-notification__avatar flex-shrink-0", children: avatar })), hasIcon && (_jsx("div", { className: "eidotter-notification__icon", children: _jsx(Icon, { name: TYPE_ICONS[type] || 'Info', size: "S", "aria-label": `${type} notification` }) })), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && !hasIcon && !avatar && 'pr-8'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-notification__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-notification__text font-dos leading-[140%]", children: children }))] })), hasProgress && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Progress, { value: progress, max: 100, size: "sm", fullWidth: true, showLabel: false }), progressLabel && (_jsx("div", { className: "eidotter-notification__text font-dos text-dos-text-xs", children: progressLabel }))] })), actions && actions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: actions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-notification__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(AriaButton, { className: "eidotter-notification__close", onPress: triggerClose, "aria-label": "Close notification", children: _jsx(Icon, { name: "Close", size: "S" }) }))] })] }));
+    return (_jsxs("div", { className: cn('w-full max-w-[400px]', 'font-dos text-dos-text-sm', 'border border-dos-border-default', 'eidotter-notification', `eidotter-notification--${type}`, isClosing && 'eidotter-notification--closing', className), onAnimationEnd: handleAnimationEnd, role: type === 'error' ? 'alert' : 'status', "data-type": type, children: [image && (_jsx("div", { className: "eidotter-notification__image", children: image })), _jsxs("div", { className: "flex flex-row gap-4 p-4", children: [avatar && (_jsx("div", { className: "eidotter-notification__avatar flex-shrink-0", children: avatar })), hasIcon && (_jsx("div", { className: "eidotter-notification__icon", children: _jsx(Icon, { name: TYPE_ICONS[type] || 'Info', size: "S", "aria-label": `${type} notification` }) })), _jsxs("div", { className: cn('flex-1 flex flex-col gap-3 min-w-0', onClose && !hasIcon && !avatar && 'pr-8'), children: [(title || children) && (_jsxs("div", { className: "flex flex-col gap-1", children: [title && (_jsx("div", { className: "eidotter-notification__title font-dos leading-[140%]", children: title })), children && (_jsx("div", { className: "eidotter-notification__text font-dos leading-[140%]", children: children }))] })), hasProgress && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Progress, { value: progress, max: 100, size: "sm", fullWidth: true, showLabel: false }), progressLabel && (_jsx("div", { className: "eidotter-notification__text font-dos text-dos-text-xs", children: progressLabel }))] })), actions && actions.length > 0 && (_jsx("div", { className: "flex flex-row gap-3", children: actions.map((action, i) => (_jsxs(AriaButton, { className: "eidotter-notification__action", onPress: action.onClick, children: [action.label, action.icon] }, i))) }))] }), onClose && (_jsx(IconButton, { icon: "Close", label: "Close notification", className: "eidotter-notification__close", onPress: triggerClose }))] })] }));
 };

package/dist/components/Progress/components/Progress.js

@@ -5,13 +5,15 @@ const FILLED = '\u2588'; // █
 const EMPTY = '\u2591'; // ░
 const DARK_SHADE = '\u2593'; // ▓
 const MED_SHADE = '\u2592'; // ▒
+// eidotter tokens only: raw Tailwind sizes (text-xs/base/lg) would compile
+// into dist/eidotter.css and override consumers' own utilities (DMNC-1579).
 const sizeClasses = {
-    sm: 'text-xs',
-    md: 'text-base',
-    lg: 'text-lg',
-    small: 'text-xs',
-    medium: 'text-base',
-    large: 'text-lg',
+    sm: 'text-dos-text-base', // 16px
+    md: 'text-dos-text-sm', // 20px
+    lg: 'text-dos-text-md', // 22px
+    small: 'text-dos-text-base',
+    medium: 'text-dos-text-sm',
+    large: 'text-dos-text-md',
 };
 const variantClasses = {
     default: 'eidotter-progress--default',

package/dist/components/SeriesBars/components/SeriesBars.js

@@ -47,18 +47,19 @@ export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, t
     const toneOf = (v) => thresholds
         .filter((t) => v >= t.from)
         .reduce((best, t) => (!best || t.from > best.from ? t : best), undefined)?.tone ?? 'neutral';
+    const goalBand = goal !== undefined && !!goalLabel;
     const text = (v) => (isKnown(v) ? formatValue(v, { locale }).text : labels.unknown);
     const summary = [
         ...points.map((p) => `${p.label} ${text(p.value)}`),
         ...(goal !== undefined ? [`${goalLabel ?? ''} ${text(goal)}`.trim()] : []),
     ].join(', ');
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-series-bars eidotter-health relative font-dos', sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { role: "img", "aria-label": summary, children: [_jsxs("div", { className: cn('eidotter-series-bars__plot relative', plotClasses[size] ?? plotClasses.md), children: [goal !== undefined && (_jsx("div", { className: "eidotter-series-bars__goal absolute inset-x-0", style: { bottom: `${(Math.min(goal, scale) / scale) * 100}%` }, children: goalLabel && (_jsx("span", { className: "eidotter-series-bars__goal-tag text-dos-text-brand", children: goalLabel })) })), _jsx("div", { className: "eidotter-series-bars__cols flex items-end gap-1 h-full", children: points.map((p, i) => {
-                                    const v = p.value;
-                                    const tone = isKnown(v) ? toneOf(v) : 'neutral';
-                                    return (_jsx("div", { className: "eidotter-series-bars__col flex flex-col justify-end flex-1 min-w-0 h-full", title: `${p.label}: ${text(v)}`, children: isKnown(v) ? (_jsx("div", { className: cn('eidotter-series-bars__bar w-full', toneClasses[tone], patternClasses[tone]), style: {
-                                                height: `${(Math.min(Math.max(v, 0), scale) / scale) * 100}%`,
-                                                ...(tone === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
-                                            } })) : (_jsx("span", { className: "eidotter-series-bars__gap text-dos-text-muted text-center", children: PLACEHOLDER })) }, i));
-                                }) })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1 text-dos-text-muted", children: points.map((p, i) => (_jsx("span", { className: "eidotter-series-bars__tick flex-1 min-w-0 truncate text-center tabular-nums", children: i % Math.max(tickEvery, 1) === 0 ? p.label : '' }, i))) })] }), _jsx("table", { className: "sr-only", children: _jsxs("tbody", { children: [points.map((p, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: p.label }), _jsx("td", { children: text(p.value) })] }, i))), goal !== undefined && (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: goalLabel }), _jsx("td", { children: text(goal) })] }))] }) })] }));
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-series-bars eidotter-health relative font-dos', sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { role: "img", "aria-label": summary, children: [_jsxs("div", { className: cn('eidotter-series-bars__frame relative', goalBand && 'eidotter-series-bars__frame--goal-band'), children: [goalBand && (_jsx("span", { className: "eidotter-series-bars__goal-tag text-dos-text-brand", children: goalLabel })), _jsxs("div", { className: cn('eidotter-series-bars__plot relative', plotClasses[size] ?? plotClasses.md), children: [goal !== undefined && (_jsx("div", { className: "eidotter-series-bars__goal absolute inset-x-0", style: { bottom: `${(Math.min(goal, scale) / scale) * 100}%` } })), _jsx("div", { className: "eidotter-series-bars__cols flex items-end gap-1 h-full", children: points.map((p, i) => {
+                                            const v = p.value;
+                                            const tone = isKnown(v) ? toneOf(v) : 'neutral';
+                                            return (_jsx("div", { className: "eidotter-series-bars__col flex flex-col justify-end flex-1 min-w-0 h-full", title: `${p.label}: ${text(v)}`, children: isKnown(v) ? (_jsx("div", { className: cn('eidotter-series-bars__bar w-full', toneClasses[tone], patternClasses[tone]), style: {
+                                                        height: `${(Math.min(Math.max(v, 0), scale) / scale) * 100}%`,
+                                                        ...(tone === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
+                                                    } })) : (_jsx("span", { className: "eidotter-series-bars__gap text-dos-text-muted text-center", children: PLACEHOLDER })) }, i));
+                                        }) })] })] }), _jsx("div", { "aria-hidden": "true", className: "flex gap-1 text-dos-text-muted", children: points.map((p, i) => (_jsx("span", { className: "eidotter-series-bars__tick flex-1 min-w-0 truncate text-center tabular-nums", children: i % Math.max(tickEvery, 1) === 0 ? p.label : '' }, i))) })] }), _jsx("table", { className: "sr-only", children: _jsxs("tbody", { children: [points.map((p, i) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: p.label }), _jsx("td", { children: text(p.value) })] }, i))), goal !== undefined && (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: goalLabel }), _jsx("td", { children: text(goal) })] }))] }) })] }));
 });
 SeriesBars.displayName = 'SeriesBars';

package/dist/components/Tag/components/Tag.d.ts

@@ -6,7 +6,14 @@ export interface TagProps {
     variant?: 'default' | 'outlined' | 'filled';
     /** Size variant. Use sm/md/lg — small/medium are @deprecated aliases. */
     size?: 'sm' | 'md' | 'lg' | 'small' | 'medium';
-    /** CGA color token for border and text */
+    /**
+     * CGA color token for border and text (`default`, `outlined`), or the fill
+     * (`filled`, drawn with `text-on-brand` ink). For `filled`, pass a bright
+     * fill: a CGA primitive such as `--color-cga-bright-cyan`, `-bright-green`,
+     * `-yellow`, `-light-gray`, or `--color-semantic-background-brand`. Each
+     * clears 4.5:1 in every theme; text roles such as
+     * `--color-semantic-text-accent` drop to about 3:1 as a fill in the light theme.
+     */
     color?: string;
     /** Whether the tag is selected/active */
     selected?: boolean;

package/dist/components/Tag/components/Tag.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as AriaButton } from 'react-aria-components';
+import { IconButton } from '../../IconButton/components/IconButton.js';
 import { cn } from '../../../utils/cn.js';
 import { useAnimatedDismiss } from '../../../hooks/useAnimatedDismiss.js';
 const sizeClasses = {
@@ -16,7 +16,7 @@ const sizeClasses = {
  */
 export const Tag = ({ children, variant = 'default', size = 'md', color, selected = false, closeable = false, disabled = false, onClick, onClose, className, 'aria-label': ariaLabel, ...props }) => {
     const isInteractive = !!onClick && !disabled;
-    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('tag-exit', onClose);
+    const { isClosing, triggerClose, handleAnimationEnd } = useAnimatedDismiss('eidotter-pop-out', onClose);
     const handleKeyDown = (event) => {
         if (disabled)
             return;
@@ -29,18 +29,18 @@ export const Tag = ({ children, variant = 'default', size = 'md', color, selecte
             triggerClose();
         }
     };
-    // AriaButton's usePress isolates the press event — it calls stopPropagation
+    // IconButton (React Aria Button) usePress isolates the press event — it calls stopPropagation
     // internally, preventing the close from triggering the parent Tag's onClick.
     const handleClosePress = () => {
         if (!disabled)
             triggerClose();
     };
     const style = color ? { '--tag-color': 'var(' + color + ')' } : undefined;
-    return (_jsxs("span", { className: cn('inline-flex items-center justify-center', 'font-dos leading-none whitespace-nowrap select-none', 'rounded-dos-sm uppercase tracking-wider', sizeClasses[size] || sizeClasses.md, 'eidotter-tag', 'eidotter-tag--' + variant, selected && 'eidotter-tag--selected', disabled && 'opacity-50 cursor-not-allowed', isClosing && 'eidotter-tag--closing', isInteractive && 'cursor-pointer', className), style: style, onClick: isInteractive ? (e) => !disabled && onClick?.(e) : undefined, onKeyDown: handleKeyDown, onAnimationEnd: handleAnimationEnd, "aria-label": ariaLabel, "aria-pressed": isInteractive ? (selected || false) : undefined, "aria-disabled": disabled || undefined, "data-variant": variant, ...(isInteractive ? { role: 'button', tabIndex: 0 } : {}), ...props, children: [_jsx("span", { className: "eidotter-tag__content", children: children }), closeable && (_jsx(AriaButton, { className: "eidotter-tag__close", "aria-label": 'Remove ' + (typeof children === 'string' ? children : 'tag'), 
+    return (_jsxs("span", { className: cn('inline-flex items-center justify-center', 'font-dos leading-none whitespace-nowrap select-none', 'rounded-dos-sm uppercase tracking-wider', sizeClasses[size] || sizeClasses.md, 'eidotter-tag', 'eidotter-tag--' + variant, selected && 'eidotter-tag--selected', disabled && 'opacity-50 cursor-not-allowed', isClosing && 'eidotter-tag--closing', isInteractive && 'cursor-pointer', className), style: style, onClick: isInteractive ? (e) => !disabled && onClick?.(e) : undefined, onKeyDown: handleKeyDown, onAnimationEnd: handleAnimationEnd, "aria-label": ariaLabel, "aria-pressed": isInteractive ? (selected || false) : undefined, "aria-disabled": disabled || undefined, "data-variant": variant, ...(isInteractive ? { role: 'button', tabIndex: 0 } : {}), ...props, children: [_jsx("span", { className: "eidotter-tag__content", children: children }), closeable && (_jsx(IconButton, { icon: "Close", label: 'Remove ' + (typeof children === 'string' ? children : 'tag'), variant: "bare", className: "eidotter-tag__close", 
                 // Keep the close button out of the tab order only when the body is
                 // itself focusable (interactive) and already offers Delete/Backspace
                 // dismissal. For a closeable, non-interactive tag the body is not
                 // focusable, so the close button must stay tabbable to give keyboard
                 // users any dismiss path at all.
-                excludeFromTabOrder: isInteractive, onPress: handleClosePress, isDisabled: disabled, children: "[x]" }))] }));
+                excludeFromTabOrder: isInteractive, onPress: handleClosePress, isDisabled: disabled }))] }));
 };

package/dist/components/VitalsStrip/components/VitalsStrip.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Skeleton } from '../../Skeleton/index.js';
@@ -8,11 +8,6 @@ const sizeClasses = {
     md: 'eidotter-vitals-strip--md gap-2 text-dos-text-sm',
     lg: 'eidotter-vitals-strip--lg gap-2 text-dos-text-md',
 };
-const valueSizeClasses = {
-    sm: 'text-dos-display-xs',
-    md: 'text-dos-display-sm',
-    lg: 'text-dos-display-md',
-};
 const toneClasses = {
     neutral: 'eidotter-tone--neutral',
     info: 'eidotter-tone--info',
@@ -67,7 +62,15 @@ export const VitalsStrip = forwardRef(({ tiles, size = 'md', locale = 'en', labe
                 .filter(Boolean)
                 .join(', ');
             return (_jsxs("div", { role: "group", "aria-label": name, "aria-busy": loading || undefined, className: cn('eidotter-vitals-strip__tile flex flex-col gap-0.5 border border-dos-border-default p-2', toneClasses[tone], statusClasses[status], tone === 'critical' &&
-                    'eidotter-vitals-strip__marker border-l-4 border-dos-border-error'), children: [_jsxs("span", { className: "flex items-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight", children: [tone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "text-dos-text-error", children: "\u25B2" })), _jsx("span", { className: "truncate", title: t.label, children: t.label })] }), loading ? (_jsx("div", { "aria-hidden": "true", className: "w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 1, animated: false }) })) : (_jsxs("span", { className: cn('eidotter-vitals-strip__value text-dos-text-accent leading-none tabular-nums', valueSizeClasses[size] ?? valueSizeClasses.md), children: [stale ? _jsx("span", { className: "opacity-60", children: valueText }) : (stateText ?? valueText), valueText && t.unit && (_jsx("span", { className: "eidotter-vitals-strip__unit ml-1 text-[0.5em] text-dos-text-brand", children: t.unit }))] })), stale && _jsx("span", { className: "eidotter-vitals-strip__stale", children: labels.stale }), t.secondary && !unknown && (_jsx("span", { className: "eidotter-vitals-strip__secondary text-dos-text-muted leading-tight", children: t.secondary })), resolved.label && (_jsx("span", { className: "eidotter-vitals-strip__band text-dos-text-brand leading-tight", children: resolved.label }))] }, t.id));
+                    'eidotter-vitals-strip__marker border-l-4 border-dos-border-error'), children: [_jsxs("span", { className: "flex items-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight", children: [tone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "text-dos-text-error", children: "\u25B2" })), _jsx("span", { className: "truncate", title: t.label, children: t.label })] }), loading ? (_jsx("div", { "aria-hidden": "true", className: "w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 1, animated: false }) })) : (
+                    /* Display size comes from VitalsStrip.css (a per-size custom property that
+                       steps down in narrow strips), not a Tailwind text-* utility: twMerge
+                       would treat a second text-* class as a colour conflict and drop the
+                       accent colour. The reading never wraps or widens the tile; the unit
+                       moves under it when both do not fit on one line (DMNC-1573). */
+                    _jsxs("span", { className: "eidotter-vitals-strip__value text-dos-text-accent leading-none tabular-nums flex flex-wrap items-baseline gap-x-1 min-w-0", children: [_jsx("span", { className: "eidotter-vitals-strip__reading min-w-0 max-w-full whitespace-nowrap overflow-hidden text-ellipsis", children: stale ? (_jsx("span", { className: "opacity-60", children: valueText })) : stateText !== null ? (
+                                // State words are prose, not a reading: body size, not display size.
+                                _jsx("span", { className: "eidotter-vitals-strip__state text-dos-text-sm", children: stateText })) : (valueText) }), valueText && t.unit && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-vitals-strip__unit whitespace-nowrap text-[0.5em] text-dos-text-brand", children: t.unit })] }))] })), stale && _jsx("span", { className: "eidotter-vitals-strip__stale", children: labels.stale }), t.secondary && !unknown && (_jsx("span", { className: "eidotter-vitals-strip__secondary text-dos-text-muted leading-tight", children: t.secondary })), resolved.label && (_jsx("span", { className: "eidotter-vitals-strip__band text-dos-text-brand leading-tight", children: resolved.label }))] }, t.id));
         }) }));
 });
 VitalsStrip.displayName = 'VitalsStrip';