@material/web 0.1.0-alpha.0

package/textfield/lib/_filled-text-field-theme.scss

@@ -0,0 +1,203 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use '@material/web/field/lib/filled-field-theme';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/shape';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/typography';
+@use '@material/web/sass/var';
+@use '@material/web/tokens';
+@use './icon-theme';
+@use './input-theme';
+
+$light-theme: tokens.md-comp-filled-text-field-values();
+$dark-theme: tokens.md-comp-filled-text-field-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+$forced-colors-theme: (
+  disabled-active-indicator-color: GrayText,
+  disabled-active-indicator-opacity: 1,
+  disabled-input-text-color: GrayText,
+  disabled-input-text-opacity: 1,
+  disabled-label-text-color: GrayText,
+  disabled-label-text-opacity: 1,
+  disabled-leading-icon-color: GrayText,
+  disabled-leading-icon-opacity: 1,
+  disabled-supporting-text-color: GrayText,
+  disabled-supporting-text-opacity: 1,
+  disabled-trailing-icon-color: GrayText,
+  disabled-trailing-icon-opacity: 1,
+);
+
+@function _resolve-theme($theme, $resolvers) {
+  $theme: input-theme.resolve-theme($theme, $resolvers);
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get($resolvers, shape),
+    container-shape
+  );
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    label-text
+  );
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    supporting-text
+  );
+
+  @return $theme;
+}
+
+// Add missing tokens
+$_reference-theme: map.merge(
+  $light-theme,
+  (
+    container-padding-horizontal: null,
+    container-padding-vertical: null,
+    input-text-prefix-padding: null,
+    input-text-suffix-padding: null,
+  )
+);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($_reference-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, filled-text-field);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  // Add missing tokens
+  $theme: map.merge(
+    (
+      container-padding-horizontal: 16px,
+      container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
+    ),
+    $theme
+  );
+
+  $theme: theme.validate-theme-styles($_reference-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, filled-text-field);
+
+  @include input-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
+
+  $field-theme: (
+    active-indicator-color: map.get($theme, active-indicator-color),
+    active-indicator-height: map.get($theme, active-indicator-height),
+    container-color: map.get($theme, container-color),
+    container-height: map.get($theme, container-height),
+    container-padding-horizontal: map.get($theme, container-padding-horizontal),
+    container-padding-vertical: map.get($theme, container-padding-vertical),
+    container-shape-start-start: map.get($theme, container-shape-start-start),
+    container-shape-start-end: map.get($theme, container-shape-start-end),
+    container-shape-end-end: map.get($theme, container-shape-end-end),
+    container-shape-end-start: map.get($theme, container-shape-end-start),
+    content-color: map.get($theme, input-text-color),
+    disabled-active-indicator-color:
+      map.get($theme, disabled-active-indicator-color),
+    disabled-active-indicator-height:
+      map.get($theme, disabled-active-indicator-height),
+    disabled-active-indicator-opacity:
+      map.get($theme, disabled-active-indicator-opacity),
+    disabled-container-color: map.get($theme, disabled-container-color),
+    disabled-container-opacity: map.get($theme, disabled-container-opacity),
+    disabled-content-color: map.get($theme, disabled-input-text-color),
+    disabled-content-opacity: map.get($theme, disabled-input-text-opacity),
+    disabled-label-text-color: map.get($theme, disabled-label-text-color),
+    disabled-label-text-opacity: map.get($theme, disabled-label-text-opacity),
+    disabled-leading-icon-color: map.get($theme, disabled-leading-icon-color),
+    disabled-leading-icon-opacity:
+      map.get($theme, disabled-leading-icon-opacity),
+    disabled-supporting-text-color:
+      map.get($theme, disabled-supporting-text-color),
+    disabled-supporting-text-opacity:
+      map.get($theme, disabled-supporting-text-opacity),
+    disabled-trailing-icon-color: map.get($theme, disabled-trailing-icon-color),
+    disabled-trailing-icon-opacity:
+      map.get($theme, disabled-trailing-icon-opacity),
+    error-active-indicator-color: map.get($theme, error-active-indicator-color),
+    error-focus-active-indicator-color:
+      map.get($theme, error-focus-active-indicator-color),
+    error-focus-content-color: map.get($theme, error-focus-input-text-color),
+    error-focus-label-text-color: map.get($theme, error-focus-label-text-color),
+    error-focus-leading-icon-color:
+      map.get($theme, error-focus-leading-icon-color),
+    error-focus-supporting-text-color:
+      map.get($theme, error-focus-supporting-text-color),
+    error-focus-trailing-icon-color:
+      map.get($theme, error-focus-trailing-icon-color),
+    error-hover-active-indicator-color:
+      map.get($theme, error-hover-active-indicator-color),
+    error-hover-content-color: map.get($theme, error-hover-input-text-color),
+    error-hover-label-text-color: map.get($theme, error-hover-label-text-color),
+    error-hover-leading-icon-color:
+      map.get($theme, error-hover-leading-icon-color),
+    error-hover-state-layer-color:
+      map.get($theme, error-hover-state-layer-color),
+    error-hover-state-layer-opacity:
+      map.get($theme, error-hover-state-layer-opacity),
+    error-hover-supporting-text-color:
+      map.get($theme, error-hover-supporting-text-color),
+    error-hover-trailing-icon-color:
+      map.get($theme, error-hover-trailing-icon-color),
+    error-content-color: map.get($theme, error-input-text-color),
+    error-label-text-color: map.get($theme, error-label-text-color),
+    error-leading-icon-color: map.get($theme, error-leading-icon-color),
+    error-supporting-text-color: map.get($theme, error-supporting-text-color),
+    error-trailing-icon-color: map.get($theme, error-trailing-icon-color),
+    focus-active-indicator-color: map.get($theme, focus-active-indicator-color),
+    focus-active-indicator-height:
+      map.get($theme, focus-active-indicator-height),
+    focus-content-color: map.get($theme, focus-input-text-color),
+    focus-label-text-color: map.get($theme, focus-label-text-color),
+    focus-leading-icon-color: map.get($theme, focus-leading-icon-color),
+    focus-supporting-text-color: map.get($theme, focus-supporting-text-color),
+    focus-trailing-icon-color: map.get($theme, focus-trailing-icon-color),
+    hover-active-indicator-color: map.get($theme, hover-active-indicator-color),
+    hover-active-indicator-height:
+      map.get($theme, hover-active-indicator-height),
+    hover-content-color: map.get($theme, hover-input-text-color),
+    hover-label-text-color: map.get($theme, hover-label-text-color),
+    hover-leading-icon-color: map.get($theme, hover-leading-icon-color),
+    hover-state-layer-color: map.get($theme, hover-state-layer-color),
+    hover-state-layer-opacity: map.get($theme, hover-state-layer-opacity),
+    hover-supporting-text-color: map.get($theme, hover-supporting-text-color),
+    hover-trailing-icon-color: map.get($theme, hover-trailing-icon-color),
+    label-text-color: map.get($theme, label-text-color),
+    label-text-font: map.get($theme, label-text-font),
+    label-text-line-height: map.get($theme, label-text-line-height),
+    label-text-populated-line-height:
+      map.get($theme, label-text-populated-line-height),
+    label-text-populated-size: map.get($theme, label-text-populated-size),
+    label-text-size: map.get($theme, label-text-size),
+    label-text-tracking: map.get($theme, label-text-tracking),
+    label-text-weight: map.get($theme, label-text-weight),
+    leading-icon-color: map.get($theme, leading-icon-color),
+    leading-icon-size: map.get($theme, leading-icon-size),
+    supporting-text-color: map.get($theme, supporting-text-color),
+    supporting-text-font: map.get($theme, supporting-text-font),
+    supporting-text-line-height: map.get($theme, supporting-text-line-height),
+    supporting-text-size: map.get($theme, supporting-text-size),
+    supporting-text-tracking: map.get($theme, supporting-text-tracking),
+    supporting-text-weight: map.get($theme, supporting-text-weight),
+    trailing-icon-color: map.get($theme, trailing-icon-color),
+    trailing-icon-size: map.get($theme, trailing-icon-size),
+  );
+
+  @include filled-field-theme.theme($field-theme);
+}

package/textfield/lib/_icon-theme.scss

@@ -0,0 +1,100 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use 'sass:map';
+@use '@material/web/iconbutton/standard-icon-button';
+
+@mixin theme-styles($theme) {
+  @include _leading-icon-color(
+    (
+      default: map.get($theme, leading-icon-color),
+      hover: map.get($theme, hover-leading-icon-color),
+      focus: map.get($theme, focus-leading-icon-color),
+      disabled: map.get($theme, disabled-leading-icon-color),
+    )
+  );
+  @include _trailing-icon-color(
+    (
+      default: map.get($theme, trailing-icon-color),
+      hover: map.get($theme, hover-trailing-icon-color),
+      focus: map.get($theme, focus-trailing-icon-color),
+      disabled: map.get($theme, disabled-trailing-icon-color),
+    )
+  );
+
+  &.md3-text-field--error:not(.md3-text-field--disabled) {
+    @include _leading-icon-color(
+      (
+        default: map.get($theme, error-leading-icon-color),
+        hover: map.get($theme, error-hover-leading-icon-color),
+        focus: map.get($theme, error-focus-leading-icon-color),
+      )
+    );
+    @include _trailing-icon-color(
+      (
+        default: map.get($theme, error-trailing-icon-color),
+        hover: map.get($theme, error-hover-trailing-icon-color),
+        focus: map.get($theme, error-focus-trailing-icon-color),
+      )
+    );
+  }
+
+  &.md3-text-field--disabled {
+    .md3-text-field__icon--leading {
+      opacity: map.get($theme, disabled-leading-icon-opacity);
+    }
+
+    .md3-text-field__icon--trailing {
+      opacity: map.get($theme, disabled-trailing-icon-opacity);
+    }
+  }
+}
+
+@mixin _leading-icon-color($colors) {
+  @include _set-leading-icon-color(map.get($colors, default));
+
+  &:hover {
+    @include _set-leading-icon-color(map.get($colors, hover));
+  }
+
+  &:focus-within {
+    @include _set-leading-icon-color(map.get($colors, focus));
+  }
+
+  &.md3-text-field--disabled {
+    @include _set-leading-icon-color(map.get($colors, disabled));
+  }
+}
+
+@mixin _set-leading-icon-color($color) {
+  .md3-text-field__icon--leading {
+    color: $color;
+  }
+}
+
+@mixin _trailing-icon-color($colors) {
+  @include _set-trailing-icon-color(map.get($colors, default));
+
+  &:hover {
+    @include _set-trailing-icon-color(map.get($colors, hover));
+  }
+
+  &:focus-within {
+    @include _set-trailing-icon-color(map.get($colors, focus));
+  }
+
+  &.md3-text-field--disabled {
+    @include _set-trailing-icon-color(map.get($colors, disabled));
+  }
+}
+
+@mixin _set-trailing-icon-color($color) {
+  .md3-text-field__icon--trailing {
+    color: $color;
+  }
+}

package/textfield/lib/_icon.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-text-field__icon {
+    display: flex;
+
+    ::slotted(*) {
+      // Remove excess whitespace below inline elementsxs
+      display: flex;
+    }
+  }
+}

package/textfield/lib/_input-theme.scss

@@ -0,0 +1,91 @@
+//
+// 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 'sass:map';
+@use '@material/web/sass/typography';
+@use './text-field';
+
+@function resolve-theme($theme, $resolvers) {
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    input-text
+  );
+
+  @return $theme;
+}
+
+@mixin theme-styles($theme) {
+  @include _caret-color(
+    (
+      default: map.get($theme, caret-color),
+      focus: map.get($theme, focus-caret-color),
+    )
+  );
+  @include _caret-error-color(
+    (
+      focus: map.get($theme, error-focus-caret-color),
+    )
+  );
+  @include _typography(
+    (
+      font: map.get($theme, input-text-font),
+      line-height: map.get($theme, input-text-line-height),
+      size: map.get($theme, input-text-size),
+      tracking: map.get($theme, input-text-tracking),
+      weight: map.get($theme, input-text-weight),
+    )
+  );
+
+  &:not(.md3-text-field--disabled) {
+    .md3-text-field__prefix,
+    .md3-text-field__suffix {
+      color: map.get($theme, input-text-prefix-color);
+    }
+
+    .md3-text-field__input::placeholder {
+      color: map.get($theme, input-text-placeholder-color);
+    }
+  }
+
+  .md3-text-field__prefix {
+    padding-inline-end: map.get($theme, input-text-prefix-padding);
+  }
+
+  .md3-text-field__suffix {
+    padding-inline-start: map.get($theme, input-text-suffix-padding);
+  }
+}
+
+@mixin _caret-color($colors) {
+  @include _set-caret-color(map.get($colors, default));
+
+  &:focus-within {
+    @include _set-caret-color(map.get($colors, focus));
+  }
+}
+
+@mixin _caret-error-color($colors) {
+  &.md3-text-field--error {
+    @include _caret-color($colors);
+  }
+}
+
+@mixin _set-caret-color($color) {
+  .md3-text-field__input {
+    caret-color: $color;
+  }
+}
+
+@mixin _typography($font) {
+  .md3-text-field__input,
+  .md3-text-field__prefix,
+  .md3-text-field__suffix {
+    @include typography.theme-styles($font);
+  }
+}

package/textfield/lib/_input.scss

@@ -0,0 +1,38 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  .md3-text-field__input {
+    @include input;
+  }
+}
+
+@mixin input() {
+  appearance: none;
+  background: none;
+  border: none;
+  color: currentColor;
+  outline: none;
+  padding: 0;
+  text-align: inherit;
+  width: 100%;
+
+  &::placeholder {
+    color: currentColor;
+    opacity: 1;
+  }
+
+  // Remove built-in datepicker icon on Chrome
+  &::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    background-color: Field; // Remove white background in Firefox HCM
+  }
+}

package/textfield/lib/_outlined-text-field-theme.scss

@@ -0,0 +1,186 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use '@material/web/field/lib/outlined-field-theme';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/shape';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/typography';
+@use '@material/web/tokens';
+@use './icon-theme';
+@use './input-theme';
+
+$light-theme: tokens.md-comp-outlined-text-field-values();
+$dark-theme: tokens.md-comp-outlined-text-field-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+$forced-colors-theme: (
+  disabled-input-text-color: GrayText,
+  disabled-input-text-opacity: 1,
+  disabled-label-text-color: GrayText,
+  disabled-label-text-opacity: 1,
+  disabled-leading-icon-color: GrayText,
+  disabled-leading-icon-opacity: 1,
+  disabled-outline-color: GrayText,
+  disabled-outline-opacity: 1,
+  disabled-supporting-text-color: GrayText,
+  disabled-supporting-text-opacity: 1,
+  disabled-trailing-icon-color: GrayText,
+  disabled-trailing-icon-opacity: 1,
+);
+
+@function _resolve-theme($theme, $resolvers) {
+  $theme: input-theme.resolve-theme($theme, $resolvers);
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get($resolvers, shape),
+    container-shape
+  );
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    label-text
+  );
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    supporting-text
+  );
+  @return $theme;
+}
+
+// Add missing tokens
+$_reference-theme: map.merge(
+  $light-theme,
+  (
+    container-padding-horizontal: null,
+    container-padding-vertical: null,
+    input-text-prefix-padding: null,
+    input-text-suffix-padding: null,
+    outline-label-padding: null,
+  )
+);
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme($_reference-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, outlined-text-field);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  // Add missing tokens
+  $theme: map.merge(
+    (
+      container-padding-horizontal: 16px,
+      container-padding-vertical: 8px,
+      input-text-prefix-padding: 2px,
+      input-text-suffix-padding: 2px,
+      outline-label-padding: 4px,
+    ),
+    $theme
+  );
+
+  $theme: theme.validate-theme-styles($_reference-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, outlined-text-field);
+
+  @include input-theme.theme-styles($theme);
+  @include icon-theme.theme-styles($theme);
+
+  $field-theme: (
+    container-height: map.get($theme, container-height),
+    container-shape-start-start: map.get($theme, container-shape-start-start),
+    container-shape-start-end: map.get($theme, container-shape-start-end),
+    container-shape-end-end: map.get($theme, container-shape-end-end),
+    container-shape-end-start: map.get($theme, container-shape-end-start),
+    disabled-content-color: map.get($theme, disabled-input-text-color),
+    disabled-content-opacity: map.get($theme, disabled-input-text-opacity),
+    disabled-label-text-color: map.get($theme, disabled-label-text-color),
+    disabled-label-text-opacity: map.get($theme, disabled-label-text-opacity),
+    disabled-leading-icon-color: map.get($theme, disabled-leading-icon-color),
+    disabled-leading-icon-opacity:
+      map.get($theme, disabled-leading-icon-opacity),
+    disabled-outline-color: map.get($theme, disabled-outline-color),
+    disabled-outline-opacity: map.get($theme, disabled-outline-opacity),
+    disabled-outline-width: map.get($theme, disabled-outline-width),
+    disabled-supporting-text-color:
+      map.get($theme, disabled-supporting-text-color),
+    disabled-supporting-text-opacity:
+      map.get($theme, disabled-supporting-text-opacity),
+    disabled-trailing-icon-color: map.get($theme, disabled-trailing-icon-color),
+    disabled-trailing-icon-opacity:
+      map.get($theme, disabled-trailing-icon-opacity),
+    error-focus-content-color: map.get($theme, error-focus-input-text-color),
+    error-focus-label-text-color: map.get($theme, error-focus-label-text-color),
+    error-focus-leading-icon-color:
+      map.get($theme, error-focus-leading-icon-color),
+    error-focus-outline-color: map.get($theme, error-focus-outline-color),
+    error-focus-supporting-text-color:
+      map.get($theme, error-focus-supporting-text-color),
+    error-focus-trailing-icon-color:
+      map.get($theme, error-focus-trailing-icon-color),
+    error-hover-content-color: map.get($theme, error-hover-input-text-color),
+    error-hover-label-text-color: map.get($theme, error-hover-label-text-color),
+    error-hover-leading-icon-color:
+      map.get($theme, error-hover-leading-icon-color),
+    error-hover-outline-color: map.get($theme, error-hover-outline-color),
+    error-hover-supporting-text-color:
+      map.get($theme, error-hover-supporting-text-color),
+    error-hover-trailing-icon-color:
+      map.get($theme, error-hover-trailing-icon-color),
+    error-content-color: map.get($theme, error-input-text-color),
+    error-label-text-color: map.get($theme, error-label-text-color),
+    error-leading-icon-color: map.get($theme, error-leading-icon-color),
+    error-outline-color: map.get($theme, error-outline-color),
+    error-supporting-text-color: map.get($theme, error-supporting-text-color),
+    error-trailing-icon-color: map.get($theme, error-trailing-icon-color),
+    focus-content-color: map.get($theme, focus-input-text-color),
+    focus-label-text-color: map.get($theme, focus-label-text-color),
+    focus-leading-icon-color: map.get($theme, focus-leading-icon-color),
+    focus-outline-color: map.get($theme, focus-outline-color),
+    focus-outline-width: map.get($theme, focus-outline-width),
+    focus-supporting-text-color: map.get($theme, focus-supporting-text-color),
+    focus-trailing-icon-color: map.get($theme, focus-trailing-icon-color),
+    hover-content-color: map.get($theme, hover-input-text-color),
+    hover-label-text-color: map.get($theme, hover-label-text-color),
+    hover-leading-icon-color: map.get($theme, hover-leading-icon-color),
+    hover-outline-color: map.get($theme, hover-outline-color),
+    hover-outline-width: map.get($theme, hover-outline-width),
+    hover-supporting-text-color: map.get($theme, hover-supporting-text-color),
+    hover-trailing-icon-color: map.get($theme, hover-trailing-icon-color),
+    content-color: map.get($theme, input-text-color),
+    label-text-color: map.get($theme, label-text-color),
+    label-text-font: map.get($theme, label-text-font),
+    label-text-line-height: map.get($theme, label-text-line-height),
+    label-text-padding-bottom: map.get($theme, label-text-padding-bottom),
+    label-text-populated-line-height:
+      map.get($theme, label-text-populated-line-height),
+    label-text-populated-size: map.get($theme, label-text-populated-size),
+    label-text-size: map.get($theme, label-text-size),
+    label-text-tracking: map.get($theme, label-text-tracking),
+    label-text-weight: map.get($theme, label-text-weight),
+    leading-icon-color: map.get($theme, leading-icon-color),
+    leading-icon-size: map.get($theme, leading-icon-size),
+    outline-color: map.get($theme, outline-color),
+    outline-width: map.get($theme, outline-width),
+    supporting-text-color: map.get($theme, supporting-text-color),
+    supporting-text-font: map.get($theme, supporting-text-font),
+    supporting-text-line-height: map.get($theme, supporting-text-line-height),
+    supporting-text-size: map.get($theme, supporting-text-size),
+    supporting-text-tracking: map.get($theme, supporting-text-tracking),
+    supporting-text-weight: map.get($theme, supporting-text-weight),
+    trailing-icon-color: map.get($theme, trailing-icon-color),
+    trailing-icon-size: map.get($theme, trailing-icon-size),
+  );
+
+  @include outlined-field-theme.theme($field-theme);
+}

package/textfield/lib/_text-field.scss

@@ -0,0 +1,28 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@mixin static-styles() {
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+
+  .md3-text-field {
+    display: inline-flex;
+    flex: 1;
+  }
+
+  .md3-text-field__field {
+    cursor: text;
+    flex: 1;
+
+    .md3-text-field--disabled & {
+      cursor: default;
+    }
+  }
+}

package/textfield/lib/filled-forced-colors-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/textfield/lib/filled-forced-colors-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@media(forced-colors: active){.md3-text-field--filled{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=filled-forced-colors-styles.css.js.map

package/textfield/lib/filled-forced-colors-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-forced-colors-styles.css.js","sourceRoot":"","sources":["filled-forced-colors-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`@media(forced-colors: active){.md3-text-field--filled{--md-filled-text-field-disabled-active-indicator-color:GrayText;--md-filled-text-field-disabled-active-indicator-opacity:1;--md-filled-text-field-disabled-input-text-color:GrayText;--md-filled-text-field-disabled-input-text-opacity:1;--md-filled-text-field-disabled-label-text-color:GrayText;--md-filled-text-field-disabled-label-text-opacity:1;--md-filled-text-field-disabled-leading-icon-color:GrayText;--md-filled-text-field-disabled-leading-icon-opacity:1;--md-filled-text-field-disabled-supporting-text-color:GrayText;--md-filled-text-field-disabled-supporting-text-opacity:1;--md-filled-text-field-disabled-trailing-icon-color:GrayText;--md-filled-text-field-disabled-trailing-icon-opacity:1}}/*# sourceMappingURL=filled-forced-colors-styles.css.map */\n`;\n "]}