@maicol07/material-web 2.0.0

package/fab/internal/shared.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement } from 'lit';
+/**
+ * Sizes variants available to non-extended FABs.
+ */
+export type FabSize = 'medium' | 'small' | 'large';
+declare const fabBaseClass: import("../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
+export declare abstract class SharedFab extends fabBaseClass {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The size of the FAB.
+     *
+     * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
+     * have different sizes.
+     */
+    size: FabSize;
+    /**
+     * The text to display on the FAB.
+     */
+    label: string;
+    /**
+     * Lowers the FAB's elevation.
+     */
+    lowered: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected getRenderClasses(): {
+        lowered: boolean;
+        small: boolean;
+        large: boolean;
+        extended: boolean;
+    };
+    private renderTouchTarget;
+    private renderLabel;
+    private renderIcon;
+}
+export {};

package/fab/internal/shared.js

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { mixinDelegatesAria } from '../../internal/aria/delegate.js';
+// Separate variable needed for closure.
+const fabBaseClass = mixinDelegatesAria(LitElement);
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class SharedFab extends fabBaseClass {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the FAB.
+         *
+         * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
+         * have different sizes.
+         */
+        this.size = 'medium';
+        /**
+         * The text to display on the FAB.
+         */
+        this.label = '';
+        /**
+         * Lowers the FAB's elevation.
+         */
+        this.lowered = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="fab ${classMap(this.getRenderClasses())}"
+        aria-label=${ariaLabel || nothing}>
+        <md-elevation part="elevation"></md-elevation>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <md-ripple class="ripple"></md-ripple>
+        ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}
+      </button>
+    `;
+    }
+    getRenderClasses() {
+        const isExtended = !!this.label;
+        return {
+            'lowered': this.lowered,
+            'small': this.size === 'small' && !isExtended,
+            'large': this.size === 'large' && !isExtended,
+            'extended': isExtended,
+        };
+    }
+    renderTouchTarget() {
+        return html `<div class="touch-target"></div>`;
+    }
+    renderLabel() {
+        return this.label ? html `<span class="label">${this.label}</span>` : '';
+    }
+    renderIcon() {
+        const { ariaLabel } = this;
+        return html `<span class="icon">
+      <slot
+        name="icon"
+        aria-hidden=${ariaLabel || this.label
+            ? 'true'
+            : nothing}>
+        <span></span>
+      </slot>
+    </span>`;
+    }
+}
+/** @nocollapse */
+SharedFab.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    property({ reflect: true })
+], SharedFab.prototype, "size", void 0);
+__decorate([
+    property()
+], SharedFab.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], SharedFab.prototype, "lowered", void 0);
+//# sourceMappingURL=shared.js.map

package/fab/internal/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,kBAAkB,EAAC,MAAM,iCAAiC,CAAC;AAOnE,wCAAwC;AACxC,MAAM,YAAY,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEpD,gEAAgE;AAChE,MAAM,OAAgB,SAAU,SAAQ,YAAY;IAApD;;QAOE;;;;;WAKG;QACwB,SAAI,GAAY,QAAQ,CAAC;QAEpD;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAEvB;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;IA+C7C,CAAC;IA7CoB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;qBACjC,SAAS,IAAI,OAAO;;;;UAI/B,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE;;KAExE,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChC,OAAO;YACL,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,UAAU,EAAE,UAAU;SACvB,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA,kCAAkC,CAAC;IAChD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,CAAC;IAEO,UAAU;QAChB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;sBAGO,SAAS,IAAI,IAAI,CAAC,KAAK;YACnC,CAAC,CAAC,MAAM;YACR,CAAC,CAAE,OAA8B;;;YAG/B,CAAC;IACX,CAAC;;AApED,kBAAkB;AACF,2BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAe;IACrB,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAQyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA0B;AAKxC;IAAX,QAAQ,EAAE;wCAAY;AAKI;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../internal/aria/delegate.js';\n\n/**\n * Sizes variants available to non-extended FABs.\n */\nexport type FabSize = 'medium' | 'small' | 'large';\n\n// Separate variable needed for closure.\nconst fabBaseClass = mixinDelegatesAria(LitElement);\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class SharedFab extends fabBaseClass {\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open' as const,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The size of the FAB.\n   *\n   * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not\n   * have different sizes.\n   */\n  @property({reflect: true}) size: FabSize = 'medium';\n\n  /**\n   * The text to display on the FAB.\n   */\n  @property() label = '';\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({type: Boolean}) lowered = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"fab ${classMap(this.getRenderClasses())}\"\n        aria-label=${ariaLabel || nothing}>\n        <md-elevation part=\"elevation\"></md-elevation>\n        <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n        <md-ripple class=\"ripple\"></md-ripple>\n        ${this.renderTouchTarget()} ${this.renderIcon()} ${this.renderLabel()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    const isExtended = !!this.label;\n    return {\n      'lowered': this.lowered,\n      'small': this.size === 'small' && !isExtended,\n      'large': this.size === 'large' && !isExtended,\n      'extended': isExtended,\n    };\n  }\n\n  private renderTouchTarget() {\n    return html`<div class=\"touch-target\"></div>`;\n  }\n\n  private renderLabel() {\n    return this.label ? html`<span class=\"label\">${this.label}</span>` : '';\n  }\n\n  private renderIcon() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<span class=\"icon\">\n      <slot\n        name=\"icon\"\n        aria-hidden=${ariaLabel || this.label\n          ? 'true'\n          : (nothing as unknown as 'false')}>\n        <span></span>\n      </slot>\n    </span>`;\n  }\n}\n"]}

package/field/_filled-field.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/filled-field' show theme;

package/field/_outlined-field.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/outlined-field' show theme;

package/field/filled-field.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { FilledField } from './internal/filled-field.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-field': MdFilledField;
+    }
+}
+/**
+ * TODO(b/228525797): add docs
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledField extends FilledField {
+    static styles: CSSResultOrNative[];
+}

package/field/filled-field.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FilledField } from './internal/filled-field.js';
+import { styles as filledStyles } from './internal/filled-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * TODO(b/228525797): add docs
+ * @final
+ * @suppress {visibility}
+ */
+export let MdFilledField = class MdFilledField extends FilledField {
+};
+MdFilledField.styles = [sharedStyles, filledStyles];
+MdFilledField = __decorate([
+    customElement('md-filled-field')
+], MdFilledField);
+//# sourceMappingURL=filled-field.js.map

package/field/filled-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;;GAIG;AAEI,WAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAAwB,CAAC,YAAY,EAAE,YAAY,CAAC,AAApD,CAAqD;AADhE,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledField} from './internal/filled-field.js';\nimport {styles as filledStyles} from './internal/filled-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-field': MdFilledField;\n  }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-field')\nexport class MdFilledField extends FilledField {\n  static override styles: CSSResultOrNative[] = [sharedStyles, filledStyles];\n}\n"]}

package/field/harness.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { Field } from './internal/field.js';
+/**
+ * Test harness for field elements.
+ */
+export declare class FieldHarness extends Harness<Field> {
+    focusWithKeyboard(init?: KeyboardEventInit): Promise<void>;
+    focusWithPointer(): Promise<void>;
+    blur(): Promise<void>;
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/field/harness.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for field elements.
+ */
+export class FieldHarness extends Harness {
+    async focusWithKeyboard(init = {}) {
+        this.element.focused = true;
+        await super.focusWithKeyboard(init);
+    }
+    async focusWithPointer() {
+        this.element.focused = true;
+        await super.focusWithPointer();
+    }
+    async blur() {
+        this.element.focused = false;
+        await super.blur();
+    }
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return (this.element.querySelector(':not([slot])') ||
+            this.element.renderRoot.querySelector('.field'));
+    }
+}
+//# sourceMappingURL=harness.js.map

package/field/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAChD,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAgB,CAAC;IACpE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Field} from './internal/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n      this.element.renderRoot.querySelector('.field')) as HTMLElement;\n  }\n}\n"]}

package/field/internal/_content.scss

@@ -0,0 +1,212 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+@use 'sass:math';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+// Duration of the label animation.
+$_label-duration: map.get($_md-sys-motion, 'duration-short3');
+// Duration of the content's visibility animation.
+$_visible-duration: math.round(math.div($_label-duration * 5, 9));
+// Short delay when entering (focusing/populating) so that the label may move
+// out of the way before the content starts to appear.
+$_enter-delay: $_label-duration - $_visible-duration;
+
+@mixin styles() {
+  @layer styles {
+    .start,
+    .middle,
+    .end {
+      display: flex;
+      box-sizing: border-box;
+      height: 100%;
+      // Relative position for absolutely positioned labels (to avoid interfering
+      // with baseline alignment).
+      position: relative;
+    }
+
+    .start {
+      color: var(--_leading-content-color);
+    }
+
+    .end {
+      color: var(--_trailing-content-color);
+    }
+
+    .start,
+    .end {
+      align-items: center;
+      justify-content: center;
+    }
+
+    // TODO(b/239188049): remove when layout tokens are ready
+    .with-start .start,
+    .with-end .end {
+      min-width: 48px;
+    }
+
+    .with-start .start {
+      margin-inline-end: 4px;
+    }
+
+    .with-end .end {
+      margin-inline-start: 4px;
+    }
+
+    .middle {
+      align-items: stretch;
+      // The container of the field aligns sections by "center". Only the middle
+      // section opts in to baseline alignment.
+      //
+      // Labels are absolutely positioned, which leaves only the content as the
+      // evaluated baseline for the field.
+      //
+      // See https://www.w3.org/TR/css-flexbox-1/#baseline-participation
+      align-self: baseline;
+      flex: 1;
+    }
+
+    .content {
+      color: var(--_content-color);
+      display: flex;
+      flex: 1;
+      opacity: 0;
+      transition: opacity $_visible-duration
+        map.get($_md-sys-motion, 'easing-emphasized');
+    }
+
+    .no-label .content,
+    .focused .content,
+    .populated .content {
+      opacity: 1;
+      transition-delay: $_enter-delay;
+    }
+
+    :is(.disabled, .disable-transitions) .content {
+      transition: none;
+    }
+
+    .content ::slotted(*) {
+      all: unset;
+      // Use `currentColor` to inherit the various state colors that are set
+      // below.
+      color: currentColor;
+      font-family: var(--_content-font);
+      font-size: var(--_content-size);
+      line-height: var(--_content-line-height);
+      font-weight: var(--_content-weight);
+      width: 100%;
+      // Reverting values before "all: unset"
+      overflow-wrap: revert; // Needed to break words in textarea
+      white-space: revert; // Needed for Firefox textarea
+    }
+
+    .content ::slotted(:not(textarea)) {
+      padding-top: var(--_top-space);
+      padding-bottom: var(--_bottom-space);
+    }
+
+    .content ::slotted(textarea) {
+      // Use margin for textareas since they will scroll over the label if not.
+      margin-top: var(--_top-space);
+      margin-bottom: var(--_bottom-space);
+    }
+
+    :hover .content {
+      color: var(--_hover-content-color);
+    }
+
+    :hover .start {
+      color: var(--_hover-leading-content-color);
+    }
+
+    :hover .end {
+      color: var(--_hover-trailing-content-color);
+    }
+
+    .focused .content {
+      color: var(--_focus-content-color);
+    }
+
+    .focused .start {
+      color: var(--_focus-leading-content-color);
+    }
+
+    .focused .end {
+      color: var(--_focus-trailing-content-color);
+    }
+
+    .disabled .content {
+      color: var(--_disabled-content-color);
+    }
+
+    .disabled.no-label .content,
+    .disabled.focused .content,
+    .disabled.populated .content {
+      opacity: var(--_disabled-content-opacity);
+    }
+
+    .disabled .start {
+      color: var(--_disabled-leading-content-color);
+      opacity: var(--_disabled-leading-content-opacity);
+    }
+
+    .disabled .end {
+      color: var(--_disabled-trailing-content-color);
+      opacity: var(--_disabled-trailing-content-opacity);
+    }
+
+    .error .content {
+      color: var(--_error-content-color);
+    }
+
+    .error .start {
+      color: var(--_error-leading-content-color);
+    }
+
+    .error .end {
+      color: var(--_error-trailing-content-color);
+    }
+
+    .error:hover .content {
+      color: var(--_error-hover-content-color);
+    }
+
+    .error:hover .start {
+      color: var(--_error-hover-leading-content-color);
+    }
+
+    .error:hover .end {
+      color: var(--_error-hover-trailing-content-color);
+    }
+
+    .error.focused .content {
+      color: var(--_error-focus-content-color);
+    }
+
+    .error.focused .start {
+      color: var(--_error-focus-leading-content-color);
+    }
+
+    .error.focused .end {
+      color: var(--_error-focus-trailing-content-color);
+    }
+  }
+
+  @layer hcm {
+    @media (forced-colors: active) {
+      .disabled :is(.start, .content, .end) {
+        color: GrayText;
+        opacity: 1;
+      }
+    }
+  }
+}

package/field/internal/_filled-field.scss

@@ -0,0 +1,208 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filled-field-supported-tokens,
+    (
+      'container-shape-start-start',
+      'container-shape-start-end',
+      'container-shape-end-end',
+      'container-shape-end-start'
+    )
+  );
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $token == 'container-shape' and meta.type-of($value) == 'list' {
+      @error 'Filled field `container-shape` may not be specified as a list. Use logical (`*-start-start`) tokens instead.';
+    }
+
+    @if $value {
+      --md-filled-field-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-field-values();
+
+  @layer styles {
+    :host {
+      // Only use the logical properties.
+      $tokens: map.remove($tokens, 'container-shape');
+      @each $token, $value in $tokens {
+        --_#{$token}: #{$value};
+      }
+    }
+
+    .background,
+    .state-layer {
+      border-radius: inherit;
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+
+    .background {
+      background: var(--_container-color);
+    }
+
+    .state-layer {
+      visibility: hidden;
+    }
+
+    .field:not(.disabled):hover .state-layer {
+      visibility: visible;
+    }
+
+    .label.floating {
+      position: absolute;
+      top: var(--_with-label-top-space);
+    }
+
+    .field:not(.with-start) .label-wrapper {
+      margin-inline-start: var(--_leading-space);
+    }
+
+    .field:not(.with-end) .label-wrapper {
+      margin-inline-end: var(--_trailing-space);
+    }
+
+    .active-indicator {
+      inset: auto 0 0 0;
+      // Prevent click events on the indicator element since it has no width and
+      // causes bugs when handled by the foundation for updating transform-origin.
+      pointer-events: none;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+
+      &::before,
+      &::after {
+        border-bottom: var(--_active-indicator-height) solid
+          var(--_active-indicator-color);
+        inset: auto 0 0 0;
+        content: '';
+        position: absolute;
+        width: 100%;
+      }
+
+      // focused indicator
+      &::after {
+        opacity: 0;
+        transition: opacity map.get($_md-sys-motion, 'duration-short3')
+          map.get($_md-sys-motion, 'easing-emphasized');
+      }
+    }
+
+    .focused .active-indicator::after {
+      opacity: 1;
+    }
+
+    .field:not(.with-start) .content ::slotted(*) {
+      padding-inline-start: var(--_leading-space);
+    }
+
+    .field:not(.with-end) .content ::slotted(*) {
+      padding-inline-end: var(--_trailing-space);
+    }
+
+    .field:not(.no-label) .content ::slotted(:not(textarea)) {
+      padding-bottom: var(--_with-label-bottom-space);
+      padding-top: calc(
+        var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+      );
+    }
+
+    .field:not(.no-label) .content ::slotted(textarea) {
+      // Use margin for textareas since they will scroll over the label if not.
+      margin-bottom: var(--_with-label-bottom-space);
+      margin-top: calc(
+        var(--_with-label-top-space) + var(--_label-text-populated-line-height)
+      );
+    }
+
+    :hover .active-indicator::before {
+      border-bottom-color: var(--_hover-active-indicator-color);
+      border-bottom-width: var(--_hover-active-indicator-height);
+    }
+
+    // Focus is on a separate element and does not need a focus selector
+    .active-indicator::after {
+      border-bottom-color: var(--_focus-active-indicator-color);
+      border-bottom-width: var(--_focus-active-indicator-height);
+    }
+
+    :hover .state-layer {
+      background: var(--_hover-state-layer-color);
+      opacity: var(--_hover-state-layer-opacity);
+    }
+
+    .disabled .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);
+    }
+
+    .disabled .background {
+      background: var(--_disabled-container-color);
+      opacity: var(--_disabled-container-opacity);
+    }
+
+    .error .active-indicator::before {
+      border-bottom-color: var(--_error-active-indicator-color);
+    }
+
+    .error:hover .active-indicator::before {
+      border-bottom-color: var(--_error-hover-active-indicator-color);
+    }
+
+    .error:hover .state-layer {
+      background: var(--_error-hover-state-layer-color);
+      opacity: var(--_error-hover-state-layer-opacity);
+    }
+
+    // Focus is on a separate element and does not need a focus selector
+    .error .active-indicator::after {
+      border-bottom-color: var(--_error-focus-active-indicator-color);
+    }
+
+    // Move the container up so that the resize handle doesn't overlap the focus
+    // indicator. Content is moved back the opposite direction.
+    .resizable .container {
+      bottom: var(--_focus-active-indicator-height);
+      // Ensures the container doesn't create an overhang that can be clicked on.
+      clip-path: inset(var(--_focus-active-indicator-height) 0 0 0);
+    }
+
+    .resizable .container > * {
+      top: var(--_focus-active-indicator-height);
+    }
+  }
+
+  @layer hcm {
+    @media (forced-colors: active) {
+      .disabled .active-indicator::before {
+        border-color: GrayText;
+        opacity: 1;
+      }
+    }
+  }
+}