@ctrliq/quantic-components 1.86.1 → 1.87.0

package/dist/quantic-components.js

@@ -561,7 +561,7 @@
           value=${o$3(this.value)}
           @click=${this.handleClick}
         >
-          <slot data-description="Button label or icon content."></slot>
+          <slot></slot>
         </button>`
                 : u$2 `
         <${Tag}
@@ -573,7 +573,7 @@
           target=${o$3(this.target)}
           download=${o$3(this.download)}
         >
-          <slot data-description="Button label or icon content."></slot>
+          <slot></slot>
         </${Tag}>`;
         }
     };
@@ -583,6 +583,7 @@
             'Supports icon-only mode and polymorphic rendering as an <a> or <span>. ' +
             'Prefer over quantic-icon-label when the element needs to be interactive.',
         category: 'action',
+        slots: { '': { description: 'Button label or icon content.' } },
         relatedTo: ['quantic-button-bar', 'quantic-icon-label'],
     };
     exports.Button.formAssociated = true;
@@ -5587,9 +5588,9 @@
             });
             return u$2 `
       <div class=${classes}>
-        <slot name="before" data-description="Content before the label (e.g. icon)."></slot>
-        <slot data-description="Badge label text or icon."></slot>
-        <slot name="after" data-description="Content after the label."></slot>
+        <slot name="before"></slot>
+        <slot></slot>
+        <slot name="after"></slot>
       </div>
     `;
         }
@@ -5600,6 +5601,11 @@
             'Non-interactive — use quantic-button for clickable chips. ' +
             'Supports a wide color palette and an icon-only square mode.',
         category: 'display',
+        slots: {
+            before: { description: 'Content before the label (e.g. icon).' },
+            '': { description: 'Badge label text or icon.' },
+            after: { description: 'Content after the label.' },
+        },
         relatedTo: ['quantic-tag', 'quantic-status-badge'],
     };
     exports.Badge.styles = i$7 `
@@ -5788,8 +5794,7 @@
                 description: 'quantic-badge or quantic-status-badge elements.',
             },
         },
-        subComponents: ['quantic-badge', 'quantic-status-badge'],
-        relatedTo: ['quantic-badge', 'quantic-tag-group'],
+        relatedTo: ['quantic-badge', 'quantic-tag-group', 'quantic-status-badge'],
     };
     exports.BadgeGroup.styles = i$7 `
     :host {
@@ -6032,8 +6037,13 @@
                 description: 'quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one.',
             },
         },
-        subComponents: ['quantic-button', 'quantic-dropdown-menu', 'quantic-popover'],
-        relatedTo: ['quantic-button', 'quantic-button-bar', 'quantic-dialog-actions'],
+        relatedTo: [
+            'quantic-button',
+            'quantic-button-bar',
+            'quantic-dialog-actions',
+            'quantic-dropdown-menu',
+            'quantic-popover',
+        ],
     };
     exports.ActionGroup.styles = i$7 `
     :host {
@@ -6223,7 +6233,6 @@
             'Prefer quantic-button for a standalone action, and quantic-tabs when each segment reveals a panel.',
         category: 'action',
         slots: { '': { description: 'One or more quantic-button-bar-item elements.' } },
-        subComponents: ['quantic-button-bar-item'],
         relatedTo: ['quantic-button'],
     };
     exports.ButtonBar.styles = i$7 `
@@ -6281,7 +6290,6 @@
             reason: 'The name describes a row of buttons, which this is not. Use quantic-action-group for that.',
         },
         slots: { '': { description: 'One or more quantic-button-group-item elements.' } },
-        subComponents: ['quantic-button-group-item'],
     };
     exports.ButtonGroup = __decorate([
         quanticElement('quantic-button-group')
@@ -6323,6 +6331,7 @@
         description: 'Single segment within a quantic-button-bar. ' +
             'Renders as a native button with shared sizing from the parent context and a pressed state via active.',
         category: 'action',
+        subComponentOf: 'quantic-button-bar',
         slots: { '': { description: 'Button label or icon content.' } },
         relatedTo: ['quantic-button-bar', 'quantic-button'],
     };
@@ -6487,6 +6496,9 @@
         tag: 'quantic-button-group-item',
         description: 'Deprecated alias of quantic-button-bar-item. Use quantic-button-bar-item.',
         deprecated: { use: 'quantic-button-bar-item' },
+        // The spread would otherwise inherit quantic-button-bar from ButtonBarItem, and
+        // the deprecated item belongs to the deprecated bar.
+        subComponentOf: 'quantic-button-group',
         relatedTo: ['quantic-button-group'],
     };
     exports.ButtonGroupItem = __decorate([
@@ -6549,22 +6561,10 @@
                 ['is-disabled']: this.disabled,
             });
             const slots = u$2 `
-      <slot
-        name="header"
-        class="header"
-        data-description="Header area — place quantic-card-title and quantic-card-meta here."
-      ></slot>
-      <slot class="body" data-description="Main body content."></slot>
-      <slot
-        name="footer"
-        class="footer"
-        data-description="Footer content, pinned to the bottom of the card."
-      ></slot>
-      <slot
-        name="action-icon"
-        class="action-icon"
-        data-description="Icon in the top-right corner; only visible on interactive cards."
-      ></slot>
+      <slot name="header" class="header"></slot>
+      <slot class="body"></slot>
+      <slot name="footer" class="footer"></slot>
+      <slot name="action-icon" class="action-icon"></slot>
     `;
             if (this.as === 'button') {
                 return u$2 `<button
@@ -6598,11 +6598,16 @@
             'Render as "a" or "button" to make the entire card interactive. ' +
             'Prefer quantic-panel for non-interactive content sections.',
         category: 'display',
-        subComponents: [
-            'quantic-card-title',
-            'quantic-card-image',
-            'quantic-card-meta',
-        ],
+        slots: {
+            header: {
+                description: 'Header area. Place quantic-card-title and quantic-card-meta here.',
+            },
+            '': { description: 'Main body content.' },
+            footer: { description: 'Footer content, pinned to the bottom of the card.' },
+            'action-icon': {
+                description: 'Icon in the top-right corner; only visible on interactive cards.',
+            },
+        },
         relatedTo: ['quantic-card-group', 'quantic-panel'],
     };
     exports.Card.styles = [
@@ -7606,6 +7611,7 @@
         description: 'Image sub-component for quantic-card. Place inside the card body or header slot. ' +
             'Use the bleeds prop to stretch the image edge-to-edge by negating the card padding.',
         category: 'display',
+        subComponentOf: 'quantic-card',
         slots: { '': { description: 'An <img> element to display.' } },
         relatedTo: ['quantic-card'],
     };
@@ -7656,6 +7662,7 @@
         description: 'Metadata overlay sub-component for quantic-card, positioned absolutely in the top-right corner. ' +
             'Use for secondary information such as dates, tags, or status badges.',
         category: 'display',
+        subComponentOf: 'quantic-card',
         slots: { '': { description: 'Metadata content — badges, dates, or tags.' } },
         relatedTo: ['quantic-card'],
     };
@@ -7694,6 +7701,7 @@
         description: 'Title/heading sub-component for quantic-card. Renders an hgroup with optional pretitle and subtitle slots. ' +
             'Empty slots are auto-hidden.',
         category: 'display',
+        subComponentOf: 'quantic-card',
         slots: {
             '': { description: 'Main title text or heading element.' },
             pretitle: { description: 'Small label displayed above the title.' },
@@ -8231,7 +8239,6 @@
             'Optionally propagates disabled/required to children; each checkbox owns its own checked and name state.',
         category: 'form',
         slots: { '': { description: 'One or more quantic-checkbox elements.' } },
-        subComponents: ['quantic-checkbox'],
         relatedTo: ['quantic-checkbox', 'quantic-field'],
     };
     exports.CheckboxGroup.styles = i$7 `
@@ -8894,6 +8901,7 @@
         description: 'Header/title bar sub-component for quantic-dialog. ' +
             'Renders a semantic heading with optional pretitle and subtitle slots.',
         category: 'feedback',
+        subComponentOf: 'quantic-dialog',
         slots: {
             pretitle: { description: 'Small label displayed above the main title.' },
             '': { description: 'Main title text.' },
@@ -8966,8 +8974,8 @@
         description: 'Footer actions bar for quantic-dialog. ' +
             'Lays action buttons out as a quantic-action-group, flush to the right.',
         category: 'feedback',
+        subComponentOf: 'quantic-dialog',
         slots: { '': { description: 'Action buttons, typically quantic-button elements.' } },
-        subComponents: ['quantic-action-group'],
         relatedTo: ['quantic-dialog', 'quantic-button', 'quantic-action-group'],
     };
     exports.DialogActions.styles = i$7 `
@@ -11069,7 +11077,6 @@
             '': { description: 'Main dialog body content.' },
             footer: { description: 'Dialog footer — place quantic-dialog-actions here.' },
         },
-        subComponents: ['quantic-dialog-title', 'quantic-dialog-actions'],
         relatedTo: ['quantic-button'],
     };
     exports.Dialog.styles = i$7 `
@@ -11545,6 +11552,7 @@
             'Positioned fixed relative to the trigger via @floating-ui. ' +
             'Do not use directly — use quantic-popover instead.',
         category: 'feedback',
+        subComponentOf: 'quantic-popover',
         slots: {
             header: { description: 'Optional header section.' },
             '': { description: 'Main popup body content.' },
@@ -11941,7 +11949,6 @@
             '': { description: 'Main body content of the popup.' },
             footer: { description: 'Optional footer content inside the popup.' },
         },
-        subComponents: ['quantic-popover-popup'],
     };
     exports.Popover.styles = i$7 `
     :host {
@@ -12139,10 +12146,6 @@
                 description: 'Menu items — quantic-dropdown-menu-item and quantic-dropdown-menu-group elements.',
             },
         },
-        subComponents: [
-            'quantic-dropdown-menu-item',
-            'quantic-dropdown-menu-group',
-        ],
     };
     exports.DropdownMenu.styles = i$7 `
     :host {
@@ -12327,6 +12330,7 @@
             'Renders as a button by default or as an anchor for navigation. ' +
             'Place icons or text in the default slot.',
         category: 'navigation',
+        subComponentOf: 'quantic-dropdown-menu',
         slots: {
             '': { description: 'Item content — icon and/or label text.' },
         },
@@ -12570,6 +12574,7 @@
         description: 'Visual section divider inside a quantic-dropdown-menu. ' +
             'Renders an optional uppercase label above a group of menu items and draws a separator from the previous group.',
         category: 'navigation',
+        subComponentOf: 'quantic-dropdown-menu',
         slots: {
             label: {
                 description: 'Custom label content rendered above the group items. Takes priority over the label prop.',
@@ -13350,10 +13355,7 @@
             const a11y = this.getA11yAttributes({ invalid: this.invalid });
             return b `
       <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}"
@@ -13400,10 +13402,7 @@
             ></quantic-icon-lucide-circle-alert>`
             : ''}
         ${!this.invalid
-            ? b `<slot
-              name="suffix"
-              data-description="Trailing content (e.g. icon or unit label)."
-            ></slot>`
+            ? b `<slot name="suffix"></slot>`
             : ''}
       </div>
     `;
@@ -13415,6 +13414,10 @@
             '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'],
     };
     exports.TextInput.formAssociated = true;
@@ -13784,6 +13787,13 @@
         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'],
     };
     exports.Select.styles = i$7 `
@@ -14094,6 +14104,7 @@
         description: 'Single radio button for exclusive-choice selection. ' +
             'Intended to be used inside quantic-radio-group, which handles mutual exclusion and form association.',
         category: 'form',
+        slots: { '': { description: 'Label content, used when the label prop is not set.' } },
         relatedTo: ['quantic-radio-group'],
     };
     exports.Radio.formAssociated = true;
@@ -63447,6 +63458,7 @@
         description: 'Numeric input field with optional min/max/step constraints. ' +
             'Form-associated. Wrap in quantic-field to add a label and validation messaging.',
         category: 'form',
+        slots: { prefix: { description: 'Leading content (e.g. icon or unit symbol).' } },
         relatedTo: ['quantic-field', 'quantic-text-input'],
     };
     exports.NumberInput.formAssociated = true;
@@ -64664,7 +64676,7 @@
         description: 'Top-level application shell that composes a collapsible sidebar, a top navbar, and a main content area. ' +
             'On small viewports the sidebar slides in as a drawer with a focus trap; on desktop it collapses to an icon rail.',
         category: 'layout',
-        subComponents: ['quantic-sidebar', 'quantic-navbar', 'quantic-page'],
+        relatedTo: ['quantic-navbar', 'quantic-page'],
         slots: {
             logo: {
                 description: 'Brand logo shown in the header (no-sidebar) or inside the aside.',
@@ -65131,6 +65143,7 @@
             '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).' },
         },
@@ -65406,7 +65419,6 @@
             '': { description: 'Trigger element that activates the tooltip.' },
             content: { description: 'Content displayed inside the tooltip popup.' },
         },
-        subComponents: ['quantic-tooltip-popup'],
         relatedTo: [],
     };
     exports.Tooltip.styles = i$7 `
@@ -65522,7 +65534,9 @@
         description: 'Individual nav item within quantic-sidebar. Renders as a link when href is set, otherwise as a button. ' +
             'When the sidebar is collapsed on desktop, shows only the icon with a tooltip.',
         category: 'navigation',
+        subComponentOf: 'quantic-sidebar',
         slots: {
+            '': { description: 'Label content, used when the label prop is not set.' },
             icon: { description: 'Icon displayed to the left of the label.' },
             after: { description: 'Optional trailing content (e.g. badge or count).' },
         },
@@ -65756,10 +65770,7 @@
         description: 'Collapsible side navigation panel placed in the sidebar slot of quantic-layout. ' +
             'On desktop it can collapse to an icon rail; on mobile it is controlled by the layout as a drawer.',
         category: 'navigation',
-        subComponents: [
-            'quantic-sidebar-menu-item',
-            'quantic-sidebar-menu-item-group',
-        ],
+        subComponentOf: 'quantic-layout',
         slots: {
             header: {
                 description: 'Optional sticky header rendered above the scrollable content.',
@@ -65902,6 +65913,7 @@
         description: 'Grouped section of sidebar nav items with an uppercase section label. ' +
             'The label is hidden automatically when the sidebar is collapsed.',
         category: 'navigation',
+        subComponentOf: 'quantic-sidebar',
         slots: { '': { description: 'quantic-sidebar-menu-item elements belonging to this group.' } },
         relatedTo: ['quantic-sidebar', 'quantic-sidebar-menu-item'],
     };
@@ -66124,6 +66136,7 @@
             'Behaves like a radio or checkbox but displayed as a card. ' +
             'Use inside quantic-option-card-group to manage selection logic.',
         category: 'form',
+        subComponentOf: 'quantic-option-card-group',
         slots: {
             '': { description: 'Main label content of the card.' },
             icon: { description: 'Optional leading icon.' },
@@ -66690,7 +66703,6 @@
         slots: {
             '': { description: 'Place quantic-option-card elements here.' },
         },
-        subComponents: ['quantic-option-card'],
         relatedTo: ['quantic-field'],
     };
     exports.OptionCardGroup.formAssociated = true;
@@ -66949,7 +66961,6 @@
             '': { description: 'Main body content.' },
             footer: { description: 'Footer content.' },
         },
-        subComponents: ['quantic-panel-header'],
         relatedTo: ['quantic-panel-group', 'quantic-card'],
     };
     exports.Panel.styles = i$7 `
@@ -67065,6 +67076,7 @@
         description: 'Header sub-component for quantic-panel. ' +
             'Contains title, optional pretitle, subtitle, and an actions slot.',
         category: 'display',
+        subComponentOf: 'quantic-panel',
         slots: {
             pretitle: { description: 'Small label above the main title.' },
             '': { description: 'Main title content.' },
@@ -67180,7 +67192,6 @@
         slots: {
             '': { description: 'Place quantic-panel elements here.' },
         },
-        subComponents: ['quantic-panel'],
         relatedTo: ['quantic-panel'],
     };
     exports.PanelGroup.styles = i$7 `
@@ -68203,7 +68214,6 @@
             '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'],
     };
     exports.SplitterGroup.styles = i$7 `
     :host {
@@ -68349,6 +68359,7 @@
         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'],
     };
@@ -68477,15 +68488,6 @@
             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',
-        ],
     };
     exports.Table.styles = i$7 `
     :host {
@@ -68609,6 +68611,7 @@
             '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.' },
@@ -68656,6 +68659,7 @@
         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.' },
         },
@@ -68742,6 +68746,7 @@
             '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.' },
         },
@@ -68865,6 +68870,7 @@
         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.' },
         },
@@ -68908,6 +68914,7 @@
         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.' },
         },
@@ -68964,6 +68971,7 @@
         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.' },
         },
@@ -69013,6 +69021,7 @@
         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.' },
         },
@@ -69160,7 +69169,6 @@
                 description: 'quantic-tab-button and quantic-tab-panel elements as direct children.',
             },
         },
-        subComponents: ['quantic-tab-button', 'quantic-tab-panel'],
     };
     exports.Tabs.styles = [
         i$7 `
@@ -69385,6 +69393,7 @@
             '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.',
@@ -69670,6 +69679,7 @@
             '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.' },
         },
@@ -70112,8 +70122,12 @@
                 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',
+        ],
     };
     exports.TagGroup.styles = i$7 `
     :host {