@fluid-topics/ft-filter 0.2.17 → 0.2.20

package/build/ft-filter-level.js

@@ -130,6 +130,7 @@ export class FtFilterLevel extends FtLitElement {
         return html `
             <ft-checkbox name="${this.id}"
                          part="multivalued-option"
+                         data-value="${option.value}"
                          .checked=${option.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${flatDeep((_a = option.subOptions) !== null && _a !== void 0 ? _a : [], o => { var _a; return (_a = o.subOptions) !== null && _a !== void 0 ? _a : []; }).some(o => o.selected)}
@@ -142,12 +143,12 @@ export class FtFilterLevel extends FtLitElement {
         return html `
             <ft-radio name="${this.id + Math.round(Math.random() * 1000000)}"
                       part="monovalued-option"
+                      data-value="${option.value}"
                       .checked=${option.selected}
-                      ?disabled=${this.disabled}
+                      .disabled=${this.disabled}
                       @click=${(e) => this.optionsChanged(e, option)}
                       @keyup=${(e) => this.onRadioKeyUp(e, option)}
                       @change=${(e) => e.stopPropagation()}>
-
                 ${option.label}
             </ft-radio>
         `;
@@ -236,8 +237,8 @@ FtFilterLevel.styles = [
                 margin-left: -10px;
                 word-break: break-word;
             }
-            
-            .ft-filter-level--no-values {    
+
+            .ft-filter-level--no-values {
                 margin: 10px 0;
                 color: ${FtFilterLevelCssVariables.colorOnSurfaceMedium};
             }

package/build/ft-filter.js

@@ -268,7 +268,6 @@ FtFilter.styles = [
                 max-height: 100%;
                 max-width: 100%;
                 color: ${FtFilterCssVariables.colorOnSurface};
-                background: ${FtFilterCssVariables.colorSurface};
             }
 
             .ft-filter--header {
@@ -321,10 +320,14 @@ FtFilter.styles = [
                 border: 1px solid ${FtFilterCssVariables.colorOutline};
                 padding: 4px;
                 background-color: ${FtFilterCssVariables.colorSurface};
-                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+                color: ${FtFilterCssVariables.colorOnSurface};
                 outline-color: ${FtFilterCssVariables.colorPrimary};
             }
 
+            input::placeholder {
+                color: ${FtFilterCssVariables.colorOnSurfaceMedium};
+            }
+
             .ft-filter--values {
                 flex-grow: 1;
                 flex-shrink: 1;

package/build/ft-filter.light.js

@@ -392,7 +392,7 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
                     box-shadow: 0px 0px 0px transparent;
                     border: 0px solid transparent;
                     text-shadow: 0px 0px 0px transparent;
-                    font-size: inherit;
+                    font-size: 16px;
                 }
 
                 button:hover {
@@ -420,7 +420,6 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
                     box-sizing: border-box;
                     border: none;
                     pointer-events: auto;
-                    line-height: 0;
 
                     --ft-button-internal-font-size: ${Mi.fontSize};
                     --ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
@@ -640,7 +639,7 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
         .ft-checkbox--indeterminate .ft-checkbox--checkmark {
             opacity: 1;
         }
-    `,Ai([o.property()],Vi.prototype,"name",void 0),Ai([o.property({type:Boolean})],Vi.prototype,"checked",void 0),Ai([o.property({type:Boolean})],Vi.prototype,"indeterminate",void 0),Ai([o.property({type:Boolean})],Vi.prototype,"disabled",void 0),Ai([o.query(".ft-checkbox")],Vi.prototype,"container",void 0),Ai([o.query("ft-ripple")],Vi.prototype,"ripple",void 0),i.customElement("ft-checkbox")(Vi);var Wi=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const Pi=i.FtCssVariable.extend("--ft-radio-text-color",i.designSystemVariables.colorOnSurfaceHigh),Zi=i.FtCssVariable.external(i.designSystemVariables.colorPrimary,"Design system"),Ki=(i.FtCssVariable.external(i.designSystemVariables.colorOnPrimary,"Design system"),i.FtCssVariable.extend("--ft-radio-border-color",i.designSystemVariables.colorOnSurfaceMedium)),Gi=i.FtCssVariable.external(i.designSystemVariables.colorOnSurfaceDisabled,"Design system");class qi extends CustomEvent{constructor(t,i){super("change",{detail:{value:t,checked:i},bubbles:!0,composed:!0})}}class Xi extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return e.html`
+    `,Ai([o.property()],Vi.prototype,"name",void 0),Ai([o.property({type:Boolean,reflect:!0})],Vi.prototype,"checked",void 0),Ai([o.property({type:Boolean})],Vi.prototype,"indeterminate",void 0),Ai([o.property({type:Boolean})],Vi.prototype,"disabled",void 0),Ai([o.query(".ft-checkbox")],Vi.prototype,"container",void 0),Ai([o.query("ft-ripple")],Vi.prototype,"ripple",void 0),i.customElement("ft-checkbox")(Vi);var Wi=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const Pi=i.FtCssVariable.extend("--ft-radio-text-color",i.designSystemVariables.colorOnSurfaceHigh),Zi=i.FtCssVariable.external(i.designSystemVariables.colorPrimary,"Design system"),Ki=(i.FtCssVariable.external(i.designSystemVariables.colorOnPrimary,"Design system"),i.FtCssVariable.extend("--ft-radio-border-color",i.designSystemVariables.colorOnSurfaceMedium)),Gi=i.FtCssVariable.external(i.designSystemVariables.colorOnSurfaceDisabled,"Design system");class qi extends CustomEvent{constructor(t,i){super("change",{detail:{value:t,checked:i},bubbles:!0,composed:!0})}}class Xi extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return e.html`
             <div class="${r.classMap(t)}">
                 <div class="ft-radio--box-container">
                     <input id="radio-button"
@@ -744,7 +743,7 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
         .ft-radio--disabled .ft-radio--box:after {
             background-color: ${Gi};
         }
-    `,Wi([o.property()],Xi.prototype,"value",void 0),Wi([o.property()],Xi.prototype,"name",void 0),Wi([o.property({type:Boolean})],Xi.prototype,"checked",void 0),Wi([o.property({type:Boolean})],Xi.prototype,"disabled",void 0),Wi([o.query(".ft-radio")],Xi.prototype,"container",void 0),Wi([o.query("ft-ripple")],Xi.prototype,"ripple",void 0),Wi([o.query("input")],Xi.prototype,"input",void 0);var Yi=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Ji extends i.FtLitElement{constructor(){super(...arguments),this.name=""}render(){return e.html`
+    `,Wi([o.property()],Xi.prototype,"value",void 0),Wi([o.property()],Xi.prototype,"name",void 0),Wi([o.property({type:Boolean,reflect:!0})],Xi.prototype,"checked",void 0),Wi([o.property({type:Boolean})],Xi.prototype,"disabled",void 0),Wi([o.query(".ft-radio")],Xi.prototype,"container",void 0),Wi([o.query("ft-ripple")],Xi.prototype,"ripple",void 0),Wi([o.query("input")],Xi.prototype,"input",void 0);var Yi=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};class Ji extends i.FtLitElement{constructor(){super(...arguments),this.name=""}render(){return e.html`
             <slot @slotchange=${this.onSlotChange}
                   @change=${this.onChange}
                   @keydown=${this.onKeyDown}
@@ -800,6 +799,7 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
         `}goBackOnKeyPress(t){"Enter"!==t.key&&" "!==t.key||this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}goBackOnClick(t){t.stopPropagation(),t.preventDefault(),this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}displayMore(){this.displayedPages++}buildMultiValuedOption(t){var i;return e.html`
             <ft-checkbox name="${this.id}"
                          part="multivalued-option"
+                         data-value="${t.value}"
                          .checked=${t.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${si(null!==(i=t.subOptions)&&void 0!==i?i:[],(t=>{var i;return null!==(i=t.subOptions)&&void 0!==i?i:[]})).some((t=>t.selected))}
@@ -809,12 +809,12 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
         `}buildMonoValuedOption(t){return e.html`
             <ft-radio name="${this.id+Math.round(1e6*Math.random())}"
                       part="monovalued-option"
+                      data-value="${t.value}"
                       .checked=${t.selected}
-                      ?disabled=${this.disabled}
+                      .disabled=${this.disabled}
                       @click=${i=>this.optionsChanged(i,t)}
                       @keyup=${i=>this.onRadioKeyUp(i,t)}
                       @change=${t=>t.stopPropagation()}>
-
                 ${t.label}
             </ft-radio>
         `}onRadioKeyUp(t,i){i.selected&&" "===t.key&&this.optionsChanged(t,i)}optionsChanged(t,i){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:i}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}ie.elementDefinitions={"ft-button":Ii,"ft-ripple":ui,"ft-typography":oi,"ft-checkbox":Vi,"ft-icon":ji,"ft-radio":Xi},ie.styles=[e.css`
@@ -878,8 +878,8 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
                 margin-left: -10px;
                 word-break: break-word;
             }
-            
-            .ft-filter-level--no-values {    
+
+            .ft-filter-level--no-values {
                 margin: 10px 0;
                 color: ${te.colorOnSurfaceMedium};
             }
@@ -1115,7 +1115,6 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
                 max-height: 100%;
                 max-width: 100%;
                 color: ${le.colorOnSurface};
-                background: ${le.colorSurface};
             }
 
             .ft-filter--header {
@@ -1168,10 +1167,14 @@ const H=Symbol.for(""),U=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===
                 border: 1px solid ${le.colorOutline};
                 padding: 4px;
                 background-color: ${le.colorSurface};
-                color: ${le.colorOnSurfaceMedium};
+                color: ${le.colorOnSurface};
                 outline-color: ${le.colorPrimary};
             }
 
+            input::placeholder {
+                color: ${le.colorOnSurfaceMedium};
+            }
+
             .ft-filter--values {
                 flex-grow: 1;
                 flex-shrink: 1;

package/build/ft-filter.min.js

@@ -82,7 +82,7 @@ var ct,pt;null==ht||ht(G,et),(null!==(N=globalThis.litHtmlVersions)&&void 0!==N?
                 <style>${t}</style>
             `))}
             ${this.getTemplate()}
-        `}updated(t){super.updated(t),setTimeout((()=>{var e;this.contentAvailableCallback(t),(null===(e=this.exportpartsPrefix)||void 0===e?void 0:e.trim())?this.setExportpartsAttribute([this.exportpartsPrefix]):null!=this.exportpartsPrefixes&&this.exportpartsPrefixes.length>0&&this.setExportpartsAttribute(this.exportpartsPrefixes)}),0)}setExportpartsAttribute(t){var e,i,o,s,n,r;let l=[];for(let a of t){let t=null==a?void 0:a.trim();if(t)for(let a of null!==(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelectorAll("[part],[exportparts]"))&&void 0!==i?i:[]){let e=null!==(s=null===(o=a.getAttribute("part"))||void 0===o?void 0:o.split(" "))&&void 0!==s?s:[],i=null!==(r=null===(n=a.getAttribute("exportparts"))||void 0===n?void 0:n.split(",").map((t=>t.split(":")[1])))&&void 0!==r?r:[];const h=[...new Set([...e,...i])].filter((t=>null!=t&&t.trim().length>0)).map((t=>t.trim())).map((e=>`${e}:${t}--${e}`));l.push(...h)}}this.setAttribute("exportparts",l.join(", "))}contentAvailableCallback(t){}}xt([o()],yt.prototype,"exportpartsPrefix",void 0),xt([p([])],yt.prototype,"exportpartsPrefixes",void 0);const gt=x`
+        `}updated(t){super.updated(t),setTimeout((()=>{var e;this.contentAvailableCallback(t),(null===(e=this.exportpartsPrefix)||void 0===e?void 0:e.trim())?this.setExportpartsAttribute([this.exportpartsPrefix]):null!=this.exportpartsPrefixes&&this.exportpartsPrefixes.length>0&&this.setExportpartsAttribute(this.exportpartsPrefixes)}),0)}setExportpartsAttribute(t){var e,i,o,s,n,r;const l=t=>null!=t&&t.trim().length>0,a=t.filter(l).map((t=>t.trim()));if(0===a.length)return void this.removeAttribute("exportparts");const h=new Set;for(let t of null!==(i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelectorAll("[part],[exportparts]"))&&void 0!==i?i:[]){const e=null!==(s=null===(o=t.getAttribute("part"))||void 0===o?void 0:o.split(" "))&&void 0!==s?s:[],i=null!==(r=null===(n=t.getAttribute("exportparts"))||void 0===n?void 0:n.split(",").map((t=>t.split(":")[1])))&&void 0!==r?r:[];new Array(...e,...i).filter(l).map((t=>t.trim())).forEach((t=>h.add(t)))}if(0===h.size)return void this.removeAttribute("exportparts");const c=[...h.values()].flatMap((t=>a.map((e=>`${t}:${e}--${t}`))));this.setAttribute("exportparts",[...this.part,...c].join(", "))}contentAvailableCallback(t){}}xt([o()],yt.prototype,"exportpartsPrefix",void 0),xt([p([])],yt.prototype,"exportpartsPrefixes",void 0);const gt=x`
     .ft-no-text-select {
         -webkit-touch-callout: none;
         -webkit-user-select: none;
@@ -499,7 +499,7 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
                     box-shadow: 0px 0px 0px transparent;
                     border: 0px solid transparent;
                     text-shadow: 0px 0px 0px transparent;
-                    font-size: inherit;
+                    font-size: 16px;
                 }
 
                 button:hover {
@@ -527,7 +527,6 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
                     box-sizing: border-box;
                     border: none;
                     pointer-events: auto;
-                    line-height: 0;
 
                     --ft-button-internal-font-size: ${Mi.fontSize};
                     --ft-button-internal-line-height: calc(var(--ft-button-internal-font-size) + 2px);
@@ -747,7 +746,7 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
         .ft-checkbox--indeterminate .ft-checkbox--checkmark {
             opacity: 1;
         }
-    `,Ui([o()],Pi.prototype,"name",void 0),Ui([o({type:Boolean})],Pi.prototype,"checked",void 0),Ui([o({type:Boolean})],Pi.prototype,"indeterminate",void 0),Ui([o({type:Boolean})],Pi.prototype,"disabled",void 0),Ui([r(".ft-checkbox")],Pi.prototype,"container",void 0),Ui([r("ft-ripple")],Pi.prototype,"ripple",void 0),c("ft-checkbox")(Pi);var Ii=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const Hi=ut.extend("--ft-radio-text-color",bt.colorOnSurfaceHigh),Wi=ut.external(bt.colorPrimary,"Design system"),Ki=(ut.external(bt.colorOnPrimary,"Design system"),ut.extend("--ft-radio-border-color",bt.colorOnSurfaceMedium)),Vi=ut.external(bt.colorOnSurfaceDisabled,"Design system");class Zi extends CustomEvent{constructor(t,e){super("change",{detail:{value:t,checked:e},bubbles:!0,composed:!0})}}class Ji extends yt{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return V`
+    `,Ui([o()],Pi.prototype,"name",void 0),Ui([o({type:Boolean,reflect:!0})],Pi.prototype,"checked",void 0),Ui([o({type:Boolean})],Pi.prototype,"indeterminate",void 0),Ui([o({type:Boolean})],Pi.prototype,"disabled",void 0),Ui([r(".ft-checkbox")],Pi.prototype,"container",void 0),Ui([r("ft-ripple")],Pi.prototype,"ripple",void 0),c("ft-checkbox")(Pi);var Ii=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};const Hi=ut.extend("--ft-radio-text-color",bt.colorOnSurfaceHigh),Wi=ut.external(bt.colorPrimary,"Design system"),Ki=(ut.external(bt.colorOnPrimary,"Design system"),ut.extend("--ft-radio-border-color",bt.colorOnSurfaceMedium)),Vi=ut.external(bt.colorOnSurfaceDisabled,"Design system");class Zi extends CustomEvent{constructor(t,e){super("change",{detail:{value:t,checked:e},bubbles:!0,composed:!0})}}class Ji extends yt{constructor(){super(...arguments),this.value="",this.name="",this.checked=!1,this.disabled=!1}render(){const t={"ft-radio":!0,"ft-radio--checked":this.checked,"ft-radio--disabled":this.disabled};return V`
             <div class="${ti(t)}">
                 <div class="ft-radio--box-container">
                     <input id="radio-button"
@@ -851,7 +850,7 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
         .ft-radio--disabled .ft-radio--box:after {
             background-color: ${Vi};
         }
-    `,Ii([o()],Ji.prototype,"value",void 0),Ii([o()],Ji.prototype,"name",void 0),Ii([o({type:Boolean})],Ji.prototype,"checked",void 0),Ii([o({type:Boolean})],Ji.prototype,"disabled",void 0),Ii([r(".ft-radio")],Ji.prototype,"container",void 0),Ii([r("ft-ripple")],Ji.prototype,"ripple",void 0),Ii([r("input")],Ji.prototype,"input",void 0);var qi=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class Xi extends yt{constructor(){super(...arguments),this.name=""}render(){return V`
+    `,Ii([o()],Ji.prototype,"value",void 0),Ii([o()],Ji.prototype,"name",void 0),Ii([o({type:Boolean,reflect:!0})],Ji.prototype,"checked",void 0),Ii([o({type:Boolean})],Ji.prototype,"disabled",void 0),Ii([r(".ft-radio")],Ji.prototype,"container",void 0),Ii([r("ft-ripple")],Ji.prototype,"ripple",void 0),Ii([r("input")],Ji.prototype,"input",void 0);var qi=function(t,e,i,o){for(var s,n=arguments.length,r=n<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(e,i,r):s(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class Xi extends yt{constructor(){super(...arguments),this.name=""}render(){return V`
             <slot @slotchange=${this.onSlotChange}
                   @change=${this.onChange}
                   @keydown=${this.onKeyDown}
@@ -907,6 +906,7 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
         `}goBackOnKeyPress(t){"Enter"!==t.key&&" "!==t.key||this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}goBackOnClick(t){t.stopPropagation(),t.preventDefault(),this.dispatchEvent(new CustomEvent("go-back",{detail:this.parent}))}displayMore(){this.displayedPages++}buildMultiValuedOption(t){var e;return V`
             <ft-checkbox name="${this.id}"
                          part="multivalued-option"
+                         data-value="${t.value}"
                          .checked=${t.selected}
                          .disabled=${this.disabled}
                          .indeterminate=${Pe(null!==(e=t.subOptions)&&void 0!==e?e:[],(t=>{var e;return null!==(e=t.subOptions)&&void 0!==e?e:[]})).some((t=>t.selected))}
@@ -916,12 +916,12 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
         `}buildMonoValuedOption(t){return V`
             <ft-radio name="${this.id+Math.round(1e6*Math.random())}"
                       part="monovalued-option"
+                      data-value="${t.value}"
                       .checked=${t.selected}
-                      ?disabled=${this.disabled}
+                      .disabled=${this.disabled}
                       @click=${e=>this.optionsChanged(e,t)}
                       @keyup=${e=>this.onRadioKeyUp(e,t)}
                       @change=${t=>t.stopPropagation()}>
-
                 ${t.label}
             </ft-radio>
         `}onRadioKeyUp(t,e){e.selected&&" "===t.key&&this.optionsChanged(t,e)}optionsChanged(t,e){t.stopPropagation(),this.dispatchEvent(new CustomEvent("change",{detail:e}))}displayLevel(t){this.dispatchEvent(new CustomEvent("display-level",{detail:t}))}}Qi.elementDefinitions={"ft-button":ji,"ft-ripple":ci,"ft-typography":_e,"ft-checkbox":Pi,"ft-icon":Ei,"ft-radio":Ji},Qi.styles=[x`
@@ -985,8 +985,8 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
                 margin-left: -10px;
                 word-break: break-word;
             }
-            
-            .ft-filter-level--no-values {    
+
+            .ft-filter-level--no-values {
                 margin: 10px 0;
                 color: ${Gi.colorOnSurfaceMedium};
             }
@@ -1222,7 +1222,6 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
                 max-height: 100%;
                 max-width: 100%;
                 color: ${no.colorOnSurface};
-                background: ${no.colorSurface};
             }
 
             .ft-filter--header {
@@ -1275,10 +1274,14 @@ class mi extends Ke{constructor(t){if(super(t),this.it=J,t.type!==He)throw Error
                 border: 1px solid ${no.colorOutline};
                 padding: 4px;
                 background-color: ${no.colorSurface};
-                color: ${no.colorOnSurfaceMedium};
+                color: ${no.colorOnSurface};
                 outline-color: ${no.colorPrimary};
             }
 
+            input::placeholder {
+                color: ${no.colorOnSurfaceMedium};
+            }
+
             .ft-filter--values {
                 flex-grow: 1;
                 flex-shrink: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-filter",
-  "version": "0.2.17",
+  "version": "0.2.20",
   "description": "Flat selector for multivalued or monovalued filters",
   "keywords": [
     "Lit"
@@ -19,15 +19,15 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-button": "^0.2.17",
-    "@fluid-topics/ft-checkbox": "^0.2.17",
-    "@fluid-topics/ft-icon": "^0.2.17",
-    "@fluid-topics/ft-radio": "^0.2.17",
-    "@fluid-topics/ft-ripple": "^0.2.17",
-    "@fluid-topics/ft-snap-scroll": "^0.2.17",
-    "@fluid-topics/ft-typography": "^0.2.17",
-    "@fluid-topics/ft-wc-utils": "^0.2.17",
+    "@fluid-topics/ft-button": "^0.2.20",
+    "@fluid-topics/ft-checkbox": "^0.2.20",
+    "@fluid-topics/ft-icon": "^0.2.20",
+    "@fluid-topics/ft-radio": "^0.2.20",
+    "@fluid-topics/ft-ripple": "^0.2.20",
+    "@fluid-topics/ft-snap-scroll": "^0.2.20",
+    "@fluid-topics/ft-typography": "^0.2.20",
+    "@fluid-topics/ft-wc-utils": "^0.2.20",
     "lit": "2.1.3"
   },
-  "gitHead": "7f1e7d4377a6bac24d6d797b342f25166ee44031"
+  "gitHead": "12b770753cd907c340153c5f9fed0909ecb1eefc"
 }