@material/web 0.1.0-alpha.0

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

@@ -0,0 +1,311 @@
+//
+// 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 'sass:string';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/shape';
+@use '@material/web/sass/theme';
+@use '@material/web/sass/var';
+@use '@material/web/tokens';
+@use './content-theme';
+@use './field-theme';
+@use './label-theme';
+@use './supporting-text-theme';
+
+$_default-deps: (
+  md-sys-color: tokens.md-sys-color-values-light-dynamic(),
+  md-sys-shape: tokens.md-sys-shape-values(),
+  md-sys-state: tokens.md-sys-state-values(),
+  md-sys-typescale: tokens.md-sys-typescale-values(),
+);
+
+@function values($deps: $_default-deps, $exclude-hardcoded-values: false) {
+  $text-field-values: tokens.md-comp-outlined-text-field-values(
+    $deps,
+    $exclude-hardcoded-values
+  );
+  // TODO(b/203778922): Remove *-type when type composite tokens are removed
+  // Remove unused tokens.
+  $values: map.remove(
+    $text-field-values,
+    caret-color,
+    disabled-input-text-color,
+    disabled-input-text-opacity,
+    error-focus-caret-color,
+    error-focus-input-text-color,
+    error-hover-input-text-color,
+    error-input-text-color,
+    focus-input-text-color,
+    hover-input-text-color,
+    input-text-color,
+    input-text-font,
+    input-text-line-height,
+    input-text-size,
+    input-text-tracking,
+    input-text-type,
+    input-text-weight,
+    label-text-type,
+    supporting-text-type
+  );
+
+  // Add missing tokens.
+  $values: map.merge(
+    $values,
+    (
+      container-padding-horizontal: if($exclude-hardcoded-values, null, 16px),
+      container-padding-vertical: if($exclude-hardcoded-values, null, 8px),
+      content-color: map.get($text-field-values, input-text-color),
+      disabled-content-color:
+        map.get($text-field-values, disabled-input-text-color),
+      disabled-content-opacity:
+        map.get($text-field-values, disabled-input-text-opacity),
+      error-content-color: map.get($text-field-values, error-input-text-color),
+      error-focus-content-color:
+        map.get($text-field-values, error-focus-input-text-color),
+      error-hover-content-color:
+        map.get($text-field-values, error-hover-input-text-color),
+      focus-content-color: map.get($text-field-values, focus-input-text-color),
+      hover-content-color: map.get($text-field-values, hover-input-text-color),
+      label-text-padding-bottom: if($exclude-hardcoded-values, null, 8px),
+      outline-label-padding: if($exclude-hardcoded-values, null, 4px),
+      supporting-text-padding: if($exclude-hardcoded-values, null, 16px),
+      supporting-text-padding-top: if($exclude-hardcoded-values, null, 4px),
+    )
+  );
+
+  @return $values;
+}
+
+$light-theme: values();
+$dark-theme: values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  ),
+  $exclude-hardcoded-values: true
+);
+
+@function _resolve-theme($theme, $resolvers) {
+  $theme: label-theme.resolve-theme($theme, $resolvers);
+  $theme: supporting-text-theme.resolve-theme($theme, $resolvers);
+  $theme: shape.resolve-theme(
+    $theme,
+    map.get($resolvers, shape),
+    container-shape
+  );
+  @return $theme;
+}
+
+@mixin theme($theme, $resolvers: resolvers.$material) {
+  // Add resolved tokens so that $theme may specify them.
+  $reference: map.merge($light-theme, _resolve-theme($light-theme, $resolvers));
+  $theme: theme.validate-theme($reference, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, outlined-field);
+
+  @include theme.emit-theme-vars($theme);
+}
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles($light-theme, $theme);
+  $theme: _resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, outlined-field);
+
+  @include field-theme.theme-styles($theme);
+  @include content-theme.theme-styles($theme);
+  @include label-theme.theme-styles($theme);
+  @include supporting-text-theme.theme-styles($theme);
+
+  .md3-field__label--floating {
+    // Center the label within the outline stroke
+    transform: translateY(
+      calc(-100% + map.get($theme, label-text-padding-bottom))
+    );
+  }
+
+  @include _container-padding-horizontal($theme);
+  @include _container-shape(
+    (
+      start-start: map.get($theme, container-shape-start-start),
+      start-end: map.get($theme, container-shape-start-end),
+      end-end: map.get($theme, container-shape-end-end),
+      end-start: map.get($theme, container-shape-end-start),
+    )
+  );
+  @include _outline-color(
+    (
+      default: map.get($theme, outline-color),
+      disabled: map.get($theme, disabled-outline-color),
+      focus: map.get($theme, focus-outline-color),
+      hover: map.get($theme, hover-outline-color),
+    )
+  );
+  @include _outline-error-color(
+    (
+      default: map.get($theme, error-outline-color),
+      focus: map.get($theme, error-focus-outline-color),
+      hover: map.get($theme, error-hover-outline-color),
+    )
+  );
+  @include _outline-label-padding(map.get($theme, outline-label-padding));
+  @include _outline-opacity(
+    (
+      disabled: map.get($theme, disabled-outline-opacity),
+    )
+  );
+  @include _outline-notch-max-width(
+    map.get($theme, container-padding-horizontal)
+  );
+  @include _outline-width(
+    (
+      default: map.get($theme, outline-width),
+      disabled: map.get($theme, disabled-outline-width),
+      focus: map.get($theme, focus-outline-width),
+      hover: map.get($theme, hover-outline-width),
+    )
+  );
+}
+
+@mixin _container-padding-horizontal($theme) {
+  // Add padding that will grow to compensate for the outline's shape.
+  // This is needed to prevent the outline border from clipping with the label
+  // and is mirrored in the container padding to align the content and resting
+  // label with the adjusted floating label.
+  $padding: map.get($theme, container-padding-horizontal);
+  $shape-start: max(
+    map.get($theme, container-shape-start-start),
+    map.get($theme, container-shape-end-start)
+  );
+  $shape-end: max(
+    map.get($theme, container-shape-start-end),
+    map.get($theme, container-shape-end-end)
+  );
+  $label-padding: map.get($theme, outline-label-padding);
+
+  .md3-field__outline-start,
+  &:not(.md3-field--with-start) .md3-field__start {
+    padding-inline-start: max($padding, $shape-start + $label-padding);
+  }
+
+  &:not(.md3-field--with-end) {
+    .md3-field__end {
+      padding-inline-end: max($padding, $shape-end);
+    }
+  }
+}
+
+@mixin _container-shape($shape) {
+  .md3-field__outline {
+    border-start-start-radius: map.get($shape, start-start);
+    border-start-end-radius: map.get($shape, start-end);
+    border-end-end-radius: map.get($shape, end-end);
+    border-end-start-radius: map.get($shape, end-start);
+  }
+}
+
+@mixin _outline-label-padding($padding) {
+  .md3-field__outline-start::before,
+  .md3-field__outline-start::after {
+    margin-inline-end: $padding;
+  }
+
+  .md3-field__outline-notch {
+    padding: 0 $padding;
+    margin-inline-start: calc(-1 * #{$padding});
+    margin-inline-end: $padding;
+  }
+
+  .md3-field__outline-end {
+    margin-inline-start: calc(-1 * #{$padding});
+  }
+}
+
+@mixin _outline-notch-max-width($container-padding-horizontal) {
+  .md3-field__outline-notch {
+    max-width: calc(100% - 2 * #{$container-padding-horizontal});
+  }
+}
+
+@mixin _outline-color($colors) {
+  @include _set-outline-color(map.get($colors, default));
+
+  &:hover {
+    @include _set-outline-color(map.get($colors, hover));
+  }
+
+  &.md3-field--focused {
+    @include _set-outline-color(map.get($colors, focus));
+  }
+
+  &.md3-field--disabled {
+    @include _set-outline-color(map.get($colors, disabled));
+  }
+}
+
+@mixin _set-outline-color($color) {
+  .md3-field__outline {
+    border-color: $color;
+    color: $color; // Needed for Firefox HCM
+  }
+}
+
+@mixin _outline-error-color($colors) {
+  &:not(.md3-field--disabled).md3-field--error {
+    @include _outline-color($colors);
+  }
+}
+
+@mixin _outline-opacity($opacities) {
+  @include _set-outline-inactive-opacity(map.get($opacities, default));
+
+  &.md3-field--disabled {
+    @include _set-outline-inactive-opacity(map.get($opacities, disabled));
+  }
+}
+
+@mixin _set-outline-inactive-opacity($opacity) {
+  .md3-field__outline-start,
+  .md3-field__outline-end,
+  .md3-field__outline-panel-inactive {
+    opacity: $opacity;
+  }
+}
+
+@mixin _outline-width($widths) {
+  @include _set-outline-width(map.get($widths, default));
+
+  &:hover {
+    @include _set-outline-width(map.get($widths, hover));
+  }
+
+  @include _set-outline-focus-width(map.get($widths, focus));
+
+  &.md3-field--disabled {
+    @include _set-outline-width(map.get($widths, disabled));
+  }
+}
+
+@mixin _set-outline-width($width) {
+  .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: $width;
+  }
+}
+
+@mixin _set-outline-focus-width($width) {
+  .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: $width;
+  }
+}

package/field/lib/_outlined-field.scss

@@ -0,0 +1,194 @@
+//
+// 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/motion/animation';
+
+$_animation-duration: 150ms;
+
+@mixin static-styles() {
+  .md3-field__outline {
+    @include outline;
+  }
+
+  .md3-field__outline-start,
+  .md3-field__outline-panel-inactive,
+  .md3-field__outline-panel-active,
+  .md3-field__outline-end {
+    @include outline-border;
+  }
+
+  .md3-field__outline-start,
+  .md3-field__outline-end {
+    @include outline-edges;
+
+    .md3-field--focused & {
+      @include outline-edges-focus;
+    }
+  }
+
+  .md3-field__outline-start {
+    @include outline-start;
+  }
+
+  .md3-field__outline-end {
+    @include outline-end;
+  }
+
+  .md3-field__outline-notch {
+    @include outline-notch;
+
+    .md3-field--no-label & {
+      @include outline-notch-no-label;
+    }
+  }
+
+  .md3-field__outline-panel-inactive,
+  .md3-field__outline-panel-active {
+    @include outline-panel;
+
+    .md3-field--populated &,
+    .md3-field--focused & {
+      @include outline-panel-open;
+    }
+  }
+
+  .md3-field__outline-panel-active {
+    @include outline-panel-active;
+
+    .md3-field--focused & {
+      @include outline-panel-active-focus;
+    }
+  }
+}
+
+@mixin outline() {
+  display: flex;
+  // Allow events to target elements underneath the outline, such as icons.
+  pointer-events: none;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+@mixin outline-border() {
+  // ::before is inactive border, ::after is active border. Borders are
+  // absolutely positioned within their elements.
+  &::before,
+  &::after {
+    border: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
+}
+
+@mixin outline-edges() {
+  border: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+  position: relative;
+
+  &::before,
+  &::after {
+    border-bottom-style: solid;
+    border-top-style: solid;
+  }
+
+  &::after {
+    opacity: 0;
+    transition: animation.standard(opacity, $_animation-duration);
+  }
+}
+
+@mixin outline-edges-focus() {
+  &::after {
+    opacity: 1;
+  }
+}
+
+@mixin outline-start() {
+  &::before,
+  &::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;
+  }
+}
+
+@mixin outline-end() {
+  flex-grow: 1;
+
+  &::before,
+  &::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;
+  }
+}
+
+@mixin outline-notch() {
+  align-items: flex-start;
+  border: inherit;
+  display: flex;
+  position: relative;
+}
+
+@mixin outline-notch-no-label() {
+  display: none;
+}
+
+@mixin outline-panel() {
+  border: inherit;
+  border-bottom-style: solid;
+  inset: 0;
+  position: absolute;
+
+  &::before,
+  &::after {
+    border-top-style: solid;
+    border-bottom: none;
+    bottom: auto;
+    transform: scaleX(1);
+    transition: animation.standard(transform, $_animation-duration);
+  }
+
+  // Note: no need to do any RTL flipping here. If RTLCSS flips this, it's also
+  // ok, we just need one to be left and one to be right.
+  &::before {
+    right: 50%;
+    transform-origin: top left;
+  }
+
+  &::after {
+    left: 50%;
+    transform-origin: top right;
+  }
+}
+
+@mixin outline-panel-open() {
+  &::before,
+  &::after {
+    transform: scaleX(0);
+  }
+}
+
+@mixin outline-panel-active() {
+  opacity: 0;
+  transition: animation.standard(opacity, $_animation-duration);
+}
+
+@mixin outline-panel-active-focus() {
+  opacity: 1;
+}

package/field/lib/_supporting-text-theme.scss

@@ -0,0 +1,107 @@
+//
+// 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/sass/typography';
+
+@function resolve-theme($theme, $resolvers) {
+  @return typography.resolve-theme(
+    $theme,
+    map.get($resolvers, typography),
+    supporting-text
+  );
+}
+
+@mixin theme-styles($theme) {
+  @include _color(
+    (
+      default: map.get($theme, supporting-text-color),
+      focus: map.get($theme, focus-supporting-text-color),
+      hover: map.get($theme, hover-supporting-text-color),
+      disabled: map.get($theme, disabled-supporting-text-color),
+    )
+  );
+
+  &:not(.md3-field--disabled).md3-field--error {
+    @include _color(
+      (
+        default: map.get($theme, error-supporting-text-color),
+        focus: map.get($theme, error-focus-supporting-text-color),
+        hover: map.get($theme, error-hover-supporting-text-color),
+      )
+    );
+  }
+
+  .md3-field__supporting-text {
+    @include typography.theme-styles(
+      (
+        font: map.get($theme, supporting-text-font),
+        tracking: map.get($theme, supporting-text-tracking),
+        weight: map.get($theme, supporting-text-weight),
+        size: map.get($theme, supporting-text-size),
+        line-height: map.get($theme, supporting-text-line-height),
+      )
+    );
+  }
+
+  &.md3-field--disabled {
+    .md3-field__supporting-text {
+      opacity: map.get($theme, disabled-supporting-text-opacity);
+    }
+  }
+
+  @include _padding(
+    map.get($theme, supporting-text-padding),
+    map.get($theme, supporting-text-padding-top)
+  );
+}
+
+@mixin _color($colors) {
+  .md3-field__supporting-text {
+    color: map.get($colors, default);
+  }
+
+  &:hover {
+    .md3-field__supporting-text {
+      color: map.get($colors, hover);
+    }
+  }
+
+  &.md3-field--focus {
+    .md3-field__supporting-text {
+      color: map.get($colors, focus);
+    }
+  }
+
+  &.md3-field--disabled {
+    .md3-field__supporting-text {
+      color: map.get($colors, disabled);
+    }
+  }
+}
+
+@mixin _padding($padding-horizontal, $padding-top) {
+  .md3-field__supporting-text {
+    padding: 0 $padding-horizontal;
+  }
+
+  // Add padding to slotted elements instead of the wrappers so that it does not
+  // show when the supporting text is empty.
+  .md3-field__supporting-text-start,
+  .md3-field__supporting-text-end {
+    ::slotted(:not(:empty)) {
+      padding-top: $padding-top;
+    }
+  }
+
+  .md3-field__supporting-text-end {
+    ::slotted(:not(:empty)) {
+      padding-inline-start: $padding-horizontal;
+    }
+  }
+}

package/field/lib/_supporting-text.scss

@@ -0,0 +1,20 @@
+//
+// 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-field__supporting-text {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .md3-field__supporting-text-start,
+  .md3-field__supporting-text-end {
+    // Can't be an inline display element (<span>) for padding-top to work.
+    display: flex;
+  }
+}

package/field/lib/field.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @requirecss {field.lib.shared_styles}
+ *
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+/** @soyCompatible */
+export declare class Field extends LitElement {
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    label?: string;
+    populated: boolean;
+    required: boolean;
+    /**
+     * Whether or not the field has leading content.
+     */
+    hasStart: boolean;
+    /**
+     * Whether or not the field has trailing content.
+     */
+    hasEnd: boolean;
+    protected isAnimating: boolean;
+    protected readonly labelAnimationSignal: import("@material/web/motion/animation.js").AnimationSignal;
+    protected readonly floatingLabelEl: Promise<HTMLElement>;
+    protected readonly restingLabelEl: Promise<HTMLElement>;
+    /** @soyTemplate */
+    render(): TemplateResult;
+    /** @soyTemplate */
+    protected renderContainer(): TemplateResult;
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderContainerContents(): TemplateResult;
+    /** @soyTemplate */
+    protected renderMiddleContents(): TemplateResult;
+    /** @soyTemplate */
+    protected renderFloatingLabel(): TemplateResult;
+    /** @soyTemplate */
+    protected renderRestingLabel(): TemplateResult;
+    /** @soyTemplate */
+    protected renderLabelText(): string;
+    /** @soyTemplate */
+    protected renderSupportingText(): TemplateResult;
+    protected update(props: PropertyValues<Field>): void;
+    protected animateLabelIfNeeded({ wasFocused, wasPopulated }: {
+        wasFocused?: boolean;
+        wasPopulated?: boolean;
+    }): Promise<void>;
+    protected getLabelKeyframes(): Promise<{
+        transform: string;
+    }[]>;
+}