@ctrliq/quantic-components 1.84.1 → 1.85.0

package/dist/quantic-components.min.js

@@ -1076,10 +1076,10 @@ const{I:ut}=de,ht=e=>e,pt=()=>document.createComment(""),gt=(e,t,i)=>{const n=e.
       background-color: currentColor;
     }
   `,t([fe({type:"BadgeColor",options:Object.values(Ji),default:Ji.Gray,description:"Semantic color of both the dot and badge background."})],e.StatusBadge.prototype,"color",void 0),t([fe({type:"BadgeSize",options:Object.values(Qi),default:Qi.Medium,description:"Controls padding and font size."})],e.StatusBadge.prototype,"size",void 0),e.StatusBadge=t([Se("quantic-status-badge")],e.StatusBadge),e.BadgeGroup=class extends qe{constructor(){super(...arguments),this.ariaLabel=null}render(){return W`
-      <div class="group" role="group" aria-label=${this.ariaLabel??"Badges"}>
+      <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. Use quantic-tag-group for tags.",category:"display",slots:{"":{description:"quantic-badge or quantic-status-badge elements."}},subComponents:["quantic-badge","quantic-status-badge"],relatedTo:["quantic-badge","quantic-tag-group"]},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. Layout: ::part(group), for a column or a different alignment. Use quantic-tag-group for tags.",category:"display",slots:{"":{description:"quantic-badge or quantic-status-badge elements."}},subComponents:["quantic-badge","quantic-status-badge"],relatedTo:["quantic-badge","quantic-tag-group"]},e.BadgeGroup.styles=d`
     :host {
       display: block;
     }
@@ -1209,10 +1209,10 @@ const{I:ut}=de,ht=e=>e,pt=()=>document.createComment(""),gt=(e,t,i)=>{const n=e.
 
     ${l(ct(e=>`--quantic-component-capacity-bar-color: var(--quantic-utility-${e}-500);`))}
   `,t([fe({type:"number",default:"0",description:"Total number of capacity segments (max 100)."})],e.CapacityBar.prototype,"total",void 0),t([fe({type:"number",default:"0",description:"Number of used/filled segments. Clamped to [0, total]."})],e.CapacityBar.prototype,"used",void 0),t([fe({type:"CapacityBarSize",options:Object.values(Yi),default:Yi.Small,description:"Controls segment height and label font size."})],e.CapacityBar.prototype,"size",void 0),t([fe({type:"CapacityBarColor",options:Object.values(en),default:en.Brand,description:"Color of filled segments."})],e.CapacityBar.prototype,"color",void 0),t([fe({type:"string",description:"Optional visible text label rendered next to the bar."})],e.CapacityBar.prototype,"label",void 0),t([fe({type:"string",attribute:"aria-label",description:"Accessible label for the meter element; falls back to the label prop."})],e.CapacityBar.prototype,"ariaLabel",void 0),e.CapacityBar=t([Se("quantic-capacity-bar")],e.CapacityBar),e.ActionGroup=class extends qe{constructor(){super(...arguments),this.ariaLabel=null}render(){return W`
-      <div class="group" role="group" aria-label=${this.ariaLabel??"Actions"}>
+      <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. Use quantic-button-bar when the buttons should read as one joined control.",category:"action",slots:{"":{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"]},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. 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",slots:{"":{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"]},e.ActionGroup.styles=d`
     :host {
       display: block;
     }
@@ -39895,10 +39895,10 @@ const mo="important",ko=" !"+mo,yo=Ge(class extends Ze{constructor(e){if(super(e
       font-weight: var(--quantic-font-weight-medium);
     }
   `,t([fe({type:"TagSize",options:Object.values(Fs),default:Fs.Medium,description:"Controls padding and font size."})],e.CountTag.prototype,"size",void 0),t([fe({type:"boolean",default:"false",description:"Renders a checkbox and makes the tag toggleable."})],e.CountTag.prototype,"selectable",void 0),t([fe({type:"boolean",default:"false",description:"Shows a dismiss (×) button to remove the tag."})],e.CountTag.prototype,"dismissible",void 0),t([fe({type:"boolean",default:"false",description:"Current selected state when selectable is true."})],e.CountTag.prototype,"selected",void 0),t([fe({type:"string",default:"",description:"Numeric count displayed in the trailing badge."})],e.CountTag.prototype,"count",void 0),e.CountTag=t([Se("quantic-count-tag")],e.CountTag),e.TagGroup=class extends qe{constructor(){super(...arguments),this.ariaLabel=null}render(){return W`
-      <div class="group" role="group" aria-label=${this.ariaLabel??"Tags"}>
+      <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. Use quantic-badge-group for badges.",category:"display",slots:{"":{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"]},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. Layout: ::part(group), for a column or a different alignment. Use quantic-badge-group for badges.",category:"display",slots:{"":{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"]},e.TagGroup.styles=d`
     :host {
       display: block;
     }