material-web-evo 10002.10001.10000

package/button/filled-tonal-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { FilledTonalButton } from './internal/filled-tonal-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-tonal-button': MdFilledTonalButton;
+    }
+}
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledTonalButton extends FilledTonalButton {
+    static styles: CSSResultOrNative[];
+}

package/button/filled-tonal-button.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { FilledTonalButton } from './internal/filled-tonal-button.js';
+import { styles as tonalStyles } from './internal/filled-tonal-styles.js';
+import { styles as sharedElevationStyles } from './internal/shared-elevation-styles.js';
+import { styles as sharedStyles } from './internal/shared-styles.js';
+/**
+ * @summary Buttons help people take action, such as sending an email, sharing a
+ * document, or liking a comment.
+ *
+ * @description
+ * __Emphasis:__ Medium emphasis – For important actions that don’t distract
+ * from other onscreen elements.
+ *
+ * __Rationale:__ Filled tonal buttons have a lighter background color and
+ * darker label color, making them less visually prominent than a regular,
+ * filled button. They’re still used for final or unblocking actions in a flow,
+ * but do so with less emphasis.
+ *
+ * __Example usages:__
+ * - Save
+ * - Confirm
+ * - Done
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdFilledTonalButton = class MdFilledTonalButton extends FilledTonalButton {
+};
+MdFilledTonalButton.styles = [
+    sharedStyles,
+    sharedElevationStyles,
+    tonalStyles,
+];
+MdFilledTonalButton = __decorate([
+    customElement('md-filled-tonal-button')
+], MdFilledTonalButton);
+//# sourceMappingURL=filled-tonal-button.js.map

package/button/filled-tonal-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-tonal-button.js","sourceRoot":"","sources":["filled-tonal-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,iBAAiB,EAAC,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAC,MAAM,IAAI,WAAW,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAC,MAAM,IAAI,qBAAqB,EAAC,MAAM,uCAAuC,CAAC;AACtF,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAQnE;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,WAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,iBAAiB;;AACxC,0BAAM,GAAwB;IAC5C,YAAY;IACZ,qBAAqB;IACrB,WAAW;CACZ,AAJqB,CAIpB;AALS,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAM/B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledTonalButton} from './internal/filled-tonal-button.js';\nimport {styles as tonalStyles} from './internal/filled-tonal-styles.js';\nimport {styles as sharedElevationStyles} from './internal/shared-elevation-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-tonal-button': MdFilledTonalButton;\n  }\n}\n\n/**\n * @summary Buttons help people take action, such as sending an email, sharing a\n * document, or liking a comment.\n *\n * @description\n * __Emphasis:__ Medium emphasis – For important actions that don’t distract\n * from other onscreen elements.\n *\n * __Rationale:__ Filled tonal buttons have a lighter background color and\n * darker label color, making them less visually prominent than a regular,\n * filled button. They’re still used for final or unblocking actions in a flow,\n * but do so with less emphasis.\n *\n * __Example usages:__\n * - Save\n * - Confirm\n * - Done\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-tonal-button')\nexport class MdFilledTonalButton extends FilledTonalButton {\n  static override styles: CSSResultOrNative[] = [\n    sharedStyles,\n    sharedElevationStyles,\n    tonalStyles,\n  ];\n}\n"]}

package/button/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { Button } from './internal/button.js';
+/**
+ * Test harness for buttons.
+ */
+export declare class ButtonHarness extends Harness<Button> {
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/button/harness.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for buttons.
+ */
+export class ButtonHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        return this.element.renderRoot.querySelector('.button');
+    }
+}
+//# sourceMappingURL=harness.js.map

package/button/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IAC7B,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAgB,CAAC;IACzE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Button} from './internal/button.js';\n\n/**\n * Test harness for buttons.\n */\nexport class ButtonHarness extends Harness<Button> {\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.button') as HTMLElement;\n  }\n}\n"]}

package/button/internal/_elevated-button.scss

@@ -0,0 +1,37 @@
+//
+// 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
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevated-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/button/internal/_elevation.scss

@@ -0,0 +1,69 @@
+//
+// 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 '../../elevation/elevation';
+@use '../../tokens';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin styles() {
+  md-elevation {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
+  }
+
+  :host(:is([disabled], [soft-disabled])) md-elevation {
+    transition: none;
+  }
+
+  md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+  }
+
+  // apply elevation in order of focused, hovered, pressed, disabled
+  // this ensures a button will have hover elevation after being focused
+  :host(:focus-within) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_focus-container-elevation),
+      )
+    );
+  }
+
+  :host(:hover) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_hover-container-elevation),
+      )
+    );
+  }
+
+  :host(:active) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_pressed-container-elevation),
+      )
+    );
+  }
+
+  :host(:is([disabled], [soft-disabled])) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_disabled-container-elevation),
+      )
+    );
+  }
+}

package/button/internal/_filled-button.scss

@@ -0,0 +1,37 @@
+//
+// 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
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/button/internal/_filled-tonal-button.scss

@@ -0,0 +1,37 @@
+//
+// 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
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-tonal-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-tonal-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-tonal-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

package/button/internal/_icon.scss

@@ -0,0 +1,38 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  // The icon CSS class overrides styles defined in the .material-icons CSS
+  // class, which is loaded separately so the order of CSS definitions is not
+  // guaranteed. Therefore, increase specifity to ensure overrides apply.
+  ::slotted([slot='icon']) {
+    display: inline-flex;
+    position: relative;
+    writing-mode: horizontal-tb;
+    fill: currentColor;
+    flex-shrink: 0;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+    block-size: var(--_icon-size);
+  }
+
+  :host(:hover) ::slotted([slot='icon']) {
+    color: var(--_hover-icon-color);
+  }
+
+  :host(:focus-within) ::slotted([slot='icon']) {
+    color: var(--_focus-icon-color);
+  }
+
+  :host(:active) ::slotted([slot='icon']) {
+    color: var(--_pressed-icon-color);
+  }
+
+  :host(:is([disabled], [soft-disabled])) ::slotted([slot='icon']) {
+    color: var(--_disabled-icon-color);
+    opacity: var(--_disabled-icon-opacity);
+  }
+}

package/button/internal/_outlined-button.scss

@@ -0,0 +1,87 @@
+//
+// 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
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    --_container-color: none;
+    --_disabled-container-color: none;
+    --_disabled-container-opacity: 0;
+  }
+
+  .outline {
+    inset: 0;
+    border-style: solid;
+    position: absolute;
+    box-sizing: border-box;
+    border-color: var(--_outline-color);
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  :host(:active) .outline {
+    border-color: var(--_pressed-outline-color);
+  }
+
+  :host(:is([disabled], [soft-disabled])) .outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
+  }
+
+  @media (forced-colors: active) {
+    :host(:is([disabled], [soft-disabled])) .background {
+      // Only outlined buttons change their border when disabled to distinguish
+      // them from other buttons that add a border for increased visibility in
+      // HCM.
+      border-color: GrayText;
+    }
+
+    :host(:is([disabled], [soft-disabled])) .outline {
+      opacity: 1;
+    }
+  }
+
+  .outline,
+  md-ripple {
+    border-width: var(--_outline-width);
+  }
+
+  md-ripple {
+    inline-size: calc(100% - 2 * var(--_outline-width));
+    block-size: calc(100% - 2 * var(--_outline-width));
+    border-style: solid;
+    border-color: transparent;
+  }
+}

package/button/internal/_shared.scss

@@ -0,0 +1,178 @@
+//
+// 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 '../../focus/focus-ring';
+@use '../../ripple/ripple';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    gap: 8px;
+    // min-height instead of height so that label can wrap and expand height
+    min-height: var(--_container-height);
+    outline: none;
+    // Add extra space between label and the edge for if the label text wraps.
+    // The padding added should be relative to the height of the container and
+    // the height of its content on a single line (label or icon, whichever is
+    // bigger).
+    $single-line-height: max(var(--_label-text-line-height), var(--_icon-size));
+    padding-block: calc((var(--_container-height) - $single-line-height) / 2);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+    place-content: center;
+    place-items: center;
+    position: relative;
+    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);
+    // Long labels are cut off with ellipsis by default. `text-overflow` and
+    // `text-wrap` can customize this.
+    text-overflow: ellipsis;
+    text-wrap: nowrap;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    // Override vertical-align with shortest value "top". Vertical-align's
+    // default "baseline" value causes buttons to be misaligned next to each
+    // other if one button has an icon and the other does not.
+    vertical-align: top;
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_hover-state-layer-color),
+        pressed-color: var(--_pressed-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
+      )
+    );
+  }
+
+  :host(:is([disabled], [soft-disabled])) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .button {
+    border-radius: inherit;
+    cursor: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    outline: none;
+    -webkit-appearance: none;
+    vertical-align: middle;
+    background: transparent;
+    text-decoration: none;
+    // Buttons have a default min-width of 64px. This can be overridden by
+    // setting a smaller min-width on the host. The 64px button will be centered
+    // within the bounds of the smaller host element.
+    min-width: calc(64px - var(--_leading-space) - var(--_trailing-space));
+    width: 100%;
+    z-index: 0; // Place content on top of elevation and ripple
+    height: 100%;
+    font: inherit;
+    color: var(--_label-text-color);
+    padding: 0;
+    gap: inherit;
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  :host(:hover) .button {
+    color: var(--_hover-label-text-color);
+  }
+
+  :host(:focus-within) .button {
+    color: var(--_focus-label-text-color);
+  }
+
+  :host(:active) .button {
+    color: var(--_pressed-label-text-color);
+  }
+
+  .background {
+    // Background color. Separate node for disabled opacity styles.
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+  }
+
+  .label {
+    overflow: hidden;
+  }
+
+  // Inherit text-overflow down through label and slotted content so that it
+  // can be customized on the host.
+  :is(.button, .label, .label slot),
+  .label ::slotted(*) {
+    text-overflow: inherit;
+  }
+
+  :host(:is([disabled], [soft-disabled])) .label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  :host(:is([disabled], [soft-disabled])) .background {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .background {
+      // Use CanvasText to increase visibility of buttons when the background
+      // is not rendered. Buttons that use outlines by default should change The
+      // outline color to GrayText when disabled.
+      border: 1px solid CanvasText;
+    }
+
+    :host(:is([disabled], [soft-disabled])) {
+      --_disabled-icon-color: GrayText;
+      --_disabled-icon-opacity: 1;
+      --_disabled-container-opacity: 1;
+      --_disabled-label-text-color: GrayText;
+      --_disabled-label-text-opacity: 1;
+    }
+  }
+
+  :host([has-icon]:not([trailing-icon])) {
+    padding-inline-start: var(--_with-leading-icon-leading-space);
+    padding-inline-end: var(--_with-leading-icon-trailing-space);
+  }
+
+  :host([has-icon][trailing-icon]) {
+    padding-inline-start: var(--_with-trailing-icon-leading-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
+  }
+}

package/button/internal/_text-button.scss

@@ -0,0 +1,41 @@
+//
+// 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
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-text-button-supported-tokens;
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-text-button-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-text-button-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    --_container-color: none;
+    --_disabled-container-color: none;
+    --_disabled-container-opacity: 0;
+  }
+}

package/button/internal/_touch-target.scss

@@ -0,0 +1,23 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .touch {
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+  }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
+}