@ctrliq/quantic-components 1.83.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,7 +1,42 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-08-27T20:08:17.213Z",
+  "generated": "2026-08-27T21:15:44.818Z",
   "components": [
+    {
+      "tag": "quantic-action-group",
+      "description": "A row of related actions sharing one accessible name and a consistent gap. Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. Use quantic-button-bar when the buttons should read as one joined control.",
+      "category": "action",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."
+        }
+      ],
+      "examples": [
+        "<quantic-action-group ><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Asset actions\">\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-copy size=\"xs\"></quantic-icon-lucide-copy>\n      </quantic-button>\n      <quantic-button variant=\"ghost\" size=\"sm\">\n        <quantic-icon-lucide-download size=\"xs\"></quantic-icon-lucide-download>\n      </quantic-button>\n    </quantic-action-group>",
+        "<quantic-dialog open>\n      <quantic-dialog-title slot=\"header\">Confirm action</quantic-dialog-title>\n      <p>Are you sure you want to perform this action? This cannot be undone.</p>\n      <quantic-dialog-actions slot=\"footer\">\n        <quantic-button variant=\"outline\">Cancel</quantic-button>\n        <quantic-button variant=\"primary\">Confirm</quantic-button>\n      </quantic-dialog-actions>\n    </quantic-dialog>",
+        "<quantic-action-group ><quantic-button variant=\"outline\">Delete</quantic-button><quantic-button variant=\"outline\">Duplicate</quantic-button><quantic-button variant=\"primary\">Publish</quantic-button></quantic-action-group>",
+        "<quantic-action-group aria-label=\"Record actions\"><quantic-button variant=\"outline\">Cancel</quantic-button><quantic-button variant=\"primary\">Save</quantic-button></quantic-action-group>"
+      ],
+      "relatedTo": [
+        "quantic-button",
+        "quantic-button-bar",
+        "quantic-dialog-actions"
+      ],
+      "subComponents": [
+        "quantic-button",
+        "quantic-dropdown-menu",
+        "quantic-popover"
+      ]
+    },
     {
       "tag": "quantic-alert",
       "description": "Inline alert banner with severity styles and optional dismiss action. Visibility is owned by the consumer.",
@@ -146,6 +181,38 @@
         "quantic-status-badge"
       ]
     },
+    {
+      "tag": "quantic-badge-group",
+      "description": "A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. Use quantic-tag-group for tags.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-badge or quantic-status-badge elements."
+        }
+      ],
+      "examples": [
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Service status\">\n      <quantic-status-badge color=\"success\" size=\"sm\">Running</quantic-status-badge>\n      <quantic-status-badge color=\"warning\" size=\"sm\">Degraded</quantic-status-badge>\n      <quantic-status-badge color=\"error\" size=\"sm\">Offline</quantic-status-badge>\n    </quantic-badge-group>",
+        "<quantic-badge-group aria-label=\"Asset types\"><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge></quantic-badge-group>",
+        "<quantic-badge-group ><quantic-badge color=\"gray\" size=\"sm\">Backgrounds</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Email signatures</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Headers</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Social graphics</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Slide templates</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Press kits</quantic-badge><quantic-badge color=\"gray\" size=\"sm\">Advisory cards</quantic-badge></quantic-badge-group>"
+      ],
+      "relatedTo": [
+        "quantic-badge",
+        "quantic-tag-group"
+      ],
+      "subComponents": [
+        "quantic-badge",
+        "quantic-status-badge"
+      ]
+    },
     {
       "tag": "quantic-button",
       "description": "Clickable action trigger for form submission, primary CTAs, and secondary actions. Supports icon-only mode and polymorphic rendering as an <a> or <span>. Prefer over quantic-icon-label when the element needs to be interactive.",
@@ -285,7 +352,7 @@
     },
     {
       "tag": "quantic-button-bar",
-      "description": "Toolbar of related buttons joined into one cohesive control, with shared sizing. Use for switching between views or modes, and for a compact run of icon actions. Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.",
+      "description": "Toolbar of related buttons joined into one cohesive control, with shared sizing. Use for switching between views or modes, and for a compact run of icon actions. Items carry aria-pressed via active, so a set can behave as exclusive options or as independent toggles. Focus follows the toolbar pattern: one tab stop, arrow keys move between items, Home and End jump to the ends. Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.",
       "category": "action",
       "props": [
         {
@@ -362,7 +429,7 @@
     },
     {
       "tag": "quantic-button-group",
-      "description": "Deprecated alias of quantic-button-bar. This element never grouped buttons: it joins borders and gives its items a pressed state. Use quantic-button-bar.",
+      "description": "Deprecated alias of quantic-button-bar. Use quantic-button-bar.",
       "category": "action",
       "deprecated": {
         "use": "quantic-button-bar",
@@ -1655,7 +1722,7 @@
     },
     {
       "tag": "quantic-dialog-actions",
-      "description": "Footer actions bar sub-component for quantic-dialog. Lays out action buttons (confirm/cancel) flush to the right.",
+      "description": "Footer actions bar for quantic-dialog. Lays action buttons out as a quantic-action-group, flush to the right.",
       "category": "feedback",
       "slots": [
         {
@@ -1665,7 +1732,11 @@
       ],
       "relatedTo": [
         "quantic-dialog",
-        "quantic-button"
+        "quantic-button",
+        "quantic-action-group"
+      ],
+      "subComponents": [
+        "quantic-action-group"
       ]
     },
     {
@@ -4701,6 +4772,40 @@
         "quantic-badge"
       ]
     },
+    {
+      "tag": "quantic-tag-group",
+      "description": "A run of quantic-tag, quantic-status-tag or quantic-count-tag sharing one accessible name and a consistent gap. Wraps across lines, and each tag keeps its own size. Gap: --quantic-component-tag-group-gap. Use quantic-badge-group for badges.",
+      "category": "display",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "description": "Accessible name for the group.",
+          "type": "string"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "quantic-tag, quantic-status-tag or quantic-count-tag elements."
+        }
+      ],
+      "examples": [
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Applied filters\">\n      <quantic-tag dismissible>Compute</quantic-tag>\n      <quantic-tag dismissible>Storage</quantic-tag>\n      <quantic-tag dismissible>Networking</quantic-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster state\">\n      <quantic-tag>Compute</quantic-tag>\n      <quantic-status-tag color=\"success\">Healthy</quantic-status-tag>\n      <quantic-count-tag count=\"12\">Nodes</quantic-count-tag>\n    </quantic-tag-group>",
+        "<quantic-tag-group aria-label=\"Cluster capabilities\"><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag></quantic-tag-group>",
+        "<quantic-tag-group ><quantic-tag size=\"md\">Compute</quantic-tag><quantic-tag size=\"md\">Storage</quantic-tag><quantic-tag size=\"md\">Networking</quantic-tag><quantic-tag size=\"md\">Scheduling</quantic-tag><quantic-tag size=\"md\">Monitoring</quantic-tag><quantic-tag size=\"md\">Provisioning</quantic-tag><quantic-tag size=\"md\">Authentication</quantic-tag><quantic-tag size=\"md\">Observability</quantic-tag></quantic-tag-group>"
+      ],
+      "relatedTo": [
+        "quantic-tag",
+        "quantic-badge-group"
+      ],
+      "subComponents": [
+        "quantic-tag",
+        "quantic-status-tag",
+        "quantic-count-tag"
+      ]
+    },
     {
       "tag": "quantic-text",
       "description": "Typography component for rendering text with consistent sizing, weight, and color tokens. Renders any HTML element via the `as` prop for semantic correctness.",

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([