@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/spatial/particle-assemble-math.test.js

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { fitScale, easeOutCubic, lerp, particleFrame } from './particle-assemble-math';
+describe('fitScale', () => {
+    it('centers a shape narrower than the canvas', () => {
+        const { scale, dx, dy } = fitScale(100, 100, 200, 200, 1);
+        expect(scale).toBe(2);
+        expect(dx).toBe(0);
+        expect(dy).toBe(0);
+    });
+    it('applies padRatio to shrink the fitted shape', () => {
+        const { scale, dx } = fitScale(100, 100, 200, 200, 0.5);
+        expect(scale).toBe(1);
+        expect(dx).toBe(50);
+    });
+    it('fits by the constraining dimension for non-square aspect ratios', () => {
+        const { scale, dx, dy } = fitScale(270, 305, 1000, 1000, 1);
+        // height is the tighter constraint (305 > 270), so scale is bound by height
+        expect(scale).toBeCloseTo(1000 / 305, 5);
+        expect(dx).toBeGreaterThan(0);
+        expect(dy).toBe(0);
+    });
+});
+describe('easeOutCubic', () => {
+    it('maps 0 to 0 and 1 to 1', () => {
+        expect(easeOutCubic(0)).toBe(0);
+        expect(easeOutCubic(1)).toBe(1);
+    });
+    it('clamps progress outside [0, 1]', () => {
+        expect(easeOutCubic(-0.5)).toBe(0);
+        expect(easeOutCubic(1.5)).toBe(1);
+    });
+    it('decelerates — front-loads more progress than a linear ramp', () => {
+        expect(easeOutCubic(0.5)).toBeGreaterThan(0.5);
+    });
+});
+describe('lerp', () => {
+    it('interpolates linearly', () => {
+        expect(lerp(0, 10, 0)).toBe(0);
+        expect(lerp(0, 10, 1)).toBe(10);
+        expect(lerp(0, 10, 0.5)).toBe(5);
+    });
+});
+describe('particleFrame', () => {
+    it('starts at the origin position with alpha 0.3 when eased is 0', () => {
+        const frame = particleFrame({ x: 10, y: 20, tx: 100, ty: 200 }, 0);
+        expect(frame.x).toBe(10);
+        expect(frame.y).toBe(20);
+        expect(frame.alpha).toBeCloseTo(0.3);
+    });
+    it('ends at the target position with alpha 1 when eased is 1', () => {
+        const frame = particleFrame({ x: 10, y: 20, tx: 100, ty: 200 }, 1);
+        expect(frame.x).toBe(100);
+        expect(frame.y).toBe(200);
+        expect(frame.alpha).toBeCloseTo(1);
+    });
+});

package/dist/t0-transport/substrate.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"substrate.svelte.d.ts","sourceRoot":"","sources":["../../src/t0-transport/substrate.svelte.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GACtB;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,GACtB;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,MAAM,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,MAAM,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,OAAO,IAAI,IAAI,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAgC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkDD,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gCAAqC,GAC7C,mBAAmB,CAErB"}
+{"version":3,"file":"substrate.svelte.d.ts","sourceRoot":"","sources":["../../src/t0-transport/substrate.svelte.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GACtB;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,GACtB;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACtC;IAAE,MAAM,EAAE,cAAc,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GAC3C;IAAE,MAAM,EAAE,QAAQ,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC;IACtB,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtB,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvB,OAAO,IAAI,IAAI,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gCAAgC;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwDD,wBAAgB,yBAAyB,CACvC,OAAO,GAAE,gCAAqC,GAC7C,mBAAmB,CAErB"}

package/dist/t0-transport/substrate.svelte.js

@@ -20,15 +20,21 @@ class SubstrateConnectionImpl {
             console.warn('[SubstrateConnection] Tauri bridge not available — skipping listeners');
             return;
         }
+        // Register listener FIRST: prevents missing a Connected transition that fires
+        // while invoke() is in-flight (the race that caused the persistent OFFLINE overlay).
+        this.unlisten = await listen(this.options.stateEvent ?? 'substrate:state', (event) => {
+            this.state = event.payload;
+        });
         try {
             this.state = await invoke(this.options.getStateCommand ?? 'substrate_get_state');
         }
         catch (error) {
-            this.state = { status: 'failed', reason: error instanceof Error ? error.message : 'Unable to read substrate state' };
+            // A failed *read* of supervisor state is not a connection failure — don't
+            // paint the degraded overlay on it. Stay non-degraded (`starting`) and let
+            // the `substrate:state` listener deliver the real state.
+            console.warn('[SubstrateConnection] substrate_get_state read failed; awaiting events', error);
+            this.state = { status: 'starting' };
         }
-        this.unlisten = await listen(this.options.stateEvent ?? 'substrate:state', (event) => {
-            this.state = event.payload;
-        });
     }
     async retry() {
         this.state = { status: 'reconnecting', attempt: 0 };

package/dist/u0-primitives/LockIndicator.svelte

@@ -122,7 +122,6 @@
   .lock-indicator {
     position: relative;
     background: var(--color-bg-panel, #181c20);
-    border-radius: var(--radius-md, 4px);
     overflow: hidden;
   }
 
@@ -151,7 +150,7 @@
   .lock-avatar {
     width: 28px;
     height: 28px;
-    border-radius: var(--radius-full, 9999px);
+    border-radius: var(--radius-full); /* avatar — intentionally round */
     flex-shrink: 0;
   }
 
@@ -186,20 +185,23 @@
   }
 
   .lock-request-btn {
-    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
-    background: var(--color-accent-subtle, var(--color-accent-muted));
-    color: var(--color-accent, var(--color-accent));
-    border: 1px solid var(--color-accent, var(--color-accent));
-    border-radius: var(--radius-sm, 2px);
-    font-size: var(--text-xs, 0.75rem);
+    padding: 3px 8px;
+    background: var(--color-accent-subtle);
+    color: var(--color-accent);
+    border: 1px solid var(--color-accent);
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 10px);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background var(--transition-fast) linear, color var(--transition-fast) linear;
     flex-shrink: 0;
   }
 
+  /* Hover fill justified: confirms destructive intent (same logic as toggle thumb) */
   .lock-request-btn:hover {
     background: var(--color-accent);
-    color: var(--color-text-inverse);
+    color: var(--color-bg-app);
   }
 
   .lock-bar {
@@ -214,10 +216,10 @@
   .lock-spinner {
     width: 16px;
     height: 16px;
-    border: 2px solid var(--color-accent, var(--color-accent));
-    border-top-color: transparent;
-    border-radius: var(--radius-full, 9999px);
-    animation: spin 1s linear infinite;
+    border: 1.5px solid var(--border-default);
+    border-top-color: var(--color-accent);
+    border-right-color: var(--color-accent);
+    animation: spin 0.7s linear infinite;
   }
 
   @keyframes spin {

package/dist/u0-primitives/VerticalToolbar.svelte

@@ -112,14 +112,14 @@
     align-items: center;
     justify-content: center;
     width: 36px;
-    height: 36px;
+    height: var(--ui-control-h, 36px);
     padding: 0;
     background: transparent;
     border: 1px solid transparent;
-    border-radius: var(--radius-md, 4px);
+    border-radius: 0;
     color: var(--color-text-muted, #6b6558);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: color var(--transition-fast) linear, background var(--transition-fast) linear;
   }
 
   .toolbar-item:hover:not(:disabled) {
@@ -138,16 +138,15 @@
     border-color: var(--color-accent-muted, var(--color-accent-muted));
   }
 
+  /* Active live-edge on the left — accent as functional state indicator */
   .toolbar-item.active::before {
     content: '';
     position: absolute;
     left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 3px;
-    height: 20px;
-    background: var(--color-accent, var(--color-accent));
-    border-radius: 0 2px 2px 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: var(--color-accent);
   }
 
   .toolbar-item:disabled {
@@ -168,34 +167,38 @@
     height: 100%;
   }
 
+  /* Badge fill justified: count is a functional readout (unread count), not decoration */
   .toolbar-badge {
     position: absolute;
     top: 2px;
     right: 2px;
     min-width: 14px;
     height: 14px;
-    padding: 0 4px;
-    background: var(--color-accent, var(--color-accent));
-    color: var(--color-bg-app, #141414);
-    font-size: 10px;
-    font-weight: 600;
-    border-radius: var(--radius-full, 9999px);
+    padding: 0 3px;
+    background: var(--color-accent);
+    color: var(--color-bg-app, #0a0b0c);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    font-weight: 700;
+    border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-variant-numeric: tabular-nums;
   }
 
   .toolbar-tooltip {
     position: absolute;
-    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
-    background: var(--color-bg-panel-elevated, #2a2a2a);
-    color: var(--color-text-primary, #f2efe9);
-    font-size: var(--text-xs, 0.75rem);
+    padding: 3px 7px;
+    background: var(--color-bg-panel-elevated);
+    color: var(--color-text-primary);
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 10px);
+    letter-spacing: 0.05em;
     white-space: nowrap;
-    border-radius: var(--radius-md, 4px);
+    border: 1px solid var(--border-default);
     pointer-events: none;
     z-index: 1000;
-    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.3));
   }
 
   .toolbar-tooltip.tooltip-right {

package/dist/u0-primitives/accordion/Accordion.svelte

@@ -126,8 +126,6 @@
 
 <style>
   .accordion {
-    border-radius: var(--radius-md);
-    overflow: hidden;
     border: var(--border-width-thin) solid var(--color-border);
     background: var(--color-bg-app);
   }
@@ -149,10 +147,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space-4);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    min-height: var(--ui-control-h);
     cursor: pointer;
     user-select: none;
-    transition: background-color var(--duration-normal) ease-in-out;
+    transition: background-color var(--transition-fast) linear;
   }
 
   .accordion-header:hover:not(.disabled) {
@@ -163,7 +162,8 @@
 
   /* Focus styles for keyboard navigation */
   .accordion-header:focus-visible {
-    box-shadow: 0 0 0 var(--border-width-default) var(--color-accent);
+    outline: var(--border-width-default) solid var(--color-accent);
+    outline-offset: -2px;
   }
 
   /* Disabled states */
@@ -180,7 +180,8 @@
   }
 
   .accordion-content {
-    padding: var(--space-4, 1rem);
-    padding-top: 0;
+    padding: var(--ui-pad-x);
+    padding-top: var(--ui-pad-y);
+    font-size: var(--ui-font);
   }
 </style>

package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte

@@ -116,7 +116,7 @@
   {:else if name === 'power-plant'}
     <!-- Power plant silhouette with cooling tower -->
     <defs>
-      <linearGradient id="brassGrad-{size}" x1="0%" y1="0%" x2="100%" y2="100%">
+      <linearGradient id="accentGrad-{size}" x1="0%" y1="0%" x2="100%" y2="100%">
         <stop offset="0%" stop-color="var(--color-accent-hover)"/>
         <stop offset="50%" stop-color="var(--color-accent)"/>
         <stop offset="100%" stop-color="var(--color-accent-active)"/>
@@ -125,7 +125,7 @@
     
     <!-- Cooling tower -->
     <path d="M8 35 Q4 25 12 15 L14 5 Q20 2 26 5 L28 15 Q36 25 32 35 Z" 
-          fill="url(#brassGrad-{size})" opacity="0.8"/>
+          fill="url(#accentGrad-{size})" opacity="0.8"/>
     
     <!-- Inner detail -->
     <path d="M12 32 Q8 24 15 15 L17 8 Q20 6 23 8 L25 15 Q32 24 28 32" 
@@ -200,7 +200,7 @@
   {:else if name === 'steam-tower'}
     <!-- Minimal steam tower with rising particles -->
     <path d="M12 38 L16 12 L24 12 L28 38 Z" fill="currentColor" opacity="0.3"/>
-    <path d="M14 38 L17 14 L23 14 L26 38 Z" fill="url(#brassGrad-{size})" opacity="0.7"/>
+    <path d="M14 38 L17 14 L23 14 L26 38 Z" fill="url(#accentGrad-{size})" opacity="0.7"/>
     
     {#if animation === 'steam'}
       <!-- Rising particles -->

package/dist/u0-primitives/animated-icon/AnimatedIcon.test.js

@@ -0,0 +1,82 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import AnimatedIcon from './AnimatedIcon.svelte';
+describe('AnimatedIcon', () => {
+    afterEach(() => cleanup());
+    it('renders an SVG element', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node' });
+        expect(container.querySelector('svg')).not.toBeNull();
+    });
+    it('applies the default size (40px)', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node' });
+        const svg = container.querySelector('svg');
+        expect(svg.getAttribute('style')).toContain('width: 40px');
+        expect(svg.getAttribute('style')).toContain('height: 40px');
+    });
+    it('applies a custom size', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node', size: 64 });
+        const svg = container.querySelector('svg');
+        expect(svg.getAttribute('style')).toContain('width: 64px');
+        expect(svg.getAttribute('style')).toContain('height: 64px');
+    });
+    it('applies a custom color', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node', color: 'red' });
+        expect(container.querySelector('svg').getAttribute('style')).toContain('color: red');
+    });
+    it('renders power-node icon paths (core circle)', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('circle').length).toBeGreaterThanOrEqual(3);
+    });
+    it('renders activity icon paths (rect bars)', () => {
+        const { container } = render(AnimatedIcon, { name: 'activity' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('rect').length).toBe(4);
+    });
+    it('renders connection icon paths (two circles and a line)', () => {
+        const { container } = render(AnimatedIcon, { name: 'connection' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('circle').length).toBeGreaterThanOrEqual(3);
+        expect(svg.querySelectorAll('line').length).toBe(1);
+    });
+    it('contains animate elements for animated icons', () => {
+        const { container } = render(AnimatedIcon, { name: 'activity' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('animate').length).toBeGreaterThan(0);
+    });
+    it('contains animateTransform for orbit animation on power-node', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node', animation: 'orbit' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('animateTransform').length).toBe(1);
+    });
+    it('render pulse animation markup on power-node', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node', animation: 'pulse' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('animate').length).toBeGreaterThanOrEqual(2);
+    });
+    it('doubles speed halves the dur attribute', () => {
+        const { container: c1 } = render(AnimatedIcon, { name: 'power-node', animation: 'pulse', speed: 1 });
+        const animates1 = c1.querySelectorAll('animate');
+        const dur1 = animates1[0].getAttribute('dur');
+        cleanup();
+        const { container: c2 } = render(AnimatedIcon, { name: 'power-node', animation: 'pulse', speed: 2 });
+        const animates2 = c2.querySelectorAll('animate');
+        const dur2 = animates2[0].getAttribute('dur');
+        expect(dur1).toBe('2000ms');
+        expect(dur2).toBe('1000ms');
+    });
+    it('has aria-hidden attribute on SVG', () => {
+        const { container } = render(AnimatedIcon, { name: 'power-node' });
+        expect(container.querySelector('svg').getAttribute('aria-hidden')).toBe('true');
+    });
+    it('renders energy-pulse icon correctly', () => {
+        const { container } = render(AnimatedIcon, { name: 'energy-pulse' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('circle').length).toBeGreaterThanOrEqual(4);
+    });
+    it('renders status-ring icon correctly', () => {
+        const { container } = render(AnimatedIcon, { name: 'status-ring' });
+        const svg = container.querySelector('svg');
+        expect(svg.querySelectorAll('path').length).toBe(2);
+    });
+});

package/dist/u0-primitives/avatar/Avatar.svelte

@@ -74,11 +74,10 @@
     position: relative;
     width: 100%;
     height: 100%;
-    border-radius: var(--radius-full);
+    border-radius: var(--radius-full); /* circle — intentional, avatars are always round */
     overflow: hidden;
     background: var(--color-bg-panel-elevated);
     border: 1px solid var(--border-subtle);
-    box-shadow: var(--shadow-sm);
   }
 
   .ds-avatar-image {
@@ -93,7 +92,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(135deg, var(--color-bg-panel-elevated), var(--color-bg-panel));
+    background: var(--color-bg-panel-elevated);
     color: var(--color-text-secondary);
   }
 
@@ -142,36 +141,37 @@
     z-index: 10;
   }
 
-   .status-online { background-color: var(--color-online); box-shadow: 0 0 6px var(--color-cyan-glow); }
+   .status-online { background-color: var(--color-online); }
   .status-away { background-color: var(--color-away); }
   .status-busy { background-color: var(--color-busy); }
   .status-offline { background-color: var(--color-offline); }
   
-  .status-typing { 
+  /* Typing: blinking dots — mechanical, no bounce, no glow */
+  .status-typing {
     background-color: var(--color-typing);
     display: flex;
     align-items: center;
     justify-content: space-evenly;
     width: auto;
-    padding: 0 4px;
+    padding: 0 3px;
     min-width: 16px;
     border-radius: var(--radius-full);
-    box-shadow: var(--shadow-glow);
   }
 
   .typing-dot {
     width: 3px;
     height: 3px;
-     background-color: var(--color-text-inverse);
+    background-color: var(--color-text-inverse);
     border-radius: var(--radius-full);
-    animation: typing-bounce 1.4s infinite ease-in-out both;
+    animation: typing-blink 1.2s step-end infinite;
   }
 
-  .typing-dot:nth-child(1) { animation-delay: -0.32s; }
-  .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+  .typing-dot:nth-child(1) { animation-delay: 0s; }
+  .typing-dot:nth-child(2) { animation-delay: 0.4s; }
+  .typing-dot:nth-child(3) { animation-delay: 0.8s; }
 
-  @keyframes typing-bounce {
-    0%, 80%, 100% { transform: scale(0); }
-    40% { transform: scale(1); }
+  @keyframes typing-blink {
+    0%, 100% { opacity: 0.2; }
+    50% { opacity: 1; }
   }
 </style>

package/dist/u0-primitives/avatar/Avatar.test.js

@@ -0,0 +1,81 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import Avatar from './Avatar.svelte';
+describe('Avatar', () => {
+    afterEach(() => cleanup());
+    it('renders the ds-avatar-wrapper root element', () => {
+        const { container } = render(Avatar);
+        expect(container.querySelector('.ds-avatar-wrapper')).not.toBeNull();
+    });
+    it('applies the size-sm class', () => {
+        const { container } = render(Avatar, { size: 'sm' });
+        expect(container.querySelector('.size-sm')).not.toBeNull();
+    });
+    it('applies the size-md class by default', () => {
+        const { container } = render(Avatar);
+        expect(container.querySelector('.size-md')).not.toBeNull();
+    });
+    it('applies the size-lg class', () => {
+        const { container } = render(Avatar, { size: 'lg' });
+        expect(container.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('applies the size-xl class', () => {
+        const { container } = render(Avatar, { size: 'xl' });
+        expect(container.querySelector('.size-xl')).not.toBeNull();
+    });
+    it('renders an image when src is provided', () => {
+        const { container } = render(Avatar, { src: 'https://example.com/photo.png', name: 'Jane' });
+        const img = container.querySelector('.ds-avatar-image');
+        expect(img).not.toBeNull();
+        expect(img.getAttribute('src')).toBe('https://example.com/photo.png');
+    });
+    it('renders initials from a two-word name', () => {
+        const { container } = render(Avatar, { name: 'Jane Doe' });
+        expect(container.querySelector('.ds-avatar-initials').textContent).toBe('JD');
+    });
+    it('renders initials from a single-word name', () => {
+        const { container } = render(Avatar, { name: 'Alice' });
+        expect(container.querySelector('.ds-avatar-initials').textContent).toBe('A');
+    });
+    it('renders a question mark when name is empty', () => {
+        const { container } = render(Avatar);
+        expect(container.querySelector('.ds-avatar-initials').textContent).toBe('?');
+    });
+    it('does not render a status dot when status is null', () => {
+        const { container } = render(Avatar);
+        expect(container.querySelector('.ds-avatar-status')).toBeNull();
+    });
+    it('renders a status dot with the online class', () => {
+        const { container } = render(Avatar, { status: 'online' });
+        const status = container.querySelector('.ds-avatar-status');
+        expect(status).not.toBeNull();
+        expect(status.classList.contains('status-online')).toBe(true);
+    });
+    it('renders a status dot with the away class', () => {
+        const { container } = render(Avatar, { status: 'away' });
+        expect(container.querySelector('.status-away')).not.toBeNull();
+    });
+    it('renders a status dot with the busy class', () => {
+        const { container } = render(Avatar, { status: 'busy' });
+        expect(container.querySelector('.status-busy')).not.toBeNull();
+    });
+    it('renders a status dot with the offline class', () => {
+        const { container } = render(Avatar, { status: 'offline' });
+        expect(container.querySelector('.status-offline')).not.toBeNull();
+    });
+    it('renders typing dots when status is typing', () => {
+        const { container } = render(Avatar, { status: 'typing' });
+        expect(container.querySelectorAll('.typing-dot').length).toBe(3);
+    });
+    it('switches to initials fallback on image error', async () => {
+        const { container } = render(Avatar, {
+            src: 'https://example.com/broken.png',
+            name: 'Test User',
+        });
+        const img = container.querySelector('.ds-avatar-image');
+        expect(img).not.toBeNull();
+        await fireEvent.error(img);
+        expect(container.querySelector('.ds-avatar-initials')).not.toBeNull();
+        expect(container.querySelector('.ds-avatar-initials').textContent).toBe('TU');
+    });
+});

package/dist/u0-primitives/badge/Badge.svelte

@@ -36,11 +36,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
     font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
     white-space: nowrap;
-    border-radius: var(--radius-full);
-    transition: all var(--transition-fast);
+    border-radius: 0;
+    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
   }
 
   /* --- Variants --- */
@@ -88,7 +90,7 @@
 
   /* Count (Solid background, white/dark text) */
   .variant-count {
-    box-shadow: var(--shadow-sm);
+    font-variant-numeric: tabular-nums;
   }
 
   .variant-count.color-accent { background: var(--color-accent); color: var(--color-text-inverse); }

package/dist/u0-primitives/badge/ValidityBadge.svelte

@@ -53,9 +53,10 @@
     font-family: var(--font-mono);
     font-weight: 700;
     white-space: nowrap;
-    border-radius: var(--radius-full);
-    transition: all var(--transition-fast);
+    border-radius: 0;
+    transition: border-color var(--transition-fast) linear, background var(--transition-fast) linear;
     gap: 0.125rem;
+    font-variant-numeric: tabular-nums;
   }
 
   /* High Validity (900-1000) */
@@ -125,29 +126,5 @@
     margin-left: 0.25rem;
   }
 
-  /* Hover effect */
-  .ds-validity-badge:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-sm);
-  }
-
-  .validity-color-high:hover {
-    background: var(--validity-high);
-    color: #fff;
-  }
-
-  .validity-color-medium:hover {
-    background: var(--validity-medium);
-    color: #fff;
-  }
-
-  .validity-color-low:hover {
-    background: var(--validity-low);
-    color: #fff;
-  }
-
-  .validity-color-critical:hover {
-    background: var(--validity-critical);
-    color: #fff;
-  }
+  /* No lift/shadow hover — reads as data, not interactive decoration */
 </style>