@stephen-netu/design-system 0.1.0 → 0.2.1

package/{src → dist}/u0-primitives/animated-icon/AnimatedIcon.svelte

@@ -59,7 +59,7 @@
     
     <!-- Core -->
     <circle cx="20" cy="20" r="8" fill="currentColor"/>
-    <circle cx="17" cy="17" r="3" fill="white" opacity="0.3"/>
+     <circle cx="17" cy="17" r="3" fill="var(--color-text-inverse)" opacity="0.3"/>
     
   {:else if name === 'activity'}
     <!-- Activity bars -->
@@ -91,7 +91,7 @@
     </line>
     
     <!-- Data packet -->
-    <circle cx="12" cy="20" r="2" fill="white">
+     <circle cx="12" cy="20" r="2" fill="var(--color-text-inverse)">
       <animate attributeName="cx" values="12;28;12" dur={calcDuration(1500)} repeatCount="indefinite"/>
     </circle>
     
@@ -117,9 +117,9 @@
     <!-- Power plant silhouette with cooling tower -->
     <defs>
       <linearGradient id="brassGrad-{size}" x1="0%" y1="0%" x2="100%" y2="100%">
-        <stop offset="0%" stop-color="#d4956a"/>
-        <stop offset="50%" stop-color="#b87333"/>
-        <stop offset="100%" stop-color="#8a5626"/>
+        <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)"/>
       </linearGradient>
     </defs>
     
@@ -133,7 +133,7 @@
     
     {#if animation === 'steam'}
       <!-- Steam plumes -->
-      <g stroke="#d4956a" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6">
+      <g stroke="var(--color-accent-hover)" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6">
         <path d="M14 5 Q10 -5 15 -12">
           <animate attributeName="d" 
                    values="M14 5 Q10 -5 15 -12;M14 5 Q20 -5 10 -12;M14 5 Q10 -5 15 -12" 
@@ -204,7 +204,7 @@
     
     {#if animation === 'steam'}
       <!-- Rising particles -->
-      <g fill="#d4956a">
+      <g fill="var(--color-accent-hover)">
         <circle cx="17" cy="10" r="1.5" opacity="0">
           <animate attributeName="cy" values="12;-8" dur={calcDuration(2500)} repeatCount="indefinite"/>
           <animate attributeName="opacity" values="0;0.8;0" dur={calcDuration(2500)} repeatCount="indefinite"/>

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

@@ -0,0 +1,22 @@
+/**
+ * AnimatedIcon - U0 Primitive
+ *
+ * SMIL-based animated SVG icons. Zero JS overhead, GPU-accelerated.
+ * Aligns with x0-enchanted-blocks "enchanted" philosophy via declarative animation.
+ *
+ * @package @kos/design-system/u0-primitives
+ * @adr 2026-04-17-smil-animated-icons
+ */
+type AnimationType = 'pulse' | 'orbit' | 'wave' | 'breathe' | 'spin' | 'steam' | 'energy-arcs';
+type IconName = 'power-node' | 'activity' | 'connection' | 'status-ring' | 'power-plant' | 'orbital-ring' | 'steam-tower' | 'energy-pulse';
+interface Props {
+    name: IconName;
+    size?: number;
+    color?: string;
+    animation?: AnimationType;
+    speed?: number;
+}
+declare const AnimatedIcon: import("svelte").Component<Props, {}, "">;
+type AnimatedIcon = ReturnType<typeof AnimatedIcon>;
+export default AnimatedIcon;
+//# sourceMappingURL=AnimatedIcon.svelte.d.ts.map

package/dist/u0-primitives/animated-icon/AnimatedIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/animated-icon/AnimatedIcon.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;GAQG;AAEH,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,aAAa,CAAC;AAC/F,KAAK,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa,GAAG,cAAc,GAAG,aAAa,GAAG,cAAc,CAAC;AAE3I,UAAU,KAAK;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6OH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/u0-primitives/animated-icon/README.md

@@ -0,0 +1,70 @@
+# AnimatedIcon
+
+SMIL-based animated SVG icons. Zero JavaScript overhead, GPU-accelerated via browser-native SVG animation.
+
+## Philosophy
+
+Aligns with LEAP's "enchanted" component philosophy from x0-enchanted-blocks:
+- **Declarative**: Animations defined in markup, not JavaScript
+- **Performant**: SMIL runs on the browser's compositor thread
+- **Accessible**: Respects `prefers-reduced-motion` automatically
+
+## Usage
+
+```svelte
+<script>
+  import { AnimatedIcon } from '@kos/design-system/u0-primitives/animated-icon';
+</script>
+
+<AnimatedIcon name="power-node" animation="pulse" size={40} />
+<AnimatedIcon name="activity" animation="wave" speed={0.5} />
+<AnimatedIcon name="connection" color="#27ae60" />
+<AnimatedIcon name="energy-pulse" animation="energy-arcs" />
+```
+
+## Icons
+
+| Name | Description | Animations |
+|------|-------------|------------|
+| `power-node` | Energy/data center node | `pulse`, `orbit` |
+| `activity` | Audio/video activity bars | `wave` (default) |
+| `connection` | Network/data flow | `pulse` (default) |
+| `status-ring` | Loading/progress ring | `spin`, `breathe` |
+| `power-plant` | Power plant silhouette with cooling tower | `steam`, `pulse` |
+| `orbital-ring` | Orbital ring with rotating elements | `pulse` (default) |
+| `steam-tower` | Minimal steam tower with rising particles | `steam` (default) |
+| `energy-pulse` | Energy pulse with radiating arcs | `pulse`, `energy-arcs` |
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `IconName` | required | Icon identifier |
+| `size` | `number` | `40` | ViewBox size (px) |
+| `color` | `string` | `var(--color-accent)` | CSS color value |
+| `animation` | `AnimationType` | `'pulse'` | Animation style |
+| `speed` | `number` | `1` | Multiplier (0.5 = slower, 2 = faster) |
+
+## Animation Types
+
+| Animation | Icons | Description |
+|-----------|-------|-------------|
+| `pulse` | power-node, connection, status-ring, power-plant, orbital-ring, steam-tower, energy-pulse | Pulsing/radiating opacity or size |
+| `orbit` | power-node | Orbiting dot around center |
+| `wave` | activity | Bar height oscillation |
+| `spin` | status-ring | Rotating segments |
+| `breathe` | status-ring | Opacity fade in/out |
+| `steam` | power-plant, steam-tower | Rising steam/particle plumes |
+| `energy-arcs` | energy-pulse | Radiating line arcs in 4 directions |
+
+## Design Tokens
+
+Uses standard LEAP accent colors:
+- `--color-accent` (primary)
+- `--color-accent-hover`
+- `--epistemic-live` (success states)
+- `--epistemic-pending` (warning states)
+
+## Browser Support
+
+SMIL is supported in all modern browsers. For legacy environments, icons degrade gracefully to static SVG.

package/dist/u0-primitives/animated-icon/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AnimatedIcon } from './AnimatedIcon.svelte';
+export type AnimatedIconName = 'power-node' | 'activity' | 'connection' | 'status-ring' | 'power-plant' | 'orbital-ring' | 'steam-tower' | 'energy-pulse';
+export type AnimationType = 'pulse' | 'orbit' | 'wave' | 'breathe' | 'spin' | 'steam' | 'energy-arcs';
+export declare const ANIMATION_SPEEDS: {
+    readonly slow: 0.5;
+    readonly normal: 1;
+    readonly fast: 2;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/animated-icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/animated-icon/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGhE,MAAM,MAAM,gBAAgB,GACxB,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,aAAa,GACb,aAAa,GACb,cAAc,GACd,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,OAAO,GACP,aAAa,CAAC;AAGlB,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC"}

package/dist/u0-primitives/animated-icon/index.js

@@ -0,0 +1,9 @@
+// AnimatedIcon - SMIL-based animated SVG icons
+// Zero JS overhead, GPU-accelerated declarative animations
+export { default as AnimatedIcon } from './AnimatedIcon.svelte';
+// Animation duration presets (ms)
+export const ANIMATION_SPEEDS = {
+    slow: 0.5, // 2x duration
+    normal: 1, // base duration
+    fast: 2, // 0.5x duration
+};

package/{src → dist}/u0-primitives/avatar/Avatar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  export interface Props {
     src?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -142,7 +142,7 @@
     z-index: 10;
   }
 
-  .status-online { background-color: var(--color-online); box-shadow: 0 0 6px rgba(74, 222, 128, 0.4); }
+   .status-online { background-color: var(--color-online); box-shadow: 0 0 6px var(--color-cyan-glow); }
   .status-away { background-color: var(--color-away); }
   .status-busy { background-color: var(--color-busy); }
   .status-offline { background-color: var(--color-offline); }
@@ -162,7 +162,7 @@
   .typing-dot {
     width: 3px;
     height: 3px;
-    background-color: #111;
+     background-color: var(--color-text-inverse);
     border-radius: var(--radius-full);
     animation: typing-bounce 1.4s infinite ease-in-out both;
   }

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

@@ -0,0 +1,11 @@
+export interface Props {
+    src?: string;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    status?: 'online' | 'offline' | 'away' | 'busy' | 'typing' | null;
+    class?: string;
+}
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;
+//# sourceMappingURL=Avatar.svelte.d.ts.map

package/dist/u0-primitives/avatar/Avatar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAME,MAAM,WAAW,KAAK;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuDH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/u0-primitives/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.svelte';
+export type { Props } from './Avatar.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/u0-primitives/avatar/index.js

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar.svelte';

package/{src → dist}/u0-primitives/badge/Badge.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  export interface Props {
     variant?: 'status' | 'count' | 'dot' | 'outline';
     color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
     size?: 'sm' | 'md' | 'lg';
@@ -18,7 +18,7 @@
   }: Props = $props();
 </script>
 
-<div 
+<span 
   class="ds-badge variant-{variant} color-{color} size-{size} {className}"
   role="status"
 >
@@ -29,7 +29,7 @@
       {@render children()}
     </span>
   {/if}
-</div>
+</span>
 
 <style>
   .ds-badge {
@@ -53,7 +53,7 @@
   .variant-status.color-accent {
     background: var(--color-accent-subtle);
     color: var(--color-accent-hover);
-    border-color: rgba(184, 115, 51, 0.2);
+    border-color: var(--color-accent-muted);
   }
 
   .variant-status.color-success {
@@ -88,15 +88,15 @@
 
   /* Count (Solid background, white/dark text) */
   .variant-count {
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    box-shadow: var(--shadow-sm);
   }
 
-  .variant-count.color-accent { background: var(--color-accent); color: #111; }
-  .variant-count.color-success { background: var(--color-success); color: #fff; }
-  .variant-count.color-warning { background: var(--color-warning); color: #111; }
-  .variant-count.color-error { background: var(--color-error); color: #fff; }
-  .variant-count.color-info { background: var(--color-info); color: #fff; }
-  .variant-count.color-neutral { background: var(--color-text-tertiary); color: #fff; }
+  .variant-count.color-accent { background: var(--color-accent); color: var(--color-text-inverse); }
+  .variant-count.color-success { background: var(--color-success); color: var(--color-text-inverse); }
+  .variant-count.color-warning { background: var(--color-warning); color: var(--color-text-inverse); }
+  .variant-count.color-error { background: var(--color-error); color: var(--color-text-inverse); }
+  .variant-count.color-info { background: var(--color-info); color: var(--color-text-inverse); }
+  .variant-count.color-neutral { background: var(--color-text-tertiary); color: var(--color-text-inverse); }
 
   /* Outline */
   .variant-outline {

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    variant?: 'status' | 'count' | 'dot' | 'outline';
+    color?: 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

package/dist/u0-primitives/badge/Badge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA4BH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,50 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import Badge from './Badge.svelte';
+describe('Badge', () => {
+    afterEach(() => cleanup());
+    it('renders with default variant', () => {
+        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: () => { } } });
+        expect(container.querySelector('.color-info')).not.toBeNull();
+    });
+    it('renders with success variant color class', () => {
+        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: () => { } } });
+        expect(container.querySelector('.color-warning')).not.toBeNull();
+    });
+    it('renders with error variant color class', () => {
+        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: () => { } } });
+        expect(sm.querySelector('.size-sm')).not.toBeNull();
+        const { container: lg } = render(Badge, { props: { size: 'lg', children: () => { } } });
+        expect(lg.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('renders dot variant without content span', () => {
+        const { container } = render(Badge, { props: { variant: 'dot' } });
+        expect(container.querySelector('.variant-dot')).not.toBeNull();
+        expect(container.querySelector('.ds-badge-content')).toBeNull();
+    });
+    it('renders outline variant', () => {
+        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' } });
+        expect(container.querySelector('.ds-badge-content')).not.toBeNull();
+    });
+    it('applies custom class', () => {
+        const { container } = render(Badge, { props: { class: 'custom-badge', children: () => { } } });
+        expect(container.querySelector('.custom-badge')).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getValidityColor, getValidityLabel } from './validity-utils';
+
+  interface Props {
+    score?: number;
+    total?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    score = 0,
+    total = 1000,
+    size = 'md',
+    showLabel = false,
+    class: className = '',
+    children
+  }: Props = $props();
+
+  const validityColor = $derived(getValidityColor(score));
+  const validityLabel = $derived(getValidityLabel(score));
+  const percentage = $derived(total > 0 ? Math.round((score / total) * 100) : 0);
+</script>
+
+<div
+  class="ds-validity-badge size-{size} validity-color-{validityColor} {className}"
+  role="status"
+  aria-label={validityLabel}
+  title={`${validityLabel}: ${score}/${total} (${percentage}%)`}
+>
+  {#if children}
+    <span class="ds-validity-content">
+      {@render children()}
+    </span>
+  {:else}
+    <span class="ds-validity-score">{score}</span>
+    <span class="ds-validity-divider">/</span>
+    <span class="ds-validity-total">{total}</span>
+    {#if showLabel}
+      <span class="ds-validity-label">{validityLabel}</span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .ds-validity-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--font-mono);
+    font-weight: 700;
+    white-space: nowrap;
+    border-radius: var(--radius-full);
+    transition: all var(--transition-fast);
+    gap: 0.125rem;
+  }
+
+  /* High Validity (900-1000) */
+  .validity-color-high {
+    background: var(--validity-high-bg);
+    color: var(--validity-high);
+    border: 1px solid var(--validity-high-border);
+  }
+
+  /* Medium Validity (700-899) */
+  .validity-color-medium {
+    background: var(--validity-medium-bg);
+    color: var(--validity-medium);
+    border: 1px solid var(--validity-medium-border);
+  }
+
+  /* Low Validity (500-699) */
+  .validity-color-low {
+    background: var(--validity-low-bg);
+    color: var(--validity-low);
+    border: 1px solid var(--validity-low-border);
+  }
+
+  /* Critical Validity (0-499) */
+  .validity-color-critical {
+    background: var(--validity-critical-bg);
+    color: var(--validity-critical);
+    border: 1px solid var(--validity-critical-border);
+  }
+
+  /* Sizes */
+  .size-sm {
+    padding: 0.1rem 0.35rem;
+    font-size: 0.65rem;
+    line-height: 1;
+  }
+
+  .size-md {
+    padding: 0.15rem 0.5rem;
+    font-size: var(--text-xs);
+    line-height: 1.2;
+  }
+
+  .size-lg {
+    padding: 0.25rem 0.75rem;
+    font-size: var(--text-sm);
+    line-height: 1.4;
+  }
+
+  .ds-validity-score {
+    font-weight: 700;
+  }
+
+  .ds-validity-divider {
+    opacity: 0.5;
+    font-weight: 400;
+  }
+
+  .ds-validity-total {
+    font-weight: 400;
+    opacity: 0.7;
+  }
+
+  .ds-validity-label {
+    font-weight: 400;
+    opacity: 0.8;
+    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;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    score?: number;
+    total?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const ValidityBadge: import("svelte").Component<Props, {}, "">;
+type ValidityBadge = ReturnType<typeof ValidityBadge>;
+export default ValidityBadge;
+//# sourceMappingURL=ValidityBadge.svelte.d.ts.map

package/dist/u0-primitives/badge/ValidityBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidityBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/badge/ValidityBadge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,57 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import ValidityBadge from './ValidityBadge.svelte';
+describe('ValidityBadge', () => {
+    afterEach(() => cleanup());
+    it('renders with default score', () => {
+        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: () => { } } });
+        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: () => { } } });
+        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: () => { } } });
+        expect(container.querySelector('.validity-color-low')).not.toBeNull();
+    });
+    it('applies critical validity class for score < 500', () => {
+        const { container } = render(ValidityBadge, { props: { score: 300, children: () => { } } });
+        expect(container.querySelector('.validity-color-critical')).not.toBeNull();
+    });
+    it('renders score and total text', () => {
+        const { container } = render(ValidityBadge, { props: { score: 800, total: 1000 } });
+        const scoreEl = container.querySelector('.ds-validity-score');
+        const totalEl = container.querySelector('.ds-validity-total');
+        expect(scoreEl).not.toBeNull();
+        expect(totalEl).not.toBeNull();
+    });
+    it('applies size classes', () => {
+        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: () => { } } });
+        expect(lg.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('shows label when showLabel is true', () => {
+        const { container } = render(ValidityBadge, { props: { score: 950, showLabel: true } });
+        expect(container.querySelector('.ds-validity-label')).not.toBeNull();
+    });
+    it('hides label when showLabel is false', () => {
+        const { container } = render(ValidityBadge, { props: { score: 950, showLabel: false } });
+        expect(container.querySelector('.ds-validity-label')).toBeNull();
+    });
+    it('sets aria-label from validity label', () => {
+        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' } });
+        expect(container.querySelector('.ds-validity-content')).not.toBeNull();
+        expect(container.querySelector('.ds-validity-score')).toBeNull();
+    });
+});

package/dist/u0-primitives/badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge.svelte';
+export type { Props } from './Badge.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/u0-primitives/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';

package/dist/u0-primitives/badge/validity-utils.d.ts

@@ -0,0 +1,8 @@
+export type ValidityScore = {
+    score: number;
+    total: number;
+    percentage: number;
+};
+export declare function getValidityColor(score: number): string;
+export declare function getValidityLabel(score: number): string;
+//# sourceMappingURL=validity-utils.d.ts.map

package/dist/u0-primitives/badge/validity-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validity-utils.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/badge/validity-utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKtD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKtD"}

package/dist/u0-primitives/badge/validity-utils.js

@@ -0,0 +1,18 @@
+export function getValidityColor(score) {
+    if (score >= 900)
+        return 'high';
+    if (score >= 700)
+        return 'medium';
+    if (score >= 500)
+        return 'low';
+    return 'critical';
+}
+export function getValidityLabel(score) {
+    if (score >= 900)
+        return 'High Validity';
+    if (score >= 700)
+        return 'Medium Validity';
+    if (score >= 500)
+        return 'Low Validity';
+    return 'Critical Validity';
+}