@material/web 1.0.0-pre.8 → 1.0.0

package/chips/harness.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { Chip } from './internal/chip.js';
+/**
+ * Test harness for chips.
+ */
+export declare class ChipHarness extends Harness<Chip> {
+    action: 'primary' | 'trailing';
+    protected getInteractiveElement(): Promise<HTMLElement>;
+}

package/chips/harness.js

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for chips.
+ */
+export class ChipHarness extends Harness {
+    constructor() {
+        super(...arguments);
+        this.action = 'primary';
+    }
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        const { primaryId } = this.element;
+        const primaryAction = primaryId &&
+            this.element.renderRoot.querySelector(`#${primaryId}`);
+        // Retrieve MultiActionChip's trailingAction
+        const { trailingAction } = this.element;
+        // Default to trailing action if there isn't a primary action and the user
+        // didn't explicitly set `harness.action = 'trailing'` (remove-only input
+        // chips).
+        if (this.action === 'trailing' || !primaryAction) {
+            if (!trailingAction) {
+                throw new Error('`ChipHarness.action` is "trailing", but the chip does not have a trailing action.');
+            }
+            return trailingAction;
+        }
+        if (!primaryAction) {
+            throw new Error('`ChipHarness.action` is "primary", but the chip does not have a primary action.');
+        }
+        return primaryAction;
+    }
+}
+//# sourceMappingURL=harness.js.map

package/chips/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,WAAY,SAAQ,OAAa;IAA9C;;QACE,WAAM,GAAyB,SAAS,CAAC;IA8B3C,CAAC;IA5BoB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,OAAyC,CAAC;QACnE,MAAM,aAAa,GAAG,SAAS;YAC3B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAc,IAAI,SAAS,EAAE,CAAC,CAAC;QACxE,4CAA4C;QAC5C,MAAM,EAAC,cAAc,EAAC,GAClB,IAAI,CAAC,OAAgD,CAAC;QAE1D,0EAA0E;QAC1E,yEAAyE;QACzE,UAAU;QACV,IAAI,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAAC,aAAa,EAAE;YAChD,IAAI,CAAC,cAAc,EAAE;gBACnB,MAAM,IAAI,KAAK,CACX,mFAAmF,CAAC,CAAC;aAC1F;YAED,OAAO,cAAc,CAAC;SACvB;QAED,IAAI,CAAC,aAAa,EAAE;YAClB,MAAM,IAAI,KAAK,CACX,iFAAiF,CAAC,CAAC;SACxF;QAED,OAAO,aAAa,CAAC;IACvB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Chip} from './internal/chip.js';\n\n/**\n * Test harness for chips.\n */\nexport class ChipHarness extends Harness<Chip> {\n  action: 'primary'|'trailing' = 'primary';\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    const {primaryId} = this.element as unknown as {primaryId: string};\n    const primaryAction = primaryId &&\n        this.element.renderRoot.querySelector<HTMLElement>(`#${primaryId}`);\n    // Retrieve MultiActionChip's trailingAction\n    const {trailingAction} =\n        this.element as {trailingAction?: HTMLElement | null};\n\n    // Default to trailing action if there isn't a primary action and the user\n    // didn't explicitly set `harness.action = 'trailing'` (remove-only input\n    // chips).\n    if (this.action === 'trailing' || !primaryAction) {\n      if (!trailingAction) {\n        throw new Error(\n            '`ChipHarness.action` is \"trailing\", but the chip does not have a trailing action.');\n      }\n\n      return trailingAction;\n    }\n\n    if (!primaryAction) {\n      throw new Error(\n          '`ChipHarness.action` is \"primary\", but the chip does not have a primary action.');\n    }\n\n    return primaryAction;\n  }\n}\n"]}

package/chips/input-chip.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { InputChip } from './internal/input-chip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-input-chip': MdInputChip;
+    }
+}
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdInputChip extends InputChip {
+    static styles: import("lit").CSSResult[];
+}

package/chips/input-chip.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { InputChip } from './internal/input-chip.js';
+import { styles } from './internal/input-styles.css.js';
+import { styles as selectableStyles } from './internal/selectable-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+import { styles as trailingIconStyles } from './internal/trailing-icon-styles.css.js';
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdInputChip = class MdInputChip extends InputChip {
+};
+MdInputChip.styles = [sharedStyles, trailingIconStyles, selectableStyles, styles];
+MdInputChip = __decorate([
+    customElement('md-input-chip')
+], MdInputChip);
+//# sourceMappingURL=input-chip.js.map

package/chips/input-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-chip.js","sourceRoot":"","sources":["input-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,qCAAqC,CAAC;AAC/E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,wCAAwC,CAAC;AAQpF;;;;;GAKG;AAEI,WAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAClB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,CAAC,AAD1C,CAC2C;AAFtD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAGvB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {InputChip} from './internal/input-chip.js';\nimport {styles} from './internal/input-styles.css.js';\nimport {styles as selectableStyles} from './internal/selectable-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './internal/trailing-icon-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-input-chip': MdInputChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-input-chip')\nexport class MdInputChip extends InputChip {\n  static override styles =\n      [sharedStyles, trailingIconStyles, selectableStyles, styles];\n}\n"]}

package/chips/internal/_assist-chip.scss

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-assist-chip-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-assist-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-assist-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-assist-chip-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-assist-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-assist-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-assist-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-assist-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+
+  @media (forced-colors: active) {
+    .link .outline {
+      border-color: ActiveText;
+    }
+  }
+}

package/chips/internal/_chip-set.scss

@@ -0,0 +1,12 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+}

package/chips/internal/_elevated.scss

@@ -0,0 +1,70 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../elevation/elevation';
+// go/keep-sorted end
+
+@mixin styles() {
+  .elevated {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-container-elevation),
+        'shadow-color': var(--_elevated-container-shadow-color),
+      )
+    );
+  }
+
+  .elevated::before {
+    background: var(--_elevated-container-color);
+  }
+
+  .elevated:hover {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-hover-container-elevation),
+      )
+    );
+  }
+
+  .elevated:focus-within {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-focus-container-elevation),
+      )
+    );
+  }
+
+  .elevated:active {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-pressed-container-elevation),
+      )
+    );
+  }
+
+  .elevated.disabled {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-disabled-container-elevation),
+      )
+    );
+  }
+
+  .elevated.disabled::before {
+    background: var(--_elevated-disabled-container-color);
+    opacity: var(--_elevated-disabled-container-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .elevated md-elevation {
+      border: 1px solid CanvasText;
+    }
+
+    .elevated.disabled md-elevation {
+      border-color: GrayText;
+    }
+  }
+}

package/chips/internal/_filter-chip.scss

@@ -0,0 +1,80 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-filter-chip-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-filter-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filter-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-filter-chip-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-filter-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-filter-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-filter-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-filter-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+
+  .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,107 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: list.join(
+    tokens.$md-comp-input-chip-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-input-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-input-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-input-chip-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-input-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-input-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-input-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-input-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+
+  :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;
+    }
+  }
+}