@material/web 1.0.0-pre.5 → 1.0.0-pre.7

package/chips/lib/_filter-chip.scss

@@ -0,0 +1,141 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../ripple/ripple';
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-filter-chip-values(), $tokens);
+
+  @each $token, $value in $tokens {
+    --md-filter-chip-#{$token}: #{$value};
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filter-chip-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+
+  .selected {
+    @include ripple.theme(
+      (
+        focus-color: var(--_selected-focus-state-layer-color),
+        focus-opacity: var(--_selected-focus-state-layer-opacity),
+        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 .icon.leading {
+    width: var(--_icon-size);
+  }
+
+  .checkmark {
+    inset: 0;
+    opacity: 0;
+    position: absolute;
+  }
+
+  .selected .checkmark {
+    opacity: 1;
+  }
+
+  .selected::before {
+    background: var(--_selected-container-color);
+  }
+
+  .selected .outline {
+    border-width: var(--_selected-outline-width);
+  }
+
+  .selected.elevated::before {
+    background: var(--_elevated-selected-container-color);
+  }
+
+  .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 .icon.leading {
+    color: var(--_selected-leading-icon-color);
+  }
+
+  .selected:hover .icon.leading {
+    color: var(--_selected-hover-leading-icon-color);
+  }
+
+  .selected:focus .icon.leading {
+    color: var(--_selected-focus-leading-icon-color);
+  }
+
+  .selected:active .icon.leading {
+    color: var(--_selected-pressed-leading-icon-color);
+  }
+
+  .icon.trailing {
+    color: var(--_trailing-icon-color);
+  }
+
+  :hover .icon.trailing {
+    color: var(--_hover-trailing-icon-color);
+  }
+
+  :focus .icon.trailing {
+    color: var(--_focus-trailing-icon-color);
+  }
+
+  :active .icon.trailing {
+    color: var(--_pressed-trailing-icon-color);
+  }
+
+  .disabled .icon.trailing {
+    color: var(--_disabled-trailing-icon-color);
+    opacity: var(--_disabled-trailing-icon-opacity);
+  }
+
+  .selected .icon.trailing {
+    color: var(--_selected-trailing-icon-color);
+  }
+
+  .selected:hover .icon.trailing {
+    color: var(--_selected-hover-trailing-icon-color);
+  }
+
+  .selected:focus .icon.trailing {
+    color: var(--_selected-focus-trailing-icon-color);
+  }
+
+  .selected:active .icon.trailing {
+    color: var(--_selected-pressed-trailing-icon-color);
+  }
+}

package/chips/lib/_shared.scss

@@ -22,20 +22,14 @@
     display: inline-flex;
     height: var(--_container-height);
 
-    @include elevation.theme(
-      (
-        surface-tint: var(--_container-surface-tint-layer-color),
-      )
-    );
-
     @include ripple.theme(
       (
-        focus-color: var(--_focus-state-layer-color),
-        focus-opacity: var(--_focus-state-layer-opacity),
-        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),
+        'focus-color': var(--_focus-state-layer-color),
+        'focus-opacity': var(--_focus-state-layer-opacity),
+        '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),
       )
     );
   }
@@ -56,7 +50,7 @@
     text-decoration: none;
     width: 100%;
 
-    // Container and outline color, separate node for disabled opacity changes
+    // Container color, separate node for disabled opacity changes
     &::before {
       border-radius: inherit;
       content: '';
@@ -74,29 +68,57 @@
     pointer-events: none;
   }
 
-  .flat {
+  // 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);
+  }
+
+  .elevated {
     @include elevation.theme(
       (
-        level: var(--_flat-container-elevation),
+        'level': var(--_elevated-container-elevation),
+        'shadow-color': var(--_elevated-container-shadow-color),
       )
     );
+  }
 
-    &::before {
-      border: var(--_flat-outline-width) solid var(--_flat-outline-color);
-    }
+  .elevated::before {
+    background: var(--_elevated-container-color);
   }
 
-  .flat.disabled::before {
-    border-color: var(--_flat-disabled-outline-color);
-    opacity: var(--_flat-disabled-outline-opacity);
+  .elevated:hover {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-hover-container-elevation),
+      )
+    );
   }
 
-  .elevated {
-    border: none;
+  .elevated:focus-within {
+    @include elevation.theme(
+      (
+        'level': var(--_elevated-focus-container-elevation),
+      )
+    );
+  }
 
+  .elevated:active {
     @include elevation.theme(
       (
-        level: var(--_elevated-container-elevation),
+        'level': var(--_elevated-pressed-container-elevation),
       )
     );
   }
@@ -104,7 +126,7 @@
   .elevated.disabled {
     @include elevation.theme(
       (
-        level: var(--_elevated-disabled-container-elevation),
+        'level': var(--_elevated-disabled-container-elevation),
       )
     );
   }
@@ -114,15 +136,10 @@
     opacity: var(--_elevated-disabled-container-opacity);
   }
 
-  md-elevation {
-    inset: 0;
-    position: absolute;
-  }
-
   md-focus-ring {
     @include focus-ring.theme(
       (
-        shape: shape.corners-to-shape-token('--_container-shape'),
+        'shape': shape.corners-to-shape-token('--_container-shape'),
       )
     );
   }
@@ -131,6 +148,12 @@
     border-radius: inherit;
   }
 
+  .label,
+  .icon {
+    // Place content above background elements
+    z-index: 1;
+  }
+
   .label {
     align-items: center;
     color: var(--_label-text-color);
@@ -142,6 +165,18 @@
     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);
@@ -149,19 +184,18 @@
 
   .icon {
     align-self: center;
+    height: var(--_icon-size);
+    position: relative;
   }
 
   .icon ::slotted(*) {
-    font-size: inherit;
-    height: 100%;
-    width: 100%;
+    font-size: var(--_icon-size);
+    height: var(--_icon-size);
+    width: var(--_icon-size);
   }
 
   .icon.leading {
     color: var(--_leading-icon-color);
-    font-size: var(--_leading-icon-size);
-    max-height: var(--_leading-icon-size);
-    max-width: var(--_leading-icon-size);
   }
 
   :hover .icon.leading {

package/chips/lib/assist-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_container-surface-tint-layer-color: var(--md-assist-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-assist-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-assist-chip-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_flat-container-elevation: var(--md-assist-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-disabled-outline-opacity: var(--md-assist-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-assist-chip-flat-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-outline-color: var(--md-assist-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-assist-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-type: var(--md-assist-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-size: var(--md-assist-chip-leading-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=assist-styles.css.map */
+export const styles = css `:host{--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=assist-styles.css.map */
 `;
 //# sourceMappingURL=assist-styles.css.js.map

package/chips/lib/assist-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_container-surface-tint-layer-color: var(--md-assist-chip-container-surface-tint-layer-color, var(--md-sys-color-primary, #6750a4));--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_dragged-container-elevation: var(--md-assist-chip-dragged-container-elevation, 4);--_dragged-label-text-color: var(--md-assist-chip-dragged-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface, #fffbfe));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1c1b1f));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_flat-container-elevation: var(--md-assist-chip-flat-container-elevation, 0);--_flat-disabled-outline-color: var(--md-assist-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-disabled-outline-opacity: var(--md-assist-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-assist-chip-flat-focus-outline-color, var(--md-sys-color-on-surface, #1c1b1f));--_flat-outline-color: var(--md-assist-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-assist-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_label-text-type: var(--md-assist-chip-label-text-type, 500 0.875rem / 1.25rem Roboto);--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1c1b1f));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1c1b1f));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-size: var(--md-assist-chip-leading-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}
+{"version":3,"file":"assist-styles.css.js","sourceRoot":"","sources":["assist-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-shape-start-start: var(--md-assist-chip-container-shape-start-start, var(--md-assist-chip-container-shape, 8px));--_container-shape-start-end: var(--md-assist-chip-container-shape-start-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-end: var(--md-assist-chip-container-shape-end-end, var(--md-assist-chip-container-shape, 8px));--_container-shape-end-start: var(--md-assist-chip-container-shape-end-start, var(--md-assist-chip-container-shape, 8px));--_container-height: var(--md-assist-chip-container-height, 32px);--_disabled-label-text-color: var(--md-assist-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-assist-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-assist-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-assist-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-assist-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-assist-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-assist-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-assist-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-assist-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-assist-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-assist-chip-elevated-pressed-container-elevation, 1);--_focus-label-text-color: var(--md-assist-chip-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-color: var(--md-assist-chip-focus-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-state-layer-opacity: var(--md-assist-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-assist-chip-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-color: var(--md-assist-chip-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-assist-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-assist-chip-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-assist-chip-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_pressed-label-text-color: var(--md-assist-chip-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-color: var(--md-assist-chip-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_pressed-state-layer-opacity: var(--md-assist-chip-pressed-state-layer-opacity, 0.12);--_disabled-outline-color: var(--md-assist-chip-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-assist-chip-disabled-outline-opacity, 0.12);--_focus-outline-color: var(--md-assist-chip-focus-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_outline-color: var(--md-assist-chip-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-assist-chip-outline-width, 1px);--_disabled-leading-icon-color: var(--md-assist-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-assist-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-assist-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-assist-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-assist-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-assist-chip-icon-size, 18px);--_pressed-leading-icon-color: var(--md-assist-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4))}/*# sourceMappingURL=assist-styles.css.map */\n`;\n "]}

package/chips/lib/chip.d.ts

@@ -6,7 +6,7 @@
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, nothing, TemplateResult } from 'lit';
 /**
  * A chip component.
  */
@@ -20,9 +20,14 @@ export declare class Chip extends LitElement {
     private showRipple;
     private readonly ripple;
     render(): TemplateResult<2 | 1>;
-    protected renderTrailingIcon?: () => TemplateResult;
+    protected getContainerClasses(): {
+        disabled: boolean;
+        elevated: boolean;
+    };
+    protected renderLeadingIcon(): TemplateResult;
+    protected renderTrailingIcon(): TemplateResult | typeof nothing;
+    private renderRipple;
     private readonly getRipple;
-    private readonly renderRipple;
     private handleBlur;
     private handleFocus;
     private handlePointerDown;

package/chips/lib/chip.js

@@ -3,14 +3,13 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+import { __decorate } from "tslib";
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
 import { html, LitElement, nothing } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
 import { html as staticHtml, literal } from 'lit/static-html.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
@@ -31,19 +30,11 @@ export class Chip extends LitElement {
             this.showRipple = true;
             return this.ripple;
         };
-        this.renderRipple = () => {
-            return html `<md-ripple ?disabled=${this.disabled}></md-ripple>`;
-        };
     }
     render() {
-        const classes = {
-            disabled: this.disabled,
-            elevated: this.elevated,
-            flat: !this.elevated,
-        };
         const button = this.href ? literal `a` : literal `button`;
         return staticHtml `
-      <${button} class="container ${classMap(classes)}"
+      <${button} class="container ${classMap(this.getContainerClasses())}"
           ?disabled=${this.disabled}
           href=${this.href || nothing}
           target=${this.href ? this.target : nothing}
@@ -51,19 +42,35 @@ export class Chip extends LitElement {
           @focus=${this.handleFocus}
           @pointerdown=${this.handlePointerDown}
           ${ripple(this.getRipple)}>
-        <md-elevation shadow=${this.elevated} surface></md-elevation>
-        ${when(this.showRipple, this.renderRipple)}
+        ${!this.elevated ? html `<span class="outline"></span>` : nothing}
+        ${this.elevated ? html `<md-elevation></md-elevation>` : nothing}
+        ${this.showRipple ? this.renderRipple() : nothing}
         <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
         <span class="icon leading">
-          <slot name="leading-icon"></slot>
+          ${this.renderLeadingIcon()}
         </span>
         <span class="label">${this.label}</span>
         <span class="icon trailing">
-          ${this.renderTrailingIcon?.() || nothing}
+          ${this.renderTrailingIcon()}
         </span>
       </${button}>
     `;
     }
+    getContainerClasses() {
+        return {
+            disabled: this.disabled,
+            elevated: this.elevated,
+        };
+    }
+    renderLeadingIcon() {
+        return html `<slot name="leading-icon"></slot>`;
+    }
+    renderTrailingIcon() {
+        return nothing;
+    }
+    renderRipple() {
+        return html `<md-ripple ?disabled=${this.disabled}></md-ripple>`;
+    }
     handleBlur() {
         this.showFocusRing = false;
     }
@@ -76,35 +83,27 @@ export class Chip extends LitElement {
     }
 }
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Chip.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], Chip.prototype, "elevated", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Chip.prototype, "href", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Chip.prototype, "label", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], Chip.prototype, "target", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Chip.prototype, "showFocusRing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], Chip.prototype, "showRipple", void 0);
 __decorate([
-    queryAsync('md-ripple'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple')
 ], Chip.prototype, "ripple", void 0);
 //# sourceMappingURL=chip.js.map

package/chips/lib/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport class Chip extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) elevated = false;\n  @property({type: String}) href = '';\n  @property({type: String}) label = '';\n  @property({type: String}) target = '';\n\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n  override render() {\n    const classes = {\n      disabled: this.disabled,\n      elevated: this.elevated,\n      flat: !this.elevated,\n    };\n\n    const button = this.href ? literal`a` : literal`button`;\n    return staticHtml`\n      <${button} class=\"container ${classMap(classes)}\"\n          ?disabled=${this.disabled}\n          href=${this.href || nothing}\n          target=${this.href ? this.target : nothing}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @pointerdown=${this.handlePointerDown}\n          ${ripple(this.getRipple)}>\n        <md-elevation shadow=${this.elevated} surface></md-elevation>\n        ${when(this.showRipple, this.renderRipple)}\n        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>\n        <span class=\"icon leading\">\n          <slot name=\"leading-icon\"></slot>\n        </span>\n        <span class=\"label\">${this.label}</span>\n        <span class=\"icon trailing\">\n          ${this.renderTrailingIcon?.() || nothing}\n        </span>\n      </${button}>\n    `;\n  }\n\n  // Not all chip variants have a trailing icon. We still render a wrapper\n  // <span class=\"icon trailing\"> to compute the correct padding + gap of the\n  // button.\n  protected renderTrailingIcon?: () => TemplateResult;\n\n  private readonly getRipple = () => {  // bind to this\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private readonly renderRipple = () => {  // bind to this\n    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;\n  };\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n}\n"]}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["chip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\n\n/**\n * A chip component.\n */\nexport class Chip extends LitElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) elevated = false;\n  @property() href = '';\n  @property() label = '';\n  @property() target = '';\n\n  @state() private showFocusRing = false;\n  @state() private showRipple = false;\n  @queryAsync('md-ripple') private readonly ripple!: Promise<MdRipple|null>;\n\n  override render() {\n    const button = this.href ? literal`a` : literal`button`;\n    return staticHtml`\n      <${button} class=\"container ${classMap(this.getContainerClasses())}\"\n          ?disabled=${this.disabled}\n          href=${this.href || nothing}\n          target=${this.href ? this.target : nothing}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n          @pointerdown=${this.handlePointerDown}\n          ${ripple(this.getRipple)}>\n        ${!this.elevated ? html`<span class=\"outline\"></span>` : nothing}\n        ${this.elevated ? html`<md-elevation></md-elevation>` : nothing}\n        ${this.showRipple ? this.renderRipple() : nothing}\n        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>\n        <span class=\"icon leading\">\n          ${this.renderLeadingIcon()}\n        </span>\n        <span class=\"label\">${this.label}</span>\n        <span class=\"icon trailing\">\n          ${this.renderTrailingIcon()}\n        </span>\n      </${button}>\n    `;\n  }\n\n  protected getContainerClasses() {\n    return {\n      disabled: this.disabled,\n      elevated: this.elevated,\n    };\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    return html`<slot name=\"leading-icon\"></slot>`;\n  }\n\n  protected renderTrailingIcon(): TemplateResult|typeof nothing {\n    return nothing;\n  }\n\n  private renderRipple() {\n    return html`<md-ripple ?disabled=${this.disabled}></md-ripple>`;\n  }\n\n  private readonly getRipple = () => {  // bind to this\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  private handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  private handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  private handlePointerDown() {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n}\n"]}

package/chips/lib/filter-chip.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { PropertyValues } from 'lit';
+import { Chip } from './chip.js';
+/**
+ * A filter chip component.
+ */
+export declare class FilterChip extends Chip {
+    selected: boolean;
+    constructor();
+    protected updated(changedProperties: PropertyValues<FilterChip>): void;
+    protected getContainerClasses(): {
+        selected: boolean;
+        disabled: boolean;
+        elevated: boolean;
+    };
+    protected renderLeadingIcon(): import("lit-html").TemplateResult<2 | 1>;
+}

package/chips/lib/filter-chip.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Chip } from './chip.js';
+/**
+ * A filter chip component.
+ */
+export class FilterChip extends Chip {
+    constructor() {
+        super();
+        this.selected = false;
+        this.addEventListener('click', () => {
+            this.selected = !this.selected;
+        });
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('selected')) {
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+    getContainerClasses() {
+        const classes = super.getContainerClasses();
+        return {
+            ...classes,
+            selected: this.selected,
+        };
+    }
+    renderLeadingIcon() {
+        if (!this.selected) {
+            return super.renderLeadingIcon();
+        }
+        return svg `
+      <svg class="checkmark" viewBox="0 0 18 18">
+        <path d="M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z" />
+      </svg>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], FilterChip.prototype, "selected", void 0);
+//# sourceMappingURL=filter-chip.js.map

package/chips/lib/filter-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAiB,GAAG,EAAC,MAAM,KAAK,CAAC;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,IAAI;IAGlC;QACE,KAAK,EAAE,CAAC;QAHiB,aAAQ,GAAG,KAAK,CAAC;QAI1C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CAAC,iBAA6C;QACtE,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACrC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;SAC1D;IACH,CAAC;IAEkB,mBAAmB;QACpC,MAAM,OAAO,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC5C,OAAO;YACL,GAAG,OAAO;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,iBAAiB;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAClC;QAED,OAAO,GAAG,CAAA;;;;KAIT,CAAC;IACJ,CAAC;CACF;AAlC4B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CAAkB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {PropertyValues, svg} from 'lit';\nimport {property} from 'lit/decorators.js';\n\nimport {Chip} from './chip.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends Chip {\n  @property({type: Boolean}) selected = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', () => {\n      this.selected = !this.selected;\n    });\n  }\n\n  protected override updated(changedProperties: PropertyValues<FilterChip>) {\n    if (changedProperties.has('selected')) {\n      this.dispatchEvent(new Event('change', {bubbles: true}));\n    }\n  }\n\n  protected override getContainerClasses() {\n    const classes = super.getContainerClasses();\n    return {\n      ...classes,\n      selected: this.selected,\n    };\n  }\n\n  protected override renderLeadingIcon() {\n    if (!this.selected) {\n      return super.renderLeadingIcon();\n    }\n\n    return svg`\n      <svg class=\"checkmark\" viewBox=\"0 0 18 18\">\n        <path d=\"M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z\" />\n      </svg>\n    `;\n  }\n}\n"]}