@ctrliq/quantic-components 1.86.0 → 1.87.0

package/dist/select/index.js

@@ -124,6 +124,13 @@ Select.meta = {
     description: 'Dropdown select input backed by a native <select>. Form-associated. ' +
         'Pass options via the options prop or slot native <option> elements.',
     category: 'form',
+    slots: {
+        '': {
+            description: 'Native option elements, read to build the list. Never rendered directly.',
+        },
+        prefix: { description: 'Leading content (e.g. icon).' },
+        suffix: { description: 'Trailing content, replacing the default chevron.' },
+    },
     relatedTo: ['quantic-field', 'quantic-text-input'],
 };
 Select.styles = css `

package/dist/shared/meta.types.d.ts

@@ -19,6 +19,17 @@ export interface ComponentMeta {
     description: string;
     category: 'action' | 'form' | 'display' | 'layout' | 'feedback' | 'navigation' | 'data';
     ascii?: string;
+    /**
+     * The component exists to serve a specific request and it is not yet known whether the
+     * need is general. The code works; what is withheld is the commitment to keep the
+     * capability. Absence means supported, which is the default, including for a new
+     * component that came from the roadmap.
+     *
+     * Independent of `deprecated`: an experimental component that turns out to serve only
+     * the team that asked keeps this set, which is what lets it be removed in a minor
+     * instead of waiting for a major. See `rules/promotion.md`.
+     */
+    experimental?: boolean;
     deprecated?: {
         use?: string;
         reason?: string;
@@ -28,5 +39,14 @@ export interface ComponentMeta {
     events?: Record<string, EventMeta>;
     examples?: string[];
     relatedTo?: string[];
-    subComponents?: string[];
+    /**
+     * The element this one is anatomy of. Set it when the child is inert on its own:
+     * quantic-card-title outside a quantic-card, quantic-tab-panel outside quantic-tabs.
+     * Leave it unset when the pairing is only conventional, as quantic-button inside
+     * quantic-action-group is, and use relatedTo for that instead.
+     *
+     * The parent's `subComponents` list in the manifest is derived from these, so the
+     * two can never disagree.
+     */
+    subComponentOf?: string;
 }

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

@@ -276,7 +276,6 @@ SplitterGroup.meta = {
         'Collapses to a stacked layout below the collapse-below breakpoint.',
     category: 'layout',
     slots: { '': { description: 'Two or more quantic-splitter-pane elements.' } },
-    subComponents: ['quantic-splitter-pane'],
 };
 SplitterGroup.styles = css `
     :host {

package/dist/splitter/splitter-pane.component.js

@@ -24,6 +24,7 @@ SplitterPane.meta = {
     description: 'Individual resizable pane within a quantic-splitter-group. ' +
         'Set min-size and max-size to constrain how far it can be dragged.',
     category: 'layout',
+    subComponentOf: 'quantic-splitter-group',
     slots: { '': { description: 'Pane content.' } },
     relatedTo: ['quantic-splitter-group'],
 };

package/dist/table/table-body.component.js

@@ -21,6 +21,7 @@ TableBody.meta = {
     description: 'The <tbody> equivalent for quantic-table. ' +
         'Contains quantic-table-row elements with data cells.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'quantic-table-row elements.' },
     },

package/dist/table/table-cell.component.js

@@ -41,6 +41,7 @@ TableCell.meta = {
     description: 'Individual data cell within a quantic-table-row. ' +
         'Receives variant context from the parent quantic-table.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'Cell content — text, elements, or other components.' },
     },

package/dist/table/table-controls.component.js

@@ -29,6 +29,7 @@ TableControls.meta = {
         'Provides a two-zone layout: default slot for start-aligned items (search, filters) ' +
         'and the end slot for end-aligned items (bulk actions, column toggles).',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'Start-aligned controls such as search inputs and filter buttons.' },
         end: { description: 'End-aligned controls such as bulk actions or column visibility toggles.' },

package/dist/table/table-footer.component.js

@@ -21,6 +21,7 @@ TableFooter.meta = {
     description: 'The <tfoot> equivalent for quantic-table. ' +
         'Place quantic-table-row elements with summary or footer data as children.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'quantic-table-row elements with footer data.' },
     },

package/dist/table/table-head.component.js

@@ -77,6 +77,7 @@ TableHead.meta = {
         'Renders as a <th> equivalent and supports optional sort controls. ' +
         'Emits sort-change when clicked while sortable.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'Column header label text or content.' },
     },

package/dist/table/table-header.component.js

@@ -21,6 +21,7 @@ TableHeader.meta = {
     description: 'The <thead> equivalent for quantic-table. ' +
         'Place quantic-table-row elements containing quantic-table-head cells as children.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'quantic-table-row elements with quantic-table-head cells.' },
     },

package/dist/table/table-row.component.js

@@ -36,6 +36,7 @@ TableRow.meta = {
     description: 'Single data row within a quantic-table-body or quantic-table-footer. ' +
         'Receives variant context from the parent quantic-table and applies matching styles.',
     category: 'display',
+    subComponentOf: 'quantic-table',
     slots: {
         '': { description: 'quantic-table-cell elements.' },
     },

package/dist/table/table.component.js

@@ -50,15 +50,6 @@ Table.meta = {
         toolbar: { description: 'quantic-table-controls or other toolbar content placed above the table.' },
         controls: { description: 'quantic-table-controls or pagination content placed below the table.' },
     },
-    subComponents: [
-        'quantic-table-header',
-        'quantic-table-body',
-        'quantic-table-footer',
-        'quantic-table-row',
-        'quantic-table-cell',
-        'quantic-table-head',
-        'quantic-table-controls',
-    ],
 };
 Table.styles = css `
     :host {

package/dist/tabs/button.component.js

@@ -84,6 +84,7 @@ TabButton.meta = {
         'Reflects a selected attribute while active. Restyle the mark with ::part(indicator) ' +
         'or --quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.',
     category: 'navigation',
+    subComponentOf: 'quantic-tabs',
     slots: {
         icon: {
             description: 'Icon element, displayed before the label and scaled to the tab size.',

package/dist/tabs/panel.component.js

@@ -46,6 +46,7 @@ TabPanel.meta = {
         'Set index to match the corresponding quantic-tab-button. ' +
         'Visibility is controlled automatically by the parent quantic-tabs.',
     category: 'navigation',
+    subComponentOf: 'quantic-tabs',
     slots: {
         '': { description: 'Panel content shown when this tab is active.' },
     },

package/dist/tabs/tabs.component.js

@@ -120,7 +120,6 @@ Tabs.meta = {
             description: 'quantic-tab-button and quantic-tab-panel elements as direct children.',
         },
     },
-    subComponents: ['quantic-tab-button', 'quantic-tab-panel'],
 };
 Tabs.styles = [
     css `

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

@@ -32,8 +32,12 @@ TagGroup.meta = {
             description: 'quantic-tag, quantic-status-tag or quantic-count-tag elements.',
         },
     },
-    subComponents: ['quantic-tag', 'quantic-status-tag', 'quantic-count-tag'],
-    relatedTo: ['quantic-tag', 'quantic-badge-group'],
+    relatedTo: [
+        'quantic-tag',
+        'quantic-badge-group',
+        'quantic-status-tag',
+        'quantic-count-tag',
+    ],
 };
 TagGroup.styles = css `
     :host {

package/dist/text-input/index.js

@@ -96,10 +96,7 @@ let TextInput = class TextInput extends A11yAttributesMixin(QuanticElement) {
         const a11y = this.getA11yAttributes({ invalid: this.invalid });
         return html `
       <div class=${classes}>
-        <slot
-          name="prefix"
-          data-description="Leading content (e.g. icon or currency symbol)."
-        ></slot>
+        <slot name="prefix"></slot>
         <input
           .value=${this.value}
           .autocomplete="${this.autoComplete}"
@@ -146,10 +143,7 @@ let TextInput = class TextInput extends A11yAttributesMixin(QuanticElement) {
             ></quantic-icon-lucide-circle-alert>`
             : ''}
         ${!this.invalid
-            ? html `<slot
-              name="suffix"
-              data-description="Trailing content (e.g. icon or unit label)."
-            ></slot>`
+            ? html `<slot name="suffix"></slot>`
             : ''}
       </div>
     `;
@@ -161,6 +155,10 @@ TextInput.meta = {
         'Wrap in quantic-field to add a visible label, hint text, and validation messaging. ' +
         'Use type="password" or type="email" to get browser-native input behaviour.',
     category: 'form',
+    slots: {
+        prefix: { description: 'Leading content (e.g. icon or currency symbol).' },
+        suffix: { description: 'Trailing content (e.g. icon or unit label).' },
+    },
     relatedTo: ['quantic-field', 'quantic-number-input', 'quantic-select'],
 };
 TextInput.formAssociated = true;

package/dist/tooltip/tooltip-popup.js

@@ -26,6 +26,7 @@ TooltipPopup.meta = {
         'Positioned absolutely relative to the trigger via @floating-ui/dom. ' +
         'Not intended for direct use — use quantic-tooltip instead.',
     category: 'feedback',
+    subComponentOf: 'quantic-tooltip',
     slots: {
         '': { description: 'Tooltip content (managed by quantic-tooltip).' },
     },

package/dist/tooltip/tooltip.js

@@ -222,7 +222,6 @@ Tooltip.meta = {
         '': { description: 'Trigger element that activates the tooltip.' },
         content: { description: 'Content displayed inside the tooltip popup.' },
     },
-    subComponents: ['quantic-tooltip-popup'],
     relatedTo: [],
 };
 Tooltip.styles = css `

package/dist/types/field/field.stories.d.ts

@@ -10,6 +10,7 @@ type FieldArgs = {
 };
 declare const _default: {
     title: string;
+    component: string;
     tags: string[];
     parameters: {
         docs: {

package/dist/types/meta/serialize.d.ts

@@ -13,11 +13,13 @@ export interface ManifestComponent extends Omit<ComponentMeta, 'props' | 'slots'
     props?: ManifestProp[];
     slots?: ManifestSlot[];
     events?: ManifestEvent[];
+    /** Derived from the children's `subComponentOf`, never hand-authored. */
+    subComponents?: string[];
 }
 export interface ComponentManifest {
     schemaVersion: number;
     generated: string;
     components: ManifestComponent[];
 }
-export declare function serializeComponent(component: ComponentMeta): ManifestComponent;
+export declare function serializeComponent(component: ComponentMeta, subComponents?: string[]): ManifestComponent;
 export declare function buildManifest(components: ComponentMeta[], generated?: string): ComponentManifest;

package/dist/types/meta/slot-parity.test.d.ts

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

package/dist/types/shared/meta.types.d.ts

@@ -19,6 +19,17 @@ export interface ComponentMeta {
     description: string;
     category: 'action' | 'form' | 'display' | 'layout' | 'feedback' | 'navigation' | 'data';
     ascii?: string;
+    /**
+     * The component exists to serve a specific request and it is not yet known whether the
+     * need is general. The code works; what is withheld is the commitment to keep the
+     * capability. Absence means supported, which is the default, including for a new
+     * component that came from the roadmap.
+     *
+     * Independent of `deprecated`: an experimental component that turns out to serve only
+     * the team that asked keeps this set, which is what lets it be removed in a minor
+     * instead of waiting for a major. See `rules/promotion.md`.
+     */
+    experimental?: boolean;
     deprecated?: {
         use?: string;
         reason?: string;
@@ -28,5 +39,14 @@ export interface ComponentMeta {
     events?: Record<string, EventMeta>;
     examples?: string[];
     relatedTo?: string[];
-    subComponents?: string[];
+    /**
+     * The element this one is anatomy of. Set it when the child is inert on its own:
+     * quantic-card-title outside a quantic-card, quantic-tab-panel outside quantic-tabs.
+     * Leave it unset when the pairing is only conventional, as quantic-button inside
+     * quantic-action-group is, and use relatedTo for that instead.
+     *
+     * The parent's `subComponents` list in the manifest is derived from these, so the
+     * two can never disagree.
+     */
+    subComponentOf?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.86.0",
+  "version": "1.87.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",