@ctrliq/quantic-components 1.88.0 → 1.89.1

package/dist/meta/part-parity.test.d.ts

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

package/dist/meta/part-parity.test.js

@@ -0,0 +1,68 @@
+import { globSync, readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+const SRC_DIR = join(dirname(fileURLToPath(import.meta.url)), '..');
+const TAG = /@quanticElement\(\s*['"`]([^'"`]+)['"`]\s*\)/;
+// A negative lookbehind for `[` excludes `[part="divider"]`-style CSS selector strings
+// used to query the rendered part from JS, which are not a `::part()` declaration.
+const PART_ATTR = /(?<!\[)\bpart="([^"]+)"/g;
+const PART_KEY = /(?:'([^']*)'|([A-Za-z_$][\w$]*))\s*:\s*\{/g;
+// Read from source rather than importing allMeta: that would pull in every component
+// module, and several import generated icon files that only exist after a build.
+function componentSources() {
+    return globSync('**/*.ts', { cwd: SRC_DIR })
+        .filter((file) => !/\.(stories|test|d)\.ts$/.test(file))
+        .map((file) => ({ file, source: readFileSync(join(SRC_DIR, file), 'utf-8') }));
+}
+/** Top-level keys of the `parts: { ... }` object, by brace matching from its opening. */
+function declaredParts(source) {
+    const start = source.indexOf('parts: {');
+    if (start === -1)
+        return new Set();
+    const open = source.indexOf('{', start);
+    let depth = 0;
+    let end = open;
+    for (; end < source.length; end++) {
+        if (source[end] === '{')
+            depth++;
+        else if (source[end] === '}' && --depth === 0)
+            break;
+    }
+    const body = source.slice(open + 1, end);
+    const names = new Set();
+    let nesting = 0;
+    for (const match of body.matchAll(PART_KEY)) {
+        // Only keys sitting directly in the parts object name a part; `description` and
+        // friends live one level down.
+        nesting = [...body.slice(0, match.index)].reduce((depth, character) => depth + (character === '{' ? 1 : character === '}' ? -1 : 0), 0);
+        if (nesting === 0)
+            names.add(match[1] ?? match[2]);
+    }
+    return names;
+}
+/** Rendered `::part()` names per tag. */
+function renderedParts() {
+    return componentSources().flatMap(({ file, source }) => {
+        const tag = source.match(TAG)?.[1];
+        if (!tag || tag.includes('${'))
+            return [];
+        const names = [...new Set([...source.matchAll(PART_ATTR)].map(([, name]) => name))];
+        return names.length ? [{ tag, file, names, declared: declaredParts(source) }] : [];
+    });
+}
+describe('part parity', () => {
+    // The manifest is the only thing anything reads. A part that render() serves but meta
+    // does not declare is invisible to generated docs and to meta.json, and it turns
+    // `::part()` into an escape hatch nobody outside this repo can discover.
+    it('declares every part that render serves', () => {
+        const undeclared = renderedParts().flatMap(({ tag, file, names, declared }) => {
+            const missing = names.filter((name) => !declared.has(name));
+            return missing.length ? [`${tag} (${file}) is missing: ${missing.join(', ')}`] : [];
+        });
+        expect(undeclared).toEqual([]);
+    });
+    it('found parts to check', () => {
+        expect(renderedParts().length).toBeGreaterThan(0);
+    });
+});

package/dist/meta/serialize.d.ts

@@ -1,5 +1,5 @@
 import type { CopyRule } from '../shared/copy-rules';
-import type { ComponentMeta, EventMeta, PropMeta, SlotMeta } from '../shared/meta.types';
+import type { ComponentMeta, EventMeta, PartMeta, PropMeta, SlotMeta } from '../shared/meta.types';
 export declare const MANIFEST_SCHEMA_VERSION = 1;
 export type ManifestProp = PropMeta & {
     name: string;
@@ -10,10 +10,14 @@ export type ManifestSlot = SlotMeta & {
 export type ManifestEvent = EventMeta & {
     name: string;
 };
-export interface ManifestComponent extends Omit<ComponentMeta, 'props' | 'slots' | 'events'> {
+export type ManifestPart = PartMeta & {
+    name: string;
+};
+export interface ManifestComponent extends Omit<ComponentMeta, 'props' | 'slots' | 'events' | 'parts'> {
     props?: ManifestProp[];
     slots?: ManifestSlot[];
     events?: ManifestEvent[];
+    parts?: ManifestPart[];
     /** Derived from the children's `subComponentOf`, never hand-authored. */
     subComponents?: string[];
 }

package/dist/meta/serialize.js

@@ -8,6 +8,7 @@ export function serializeComponent(component, subComponents) {
     const props = toNamedArray(component.props);
     const events = toNamedArray(component.events);
     const slots = toNamedArray(component.slots);
+    const parts = toNamedArray(component.parts);
     const accessibility = component.accessibility?.providedByComponent?.length ||
         component.accessibility?.requiredFromConsumer?.length
         ? component.accessibility
@@ -22,6 +23,7 @@ export function serializeComponent(component, subComponents) {
         ...(props ? { props } : {}),
         ...(events ? { events } : {}),
         ...(slots ? { slots } : {}),
+        ...(parts ? { parts } : {}),
         ...(component.examples?.length ? { examples: component.examples } : {}),
         ...(component.relatedTo?.length ? { relatedTo: component.relatedTo } : {}),
         ...(component.avoidWhen?.length ? { avoidWhen: component.avoidWhen } : {}),

package/dist/meta/serialize.test.js

@@ -24,6 +24,13 @@ describe('serializeComponent', () => {
         const { slots } = serializeComponent(makeComponent({ slots: { header: { description: 'Header', required: true } } }));
         expect(slots).toEqual([{ name: 'header', description: 'Header', required: true }]);
     });
+    it('converts parts to an array carrying the part name', () => {
+        const { parts } = serializeComponent(makeComponent({ parts: { group: { description: 'The flex container' } } }));
+        expect(parts).toEqual([{ name: 'group', description: 'The flex container' }]);
+    });
+    it('omits parts entirely when the component declares none', () => {
+        expect(serializeComponent(makeComponent()).parts).toBeUndefined();
+    });
     it('keeps forwarded events and flags them', () => {
         const { events } = serializeComponent(makeComponent({
             events: {

package/dist/meta.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "generated": "2026-09-01T06:43:34.670Z",
+  "generated": "2026-09-04T09:21:53.513Z",
   "copyRules": {
     "field-label": {
       "rule": "Noun phrase, sentence case, no trailing colon.",
@@ -171,7 +171,7 @@
   "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. Layout: ::part(group), for a column or a different alignment. Use quantic-button-bar when the buttons should read as one joined control.",
+      "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": [
         {
@@ -186,6 +186,12 @@
           "description": "quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."
         }
       ],
+      "parts": [
+        {
+          "name": "group",
+          "description": "The flex container, for a column layout or a different alignment."
+        }
+      ],
       "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>",
@@ -406,7 +412,7 @@
     },
     {
       "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. Layout: ::part(group), for a column or a different alignment. Use quantic-tag-group for tags.",
+      "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": [
         {
@@ -421,6 +427,12 @@
           "description": "quantic-badge or quantic-status-badge elements."
         }
       ],
+      "parts": [
+        {
+          "name": "group",
+          "description": "The flex container, for a column layout or a different alignment."
+        }
+      ],
       "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>",
@@ -1719,6 +1731,12 @@
           "detail": "{ value: string }"
         }
       ],
+      "parts": [
+        {
+          "name": "textarea",
+          "description": "The native textarea element."
+        }
+      ],
       "examples": [
         "<quantic-code-input\n      name=\"code-input\"\n      placeholder=\"Enter code here...\"\n      rows=\"6\"\n      size=\"md\"\n      line-numbers\n    ></quantic-code-input>",
         "<quantic-code-input\n      name=\"code-input\"\n      placeholder=\"Enter code here...\"\n      rows=\"6\"\n      size=\"md\"\n      disabled\n      line-numbers\n    ></quantic-code-input>",
@@ -3382,6 +3400,12 @@
           "description": "Leading content (e.g. icon or unit symbol)."
         }
       ],
+      "parts": [
+        {
+          "name": "input",
+          "description": "The native input element."
+        }
+      ],
       "examples": [
         "<quantic-number-input\n    value=\"16\"\n    placeholder=\"0\"\n    size=\"md\"\n    name=\"number-input\"\n  ></quantic-number-input>",
         "<quantic-number-input\n    value=\"16\"\n    placeholder=\"0\"\n    size=\"md\"\n    name=\"number-input\"\n    disabled\n  ></quantic-number-input>",
@@ -3513,6 +3537,16 @@
           "description": "Optional secondary description below the label."
         }
       ],
+      "parts": [
+        {
+          "name": "label",
+          "description": "The wrapping label element."
+        },
+        {
+          "name": "indicator",
+          "description": "The checkbox or radio visual."
+        }
+      ],
       "examples": [
         "<div style=\"display: flex; flex-direction: column; gap: 1rem;\">\n      <quantic-option-card value=\"small\" size=\"sm\" variant=\"ghost\">\n        <quantic-icon-lucide-user slot=\"icon\"></quantic-icon-lucide-user>\n        <div>Small size</div>\n        <div slot=\"description\">This is a small option card</div>\n      </quantic-option-card>\n\n      <quantic-option-card value=\"medium\" size=\"md\" variant=\"ghost\">\n        <quantic-icon-lucide-users slot=\"icon\"></quantic-icon-lucide-users>\n        <div>Medium size (default)</div>\n        <div slot=\"description\">This is a medium option card</div>\n      </quantic-option-card>\n\n      <quantic-option-card value=\"large\" size=\"lg\" variant=\"ghost\">\n        <quantic-icon-lucide-building-2 slot=\"icon\"></quantic-icon-lucide-building-2>\n        <div>Large size</div>\n        <div slot=\"description\">This is a large option card</div>\n      </quantic-option-card>\n    </div>",
         "<quantic-option-card value=\"pro\" variant=\"solid\" size=\"md\" checked>\n      <div>Pro plan</div>\n      <div slot=\"description\">Most popular choice for growing businesses</div>\n    </quantic-option-card>",
@@ -5168,6 +5202,12 @@
           "description": "Two or more quantic-splitter-pane elements."
         }
       ],
+      "parts": [
+        {
+          "name": "divider",
+          "description": "The draggable handle between two panes."
+        }
+      ],
       "examples": [
         "<div style=\"height: 400px;\">\n      <quantic-splitter-group>\n        <quantic-splitter-pane>\n          <div style=\"padding: 16px; font-family: sans-serif;\">Left</div>\n        </quantic-splitter-pane>\n        <quantic-splitter-pane variant=\"solid\">\n          <div style=\"padding: 16px; font-family: sans-serif;\">Right</div>\n        </quantic-splitter-pane>\n      </quantic-splitter-group>\n    </div>",
         "<div style=\"height: 400px;\">\n      <quantic-splitter-group resizable split=\"50 50\">\n        <quantic-splitter-pane>\n          <div style=\"padding: 16px; font-family: sans-serif;\">\n            <quantic-card-group>\n              <quantic-card variant=\"solid\">\n                <quantic-card-title slot=\"header\">Alice Johnson</quantic-card-title>\n                Product Designer · San Francisco\n              </quantic-card>\n              <quantic-card variant=\"solid\">\n                <quantic-card-title slot=\"header\">Bob Martinez</quantic-card-title>\n                Frontend Engineer · New York\n              </quantic-card>\n              <quantic-card variant=\"solid\">\n                <quantic-card-title slot=\"header\">Clara Lee</quantic-card-title>\n                Engineering Manager · London\n              </quantic-card>\n              <quantic-card variant=\"solid\">\n                <quantic-card-title slot=\"header\">David Kim</quantic-card-title>\n                Backend Engineer · Seoul\n              </quantic-card>\n            </quantic-card-group>\n          </div>\n        </quantic-splitter-pane>\n        <quantic-splitter-pane>\n          <div style=\"padding: 16px; font-family: sans-serif;\">\n            <quantic-field-group>\n              <quantic-text-field label=\"Full Name\" placeholder=\"Enter full name\" required></quantic-text-field>\n              <quantic-text-field label=\"Email\" type=\"email\" placeholder=\"Enter email address\" hint=\"We'll never share your email\" required></quantic-text-field>\n              <quantic-select-field name=\"role\" label=\"Role\" placeholder=\"Select a role\">\n                <option value=\"designer\">Product Designer</option>\n                <option value=\"frontend\">Frontend Engineer</option>\n                <option value=\"backend\">Backend Engineer</option>\n                <option value=\"manager\">Engineering Manager</option>\n              </quantic-select-field>\n              <quantic-select-field name=\"location\" label=\"Location\" placeholder=\"Select a location\">\n                <option value=\"sf\">San Francisco</option>\n                <option value=\"ny\">New York</option>\n                <option value=\"london\">London</option>\n                <option value=\"seoul\">Seoul</option>\n              </quantic-select-field>\n            </quantic-field-group>\n          </div>\n        </quantic-splitter-pane>\n      </quantic-splitter-group>\n    </div>",
@@ -5388,7 +5428,7 @@
     },
     {
       "tag": "quantic-tab-button",
-      "description": "Individual tab trigger button within quantic-tabs. Set index to match the corresponding quantic-tab-panel. Size and orientation are inherited via context from the parent quantic-tabs. Reflects a selected attribute while active. Restyle the mark with ::part(indicator) or --quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.",
+      "description": "Individual tab trigger button within quantic-tabs. Set index to match the corresponding quantic-tab-panel. Size and orientation are inherited via context from the parent quantic-tabs. Reflects a selected attribute while active. Restyle the mark with --quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.",
       "category": "navigation",
       "props": [
         {
@@ -5437,6 +5477,16 @@
           "description": "Tab label text or custom content."
         }
       ],
+      "parts": [
+        {
+          "name": "button",
+          "description": "The native button element."
+        },
+        {
+          "name": "indicator",
+          "description": "The active-tab mark."
+        }
+      ],
       "relatedTo": [
         "quantic-tabs",
         "quantic-tab-panel"
@@ -5856,6 +5906,16 @@
           "description": "quantic-tab-button and quantic-tab-panel elements as direct children."
         }
       ],
+      "parts": [
+        {
+          "name": "nav",
+          "description": "The tablist container wrapping the tab buttons."
+        },
+        {
+          "name": "panels",
+          "description": "The container wrapping the tab panels."
+        }
+      ],
       "examples": [
         "<style>\n    .stack-tabs-frame {\n      width: 28rem;\n      max-width: 100%;\n      border: 1px solid var(--quantic-border-secondary);\n      border-radius: var(--quantic-radius-md);\n      padding: var(--quantic-spacing-4);\n      resize: horizontal;\n      overflow: auto;\n    }\n  </style>\n  <div class=\"stack-tabs-frame\">\n    <quantic-tabs\n      selected-index=\"0\"\n      size=\"md\"\n      orientation=\"vertical\"\n      collapse-below=\"640px\"\n    >\n      <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n      <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n      <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n      <quantic-tab-panel index=\"0\">\n        <p class=\"story-copy\">Stacked when the tabs container is 640px wide or less.</p>\n      </quantic-tab-panel>\n      <quantic-tab-panel index=\"1\">\n        <p class=\"story-copy\">Email Notifications: Enabled</p>\n      </quantic-tab-panel>\n      <quantic-tab-panel index=\"2\">\n        <p class=\"story-copy\">Change Password</p>\n      </quantic-tab-panel>\n    </quantic-tabs>\n  </div>",
         "<quantic-tabs\n    selected-index=\"0\"\n    size=\"md\"\n    orientation=\"horizontal\"\n    style=\"--quantic-component-tabs-gap: var(--quantic-spacing-1)\"\n  >\n    <quantic-tab-button index=\"0\">Profile</quantic-tab-button>\n    <quantic-tab-button index=\"1\">Notifications</quantic-tab-button>\n    <quantic-tab-button index=\"2\">Security</quantic-tab-button>\n\n    <quantic-tab-panel index=\"0\">\n      <p class=\"story-lead\">Jane Doe</p>\n      <p class=\"story-copy\">Email: jane.doe@example.com</p>\n    </quantic-tab-panel>\n    <quantic-tab-panel index=\"1\">\n      <p class=\"story-copy\">Email Notifications: Enabled</p>\n    </quantic-tab-panel>\n    <quantic-tab-panel index=\"2\">\n      <p class=\"story-copy\">Change Password</p>\n    </quantic-tab-panel>\n  </quantic-tabs>",
@@ -5983,7 +6043,7 @@
     },
     {
       "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. Layout: ::part(group), for a column or a different alignment. Use quantic-badge-group for badges.",
+      "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": [
         {
@@ -5998,6 +6058,12 @@
           "description": "quantic-tag, quantic-status-tag or quantic-count-tag elements."
         }
       ],
+      "parts": [
+        {
+          "name": "group",
+          "description": "The flex container, for a column layout or a different alignment."
+        }
+      ],
       "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>",
@@ -6356,6 +6422,12 @@
           "description": "Trailing content (e.g. icon or unit label)."
         }
       ],
+      "parts": [
+        {
+          "name": "input",
+          "description": "The native input element."
+        }
+      ],
       "examples": [
         "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\"></quantic-text-input>",
         "<quantic-text-input value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"text-input\" disabled></quantic-text-input>",
@@ -6538,6 +6610,12 @@
           "detail": "{ value: string }"
         }
       ],
+      "parts": [
+        {
+          "name": "input",
+          "description": "The native textarea element."
+        }
+      ],
       "examples": [
         "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\"></quantic-textarea>",
         "<quantic-textarea value=\"Sample text\" placeholder=\"Type something...\" size=\"md\" name=\"textarea\" rows=\"4\" resize=\"vertical\" disabled></quantic-textarea>",

package/dist/number-input/index.js

@@ -190,6 +190,7 @@ NumberInput.meta = {
         ],
     },
     slots: { prefix: { description: 'Leading content (e.g. icon or unit symbol).' } },
+    parts: { input: { description: 'The native input element.' } },
     relatedTo: ['quantic-field', 'quantic-text-input'],
 };
 NumberInput.formAssociated = true;

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

@@ -184,6 +184,10 @@ OptionCard.meta = {
             description: 'Optional secondary description below the label.',
         },
     },
+    parts: {
+        label: { description: 'The wrapping label element.' },
+        indicator: { description: 'The checkbox or radio visual.' },
+    },
     relatedTo: ['quantic-option-card-group', 'quantic-field'],
 };
 OptionCard.formAssociated = true;