@universal-material/web 3.0.91 → 3.0.93

package/field/field-base.d.ts

@@ -1,6 +1,6 @@
 import { Context, ContextProvider } from '@lit/context';
 import { CSSResultGroup } from '@lit/reactive-element/css-tag';
-import { TemplateResult, LitElement, nothing } from 'lit';
+import { LitElement, nothing, TemplateResult } from 'lit';
 import { UmFieldDefaults } from './field-defaults.js';
 export declare abstract class UmFieldBase extends LitElement {
     #private;
@@ -11,7 +11,9 @@ export declare abstract class UmFieldBase extends LitElement {
      * The floating label for the field
      */
     label: string | undefined;
+    protected _innerCounter: string | undefined;
     counter: string | undefined;
+    hideCounter: boolean;
     /**
      * Supporting text conveys additional information about the field, such as how it will be used
      */

package/field/field-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAElE;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAExC;;OAEG;IACuC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7E;;;OAGG;IACkC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnE;;OAEG;IACuC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE3D;;OAEG;IACuC,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,OAAO,CAAC,aAAa,CAAe;IAChC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;IAExD,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,cAAc;IAuC3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAClD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAOjB,oBAAoB;IAc7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;IAe/B,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}
+{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAahE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAElE;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAEgB,WAAW,UAAS;IAE5E;;OAEG;IACyC,cAAc,EACtD,MAAM,GACN,SAAS,CAAC;IAEd;;;OAGG;IACoC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAErE;;OAEG;IACyC,KAAK,UAAS;IACd,QAAQ,UAAS;IAE7D;;OAEG;IACyC,OAAO,UAAS;IAE5D,MAAM,CAAC,WAAW,CAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,eAAe,GACtB,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAOzD;;;;OAIG;IAEH,cAAc,UAAS;IAEvB;;;;OAIG;IAEH,eAAe,UAAS;IAExB;;;;OAIG;IAEH,YAAY,UAAS;IAGrB,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,OAAO,CAAC,aAAa,CAAe;IAChC,SAAS,CAAC,UAAU,EAAG,WAAW,CAAC;IAExD,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,cAAc;IA4C3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAClD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAOjB,oBAAoB;IAgB7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;IAc/B,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}

package/field/field-base.js

@@ -6,7 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { consume, ContextProvider } from '@lit/context';
 import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles } from './field-base.styles.js';
 import { fieldDefaultsContext } from './field-defaults-context.js';
@@ -15,12 +16,13 @@ export class UmFieldBase extends LitElement {
     static setDefaults(contextRoot, config) {
         return new ContextProvider(contextRoot, {
             context: fieldDefaultsContext,
-            initialValue: config
+            initialValue: config,
         });
     }
     constructor() {
         super();
         this.variant = 'filled';
+        this.hideCounter = false;
         /**
          * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.
          */
@@ -52,19 +54,24 @@ export class UmFieldBase extends LitElement {
         this.variant = undefined;
     }
     render() {
+        const classes = {
+            [this.variant ?? this.config?.variant ?? 'filled']: true,
+        };
+        const counter = html `
+      <slot class="counter" name="counter">
+        <div>${this.counter ?? this._innerCounter}</div>
+      </slot>
+    `;
         return html `
-      <div class="container ${this.variant ?? this.config?.variant ?? 'filled'}">
+      <div class="container ${classMap(classes)}">
         <slot
           class="icon leading-icon"
           name="leading-icon"
-          @slotchange="${this.handleLeadingIconSlotChange}">
-        </slot>
+          @slotchange="${this.handleLeadingIconSlotChange}"></slot>
         <label class="label" slot="label" id="label">
           <slot name="label">${this.label}</slot>
         </label>
-        <div class="input-wrapper" part="wrapper">
-          ${this.renderControl()}
-        </div>
+        <div class="input-wrapper" part="wrapper">${this.renderControl()}</div>
         <slot
           class="icon trailing-icon"
           name="trailing-icon"
@@ -82,9 +89,7 @@ export class UmFieldBase extends LitElement {
         <slot name="supporting-text" id="supporting-text">
           <div>${this.supportingText}</div>
         </slot>
-        <slot class="counter" name="counter">
-          <div>${this.counter}</div>
-        </slot>
+        ${this.hideCounter ? nothing : counter}
       </div>
       ${this.renderAfterContent()}
     `;
@@ -145,9 +150,15 @@ __decorate([
 __decorate([
     property()
 ], UmFieldBase.prototype, "label", void 0);
+__decorate([
+    state()
+], UmFieldBase.prototype, "_innerCounter", void 0);
 __decorate([
     property()
 ], UmFieldBase.prototype, "counter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-counter' })
+], UmFieldBase.prototype, "hideCounter", void 0);
 __decorate([
     property({ attribute: 'supporting-text' })
 ], UmFieldBase.prototype, "supportingText", void 0);

package/field/field-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, TemplateResult, LitElement, nothing } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  @consume({context: fieldDefaultsContext, subscribe: true})\n  @state()\n  private config: UmFieldDefaults | undefined;\n\n  @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n  /**\n   * The floating label for the field\n   */\n  @property() label: string | undefined;\n  @property() counter: string | undefined;\n\n  /**\n   * Supporting text conveys additional information about the field, such as how it will be used\n   */\n  @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n\n  /**\n   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n   */\n  @property({attribute: 'error-text'}) errorText: string | undefined;\n\n  /**\n   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n   */\n  @property({type: Boolean, reflect: true}) empty = false;\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Get or sets where or not the field is in a visually invalid state.\n   */\n  @property({type: Boolean, reflect: true}) invalid = false;\n\n  static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n    return new ContextProvider(contextRoot, {\n      context: fieldDefaultsContext,\n      initialValue: config\n    });\n  }\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n  @queryAssignedElements({slot: 'leading-icon', flatten: true})\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'error-text', flatten: true})\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @query('.label') private _labelElement!: HTMLElement;\n  @query('.container') protected _container!: HTMLElement;\n\n  private labelSizeObserver: ResizeObserver | null = null;\n\n  constructor() {\n    super();\n    this.variant = undefined;\n  }\n\n  protected override render(): TemplateResult {\n    return html`\n      <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n        <slot\n          class=\"icon leading-icon\"\n          name=\"leading-icon\"\n          @slotchange=\"${this.handleLeadingIconSlotChange}\">\n        </slot>\n        <label class=\"label\" slot=\"label\" id=\"label\">\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n        <div class=\"input-wrapper\" part=\"wrapper\">\n          ${this.renderControl()}\n        </div>\n        <slot\n          class=\"icon trailing-icon\"\n          name=\"trailing-icon\"\n          @slotchange=\"${this.handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n      <div class=\"supporting-text\" id=\"supporting-text\">\n        <slot\n          class=\"error-text\"\n          name=\"error-text\"\n          @slotchange=\"${this.handleErrorTextSlotChange}\">\n          <div>${this.errorText}</div>\n        </slot>\n        <slot name=\"supporting-text\" id=\"supporting-text\">\n          <div>${this.supportingText}</div>\n        </slot>\n        <slot class=\"counter\" name=\"counter\">\n          <div>${this.counter}</div>\n        </slot>\n      </div>\n      ${this.renderAfterContent()}\n    `;\n  }\n\n  protected abstract renderControl(): TemplateResult;\n  protected renderAfterContent(): TemplateResult {\n    return html``;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.labelSizeObserver?.disconnect();\n    this.labelSizeObserver = null;\n  }\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n    this.labelSizeObserver.observe(this._labelElement);\n    this.setLabelWidthProperties();\n  }\n\n  private handleLeadingIconSlotChange() {\n    this._labelElement.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this._labelElement.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  private setLabelWidthProperties() {\n\n    const width = this._labelElement.offsetWidth;\n\n    this.style.setProperty('--u-field-label-width', `${width}px`);\n    this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n    if (!width) {\n      this._container.classList.add('no-label');\n      return;\n    }\n\n    this._container.classList.remove('no-label');\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n}\n"]}
+{"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n  static override styles: CSSResultGroup = [baseStyles, styles];\n\n  @consume({ context: fieldDefaultsContext, subscribe: true })\n  @state()\n  private config: UmFieldDefaults | undefined;\n\n  @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n  /**\n   * The floating label for the field\n   */\n  @property() label: string | undefined;\n\n  @state() protected _innerCounter: string | undefined;\n  @property() counter: string | undefined;\n\n  @property({ type: Boolean, attribute: 'hide-counter' }) hideCounter = false;\n\n  /**\n   * Supporting text conveys additional information about the field, such as how it will be used\n   */\n  @property({ attribute: 'supporting-text' }) supportingText:\n    | string\n    | undefined;\n\n  /**\n   * For text fields that validate their content (such as passwords), replace supporting text with error text when applicable.\n   * If `errorText` is not an empty string, changing the property `invalid` to `true` will show the `errorText` instead of `supportingText`\n   */\n  @property({ attribute: 'error-text' }) errorText: string | undefined;\n\n  /**\n   * Whether the field is empty or not. This changes the behavior of the floating label when the field is not focused.\n   */\n  @property({ type: Boolean, reflect: true }) empty = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Get or sets where or not the field is in a visually invalid state.\n   */\n  @property({ type: Boolean, reflect: true }) invalid = false;\n\n  static setDefaults(\n    contextRoot: HTMLElement,\n    config: UmFieldDefaults,\n  ): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n    return new ContextProvider(contextRoot, {\n      context: fieldDefaultsContext,\n      initialValue: config,\n    });\n  }\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })\n  hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })\n  hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({ type: Boolean, attribute: 'has-error-text', reflect: true })\n  hasErrorText = false;\n\n  @queryAssignedElements({ slot: 'leading-icon', flatten: true })\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'trailing-icon', flatten: true })\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'error-text', flatten: true })\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @query('.label') private _labelElement!: HTMLElement;\n  @query('.container') protected _container!: HTMLElement;\n\n  private labelSizeObserver: ResizeObserver | null = null;\n\n  constructor() {\n    super();\n    this.variant = undefined;\n  }\n\n  protected override render(): TemplateResult {\n    const classes = {\n      [this.variant ?? this.config?.variant ?? 'filled']: true,\n    };\n\n    const counter = html`\n      <slot class=\"counter\" name=\"counter\">\n        <div>${this.counter ?? this._innerCounter}</div>\n      </slot>\n    `;\n\n    return html`\n      <div class=\"container ${classMap(classes)}\">\n        <slot\n          class=\"icon leading-icon\"\n          name=\"leading-icon\"\n          @slotchange=\"${this.handleLeadingIconSlotChange}\"></slot>\n        <label class=\"label\" slot=\"label\" id=\"label\">\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n        <div class=\"input-wrapper\" part=\"wrapper\">${this.renderControl()}</div>\n        <slot\n          class=\"icon trailing-icon\"\n          name=\"trailing-icon\"\n          @slotchange=\"${this.handleTrailingIconSlotChange}\">\n          <span>${this.renderDefaultTrailingIcon()}</span>\n        </slot>\n      </div>\n      <div class=\"supporting-text\" id=\"supporting-text\">\n        <slot\n          class=\"error-text\"\n          name=\"error-text\"\n          @slotchange=\"${this.handleErrorTextSlotChange}\">\n          <div>${this.errorText}</div>\n        </slot>\n        <slot name=\"supporting-text\" id=\"supporting-text\">\n          <div>${this.supportingText}</div>\n        </slot>\n        ${this.hideCounter ? nothing : counter}\n      </div>\n      ${this.renderAfterContent()}\n    `;\n  }\n\n  protected abstract renderControl(): TemplateResult;\n  protected renderAfterContent(): TemplateResult {\n    return html``;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n    this.#attach();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.labelSizeObserver?.disconnect();\n    this.labelSizeObserver = null;\n  }\n\n  async #attach(): Promise<void> {\n    await this.updateComplete;\n    this.labelSizeObserver = new ResizeObserver(() =>\n      this.setLabelWidthProperties(),\n    );\n    this.labelSizeObserver.observe(this._labelElement);\n    this.setLabelWidthProperties();\n  }\n\n  private handleLeadingIconSlotChange() {\n    this._labelElement.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this._labelElement.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  private setLabelWidthProperties() {\n    const width = this._labelElement.offsetWidth;\n\n    this.style.setProperty('--u-field-label-width', `${width}px`);\n    this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n    if (!width) {\n      this._container.classList.add('no-label');\n      return;\n    }\n\n    this._container.classList.remove('no-label');\n  }\n\n  protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing {\n    return nothing;\n  }\n}\n"]}

package/field/field-base.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-base.styles.d.ts","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqTlB,CAAC"}
+{"version":3,"file":"field-base.styles.d.ts","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6TlB,CAAC"}

package/field/field-base.styles.js

@@ -117,6 +117,7 @@ export const styles = css `
   .input:focus {
     outline: 0;
   }
+  .input textarea,
   .input select,
   .input input,
   .input ::slotted(*) {
@@ -136,12 +137,17 @@ export const styles = css `
     background: transparent;
     border: none;
     outline: 0 !important;
+    caret-color: var(--_color-primary);
   }
   .input,
+  .input textarea::placeholder,
+  .input input::placeholder,
   .input ::slotted(select),
   .input ::slotted(:is(input, textarea))::placeholder {
     transition: color 150ms 100ms;
   }
+  .input textarea::placeholder,
+  .input input::placeholder,
   .input ::slotted(:is(input, textarea))::placeholder {
     color: var(--_field-placeholder-color);
   }
@@ -268,12 +274,12 @@ export const styles = css `
     pointer-events: none;
     top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);
   }
-  :host([empty]:not(:focus-within)) .input-wrapper {
-    opacity: 0;
-  }
-  :host([empty]:not(:focus-within)) .input,
-  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,
-  :host([empty]:not(:focus-within)) ::slotted(select) {
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .input-wrapper,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .input,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .input input::placeholder,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) .input textarea::placeholder,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(:is(input, textarea))::placeholder,
+  :host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(select) {
     color: transparent;
     transition: color 150ms;
   }
@@ -296,6 +302,8 @@ export const styles = css `
   }
   :host([disabled]) .input select,
   :host([disabled]) .input select::placeholder,
+  :host([disabled]) .input textarea,
+  :host([disabled]) .input textarea::placeholder,
   :host([disabled]) .input input,
   :host([disabled]) .input input::placeholder,
   :host([disabled]) .input ::slotted(*),

package/field/field-base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-base.styles.js","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqTzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n    --_disabled-bg-color: var(--u-filled-field-disabled-bg-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n    display: block;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n  .container::before, .container::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .container::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .container::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    margin-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    margin-inline-end: var(--_icon-padding);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    padding-block: var(--_vertical-padding);\n    padding-inline: var(--_field-control-inline-padding);\n    min-height: var(--_field-min-height);\n    transition: opacity 150ms;\n  }\n\n  .input {\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    flex: 1;\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input select,\n  .input input,\n  .input ::slotted(*) {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    display: block;\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_control-line-height);\n    line-height: var(--_control-line-height);\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input,\n  .input ::slotted(select),\n  .input ::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text div:empty {\n    display: none;\n  }\n  .supporting-text div,\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter div, .counter::slotted(*) {\n    margin-inline-start: auto;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .container:has(slot[name=trailing-icon] span:empty) .trailing-icon {\n    display: none;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .container::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .container::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n  :host([invalid][has-error-text]) .error-text {\n    display: contents;\n  }\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n  :host([invalid][has-error-text]) slot[name=supporting-text] {\n    display: none;\n  }\n\n  .container.filled {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n  .container.filled::after {\n    border-bottom-style: solid;\n  }\n  .container.filled:not(.no-label) .input-wrapper {\n    padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n    padding-bottom: var(--_vertical-padding);\n  }\n  .container.filled .label {\n    top: var(--_vertical-padding);\n  }\n  .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n    display: block;\n  }\n  .container.outlined::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  .container.outlined .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  .container.outlined:focus-within::after,\n  :host(:not([empty])) .container.outlined::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  .container.outlined:focus-within .label,\n  :host(:not([empty])) .container.outlined .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input-wrapper {\n    opacity: 0;\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n\n  .container.no-label::after {\n    clip-path: none !important;\n  }\n\n  :host([disabled]) .container .filled {\n    background-color: var(--u-filled-field-disabled-bg-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n  }\n  :host([disabled]) .container::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input select,\n  :host([disabled]) .input select::placeholder,\n  :host([disabled]) .input input,\n  :host([disabled]) .input input::placeholder,\n  :host([disabled]) .input ::slotted(*),\n  :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n`;\n"]}
+{"version":3,"file":"field-base.styles.js","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6TzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n    --_disabled-bg-color: var(--u-filled-field-disabled-bg-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n    display: block;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    position: relative;\n  }\n  .container::before, .container::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .container::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .container::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    margin-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    margin-inline-end: var(--_icon-padding);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input-wrapper {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    padding-block: var(--_vertical-padding);\n    padding-inline: var(--_field-control-inline-padding);\n    min-height: var(--_field-min-height);\n    transition: opacity 150ms;\n  }\n\n  .input {\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    flex: 1;\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input textarea,\n  .input select,\n  .input input,\n  .input ::slotted(*) {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    display: block;\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_control-line-height);\n    line-height: var(--_control-line-height);\n    padding: 0;\n    margin: 0;\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n    caret-color: var(--_color-primary);\n  }\n  .input,\n  .input textarea::placeholder,\n  .input input::placeholder,\n  .input ::slotted(select),\n  .input ::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input textarea::placeholder,\n  .input input::placeholder,\n  .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text div:empty {\n    display: none;\n  }\n  .supporting-text div,\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter div, .counter::slotted(*) {\n    margin-inline-start: auto;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:not([has-leading-icon])) .leading-icon {\n    display: none;\n  }\n\n  :host(:not([has-trailing-icon])) .container:has(slot[name=trailing-icon] span:empty) .trailing-icon {\n    display: none;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .container::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .container::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n  :host([invalid][has-error-text]) .error-text {\n    display: contents;\n  }\n  :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n  :host([invalid][has-error-text]) slot[name=supporting-text] {\n    display: none;\n  }\n\n  .container.filled {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n  }\n  .container.filled::after {\n    border-bottom-style: solid;\n  }\n  .container.filled:not(.no-label) .input-wrapper {\n    padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n    padding-bottom: var(--_vertical-padding);\n  }\n  .container.filled .label {\n    top: var(--_vertical-padding);\n  }\n  .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n    display: block;\n  }\n  .container.outlined::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  .container.outlined .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  .container.outlined:focus-within::after,\n  :host(:not([empty])) .container.outlined::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  .container.outlined:focus-within .label,\n  :host(:not([empty])) .container.outlined .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .input-wrapper,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .input,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .input input::placeholder,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) .input textarea::placeholder,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) .container:not(.no-label) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n\n  .container.no-label::after {\n    clip-path: none !important;\n  }\n\n  :host([disabled]) .container .filled {\n    background-color: var(--u-filled-field-disabled-bg-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n  }\n  :host([disabled]) .container::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input select,\n  :host([disabled]) .input select::placeholder,\n  :host([disabled]) .input textarea,\n  :host([disabled]) .input textarea::placeholder,\n  :host([disabled]) .input input,\n  :host([disabled]) .input input::placeholder,\n  :host([disabled]) .input ::slotted(*),\n  :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n`;\n"]}

package/index.d.ts

@@ -17,6 +17,7 @@ import './switch/switch-list-item.js';
 import './elevation/elevation.js';
 import './field/field.js';
 import './text-field/text-field.js';
+import './text-area/text-area.js';
 import './select/select.js';
 import './list/list.js';
 import './list/list-item.js';
@@ -53,6 +54,7 @@ export * from './switch/switch-list-item.js';
 export * from './elevation/elevation.js';
 export * from './field/field.js';
 export * from './text-field/text-field.js';
+export * from './text-area/text-area.js';
 export * from './select/select.js';
 export * from './select/option.js';
 export * from './list/list.js';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/index.js

@@ -17,6 +17,7 @@ import './switch/switch-list-item.js';
 import './elevation/elevation.js';
 import './field/field.js';
 import './text-field/text-field.js';
+import './text-area/text-area.js';
 import './select/select.js';
 import './list/list.js';
 import './list/list-item.js';
@@ -53,6 +54,7 @@ export * from './switch/switch-list-item.js';
 export * from './elevation/elevation.js';
 export * from './field/field.js';
 export * from './text-field/text-field.js';
+export * from './text-area/text-area.js';
 export * from './select/select.js';
 export * from './select/option.js';
 export * from './list/list.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["import './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './dialog/dialog.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './select/select.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './progress/circular-progress.js';\nimport './progress/progress-bar.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './tab-bar/tab-bar.js';\nimport './tab-bar/tab.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './dialog/dialog.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './select/select.js';\nexport * from './select/option.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/side-navigation.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/progress-bar.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './tab-bar/tab-bar.js';\nexport * from './tab-bar/tab.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAElC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC","sourcesContent":["import './app-bar/top-app-bar.js';\nimport './button/button.js';\nimport './button/button-set.js';\nimport './button/fab.js';\nimport './button/icon-button.js';\nimport './card/card.js';\nimport './chip/chip.js';\nimport './chip/chip-set.js';\nimport './chip-field/chip-field.js';\nimport './dialog/dialog.js';\nimport './checkbox/checkbox.js';\nimport './checkbox/checkbox-list-item.js';\nimport './radio/radio.js';\nimport './radio/radio-list-item.js';\nimport './switch/switch.js';\nimport './switch/switch-list-item.js';\nimport './elevation/elevation.js';\nimport './field/field.js';\nimport './text-field/text-field.js';\nimport './text-area/text-area.js';\nimport './select/select.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './navigation/drawer.js';\nimport './navigation/drawer-item.js';\nimport './navigation/side-navigation.js';\nimport './progress/circular-progress.js';\nimport './progress/progress-bar.js';\nimport './ripple/ripple.js';\nimport './snackbar/snackbar.js';\nimport './tab-bar/tab-bar.js';\nimport './tab-bar/tab.js';\nimport './typeahead/highlight.js';\nimport './typeahead/typeahead.js';\n\nexport * from './app-bar/top-app-bar.js';\nexport * from './button/button.js';\nexport * from './button/button-base.js';\nexport * from './button/button-set.js';\nexport * from './button/fab.js';\nexport * from './button/icon-button.js';\nexport * from './card/card.js';\nexport * from './card/card-content.js';\nexport * from './card/card-media.js';\nexport * from './chip/chip.js';\nexport * from './chip-field/chip-field.js';\nexport * from './chip/chip-set.js';\nexport * from './dialog/dialog.js';\nexport * from './checkbox/checkbox.js';\nexport * from './radio/radio.js';\nexport * from './switch/switch.js';\nexport * from './switch/switch-list-item.js';\nexport * from './elevation/elevation.js';\nexport * from './field/field.js';\nexport * from './text-field/text-field.js';\nexport * from './text-area/text-area.js';\nexport * from './select/select.js';\nexport * from './select/option.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './navigation/drawer.js';\nexport * from './navigation/drawer-item.js';\nexport * from './navigation/side-navigation.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/progress-bar.js';\nexport * from './ripple/ripple.js';\nexport * from './snackbar/snackbar.js';\nexport * from './tab-bar/tab-bar.js';\nexport * from './tab-bar/tab.js';\nexport * from './theme/theme-builder.js';\nexport * from './typeahead/highlight.js';\nexport * from './typeahead/typeahead.js';\n"]}

package/navigation/side-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAS3D,OAAO,2BAA2B,CAAC;AAEnC,qBACa,gBAAiB,SAAQ,UAAU;;IAE9C,OAAgB,MAAM,4BAGlB;IAGJ,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IACe,OAAO,CADW;IACjD,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAG0B,eAAe,EAAG,GAAG,CAAC;IAChC,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAMrC,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IA4BvB,OAAO,CAAC,uBAAuB;IAS/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}
+{"version":3,"file":"side-navigation.d.ts","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAU3D,OAAO,2BAA2B,CAAC;AAEnC,qBACa,gBAAiB,SAAQ,UAAU;;IAC9C,OAAgB,MAAM,4BAGpB;IAGF,OAAO,CAAC,qBAAqB,CAAS;IAEtC;;;;;OAKG;IACH,IACI,YAAY,IAGe,OAAO,CADrC;IACD,IAAI,YAAY,CAAC,YAAY,EAAE,OAAO,EAMrC;IAG0B,eAAe,EAAG,GAAG,CAAC;IAChC,KAAK,EAAG,WAAW,CAAC;IACT,eAAe,EAAE,WAAW,GAAG,SAAS,CAAC;IAE5D,MAAM,IAAI,kBAAkB;IAMrC,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,eAAe;IAiCvB,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,sBAAsB;IAgB9B,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,UAAU;CAInB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,gBAAgB,CAAC;KACvC;CACF"}

package/navigation/side-navigation.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles as baseStyles } from '../shared/base.styles.js';
 import { styles as swiperStyles } from './side-navigation-swiper.styles.js';
 import { styles } from './side-navigation.styles.js';
@@ -19,7 +20,7 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
     }
     static { this.styles = [
         baseStyles,
-        config.navigationDrawer.useSwiperJs ? swiperStyles : styles
+        config.navigationDrawer.useSwiperJs ? swiperStyles : styles,
     ]; }
     #toggleDrawer;
     /**
@@ -28,7 +29,9 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
      * _Modal drawer_: Open if `true`, closed if `false`
      * _Standard drawer_: Collapsed if `true`, visible if `false`
      */
-    get toggleDrawer() { return this.#toggleDrawer; }
+    get toggleDrawer() {
+        return this.#toggleDrawer;
+    }
     set toggleDrawer(toggleDrawer) {
         this.#toggleDrawer = toggleDrawer;
         if (!this.disableSlideAnimation) {
@@ -41,12 +44,15 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
             : this.renderDefault();
     }
     renderDefault() {
+        const classes = { toggle: this.toggleDrawer };
         return html `
       <div class="grid container">
         <div>
           <div class="navigation">
-            <div class="scrim ${this.toggleDrawer ? 'toggle' : ''}" @click="${this.scrimClick}"></div>
-            <div class="drawer ${this.toggleDrawer ? 'toggle' : ''}">
+            <div
+              class="scrim ${classMap(classes)}"
+              @click="${this.scrimClick}"></div>
+            <div class="drawer ${classMap(classes)}">
               <u-elevation></u-elevation>
               <div class="drawer-container">
                 <slot name="drawer"></slot>
@@ -62,6 +68,7 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
     `;
     }
     renderWithSwipe() {
+        const classes = { toggle: this.toggleDrawer };
         return html `
       <swiper-container
         class="container"
@@ -74,7 +81,7 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
         @swipertransitionend="${this.swiperTransitionEnd}"
         @swipertransitionstart="${this.swiperTransitionStart}"
         @swiperslidesgridlengthchange="${this.slidesGridLengthChange}">
-        <swiper-slide class="drawer ${this.toggleDrawer ? 'toggle' : ''}">
+        <swiper-slide class="drawer ${classMap(classes)}">
           <u-elevation></u-elevation>
           <div class="drawer-container">
             <slot name="drawer"></slot>
@@ -85,8 +92,12 @@ let UmSideNavigation = class UmSideNavigation extends LitElement {
         <div id="scroll-container" class="content" slot="container-end">
           <slot></slot>
         </div>
-        <div class="scrim ${this.toggleDrawer ? 'toggle' : ''}" @click="${this.scrimClick}" slot="container-end"></div>
-      </swiper-container>`;
+        <div
+          class="scrim ${classMap(classes)}"
+          @click="${this.scrimClick}"
+          slot="container-end"></div>
+      </swiper-container>
+    `;
     }
     swiperActiveIndexChange() {
         if (!this.swiperContainer?.swiper) {

package/navigation/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport { config } from '../config.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n\n  static override styles = [\n      baseStyles,\n      config.navigationDrawer.useSwiperJs ? swiperStyles : styles\n    ];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({type: Boolean, attribute: 'toggle-drawer'})\n  get toggleDrawer() { return this.#toggleDrawer; }\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @query('swiper-container') swiperContainer!: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs\n      ? this.renderWithSwipe()\n      : this.renderDefault();\n  }\n\n  private renderDefault() {\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${this.toggleDrawer ? 'toggle' : ''}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div class=\"scrim ${this.toggleDrawer ? 'toggle' : ''}\" @click=\"${this.scrimClick}\" slot=\"container-end\"></div>\n      </swiper-container>`;\n  }\n\n  private swiperActiveIndexChange() {\n\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() =>\n      this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const swiper = (<any>e).detail[0];\n    this.scrim.style.setProperty('--_modal-drawer-open-progress', `${1 - swiper.progress}`);\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer.swiper.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}
+{"version":3,"file":"side-navigation.js","sourceRoot":"","sources":["../../src/navigation/side-navigation.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles as swiperStyles } from './side-navigation-swiper.styles.js';\nimport { styles } from './side-navigation.styles.js';\n\nimport { config } from '../config.js';\n\nimport '../elevation/elevation.js';\n\n@customElement('u-side-navigation')\nexport class UmSideNavigation extends LitElement {\n  static override styles = [\n    baseStyles,\n    config.navigationDrawer.useSwiperJs ? swiperStyles : styles,\n  ];\n\n  #toggleDrawer = false;\n  private disableSlideAnimation = false;\n\n  /**\n   * Toggle the navigation drawer visibility\n   *\n   * _Modal drawer_: Open if `true`, closed if `false`\n   * _Standard drawer_: Collapsed if `true`, visible if `false`\n   */\n  @property({ type: Boolean, attribute: 'toggle-drawer' })\n  get toggleDrawer() {\n    return this.#toggleDrawer;\n  }\n  set toggleDrawer(toggleDrawer: boolean) {\n    this.#toggleDrawer = toggleDrawer;\n\n    if (!this.disableSlideAnimation) {\n      this.swiperContainer?.swiper?.slideTo(toggleDrawer ? 0 : 1);\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  @query('swiper-container') swiperContainer!: any;\n  @query('.scrim') scrim!: HTMLElement;\n  @query('#scroll-container') scrollContainer: HTMLElement | undefined;\n\n  override render(): HTMLTemplateResult {\n    return config.navigationDrawer.useSwiperJs\n      ? this.renderWithSwipe()\n      : this.renderDefault();\n  }\n\n  private renderDefault() {\n    const classes = { toggle: this.toggleDrawer };\n\n    return html`\n      <div class=\"grid container\">\n        <div>\n          <div class=\"navigation\">\n            <div\n              class=\"scrim ${classMap(classes)}\"\n              @click=\"${this.scrimClick}\"></div>\n            <div class=\"drawer ${classMap(classes)}\">\n              <u-elevation></u-elevation>\n              <div class=\"drawer-container\">\n                <slot name=\"drawer\"></slot>\n              </div>\n            </div>\n            <slot name=\"rail\"></slot>\n          </div>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderWithSwipe() {\n    const classes = { toggle: this.toggleDrawer };\n    return html`\n      <swiper-container\n        class=\"container\"\n        initial-slide=\"1\"\n        resistance-ratio=\"0\"\n        slides-per-view=\"auto\"\n        simulate-touch=\"false\"\n        @swiperactiveindexchange=\"${this.swiperActiveIndexChange}\"\n        @swiperslidermove=\"${this.swiperSliderMove}\"\n        @swipertransitionend=\"${this.swiperTransitionEnd}\"\n        @swipertransitionstart=\"${this.swiperTransitionStart}\"\n        @swiperslidesgridlengthchange=\"${this.slidesGridLengthChange}\">\n        <swiper-slide class=\"drawer ${classMap(classes)}\">\n          <u-elevation></u-elevation>\n          <div class=\"drawer-container\">\n            <slot name=\"drawer\"></slot>\n          </div>\n        </swiper-slide>\n        <swiper-slide class=\"dummy-slide\"></swiper-slide>\n\n        <div id=\"scroll-container\" class=\"content\" slot=\"container-end\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"scrim ${classMap(classes)}\"\n          @click=\"${this.scrimClick}\"\n          slot=\"container-end\"></div>\n      </swiper-container>\n    `;\n  }\n\n  private swiperActiveIndexChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.toggleDrawer = !this.swiperContainer.swiper.activeIndex;\n  }\n\n  private swiperTransitionStart() {\n    this.scrim.classList.add('moving');\n  }\n\n  private slidesGridLengthChange() {\n    if (!this.swiperContainer?.swiper) {\n      return;\n    }\n\n    this.classList.add('disable-transition');\n\n    const gridLength = this.swiperContainer.swiper.snapGrid.length;\n    this.swiperContainer.swiper.slideTo(gridLength === 1 ? 0 : 1, 0);\n    this.disableSlideAnimation = true;\n    this.toggleDrawer = true;\n    this.toggleDrawer = false;\n    this.disableSlideAnimation = false;\n    setTimeout(() => this.classList.remove('disable-transition'));\n  }\n\n  private swiperTransitionEnd() {\n    this.scrim.style.removeProperty('--_modal-drawer-open-progress');\n    this.scrim.classList.remove('moving');\n  }\n\n  private swiperSliderMove(e: Event) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const swiper = (<any>e).detail[0];\n    this.scrim.style.setProperty(\n      '--_modal-drawer-open-progress',\n      `${1 - swiper.progress}`,\n    );\n  }\n\n  private scrimClick() {\n    this.toggleDrawer = false;\n    this.swiperContainer.swiper.slideTo(1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-side-navigation': UmSideNavigation;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-material/web",
-  "version": "3.0.91",
+  "version": "3.0.93",
   "description": "Material web components",
   "type": "module",
   "keywords": [
@@ -68,6 +68,7 @@
     "@angular/platform-browser-dynamic": "^17.3.4",
     "@angular/router": "^17.3.4",
     "@custom-elements-manifest/analyzer": "^0.6.3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@open-wc/testing": "^3.1.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
@@ -80,8 +81,7 @@
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-import-helpers": "^1.3.1",
-    "eslint-plugin-unused-imports": "^3.1.0",
+    "eslint-plugin-unused-imports": "^3.2.0",
     "gulp": "^4.0.2",
     "gulp-changed": "^5.0.2",
     "gulp-newer": "^1.4.0",
@@ -98,7 +98,7 @@
     "ngx-markdown": "^17.2.0",
     "ngx-pug-builders": "^17.0.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.2",
+    "prettier": "2.8.8",
     "pug": "^3.0.2",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",

package/select/select.d.ts

@@ -1,5 +1,5 @@
-import { PropertyValues } from '@lit/reactive-element';
 import { TemplateResult } from 'lit';
+import { PropertyValues } from '@lit/reactive-element';
 import { UmMenu } from '../menu/menu.js';
 import { UmMenuField } from '../shared/menu-field/menu-field.js';
 import { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';

package/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAgB,YAAW,WAAW;;IAElE,OAAgB,MAAM,iCAAoC;IAE1D,aAAa,EAAE,cAAc,CAMxB;IAeL;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEsB,KAAK,EAAG,MAAM,CAAC;IACd,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;IAE5C;;OAEG;IACH,IACI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,QAAQ,EAAE,CAIhC;IAED,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAIzB;;IASD,cAAc;cA+FK,aAAa,IAAI,cAAc;cAW/B,kBAAkB,IAAI,cAAc;cAQpC,yBAAyB,IAAI,cAAc;cAO3C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAUhF,iBAAiB;IAOjB,oBAAoB;IAuE7B,IAAI,UAAU,IAAI,QAAQ,EAAE,CAE3B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMvD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,OAAO,aAAa,CAAC;AAErB,qBACa,QAAS,SAAQ,eAAgB,YAAW,WAAW;;IAClE,OAAgB,MAAM,iCAAoC;IAE1D,aAAa,EAAE,cAAc,CAMxB;IAeL;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAEsB,KAAK,EAAG,MAAM,CAAC;IACd,OAAO,EAAG,iBAAiB,CAAC;IAC7B,MAAM,EAAG,WAAW,CAAC;IAE5C;;OAEG;IACH,IACI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,QAAQ,EAAE,CAIhC;IAED,IAAI,QAAQ,IAAI,QAAQ,EAAE,CAIzB;;IAaD,cAAc;cAkGK,aAAa,IAAI,cAAc;cAW/B,kBAAkB,IAAI,cAAc;cAQpC,yBAAyB,IAAI,cAAc;cAO3C,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAMnD,wBAAwB,CAC/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,GAAG,IAAI;IAWb,iBAAiB;IAOjB,oBAAoB;IA2E7B,IAAI,UAAU,IAAI,QAAQ,EAAE,CAE3B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/select/select.js

@@ -92,7 +92,11 @@ let UmSelect = class UmSelect extends UmTextFieldBase {
             this.#navigationController.blurMenu();
         };
         this.#mutationObserver = new MutationObserver(() => this._updateOptions());
-        this.#mutationObserver.observe(this, { characterData: true, childList: true, subtree: true });
+        this.#mutationObserver.observe(this, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
     }
     _updateOptions() {
         const options = this._options;