feat(chips): add basic assist chip

PiperOrigin-RevId: 516591846

chips/_assist-chip.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/assist-chip' show theme;

chips/assist-chip.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {customElement} from 'lit/decorators.js';
+
+import {AssistChip} from './lib/assist-chip.js';
+import {styles} from './lib/assist-styles.css.js';
+import {styles as sharedStyles} from './lib/shared-styles.css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-assist-chip': MdAssistChip;
+  }
+}
+
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-assist-chip')
+export class MdAssistChip extends AssistChip {
+  static override styles = [sharedStyles, styles];
+}

chips/lib/_assist-chip.scss

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../sass/shape';
+@use '../../sass/theme';
+@use '../../tokens';
+@use './shared';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(
+    shared.resolve-tokens(tokens.md-comp-assist-chip-values()),
+    shared.resolve-tokens($tokens)
+  );
+  $tokens: theme.create-theme-vars($tokens, 'assist-chip');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-assist-chip-values();
+  $tokens: shared.resolve-tokens($tokens);
+  $tokens: theme.create-theme-vars($tokens, 'assist-chip');
+  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}

chips/lib/_shared.scss

@@ -0,0 +1,75 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../sass/typography';
+// 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 elevation.theme(
+      (
+        surface-tint: var(--_container-surface-tint-layer-color),
+      )
+    );
+  }
+
+  .container {
+    align-items: center;
+    appearance: none;
+    background: none;
+    border-radius: inherit;
+    box-sizing: border-box;
+    display: flex;
+    gap: 8px;
+    height: 100%;
+    padding: 0 16px;
+    position: relative;
+    width: 100%;
+  }
+
+  .flat {
+    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
+
+    @include elevation.theme(
+      (
+        level: var(--_flat-container-elevation),
+      )
+    );
+  }
+
+  .elevated {
+    border: none;
+
+    @include elevation.theme(
+      (
+        level: var(--_elevated-container-elevation),
+      )
+    );
+  }
+
+  md-elevation {
+    inset: 0;
+    position: absolute;
+  }
+
+  .label {
+    color: var(--_label-text-color);
+    font: var(--_label-text-type);
+  }
+}
+
+@function resolve-tokens($tokens) {
+  $tokens: typography.resolve-tokens($tokens, 'label-text');
+  @return $tokens;
+}

chips/lib/assist-chip.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Chip} from './chip.js';
+
+/**
+ * An assist chip component.
+ */
+export class AssistChip extends Chip {}

chips/lib/assist-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './assist-chip';
+// go/keep-sorted end
+
+@include assist-chip.styles;

chips/lib/chip.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import '../../elevation/elevation.js';
+
+import {html, LitElement} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+
+/**
+ * A chip component.
+ */
+export class Chip extends LitElement {
+  @property({type: Boolean}) disabled = false;
+  @property({type: Boolean}) elevated = false;
+  @property({type: String}) label = '';
+
+  override render() {
+    const classes = {
+      elevated: this.elevated,
+      flat: !this.elevated,
+    };
+
+    return html`
+      <button class="container ${classMap(classes)}"
+          ?disabled=${this.disabled}>
+        <md-elevation shadow=${this.elevated} surface></md-elevation>
+        <div class="label">${this.label}</div>
+      </button>
+    `;
+  }
+}

chips/lib/shared-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './shared';
+// go/keep-sorted end
+
+@include shared.styles;