@angular/material 20.0.0-next.5 → 20.0.0-next.6

package/form-field/_form-field-high-contrast.scss

@@ -1,39 +0,0 @@
-@use '@angular/cdk';
-
-@mixin private-form-field-high-contrast() {
-  $focus-indicator-width: 3px;
-  $focus-indicator-style: dashed;
-
-  .mat-form-field-appearance-fill {
-    // The outline of the `fill` appearance is achieved through a background color
-    // which won't be visible in high contrast mode. Add an outline to replace it.
-    .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast {
-        outline: solid 1px;
-      }
-    }
-
-    // Use GreyText for the disabled outline color which will account for the user's configuration.
-    &.mat-form-field-disabled .mat-mdc-text-field-wrapper {
-      @include cdk.high-contrast {
-        outline-color: GrayText;
-      }
-    }
-  }
-
-  // If a form field with fill appearance is focused, update the outline to be
-  // dashed and thicker to indicate focus.
-  .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
-    @include cdk.high-contrast {
-      outline: $focus-indicator-style $focus-indicator-width;
-    }
-  }
-
-  // For form fields with outline appearance, we show a dashed thick border on top
-  // of the solid notched-outline border to indicate focus.
-  .mat-mdc-form-field.mat-focused .mdc-notched-outline {
-    @include cdk.high-contrast {
-      border: $focus-indicator-style $focus-indicator-width;
-    }
-  }
-}

package/form-field/_form-field-native-select.scss

@@ -1,97 +0,0 @@
-@use 'sass:math';
-@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
-@use '../core/tokens/token-utils';
-
-// Width of the Material Design form-field select arrow.
-$mat-form-field-select-arrow-width: 10px;
-// Height of the Material Design form-field select arrow.
-$mat-form-field-select-arrow-height: 5px;
-// Horizontal padding that needs to be applied to the native select in a form-field so
-// that the absolute positioned arrow does not overlap the select content.
-$mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
-
-$_tokens: tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots();
-
-// Mixin that creates styles for native select controls in a form-field.
-@mixin private-form-field-native-select() {
-  // Remove the native select down arrow and ensure that the native appearance
-  // does not conflict with the form-field. e.g. Focus indication of the native
-  // select is undesired since we handle focus as part of the form-field.
-  select.mat-mdc-form-field-input-control {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    background-color: transparent;
-    display: inline-flex;
-    box-sizing: border-box;
-
-    // By default the cursor does not change when hovering over a select. We want to
-    // change this for non-disabled select elements so that it's more obvious that the
-    // control can be clicked.
-    &:not(:disabled) {
-      cursor: pointer;
-    }
-
-    &:not(.mat-mdc-native-select-inline) {
-      @include token-utils.use-tokens($_tokens...) {
-        option {
-          @include token-utils.create-token-slot(color, select-option-text-color);
-        }
-
-        option:disabled {
-          @include token-utils.create-token-slot(color, select-disabled-option-text-color);
-        }
-      }
-    }
-  }
-
-  // Native select elements with the `matInput` directive should have Material Design
-  // styling. This means that we add an arrow to the form-field that is based on the
-  // Material Design specification. We achieve this by adding a pseudo element to the
-  // form-field infix.
-  .mat-mdc-form-field-type-mat-native-select {
-    .mat-mdc-form-field-infix::after {
-      content: '';
-      width: 0;
-      height: 0;
-      border-left: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
-      border-right: math.div($mat-form-field-select-arrow-width, 2) solid transparent;
-      border-top: $mat-form-field-select-arrow-height solid;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      margin-top: -#{math.div($mat-form-field-select-arrow-height, 2)};
-
-      // Make the arrow non-clickable so the user can click on the form control under it.
-      pointer-events: none;
-
-      @include token-utils.use-tokens($_tokens...) {
-        @include token-utils.create-token-slot(color, enabled-select-arrow-color);
-      }
-
-      [dir='rtl'] & {
-        right: auto;
-        left: 0;
-      }
-    }
-
-    @include token-utils.use-tokens($_tokens...) {
-      &.mat-focused .mat-mdc-form-field-infix::after {
-        @include token-utils.create-token-slot(color, focus-select-arrow-color);
-      }
-
-      &.mat-form-field-disabled .mat-mdc-form-field-infix::after {
-        @include token-utils.create-token-slot(color, disabled-select-arrow-color);
-      }
-    }
-
-    // Add padding on the end of the native select so that the content does not
-    // overlap with the Material Design arrow.
-    .mat-mdc-form-field-input-control {
-      padding-right: $mat-form-field-select-horizontal-end-padding;
-      [dir='rtl'] & {
-        padding-right: 0;
-        padding-left: $mat-form-field-select-horizontal-end-padding;
-      }
-    }
-  }
-}

package/form-field/_form-field-subscript.scss

@@ -1,95 +0,0 @@
-@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
-@use '../core/style/vendor-prefixes';
-@use '../core/tokens/token-utils';
-
-@mixin private-form-field-subscript() {
-  @keyframes _mat-form-field-subscript-animation {
-    from {
-      opacity: 0;
-      transform: translateY(-5px);
-    }
-
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  // Wrapper for the hints and error messages.
-  .mat-mdc-form-field-subscript-wrapper {
-    box-sizing: border-box;
-    width: 100%;
-    position: relative;
-  }
-
-  .mat-mdc-form-field-hint-wrapper,
-  .mat-mdc-form-field-error-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 0 16px;
-    opacity: 1;
-    transform: translateY(0);
-
-    // Note: animation-duration gets set when animations are enabled.
-    // This allows us to skip the animation on init.
-    animation: _mat-form-field-subscript-animation 0ms cubic-bezier(0.55, 0, 0.55, 0.2);
-  }
-
-  .mat-mdc-form-field-subscript-dynamic-size {
-    .mat-mdc-form-field-hint-wrapper,
-    .mat-mdc-form-field-error-wrapper {
-      position: static;
-    }
-  }
-
-  .mat-mdc-form-field-bottom-align::before {
-    content: '';
-    display: inline-block;
-    height: 16px;
-  }
-
-  .mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
-    content: unset;
-  }
-
-  .mat-mdc-form-field-hint-end {
-    order: 1;
-  }
-
-  // Clears the floats on the hints. This is necessary for the hint animation to work.
-  .mat-mdc-form-field-hint-wrapper {
-    display: flex;
-  }
-
-  // Spacer used to make sure start and end hints have enough space between them.
-  .mat-mdc-form-field-hint-spacer {
-    flex: 1 0 1em;
-  }
-
-  // Single error message displayed beneath the form field underline.
-  .mat-mdc-form-field-error {
-    display: block;
-
-    @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
-      tokens-mat-form-field.get-token-slots()) {
-      @include token-utils.create-token-slot(color, error-text-color);
-    }
-  }
-
-  // The subscript wrapper has a minimum height to avoid that the form-field
-  // jumps when hints or errors are displayed.
-  .mat-mdc-form-field-subscript-wrapper,
-  .mat-mdc-form-field-bottom-align::before {
-    @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
-      tokens-mat-form-field.get-token-slots()) {
-      @include vendor-prefixes.smooth-font();
-      @include token-utils.create-token-slot(font-family, subscript-text-font);
-      @include token-utils.create-token-slot(line-height, subscript-text-line-height);
-      @include token-utils.create-token-slot(font-size, subscript-text-size);
-      @include token-utils.create-token-slot(letter-spacing, subscript-text-tracking);
-      @include token-utils.create-token-slot(font-weight, subscript-text-weight);
-    }
-  }
-}

package/form-field/_mdc-text-field-density-overrides.scss

@@ -1,60 +0,0 @@
-@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
-@use '../core/tokens/token-utils';
-
-// Mixin that includes the density styles for form fields. MDC provides their own density
-// styles for MDC text-field which we cannot use. MDC relies on input elements to stretch
-// vertically when the height is reduced as per density scale. This doesn't work for our
-// form field since we support custom form field controls without a fixed height. Instead, we
-// provide spacing that makes arbitrary controls align as specified in the Material Design
-// specification. In order to support density, we need to adjust the vertical spacing to be
-// based on the density scale.
-@mixin private-text-field-density-overrides() {
-  @include token-utils.use-tokens(
-    tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
-    $height: token-utils.get-token-variable(container-height);
-
-    .mat-mdc-form-field-infix {
-      // We add a minimum height to the infix container to ensure that custom controls have the
-      // same default vertical space as text-field inputs (with respect to the vertical padding).
-      min-height: #{$height};
-
-      @include token-utils.create-token-slot(padding-top,
-        filled-with-label-container-padding-top);
-      @include token-utils.create-token-slot(padding-bottom,
-        filled-with-label-container-padding-bottom);
-
-      .mdc-text-field--outlined &,
-      .mdc-text-field--no-label & {
-        @include token-utils.create-token-slot(padding-top, container-vertical-padding);
-        @include token-utils.create-token-slot(padding-bottom, container-vertical-padding);
-      }
-    }
-
-    // By default, MDC aligns the label using percentage. This will be overwritten based
-    // on whether a textarea is used. This is not possible in our implementation of the
-    // form-field because we do not know what type of form-field control is set up. Hence
-    // we always use a fixed position for the label. This does not have any implications.
-    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-      top: calc(#{$height} / 2);
-    }
-
-    // We need to conditionally hide the floating label based on the height of the form field.
-    .mdc-text-field--filled .mat-mdc-floating-label {
-      display: token-utils.get-token-variable(filled-label-display, $fallback: block);
-    }
-
-    // For the outline appearance, we re-create the active floating label transform. This is
-    // necessary because the transform for docked floating labels can be updated to account for
-    // the width of prefix container.
-    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded
-    .mdc-floating-label--float-above {
-      // Needs to be in a string form to work around an internal check that incorrectly flags this
-      // interpolation in `calc` as unnecessary. If we don't have it, Sass won't evaluate it.
-      $offset: 'calc(6.75px + #{$height} / 2)';
-      $translate: 'calc(#{$offset} * -1)';
-      --mat-mdc-form-field-label-transform: translateY(#{$translate})
-        scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
-      transform: var(--mat-mdc-form-field-label-transform);
-    }
-  }
-}

package/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,186 +0,0 @@
-@use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
-@use '../core/tokens/token-utils';
-@use '../core/style/vendor-prefixes';
-
-// TODO(b/263527625): should be removed when this is addressed on the MDC side.
-// MDC sets a will-change on this element, because of the animation. This can cause
-// scrolling performance degradation on pages with a lot of form fields so we reset it.
-// The animation is on a `transform` which is hardware-accelerated already.
-// This flag is used to re-add the `will-change` internally since removing it causes a
-// lot of screenshot diffs.
-$_enable-form-field-will-change-reset: true;
-
-// Mixin that can be included to override the default MDC text-field
-// styles to fit our needs. See individual comments for context on why
-// certain MDC styles need to be modified.
-@mixin private-text-field-structure-overrides() {
-  // Unset the border set by MDC. We move the border (which serves as the Material Design
-  // text-field bottom line) into its own element. This is necessary because we want the
-  // bottom-line to span across the whole form-field (including prefixes and suffixes). Also
-  // we ensure that font styles are inherited for input elements. We do this because inputs by
-  // default have explicit font styles from the user agent, and we set the desired font styles
-  // in the parent `mat-form-field` element (for better custom form-field control support).
-  // Note: We increase specificity here because the MDC textfield seems to override this,
-  // depending on the CSS order, with an affix selector joint with the input.
-  .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
-    @include vendor-prefixes.smooth-font();
-    font: inherit;
-    letter-spacing: inherit;
-    text-decoration: inherit;
-    text-transform: inherit;
-    border: none;
-  }
-
-  .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
-    @include vendor-prefixes.smooth-font();
-
-    // In order to ensure proper alignment of the floating label, we reset its line-height.
-    // The line-height is not important as the element is absolutely positioned and only has one
-    // line of text.
-    line-height: normal;
-    // This allows users to focus the input by clicking the part of the label above the outline box,
-    // and makes migration from the legacy form-field easier for tests that were depending on
-    // clicking the label to focus the input.
-    pointer-events: all;
-
-    @if ($_enable-form-field-will-change-reset) {
-      will-change: auto;
-    }
-  }
-
-  .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
-    // Style the cursor the same way as the rest of the input
-    cursor: inherit;
-  }
-
-  // Reset the height that MDC sets on native input elements. We cannot rely on their
-  // fixed height as we handle vertical spacing differently. MDC sets a fixed height for
-  // inputs and modifies the baseline so that the textfield matches the spec. This does
-  // not work for us since we support arbitrary form field controls which don't necessarily
-  // use an `input` element. We organize the vertical spacing on the infix container.
-  .mdc-text-field--no-label:not(.mdc-text-field--textarea)
-    .mat-mdc-form-field-input-control.mdc-text-field__input,
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
-    height: auto;
-  }
-
-  // Color inputs are a special case, because setting their height to
-  // `auto` will collapse them. The height value is an arbitrary number
-  // which was extracted from the user agent styles of Chrome and Firefox.
-  .mat-mdc-text-field-wrapper
-    .mat-mdc-form-field-input-control.mdc-text-field__input[type='color'] {
-    height: 23px;
-  }
-
-  // Root element of the mdc-text-field. As explained in the height overwrites above, MDC
-  // sets a default height on the text-field root element. This is not desired since we
-  // want the element to be able to expand as needed.
-  .mat-mdc-text-field-wrapper {
-    height: auto;
-    flex: auto;
-
-    @if ($_enable-form-field-will-change-reset) {
-      will-change: auto;
-    }
-  }
-
-  // The icon prefix/suffix is closer to the edge of the form-field than the infix is in a
-  // form-field with no prefix/suffix. Therefore the standard padding has to be removed when showing
-  // an icon prefix or suffix. We can't rely on MDC's styles for this because we use a different
-  // structure for our form-field in order to support arbitrary height input elements.
-  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-    padding-left: 0;
-    // Signal to the TypeScript label calculation code that the label should be offset 16px less
-    // due to resetting the padding above.
-    --mat-mdc-form-field-label-offset-x: -16px;
-  }
-  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-    padding-right: 0;
-  }
-  [dir='rtl'] {
-    // Undo the above padding removals which only apply in LTR languages.
-    .mat-mdc-text-field-wrapper {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-    // ...and apply the correct padding resets for RTL languages.
-    .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-      padding-left: 0;
-    }
-    .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-      padding-right: 0;
-    }
-  }
-
-  // Before the switch to the tokens MDC was setting a specific placeholder color when the input
-  // is disabled, but now there's no token for it so we need to implement it ourselves.
-  .mat-form-field-disabled .mdc-text-field__input {
-    @include vendor-prefixes.input-placeholder {
-      @include token-utils.use-tokens(
-        tokens-mat-form-field.$prefix, tokens-mat-form-field.get-token-slots()) {
-        @include token-utils.create-token-slot(color, disabled-input-text-placeholder-color);
-      }
-    }
-  }
-
-  // The default MDC text-field implementation does not support labels which always float.
-  // MDC only renders the placeholder if the input is focused. We extend this to show the
-  // placeholder if the form-field label is set to always float.
-  // TODO(devversion): consider getting a mixin or variables for this (currently not available).
-  // Stylelint no-prefixes rule disabled because MDC text-field only uses "::placeholder" too.
-  // stylelint-disable-next-line material/no-prefixes
-  .mat-mdc-form-field-label-always-float .mdc-text-field__input::placeholder {
-    transition-delay: 40ms;
-    transition-duration: 110ms;
-    opacity: 1;
-  }
-
-  // Since we moved the horizontal spacing from the input to the form-field flex container
-  // and the MDC floating label tries to account for the horizontal spacing, we need to reset
-  // the shifting since there is no padding the label needs to account for. Note that we do not
-  // want do this for labels in the notched-outline since MDC keeps those labels relative to
-  // the notched outline container, and already applies a specific horizontal spacing which
-  // we do not want to overwrite. *Note*: We need to have increased specificity for this
-  // override because the `right` property will be set with higher specificity in RTL mode.
-  .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
-    left: auto;
-    right: auto;
-  }
-
-  // MDC sets the input elements in outline appearance to "display: flex". There seems to
-  // be no particular reason why this is needed. We set it to "inline-block", as it otherwise
-  // could shift the baseline.
-  .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input {
-    display: inline-block;
-  }
-
-  // As mentioned in the override before, MDC aligns the label using percentage. This means that
-  // MDC tries to offset the label when the parent element changes in the notched-outline. For
-  // example, the outline stroke width changes on focus. Since we updated the label to use a fixed
-  // position, we don't need the vertical offsetting (that will shift the label incorrectly now).
-  // Note: Increased specificity needed here since MDC overwrites the padding on `:focus`.
-  .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch {
-    padding-top: 0;
-  }
-
-  // This fixes an issue where the notch appears to be thicker than the rest of the outline when
-  // zoomed in on Chrome. The border inconsistency seems to be some kind of rendering artifact
-  // that arises from a combination of the fact that the notch contains text, while the leading
-  // and trailing outline do not, combined with the fact that the border is semi-transparent.
-  // Experimentally, I discovered that adding a transparent left border fixes the inconsistency.
-  // Note: class name is repeated to achieve sufficient specificity over the various MDC states.
-  // (hover, focus, etc.)
-  // TODO(mmalerba): port this fix into MDC
-  .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-    &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
-      border-left: 1px solid transparent;
-    }
-  }
-
-  [dir='rtl'] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field {
-    &.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
-      border-left: none;
-      border-right: 1px solid transparent;
-    }
-  }
-}