@material/web 1.0.0-pre.5 → 1.0.0-pre.7

package/elevation/lib/_elevation.scss

@@ -9,17 +9,17 @@
 // go/keep-sorted start
 @use '../../sass/theme';
 @use '../../sass/var';
-@use './md-comp-elevation';
+@use '../../tokens';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(md-comp-elevation.values(), $tokens);
+  $tokens: theme.validate-theme(tokens.md-comp-elevation-values(), $tokens);
   $tokens: theme.create-theme-vars($tokens, 'elevation');
   @include theme.emit-theme-vars($tokens);
 }
 
 @mixin styles() {
-  $tokens: md-comp-elevation.values();
+  $tokens: tokens.md-comp-elevation-values();
   $tokens: theme.create-theme-vars($tokens, 'elevation');
 
   :host {
@@ -27,31 +27,28 @@
       --_#{$token}: #{$value};
     }
 
-    border-radius: inherit;
     display: flex;
     pointer-events: none;
-    position: relative;
-  }
-
-  :host(:not([surface])) .surface,
-  :host(:not([shadow])) .shadow {
-    display: none;
   }
 
-  .surface,
+  :host,
   .shadow,
   .shadow::before,
   .shadow::after {
     border-radius: inherit;
-    content: '';
     inset: 0;
     position: absolute;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
+  }
+
+  .shadow::before,
+  .shadow::after {
+    content: '';
     transition-property: box-shadow, opacity;
-    transition-duration: var(--_duration);
-    transition-timing-function: var(--_easing);
   }
 
-  // Key box shadows
+  // Key box shadow
   .shadow::before {
     // level0: box-shadow: 0px 0px 0px 0px;
     // level1: box-shadow: 0px 1px 2px 0px;
@@ -97,7 +94,7 @@
     opacity: 0.3;
   }
 
-  // Ambient box shadows
+  // Ambient box shadow
   .shadow::after {
     // level0: box-shadow: 0px 0px 0px 0px;
     // level1: box-shadow: 0px 1px 3px 1px;
@@ -162,41 +159,7 @@
     // Convert to px.
     $spread: calc(1px * ($level1to4-spread + $level5-spread));
 
-    opacity: 0.15;
     box-shadow: 0px $y $blur $spread var(--_shadow-color);
-  }
-
-  .surface {
-    // Surface tint opacities:
-    // level0: opacity: 0;
-    // level1: opacity: 0.05;
-    // level2: opacity: 0.08;
-    // level3: opacity: 0.11;
-    // level4: opacity: 0.12;
-    // level5: opacity: 0.14;
-
-    // Add a clamped value for each level to build the correct values.
-    // Sass will simplify nested calc()s.
-
-    // 0 + 0 = 0
-    // $level0-opacity: 0; // +0 is a no-op
-    // 0 + 0.05 = 0.05
-    $level1-opacity: clamp(0, var(--_level), 0.05);
-    // 0.05 + 0.03 = 0.08
-    $level2-opacity: clamp(0, var(--_level) - 1, 0.03);
-    // 0.08 + 0.03 = 0.11
-    $level3-opacity: clamp(0, var(--_level) - 2, 0.03);
-    // (can't simplify levels 2-3 since the value is < 1)
-    // 0.11 + 0.01 = 0.12
-    $level4-opacity: clamp(0, var(--_level) - 3, 0.01);
-    // 0.12 + 0.02 = 0.14
-    $level5-opacity: clamp(0, var(--_level) - 4, 0.02);
-    $opacity: calc(
-      $level1-opacity + $level2-opacity + $level3-opacity + $level4-opacity +
-        $level5-opacity
-    );
-
-    background: var(--_surface-tint);
-    opacity: $opacity;
+    opacity: 0.15;
   }
 }

package/elevation/lib/elevation-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;pointer-events:none;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:"";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.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{opacity:.15;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)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */
+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-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/lib/elevation-styles.css.js.map

@@ -1 +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{--_duration: var(--md-elevation-duration, 0s);--_easing: var(--md-elevation-easing, cubic-bezier(0.2, 0, 0, 1));--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));--_surface-tint: var(--md-elevation-surface-tint, var(--md-sys-color-primary, #6750a4));border-radius:inherit;display:flex;pointer-events:none;position:relative}:host(:not([surface])) .surface,:host(:not([shadow])) .shadow{display:none}.surface,.shadow,.shadow::before,.shadow::after{border-radius:inherit;content:\"\";inset:0;position:absolute;transition-property:box-shadow,opacity;transition-duration:var(--_duration);transition-timing-function:var(--_easing)}.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{opacity:.15;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)}.surface{background:var(--_surface-tint);opacity:calc(clamp(0,var(--_level),.05) + clamp(0,var(--_level) - 1,.03) + clamp(0,var(--_level) - 2,.03) + clamp(0,var(--_level) - 3,.01) + clamp(0,var(--_level) - 4,.02))}/*# sourceMappingURL=elevation-styles.css.map */\n`;\n "]}
+{"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-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/lib/elevation.d.ts

@@ -8,13 +8,5 @@ import { LitElement } from 'lit';
  * A component for elevation.
  */
 export declare class Elevation extends LitElement {
-    /**
-     * Whether or not the elevation level should display a shadow.
-     */
-    shadow: boolean;
-    /**
-     * Whether or not the elevation level should display a surface tint color.
-     */
-    surface: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/elevation/lib/elevation.js

@@ -3,37 +3,13 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
 /**
  * A component for elevation.
  */
 export class Elevation extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether or not the elevation level should display a shadow.
-         */
-        this.shadow = false;
-        /**
-         * Whether or not the elevation level should display a surface tint color.
-         */
-        this.surface = false;
-    }
     render() {
-        return html `
-       <span class="surface"></span>
-       <span class="shadow"></span>
-     `;
+        return html `<span class="shadow"></span>`;
     }
 }
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], Elevation.prototype, "shadow", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], Elevation.prototype, "surface", void 0);
 //# sourceMappingURL=elevation.js.map

package/elevation/lib/elevation.js.map

@@ -1 +1 @@
-{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAC,MAAM,KAAK,CAAC;AACrC,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACE;;WAEG;QACuC,WAAM,GAAG,KAAK,CAAC;QACzD;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;IAQ5D,CAAC;IANU,MAAM;QACb,OAAO,IAAI,CAAA;;;MAGT,CAAC;IACL,CAAC;CACF;AAZC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;yCAAgB;AAIzD;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;;0CAAiB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/**\n * A component for elevation.\n */\nexport class Elevation extends LitElement {\n  /**\n   * Whether or not the elevation level should display a shadow.\n   */\n  @property({type: Boolean, reflect: true}) shadow = false;\n  /**\n   * Whether or not the elevation level should display a surface tint color.\n   */\n  @property({type: Boolean, reflect: true}) surface = false;\n\n  override render() {\n    return html`\n       <span class=\"surface\"></span>\n       <span class=\"shadow\"></span>\n     `;\n  }\n}\n"]}
+{"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,MAAM;QACb,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 render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"]}

package/fab/_fab.scss

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

package/fab/branded-fab.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Fab, Variant } from './lib/fab.js';
+export { FabSize } from './lib/shared.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-branded-fab': MdBrandedFab;
+    }
+}
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small. Branded
+ * FABs are used to specifically call attention to branded logo icons.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdBrandedFab extends Fab {
+    /**
+     * Branded FABs have no variants
+     */
+    variant: Variant;
+    getRenderClasses(): {
+        primary: boolean;
+        secondary: boolean;
+        tertiary: boolean;
+        small: boolean;
+    };
+    static styles: import("lit").CSSResult[];
+}

package/fab/branded-fab.js

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+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';
+/**
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small. Branded
+ * FABs are used to specifically call attention to branded logo icons.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdBrandedFab = class MdBrandedFab extends Fab {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'primary': false,
+            'secondary': false,
+            'tertiary': false,
+            'small': false,
+        };
+    }
+};
+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

@@ -0,0 +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"]}

package/fab/fab.d.ts

@@ -3,21 +3,41 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import '../icon/icon.js';
-import { TemplateResult } from 'lit';
 import { Fab } from './lib/fab.js';
+export { Variant } from './lib/fab.js';
+export { FabSize } from './lib/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-fab': MdFab;
     }
 }
 /**
- * @soyCompatible
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
  * @final
  * @suppress {visibility}
  */
 export declare class MdFab extends Fab {
     static styles: import("lit").CSSResult[];
-    /** @soyTemplate */
-    protected renderIcon(icon: string): TemplateResult | string;
 }

package/fab/fab.js

@@ -4,24 +4,41 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { __decorate } from "tslib";
-import '../icon/icon.js';
-import { html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { Fab } from './lib/fab.js';
-import { styles as sharedStyles } from './lib/fab-shared-styles.css.js';
-import { styles as fabStyles } from './lib/fab-styles.css.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';
 /**
- * @soyCompatible
+ * @summary Floating action buttons (FABs) help people take primary actions.
+ * They’re used to represent the most important action on a screen, such as
+ * Create or Reply.
+ *
+ * @description
+ * __Emphasis:__ High emphasis – For the primary, most important, or most common
+ * action on a screen
+ *
+ * __Rationale:__ The FAB remains the default component for a screen’s primary
+ * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended
+ * FAB’s wider format and text label give it more visual prominence than a  FAB.
+ * It’s often used on larger screens where a FAB would seem too small.
+ *
+ * __Example usages:__
+ * - FAB
+ *   - Create
+ *   - Compose
+ * - Extended FAB
+ *   - Create
+ *   - Compose
+ *   - New Thread
+ *   - New File
+ *
  * @final
  * @suppress {visibility}
  */
 let MdFab = class MdFab extends Fab {
-    /** @soyTemplate */
-    renderIcon(icon) {
-        return icon ? html `<md-icon class="md3-fab__icon">${icon}</md-icon>` : '';
-    }
 };
-MdFab.styles = [sharedStyles, fabStyles];
+MdFab.styles = [sharedStyles, styles, forcedColors];
 MdFab = __decorate([
     customElement('md-fab')
 ], MdFab);

package/fab/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAC,IAAI,EAAiB,MAAM,KAAK,CAAC;AACzC,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAC,MAAM,cAAc,CAAC;AACjC,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAQ5D;;;;GAIG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,GAAG;IAG5B,mBAAmB;IACA,UAAU,CAAC,IAAY;QACxC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,kCAAkC,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5E,CAAC;;AALe,YAAM,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AADxC,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAOjB;SAPY,KAAK","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../icon/icon.js';\n\nimport {html, TemplateResult} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab} from './lib/fab.js';\nimport {styles as sharedStyles} from './lib/fab-shared-styles.css.js';\nimport {styles as fabStyles} from './lib/fab-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-fab': MdFab;\n  }\n}\n\n/**\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-fab')\nexport class MdFab extends Fab {\n  static override styles = [sharedStyles, fabStyles];\n\n  /** @soyTemplate */\n  protected override renderIcon(icon: string): TemplateResult|string {\n    return icon ? html`<md-icon class=\"md3-fab__icon\">${icon}</md-icon>` : '';\n  }\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,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"]}

package/fab/harness.d.ts

@@ -5,10 +5,9 @@
  */
 import { Harness } from '../testing/harness.js';
 import { Fab } from './lib/fab.js';
-import { FabExtended } from './lib/fab-extended.js';
 /**
  * Test harness for floating action buttons.
  */
-export declare class FabHarness extends Harness<Fab | FabExtended> {
+export declare class FabHarness extends Harness<Fab> {
     getInteractiveElement(): Promise<HTMLButtonElement>;
 }

package/fab/harness.js

@@ -10,7 +10,7 @@ import { Harness } from '../testing/harness.js';
 export class FabHarness extends Harness {
     async getInteractiveElement() {
         await this.element.updateComplete;
-        return this.element.renderRoot.querySelector('.md3-fab');
+        return this.element.renderRoot.querySelector('.fab');
     }
 }
 //# sourceMappingURL=harness.js.map

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;AAM9C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAwB;IAC7C,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAClC,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';\nimport {FabExtended} from './lib/fab-extended.js';\n\n\n/**\n * Test harness for floating action buttons.\n */\nexport class FabHarness extends Harness<Fab|FabExtended> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return this.element.renderRoot.querySelector('.md3-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 './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"]}

package/fab/lib/_fab-branded.scss

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $tokens: theme.validate-theme(tokens.md-comp-fab-branded-values(), $tokens);
+
+  @each $token, $value in $tokens {
+    --md-fab-branded-#{$token}: #{$value};
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-fab-branded-values();
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+  }
+}