@material/web 1.0.1 → 1.0.2-nightly.8eb1f30.0

package/labs/behaviors/validators/validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;;;;;GAUG;AACH,MAAM,OAAgB,SAAS;IAgB7B;;;;;OAKG;IACH,YAA6B,eAA4B;QAA5B,oBAAe,GAAf,eAAe,CAAa;QAfzD;;;WAGG;QACK,oBAAe,GAAuB;YAC5C,QAAQ,EAAE,EAAE;YACZ,iBAAiB,EAAE,EAAE;SACtB,CAAC;IAQ0D,CAAC;IAE7D;;;;;;;;;OASG;IACH,WAAW;QACT,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,eAAe,GACnB,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QACzD,IAAI,CAAC,eAAe,EAAE;YACpB,OAAO,IAAI,CAAC,eAAe,CAAC;SAC7B;QAED,MAAM,EAAC,QAAQ,EAAE,iBAAiB,EAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,IAAI,CAAC,eAAe,GAAG;YACrB,iBAAiB;YACjB,QAAQ,EAAE;gBACR,uEAAuE;gBACvE,kDAAkD;gBAClD,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,WAAW,EAAE,QAAQ,CAAC,WAAW;gBACjC,eAAe,EAAE,QAAQ,CAAC,eAAe;gBACzC,aAAa,EAAE,QAAQ,CAAC,aAAa;gBACrC,cAAc,EAAE,QAAQ,CAAC,cAAc;gBACvC,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,OAAO,EAAE,QAAQ,CAAC,OAAO;gBACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;gBAC3B,YAAY,EAAE,QAAQ,CAAC,YAAY;gBACnC,YAAY,EAAE,QAAQ,CAAC,YAAY;aACpC;SACF,CAAC;QAEF,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;CAkCF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * A class that computes and caches `ValidityStateFlags` for a component with\n * a given `State` interface.\n *\n * Cached performance before computing validity is important since constraint\n * validation must be checked frequently and synchronously when properties\n * change.\n *\n * @template State The expected interface of properties relevant to constraint\n *     validation.\n */\nexport abstract class Validator<State> {\n  /**\n   * The previous state, used to determine if state changed and validation needs\n   * to be re-computed.\n   */\n  private prevState?: State;\n\n  /**\n   * The current validity state and message. This is cached and returns if\n   * constraint validation state does not change.\n   */\n  private currentValidity: ValidityAndMessage = {\n    validity: {},\n    validationMessage: '',\n  };\n\n  /**\n   * Creates a new validator.\n   *\n   * @param getCurrentState A callback that returns the current state of\n   *     constraint validation-related properties.\n   */\n  constructor(private readonly getCurrentState: () => State) {}\n\n  /**\n   * Returns the current `ValidityStateFlags` and validation message for the\n   * validator.\n   *\n   * If the constraint validation state has not changed, this will return a\n   * cached result. This is important since `getValidity()` can be called\n   * frequently in response to synchronous property changes.\n   *\n   * @return The current validity and validation message.\n   */\n  getValidity(): ValidityAndMessage {\n    const state = this.getCurrentState();\n    const hasStateChanged =\n      !this.prevState || !this.equals(this.prevState, state);\n    if (!hasStateChanged) {\n      return this.currentValidity;\n    }\n\n    const {validity, validationMessage} = this.computeValidity(state);\n    this.prevState = this.copy(state);\n    this.currentValidity = {\n      validationMessage,\n      validity: {\n        // Change any `ValidityState` instances into `ValidityStateFlags` since\n        // `ValidityState` cannot be easily `{...spread}`.\n        badInput: validity.badInput,\n        customError: validity.customError,\n        patternMismatch: validity.patternMismatch,\n        rangeOverflow: validity.rangeOverflow,\n        rangeUnderflow: validity.rangeUnderflow,\n        stepMismatch: validity.stepMismatch,\n        tooLong: validity.tooLong,\n        tooShort: validity.tooShort,\n        typeMismatch: validity.typeMismatch,\n        valueMissing: validity.valueMissing,\n      },\n    };\n\n    return this.currentValidity;\n  }\n\n  /**\n   * Computes the `ValidityStateFlags` and validation message for a given set\n   * of constraint validation properties.\n   *\n   * Implementations can use platform elements like `<input>` and `<select>` to\n   * sync state and compute validation along with i18n'd messages. This function\n   * may be expensive, and is only called when state changes.\n   *\n   * @param state The new state of constraint validation properties.\n   * @return An object containing a `validity` property with\n   *     `ValidityStateFlags` and a `validationMessage` property.\n   */\n  protected abstract computeValidity(state: State): ValidityAndMessage;\n\n  /**\n   * Checks if two states are equal. This is used to check against cached state\n   * to see if validity needs to be re-computed.\n   *\n   * @param prev The previous state.\n   * @param next The next state.\n   * @return True if the states are equal, or false if not.\n   */\n  protected abstract equals(prev: State, next: State): boolean;\n\n  /**\n   * Creates a copy of a state. This is used to cache state and check if it\n   * changes.\n   *\n   * @param state The state to copy.\n   * @return A copy of the state.\n   */\n  protected abstract copy(state: State): State;\n}\n\n/**\n * An object containing `ValidityStateFlags` and a corresponding validation\n * message.\n */\nexport interface ValidityAndMessage {\n  /**\n   * Validity flags.\n   */\n  validity: ValidityStateFlags;\n\n  /**\n   * The validation message for the associated flags. It may not be an empty\n   * string if any of the validity flags are `true`.\n   */\n  validationMessage: string;\n}\n"]}

package/labs/card/_elevated-card.scss

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

package/labs/card/_filled-card.scss

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

package/labs/card/_outlined-card.scss

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

package/labs/card/elevated-card.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-elevated-card': MdElevatedCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdElevatedCard extends Card {
+    static styles: import("lit").CSSResult[];
+}

package/labs/card/elevated-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as elevatedStyles } from './internal/elevated-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdElevatedCard = class MdElevatedCard extends Card {
+};
+MdElevatedCard.styles = [sharedStyles, elevatedStyles];
+MdElevatedCard = __decorate([
+    customElement('md-elevated-card')
+], MdElevatedCard);
+//# sourceMappingURL=elevated-card.js.map

package/labs/card/elevated-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-card.js","sourceRoot":"","sources":["elevated-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,AAAjC,CAAkC;AAD7C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","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 {Card} from './internal/card.js';\nimport {styles as elevatedStyles} from './internal/elevated-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevated-card': MdElevatedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevated-card')\nexport class MdElevatedCard extends Card {\n  static override styles = [sharedStyles, elevatedStyles];\n}\n"]}

package/labs/card/filled-card.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-card': MdFilledCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledCard extends Card {
+    static styles: import("lit").CSSResult[];
+}

package/labs/card/filled-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as filledStyles } from './internal/filled-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdFilledCard = class MdFilledCard extends Card {
+};
+MdFilledCard.styles = [sharedStyles, filledStyles];
+MdFilledCard = __decorate([
+    customElement('md-filled-card')
+], MdFilledCard);
+//# sourceMappingURL=filled-card.js.map

package/labs/card/filled-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-card.js","sourceRoot":"","sources":["filled-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,IAAI;;AACpB,mBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,AAA/B,CAAgC;AAD3C,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAExB","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 {Card} from './internal/card.js';\nimport {styles as filledStyles} from './internal/filled-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-card': MdFilledCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-card')\nexport class MdFilledCard extends Card {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}

package/labs/card/internal/_elevated-card.scss

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevated-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Elevated card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevated-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevated-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-elevated-card-#{$token}, #{$value});
+    }
+  }
+}

package/labs/card/internal/_filled-card.scss

@@ -0,0 +1,35 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-filled-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Filled card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-filled-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-filled-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-filled-card-#{$token}, #{$value});
+    }
+  }
+}

package/labs/card/internal/_outlined-card.scss

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-outlined-card-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Outlined card `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-outlined-card-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-card-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-card-#{$token}, #{$value});
+    }
+  }
+
+  .container {
+    outline: var(--_outline-width) solid var(--_outline-color);
+  }
+}

package/labs/card/internal/_shared.scss

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../../elevation/elevation';
+// go/keep-sorted end
+
+@mixin styles() {
+  :host {
+    border-radius: var(--_container-shape);
+    display: flex;
+    padding: 16px;
+    position: relative;
+  }
+
+  // Separate element will be needed for disabled opacities (b/307361748)
+  .container {
+    background: var(--_container-color);
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+  }
+
+  md-elevation {
+    border-radius: inherit;
+
+    @include elevation.theme(
+      (
+        'level': var(--_container-elevation),
+        'shadow-color': var(--_container-shadow-color),
+      )
+    );
+  }
+
+  slot {
+    z-index: 0; // Place content above background elements
+  }
+}

package/labs/card/internal/card.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { LitElement } from 'lit';
+/**
+ * A card component.
+ */
+export declare class Card extends LitElement {
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/labs/card/internal/card.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../elevation/elevation.js';
+import { html, LitElement } from 'lit';
+/**
+ * A card component.
+ */
+export class Card extends LitElement {
+    render() {
+        return html `
+      <md-elevation part="elevation"></md-elevation>
+      <div class="container"></div>
+      <slot></slot>
+    `;
+    }
+}
+//# sourceMappingURL=card.js.map

package/labs/card/internal/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IACf,MAAM;QACvB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A card component.\n */\nexport class Card extends LitElement {\n  protected override render() {\n    return html`\n      <md-elevation part=\"elevation\"></md-elevation>\n      <div class=\"container\"></div>\n      <slot></slot>\n    `;\n  }\n}\n"]}

package/labs/card/internal/elevated-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-color: var(--md-elevated-card-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-card-container-elevation, 1);--_container-shadow-color: var(--md-elevated-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-card-container-shape, 12px)}/*# sourceMappingURL=elevated-styles.css.map */
+`;
+//# sourceMappingURL=elevated-styles.css.js.map

package/labs/card/internal/elevated-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevated-styles.css.js","sourceRoot":"","sources":["elevated-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-color: var(--md-elevated-card-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_container-elevation: var(--md-elevated-card-container-elevation, 1);--_container-shadow-color: var(--md-elevated-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-elevated-card-container-shape, 12px)}/*# sourceMappingURL=elevated-styles.css.map */\n`;\n "]}

package/labs/card/internal/elevated-styles.scss

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

package/labs/card/internal/filled-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-color: var(--md-filled-card-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-elevation: var(--md-filled-card-container-elevation, 0);--_container-shadow-color: var(--md-filled-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-card-container-shape, 12px)}/*# sourceMappingURL=filled-styles.css.map */
+`;
+//# sourceMappingURL=filled-styles.css.js.map

package/labs/card/internal/filled-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-styles.css.js","sourceRoot":"","sources":["filled-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-color: var(--md-filled-card-container-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_container-elevation: var(--md-filled-card-container-elevation, 0);--_container-shadow-color: var(--md-filled-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-filled-card-container-shape, 12px)}/*# sourceMappingURL=filled-styles.css.map */\n`;\n "]}

package/labs/card/internal/filled-styles.scss

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

package/labs/card/internal/outlined-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-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, 12px);--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.container{outline:var(--_outline-width) solid var(--_outline-color)}/*# sourceMappingURL=outlined-styles.css.map */
+`;
+//# sourceMappingURL=outlined-styles.css.js.map

package/labs/card/internal/outlined-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-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-color: var(--md-outlined-card-container-color, var(--md-sys-color-surface, #fef7ff));--_container-elevation: var(--md-outlined-card-container-elevation, 0);--_container-shadow-color: var(--md-outlined-card-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-outlined-card-container-shape, 12px);--_outline-color: var(--md-outlined-card-outline-color, var(--md-sys-color-outline-variant, #cac4d0));--_outline-width: var(--md-outlined-card-outline-width, 1px)}.container{outline:var(--_outline-width) solid var(--_outline-color)}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/labs/card/internal/outlined-styles.scss

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

package/labs/card/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-radius:var(--_container-shape);display:flex;padding:16px;position:relative}.container{background:var(--_container-color);border-radius:inherit;inset:0;position:absolute}md-elevation{border-radius:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}slot{z-index:0}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/labs/card/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-radius:var(--_container-shape);display:flex;padding:16px;position:relative}.container{background:var(--_container-color);border-radius:inherit;inset:0;position:absolute}md-elevation{border-radius:inherit;--md-elevation-level: var(--_container-elevation);--md-elevation-shadow-color: var(--_container-shadow-color)}slot{z-index:0}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/labs/card/internal/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;

package/labs/card/outlined-card.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Card } from './internal/card.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-card': MdOutlinedCard;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedCard extends Card {
+    static styles: import("lit").CSSResult[];
+}

package/labs/card/outlined-card.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Card } from './internal/card.js';
+import { styles as outlinedStyles } from './internal/outlined-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdOutlinedCard = class MdOutlinedCard extends Card {
+};
+MdOutlinedCard.styles = [sharedStyles, outlinedStyles];
+MdOutlinedCard = __decorate([
+    customElement('md-outlined-card')
+], MdOutlinedCard);
+//# sourceMappingURL=outlined-card.js.map

package/labs/card/outlined-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-card.js","sourceRoot":"","sources":["outlined-card.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;GAGG;AAEI,WAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,IAAI;;AACtB,qBAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,AAAjC,CAAkC;AAD7C,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B","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 {Card} from './internal/card.js';\nimport {styles as outlinedStyles} from './internal/outlined-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-card': MdOutlinedCard;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-card')\nexport class MdOutlinedCard extends Card {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/labs/item/internal/item.js

@@ -26,14 +26,14 @@ export class Item extends LitElement {
       <slot name="container"></slot>
       <slot class="non-text" name="start"></slot>
       <div class="text">
-        <slot name="overline"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot class="default-slot"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot name="headline"
-            @slotchange=${this.handleTextSlotChange}></slot>
-        <slot name="supporting-text"
-            @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          class="default-slot"
+          @slotchange=${this.handleTextSlotChange}></slot>
+        <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+        <slot
+          name="supporting-text"
+          @slotchange=${this.handleTextSlotChange}></slot>
       </div>
       <slot class="non-text" name="trailing-supporting-text"></slot>
       <slot class="non-text" name="end"></slot>

package/labs/item/internal/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QACE;;;;;;WAMG;QACuC,cAAS,GAAG,KAAK,CAAC;IAyC9D,CAAC;IArCU,MAAM;QACb,OAAO,IAAI,CAAA;;;;;0BAKW,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;0BAEzB,IAAI,CAAC,oBAAoB;;;;KAI9C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,4EAA4E;QAC5E,sEAAsE;QACtE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YACjC,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;gBACxB,gBAAgB,IAAI,CAAC,CAAC;aACvB;YAED,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACxB,WAAW,GAAG,IAAI,CAAC;gBACnB,MAAM;aACP;SACF;QAED,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;IAC/B,CAAC;CACF;AAzC2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAmB;AAEnB;IAAxC,QAAQ,CAAC,YAAY,CAAC;uCAAgD;AAyCzE,SAAS,cAAc,CAAC,IAAqB;IAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE;QACtD,0DAA0D;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;QACtD,oEAAoE;QACpE,kBAAkB;QAClB,MAAM,iBAAiB,GACnB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACtE,IAAI,SAAS,IAAI,iBAAiB,EAAE;YAClC,OAAO,IAAI,CAAC;SACb;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property, queryAll} from 'lit/decorators.js';\n\n/**\n * An item layout component.\n */\nexport class Item extends LitElement {\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({type: Boolean, reflect: true}) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  override render() {\n    return html`\n      <slot name=\"container\"></slot>\n      <slot class=\"non-text\" name=\"start\"></slot>\n      <div class=\"text\">\n        <slot name=\"overline\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot class=\"default-slot\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"headline\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"supporting-text\"\n            @slotchange=${this.handleTextSlotChange}></slot>\n      </div>\n      <slot class=\"non-text\" name=\"trailing-supporting-text\"></slot>\n      <slot class=\"non-text\" name=\"end\"></slot>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (slotHasContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n\nfunction slotHasContent(slot: HTMLSlotElement) {\n  for (const node of slot.assignedNodes({flatten: true})) {\n    // Assume there's content if there's an element slotted in\n    const isElement = node.nodeType === Node.ELEMENT_NODE;\n    // If there's only text nodes for the default slot, check if there's\n    // non-whitespace.\n    const isTextWithContent =\n        node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/);\n    if (isElement || isTextWithContent) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAErD;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QACE;;;;;;WAMG;QACuC,cAAS,GAAG,KAAK,CAAC;IAyC9D,CAAC;IArCU,MAAM;QACb,OAAO,IAAI,CAAA;;;;4CAI6B,IAAI,CAAC,oBAAoB;;;wBAG7C,IAAI,CAAC,oBAAoB;4CACL,IAAI,CAAC,oBAAoB;;;wBAG7C,IAAI,CAAC,oBAAoB;;;;KAI5C,CAAC;IACJ,CAAC;IAEO,oBAAoB;QAC1B,4EAA4E;QAC5E,sEAAsE;QACtE,IAAI,WAAW,GAAG,KAAK,CAAC;QACxB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YACjC,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE;gBACxB,gBAAgB,IAAI,CAAC,CAAC;aACvB;YAED,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACxB,WAAW,GAAG,IAAI,CAAC;gBACnB,MAAM;aACP;SACF;QAED,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;IAC/B,CAAC;CACF;AAzC2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAmB;AAEnB;IAAxC,QAAQ,CAAC,YAAY,CAAC;uCAAgD;AAyCzE,SAAS,cAAc,CAAC,IAAqB;IAC3C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,EAAE;QACtD,0DAA0D;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC;QACtD,oEAAoE;QACpE,kBAAkB;QAClB,MAAM,iBAAiB,GACrB,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACpE,IAAI,SAAS,IAAI,iBAAiB,EAAE;YAClC,OAAO,IAAI,CAAC;SACb;KACF;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property, queryAll} from 'lit/decorators.js';\n\n/**\n * An item layout component.\n */\nexport class Item extends LitElement {\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({type: Boolean, reflect: true}) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  override render() {\n    return html`\n      <slot name=\"container\"></slot>\n      <slot class=\"non-text\" name=\"start\"></slot>\n      <div class=\"text\">\n        <slot name=\"overline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          class=\"default-slot\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n        <slot name=\"headline\" @slotchange=${this.handleTextSlotChange}></slot>\n        <slot\n          name=\"supporting-text\"\n          @slotchange=${this.handleTextSlotChange}></slot>\n      </div>\n      <slot class=\"non-text\" name=\"trailing-supporting-text\"></slot>\n      <slot class=\"non-text\" name=\"end\"></slot>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (slotHasContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n\nfunction slotHasContent(slot: HTMLSlotElement) {\n  for (const node of slot.assignedNodes({flatten: true})) {\n    // Assume there's content if there's an element slotted in\n    const isElement = node.nodeType === Node.ELEMENT_NODE;\n    // If there's only text nodes for the default slot, check if there's\n    // non-whitespace.\n    const isTextWithContent =\n      node.nodeType === Node.TEXT_NODE && node.textContent?.match(/\\S/);\n    if (isElement || isTextWithContent) {\n      return true;\n    }\n  }\n\n  return false;\n}\n"]}

package/labs/navigationbar/internal/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n    CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {NavigationTabState} from '../../navigationtab/internal/state.js';\n\n/**\n * MDCNavigationTabInteractionEventDetail provides details for the interaction\n * event.\n */\nexport interface MDCNavigationTabInteractionEventDetail {\n  state: NavigationTabState;\n}\n\n/**\n * NavigationTabInteractionEvent is the custom event for the interaction event.\n */\nexport type NavigationTabInteractionEvent =\n  CustomEvent<MDCNavigationTabInteractionEventDetail>;\n"]}

package/labs/navigationbar/internal/navigation-bar.d.ts

@@ -9,6 +9,9 @@ import { NavigationTab } from '../../navigationtab/internal/navigation-tab.js';
 import { NavigationBarState } from './state.js';
 /**
  * TODO(b/265346501): add docs
+ *
+ * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
+ * Dispatched whenever the `activeIndex` changes. --bubbles --composed
  */
 export declare class NavigationBar extends LitElement implements NavigationBarState {
     activeIndex: number;

package/labs/navigationbar/internal/navigation-bar.js

@@ -11,6 +11,9 @@ import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
 import { isRtl } from '../../../internal/controller/is-rtl.js';
 /**
  * TODO(b/265346501): add docs
+ *
+ * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
+ * Dispatched whenever the `activeIndex` changes. --bubbles --composed
  */
 export class NavigationBar extends LitElement {
     constructor() {
@@ -22,23 +25,27 @@ export class NavigationBar extends LitElement {
     render() {
         // Needed for closure conformance
         const { ariaLabel } = this;
-        return html `<div class="md3-navigation-bar"
-            role="tablist"
-            aria-label=${ariaLabel || nothing}
-            @keydown="${this.handleKeydown}"
-            @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
-            @navigation-tab-rendered=${this.handleNavigationTabConnected}
-          ><md-elevation></md-elevation
-          ><div class="md3-navigation-bar__tabs-slot-container"
-        ><slot></slot></div></div>`;
+        return html `<div
+      class="md3-navigation-bar"
+      role="tablist"
+      aria-label=${ariaLabel || nothing}
+      @keydown="${this.handleKeydown}"
+      @navigation-tab-interaction="${this.handleNavigationTabInteraction}"
+      @navigation-tab-rendered=${this.handleNavigationTabConnected}
+      ><md-elevation></md-elevation
+      ><div class="md3-navigation-bar__tabs-slot-container"><slot></slot></div
+    ></div>`;
     }
     updated(changedProperties) {
         if (changedProperties.has('activeIndex')) {
             this.onActiveIndexChange(this.activeIndex);
             this.dispatchEvent(new CustomEvent('navigation-bar-activated', {
-                detail: { tab: this.tabs[this.activeIndex], activeIndex: this.activeIndex },
+                detail: {
+                    tab: this.tabs[this.activeIndex],
+                    activeIndex: this.activeIndex,
+                },
                 bubbles: true,
-                composed: true
+                composed: true,
             }));
         }
         if (changedProperties.has('hideInactiveLabels')) {