eidotter 0.40.2 → 0.41.1

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { Skeleton } from '../../Skeleton/index.js';
@@ -8,11 +8,6 @@ const sizeClasses = {
     md: 'eidotter-vitals-strip--md gap-2 text-dos-text-sm',
     lg: 'eidotter-vitals-strip--lg gap-2 text-dos-text-md',
 };
-const valueSizeClasses = {
-    sm: 'text-dos-display-xs',
-    md: 'text-dos-display-sm',
-    lg: 'text-dos-display-md',
-};
 const toneClasses = {
     neutral: 'eidotter-tone--neutral',
     info: 'eidotter-tone--info',
@@ -67,7 +62,14 @@ export const VitalsStrip = forwardRef(({ tiles, size = 'md', locale = 'en', labe
                 .filter(Boolean)
                 .join(', ');
             return (_jsxs("div", { role: "group", "aria-label": name, "aria-busy": loading || undefined, className: cn('eidotter-vitals-strip__tile flex flex-col gap-0.5 border border-dos-border-default p-2', toneClasses[tone], statusClasses[status], tone === 'critical' &&
-                    'eidotter-vitals-strip__marker border-l-4 border-dos-border-error'), children: [_jsxs("span", { className: "flex items-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight", children: [tone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "text-dos-text-error", children: "\u25B2" })), _jsx("span", { className: "truncate", title: t.label, children: t.label })] }), loading ? (_jsx("div", { "aria-hidden": "true", className: "w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 1, animated: false }) })) : (_jsxs("span", { className: cn('eidotter-vitals-strip__value text-dos-text-accent leading-none tabular-nums', valueSizeClasses[size] ?? valueSizeClasses.md), children: [stale ? _jsx("span", { className: "opacity-60", children: valueText }) : (stateText ?? valueText), valueText && t.unit && (_jsx("span", { className: "eidotter-vitals-strip__unit ml-1 text-[0.5em] text-dos-text-brand", children: t.unit }))] })), stale && _jsx("span", { className: "eidotter-vitals-strip__stale", children: labels.stale }), t.secondary && !unknown && (_jsx("span", { className: "eidotter-vitals-strip__secondary text-dos-text-muted leading-tight", children: t.secondary })), resolved.label && (_jsx("span", { className: "eidotter-vitals-strip__band text-dos-text-brand leading-tight", children: resolved.label }))] }, t.id));
+                    'eidotter-vitals-strip__marker border-l-4 border-dos-border-error'), children: [_jsxs("span", { className: "flex items-center gap-1 text-dos-text-brand uppercase tracking-wider leading-tight", children: [tone === 'critical' && (_jsx("span", { "aria-hidden": "true", className: "text-dos-text-error", children: "\u25B2" })), _jsx("span", { className: "truncate", title: t.label, children: t.label })] }), loading ? (_jsx("div", { "aria-hidden": "true", className: "w-full overflow-hidden", children: _jsx(Skeleton, { variant: "figure", lines: 1, animated: false }) })) : (
+                    /* Display size comes from VitalsStrip.css (a per-size custom property that
+                       steps down in narrow strips), not a Tailwind text-* utility, 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.
+                                _jsx("span", { className: "eidotter-vitals-strip__state text-dos-text-sm", children: stateText })) : (valueText) }), valueText && t.unit && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "eidotter-vitals-strip__unit whitespace-nowrap text-[0.5em] text-dos-text-brand", children: t.unit })] }))] })), stale && _jsx("span", { className: "eidotter-vitals-strip__stale", children: labels.stale }), t.secondary && !unknown && (_jsx("span", { className: "eidotter-vitals-strip__secondary text-dos-text-muted leading-tight", children: t.secondary })), resolved.label && (_jsx("span", { className: "eidotter-vitals-strip__band text-dos-text-brand leading-tight", children: resolved.label }))] }, t.id));
         }) }));
 });
 VitalsStrip.displayName = 'VitalsStrip';