@material/web 1.0.0-pre.1 → 1.0.0-pre.11

package/chips/input-chip.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { InputChip } from './lib/input-chip.js';
+import { styles } from './lib/input-styles.css.js';
+import { styles as selectableStyles } from './lib/selectable-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { styles as trailingIconStyles } from './lib/trailing-icon-styles.css.js';
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdInputChip = class MdInputChip extends InputChip {
+};
+MdInputChip.styles = [sharedStyles, trailingIconStyles, selectableStyles, styles];
+MdInputChip = __decorate([
+    customElement('md-input-chip')
+], MdInputChip);
+export { 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,qBAAqB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAC,MAAM,IAAI,gBAAgB,EAAC,MAAM,gCAAgC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mCAAmC,CAAC;AAQ/E;;;;;GAKG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAClB,CAAC,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAFtD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAGvB;SAHY,WAAW","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 './lib/input-chip.js';\nimport {styles} from './lib/input-styles.css.js';\nimport {styles as selectableStyles} from './lib/selectable-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {styles as trailingIconStyles} from './lib/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/lib/_assist-chip.scss

@@ -0,0 +1,61 @@
+//
+// 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)
+    );
+  }
+}

package/chips/lib/_chip-set.scss

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

package/chips/lib/_elevated.scss

@@ -0,0 +1,60 @@
+//
+// 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);
+  }
+}

package/chips/lib/_filter-chip.scss

@@ -0,0 +1,74 @@
+//
+// 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);
+  }
+}

package/chips/lib/_input-chip.scss

@@ -0,0 +1,75 @@
+//
+// 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)
+    );
+  }
+
+  .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);
+  }
+}

package/chips/lib/_selectable.scss

@@ -0,0 +1,66 @@
+//
+// 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),
+      )
+    );
+  }
+
+  .selected::before {
+    background: var(--_selected-container-color);
+  }
+
+  .selected .outline {
+    border-width: var(--_selected-outline-width);
+  }
+
+  .selected.disabled::before {
+    background: var(--_disabled-selected-container-color);
+    opacity: var(--_disabled-selected-container-opacity);
+  }
+
+  .selected .label {
+    color: var(--_selected-label-text-color);
+  }
+
+  .selected:hover .label {
+    color: var(--_selected-hover-label-text-color);
+  }
+
+  .selected:focus .label {
+    color: var(--_selected-focus-label-text-color);
+  }
+
+  .selected:active .label {
+    color: var(--_selected-pressed-label-text-color);
+  }
+
+  .selected .leading.icon {
+    color: var(--_selected-leading-icon-color);
+  }
+
+  .selected:hover .leading.icon {
+    color: var(--_selected-hover-leading-icon-color);
+  }
+
+  .selected:focus .leading.icon {
+    color: var(--_selected-focus-leading-icon-color);
+  }
+
+  .selected:active .leading.icon {
+    color: var(--_selected-pressed-leading-icon-color);
+  }
+}

package/chips/lib/_shared.scss

@@ -0,0 +1,189 @@
+//
+// 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);
+
+    @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),
+      )
+    );
+
+    @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;
+    gap: 8px;
+    outline: none;
+    padding: 0;
+    position: relative;
+    text-decoration: none;
+  }
+
+  .primary.action {
+    padding-inline-start: 8px;
+    padding-inline-end: 16px;
+  }
+
+  .touch {
+    height: 48px;
+    inset: 50% 0 0;
+    position: absolute;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+
+  // 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;
+  }
+
+  :focus .outline {
+    border-color: var(--_focus-outline-color);
+  }
+
+  .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: var(--_label-text-type);
+    height: 100%;
+    text-overflow: ellipsis;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  :hover .label {
+    color: var(--_hover-label-text-color);
+  }
+
+  :focus .label {
+    color: var(--_focus-label-text-color);
+  }
+
+  :active .label {
+    color: var(--_pressed-label-text-color);
+  }
+
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  .icon {
+    align-self: center;
+    display: flex;
+    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);
+  }
+
+  :hover .leading.icon {
+    color: var(--_hover-leading-icon-color);
+  }
+
+  :focus .leading.icon {
+    color: var(--_focus-leading-icon-color);
+  }
+
+  :active .leading.icon {
+    color: var(--_pressed-leading-icon-color);
+  }
+
+  .disabled .leading.icon {
+    color: var(--_disabled-leading-icon-color);
+    opacity: var(--_disabled-leading-icon-opacity);
+  }
+}

package/chips/lib/_suggestion-chip.scss

@@ -0,0 +1,61 @@
+//
+// 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-suggestion-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-suggestion-chip-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-suggestion-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-suggestion-chip-#{$token}, #{$value});
+    }
+
+    // Support logical shape properties
+    --_container-shape-start-start: var(
+      --md-suggestion-chip-container-shape-start-start,
+      var(--_container-shape)
+    );
+    --_container-shape-start-end: var(
+      --md-suggestion-chip-container-shape-start-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-end: var(
+      --md-suggestion-chip-container-shape-end-end,
+      var(--_container-shape)
+    );
+    --_container-shape-end-start: var(
+      --md-suggestion-chip-container-shape-end-start,
+      var(--_container-shape)
+    );
+  }
+}