@material/web 1.0.0-pre.4 → 1.0.0-pre.6

package/chips/lib/chip.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import '../../focus/focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement, TemplateResult } from 'lit';
+/**
+ * A chip component.
+ */
+export declare class Chip extends LitElement {
+    disabled: boolean;
+    elevated: boolean;
+    href: string;
+    label: string;
+    target: string;
+    private showFocusRing;
+    private showRipple;
+    private readonly ripple;
+    render(): TemplateResult<2 | 1>;
+    protected renderTrailingIcon?: () => TemplateResult;
+    private readonly getRipple;
+    private readonly renderRipple;
+    private handleBlur;
+    private handleFocus;
+    private handlePointerDown;
+}

package/chips/lib/chip.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate, __metadata } 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';
+/**
+ * A chip component.
+ */
+export class Chip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.elevated = false;
+        this.href = '';
+        this.label = '';
+        this.target = '';
+        this.showFocusRing = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            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)}"
+          ?disabled=${this.disabled}
+          href=${this.href || nothing}
+          target=${this.href ? this.target : nothing}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @pointerdown=${this.handlePointerDown}
+          ${ripple(this.getRipple)}>
+        ${this.elevated ? html `<md-elevation></md-elevation>` : nothing}
+        ${when(this.showRipple, this.renderRipple)}
+        <md-focus-ring .visible=${this.showFocusRing}></md-focus-ring>
+        <span class="icon leading">
+          <slot name="leading-icon"></slot>
+        </span>
+        <span class="label">${this.label}</span>
+        <span class="icon trailing">
+          ${this.renderTrailingIcon?.() || nothing}
+        </span>
+      </${button}>
+    `;
+    }
+    handleBlur() {
+        this.showFocusRing = false;
+    }
+    handleFocus() {
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+    handlePointerDown() {
+        pointerPress();
+        this.showFocusRing = shouldShowStrongFocus();
+    }
+}
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Chip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Chip.prototype, "elevated", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "href", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "label", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], Chip.prototype, "target", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Chip.prototype, "showFocusRing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], Chip.prototype, "showRipple", void 0);
+__decorate([
+    queryAsync('md-ripple'),
+    __metadata("design:type", Promise)
+], Chip.prototype, "ripple", void 0);
+//# sourceMappingURL=chip.js.map

package/chips/lib/chip.js.map

@@ -0,0 +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        ${this.elevated ? html`<md-elevation></md-elevation>` : nothing}\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"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `: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);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.container{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;box-sizing:border-box;display:flex;gap:8px;height:100%;outline:none;padding:0 8px;position:relative;text-decoration:none;width:100%}.container::before{border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.flat::before{border:var(--_flat-outline-width) solid var(--_flat-outline-color)}.flat:focus::before{border-color:var(--_flat-focus-outline-color)}.flat.disabled::before{border-color:var(--_flat-disabled-outline-color);opacity:var(--_flat-disabled-outline-opacity)}.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label,.icon{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;font-size:var(--_icon-size);max-height:var(--_icon-size);max-width:var(--_icon-size)}.icon ::slotted(*){font-size:inherit;height:100%;width:100%}.icon.leading{color:var(--_leading-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-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{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);--md-ripple-focus-color:var(--_focus-state-layer-color);--md-ripple-focus-opacity:var(--_focus-state-layer-opacity);--md-ripple-hover-color:var(--_hover-state-layer-color);--md-ripple-hover-opacity:var(--_hover-state-layer-opacity);--md-ripple-pressed-color:var(--_pressed-state-layer-color);--md-ripple-pressed-opacity:var(--_pressed-state-layer-opacity)}.container{align-items:baseline;appearance:none;background:none;border:none;border-radius:inherit;box-sizing:border-box;display:flex;gap:8px;height:100%;outline:none;padding:0 8px;position:relative;text-decoration:none;width:100%}.container::before{border-radius:inherit;content:\"\";inset:0;pointer-events:none;position:absolute}.container:not(.disabled){cursor:pointer}.container.disabled{pointer-events:none}.flat::before{border:var(--_flat-outline-width) solid var(--_flat-outline-color)}.flat:focus::before{border-color:var(--_flat-focus-outline-color)}.flat.disabled::before{border-color:var(--_flat-disabled-outline-color);opacity:var(--_flat-disabled-outline-opacity)}.elevated{--md-elevation-level:var(--_elevated-container-elevation);--md-elevation-shadow-color:var(--_elevated-container-shadow-color)}.elevated::before{background:var(--_elevated-container-color)}.elevated:hover{--md-elevation-level:var(--_elevated-hover-container-elevation)}.elevated:focus-within{--md-elevation-level:var(--_elevated-focus-container-elevation)}.elevated:active{--md-elevation-level:var(--_elevated-pressed-container-elevation)}.elevated.disabled{--md-elevation-level:var(--_elevated-disabled-container-elevation)}.elevated.disabled::before{background:var(--_elevated-disabled-container-color);opacity:var(--_elevated-disabled-container-opacity)}md-focus-ring{--md-focus-ring-shape-start-start:var(--md-focus-ring-shape, var(--_container-shape-start-start));--md-focus-ring-shape-start-end:var(--md-focus-ring-shape, var(--_container-shape-start-end));--md-focus-ring-shape-end-end:var(--md-focus-ring-shape, var(--_container-shape-end-end));--md-focus-ring-shape-end-start:var(--md-focus-ring-shape, var(--_container-shape-end-start))}md-ripple{border-radius:inherit}.label,.icon{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;font-size:var(--_icon-size);max-height:var(--_icon-size);max-width:var(--_icon-size)}.icon ::slotted(*){font-size:inherit;height:100%;width:100%}.icon.leading{color:var(--_leading-icon-color)}:hover .icon.leading{color:var(--_hover-leading-icon-color)}:focus .icon.leading{color:var(--_focus-leading-icon-color)}:active .icon.leading{color:var(--_pressed-leading-icon-color)}.disabled .icon.leading{color:var(--_disabled-leading-icon-color);opacity:var(--_disabled-leading-icon-opacity)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/{autocomplete → chips}/lib/shared-styles.scss

@@ -1,5 +1,5 @@
 //
-// Copyright 2022 Google LLC
+// Copyright 2023 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Chip } from './chip.js';
+/**
+ * A suggestion chip component.
+ */
+export declare class SuggestionChip extends Chip {
+}

package/chips/lib/suggestion-chip.js

@@ -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 {
+}
+//# sourceMappingURL=suggestion-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAC;AAE/B;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;CAAG","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Chip} from './chip.js';\n\n/**\n * A suggestion chip component.\n */\nexport class SuggestionChip extends Chip {}\n"]}

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

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-shape-start-start: var(--md-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_flat-disabled-outline-color: var(--md-suggestion-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-disabled-outline-opacity: var(--md-suggestion-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-suggestion-chip-flat-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_flat-outline-color: var(--md-suggestion-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-suggestion-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-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-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px)}/*# sourceMappingURL=suggestion-styles.css.map */
+`;
+//# sourceMappingURL=suggestion-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-styles.css.js","sourceRoot":"","sources":["suggestion-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-suggestion-chip-container-shape-start-start, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-start-end: var(--md-suggestion-chip-container-shape-start-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-end: var(--md-suggestion-chip-container-shape-end-end, var(--md-suggestion-chip-container-shape, 8px));--_container-shape-end-start: var(--md-suggestion-chip-container-shape-end-start, var(--md-suggestion-chip-container-shape, 8px));--_container-height: var(--md-suggestion-chip-container-height, 32px);--_disabled-label-text-color: var(--md-suggestion-chip-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-suggestion-chip-disabled-label-text-opacity, 0.38);--_elevated-container-color: var(--md-suggestion-chip-elevated-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_elevated-container-elevation: var(--md-suggestion-chip-elevated-container-elevation, 1);--_elevated-container-shadow-color: var(--md-suggestion-chip-elevated-container-shadow-color, var(--md-sys-color-shadow, #000));--_elevated-disabled-container-color: var(--md-suggestion-chip-elevated-disabled-container-color, var(--md-sys-color-on-surface, #1d1b20));--_elevated-disabled-container-elevation: var(--md-suggestion-chip-elevated-disabled-container-elevation, 0);--_elevated-disabled-container-opacity: var(--md-suggestion-chip-elevated-disabled-container-opacity, 0.12);--_elevated-focus-container-elevation: var(--md-suggestion-chip-elevated-focus-container-elevation, 1);--_elevated-hover-container-elevation: var(--md-suggestion-chip-elevated-hover-container-elevation, 2);--_elevated-pressed-container-elevation: var(--md-suggestion-chip-elevated-pressed-container-elevation, 1);--_flat-disabled-outline-color: var(--md-suggestion-chip-flat-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_flat-disabled-outline-opacity: var(--md-suggestion-chip-flat-disabled-outline-opacity, 0.12);--_flat-focus-outline-color: var(--md-suggestion-chip-flat-focus-outline-color, var(--md-sys-color-on-surface-variant, #49454f));--_flat-outline-color: var(--md-suggestion-chip-flat-outline-color, var(--md-sys-color-outline, #79747e));--_flat-outline-width: var(--md-suggestion-chip-flat-outline-width, 1px);--_focus-label-text-color: var(--md-suggestion-chip-focus-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-color: var(--md-suggestion-chip-focus-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-state-layer-opacity: var(--md-suggestion-chip-focus-state-layer-opacity, 0.12);--_hover-label-text-color: var(--md-suggestion-chip-hover-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-color: var(--md-suggestion-chip-hover-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-state-layer-opacity: var(--md-suggestion-chip-hover-state-layer-opacity, 0.08);--_label-text-color: var(--md-suggestion-chip-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-type: var(--md-suggestion-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-suggestion-chip-pressed-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-color: var(--md-suggestion-chip-pressed-state-layer-color, var(--md-sys-color-on-surface-variant, #49454f));--_pressed-state-layer-opacity: var(--md-suggestion-chip-pressed-state-layer-opacity, 0.12);--_disabled-leading-icon-color: var(--md-suggestion-chip-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-suggestion-chip-disabled-leading-icon-opacity, 0.38);--_focus-leading-icon-color: var(--md-suggestion-chip-focus-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-leading-icon-color: var(--md-suggestion-chip-hover-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_leading-icon-color: var(--md-suggestion-chip-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-leading-icon-color: var(--md-suggestion-chip-pressed-leading-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-suggestion-chip-icon-size, 18px)}/*# sourceMappingURL=suggestion-styles.css.map */\n`;\n "]}

package/{autocomplete/lib/autocompletelist/autocomplete-list-styles.scss → chips/lib/suggestion-styles.scss}

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

package/chips/suggestion-chip.d.ts

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

package/chips/suggestion-chip.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+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';
+/**
+ * TODO(b/243982145): add docs
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdSuggestionChip = class MdSuggestionChip extends SuggestionChip {
+};
+MdSuggestionChip.styles = [sharedStyles, styles];
+MdSuggestionChip = __decorate([
+    customElement('md-suggestion-chip')
+], MdSuggestionChip);
+export { MdSuggestionChip };
+//# sourceMappingURL=suggestion-chip.js.map

package/chips/suggestion-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestion-chip.js","sourceRoot":"","sources":["suggestion-chip.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AADrC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","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 {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles} from './lib/suggestion-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-suggestion-chip': MdSuggestionChip;\n  }\n}\n\n/**\n * TODO(b/243982145): add docs\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-suggestion-chip')\nexport class MdSuggestionChip extends SuggestionChip {\n  static override styles = [sharedStyles, styles];\n}\n"]}

package/circularprogress/_circular-progress.scss

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

package/circularprogress/circular-progress.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CircularProgress } from './lib/circular-progress.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-circular-progress': MdCircularProgress;
+    }
+}
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+export declare class MdCircularProgress extends CircularProgress {
+    static styles: import("lit").CSSResult[];
+}

package/circularprogress/circular-progress.js

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { CircularProgress } from './lib/circular-progress.js';
+import { styles } from './lib/circular-progress-styles.css.js';
+/**
+ * @summary Circular progress indicators display progress by animating along an
+ * invisible circular track in a clockwise direction. They can be applied
+ * directly to a surface, such as a button or card.
+ *
+ * @description
+ * Progress indicators inform users about the status of ongoing processes.
+ * - Determinate indicators display how long a process will take.
+ * - Indeterminate indicators express an unspecified amount of wait time.
+ */
+let MdCircularProgress = class MdCircularProgress extends CircularProgress {
+};
+MdCircularProgress.styles = [styles];
+MdCircularProgress = __decorate([
+    customElement('md-circular-progress')
+], MdCircularProgress);
+export { MdCircularProgress };
+//# sourceMappingURL=circular-progress.js.map

package/circularprogress/circular-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["circular-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,uCAAuC,CAAC;AAQ7D;;;;;;;;;GASG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gBAAgB;;AACtC,yBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAE9B;SAFY,kBAAkB","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 {CircularProgress} from './lib/circular-progress.js';\nimport {styles} from './lib/circular-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-circular-progress': MdCircularProgress;\n  }\n}\n\n/**\n * @summary Circular progress indicators display progress by animating along an\n * invisible circular track in a clockwise direction. They can be applied\n * directly to a surface, such as a button or card.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-circular-progress')\nexport class MdCircularProgress extends CircularProgress {\n  static override styles = [styles];\n}\n"]}

package/circularprogress/harness.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { CircularProgress } from './lib/circular-progress.js';
+/**
+ * Test harness for circular-progress.
+ */
+export declare class CircularProgressHarness extends Harness<CircularProgress> {
+}

package/circularprogress/harness.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for circular-progress.
+ */
+export class CircularProgressHarness extends Harness {
+}
+//# sourceMappingURL=harness.js.map

package/circularprogress/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,uBAAwB,SAAQ,OAAyB;CAAG","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 {CircularProgress} from './lib/circular-progress.js';\n\n/**\n * Test harness for circular-progress.\n */\nexport class CircularProgressHarness extends Harness<CircularProgress> {}\n"]}