@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/field/lib/_outlined-field.scss

@@ -1,313 +0,0 @@
-//
-// 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% - 2 * var(--_container-padding-horizontal));
-    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)
-  );
-
-  .outline-start,
-  .field:not(.with-start) .start {
-    padding-inline-start: max(
-      var(--_container-padding-horizontal),
-      $shape-start + var(--_outline-label-padding)
-    );
-  }
-
-  .field:not(.with-end) .end {
-    padding-inline-end: max(var(--_container-padding-horizontal), $shape-end);
-  }
-
-  .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);
-  }
-}

package/field/lib/_shared.scss

@@ -1,65 +0,0 @@
-//
-// 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;
-  }
-
-  .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 for resizability.
-  .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;
-    position: relative;
-  }
-
-  .container {
-    align-items: center;
-    border-radius: inherit;
-    display: flex;
-    flex: 1;
-    min-width: min-content;
-    overflow: hidden;
-    padding-top: var(--_container-padding-vertical);
-    padding-bottom: var(--_container-padding-vertical);
-    position: relative;
-  }
-
-  .resizable .container {
-    resize: both;
-  }
-
-  .disabled {
-    pointer-events: none;
-  }
-
-  @include content.styles;
-  @include label.styles;
-  @include supporting-text.styles;
-}

package/field/lib/_supporting-text.scss

@@ -1,46 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-@mixin styles() {
-  .supporting-text {
-    color: var(--_supporting-text-color);
-    display: flex;
-    gap: var(--_supporting-text-padding);
-    justify-content: space-between;
-    padding: var(--_supporting-text-padding-top) var(--_supporting-text-padding)
-      0;
-    font: var(--_supporting-text-type);
-  }
-
-  // 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/lib/field.d.ts

@@ -1,65 +0,0 @@
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement, PropertyValues, TemplateResult } from 'lit';
-import { SurfacePositionTarget } from '../../menu/lib/surfacePositionController.js';
-/**
- * A field component.
- */
-export declare class Field extends LitElement implements SurfacePositionTarget {
-    disabled: boolean;
-    error: boolean;
-    focused: boolean;
-    label: string;
-    populated: boolean;
-    resizable: boolean;
-    required: 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 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;
-}