@fluid-topics/ft-search-bar 0.3.40 → 0.3.43

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

@@ -5,6 +5,7 @@ import { FtInputLabelCssVariables } from "@fluid-topics/ft-input-label/build/ft-
 import { FtSelectCssVariables } from "@fluid-topics/ft-select/build/ft-select.css";
 import { FtSkeletonCssVariables } from "@fluid-topics/ft-skeleton/build/ft-skeleton.css";
 import { FtTooltipCssVariables } from "@fluid-topics/ft-tooltip/build/ft-tooltip.css";
+import { FtSnapScrollCssVariables } from "@fluid-topics/ft-snap-scroll/build/ft-snap-scroll.css";
 export const FtSearchBarCssVariables = {
     height: FtCssVariableFactory.create("--ft-search-bar-height", "SIZE", "38px"),
     borderRadius: FtCssVariableFactory.extend("--ft-search-bar-border-radius", designSystemVariables.borderRadiusS),
@@ -245,7 +246,7 @@ export const facetsCss = css `
     .ft-search-bar--desktop-menu .ft-search-bar--filters-container {
         display: block;
         height: ${FtSearchBarCssVariables.desktopFiltersHeight};
-        --ft-snap-scroll-gap: 16px;
+        ${setVariable(FtSnapScrollCssVariables.gap, "16px")};
     }
 
     .ft-search-bar--desktop-menu ft-filter {
@@ -255,8 +256,32 @@ export const facetsCss = css `
         max-width: 250px;
     }
 
+    .ft-search-bar--desktop-menu [data-filters-count="1"] ft-filter {
+        max-width: 100%;
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="2"] ft-filter {
+        max-width: calc(50% - ${FtSnapScrollCssVariables.gap} / 2);
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="3"] ft-filter {
+        max-width: max(250px, calc(33% - 2 * ${FtSnapScrollCssVariables.gap} / 3));
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="4"] ft-filter {
+        max-width: max(250px, calc(25% - 3 * ${FtSnapScrollCssVariables.gap} / 4));
+    }
+
     .ft-search-bar--hierarchical-filter {
-        width: 250px;
+        min-width: 250px;
+        width: 33%;
+    }
+
+    .ft-search-bar--desktop-menu ft-filter::part(label) {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
     }
 
     .ft-search-bar--mobile .ft-search-bar--filters-container {

package/build/ft-search-bar.js

@@ -314,7 +314,8 @@ export class FtSearchBar extends FtLitElement {
             <ft-snap-scroll horizontal limitSize controls
                             class="ft-search-bar--filters-container"
                             part="filters-container"
-                            exportpartsPrefix="filters-container">
+                            exportpartsPrefix="filters-container"
+                            data-filters-count="${this.facets.length + (this.hasLocaleSelector() ? 1 : 0)}">
                 ${this.hasLocaleSelector() ? html `
                     <ft-filter
                             id="ft:locale"

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

@@ -1055,114 +1055,118 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
                 ></ft-button>
             </div>
         `}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new fi(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}}di.elementDefinitions={"ft-button":Te},di.styles=hi,pi([o.property({type:Boolean})],di.prototype,"horizontal",void 0),pi([o.property({type:Boolean})],di.prototype,"hideScrollbar",void 0),pi([o.property({type:Boolean})],di.prototype,"controls",void 0),pi([o.property({type:Boolean})],di.prototype,"limitSize",void 0),pi([o.state()],di.prototype,"elements",void 0),pi([o.state()],di.prototype,"currentElement",void 0),pi([o.state()],di.prototype,"withScroll",void 0),pi([o.state()],di.prototype,"startReached",void 0),pi([o.state()],di.prototype,"endReached",void 0),pi([o.query(".ft-snap-scroll--content")],di.prototype,"contentSlot",void 0),e.customElement("ft-snap-scroll")(di);const ui=e.FtCssVariableFactory.external(e.designSystemVariables.colorOutline,"Design system"),bi=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurface,"Design system"),vi=e.FtCssVariableFactory.external(e.designSystemVariables.colorOnSurfaceMedium,"Design system"),gi=e.FtCssVariableFactory.external(e.designSystemVariables.colorPrimary,"Design system"),xi=e.FtCssVariableFactory.external(e.designSystemVariables.colorSurface,"Design system"),yi=e.FtCssVariableFactory.external(e.designSystemVariables.transitionDuration,"Design system"),mi=e.FtCssVariableFactory.external(e.designSystemVariables.transitionTimingFunction,"Design system"),$i=[Wt,i.css`
-            :host {
-                display: flex;
-                max-height: 100%;
-                max-width: 100%;
-            }
+        :host {
+            display: flex;
+            max-height: 100%;
+            max-width: 100%;
+        }
 
-            .ft-filter--container {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                max-height: 100%;
-                max-width: 100%;
-                color: ${bi};
-            }
+        .ft-filter--container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            max-height: 100%;
+            max-width: 100%;
+            color: ${bi};
+        }
 
-            .ft-filter--header {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 4px;
-                flex-shrink: 0;
-                padding: 0 10px;
-                margin-bottom: 8px;
-                ${e.setVariable(et.fontSize,"14px")};
-            }
+        .ft-filter--header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+            flex-shrink: 0;
+            padding: 0 10px;
+            margin-bottom: 8px;
+            ${e.setVariable(et.fontSize,"14px")};
+        }
 
-            .ft-filter--header ft-button {
-                flex-shrink: 0;
-                margin-left: auto;
-                ${e.setVariable(Le.iconSize,"18px")};
-            }
+        .ft-filter--header ft-button {
+            flex-shrink: 0;
+            margin-left: auto;
+            ${e.setVariable(Le.iconSize,"18px")};
+        }
 
-            .ft-filter--label {
-                display: block;
-                flex-shrink: 1;
-                flex-grow: 1;
-                word-break: break-word;
-                ${e.setVariable(et.lineHeight,"22px")};
-                ${e.setVariable(et.fontWeight,"bold")};
-            }
+        .ft-filter--label {
+            display: block;
+            flex-shrink: 1;
+            flex-grow: 1;
+            word-break: break-word;
+            ${e.setVariable(et.lineHeight,"22px")};
+            ${e.setVariable(et.fontWeight,"bold")};
+        }
 
-            .ft-filter--filter {
-                flex-shrink: 0;
-                display: flex;
-                margin: 0;
-                margin-bottom: 8px;
-                padding: 0 10px;
-                overflow: hidden;
-                height: 32px;
-                transition: height ${yi} ${mi},
-                margin ${yi} ${mi};
-                transition-delay: 500ms;
-            }
+        .ft-filter--filter {
+            flex-shrink: 0;
+            display: flex;
+            margin: 0;
+            margin-bottom: 8px;
+            padding: 0 10px;
+            overflow: hidden;
+            height: 32px;
+            transition: height ${yi} ${mi},
+            margin ${yi} ${mi};
+            transition-delay: 500ms;
+        }
 
-            .ft-filter--filter[hidden] {
-                height: 0;
-                margin-bottom: 0;
-            }
+        .ft-filter--filter[hidden] {
+            height: 0;
+            margin-bottom: 0;
+        }
 
-            input {
-                display: block;
-                width: 100%;
-                border-radius: 4px;
-                border: 1px solid ${ui};
-                padding: 4px;
-                background-color: ${xi};
-                color: ${bi};
-                outline-color: ${gi};
-            }
+        input {
+            display: block;
+            width: 100%;
+            border-radius: 4px;
+            border: 1px solid ${ui};
+            padding: 4px;
+            background-color: ${xi};
+            color: ${bi};
+            outline-color: ${gi};
+        }
 
-            input::placeholder {
-                color: ${vi};
-            }
+        input::placeholder {
+            color: ${vi};
+        }
 
-            .ft-filter--values {
-                flex-grow: 1;
-                flex-shrink: 1;
-                max-width: 100%;
-                overflow-x: hidden;
-                overflow-y: auto;
-            }
+        input:placeholder-shown {
+            text-overflow: ellipsis;
+        }
 
-            .ft-filter--separator {
-                border-top: 1px solid ${ui};
-                margin: 4px 10px;
-            }
+        .ft-filter--values {
+            flex-grow: 1;
+            flex-shrink: 1;
+            max-width: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
 
-            .ft-filter--levels-container {
-                position: relative;
-                overflow: hidden;
-            }
+        .ft-filter--separator {
+            border-top: 1px solid ${ui};
+            margin: 4px 10px;
+        }
 
-            .ft-filter--levels {
-                position: relative;
-                overflow: hidden;
-            }
+        .ft-filter--levels-container {
+            position: relative;
+            overflow: hidden;
+        }
 
-            ft-filter-level {
-                width: 100%;
-            }
+        .ft-filter--levels {
+            position: relative;
+            overflow: hidden;
+        }
 
-            .ft-filter--level-left {
-                height: 0;
-            }
+        ft-filter-level {
+            width: 100%;
+        }
 
-            slot {
-                display: none;
-            }
-        `];var wi=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class ki extends CustomEvent{constructor(t){super("change",{detail:t})}}class Si extends e.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e.Debouncer(300),this.changeDebouncer=new e.Debouncer(10)}get flatOptions(){return ee(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const o=this.flatOptions.some((t=>t.selected));let s=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return i.html`
+        .ft-filter--level-left {
+            height: 0;
+        }
+
+        slot {
+            display: none;
+        }
+    `];var wi=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class ki extends CustomEvent{constructor(t){super("change",{detail:t})}}class Si extends e.FtLitElement{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e.Debouncer(300),this.changeDebouncer=new e.Debouncer(10)}get flatOptions(){return ee(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const o=this.flatOptions.some((t=>t.selected)),s=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e,r=this.filterPlaceHolder.replace("{0}",this.label);return i.html`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||o?i.html`
@@ -1181,7 +1185,8 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
                            part="input"
                            class="ft-typography--caption"
                            ?disabled=${!s}
-                           placeholder="${this.filterPlaceHolder.replace("{0}",this.label)}"
+                           placeholder="${r}"
+                           size="${s?r.length:0}"
                            @search=${this.onFilterChange}
                            @keyup=${this.onFilterChange}>
                 </div>
@@ -2024,7 +2029,7 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
     .ft-search-bar--desktop-menu .ft-search-bar--filters-container {
         display: block;
         height: ${oo.desktopFiltersHeight};
-        --ft-snap-scroll-gap: 16px;
+        ${e.setVariable(ci.gap,"16px")};
     }
 
     .ft-search-bar--desktop-menu ft-filter {
@@ -2034,8 +2039,32 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
         max-width: 250px;
     }
 
+    .ft-search-bar--desktop-menu [data-filters-count="1"] ft-filter {
+        max-width: 100%;
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="2"] ft-filter {
+        max-width: calc(50% - ${ci.gap} / 2);
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="3"] ft-filter {
+        max-width: max(250px, calc(33% - 2 * ${ci.gap} / 3));
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="4"] ft-filter {
+        max-width: max(250px, calc(25% - 3 * ${ci.gap} / 4));
+    }
+
     .ft-search-bar--hierarchical-filter {
-        width: 250px;
+        min-width: 250px;
+        width: 33%;
+    }
+
+    .ft-search-bar--desktop-menu ft-filter::part(label) {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
     }
 
     .ft-search-bar--mobile .ft-search-bar--filters-container {
@@ -2499,7 +2528,8 @@ const q=Symbol.for(""),W=t=>{if((null==t?void 0:t.r)===q)return null==t?void 0:t
             <ft-snap-scroll horizontal limitSize controls
                             class="ft-search-bar--filters-container"
                             part="filters-container"
-                            exportpartsPrefix="filters-container">
+                            exportpartsPrefix="filters-container"
+                            data-filters-count="${this.facets.length+(this.hasLocaleSelector()?1:0)}">
                 ${this.hasLocaleSelector()?i.html`
                     <ft-filter
                             id="ft:locale"

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

@@ -1187,114 +1187,118 @@ class Si extends Rt{constructor(t){if(super(t),this.it=Q,t.type!==Nt)throw Error
                 ></ft-button>
             </div>
         `}updated(t){var e;super.updated(t),this.contentSlot&&(this.resizeObserver.observe(this.contentSlot),this.listenedContainer!==this.contentSlot&&(this.listenedContainer&&this.listenedContainer.removeEventListener("scroll",this.updateScrollCallback),this.listenedContainer=this.contentSlot,null===(e=this.listenedContainer)||void 0===e||e.addEventListener("scroll",this.updateScrollCallback))),t.has("horizontal")&&(this.horizontal?(this.offsetAttribute="offsetLeft",this.scrollAttribute="scrollLeft",this.sizeAttribute="clientWidth",this.scrollSizeAttribute="scrollWidth"):(this.offsetAttribute="offsetTop",this.scrollAttribute="scrollTop",this.sizeAttribute="clientHeight",this.scrollSizeAttribute="scrollHeight")),t.has("currentElement")&&this.dispatchEvent(new vo(this.currentElement,this.elements[this.currentElement]))}onScroll(){this.scrollDebouncer.run((()=>this.snap())),this.scheduleUpdateScroll()}snap(){let t=this.closestElementFromStart();if(null!=t){const e=this.getDistanceFromStart(t);Math.abs(this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]-this.contentSlot[this.scrollSizeAttribute])<e&&(t=this.lastElement),this.scrollToElement(t)}}scrollToElement(t){var e,i;t&&(this.horizontal?null===(e=this.contentSlot)||void 0===e||e.scrollTo({left:this.getOffset(t)-this.controlsSize,behavior:"smooth"}):null===(i=this.contentSlot)||void 0===i||i.scrollTo({top:this.getOffset(t)-this.controlsSize,behavior:"smooth"}),this.currentElement=this.elements.indexOf(t))}onSlotChange(){var t,e;this.elements=null!==(e=null===(t=this.contentSlot)||void 0===t?void 0:t.assignedElements().map((t=>t)))&&void 0!==e?e:[],this.scheduleUpdateScroll()}closestElementFromStart(){return this.elements[this.closestIndexFromStart()]}closestIndexFromStart(){let t=-1;for(let e=0;e<this.elements.length;e++)(t<0||this.getDistanceFromStart(this.elements[e])<this.getDistanceFromStart(this.elements[t]))&&(t=e);return t}scheduleUpdateScroll(){this.updateScrollDebouncer.run((()=>this.updateScroll()))}updateScroll(){null!=this.contentSlot?(this.withScroll=this.contentSlot[this.scrollSizeAttribute]>this.contentSlot[this.sizeAttribute],this.startReached=0===this.contentSlot[this.scrollAttribute],this.endReached=this.contentSlot[this.scrollAttribute]+this.contentSlot[this.sizeAttribute]+1>=this.contentSlot[this.scrollSizeAttribute]):(this.withScroll=!1,this.startReached=!0,this.endReached=!0)}get lastElement(){return this.elements[this.elements.length-1]}get firstElementOffset(){let t=this.elements[0];return t?t[this.offsetAttribute]:0}get controlsSize(){return this.controls?36:0}get nextSize(){return this.endReached?0:this.controlsSize}get prevSize(){return this.startReached?0:this.controlsSize}getOffset(t){return t[this.offsetAttribute]-this.firstElementOffset}getDistanceFromStart(t){const e=t===this.elements[0]?0:this.controlsSize;return Math.abs(this.getOffset(t)-this.contentSlot[this.scrollAttribute]-e)}}go.elementDefinitions={"ft-button":_i},go.styles=uo,bo([o({type:Boolean})],go.prototype,"horizontal",void 0),bo([o({type:Boolean})],go.prototype,"hideScrollbar",void 0),bo([o({type:Boolean})],go.prototype,"controls",void 0),bo([o({type:Boolean})],go.prototype,"limitSize",void 0),bo([s()],go.prototype,"elements",void 0),bo([s()],go.prototype,"currentElement",void 0),bo([s()],go.prototype,"withScroll",void 0),bo([s()],go.prototype,"startReached",void 0),bo([s()],go.prototype,"endReached",void 0),bo([n(".ft-snap-scroll--content")],go.prototype,"contentSlot",void 0),h("ft-snap-scroll")(go);const xo=xt.external(mt.colorOutline,"Design system"),yo=xt.external(mt.colorOnSurface,"Design system"),mo=xt.external(mt.colorOnSurfaceMedium,"Design system"),$o=xt.external(mt.colorPrimary,"Design system"),wo=xt.external(mt.colorSurface,"Design system"),ko=xt.external(mt.transitionDuration,"Design system"),So=xt.external(mt.transitionTimingFunction,"Design system"),Oo=[qe,y`
-            :host {
-                display: flex;
-                max-height: 100%;
-                max-width: 100%;
-            }
+        :host {
+            display: flex;
+            max-height: 100%;
+            max-width: 100%;
+        }
 
-            .ft-filter--container {
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-                max-height: 100%;
-                max-width: 100%;
-                color: ${yo};
-            }
+        .ft-filter--container {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            max-height: 100%;
+            max-width: 100%;
+            color: ${yo};
+        }
 
-            .ft-filter--header {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 4px;
-                flex-shrink: 0;
-                padding: 0 10px;
-                margin-bottom: 8px;
-                ${yt(ee.fontSize,"14px")};
-            }
+        .ft-filter--header {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 4px;
+            flex-shrink: 0;
+            padding: 0 10px;
+            margin-bottom: 8px;
+            ${yt(ee.fontSize,"14px")};
+        }
 
-            .ft-filter--header ft-button {
-                flex-shrink: 0;
-                margin-left: auto;
-                ${yt(ji.iconSize,"18px")};
-            }
+        .ft-filter--header ft-button {
+            flex-shrink: 0;
+            margin-left: auto;
+            ${yt(ji.iconSize,"18px")};
+        }
 
-            .ft-filter--label {
-                display: block;
-                flex-shrink: 1;
-                flex-grow: 1;
-                word-break: break-word;
-                ${yt(ee.lineHeight,"22px")};
-                ${yt(ee.fontWeight,"bold")};
-            }
+        .ft-filter--label {
+            display: block;
+            flex-shrink: 1;
+            flex-grow: 1;
+            word-break: break-word;
+            ${yt(ee.lineHeight,"22px")};
+            ${yt(ee.fontWeight,"bold")};
+        }
 
-            .ft-filter--filter {
-                flex-shrink: 0;
-                display: flex;
-                margin: 0;
-                margin-bottom: 8px;
-                padding: 0 10px;
-                overflow: hidden;
-                height: 32px;
-                transition: height ${ko} ${So},
-                margin ${ko} ${So};
-                transition-delay: 500ms;
-            }
+        .ft-filter--filter {
+            flex-shrink: 0;
+            display: flex;
+            margin: 0;
+            margin-bottom: 8px;
+            padding: 0 10px;
+            overflow: hidden;
+            height: 32px;
+            transition: height ${ko} ${So},
+            margin ${ko} ${So};
+            transition-delay: 500ms;
+        }
 
-            .ft-filter--filter[hidden] {
-                height: 0;
-                margin-bottom: 0;
-            }
+        .ft-filter--filter[hidden] {
+            height: 0;
+            margin-bottom: 0;
+        }
 
-            input {
-                display: block;
-                width: 100%;
-                border-radius: 4px;
-                border: 1px solid ${xo};
-                padding: 4px;
-                background-color: ${wo};
-                color: ${yo};
-                outline-color: ${$o};
-            }
+        input {
+            display: block;
+            width: 100%;
+            border-radius: 4px;
+            border: 1px solid ${xo};
+            padding: 4px;
+            background-color: ${wo};
+            color: ${yo};
+            outline-color: ${$o};
+        }
 
-            input::placeholder {
-                color: ${mo};
-            }
+        input::placeholder {
+            color: ${mo};
+        }
 
-            .ft-filter--values {
-                flex-grow: 1;
-                flex-shrink: 1;
-                max-width: 100%;
-                overflow-x: hidden;
-                overflow-y: auto;
-            }
+        input:placeholder-shown {
+            text-overflow: ellipsis;
+        }
 
-            .ft-filter--separator {
-                border-top: 1px solid ${xo};
-                margin: 4px 10px;
-            }
+        .ft-filter--values {
+            flex-grow: 1;
+            flex-shrink: 1;
+            max-width: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
 
-            .ft-filter--levels-container {
-                position: relative;
-                overflow: hidden;
-            }
+        .ft-filter--separator {
+            border-top: 1px solid ${xo};
+            margin: 4px 10px;
+        }
 
-            .ft-filter--levels {
-                position: relative;
-                overflow: hidden;
-            }
+        .ft-filter--levels-container {
+            position: relative;
+            overflow: hidden;
+        }
 
-            ft-filter-level {
-                width: 100%;
-            }
+        .ft-filter--levels {
+            position: relative;
+            overflow: hidden;
+        }
 
-            .ft-filter--level-left {
-                height: 0;
-            }
+        ft-filter-level {
+            width: 100%;
+        }
 
-            slot {
-                display: none;
-            }
-        `];var Co=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Eo extends CustomEvent{constructor(t){super("change",{detail:t})}}class zo extends wt{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e(300),this.changeDebouncer=new e(10)}get flatOptions(){return ei(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const i=this.flatOptions.some((t=>t.selected));let o=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e;return X`
+        .ft-filter--level-left {
+            height: 0;
+        }
+
+        slot {
+            display: none;
+        }
+    `];var Co=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};class Eo extends CustomEvent{constructor(t){super("change",{detail:t})}}class zo extends wt{constructor(){super(...arguments),this.id="",this.label="",this.filterPlaceHolder="Filter {0}",this.clearButtonLabel="Clear",this.moreValuesButtonLabel="More",this.noValuesLabel="No values available",this.options=[],this.multivalued=!1,this.disabled=!1,this.raiseSelectedOptions=!1,this.displayedValuesLimit=0,this.hideClearButton=!1,this.withScroll=!1,this.filter="",this.displayedLevels=[],this.scrollResizeObserver=new ResizeObserver((()=>this.updateScroll())),this.levelsScrollDebouncer=new e(300),this.changeDebouncer=new e(10)}get flatOptions(){return ei(this.options,(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]}))}render(){var t,e;const i=this.flatOptions.some((t=>t.selected)),o=this.withScroll||this.filter||null!==(e=null===(t=this.lastLevel)||void 0===t?void 0:t.hasHiddenValues)&&void 0!==e&&e,s=this.filterPlaceHolder.replace("{0}",this.label);return X`
             <div class="ft-filter--container ${this.disabled?"ft-filter--disabled":""}"
                  part="container">
                 ${this.label||i?X`
@@ -1313,7 +1317,8 @@ class Si extends Rt{constructor(t){if(super(t),this.it=Q,t.type!==Nt)throw Error
                            part="input"
                            class="ft-typography--caption"
                            ?disabled=${!o}
-                           placeholder="${this.filterPlaceHolder.replace("{0}",this.label)}"
+                           placeholder="${s}"
+                           size="${o?s.length:0}"
                            @search=${this.onFilterChange}
                            @keyup=${this.onFilterChange}>
                 </div>
@@ -2156,7 +2161,7 @@ class Si extends Rt{constructor(t){if(super(t),this.it=Q,t.type!==Nt)throw Error
     .ft-search-bar--desktop-menu .ft-search-bar--filters-container {
         display: block;
         height: ${ls.desktopFiltersHeight};
-        --ft-snap-scroll-gap: 16px;
+        ${yt(fo.gap,"16px")};
     }
 
     .ft-search-bar--desktop-menu ft-filter {
@@ -2166,8 +2171,32 @@ class Si extends Rt{constructor(t){if(super(t),this.it=Q,t.type!==Nt)throw Error
         max-width: 250px;
     }
 
+    .ft-search-bar--desktop-menu [data-filters-count="1"] ft-filter {
+        max-width: 100%;
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="2"] ft-filter {
+        max-width: calc(50% - ${fo.gap} / 2);
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="3"] ft-filter {
+        max-width: max(250px, calc(33% - 2 * ${fo.gap} / 3));
+    }
+
+    .ft-search-bar--desktop-menu [data-filters-count="4"] ft-filter {
+        max-width: max(250px, calc(25% - 3 * ${fo.gap} / 4));
+    }
+
     .ft-search-bar--hierarchical-filter {
-        width: 250px;
+        min-width: 250px;
+        width: 33%;
+    }
+
+    .ft-search-bar--desktop-menu ft-filter::part(label) {
+        display: -webkit-box;
+        overflow: hidden;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
     }
 
     .ft-search-bar--mobile .ft-search-bar--filters-container {
@@ -2631,7 +2660,8 @@ class Si extends Rt{constructor(t){if(super(t),this.it=Q,t.type!==Nt)throw Error
             <ft-snap-scroll horizontal limitSize controls
                             class="ft-search-bar--filters-container"
                             part="filters-container"
-                            exportpartsPrefix="filters-container">
+                            exportpartsPrefix="filters-container"
+                            data-filters-count="${this.facets.length+(this.hasLocaleSelector()?1:0)}">
                 ${this.hasLocaleSelector()?X`
                     <ft-filter
                             id="ft:locale"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-search-bar",
-  "version": "0.3.40",
+  "version": "0.3.43",
   "description": "Search bar component using Fluid Topics public API",
   "keywords": [
     "Lit"
@@ -19,18 +19,18 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-accordion": "0.3.40",
-    "@fluid-topics/ft-button": "0.3.40",
-    "@fluid-topics/ft-chip": "0.3.40",
-    "@fluid-topics/ft-filter": "0.3.40",
-    "@fluid-topics/ft-icon": "0.3.40",
-    "@fluid-topics/ft-select": "0.3.40",
-    "@fluid-topics/ft-size-watcher": "0.3.40",
-    "@fluid-topics/ft-skeleton": "0.3.40",
-    "@fluid-topics/ft-snap-scroll": "0.3.40",
-    "@fluid-topics/ft-tooltip": "0.3.40",
-    "@fluid-topics/ft-typography": "0.3.40",
-    "@fluid-topics/ft-wc-utils": "0.3.40",
+    "@fluid-topics/ft-accordion": "0.3.43",
+    "@fluid-topics/ft-button": "0.3.43",
+    "@fluid-topics/ft-chip": "0.3.43",
+    "@fluid-topics/ft-filter": "0.3.43",
+    "@fluid-topics/ft-icon": "0.3.43",
+    "@fluid-topics/ft-select": "0.3.43",
+    "@fluid-topics/ft-size-watcher": "0.3.43",
+    "@fluid-topics/ft-skeleton": "0.3.43",
+    "@fluid-topics/ft-snap-scroll": "0.3.43",
+    "@fluid-topics/ft-tooltip": "0.3.43",
+    "@fluid-topics/ft-typography": "0.3.43",
+    "@fluid-topics/ft-wc-utils": "0.3.43",
     "lit": "2.2.8"
   },
   "devDependencies": {
@@ -39,5 +39,5 @@
   "peerDependencies": {
     "@fluid-topics/public-api": "1.0.27"
   },
-  "gitHead": "00f0bb16ca98f5ade4f3d9a1c3d1dce54eae97b7"
+  "gitHead": "42962910ff06ebfa42e961d1567ee771c517ccb7"
 }