eidotter 0.40.2 → 0.41.1

package/dist/components/Icon/components/Icon.js

@@ -6,6 +6,8 @@ import { SquareAlert } from 'pixelarticons/react/SquareAlert';
 import { Check } from 'pixelarticons/react/Check';
 import { ChevronUp } from 'pixelarticons/react/ChevronUp';
 import { ChevronDown } from 'pixelarticons/react/ChevronDown';
+import { ChevronLeft } from 'pixelarticons/react/ChevronLeft';
+import { ChevronRight } from 'pixelarticons/react/ChevronRight';
 import { WindowFrame } from 'pixelarticons/react/WindowFrame';
 import { Minus } from 'pixelarticons/react/Minus';
 import { Expand } from 'pixelarticons/react/Expand';
@@ -17,7 +19,7 @@ import { cn } from '../../../utils/cn.js';
  * currentColor inheritance, 2×2 unit "pixels" on the grid.
  */
 const PixelX = (props) => (_jsx("svg", { viewBox: "0 0 24 24", width: "24", height: "24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M5 5h2v2H5zM7 7h2v2H7zM9 9h2v2H9zM11 11h2v2h-2zM13 13h2v2h-2zM15 15h2v2h-2zM17 17h2v2h-2zM17 5h2v2h-2zM15 7h2v2h-2zM13 9h2v2h-2zM9 13h2v2H9zM7 15h2v2H7zM5 17h2v2H5z" }) }));
-// 12 public icon names mapping to 11 unique pixelarticons components.
+// 14 public icon names mapping to 13 unique glyphs (12 pixelarticons + PixelX).
 // Done and Check both map to the Check component intentionally — consumers
 // can use either semantic name for a checkmark glyph.
 //
@@ -38,6 +40,8 @@ const ICON_MAP = {
     'Close': PixelX, // custom pixel-art X mark (pixelarticons has no X glyph)
     'Chevron Up': ChevronUp,
     'Chevron Down': ChevronDown,
+    'Chevron Left': ChevronLeft, // Lightbox prev (IconButton, DMNC-1592)
+    'Chevron Right': ChevronRight, // Lightbox next
     'App': WindowFrame,
     'Cancel': Minus, // window minimize control, not abort
     'Fullscreen': Expand,
@@ -58,7 +62,7 @@ const SIZE_MAP = { L: 56, S: 24 };
  * Renders inline SVG with proper viewBox scaling at any size.
  * The DOS pixel aesthetic matches eidotter's design language.
  */
-export const Icon = ({ name, size = 'L', className = '', onClick, color, role, 'aria-label': ariaLabel, }) => {
+export const Icon = ({ name, size = 'L', className = '', onClick, color, role, 'aria-label': ariaLabel, decorative = false, }) => {
     // Runtime defense against JS consumers or dynamically-cast names.
     // TypeScript users are already constrained to IconName by IconProps.
     const IconComponent = ICON_MAP[name];
@@ -83,5 +87,5 @@ export const Icon = ({ name, size = 'L', className = '', onClick, color, role, '
             }
         }
         : undefined;
-    return (_jsx("span", { className: cn('icon', isButton && 'icon--button', className), onClick: onClick, onKeyDown: handleKeyDown, role: resolvedRole, tabIndex: isButton ? 0 : undefined, "aria-label": ariaLabel || `${name} icon`, style: color ? { color } : undefined, children: _jsx(IconComponent, { width: pixelSize, height: pixelSize, className: "icon__svg" }) }));
+    return (_jsx("span", { className: cn('icon', isButton && 'icon--button', className), onClick: onClick, onKeyDown: handleKeyDown, role: decorative ? undefined : resolvedRole, tabIndex: isButton ? 0 : undefined, "aria-label": decorative ? undefined : ariaLabel || `${name} icon`, "aria-hidden": decorative ? 'true' : undefined, style: color ? { color } : undefined, children: _jsx(IconComponent, { width: pixelSize, height: pixelSize, className: "icon__svg" }) }));
 };

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", decorative: true }) }) })));
+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/RangeBar/components/RangeBar.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 { formatValue, resolveLabels } from '../../../utils/health/index.js';
@@ -72,7 +72,10 @@ export const RangeBar = forwardRef(({ segments, orientation = 'vertical', size =
     }
     const pct = (n) => formatValue(n, { locale, percent: true }).text;
     const summary = items.map((s) => `${s.label} ${pct(s.weight)}`).join(', ');
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-range-bar eidotter-health flex gap-3 font-dos', orientation === 'horizontal' ? 'flex-col' : 'flex-row items-start', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { className: cn('eidotter-range-bar__track flex gap-1', orientation === 'horizontal' ? 'flex-col w-full' : 'flex-row'), children: [_jsx("div", { role: "img", "aria-label": summary, className: cn('eidotter-range-bar__bar flex shrink-0', orientation === 'horizontal' ? 'flex-row' : 'flex-col', trackClasses[`${orientation}-${size}`] ?? trackClasses['vertical-md']), children: items.map((s) => {
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-range-bar eidotter-health flex gap-3 font-dos', 
+        // Vertical: the legend wraps under the bar when bar and legend do not
+        // fit side by side in the containing width (DMNC-1610).
+        orientation === 'horizontal' ? 'flex-col' : 'flex-row flex-wrap items-start', orientationClasses[orientation] ?? orientationClasses.vertical, sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [_jsxs("div", { className: cn('eidotter-range-bar__track flex gap-1', orientation === 'horizontal' ? 'flex-col w-full' : 'flex-row'), children: [_jsx("div", { role: "img", "aria-label": summary, className: cn('eidotter-range-bar__bar flex shrink-0', orientation === 'horizontal' ? 'flex-row' : 'flex-col', trackClasses[`${orientation}-${size}`] ?? trackClasses['vertical-md']), children: items.map((s) => {
                             const isTarget = target?.segmentId === s.id;
                             return (_jsx("div", { "data-segment-id": s.id, className: cn('eidotter-range-bar__seg relative', toneClasses[s.toneKey], s.patternClass), style: {
                                     flexGrow: Math.max(s.weight, minSegmentShare),
@@ -81,10 +84,10 @@ export const RangeBar = forwardRef(({ segments, orientation = 'vertical', size =
                                 }, children: isTarget && target && (_jsx("span", { "aria-hidden": "true", className: "eidotter-range-bar__target absolute", style: {
                                         [orientation === 'horizontal' ? 'left' : 'top']: `${Math.min(Math.max(target.minShare / (s.weight || 1), 0), 1) * 100}%`,
                                     } })) }, s.id));
-                        }) }), _jsx("div", { "aria-hidden": "true", className: cn('eidotter-range-bar__lane flex tabular-nums text-dos-text-accent', orientation === 'horizontal' ? 'flex-row w-full' : 'flex-col'), children: items.map((s) => (_jsxs("div", { className: cn('eidotter-range-bar__cell flex items-center justify-center gap-1 min-w-0', orientation === 'horizontal' ? 'flex-col' : 'flex-row justify-start'), style: { flexGrow: Math.max(s.weight, minSegmentShare), flexBasis: 0 }, children: [s.weight >= labelThreshold && (_jsx("span", { className: "eidotter-range-bar__pct", children: pct(s.weight) })), target?.segmentId === s.id && (_jsx("span", { className: "eidotter-range-bar__target-label text-dos-text-brand whitespace-nowrap", children: target.label }))] }, s.id))) })] }), showLegend && (_jsx("ul", { className: "eidotter-range-bar__legend flex flex-col gap-1 list-none p-0 m-0 min-w-0", children: items.map((s) => {
-                    return (_jsxs("li", { className: "eidotter-range-bar__row grid grid-cols-[auto_1fr_auto_auto] items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn('eidotter-range-bar__swatch inline-block w-[0.75rem] h-[0.75rem]', toneClasses[s.toneKey], s.patternClass), style: {
+                        }) }), _jsx("div", { "aria-hidden": "true", className: cn('eidotter-range-bar__lane flex tabular-nums text-dos-text-accent', orientation === 'horizontal' ? 'flex-row w-full' : 'flex-col'), children: items.map((s) => (_jsxs("div", { className: cn('eidotter-range-bar__cell flex items-center justify-center gap-x-2 gap-y-1 min-w-0', orientation === 'horizontal' ? 'flex-col' : 'flex-row justify-start'), style: { flexGrow: Math.max(s.weight, minSegmentShare), flexBasis: 0 }, children: [s.weight >= labelThreshold && (_jsx("span", { className: "eidotter-range-bar__pct", children: pct(s.weight) })), s.weight >= labelThreshold && target?.segmentId === s.id && ' ', target?.segmentId === s.id && (_jsx("span", { className: "eidotter-range-bar__target-label text-dos-text-brand whitespace-nowrap", children: target.label }))] }, s.id))) })] }), showLegend && (_jsx("ul", { className: "eidotter-range-bar__legend flex flex-col gap-1 list-none p-0 m-0 min-w-0 max-w-full", children: items.map((s) => {
+                    return (_jsxs("li", { className: "eidotter-range-bar__row grid grid-cols-[auto_minmax(0,1fr)_auto_auto] items-baseline gap-2", children: [_jsx("span", { "aria-hidden": "true", className: cn('eidotter-range-bar__swatch inline-block w-[0.75rem] h-[0.75rem]', toneClasses[s.toneKey], s.patternClass), style: {
                                     ...(s.toneKey === 'neutral' && { '--eidotter-fill': NEUTRAL_FILL }),
-                                } }), _jsxs("span", { className: "text-dos-text-primary truncate", title: s.label, children: [s.label, s.bound && _jsxs("span", { className: "text-dos-text-muted", children: [" ", s.bound] })] }), _jsx("span", { className: "text-dos-text-accent tabular-nums", children: pct(s.weight) }), _jsx("span", { className: "text-dos-text-muted tabular-nums text-right", children: s.duration ?? '' })] }, s.id));
+                                } }), _jsxs("span", { className: "eidotter-range-bar__name text-dos-text-primary min-w-0 break-words", children: [s.label, s.bound && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-range-bar__bound text-dos-text-muted whitespace-nowrap", children: s.bound })] }))] }), _jsx("span", { className: "text-dos-text-accent tabular-nums", children: pct(s.weight) }), _jsx("span", { className: "text-dos-text-muted tabular-nums text-right", children: s.duration ?? '' })] }, s.id));
                 }) }))] }));
 });
 RangeBar.displayName = 'RangeBar';

package/dist/components/SeriesBars/components/SeriesBars.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { HealthLabels, Tone } from '../../../utils/health/index.js';
+import type { FormatValueOptions, HealthLabels, Tone } from '../../../utils/health/index.js';
 export interface SeriesBarsPoint {
     /** Tick and table label. */
     label: string;
@@ -30,6 +30,14 @@ export interface SeriesBarsProps {
     size?: 'sm' | 'md' | 'lg';
     /** BCP 47 locale for number formatting (default `en`). */
     locale?: string;
+    /**
+     * Unit appended to every value and the goal in the accessible summary, the
+     * value table and the bar titles (e.g. `%` gives "70 %"). Use either this
+     * or `format.percent`, not both.
+     */
+    unit?: string;
+    /** Number formatting, the family's `formatValue` options (`digits`, `percent`, `signed`). */
+    format?: Pick<FormatValueOptions, 'digits' | 'percent' | 'signed'>;
     /** Overrides for the built-in label text. */
     labels?: Partial<HealthLabels>;
     /** Additional CSS class name. */

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

@@ -38,7 +38,7 @@ const patternClasses = {
  * `img` with a composed summary; a visually hidden table beside it carries the
  * values for assistive tech. Presentational and hook-free, so server-safe.
  */
-export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, tickEvery = 1, size = 'md', locale = 'en', labels: labelOverrides, className, ...props }, ref) => {
+export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, tickEvery = 1, size = 'md', locale = 'en', unit, format, labels: labelOverrides, className, ...props }, ref) => {
     const labels = resolveLabels(labelOverrides);
     const known = points.map((p) => p.value).filter(isKnown);
     const top = max ?? Math.max(...known, goal ?? 0, 0);
@@ -47,18 +47,30 @@ 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 text = (v) => (isKnown(v) ? formatValue(v, { locale }).text : labels.unknown);
+    const goalBand = goal !== undefined && !!goalLabel;
+    const text = (v) => isKnown(v)
+        ? formatValue(v, { digits: format?.digits, percent: format?.percent, signed: format?.signed, locale, unit }).text
+        : labels.unknown;
+    // A goal label that already carries the formatted goal as a whole word
+    // ("Goal 70 %") is not repeated in the summary ("Goal 70 % 70 %").
+    const goalText = goal !== undefined ? text(goal) : '';
+    const words = (t) => ` ${t.replace(/\s+/g, ' ')} `;
+    const goalSummary = goalLabel && words(goalLabel).includes(words(goalText))
+        ? goalLabel
+        : `${goalLabel ?? ''} ${goalText}`.trim();
     const summary = [
         ...points.map((p) => `${p.label} ${text(p.value)}`),
-        ...(goal !== undefined ? [`${goalLabel ?? ''} ${text(goal)}`.trim()] : []),
+        ...(goal !== undefined ? [goalSummary] : []),
     ].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) })] }))] }) })] }));
+    const step = Math.max(tickEvery, 1);
+    const last = points.length - 1;
+    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: "eidotter-series-bars__ticks flex gap-1 text-dos-text-muted", children: points.map((p, i) => (_jsx("span", { className: cn('eidotter-series-bars__tick-cell flex flex-1 min-w-0', i === 0 ? 'justify-start' : i === last ? 'justify-end' : 'justify-center'), children: i % step === 0 && (_jsx("span", { className: cn('eidotter-series-bars__tick whitespace-nowrap tabular-nums', step === 1 && 'min-w-0 truncate'), children: 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/Stat/components/Stat.js

@@ -37,6 +37,6 @@ export const Stat = forwardRef(({ label, value, trend, trendValue, size = 'md',
     });
     const displayValue = scramble ? scrambledValue : String(value);
     const s = sizeClasses[size] || sizeClasses.md;
-    return (_jsxs("div", { ref: ref, className: cn('flex flex-col font-dos', 'eidotter-stat', s.root, className), ...props, children: [_jsx("span", { className: cn('text-dos-text-brand uppercase tracking-wider leading-tight', s.label), children: label }), _jsxs("span", { className: cn('text-dos-text-accent font-bold leading-none tabular-nums', s.value), children: [displayValue, unit && (_jsx("span", { className: "eidotter-stat__unit ml-1 text-[0.5em] font-normal text-dos-text-brand", children: unit }))] }), note && (_jsx("span", { className: `eidotter-stat__note text-dos-text-muted leading-tight ${s.trend}`, children: note })), target && (_jsx("span", { className: `eidotter-stat__target text-dos-text-brand leading-tight ${s.trend}`, children: target })), trend && (_jsxs("span", { className: cn('inline-flex items-center gap-1 leading-none', trendColorClasses[trend], s.trend), "aria-label": `Trend: ${trendLabels[trend]}${trendValue ? `, ${trendValue}` : ''}`, children: [_jsx("span", { className: "text-[0.8em]", "aria-hidden": "true", children: trendIcons[trend] }), trendValue && (_jsx("span", { className: "tabular-nums", children: trendValue }))] }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('flex flex-col font-dos', 'eidotter-stat', s.root, className), ...props, children: [_jsx("span", { className: cn('text-dos-text-brand uppercase tracking-wider leading-tight', s.label), children: label }), _jsxs("span", { className: cn('text-dos-text-accent font-bold leading-none tabular-nums', s.value), children: [displayValue, unit && (_jsxs("span", { className: "eidotter-stat__unit text-[0.5em] font-normal text-dos-text-brand", children: [' ', unit] }))] }), note && (_jsx("span", { className: `eidotter-stat__note text-dos-text-muted leading-tight ${s.trend}`, children: note })), target && (_jsx("span", { className: `eidotter-stat__target text-dos-text-brand leading-tight ${s.trend}`, children: target })), trend && (_jsxs("span", { className: cn('inline-flex items-center gap-1 leading-none', trendColorClasses[trend], s.trend), "aria-label": `Trend: ${trendLabels[trend]}${trendValue ? `, ${trendValue}` : ''}`, children: [_jsx("span", { className: "text-[0.8em]", "aria-hidden": "true", children: trendIcons[trend] }), trendValue && (_jsx("span", { className: "tabular-nums", children: trendValue }))] }))] }));
 });
 Stat.displayName = 'Stat';