@material/web 0.1.0-alpha.0 → 0.1.0-alpha.2

package/field/lib/filled-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,KAAK;IAAtC;;QACqB,0BAAqB,GAAG,EAAE,CAAC;IAwEhD,CAAC;IAtEC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,WAAW;UACxD,IAAI,CAAC,uBAAuB,EAAE;;KAEnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,gBAAgB;QAChB,MAAM,WAAW,GAAG,EAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,EAAC,CAAC;QAClE,OAAO,IAAI,CAAA;;QAEP,KAAK,CAAC,uBAAuB,EAAE;;iBAEtB,QAAQ,CAAC,WAAW,CAAC;KACjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;IAES,WAAW,CAAC,KAA4B;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,0EAA0E;QAC1E,uCAAuC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAES,KAAK,CAAC,2BAA2B,CAAC,KAA6B;QACvE,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE;YACT,qEAAqE;YACrE,wBAAwB;YACxB,MAAM,YAAY,GAAG,SAAS,IAAI,KAAK,CAAC;YACxC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,eAAe,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC;SAC9C;QAED,IAAI,CAAC,qBAAqB,GAAG,eAAe,CAAC;IAC/C,CAAC;CACF;AAxEU;IAAR,KAAK,EAAE;;0DAAsC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {state} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class FilledField extends Field {\n  @state() protected strokeTransformOrigin = '';\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-field--filled': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\" @click=${this.handleClick}>\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderContainerContents(): TemplateResult {\n    /** @styleMap */\n    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};\n    return html`\n      <span class=\"md3-field__state-layer\"></span>\n      ${super.renderContainerContents()}\n      <span class=\"md3-field__active-indicator\"\n        style=\"${styleMap(strokeStyle)}\"></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderMiddleContents(): TemplateResult {\n    return html`\n      ${this.renderFloatingLabel()}\n      ${this.renderRestingLabel()}\n      ${super.renderMiddleContents()}\n    `;\n  }\n\n  protected handleClick(event: MouseEvent|TouchEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateStrokeTransformOrigin(event);\n  }\n\n  protected override update(props: PropertyValues<this>) {\n    // Upon losing focus, the stroke resets to expanding from the center, such\n    // as when re-focusing with a keyboard.\n    const unfocusing = props.has('focused') && !this.focused;\n    if (unfocusing) {\n      this.updateStrokeTransformOrigin();\n    }\n\n    super.update(props);\n  }\n\n  protected async updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {\n    let transformOrigin = '';\n    if (event) {\n      // Can't use instanceof TouchEvent since Firefox does not provide the\n      // constructor globally.\n      const isTouchEvent = 'touches' in event;\n      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;\n      const rootRect = this.getBoundingClientRect();\n      transformOrigin = `${eventX - rootRect.x}px`;\n    }\n\n    this.strokeTransformOrigin = transformOrigin;\n  }\n}\n"]}
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAiC,MAAM,KAAK,CAAC;AACzD,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AAEjC,qBAAqB;AACrB,MAAM,OAAO,WAAY,SAAQ,KAAK;IAAtC;;QACqB,0BAAqB,GAAG,EAAE,CAAC;IAyEhD,CAAC;IAvEC,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,mBAAmB,EAAE,IAAI;SAC1B,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,eAAe;QAChC,OAAO,IAAI,CAAA;kDACmC,IAAI,CAAC,WAAW;UACxD,IAAI,CAAC,uBAAuB,EAAE;;KAEnC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,uBAAuB;QACxC,gBAAgB;QAChB,MAAM,WAAW,GAAG,EAAC,eAAe,EAAE,IAAI,CAAC,qBAAqB,EAAC,CAAC;QAClE,OAAO,IAAI,CAAA;;QAEP,KAAK,CAAC,uBAAuB,EAAE;;iBAEtB,QAAQ,CAAC,WAAW,CAAC;KACjC,CAAC;IACJ,CAAC;IAED,mBAAmB;IACA,oBAAoB;QACrC,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,kBAAkB,EAAE;QACzB,KAAK,CAAC,oBAAoB,EAAE;KAC/B,CAAC;IACJ,CAAC;IAED,sBAAsB;IACZ,WAAW,CAAC,KAA4B;QAChD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IAEkB,MAAM,CAAC,KAA2B;QACnD,0EAA0E;QAC1E,uCAAuC;QACvC,MAAM,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QACzD,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,2BAA2B,EAAE,CAAC;SACpC;QAED,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC;IAES,KAAK,CAAC,2BAA2B,CAAC,KAA6B;QACvE,IAAI,eAAe,GAAG,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE;YACT,qEAAqE;YACrE,wBAAwB;YACxB,MAAM,YAAY,GAAG,SAAS,IAAI,KAAK,CAAC;YACxC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YACvE,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,eAAe,GAAG,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC;SAC9C;QAED,IAAI,CAAC,qBAAqB,GAAG,eAAe,CAAC;IAC/C,CAAC;CACF;AAzEU;IAAR,KAAK,EAAE;;0DAAsC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {state} from 'lit/decorators.js';\nimport {ClassInfo} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Field} from './field.js';\n\n/** @soyCompatible */\nexport class FilledField extends Field {\n  @state() protected strokeTransformOrigin = '';\n\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-field--filled': true,\n    };\n  }\n\n  /** @soyTemplate */\n  protected override renderContainer(): TemplateResult {\n    return html`\n      <span class=\"md3-field__container\" @click=${this.handleClick}>\n        ${this.renderContainerContents()}\n      </span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderContainerContents(): TemplateResult {\n    /** @styleMap */\n    const strokeStyle = {transformOrigin: this.strokeTransformOrigin};\n    return html`\n      <span class=\"md3-field__state-layer\"></span>\n      ${super.renderContainerContents()}\n      <span class=\"md3-field__active-indicator\"\n        style=\"${styleMap(strokeStyle)}\"></span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected override renderMiddleContents(): TemplateResult {\n    return html`\n      ${this.renderFloatingLabel()}\n      ${this.renderRestingLabel()}\n      ${super.renderMiddleContents()}\n    `;\n  }\n\n  /** @bubbleWizEvent */\n  protected handleClick(event: MouseEvent|TouchEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateStrokeTransformOrigin(event);\n  }\n\n  protected override update(props: PropertyValues<this>) {\n    // Upon losing focus, the stroke resets to expanding from the center, such\n    // as when re-focusing with a keyboard.\n    const unfocusing = props.has('focused') && !this.focused;\n    if (unfocusing) {\n      this.updateStrokeTransformOrigin();\n    }\n\n    super.update(props);\n  }\n\n  protected async updateStrokeTransformOrigin(event?: MouseEvent|TouchEvent) {\n    let transformOrigin = '';\n    if (event) {\n      // Can't use instanceof TouchEvent since Firefox does not provide the\n      // constructor globally.\n      const isTouchEvent = 'touches' in event;\n      const eventX = isTouchEvent ? event.touches[0].clientX : event.clientX;\n      const rootRect = this.getBoundingClientRect();\n      transformOrigin = `${eventX - rootRect.x}px`;\n    }\n\n    this.strokeTransformOrigin = transformOrigin;\n  }\n}\n"]}

package/field/lib/filled-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-field--filled .md3-field__container{overflow:hidden;z-index:0}.md3-field--filled .md3-field__container::before,.md3-field--filled .md3-field__container::after{border-radius:inherit;content:"";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field--filled .md3-field__container::after{visibility:hidden}.md3-field--filled:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field--filled .md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom-style:solid;inset:auto 0 0 0;content:"";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--filled .md3-field__container{flex-basis:var(--md-filled-field-container-height, 56px)}.md3-field--filled .md3-field__content{color:var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__content{color:var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--focused .md3-field__content{color:var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__content{color:var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-filled-field-disabled-content-opacity, 0.38)}.md3-field--filled .md3-field__label{color:var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__label{color:var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focused .md3-field__label{color:var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__label{color:var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__label{font-family:var(--md-filled-field-label-text-font, Roboto);font-weight:var(--md-filled-field-label-text-weight, 400);letter-spacing:var(--md-filled-field-label-text-tracking, 0.03125rem)}.md3-field--filled .md3-field__label--resting{font-size:var(--md-filled-field-label-text-size, 1rem);line-height:var(--md-filled-field-label-text-line-height, 1.5rem)}.md3-field--filled .md3-field__label--floating{font-size:var(--md-filled-field-label-text-populated-size, 0.75rem);line-height:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-filled-field-disabled-label-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{color:var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__supporting-text{color:var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{color:var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__supporting-text{font-family:var(--md-filled-field-supporting-text-font, Roboto);font-size:var(--md-filled-field-supporting-text-size, 0.75rem);font-weight:var(--md-filled-field-supporting-text-weight, 400);letter-spacing:var(--md-filled-field-supporting-text-tracking, 0.025rem);line-height:var(--md-filled-field-supporting-text-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-filled-field-disabled-supporting-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{padding:0 var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-filled-field-supporting-text-padding-top, 4px)}.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{opacity:var(--md-filled-field-disabled-active-indicator-opacity, 0.38)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-active-indicator-height, 1px)}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-hover-active-indicator-height, 1px)}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-disabled-active-indicator-height, 1px)}.md3-field--filled .md3-field__active-indicator::after{border-bottom-width:var(--md-filled-field-focus-active-indicator-height, 2px)}.md3-field--filled .md3-field__container::before{background:var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-field--filled.md3-field--disabled .md3-field__container::before{background:var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__container::before{opacity:var(--md-filled-field-disabled-container-opacity, 0.04)}.md3-field--filled:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled .md3-field__container{padding-top:var(--md-filled-field-container-padding-vertical, 8px);padding-bottom:var(--md-filled-field-container-padding-vertical, 8px)}.md3-field--filled .md3-field__container{border-start-start-radius:var(--md-filled-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-filled-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-filled-field-container-shape-end-end, 0);border-end-start-radius:var(--md-filled-field-container-shape-end-start, 0)}.md3-field--filled:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled:hover .md3-field__state-layer{background:var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{background:var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__state-layer{opacity:var(--md-filled-field-hover-state-layer-opacity, 0.08)}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{opacity:var(--md-filled-field-error-hover-state-layer-opacity, 0.08)}/*# sourceMappingURL=filled-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, 0px);--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-filled-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 20px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 8px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);z-index:0}.md3-field__container::before{background:var(--_container-color)}.md3-field__container::after{visibility:hidden}.md3-field__container::before,.md3-field__container::after{border-radius:inherit;content:"";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:"";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--_label-text-populated-line-height)}:hover .md3-field__active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}:hover .md3-field__state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-field__active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.md3-field--disabled .md3-field__container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */
 `;
 //# sourceMappingURL=filled-styles.css.js.map

package/field/lib/filled-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-field--filled .md3-field__container{overflow:hidden;z-index:0}.md3-field--filled .md3-field__container::before,.md3-field--filled .md3-field__container::after{border-radius:inherit;content:\"\";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field--filled .md3-field__container::after{visibility:hidden}.md3-field--filled:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field--filled .md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom-style:solid;inset:auto 0 0 0;content:\"\";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--filled .md3-field__container{flex-basis:var(--md-filled-field-container-height, 56px)}.md3-field--filled .md3-field__content{color:var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__content{color:var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--focused .md3-field__content{color:var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__content{color:var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--filled.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-filled-field-disabled-content-opacity, 0.38)}.md3-field--filled .md3-field__label{color:var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__label{color:var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focused .md3-field__label{color:var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__label{color:var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__label{font-family:var(--md-filled-field-label-text-font, Roboto);font-weight:var(--md-filled-field-label-text-weight, 400);letter-spacing:var(--md-filled-field-label-text-tracking, 0.03125rem)}.md3-field--filled .md3-field__label--resting{font-size:var(--md-filled-field-label-text-size, 1rem);line-height:var(--md-filled-field-label-text-line-height, 1.5rem)}.md3-field--filled .md3-field__label--floating{font-size:var(--md-filled-field-label-text-populated-size, 0.75rem);line-height:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-filled-field-disabled-label-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{color:var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__supporting-text{color:var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{color:var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled .md3-field__supporting-text{font-family:var(--md-filled-field-supporting-text-font, Roboto);font-size:var(--md-filled-field-supporting-text-size, 0.75rem);font-weight:var(--md-filled-field-supporting-text-weight, 400);letter-spacing:var(--md-filled-field-supporting-text-tracking, 0.025rem);line-height:var(--md-filled-field-supporting-text-line-height, 1rem)}.md3-field--filled.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-filled-field-disabled-supporting-text-opacity, 0.38)}.md3-field--filled .md3-field__supporting-text{padding:0 var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-filled-field-supporting-text-padding-top, 4px)}.md3-field--filled .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-filled-field-supporting-text-padding, 16px)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__active-indicator::before{border-bottom-color:var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--filled:not(.md3-field--disabled).md3-field--error .md3-field__active-indicator::after{border-bottom-color:var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e))}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{opacity:var(--md-filled-field-disabled-active-indicator-opacity, 0.38)}.md3-field--filled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-active-indicator-height, 1px)}.md3-field--filled:hover .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-hover-active-indicator-height, 1px)}.md3-field--filled.md3-field--disabled .md3-field__active-indicator::before{border-bottom-width:var(--md-filled-field-disabled-active-indicator-height, 1px)}.md3-field--filled .md3-field__active-indicator::after{border-bottom-width:var(--md-filled-field-focus-active-indicator-height, 2px)}.md3-field--filled .md3-field__container::before{background:var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec))}.md3-field--filled.md3-field--disabled .md3-field__container::before{background:var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled.md3-field--disabled .md3-field__container::before{opacity:var(--md-filled-field-disabled-container-opacity, 0.04)}.md3-field--filled:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--md-filled-field-container-padding-horizontal, 16px)}.md3-field--filled .md3-field__container{padding-top:var(--md-filled-field-container-padding-vertical, 8px);padding-bottom:var(--md-filled-field-container-padding-vertical, 8px)}.md3-field--filled .md3-field__container{border-start-start-radius:var(--md-filled-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-filled-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-filled-field-container-shape-end-end, 0);border-end-start-radius:var(--md-filled-field-container-shape-end-start, 0)}.md3-field--filled:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--md-filled-field-label-text-populated-line-height, 1rem)}.md3-field--filled:hover .md3-field__state-layer{background:var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{background:var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--filled:hover .md3-field__state-layer{opacity:var(--md-filled-field-hover-state-layer-opacity, 0.08)}.md3-field--filled:not(.md3-field--disabled).md3-field--error:hover .md3-field__state-layer{opacity:var(--md-filled-field-error-hover-state-layer-opacity, 0.08)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-filled-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-filled-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-filled-field-container-shape-end-end, 0px);--_container-shape-end-start: var(--md-filled-field-container-shape-end-start, 0px);--_active-indicator-color: var(--md-filled-field-active-indicator-color, var(--md-sys-color-on-surface-variant, #49454f));--_active-indicator-height: var(--md-filled-field-active-indicator-height, 1px);--_container-color: var(--md-filled-field-container-color, var(--md-sys-color-surface-variant, #e7e0ec));--_container-height: var(--md-filled-field-container-height, 56px);--_disabled-active-indicator-color: var(--md-filled-field-disabled-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-active-indicator-height: var(--md-filled-field-disabled-active-indicator-height, 1px);--_disabled-active-indicator-opacity: var(--md-filled-field-disabled-active-indicator-opacity, 0.38);--_disabled-container-color: var(--md-filled-field-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-container-opacity: var(--md-filled-field-disabled-container-opacity, 0.04);--_disabled-label-text-color: var(--md-filled-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-filled-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-filled-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-filled-field-disabled-leading-icon-opacity, 0.38);--_disabled-supporting-text-color: var(--md-filled-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-filled-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-filled-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-filled-field-disabled-trailing-icon-opacity, 0.38);--_error-active-indicator-color: var(--md-filled-field-error-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-active-indicator-color: var(--md-filled-field-error-focus-active-indicator-color, var(--md-sys-color-error, #b3261e));--_error-focus-label-text-color: var(--md-filled-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-filled-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-supporting-text-color: var(--md-filled-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-filled-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-active-indicator-color: var(--md-filled-field-error-hover-active-indicator-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-label-text-color: var(--md-filled-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-filled-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-state-layer-color: var(--md-filled-field-error-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-state-layer-opacity: var(--md-filled-field-error-hover-state-layer-opacity, 0.08);--_error-hover-supporting-text-color: var(--md-filled-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-filled-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-filled-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-filled-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-supporting-text-color: var(--md-filled-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-filled-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-active-indicator-color: var(--md-filled-field-focus-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_focus-active-indicator-height: var(--md-filled-field-focus-active-indicator-height, 2px);--_focus-label-text-color: var(--md-filled-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-filled-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-supporting-text-color: var(--md-filled-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-filled-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-active-indicator-color: var(--md-filled-field-hover-active-indicator-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-active-indicator-height: var(--md-filled-field-hover-active-indicator-height, 1px);--_hover-label-text-color: var(--md-filled-field-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-leading-icon-color: var(--md-filled-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-filled-field-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-filled-field-hover-state-layer-opacity, 0.08);--_hover-supporting-text-color: var(--md-filled-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-filled-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-filled-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-filled-field-label-text-font, Roboto);--_label-text-line-height: var(--md-filled-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-filled-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-filled-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-filled-field-label-text-size, 1rem);--_label-text-tracking: var(--md-filled-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-filled-field-label-text-weight, 400);--_leading-icon-color: var(--md-filled-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-filled-field-leading-icon-size, 20px);--_supporting-text-color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-filled-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-filled-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-filled-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-filled-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-filled-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-filled-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-filled-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-filled-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-filled-field-container-padding-vertical, 8px);--_content-color: var(--md-filled-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-filled-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-filled-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-filled-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-filled-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-filled-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-filled-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-filled-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_supporting-text-padding: var(--md-filled-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-filled-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__container{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);overflow:hidden;padding-top:var(--_container-padding-vertical);padding-bottom:var(--_container-padding-vertical);z-index:0}.md3-field__container::before{background:var(--_container-color)}.md3-field__container::after{visibility:hidden}.md3-field__container::before,.md3-field__container::after{border-radius:inherit;content:\"\";display:flex;height:100%;position:absolute;width:100%;z-index:-1}.md3-field__label--floating{position:absolute;top:0}.md3-field__state-layer{border-radius:inherit;height:100%;position:absolute;width:100%;visibility:hidden;z-index:-1}.md3-field:not(.md3-field--disabled):hover .md3-field__state-layer{visibility:visible}.md3-field__active-indicator{inset:auto 0 0 0;pointer-events:none;position:absolute;width:100%}.md3-field__active-indicator::before,.md3-field__active-indicator::after{border-bottom:var(--_active-indicator-height) solid var(--_active-indicator-color);inset:auto 0 0 0;content:\"\";position:absolute;width:100%}.md3-field__active-indicator::after{opacity:0;transform:scaleX(0);transform-origin:inherit;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),transform 0s ease 150ms}.md3-field--focused .md3-field__active-indicator::after{opacity:1;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:var(--_container-padding-horizontal)}.md3-field:not(.md3-field--no-label) .md3-field__middle{padding-top:var(--_label-text-populated-line-height)}:hover .md3-field__active-indicator::before{border-bottom-color:var(--_hover-active-indicator-color);border-bottom-width:var(--_hover-active-indicator-height)}:hover .md3-field__state-layer{background:var(--_hover-state-layer-color);opacity:var(--_hover-state-layer-opacity)}.md3-field__active-indicator::after{border-bottom-color:var(--_focus-active-indicator-color);border-bottom-width:var(--_focus-active-indicator-height)}.md3-field--disabled .md3-field__active-indicator::before{border-bottom-color:var(--_disabled-active-indicator-color);border-bottom-width:var(--_disabled-active-indicator-height);opacity:var(--_disabled-active-indicator-opacity)}.md3-field--disabled .md3-field__container::before{background:var(--_disabled-container-color);opacity:var(--_disabled-container-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::before{border-bottom-color:var(--_error-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__active-indicator::before{border-bottom-color:var(--_error-hover-active-indicator-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__state-layer{background:var(--_error-hover-state-layer-color);opacity:var(--_error-hover-state-layer-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__active-indicator::after{border-bottom-color:var(--_error-focus-active-indicator-color)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/field/lib/filled-styles.scss

@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './filled-field-theme';
 @use './filled-field';
 
-@include filled-field.static-styles;
-
-.md3-field--filled {
-  @include filled-field-theme.theme-styles(filled-field-theme.$light-theme);
-}
+@include filled-field.styles;

package/field/lib/outlined-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `.md3-field__outline{display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:"";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0}.md3-field__outline-end{flex-grow:1}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field--outlined .md3-field__container{flex-basis:var(--md-outlined-field-container-height, 56px)}.md3-field--outlined .md3-field__content{color:var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:hover .md3-field__content{color:var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__content{color:var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled .md3-field__content{color:var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-outlined-field-disabled-content-opacity, 0.38)}.md3-field--outlined .md3-field__label{color:var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__label{color:var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__label{color:var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__label{color:var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__label{font-family:var(--md-outlined-field-label-text-font, Roboto);font-weight:var(--md-outlined-field-label-text-weight, 400);letter-spacing:var(--md-outlined-field-label-text-tracking, 0.03125rem)}.md3-field--outlined .md3-field__label--resting{font-size:var(--md-outlined-field-label-text-size, 1rem);line-height:var(--md-outlined-field-label-text-line-height, 1.5rem)}.md3-field--outlined .md3-field__label--floating{font-size:var(--md-outlined-field-label-text-populated-size, 0.75rem);line-height:var(--md-outlined-field-label-text-populated-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-outlined-field-disabled-label-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{color:var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__supporting-text{color:var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{color:var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__supporting-text{font-family:var(--md-outlined-field-supporting-text-font, Roboto);font-size:var(--md-outlined-field-supporting-text-size, 0.75rem);font-weight:var(--md-outlined-field-supporting-text-weight, 400);letter-spacing:var(--md-outlined-field-supporting-text-tracking, 0.025rem);line-height:var(--md-outlined-field-supporting-text-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-outlined-field-disabled-supporting-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{padding:0 var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-outlined-field-supporting-text-padding-top, 4px)}.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__label--floating{transform:translateY(calc(-100% + var(--md-outlined-field-label-text-padding-bottom, 8px)))}.md3-field--outlined .md3-field__outline-start,.md3-field--outlined:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-start, 4px),var(--md-outlined-field-container-shape-end-start, 4px)) + var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-end, 4px),var(--md-outlined-field-container-shape-end-end, 4px)))}.md3-field--outlined .md3-field__outline{border-start-start-radius:var(--md-outlined-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-outlined-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-outlined-field-container-shape-end-end, 4px);border-end-start-radius:var(--md-outlined-field-container-shape-end-start, 4px)}.md3-field--outlined .md3-field__outline{border-color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e))}.md3-field--outlined:hover .md3-field__outline{border-color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__outline{border-color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__outline{border-color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__outline{border-color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-start::after{margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-notch{padding:0 var(--md-outlined-field-outline-label-padding, 4px);margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px));margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-end{margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined.md3-field--disabled .md3-field__outline-start,.md3-field--outlined.md3-field--disabled .md3-field__outline-end,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--md-outlined-field-disabled-outline-opacity, 0.12)}.md3-field--outlined .md3-field__outline-notch{max-width:calc(100% - 2 * var(--md-outlined-field-container-padding-horizontal, 16px))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-end::before,.md3-field--outlined .md3-field__outline-panel-inactive,.md3-field--outlined .md3-field__outline-panel-inactive::before,.md3-field--outlined .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-outline-width, 1px)}.md3-field--outlined:hover .md3-field__outline-start::before,.md3-field--outlined:hover .md3-field__outline-end::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive,.md3-field--outlined:hover .md3-field__outline-panel-inactive::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-hover-outline-width, 1px)}.md3-field--outlined .md3-field__outline-start::after,.md3-field--outlined .md3-field__outline-end::after,.md3-field--outlined .md3-field__outline-panel-active,.md3-field--outlined .md3-field__outline-panel-active::before,.md3-field--outlined .md3-field__outline-panel-active::after{border-width:var(--md-outlined-field-focus-outline-width, 2px)}.md3-field--outlined.md3-field--disabled .md3-field__outline-start::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-end::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-disabled-outline-width, 1px)}/*# sourceMappingURL=outlined-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, 4px);--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, 4px);--_container-height: var(--md-outlined-field-container-height, 56px);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, Roboto);--_label-text-line-height: var(--md-outlined-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-outlined-field-label-text-size, 1rem);--_label-text-tracking: var(--md-outlined-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-outlined-field-label-text-weight, 400);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-outlined-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-outlined-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 8px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:"";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.md3-field__outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field__label--floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.md3-field__outline-start,.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.md3-field__outline-start::before,.md3-field__outline-end::before,.md3-field__outline-panel-inactive,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .md3-field__outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .md3-field__outline-start::before,:hover .md3-field__outline-end::before,:hover .md3-field__outline-panel-inactive,:hover .md3-field__outline-panel-inactive::before,:hover .md3-field__outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.md3-field--focused .md3-field__outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.md3-field__outline-start::after,.md3-field__outline-end::after,.md3-field__outline-panel-active,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-width:var(--_focus-outline-width)}.md3-field--disabled .md3-field__outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.md3-field--disabled .md3-field__outline-start,.md3-field--disabled .md3-field__outline-end,.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.md3-field--disabled .md3-field__outline-start::before,.md3-field--disabled .md3-field__outline-end::before,.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.md3-field--error:not(.md3-field--disabled) .md3-field__outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
 `;
 //# sourceMappingURL=outlined-styles.css.js.map

package/field/lib/outlined-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`.md3-field__outline{display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:\"\";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0}.md3-field__outline-end{flex-grow:1}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field--outlined .md3-field__container{flex-basis:var(--md-outlined-field-container-height, 56px)}.md3-field--outlined .md3-field__content{color:var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:hover .md3-field__content{color:var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__content{color:var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled .md3-field__content{color:var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__content{color:var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__content{color:var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__content{color:var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--outlined.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--md-outlined-field-disabled-content-opacity, 0.38)}.md3-field--outlined .md3-field__label{color:var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__label{color:var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__label{color:var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__label{color:var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__label{color:var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__label{color:var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__label{color:var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__label{font-family:var(--md-outlined-field-label-text-font, Roboto);font-weight:var(--md-outlined-field-label-text-weight, 400);letter-spacing:var(--md-outlined-field-label-text-tracking, 0.03125rem)}.md3-field--outlined .md3-field__label--resting{font-size:var(--md-outlined-field-label-text-size, 1rem);line-height:var(--md-outlined-field-label-text-line-height, 1.5rem)}.md3-field--outlined .md3-field__label--floating{font-size:var(--md-outlined-field-label-text-populated-size, 0.75rem);line-height:var(--md-outlined-field-label-text-populated-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--md-outlined-field-disabled-label-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{color:var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined:hover .md3-field__supporting-text{color:var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f))}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{color:var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__supporting-text{color:var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__supporting-text{color:var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focus .md3-field__supporting-text{color:var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__supporting-text{font-family:var(--md-outlined-field-supporting-text-font, Roboto);font-size:var(--md-outlined-field-supporting-text-size, 0.75rem);font-weight:var(--md-outlined-field-supporting-text-weight, 400);letter-spacing:var(--md-outlined-field-supporting-text-tracking, 0.025rem);line-height:var(--md-outlined-field-supporting-text-line-height, 1rem)}.md3-field--outlined.md3-field--disabled .md3-field__supporting-text{opacity:var(--md-outlined-field-disabled-supporting-text-opacity, 0.38)}.md3-field--outlined .md3-field__supporting-text{padding:0 var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--md-outlined-field-supporting-text-padding-top, 4px)}.md3-field--outlined .md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--md-outlined-field-supporting-text-padding, 16px)}.md3-field--outlined .md3-field__label--floating{transform:translateY(calc(-100% + var(--md-outlined-field-label-text-padding-bottom, 8px)))}.md3-field--outlined .md3-field__outline-start,.md3-field--outlined:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-start, 4px),var(--md-outlined-field-container-shape-end-start, 4px)) + var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--md-outlined-field-container-padding-horizontal, 16px),max(var(--md-outlined-field-container-shape-start-end, 4px),var(--md-outlined-field-container-shape-end-end, 4px)))}.md3-field--outlined .md3-field__outline{border-start-start-radius:var(--md-outlined-field-container-shape-start-start, 4px);border-start-end-radius:var(--md-outlined-field-container-shape-start-end, 4px);border-end-end-radius:var(--md-outlined-field-container-shape-end-end, 4px);border-end-start-radius:var(--md-outlined-field-container-shape-end-start, 4px)}.md3-field--outlined .md3-field__outline{border-color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));color:var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e))}.md3-field--outlined:hover .md3-field__outline{border-color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));color:var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4))}.md3-field--outlined.md3-field--disabled .md3-field__outline{border-color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));color:var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error .md3-field__outline{border-color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error:hover .md3-field__outline{border-color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));color:var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b))}.md3-field--outlined:not(.md3-field--disabled).md3-field--error.md3-field--focused .md3-field__outline{border-color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));color:var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-start::after{margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-notch{padding:0 var(--md-outlined-field-outline-label-padding, 4px);margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px));margin-inline-end:var(--md-outlined-field-outline-label-padding, 4px)}.md3-field--outlined .md3-field__outline-end{margin-inline-start:calc(-1 * var(--md-outlined-field-outline-label-padding, 4px))}.md3-field--outlined.md3-field--disabled .md3-field__outline-start,.md3-field--outlined.md3-field--disabled .md3-field__outline-end,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--md-outlined-field-disabled-outline-opacity, 0.12)}.md3-field--outlined .md3-field__outline-notch{max-width:calc(100% - 2 * var(--md-outlined-field-container-padding-horizontal, 16px))}.md3-field--outlined .md3-field__outline-start::before,.md3-field--outlined .md3-field__outline-end::before,.md3-field--outlined .md3-field__outline-panel-inactive,.md3-field--outlined .md3-field__outline-panel-inactive::before,.md3-field--outlined .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-outline-width, 1px)}.md3-field--outlined:hover .md3-field__outline-start::before,.md3-field--outlined:hover .md3-field__outline-end::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive,.md3-field--outlined:hover .md3-field__outline-panel-inactive::before,.md3-field--outlined:hover .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-hover-outline-width, 1px)}.md3-field--outlined .md3-field__outline-start::after,.md3-field--outlined .md3-field__outline-end::after,.md3-field--outlined .md3-field__outline-panel-active,.md3-field--outlined .md3-field__outline-panel-active::before,.md3-field--outlined .md3-field__outline-panel-active::after{border-width:var(--md-outlined-field-focus-outline-width, 2px)}.md3-field--outlined.md3-field--disabled .md3-field__outline-start::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-end::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--outlined.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--md-outlined-field-disabled-outline-width, 1px)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-outlined-field-container-shape-start-start, 4px);--_container-shape-start-end: var(--md-outlined-field-container-shape-start-end, 4px);--_container-shape-end-end: var(--md-outlined-field-container-shape-end-end, 4px);--_container-shape-end-start: var(--md-outlined-field-container-shape-end-start, 4px);--_container-height: var(--md-outlined-field-container-height, 56px);--_disabled-label-text-color: var(--md-outlined-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-outlined-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-outlined-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-field-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-outline-opacity: var(--md-outlined-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-supporting-text-opacity: var(--md-outlined-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-trailing-icon-opacity: var(--md-outlined-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-label-text-color: var(--md-outlined-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-label-text-color: var(--md-outlined-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-label-text-color: var(--md-outlined-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-label-text-color: var(--md-outlined-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-field-focus-outline-width, 2px);--_focus-supporting-text-color: var(--md-outlined-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-label-text-color: var(--md-outlined-field-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-leading-icon-color: var(--md-outlined-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-field-hover-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-outline-width: var(--md-outlined-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-color: var(--md-outlined-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-field-label-text-font, Roboto);--_label-text-line-height: var(--md-outlined-field-label-text-line-height, 1.5rem);--_label-text-populated-line-height: var(--md-outlined-field-label-text-populated-line-height, 1rem);--_label-text-populated-size: var(--md-outlined-field-label-text-populated-size, 0.75rem);--_label-text-size: var(--md-outlined-field-label-text-size, 1rem);--_label-text-tracking: var(--md-outlined-field-label-text-tracking, 0.031rem);--_label-text-weight: var(--md-outlined-field-label-text-weight, 400);--_leading-icon-color: var(--md-outlined-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-field-supporting-text-font, Roboto);--_supporting-text-line-height: var(--md-outlined-field-supporting-text-line-height, 1rem);--_supporting-text-size: var(--md-outlined-field-supporting-text-size, 0.75rem);--_supporting-text-tracking: var(--md-outlined-field-supporting-text-tracking, 0.025rem);--_supporting-text-weight: var(--md-outlined-field-supporting-text-weight, 400);--_trailing-icon-color: var(--md-outlined-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-field-trailing-icon-size, 24px);--_container-padding-horizontal: var(--md-outlined-field-container-padding-horizontal, 16px);--_container-padding-vertical: var(--md-outlined-field-container-padding-vertical, 8px);--_content-color: var(--md-outlined-field-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-color: var(--md-outlined-field-disabled-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-content-opacity: var(--md-outlined-field-disabled-content-opacity, 0.38);--_error-content-color: var(--md-outlined-field-error-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-focus-content-color: var(--md-outlined-field-error-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_error-hover-content-color: var(--md-outlined-field-error-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-content-color: var(--md-outlined-field-focus-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-content-color: var(--md-outlined-field-hover-content-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-padding-bottom: var(--md-outlined-field-label-text-padding-bottom, 8px);--_outline-label-padding: var(--md-outlined-field-outline-label-padding, 4px);--_supporting-text-padding: var(--md-outlined-field-supporting-text-padding, 16px);--_supporting-text-padding-top: var(--md-outlined-field-supporting-text-padding-top, 4px);--_label-text-populated-font: ;--_label-text-populated-tracking: ;--_label-text-populated-weight: }.md3-field__outline{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-end-radius:var(--_container-shape-end-end);border-end-start-radius:var(--_container-shape-end-start);border-color:var(--_outline-color);color:var(--_outline-color);display:flex;pointer-events:none;height:100%;position:absolute;width:100%}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border:inherit;content:\"\";inset:0;position:absolute}.md3-field__outline-start,.md3-field__outline-end{border:inherit;border-radius:inherit;box-sizing:border-box;position:relative}.md3-field__outline-start::before,.md3-field__outline-start::after,.md3-field__outline-end::before,.md3-field__outline-end::after{border-bottom-style:solid;border-top-style:solid}.md3-field__outline-start::after,.md3-field__outline-end::after{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-start::after,.md3-field--focused .md3-field__outline-end::after{opacity:1}.md3-field__outline-start::before,.md3-field__outline-start::after{border-inline-start-style:solid;border-inline-end-style:none;border-start-start-radius:inherit;border-start-end-radius:0;border-end-start-radius:inherit;border-end-end-radius:0;margin-inline-end:var(--_outline-label-padding)}.md3-field__outline-end{flex-grow:1;margin-inline-start:calc(-1*var(--_outline-label-padding))}.md3-field__outline-end::before,.md3-field__outline-end::after{border-inline-start-style:none;border-inline-end-style:solid;border-start-start-radius:0;border-start-end-radius:inherit;border-end-start-radius:0;border-end-end-radius:inherit}.md3-field__outline-notch{align-items:flex-start;border:inherit;display:flex;margin-inline-start:calc(-1*var(--_outline-label-padding));margin-inline-end:var(--_outline-label-padding);max-width:calc(100% - 2*var(--_container-padding-horizontal));padding:0 var(--_outline-label-padding);position:relative}.md3-field--no-label .md3-field__outline-notch{display:none}.md3-field__outline-panel-inactive,.md3-field__outline-panel-active{border:inherit;border-bottom-style:solid;inset:0;position:absolute}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-top-style:solid;border-bottom:none;bottom:auto;transform:scaleX(1);transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-active::before{right:50%;transform-origin:top left}.md3-field__outline-panel-inactive::after,.md3-field__outline-panel-active::after{left:50%;transform-origin:top right}.md3-field--populated .md3-field__outline-panel-inactive::before,.md3-field--populated .md3-field__outline-panel-inactive::after,.md3-field--focused .md3-field__outline-panel-inactive::before,.md3-field--focused .md3-field__outline-panel-inactive::after,.md3-field--populated .md3-field__outline-panel-active::before,.md3-field--populated .md3-field__outline-panel-active::after,.md3-field--focused .md3-field__outline-panel-active::before,.md3-field--focused .md3-field__outline-panel-active::after{transform:scaleX(0)}.md3-field__outline-panel-active{opacity:0;transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--focused .md3-field__outline-panel-active{opacity:1}.md3-field__label--floating{transform:translateY(calc(-100% + var(--_label-text-padding-bottom)))}.md3-field__outline-start,.md3-field:not(.md3-field--with-start) .md3-field__start{padding-inline-start:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-start),var(--_container-shape-end-start)) + var(--_outline-label-padding))}.md3-field:not(.md3-field--with-end) .md3-field__end{padding-inline-end:max(var(--_container-padding-horizontal),max(var(--_container-shape-start-end),var(--_container-shape-end-end)))}.md3-field__outline-start::before,.md3-field__outline-end::before,.md3-field__outline-panel-inactive,.md3-field__outline-panel-inactive::before,.md3-field__outline-panel-inactive::after{border-width:var(--_outline-width)}:hover .md3-field__outline{border-color:var(--_hover-outline-color);color:var(--_hover-outline-color)}:hover .md3-field__outline-start::before,:hover .md3-field__outline-end::before,:hover .md3-field__outline-panel-inactive,:hover .md3-field__outline-panel-inactive::before,:hover .md3-field__outline-panel-inactive::after{border-width:var(--_hover-outline-width)}.md3-field--focused .md3-field__outline{border-color:var(--_focus-outline-color);color:var(--_focus-outline-color)}.md3-field__outline-start::after,.md3-field__outline-end::after,.md3-field__outline-panel-active,.md3-field__outline-panel-active::before,.md3-field__outline-panel-active::after{border-width:var(--_focus-outline-width)}.md3-field--disabled .md3-field__outline{border-color:var(--_disabled-outline-color);color:var(--_disabled-outline-color)}.md3-field--disabled .md3-field__outline-start,.md3-field--disabled .md3-field__outline-end,.md3-field--disabled .md3-field__outline-panel-inactive{opacity:var(--_disabled-outline-opacity)}.md3-field--disabled .md3-field__outline-start::before,.md3-field--disabled .md3-field__outline-end::before,.md3-field--disabled .md3-field__outline-panel-inactive,.md3-field--disabled .md3-field__outline-panel-inactive::before,.md3-field--disabled .md3-field__outline-panel-inactive::after{border-width:var(--_disabled-outline-width)}.md3-field--error:not(.md3-field--disabled) .md3-field__outline{border-color:var(--_error-outline-color);color:var(--_error-outline-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__outline{border-color:var(--_error-hover-outline-color);color:var(--_error-hover-outline-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__outline{border-color:var(--_error-focus-outline-color);color:var(--_error-focus-outline-color)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/field/lib/outlined-styles.scss

@@ -2,15 +2,6 @@
 // Copyright 2021 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
-
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
-@use './outlined-field-theme';
 @use './outlined-field';
 
-@include outlined-field.static-styles;
-
-.md3-field--outlined {
-  @include outlined-field-theme.theme-styles(outlined-field-theme.$light-theme);
-}
+@include outlined-field.styles;

package/field/lib/shared-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field__label{overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.md3-field__label--floating{/*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}.md3-field__supporting-text{display:flex;justify-content:space-between}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}/*# sourceMappingURL=shared-styles.css.map */
+export const styles = css `:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--_disabled-content-opacity)}:hover .md3-field__content{color:var(--_hover-content-color)}.md3-field--focused .md3-field__content{color:var(--_focus-content-color)}.md3-field--disabled .md3-field__content{color:var(--_disabled-content-color)}.md3-field--error:not(.md3-field--disabled) .md3-field__content{color:var(--_error-content-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__content{color:var(--_error-hover-content-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__content{color:var(--_error-focus-content-color)}.md3-field__label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-weight:var(--_label-text-weight);letter-spacing:var(--_label-text-tracking)}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left;font-size:var(--_label-text-size);line-height:var(--_label-text-line-height)}.md3-field__label--floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}:hover .md3-field__label{color:var(--_hover-label-text-color)}.md3-field--focused .md3-field__label{color:var(--_focus-label-text-color)}.md3-field--disabled .md3-field__label{color:var(--_disabled-label-text-color)}.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--_disabled-label-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__label{color:var(--_error-label-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__label{color:var(--_error-hover-label-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__label{color:var(--_error-focus-label-text-color)}.md3-field__supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);font-weight:var(--_supporting-text-weight);letter-spacing:var(--_supporting-text-tracking);line-height:var(--_supporting-text-line-height)}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}.md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .md3-field__supporting-text{color:var(--_hover-supporting-text-color)}.md3-field--focus .md3-field__supporting-text{color:var(--_focus-supporting-text-color)}.md3-field--disabled .md3-field__supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__supporting-text{color:var(--_error-supporting-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__supporting-text{color:var(--_error-hover-supporting-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focus .md3-field__supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */
 `;
 //# sourceMappingURL=shared-styles.css.js.map

package/field/lib/shared-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field__label{overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left}.md3-field__label--floating{/*! Used in field.ts @queryAsync. go/css-conformance#unstyled-classes */}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}.md3-field__supporting-text{display:flex;justify-content:space-between}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{display:inline-flex}.md3-field{display:inline-flex;flex:1;flex-direction:column;writing-mode:horizontal-tb}.md3-field__container{align-items:center;box-sizing:border-box;display:flex;flex:1;flex-basis:var(--_container-height);position:relative}.md3-field--disabled{pointer-events:none}.md3-field--with-start .md3-field__start,.md3-field--with-end .md3-field__end{min-width:48px}.md3-field--with-start .md3-field__start{margin-inline-end:4px}.md3-field--with-end .md3-field__end{margin-inline-start:4px}.md3-field__start,.md3-field__middle,.md3-field__end{display:flex;align-items:center;box-sizing:border-box;height:100%;position:relative}.md3-field__start,.md3-field__end{justify-content:center}.md3-field__middle{align-self:baseline;flex:1}.md3-field__content{display:flex;flex:1;opacity:0;transition:opacity 83ms cubic-bezier(0.4, 0, 0.2, 1);color:var(--_content-color)}.md3-field--no-label .md3-field__content,.md3-field--focused .md3-field__content,.md3-field--populated .md3-field__content{opacity:1;transition-delay:67ms}.md3-field--disabled.md3-field--no-label .md3-field__content,.md3-field--disabled.md3-field--focused .md3-field__content,.md3-field--disabled.md3-field--populated .md3-field__content{opacity:var(--_disabled-content-opacity)}:hover .md3-field__content{color:var(--_hover-content-color)}.md3-field--focused .md3-field__content{color:var(--_focus-content-color)}.md3-field--disabled .md3-field__content{color:var(--_disabled-content-color)}.md3-field--error:not(.md3-field--disabled) .md3-field__content{color:var(--_error-content-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__content{color:var(--_error-hover-content-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__content{color:var(--_error-focus-content-color)}.md3-field__label{color:var(--_label-text-color);overflow:hidden;max-width:100%;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;z-index:1;font-family:var(--_label-text-font);font-weight:var(--_label-text-weight);letter-spacing:var(--_label-text-tracking)}.md3-field__label--resting{position:absolute;top:50%;transform:translateY(-50%);transform-origin:top left;font-size:var(--_label-text-size);line-height:var(--_label-text-line-height)}.md3-field__label--floating{font-size:var(--_label-text-populated-size);line-height:var(--_label-text-populated-line-height)}.md3-field__label--hidden{opacity:0}.md3-field--no-label .md3-field__label{display:none}:hover .md3-field__label{color:var(--_hover-label-text-color)}.md3-field--focused .md3-field__label{color:var(--_focus-label-text-color)}.md3-field--disabled .md3-field__label{color:var(--_disabled-label-text-color)}.md3-field--disabled .md3-field__label:not(.md3-field__label--hidden){opacity:var(--_disabled-label-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__label{color:var(--_error-label-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__label{color:var(--_error-hover-label-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focused .md3-field__label{color:var(--_error-focus-label-text-color)}.md3-field__supporting-text{color:var(--_supporting-text-color);display:flex;justify-content:space-between;padding:0 var(--_supporting-text-padding);font-family:var(--_supporting-text-font);font-size:var(--_supporting-text-size);font-weight:var(--_supporting-text-weight);letter-spacing:var(--_supporting-text-tracking);line-height:var(--_supporting-text-line-height)}.md3-field__supporting-text-start,.md3-field__supporting-text-end{display:flex}.md3-field__supporting-text-start ::slotted(:not(:empty)),.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-top:var(--_supporting-text-padding-top)}.md3-field__supporting-text-end ::slotted(:not(:empty)){padding-inline-start:var(--_supporting-text-padding)}:hover .md3-field__supporting-text{color:var(--_hover-supporting-text-color)}.md3-field--focus .md3-field__supporting-text{color:var(--_focus-supporting-text-color)}.md3-field--disabled .md3-field__supporting-text{color:var(--_disabled-supporting-text-color);opacity:var(--_disabled-supporting-text-opacity)}.md3-field--error:not(.md3-field--disabled) .md3-field__supporting-text{color:var(--_error-supporting-text-color)}.md3-field--error:not(.md3-field--disabled):hover .md3-field__supporting-text{color:var(--_error-hover-supporting-text-color)}.md3-field--error:not(.md3-field--disabled).md3-field--focus .md3-field__supporting-text{color:var(--_error-focus-supporting-text-color)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/field/lib/shared-styles.scss

@@ -3,12 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@use './content';
-@use './field';
-@use './label';
-@use './supporting-text';
+@use './shared';
 
-@include field.static-styles;
-@include content.static-styles;
-@include label.static-styles;
-@include supporting-text.static-styles;
+@include shared.styles;

package/focus/_focus-ring.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/focus-ring' show theme;

package/focus/lib/_focus-ring.scss

@@ -6,13 +6,51 @@
 // stylelint-disable selector-class-pattern --
 // Selector '.md3-*' should only be used in this project.
 
-@mixin static-styles() {
+@use 'sass:map';
+@use '../../sass/theme';
+@use '../../sass/shape';
+@use '../../sass/resolvers';
+@use './md-comp-focus-ring';
+
+$_custom-property-prefix: 'focus-ring';
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(md-comp-focus-ring.values(), $tokens);
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: md-comp-focus-ring.values();
+  $tokens: _resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, $_custom-property-prefix);
+
   :host {
-    @include host-root;
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    pointer-events: none;
   }
 
   .md3-focus-ring {
-    @include root;
+    display: none;
+    position: absolute;
+    box-sizing: border-box;
+    border: var(--_width) solid var(--_color);
+    border-start-start-radius: var(--_shape-start-start);
+    border-start-end-radius: var(--_shape-start-end);
+    border-end-start-radius: var(--_shape-end-start);
+    border-end-end-radius: var(--_shape-end-end);
+    // Note that the ring will not respect its parent's border. This will not be
+    // an issue as long as border is set via a sibling node, similar to ripple
+    // and touch target.
+    $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
+    $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
+
+    inset: $vertical-inset $horizontal-inset;
   }
 
   .md3-focus-ring--visible {
@@ -20,22 +58,11 @@
   }
 }
 
-@mixin host-root() {
-  pointer-events: none;
-}
-
-@mixin root() {
-  display: none;
-  position: absolute;
-  box-sizing: border-box;
-
-  &::before {
-    @include inner-ring;
-  }
-}
-
-@mixin inner-ring() {
-  inset: 0;
-  position: absolute;
-  content: '';
+@function _resolve-tokens($tokens) {
+  $tokens: shape.resolve-theme(
+    $tokens,
+    map.get(resolvers.$material, shape),
+    shape
+  );
+  @return $tokens;
 }

package/focus/lib/_md-comp-focus-ring.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '../../tokens';
+
+$_default: (
+  md-sys-color: tokens.md-sys-color-values-light(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  @return (
+    shape:
+      if(
+        $exclude-hardcoded-values,
+        null,
+        map.get($deps, md-sys-shape, corner-full)
+      ),
+    offset-vertical: if($exclude-hardcoded-values, null, 2px),
+    offset-horizontal: if($exclude-hardcoded-values, null, 2px),
+    width: if($exclude-hardcoded-values, null, 3px),
+    color: map.get($deps, md-sys-color, secondary)
+  );
+}

package/focus/lib/focus-ring-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box}.md3-focus-ring::before{inset:0;position:absolute;content:""}.md3-focus-ring--visible{display:block}.md3-focus-ring{inset:calc(-1*(var(--md-focus-ring-container-outer-padding-vertical, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px))) calc(-1*(var(--md-focus-ring-container-outer-padding-horizontal, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px)));border:var(--md-focus-ring-outer-ring-width, 2px) solid var(--md-focus-ring-outer-ring-color, var(--md-sys-color-tertiary-container, #ffd8e4));border-radius:var(--md-focus-ring-ring-radius, 8px)}.md3-focus-ring::before{border:var(--md-focus-ring-inner-ring-width, 2px) solid var(--md-focus-ring-inner-ring-color, var(--md-sys-color-on-tertiary-container, #31111d));border-radius:calc(var(--md-focus-ring-ring-radius, 8px) - var(--md-focus-ring-outer-ring-width, 2px))}/*# sourceMappingURL=focus-ring-styles.css.map */
+export const styles = css `:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */
 `;
 //# sourceMappingURL=focus-ring-styles.css.js.map

package/focus/lib/focus-ring-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box}.md3-focus-ring::before{inset:0;position:absolute;content:\"\"}.md3-focus-ring--visible{display:block}.md3-focus-ring{inset:calc(-1*(var(--md-focus-ring-container-outer-padding-vertical, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px))) calc(-1*(var(--md-focus-ring-container-outer-padding-horizontal, 2px) + var(--md-focus-ring-inner-ring-width, 2px) + var(--md-focus-ring-outer-ring-width, 2px)));border:var(--md-focus-ring-outer-ring-width, 2px) solid var(--md-focus-ring-outer-ring-color, var(--md-sys-color-tertiary-container, #ffd8e4));border-radius:var(--md-focus-ring-ring-radius, 8px)}.md3-focus-ring::before{border:var(--md-focus-ring-inner-ring-width, 2px) solid var(--md-focus-ring-inner-ring-color, var(--md-sys-color-on-tertiary-container, #31111d));border-radius:calc(var(--md-focus-ring-ring-radius, 8px) - var(--md-focus-ring-outer-ring-width, 2px))}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}
+{"version":3,"file":"focus-ring-styles.css.js","sourceRoot":"","sources":["focus-ring-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_shape-start-start: var(--md-focus-ring-shape-start-start, 9999px);--_shape-start-end: var(--md-focus-ring-shape-start-end, 9999px);--_shape-end-end: var(--md-focus-ring-shape-end-end, 9999px);--_shape-end-start: var(--md-focus-ring-shape-end-start, 9999px);--_offset-vertical: var(--md-focus-ring-offset-vertical, 2px);--_offset-horizontal: var(--md-focus-ring-offset-horizontal, 2px);--_width: var(--md-focus-ring-width, 3px);--_color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));pointer-events:none}.md3-focus-ring{display:none;position:absolute;box-sizing:border-box;border:var(--_width) solid var(--_color);border-start-start-radius:var(--_shape-start-start);border-start-end-radius:var(--_shape-start-end);border-end-start-radius:var(--_shape-end-start);border-end-end-radius:var(--_shape-end-end);inset:calc(-1*(var(--_offset-vertical) + var(--_width))) calc(-1*(var(--_offset-horizontal) + var(--_width)))}.md3-focus-ring--visible{display:block}/*# sourceMappingURL=focus-ring-styles.css.map */\n`;\n "]}

package/focus/lib/focus-ring-styles.scss

@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './focus-ring';
-@use './focus-ring-theme';
-
-@include focus-ring.static-styles;
 
-.md3-focus-ring {
-  @include focus-ring-theme.theme-styles(focus-ring-theme.$light-theme);
-}
+@include focus-ring.styles;

package/focus/lib/focus-ring.d.ts

@@ -5,11 +5,24 @@
  */
 import { LitElement, TemplateResult } from 'lit';
 import { ClassInfo } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+/**
+ * @summary An accessible, themable ring designed to be shown on
+ * `:focus-visible`.
+ *
+ * @description
+ * An accessible, themable ring designed to be shown on focus-visible.
+ * Focus ring is designed to be controlled by the `strong-focus` module in the
+ * same package.
+ *
+ * In most cases, `visible` should be set to
+ * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`
+ * documentation in the `strong-focus` module), and `false` on `blur`.
+ */
 export declare class FocusRing extends LitElement {
+    /**
+     * Makes the focus ring visible.
+     */
     visible: boolean;
-    /** @soyTemplate */
     protected render(): TemplateResult;
-    /** @soyTemplate */
     protected getRenderClasses(): ClassInfo;
 }

package/focus/lib/focus-ring.js

@@ -7,17 +7,30 @@ import { __decorate, __metadata } from "tslib";
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-/** @soyCompatible */
+/**
+ * @summary An accessible, themable ring designed to be shown on
+ * `:focus-visible`.
+ *
+ * @description
+ * An accessible, themable ring designed to be shown on focus-visible.
+ * Focus ring is designed to be controlled by the `strong-focus` module in the
+ * same package.
+ *
+ * In most cases, `visible` should be set to
+ * `shouldShowStrongFocus()` on `focus` and `pointerdown` (see `pointerPress()`
+ * documentation in the `strong-focus` module), and `false` on `blur`.
+ */
 export class FocusRing extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * Makes the focus ring visible.
+         */
         this.visible = false;
     }
-    /** @soyTemplate */
     render() {
         return html `<span class="md3-focus-ring ${classMap(this.getRenderClasses())}"></span>`;
     }
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             'md3-focus-ring--visible': this.visible,