@ctrliq/quantic-components 1.88.0 → 1.89.0

package/dist/quantic-components.min.js

@@ -1080,7 +1080,7 @@ const{I:gt}=de,vt=e=>e,wt=()=>document.createComment(""),mt=(e,t,i)=>{const n=e.
       <div class="group" part="group" role="group" aria-label=${this.ariaLabel??"Badges"}>
         <slot></slot>
       </div>
-    `}},e.BadgeGroup.meta={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.",category:"display",accessibility:{providedByComponent:["group semantics"],requiredFromConsumer:["an ariaLabel naming the set"]},slots:{"":{description:"quantic-badge or quantic-status-badge elements."}},relatedTo:["quantic-badge","quantic-tag-group","quantic-status-badge"]},e.BadgeGroup.styles=d`
+    `}},e.BadgeGroup.meta={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. Use quantic-tag-group for tags.",category:"display",accessibility:{providedByComponent:["group semantics"],requiredFromConsumer:["an ariaLabel naming the set"]},slots:{"":{description:"quantic-badge or quantic-status-badge elements."}},parts:{group:{description:"The flex container, for a column layout or a different alignment."}},relatedTo:["quantic-badge","quantic-tag-group","quantic-status-badge"]},e.BadgeGroup.styles=d`
     :host {
       display: block;
     }
@@ -1213,7 +1213,7 @@ const{I:gt}=de,vt=e=>e,wt=()=>document.createComment(""),mt=(e,t,i)=>{const n=e.
       <div class="group" part="group" role="group" aria-label=${this.ariaLabel??"Actions"}>
         <slot></slot>
       </div>
-    `}},e.ActionGroup.meta={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.",category:"action",avoidWhen:[{when:"the buttons are segments of a single control",useInstead:"quantic-button-bar"}],accessibility:{providedByComponent:["role=group with one accessible name across the row"],requiredFromConsumer:["an ariaLabel naming the group"]},slots:{"":{description:"quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."}},relatedTo:["quantic-button","quantic-button-bar","quantic-dialog-actions","quantic-dropdown-menu","quantic-popover"]},e.ActionGroup.styles=d`
+    `}},e.ActionGroup.meta={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. Use quantic-button-bar when the buttons should read as one joined control.",category:"action",avoidWhen:[{when:"the buttons are segments of a single control",useInstead:"quantic-button-bar"}],accessibility:{providedByComponent:["role=group with one accessible name across the row"],requiredFromConsumer:["an ariaLabel naming the group"]},slots:{"":{description:"quantic-button elements, or a quantic-dropdown-menu or quantic-popover triggered by one."}},parts:{group:{description:"The flex container, for a column layout or a different alignment."}},relatedTo:["quantic-button","quantic-button-bar","quantic-dialog-actions","quantic-dropdown-menu","quantic-popover"]},e.ActionGroup.styles=d`
     :host {
       display: block;
     }
@@ -2248,7 +2248,7 @@ function dn({context:e}){return(t,i)=>{const n=new WeakMap;if("object"==typeof i
           @scroll=${this.handleScroll}
         ></textarea>
       </div>
-    `}},e.CodeInput.meta={tag:"quantic-code-input",description:"Form-associated multi-line code/text editor with monospace font and optional line-number gutter. Use for structured text input such as scripts, queries, or configuration snippets.",category:"form",accessibility:{providedByComponent:["form association","keyboard handling for indentation and newlines"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},relatedTo:["quantic-field","quantic-text-input"]},e.CodeInput.formAssociated=!0,e.CodeInput.styles=d`
+    `}},e.CodeInput.meta={tag:"quantic-code-input",description:"Form-associated multi-line code/text editor with monospace font and optional line-number gutter. Use for structured text input such as scripts, queries, or configuration snippets.",category:"form",accessibility:{providedByComponent:["form association","keyboard handling for indentation and newlines"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},parts:{textarea:{description:"The native textarea element."}},relatedTo:["quantic-field","quantic-text-input"]},e.CodeInput.formAssociated=!0,e.CodeInput.styles=d`
     :host {
       display: inline-block;
       width: 100%;
@@ -3910,7 +3910,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
             ></quantic-icon-lucide-circle-alert>`:""}
         ${this.invalid?"":W`<slot name="suffix"></slot>`}
       </div>
-    `}},e.TextInput.meta={tag:"quantic-text-input",description:'Single-line text field with native form association. 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",avoidWhen:[{when:"the value is numeric with a min, max or step",useInstead:"quantic-number-input"},{when:"the value is multi-line prose",useInstead:"quantic-textarea"}],accessibility:{providedByComponent:["form association","native input semantics and keyboard behaviour"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},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"]},e.TextInput.formAssociated=!0,e.TextInput.styles=d`
+    `}},e.TextInput.meta={tag:"quantic-text-input",description:'Single-line text field with native form association. 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",avoidWhen:[{when:"the value is numeric with a min, max or step",useInstead:"quantic-number-input"},{when:"the value is multi-line prose",useInstead:"quantic-textarea"}],accessibility:{providedByComponent:["form association","native input semantics and keyboard behaviour"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},slots:{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"]},e.TextInput.formAssociated=!0,e.TextInput.styles=d`
     :host {
       display: inline-block;
       width: 100%;
@@ -36805,7 +36805,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
           </button>
         </div>
       </div>
-    `}},e.NumberInput.meta={tag:"quantic-number-input",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",accessibility:{providedByComponent:["form association","arrow keys step the value","min, max and step enforced"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},slots:{prefix:{description:"Leading content (e.g. icon or unit symbol)."}},relatedTo:["quantic-field","quantic-text-input"]},e.NumberInput.formAssociated=!0,e.NumberInput.styles=d`
+    `}},e.NumberInput.meta={tag:"quantic-number-input",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",accessibility:{providedByComponent:["form association","arrow keys step the value","min, max and step enforced"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},slots:{prefix:{description:"Leading content (e.g. icon or unit symbol)."}},parts:{input:{description:"The native input element."}},relatedTo:["quantic-field","quantic-text-input"]},e.NumberInput.formAssociated=!0,e.NumberInput.styles=d`
     :host {
       display: inline-block;
       width: 100%;
@@ -38087,7 +38087,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
         </div>
         <slot name="description" class="description"></slot>
       </label>
-    `}},e.OptionCard.meta={tag:"quantic-option-card",description:"Selectable card used for single or multi-select choice UI. 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."},description:{description:"Optional secondary description below the label."}},relatedTo:["quantic-option-card-group","quantic-field"]},e.OptionCard.formAssociated=!0,e.OptionCard.styles=d`
+    `}},e.OptionCard.meta={tag:"quantic-option-card",description:"Selectable card used for single or multi-select choice UI. 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."},description:{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"]},e.OptionCard.formAssociated=!0,e.OptionCard.styles=d`
     :host {
       display: block;
       width: 100%;
@@ -38992,7 +38992,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
                   @keydown=${e=>this.handleDividerKeyDown(e,i)}
                 ></div>`:J}<slot name="pane-${i}"></slot>`})}
       </div>
-    `}},e.SplitterGroup.meta={tag:"quantic-splitter-group",description:"Resizable panel container — renders two or more panes separated by draggable dividers. Collapses to a stacked layout below the collapse-below breakpoint.",category:"layout",accessibility:{providedByComponent:["separator roles","keyboard resize","roving tabindex across the handles"],requiredFromConsumer:["an accessible name for each pane"]},slots:{"":{description:"Two or more quantic-splitter-pane elements."}}},e.SplitterGroup.styles=d`
+    `}},e.SplitterGroup.meta={tag:"quantic-splitter-group",description:"Resizable panel container — renders two or more panes separated by draggable dividers. Collapses to a stacked layout below the collapse-below breakpoint.",category:"layout",accessibility:{providedByComponent:["separator roles","keyboard resize","roving tabindex across the handles"],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."}}},e.SplitterGroup.styles=d`
     :host {
       display: block;
       width: 100%;
@@ -39371,7 +39371,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
         </div>
         <div class="panels" part="panels"><slot name=${Vs}></slot></div>
       </div>
-    `}},e.Tabs.meta={tag:"quantic-tabs",description:"Tab container managing quantic-tab-button triggers and quantic-tab-panel content areas. Place quantic-tab-button and quantic-tab-panel as direct children. Emits tab-selected when the active tab changes.",category:"navigation",accessibility:{providedByComponent:["tab roles","aria-selected","roving tabindex across the tab list"],requiredFromConsumer:["one quantic-tab-panel per quantic-tab-button"]},slots:{"":{description:"quantic-tab-button and quantic-tab-panel elements as direct children."}}},e.Tabs.styles=[d`
+    `}},e.Tabs.meta={tag:"quantic-tabs",description:"Tab container managing quantic-tab-button triggers and quantic-tab-panel content areas. Place quantic-tab-button and quantic-tab-panel as direct children. Emits tab-selected when the active tab changes.",category:"navigation",accessibility:{providedByComponent:["tab roles","aria-selected","roving tabindex across the tab list"],requiredFromConsumer:["one quantic-tab-panel per quantic-tab-button"]},slots:{"":{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."}}},e.Tabs.styles=[d`
       :host {
         display: block;
         --quantic-component-tabs-gap: var(--quantic-spacing-8);
@@ -39478,7 +39478,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
         <slot></slot>
         <span class="indicator" part="indicator" aria-hidden="true"></span>
       </button>
-    `}},e.TabButton.meta={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.",category:"navigation",subComponentOf:"quantic-tabs",slots:{icon:{description:"Icon element, displayed before the label and scaled to the tab size."},"":{description:"Tab label text or custom content."}},relatedTo:["quantic-tabs","quantic-tab-panel"]},e.TabButton.styles=d`
+    `}},e.TabButton.meta={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 --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."},"":{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"]},e.TabButton.styles=d`
     :host {
       display: block;
     }
@@ -39884,7 +39884,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
       <div class="group" part="group" role="group" aria-label=${this.ariaLabel??"Tags"}>
         <slot></slot>
       </div>
-    `}},e.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:{providedByComponent:["group semantics","roving tabindex across the tags"],requiredFromConsumer:["an ariaLabel naming the set"]},slots:{"":{description:"quantic-tag, quantic-status-tag or quantic-count-tag elements."}},relatedTo:["quantic-tag","quantic-badge-group","quantic-status-tag","quantic-count-tag"]},e.TagGroup.styles=d`
+    `}},e.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. Use quantic-badge-group for badges.",category:"display",accessibility:{providedByComponent:["group semantics","roving tabindex across the tags"],requiredFromConsumer:["an ariaLabel naming the set"]},slots:{"":{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","quantic-status-tag","quantic-count-tag"]},e.TagGroup.styles=d`
     :host {
       display: block;
     }
@@ -39929,7 +39929,7 @@ const xo="important",Lo=" !"+xo,fo=Ne(class extends We{constructor(e){if(super(e
               class="error-icon"
             ></quantic-icon-lucide-circle-alert>`:""}
       </div>
-    `}},e.Textarea.meta={tag:"quantic-textarea",description:"Multi-line text field with native form association. Wrap in quantic-field to add a visible label, hint text, and validation messaging.",category:"form",avoidWhen:[{when:"the value is code or structured text needing a line gutter",useInstead:"quantic-code-input"}],accessibility:{providedByComponent:["form association","native textarea semantics"],requiredFromConsumer:["a visible label, by wrapping in quantic-field, or the ariaLabel prop"]},relatedTo:["quantic-field","quantic-text-input"]},e.Textarea.formAssociated=!0,e.Textarea.styles=d`
+    `}},e.Textarea.meta={tag:"quantic-textarea",description:"Multi-line text field with native form association. Wrap in quantic-field to add a visible label, hint text, and validation messaging.",category:"form",avoidWhen:[{when:"the value is code or structured text needing a line gutter",useInstead:"quantic-code-input"}],accessibility:{providedByComponent:["form association","native textarea semantics"],requiredFromConsumer:["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"]},e.Textarea.formAssociated=!0,e.Textarea.styles=d`
     :host {
       display: inline-block;
       width: 100%;