@ctrliq/quantic-components 1.88.0 → 1.89.1

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

@@ -12,6 +12,9 @@ export interface SlotMeta {
     required?: boolean;
     copyRule?: CopyRuleId;
 }
+export interface PartMeta {
+    description: string;
+}
 export interface EventMeta {
     description?: string;
     detail?: string;
@@ -40,6 +43,7 @@ export interface ComponentMeta {
     props?: Record<string, PropMeta>;
     slots?: Record<string, SlotMeta>;
     events?: Record<string, EventMeta>;
+    parts?: Record<string, PartMeta>;
     examples?: string[];
     relatedTo?: string[];
     avoidWhen?: {

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

@@ -284,6 +284,9 @@ SplitterGroup.meta = {
         requiredFromConsumer: ['an accessible name for each pane'],
     },
     slots: { '': { description: 'Two or more quantic-splitter-pane elements.' } },
+    parts: {
+        divider: { description: 'The draggable handle between two panes.' },
+    },
 };
 SplitterGroup.styles = css `
     :host {

package/dist/tabs/button.component.js

@@ -81,8 +81,8 @@ TabButton.meta = {
     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.',
+        'Reflects a selected attribute while active. Restyle the mark with ' +
+        '--quantic-component-tab-indicator-* / --quantic-component-tab-active-bg.',
     category: 'navigation',
     subComponentOf: 'quantic-tabs',
     slots: {
@@ -93,6 +93,10 @@ TabButton.meta = {
             description: 'Tab label text or custom content.',
         },
     },
+    parts: {
+        button: { description: 'The native button element.' },
+        indicator: { description: 'The active-tab mark.' },
+    },
     relatedTo: ['quantic-tabs', 'quantic-tab-panel'],
 };
 TabButton.styles = css `

package/dist/tabs/tabs.component.js

@@ -128,6 +128,10 @@ Tabs.meta = {
             description: 'quantic-tab-button and quantic-tab-panel elements as direct children.',
         },
     },
+    parts: {
+        nav: { description: 'The tablist container wrapping the tab buttons.' },
+        panels: { description: 'The container wrapping the tab panels.' },
+    },
 };
 Tabs.styles = [
     css `

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

@@ -24,7 +24,6 @@ TagGroup.meta = {
     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.',
     category: 'display',
     accessibility: {
@@ -39,6 +38,9 @@ TagGroup.meta = {
             description: 'quantic-tag, quantic-status-tag or quantic-count-tag elements.',
         },
     },
+    parts: {
+        group: { description: 'The flex container, for a column layout or a different alignment.' },
+    },
     relatedTo: [
         'quantic-tag',
         'quantic-badge-group',

package/dist/text-input/index.js

@@ -178,6 +178,7 @@ TextInput.meta = {
         prefix: { description: 'Leading content (e.g. icon or currency symbol).' },
         suffix: { description: 'Trailing content (e.g. icon or unit label).' },
     },
+    parts: { input: { description: 'The native input element.' } },
     relatedTo: ['quantic-field', 'quantic-number-input', 'quantic-select'],
 };
 TextInput.formAssociated = true;

package/dist/textarea/index.js

@@ -126,6 +126,7 @@ Textarea.meta = {
             'a visible label, by wrapping in quantic-field, or the ariaLabel prop',
         ],
     },
+    parts: { input: { description: 'The native textarea element.' } },
     relatedTo: ['quantic-field', 'quantic-text-input'],
 };
 Textarea.formAssociated = true;