@fluid-topics/ft-search-bar 1.1.53 → 1.1.54

package/build/ft-search-bar.light.js

@@ -1594,7 +1594,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                 </div>
                 <div class="ft-accordion-item--separator" part="separator"></div>
             </div>
-        `}update(t){super.update(t),t.has("active")&&this.active&&this.dispatchEvent(new Event("activated",{composed:!0,bubbles:!0}))}onToggleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.active=!this.active)}}ir.elementDefinitions={"ft-ripple":Ze,"ft-typography":se,"ft-icon":qo},ir.styles=er,or([i.property()],ir.prototype,"icon",void 0),or([i.property()],ir.prototype,"iconVariant",void 0),or([i.property()],ir.prototype,"label",void 0),or([i.property({type:Boolean,reflect:!0})],ir.prototype,"active",void 0),e.customElement("ft-accordion")(Yi),e.customElement("ft-accordion-item")(ir);const rr=e.FtCssVariableFactory.extend("--ft-chip-color","",e.designSystemVariables.colorOnSurface),ar={backgroundColor:e.FtCssVariableFactory.extend("--ft-chip-background-color","",e.designSystemVariables.colorSurface),color:rr,fontSize:e.FtCssVariableFactory.extend("--ft-chip-font-size","",Wt.fontSize),iconSize:e.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),rippleColor:e.FtCssVariableFactory.extend("--ft-chip-ripple-color","",rr),horizontalPadding:e.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:e.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:e.FtCssVariableFactory.external(e.designSystemVariables.colorOutline,"Design system"),opacityDisabled:e.FtCssVariableFactory.external(e.designSystemVariables.colorOpacityDisabled,"Design system")},nr=e.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",e.FtCssVariableFactory.extend("--ft-chip-color","",e.designSystemVariables.colorOnPrimary)),lr={backgroundColor:e.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",e.FtCssVariableFactory.extend("--ft-chip-background-color","",e.designSystemVariables.colorPrimary)),color:nr,rippleColor:e.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",nr)},sr=e.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),cr=e.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),pr=[e.noTextSelect,o.css`
+        `}update(t){super.update(t),t.has("active")&&this.active&&this.dispatchEvent(new Event("activated",{composed:!0,bubbles:!0}))}onToggleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.active=!this.active)}}ir.elementDefinitions={"ft-ripple":Ze,"ft-typography":se,"ft-icon":qo},ir.styles=er,or([i.property()],ir.prototype,"icon",void 0),or([i.property()],ir.prototype,"iconVariant",void 0),or([i.property()],ir.prototype,"label",void 0),or([i.property({type:Boolean,reflect:!0})],ir.prototype,"active",void 0),e.customElement("ft-accordion")(Yi),e.customElement("ft-accordion-item")(ir);const rr=e.FtCssVariableFactory.extend("--ft-chip-color","",e.designSystemVariables.colorOnSurface),ar={backgroundColor:e.FtCssVariableFactory.extend("--ft-chip-background-color","",e.designSystemVariables.colorSurface),color:rr,fontSize:e.FtCssVariableFactory.extend("--ft-chip-font-size","",Wt.fontSize),iconSize:e.FtCssVariableFactory.create("--ft-chip-icon-size","","SIZE","18px"),borderRadius:e.FtCssVariableFactory.create("--ft-chip-border-radius","","SIZE",""),rippleColor:e.FtCssVariableFactory.extend("--ft-chip-ripple-color","",rr),horizontalPadding:e.FtCssVariableFactory.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:e.FtCssVariableFactory.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:e.FtCssVariableFactory.external(e.designSystemVariables.colorOutline,"Design system"),opacityDisabled:e.FtCssVariableFactory.external(e.designSystemVariables.colorOpacityDisabled,"Design system")},nr=e.FtCssVariableFactory.extend("--ft-chip-highlighted-color","",e.FtCssVariableFactory.extend("--ft-chip-color","",e.designSystemVariables.colorOnPrimary)),lr={backgroundColor:e.FtCssVariableFactory.extend("--ft-chip-highlighted-background-color","",e.FtCssVariableFactory.extend("--ft-chip-background-color","",e.designSystemVariables.colorPrimary)),color:nr,rippleColor:e.FtCssVariableFactory.extend("--ft-chip-highlighted-ripple-color","",nr)},sr=e.FtCssVariableFactory.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),cr=e.FtCssVariableFactory.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),pr=[e.noTextSelect,o.css`
         :host {
             display: inline-block;
             max-width: 100%;
@@ -1621,7 +1621,7 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
             border: 1px solid ${ar.colorOutline};
             color: ${ar.color};
             ${e.setVariable(de.color,ar.rippleColor)};
-            border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
+            border-radius: var(${o.unsafeCSS(ar.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
             padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
             background-color: ${ar.backgroundColor};
             line-height: var(--ft-chip-internal-content-height);
@@ -1735,9 +1735,10 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
             <div class="${a.classMap(t)}"
                  aria-label="${this.getLabel()}"
                  tabindex="${this.interactionsOnChip?0:-1}"
-                 @keyup=${this.onKeyUp}>
+                 @keyup=${this.onKeyUp}
+                 part="chip">
                 <ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
-                <ft-typography variant="body2" element="span" class="ft-chip--label">
+                <ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
                     <slot @slotchange=${this.onSlotchange}></slot>
                 </ft-typography>
                 ${this.internalIcon?this.renderIcon():null}
@@ -1749,10 +1750,11 @@ const V=Symbol.for(""),q=t=>{if(t?.r===V)return t?._$litStatic$},Y=t=>({_$litSta
                                .iconVariant=${this.iconVariant}
                                icon="${this.internalIcon}"
                                label="${this.iconLabel}"
+                               part="icon-button"
                     ></ft-button>
             `:o.html`
-                    <div class="ft-chip--icon-container ft-no-text-select">
-                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
+                    <div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
+                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
                     </div>
             `}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new hr))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new hr))}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}}dr.elementDefinitions={"ft-ripple":Ze,"ft-typography":se,"ft-icon":qo,"ft-button":ti},dr.styles=pr,fr([i.property({type:Boolean})],dr.prototype,"highlighted",void 0),fr([i.property({type:Boolean})],dr.prototype,"removable",void 0),fr([i.property({type:Boolean})],dr.prototype,"disabled",void 0),fr([i.property({type:Boolean})],dr.prototype,"clickable",void 0),fr([i.property({type:Boolean})],dr.prototype,"iconClickable",void 0),fr([i.property({type:Boolean})],dr.prototype,"dense",void 0),fr([i.property({type:Boolean})],dr.prototype,"multiLine",void 0),fr([i.property()],dr.prototype,"label",void 0),fr([i.property()],dr.prototype,"iconLabel",void 0),fr([i.property()],dr.prototype,"icon",void 0),fr([i.property()],dr.prototype,"iconVariant",void 0),fr([i.property({type:Boolean})],dr.prototype,"trailingIcon",void 0),fr([i.query("ft-typography slot")],dr.prototype,"slottedContent",void 0),e.customElement("ft-chip")(dr);const ur={fontSize:e.FtCssVariableFactory.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:e.FtCssVariableFactory.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:e.FtCssVariableFactory.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:e.FtCssVariableFactory.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:e.FtCssVariableFactory.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:e.FtCssVariableFactory.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:e.FtCssVariableFactory.extend("--ft-input-label-border-color","",e.designSystemVariables.colorOutline),textColor:e.FtCssVariableFactory.extend("--ft-input-label-text-color","",e.designSystemVariables.colorOnSurfaceMedium),disabledTextColor:e.FtCssVariableFactory.extend("--ft-input-label-disabled-text-color","",e.designSystemVariables.colorOnSurfaceDisabled),colorSurface:e.FtCssVariableFactory.external(e.designSystemVariables.colorSurface,"Design system"),borderRadiusS:e.FtCssVariableFactory.external(e.designSystemVariables.borderRadiusS,"Design system"),colorError:e.FtCssVariableFactory.external(e.designSystemVariables.colorError,"Design system")},br=o.css`
     .ft-input-label {

package/build/ft-search-bar.min.js

@@ -1763,7 +1763,7 @@ const vs=Symbol.for(""),xs=t=>{if(t?.r===vs)return t?._$litStatic$},ws=t=>({_$li
                 </div>
                 <div class="ft-accordion-item--separator" part="separator"></div>
             </div>
-        `}update(t){super.update(t),t.has("active")&&this.active&&this.dispatchEvent(new Event("activated",{composed:!0,bubbles:!0}))}onToggleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.active=!this.active)}}vh.elementDefinitions={"ft-ripple":tc,"ft-typography":Nl,"ft-icon":fc},vh.styles=yh,mh([Oe()],vh.prototype,"icon",void 0),mh([Oe()],vh.prototype,"iconVariant",void 0),mh([Oe()],vh.prototype,"label",void 0),mh([Oe({type:Boolean,reflect:!0})],vh.prototype,"active",void 0),yo("ft-accordion")(ph),yo("ft-accordion-item")(vh);const xh=Oo.extend("--ft-chip-color","",$i.colorOnSurface),wh={backgroundColor:Oo.extend("--ft-chip-background-color","",$i.colorSurface),color:xh,fontSize:Oo.extend("--ft-chip-font-size","",Qs.fontSize),iconSize:Oo.create("--ft-chip-icon-size","","SIZE","18px"),rippleColor:Oo.extend("--ft-chip-ripple-color","",xh),horizontalPadding:Oo.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:Oo.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:Oo.external($i.colorOutline,"Design system"),opacityDisabled:Oo.external($i.colorOpacityDisabled,"Design system")},Oh=Oo.extend("--ft-chip-highlighted-color","",Oo.extend("--ft-chip-color","",$i.colorOnPrimary)),Sh={backgroundColor:Oo.extend("--ft-chip-highlighted-background-color","",Oo.extend("--ft-chip-background-color","",$i.colorPrimary)),color:Oh,rippleColor:Oo.extend("--ft-chip-highlighted-ripple-color","",Oh)},$h=Oo.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),Ch=Oo.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),kh=[Jr,pt`
+        `}update(t){super.update(t),t.has("active")&&this.active&&this.dispatchEvent(new Event("activated",{composed:!0,bubbles:!0}))}onToggleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.active=!this.active)}}vh.elementDefinitions={"ft-ripple":tc,"ft-typography":Nl,"ft-icon":fc},vh.styles=yh,mh([Oe()],vh.prototype,"icon",void 0),mh([Oe()],vh.prototype,"iconVariant",void 0),mh([Oe()],vh.prototype,"label",void 0),mh([Oe({type:Boolean,reflect:!0})],vh.prototype,"active",void 0),yo("ft-accordion")(ph),yo("ft-accordion-item")(vh);const xh=Oo.extend("--ft-chip-color","",$i.colorOnSurface),wh={backgroundColor:Oo.extend("--ft-chip-background-color","",$i.colorSurface),color:xh,fontSize:Oo.extend("--ft-chip-font-size","",Qs.fontSize),iconSize:Oo.create("--ft-chip-icon-size","","SIZE","18px"),borderRadius:Oo.create("--ft-chip-border-radius","","SIZE",""),rippleColor:Oo.extend("--ft-chip-ripple-color","",xh),horizontalPadding:Oo.create("--ft-chip-horizontal-padding","","SIZE","6px"),verticalPadding:Oo.create("--ft-chip-vertical-padding","","SIZE","6px"),colorOutline:Oo.external($i.colorOutline,"Design system"),opacityDisabled:Oo.external($i.colorOpacityDisabled,"Design system")},Oh=Oo.extend("--ft-chip-highlighted-color","",Oo.extend("--ft-chip-color","",$i.colorOnPrimary)),Sh={backgroundColor:Oo.extend("--ft-chip-highlighted-background-color","",Oo.extend("--ft-chip-background-color","",$i.colorPrimary)),color:Oh,rippleColor:Oo.extend("--ft-chip-highlighted-ripple-color","",Oh)},$h=Oo.create("--ft-chip-dense-horizontal-padding","","SIZE","4px"),Ch=Oo.create("--ft-chip-dense-vertical-padding","","SIZE","4px"),kh=[Jr,pt`
         :host {
             display: inline-block;
             max-width: 100%;
@@ -1790,7 +1790,7 @@ const vs=Symbol.for(""),xs=t=>{if(t?.r===vs)return t?._$litStatic$},ws=t=>({_$li
             border: 1px solid ${wh.colorOutline};
             color: ${wh.color};
             ${So(zl.color,wh.rippleColor)};
-            border-radius: calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding));
+            border-radius: var(${ft(wh.borderRadius.name)}, calc(var(--ft-chip-internal-content-height) / 2 + var(--ft-chip-internal-vertical-padding)));
             padding: calc(var(--ft-chip-internal-vertical-padding) - 1px) calc(var(--ft-chip-internal-horizontal-padding) - 1px);
             background-color: ${wh.backgroundColor};
             line-height: var(--ft-chip-internal-content-height);
@@ -1904,9 +1904,10 @@ const vs=Symbol.for(""),xs=t=>{if(t?.r===vs)return t?._$litStatic$},ws=t=>({_$li
             <div class="${He(t)}"
                  aria-label="${this.getLabel()}"
                  tabindex="${this.interactionsOnChip?0:-1}"
-                 @keyup=${this.onKeyUp}>
+                 @keyup=${this.onKeyUp}
+                 part="chip">
                 <ft-ripple ?disabled=${!this.interactionsOnChip}></ft-ripple>
-                <ft-typography variant="body2" element="span" class="ft-chip--label">
+                <ft-typography variant="body2" element="span" class="ft-chip--label" part="label">
                     <slot @slotchange=${this.onSlotchange}></slot>
                 </ft-typography>
                 ${this.internalIcon?this.renderIcon():null}
@@ -1918,10 +1919,11 @@ const vs=Symbol.for(""),xs=t=>{if(t?.r===vs)return t?._$litStatic$},ws=t=>({_$li
                                .iconVariant=${this.iconVariant}
                                icon="${this.internalIcon}"
                                label="${this.iconLabel}"
+                               part="icon-button"
                     ></ft-button>
             `:Jt`
-                    <div class="ft-chip--icon-container ft-no-text-select">
-                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}"></ft-icon>
+                    <div class="ft-chip--icon-container ft-no-text-select" part="icon-container">
+                        <ft-icon .variant=${this.iconVariant} .value="${this.internalIcon}" part="icon"></ft-icon>
                     </div>
             `}onKeyUp(t){this.interactionsOnChip&&["Enter"," "].includes(t.key)&&t.target.click()}onIconKeyUp(t){this.interactionsOnIcon&&["Enter"," "].includes(t.key)&&(t.stopPropagation(),this.dispatchEvent(new Eh))}onIconClick(t){this.interactionsOnIcon&&(t.stopPropagation(),this.dispatchEvent(new Eh))}getLabel(){return this.label||this.textContent}get textContent(){var t,e;return null!==(e=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==e?e:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}get internalIcon(){return this.icon||(this.removable?"close":void 0)}}Ih.elementDefinitions={"ft-ripple":tc,"ft-typography":Nl,"ft-icon":fc,"ft-button":gc},Ih.styles=kh,Nh([Oe({type:Boolean})],Ih.prototype,"highlighted",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"removable",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"disabled",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"clickable",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"iconClickable",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"dense",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"multiLine",void 0),Nh([Oe()],Ih.prototype,"label",void 0),Nh([Oe()],Ih.prototype,"iconLabel",void 0),Nh([Oe()],Ih.prototype,"icon",void 0),Nh([Oe()],Ih.prototype,"iconVariant",void 0),Nh([Oe({type:Boolean})],Ih.prototype,"trailingIcon",void 0),Nh([ke("ft-typography slot")],Ih.prototype,"slottedContent",void 0),yo("ft-chip")(Ih);const Rh={fontSize:Oo.create("--ft-input-label-font-size","","SIZE","14px"),raisedFontSize:Oo.create("--ft-input-label-raised-font-size","","SIZE","11px"),raisedZIndex:Oo.create("--ft-input-label-outlined-raised-z-index","","NUMBER","2"),verticalSpacing:Oo.create("--ft-input-label-vertical-spacing","","SIZE","4px"),horizontalSpacing:Oo.create("--ft-input-label-horizontal-spacing","","SIZE","12px"),labelMaxWidth:Oo.create("--ft-input-label-max-width","","SIZE","100%"),borderColor:Oo.extend("--ft-input-label-border-color","",$i.colorOutline),textColor:Oo.extend("--ft-input-label-text-color","",$i.colorOnSurfaceMedium),disabledTextColor:Oo.extend("--ft-input-label-disabled-text-color","",$i.colorOnSurfaceDisabled),colorSurface:Oo.external($i.colorSurface,"Design system"),borderRadiusS:Oo.external($i.borderRadiusS,"Design system"),colorError:Oo.external($i.colorError,"Design system")},Lh=pt`
     .ft-input-label {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-search-bar",
-  "version": "1.1.53",
+  "version": "1.1.54",
   "description": "Search bar component using Fluid Topics public API",
   "keywords": [
     "Lit"
@@ -19,23 +19,23 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-accordion": "1.1.53",
-    "@fluid-topics/ft-app-context": "1.1.53",
-    "@fluid-topics/ft-button": "1.1.53",
-    "@fluid-topics/ft-chip": "1.1.53",
-    "@fluid-topics/ft-filter": "1.1.53",
-    "@fluid-topics/ft-icon": "1.1.53",
-    "@fluid-topics/ft-select": "1.1.53",
-    "@fluid-topics/ft-size-watcher": "1.1.53",
-    "@fluid-topics/ft-skeleton": "1.1.53",
-    "@fluid-topics/ft-snap-scroll": "1.1.53",
-    "@fluid-topics/ft-tooltip": "1.1.53",
-    "@fluid-topics/ft-typography": "1.1.53",
-    "@fluid-topics/ft-wc-utils": "1.1.53",
+    "@fluid-topics/ft-accordion": "1.1.54",
+    "@fluid-topics/ft-app-context": "1.1.54",
+    "@fluid-topics/ft-button": "1.1.54",
+    "@fluid-topics/ft-chip": "1.1.54",
+    "@fluid-topics/ft-filter": "1.1.54",
+    "@fluid-topics/ft-icon": "1.1.54",
+    "@fluid-topics/ft-select": "1.1.54",
+    "@fluid-topics/ft-size-watcher": "1.1.54",
+    "@fluid-topics/ft-skeleton": "1.1.54",
+    "@fluid-topics/ft-snap-scroll": "1.1.54",
+    "@fluid-topics/ft-tooltip": "1.1.54",
+    "@fluid-topics/ft-typography": "1.1.54",
+    "@fluid-topics/ft-wc-utils": "1.1.54",
     "lit": "3.1.0"
   },
   "devDependencies": {
     "@fluid-topics/public-api": "1.0.62"
   },
-  "gitHead": "9533374bb075edb940b4426a00561f27c34d2f01"
+  "gitHead": "b8c7a07061df6fb5c3c03d96879eda48fb73e5c8"
 }