eidotter 0.41.0 → 0.41.1

package/README.md

@@ -15,7 +15,7 @@
 [![license](https://img.shields.io/badge/license-CC--BY--NC--4.0-ffb000?labelColor=020003)](./LICENSE.md)
 [![React](https://img.shields.io/badge/React-18%20%7C%2019-ffb000?labelColor=020003)](https://react.dev/)
 
-**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 47 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
+**eiDotter** is a React component library that takes the DOS/CGA terminal aesthetic seriously: authentic 16-color palette, bitmap-accurate typography, phosphor glow physics, keyboard-first interactions. 59 components across forms, navigation, windowing, timelines, health displays, and terminal chrome — shipped as ES modules with a prebuilt stylesheet so consumers don't need Tailwind to use it.
 
 → **[Storybook](https://cinimody.github.io/eiDotter/)**  ·  **[CHANGELOG](./CHANGELOG.md)**  ·  **[Accessibility](./ACCESSIBILITY.md)**  ·  **[Issues](https://github.com/CinimoDY/eiDotter/issues)**  ·  **[npm](https://www.npmjs.com/package/eidotter)**
 
@@ -104,7 +104,7 @@ for client apps and `'use client'` files.
 
 Every minor with breaking or visible changes ships an upgrade guide in the package, at `node_modules/eidotter/migrations/<version>.md` (source: [`migrations/`](./migrations/)). Read every guide between your installed version and the target, oldest first. Start with [0.41.0](./migrations/0.41.0.md).
 
-0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.41.0`.
+0.x caret ranges stop at the next minor (`^0.40.2` never resolves to 0.41.0), so bump the range explicitly: `npm install eidotter@^0.41.1` (0.41.0 shipped before its review fixes; use 0.41.1 or later).
 
 ## Documentation
 

package/dist/components/DecayStrip/components/DecayStrip.js

@@ -88,12 +88,7 @@ export const DecayStrip = forwardRef(({ items, samples, now, window, provenance,
         .filter(Boolean)
         .join('; ');
     const compact = size === 'sm';
-    return (_jsxs("div", { ref: ref, className: [
-            // The size class (a text-* font size) is joined outside cn(): twMerge
-            // reads it as a colour and would drop text-dos-text-brand.
-            cn('eidotter-decay-strip eidotter-health flex flex-col gap-2 w-full min-w-0 font-dos text-dos-text-brand', toneClasses[tone], className),
-            sizeClasses[size] ?? sizeClasses.md,
-        ].join(' '), ...props, children: [items.length === 0 ? (_jsx(EmptyState, { title: `${zeroPercent} ${labels.remaining}`, className: "py-2" })) : (_jsx("ul", { className: cn('flex gap-2 min-w-0', compact ? 'flex-col' : 'flex-wrap'), children: rows.map((r) => (_jsx("li", { className: cn('eidotter-decay-strip__item min-w-0', compact ? 'flex flex-wrap items-baseline gap-2 tabular-nums' : 'flex-1'), children: compact ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-dos-text-accent", title: r.item.label, children: r.item.label }), _jsx("span", { children: r.amountText }), _jsx("span", { children: r.shareText }), r.tagText && (_jsx("span", { className: "eidotter-decay-strip__item-provenance border border-dos-border-brand px-1", children: r.tagText }))] })) : (_jsx(Gauge, { label: r.item.label, value: r.share === null ? null : r.share * 100, secondary: r.item.amount === null ? undefined : r.amountText, size: "sm", tone: tone, provenance: r.item.provenance, locale: locale, labels: labelOverrides })) }, r.item.id))) })), _jsxs("div", { className: "eidotter-decay-strip__strip flex items-center gap-2 min-w-0 tabular-nums", role: "img", "aria-label": summary, children: [_jsx("span", { className: "eidotter-decay-strip__from shrink-0", children: fromText }), _jsx("span", { className: "eidotter-decay-strip__cells flex flex-1 min-w-0 overflow-hidden whitespace-nowrap leading-none", style: tone === 'neutral' ? undefined : { color: 'var(--eidotter-fill)' }, children: cells.map((cell, i) => {
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-decay-strip eidotter-health flex flex-col gap-2 w-full min-w-0 font-dos text-dos-text-brand', toneClasses[tone], sizeClasses[size] ?? sizeClasses.md, className), ...props, children: [items.length === 0 ? (_jsx(EmptyState, { title: `${zeroPercent} ${labels.remaining}`, className: "py-2" })) : (_jsx("ul", { className: cn('flex gap-2 min-w-0', compact ? 'flex-col' : 'flex-wrap'), children: rows.map((r) => (_jsx("li", { className: cn('eidotter-decay-strip__item min-w-0', compact ? 'flex flex-wrap items-baseline gap-2 tabular-nums' : 'flex-1'), children: compact ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-dos-text-accent", title: r.item.label, children: r.item.label }), _jsx("span", { children: r.amountText }), _jsx("span", { children: r.shareText }), r.tagText && (_jsx("span", { className: "eidotter-decay-strip__item-provenance border border-dos-border-brand px-1", children: r.tagText }))] })) : (_jsx(Gauge, { label: r.item.label, value: r.share === null ? null : r.share * 100, secondary: r.item.amount === null ? undefined : r.amountText, size: "sm", tone: tone, provenance: r.item.provenance, locale: locale, labels: labelOverrides })) }, r.item.id))) })), _jsxs("div", { className: "eidotter-decay-strip__strip flex items-center gap-2 min-w-0 tabular-nums", role: "img", "aria-label": summary, children: [_jsx("span", { className: "eidotter-decay-strip__from shrink-0", children: fromText }), _jsx("span", { className: "eidotter-decay-strip__cells flex flex-1 min-w-0 overflow-hidden whitespace-nowrap leading-none", style: tone === 'neutral' ? undefined : { color: 'var(--eidotter-fill)' }, children: cells.map((cell, i) => {
                             const last = i === cells.length - 1;
                             const isNow = nowMs >= cell.start && (nowMs < cell.end || (last && nowMs === cell.end));
                             const future = !isNow && nowMs < cell.start && nowMs >= cells[0].start;

package/dist/components/DosDialog/components/DosDialog.d.ts

@@ -20,6 +20,16 @@ export interface DosDialogHead {
 export interface DosDialogProps {
     /** Controlled open state. */
     open: boolean;
+    /**
+     * Render the same chrome in place, in document flow: no `ModalOverlay`,
+     * portal, scrim, focus trap, scroll lock, Escape or backdrop dismissal, and
+     * no enter/exit motion. The frame, strip, head, body, footer and end control
+     * keep their markup and classes; the container is a `role="group"` named
+     * like the dialog (no `aria-modal`). For docs pages and static previews
+     * that must show the chrome without hydration. `open` still gates
+     * rendering; `onOpenChange` and `isDismissable` are unused. Defaults to `false`.
+     */
+    inline?: boolean;
     /** Called when the dialog requests open/close (Escape, backdrop click). */
     onOpenChange?: (open: boolean) => void;
     /** Vertical anchor: `center` (default) or `top` (~18vh, CmdPalette's anchor). */
@@ -72,6 +82,9 @@ export interface DosDialogProps {
  *
  * The strip title is one line with an ellipsis by default; Modal lets it wrap.
  *
+ * `inline` renders the same chrome in place (no overlay, portal or focus
+ * trap) for docs and static previews.
+ *
  * Ref forwards to the dialog element (`.eidotter-dialog__container`).
  */
 export declare const DosDialog: React.ForwardRefExoticComponent<DosDialogProps & React.RefAttributes<HTMLElement>>;

package/dist/components/DosDialog/components/DosDialog.js

@@ -1,5 +1,5 @@
 'use client';
-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, isValidElement, useEffect, useId } from 'react';
 import { ModalOverlay as AriaModalOverlay, Modal as AriaModal, Dialog as AriaDialog, } from 'react-aria-components';
 import { cn } from '../../../utils/cn.js';
@@ -30,15 +30,18 @@ function isHeadObject(head) {
  *
  * The strip title is one line with an ellipsis by default; Modal lets it wrap.
  *
+ * `inline` renders the same chrome in place (no overlay, portal or focus
+ * trap) for docs and static previews.
+ *
  * Ref forwards to the dialog element (`.eidotter-dialog__container`).
  */
-export const DosDialog = forwardRef(({ open, onOpenChange, placement = 'center', size = 'md', head, footer, isDismissable = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }, ref) => {
+export const DosDialog = forwardRef(({ open, onOpenChange, inline = false, placement = 'center', size = 'md', head, footer, isDismissable = true, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, children, }, ref) => {
     const titleId = useId();
     const reduced = prefersReducedMotion();
     const structured = isHeadObject(head) ? head : null;
     const labelledBy = ariaLabelledBy ??
         (!ariaLabel && structured && !structured.decorative ? titleId : undefined);
-    const unnamed = open && !ariaLabel && !labelledBy;
+    const unnamed = open && !inline && !ariaLabel && !labelledBy;
     useEffect(() => {
         if (unnamed && process.env.NODE_ENV !== 'production') {
             console.warn('[eidotter] DosDialog has no accessible name. A ReactNode or decorative head ' +
@@ -54,6 +57,12 @@ export const DosDialog = forwardRef(({ open, onOpenChange, placement = 'center',
     else if (head != null && head !== false) {
         strip = _jsx("div", { className: "eidotter-dialog__head", children: head });
     }
-    return (_jsx(AriaModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: isDismissable, className: ({ isEntering, isExiting }) => cn('eidotter-dialog__overlay', `eidotter-dialog__overlay--${placement}`, !reduced && isEntering && 'eidotter-dialog__overlay--entering', !reduced && isExiting && 'eidotter-dialog__overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-dialog', `eidotter-dialog--${size}`, `eidotter-dialog--${placement}`, !reduced && isEntering && 'eidotter-dialog--entering', !reduced && isExiting && 'eidotter-dialog--exiting'), children: _jsxs(AriaDialog, { ref: ref, "aria-label": ariaLabel, "aria-labelledby": labelledBy, className: cn('eidotter-dialog__container outline-none', className), children: [strip, _jsx("div", { className: "eidotter-dialog__body", children: children }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-dialog__footer", children: footer }))] }) }) }));
+    const content = (_jsxs(_Fragment, { children: [strip, _jsx("div", { className: "eidotter-dialog__body", children: children }), footer != null && footer !== false && (_jsx("div", { className: "eidotter-dialog__footer", children: footer }))] }));
+    if (inline) {
+        if (!open)
+            return null;
+        return (_jsx("div", { className: cn('eidotter-dialog', `eidotter-dialog--${size}`, `eidotter-dialog--${placement}`, 'eidotter-dialog--inline'), children: _jsx("div", { ref: ref, role: "group", "aria-label": ariaLabel, "aria-labelledby": labelledBy, className: cn('eidotter-dialog__container outline-none', className), children: content }) }));
+    }
+    return (_jsx(AriaModalOverlay, { isOpen: open, onOpenChange: onOpenChange, isDismissable: isDismissable, className: ({ isEntering, isExiting }) => cn('eidotter-dialog__overlay', `eidotter-dialog__overlay--${placement}`, !reduced && isEntering && 'eidotter-dialog__overlay--entering', !reduced && isExiting && 'eidotter-dialog__overlay--exiting'), children: _jsx(AriaModal, { className: ({ isEntering, isExiting }) => cn('eidotter-dialog', `eidotter-dialog--${size}`, `eidotter-dialog--${placement}`, !reduced && isEntering && 'eidotter-dialog--entering', !reduced && isExiting && 'eidotter-dialog--exiting'), children: _jsx(AriaDialog, { ref: ref, "aria-label": ariaLabel, "aria-labelledby": labelledBy, className: cn('eidotter-dialog__container outline-none', className), children: content }) }) }));
 });
 DosDialog.displayName = 'DosDialog';

package/dist/components/Gauge/components/Gauge.js

@@ -76,12 +76,6 @@ export const Gauge = forwardRef(({ label, shortLabel, value, max = 100, unit, se
     const [secondaryHead, secondaryTail] = splitSecondary(secondary ?? '');
     const secondaryPart = secondary && !unknown && !loading ? (_jsxs("span", { className: "eidotter-gauge__secondary text-dos-text-brand text-dos-text-xs tabular-nums leading-none", children: [_jsx("span", { className: "eidotter-gauge__secondary-head", children: secondaryHead }), secondaryTail !== null && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-gauge__secondary-tail", children: secondaryTail })] }))] })) : null;
     const tagText = provenanceLabel(labels, provenance);
-    return (_jsxs("div", { ref: ref, className: cn('eidotter-gauge eidotter-health flex flex-col items-center gap-1 w-full font-dos', sizeClasses[size] ?? sizeClasses.md, toneClasses[effectiveTone], statusClasses[status], className), style: { minWidth: diameter }, "data-size": sizeKey, "data-has-short": shortLabel ? 'true' : 'false', role: "meter", "aria-valuemin": 0, "aria-valuemax": unknown ? 100 : max, "aria-valuenow": unknown || loading ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, "aria-busy": loading || undefined, ...props, children: [_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsx(ProgressRing, { decorative: true, value: loading ? 0 : pct, max: 100, size: diameter, thickness: thickness, segments: toneSegments[effectiveTone] ?? 16, color: effectiveTone === 'neutral' ? undefined : 'var(--eidotter-fill)', glow: false, className: cn(glow && 'eidotter-health-glow') }), _jsx("div", { className: "eidotter-gauge__center absolute flex flex-col items-center justify-center min-w-0 text-center leading-none", style: { inset: thickness + 2 }, children: loading ? (_jsx("div", { "aria-hidden": "true", className: "eidotter-gauge__skeleton w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 2, animated: false }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: [
-                                        'eidotter-gauge__value text-dos-text-accent tabular-nums',
-                                        valueSizeClasses[sizeKey],
-                                        stale && 'opacity-60',
-                                    ]
-                                        .filter(Boolean)
-                                        .join(' '), children: valueText }), !secondaryBelow && secondaryPart] })) })] }), secondaryBelow && secondaryPart, _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-gauge__label truncate", title: label, children: [_jsx("span", { className: "eidotter-gauge__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-gauge__label--short", children: shortLabel })] }), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__overflow text-dos-text-warning", children: "+" })), tagText !== null && (_jsx("span", { className: "eidotter-gauge__provenance border border-dos-border-brand px-1 normal-case", children: tagText })), stale && _jsx("span", { className: "eidotter-gauge__stale normal-case", children: labels.stale })] }), resolved.label && (_jsx("span", { className: "eidotter-gauge__band text-dos-text-brand normal-case", children: resolved.label }))] }));
+    return (_jsxs("div", { ref: ref, className: cn('eidotter-gauge eidotter-health flex flex-col items-center gap-1 w-full font-dos', sizeClasses[size] ?? sizeClasses.md, toneClasses[effectiveTone], statusClasses[status], className), style: { minWidth: diameter }, "data-size": sizeKey, "data-has-short": shortLabel ? 'true' : 'false', role: "meter", "aria-valuemin": 0, "aria-valuemax": unknown ? 100 : max, "aria-valuenow": unknown || loading ? 0 : Math.max(0, Math.min(value, max)), "aria-valuetext": valuetext, "aria-label": name, "aria-busy": loading || undefined, ...props, children: [_jsxs("div", { className: "relative inline-flex items-center justify-center", children: [_jsx(ProgressRing, { decorative: true, value: loading ? 0 : pct, max: 100, size: diameter, thickness: thickness, segments: toneSegments[effectiveTone] ?? 16, color: effectiveTone === 'neutral' ? undefined : 'var(--eidotter-fill)', glow: false, className: cn(glow && 'eidotter-health-glow') }), _jsx("div", { className: "eidotter-gauge__center absolute flex flex-col items-center justify-center min-w-0 text-center leading-none", style: { inset: thickness + 2 }, children: loading ? (_jsx("div", { "aria-hidden": "true", className: "eidotter-gauge__skeleton w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 2, animated: false }) })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('eidotter-gauge__value text-dos-text-accent tabular-nums', valueSizeClasses[sizeKey], stale && 'opacity-60'), children: valueText }), !secondaryBelow && secondaryPart] })) })] }), secondaryBelow && secondaryPart, _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight max-w-full", children: [effectiveTone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__glyph text-dos-text-error", children: "\u25B2" })), _jsxs("span", { className: "eidotter-gauge__label truncate", title: label, children: [_jsx("span", { className: "eidotter-gauge__label--full", children: label }), shortLabel && _jsx("span", { className: "eidotter-gauge__label--short", children: shortLabel })] }), overflow && (_jsx("span", { "aria-hidden": "true", className: "eidotter-gauge__overflow text-dos-text-warning", children: "+" })), tagText !== null && (_jsx("span", { className: "eidotter-gauge__provenance border border-dos-border-brand px-1 normal-case", children: tagText })), stale && _jsx("span", { className: "eidotter-gauge__stale normal-case", children: labels.stale })] }), resolved.label && (_jsx("span", { className: "eidotter-gauge__band text-dos-text-brand normal-case", children: resolved.label }))] }));
 });
 Gauge.displayName = 'Gauge';

package/dist/components/Icon/components/Icon.d.ts

@@ -40,6 +40,13 @@ export interface IconProps {
     role?: 'button' | 'img';
     /** Accessible label override */
     'aria-label'?: string;
+    /**
+     * Decorative glyph: renders `aria-hidden="true"` with no `role` and no
+     * `aria-label`, for icons inside a control that already carries the
+     * accessible name (IconButton). Defaults to `false` (announced as an image).
+     * Not for `role="button"` icons.
+     */
+    decorative?: boolean;
 }
 /**
  * Icon component backed by pixelarticons (MIT licensed).

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

@@ -62,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];
@@ -87,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.js

@@ -15,5 +15,5 @@ import { cn } from '../../../utils/cn.js';
  * 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" }) }) })));
+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/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);
@@ -48,11 +48,22 @@ export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, t
         .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 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(', ');
+    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';
@@ -60,6 +71,6 @@ export const SeriesBars = forwardRef(({ points, max, goal, goalLabel, toneFor, t
                                                         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) })] }))] }) })] }));
+                                        }) })] })] }), _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';

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

@@ -64,9 +64,8 @@ export const VitalsStrip = forwardRef(({ tiles, size = 'md', locale = 'en', labe
             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 }) })) : (
                     /* 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
+                       steps down in narrow strips), not a Tailwind text-* utility, which
+                       cannot follow the container width. 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.

package/dist/components/registry.js

@@ -429,6 +429,7 @@ export const componentRegistry = {
             swiftui: { status: 'planned' },
         },
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'The unit can drop under the value in a narrow card (a space before the unit is the break opportunity; was a 4px margin with no break) (DMNC-1610)' },
             { version: '0.40.0', type: 'changed', description: 'Add optional unit, note and target slots (additive; existing consumers unchanged)' },
             { version: '0.19.0', type: 'changed', description: 'Replace hardcoded font-size pixels with V.37 dos tokens' },
             { version: '0.16.0', type: 'changed', description: 'Migrate to Tailwind-first (Wave 2); deprecate size aliases; add size:sm/lg' },
@@ -745,9 +746,13 @@ export const componentRegistry = {
             'size:md': { description: '30rem, default (Modal historical 480px)', since: '0.41.0' },
             'size:lg': { description: '40rem (CmdPalette historical 640px)', since: '0.41.0' },
             'size:full': { description: 'Viewport width minus 2x spacing-4 (Lightbox)', since: '0.41.0' },
+            'inline:false': { description: 'Modal overlay: React Aria ModalOverlay, portal, scrim, focus trap (default)', since: '0.41.0' },
+            'inline:true': { description: 'Same chrome in document flow: no overlay, portal or focus trap; role=group, no aria-modal (docs, static previews)', since: '0.42.0' },
         },
         platforms: { react: { path: 'src/components/DosDialog', status: 'canonical' } },
         changelog: [
+            { version: '0.42.0', type: 'added', description: 'inline prop: renders the same frame, strip, head, body, footer and end control in place without ModalOverlay, portal or focus trap, as a role=group with no aria-modal; server HTML carries the chrome (DMNC-1605)' },
+            { version: '0.42.0', type: 'changed', description: 'Last end IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right), the same rule as DosWindow controls (DMNC-1605)' },
             { version: '0.41.0', type: 'added', description: 'Initial DosDialog: open/onOpenChange, placement, size, head strip (title/end/marker/decorative or ReactNode), footer, isDismissable, pop-in/out panel (150ms) over a fading scrim, reduced-motion bypass' },
         ],
     },
@@ -778,6 +783,7 @@ export const componentRegistry = {
         },
         platforms: { react: { path: 'src/components/DosWindow', status: 'canonical' } },
         changelog: [
+            { version: '0.42.0', type: 'changed', description: 'Last control IconButton docks flush in the frame corner (0px top, 0px right, was 0px top, 4px right); the inline-end overhang moved from the controls container to the last IconButton, so non-IconButton controls keep the strip padding (DMNC-1605)' },
             { version: '0.41.0', type: 'added', description: 'Initial DosWindow: title, marker, active, controls, footer, className; stable classes eidotter-window, __strip, __title, __controls, __body, __footer (DMNC-1592)' },
         ],
     },
@@ -1012,6 +1018,7 @@ export const componentRegistry = {
         },
         changelog: [
             { version: '0.40.0', type: 'added', description: 'Initial RangeBar (health metabolism family)' },
+            { version: '0.42.0', type: 'changed', description: 'Vertical legend wraps under the bar in a narrow container; legend names wrap instead of truncating and a bound moves to the next line whole; percent and target label separated by a gap and a space; lane and legend text print black on white (DMNC-1610)' },
         ],
     },
     SeriesBars: {
@@ -1036,6 +1043,8 @@ export const componentRegistry = {
         changelog: [
             { version: '0.40.0', type: 'added', description: 'Initial SeriesBars (health metabolism family)' },
             { version: '0.41.0', type: 'changed', description: 'Goal label moved into a reserved band above the plot so it never paints over a bar (DMNC-1573)' },
+            { version: '0.42.0', type: 'added', description: 'Additive unit and format (formatValue digits/percent/signed) props: values and the goal carry the unit in the summary, value table and bar titles; a goal label that already holds the goal value is not repeated (DMNC-1610)' },
+            { version: '0.42.0', type: 'changed', description: 'Sparse ticks (tickEvery > 1) overflow into empty neighbour columns instead of truncating; first and last labels pinned to the plot edges; goal tag and ticks print black on white (DMNC-1610)' },
         ],
     },
     DecayStrip: {