@material/web 1.0.0-pre.8 → 1.0.0

package/divider/internal/_divider.scss

@@ -0,0 +1,64 @@
+//
+// 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-divider-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-divider-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-divider-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-divider-#{$token}, #{$value});
+    }
+
+    box-sizing: border-box;
+    color: var(--_color);
+    display: flex;
+    height: var(--_thickness);
+    width: 100%;
+  }
+
+  :host([inset]),
+  :host([inset-start]) {
+    padding-inline-start: 16px;
+  }
+
+  :host([inset]),
+  :host([inset-end]) {
+    padding-inline-end: 16px;
+  }
+
+  :host::before {
+    background: currentColor;
+    content: '';
+    height: 100%;
+    width: 100%;
+  }
+
+  @media (forced-colors: active) {
+    :host::before {
+      background: CanvasText;
+    }
+  }
+}

package/docs/theming/README.md

@@ -0,0 +1,129 @@
+<!-- catalog-only-start --><!-- ---
+name: Material Theming
+title: Theming
+order: 1
+-----><!-- catalog-only-end -->
+
+# Theming
+
+<!-- go/mwc-theming -->
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2023-09-06' }
+tag: 'docType:concepts'
+*-->
+
+<!-- [TOC] -->
+
+[Material Design theming](https://m3.material.io/foundations/customization)<!-- {.external} -->
+creates unique branded products with familiar patterns and accessible
+interactions.
+
+![collage of views of a mobile UI that show a user's setting and preference for
+a green primary color flows through system UI
+harmoniously](images/theming.png "A user-generated color scheme can flow through apps that use a custom theme.")
+
+## Tokens
+
+Material is expressed in
+[design tokens](https://m3.material.io/foundations/design-tokens/overview)<!-- {.external} -->,
+which are the building blocks of all UI elements.
+
+Each component token maps to a system token, which has a concrete reference
+value.
+
+![A diagram showing the heirachy of component tokens to system tokens to
+reference
+tokens](images/token-types.png "The relationship between reference, system, and component tokens.")
+
+On the web, design tokens are
+[CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->
+and can be scoped with CSS selectors.
+
+```css
+.square-buttons {
+  /* Changes all <md-filled-button> instances matching the selector */
+  --md-filled-button-container-shape: 0px;
+}
+```
+
+### Reference
+
+Reference tokens hold concrete values, such as a hex color, pixel size, or font
+family name.
+
+#### Typeface
+
+[`--md-ref-typeface` tokens](typography.md#typeface) can be used to change font
+families and weights across all system and component tokens.
+
+```css
+:root {
+  --md-ref-typeface-brand: 'Open Sans';
+  --md-ref-typeface-plain: 'Open Sans';
+}
+```
+
+#### Palette
+
+*MWC does not currently support `--md-ref-palette` tokens.*
+
+### System
+
+System tokens define decisions and roles that give the design system its
+character, from color and typography, to elevation and shape.
+
+#### Color
+
+[`--md-sys-color` tokens](color.md#tokens) define dynamic color roles that map
+to components. See the [color guide](color.md) for more details.
+
+```css
+:root {
+  --md-sys-color-primary: red;
+  --md-sys-color-secondary: blue;
+}
+```
+
+#### Typography
+
+[`--md-sys-typography` tokens](typography.md#typescale) define typescale roles
+that map to components. See the [typography guide](typography.md) for more
+details.
+
+```css
+:root {
+  --md-sys-typography-body-medium-size: 1rem;
+  --md-sys-typography-body-medium-line-height: 1.5rem;
+}
+```
+
+#### Shape
+
+*MWC does not currently support `--md-sys-shape` tokens.*
+
+#### Motion
+
+*MWC does not currently support `--md-sys-motion` tokens.*
+
+### Component
+
+Component tokens are design attributes assigned to elements. They can be system
+tokens or concrete values.
+
+```css
+:root {
+  --md-filled-button-container-shape: 0px;
+}
+
+md-filled-button.error {
+  --md-filled-button-container-color: var(--md-sys-color-error);
+  --md-filled-button-label-text-color: var(--md-sys-color-on-error);
+}
+```
+
+Refer to each [components' documentation](../components/) for available tokens.
+
+> Note: unlike `--md-ref-*` and `--md-sys-*` tokens, which are prefixed with
+> `ref` and `sys`, component tokens are *not* prefixed with `comp`.

package/elevation/_elevation.scss

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

package/elevation/elevation.d.ts

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

package/elevation/elevation.js

@@ -5,18 +5,17 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Elevation } from './lib/elevation.js';
-import { styles } from './lib/elevation-styles.css.js';
+import { Elevation } from './internal/elevation.js';
+import { styles } from './internal/elevation-styles.css.js';
 /**
  * The `<md-elevation>` custom element with default styles.
  *
  * Elevation is the relative distance between two surfaces along the z-axis.
  */
-let MdElevation = class MdElevation extends Elevation {
+export let MdElevation = class MdElevation extends Elevation {
 };
 MdElevation.styles = [styles];
 MdElevation = __decorate([
     customElement('md-elevation')
 ], MdElevation);
-export { MdElevation };
 //# sourceMappingURL=elevation.js.map

package/elevation/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAQrD;;;;GAIG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB;SAFY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './lib/elevation.js';\nimport {styles} from './lib/elevation-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles = [styles];\n}\n"]}
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;;GAIG;AAEI,WAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './internal/elevation.js';\nimport {styles} from './internal/elevation-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles = [styles];\n}\n"]}

package/elevation/internal/_elevation.scss

@@ -0,0 +1,172 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-elevation-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-elevation-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-elevation-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-elevation-#{$token}, #{$value});
+    }
+
+    display: flex;
+    pointer-events: none;
+  }
+
+  :host,
+  .shadow,
+  .shadow::before,
+  .shadow::after {
+    border-radius: inherit;
+    inset: 0;
+    position: absolute;
+    transition-duration: inherit;
+    transition-property: inherit;
+    transition-timing-function: inherit;
+  }
+
+  .shadow::before,
+  .shadow::after {
+    content: '';
+    transition-property: box-shadow, opacity;
+  }
+
+  // Key box shadow
+  .shadow::before {
+    // level0: box-shadow: 0px 0px 0px 0px;
+    // level1: box-shadow: 0px 1px 2px 0px;
+    // level2: box-shadow: 0px 1px 2px 0px;
+    // level3: box-shadow: 0px 1px 3px 0px;
+    // level4: box-shadow: 0px 2px 3px 0px;
+    // level5: box-shadow: 0px 4px 4px 0px;
+
+    // Add a clamped value for each level to build the correct values.
+    // Sass will simplify nested calc()s.
+
+    // 0 + 0 = 0
+    // $level0-y: 0; // +0 is a no-op
+    // 0 + 1 = 1
+    $level1-y: clamp(0, var(--_level), 1);
+    // 1 + 0 = 1
+    // $level2-y: 0; // +0 is a no-op
+    // 1 + 0 = 1
+    // $level3-y: 0; // +0 is a no-op
+    // 1 + 1 = 2
+    $level4-y: clamp(0, var(--_level) - 3, 1);
+    // 2 + 2 = 4
+    $level5-y: calc(2 * clamp(0, var(--_level) - 4, 1));
+    // Convert to px.
+    $y: calc(1px * ($level1-y + $level4-y + $level5-y));
+
+    // 0 + 0 = 0
+    // $level0-blur: 0; // +0 is a no-op
+    // 0 + 2 = 2
+    $level1-blur: calc(2 * clamp(0, var(--_level), 1));
+    // 2 + 0 = 2
+    // $level2-blur: 0; // +0 is a no-op
+    // 2 + 1 = 3
+    $level3-blur: clamp(0, var(--_level) - 2, 1);
+    // 3 + 0 = 3
+    // $level4-blur: 0; // +0 is a no-op
+    // 3 + 1 = 4
+    $level5-blur: clamp(0, var(--_level) - 4, 1);
+    // Convert to px.
+    $blur: calc(1px * ($level1-blur + $level3-blur + $level5-blur));
+
+    box-shadow: 0px $y $blur 0px var(--_shadow-color);
+    opacity: 0.3;
+  }
+
+  // Ambient box shadow
+  .shadow::after {
+    // level0: box-shadow: 0px 0px 0px 0px;
+    // level1: box-shadow: 0px 1px 3px 1px;
+    // level2: box-shadow: 0px 2px 6px 2px;
+    // level3: box-shadow: 0px 4px 8px 3px;
+    // level4: box-shadow: 0px 6px 10px 4px;
+    // level5: box-shadow: 0px 8px 12px 6px;
+
+    // Add a clamped value for each level to build the correct values.
+    // Sass will simplify nested calc()s.
+
+    // 0 + 0 = 0
+    // $level0-y: 0; // +0 is a no-op
+    // 0 + 1 = 1
+    $level1-y: clamp(0, var(--_level), 1);
+    // 1 + 1 = 2
+    $level2-y: clamp(0, var(--_level) - 1, 1);
+    // 2 + 2 = 4
+    // $level3-y: 2 * clamp(0, var(--_level) - 2, 1);
+    // 4 + 2 = 6
+    // $level4-y: 2 * clamp(0, var(--_level) - 3, 1);
+    // 6 + 2 = 8
+    // $level5-y: 2 * clamp(0, var(--_level) - 4, 1);
+    // Levels 3-5 can be simplified by changing the max clamp value.
+    $level3to5-y: calc(2 * clamp(0, var(--_level) - 2, 3));
+    // Convert to px.
+    $y: calc(1px * ($level1-y + $level2-y + $level3to5-y));
+
+    // 0 + 0 = 0
+    // $level0-blur: 0; // +0 is a no-op
+    // 0 + 3 = 3
+    // $level1-blur: 3 * clamp(0, var(--_level), 1);
+    // 3 + 3 = 6
+    // $level2-blur: 3 * clamp(0, var(--_level) - 1, 1);
+    // Levels 1-2 can be simplified by changing the max clamp value.
+    $level1to2-blur: calc(3 * clamp(0, var(--_level), 2));
+    // 6 + 2 = 8
+    // $level3-blur: 2 * clamp(0, var(--_level) - 2, 1);
+    // 8 + 2 = 10
+    // $level4-blur: 2 * clamp(0, var(--_level) - 3, 1);
+    // 10 + 2 = 12
+    // $level5-blur: 2 * clamp(0, var(--_level) - 4, 1);
+    // Levels 3-5 can be simplified by changing the max clamp value.
+    $level3to5-blur: calc(2 * clamp(0, var(--_level) - 2, 3));
+    // Convert to px.
+    $blur: calc(1px * ($level1to2-blur + $level3to5-blur));
+
+    // 0 + 0 = 0
+    // $level0-spread: 0; // +0 is a no-op
+    // 0 + 1 = 1
+    // $level1-spread: clamp(0, var(--_level), 1);
+    // 1 + 1 = 2
+    // $level2-spread: clamp(0, var(--_level) - 1, 1);
+    // 2 + 1 = 3
+    // $level3-spread: clamp(0, var(--_level) - 2, 1);
+    // 3 + 1 = 4
+    // $level4-spread: clamp(0, var(--_level) - 3, 1);
+    // 4 + 2 = 6
+    // Levels 1-4 can be simplified by changing the max clamp value
+    $level1to4-spread: clamp(0, var(--_level), 4);
+    $level5-spread: calc(2 * clamp(0, var(--_level) - 4, 1));
+    // Convert to px.
+    $spread: calc(1px * ($level1to4-spread + $level5-spread));
+
+    box-shadow: 0px $y $blur $spread var(--_shadow-color);
+    opacity: 0.15;
+  }
+}

package/elevation/internal/elevation-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{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */
+`;
+//# sourceMappingURL=elevation-styles.css.js.map

package/elevation/internal/elevation-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-styles.css.js","sourceRoot":"","sources":["elevation-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{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}.shadow::before,.shadow::after{content:\"\";transition-property:box-shadow,opacity}.shadow::before{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 3,1) + 2*clamp(0,var(--_level) - 4,1))) calc(1px*(2*clamp(0,var(--_level),1) + clamp(0,var(--_level) - 2,1) + clamp(0,var(--_level) - 4,1))) 0px var(--_shadow-color);opacity:.3}.shadow::after{box-shadow:0px calc(1px*(clamp(0,var(--_level),1) + clamp(0,var(--_level) - 1,1) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(3*clamp(0,var(--_level),2) + 2*clamp(0,var(--_level) - 2,3))) calc(1px*(clamp(0,var(--_level),4) + 2*clamp(0,var(--_level) - 4,1))) var(--_shadow-color);opacity:.15}/*# sourceMappingURL=elevation-styles.css.map */\n`;\n "]}

package/elevation/internal/elevation.d.ts

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

package/elevation/internal/elevation.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html, LitElement } from 'lit';
+/**
+ * A component for elevation.
+ */
+export class Elevation extends LitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
+    }
+    render() {
+        return html `<span class="shadow"></span>`;
+    }
+}
+//# sourceMappingURL=elevation.js.map

package/elevation/internal/elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAC9B,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wEAAwE;QACxE,4BAA4B;QAC5B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A component for elevation.\n */\nexport class Elevation extends LitElement {\n  override connectedCallback() {\n    super.connectedCallback();\n    // Needed for VoiceOver, which will create a \"group\" if the element is a\n    // sibling to other content.\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"]}

package/fab/_fab.scss

@@ -3,5 +3,5 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-@forward './lib/fab-branded' as branded-* show branded-theme;
-@forward './lib/fab' show theme;
+@forward './internal/fab-branded' as branded-* show branded-theme;
+@forward './internal/fab' show theme;

package/fab/branded-fab.d.ts

@@ -3,8 +3,8 @@
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Fab, Variant } from './lib/fab.js';
-export { FabSize } from './lib/shared.js';
+import { Fab, FabVariant } from './internal/fab.js';
+export { FabSize } from './internal/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-branded-fab': MdBrandedFab;
@@ -42,7 +42,7 @@ export declare class MdBrandedFab extends Fab {
     /**
      * Branded FABs have no variants
      */
-    variant: Variant;
+    variant: FabVariant;
     getRenderClasses(): {
         primary: boolean;
         secondary: boolean;

package/fab/branded-fab.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Fab } from './lib/fab.js';
-import { styles } from './lib/fab-branded-styles.css.js';
-import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-branded-styles.css.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Floating action buttons (FABs) help people take primary actions.
  * They’re used to represent the most important action on a screen, such as
@@ -37,7 +37,7 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdBrandedFab = class MdBrandedFab extends Fab {
+export let MdBrandedFab = class MdBrandedFab extends Fab {
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),
@@ -52,5 +52,4 @@ MdBrandedFab.styles = [sharedStyles, styles, forcedColors];
 MdBrandedFab = __decorate([
     customElement('md-branded-fab')
 ], MdBrandedFab);
-export { MdBrandedFab };
 //# sourceMappingURL=branded-fab.js.map

package/fab/branded-fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAU,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,iCAAiC,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAUlE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAClB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAhB9B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAiBxB;SAjBY,YAAY","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 {Fab, Variant} from './lib/fab.js';\nimport {styles} from './lib/fab-branded-styles.css.js';\nimport {styles as forcedColors} from './lib/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {FabSize} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: Variant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles =\n      [sharedStyles, styles, forcedColors];\n}\n"]}
+{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAa,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAUvE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,AAAvC,CAAwC;AAfnD,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgBxB","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 {Fab, FabVariant} from './internal/fab.js';\nimport {styles} from './internal/fab-branded-styles.css.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: FabVariant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/fab.d.ts

@@ -3,9 +3,9 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Fab } from './lib/fab.js';
-export { Variant } from './lib/fab.js';
-export { FabSize } from './lib/shared.js';
+import { Fab } from './internal/fab.js';
+export { FabVariant } from './internal/fab.js';
+export { FabSize } from './internal/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-fab': MdFab;

package/fab/fab.js

@@ -5,10 +5,10 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { Fab } from './lib/fab.js';
-import { styles } from './lib/fab-styles.css.js';
-import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { Fab } from './internal/fab.js';
+import { styles } from './internal/fab-styles.css.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * @summary Floating action buttons (FABs) help people take primary actions.
  * They’re used to represent the most important action on a screen, such as
@@ -36,11 +36,10 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
  * @final
  * @suppress {visibility}
  */
-let MdFab = class MdFab extends Fab {
+export let MdFab = class MdFab extends Fab {
 };
 MdFab.styles = [sharedStyles, styles, forcedColors];
 MdFab = __decorate([
     customElement('md-fab')
 ], MdFab);
-export { MdFab };
 //# sourceMappingURL=fab.js.map

package/fab/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,OAAO,EAAC,MAAM,EAAC,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAWlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAClB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAF9B,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAGjB;SAHY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './lib/fab.js';\nimport {styles} from './lib/fab-styles.css.js';\nimport {styles as forcedColors} from './lib/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\nexport {Variant} from './lib/fab.js';\nexport {FabSize} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles =\n      [sharedStyles, styles, forcedColors];\n}\n"]}
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAWvE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,WAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;;AACZ,YAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,AAAvC,CAAwC;AADnD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAEjB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './internal/fab.js';\nimport {styles} from './internal/fab-styles.css.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.css.js';\nimport {styles as sharedStyles} from './internal/shared-styles.css.js';\n\nexport {FabVariant} from './internal/fab.js';\nexport {FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles = [sharedStyles, styles, forcedColors];\n}\n"]}

package/fab/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Fab } from './lib/fab.js';
+import { Fab } from './internal/fab.js';
 /**
  * Test harness for floating action buttons.
  */

package/fab/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;AAI9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAC9B,CAAC;IACxB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './lib/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as\n        HTMLButtonElement;\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,UAAW,SAAQ,OAAY;IACjC,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAC9B,CAAC;IACxB,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Fab} from './internal/fab.js';\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.fab') as\n        HTMLButtonElement;\n  }\n}\n"]}