@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/u0-primitives/rsvp/RsvpReader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RsvpReader.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/RsvpReader.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAqIJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RsvpReader.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/RsvpReader.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAsIJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/u0-primitives/spinner/Spinner.svelte

@@ -14,11 +14,6 @@
 
 <div class="ds-spinner-wrapper size-{size} color-{color} {className}" role="status" aria-label="Loading">
   <div class="ds-spinner-ring"></div>
-  <div class="ds-spinner-core"></div>
-  <!-- Floating magical dust particles -->
-  <div class="ds-spinner-particle p1"></div>
-  <div class="ds-spinner-particle p2"></div>
-  <div class="ds-spinner-particle p3"></div>
 </div>
 
 <style>
@@ -29,69 +24,19 @@
     justify-content: center;
   }
 
-  /* Base Ring */
+  /* Mechanical ring — linear, no spring, no glow, no particles.
+     Identity comes from the accent edge alone. */
   .ds-spinner-ring {
     position: absolute;
     inset: 0;
-    border-radius: var(--radius-full);
-    border: 2px solid transparent;
+    border: 2px solid var(--border-default);
     border-top-color: currentColor;
     border-right-color: currentColor;
-    opacity: 0.8;
-    animation: ds-spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
+    animation: ds-spin 0.7s linear infinite;
   }
 
-  /* Inner Core */
-  .ds-spinner-core {
-    position: absolute;
-    inset: 20%;
-    border-radius: var(--radius-full);
-    background: currentColor;
-    opacity: 0.3;
-    filter: blur(4px);
-    animation: ds-pulse-core 2s ease-in-out infinite alternate;
-  }
-
-  /* Magical Dust Particles */
-  .ds-spinner-particle {
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    border-radius: var(--radius-full);
-    background: currentColor;
-    opacity: 0;
-  }
-
-  .p1 { animation: ds-particle-drift-1 2s ease-out infinite; top: 10%; left: 10%; }
-  .p2 { animation: ds-particle-drift-2 2.5s ease-out infinite 0.5s; bottom: 10%; right: 10%; }
-  .p3 { animation: ds-particle-drift-3 1.8s ease-out infinite 1s; top: 10%; right: 20%; }
-
   @keyframes ds-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  @keyframes ds-pulse-core {
-    0% { transform: scale(0.8); opacity: 0.2; }
-    100% { transform: scale(1.2); opacity: 0.5; }
-  }
-
-  @keyframes ds-particle-drift-1 {
-    0% { transform: translate(0, 0) scale(0); opacity: 0; }
-    50% { transform: translate(-10px, -15px) scale(1); opacity: 0.8; }
-    100% { transform: translate(-20px, -30px) scale(0); opacity: 0; }
-  }
-
-  @keyframes ds-particle-drift-2 {
-    0% { transform: translate(0, 0) scale(0); opacity: 0; }
-    50% { transform: translate(15px, 10px) scale(1.2); opacity: 0.6; }
-    100% { transform: translate(30px, 20px) scale(0); opacity: 0; }
-  }
-
-  @keyframes ds-particle-drift-3 {
-    0% { transform: translate(0, 0) scale(0); opacity: 0; }
-    50% { transform: translate(10px, -20px) scale(0.8); opacity: 0.9; }
-    100% { transform: translate(20px, -40px) scale(0); opacity: 0; }
+    to { transform: rotate(360deg); }
   }
 
   /* --- Sizes --- */
@@ -102,28 +47,15 @@
   .size-xl { width: 4.5rem; height: 4.5rem; }
   .size-xl .ds-spinner-ring { border-width: 4px; }
 
-  /* --- Colors --- */
-  .color-accent { 
-    color: var(--color-accent); 
-    filter: drop-shadow(0 0 4px var(--color-accent-glow));
-  }
-  
-  .color-muted { 
-    color: var(--color-text-muted); 
-  }
-  
-  .color-white {
-    color: var(--color-text-primary);
-    filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
-  }
+  /* Colors — no glow/drop-shadow; depth from the 2-tone border only */
+  .color-accent { color: var(--color-accent); }
+  .color-muted  { color: var(--color-text-muted); }
+  .color-white  { color: var(--color-text-primary); }
 
-  /* Reduced motion */
+  /* Reduced motion — slow the ring to a near-stop */
   @media (prefers-reduced-motion: reduce) {
     .ds-spinner-ring {
-      animation: ds-spin 2s linear infinite;
-    }
-    .ds-spinner-core, .ds-spinner-particle {
-      display: none;
+      animation: ds-spin 3s linear infinite;
     }
   }
 </style>

package/dist/u0-primitives/spinner/Spinner.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwBH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/spinner/Spinner.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmBH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/u0-primitives/steps/Steps.svelte

@@ -93,7 +93,7 @@
     color: var(--color-text-secondary, #a09880);
   }
 
-  .steps[vertical="false"] {
+  .steps:not(.vertical) {
     flex-direction: column;
     align-items: stretch;
   }
@@ -104,26 +104,30 @@
     gap: var(--space-3, 0.75rem);
   }
 
+  /* Square step indicator — mechanical numbering, not progress pills */
   .step-circle {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--radius-full, 9999px);
-    background: var(--color-bg-secondary, #222);
-    color: var(--color-text-primary, #e8e0d0);
+    border-radius: 0;
+    border: 1px solid var(--border-default);
+    background: var(--color-bg-panel);
+    color: var(--color-text-secondary);
     flex-shrink: 0;
+    font-family: var(--font-mono);
     font-weight: 600;
   }
 
-   .step-circle.completed {
-     background: var(--color-success);
-      color: var(--color-text-inverse);
-    }
+  .step-circle.completed {
+    background: color-mix(in srgb, var(--color-success) 15%, transparent);
+    border-color: var(--color-success);
+    color: var(--color-success);
+  }
 
-    .step-circle.active {
-      background: var(--color-accent);
-      color: var(--color-text-inverse);
-    box-shadow: 0 0 0 2px var(--color-accent-subtle, var(--color-accent-subtle));
+  .step-circle.active {
+    border-color: var(--color-accent);
+    color: var(--color-accent);
+    background: var(--color-accent-subtle);
   }
 
   .step-content {
@@ -143,23 +147,18 @@
   }
 
   .connector-line {
-    background: var(--color-border, #333);
+    background: var(--border-default);
     flex-shrink: 0;
   }
 
-  .connector-line.first {
-    border-top-left-radius: var(--radius-sm, 0.125rem);
-    border-top-right-radius: var(--radius-sm, 0.125rem);
-  }
-
+  .connector-line.first,
   .connector-line.last {
-    border-bottom-left-radius: var(--radius-sm, 0.125rem);
-    border-bottom-right-radius: var(--radius-sm, 0.125rem);
+    border-radius: 0;
   }
 
   /* Responsive adjustments */
   @media (max-width: 640px) {
-    .steps[vertical="true"] {
+    .steps.vertical {
       flex-direction: column;
       align-items: flex-start;
     }

package/dist/u0-primitives/surface-state/SurfaceState.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Spinner from '../spinner/Spinner.svelte';
+  import Button from '../button/Button.svelte';
+
+  export type SurfaceStateKind = 'loading' | 'empty' | 'error' | 'degraded';
+
+  export interface Props {
+    state: SurfaceStateKind;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    onRetry?: () => void | Promise<void>;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    state,
+    title,
+    message,
+    actionLabel,
+    onRetry,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const effectiveTitle = $derived(
+    title ??
+      (state === 'loading'
+        ? 'Loading'
+        : state === 'empty'
+          ? 'Nothing here yet'
+          : state === 'error'
+            ? 'Something went wrong'
+            : 'Substrate offline')
+  );
+
+  const effectiveMessage = $derived(
+    message ??
+      (state === 'loading'
+        ? 'Preparing the surface…'
+        : state === 'empty'
+          ? 'No content is available for this view.'
+          : state === 'error'
+            ? 'The operation could not be completed. Please try again.'
+            : 'The SOVEREIGN daemon isn’t responding. Your data is safe; reconnect to continue.')
+  );
+
+  const effectiveActionLabel = $derived(actionLabel ?? (state === 'degraded' ? 'Retry' : 'Try again'));
+
+  const isBusy = $derived(state === 'loading' || state === 'degraded');
+  const showAction = $derived(state === 'error' || state === 'degraded');
+</script>
+
+<section
+  class="ds-surface-state state-{state} {className}"
+  role="status"
+  aria-live="polite"
+>
+  <div class="ds-surface-state__icon" aria-hidden="true">
+    {#if isBusy}
+      <Spinner size="md" color="accent" />
+    {:else if state === 'empty'}
+      <span class="ds-surface-state__glyph">∅</span>
+    {:else}
+      <span class="ds-surface-state__glyph">!</span>
+    {/if}
+  </div>
+
+  <div class="ds-surface-state__content">
+    <h2 class="ds-surface-state__title">{effectiveTitle}</h2>
+    {#if effectiveMessage}
+      <p class="ds-surface-state__message">{effectiveMessage}</p>
+    {/if}
+    {#if children}
+      <div class="ds-surface-state__children">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+
+  {#if showAction}
+    <div class="ds-surface-state__actions">
+      <Button variant={state === 'error' ? 'danger' : 'secondary'} size="sm" disabled={!onRetry} onclick={() => void onRetry?.()}>
+        {effectiveActionLabel}
+      </Button>
+
+    </div>
+  {/if}
+</section>
+
+<style>
+  .ds-surface-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    min-height: 14rem;
+    padding: var(--space-6);
+    border: 1px solid var(--border-subtle);
+    background: var(--color-bg-panel-elevated);
+    color: var(--color-text-primary);
+    text-align: center;
+  }
+
+  .ds-surface-state__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    border: 1px solid var(--border-default);
+    background: var(--color-bg-app);
+  }
+
+  .state-error .ds-surface-state__icon,
+  .state-degraded .ds-surface-state__icon {
+    border-color: color-mix(in srgb, var(--color-error) 45%, var(--border-default));
+  }
+
+  .state-empty .ds-surface-state__icon {
+    border-color: var(--border-default);
+  }
+
+  .ds-surface-state__glyph {
+    font-family: var(--font-mono);
+    font-size: var(--text-xl);
+    font-weight: 700;
+    color: var(--color-text-primary);
+  }
+
+  .state-error .ds-surface-state__glyph,
+  .state-degraded .ds-surface-state__glyph {
+    color: var(--color-error);
+  }
+
+  .state-empty .ds-surface-state__glyph {
+    color: var(--color-text-muted);
+  }
+
+  .ds-surface-state__content {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ds-surface-state__title {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: var(--ui-font);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+  }
+
+  .ds-surface-state__message {
+    margin: 0;
+    max-width: 34rem;
+    color: var(--color-text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+  }
+
+  .ds-surface-state__children {
+    margin-top: var(--space-2);
+  }
+
+  .ds-surface-state__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: 42rem) {
+    .ds-surface-state {
+      align-items: flex-start;
+      flex-direction: column;
+      text-align: left;
+    }
+
+    .ds-surface-state__actions {
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/u0-primitives/surface-state/SurfaceState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export type SurfaceStateKind = 'loading' | 'empty' | 'error' | 'degraded';
+export interface Props {
+    state: SurfaceStateKind;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    onRetry?: () => void | Promise<void>;
+    class?: string;
+    children?: Snippet;
+}
+declare const SurfaceState: import("svelte").Component<Props, {}, "">;
+type SurfaceState = ReturnType<typeof SurfaceState>;
+export default SurfaceState;
+//# sourceMappingURL=SurfaceState.svelte.d.ts.map

package/dist/u0-primitives/surface-state/SurfaceState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceState.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/surface-state/SurfaceState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmFH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/u0-primitives/tabs/Tabs.svelte

@@ -151,15 +151,18 @@
     align-items: center;
     justify-content: center;
     gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    height: var(--ui-control-h);
     background: transparent;
     border: none;
     color: var(--color-text-secondary);
-    font-family: var(--font-sans);
-    font-size: var(--text-sm);
-    font-weight: 500;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
     cursor: pointer;
-    transition: color var(--transition-fast), background var(--transition-fast);
+    transition: color var(--transition-fast) linear, background var(--transition-fast) linear;
     white-space: nowrap;
     z-index: 1;
   }
@@ -197,6 +200,7 @@
     height: 1.1em;
   }
 
+  /* Active indicator: crisp 2px live edge, no bounce, no glow */
   .ds-tab::after {
     content: '';
     position: absolute;
@@ -206,9 +210,8 @@
     height: 2px;
     background: var(--color-accent);
     transform: scaleX(0);
-    transition: transform var(--transition-bounce);
-    transform-origin: center;
-    box-shadow: 0 -1px 4px var(--color-accent-glow);
+    transition: transform var(--transition-fast) linear;
+    transform-origin: left;
   }
 
   .ds-tab.is-active::after {
@@ -218,8 +221,7 @@
   .ds-tab:focus-visible::before {
     content: '';
     position: absolute;
-    inset: 4px;
-    border-radius: var(--radius-sm);
-    border: 2px solid var(--color-accent-subtle);
+    inset: 2px;
+    border: 1.5px solid var(--color-accent);
   }
 </style>

package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  export interface Swatch {
+    hex: string;
+    label: string;
+  }
+
+  export interface Props {
+    swatches: Swatch[];
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    'aria-label'?: string;
+    onSelect?: (hex: string) => void;
+  }
+
+  let {
+    swatches,
+    value = $bindable(''),
+    size = 'md',
+    class: className = '',
+    'aria-label': ariaLabel = 'Accent color',
+    onSelect
+  }: Props = $props();
+
+  function select(hex: string) {
+    value = hex;
+    onSelect?.(hex);
+  }
+
+  function handleKeydown(e: KeyboardEvent, hex: string) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      select(hex);
+    }
+  }
+</script>
+
+<div class="ds-theme-swatch-group size-{size} {className}" role="radiogroup" aria-label={ariaLabel}>
+  {#each swatches as swatch (swatch.hex)}
+    <button
+      type="button"
+      class="ds-theme-swatch"
+      class:is-active={value === swatch.hex}
+      style="--swatch-hex: {swatch.hex}; --swatch-hex-2: color-mix(in oklab, {swatch.hex}, #fff 26%);"
+      role="radio"
+      aria-checked={value === swatch.hex}
+      aria-label={swatch.label}
+      title={swatch.label}
+      onclick={() => select(swatch.hex)}
+      onkeydown={(e) => handleKeydown(e, swatch.hex)}
+    ></button>
+  {/each}
+</div>
+
+<style>
+  .ds-theme-swatch-group {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    border: var(--border-width-thin) solid var(--border-default);
+    border-radius: var(--radius-full);
+  }
+
+  .ds-theme-swatch {
+    padding: 0;
+    border: 2px solid transparent;
+    border-radius: var(--radius-full);
+    background: linear-gradient(135deg, var(--swatch-hex) 0%, var(--swatch-hex-2) 100%);
+    cursor: pointer;
+    transition: transform var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  .size-sm .ds-theme-swatch { width: 0.875rem; height: 0.875rem; }
+  .size-md .ds-theme-swatch { width: 1.125rem; height: 1.125rem; }
+  .size-lg .ds-theme-swatch { width: 1.375rem; height: 1.375rem; }
+
+  .ds-theme-swatch:hover {
+    transform: scale(1.12);
+  }
+
+  .ds-theme-swatch.is-active {
+    border-color: var(--color-text-primary);
+  }
+
+  .ds-theme-swatch:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ds-theme-swatch { transition: none; }
+  }
+</style>

package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface Swatch {
+    hex: string;
+    label: string;
+}
+export interface Props {
+    swatches: Swatch[];
+    value?: string;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    'aria-label'?: string;
+    onSelect?: (hex: string) => void;
+}
+declare const ThemeSwatchGroup: import("svelte").Component<Props, {}, "value">;
+type ThemeSwatchGroup = ReturnType<typeof ThemeSwatchGroup>;
+export default ThemeSwatchGroup;
+//# sourceMappingURL=ThemeSwatchGroup.svelte.d.ts.map

package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwatchGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAqCH,QAAA,MAAM,gBAAgB,gDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/u0-primitives/theme-swatch-group/ThemeSwatchGroup.test.js

@@ -0,0 +1,48 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/svelte';
+import ThemeSwatchGroup from './ThemeSwatchGroup.svelte';
+const swatches = [
+    { hex: '#b87333', label: 'Brass' },
+    { hex: '#4fa8a2', label: 'Teal' },
+    { hex: '#c14a4a', label: 'Crimson' }
+];
+describe('ThemeSwatchGroup', () => {
+    afterEach(() => cleanup());
+    it('renders a radiogroup with one radio per swatch', () => {
+        render(ThemeSwatchGroup, { swatches });
+        expect(screen.getByRole('radiogroup')).toBeDefined();
+        expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+    it('marks the swatch matching value as checked', () => {
+        render(ThemeSwatchGroup, { swatches, value: '#4fa8a2' });
+        const radios = screen.getAllByRole('radio');
+        expect(radios[1].getAttribute('aria-checked')).toBe('true');
+        expect(radios[0].getAttribute('aria-checked')).toBe('false');
+    });
+    it('calls onSelect with the clicked swatch hex', async () => {
+        const onSelect = vi.fn();
+        render(ThemeSwatchGroup, { swatches, onSelect });
+        const radios = screen.getAllByRole('radio');
+        await fireEvent.click(radios[2]);
+        expect(onSelect).toHaveBeenCalledWith('#c14a4a');
+    });
+    it('selects on Enter and Space keydown', async () => {
+        const onSelect = vi.fn();
+        render(ThemeSwatchGroup, { swatches, onSelect });
+        const radios = screen.getAllByRole('radio');
+        await fireEvent.keyDown(radios[0], { key: 'Enter' });
+        expect(onSelect).toHaveBeenCalledWith('#b87333');
+        await fireEvent.keyDown(radios[1], { key: ' ' });
+        expect(onSelect).toHaveBeenCalledWith('#4fa8a2');
+    });
+    it('uses each swatch label as its aria-label', () => {
+        render(ThemeSwatchGroup, { swatches });
+        expect(screen.getByLabelText('Brass')).toBeDefined();
+        expect(screen.getByLabelText('Teal')).toBeDefined();
+        expect(screen.getByLabelText('Crimson')).toBeDefined();
+    });
+    it('applies size class', () => {
+        const { container } = render(ThemeSwatchGroup, { swatches, size: 'lg' });
+        expect(container.querySelector('.size-lg')).not.toBeNull();
+    });
+});

package/dist/u0-primitives/theme-swatch-group/index.d.ts

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

package/dist/u0-primitives/theme-swatch-group/index.d.ts.map

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

package/dist/u0-primitives/theme-swatch-group/index.js

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