@ctrliq/quantic-components 1.86.0 → 1.87.0

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

@@ -33,8 +33,13 @@ ActionGroup.meta = {
             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',
+    ],
 };
 ActionGroup.styles = css `
     :host {

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

@@ -32,8 +32,7 @@ BadgeGroup.meta = {
             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'],
 };
 BadgeGroup.styles = css `
     :host {

package/dist/badge/badge.component.js

@@ -29,9 +29,9 @@ let Badge = class Badge extends QuanticElement {
         });
         return html `
       <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>
     `;
     }
@@ -42,6 +42,11 @@ Badge.meta = {
         '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'],
 };
 Badge.styles = css `

package/dist/button/index.js

@@ -93,7 +93,7 @@ let Button = class Button extends QuanticElement {
           value=${ifDefined(this.value)}
           @click=${this.handleClick}
         >
-          <slot data-description="Button label or icon content."></slot>
+          <slot></slot>
         </button>`
             : html `
         <${Tag}
@@ -105,7 +105,7 @@ let Button = class Button extends QuanticElement {
           target=${ifDefined(this.target)}
           download=${ifDefined(this.download)}
         >
-          <slot data-description="Button label or icon content."></slot>
+          <slot></slot>
         </${Tag}>`;
     }
 };
@@ -115,6 +115,7 @@ Button.meta = {
         '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'],
 };
 Button.formAssociated = true;

package/dist/button-bar/button-bar-item.js

@@ -47,6 +47,7 @@ ButtonBarItem.meta = {
     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'],
 };

package/dist/button-bar/button-bar.js

@@ -88,7 +88,6 @@ ButtonBar.meta = {
         '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'],
 };
 ButtonBar.styles = css `

package/dist/button-group/button-group-item.js

@@ -17,6 +17,9 @@ ButtonGroupItem.meta = {
     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'],
 };
 ButtonGroupItem = __decorate([

package/dist/button-group/button-group.js

@@ -27,7 +27,6 @@ ButtonGroup.meta = {
         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'],
 };
 ButtonGroup = __decorate([
     quanticElement('quantic-button-group')

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

@@ -22,6 +22,7 @@ CardImage.meta = {
     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'],
 };

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

@@ -17,6 +17,7 @@ CardMeta.meta = {
     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'],
 };

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

@@ -33,6 +33,7 @@ CardTitle.meta = {
     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.' },

package/dist/card/card.component.js

@@ -35,22 +35,10 @@ let Card = class Card extends AutoHideEmptySlotsMixin(QuanticElement, [
             ['is-disabled']: this.disabled,
         });
         const slots = html `
-      <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 html `<button
@@ -84,11 +72,16 @@ Card.meta = {
         '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'],
 };
 Card.styles = [

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

@@ -58,7 +58,6 @@ CheckboxGroup.meta = {
         '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'],
 };
 CheckboxGroup.styles = css `

package/dist/dialog/dialog-actions.js

@@ -23,8 +23,8 @@ DialogActions.meta = {
     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'],
 };
 DialogActions.styles = css `

package/dist/dialog/dialog-title.js

@@ -32,6 +32,7 @@ DialogTitle.meta = {
     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.' },

package/dist/dialog/dialog.js

@@ -301,7 +301,6 @@ Dialog.meta = {
         '': { description: 'Main dialog body content.' },
         footer: { description: 'Dialog footer — place quantic-dialog-actions here.' },
     },
-    subComponents: ['quantic-dialog-title', 'quantic-dialog-actions'],
     relatedTo: ['quantic-button'],
 };
 Dialog.styles = css `

package/dist/dropdown-menu/dropdown-menu.component.js

@@ -148,10 +148,6 @@ DropdownMenu.meta = {
             description: 'Menu items — quantic-dropdown-menu-item and quantic-dropdown-menu-group elements.',
         },
     },
-    subComponents: [
-        'quantic-dropdown-menu-item',
-        'quantic-dropdown-menu-group',
-    ],
 };
 DropdownMenu.styles = css `
     :host {

package/dist/dropdown-menu/group.component.js

@@ -38,6 +38,7 @@ DropdownMenuGroup.meta = {
     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.',

package/dist/dropdown-menu/item.component.js

@@ -83,6 +83,7 @@ DropdownMenuItem.meta = {
         '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.' },
     },

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

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

package/dist/field/field.stories.js

@@ -2,6 +2,7 @@ import { story } from '../shared/story';
 import { FieldValidationStatus, FieldSize, FieldHintPosition } from './index.constants';
 export default {
     title: 'Components/Forms/Field',
+    component: 'quantic-field',
     tags: ['autodocs'],
     parameters: {
         docs: {