@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/u0-primitives/modal/Modal.svelte

@@ -12,7 +12,7 @@
    */
 
   import { tick, untrack } from 'svelte';
-  import { modalStackStore } from '../../s0-state/modal-stack-store.svelte';
+  import { modalStackStore } from '@stephen-netu/design-system/s0-state';
 
   export interface Props {
     /** Controls modal visibility */
@@ -258,8 +258,8 @@
   .modal-dialog {
     position: relative;
     background: var(--color-bg-panel-elevated);
-    border: var(--border-width-thin) solid var(--border-default);
-    border-radius: var(--radius-xl);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: 0;
     width: 90%;
     max-width: 37.5rem;
     max-height: 80vh;
@@ -267,9 +267,9 @@
     flex-direction: column;
     z-index: 1;
     outline: none;
-    box-shadow: var(--shadow-xl);
-    transform: translateY(1.25rem) scale(0.98);
-    transition: transform var(--transition-normal), opacity var(--transition-normal);
+    box-shadow: none;
+    transform: translateY(0.5rem);
+    transition: transform var(--transition-fast) linear, opacity var(--transition-fast) linear;
     opacity: 0;
   }
 
@@ -279,27 +279,30 @@
   }
 
   .modal-dialog:focus {
-    box-shadow: 0 0 0 var(--border-width-default) var(--color-accent), var(--shadow-xl);
+    outline: var(--border-width-default) solid var(--color-accent);
+    outline-offset: 2px;
   }
 
   .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--space-5) var(--space-6);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
     border-bottom: var(--border-width-thin) solid var(--border-default);
     flex-shrink: 0;
   }
 
   .modal-title {
     margin: 0;
-    font-size: var(--text-lg);
-    color: var(--color-text-primary);
+    font-size: var(--ui-label);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
     display: flex;
     align-items: center;
     gap: var(--space-3);
     font-weight: 600;
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
   }
 
   .modal-header-actions {
@@ -310,19 +313,18 @@
 
   .modal-close-btn {
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--color-text-secondary);
     cursor: pointer;
-    padding: var(--space-1);
+    padding: 3px;
     display: flex;
     align-items: center;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition-fast);
+    transition: color var(--transition-fast) linear, border-color var(--transition-fast) linear;
   }
 
   .modal-close-btn:hover {
     color: var(--color-text-primary);
-    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--border-default);
   }
 
   .modal-close-btn:focus-visible {
@@ -332,17 +334,18 @@
 
   .modal-content {
     overflow-y: auto;
-    padding: var(--space-6);
+    padding: var(--ui-pad-x);
     flex: 1;
     min-height: 0;
+    font-size: var(--ui-font);
   }
 
   .modal-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--space-3);
-    padding: var(--space-4) var(--space-6);
+    gap: var(--ui-pad-y);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
     border-top: var(--border-width-thin) solid var(--border-default);
     flex-shrink: 0;
   }

package/dist/u0-primitives/modal/Modal.test.js

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
 import { render, fireEvent, cleanup } from '@testing-library/svelte';
 import Modal from './Modal.svelte';
-import { modalStackStore } from '../../s0-state/modal-stack-store.svelte';
+import { modalStackStore } from '@stephen-netu/design-system/s0-state';
 beforeEach(() => {
     modalStackStore.closeAll();
 });

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

@@ -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,18 +147,13 @@
   }
 
   .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 */

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

@@ -99,7 +99,6 @@
     min-height: 14rem;
     padding: var(--space-6);
     border: 1px solid var(--border-subtle);
-    border-radius: var(--radius-lg);
     background: var(--color-bg-panel-elevated);
     color: var(--color-text-primary);
     text-align: center;
@@ -109,11 +108,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 3rem;
-    height: 3rem;
+    width: 2.5rem;
+    height: 2.5rem;
     flex-shrink: 0;
     border: 1px solid var(--border-default);
-    border-radius: var(--radius-full);
     background: var(--color-bg-app);
   }
 
@@ -152,10 +150,12 @@
 
   .ds-surface-state__title {
     margin: 0;
-    font-size: var(--text-lg);
+    font-family: var(--font-mono);
+    font-size: var(--ui-font);
     font-weight: 600;
-    letter-spacing: 0.02em;
-    color: var(--color-text-primary);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
   }
 
   .ds-surface-state__message {

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';

package/dist/u0-primitives/toggle/Toggle.svelte

@@ -67,13 +67,13 @@
     opacity: 0.5;
   }
 
+  /* Track: square (not pill) — mechanical, not soft */
   .ds-toggle-track {
     position: relative;
     background: var(--color-bg-panel-elevated);
     border: 1px solid var(--border-default);
-    border-radius: var(--radius-full);
-    transition: all var(--transition-normal);
-    box-shadow: var(--shadow-inner);
+    border-radius: 0;
+    transition: border-color var(--transition-fast) linear, background var(--transition-fast) linear;
   }
 
   /* Track Focus */
@@ -87,20 +87,19 @@
     top: 2px;
     left: 2px;
     background: var(--color-text-secondary);
-    border-radius: var(--radius-full);
-    transition: all var(--transition-bounce);
-    box-shadow: var(--shadow-sm);
+    border-radius: 0;
+    transition: transform var(--transition-fast) linear, background var(--transition-fast) linear;
   }
 
-  /* Checked State */
+  /* Checked: accent border + filled thumb — accent as a live edge/fill on a
+     control is acceptable here because the thumb IS the state indicator */
   .ds-toggle-track.is-checked {
-    background: var(--color-accent);
-    border-color: var(--color-accent-hover);
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3), 0 0 8px var(--color-accent-subtle);
+    background: var(--color-accent-subtle);
+    border-color: var(--color-accent);
   }
 
   .ds-toggle-track.is-checked .ds-toggle-thumb {
-    background: var(--color-text-inverse);
+    background: var(--color-accent);
   }
 
   /* Label */

package/dist/u0-primitives/tooltip/Tooltip.svelte

@@ -99,19 +99,19 @@
     max-width: 250px;
     background: var(--color-bg-panel-elevated);
     border: 1px solid var(--border-default);
-    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.5);
-    border-radius: var(--radius-md);
-    animation: ds-fade-in var(--transition-fast) ease-out;
-    pointer-events: none; /* Don't interfere with mouse */
+    box-shadow: none;
+    border-radius: 0;
+    animation: ds-fade-in var(--transition-fast) linear;
+    pointer-events: none;
   }
 
   .ds-tooltip-inner {
-    padding: var(--space-2) var(--space-3);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
     color: var(--color-text-primary);
-    font-family: var(--font-sans);
-    font-size: var(--text-xs);
-    line-height: 1.4;
-    text-align: center;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label);
+    line-height: var(--ui-leading);
+    text-align: left;
   }
 
   /* Arrow Base */