@material/web 1.0.0-pre.8 → 1.0.0

package/field/internal/_label.scss

@@ -0,0 +1,94 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .label {
+    box-sizing: border-box;
+    color: var(--_label-text-color);
+    overflow: hidden;
+    max-width: 100%;
+    // TODO: Check with design, should there be any transition from resting to
+    // floating when there is a mismatch between ellipsis, such as opacity
+    // transition?
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 1;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    line-height: var(--_label-text-line-height);
+    font-weight: var(--_label-text-weight);
+    width: min-content;
+  }
+
+  .label-wrapper {
+    inset: 0;
+    // The resting label at 100% height can block pointer events to the content
+    // if it's very long and spans the full width of the field. Additionally,
+    // selecting the label's text doesn't present a good UX, since the user
+    // selection should be re-focused to another element (such as the input)
+    // upon focusing. Finally, since the actual label elements are swapped, it
+    // is not easy to maintain the user's label text selection.
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .label.resting {
+    position: absolute;
+    top: var(--_top-space);
+  }
+
+  .label.floating {
+    font-size: var(--_label-text-populated-size);
+    line-height: var(--_label-text-populated-line-height);
+    transform-origin: top left;
+  }
+
+  .label.hidden {
+    opacity: 0;
+  }
+
+  .no-label .label {
+    display: none;
+  }
+
+  // Labels need start/end padding when there isn't start/end content so they
+  // don't sit on the edge of the field. We use a wrapper element around the
+  // labels so as not to affect the dimensions used in the label keyframes.
+  .label-wrapper {
+    inset: 0;
+    position: absolute;
+    // Don't let setting text-align on the field change the label's alignment.
+    // It should only impact content text.
+    text-align: initial;
+  }
+
+  :hover .label {
+    color: var(--_hover-label-text-color);
+  }
+
+  .focused .label {
+    color: var(--_focus-label-text-color);
+  }
+
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+  }
+
+  .disabled .label:not(.hidden) {
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  .error .label {
+    color: var(--_error-label-text-color);
+  }
+
+  .error:hover .label {
+    color: var(--_error-hover-label-text-color);
+  }
+
+  .error.focused .label {
+    color: var(--_error-focus-label-text-color);
+  }
+}

package/field/internal/_outlined-field.scss

@@ -0,0 +1,356 @@
+//
+// 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();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-field-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-outlined-field-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-outlined-field-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-outlined-field-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-outlined-field-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+
+  .outline {
+    border-color: var(--_outline-color);
+    border-radius: inherit;
+    color: var(--_outline-color); // Needed for Firefox HCM
+    display: flex;
+    // Allow events to target elements underneath the outline, such as icons.
+    pointer-events: none;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+  }
+
+  .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);
+  }
+
+  // TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
+  // remove :host and :host-context once Chrome supports :dir
+  :host-context([dir='rtl']),
+  :host([dir='rtl']) {
+    .resizable .container {
+      clip-path: inset(
+        var(--_focus-outline-width) var(--_focus-outline-width) 0 0
+      );
+    }
+  }
+
+  .resizable .container:dir(rtl) {
+    clip-path: inset(
+      var(--_focus-outline-width) var(--_focus-outline-width) 0 0
+    );
+  }
+}

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,50 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin 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);
+  }
+}

package/field/internal/field.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @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;
+    label: string;
+    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;
+}