@skewedaspect/sleekspace-ui 0.9.0 → 0.10.0

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

@@ -8,6 +8,8 @@
 
 import { describe, expect, it } from 'vitest';
 
+import { stringH } from '../../stringH';
+
 import { panel } from '../panel';
 import { card } from '../card';
 import { alert } from '../alert';
@@ -39,6 +41,8 @@ import { switchInput } from '../switchInput';
 import { numberInput } from '../numberInput';
 import { tagsInput } from '../tagsInput';
 import { dropdown } from '../dropdown';
+import { inputGroup } from '../inputGroup';
+import { inputGroupAddon } from '../inputGroupAddon';
 
 //----------------------------------------------------------------------------------------------------------------------
 // Task 8: Panel pilot
@@ -48,27 +52,27 @@ describe('panel()', () =>
 {
     it('default', () =>
     {
-        expect(panel({}, 'x')).toBe('<div class="sk-panel">x</div>');
+        expect(panel(stringH, {}, 'x')).toBe('<div class="sk-panel">x</div>');
     });
 
     it('kind', () =>
     {
-        expect(panel({ kind: 'primary' }, 'x')).toBe('<div class="sk-panel sk-primary">x</div>');
+        expect(panel(stringH, { 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>');
+        expect(panel(stringH, { 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>');
+        expect(panel(stringH, { 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'))
+        expect(panel(stringH, { baseColor: '#f00', textColor: '#fff' }, 'x'))
             .toBe('<div class="sk-panel" style="--sk-panel-color-base: #f00; --sk-panel-fg: #fff;">x</div>');
     });
 });
@@ -81,12 +85,12 @@ describe('card()', () =>
 {
     it('default', () =>
     {
-        expect(card({}, 'x')).toBe('<div class="sk-card">x</div>');
+        expect(card(stringH, {}, 'x')).toBe('<div class="sk-card">x</div>');
     });
 
     it('kind', () =>
     {
-        expect(card({ kind: 'primary' }, 'x')).toBe('<div class="sk-card sk-primary">x</div>');
+        expect(card(stringH, { kind: 'primary' }, 'x')).toBe('<div class="sk-card sk-primary">x</div>');
     });
 });
 
@@ -97,7 +101,7 @@ describe('alert()', () =>
     // Default kind is 'info' — feedback kind, so icon is shown.
     it('default (info kind — has icon)', () =>
     {
-        const html = alert({}, 'x');
+        const html = alert(stringH, {}, 'x');
         expect(html).toContain('class="sk-alert sk-info"');
         expect(html).toContain('role="alert"');
         expect(html).toContain('<div class="sk-alert-icon">');
@@ -106,7 +110,7 @@ describe('alert()', () =>
 
     it('warning kind (has icon)', () =>
     {
-        const html = alert({ kind: 'warning' }, 'x');
+        const html = alert(stringH, { 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>');
@@ -114,7 +118,7 @@ describe('alert()', () =>
 
     it('neutral kind (no icon)', () =>
     {
-        const html = alert({ kind: 'neutral' }, 'x');
+        const html = alert(stringH, { 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>');
@@ -122,14 +126,14 @@ describe('alert()', () =>
 
     it('icon: false suppresses icon on feedback kind', () =>
     {
-        const html = alert({ kind: 'danger', icon: false }, 'x');
+        const html = alert(stringH, { 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');
+        const html = alert(stringH, { 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>');
     });
@@ -142,25 +146,25 @@ 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">');
+        expect(divider(stringH, {})).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">');
+        expect(divider(stringH, { 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">');
+        expect(divider(stringH, { 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">');
+        expect(divider(stringH, { variant: 'subtle' }))
+            .toBe('<hr class="sk-divider sk-horizontal sk-neutral sk-md sk-subtle" role="separator" />');
     });
 });
 
@@ -170,12 +174,12 @@ describe('page()', () =>
 {
     it('default', () =>
     {
-        expect(page({}, 'x')).toBe('<div class="sk-page">x</div>');
+        expect(page(stringH, {}, '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>');
+        expect(page(stringH, { flush: true }, 'x')).toBe('<div class="sk-page sk-flush">x</div>');
     });
 });
 
@@ -185,12 +189,13 @@ describe('group()', () =>
 {
     it('default', () =>
     {
-        expect(group({}, 'x')).toBe('<div class="sk-group">x</div>');
+        expect(group(stringH, {}, '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>');
+        expect(group(stringH, { orientation: 'vertical' }, 'x'))
+            .toBe('<div class="sk-group sk-orientation-vertical">x</div>');
     });
 });
 
@@ -201,27 +206,28 @@ 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>');
+        expect(skeleton(stringH, {})).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>');
+        expect(skeleton(stringH, { 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>');
+        expect(skeleton(stringH, { 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>');
+        expect(skeleton(stringH, { animation: 'pulse' })).toBe('<div class="sk-skeleton sk-text sk-pulse"></div>');
     });
 
     it('width prop emits inline style', () =>
     {
-        expect(skeleton({ width: '200px' })).toBe(
+        expect(skeleton(stringH, { width: '200px' })).toBe(
             '<div class="sk-skeleton sk-text sk-shimmer" style="width: 200px;"></div>'
         );
     });
@@ -233,12 +239,12 @@ describe('progress()', () =>
 {
     it('default', () =>
     {
-        expect(progress({}, '')).toBe('<progress class="sk-progress" />');
+        expect(progress(stringH, {}, undefined)).toBe('<progress class="sk-progress" />');
     });
 
     it('kind', () =>
     {
-        expect(progress({ kind: 'primary' }, '')).toBe('<progress class="sk-progress sk-primary" />');
+        expect(progress(stringH, { kind: 'primary' }, undefined)).toBe('<progress class="sk-progress sk-primary" />');
     });
 });
 
@@ -249,7 +255,7 @@ describe('spinner()', () =>
     // Default: primary kind, md size, circular variant + inner circular DOM structure.
     it('default (circular variant, primary kind)', () =>
     {
-        const html = spinner({});
+        const html = spinner(stringH, {});
         expect(html).toContain('class="sk-spinner sk-primary sk-md sk-variant-circular"');
         expect(html).toContain('role="status"');
         expect(html).toContain('aria-live="polite"');
@@ -261,7 +267,7 @@ describe('spinner()', () =>
 
     it('dots variant', () =>
     {
-        const html = spinner({ variant: 'dots' });
+        const html = spinner(stringH, { variant: 'dots' });
         expect(html).toContain('sk-variant-dots');
         expect(html).toContain('<div class="sk-spinner-dots">');
         expect(html).toContain('<div class="sk-dot"></div>');
@@ -269,14 +275,14 @@ describe('spinner()', () =>
 
     it('crosshair variant', () =>
     {
-        const html = spinner({ variant: 'crosshair' });
+        const html = spinner(stringH, { 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' });
+        const html = spinner(stringH, { kind: 'accent', size: 'lg' });
         expect(html).toContain('sk-spinner sk-accent sk-lg sk-variant-circular');
     });
 });
@@ -288,7 +294,7 @@ describe('navBar()', () =>
     // sticky defaults to true — sk-sticky always present unless explicitly disabled.
     it('default (neutral kind, sticky)', () =>
     {
-        const html = navBar({}, 'x');
+        const html = navBar(stringH, {}, '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>');
@@ -296,20 +302,20 @@ describe('navBar()', () =>
 
     it('kind', () =>
     {
-        const html = navBar({ kind: 'primary' }, 'x');
+        const html = navBar(stringH, { 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');
+        const html = navBar(stringH, { 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');
+        const html = navBar(stringH, { 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>');
     });
@@ -322,7 +328,7 @@ describe('toolbar()', () =>
     // Default corners = all four; default orientation = horizontal.
     it('default (all corners, horizontal)', () =>
     {
-        const html = toolbar({}, 'x');
+        const html = toolbar(stringH, {}, '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"'
         );
@@ -332,20 +338,20 @@ describe('toolbar()', () =>
 
     it('kind', () =>
     {
-        const html = toolbar({ kind: 'primary' }, 'x');
+        const html = toolbar(stringH, { kind: 'primary' }, 'x');
         expect(html).toContain('sk-toolbar sk-primary sk-horizontal');
     });
 
     it('vertical orientation', () =>
     {
-        const html = toolbar({ orientation: 'vertical' }, 'x');
+        const html = toolbar(stringH, { orientation: 'vertical' }, 'x');
         expect(html).toContain('sk-vertical');
         expect(html).not.toContain('sk-horizontal');
     });
 
     it('empty corners', () =>
     {
-        const html = toolbar({ corners: [] }, 'x');
+        const html = toolbar(stringH, { corners: [] }, 'x');
         expect(html).not.toContain('sk-cut-');
     });
 });
@@ -356,7 +362,7 @@ describe('sidebar()', () =>
 {
     it('default (neutral, left side)', () =>
     {
-        const html = sidebar({}, 'x');
+        const html = sidebar(stringH, {}, '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"'
@@ -367,14 +373,14 @@ describe('sidebar()', () =>
 
     it('kind', () =>
     {
-        const html = sidebar({ kind: 'primary' }, 'x');
+        const html = sidebar(stringH, { 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');
+        const html = sidebar(stringH, { side: 'right' }, 'x');
         expect(html).toContain('sk-sidebar-right');
         expect(html).toContain('sk-cut-bottom-left');
         expect(html).toContain('sk-decoration-bottom-left');
@@ -387,12 +393,13 @@ describe('breadcrumbs()', () =>
 {
     it('default', () =>
     {
-        expect(breadcrumbs({}, 'x')).toBe('<nav class="sk-breadcrumbs" aria-label="Breadcrumbs">x</nav>');
+        expect(breadcrumbs(stringH, {}, 'x'))
+            .toBe('<nav class="sk-breadcrumbs" aria-label="Breadcrumbs">x</nav>');
     });
 
     it('kind', () =>
     {
-        expect(breadcrumbs({ kind: 'primary' }, 'x')).toBe(
+        expect(breadcrumbs(stringH, { kind: 'primary' }, 'x')).toBe(
             '<nav class="sk-breadcrumbs sk-primary" aria-label="Breadcrumbs">x</nav>'
         );
     });
@@ -404,12 +411,12 @@ describe('pagination()', () =>
 {
     it('default', () =>
     {
-        expect(pagination({}, 'x')).toBe('<nav class="sk-pagination" aria-label="Pagination">x</nav>');
+        expect(pagination(stringH, {}, 'x')).toBe('<nav class="sk-pagination" aria-label="Pagination">x</nav>');
     });
 
     it('kind', () =>
     {
-        expect(pagination({ kind: 'primary' }, 'x')).toBe(
+        expect(pagination(stringH, { kind: 'primary' }, 'x')).toBe(
             '<nav class="sk-pagination sk-primary" aria-label="Pagination">x</nav>'
         );
     });
@@ -423,21 +430,21 @@ describe('tag()', () =>
     // Content is always wrapped in sk-tag-content span.
     it('default (neutral, solid, md — sk-tag-content wrapper)', () =>
     {
-        const html = tag({}, 'x');
+        const html = tag(stringH, {}, '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');
+        const html = tag(stringH, { 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');
+        const html = tag(stringH, { 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">');
@@ -446,7 +453,7 @@ describe('tag()', () =>
 
     it('variant and size modifiers', () =>
     {
-        const html = tag({ variant: 'outline', size: 'sm' }, 'x');
+        const html = tag(stringH, { variant: 'outline', size: 'sm' }, 'x');
         expect(html).toContain('sk-tag sk-neutral sk-outline sk-sm');
     });
 });
@@ -458,7 +465,7 @@ describe('avatar()', () =>
     // Default: neutral kind, md size, no src/initials → default SVG icon.
     it('default (neutral, md — SVG icon fallback)', () =>
     {
-        const html = avatar({});
+        const html = avatar(stringH, {});
         expect(html).toContain('class="sk-avatar sk-neutral sk-md"');
         expect(html).toContain('<svg class="sk-avatar-icon"');
         expect(html).toContain('fill="currentColor"');
@@ -466,29 +473,29 @@ describe('avatar()', () =>
 
     it('kind emits kind class', () =>
     {
-        const html = avatar({ kind: 'primary' });
+        const html = avatar(stringH, { 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">');
+        const html = avatar(stringH, { 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' });
+        const html = avatar(stringH, { 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' });
+        const html = avatar(stringH, { initials: 'john' });
         expect(html).toContain('<span class="sk-avatar-initials">JO</span>');
     });
 });
@@ -500,7 +507,7 @@ 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');
+        const html = field(stringH, {}, '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');
@@ -509,20 +516,20 @@ describe('field()', () =>
 
     it('label prop emits <label class="sk-field-label">', () =>
     {
-        const html = field({ label: 'Email' }, 'x');
+        const html = field(stringH, { 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');
+        const html = field(stringH, { 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');
+        const html = field(stringH, { 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');
@@ -530,20 +537,20 @@ describe('field()', () =>
 
     it('description shown when no error', () =>
     {
-        const html = field({ description: 'Help text' }, 'x');
+        const html = field(stringH, { 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');
+        const html = field(stringH, { 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');
+        const html = field(stringH, { labelPosition: 'left' }, 'x');
         expect(html).toContain('class="sk-field sk-label-left"');
     });
 });
@@ -556,7 +563,7 @@ describe('table()', () =>
     // 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');
+        const html = table(stringH, {}, '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>');
@@ -564,32 +571,32 @@ describe('table()', () =>
 
     it('kind propagates to both wrapper and table', () =>
     {
-        const html = table({ kind: 'primary' }, 'x');
+        const html = table(stringH, { 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');
+        const html = table(stringH, { striped: true }, 'x');
         expect(html).toContain('sk-striped');
     });
 
     it('hoverable: false removes sk-hoverable', () =>
     {
-        const html = table({ hoverable: false }, 'x');
+        const html = table(stringH, { hoverable: false }, 'x');
         expect(html).not.toContain('sk-hoverable');
     });
 
     it('darkBackground adds sk-dark-background to wrapper', () =>
     {
-        const html = table({ darkBackground: true }, 'x');
+        const html = table(stringH, { 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');
+        const html = table(stringH, { subtle: true }, 'x');
         expect(html).toContain('sk-table-wrapper sk-table-wrapper-neutral sk-subtle');
         expect(html).toContain('sk-subtle');
     });
@@ -601,12 +608,13 @@ describe('tooltip()', () =>
 {
     it('default', () =>
     {
-        expect(tooltip({}, 'x')).toBe('<div class="sk-tooltip" role="tooltip">x</div>');
+        expect(tooltip(stringH, {}, '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>');
+        expect(tooltip(stringH, { kind: 'primary' }, 'x'))
+            .toBe('<div class="sk-tooltip sk-primary" role="tooltip">x</div>');
     });
 });
 
@@ -618,29 +626,36 @@ describe('button()', () =>
 {
     it('default emits <button type="button"> with chrome span', () =>
     {
-        expect(button({}, 'Save'))
+        expect(button(stringH, {}, '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'))
+        expect(button(stringH, { 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'))
+        expect(button(stringH, { 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'))
+        expect(button(stringH, { href: '/docs' }, 'Docs'))
             .toBe('<a class="sk-button" href="/docs"><span class="sk-button-chrome">Docs</span></a>');
     });
+
+    it('emits corner classes from corners array', () =>
+    {
+        const html = button(stringH, { corners: [ 'top-right' ] });
+        expect(html).toContain('sk-cut-top-right');
+        expect(html).not.toContain('sk-cut-top-left');
+    });
 });
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -651,15 +666,30 @@ describe('input()', () =>
 {
     it('default emits void input', () =>
     {
-        expect(input({}))
+        expect(input(stringH, {}))
             .toBe('<input class="sk-input" />');
     });
 
     it('passes through value, placeholder, name via props', () =>
     {
-        expect(input({ type: 'text', value: 'hi', placeholder: 'Your name', name: 'user' }))
+        expect(input(stringH, { type: 'text', value: 'hi', placeholder: 'Your name', name: 'user' }))
             .toBe('<input class="sk-input" type="text" value="hi" placeholder="Your name" name="user" />');
     });
+
+    it('emits corner classes from corners array', () =>
+    {
+        const html = input(stringH, { corners: [ 'top-left', 'bottom-right' ] });
+        expect(html).toContain('sk-cut-top-left');
+        expect(html).toContain('sk-cut-bottom-right');
+        expect(html).not.toContain('sk-cut-top-right');
+        expect(html).not.toContain('sk-cut-bottom-left');
+    });
+
+    it('omits corner classes when corners is unset', () =>
+    {
+        const html = input(stringH, {});
+        expect(html).not.toContain('sk-cut-');
+    });
 });
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -668,13 +698,13 @@ describe('textarea()', () =>
 {
     it('default', () =>
     {
-        expect(textarea({}, 'content'))
+        expect(textarea(stringH, {}, 'content'))
             .toBe('<textarea class="sk-textarea">content</textarea>');
     });
 
     it('passes through placeholder and name', () =>
     {
-        expect(textarea({ placeholder: 'Enter text', name: 'bio' }, ''))
+        expect(textarea(stringH, { placeholder: 'Enter text', name: 'bio' }, ''))
             .toBe('<textarea class="sk-textarea" placeholder="Enter text" name="bio"></textarea>');
     });
 });
@@ -686,9 +716,16 @@ describe('select()', () =>
     it('renders with option children', () =>
     {
         const options = '<option value="a">A</option><option value="b">B</option>';
-        expect(select({}, options))
+        expect(select(stringH, {}, options))
             .toBe('<select class="sk-select"><option value="a">A</option><option value="b">B</option></select>');
     });
+
+    it('emits corner classes from corners array', () =>
+    {
+        const html = select(stringH, { corners: [ 'top-left' ] });
+        expect(html).toContain('sk-cut-top-left');
+        expect(html).not.toContain('sk-cut-top-right');
+    });
 });
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -697,13 +734,13 @@ describe('slider()', () =>
 {
     it('default emits type=range', () =>
     {
-        expect(slider({}))
+        expect(slider(stringH, {}))
             .toBe('<input class="sk-slider" type="range" />');
     });
 
     it('passes through min, max, step, value', () =>
     {
-        expect(slider({ min: '0', max: '100', step: '5', value: '50' }))
+        expect(slider(stringH, { min: '0', max: '100', step: '5', value: '50' }))
             .toBe('<input class="sk-slider" type="range" min="0" max="100" step="5" value="50" />');
     });
 });
@@ -714,13 +751,13 @@ describe('colorPicker()', () =>
 {
     it('default emits type=color', () =>
     {
-        expect(colorPicker({}))
+        expect(colorPicker(stringH, {}))
             .toBe('<input class="sk-color-picker" type="color" />');
     });
 
     it('passes through value', () =>
     {
-        expect(colorPicker({ value: '#ff0000' }))
+        expect(colorPicker(stringH, { value: '#ff0000' }))
             .toBe('<input class="sk-color-picker" type="color" value="#ff0000" />');
     });
 });
@@ -733,14 +770,15 @@ describe('checkbox()', () =>
 {
     it('default', () =>
     {
-        expect(checkbox({}, 'Agree'))
-            .toBe('<label class="sk-checkbox"><input type="checkbox" /><span class="sk-checkbox-box"></span>'
+        expect(checkbox(stringH, {}, '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'))
+        expect(checkbox(stringH, { 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>');
     });
@@ -752,7 +790,7 @@ describe('radio()', () =>
 {
     it('default with name and value', () =>
     {
-        expect(radio({ name: 'flavor', value: 'chocolate' }, 'Chocolate'))
+        expect(radio(stringH, { 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>');
     });
@@ -764,7 +802,7 @@ describe('switchInput()', () =>
 {
     it('default', () =>
     {
-        expect(switchInput({ name: 'notify' }, 'Notifications'))
+        expect(switchInput(stringH, { 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>');
@@ -777,7 +815,7 @@ describe('numberInput()', () =>
 {
     it('default', () =>
     {
-        expect(numberInput({}))
+        expect(numberInput(stringH, {}))
             .toBe('<div class="sk-number-input-wrapper">'
                 + '<input class="sk-number-input-field" type="number" />'
                 + '</div>');
@@ -785,11 +823,17 @@ describe('numberInput()', () =>
 
     it('with min, max, step, name', () =>
     {
-        expect(numberInput({ min: '0', max: '100', step: '1', name: 'qty' }))
+        expect(numberInput(stringH, { 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>');
     });
+
+    it('emits corner classes from corners array', () =>
+    {
+        const html = numberInput(stringH, { corners: [ 'bottom-left' ] });
+        expect(html).toContain('sk-cut-bottom-left');
+    });
 });
 
 //----------------------------------------------------------------------------------------------------------------------
@@ -798,13 +842,13 @@ describe('tagsInput()', () =>
 {
     it('default empty', () =>
     {
-        expect(tagsInput({}))
+        expect(tagsInput(stringH, {}))
             .toBe('<div class="sk-tags-input"></div>');
     });
 
     it('with tags', () =>
     {
-        expect(tagsInput({}, '<span class="sk-tags-input-tag">foo</span>'))
+        expect(tagsInput(stringH, {}, '<span class="sk-tags-input-tag">foo</span>'))
             .toBe('<div class="sk-tags-input"><span class="sk-tags-input-tag">foo</span></div>');
     });
 });
@@ -817,21 +861,69 @@ describe('dropdown()', () =>
 {
     it('default', () =>
     {
-        expect(dropdown({ summary: 'Actions' }, '<a href="#">Item 1</a>'))
+        expect(dropdown(stringH, { 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'))
+        expect(dropdown(stringH, { 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'))
+        expect(dropdown(stringH, { summary: 'x', kind: 'primary', size: 'md' }, 'content'))
             .toBe('<details class="sk-dropdown sk-primary sk-md sk-size-md"><summary>x</summary>content</details>');
     });
 });
 
 //----------------------------------------------------------------------------------------------------------------------
+// Task 10 (InputGroup): InputGroup + InputGroupAddon helpers
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('inputGroup()', () =>
+{
+    it('default', () =>
+    {
+        expect(inputGroup(stringH, {}, 'x')).toBe('<div class="sk-input-group">x</div>');
+    });
+
+    it('emits corner classes from corners array', () =>
+    {
+        const html = inputGroup(stringH, { corners: [ 'top-left', 'bottom-right' ] }, 'x');
+        expect(html).toContain('sk-cut-top-left');
+        expect(html).toContain('sk-cut-bottom-right');
+    });
+
+    it('size variant emits both sk-XX and sk-size-XX', () =>
+    {
+        expect(inputGroup(stringH, { size: 'lg' }, 'x'))
+            .toBe('<div class="sk-input-group sk-lg sk-size-lg">x</div>');
+    });
+
+    it('custom colors emit inline style', () =>
+    {
+        expect(inputGroup(stringH, { baseColor: '#f00', textColor: '#fff' }, 'x')).toBe(
+            '<div class="sk-input-group" style="--sk-input-group-color-base: #f00; --sk-input-group-fg: #fff;">x</div>'
+        );
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('inputGroupAddon()', () =>
+{
+    it('default', () =>
+    {
+        expect(inputGroupAddon(stringH, {}, '$')).toBe('<span class="sk-input-group-addon">$</span>');
+    });
+
+    it('size + kind', () =>
+    {
+        expect(inputGroupAddon(stringH, { size: 'sm', kind: 'primary' }, '$'))
+            .toBe('<span class="sk-input-group-addon sk-primary sk-sm sk-size-sm">$</span>');
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------