material-web-evo 10002.10001.10000

package/field/internal/_outlined-field.scss

@@ -0,0 +1,344 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// 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-outlined-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 $value {
+      --md-outlined-field-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-field-values();
+
+  @layer styles {
+    :host {
+      // Only use the logical properties.
+      $tokens: map.remove($tokens, 'container-shape');
+      @each $token, $value in $tokens {
+        --_#{$token}: #{$value};
+      }
+    }
+
+    .outline {
+      border-color: var(--_outline-color);
+      border-radius: inherit;
+      display: flex;
+      // Allow events to target elements underneath the outline, such as icons.
+      pointer-events: none;
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+    }
+
+    .outline-start,
+    .outline-panel-inactive,
+    .outline-panel-active,
+    .outline-end {
+      // ::before is inactive border, ::after is active border. Borders are
+      // absolutely positioned within their elements.
+      &::before,
+      &::after {
+        border: inherit;
+        content: '';
+        inset: 0;
+        position: absolute;
+      }
+    }
+
+    .outline-start,
+    .outline-end {
+      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: opacity map.get($_md-sys-motion, 'duration-short3')
+          map.get($_md-sys-motion, 'easing-emphasized');
+      }
+    }
+
+    .focused .outline-start::after,
+    .focused .outline-end::after {
+      opacity: 1;
+    }
+
+    .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;
+        margin-inline-end: var(--_outline-label-padding);
+      }
+    }
+
+    .outline-end {
+      flex-grow: 1;
+      margin-inline-start: calc(-1 * var(--_outline-label-padding));
+
+      &::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;
+      }
+    }
+
+    .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% - var(--_leading-space) - var(--_trailing-space));
+      padding: 0 var(--_outline-label-padding);
+      position: relative;
+    }
+
+    .no-label .outline-notch {
+      display: none;
+    }
+
+    .outline-panel-inactive,
+    .outline-panel-active {
+      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: transform map.get($_md-sys-motion, 'duration-short3')
+          map.get($_md-sys-motion, 'easing-emphasized');
+      }
+
+      // 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;
+      }
+    }
+
+    .populated .outline-panel-inactive,
+    .populated .outline-panel-active,
+    .focused .outline-panel-inactive,
+    .focused .outline-panel-active {
+      &::before,
+      &::after {
+        transform: scaleX(0);
+      }
+    }
+
+    .outline-panel-active {
+      opacity: 0;
+      transition: opacity map.get($_md-sys-motion, 'duration-short3')
+        map.get($_md-sys-motion, 'easing-emphasized');
+    }
+
+    .focused .outline-panel-active {
+      opacity: 1;
+    }
+
+    .outline-label {
+      display: flex;
+      max-width: 100%;
+      // Center the floating label within the outline stroke
+      transform: translateY(calc(-100% + var(--_label-text-padding-bottom)));
+    }
+
+    // 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.
+    $shape-start: max(
+      var(--_container-shape-start-start),
+      var(--_container-shape-end-start)
+    );
+    $shape-end: max(
+      var(--_container-shape-start-end),
+      var(--_container-shape-end-end)
+    );
+    $start-space: max(
+      var(--_leading-space),
+      $shape-start + var(--_outline-label-padding)
+    );
+    $end-space: max(var(--_trailing-space), $shape-end);
+
+    .outline-start,
+    .field:not(.with-start) .content ::slotted(*) {
+      padding-inline-start: $start-space;
+    }
+
+    .field:not(.with-start) .label-wrapper {
+      margin-inline-start: $start-space;
+    }
+
+    .field:not(.with-end) .content ::slotted(*) {
+      padding-inline-end: $end-space;
+    }
+
+    .field:not(.with-end) .label-wrapper {
+      margin-inline-end: $end-space;
+    }
+
+    .outline-start::before,
+    .outline-end::before,
+    .outline-panel-inactive,
+    .outline-panel-inactive::before,
+    .outline-panel-inactive::after {
+      border-width: var(--_outline-width);
+    }
+
+    // States
+
+    :hover .outline {
+      border-color: var(--_hover-outline-color);
+      color: var(--_hover-outline-color); // Needed for Firefox HCM
+    }
+
+    :hover .outline-start::before,
+    :hover .outline-end::before,
+    :hover .outline-panel-inactive,
+    :hover .outline-panel-inactive::before,
+    :hover .outline-panel-inactive::after {
+      border-width: var(--_hover-outline-width);
+    }
+
+    .focused .outline {
+      border-color: var(--_focus-outline-color);
+      color: var(--_focus-outline-color); // Needed for Firefox HCM
+    }
+
+    .outline-start::after,
+    .outline-end::after,
+    .outline-panel-active,
+    .outline-panel-active::before,
+    .outline-panel-active::after {
+      border-width: var(--_focus-outline-width);
+    }
+
+    .disabled .outline {
+      border-color: var(--_disabled-outline-color);
+      color: var(--_disabled-outline-color); // Needed for Firefox HCM
+    }
+
+    .disabled .outline-start,
+    .disabled .outline-end,
+    .disabled .outline-panel-inactive {
+      opacity: var(--_disabled-outline-opacity);
+    }
+
+    .disabled .outline-start::before,
+    .disabled .outline-end::before,
+    .disabled .outline-panel-inactive,
+    .disabled .outline-panel-inactive::before,
+    .disabled .outline-panel-inactive::after {
+      border-width: var(--_disabled-outline-width);
+    }
+
+    .error .outline {
+      border-color: var(--_error-outline-color);
+      color: var(--_error-outline-color); // Needed for Firefox HCM
+    }
+
+    .error:hover .outline {
+      border-color: var(--_error-hover-outline-color);
+      // Needed for Firefox HCM
+      color: var(--_error-hover-outline-color);
+    }
+
+    .error.focused .outline {
+      border-color: var(--_error-focus-outline-color);
+      // Needed for Firefox HCM
+      color: var(--_error-focus-outline-color);
+    }
+
+    // Move the container up and to the left so that the resize handle doesn't
+    // overlap the focus outline. Content is moved back the opposite direction.
+    .resizable .container {
+      bottom: var(--_focus-outline-width);
+      inset-inline-end: var(--_focus-outline-width);
+      // Ensures the container doesn't create an overhang that can be clicked on.
+      clip-path: inset(
+        var(--_focus-outline-width) 0 0 var(--_focus-outline-width)
+      );
+    }
+
+    .resizable .container > * {
+      top: var(--_focus-outline-width);
+      inset-inline-start: var(--_focus-outline-width);
+    }
+
+    .resizable .container:dir(rtl) {
+      clip-path: inset(
+        var(--_focus-outline-width) var(--_focus-outline-width) 0 0
+      );
+    }
+  }
+
+  @layer hcm {
+    @media (forced-colors: active) {
+      .disabled .outline {
+        border-color: GrayText;
+        color: GrayText; // Needed for Firefox HCM
+      }
+
+      .disabled :is(.outline-start, .outline-end, .outline-panel-inactive) {
+        opacity: 1;
+      }
+    }
+  }
+}

package/field/internal/_shared.scss

@@ -0,0 +1,78 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use './content';
+@use './label';
+@use './supporting-text';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    display: inline-flex;
+    resize: both;
+  }
+
+  .field {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    // Allow the use of block/inline reflexive RTL properties without impacting
+    // structure when languages change.
+    writing-mode: horizontal-tb;
+    max-width: 100%; // Do not allow field to grow beyond explicitly set width
+  }
+
+  // A separate wrapper is needed around the container for the outline, whose
+  // floating label needs overflow: visible. The container itself needs
+  // overflow: hidden when resizable.
+  .container-overflow {
+    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);
+    display: flex;
+    height: 100%;
+    position: relative;
+  }
+
+  .container {
+    align-items: center;
+    border-radius: inherit;
+    display: flex;
+    flex: 1;
+    max-height: 100%;
+    min-height: 100%;
+    min-width: min-content;
+    position: relative;
+  }
+
+  .field,
+  .container-overflow {
+    resize: inherit;
+  }
+
+  .resizable:not(.disabled) .container {
+    // `resize` is inherited from the host, but only applies to the container
+    // when resizable.
+    resize: inherit;
+    // Overflow is visible when not resizable to allow overflowing content such
+    // as popups or icon focus rings.
+    // Resizable fields cannot display overflowing content due to `resize` not
+    // allowing it.
+    overflow: hidden;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+
+  @include content.styles;
+  @include label.styles;
+  @include supporting-text.styles;
+}

package/field/internal/_supporting-text.scss

@@ -0,0 +1,61 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  @layer styles {
+    .supporting-text {
+      color: var(--_supporting-text-color);
+      display: flex;
+      font-family: var(--_supporting-text-font);
+      font-size: var(--_supporting-text-size);
+      line-height: var(--_supporting-text-line-height);
+      font-weight: var(--_supporting-text-weight);
+      gap: 16px;
+      justify-content: space-between;
+      padding-inline-start: var(--_supporting-text-leading-space);
+      padding-inline-end: var(--_supporting-text-trailing-space);
+      padding-top: var(--_supporting-text-top-space);
+    }
+
+    // Don't shrink the counter when the supporting text is long and wraps
+    .supporting-text :nth-child(2) {
+      flex-shrink: 0;
+    }
+
+    :hover .supporting-text {
+      color: var(--_hover-supporting-text-color);
+    }
+
+    .focus .supporting-text {
+      color: var(--_focus-supporting-text-color);
+    }
+
+    .disabled .supporting-text {
+      color: var(--_disabled-supporting-text-color);
+      opacity: var(--_disabled-supporting-text-opacity);
+    }
+
+    .error .supporting-text {
+      color: var(--_error-supporting-text-color);
+    }
+
+    .error:hover .supporting-text {
+      color: var(--_error-hover-supporting-text-color);
+    }
+
+    .error.focus .supporting-text {
+      color: var(--_error-focus-supporting-text-color);
+    }
+  }
+
+  @layer hcm {
+    @media (forced-colors: active) {
+      .disabled .supporting-text {
+        color: GrayText;
+        opacity: 1;
+      }
+    }
+  }
+}

package/field/internal/field.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+/**
+ * A field component.
+ */
+export declare class Field extends LitElement {
+    disabled: boolean;
+    error: boolean;
+    focused: boolean;
+    alwaysFloatingLabel: boolean;
+    label: string;
+    noAsterisk: boolean;
+    populated: boolean;
+    required: boolean;
+    resizable: boolean;
+    supportingText: string;
+    errorText: string;
+    count: number;
+    max: number;
+    /**
+     * Whether or not the field has leading content.
+     */
+    hasStart: boolean;
+    /**
+     * Whether or not the field has trailing content.
+     */
+    hasEnd: boolean;
+    private readonly slottedAriaDescribedBy;
+    private get counterText();
+    private get supportingOrErrorText();
+    private isAnimating;
+    private labelAnimation?;
+    /**
+     * When set to true, the error text's `role="alert"` will be removed, then
+     * re-added after an animation frame. This will re-announce an error message
+     * to screen readers.
+     */
+    private refreshErrorAlert;
+    private disableTransitions;
+    private readonly floatingLabelEl;
+    private readonly restingLabelEl;
+    private readonly containerEl;
+    /**
+     * Re-announces the field's error supporting text to screen readers.
+     *
+     * Error text announces to screen readers anytime it is visible and changes.
+     * Use the method to re-announce the message when the text has not changed,
+     * but announcement is still needed (such as for `reportValidity()`).
+     */
+    reannounceError(): void;
+    protected update(props: PropertyValues<Field>): void;
+    protected render(): TemplateResult<1>;
+    protected updated(changed: PropertyValues<Field>): void;
+    protected renderBackground?(): TemplateResult;
+    protected renderIndicator?(): TemplateResult;
+    protected renderOutline?(floatingLabel: unknown): TemplateResult;
+    private renderSupportingText;
+    private updateSlottedAriaDescribedBy;
+    private renderLabel;
+    private animateLabelIfNeeded;
+    private getLabelKeyframes;
+    getSurfacePositionClientRect(): DOMRect;
+}