material-web-evo 10002.10001.10000

package/chips/internal/_filter-chip.scss

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 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-filter-chip-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-filter-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filter-chip-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .selected.elevated::before {
+    background: var(--_elevated-selected-container-color);
+  }
+
+  .checkmark {
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  .disabled .checkmark {
+    opacity: var(--_disabled-leading-icon-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .disabled .checkmark {
+      opacity: 1;
+    }
+  }
+}

package/chips/internal/_input-chip.scss

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 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-input-chip-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-input-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-input-chip-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  :host([avatar]) {
+    // Use a rounded border by default for avatar chips. Recreating the
+    // fallbacks allows `--md-input-chip-container-shape` to cascade and
+    // override this without needing to add more specificity for avatar chips.
+    --_container-shape-start-start: var(
+      --md-input-chip-container-shape-start-start,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-start-end: var(
+      --md-input-chip-container-shape-start-end,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-end-end: var(
+      --md-input-chip-container-shape-end-end,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+    --_container-shape-end-start: var(
+      --md-input-chip-container-shape-end-start,
+      var(--md-input-chip-container-shape, calc(var(--_container-height) / 2))
+    );
+  }
+
+  .avatar .primary.action {
+    padding-inline-start: 4px;
+  }
+
+  .avatar .leading.icon ::slotted(:first-child) {
+    border-radius: var(--_avatar-shape);
+    height: var(--_avatar-size);
+    width: var(--_avatar-size);
+  }
+
+  .disabled.avatar .leading.icon {
+    opacity: var(--_disabled-avatar-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .link .outline {
+      border-color: ActiveText;
+    }
+
+    .disabled.avatar .leading.icon {
+      opacity: 1;
+    }
+  }
+}

package/chips/internal/_selectable.scss

@@ -0,0 +1,78 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../ripple/ripple';
+// go/keep-sorted end
+
+@mixin styles() {
+  .selected {
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_selected-hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_selected-pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  :where(.selected)::before {
+    background: var(--_selected-container-color);
+  }
+
+  :where(.selected) .outline {
+    border-width: var(--_selected-outline-width);
+  }
+
+  :where(.selected.disabled)::before {
+    background: var(--_disabled-selected-container-color);
+    opacity: var(--_disabled-selected-container-opacity);
+  }
+
+  :where(.selected) .label {
+    color: var(--_selected-label-text-color);
+  }
+
+  :where(.selected:hover) .label {
+    color: var(--_selected-hover-label-text-color);
+  }
+
+  :where(.selected:focus) .label {
+    color: var(--_selected-focus-label-text-color);
+  }
+
+  :where(.selected:active) .label {
+    color: var(--_selected-pressed-label-text-color);
+  }
+
+  :where(.selected) .leading.icon {
+    color: var(--_selected-leading-icon-color);
+  }
+
+  :where(.selected:hover) .leading.icon {
+    color: var(--_selected-hover-leading-icon-color);
+  }
+
+  :where(.selected:focus) .leading.icon {
+    color: var(--_selected-focus-leading-icon-color);
+  }
+
+  :where(.selected:active) .leading.icon {
+    color: var(--_selected-pressed-leading-icon-color);
+  }
+
+  @media (forced-colors: active) {
+    :where(.selected:not(.elevated))::before {
+      // for forced-colors. Don't add it to elevated containers since elevation
+      // already have a border added.
+      border: 1px solid CanvasText;
+    }
+
+    :where(.selected) .outline {
+      border-width: 1px;
+    }
+  }
+}

package/chips/internal/_shared.scss

@@ -0,0 +1,248 @@
+//
+// Copyright 2023 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 '../../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);
+    display: inline-flex;
+    height: var(--_container-height);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    @include ripple.theme(
+      (
+        'hover-color': var(--_hover-state-layer-color),
+        'hover-opacity': var(--_hover-state-layer-opacity),
+        'pressed-color': var(--_pressed-state-layer-color),
+        'pressed-opacity': var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  :host(:is([disabled], [soft-disabled])) {
+    pointer-events: none;
+  }
+
+  :host([touch-target='wrapper']) {
+    margin: max(0px, (48px - var(--_container-height)) / 2) 0;
+  }
+
+  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),
+      )
+    );
+  }
+
+  .container {
+    border-radius: inherit;
+    box-sizing: border-box;
+    display: flex;
+    height: 100%;
+    position: relative;
+    width: 100%;
+
+    // Container color, separate node for disabled opacity changes
+    &::before {
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+
+  .container:not(.disabled) {
+    cursor: pointer;
+  }
+
+  .container.disabled {
+    pointer-events: none;
+  }
+
+  .cell {
+    display: flex;
+  }
+
+  .action {
+    align-items: baseline;
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: inherit;
+    display: flex;
+    outline: none;
+    padding: 0;
+    position: relative;
+    text-decoration: none;
+  }
+
+  .primary.action {
+    // Set a min-width on the primary action so that trailing actions remain
+    // inside the chip as the chip is resized.
+    min-width: 0;
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+  }
+
+  .has-icon .primary.action {
+    padding-inline-start: var(--_with-leading-icon-leading-space);
+  }
+
+  .touch {
+    height: 48px;
+    inset: 50% 0 0;
+    position: absolute;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+
+  :host([touch-target='none']) .touch {
+    display: none;
+  }
+
+  // Outline, separate node for disabled opacity changes
+  .outline {
+    border: var(--_outline-width) solid var(--_outline-color);
+    border-radius: inherit;
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :where(:focus) .outline {
+    border-color: var(--_focus-outline-color);
+  }
+
+  :where(.disabled) .outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
+  }
+
+  md-ripple {
+    border-radius: inherit;
+  }
+
+  .label,
+  .icon,
+  .touch {
+    // Place content above background elements
+    z-index: 1;
+  }
+
+  .label {
+    align-items: center;
+    color: var(--_label-text-color);
+    display: flex;
+    font-family: var(--_label-text-font);
+    font-size: var(--_label-text-size);
+    font-weight: var(--_label-text-weight);
+    height: 100%;
+    line-height: var(--_label-text-line-height);
+    overflow: hidden;
+    user-select: none;
+  }
+
+  // An inner span is needed to truncate the label, since elements with a flex
+  // display do not support the text-overflow property. The outer wrapper .label
+  // needs to be a flex display to correctly set the element's baseline,
+  // supporting external elements aligning to the baseline of the chip's text
+  // instead of its edges or icons.
+  .label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(:hover) .label {
+    color: var(--_hover-label-text-color);
+  }
+
+  :where(:focus) .label {
+    color: var(--_focus-label-text-color);
+  }
+
+  :where(:active) .label {
+    color: var(--_pressed-label-text-color);
+  }
+
+  :where(.disabled) .label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  .icon {
+    align-self: center;
+    display: flex;
+    fill: currentColor;
+    position: relative;
+  }
+
+  .icon ::slotted(:first-child) {
+    font-size: var(--_icon-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  .leading.icon {
+    color: var(--_leading-icon-color);
+  }
+
+  .leading.icon ::slotted(*),
+  .leading.icon svg {
+    margin-inline-end: var(--_icon-label-space);
+  }
+
+  :where(:hover) .leading.icon {
+    color: var(--_hover-leading-icon-color);
+  }
+
+  :where(:focus) .leading.icon {
+    color: var(--_focus-leading-icon-color);
+  }
+
+  :where(:active) .leading.icon {
+    color: var(--_pressed-leading-icon-color);
+  }
+
+  :where(.disabled) .leading.icon {
+    color: var(--_disabled-leading-icon-color);
+    opacity: var(--_disabled-leading-icon-opacity);
+  }
+
+  @media (forced-colors: active) {
+    :where(.disabled) :is(.label, .outline, .leading.icon) {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+
+  a,
+  button {
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
+  }
+
+  a,
+  button:not(:disabled, [aria-disabled='true']) {
+    cursor: inherit;
+  }
+}

package/chips/internal/_suggestion-chip.scss

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 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-suggestion-chip-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-suggestion-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-suggestion-chip-values();
+
+  :host {
+    // Only use the logical properties.
+    $tokens: map.remove($tokens, 'container-shape');
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  @media (forced-colors: active) {
+    .link .outline {
+      border-color: ActiveText;
+    }
+  }
+}

package/chips/internal/_trailing-icon.scss

@@ -0,0 +1,81 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+// go/keep-sorted end
+
+@mixin styles() {
+  .trailing.action {
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: var(--_icon-label-space);
+    padding-inline-end: var(--_with-trailing-icon-trailing-space);
+  }
+
+  .trailing.action :is(md-ripple, md-focus-ring) {
+    border-radius: 50%;
+    height: calc(4 / 3 * var(--_icon-size)); // 24px default
+    width: calc(4 / 3 * var(--_icon-size)); // 24px default
+  }
+
+  .trailing.action md-focus-ring {
+    inset: unset;
+  }
+
+  .has-trailing .primary.action {
+    padding-inline-end: 0;
+  }
+
+  .trailing.icon {
+    color: var(--_trailing-icon-color);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
+  }
+
+  :where(:hover) .trailing.icon {
+    color: var(--_hover-trailing-icon-color);
+  }
+
+  :where(:focus) .trailing.icon {
+    color: var(--_focus-trailing-icon-color);
+  }
+
+  :where(:active) .trailing.icon {
+    color: var(--_pressed-trailing-icon-color);
+  }
+
+  :where(.disabled) .trailing.icon {
+    color: var(--_disabled-trailing-icon-color);
+    opacity: var(--_disabled-trailing-icon-opacity);
+  }
+
+  :where(.selected) .trailing.icon {
+    color: var(--_selected-trailing-icon-color);
+  }
+
+  :where(.selected:hover) .trailing.icon {
+    color: var(--_selected-hover-trailing-icon-color);
+  }
+
+  :where(.selected:focus) .trailing.icon {
+    color: var(--_selected-focus-trailing-icon-color);
+  }
+
+  :where(.selected:active) .trailing.icon {
+    color: var(--_selected-pressed-trailing-icon-color);
+  }
+
+  @media (forced-colors: active) {
+    .trailing.icon {
+      color: ButtonText;
+    }
+
+    :where(.disabled) .trailing.icon {
+      color: GrayText;
+      opacity: 1;
+    }
+  }
+}

package/chips/internal/assist-chip.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import { Chip } from './chip.js';
+/**
+ * An assist chip component.
+ */
+export declare class AssistChip extends Chip {
+    elevated: boolean;
+    href: string;
+    target: '_blank' | '_parent' | '_self' | '_top' | '';
+    protected get primaryId(): "link" | "button";
+    protected get rippleDisabled(): boolean;
+    protected getContainerClasses(): {
+        disabled: boolean;
+        elevated: boolean;
+        link: boolean;
+    };
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1>;
+    protected renderOutline(): import("lit-html").TemplateResult<1>;
+}

package/chips/internal/assist-chip.js

@@ -0,0 +1,79 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Chip } from './chip.js';
+/**
+ * An assist chip component.
+ */
+export class AssistChip extends Chip {
+    constructor() {
+        super(...arguments);
+        this.elevated = false;
+        this.href = '';
+        this.target = '';
+    }
+    get primaryId() {
+        return this.href ? 'link' : 'button';
+    }
+    get rippleDisabled() {
+        // Link chips cannot be disabled
+        return !this.href && (this.disabled || this.softDisabled);
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            // Link chips cannot be disabled
+            disabled: !this.href && (this.disabled || this.softDisabled),
+            elevated: this.elevated,
+            link: !!this.href,
+        };
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        if (this.href) {
+            return html `
+        <a
+          class="primary action"
+          id="link"
+          aria-label=${ariaLabel || nothing}
+          href=${this.href}
+          target=${this.target || nothing}
+          >${content}</a
+        >
+      `;
+        }
+        return html `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        aria-disabled=${this.softDisabled || nothing}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        type="button"
+        >${content}</button
+      >
+    `;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return html `<md-elevation part="elevation"></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], AssistChip.prototype, "elevated", void 0);
+__decorate([
+    property()
+], AssistChip.prototype, "href", void 0);
+__decorate([
+    property()
+], AssistChip.prototype, "target", void 0);
+//# sourceMappingURL=assist-chip.js.map

package/chips/internal/assist-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assist-chip.js","sourceRoot":"","sources":["assist-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,8BAA8B,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAClC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAI3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAApC;;QAC6B,aAAQ,GAAG,KAAK,CAAC;QAChC,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAiD,EAAE,CAAC;IAwDxE,CAAC;IAtDC,IAAc,SAAS;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACvC,CAAC;IAED,IAAuB,cAAc;QACnC,gCAAgC;QAChC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,CAAC;IAEkB,mBAAmB;QACpC,OAAO;YACL,GAAG,KAAK,CAAC,mBAAmB,EAAE;YAC9B,gCAAgC;YAChC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC;YAC5D,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;SAClB,CAAC;IACJ,CAAC;IAEkB,mBAAmB,CAAC,OAAgB;QACrD,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,IAAI,CAAA;;;;uBAIM,SAAS,IAAI,OAAO;iBAC1B,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,MAAM,IAAI,OAAO;aAC5B,OAAO;;OAEb,CAAC;SACH;QAED,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,IAAI,OAAO;wBACjB,IAAI,CAAC,YAAY,IAAI,OAAO;oBAChC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,eAAe;;WAE/C,OAAO;;KAEb,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,gDAAgD,CAAC;SAC7D;QAED,OAAO,KAAK,CAAC,aAAa,EAAE,CAAC;IAC/B,CAAC;CACF;AA1D4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB;AAChC;IAAX,QAAQ,EAAE;wCAAW;AACV;IAAX,QAAQ,EAAE;0CAA2D","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\n\nimport {html, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * An assist chip component.\n */\nexport class AssistChip extends Chip {\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  protected get primaryId() {\n    return this.href ? 'link' : 'button';\n  }\n\n  protected override get rippleDisabled() {\n    // Link chips cannot be disabled\n    return !this.href && (this.disabled || this.softDisabled);\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      // Link chips cannot be disabled\n      disabled: !this.href && (this.disabled || this.softDisabled),\n      elevated: this.elevated,\n      link: !!this.href,\n    };\n  }\n\n  protected override renderPrimaryAction(content: unknown) {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    if (this.href) {\n      return html`\n        <a\n          class=\"primary action\"\n          id=\"link\"\n          aria-label=${ariaLabel || nothing}\n          href=${this.href}\n          target=${this.target || nothing}\n          >${content}</a\n        >\n      `;\n    }\n\n    return html`\n      <button\n        class=\"primary action\"\n        id=\"button\"\n        aria-label=${ariaLabel || nothing}\n        aria-disabled=${this.softDisabled || nothing}\n        ?disabled=${this.disabled && !this.alwaysFocusable}\n        type=\"button\"\n        >${content}</button\n      >\n    `;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation part=\"elevation\"></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n}\n"]}