@stephen-netu/design-system 0.2.1 → 0.5.1

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

@@ -6,6 +6,7 @@
    * 
    * @package @kos/design-system/u0-primitives
    */
+  import { untrack } from 'svelte';
   import type { Snippet } from 'svelte';
 
   interface Panel {
@@ -40,7 +41,7 @@
     onOpenChange,
   }: Props = $props();
 
-  let internalOpenIds = $state<string[]>([...defaultOpen]);
+  let internalOpenIds = $state<string[]>(untrack(() => [...defaultOpen]));
 
   function setInternalOpenIds(fn: (prev: string[]) => string[]) {
     internalOpenIds = fn(internalOpenIds);
@@ -125,14 +126,12 @@
 
 <style>
   .accordion {
-    border-radius: var(--radius-md, 0.25rem);
-    overflow: hidden;
-    border: 1px solid var(--color-border, var(--border-default, #3a3630));
-    background: var(--color-bg-app, #0b0d0f);
+    border: var(--border-width-thin) solid var(--color-border);
+    background: var(--color-bg-app);
   }
 
   .accordion-item {
-    border-bottom: 1px solid var(--color-border, var(--border-default, #3a3630));
+    border-bottom: var(--border-width-thin) solid var(--color-border);
   }
 
   .accordion-item:last-child {
@@ -148,21 +147,23 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space-4, 1rem);
+    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, 200ms) ease-in-out;
+    transition: background-color var(--transition-fast) linear;
   }
 
   .accordion-header:hover:not(.disabled) {
-    background: var(--color-bg-secondary, var(--color-bg-canvas, #121518));
+    background: var(--color-bg-secondary);
   }
 
   /* Removed duplicate focus-visible — the box-shadow variant below supersedes. */
 
   /* Focus styles for keyboard navigation */
   .accordion-header:focus-visible {
-    box-shadow: 0 0 0 2px var(--color-accent, var(--color-accent));
+    outline: var(--border-width-default) solid var(--color-accent);
+    outline-offset: -2px;
   }
 
   /* Disabled states */
@@ -179,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/accordion/Accordion.svelte.d.ts

@@ -1,10 +1,3 @@
-/**
-   * Accordion Component
-   *
-   * A vertically stacked set of interactive headings that each reveal a panel of associated content.
-   *
-   * @package @kos/design-system/u0-primitives
-   */
 import type { Snippet } from 'svelte';
 interface Panel {
     /** Unique identifier for the panel */

package/dist/u0-primitives/accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AAyFH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AA0FH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/u0-primitives/accordion/Accordion.test.js

@@ -2,9 +2,9 @@ import { afterEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render, fireEvent } from '@testing-library/svelte';
 import Accordion from './Accordion.svelte';
 const samplePanels = [
-    { id: 'p1', title: 'First', content: () => 'Content 1' },
-    { id: 'p2', title: 'Second', content: () => 'Content 2' },
-    { id: 'p3', title: 'Third', content: () => 'Content 3' },
+    { id: 'p1', title: 'First', content: (() => '') },
+    { id: 'p2', title: 'Second', content: (() => '') },
+    { id: 'p3', title: 'Third', content: (() => '') },
 ];
 describe('Accordion', () => {
     afterEach(() => cleanup());
@@ -54,8 +54,8 @@ describe('Accordion', () => {
     });
     it('does not open disabled panels', async () => {
         const panels = [
-            { id: 'p1', title: 'Enabled', content: () => 'E' },
-            { id: 'p2', title: 'Disabled', content: () => 'D', disabled: true },
+            { id: 'p1', title: 'Enabled', content: (() => '') },
+            { id: 'p2', title: 'Disabled', content: (() => ''), disabled: true },
         ];
         const { container } = render(Accordion, { panels });
         const buttons = container.querySelectorAll('[role="button"]');

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/Badge.test.js

@@ -4,30 +4,30 @@ import Badge from './Badge.svelte';
 describe('Badge', () => {
     afterEach(() => cleanup());
     it('renders with default variant', () => {
-        const { container } = render(Badge, { props: { children: () => { } } });
+        const { container } = render(Badge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-badge')).not.toBeNull();
         expect(container.querySelector('.variant-status')).not.toBeNull();
     });
     it('renders with info variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'info', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'info', children: (() => '') } });
         expect(container.querySelector('.color-info')).not.toBeNull();
     });
     it('renders with success variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'success', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'success', children: (() => '') } });
         expect(container.querySelector('.color-success')).not.toBeNull();
     });
     it('renders with warning variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'warning', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'warning', children: (() => '') } });
         expect(container.querySelector('.color-warning')).not.toBeNull();
     });
     it('renders with error variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'error', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'error', children: (() => '') } });
         expect(container.querySelector('.color-error')).not.toBeNull();
     });
     it('applies size classes', () => {
-        const { container: sm } = render(Badge, { props: { size: 'sm', children: () => { } } });
+        const { container: sm } = render(Badge, { props: { size: 'sm', children: (() => '') } });
         expect(sm.querySelector('.size-sm')).not.toBeNull();
-        const { container: lg } = render(Badge, { props: { size: 'lg', children: () => { } } });
+        const { container: lg } = render(Badge, { props: { size: 'lg', children: (() => '') } });
         expect(lg.querySelector('.size-lg')).not.toBeNull();
     });
     it('renders dot variant without content span', () => {
@@ -36,15 +36,15 @@ describe('Badge', () => {
         expect(container.querySelector('.ds-badge-content')).toBeNull();
     });
     it('renders outline variant', () => {
-        const { container } = render(Badge, { props: { variant: 'outline', children: () => { } } });
+        const { container } = render(Badge, { props: { variant: 'outline', children: (() => '') } });
         expect(container.querySelector('.variant-outline')).not.toBeNull();
     });
     it('renders children text', () => {
-        const { container } = render(Badge, { props: { children: () => 'Hello' } });
+        const { container } = render(Badge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-badge-content')).not.toBeNull();
     });
     it('applies custom class', () => {
-        const { container } = render(Badge, { props: { class: 'custom-badge', children: () => { } } });
+        const { container } = render(Badge, { props: { class: 'custom-badge', children: (() => '') } });
         expect(container.querySelector('.custom-badge')).not.toBeNull();
     });
 });

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>

package/dist/u0-primitives/badge/ValidityBadge.test.js

@@ -4,23 +4,23 @@ import ValidityBadge from './ValidityBadge.svelte';
 describe('ValidityBadge', () => {
     afterEach(() => cleanup());
     it('renders with default score', () => {
-        const { container } = render(ValidityBadge, { props: { children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-validity-badge')).not.toBeNull();
     });
     it('applies high validity class for score >= 900', () => {
-        const { container } = render(ValidityBadge, { props: { score: 950, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 950, children: (() => '') } });
         expect(container.querySelector('.validity-color-high')).not.toBeNull();
     });
     it('applies medium validity class for score 700-899', () => {
-        const { container } = render(ValidityBadge, { props: { score: 750, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 750, children: (() => '') } });
         expect(container.querySelector('.validity-color-medium')).not.toBeNull();
     });
     it('applies low validity class for score 500-699', () => {
-        const { container } = render(ValidityBadge, { props: { score: 600, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 600, children: (() => '') } });
         expect(container.querySelector('.validity-color-low')).not.toBeNull();
     });
     it('applies critical validity class for score < 500', () => {
-        const { container } = render(ValidityBadge, { props: { score: 300, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 300, children: (() => '') } });
         expect(container.querySelector('.validity-color-critical')).not.toBeNull();
     });
     it('renders score and total text', () => {
@@ -31,9 +31,9 @@ describe('ValidityBadge', () => {
         expect(totalEl).not.toBeNull();
     });
     it('applies size classes', () => {
-        const { container: sm } = render(ValidityBadge, { props: { size: 'sm', children: () => { } } });
+        const { container: sm } = render(ValidityBadge, { props: { size: 'sm', children: (() => '') } });
         expect(sm.querySelector('.size-sm')).not.toBeNull();
-        const { container: lg } = render(ValidityBadge, { props: { size: 'lg', children: () => { } } });
+        const { container: lg } = render(ValidityBadge, { props: { size: 'lg', children: (() => '') } });
         expect(lg.querySelector('.size-lg')).not.toBeNull();
     });
     it('shows label when showLabel is true', () => {
@@ -45,12 +45,12 @@ describe('ValidityBadge', () => {
         expect(container.querySelector('.ds-validity-label')).toBeNull();
     });
     it('sets aria-label from validity label', () => {
-        const { container } = render(ValidityBadge, { props: { score: 950, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 950, children: (() => '') } });
         const badge = container.querySelector('.ds-validity-badge');
         expect(badge.getAttribute('aria-label')).toBe('High Validity');
     });
     it('renders custom children when provided', () => {
-        const { container } = render(ValidityBadge, { props: { score: 500, children: () => 'custom' } });
+        const { container } = render(ValidityBadge, { props: { score: 500, children: (() => '') } });
         expect(container.querySelector('.ds-validity-content')).not.toBeNull();
         expect(container.querySelector('.ds-validity-score')).toBeNull();
     });