@stephen-netu/design-system 0.2.1 → 0.5.1

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

@@ -48,9 +48,9 @@
   </div>
 
   {#if label}
-    <span class="ds-toggle-label" onclick={toggle}>
+    <button type="button" class="ds-toggle-label" onclick={toggle} disabled={disabled}>
       {@render label()}
-    </span>
+    </button>
   {/if}
 </label>
 
@@ -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,29 +87,38 @@
     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 */
   .ds-toggle-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
     font-family: var(--font-sans);
     color: var(--color-text-primary);
     cursor: pointer;
   }
 
+  .ds-toggle-label:disabled {
+    cursor: not-allowed;
+  }
+
   /* --- Sizes --- */
   
   .size-sm .ds-toggle-track {

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 */

package/dist/u0-primitives/tooltip/Tooltip.test.js

@@ -6,21 +6,21 @@ describe('Tooltip', () => {
     afterEach(() => cleanup());
     it('renders the trigger wrapper', async () => {
         const { container } = render(Tooltip, {
-            props: { content: 'tip', trigger: () => 'hover me' },
+            props: { content: 'tip', trigger: (() => '') },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         expect(wrapper).not.toBeNull();
     });
     it('does not show tooltip content initially', () => {
         const { container } = render(Tooltip, {
-            props: { content: 'secret tip', trigger: () => 'hover me' },
+            props: { content: 'secret tip', trigger: (() => '') },
         });
         expect(container.querySelector('.ds-tooltip-content')).toBeNull();
     });
     it('shows tooltip on mouse enter', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'hovered!', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'hovered!', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -33,7 +33,7 @@ describe('Tooltip', () => {
     it('hides tooltip on mouse leave', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'hovered!', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'hovered!', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -49,7 +49,7 @@ describe('Tooltip', () => {
     it('applies position class for top (default)', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'top tip', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'top tip', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -62,7 +62,7 @@ describe('Tooltip', () => {
     it('applies position class for bottom', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'bottom tip', position: 'bottom', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'bottom tip', position: 'bottom', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -75,7 +75,7 @@ describe('Tooltip', () => {
     it('applies position class for left', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'left tip', position: 'left', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'left tip', position: 'left', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -88,7 +88,7 @@ describe('Tooltip', () => {
     it('applies position class for right', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'right tip', position: 'right', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'right tip', position: 'right', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -101,7 +101,7 @@ describe('Tooltip', () => {
     it('renders string content inside tooltip inner', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'hello world', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'hello world', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -115,7 +115,7 @@ describe('Tooltip', () => {
     it('respects delayMs before showing', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'delayed', trigger: () => 'target', delayMs: 500 },
+            props: { content: 'delayed', trigger: (() => ''), delayMs: 500 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.mouseEnter(wrapper);
@@ -131,7 +131,7 @@ describe('Tooltip', () => {
     it('shows tooltip on focus', async () => {
         vi.useFakeTimers();
         const { container } = render(Tooltip, {
-            props: { content: 'focused!', trigger: () => 'target', delayMs: 0 },
+            props: { content: 'focused!', trigger: (() => ''), delayMs: 0 },
         });
         const wrapper = container.querySelector('.ds-tooltip-wrapper');
         await fireEvent.focusIn(wrapper);
@@ -143,7 +143,7 @@ describe('Tooltip', () => {
     });
     it('applies custom class to wrapper', () => {
         const { container } = render(Tooltip, {
-            props: { content: 'tip', trigger: () => 'target', class: 'my-tooltip' },
+            props: { content: 'tip', trigger: (() => ''), class: 'my-tooltip' },
         });
         expect(container.querySelector('.my-tooltip')).not.toBeNull();
     });

package/dist/u0-primitives/web-components/button-component.d.ts

@@ -1,12 +1,16 @@
+import type { Props as ButtonProps } from '../button/Button.svelte';
 declare class KosButton extends HTMLElement {
     static observedAttributes: string[];
     private svelteRoot;
+    private svelteComponent;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getComponentProps(): Record<string, unknown>;
+    getComponentProps(): ButtonProps;
     render(): void;
+    destroy(): void;
+    private ensureHostStyle;
 }
 export { KosButton };
 export default KosButton;

package/dist/u0-primitives/web-components/button-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/button-component.ts"],"names":[],"mappings":"AAWA,cAAM,SAAU,SAAQ,WAAW;IACjC,MAAM,CAAC,kBAAkB,WAMvB;IAEF,OAAO,CAAC,UAAU,CAA4B;;IAO9C,iBAAiB;IAIjB,oBAAoB;IAOpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAwB5C,MAAM;CA4BP;AAMD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC"}
+{"version":3,"file":"button-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/button-component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAWpE,cAAM,SAAU,SAAQ,WAAW;IACjC,MAAM,CAAC,kBAAkB,WAUvB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAAwC;;IAO/D,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,WAAW;IAyChC,MAAM;IAaN,OAAO;IAWP,OAAO,CAAC,eAAe;CAYxB;AAuBD,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,eAAe,SAAS,CAAC"}

package/dist/u0-primitives/web-components/button-component.js

@@ -1,22 +1,22 @@
-/**
- * KosButton Web Component
- *
- * Web Component wrapper for the KosButton Svelte component.
- * Enables usage of KosButton in vanilla JS, React, or other frameworks.
- *
- * @package @kos/design-system/u0-primitives
- */
-import { mount } from 'svelte';
+import { createRawSnippet, mount, unmount } from 'svelte';
 import Button from '../button/Button.svelte';
+const variants = ['primary', 'secondary', 'ghost', 'danger'];
+const sizes = ['sm', 'md', 'lg'];
+const types = ['button', 'submit', 'reset'];
 class KosButton extends HTMLElement {
     static observedAttributes = [
         'disabled',
         'loading',
         'variant',
         'size',
+        'type',
+        'class',
+        'aria-label',
+        'aria-expanded',
         'children'
     ];
     svelteRoot = null;
+    svelteComponent = null;
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -25,10 +25,7 @@ class KosButton extends HTMLElement {
         this.render();
     }
     disconnectedCallback() {
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-            this.svelteRoot = null;
-        }
+        this.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
@@ -37,48 +34,90 @@ class KosButton extends HTMLElement {
     }
     getComponentProps() {
         const props = {};
+        const variant = this.getAttribute('variant');
+        const size = this.getAttribute('size');
+        const type = this.getAttribute('type');
+        const className = this.getAttribute('class');
+        const ariaLabel = this.getAttribute('aria-label');
+        const ariaExpanded = this.getAttribute('aria-expanded');
+        const children = this.getAttribute('children');
         if (this.hasAttribute('disabled')) {
             props.disabled = true;
         }
         if (this.hasAttribute('loading')) {
             props.loading = true;
         }
-        if (this.hasAttribute('variant')) {
-            props.variant = this.getAttribute('variant') ?? 'primary';
+        if (variant) {
+            props.variant = readOption(variant, variants, 'primary');
+        }
+        if (size) {
+            props.size = readOption(size, sizes, 'md');
+        }
+        if (type) {
+            props.type = readOption(type, types, 'button');
         }
-        if (this.hasAttribute('size')) {
-            props.size = this.getAttribute('size') ?? 'md';
+        if (className) {
+            props.class = className;
         }
-        if (this.hasAttribute('children')) {
-            props.children = this.getAttribute('children');
+        if (ariaLabel) {
+            props['aria-label'] = ariaLabel;
+        }
+        if (ariaExpanded !== null) {
+            props['aria-expanded'] = ariaExpanded !== 'false';
+        }
+        if (children !== null) {
+            props.children = createTextSnippet(children);
         }
         return props;
     }
     render() {
         if (!this.shadowRoot)
             return;
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-        }
+        this.destroy();
         this.svelteRoot = document.createElement('div');
         this.shadowRoot.appendChild(this.svelteRoot);
-        mount(Button, {
+        this.svelteComponent = mount(Button, {
             target: this.svelteRoot,
             props: this.getComponentProps()
         });
-        if (!this.shadowRoot.querySelector('style')) {
-            const style = document.createElement('style');
-            style.textContent = `
-        :host {
-          display: inline-block;
-          font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
-        }
-        ::slotted(*) {
+        this.ensureHostStyle();
+    }
+    destroy() {
+        if (this.svelteComponent) {
+            void unmount(this.svelteComponent);
+            this.svelteComponent = null;
         }
-      `;
-            this.shadowRoot.appendChild(style);
+        if (this.svelteRoot) {
+            this.svelteRoot.remove();
+            this.svelteRoot = null;
         }
     }
+    ensureHostStyle() {
+        if (!this.shadowRoot || this.shadowRoot.querySelector('style'))
+            return;
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: inline-block;
+        font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+      }
+    `;
+        this.shadowRoot.appendChild(style);
+    }
+}
+function readOption(value, options, fallback) {
+    return options.includes(value) ? value : fallback;
+}
+function createTextSnippet(value) {
+    return createRawSnippet(() => ({
+        render: () => `<span>${escapeHtml(value)}</span>`
+    }));
+}
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
 }
 if (!customElements.get('kos-button')) {
     customElements.define('kos-button', KosButton);

package/dist/u0-primitives/web-components/index.d.ts

@@ -0,0 +1,3 @@
+export { KosButton } from './button-component';
+export { KosInput } from './input-component';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/web-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/u0-primitives/web-components/index.js

@@ -0,0 +1,2 @@
+export { KosButton } from './button-component';
+export { KosInput } from './input-component';

package/dist/u0-primitives/web-components/input-component.d.ts

@@ -1,12 +1,16 @@
+import type { Props as InputProps } from '../input/Input.svelte';
 declare class KosInput extends HTMLElement {
     static observedAttributes: string[];
     private svelteRoot;
+    private svelteComponent;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    getComponentProps(): Record<string, unknown>;
+    getComponentProps(): InputProps;
     render(): void;
+    destroy(): void;
+    private ensureHostStyle;
 }
 export { KosInput };
 export default KosInput;

package/dist/u0-primitives/web-components/input-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/input-component.ts"],"names":[],"mappings":"AAWA,cAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,WAOvB;IAEF,OAAO,CAAC,UAAU,CAA4B;;IAO9C,iBAAiB;IAIjB,oBAAoB;IAOpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IA0B5C,MAAM;CA4BP;AAMD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"input-component.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/web-components/input-component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOjE,cAAM,QAAS,SAAQ,WAAW;IAChC,MAAM,CAAC,kBAAkB,WASvB;IAEF,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAAwC;;IAO/D,iBAAiB;IAIjB,oBAAoB;IAIpB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAMvF,iBAAiB,IAAI,UAAU;IAqC/B,MAAM;IAaN,OAAO;IAWP,OAAO,CAAC,eAAe;CAYxB;AAUD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,eAAe,QAAQ,CAAC"}

package/dist/u0-primitives/web-components/input-component.js

@@ -1,23 +1,19 @@
-/**
- * KosInput Web Component
- *
- * Web Component wrapper for the KosInput Svelte component.
- * Enables usage of KosInput in vanilla JS, React, or other frameworks.
- *
- * @package @kos/design-system/u0-primitives
- */
-import { mount } from 'svelte';
+import { mount, unmount } from 'svelte';
 import Input from '../input/Input.svelte';
+const types = ['text', 'search', 'password', 'email', 'url'];
 class KosInput extends HTMLElement {
     static observedAttributes = [
         'type',
         'value',
         'placeholder',
         'disabled',
-        'readonly',
-        'required'
+        'error',
+        'class',
+        'id',
+        'name'
     ];
     svelteRoot = null;
+    svelteComponent = null;
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -26,10 +22,7 @@ class KosInput extends HTMLElement {
         this.render();
     }
     disconnectedCallback() {
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-            this.svelteRoot = null;
-        }
+        this.destroy();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
@@ -38,51 +31,75 @@ class KosInput extends HTMLElement {
     }
     getComponentProps() {
         const props = {};
-        if (this.hasAttribute('type')) {
-            props.type = this.getAttribute('type') ?? 'text';
+        const type = this.getAttribute('type');
+        const value = this.getAttribute('value');
+        const placeholder = this.getAttribute('placeholder');
+        const className = this.getAttribute('class');
+        const id = this.getAttribute('id');
+        const name = this.getAttribute('name');
+        if (type) {
+            props.type = readOption(type, types, 'text');
         }
-        if (this.hasAttribute('value')) {
-            props.value = this.getAttribute('value') ?? '';
+        if (value !== null) {
+            props.value = value;
         }
-        if (this.hasAttribute('placeholder')) {
-            props.placeholder = this.getAttribute('placeholder') ?? '';
+        if (placeholder !== null) {
+            props.placeholder = placeholder;
         }
         if (this.hasAttribute('disabled')) {
             props.disabled = true;
         }
-        if (this.hasAttribute('readonly')) {
-            props.readonly = true;
+        if (this.hasAttribute('error')) {
+            props.error = true;
+        }
+        if (className) {
+            props.class = className;
         }
-        if (this.hasAttribute('required')) {
-            props.required = true;
+        if (id) {
+            props.id = id;
+        }
+        if (name) {
+            props.name = name;
         }
         return props;
     }
     render() {
         if (!this.shadowRoot)
             return;
-        if (this.svelteRoot) {
-            this.svelteRoot.innerHTML = '';
-        }
+        this.destroy();
         this.svelteRoot = document.createElement('div');
         this.shadowRoot.appendChild(this.svelteRoot);
-        mount(Input, {
+        this.svelteComponent = mount(Input, {
             target: this.svelteRoot,
             props: this.getComponentProps()
         });
-        if (!this.shadowRoot.querySelector('style')) {
-            const style = document.createElement('style');
-            style.textContent = `
-        :host {
-          display: block;
-          font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
-        }
-        ::slotted(*) {
+        this.ensureHostStyle();
+    }
+    destroy() {
+        if (this.svelteComponent) {
+            void unmount(this.svelteComponent);
+            this.svelteComponent = null;
         }
-      `;
-            this.shadowRoot.appendChild(style);
+        if (this.svelteRoot) {
+            this.svelteRoot.remove();
+            this.svelteRoot = null;
         }
     }
+    ensureHostStyle() {
+        if (!this.shadowRoot || this.shadowRoot.querySelector('style'))
+            return;
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+        font-family: var(--font-sans, 'Outfit', system-ui, sans-serif);
+      }
+    `;
+        this.shadowRoot.appendChild(style);
+    }
+}
+function readOption(value, options, fallback) {
+    return options.includes(value) ? value : fallback;
 }
 if (!customElements.get('kos-input')) {
     customElements.define('kos-input', KosInput);

package/dist/u0-primitives/web-components/web-components.test.js

@@ -0,0 +1,96 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { KosButton } from './button-component';
+import { KosInput } from './input-component';
+describe('u0-primitives/web-components', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('defines and renders the kos-button custom element', () => {
+        const element = createButton({
+            variant: 'danger',
+            size: 'lg',
+            type: 'submit',
+            class: 'custom-button',
+            'aria-label': 'Submit form',
+            'aria-expanded': 'true',
+            children: 'Save'
+        });
+        const button = element.shadowRoot?.querySelector('button');
+        expect(customElements.get('kos-button')).toBe(KosButton);
+        expect(button).not.toBeNull();
+        expect(button?.getAttribute('type')).toBe('submit');
+        expect(button?.getAttribute('aria-label')).toBe('Submit form');
+        expect(button?.getAttribute('aria-expanded')).toBe('true');
+        expect(button?.classList.contains('variant-danger')).toBe(true);
+        expect(button?.classList.contains('size-lg')).toBe(true);
+        expect(button?.classList.contains('custom-button')).toBe(true);
+        expect(button?.textContent?.trim()).toBe('Save');
+    });
+    it('updates the kos-button when attributes change', () => {
+        const element = createButton();
+        const button = element.shadowRoot?.querySelector('button');
+        expect(button?.hasAttribute('disabled')).toBe(false);
+        element.setAttribute('loading', '');
+        const updatedButton = element.shadowRoot?.querySelector('button');
+        expect(updatedButton?.hasAttribute('disabled')).toBe(true);
+        expect(updatedButton?.classList.contains('is-loading')).toBe(true);
+    });
+    it('falls back to safe button defaults for invalid attributes', () => {
+        const element = createButton({
+            variant: 'invalid',
+            size: 'invalid',
+            type: 'invalid'
+        });
+        const button = element.shadowRoot?.querySelector('button');
+        expect(button?.classList.contains('variant-primary')).toBe(true);
+        expect(button?.classList.contains('size-md')).toBe(true);
+        expect(button?.getAttribute('type')).toBe('button');
+    });
+    it('defines and renders the kos-input custom element', () => {
+        const element = createInput({
+            type: 'search',
+            value: 'needle',
+            placeholder: 'Search',
+            disabled: '',
+            error: '',
+            class: 'custom-input',
+            id: 'search-box',
+            name: 'q'
+        });
+        const input = element.shadowRoot?.querySelector('input');
+        expect(customElements.get('kos-input')).toBe(KosInput);
+        expect(input).not.toBeNull();
+        expect(input?.getAttribute('type')).toBe('search');
+        expect(input.value).toBe('needle');
+        expect(input?.getAttribute('placeholder')).toBe('Search');
+        expect(input?.getAttribute('id')).toBe('search-box');
+        expect(input?.getAttribute('name')).toBe('q');
+        expect(input?.hasAttribute('disabled')).toBe(true);
+        expect(input?.getAttribute('aria-invalid')).toBe('true');
+        expect(element.shadowRoot?.querySelector('.custom-input')).not.toBeNull();
+    });
+    it('updates the kos-input when attributes change', () => {
+        const element = createInput({ type: 'text' });
+        expect(element.shadowRoot?.querySelector('input')?.getAttribute('type')).toBe('text');
+        element.setAttribute('type', 'password');
+        const input = element.shadowRoot?.querySelector('input');
+        expect(input?.getAttribute('type')).toBe('password');
+    });
+    it('falls back to safe input defaults for invalid attributes', () => {
+        const element = createInput({ type: 'tel' });
+        const input = element.shadowRoot?.querySelector('input');
+        expect(input?.getAttribute('type')).toBe('text');
+    });
+});
+function createButton(attributes = {}) {
+    const element = document.createElement('kos-button');
+    Object.entries(attributes).forEach(([name, value]) => element.setAttribute(name, value));
+    document.body.appendChild(element);
+    return element;
+}
+function createInput(attributes) {
+    const element = document.createElement('kos-input');
+    Object.entries(attributes).forEach(([name, value]) => element.setAttribute(name, value));
+    document.body.appendChild(element);
+    return element;
+}