@skewedaspect/sleekspace-ui 0.8.0 → 0.9.0

package/src/static/components/__tests__/helpers.test.ts

@@ -0,0 +1,837 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Static Component Helper Tests
+//
+// One describe block per helper. Each block has a 'default' test and a modifier test so the
+// render path is exercised without exhaustively covering every prop combination. Modifier tests
+// pick the first non-trivial class the spec can emit (kind, boolean flag, etc.).
+//----------------------------------------------------------------------------------------------------------------------
+
+import { describe, expect, it } from 'vitest';
+
+import { panel } from '../panel';
+import { card } from '../card';
+import { alert } from '../alert';
+import { divider } from '../divider';
+import { page } from '../page';
+import { group } from '../group';
+import { skeleton } from '../skeleton';
+import { progress } from '../progress';
+import { spinner } from '../spinner';
+import { navBar } from '../navBar';
+import { toolbar } from '../toolbar';
+import { sidebar } from '../sidebar';
+import { breadcrumbs } from '../breadcrumbs';
+import { pagination } from '../pagination';
+import { tag } from '../tag';
+import { avatar } from '../avatar';
+import { field } from '../field';
+import { table } from '../table';
+import { tooltip } from '../tooltip';
+import { button } from '../button';
+import { input } from '../input';
+import { textarea } from '../textarea';
+import { select } from '../select';
+import { slider } from '../slider';
+import { colorPicker } from '../colorPicker';
+import { checkbox } from '../checkbox';
+import { radio } from '../radio';
+import { switchInput } from '../switchInput';
+import { numberInput } from '../numberInput';
+import { tagsInput } from '../tagsInput';
+import { dropdown } from '../dropdown';
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 8: Panel pilot
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('panel()', () =>
+{
+    it('default', () =>
+    {
+        expect(panel({}, 'x')).toBe('<div class="sk-panel">x</div>');
+    });
+
+    it('kind', () =>
+    {
+        expect(panel({ kind: 'primary' }, 'x')).toBe('<div class="sk-panel sk-primary">x</div>');
+    });
+
+    it('size', () =>
+    {
+        expect(panel({ size: 'lg' }, 'x')).toBe('<div class="sk-panel sk-lg sk-size-lg">x</div>');
+    });
+
+    it('noBorder flag', () =>
+    {
+        expect(panel({ noBorder: true }, 'x')).toBe('<div class="sk-panel sk-no-border">x</div>');
+    });
+
+    it('custom colors emit inline style', () =>
+    {
+        expect(panel({ baseColor: '#f00', textColor: '#fff' }, 'x'))
+            .toBe('<div class="sk-panel" style="--sk-panel-color-base: #f00; --sk-panel-fg: #fff;">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 9: Container helpers
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('card()', () =>
+{
+    it('default', () =>
+    {
+        expect(card({}, 'x')).toBe('<div class="sk-card">x</div>');
+    });
+
+    it('kind', () =>
+    {
+        expect(card({ kind: 'primary' }, 'x')).toBe('<div class="sk-card sk-primary">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('alert()', () =>
+{
+    // Default kind is 'info' — feedback kind, so icon is shown.
+    it('default (info kind — has icon)', () =>
+    {
+        const html = alert({}, 'x');
+        expect(html).toContain('class="sk-alert sk-info"');
+        expect(html).toContain('role="alert"');
+        expect(html).toContain('<div class="sk-alert-icon">');
+        expect(html).toContain('<div class="sk-alert-content">x</div>');
+    });
+
+    it('warning kind (has icon)', () =>
+    {
+        const html = alert({ kind: 'warning' }, 'x');
+        expect(html).toContain('class="sk-alert sk-warning"');
+        expect(html).toContain('<div class="sk-alert-icon">');
+        expect(html).toContain('<div class="sk-alert-content">x</div>');
+    });
+
+    it('neutral kind (no icon)', () =>
+    {
+        const html = alert({ kind: 'neutral' }, 'x');
+        expect(html).toContain('class="sk-alert sk-neutral"');
+        expect(html).not.toContain('sk-alert-icon');
+        expect(html).toContain('<div class="sk-alert-content">x</div>');
+    });
+
+    it('icon: false suppresses icon on feedback kind', () =>
+    {
+        const html = alert({ kind: 'danger', icon: false }, 'x');
+        expect(html).not.toContain('sk-alert-icon');
+        expect(html).toContain('<div class="sk-alert-content">x</div>');
+    });
+
+    it('custom icon string', () =>
+    {
+        const html = alert({ kind: 'neutral', icon: '<span>!</span>' }, 'x');
+        expect(html).toContain('<div class="sk-alert-icon"><span>!</span></div>');
+        expect(html).toContain('<div class="sk-alert-content">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('divider()', () =>
+{
+    // Default: horizontal orientation, neutral kind, md size — matches Vue's withDefaults().
+    it('default', () =>
+    {
+        expect(divider({})).toBe('<hr class="sk-divider sk-horizontal sk-neutral sk-md" role="separator">');
+    });
+
+    it('orientation vertical', () =>
+    {
+        expect(divider({ orientation: 'vertical' }))
+            .toBe('<hr class="sk-divider sk-vertical sk-neutral sk-md" role="separator">');
+    });
+
+    it('kind', () =>
+    {
+        expect(divider({ kind: 'primary' }))
+            .toBe('<hr class="sk-divider sk-horizontal sk-primary sk-md" role="separator">');
+    });
+
+    it('subtle variant', () =>
+    {
+        expect(divider({ variant: 'subtle' }))
+            .toBe('<hr class="sk-divider sk-horizontal sk-neutral sk-md sk-subtle" role="separator">');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('page()', () =>
+{
+    it('default', () =>
+    {
+        expect(page({}, 'x')).toBe('<div class="sk-page">x</div>');
+    });
+
+    it('flush flag', () =>
+    {
+        expect(page({ flush: true }, 'x')).toBe('<div class="sk-page sk-flush">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('group()', () =>
+{
+    it('default', () =>
+    {
+        expect(group({}, 'x')).toBe('<div class="sk-group">x</div>');
+    });
+
+    it('orientation', () =>
+    {
+        expect(group({ orientation: 'vertical' }, 'x')).toBe('<div class="sk-group sk-orientation-vertical">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('skeleton()', () =>
+{
+    // Default: text variant + shimmer animation — matches Vue's withDefaults().
+    it('default', () =>
+    {
+        expect(skeleton({})).toBe('<div class="sk-skeleton sk-text sk-shimmer"></div>');
+    });
+
+    it('variant circular', () =>
+    {
+        expect(skeleton({ variant: 'circular' })).toBe('<div class="sk-skeleton sk-circular sk-shimmer"></div>');
+    });
+
+    it('animation: none suppresses animation class', () =>
+    {
+        expect(skeleton({ animation: 'none' })).toBe('<div class="sk-skeleton sk-text"></div>');
+    });
+
+    it('pulse animation', () =>
+    {
+        expect(skeleton({ animation: 'pulse' })).toBe('<div class="sk-skeleton sk-text sk-pulse"></div>');
+    });
+
+    it('width prop emits inline style', () =>
+    {
+        expect(skeleton({ width: '200px' })).toBe(
+            '<div class="sk-skeleton sk-text sk-shimmer" style="width: 200px;"></div>'
+        );
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('progress()', () =>
+{
+    it('default', () =>
+    {
+        expect(progress({}, '')).toBe('<progress class="sk-progress" />');
+    });
+
+    it('kind', () =>
+    {
+        expect(progress({ kind: 'primary' }, '')).toBe('<progress class="sk-progress sk-primary" />');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('spinner()', () =>
+{
+    // Default: primary kind, md size, circular variant + inner circular DOM structure.
+    it('default (circular variant, primary kind)', () =>
+    {
+        const html = spinner({});
+        expect(html).toContain('class="sk-spinner sk-primary sk-md sk-variant-circular"');
+        expect(html).toContain('role="status"');
+        expect(html).toContain('aria-live="polite"');
+        expect(html).toContain('aria-label="Loading"');
+        expect(html).toContain('<div class="sk-spinner-circular">');
+        expect(html).toContain('<div class="sk-arc sk-arc-large"></div>');
+        expect(html).toContain('<div class="sk-arc sk-arc-small"></div>');
+    });
+
+    it('dots variant', () =>
+    {
+        const html = spinner({ variant: 'dots' });
+        expect(html).toContain('sk-variant-dots');
+        expect(html).toContain('<div class="sk-spinner-dots">');
+        expect(html).toContain('<div class="sk-dot"></div>');
+    });
+
+    it('crosshair variant', () =>
+    {
+        const html = spinner({ variant: 'crosshair' });
+        expect(html).toContain('sk-variant-crosshair');
+        expect(html).toContain('<div class="sk-crosshair-loader"></div>');
+    });
+
+    it('kind and size', () =>
+    {
+        const html = spinner({ kind: 'accent', size: 'lg' });
+        expect(html).toContain('sk-spinner sk-accent sk-lg sk-variant-circular');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('navBar()', () =>
+{
+    // sticky defaults to true — sk-sticky always present unless explicitly disabled.
+    it('default (neutral kind, sticky)', () =>
+    {
+        const html = navBar({}, 'x');
+        expect(html).toContain('class="sk-navbar sk-sticky"');
+        expect(html).toContain('<div class="sk-navbar-content">');
+        expect(html).toContain('<div class="sk-navbar-nav">x</div>');
+    });
+
+    it('kind', () =>
+    {
+        const html = navBar({ kind: 'primary' }, 'x');
+        expect(html).toContain('class="sk-navbar sk-primary sk-sticky"');
+        expect(html).toContain('<div class="sk-navbar-nav">x</div>');
+    });
+
+    it('sticky: false omits sk-sticky', () =>
+    {
+        const html = navBar({ sticky: false }, 'x');
+        expect(html).not.toContain('sk-sticky');
+    });
+
+    it('brand prop emits sk-navbar-brand', () =>
+    {
+        const html = navBar({ brand: '<img src="logo.svg" />' }, 'Links');
+        expect(html).toContain('<div class="sk-navbar-brand"><img src="logo.svg" /></div>');
+        expect(html).toContain('<div class="sk-navbar-nav">Links</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('toolbar()', () =>
+{
+    // Default corners = all four; default orientation = horizontal.
+    it('default (all corners, horizontal)', () =>
+    {
+        const html = toolbar({}, 'x');
+        expect(html).toContain(
+            'class="sk-toolbar sk-horizontal sk-cut-top-left sk-cut-top-right sk-cut-bottom-right sk-cut-bottom-left"'
+        );
+        expect(html).toContain('role="toolbar"');
+        expect(html).toContain('>x</div>');
+    });
+
+    it('kind', () =>
+    {
+        const html = toolbar({ kind: 'primary' }, 'x');
+        expect(html).toContain('sk-toolbar sk-primary sk-horizontal');
+    });
+
+    it('vertical orientation', () =>
+    {
+        const html = toolbar({ orientation: 'vertical' }, 'x');
+        expect(html).toContain('sk-vertical');
+        expect(html).not.toContain('sk-horizontal');
+    });
+
+    it('empty corners', () =>
+    {
+        const html = toolbar({ corners: [] }, 'x');
+        expect(html).not.toContain('sk-cut-');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('sidebar()', () =>
+{
+    it('default (neutral, left side)', () =>
+    {
+        const html = sidebar({}, 'x');
+        expect(html).toContain('<aside class="sk-sidebar sk-neutral">');
+        expect(html).toContain(
+            'class="sk-panel sk-neutral sk-md sk-cut-bottom-right sk-decoration-bottom-right sk-sidebar-panel"'
+        );
+        expect(html).toContain('<div class="sk-panel-scroll-content">');
+        expect(html).toContain('<nav class="sk-sidebar-nav">x</nav>');
+    });
+
+    it('kind', () =>
+    {
+        const html = sidebar({ kind: 'primary' }, 'x');
+        expect(html).toContain('<aside class="sk-sidebar sk-primary">');
+        expect(html).toContain('sk-panel sk-primary');
+    });
+
+    it('right side uses bottom-left corner', () =>
+    {
+        const html = sidebar({ side: 'right' }, 'x');
+        expect(html).toContain('sk-sidebar-right');
+        expect(html).toContain('sk-cut-bottom-left');
+        expect(html).toContain('sk-decoration-bottom-left');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('breadcrumbs()', () =>
+{
+    it('default', () =>
+    {
+        expect(breadcrumbs({}, 'x')).toBe('<nav class="sk-breadcrumbs" aria-label="Breadcrumbs">x</nav>');
+    });
+
+    it('kind', () =>
+    {
+        expect(breadcrumbs({ kind: 'primary' }, 'x')).toBe(
+            '<nav class="sk-breadcrumbs sk-primary" aria-label="Breadcrumbs">x</nav>'
+        );
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('pagination()', () =>
+{
+    it('default', () =>
+    {
+        expect(pagination({}, 'x')).toBe('<nav class="sk-pagination" aria-label="Pagination">x</nav>');
+    });
+
+    it('kind', () =>
+    {
+        expect(pagination({ kind: 'primary' }, 'x')).toBe(
+            '<nav class="sk-pagination sk-primary" aria-label="Pagination">x</nav>'
+        );
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('tag()', () =>
+{
+    // Default: neutral kind, solid variant, md size — matches Vue's withDefaults().
+    // Content is always wrapped in sk-tag-content span.
+    it('default (neutral, solid, md — sk-tag-content wrapper)', () =>
+    {
+        const html = tag({}, 'x');
+        expect(html).toContain('class="sk-tag sk-neutral sk-solid sk-md"');
+        expect(html).toContain('<span class="sk-tag-content">x</span>');
+    });
+
+    it('kind', () =>
+    {
+        const html = tag({ kind: 'primary' }, 'x');
+        expect(html).toContain('class="sk-tag sk-primary sk-solid sk-md"');
+        expect(html).toContain('<span class="sk-tag-content">x</span>');
+    });
+
+    it('removable emits remove button', () =>
+    {
+        const html = tag({ removable: true }, 'Label');
+        expect(html).toContain('sk-removable');
+        expect(html).toContain('<span class="sk-tag-content">Label</span>');
+        expect(html).toContain('<button type="button" class="sk-tag-remove" aria-label="Remove">');
+        expect(html).toContain('</button>');
+    });
+
+    it('variant and size modifiers', () =>
+    {
+        const html = tag({ variant: 'outline', size: 'sm' }, 'x');
+        expect(html).toContain('sk-tag sk-neutral sk-outline sk-sm');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('avatar()', () =>
+{
+    // Default: neutral kind, md size, no src/initials → default SVG icon.
+    it('default (neutral, md — SVG icon fallback)', () =>
+    {
+        const html = avatar({});
+        expect(html).toContain('class="sk-avatar sk-neutral sk-md"');
+        expect(html).toContain('<svg class="sk-avatar-icon"');
+        expect(html).toContain('fill="currentColor"');
+    });
+
+    it('kind emits kind class', () =>
+    {
+        const html = avatar({ kind: 'primary' });
+        expect(html).toContain('class="sk-avatar sk-primary sk-md"');
+        expect(html).toContain('<svg class="sk-avatar-icon"');
+    });
+
+    it('src emits <img> element', () =>
+    {
+        const html = avatar({ src: '/x.jpg', alt: 'Jane Doe' });
+        expect(html).toContain('<img src="/x.jpg" alt="Jane Doe" class="sk-avatar-image">');
+        expect(html).not.toContain('sk-avatar-icon');
+        expect(html).not.toContain('sk-avatar-initials');
+    });
+
+    it('initials emits <span class="sk-avatar-initials">', () =>
+    {
+        const html = avatar({ initials: 'jd' });
+        expect(html).toContain('<span class="sk-avatar-initials">JD</span>');
+        expect(html).not.toContain('sk-avatar-icon');
+    });
+
+    it('initials truncated to 2 chars, uppercased', () =>
+    {
+        const html = avatar({ initials: 'john' });
+        expect(html).toContain('<span class="sk-avatar-initials">JO</span>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('field()', () =>
+{
+    // Default: labelPosition='top' → sk-label-top, children wrapped in sk-field-input-wrapper.
+    it('default (sk-label-top, input wrapper)', () =>
+    {
+        const html = field({}, 'x');
+        expect(html).toContain('class="sk-field sk-label-top"');
+        expect(html).toContain('<div class="sk-field-input-wrapper">x</div>');
+        expect(html).not.toContain('sk-field-label');
+        expect(html).not.toContain('sk-field-error');
+    });
+
+    it('label prop emits <label class="sk-field-label">', () =>
+    {
+        const html = field({ label: 'Email' }, 'x');
+        expect(html).toContain('<label class="sk-field-label">Email</label>');
+        expect(html).toContain('<div class="sk-field-input-wrapper">x</div>');
+    });
+
+    it('required adds asterisk span inside label', () =>
+    {
+        const html = field({ label: 'Name', required: true }, 'x');
+        expect(html).toContain('Name<span class="sk-field-required">*</span>');
+    });
+
+    it('error prop adds sk-has-error class and sk-field-error paragraph', () =>
+    {
+        const html = field({ error: 'Required' }, 'x');
+        expect(html).toContain('class="sk-field sk-label-top sk-has-error"');
+        expect(html).toContain('<p class="sk-field-error">Required</p>');
+        expect(html).not.toContain('sk-field-description');
+    });
+
+    it('description shown when no error', () =>
+    {
+        const html = field({ description: 'Help text' }, 'x');
+        expect(html).toContain('<p class="sk-field-description">Help text</p>');
+    });
+
+    it('description hidden when error is present', () =>
+    {
+        const html = field({ description: 'Help', error: 'Bad' }, 'x');
+        expect(html).toContain('<p class="sk-field-error">Bad</p>');
+        expect(html).not.toContain('sk-field-description');
+    });
+
+    it('labelPosition left', () =>
+    {
+        const html = field({ labelPosition: 'left' }, 'x');
+        expect(html).toContain('class="sk-field sk-label-left"');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('table()', () =>
+{
+    // Default: sk-table-wrapper + sk-table with neutral kind, default variant,
+    // hoverable=true, bordered=true, innerBorders=false → sk-no-inner-borders.
+    it('default (wrapper div + table with hoverable/bordered/no-inner-borders)', () =>
+    {
+        const html = table({}, 'x');
+        expect(html).toContain('class="sk-table-wrapper sk-table-wrapper-neutral"');
+        expect(html).toContain('class="sk-table sk-neutral sk-default sk-hoverable sk-bordered sk-no-inner-borders"');
+        expect(html).toContain('>x</table>');
+    });
+
+    it('kind propagates to both wrapper and table', () =>
+    {
+        const html = table({ kind: 'primary' }, 'x');
+        expect(html).toContain('sk-table-wrapper-primary');
+        expect(html).toContain('class="sk-table sk-primary sk-default sk-hoverable sk-bordered sk-no-inner-borders"');
+    });
+
+    it('striped adds sk-striped', () =>
+    {
+        const html = table({ striped: true }, 'x');
+        expect(html).toContain('sk-striped');
+    });
+
+    it('hoverable: false removes sk-hoverable', () =>
+    {
+        const html = table({ hoverable: false }, 'x');
+        expect(html).not.toContain('sk-hoverable');
+    });
+
+    it('darkBackground adds sk-dark-background to wrapper', () =>
+    {
+        const html = table({ darkBackground: true }, 'x');
+        expect(html).toContain('sk-dark-background');
+    });
+
+    it('subtle adds sk-subtle to both wrapper and table', () =>
+    {
+        const html = table({ subtle: true }, 'x');
+        expect(html).toContain('sk-table-wrapper sk-table-wrapper-neutral sk-subtle');
+        expect(html).toContain('sk-subtle');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('tooltip()', () =>
+{
+    it('default', () =>
+    {
+        expect(tooltip({}, 'x')).toBe('<div class="sk-tooltip" role="tooltip">x</div>');
+    });
+
+    it('kind', () =>
+    {
+        expect(tooltip({ kind: 'primary' }, 'x')).toBe('<div class="sk-tooltip sk-primary" role="tooltip">x</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 10: Button helper
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('button()', () =>
+{
+    it('default emits <button type="button"> with chrome span', () =>
+    {
+        expect(button({}, 'Save'))
+            .toBe('<button class="sk-button" type="button"><span class="sk-button-chrome">Save</span></button>');
+    });
+
+    it('kind + size + variant', () =>
+    {
+        expect(button({ kind: 'primary', size: 'lg', variant: 'outline' }, 'Click'))
+            .toBe('<button class="sk-button sk-primary sk-lg sk-size-lg sk-outline" type="button">'
+                + '<span class="sk-button-chrome">Click</span></button>');
+    });
+
+    it('loading and pressed emit aria attrs and boolean classes', () =>
+    {
+        expect(button({ loading: true, pressed: true }, 'x'))
+            .toBe('<button class="sk-button sk-loading sk-pressed" type="button" aria-busy="true" aria-pressed="true">'
+                + '<span class="sk-button-chrome">x</span></button>');
+    });
+
+    it('href renders as <a>, not <button>', () =>
+    {
+        expect(button({ href: '/docs' }, 'Docs'))
+            .toBe('<a class="sk-button" href="/docs"><span class="sk-button-chrome">Docs</span></a>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 11: Form-control helpers
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('input()', () =>
+{
+    it('default emits void input', () =>
+    {
+        expect(input({}))
+            .toBe('<input class="sk-input" />');
+    });
+
+    it('passes through value, placeholder, name via props', () =>
+    {
+        expect(input({ type: 'text', value: 'hi', placeholder: 'Your name', name: 'user' }))
+            .toBe('<input class="sk-input" type="text" value="hi" placeholder="Your name" name="user" />');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('textarea()', () =>
+{
+    it('default', () =>
+    {
+        expect(textarea({}, 'content'))
+            .toBe('<textarea class="sk-textarea">content</textarea>');
+    });
+
+    it('passes through placeholder and name', () =>
+    {
+        expect(textarea({ placeholder: 'Enter text', name: 'bio' }, ''))
+            .toBe('<textarea class="sk-textarea" placeholder="Enter text" name="bio"></textarea>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('select()', () =>
+{
+    it('renders with option children', () =>
+    {
+        const options = '<option value="a">A</option><option value="b">B</option>';
+        expect(select({}, options))
+            .toBe('<select class="sk-select"><option value="a">A</option><option value="b">B</option></select>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('slider()', () =>
+{
+    it('default emits type=range', () =>
+    {
+        expect(slider({}))
+            .toBe('<input class="sk-slider" type="range" />');
+    });
+
+    it('passes through min, max, step, value', () =>
+    {
+        expect(slider({ min: '0', max: '100', step: '5', value: '50' }))
+            .toBe('<input class="sk-slider" type="range" min="0" max="100" step="5" value="50" />');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('colorPicker()', () =>
+{
+    it('default emits type=color', () =>
+    {
+        expect(colorPicker({}))
+            .toBe('<input class="sk-color-picker" type="color" />');
+    });
+
+    it('passes through value', () =>
+    {
+        expect(colorPicker({ value: '#ff0000' }))
+            .toBe('<input class="sk-color-picker" type="color" value="#ff0000" />');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 12: Compound form helpers
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('checkbox()', () =>
+{
+    it('default', () =>
+    {
+        expect(checkbox({}, 'Agree'))
+            .toBe('<label class="sk-checkbox"><input type="checkbox" /><span class="sk-checkbox-box"></span>'
+                + '<span class="sk-checkbox-label">Agree</span></label>');
+    });
+
+    it('checked + disabled', () =>
+    {
+        expect(checkbox({ checked: true, disabled: true }, 'x'))
+            .toBe('<label class="sk-checkbox"><input type="checkbox" checked disabled />'
+                + '<span class="sk-checkbox-box"></span><span class="sk-checkbox-label">x</span></label>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('radio()', () =>
+{
+    it('default with name and value', () =>
+    {
+        expect(radio({ name: 'flavor', value: 'chocolate' }, 'Chocolate'))
+            .toBe('<label class="sk-radio"><input type="radio" name="flavor" value="chocolate" />'
+                + '<span class="sk-radio-dot"></span><span class="sk-radio-label">Chocolate</span></label>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('switchInput()', () =>
+{
+    it('default', () =>
+    {
+        expect(switchInput({ name: 'notify' }, 'Notifications'))
+            .toBe('<label class="sk-switch"><input type="checkbox" name="notify" />'
+                + '<span class="sk-switch-track"><span class="sk-switch-thumb"></span></span>'
+                + '<span class="sk-switch-label">Notifications</span></label>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('numberInput()', () =>
+{
+    it('default', () =>
+    {
+        expect(numberInput({}))
+            .toBe('<div class="sk-number-input-wrapper">'
+                + '<input class="sk-number-input-field" type="number" />'
+                + '</div>');
+    });
+
+    it('with min, max, step, name', () =>
+    {
+        expect(numberInput({ min: '0', max: '100', step: '1', name: 'qty' }))
+            .toBe('<div class="sk-number-input-wrapper">'
+                + '<input class="sk-number-input-field" type="number" min="0" max="100" step="1" name="qty" />'
+                + '</div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('tagsInput()', () =>
+{
+    it('default empty', () =>
+    {
+        expect(tagsInput({}))
+            .toBe('<div class="sk-tags-input"></div>');
+    });
+
+    it('with tags', () =>
+    {
+        expect(tagsInput({}, '<span class="sk-tags-input-tag">foo</span>'))
+            .toBe('<div class="sk-tags-input"><span class="sk-tags-input-tag">foo</span></div>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+// Task 13: Dropdown helper
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('dropdown()', () =>
+{
+    it('default', () =>
+    {
+        expect(dropdown({ summary: 'Actions' }, '<a href="#">Item 1</a>'))
+            .toBe('<details class="sk-dropdown"><summary>Actions</summary><a href="#">Item 1</a></details>');
+    });
+
+    it('open attribute when props.open is true', () =>
+    {
+        expect(dropdown({ summary: 'x', open: true }, 'content'))
+            .toBe('<details class="sk-dropdown" open><summary>x</summary>content</details>');
+    });
+
+    it('kind + size', () =>
+    {
+        expect(dropdown({ summary: 'x', kind: 'primary', size: 'md' }, 'content'))
+            .toBe('<details class="sk-dropdown sk-primary sk-md sk-size-md"><summary>x</summary>content</details>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------