@fluid-topics/ftds-combobox 2.2.12 → 2.2.14

package/build/ftds-combobox.light.js

@@ -1177,6 +1177,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
             max-width: 100%;
             display: flex;
             flex-wrap: wrap;
+            align-items: center;
             gap: ${We.verticalGap} ${We.horizontalGap};
             padding-left: 0;
             margin: ${c.spacing1} 0;
@@ -2527,7 +2528,7 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
                     </div>
                 </ftds-popover>
             </li>
-        `}renderChip(t){var r,n,a,i;return Ta.html`
+        `}renderChip(t){var r,n,a,i,s;return Ta.html`
             <li>
                 <ft-tooltip
                     text="${(r=t.label)!==null&&r!==void 0?r:t.value}"
@@ -2537,15 +2538,15 @@ Also for action icons.`,c.colorGray200),contentGlobalSubtle:o.extend("--ftds-con
                                    exportparts="chip"
                                    ?removable=${this.removable}
                                    .family=${(n=t.family)!==null&&n!==void 0?n:zt.DesignSystemFamily.neutral}
-                                   .icon=${this.getFamilyIcon(t.family)}
-                                   .iconVariant=${f.solid}
-                                   .removeButtonLabel=${(a=t.removeLabel)!==null&&a!==void 0?a:an.messages.defaultRemoveLabel()}
+                                   .icon=${(a=t.icon)!==null&&a!==void 0?a:this.getFamilyIcon(t.family)}
+                                   .iconVariant=${this.getIconVariant(t.icon,t.iconVariant)}
+                                   .removeButtonLabel=${(i=t.removeLabel)!==null&&i!==void 0?i:an.messages.defaultRemoveLabel()}
                                    @remove=${()=>this.onChipRemoved(t)}>
-                        ${(i=t.label)!==null&&i!==void 0?i:t.value}
+                        ${(s=t.label)!==null&&s!==void 0?s:t.value}
                     </ftds-chip>
                 </ft-tooltip>
             </li>
-        `}onChipRemoved(t){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===t.value),this.dispatchEvent(new zo(t))}handleFocusOnChipDeleted(t){var r;let n=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);n.length!==0&&(n[t]?this.focusChip(n[t]):this.focusChip(n[t-1]))}async focusChip(t){var r;await t.updateComplete;let n=(r=t.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await n?.updateComplete,n?.focus()}toggleExtraChips(t){this.isPopoverOpened=t.detail.opened}getFamilyIcon(t){if(t===zt.DesignSystemFamily.warning)return p.TRIANGLE_EXCLAMATION}};Pe.elementDefinitions={"ftds-chip":we,"ftds-popover":j,"ftds-typography":ae,"ft-tooltip":ie};Pe.styles=S1;po([(0,Nr.property)({type:Boolean})],Pe.prototype,"removable",void 0);po([(0,zt.numberProperty)()],Pe.prototype,"maxNumberOfChips",void 0);po([(0,Nr.property)()],Pe.prototype,"popoverTitle",void 0);po([(0,zt.jsonProperty)([])],Pe.prototype,"chips",void 0);po([(0,Nr.state)()],Pe.prototype,"isPopoverOpened",void 0);po([(0,Nr.queryAll)(".chip-group-chip")],Pe.prototype,"allChips",void 0);var i4=b(N());var a4={"ftds-chip-group":Pe};(0,i4.customElements)(a4);var zr=Kt.build("ftdsComboboxMultiValue"),s4={selectAll:"Select All",valueAdded:"{0} added",valueRemoved:"{0} removed",removeValueLabel:"Remove {0}",numberOfSelectedValuesAriaLabel:"{0} selected values","numberOfSelectedValuesAriaLabel[\\=1]":"1 selected value","numberOfSelectedValuesAriaLabel[\\=0]":"No selected value"};var Ge=b(B()),Ae=b(te());var N4=b(In()),Is=b($e());function It(e,t,r){return e?t(e):r?.(e)}var _e=b(N());var yt=Kt.build("ftdsBaseCombobox"),c4={maxSuggestionsLabel:"{0} first results.",maxSuggestionsAriaLabel:"Only showing the {0} first results, please refine your search.",refineYourSearchLabel:"Refine your search.",noResultLabel:"No option",newValueLabel:"New value"};var Fa=b(B()),L=b(N());var l4=b(B());var ue=b(N()),ce={fontSize:ue.FtCssVariableFactory.extend("--ftds-input-label-font-size","",Ur.fontSize),fontSizeRaised:ue.FtCssVariableFactory.extend("--ftds-input-label-font-size-raised","",or.fontSize),lineHeight:ue.FtCssVariableFactory.extend("--ftds-input-label-line-height","",or.lineHeight),color:ue.FtCssVariableFactory.extend("--ftds-input-label-color","",ue.semantic.contentGlobalSubtle),largeFieldHeight:ue.FtCssVariableFactory.create("--ftds-input-label-large-height","","SIZE","50px"),largeFieldVerticalGap:ue.FtCssVariableFactory.extend("--ftds-input-label-large-field-vertical-gap","",c.spacing05),largeFieldHorizontalPadding:ue.FtCssVariableFactory.extend("--ftds-input-label-large-field-horizontal-padding","",c.spacing4),mediumFieldHeight:ue.FtCssVariableFactory.create("--ftds-input-label-medium-height","","SIZE","40px"),mediumFieldVerticalGap:ue.FtCssVariableFactory.create("--ftds-input-label-medium-field-vertical-gap","","SIZE","0px"),mediumFieldHorizontalPadding:ue.FtCssVariableFactory.extend("--ftds-input-label-medium-field-horizontal-padding","",c.spacing4),additionalPaddingLeft:ue.FtCssVariableFactory.create("--ftds-input-label-additional-padding-left","","SIZE","0px"),additionalPaddingRight:ue.FtCssVariableFactory.create("--ftds-input-label-additional-padding-right","","SIZE","0px"),verticalSpacing:ue.FtCssVariableFactory.create("--ftds-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:ue.FtCssVariableFactory.create("--ftds-input-label-horizontal-spacing","","SIZE","12px")},d4=[l4.css`
+        `}onChipRemoved(t){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===t.value),this.dispatchEvent(new zo(t))}handleFocusOnChipDeleted(t){var r;let n=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);n.length!==0&&(n[t]?this.focusChip(n[t]):this.focusChip(n[t-1]))}async focusChip(t){var r;await t.updateComplete;let n=(r=t.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await n?.updateComplete,n?.focus()}toggleExtraChips(t){this.isPopoverOpened=t.detail.opened}getFamilyIcon(t){if(t===zt.DesignSystemFamily.warning)return p.TRIANGLE_EXCLAMATION}getIconVariant(t,r){return t?r??f.regular:f.solid}};Pe.elementDefinitions={"ftds-chip":we,"ftds-popover":j,"ftds-typography":ae,"ft-tooltip":ie};Pe.styles=S1;po([(0,Nr.property)({type:Boolean})],Pe.prototype,"removable",void 0);po([(0,zt.numberProperty)()],Pe.prototype,"maxNumberOfChips",void 0);po([(0,Nr.property)()],Pe.prototype,"popoverTitle",void 0);po([(0,zt.jsonProperty)([])],Pe.prototype,"chips",void 0);po([(0,Nr.state)()],Pe.prototype,"isPopoverOpened",void 0);po([(0,Nr.queryAll)(".chip-group-chip")],Pe.prototype,"allChips",void 0);var i4=b(N());var a4={"ftds-chip-group":Pe};(0,i4.customElements)(a4);var zr=Kt.build("ftdsComboboxMultiValue"),s4={selectAll:"Select All",valueAdded:"{0} added",valueRemoved:"{0} removed",removeValueLabel:"Remove {0}",numberOfSelectedValuesAriaLabel:"{0} selected values","numberOfSelectedValuesAriaLabel[\\=1]":"1 selected value","numberOfSelectedValuesAriaLabel[\\=0]":"No selected value"};var Ge=b(B()),Ae=b(te());var N4=b(In()),Is=b($e());function It(e,t,r){return e?t(e):r?.(e)}var _e=b(N());var yt=Kt.build("ftdsBaseCombobox"),c4={maxSuggestionsLabel:"{0} first results.",maxSuggestionsAriaLabel:"Only showing the {0} first results, please refine your search.",refineYourSearchLabel:"Refine your search.",noResultLabel:"No option",newValueLabel:"New value"};var Fa=b(B()),L=b(N());var l4=b(B());var ue=b(N()),ce={fontSize:ue.FtCssVariableFactory.extend("--ftds-input-label-font-size","",Ur.fontSize),fontSizeRaised:ue.FtCssVariableFactory.extend("--ftds-input-label-font-size-raised","",or.fontSize),lineHeight:ue.FtCssVariableFactory.extend("--ftds-input-label-line-height","",or.lineHeight),color:ue.FtCssVariableFactory.extend("--ftds-input-label-color","",ue.semantic.contentGlobalSubtle),largeFieldHeight:ue.FtCssVariableFactory.create("--ftds-input-label-large-height","","SIZE","50px"),largeFieldVerticalGap:ue.FtCssVariableFactory.extend("--ftds-input-label-large-field-vertical-gap","",c.spacing05),largeFieldHorizontalPadding:ue.FtCssVariableFactory.extend("--ftds-input-label-large-field-horizontal-padding","",c.spacing4),mediumFieldHeight:ue.FtCssVariableFactory.create("--ftds-input-label-medium-height","","SIZE","40px"),mediumFieldVerticalGap:ue.FtCssVariableFactory.create("--ftds-input-label-medium-field-vertical-gap","","SIZE","0px"),mediumFieldHorizontalPadding:ue.FtCssVariableFactory.extend("--ftds-input-label-medium-field-horizontal-padding","",c.spacing4),additionalPaddingLeft:ue.FtCssVariableFactory.create("--ftds-input-label-additional-padding-left","","SIZE","0px"),additionalPaddingRight:ue.FtCssVariableFactory.create("--ftds-input-label-additional-padding-right","","SIZE","0px"),verticalSpacing:ue.FtCssVariableFactory.create("--ftds-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:ue.FtCssVariableFactory.create("--ftds-input-label-horizontal-spacing","","SIZE","12px")},d4=[l4.css`
 
         :root {
             --field-height: ${ce.largeFieldHeight};

package/build/ftds-combobox.min.js

@@ -1257,6 +1257,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             max-width: 100%;
             display: flex;
             flex-wrap: wrap;
+            align-items: center;
             gap: ${Ke.verticalGap} ${Ke.horizontalGap};
             padding-left: 0;
             margin: ${l.spacing1} 0;
@@ -2607,7 +2608,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                     </div>
                 </ftds-popover>
             </li>
-        `}renderChip(e){var r,o,i,a;return _`
+        `}renderChip(e){var r,o,i,a,s;return _`
             <li>
                 <ft-tooltip
                     text="${(r=e.label)!==null&&r!==void 0?r:e.value}"
@@ -2617,15 +2618,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                                    exportparts="chip"
                                    ?removable=${this.removable}
                                    .family=${(o=e.family)!==null&&o!==void 0?o:oe.neutral}
-                                   .icon=${this.getFamilyIcon(e.family)}
-                                   .iconVariant=${f.solid}
-                                   .removeButtonLabel=${(i=e.removeLabel)!==null&&i!==void 0?i:wn.messages.defaultRemoveLabel()}
+                                   .icon=${(i=e.icon)!==null&&i!==void 0?i:this.getFamilyIcon(e.family)}
+                                   .iconVariant=${this.getIconVariant(e.icon,e.iconVariant)}
+                                   .removeButtonLabel=${(a=e.removeLabel)!==null&&a!==void 0?a:wn.messages.defaultRemoveLabel()}
                                    @remove=${()=>this.onChipRemoved(e)}>
-                        ${(a=e.label)!==null&&a!==void 0?a:e.value}
+                        ${(s=e.label)!==null&&s!==void 0?s:e.value}
                     </ftds-chip>
                 </ft-tooltip>
             </li>
-        `}onChipRemoved(e){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===e.value),this.dispatchEvent(new vn(e))}handleFocusOnChipDeleted(e){var r;let o=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);o.length!==0&&(o[e]?this.focusChip(o[e]):this.focusChip(o[e-1]))}async focusChip(e){var r;await e.updateComplete;let o=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await o?.updateComplete,o?.focus()}toggleExtraChips(e){this.isPopoverOpened=e.detail.opened}getFamilyIcon(e){if(e===oe.warning)return h.TRIANGLE_EXCLAMATION}};Ve.elementDefinitions={"ftds-chip":$e,"ftds-popover":ie,"ftds-typography":me,"ft-tooltip":ge};Ve.styles=ru;Io([v({type:Boolean})],Ve.prototype,"removable",void 0);Io([lt()],Ve.prototype,"maxNumberOfChips",void 0);Io([v()],Ve.prototype,"popoverTitle",void 0);Io([De([])],Ve.prototype,"chips",void 0);Io([K()],Ve.prototype,"isPopoverOpened",void 0);Io([ua(".chip-group-chip")],Ve.prototype,"allChips",void 0);var qu={"ftds-chip-group":Ve};J(qu);var Vr=rr.build("ftdsComboboxMultiValue"),Yu={selectAll:"Select All",valueAdded:"{0} added",valueRemoved:"{0} removed",removeValueLabel:"Remove {0}",numberOfSelectedValuesAriaLabel:"{0} selected values","numberOfSelectedValuesAriaLabel[\\=1]":"1 selected value","numberOfSelectedValuesAriaLabel[\\=0]":"No selected value"};var Mt=rr.build("ftdsBaseCombobox"),Xu={maxSuggestionsLabel:"{0} first results.",maxSuggestionsAriaLabel:"Only showing the {0} first results, please refine your search.",refineYourSearchLabel:"Refine your search.",noResultLabel:"No option",newValueLabel:"New value"};var be={fontSize:n.extend("--ftds-input-label-font-size","",Et.fontSize),fontSizeRaised:n.extend("--ftds-input-label-font-size-raised","",dt.fontSize),lineHeight:n.extend("--ftds-input-label-line-height","",dt.lineHeight),color:n.extend("--ftds-input-label-color","",u.contentGlobalSubtle),largeFieldHeight:n.create("--ftds-input-label-large-height","","SIZE","50px"),largeFieldVerticalGap:n.extend("--ftds-input-label-large-field-vertical-gap","",l.spacing05),largeFieldHorizontalPadding:n.extend("--ftds-input-label-large-field-horizontal-padding","",l.spacing4),mediumFieldHeight:n.create("--ftds-input-label-medium-height","","SIZE","40px"),mediumFieldVerticalGap:n.create("--ftds-input-label-medium-field-vertical-gap","","SIZE","0px"),mediumFieldHorizontalPadding:n.extend("--ftds-input-label-medium-field-horizontal-padding","",l.spacing4),additionalPaddingLeft:n.create("--ftds-input-label-additional-padding-left","","SIZE","0px"),additionalPaddingRight:n.create("--ftds-input-label-additional-padding-right","","SIZE","0px"),verticalSpacing:n.create("--ftds-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:n.create("--ftds-input-label-horizontal-spacing","","SIZE","12px")},Qu=[N`
+        `}onChipRemoved(e){this.lastRemovedChipIndex=this.chips.findIndex(r=>r.value===e.value),this.dispatchEvent(new vn(e))}handleFocusOnChipDeleted(e){var r;let o=Array.from((r=this.allChips)!==null&&r!==void 0?r:[]);o.length!==0&&(o[e]?this.focusChip(o[e]):this.focusChip(o[e-1]))}async focusChip(e){var r;await e.updateComplete;let o=(r=e.shadowRoot)===null||r===void 0?void 0:r.querySelector(".ftds-chip--remove-button");await o?.updateComplete,o?.focus()}toggleExtraChips(e){this.isPopoverOpened=e.detail.opened}getFamilyIcon(e){if(e===oe.warning)return h.TRIANGLE_EXCLAMATION}getIconVariant(e,r){return e?r??f.regular:f.solid}};Ve.elementDefinitions={"ftds-chip":$e,"ftds-popover":ie,"ftds-typography":me,"ft-tooltip":ge};Ve.styles=ru;Io([v({type:Boolean})],Ve.prototype,"removable",void 0);Io([lt()],Ve.prototype,"maxNumberOfChips",void 0);Io([v()],Ve.prototype,"popoverTitle",void 0);Io([De([])],Ve.prototype,"chips",void 0);Io([K()],Ve.prototype,"isPopoverOpened",void 0);Io([ua(".chip-group-chip")],Ve.prototype,"allChips",void 0);var qu={"ftds-chip-group":Ve};J(qu);var Vr=rr.build("ftdsComboboxMultiValue"),Yu={selectAll:"Select All",valueAdded:"{0} added",valueRemoved:"{0} removed",removeValueLabel:"Remove {0}",numberOfSelectedValuesAriaLabel:"{0} selected values","numberOfSelectedValuesAriaLabel[\\=1]":"1 selected value","numberOfSelectedValuesAriaLabel[\\=0]":"No selected value"};var Mt=rr.build("ftdsBaseCombobox"),Xu={maxSuggestionsLabel:"{0} first results.",maxSuggestionsAriaLabel:"Only showing the {0} first results, please refine your search.",refineYourSearchLabel:"Refine your search.",noResultLabel:"No option",newValueLabel:"New value"};var be={fontSize:n.extend("--ftds-input-label-font-size","",Et.fontSize),fontSizeRaised:n.extend("--ftds-input-label-font-size-raised","",dt.fontSize),lineHeight:n.extend("--ftds-input-label-line-height","",dt.lineHeight),color:n.extend("--ftds-input-label-color","",u.contentGlobalSubtle),largeFieldHeight:n.create("--ftds-input-label-large-height","","SIZE","50px"),largeFieldVerticalGap:n.extend("--ftds-input-label-large-field-vertical-gap","",l.spacing05),largeFieldHorizontalPadding:n.extend("--ftds-input-label-large-field-horizontal-padding","",l.spacing4),mediumFieldHeight:n.create("--ftds-input-label-medium-height","","SIZE","40px"),mediumFieldVerticalGap:n.create("--ftds-input-label-medium-field-vertical-gap","","SIZE","0px"),mediumFieldHorizontalPadding:n.extend("--ftds-input-label-medium-field-horizontal-padding","",l.spacing4),additionalPaddingLeft:n.create("--ftds-input-label-additional-padding-left","","SIZE","0px"),additionalPaddingRight:n.create("--ftds-input-label-additional-padding-right","","SIZE","0px"),verticalSpacing:n.create("--ftds-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:n.create("--ftds-input-label-horizontal-spacing","","SIZE","12px")},Qu=[N`
 
         :root {
             --field-height: ${be.largeFieldHeight};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-combobox",
-    "version": "2.2.12",
+    "version": "2.2.14",
     "description": "Single-select combobox for the Fluid Topics Design System",
     "keywords": [
         "Lit"
@@ -20,17 +20,17 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.8.0",
-        "@fluid-topics/ft-i18n": "2.2.12",
-        "@fluid-topics/ft-wc-utils": "2.2.12",
-        "@fluid-topics/ftds-base-input": "2.2.12",
-        "@fluid-topics/ftds-chip-group": "2.2.12",
-        "@fluid-topics/ftds-icon": "2.2.12",
-        "@fluid-topics/ftds-notice": "2.2.12",
-        "@fluid-topics/ftds-typography": "2.2.12",
+        "@fluid-topics/ft-i18n": "2.2.14",
+        "@fluid-topics/ft-wc-utils": "2.2.14",
+        "@fluid-topics/ftds-base-input": "2.2.14",
+        "@fluid-topics/ftds-chip-group": "2.2.14",
+        "@fluid-topics/ftds-icon": "2.2.14",
+        "@fluid-topics/ftds-notice": "2.2.14",
+        "@fluid-topics/ftds-typography": "2.2.14",
         "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.2.12"
+        "@fluid-topics/ft-wc-test-utils": "2.2.14"
     },
-    "gitHead": "3f8686496b8ce4f3b095e6184e387a89c353c3b8"
+    "gitHead": "854d6984b9b23dbce23a195e12814084a8317fa5"
 }