@ctrliq/quantic-components 1.60.1 → 1.61.0

package/dist/quantic-components.min.js

@@ -32740,7 +32740,7 @@ const{I:Ze}=re,Ge=()=>document.createComment(""),Ne=(e,t,i)=>{const n=e._$AA.par
       );
       color: var(--quantic-text-tertiary);
     }
-  `,t([Le({type:"string",default:"",reflect:!0,description:"Currently selected value submitted with the form."})],e.Combobox.prototype,"value",void 0),t([Le({type:"string",description:"Name submitted with form data."})],e.Combobox.prototype,"name",void 0),t([Le({type:"string",description:"Placeholder shown when no option is selected."})],e.Combobox.prototype,"placeholder",void 0),t([Le({type:"ComboboxOption[]",default:"[]",description:"Options to display. Each item must have a label (display text) and value (form value). Set this prop reactively to implement async/server-side filtering."})],e.Combobox.prototype,"options",void 0),t([Le({type:"ComboboxSize",options:Object.values(Oi),default:Oi.Medium,description:"Controls padding and font size."})],e.Combobox.prototype,"size",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Prevents interaction."})],e.Combobox.prototype,"disabled",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Marks the field as required for form validation."})],e.Combobox.prototype,"required",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Applies error styling. Set alongside an error message in the parent quantic-combobox-field."})],e.Combobox.prototype,"invalid",void 0),t([Le({type:"string",default:"No results",description:"Text shown in the listbox when no options match the input."})],e.Combobox.prototype,"emptyLabel",void 0),t([Le({type:"(option: ComboboxOption, inputValue: string) => boolean",description:"Custom filter predicate. If omitted, defaults to case-insensitive substring match on option.label."})],e.Combobox.prototype,"filterFn",void 0),t([ve()],e.Combobox.prototype,"_open",void 0),t([ve()],e.Combobox.prototype,"_inputValue",void 0),t([ve()],e.Combobox.prototype,"_activeIndex",void 0),e.Combobox=t([Ie("value-changed",{description:"Fired when the user selects an option from the list.",detail:"{ value: string }"}),Ie("input-changed",{description:"Fired on every keystroke in the text field. Use to drive async filtering by updating the options prop in response.",detail:"{ value: string }"}),Ie("focus",{forwarded:!0}),Ie("blur",{forwarded:!0}),Ce("quantic-combobox")],e.Combobox);const $i=Bi,_i={Small:"sm",Medium:"md",Large:"lg"};e.Badge=class extends fe{constructor(){super(...arguments),this.color=$i.Brand,this.size=_i.Medium,this.rounded=!1,this.icon=!1}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0,[`color--${this.color}`]:!0,icon:this.icon,rounded:this.rounded});return je`
+  `,t([Le({type:"string",default:"",reflect:!0,description:"Currently selected value submitted with the form."})],e.Combobox.prototype,"value",void 0),t([Le({type:"string",description:"Name submitted with form data."})],e.Combobox.prototype,"name",void 0),t([Le({type:"string",description:"Placeholder shown when no option is selected."})],e.Combobox.prototype,"placeholder",void 0),t([Le({type:"ComboboxOption[]",default:"[]",description:"Options to display. Each item must have a label (display text) and value (form value). Set this prop reactively to implement async/server-side filtering."})],e.Combobox.prototype,"options",void 0),t([Le({type:"ComboboxSize",options:Object.values(Oi),default:Oi.Medium,description:"Controls padding and font size."})],e.Combobox.prototype,"size",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Prevents interaction."})],e.Combobox.prototype,"disabled",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Marks the field as required for form validation."})],e.Combobox.prototype,"required",void 0),t([Le({type:"boolean",default:"false",reflect:!0,description:"Applies error styling. Set alongside an error message in the parent quantic-combobox-field."})],e.Combobox.prototype,"invalid",void 0),t([Le({type:"string",default:"No results",description:"Text shown in the listbox when no options match the input."})],e.Combobox.prototype,"emptyLabel",void 0),t([Le({type:"(option: ComboboxOption, inputValue: string) => boolean",description:"Custom filter predicate. If omitted, defaults to case-insensitive substring match on option.label."})],e.Combobox.prototype,"filterFn",void 0),t([ve()],e.Combobox.prototype,"_open",void 0),t([ve()],e.Combobox.prototype,"_inputValue",void 0),t([ve()],e.Combobox.prototype,"_activeIndex",void 0),e.Combobox=t([Ie("value-changed",{description:"Fired when the user selects an option from the list.",detail:"{ value: string }"}),Ie("input-changed",{description:"Fired on every keystroke in the text field. Use to drive async filtering by updating the options prop in response.",detail:"{ value: string }"}),Ie("focus",{forwarded:!0}),Ie("blur",{forwarded:!0}),Ce("quantic-combobox")],e.Combobox);const $i=Bi,_i={ExtraSmall:"xs",Small:"sm",Medium:"md",Large:"lg"};e.Badge=class extends fe{constructor(){super(...arguments),this.color=$i.Brand,this.size=_i.Medium,this.rounded=!1,this.icon=!1}render(){const e=Oe({main:!0,[`size--${this.size}`]:!0,[`color--${this.color}`]:!0,icon:this.icon,rounded:this.rounded});return je`
       <div class=${e}>
         <slot name="before" data-description="Content before the label (e.g. icon)."></slot>
         <slot data-description="Badge label text or icon."></slot>
@@ -32765,6 +32765,11 @@ const{I:Ze}=re,Ge=()=>document.createComment(""),Ne=(e,t,i)=>{const n=e._$AA.par
       border-radius: var(--quantic-radius-sm);
     }
 
+    .size--xs {
+      padding: 0 var(--quantic-spacing-1);
+      font-size: var(--quantic-font-size-body-xs);
+    }
+
     .size--sm {
       padding: var(--quantic-spacing-0-5) var(--quantic-spacing-1-5);
       font-size: var(--quantic-font-size-body-xs);
@@ -32791,6 +32796,11 @@ const{I:Ze}=re,Ge=()=>document.createComment(""),Ne=(e,t,i)=>{const n=e._$AA.par
       line-height: 100%;
     }
 
+    .icon.size--xs {
+      width: calc(var(--quantic-line-height-body-xs) + 2px);
+      height: calc(var(--quantic-line-height-body-xs) + 2px);
+    }
+
     .icon.size--sm {
       width: calc(var(--quantic-line-height-body-xs) + 4px);
       height: calc(var(--quantic-line-height-body-xs) + 4px);