@stephen-netu/design-system 0.1.0 → 0.2.0

package/dist/u0-primitives/spinner/Spinner.test.js

@@ -0,0 +1,58 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import Spinner from './Spinner.svelte';
+describe('Spinner', () => {
+    afterEach(() => cleanup());
+    it('renders a wrapper element', () => {
+        const { container } = render(Spinner);
+        expect(container.querySelector('.ds-spinner-wrapper')).not.toBeNull();
+    });
+    it('renders the spinner ring', () => {
+        const { container } = render(Spinner);
+        expect(container.querySelector('.ds-spinner-ring')).not.toBeNull();
+    });
+    it('renders the spinner core', () => {
+        const { container } = render(Spinner);
+        expect(container.querySelector('.ds-spinner-core')).not.toBeNull();
+    });
+    it('renders dust particles', () => {
+        const { container } = render(Spinner);
+        const particles = container.querySelectorAll('.ds-spinner-particle');
+        expect(particles.length).toBe(3);
+    });
+    it('applies default size and color classes', () => {
+        const { container } = render(Spinner);
+        expect(container.querySelector('.size-md')).not.toBeNull();
+        expect(container.querySelector('.color-accent')).not.toBeNull();
+    });
+    it('applies size-sm class', () => {
+        const { container } = render(Spinner, { props: { size: 'sm' } });
+        expect(container.querySelector('.size-sm')).not.toBeNull();
+    });
+    it('applies size-lg class', () => {
+        const { container } = render(Spinner, { props: { size: 'lg' } });
+        expect(container.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('applies size-xl class', () => {
+        const { container } = render(Spinner, { props: { size: 'xl' } });
+        expect(container.querySelector('.size-xl')).not.toBeNull();
+    });
+    it('applies color-muted class', () => {
+        const { container } = render(Spinner, { props: { color: 'muted' } });
+        expect(container.querySelector('.color-muted')).not.toBeNull();
+    });
+    it('applies color-white class', () => {
+        const { container } = render(Spinner, { props: { color: 'white' } });
+        expect(container.querySelector('.color-white')).not.toBeNull();
+    });
+    it('has role="status" and aria-label', () => {
+        const { container } = render(Spinner);
+        const wrapper = container.querySelector('.ds-spinner-wrapper');
+        expect(wrapper.getAttribute('role')).toBe('status');
+        expect(wrapper.getAttribute('aria-label')).toBe('Loading');
+    });
+    it('applies custom class', () => {
+        const { container } = render(Spinner, { props: { class: 'my-spinner' } });
+        expect(container.querySelector('.my-spinner')).not.toBeNull();
+    });
+});

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

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

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

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

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

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

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

@@ -0,0 +1,186 @@
+<script lang="ts">
+  /**
+   * Steps Component
+   * 
+   * A vertical stepper component for displaying progress through a sequence of steps.
+   * 
+   * @package @kos/design-system/u0-primitives
+   */
+  import type { Snippet } from 'svelte';
+
+  interface Step {
+    label: string;
+    description?: string;
+    completed: boolean;
+    active?: boolean;
+  }
+
+  export interface Props {
+    /** List of steps to display */
+    steps: Step[];
+    /** Whether to show vertical line between steps */
+    vertical?: boolean;
+    /** Size of the step indicator */
+    size?: 'sm' | 'md' | 'lg';
+  }
+
+  let { steps, vertical = true, size = 'md' }: Props = $props();
+
+  const stepSize = $derived({
+    sm: { width: '1.5rem', height: '1.5rem', fontSize: '0.75rem' },
+    md: { width: '2rem', height: '2rem', fontSize: '0.875rem' },
+    lg: { width: '2.5rem', height: '2.5rem', fontSize: '1rem' }
+  }[size]);
+
+  function getStepClasses(index: number, step: Step): string {
+    const classes: string[] = [];
+    if (step.completed) classes.push('completed');
+    if (step.active) classes.push('active');
+    if (index === 0) classes.push('first');
+    if (index === steps.length - 1) classes.push('last');
+    return classes.join(' ');
+  }
+
+  function getConnectorClasses(index: number): string {
+    const classes = ['connector'];
+    if (index === 0) classes.push('first');
+    if (index === steps.length - 1) classes.push('last');
+    return classes.join(' ');
+  }
+</script>
+
+{#if steps.length > 0}
+<div class="steps" class:vertical role="list" aria-label="Steps">
+  {#each steps as step, index}
+    <div class="step-item" role="listitem">
+      <div
+        class="step-circle {getStepClasses(index, step)}"
+        style="width: {stepSize.width}; height: {stepSize.height}; font-size: {stepSize.fontSize};">
+        {#if step.completed}
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="9 11 12 14 22 4"></polyline>
+          </svg>
+        {:else if step.active}
+          {index + 1}
+        {:else}
+          {index + 1}
+        {/if}
+      </div>
+
+      {#if vertical && index < steps.length - 1}
+        <div
+          class="connector-line {getConnectorClasses(index)}"
+          style="height: {vertical ? '100%' : 'auto'}; width: {vertical ? '2px' : '100%'};"
+        ></div>
+      {/if}
+
+      <div class="step-content">
+        <div class="step-label">{step.label}</div>
+        {#if step.description}
+          <div class="step-description">{step.description}</div>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>
+{/if}
+
+<style>
+  .steps {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-4, 1rem);
+    color: var(--color-text-secondary, #a09880);
+  }
+
+  .steps[vertical="false"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .step-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 0.75rem);
+  }
+
+  .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);
+    flex-shrink: 0;
+    font-weight: 600;
+  }
+
+   .step-circle.completed {
+     background: var(--color-success);
+      color: var(--color-text-inverse);
+    }
+
+    .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-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .step-label {
+    font-weight: 500;
+    line-height: 1.4;
+  }
+
+  .step-description {
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+    color: var(--color-text-muted, #888);
+  }
+
+  .connector-line {
+    background: var(--color-border, #333);
+    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.last {
+    border-bottom-left-radius: var(--radius-sm, 0.125rem);
+    border-bottom-right-radius: var(--radius-sm, 0.125rem);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 640px) {
+    .steps[vertical="true"] {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .connector-line {
+      width: 100%;
+      height: 2px;
+    }
+
+    .connector-line.first {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--radius-sm, 0.125rem);
+      border-bottom-right-radius: var(--radius-sm, 0.125rem);
+    }
+
+    .connector-line.last {
+      border-top-left-radius: var(--radius-sm, 0.125rem);
+      border-top-right-radius: var(--radius-sm, 0.125rem);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,18 @@
+interface Step {
+    label: string;
+    description?: string;
+    completed: boolean;
+    active?: boolean;
+}
+export interface Props {
+    /** List of steps to display */
+    steps: Step[];
+    /** Whether to show vertical line between steps */
+    vertical?: boolean;
+    /** Size of the step indicator */
+    size?: 'sm' | 'md' | 'lg';
+}
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;
+//# sourceMappingURL=Steps.svelte.d.ts.map

package/dist/u0-primitives/steps/Steps.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/steps/Steps.svelte.ts"],"names":[],"mappings":"AAaE,UAAU,IAAI;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,+BAA+B;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAkEH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/steps/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/steps/index.js

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

package/{src → dist}/u0-primitives/tabs/Tabs.svelte

@@ -5,7 +5,7 @@
   // Re-export for backward compatibility
   export type { Tab } from './tabs-types';
 
-  interface Props {
+  export interface Props {
     tabs: Tab[];
     activeId?: string;
     class?: string;
@@ -175,7 +175,7 @@
 
   .ds-tab:focus-visible {
     outline: none;
-    background: rgba(184, 115, 51, 0.1);
+    background: var(--color-accent-subtle);
   }
 
   .ds-tab.is-active {

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

@@ -0,0 +1,14 @@
+import type { Tab } from './tabs-types';
+export interface Props {
+    tabs: Tab[];
+    activeId?: string;
+    class?: string;
+    fullWidth?: boolean;
+    onchange?: (id: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {
+    Tab: typeof Tab;
+}, "activeId">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/u0-primitives/tabs/Tabs.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAGtC,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AA+GH,QAAA,MAAM,IAAI;SADuD,OAAO,GAAG;cACzB,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/u0-primitives/tabs/Tabs.test.js

@@ -0,0 +1,81 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import Tabs from './Tabs.svelte';
+const sampleTabs = [
+    { id: 'tab1', label: 'First' },
+    { id: 'tab2', label: 'Second' },
+    { id: 'tab3', label: 'Third' },
+];
+describe('Tabs', () => {
+    afterEach(() => cleanup());
+    it('renders all tabs', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs } });
+        const tabElements = container.querySelectorAll('[role="tab"]');
+        expect(tabElements.length).toBe(3);
+    });
+    it('sets first tab as active by default', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs } });
+        const firstTab = container.querySelector('#tab-tab1');
+        expect(firstTab).not.toBeNull();
+        expect(firstTab.getAttribute('aria-selected')).toBe('true');
+    });
+    it('renders tab labels', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs } });
+        expect(container.querySelector('#tab-tab1 .ds-tab-label')).not.toBeNull();
+    });
+    it('switches active tab on click', async () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs, activeId: 'tab1' } });
+        const secondTab = container.querySelector('#tab-tab2');
+        await fireEvent.click(secondTab);
+        expect(secondTab.getAttribute('aria-selected')).toBe('true');
+    });
+    it('applies is-active class to active tab', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs, activeId: 'tab2' } });
+        const activeTab = container.querySelector('#tab-tab2');
+        expect(activeTab.classList.contains('is-active')).toBe(true);
+    });
+    it('applies is-disabled class to disabled tabs', () => {
+        const tabsWithDisabled = [
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B', disabled: true },
+        ];
+        const { container } = render(Tabs, { props: { tabs: tabsWithDisabled } });
+        expect(container.querySelector('#tab-b.is-disabled')).not.toBeNull();
+    });
+    it('applies full-width class when fullWidth is true', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs, fullWidth: true } });
+        expect(container.querySelector('.full-width')).not.toBeNull();
+    });
+    it('calls onchange callback when tab is clicked', async () => {
+        let changedId = '';
+        const { container } = render(Tabs, {
+            props: { tabs: sampleTabs, activeId: 'tab1', onchange: (id) => { changedId = id; } },
+        });
+        const thirdTab = container.querySelector('#tab-tab3');
+        await fireEvent.click(thirdTab);
+        expect(changedId).toBe('tab3');
+    });
+    it('renders with role="tablist"', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs } });
+        expect(container.querySelector('[role="tablist"]')).not.toBeNull();
+    });
+    it('sets correct aria-controls on tabs', () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs } });
+        const firstTab = container.querySelector('#tab-tab1');
+        expect(firstTab.getAttribute('aria-controls')).toBe('panel-tab1');
+    });
+    it('handles keyboard ArrowRight navigation', async () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs, activeId: 'tab1' } });
+        const firstTab = container.querySelector('#tab-tab1');
+        await fireEvent.keyDown(firstTab, { key: 'ArrowRight' });
+        const secondTab = container.querySelector('#tab-tab2');
+        expect(secondTab.getAttribute('aria-selected')).toBe('true');
+    });
+    it('handles keyboard ArrowLeft navigation', async () => {
+        const { container } = render(Tabs, { props: { tabs: sampleTabs, activeId: 'tab2' } });
+        const secondTab = container.querySelector('#tab-tab2');
+        await fireEvent.keyDown(secondTab, { key: 'ArrowLeft' });
+        const firstTab = container.querySelector('#tab-tab1');
+        expect(firstTab.getAttribute('aria-selected')).toBe('true');
+    });
+});

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

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

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

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

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

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

package/dist/u0-primitives/tabs/tabs-types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export interface Tab {
+    id: string;
+    label: string | Snippet;
+    disabled?: boolean;
+    icon?: Snippet;
+}
+//# sourceMappingURL=tabs-types.d.ts.map

package/dist/u0-primitives/tabs/tabs-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-types.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/tabs/tabs-types.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}

package/dist/u0-primitives/tabs/tabs-types.js

@@ -0,0 +1,3 @@
+// U0 Tabs — Tab type definition
+// Extracted from Tabs.svelte so tsc can resolve it without Svelte type declarations.
+export {};

package/{src → dist}/u0-primitives/toggle/Toggle.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  interface Props {
+  export interface Props {
     checked?: boolean;
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -34,23 +34,21 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_interactive_supports_focus -->
-<!-- svelte-ignore a11y_click_events_have_key_events -->
 <label class="ds-toggle-wrapper size-{size} {className}" class:is-disabled={disabled}>
-  <div 
+  <div
     class="ds-toggle-track"
     class:is-checked={checked}
     role="switch"
     aria-checked={checked}
     tabindex={disabled ? -1 : 0}
     onkeydown={handleKeydown}
-    onclick={(e) => { e.preventDefault(); toggle(); }}
+    onclick={toggle}
   >
     <div class="ds-toggle-thumb"></div>
   </div>
 
   {#if label}
-    <span class="ds-toggle-label">
+    <span class="ds-toggle-label" onclick={toggle}>
       {@render label()}
     </span>
   {/if}
@@ -61,7 +59,6 @@
     display: inline-flex;
     align-items: center;
     gap: var(--space-3);
-    cursor: pointer;
     user-select: none;
   }
 
@@ -76,7 +73,7 @@
     border: 1px solid var(--border-default);
     border-radius: var(--radius-full);
     transition: all var(--transition-normal);
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
+    box-shadow: var(--shadow-inner);
   }
 
   /* Track Focus */
@@ -92,7 +89,7 @@
     background: var(--color-text-secondary);
     border-radius: var(--radius-full);
     transition: all var(--transition-bounce);
-    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    box-shadow: var(--shadow-sm);
   }
 
   /* Checked State */
@@ -103,13 +100,14 @@
   }
 
   .ds-toggle-track.is-checked .ds-toggle-thumb {
-    background: #fff;
+    background: var(--color-text-inverse);
   }
 
   /* Label */
   .ds-toggle-label {
     font-family: var(--font-sans);
     color: var(--color-text-primary);
+    cursor: pointer;
   }
 
   /* --- Sizes --- */

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

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

package/dist/u0-primitives/toggle/Toggle.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA6CH,QAAA,MAAM,MAAM,kDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/u0-primitives/toggle/Toggle.test.js

@@ -0,0 +1,46 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+describe('Toggle', () => {
+    afterEach(() => cleanup());
+    it('renders with role="switch"', () => {
+        const { container } = render(Toggle);
+        expect(container.querySelector('[role="switch"]')).not.toBeNull();
+    });
+    it('is unchecked by default', () => {
+        const { container } = render(Toggle);
+        expect(container.querySelector('[role="switch"]')?.getAttribute('aria-checked')).toBe('false');
+    });
+    it('reflects the checked prop', () => {
+        const { container } = render(Toggle, { checked: true });
+        expect(container.querySelector('[role="switch"]')?.getAttribute('aria-checked')).toBe('true');
+    });
+    it('applies size class', () => {
+        const { container } = render(Toggle, { size: 'lg' });
+        expect(container.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('applies custom class', () => {
+        const { container } = render(Toggle, { class: 'my-toggle' });
+        expect(container.querySelector('.my-toggle')).not.toBeNull();
+    });
+    it('applies disabled class when disabled', () => {
+        const { container } = render(Toggle, { disabled: true });
+        expect(container.querySelector('.is-disabled')).not.toBeNull();
+    });
+    it('sets negative tabindex when disabled', () => {
+        const { container } = render(Toggle, { disabled: true });
+        expect(container.querySelector('[role="switch"]')?.getAttribute('tabindex')).toBe('-1');
+    });
+    it('applies is-checked class when checked', () => {
+        const { container } = render(Toggle, { checked: true });
+        expect(container.querySelector('.is-checked')).not.toBeNull();
+    });
+    it('renders as part of a label wrapper', () => {
+        const { container } = render(Toggle);
+        expect(container.querySelector('.ds-toggle-wrapper')).not.toBeNull();
+    });
+    it('is focusable when not disabled', () => {
+        const { container } = render(Toggle);
+        expect(container.querySelector('[role="switch"]')?.getAttribute('tabindex')).toBe('0');
+    });
+});

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/toggle/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/toggle/index.js

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

package/{src → dist}/u0-primitives/tooltip/Tooltip.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte';
   import { onDestroy } from 'svelte';
 
-  interface Props {
+  export interface Props {
     content: string | Snippet;
     position?: 'top' | 'right' | 'bottom' | 'left';
     delayMs?: number;

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    content: string | Snippet;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    delayMs?: number;
+    class?: string;
+    trigger: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/u0-primitives/tooltip/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB;AA0EH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}