diff --git a/chips/_suggestion-chip.scss b/chips/_suggestion-chip.scss new file mode 100644 index 0000000000..890afa0293 --- /dev/null +++ b/chips/_suggestion-chip.scss @@ -0,0 +1,6 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +@forward './lib/suggestion-chip' show theme; diff --git a/chips/lib/_suggestion-chip.scss b/chips/lib/_suggestion-chip.scss new file mode 100644 index 0000000000..926f37b237 --- /dev/null +++ b/chips/lib/_suggestion-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-suggestion-chip-values()), + shared.resolve-tokens($tokens) + ); + $tokens: theme.create-theme-vars($tokens, 'suggestion-chip'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); + + @include theme.emit-theme-vars($tokens); +} + +@mixin styles() { + $tokens: tokens.md-comp-suggestion-chip-values(); + $tokens: shared.resolve-tokens($tokens); + $tokens: theme.create-theme-vars($tokens, 'suggestion-chip'); + $tokens: shape.resolve-tokens($tokens, 'container-shape'); + + :host { + @each $token, $value in $tokens { + --_#{$token}: #{$value}; + } + } +} diff --git a/chips/lib/suggestion-chip.ts b/chips/lib/suggestion-chip.ts new file mode 100644 index 0000000000..9d5b2b5a22 --- /dev/null +++ b/chips/lib/suggestion-chip.ts @@ -0,0 +1,12 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {Chip} from './chip.js'; + +/** + * A suggestion chip component. + */ +export class SuggestionChip extends Chip {} diff --git a/chips/lib/suggestion-styles.scss b/chips/lib/suggestion-styles.scss new file mode 100644 index 0000000000..da1f913560 --- /dev/null +++ b/chips/lib/suggestion-styles.scss @@ -0,0 +1,10 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// + +// go/keep-sorted start +@use './suggestion-chip'; +// go/keep-sorted end + +@include suggestion-chip.styles; diff --git a/chips/suggestion-chip.ts b/chips/suggestion-chip.ts new file mode 100644 index 0000000000..06fea1032d --- /dev/null +++ b/chips/suggestion-chip.ts @@ -0,0 +1,28 @@ +/** + * @license + * Copyright 2023 Google LLC + * SPDX-License-Identifier: Apache-2.0 + */ + +import {customElement} from 'lit/decorators.js'; + +import {styles as sharedStyles} from './lib/shared-styles.css.js'; +import {SuggestionChip} from './lib/suggestion-chip.js'; +import {styles} from './lib/suggestion-styles.css.js'; + +declare global { + interface HTMLElementTagNameMap { + 'md-suggestion-chip': MdSuggestionChip; + } +} + +/** + * TODO(b/243982145): add docs + * + * @final + * @suppress {visibility} + */ +@customElement('md-suggestion-chip') +export class MdSuggestionChip extends SuggestionChip { + static override styles = [sharedStyles, styles]; +}