@material/web 1.0.0-pre.13 → 1.0.0-pre.15

package/chips/internal/filter-chip.js

@@ -0,0 +1,109 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import { html, nothing, svg } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { redispatchEvent } from '../../internal/controller/events.js';
+import { MultiActionChip } from './multi-action-chip.js';
+import { renderRemoveButton } from './trailing-icons.js';
+/**
+ * A filter chip component.
+ */
+export class FilterChip extends MultiActionChip {
+    get primaryId() {
+        return 'option';
+    }
+    constructor() {
+        super();
+        this.elevated = false;
+        this.removable = false;
+        this.selected = false;
+        // Remove the `row` role from the container, since filter chips do not use a
+        // `grid` navigation model.
+        this.containerRole = undefined;
+    }
+    updated(changed) {
+        if (changed.has('selected') && changed.get('selected') !== undefined) {
+            // Dispatch when `selected` changes, except for the first update.
+            this.dispatchEvent(new Event('selected', { bubbles: true }));
+        }
+    }
+    getContainerClasses() {
+        return {
+            ...super.getContainerClasses(),
+            elevated: this.elevated,
+            selected: this.selected,
+            'has-trailing': this.removable,
+        };
+    }
+    renderActionCell(content) {
+        // Filter chips use a `listbox`/`option` model, and do not need `gridcell`
+        // wrappers around their actions.
+        return content;
+    }
+    renderAction() {
+        const { ariaLabel } = this;
+        return html `
+      <button class="primary action"
+        id="option"
+        aria-label=${ariaLabel || nothing}
+        aria-selected=${this.selected}
+        ?disabled=${this.disabled || nothing}
+        role="option"
+        @click=${this.handleClick}
+      >${this.renderContent()}</button>
+    `;
+    }
+    renderLeadingIcon() {
+        if (!this.selected) {
+            return super.renderLeadingIcon();
+        }
+        return svg `
+      <svg class="checkmark" viewBox="0 0 18 18" aria-hidden="true">
+        <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>
+    `;
+    }
+    renderTrailingAction() {
+        if (this.removable) {
+            return renderRemoveButton({ ariaLabel: this.ariaLabelRemove, disabled: this.disabled });
+        }
+        return nothing;
+    }
+    renderOutline() {
+        if (this.elevated) {
+            return html `<md-elevation></md-elevation>`;
+        }
+        return super.renderOutline();
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        const preventDefault = !redispatchEvent(this, event);
+        if (preventDefault) {
+            return;
+        }
+        this.selected = !this.selected;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], FilterChip.prototype, "elevated", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FilterChip.prototype, "selected", void 0);
+__decorate([
+    query('.primary.action')
+], FilterChip.prototype, "primaryAction", void 0);
+__decorate([
+    query('.trailing.action')
+], FilterChip.prototype, "trailingAction", void 0);
+//# sourceMappingURL=filter-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"filter-chip.js","sourceRoot":"","sources":["filter-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';\n\nimport {html, nothing, PropertyValues, svg, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {redispatchEvent} from '../../internal/controller/events.js';\n\nimport {MultiActionChip} from './multi-action-chip.js';\nimport {renderRemoveButton} from './trailing-icons.js';\n\n/**\n * A filter chip component.\n */\nexport class FilterChip extends MultiActionChip {\n  @property({type: Boolean}) elevated = false;\n  @property({type: Boolean}) removable = false;\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  protected get primaryId() {\n    return 'option';\n  }\n\n  @query('.primary.action') protected readonly primaryAction!: HTMLElement|null;\n  @query('.trailing.action')\n  protected readonly trailingAction!: HTMLElement|null;\n\n  constructor() {\n    super();\n    // Remove the `row` role from the container, since filter chips do not use a\n    // `grid` navigation model.\n    this.containerRole = undefined;\n  }\n\n  protected override updated(changed: PropertyValues<this>) {\n    if (changed.has('selected') && changed.get('selected') !== undefined) {\n      // Dispatch when `selected` changes, except for the first update.\n      this.dispatchEvent(new Event('selected', {bubbles: true}));\n    }\n  }\n\n  protected override getContainerClasses() {\n    return {\n      ...super.getContainerClasses(),\n      elevated: this.elevated,\n      selected: this.selected,\n      'has-trailing': this.removable,\n    };\n  }\n\n  protected override renderActionCell(content: TemplateResult|typeof nothing) {\n    // Filter chips use a `listbox`/`option` model, and do not need `gridcell`\n    // wrappers around their actions.\n    return content;\n  }\n\n  protected override renderAction() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button class=\"primary action\"\n        id=\"option\"\n        aria-label=${ariaLabel || nothing}\n        aria-selected=${this.selected}\n        ?disabled=${this.disabled || nothing}\n        role=\"option\"\n        @click=${this.handleClick}\n      >${this.renderContent()}</button>\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\" aria-hidden=\"true\">\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  protected override renderTrailingAction() {\n    if (this.removable) {\n      return renderRemoveButton(\n          {ariaLabel: this.ariaLabelRemove, disabled: this.disabled});\n    }\n\n    return nothing;\n  }\n\n  protected override renderOutline() {\n    if (this.elevated) {\n      return html`<md-elevation></md-elevation>`;\n    }\n\n    return super.renderOutline();\n  }\n\n  private handleClick(event: MouseEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    const preventDefault = !redispatchEvent(this, event);\n    if (preventDefault) {\n      return;\n    }\n\n    this.selected = !this.selected;\n  }\n}\n"]}

package/chips/internal/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-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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-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::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%}:host([touch-target=none]) .touch{display:none}.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{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;fill:currentColor;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)}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/chips/internal/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-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)}:host([touch-target=wrapper]){margin:max(0px,(48px - var(--_container-height))/2) 0}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-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::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%}:host([touch-target=none]) .touch{display:none}.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{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;fill:currentColor;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)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/chips/internal/trailing-icon-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 `.trailing.action{align-items:center;justify-content:center;padding:0 8px}.trailing.action md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:hover .trailing.icon{color:var(--_hover-trailing-icon-color)}:focus .trailing.icon{color:var(--_focus-trailing-icon-color)}:active .trailing.icon{color:var(--_pressed-trailing-icon-color)}.disabled .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .trailing.icon{color:var(--_selected-trailing-icon-color)}.selected:hover .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}.selected:active .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=trailing-icon-styles.css.map */
+`;
+//# sourceMappingURL=trailing-icon-styles.css.js.map

package/chips/internal/trailing-icon-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trailing-icon-styles.css.js","sourceRoot":"","sources":["trailing-icon-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`.trailing.action{align-items:center;justify-content:center;padding:0 8px}.trailing.action md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-outward-offset: -2px}.trailing.action md-ripple{border-radius:50%;height:calc(1.3333333333*var(--_icon-size));width:calc(1.3333333333*var(--_icon-size))}.has-trailing .primary.action{padding-inline-end:0}.trailing.icon{color:var(--_trailing-icon-color);height:var(--_icon-size);width:var(--_icon-size)}:hover .trailing.icon{color:var(--_hover-trailing-icon-color)}:focus .trailing.icon{color:var(--_focus-trailing-icon-color)}:active .trailing.icon{color:var(--_pressed-trailing-icon-color)}.disabled .trailing.icon{color:var(--_disabled-trailing-icon-color);opacity:var(--_disabled-trailing-icon-opacity)}.selected .trailing.icon{color:var(--_selected-trailing-icon-color)}.selected:hover .trailing.icon{color:var(--_selected-hover-trailing-icon-color)}.selected:focus .trailing.icon{color:var(--_selected-focus-trailing-icon-color)}.selected:active .trailing.icon{color:var(--_selected-pressed-trailing-icon-color)}/*# sourceMappingURL=trailing-icon-styles.css.map */\n`;\n "]}

package/chips/internal/trailing-icons.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+interface RemoveButtonProperties {
+    ariaLabel: string;
+    disabled: boolean;
+    tabbable?: boolean;
+}
+/** @protected */
+export declare function renderRemoveButton({ ariaLabel, disabled, tabbable }: RemoveButtonProperties): import("lit-html").TemplateResult<1>;
+export {};

package/chips/internal/trailing-icons.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, nothing } from 'lit';
+/** @protected */
+export function renderRemoveButton({ ariaLabel, disabled, tabbable = false }) {
+    return html `
+    <button class="trailing action"
+      aria-label=${ariaLabel}
+      ?disabled=${disabled}
+      tabindex=${!tabbable ? -1 : nothing}
+      @click=${handleRemoveClick}
+    >
+      <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
+      <md-ripple></md-ripple>
+      <svg class="trailing icon" viewBox="0 96 960 960">
+        <path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />
+      </svg>
+      <span class="touch"></span>
+    </button>
+  `;
+}
+function handleRemoveClick(event) {
+    if (this.disabled) {
+        return;
+    }
+    event.stopPropagation();
+    const preventDefault = !this.dispatchEvent(new Event('remove', { cancelable: true }));
+    if (preventDefault) {
+        return;
+    }
+    this.remove();
+}
+//# sourceMappingURL=trailing-icons.js.map

package/chips/internal/trailing-icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trailing-icons.js","sourceRoot":"","sources":["trailing-icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAUlC,iBAAiB;AACjB,MAAM,UAAU,kBAAkB,CAC9B,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAyB;IACjE,OAAO,IAAI,CAAA;;mBAEM,SAAS;kBACV,QAAQ;iBACT,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;eAC1B,iBAAiB;;;;;;;;;GAS7B,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAa,KAAY;IACjD,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;KACR;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,cAAc,GAChB,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACjE,IAAI,cAAc,EAAE;QAClB,OAAO;KACR;IAED,IAAI,CAAC,MAAM,EAAE,CAAC;AAChB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, nothing} from 'lit';\n\nimport {Chip} from './chip.js';\n\ninterface RemoveButtonProperties {\n  ariaLabel: string;\n  disabled: boolean;\n  tabbable?: boolean;\n}\n\n/** @protected */\nexport function renderRemoveButton(\n    {ariaLabel, disabled, tabbable = false}: RemoveButtonProperties) {\n  return html`\n    <button class=\"trailing action\"\n      aria-label=${ariaLabel}\n      ?disabled=${disabled}\n      tabindex=${!tabbable ? -1 : nothing}\n      @click=${handleRemoveClick}\n    >\n      <md-focus-ring part=\"trailing-focus-ring\"></md-focus-ring>\n      <md-ripple></md-ripple>\n      <svg class=\"trailing icon\" viewBox=\"0 96 960 960\">\n        <path d=\"m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z\" />\n      </svg>\n      <span class=\"touch\"></span>\n    </button>\n  `;\n}\n\nfunction handleRemoveClick(this: Chip, event: Event) {\n  if (this.disabled) {\n    return;\n  }\n\n  event.stopPropagation();\n  const preventDefault =\n      !this.dispatchEvent(new Event('remove', {cancelable: true}));\n  if (preventDefault) {\n    return;\n  }\n\n  this.remove();\n}\n"]}

package/chips/suggestion-chip.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { SuggestionChip } from './lib/suggestion-chip.js';
+import { SuggestionChip } from './internal/suggestion-chip.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-suggestion-chip': MdSuggestionChip;

package/chips/suggestion-chip.js

@@ -5,11 +5,11 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as elevatedStyles } from './lib/elevated-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
-import { SuggestionChip } from './lib/suggestion-chip.js';
-import { styles as forcedColorsStyles } from './lib/suggestion-forced-colors-styles.css.js';
-import { styles } from './lib/suggestion-styles.css.js';
+import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+import { SuggestionChip } from './internal/suggestion-chip.js';
+import { styles as forcedColorsStyles } from './internal/suggestion-forced-colors-styles.css.js';
+import { styles } from './internal/suggestion-styles.css.js';
 /**
  * TODO(b/243982145): add docs
  *

package/chips/suggestion-chip.js.map

@@ -1 +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,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAFpD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,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 elevatedStyles} from './lib/elevated-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\nimport {SuggestionChip} from './lib/suggestion-chip.js';\nimport {styles as forcedColorsStyles} from './lib/suggestion-forced-colors-styles.css.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 =\n      [sharedStyles, elevatedStyles, styles, forcedColorsStyles];\n}\n"]}
+{"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,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,mDAAmD,CAAC;AAC/F,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAClB,CAAC,YAAY,EAAE,cAAc,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC;AAFpD,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAG5B;SAHY,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 elevatedStyles} from './internal/elevated-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\nimport {SuggestionChip} from './internal/suggestion-chip.js';\nimport {styles as forcedColorsStyles} from './internal/suggestion-forced-colors-styles.css.js';\nimport {styles} from './internal/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 =\n      [sharedStyles, elevatedStyles, styles, forcedColorsStyles];\n}\n"]}

package/common.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fileoverview A convenience bundle import that includes common components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * It is smaller than `@material/web/all.js` and includes the most common
+ * components for starting a project. Import only the individual components used
+ * for production.
+ */
+import './button/filled-button.js';
+import './button/outlined-button.js';
+import './button/text-button.js';
+import './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './dialog/dialog.js';
+import './icon/icon.js';
+import './iconbutton/icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+import './textfield/outlined-text-field.js';
+export * from './button/filled-button.js';
+export * from './button/outlined-button.js';
+export * from './button/text-button.js';
+export * from './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './dialog/dialog.js';
+export * from './icon/icon.js';
+export * from './iconbutton/icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/outlined-text-field.js';

package/common.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * @fileoverview A convenience bundle import that includes common components.
+ *
+ * WARNING: This import is intended for prototyping and development builds only.
+ * It is smaller than `@material/web/all.js` and includes the most common
+ * components for starting a project. Import only the individual components used
+ * for production.
+ */
+// LINT.IfChange(imports)
+// go/keep-sorted start
+import './button/filled-button.js';
+import './button/outlined-button.js';
+import './button/text-button.js';
+import './checkbox/checkbox.js';
+import './chips/assist-chip.js';
+import './chips/filter-chip.js';
+import './dialog/dialog.js';
+import './icon/icon.js';
+import './iconbutton/icon-button.js';
+import './list/list.js';
+import './list/list-item.js';
+import './menu/menu.js';
+import './menu/menu-item.js';
+import './menu/sub-menu-item.js';
+import './progress/circular-progress.js';
+import './progress/linear-progress.js';
+import './radio/radio.js';
+import './select/outlined-select.js';
+import './select/select-option.js';
+import './tabs/tab.js';
+import './tabs/tabs.js';
+import './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:exports)
+// LINT.IfChange(exports)
+// go/keep-sorted start
+export * from './button/filled-button.js';
+export * from './button/outlined-button.js';
+export * from './button/text-button.js';
+export * from './checkbox/checkbox.js';
+export * from './chips/assist-chip.js';
+export * from './chips/filter-chip.js';
+export * from './dialog/dialog.js';
+export * from './icon/icon.js';
+export * from './iconbutton/icon-button.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './menu/sub-menu-item.js';
+export * from './progress/circular-progress.js';
+export * from './progress/linear-progress.js';
+export * from './radio/radio.js';
+export * from './select/outlined-select.js';
+export * from './select/select-option.js';
+export * from './tabs/tab.js';
+export * from './tabs/tabs.js';
+export * from './textfield/outlined-text-field.js';
+// go/keep-sorted end
+// LINT.ThenChange(:imports)
+//# sourceMappingURL=common.js.map

package/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","sourceRoot":"","sources":["common.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;GAOG;AAEH,yBAAyB;AACzB,uBAAuB;AACvB,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AACjC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,6BAA6B,CAAC;AACrC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,+BAA+B,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,qBAAqB;AACrB,4BAA4B;AAE5B,yBAAyB;AACzB,uBAAuB;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oCAAoC,CAAC;AACnD,qBAAqB;AACrB,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * @fileoverview A convenience bundle import that includes common components.\n *\n * WARNING: This import is intended for prototyping and development builds only.\n * It is smaller than `@material/web/all.js` and includes the most common\n * components for starting a project. Import only the individual components used\n * for production.\n */\n\n// LINT.IfChange(imports)\n// go/keep-sorted start\nimport './button/filled-button.js';\nimport './button/outlined-button.js';\nimport './button/text-button.js';\nimport './checkbox/checkbox.js';\nimport './chips/assist-chip.js';\nimport './chips/filter-chip.js';\nimport './dialog/dialog.js';\nimport './icon/icon.js';\nimport './iconbutton/icon-button.js';\nimport './list/list.js';\nimport './list/list-item.js';\nimport './menu/menu.js';\nimport './menu/menu-item.js';\nimport './menu/sub-menu-item.js';\nimport './progress/circular-progress.js';\nimport './progress/linear-progress.js';\nimport './radio/radio.js';\nimport './select/outlined-select.js';\nimport './select/select-option.js';\nimport './tabs/tab.js';\nimport './tabs/tabs.js';\nimport './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:exports)\n\n// LINT.IfChange(exports)\n// go/keep-sorted start\nexport * from './button/filled-button.js';\nexport * from './button/outlined-button.js';\nexport * from './button/text-button.js';\nexport * from './checkbox/checkbox.js';\nexport * from './chips/assist-chip.js';\nexport * from './chips/filter-chip.js';\nexport * from './dialog/dialog.js';\nexport * from './icon/icon.js';\nexport * from './iconbutton/icon-button.js';\nexport * from './list/list.js';\nexport * from './list/list-item.js';\nexport * from './menu/menu.js';\nexport * from './menu/menu-item.js';\nexport * from './menu/sub-menu-item.js';\nexport * from './progress/circular-progress.js';\nexport * from './progress/linear-progress.js';\nexport * from './radio/radio.js';\nexport * from './select/outlined-select.js';\nexport * from './select/select-option.js';\nexport * from './tabs/tab.js';\nexport * from './tabs/tabs.js';\nexport * from './textfield/outlined-text-field.js';\n// go/keep-sorted end\n// LINT.ThenChange(:imports)\n"]}

package/dialog/_dialog.scss

@@ -3,4 +3,4 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/dialog' show theme;
+@forward './internal/dialog' show theme;

package/dialog/dialog.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Dialog } from './lib/dialog.js';
+import { Dialog } from './internal/dialog.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-dialog': MdDialog;

package/dialog/dialog.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Dialog } from './lib/dialog.js';
-import { styles } from './lib/dialog-styles.css.js';
+import { Dialog } from './internal/dialog.js';
+import { styles } from './internal/dialog-styles.css.js';
 /**
  * @summary Dialogs can require an action, communicate information, or help
  * users accomplish a task. There are two types of dialogs: basic and

package/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAC,MAAM,EAAC,MAAM,4BAA4B,CAAC;AAQlD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 {Dialog} from './lib/dialog.js';\nimport {styles} from './lib/dialog-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n/**\n * @summary Dialogs can require an action, communicate information, or help\n * users accomplish a task. There are two types of dialogs: basic and\n * full-screen.\n *\n * @description\n * A dialog is a modal window that appears in front of app content to provide\n * critical information or ask for a decision. Dialogs disable all app\n * functionality when they appear, and remain on screen until confirmed,\n * dismissed, or a required action has been taken.\n *\n * Dialogs are purposefully interruptive, so they should be used sparingly.\n * A less disruptive alternative is to use a menu, which provides options\n * without interrupting a user’s experience.\n *\n * On mobile devices only, complex dialogs should be displayed fullscreen.\n *\n * __Example usages:__\n * - Common use cases for basic dialogs include alerts, quick selection, and\n * confirmation.\n * - More complex dialogs may contain actions that require a series of tasks\n * to complete. One example is creating a calendar entry with the event title,\n * date, location, and time.\n */\n@customElement('md-dialog')\nexport class MdDialog extends Dialog {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AAQvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAEpB;SAFY,QAAQ","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 {Dialog} from './internal/dialog.js';\nimport {styles} from './internal/dialog-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-dialog': MdDialog;\n  }\n}\n\n/**\n * @summary Dialogs can require an action, communicate information, or help\n * users accomplish a task. There are two types of dialogs: basic and\n * full-screen.\n *\n * @description\n * A dialog is a modal window that appears in front of app content to provide\n * critical information or ask for a decision. Dialogs disable all app\n * functionality when they appear, and remain on screen until confirmed,\n * dismissed, or a required action has been taken.\n *\n * Dialogs are purposefully interruptive, so they should be used sparingly.\n * A less disruptive alternative is to use a menu, which provides options\n * without interrupting a user’s experience.\n *\n * On mobile devices only, complex dialogs should be displayed fullscreen.\n *\n * __Example usages:__\n * - Common use cases for basic dialogs include alerts, quick selection, and\n * confirmation.\n * - More complex dialogs may contain actions that require a series of tasks\n * to complete. One example is creating a calendar entry with the event title,\n * date, location, and time.\n */\n@customElement('md-dialog')\nexport class MdDialog extends Dialog {\n  static override styles = [styles];\n}\n"]}

package/dialog/harness.d.ts

@@ -4,15 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Dialog } from './lib/dialog.js';
+import { Dialog } from './internal/dialog.js';
 /**
  * Test harness for dialog.
  */
 export declare class DialogHarness extends Harness<Dialog> {
-    getInteractiveElement(): Promise<HTMLDialogElement>;
-    isOpening(): boolean;
-    isClosing(): boolean;
-    transitionComplete(): Promise<void>;
-    isDialogVisible(): Promise<boolean>;
-    isScrimVisible(): Promise<boolean>;
+    getInteractiveElement(): Promise<HTMLElement>;
 }

package/dialog/harness.js

@@ -10,49 +10,8 @@ import { Harness } from '../testing/harness.js';
 export class DialogHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.dialog');
-    }
-    isOpening() {
-        // Test access to state
-        // tslint:disable-next-line:no-dict-access-on-struct-type
-        return Boolean(this.element.open && this.element['opening']);
-    }
-    isClosing() {
-        // Test access to state
-        // tslint:disable-next-line:no-dict-access-on-struct-type
-        return Boolean(!this.element.open && this.element['closing']);
-    }
-    async transitionComplete() {
-        await this.element.updateComplete;
-        let resolve = () => { };
-        const doneTransitioning = new Promise(resolver => {
-            resolve = () => {
-                resolver();
-            };
-        });
-        if (this.isOpening()) {
-            this.element.addEventListener('opened', resolve, { once: true });
-        }
-        else if (this.isClosing()) {
-            this.element.addEventListener('closed', resolve, { once: true });
-        }
-        else {
-            resolve();
-        }
-        await doneTransitioning;
-    }
-    async isDialogVisible() {
-        await this.transitionComplete();
-        const dialogElement = await this.getInteractiveElement();
-        const { display } = getComputedStyle(dialogElement);
-        return display !== 'none';
-    }
-    async isScrimVisible() {
-        await this.transitionComplete();
-        const dialogElement = await this.getInteractiveElement();
-        const { backgroundColor, display } = getComputedStyle(dialogElement, '::before');
-        const hiddenBg = `rgba(0, 0, 0, 0)`;
-        return backgroundColor !== hiddenBg && display !== 'none';
+        return this.element.querySelector('[autocomplete]') ??
+            this.element;
     }
 }
 //# sourceMappingURL=harness.js.map

package/dialog/harness.js.map

@@ -1 +1 @@
-{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAK9C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CACjC,CAAC;IACxB,CAAC;IAED,SAAS;QACP,uBAAuB;QACvB,yDAAyD;QACzD,OAAO,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,SAAS;QACP,uBAAuB;QACvB,yDAAyD;QACzD,OAAO,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACvB,MAAM,iBAAiB,GAAG,IAAI,OAAO,CAAO,QAAQ,CAAC,EAAE;YACrD,OAAO,GAAG,GAAG,EAAE;gBACb,QAAQ,EAAE,CAAC;YACb,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;SAChE;aAAM;YACL,OAAO,EAAE,CAAC;SACX;QACD,MAAM,iBAAiB,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,OAAO,EAAC,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,OAAO,KAAK,MAAM,CAAC;IAC5B,CAAC;IAED,KAAK,CAAC,cAAc;QAClB,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAChC,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACzD,MAAM,EAAC,eAAe,EAAE,OAAO,EAAC,GAC5B,gBAAgB,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,kBAAkB,CAAC;QACpC,OAAO,eAAe,KAAK,QAAQ,IAAI,OAAO,KAAK,MAAM,CAAC;IAC5D,CAAC;CACF","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 {Dialog} from './lib/dialog.js';\n\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.dialog') as\n        HTMLDialogElement;\n  }\n\n  isOpening() {\n    // Test access to state\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return Boolean(this.element.open && this.element['opening']);\n  }\n\n  isClosing() {\n    // Test access to state\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return Boolean(!this.element.open && this.element['closing']);\n  }\n\n  async transitionComplete() {\n    await this.element.updateComplete;\n    let resolve = () => {};\n    const doneTransitioning = new Promise<void>(resolver => {\n      resolve = () => {\n        resolver();\n      };\n    });\n    if (this.isOpening()) {\n      this.element.addEventListener('opened', resolve, {once: true});\n    } else if (this.isClosing()) {\n      this.element.addEventListener('closed', resolve, {once: true});\n    } else {\n      resolve();\n    }\n    await doneTransitioning;\n  }\n\n  async isDialogVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {display} = getComputedStyle(dialogElement);\n    return display !== 'none';\n  }\n\n  async isScrimVisible() {\n    await this.transitionComplete();\n    const dialogElement = await this.getInteractiveElement();\n    const {backgroundColor, display} =\n        getComputedStyle(dialogElement, '::before');\n    const hiddenBg = `rgba(0, 0, 0, 0)`;\n    return backgroundColor !== hiddenBg && display !== 'none';\n  }\n}\n"]}
+{"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,aAAc,SAAQ,OAAe;IACvC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAc,gBAAgB,CAAC;YAC5D,IAAI,CAAC,OAAO,CAAC;IACnB,CAAC;CACF","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 {Dialog} from './internal/dialog.js';\n\n/**\n * Test harness for dialog.\n */\nexport class DialogHarness extends Harness<Dialog> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.querySelector<HTMLElement>('[autocomplete]') ??\n        this.element;\n  }\n}\n"]}