@ctrliq/quantic-components 1.84.0 → 1.84.1

package/dist/meta/public-css-variables.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/meta/public-css-variables.test.js

@@ -0,0 +1,244 @@
+import { globSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import postcss from 'postcss';
+import { describe, expect, it } from 'vitest';
+const SRC_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
+const PUBLIC = /^--quantic-component-[a-z0-9-]+$/;
+const PRIVATE = /^--quantic-internal-[a-z0-9-]+$/;
+const TAG = /@quanticElement\(\s*['"`]quantic-([a-z0-9-]+)['"`]/g;
+const VAR_CALL = /var\(\s*(--[a-z0-9_-]+)/g;
+function skipInterpolation(source, start) {
+    let depth = 0;
+    for (let cursor = start; cursor < source.length; cursor += 1) {
+        if (source[cursor] === '{')
+            depth += 1;
+        else if (source[cursor] === '}') {
+            depth -= 1;
+            if (depth === 0)
+                return cursor + 1;
+        }
+    }
+    return source.length;
+}
+function readTemplate(source, start) {
+    let css = '';
+    let index = start;
+    while (index < source.length && source[index] !== '`') {
+        if (source[index] === '$' && source[index + 1] === '{') {
+            index = skipInterpolation(source, index + 1);
+            continue;
+        }
+        css += source[index];
+        index += 1;
+    }
+    return { css, end: index };
+}
+function isInComment(source, matchIndex) {
+    const lineStart = source.lastIndexOf('\n', matchIndex) + 1;
+    const prefix = source.slice(lineStart, matchIndex).trim();
+    return prefix.startsWith('*') || prefix.startsWith('//');
+}
+function parse(source) {
+    const blocks = /\bcss`/g;
+    const roots = [];
+    for (let match = blocks.exec(source); match; match = blocks.exec(source)) {
+        const { css, end } = readTemplate(source, blocks.lastIndex);
+        blocks.lastIndex = end + 1;
+        if (!isInComment(source, match.index))
+            roots.push(postcss.parse(css));
+    }
+    return roots;
+}
+function namespacesOf(source) {
+    return [...source.matchAll(TAG)].map(([, name]) => `--quantic-component-${name}-`);
+}
+const elements = globSync('**/*.ts', { cwd: SRC_DIR })
+    .filter((file) => !/\.(stories|test|d)\.ts$/.test(file))
+    .map((file) => ({ file, source: readFileSync(join(SRC_DIR, file), 'utf-8') }))
+    .map(({ file, source }) => ({
+    file,
+    dir: file.split('/')[0],
+    tags: [...source.matchAll(TAG)].map(([, name]) => `quantic-${name}`),
+    roots: parse(source),
+    namespaces: namespacesOf(source),
+}))
+    .filter(({ roots }) => roots.length > 0);
+const components = Object.entries(elements
+    .reduce((grouped, { dir, roots, namespaces }) => {
+    const found = grouped[dir] ?? { file: dir, roots: [], namespaces: [] };
+    return {
+        ...grouped,
+        [dir]: {
+            file: dir,
+            roots: [...found.roots, ...roots],
+            namespaces: [...found.namespaces, ...namespaces],
+        },
+    };
+}, {})).map(([, component]) => component);
+function hasFallback(value, openIndex) {
+    return [...value.slice(openIndex)].reduce((state, char) => {
+        if (state.closed)
+            return state;
+        if (char === '(')
+            return { ...state, depth: state.depth + 1 };
+        if (char === ')') {
+            const depth = state.depth - 1;
+            return { ...state, depth, closed: depth === 0 };
+        }
+        if (char === ',' && state.depth === 1)
+            return { ...state, found: true };
+        return state;
+    }, { depth: 0, closed: false, found: false }).found;
+}
+function varCalls(value) {
+    return [...value.matchAll(VAR_CALL)].map((match) => ({
+        name: match[1],
+        hasFallback: hasFallback(value, (match.index ?? 0) + 3),
+    }));
+}
+function isHostOnly(rule) {
+    return rule.selectors.every((selector) => selector.trim().startsWith(':host'));
+}
+function declarations(component) {
+    const found = [];
+    for (const root of component.roots) {
+        root.walkDecls((decl) => {
+            found.push(decl);
+        });
+    }
+    return found;
+}
+function reads(component) {
+    const names = new Set();
+    for (const root of component.roots) {
+        root.walkDecls((decl) => {
+            for (const { name } of varCalls(decl.value)) {
+                if (name !== decl.prop)
+                    names.add(name);
+            }
+        });
+    }
+    return names;
+}
+function hostDeclared(component) {
+    const names = new Set();
+    for (const decl of declarations(component)) {
+        const parent = decl.parent;
+        if (parent?.type === 'rule' && isHostOnly(parent))
+            names.add(decl.prop);
+    }
+    return names;
+}
+function innerDeclarations(component, pattern) {
+    return declarations(component).filter((decl) => {
+        if (!pattern.test(decl.prop))
+            return false;
+        const parent = decl.parent;
+        if (!parent || parent.type !== 'rule')
+            return true;
+        return !isHostOnly(parent);
+    });
+}
+function privateDeclarations(element) {
+    const names = new Set();
+    for (const root of element.roots) {
+        root.walkDecls((decl) => {
+            if (PRIVATE.test(decl.prop))
+                names.add(decl.prop);
+        });
+    }
+    return names;
+}
+describe('public CSS variables', () => {
+    it('parses the stylesheet of every component that declares one', () => {
+        expect(components.length).toBeGreaterThan(40);
+    });
+    it('reads a stylesheet past an interpolated template literal', () => {
+        const spinner = components.find((component) => component.file === 'spinner');
+        expect(spinner, 'quantic-spinner is the fixture for this check').toBeDefined();
+        const atRules = (spinner?.roots ?? []).flatMap((root) => root.nodes.filter((node) => node.type === 'atrule').map((node) => node.name));
+        expect(atRules).toContain('keyframes');
+    });
+    it('never declares a public variable on the element that reads it', () => {
+        const dead = components.flatMap((component) => {
+            const read = reads(component);
+            return innerDeclarations(component, PUBLIC)
+                .filter((decl) => read.has(decl.prop))
+                .map((decl) => `${decl.prop} in ${component.file} (on "${decl.parent.selector}")`);
+        });
+        expect([...new Set(dead)]).toEqual([]);
+    });
+    it('names every private variable after the component that owns it', () => {
+        const generic = components.flatMap((component) => {
+            const owned = `--quantic-internal-${component.file}-`;
+            const names = [
+                ...declarations(component)
+                    .map((decl) => decl.prop)
+                    .filter((name) => PRIVATE.test(name)),
+                ...[...reads(component)].filter((name) => PRIVATE.test(name)),
+            ];
+            return names
+                .filter((name) => !name.startsWith(owned))
+                .map((name) => `${name} in ${component.file} (expected ${owned}*)`);
+        });
+        expect([...new Set(generic)]).toEqual([]);
+    });
+    it('names every private variable after the element that declares it', () => {
+        const misattributed = elements
+            .filter((element) => element.tags.length > 0)
+            .flatMap((element) => [...privateDeclarations(element)]
+            .filter((name) => !element.tags.some((tag) => name.startsWith(`--quantic-internal-${tag.replace(/^quantic-/, '')}-`)))
+            .map((name) => `${name} declared by ${element.tags.join(', ')} (${element.file})`));
+        expect([...new Set(misattributed)]).toEqual([]);
+    });
+    it('declares every private variable it reads', () => {
+        const dangling = components.flatMap((component) => {
+            const declared = new Set(declarations(component)
+                .filter((decl) => PRIVATE.test(decl.prop))
+                .map((decl) => decl.prop));
+            return [...reads(component)]
+                .filter((name) => PRIVATE.test(name) && !declared.has(name))
+                .map((name) => `${name} in ${component.file}`);
+        });
+        expect(dangling).toEqual([]);
+    });
+    it('reads every private variable it declares', () => {
+        const orphaned = components.flatMap((component) => {
+            const read = reads(component);
+            return declarations(component)
+                .filter((decl) => PRIVATE.test(decl.prop) && !read.has(decl.prop))
+                .map((decl) => `${decl.prop} in ${component.file}`);
+        });
+        expect([...new Set(orphaned)]).toEqual([]);
+    });
+    it('reads every public variable it declares in its own namespace', () => {
+        const orphaned = components.flatMap((component) => {
+            const read = reads(component);
+            return declarations(component)
+                .filter((decl) => PUBLIC.test(decl.prop) && !read.has(decl.prop))
+                .filter((decl) => component.namespaces.some((prefix) => decl.prop.startsWith(prefix)))
+                .map((decl) => `${decl.prop} in ${component.file}`);
+        });
+        expect([...new Set(orphaned)]).toEqual([]);
+    });
+    it('gives every public read a default', () => {
+        const bare = components.flatMap((component) => {
+            const onHost = hostDeclared(component);
+            const found = [];
+            for (const root of component.roots) {
+                root.walkDecls((decl) => {
+                    if (decl.prop.startsWith('--'))
+                        return;
+                    for (const { name, hasFallback } of varCalls(decl.value)) {
+                        if (PUBLIC.test(name) && !hasFallback && !onHost.has(name)) {
+                            found.push(`${name} in ${component.file} (read by ${decl.prop})`);
+                        }
+                    }
+                });
+            }
+            return found;
+        });
+        expect([...new Set(bare)]).toEqual([]);
+    });
+});

package/dist/meta.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T20:51:41.571Z",
+  "generated": "2026-08-27T21:15:44.818Z",
   "components": [
     {
       "tag": "quantic-action-group",

package/dist/number-input/index.js

@@ -187,8 +187,8 @@ NumberInput.styles = css `
       display: inline-block;
       width: 100%;
 
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-3);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-md);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-3);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-md);
       --quantic-component-number-input-bg: var(--quantic-bg-primary);
       --quantic-component-number-input-color: var(--quantic-text-primary);
     }
@@ -205,12 +205,13 @@ NumberInput.styles = css `
       border-radius: var(--quantic-component-number-input-border-radius, var(--quantic-radius-sm));
       color: var(--quantic-component-number-input-color);
       background-color: var(--quantic-component-number-input-bg);
-      padding-block: var(--quantic-component-number-input-padding-block);
+      padding-block: var(--quantic-component-number-input-padding-block, var(--quantic-internal-number-input-padding-block));
       padding-inline-start: var(
-        --quantic-component-number-input-padding-inline
-        );
+        --quantic-component-number-input-padding-inline,
+        var(--quantic-internal-number-input-padding-inline)
+      );
       padding-inline-end: calc(
-        var(--quantic-component-number-input-padding-inline) + var(--quantic-spacing-6)
+        var(--quantic-component-number-input-padding-inline, var(--quantic-internal-number-input-padding-inline)) + var(--quantic-spacing-6)
       );
       transition:
         border-color 0.2s ease-in-out,
@@ -231,30 +232,30 @@ NumberInput.styles = css `
 
     .main.size--xs {
       font-size: 13px;
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-number-input-padding-block: var(
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-number-input-padding-block: var(
         --quantic-spacing-xxs
       );
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-3);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-3);
     }
 
     .main.size--sm {
       font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-2);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-sm);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-4);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-2);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-sm);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-4);
     }
 
     .main.size--md {
       font-size: var(--quantic-font-size-body-md);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-4);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-4);
     }
 
     .main.size--lg {
       font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-number-input-padding-inline: var(--quantic-spacing-4);
-      --quantic-component-number-input-padding-block: var(--quantic-spacing-3);
-      --quantic-component-number-input-icon-size: var(--quantic-spacing-5);
+      --quantic-internal-number-input-padding-inline: var(--quantic-spacing-4);
+      --quantic-internal-number-input-padding-block: var(--quantic-spacing-3);
+      --quantic-internal-number-input-icon-size: var(--quantic-spacing-5);
     }
 
     .input {
@@ -310,7 +311,7 @@ NumberInput.styles = css `
 
     quantic-icon-lucide-chevron-up,
     quantic-icon-lucide-chevron-down {
-      --icon-size: var(--quantic-component-number-input-icon-size);
+      --icon-size: var(--quantic-component-number-input-icon-size, var(--quantic-internal-number-input-icon-size));
     }
 
     slot[name='prefix'] {

package/dist/option-card/option-card.component.js

@@ -194,13 +194,13 @@ OptionCard.styles = css `
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);
 
-      --quantic-component-option-card-padding: var(--quantic-spacing-5);
-      --quantic-component-option-card-radius: var(--quantic-radius-md);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-3);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-5);
+      --quantic-internal-option-card-radius: var(--quantic-radius-md);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-3);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-md
       );
     }
@@ -209,13 +209,13 @@ OptionCard.styles = css `
       position: relative;
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-option-card-spacing);
-      padding: var(--quantic-component-option-card-padding);
-      border-radius: var(--quantic-component-option-card-radius);
+      gap: var(--quantic-component-option-card-spacing, var(--quantic-internal-option-card-spacing));
+      padding: var(--quantic-component-option-card-padding, var(--quantic-internal-option-card-padding));
+      border-radius: var(--quantic-component-option-card-radius, var(--quantic-internal-option-card-radius));
       border: 2px solid var(--quantic-border-secondary);
       background-color: transparent;
-      font-size: var(--quantic-component-option-card-font-size);
-      line-height: var(--quantic-component-option-card-line-height);
+      font-size: var(--quantic-component-option-card-font-size, var(--quantic-internal-option-card-font-size));
+      line-height: var(--quantic-component-option-card-line-height, var(--quantic-internal-option-card-line-height));
       cursor: pointer;
       user-select: none;
       transition:
@@ -233,37 +233,37 @@ OptionCard.styles = css `
 
     /* Size variants */
     .size--sm {
-      --quantic-component-option-card-padding: var(--quantic-spacing-4);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-2);
-      --quantic-component-option-card-radius: var(--quantic-radius-sm);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-4);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-2);
+      --quantic-internal-option-card-radius: var(--quantic-radius-sm);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-sm
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-option-card-padding: var(--quantic-spacing-5);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-3);
-      --quantic-component-option-card-radius: var(--quantic-radius-md);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-5);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-3);
+      --quantic-internal-option-card-radius: var(--quantic-radius-md);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-md
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-option-card-padding: var(--quantic-spacing-6);
-      --quantic-component-option-card-spacing: var(--quantic-spacing-4);
-      --quantic-component-option-card-radius: var(--quantic-radius-lg);
-      --quantic-component-option-card-font-size: var(
+      --quantic-internal-option-card-padding: var(--quantic-spacing-6);
+      --quantic-internal-option-card-spacing: var(--quantic-spacing-4);
+      --quantic-internal-option-card-radius: var(--quantic-radius-lg);
+      --quantic-internal-option-card-font-size: var(
         --quantic-font-size-body-lg
       );
-      --quantic-component-option-card-line-height: var(
+      --quantic-internal-option-card-line-height: var(
         --quantic-line-height-body-lg
       );
     }
@@ -313,7 +313,7 @@ OptionCard.styles = css `
       position: absolute;
       inset: 0;
       opacity: 0;
-      border-radius: calc(var(--quantic-component-option-card-radius) + 4px);
+      border-radius: calc(var(--quantic-component-option-card-radius, var(--quantic-internal-option-card-radius)) + 4px);
       border: 2px solid transparent;
       transition: all 0.2s ease-in-out;
       pointer-events: none;
@@ -337,7 +337,7 @@ OptionCard.styles = css `
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
-      gap: var(--quantic-component-option-card-spacing);
+      gap: var(--quantic-component-option-card-spacing, var(--quantic-internal-option-card-spacing));
     }
 
     .indicator {

package/dist/panel/panel-group.component.js

@@ -46,31 +46,34 @@ PanelGroup.styles = css `
     .group {
       display: flex;
       flex-direction: column;
-      gap: var(--quantic-component-panel-group-gap, var(--quantic-spacing-6));
+      gap: var(
+        --quantic-component-panel-group-gap,
+        var(--quantic-internal-panel-group-gap, var(--quantic-spacing-6))
+      );
     }
 
     .gap--none {
-      --quantic-component-panel-group-gap: 0;
+      --quantic-internal-panel-group-gap: 0;
     }
 
     .gap--xs {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-3);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-3);
     }
 
     .gap--sm {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-4);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-4);
     }
 
     .gap--md {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-6);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-6);
     }
 
     .gap--lg {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-8);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-8);
     }
 
     .gap--xl {
-      --quantic-component-panel-group-gap: var(--quantic-spacing-12);
+      --quantic-internal-panel-group-gap: var(--quantic-spacing-12);
     }
   `;
 __decorate([

package/dist/panel/panel.component.js

@@ -59,7 +59,7 @@ Panel.styles = css `
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);
 
-      --quantic-component-panel-padding: var(--quantic-spacing-6);
+      --quantic-internal-panel-padding: var(--quantic-spacing-6);
       --quantic-component-panel-font-size: var(--quantic-font-size-body-md);
       --quantic-component-panel-line-height: var(--quantic-line-height-body-md);
       --quantic-component-panel-radius: var(--quantic-radius-md);
@@ -71,7 +71,7 @@ Panel.styles = css `
       display: flex;
       flex-direction: column;
       gap: var(--quantic-component-panel-spacing);
-      padding: var(--quantic-component-panel-padding);
+      padding: var(--quantic-component-panel-padding, var(--quantic-internal-panel-padding));
       border-radius: var(--quantic-component-panel-radius);
       border: 1px solid var(--quantic-border-primary);
       font-size: var(--quantic-component-panel-font-size);
@@ -93,7 +93,7 @@ Panel.styles = css `
     .variant--ghost {
       background-color: transparent;
       border: none;
-      --quantic-component-panel-padding: 0;
+      --quantic-internal-panel-padding: 0;
     }
 
     .highlighted {

package/dist/progress/index.js

@@ -96,37 +96,37 @@ Progress.styles = css `
       overflow: hidden;
       border-radius: var(--quantic-radius-full);
       background-color: var(--quantic-color-gray-dark-mode-700);
-      height: var(--quantic-component-progress-height, 4px);
+      height: var(--quantic-component-progress-height, var(--quantic-internal-progress-height, 4px));
     }
 
     .size--xs {
-      --quantic-component-progress-height: 2px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-xs);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 2px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-xs);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-xs
       );
     }
 
     .size--sm {
-      --quantic-component-progress-height: 4px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-sm);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 4px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-sm);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-sm
       );
     }
 
     .size--md {
-      --quantic-component-progress-height: 6px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-md);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 6px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-md);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-md
       );
     }
 
     .size--lg {
-      --quantic-component-progress-height: 8px;
-      --quantic-component-progress-font-size: var(--quantic-font-size-body-lg);
-      --quantic-component-progress-line-height: var(
+      --quantic-internal-progress-height: 8px;
+      --quantic-internal-progress-font-size: var(--quantic-font-size-body-lg);
+      --quantic-internal-progress-line-height: var(
         --quantic-line-height-body-lg
       );
     }
@@ -154,11 +154,11 @@ Progress.styles = css `
       flex-shrink: 0;
       font-size: var(
         --quantic-component-progress-font-size,
-        var(--quantic-font-size-body-sm)
+        var(--quantic-internal-progress-font-size, var(--quantic-font-size-body-sm))
       );
       line-height: var(
         --quantic-component-progress-line-height,
-        var(--quantic-line-height-body-sm)
+        var(--quantic-internal-progress-line-height, var(--quantic-line-height-body-sm))
       );
       font-family: var(--quantic-font-family-body);
       color: var(--quantic-text-secondary);