@leavittsoftware/web 1.0.0 → 1.2.0

package/titanium/full-page-loading-indicator/full-page-loading-indicator.js

@@ -101,54 +101,54 @@ let TitaniumFullPageLoadingIndicator = class TitaniumFullPageLoadingIndicator ex
             this.#animationFrame = window.setTimeout(callback, 0);
         });
     }
-    static { this.styles = css `
-    :host {
-      display: none;
-      position: relative;
-      position: fixed;
-      z-index: 19;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      background: var(--md-sys-color-scrim, #000);
-      -webkit-transition: opacity 75ms linear;
-      -o-transition: opacity 75ms linear;
-      transition: opacity 75ms linear;
-    }
-
-    :host([opening]),
-    :host([closing]),
-    :host([opened]) {
-      display: block;
-      z-index: 7;
-    }
-
-    :host([opening]) {
-      -webkit-transition: opacity 50ms linear;
-      -o-transition: opacity 50ms linear;
-      transition: opacity 50ms linear;
-    }
-
-    :host([closing]) {
-      -webkit-transition: opacity 150ms linear;
-      -o-transition: opacity 150ms linear;
-      transition: opacity 150ms linear;
-    }
-
-    :host([opened]) {
-      opacity: 0.32;
-      backdrop-filter: blur(6px);
-    }
-
-    md-linear-progress {
-      position: absolute;
-      width: 100%;
-      top: 0;
-      right: 0;
-      left: 0;
-    }
+    static { this.styles = css `
+    :host {
+      display: none;
+      position: relative;
+      position: fixed;
+      z-index: 19;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      background: var(--md-sys-color-scrim, #000);
+      -webkit-transition: opacity 75ms linear;
+      -o-transition: opacity 75ms linear;
+      transition: opacity 75ms linear;
+    }
+
+    :host([opening]),
+    :host([closing]),
+    :host([opened]) {
+      display: block;
+      z-index: 7;
+    }
+
+    :host([opening]) {
+      -webkit-transition: opacity 50ms linear;
+      -o-transition: opacity 50ms linear;
+      transition: opacity 50ms linear;
+    }
+
+    :host([closing]) {
+      -webkit-transition: opacity 150ms linear;
+      -o-transition: opacity 150ms linear;
+      transition: opacity 150ms linear;
+    }
+
+    :host([opened]) {
+      opacity: 0.32;
+      backdrop-filter: blur(6px);
+    }
+
+    md-linear-progress {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
   `; }
     render() {
         return html ` <md-linear-progress ?indeterminate=${this.opened} ?hide=${!this.opening && !this.closing && !this.opened}></md-linear-progress> `;

package/titanium/header/header.js

@@ -37,92 +37,92 @@ let TitaniumHeader = class TitaniumHeader extends LitElement {
     static { this.styles = [
         h1,
         h3,
-        css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        -webkit-font-smoothing: antialiased;
-        padding: 0 52px 8px 52px;
-        position: relative;
-      }
-
-      :host([no-nav]) md-icon-button {
-        display: none;
-      }
-
-      :host([no-nav]) {
-        padding: 0 0 8px 0;
-      }
-
-      header {
-        display: block;
-        text-align: center;
-        padding: 0 0 8px 0;
-      }
-
-      h1 {
-        display: inline;
-        font-size: 40px;
-        line-height: 42px;
-        font-weight: 200;
-
-        margin: 0;
-        color: var(--md-sys-color-on-background);
-      }
-
-      h3 {
-        color: var(--md-sys-color-on-surface-variant);
-        font-family: Metropolis, Roboto, Noto, sans-serif;
-        font-weight: 300;
-        font-size: 16px;
-        line-height: 20px;
-        text-align: center;
-      }
-
-      md-icon[header-icon] {
-        display: inline;
-        vertical-align: text-bottom;
-        font-size: 40px;
-        color: var(--md-sys-color-on-background);
-        margin-right: 8px;
-      }
-
-      md-icon-button {
-        position: absolute;
-        top: 0;
-        left: 0;
-      }
-
-      @media (max-width: 920px) {
-        h1 {
-          font-size: 30px;
-          line-height: 32px;
-        }
-
-        h3 {
-          font-size: 14px;
-          line-height: 16px;
-        }
-
-        md-icon[header-icon] {
-          font-size: 30px;
-        }
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        -webkit-font-smoothing: antialiased;
+        padding: 0 52px 8px 52px;
+        position: relative;
+      }
+
+      :host([no-nav]) md-icon-button {
+        display: none;
+      }
+
+      :host([no-nav]) {
+        padding: 0 0 8px 0;
+      }
+
+      header {
+        display: block;
+        text-align: center;
+        padding: 0 0 8px 0;
+      }
+
+      h1 {
+        display: inline;
+        font-size: 40px;
+        line-height: 42px;
+        font-weight: 200;
+
+        margin: 0;
+        color: var(--md-sys-color-on-background);
+      }
+
+      h3 {
+        color: var(--md-sys-color-on-surface-variant);
+        font-family: Metropolis, Roboto, Noto, sans-serif;
+        font-weight: 300;
+        font-size: 16px;
+        line-height: 20px;
+        text-align: center;
+      }
+
+      md-icon[header-icon] {
+        display: inline;
+        vertical-align: text-bottom;
+        font-size: 40px;
+        color: var(--md-sys-color-on-background);
+        margin-right: 8px;
+      }
+
+      md-icon-button {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      @media (max-width: 920px) {
+        h1 {
+          font-size: 30px;
+          line-height: 32px;
+        }
+
+        h3 {
+          font-size: 14px;
+          line-height: 16px;
+        }
+
+        md-icon[header-icon] {
+          font-size: 30px;
+        }
+      }
+
+      :host([hidden]) {
+        display: none;
+      }
     `,
     ]; }
     render() {
-        return html `
-      <header part="header">
-        ${this.icon ? html `<md-icon header-icon part="icon">${this.icon}</md-icon>` : nothing}
-        <h1 part="h1">${this.header}</h1>
-        <md-icon-button part="button" @click="${this.#handleBackClick}" large> <md-icon>arrow_back</md-icon></md-icon-button>
-      </header>
-
-      <h3 part="h3">${this.subHeader}</h3>
+        return html `
+      <header part="header">
+        ${this.icon ? html `<md-icon header-icon part="icon">${this.icon}</md-icon>` : nothing}
+        <h1 part="h1">${this.header}</h1>
+        <md-icon-button part="button" @click="${this.#handleBackClick}" large> <md-icon>arrow_back</md-icon></md-icon-button>
+      </header>
+
+      <h3 part="h3">${this.subHeader}</h3>
     `;
     }
 };

package/titanium/helpers/debouncer.js.map

@@ -1 +1 @@
-{"version":3,"file":"debouncer.js","sourceRoot":"","sources":["debouncer.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,SAAS;IACpB,gBAAgB,CAAyB;IACzC,gBAAgB,CAAsE;IACtF,MAAM,GAAW,CAAC,CAAC;IACnB,KAAK,CAA+B;IACpC,SAAS,CAAS;IAElB,YAAY,OAAqC,EAAE,WAAmB,GAAG;QACvE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED;;;;;;OAMG;IACH,QAAQ,CAAC,GAAG,IAAS;QACnB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE;YACzC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAC7C,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAClC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QACpC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG,IAAI,OAAO,CAAI,KAAK,EAAC,GAAG,EAAC,EAAE;gBACjD,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC;YAC9B,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;CACF"}
+{"version":3,"file":"debouncer.js","sourceRoot":"","sources":["debouncer.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,SAAS;IACpB,gBAAgB,CAAyB;IACzC,gBAAgB,CAAsE;IACtF,MAAM,GAAW,CAAC,CAAC;IACnB,KAAK,CAA+B;IACpC,SAAS,CAAS;IAElB,YAAY,OAAqC,EAAE,WAAmB,GAAG;QACvE,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED;;;;;;OAMG;IACH,QAAQ,CAAC,GAAG,IAAS;QACnB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE;YACzC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAC7C,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAClC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;QACpC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAEnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG,IAAI,OAAO,CAAI,KAAK,EAAE,GAAG,EAAE,EAAE;gBACnD,IAAI,CAAC,gBAAgB,GAAG,GAAG,CAAC;YAC9B,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC,gBAAgB,CAAC;IAC/B,CAAC;CACF"}

package/titanium/helpers/dev-detection.js

@@ -6,7 +6,7 @@ export const determineIsDevelopment = (url) => {
         new RegExp('^http://localhost[:]0*(?:6553[0-5]|655[0-2][0-9]|65[0-4][0-9]{2}|6[0-4][0-9]{3}|[1-5][0-9]{4}|[1-9][0-9]{1,3}|[0-9])'),
         new RegExp('^https://localhost[:]0*(?:6553[0-5]|655[0-2][0-9]|65[0-4][0-9]{2}|6[0-4][0-9]{3}|[1-5][0-9]{4}|[1-9][0-9]{1,3}|[0-9])'),
     ];
-    return !url || url.indexOf('dev') > -1 || allowedUrlRegularExpressions.some(o => o.exec(url) !== null);
+    return !url || url.indexOf('dev') > -1 || allowedUrlRegularExpressions.some((o) => o.exec(url) !== null);
 };
 export const isDevelopment = determineIsDevelopment(window.location.origin);
 //# sourceMappingURL=dev-detection.js.map

package/titanium/helpers/dev-detection.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-detection.js","sourceRoot":"","sources":["dev-detection.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,GAAW,EAAW,EAAE;IAC7D,MAAM,4BAA4B,GAAG;QACnC,IAAI,MAAM,CAAC,kBAAkB,CAAC;QAC9B,IAAI,MAAM,CAAC,iBAAiB,CAAC;QAC7B,IAAI,MAAM,CAAC,sBAAsB,CAAC;QAClC,IAAI,MAAM,CAAC,sHAAsH,CAAC;QAClI,IAAI,MAAM,CAAC,uHAAuH,CAAC;KACpI,CAAC;IAEF,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC;AACzG,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"dev-detection.js","sourceRoot":"","sources":["dev-detection.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,GAAW,EAAW,EAAE;IAC7D,MAAM,4BAA4B,GAAG;QACnC,IAAI,MAAM,CAAC,kBAAkB,CAAC;QAC9B,IAAI,MAAM,CAAC,iBAAiB,CAAC;QAC7B,IAAI,MAAM,CAAC,sBAAsB,CAAC;QAClC,IAAI,MAAM,CAAC,sHAAsH,CAAC;QAClI,IAAI,MAAM,CAAC,uHAAuH,CAAC;KACpI,CAAC;IAEF,OAAO,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,CAAC;AAC3G,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC"}

package/titanium/helpers/media-query.js

@@ -1,6 +1,6 @@
 export const installMediaQueryWatcher = (mediaQuery, layoutChangedCallback) => {
     const mql = window.matchMedia(mediaQuery);
-    mql.addListener(e => layoutChangedCallback(e.matches));
+    mql.addListener((e) => layoutChangedCallback(e.matches));
     layoutChangedCallback(mql.matches);
 };
 //# sourceMappingURL=media-query.js.map

package/titanium/helpers/media-query.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-query.js","sourceRoot":"","sources":["media-query.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,UAAkB,EAAE,qBAA2D,EAAE,EAAE;IAC1H,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAC1C,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC,CAAC"}
+{"version":3,"file":"media-query.js","sourceRoot":"","sources":["media-query.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,UAAkB,EAAE,qBAA2D,EAAE,EAAE;IAC1H,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAC1C,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACzD,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC,CAAC"}

package/titanium/helpers/search-token.js

@@ -5,8 +5,8 @@ export const getSearchTokens = (inputText, allowedComplexityLevel = 3) => {
     }
     let tokens = inputText
         .split(' ')
-        .map(token => escapeTerm(token.trim()))
-        .filter(token => token.length > 0);
+        .map((token) => escapeTerm(token.trim()))
+        .filter((token) => token.length > 0);
     if (tokens.length > allowedComplexityLevel) {
         // if user types more than
         // three words, do not tokenize

package/titanium/helpers/search-token.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-token.js","sourceRoot":"","sources":["search-token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,sBAAsB,GAAG,CAAC,EAAE,EAAE;IAC/E,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;QACpF,OAAO,EAAE,CAAC;KACX;IACD,IAAI,MAAM,GAAG,SAAS;SACnB,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;SACtC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACrC,IAAI,MAAM,CAAC,MAAM,GAAG,sBAAsB,EAAE;QAC1C,0BAA0B;QAC1B,+BAA+B;QAC/B,MAAM,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;KACzC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"search-token.js","sourceRoot":"","sources":["search-token.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,sBAAsB,GAAG,CAAC,EAAE,EAAE;IAC/E,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;QACpF,OAAO,EAAE,CAAC;KACX;IACD,IAAI,MAAM,GAAG,SAAS;SACnB,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;SACxC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACvC,IAAI,MAAM,CAAC,MAAM,GAAG,sBAAsB,EAAE;QAC1C,0BAA0B;QAC1B,+BAA+B;QAC/B,MAAM,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;KACzC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/titanium/icon-picker/icon-picker.js

@@ -52,10 +52,10 @@ let TitaniumIconPicker = class TitaniumIconPicker extends TitaniumSingleSelectBa
         return html ` <md-icon slot="leading-icon">${entity.icon}</md-icon> `;
     }
     renderSuggestion(entity) {
-        return html `<md-menu-item .item=${entity} ?selected=${this.selected?.Id === entity.Id}>
-      <slot name="trailing-icon" slot="trailing-icon"></slot>
-      <span slot="headline">${entity.icon}</span>
-      <md-icon slot="start">${entity.icon}</md-icon>
+        return html `<md-menu-item .item=${entity} ?selected=${this.selected?.Id === entity.Id}>
+      <slot name="trailing-icon" slot="trailing-icon"></slot>
+      <span slot="headline">${entity.icon}</span>
+      <md-icon slot="start">${entity.icon}</md-icon>
     </md-menu-item>`;
     }
 };

package/titanium/search-input/search-input.js

@@ -85,127 +85,127 @@ let TitaniumSearchInput = class TitaniumSearchInput extends LitElement {
             this.collapsed = true;
         }
     }
-    static { this.styles = css `
-    :host {
-      display: flex;
-      flex-direction: column;
-      height: 42px;
-      -webkit-transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); /* Safari */
-      transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
-      width: 250px;
-      --md-icon-button-state-layer-width: 42px;
-      --md-icon-button-state-layer-height: 42px;
-    }
-
-    input-container {
-      display: flex;
-      flex-direction: row;
-      position: relative;
-    }
-
-    md-icon-button {
-      position: absolute;
-      top: 0;
-    }
-
-    md-icon-button[clear] {
-      right: 0;
-    }
-
-    md-icon-button[search] {
-      left: 0;
-    }
-
-    :host([disabled]) svg {
-      cursor: not-allowed;
-    }
-
-    input-container input {
-      -webkit-appearance: none;
-      width: 100%;
-      height: 42px;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      padding: 0;
-      margin: 0;
-      padding-left: 46px !important;
-      padding-right: 46px !important;
-      transition:
-        background 100ms ease-in,
-        width 100ms ease-out;
-      color: var(--md-sys-color-on-background);
-      background-color: transparent;
-      border-top-left-radius: 20px;
-      border-top-right-radius: 20px;
-      border-bottom-left-radius: 20px;
-      border-bottom-right-radius: 20px;
-      border: 1px solid var(--md-sys-color-outline-variant);
-    }
-
-    :host([shallow]) input-container input {
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
-      border-bottom-left-radius: 12px;
-      border-bottom-right-radius: 12px;
-    }
-
-    input-container:hover input {
-      box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
-    }
-
-    input-container input::-ms-clear {
-      display: none;
-    }
-
-    :host([collapsed]:not([prevent-collapse])) {
-      width: 42px;
-    }
-
-    :host([collapsed]:not([prevent-collapse])) input-container input {
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    :host([disabled]) input-container input {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    :host([disabled]) input-container:hover input {
-      box-shadow: none;
-    }
-
-    input-container input,
-    input-container input:focus {
-      box-sizing: border-box;
-      outline: none;
-      font-size: 16px;
-      font-weight: 400;
-    }
-
-    [hidden] {
-      display: none;
-    }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 42px;
+      -webkit-transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1); /* Safari */
+      transition: width 250ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
+      width: 250px;
+      --md-icon-button-state-layer-width: 42px;
+      --md-icon-button-state-layer-height: 42px;
+    }
+
+    input-container {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+
+    md-icon-button {
+      position: absolute;
+      top: 0;
+    }
+
+    md-icon-button[clear] {
+      right: 0;
+    }
+
+    md-icon-button[search] {
+      left: 0;
+    }
+
+    :host([disabled]) svg {
+      cursor: not-allowed;
+    }
+
+    input-container input {
+      -webkit-appearance: none;
+      width: 100%;
+      height: 42px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      padding: 0;
+      margin: 0;
+      padding-left: 46px !important;
+      padding-right: 46px !important;
+      transition:
+        background 100ms ease-in,
+        width 100ms ease-out;
+      color: var(--md-sys-color-on-background);
+      background-color: transparent;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+      border: 1px solid var(--md-sys-color-outline-variant);
+    }
+
+    :host([shallow]) input-container input {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+
+    input-container:hover input {
+      box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
+    }
+
+    input-container input::-ms-clear {
+      display: none;
+    }
+
+    :host([collapsed]:not([prevent-collapse])) {
+      width: 42px;
+    }
+
+    :host([collapsed]:not([prevent-collapse])) input-container input {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    :host([disabled]) input-container input {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    :host([disabled]) input-container:hover input {
+      box-shadow: none;
+    }
+
+    input-container input,
+    input-container input:focus {
+      box-sizing: border-box;
+      outline: none;
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    [hidden] {
+      display: none;
+    }
   `; }
     render() {
-        return html `
-      <input-container>
-        <md-icon-button ?disabled=${this.disabled} search @click=${this.#handleSearchClick}><md-icon>search</md-icon></md-icon-button>
-        <input
-          type="text"
-          ?disabled=${this.disabled || (this.collapsed && !this.preventCollapse)}
-          placeholder=${this.placeholder}
-          autocomplete="off"
-          .value=${this.value}
-          @keyup=${this.#onValueChange}
-          @focusout=${this.#lostFocus}
-          @change=${this.#onValueChange}
-        />
-
+        return html `
+      <input-container>
+        <md-icon-button ?disabled=${this.disabled} search @click=${this.#handleSearchClick}><md-icon>search</md-icon></md-icon-button>
+        <input
+          type="text"
+          ?disabled=${this.disabled || (this.collapsed && !this.preventCollapse)}
+          placeholder=${this.placeholder}
+          autocomplete="off"
+          .value=${this.value}
+          @keyup=${this.#onValueChange}
+          @focusout=${this.#lostFocus}
+          @change=${this.#onValueChange}
+        />
+
         ${this.hideClearButton || !this.value
             ? ''
-            : html ` <md-icon-button clear @click=${this.#onClearClick} ?disabled=${this.disabled}> <md-icon>close</md-icon></md-icon-button> `}
-      </input-container>
+            : html ` <md-icon-button clear @click=${this.#onClearClick} ?disabled=${this.disabled}> <md-icon>close</md-icon></md-icon-button> `}
+      </input-container>
     `;
     }
 };