@skewedaspect/sleekspace-ui 0.8.1 → 0.9.0

package/src/styles/components/__tests__/componentSelectors.test.ts

@@ -0,0 +1,2575 @@
+//----------------------------------------------------------------------------------------------------------------------
+// Component Selector Tests (SCSS)
+//
+// Compiles component SCSS files and asserts that the dual-selector mixin output contains both
+// class-form and attribute-form selectors for each kind, size, modifier, and default variant.
+//----------------------------------------------------------------------------------------------------------------------
+
+import { describe, expect, it } from 'vitest';
+import { compileString } from 'sass';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+// Utils
+import { KINDS, SEMANTIC_KINDS, SIZES, attrValueRe, dualSelectorRe } from '../../__tests__/testHelpers';
+
+//----------------------------------------------------------------------------------------------------------------------
+
+const here = dirname(fileURLToPath(import.meta.url));
+// styles root: __tests__ → components → styles
+const stylesDir = resolve(here, '../..');
+
+function compileComponent(component : string) : string
+{
+    const source = `@use "components/${ component }";`;
+    const { css } = compileString(source, {
+        loadPaths: [ stylesDir ],
+        // URL placed at styles root so relative imports inside _panel.scss work correctly.
+        url: pathToFileURL(resolve(stylesDir, `${ component }.test.scss`)),
+    });
+    return css;
+}
+
+//----------------------------------------------------------------------------------------------------------------------
+
+// Sass strips quotes from attribute-selector values that don't need them for CSS validity,
+// so `[kind="primary"]` may be emitted as `[kind=primary]`. Accept both forms.
+// `dualSelectorRe`, `attrValueRe`, `KINDS`, and `SIZES` are imported from testHelpers above.
+
+//----------------------------------------------------------------------------------------------------------------------
+
+describe('component selectors (SCSS)', () =>
+{
+    describe('panel', () =>
+    {
+        // Compile once for the whole describe block — all assertions share the same CSS output.
+        let css : string;
+
+        // Vitest runs `beforeAll` lazily; we use a helper that memoises on first call.
+        function panelCSS() : string
+        {
+            if(!css) { css = compileComponent('panel'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (17 values from $kinds in theme/_variables.scss)
+        //--------------------------------------------------------------------------------------------------------------
+
+        const kinds = KINDS;
+
+        describe('kind variants', () =>
+        {
+            for(const kind of kinds)
+            {
+                it(`emits .sk-panel.sk-${ kind } and sk-panel[kind="${ kind }"]`, () =>
+                {
+                    const out = panelCSS();
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('panel', kind, 'kind', kind))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants (xs, sm, md, lg, xl)
+        //--------------------------------------------------------------------------------------------------------------
+
+        const sizes = SIZES;
+
+        describe('size variants', () =>
+        {
+            for(const size of sizes)
+            {
+                // Each size emits three selectors: .sk-<size>, .sk-size-<size>, and [size="<size>"].
+                // Check all three exist anywhere in the output (not necessarily adjacent).
+                it(`emits .sk-panel.sk-${ size } and sk-panel[size="${ size }"]`, () =>
+                {
+                    const out = panelCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-panel\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-panel\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Corner cut modifiers (list-modifier with `corners` attribute)
+        //--------------------------------------------------------------------------------------------------------------
+
+        const corners = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
+
+        describe('corner cut modifiers', () =>
+        {
+            for(const corner of corners)
+            {
+                it(`emits .sk-panel.sk-cut-${ corner } and sk-panel[corners~="${ corner }"]`, () =>
+                {
+                    const out = panelCSS();
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('panel', `cut-${ corner }`, 'corners', corner, { attrOp: '~=' }))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Decoration corner modifiers (single-choice-modifier with `decoration-corner` attribute)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('decoration corner modifiers', () =>
+        {
+            for(const corner of corners)
+            {
+                // Decoration rules are applied via `&::after`, so the emitted selector includes
+                // the `::after` pseudo-element on both the class and attribute forms.
+                it(`emits .sk-panel.sk-decoration-${ corner } and sk-panel[decoration-corner="${ corner }"]`, () =>
+                {
+                    const out = panelCSS();
+                    const opts = { suffix: '::after' };
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('panel', `decoration-${ corner }`, 'decoration-corner', corner, opts))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-panel.sk-no-border and sk-panel[no-border]', () =>
+            {
+                expect(panelCSS()).toMatch(/\.sk-panel\.sk-no-border,\s*sk-panel\[no-border\]/);
+            });
+
+            it('emits .sk-panel.sk-no-decoration and sk-panel[no-decoration]', () =>
+            {
+                // no-decoration hides the ::after element, so the selector pair includes ::after.
+                expect(panelCSS()).toMatch(/\.sk-panel\.sk-no-decoration::after,\s*sk-panel\[no-decoration\]::after/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default bottom-right cut when no sk-cut-* class is present', () =>
+            {
+                const out = panelCSS();
+                // Selector: .sk-panel:where(:not([class*="sk-cut-"])) { --sk-panel-cut-br: ... }
+                expect(out).toMatch(
+                    new RegExp(`\\.sk-panel:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-cut-') }\\]\\)\\)`)
+                );
+                // The default must set the br cut variable
+                expect(out).toMatch(new RegExp(
+                    String.raw`\.sk-panel:where\(:not\(\[class\*=["']?sk-cut-["']?\]\)\)[^{]*\{[^}]*--sk-panel-cut-br`
+                ));
+            });
+
+            it('applies default bottom-right decoration when no sk-decoration-* class is present', () =>
+            {
+                const out = panelCSS();
+                // Selector: .sk-panel:where(:not([class*="sk-decoration-"])) { ... }
+                expect(out).toMatch(
+                    new RegExp(`\\.sk-panel:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-decoration-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = panelCSS();
+                // The kind default can't use [class*="sk-"] because every Sleekspace class starts
+                // with sk-. Instead we expect an explicit :not() chain for each of the 17 kinds.
+                // Check for at least the :where(:not(.sk-neutral):not(.sk-primary)...) pattern.
+                expect(out).toMatch(/:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                const out = panelCSS();
+                // Selector: .sk-panel:where(:not([class*="sk-size-"])) { --sk-panel-cut-size: ... }
+                expect(out).toMatch(
+                    new RegExp(`\\.sk-panel:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+                // The default size block must set the cut-size variable
+                expect(out).toMatch(new RegExp(
+                    String.raw`\.sk-panel:where\(:not\(\[class\*=["']?sk-size-["']?\]\)\)`
+                    + String.raw`[^{]*\{[^}]*--sk-panel-cut-size`
+                ));
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-panel custom-element tag', () =>
+        {
+            const out = panelCSS();
+            expect(out).toMatch(/\.sk-panel,\s*sk-panel\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-panel> without [kind]', () =>
+            {
+                expect(panelCSS()).toMatch(/sk-panel:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule for bare <sk-panel>', () =>
+            {
+                expect(panelCSS()).toMatch(/sk-panel:where\(:not\(\[size\]\)\)/);
+            });
+
+            it('emits default-cut rule for bare <sk-panel>', () =>
+            {
+                expect(panelCSS()).toMatch(/sk-panel:where\(:not\(\[corners\]\)\)/);
+            });
+
+            it('emits default-decoration rule for bare <sk-panel>', () =>
+            {
+                expect(panelCSS()).toMatch(/sk-panel:where\(:not\(\[decoration-corner\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('card', () =>
+    {
+        let css : string;
+
+        function cardCSS() : string
+        {
+            if(!css) { css = compileComponent('card'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Card is a structural extension of Panel — it adds layout (flexbox sections) but has
+        // no modifier families of its own. Kind, size, and decoration come from Panel. This block
+        // verifies the base rule is present so compilation is exercised and regressions are caught.
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('compiles without errors', () =>
+        {
+            expect(() => cardCSS()).not.toThrow();
+        });
+
+        it('emits .sk-panel.sk-card base rule', () =>
+        {
+            expect(cardCSS()).toMatch(/\.sk-panel\.sk-card/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants — card inherits kind via Panel. When Card emits its own kind-variant
+        // selectors (after the refactor), each kind should appear as both .sk-card.sk-<kind>
+        // and sk-card[kind="<kind>"].
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-card.sk-${ kind } and sk-card[kind="${ kind }"]`, () =>
+                {
+                    const out = cardCSS();
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('card', kind, 'kind', kind))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent: kind default (neutral)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = cardCSS();
+                expect(out).toMatch(/\.sk-card:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-card custom-element tag', () =>
+        {
+            expect(cardCSS()).toMatch(/\.sk-card,\s*sk-card\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-card> without [kind]', () =>
+            {
+                expect(cardCSS()).toMatch(/sk-card:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('alert', () =>
+    {
+        let css : string;
+
+        function alertCSS() : string
+        {
+            if(!css) { css = compileComponent('alert'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list — alert accepts all 17 kinds)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-alert.sk-${ kind } and sk-alert[kind="${ kind }"]`, () =>
+                {
+                    const out = alertCSS();
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('alert', kind, 'kind', kind))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-alert.sk-subtle and sk-alert[subtle]', () =>
+            {
+                expect(alertCSS()).toMatch(/\.sk-alert\.sk-subtle,\s*sk-alert\[subtle\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent: kind default (info)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default info kind via :not() chain', () =>
+            {
+                const out = alertCSS();
+                // Alert's default kind is 'info'. The :where(:not()) chain covers all kinds.
+                expect(out).toMatch(/\.sk-alert:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-info\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-alert custom-element tag', () =>
+        {
+            expect(alertCSS()).toMatch(/\.sk-alert,\s*sk-alert\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-alert> without [kind]', () =>
+            {
+                expect(alertCSS()).toMatch(/sk-alert:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('divider', () =>
+    {
+        let css : string;
+
+        function dividerCSS() : string
+        {
+            if(!css) { css = compileComponent('divider'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-divider.sk-${ kind } and sk-divider[kind="${ kind }"]`, () =>
+                {
+                    const out = dividerCSS();
+                    expect(out).toMatch(
+                        new RegExp(dualSelectorRe('divider', kind, 'kind', kind))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Orientation: single-choice-modifier (horizontal | vertical)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('orientation modifiers', () =>
+        {
+            it('emits .sk-divider.sk-orientation-horizontal and sk-divider[orientation="horizontal"]', () =>
+            {
+                expect(dividerCSS()).toMatch(
+                    new RegExp(dualSelectorRe('divider', 'orientation-horizontal', 'orientation', 'horizontal'))
+                );
+            });
+
+            it('emits .sk-divider.sk-orientation-vertical and sk-divider[orientation="vertical"]', () =>
+            {
+                expect(dividerCSS()).toMatch(
+                    new RegExp(dualSelectorRe('divider', 'orientation-vertical', 'orientation', 'vertical'))
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-divider.sk-subtle and sk-divider[subtle]', () =>
+            {
+                expect(dividerCSS()).toMatch(/\.sk-divider\.sk-subtle,\s*sk-divider\[subtle\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = dividerCSS();
+                expect(out).toMatch(/\.sk-divider:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+
+            it('applies default horizontal orientation when no sk-orientation-* class is present', () =>
+            {
+                const out = dividerCSS();
+                expect(out).toMatch(
+                    new RegExp(`\\.sk-divider:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-orientation-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-divider custom-element tag', () =>
+        {
+            expect(dividerCSS()).toMatch(/\.sk-divider,\s*sk-divider\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-divider> without [kind]', () =>
+            {
+                expect(dividerCSS()).toMatch(/sk-divider:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-orientation rule targeting bare <sk-divider> without [orientation]', () =>
+            {
+                expect(dividerCSS()).toMatch(/sk-divider:where\(:not\(\[orientation\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('page', () =>
+    {
+        let css : string;
+
+        function pageCSS() : string
+        {
+            if(!css) { css = compileComponent('page'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-page custom-element tag', () =>
+        {
+            expect(pageCSS()).toMatch(/\.sk-page,\s*sk-page\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-page.sk-flush and sk-page[flush]', () =>
+            {
+                expect(pageCSS()).toMatch(/\.sk-page\.sk-flush,\s*sk-page\[flush\]/);
+            });
+
+            it('emits .sk-page.sk-fixed-header and sk-page[fixed-header]', () =>
+            {
+                // fixed-header only contains nested child rules (.sk-page-header), so Sass emits
+                // .sk-page.sk-fixed-header .sk-page-header, sk-page[fixed-header] .sk-page-header.
+                const opts = { descendant: '\\.sk-page-header' };
+                expect(pageCSS()).toMatch(new RegExp(
+                    dualSelectorRe('page', 'fixed-header', 'fixed-header', undefined, opts)
+                ));
+            });
+
+            it('emits .sk-page.sk-fixed-footer and sk-page[fixed-footer]', () =>
+            {
+                // fixed-footer only contains nested child rules (.sk-page-footer), so Sass emits
+                // .sk-page.sk-fixed-footer .sk-page-footer, sk-page[fixed-footer] .sk-page-footer.
+                const opts = { descendant: '\\.sk-page-footer' };
+                expect(pageCSS()).toMatch(new RegExp(
+                    dualSelectorRe('page', 'fixed-footer', 'fixed-footer', undefined, opts)
+                ));
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-flush rule targeting bare <sk-page> without [flush]', () =>
+            {
+                expect(pageCSS()).toMatch(/sk-page:where\(:not\(\[flush\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('group', () =>
+    {
+        let css : string;
+
+        function groupCSS() : string
+        {
+            if(!css) { css = compileComponent('group'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-group custom-element tag', () =>
+        {
+            expect(groupCSS()).toMatch(/\.sk-group,\s*sk-group\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Orientation: single-choice-modifier (horizontal | vertical)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('orientation modifiers', () =>
+        {
+            it('emits .sk-group.sk-orientation-horizontal and sk-group[orientation="horizontal"]', () =>
+            {
+                expect(groupCSS()).toMatch(
+                    new RegExp(dualSelectorRe('group', 'orientation-horizontal', 'orientation', 'horizontal'))
+                );
+            });
+
+            it('emits .sk-group.sk-orientation-vertical and sk-group[orientation="vertical"]', () =>
+            {
+                expect(groupCSS()).toMatch(
+                    new RegExp(dualSelectorRe('group', 'orientation-vertical', 'orientation', 'vertical'))
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default horizontal orientation when no sk-orientation-* class is present', () =>
+            {
+                expect(groupCSS()).toMatch(
+                    new RegExp(`\\.sk-group:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-orientation-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-orientation rule targeting bare <sk-group> without [orientation]', () =>
+            {
+                expect(groupCSS()).toMatch(/sk-group:where\(:not\(\[orientation\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('skeleton', () =>
+    {
+        let css : string;
+
+        function skeletonCSS() : string
+        {
+            if(!css) { css = compileComponent('skeleton'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-skeleton custom-element tag', () =>
+        {
+            expect(skeletonCSS()).toMatch(/\.sk-skeleton,\s*sk-skeleton\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Shape: single-choice-modifier (text | circular | square | rectangular)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('shape modifiers', () =>
+        {
+            const shapes = [ 'text', 'circular', 'square', 'rectangular' ];
+
+            for(const shape of shapes)
+            {
+                it(`emits .sk-skeleton.sk-shape-${ shape } and sk-skeleton[shape="${ shape }"]`, () =>
+                {
+                    expect(skeletonCSS()).toMatch(
+                        new RegExp(
+                            `\\.sk-skeleton\\.sk-shape-${ shape },\\s*sk-skeleton\\[shape=${ attrValueRe(shape) }\\]`
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Animation boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('animation modifiers', () =>
+        {
+            it('emits .sk-skeleton.sk-shimmer and sk-skeleton[shimmer]', () =>
+            {
+                // shimmer only applies to ::after, so Sass emits the ::after-suffixed selector pair.
+                expect(skeletonCSS()).toMatch(/\.sk-skeleton\.sk-shimmer::after,\s*sk-skeleton\[shimmer\]::after/);
+            });
+
+            it('emits .sk-skeleton.sk-pulse and sk-skeleton[pulse]', () =>
+            {
+                expect(skeletonCSS()).toMatch(/\.sk-skeleton\.sk-pulse,\s*sk-skeleton\[pulse\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default rectangular shape when no sk-shape-* class is present', () =>
+            {
+                expect(skeletonCSS()).toMatch(
+                    new RegExp(`\\.sk-skeleton:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-shape-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-shape rule targeting bare <sk-skeleton> without [shape]', () =>
+            {
+                expect(skeletonCSS()).toMatch(/sk-skeleton:where\(:not\(\[shape\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('progress', () =>
+    {
+        let css : string;
+
+        function progressCSS() : string
+        {
+            if(!css) { css = compileComponent('progress'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-progress custom-element tag', () =>
+        {
+            expect(progressCSS()).toMatch(/\.sk-progress,\s*sk-progress\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-progress.sk-${ kind } and sk-progress[kind="${ kind }"]`, () =>
+                {
+                    expect(progressCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('progress', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants (xs, sm, md, lg, xl)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size variants', () =>
+        {
+            for(const size of SIZES)
+            {
+                it(`emits .sk-progress.sk-${ size } and sk-progress[size="${ size }"]`, () =>
+                {
+                    const out = progressCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-progress\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-progress\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Indeterminate boolean modifier
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-progress.sk-indeterminate and sk-progress[indeterminate]', () =>
+            {
+                // indeterminate only targets .sk-progress-indicator, so Sass emits the child selector pair.
+                expect(progressCSS()).toMatch(new RegExp(
+                    dualSelectorRe('progress', 'indeterminate', 'indeterminate', undefined, {
+                        descendant: '\\.sk-progress-indicator',
+                    })
+                ));
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(progressCSS()).toMatch(
+                    new RegExp(`\\.sk-progress:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default primary kind via explicit :not() chain', () =>
+            {
+                const out = progressCSS();
+                expect(out).toMatch(/\.sk-progress:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-progress> without [kind]', () =>
+            {
+                expect(progressCSS()).toMatch(/sk-progress:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule targeting bare <sk-progress> without [size]', () =>
+            {
+                expect(progressCSS()).toMatch(/sk-progress:where\(:not\(\[size\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('spinner', () =>
+    {
+        let css : string;
+
+        function spinnerCSS() : string
+        {
+            if(!css) { css = compileComponent('spinner'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-spinner custom-element tag', () =>
+        {
+            expect(spinnerCSS()).toMatch(/\.sk-spinner,\s*sk-spinner\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-spinner.sk-${ kind } and sk-spinner[kind="${ kind }"]`, () =>
+                {
+                    expect(spinnerCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('spinner', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants (xs, sm, md, lg, xl)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size variants', () =>
+        {
+            for(const size of SIZES)
+            {
+                it(`emits .sk-spinner.sk-${ size } and sk-spinner[size="${ size }"]`, () =>
+                {
+                    const out = spinnerCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-spinner\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-spinner\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(spinnerCSS()).toMatch(
+                    new RegExp(`\\.sk-spinner:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default primary kind via explicit :not() chain', () =>
+            {
+                const out = spinnerCSS();
+                expect(out).toMatch(/\.sk-spinner:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-spinner> without [kind]', () =>
+            {
+                expect(spinnerCSS()).toMatch(/sk-spinner:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule targeting bare <sk-spinner> without [size]', () =>
+            {
+                expect(spinnerCSS()).toMatch(/sk-spinner:where\(:not\(\[size\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('navbar', () =>
+    {
+        let css : string;
+
+        function navbarCSS() : string
+        {
+            if(!css) { css = compileComponent('navbar'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-navbar custom-element tag', () =>
+        {
+            expect(navbarCSS()).toMatch(/\.sk-navbar,\s*sk-navbar\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-navbar.sk-${ kind } and sk-navbar[kind="${ kind }"]`, () =>
+                {
+                    expect(navbarCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('navbar', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-navbar.sk-sticky and sk-navbar[sticky]', () =>
+            {
+                expect(navbarCSS()).toMatch(/\.sk-navbar\.sk-sticky,\s*sk-navbar\[sticky\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = navbarCSS();
+                expect(out).toMatch(/\.sk-navbar:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-navbar> without [kind]', () =>
+            {
+                expect(navbarCSS()).toMatch(/sk-navbar:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('toolbar', () =>
+    {
+        let css : string;
+
+        function toolbarCSS() : string
+        {
+            if(!css) { css = compileComponent('toolbar'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-toolbar custom-element tag', () =>
+        {
+            expect(toolbarCSS()).toMatch(/\.sk-toolbar,\s*sk-toolbar\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-toolbar.sk-${ kind } and sk-toolbar[kind="${ kind }"]`, () =>
+                {
+                    expect(toolbarCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('toolbar', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Orientation modifiers (single-choice)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('orientation modifiers', () =>
+        {
+            it('emits .sk-toolbar.sk-orientation-vertical and sk-toolbar[orientation="vertical"]', () =>
+            {
+                expect(toolbarCSS()).toMatch(
+                    new RegExp(dualSelectorRe('toolbar', 'orientation-vertical', 'orientation', 'vertical'))
+                );
+            });
+
+            it('emits .sk-toolbar.sk-orientation-horizontal and sk-toolbar[orientation="horizontal"]', () =>
+            {
+                expect(toolbarCSS()).toMatch(
+                    new RegExp(dualSelectorRe('toolbar', 'orientation-horizontal', 'orientation', 'horizontal'))
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = toolbarCSS();
+                expect(out).toMatch(/\.sk-toolbar:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+
+            it('applies default horizontal orientation when no sk-orientation-* class is present', () =>
+            {
+                expect(toolbarCSS()).toMatch(
+                    new RegExp(`\\.sk-toolbar:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-orientation-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-toolbar> without [kind]', () =>
+            {
+                expect(toolbarCSS()).toMatch(/sk-toolbar:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-orientation rule targeting bare <sk-toolbar> without [orientation]', () =>
+            {
+                expect(toolbarCSS()).toMatch(/sk-toolbar:where\(:not\(\[orientation\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('sidebar', () =>
+    {
+        let css : string;
+
+        function sidebarCSS() : string
+        {
+            if(!css) { css = compileComponent('sidebar'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-sidebar custom-element tag', () =>
+        {
+            expect(sidebarCSS()).toMatch(/\.sk-sidebar,\s*sk-sidebar\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (semantic kinds only)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of SEMANTIC_KINDS)
+            {
+                it(`emits .sk-sidebar.sk-${ kind } and sk-sidebar[kind="${ kind }"]`, () =>
+                {
+                    expect(sidebarCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('sidebar', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-sidebar.sk-dense and sk-sidebar[dense]', () =>
+            {
+                expect(sidebarCSS()).toMatch(/\.sk-sidebar\.sk-dense,\s*sk-sidebar\[dense\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = sidebarCSS();
+                expect(out).toMatch(/\.sk-sidebar:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-danger\)/);
+                expect(out).toMatch(/:not\(\.sk-neon-pink\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-sidebar> without [kind]', () =>
+            {
+                expect(sidebarCSS()).toMatch(/sk-sidebar:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('breadcrumbs', () =>
+    {
+        let css : string;
+
+        function breadcrumbsCSS() : string
+        {
+            if(!css) { css = compileComponent('breadcrumbs'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-breadcrumbs custom-element tag', () =>
+        {
+            expect(breadcrumbsCSS()).toMatch(/\.sk-breadcrumbs,\s*sk-breadcrumbs\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (semantic kinds only)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of SEMANTIC_KINDS)
+            {
+                it(`emits .sk-breadcrumbs.sk-${ kind } and sk-breadcrumbs[kind="${ kind }"]`, () =>
+                {
+                    expect(breadcrumbsCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('breadcrumbs', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = breadcrumbsCSS();
+                expect(out).toMatch(/\.sk-breadcrumbs:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-danger\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-breadcrumbs> without [kind]', () =>
+            {
+                expect(breadcrumbsCSS()).toMatch(/sk-breadcrumbs:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('pagination', () =>
+    {
+        let css : string;
+
+        function paginationCSS() : string
+        {
+            if(!css) { css = compileComponent('pagination'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-pagination custom-element tag', () =>
+        {
+            expect(paginationCSS()).toMatch(/\.sk-pagination,\s*sk-pagination\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants on root (semantic kinds only)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of SEMANTIC_KINDS)
+            {
+                it(`emits .sk-pagination.sk-${ kind } and sk-pagination[kind="${ kind }"]`, () =>
+                {
+                    expect(paginationCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('pagination', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants on .sk-pagination-item
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size variants (pagination-item)', () =>
+        {
+            for(const size of SIZES)
+            {
+                it(`emits .sk-pagination-item.sk-${ size } and sk-pagination-item[size="${ size }"]`, () =>
+                {
+                    const out = paginationCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-pagination-item\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-pagination-item\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Variant variants on .sk-pagination-item (solid, outline, subtle, ghost)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('variant modifiers (pagination-item)', () =>
+        {
+            const variants = [ 'solid', 'outline', 'subtle', 'ghost' ];
+
+            for(const variant of variants)
+            {
+                it(`emits .sk-pagination-item.sk-${ variant } and sk-pagination-item[variant="${ variant }"]`, () =>
+                {
+                    expect(paginationCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('pagination-item', variant, 'variant', variant)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via explicit :not() chain when no kind class present', () =>
+            {
+                const out = paginationCSS();
+                expect(out).toMatch(/\.sk-pagination:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-danger\)\)/);
+            });
+
+            it('applies default md size on pagination-item when no sk-size-* class is present', () =>
+            {
+                expect(paginationCSS()).toMatch(
+                    new RegExp(`\\.sk-pagination-item:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-pagination> without [kind]', () =>
+            {
+                expect(paginationCSS()).toMatch(/sk-pagination:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule targeting bare <sk-pagination-item> without [size]', () =>
+            {
+                expect(paginationCSS()).toMatch(/sk-pagination-item:where\(:not\(\[size\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('tag', () =>
+    {
+        let css : string;
+
+        function tagCSS() : string
+        {
+            if(!css) { css = compileComponent('tag'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-tag custom-element tag', () =>
+        {
+            expect(tagCSS()).toMatch(/\.sk-tag,\s*sk-tag\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-tag.sk-${ kind } and sk-tag[kind="${ kind }"]`, () =>
+                {
+                    expect(tagCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('tag', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants (xs, sm, md, lg, xl)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size variants', () =>
+        {
+            for(const size of SIZES)
+            {
+                it(`emits .sk-tag.sk-${ size } and sk-tag[size="${ size }"]`, () =>
+                {
+                    const out = tagCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-tag\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-tag\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Variant variants (solid, outline, subtle, ghost)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('variant modifiers', () =>
+        {
+            const variants = [ 'solid', 'outline', 'subtle', 'ghost' ];
+
+            for(const variant of variants)
+            {
+                it(`emits .sk-tag.sk-${ variant } and sk-tag[variant="${ variant }"]`, () =>
+                {
+                    expect(tagCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('tag', variant, 'variant', variant)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-tag.sk-removable and sk-tag[removable]', () =>
+            {
+                expect(tagCSS()).toMatch(/\.sk-tag\.sk-removable,\s*sk-tag\[removable\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = tagCSS();
+                expect(out).toMatch(/\.sk-tag:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(tagCSS()).toMatch(
+                    new RegExp(`\\.sk-tag:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-tag> without [kind]', () =>
+            {
+                expect(tagCSS()).toMatch(/sk-tag:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule targeting bare <sk-tag> without [size]', () =>
+            {
+                expect(tagCSS()).toMatch(/sk-tag:where\(:not\(\[size\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('avatar', () =>
+    {
+        let css : string;
+
+        function avatarCSS() : string
+        {
+            if(!css) { css = compileComponent('avatar'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-avatar custom-element tag', () =>
+        {
+            expect(avatarCSS()).toMatch(/\.sk-avatar,\s*sk-avatar\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-avatar.sk-${ kind } and sk-avatar[kind="${ kind }"]`, () =>
+                {
+                    expect(avatarCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('avatar', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Size variants (xs, sm, md, lg, xl)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size variants', () =>
+        {
+            for(const size of SIZES)
+            {
+                it(`emits .sk-avatar.sk-${ size } and sk-avatar[size="${ size }"]`, () =>
+                {
+                    const out = avatarCSS();
+                    expect(out).toMatch(new RegExp(`\\.sk-avatar\\.sk-${ size }[,\\s{]`));
+                    expect(out).toMatch(new RegExp(`sk-avatar\\[size=${ attrValueRe(size) }\\]`));
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Shape modifiers (single-choice)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('shape modifiers', () =>
+        {
+            const shapes = [ 'circle', 'square' ];
+
+            for(const shape of shapes)
+            {
+                it(`emits .sk-avatar.sk-shape-${ shape } and sk-avatar[shape="${ shape }"]`, () =>
+                {
+                    expect(avatarCSS()).toMatch(
+                        new RegExp(
+                            `\\.sk-avatar\\.sk-shape-${ shape },\\s*sk-avatar\\[shape=${ attrValueRe(shape) }\\]`
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = avatarCSS();
+                expect(out).toMatch(/\.sk-avatar:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(avatarCSS()).toMatch(
+                    new RegExp(`\\.sk-avatar:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-avatar> without [kind]', () =>
+            {
+                expect(avatarCSS()).toMatch(/sk-avatar:where\(:not\(\[kind\]\)\)/);
+            });
+
+            it('emits default-size rule targeting bare <sk-avatar> without [size]', () =>
+            {
+                expect(avatarCSS()).toMatch(/sk-avatar:where\(:not\(\[size\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('field', () =>
+    {
+        let css : string;
+
+        function fieldCSS() : string
+        {
+            if(!css) { css = compileComponent('field'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-field custom-element tag', () =>
+        {
+            expect(fieldCSS()).toMatch(/\.sk-field,\s*sk-field\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Label position modifiers (single-choice)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('label position modifiers', () =>
+        {
+            it('emits .sk-field.sk-label-top and sk-field[label-position="top"]', () =>
+            {
+                expect(fieldCSS()).toMatch(
+                    new RegExp(`\\.sk-field\\.sk-label-top,\\s*sk-field\\[label-position=${ attrValueRe('top') }\\]`)
+                );
+            });
+
+            it('emits .sk-field.sk-label-left and sk-field[label-position="left"]', () =>
+            {
+                expect(fieldCSS()).toMatch(
+                    new RegExp(`\\.sk-field\\.sk-label-left,\\s*sk-field\\[label-position=${ attrValueRe('left') }\\]`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            it('emits .sk-field.sk-has-error and sk-field[has-error]', () =>
+            {
+                expect(fieldCSS()).toMatch(/\.sk-field\.sk-has-error,\s*sk-field\[has-error\]/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default column (top) layout when no sk-label-* class is present', () =>
+            {
+                expect(fieldCSS()).toMatch(
+                    new RegExp(`\\.sk-field:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-label-') }\\]\\)\\)`)
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-label-position rule targeting bare <sk-field> without [label-position]', () =>
+            {
+                expect(fieldCSS()).toMatch(/sk-field:where\(:not\(\[label-position\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('table', () =>
+    {
+        let css : string;
+
+        function tableCSS() : string
+        {
+            if(!css) { css = compileComponent('table'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-table custom-element tag', () =>
+        {
+            expect(tableCSS()).toMatch(/\.sk-table,\s*sk-table\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-table.sk-${ kind } and sk-table[kind="${ kind }"]`, () =>
+                {
+                    expect(tableCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('table', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Variant variants (subtle)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('variant modifiers', () =>
+        {
+            it('emits .sk-table.sk-subtle and sk-table[variant="subtle"]', () =>
+            {
+                expect(tableCSS()).toMatch(
+                    new RegExp(dualSelectorRe('table', 'subtle', 'variant', 'subtle'))
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Boolean modifiers
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('boolean modifiers', () =>
+        {
+            // Bool-modifier blocks only contain nested child selectors, so Sass emits the
+            // child-selector form rather than a bare top-level pair. Check the sub-selector.
+            it('emits .sk-table.sk-striped (striped row rule)', () =>
+            {
+                expect(tableCSS()).toMatch(new RegExp(
+                    dualSelectorRe('table', 'striped', 'striped', undefined, {
+                        descendant: 'tbody\\s+tr:nth-child\\(even\\)',
+                    })
+                ));
+            });
+
+            it('emits .sk-table.sk-bordered (bordered cell rule)', () =>
+            {
+                expect(tableCSS()).toMatch(/\.sk-table\.sk-bordered\s+td,/);
+                expect(tableCSS()).toMatch(/sk-table\[bordered\]\s+td,/);
+            });
+
+            it('emits .sk-table.sk-compact (compact cell rule)', () =>
+            {
+                expect(tableCSS()).toMatch(/\.sk-table\.sk-compact\s+thead\s+th,/);
+                expect(tableCSS()).toMatch(/sk-table\[compact\]\s+thead\s+th,/);
+            });
+
+            it('emits .sk-table.sk-comfortable (comfortable cell rule)', () =>
+            {
+                expect(tableCSS()).toMatch(/\.sk-table\.sk-comfortable\s+thead\s+th,/);
+                expect(tableCSS()).toMatch(/sk-table\[comfortable\]\s+thead\s+th,/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = tableCSS();
+                expect(out).toMatch(/\.sk-table:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-table> without [kind]', () =>
+            {
+                expect(tableCSS()).toMatch(/sk-table:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('tooltip', () =>
+    {
+        let css : string;
+
+        function tooltipCSS() : string
+        {
+            if(!css) { css = compileComponent('tooltip'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Base dual-selector (custom-element tag)
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('base rule includes the sk-tooltip custom-element tag', () =>
+        {
+            expect(tooltipCSS()).toMatch(/\.sk-tooltip,\s*sk-tooltip\s*\{/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Kind variants (full $kinds list)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('kind variants', () =>
+        {
+            for(const kind of KINDS)
+            {
+                it(`emits .sk-tooltip.sk-${ kind } and sk-tooltip[kind="${ kind }"]`, () =>
+                {
+                    expect(tooltipCSS()).toMatch(
+                        new RegExp(
+                            dualSelectorRe('tooltip', kind, 'kind', kind)
+                        )
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Variant variants (solid, outline)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('variant modifiers', () =>
+        {
+            it('emits .sk-tooltip.sk-solid and sk-tooltip[variant="solid"]', () =>
+            {
+                expect(tooltipCSS()).toMatch(
+                    new RegExp(dualSelectorRe('tooltip', 'solid', 'variant', 'solid'))
+                );
+            });
+
+            it('emits .sk-tooltip.sk-outline and sk-tooltip[variant="outline"]', () =>
+            {
+                expect(tooltipCSS()).toMatch(
+                    new RegExp(dualSelectorRe('tooltip', 'outline', 'variant', 'outline'))
+                );
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Placement modifiers (single-choice)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('placement modifiers', () =>
+        {
+            const placements = [ 'top', 'bottom', 'left', 'right' ];
+
+            for(const placement of placements)
+            {
+                it(`emits .sk-tooltip.sk-placement-${ placement } and sk-tooltip[placement="${ placement }"]`, () =>
+                {
+                    expect(tooltipCSS()).toMatch(
+                        new RegExp(dualSelectorRe('tooltip', `placement-${ placement }`, 'placement', placement))
+                    );
+                });
+            }
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = tooltipCSS();
+                expect(out).toMatch(/\.sk-tooltip:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Custom-element attribute-absence defaults
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('custom-element defaults (defaults-when-no-attr)', () =>
+        {
+            it('emits default-kind rule targeting bare <sk-tooltip> without [kind]', () =>
+            {
+                expect(tooltipCSS()).toMatch(/sk-tooltip:where\(:not\(\[kind\]\)\)/);
+            });
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+    // Tasks 27-32: Class-only form controls (Button, Input, Textarea, NumberInput, Checkbox, Radio)
+    //
+    // These are class-only — no custom-element tag, no attribute-selector siblings.
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('button', () =>
+    {
+        let css : string;
+
+        function buttonCSS() : string
+        {
+            if(!css) { css = compileComponent('button'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted for button — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-button[kind=...] attribute selectors', () =>
+        {
+            expect(buttonCSS()).not.toMatch(/sk-button\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent: size (md)
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(buttonCSS()).toMatch(
+                    new RegExp(`\\.sk-button:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default solid variant when no explicit variant class is present', () =>
+            {
+                const variantNotChain = [ 'solid', 'outline', 'subtle', 'ghost', 'link' ]
+                    .map((variant) => `:not\\(\\.sk-${ variant }\\)`).join('');
+                expect(buttonCSS()).toMatch(new RegExp(`\\.sk-button:where\\(${ variantNotChain }\\)`));
+            });
+
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = buttonCSS();
+                expect(out).toMatch(/\.sk-button:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-primary\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors exist alongside sk-<size>
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'xs', 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-button.sk-size-${ size } alongside .sk-button.sk-${ size }`, () =>
+                {
+                    expect(buttonCSS()).toMatch(new RegExp(`\\.sk-button\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('input', () =>
+    {
+        let css : string;
+
+        function inputCSS() : string
+        {
+            if(!css) { css = compileComponent('input'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-input[kind=...] attribute selectors', () =>
+        {
+            expect(inputCSS()).not.toMatch(/sk-input\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(inputCSS()).toMatch(
+                    new RegExp(`\\.sk-input:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = inputCSS();
+                expect(out).toMatch(/\.sk-input:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-input.sk-size-${ size } alongside .sk-input.sk-${ size }`, () =>
+                {
+                    expect(inputCSS()).toMatch(new RegExp(`\\.sk-input\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('textarea', () =>
+    {
+        let css : string;
+
+        function textareaCSS() : string
+        {
+            if(!css) { css = compileComponent('textarea'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-textarea[kind=...] attribute selectors', () =>
+        {
+            expect(textareaCSS()).not.toMatch(/sk-textarea\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(textareaCSS()).toMatch(
+                    new RegExp(`\\.sk-textarea:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = textareaCSS();
+                expect(out).toMatch(/\.sk-textarea:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-textarea.sk-size-${ size } alongside .sk-textarea.sk-${ size }`, () =>
+                {
+                    expect(textareaCSS()).toMatch(new RegExp(`\\.sk-textarea\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('number-input', () =>
+    {
+        let css : string;
+
+        function numberInputCSS() : string
+        {
+            if(!css) { css = compileComponent('number-input'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-number-input[kind=...] attribute selectors', () =>
+        {
+            expect(numberInputCSS()).not.toMatch(/sk-number-input\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present on the wrapper', () =>
+            {
+                const sizeMatch = `\\[class\\*=${ attrValueRe('sk-size-') }\\]`;
+                expect(numberInputCSS()).toMatch(
+                    new RegExp(`\\.sk-number-input-wrapper:where\\(:not\\(${ sizeMatch }\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain on the wrapper', () =>
+            {
+                const out = numberInputCSS();
+                expect(out).toMatch(/\.sk-number-input-wrapper:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors on wrapper
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits both .sk-size-${ size } and .sk-${ size } on .sk-number-input-wrapper`, () =>
+                {
+                    expect(numberInputCSS()).toMatch(
+                        new RegExp(`\\.sk-number-input-wrapper\\.sk-size-${ size }[,\\s{\\s]`)
+                    );
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('checkbox', () =>
+    {
+        let css : string;
+
+        function checkboxCSS() : string
+        {
+            if(!css) { css = compileComponent('checkbox'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-checkbox[kind=...] attribute selectors', () =>
+        {
+            expect(checkboxCSS()).not.toMatch(/sk-checkbox\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(checkboxCSS()).toMatch(
+                    new RegExp(`\\.sk-checkbox:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = checkboxCSS();
+                expect(out).toMatch(/\.sk-checkbox:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-checkbox.sk-size-${ size } alongside .sk-checkbox.sk-${ size }`, () =>
+                {
+                    expect(checkboxCSS()).toMatch(new RegExp(`\\.sk-checkbox\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('radio', () =>
+    {
+        let css : string;
+
+        function radioCSS() : string
+        {
+            if(!css) { css = compileComponent('radio'); }
+            return css;
+        }
+
+        //--------------------------------------------------------------------------------------------------------------
+        // No attribute selectors emitted — class-only component
+        //--------------------------------------------------------------------------------------------------------------
+
+        it('does not emit sk-radio[kind=...] attribute selectors', () =>
+        {
+            expect(radioCSS()).not.toMatch(/sk-radio\[kind=/);
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // Defaults-when-absent
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(radioCSS()).toMatch(
+                    new RegExp(`\\.sk-radio:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain', () =>
+            {
+                const out = radioCSS();
+                expect(out).toMatch(/\.sk-radio:where\(:not\(\.sk-neutral\)/);
+                expect(out).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        //--------------------------------------------------------------------------------------------------------------
+        // sk-size-* alias selectors
+        //--------------------------------------------------------------------------------------------------------------
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-radio.sk-size-${ size } alongside .sk-radio.sk-${ size }`, () =>
+                {
+                    expect(radioCSS()).toMatch(new RegExp(`\\.sk-radio\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('switch', () =>
+    {
+        const css = compileComponent('switch');
+
+        it('does NOT emit sk-switch[kind=...] attribute selectors', () =>
+        {
+            expect(css).not.toMatch(/sk-switch\[kind=/);
+        });
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(css).toMatch(
+                    new RegExp(`\\.sk-switch:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default kind via :not() chain when no kind class is present', () =>
+            {
+                expect(css).toMatch(/\.sk-switch:where\(:not\(\.sk-neutral\)/);
+                expect(css).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'xs', 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits sk-size-${ size } alias alongside .sk-switch.sk-${ size } on wrapper`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`sk-switch\\.sk-size-${ size }`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('select', () =>
+    {
+        const css = compileComponent('select');
+
+        it('does NOT emit sk-select[kind=...] attribute selectors', () =>
+        {
+            expect(css).not.toMatch(/sk-select\[kind=/);
+        });
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(css).toMatch(
+                    new RegExp(`\\.sk-select:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain when no kind class is present', () =>
+            {
+                expect(css).toMatch(/\.sk-select:where\(:not\(\.sk-neutral\)/);
+                expect(css).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-select.sk-size-${ size } alongside .sk-select.sk-${ size }`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`\\.sk-select\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('slider', () =>
+    {
+        const css = compileComponent('slider');
+
+        it('does NOT emit sk-slider[kind=...] attribute selectors', () =>
+        {
+            expect(css).not.toMatch(/sk-slider\[kind=/);
+        });
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(css).toMatch(
+                    new RegExp(`\\.sk-slider:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default kind via :not() chain when no kind class is present', () =>
+            {
+                expect(css).toMatch(/\.sk-slider:where\(:not\(\.sk-neutral\)/);
+                expect(css).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'xs', 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-slider.sk-size-${ size } alongside .sk-slider.sk-${ size }`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`\\.sk-slider\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+
+        it('preserves native range pseudo-element rules (::-webkit-slider-thumb etc.)', () =>
+        {
+            // Slider uses Reka UI primitives that render range-like elements.
+            // The thumb is a class-based element; verify thumb rules still compile.
+            expect(css).toMatch(/\.sk-slider-thumb/);
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('color-picker', () =>
+    {
+        const css = compileComponent('color-picker');
+
+        it('does NOT emit sk-color-picker[kind=...] attribute selectors', () =>
+        {
+            expect(css).not.toMatch(/sk-color-picker\[kind=/);
+        });
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(css).toMatch(
+                    new RegExp(`\\.sk-color-picker:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain when no kind class is present', () =>
+            {
+                expect(css).toMatch(/\.sk-color-picker:where\(:not\(\.sk-neutral\)/);
+                expect(css).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-color-picker.sk-size-${ size } alongside .sk-color-picker.sk-${ size }`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`\\.sk-color-picker\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('tags-input', () =>
+    {
+        const css = compileComponent('tags-input');
+
+        it('does NOT emit sk-tags-input[kind=...] attribute selectors', () =>
+        {
+            expect(css).not.toMatch(/sk-tags-input\[kind=/);
+        });
+
+        describe('defaults-when-absent', () =>
+        {
+            it('applies default md size when no sk-size-* class is present', () =>
+            {
+                expect(css).toMatch(
+                    new RegExp(`\\.sk-tags-input:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+                );
+            });
+
+            it('applies default neutral kind via :not() chain when no kind class is present', () =>
+            {
+                expect(css).toMatch(/\.sk-tags-input:where\(:not\(\.sk-neutral\)/);
+                expect(css).toMatch(/:not\(\.sk-red\)\)/);
+            });
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg', 'xl' ])
+            {
+                it(`emits .sk-tags-input.sk-size-${ size } alongside .sk-tags-input.sk-${ size }`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`\\.sk-tags-input\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+
+        it('preserves inner tag chip rules (.sk-tag)', () =>
+        {
+            // tags-input container hosts .sk-tag chips — verify no regression in base rules.
+            expect(css).toMatch(/\.sk-tags-input-container/);
+        });
+    });
+
+    //------------------------------------------------------------------------------------------------------------------
+
+    describe('dropdown', () =>
+    {
+        const css = compileComponent('dropdown');
+
+        it('does NOT emit sk-dropdown[kind=...] modifier attribute selectors', () =>
+        {
+            // [open] on <details> is fine; we're only guarding against emitting kind= or size= attribute selectors.
+            expect(css).not.toMatch(/sk-dropdown\[kind=/);
+            expect(css).not.toMatch(/sk-dropdown\[size=/);
+        });
+
+        it('styles the <summary> trigger', () =>
+        {
+            expect(css).toMatch(/\.sk-dropdown\s*>\s*summary/);
+        });
+
+        it('applies default size when no sk-size-* class is present', () =>
+        {
+            expect(css).toMatch(
+                new RegExp(`\\.sk-dropdown:where\\(:not\\(\\[class\\*=${ attrValueRe('sk-size-') }\\]\\)\\)`)
+            );
+        });
+
+        it('applies default kind when no sk-<kind> class is present', () =>
+        {
+            expect(css).toMatch(/\.sk-dropdown:where\(:not\(\.sk-neutral\)/);
+        });
+
+        describe('size alias selectors', () =>
+        {
+            for(const size of [ 'sm', 'md', 'lg' ])
+            {
+                it(`emits .sk-dropdown.sk-size-${ size } alongside .sk-dropdown.sk-${ size }`, () =>
+                {
+                    expect(css).toMatch(new RegExp(`\\.sk-dropdown\\.sk-size-${ size }[,\\s{]`));
+                });
+            }
+        });
+    });
+});
+
+//----------------------------------------------------------------------------------------------------------------------