@ctrliq/quantic-components 1.85.1 → 1.86.0

package/dist/quantic-components.min.js

@@ -1667,7 +1667,7 @@ function an({context:e}){return(t,i)=>{const n=new WeakMap;if("object"==typeof i
       <div class=${e}>
         <slot></slot>
       </div>
-    `}},e.Grid.meta={tag:"quantic-grid",description:"CSS grid layout container that arranges child items into a responsive multi-column grid. Column count and gap scale automatically with container width based on the chosen density preset.",category:"layout",slots:{"":{description:"Grid items to be laid out."}}},e.Grid.styles=d`
+    `}},e.Grid.meta={tag:"quantic-grid",description:"Deprecated public export, becoming internal anatomy of quantic-card-group and quantic-option-card-group. Use quantic-card-group, quantic-option-card-group for option cards, or write the grid in your own stylesheet.",category:"layout",deprecated:{use:"quantic-card-group",reason:"Grid sizes its children, so any track or row rule it does not anticipate cannot be reached from outside."},slots:{"":{description:"Grid items to be laid out."}},relatedTo:["quantic-card-group","quantic-option-card-group"]},e.Grid.styles=d`
     :host {
       display: block;
       font-family: var(--quantic-font-family-body);
@@ -2677,7 +2677,7 @@ function an({context:e}){return(t,i)=>{const n=new WeakMap;if("object"==typeof i
       <div class=${t}>
         <slot></slot>
       </div>
-    `}},e.Cluster.meta={tag:"quantic-cluster",description:"Generic flex container that arranges child items along a horizontal or vertical axis with consistent spacing. Use for grouping small inline elements like badges, tags, or buttons. Prefer quantic-card-group for cards, quantic-panel-group for panels, and quantic-grid for multi-column responsive layouts — those components provide semantics and density presets that Cluster does not.",category:"layout",slots:{"":{description:"Items to arrange."}},relatedTo:["quantic-grid","quantic-card-group","quantic-panel-group"]},e.Cluster.styles=d`
+    `}},e.Cluster.meta={tag:"quantic-cluster",description:"Deprecated generic flex container. Use quantic-tag-group, quantic-badge-group or quantic-action-group for a uniform run of children, and a flex rule in your own stylesheet for anything else.",category:"layout",deprecated:{reason:"Every prop maps one-to-one to a CSS property, so the element adds a shadow boundary and nothing else."},slots:{"":{description:"Items to arrange."}},relatedTo:["quantic-tag-group","quantic-badge-group","quantic-action-group"]},e.Cluster.styles=d`
     :host {
       display: block;
     }
@@ -39913,7 +39913,7 @@ const ko="important",yo=" !"+ko,xo=Ze(class extends Ne{constructor(e){if(super(e
         var(--quantic-spacing-1)
       );
     }
-  `,t([fe({type:"string",attribute:"aria-label",description:"Accessible name for the group."})],e.TagGroup.prototype,"ariaLabel",void 0),e.TagGroup=t([Se("quantic-tag-group")],e.TagGroup);const $s={Body:"body",Display:"display"},_s={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg",ExtraLarge:"xl",TwoExtraLarge:"2xl"},Es=[".main {\n    color: var(--quantic-text-primary);\n    font-weight: inherit;\n  }",...Object.values($s).map(e=>`\n.variant--${e} {\n  font-family: var(--quantic-font-family-${e});\n}`),...Object.values(_s).flatMap(e=>Object.values($s).map(t=>((e,t)=>`\n.size--${t}-${e} {\n  font-size: var(--quantic-font-size-${t}-${e});\n  line-height: var(--quantic-line-height-${t}-${e});\n}`)(e,t)))].join("\n");e.Text=class extends qe{constructor(){super(...arguments),this.as="span",this.variant=$s.Body}render(){const e={main:!0,[`variant--${this.variant}`]:!0,[`size--${this.variant}-${this.size}`]:!!this.size},t=Fe(this.as);return Oe`<${t} class=${We(e)}><slot></slot></${t}>`}},e.Text.meta={tag:"quantic-text",description:"Typography component for rendering text with consistent sizing, weight, and color tokens. Renders any HTML element via the `as` prop for semantic correctness.",category:"display",slots:{"":{description:"Text content to render."}},relatedTo:[]},e.Text.styles=l(Es),t([fe({type:"string",default:"span",description:'HTML tag to render (e.g. "p", "h1", "span", "label").'})],e.Text.prototype,"as",void 0),t([fe({type:"TextVariant",options:Object.values($s),default:$s.Body,description:"Font family variant — body or display."})],e.Text.prototype,"variant",void 0),t([fe({type:"TextSize",options:Object.values(_s),description:"Font size and line-height token. Omit to inherit from context."})],e.Text.prototype,"size",void 0),e.Text=t([Se("quantic-text")],e.Text);const Us={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"},Gs={None:"none",Vertical:"vertical",Horizontal:"horizontal",Both:"both"};e.LucideIconCircleAlert.ensureDefined(),e.Textarea=class extends(Ki(qe)){constructor(){super(),this.value="",this.name="",this.placeholder="",this.size=Us.Medium,this.rows=4,this.resize=Gs.Vertical,this.disabled=!1,this.required=!1,this.readOnly=!1,this.invalid=!1,this.autoComplete="off",this.internals=this.attachInternals()}updated(e){e.has("value")&&(this.internals.setFormValue(this.value),this.updateValidity()),lt(this,e,this.value)}forwardNative(e){const t=e.target;this.value=t.value,this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}dispatchValueChanged(e){this.value=e.target.value}formResetCallback(){this.value="",this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals.setFormValue(e)}formDisabledCallback(e){this.disabled=e}updateValidity(){const e=this.shadowRoot?.querySelector("textarea");e&&this.internals.setValidity(e.validity,e.validationMessage,e)}render(){const e=We({main:!0,[`size--${this.size}`]:!0}),t=this.getA11yAttributes({invalid:this.invalid});return W`
+  `,t([fe({type:"string",attribute:"aria-label",description:"Accessible name for the group."})],e.TagGroup.prototype,"ariaLabel",void 0),e.TagGroup=t([Se("quantic-tag-group")],e.TagGroup);const $s={Body:"body",Display:"display"},_s={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg",ExtraLarge:"xl",TwoExtraLarge:"2xl"},Es=[".main {\n    color: var(--quantic-text-primary);\n    font-weight: inherit;\n  }",...Object.values($s).map(e=>`\n.variant--${e} {\n  font-family: var(--quantic-font-family-${e});\n}`),...Object.values(_s).flatMap(e=>Object.values($s).map(t=>((e,t)=>`\n.size--${t}-${e} {\n  font-size: var(--quantic-font-size-${t}-${e});\n  line-height: var(--quantic-line-height-${t}-${e});\n}`)(e,t)))].join("\n");e.Text=class extends qe{constructor(){super(...arguments),this.as="span",this.variant=$s.Body}render(){const e={main:!0,[`variant--${this.variant}`]:!0,[`size--${this.variant}-${this.size}`]:!!this.size},t=Fe(this.as);return Oe`<${t} class=${We(e)}><slot></slot></${t}>`}},e.Text.meta={tag:"quantic-text",description:"Deprecated typography wrapper. Write the semantic element in your own document, where quantic-css type styles and IDREF-based accessibility can reach it.",category:"display",deprecated:{reason:"Renders the consumer's element inside a shadow root, so the typography stylesheet cannot style it and IDREFs cannot cross the boundary."},slots:{"":{description:"Text content to render."}},relatedTo:["quantic-prose"]},e.Text.styles=l(Es),t([fe({type:"string",default:"span",description:'HTML tag to render (e.g. "p", "h1", "span", "label").'})],e.Text.prototype,"as",void 0),t([fe({type:"TextVariant",options:Object.values($s),default:$s.Body,description:"Font family variant — body or display."})],e.Text.prototype,"variant",void 0),t([fe({type:"TextSize",options:Object.values(_s),description:"Font size and line-height token. Omit to inherit from context."})],e.Text.prototype,"size",void 0),e.Text=t([Se("quantic-text")],e.Text);const Us={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"},Gs={None:"none",Vertical:"vertical",Horizontal:"horizontal",Both:"both"};e.LucideIconCircleAlert.ensureDefined(),e.Textarea=class extends(Ki(qe)){constructor(){super(),this.value="",this.name="",this.placeholder="",this.size=Us.Medium,this.rows=4,this.resize=Gs.Vertical,this.disabled=!1,this.required=!1,this.readOnly=!1,this.invalid=!1,this.autoComplete="off",this.internals=this.attachInternals()}updated(e){e.has("value")&&(this.internals.setFormValue(this.value),this.updateValidity()),lt(this,e,this.value)}forwardNative(e){const t=e.target;this.value=t.value,this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}dispatchValueChanged(e){this.value=e.target.value}formResetCallback(){this.value="",this.internals.setFormValue("")}formStateRestoreCallback(e){this.value=e,this.internals.setFormValue(e)}formDisabledCallback(e){this.disabled=e}updateValidity(){const e=this.shadowRoot?.querySelector("textarea");e&&this.internals.setValidity(e.validity,e.validationMessage,e)}render(){const e=We({main:!0,[`size--${this.size}`]:!0}),t=this.getA11yAttributes({invalid:this.invalid});return W`
       <div class=${e}>
         <textarea
           .value=${this.value}