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

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};
+    }
+  }
+}

package/fab/lib/_fab.scss

@@ -3,28 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+@use '../../ripple/ripple';
 @use '../../sass/shape';
 @use '../../sass/theme';
 @use '../../tokens';
-@use './shared';
 // go/keep-sorted end
 
 @mixin theme($tokens) {
-  $tokens: theme.validate-theme(tokens.md-comp-fab-surface-values(), $tokens);
-  $tokens: theme.create-theme-vars($tokens, 'fab');
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+  $tokens: theme.validate-theme(tokens.md-comp-fab-values(), $tokens);
 
-  @include theme.emit-theme-vars($tokens);
+  @each $token, $value in $tokens {
+    --md-fab-#{$token}: #{$value};
+  }
 }
 
 @mixin styles() {
-  $tokens: tokens.md-comp-fab-surface-values();
-  $tokens: theme.create-theme-vars($tokens, 'fab');
-  $tokens: shape.resolve-tokens($tokens, 'container-shape');
+  $tokens: tokens.md-comp-fab-values();
 
   :host {
     @each $token, $value in $tokens {
@@ -32,12 +31,141 @@
     }
   }
 
-  .md3-fab {
-    width: var(--_container-width);
-    height: var(--_container-height);
+  .fab {
+    @include color(
+      (
+        'focus-icon-color': var(--_focus-icon-color),
+        'hover-icon-color': var(--_hover-icon-color),
+        'icon-color': var(--_icon-color),
+        'pressed-icon-color': var(--_pressed-icon-color),
+      )
+    );
+
+    &.primary {
+      @include color(
+        (
+          'container-color': var(--_primary-container-color),
+          'focus-icon-color': var(--_primary-focus-icon-color),
+          'focus-state-layer-color': var(--_primary-focus-state-layer-color),
+          'hover-icon-color': var(--_primary-hover-icon-color),
+          'hover-state-layer-color': var(--_primary-hover-state-layer-color),
+          'icon-color': var(--_primary-icon-color),
+          'pressed-icon-color': var(--_primary-pressed-icon-color),
+          'pressed-state-layer-color': var(--_primary-pressed-state-layer-color),
+          'label-text-color': var(--_primary-label-text-color),
+          'hover-label-text-color': var(--_primary-hover-label-text-color),
+          'focus-label-text-color': var(--_primary-focus-label-text-color),
+          'pressed-label-text-color': var(--_primary-pressed-label-text-color),
+        )
+      );
+    }
+
+    &.secondary {
+      @include color(
+        (
+          'container-color': var(--_secondary-container-color),
+          'focus-icon-color': var(--_secondary-focus-icon-color),
+          'focus-state-layer-color': var(--_secondary-focus-state-layer-color),
+          'hover-icon-color': var(--_secondary-hover-icon-color),
+          'hover-state-layer-color': var(--_secondary-hover-state-layer-color),
+          'icon-color': var(--_secondary-icon-color),
+          'pressed-icon-color': var(--_secondary-pressed-icon-color),
+          'pressed-state-layer-color':
+            var(--_secondary-pressed-state-layer-color),
+          'label-text-color': var(--_secondary-label-text-color),
+          'hover-label-text-color': var(--_secondary-hover-label-text-color),
+          'focus-label-text-color': var(--_secondary-focus-label-text-color),
+          'pressed-label-text-color': var(--_secondary-pressed-label-text-color),
+        )
+      );
+    }
+
+    &.tertiary {
+      @include color(
+        (
+          'container-color': var(--_tertiary-container-color),
+          'focus-icon-color': var(--_tertiary-focus-icon-color),
+          'focus-state-layer-color': var(--_tertiary-focus-state-layer-color),
+          'hover-icon-color': var(--_tertiary-hover-icon-color),
+          'hover-state-layer-color': var(--_tertiary-hover-state-layer-color),
+          'icon-color': var(--_tertiary-icon-color),
+          'pressed-icon-color': var(--_tertiary-pressed-icon-color),
+          'pressed-state-layer-color':
+            var(--_tertiary-pressed-state-layer-color),
+          'label-text-color': var(--_tertiary-label-text-color),
+          'hover-label-text-color': var(--_tertiary-hover-label-text-color),
+          'focus-label-text-color': var(--_tertiary-focus-label-text-color),
+          'pressed-label-text-color': var(--_tertiary-pressed-label-text-color),
+        )
+      );
+    }
+  }
+
+  .fab.small {
+    width: var(--_small-container-width);
+    height: var(--_small-container-height);
+
+    .icon ::slotted(*) {
+      width: var(--_small-icon-size);
+      height: var(--_small-icon-size);
+      font-size: var(--_small-icon-size);
+    }
+
+    &,
+    .ripple {
+      border-start-start-radius: var(--_small-container-shape-start-start);
+      border-start-end-radius: var(--_small-container-shape-start-end);
+      border-end-start-radius: var(--_small-container-shape-end-start);
+      border-end-end-radius: var(--_small-container-shape-end-end);
+      @include focus-ring.theme(
+        (
+          'shape': shape.corners-to-shape-token('--_small-container-shape'),
+        )
+      );
+    }
   }
+}
 
-  .md3-fab--regular {
-    padding: 0;
+@mixin color($colors) {
+  background-color: map.get($colors, 'container-color');
+
+  @include ripple.theme(
+    (
+      hover-color: map.get($colors, hover-state-layer-color),
+      focus-color: map.get($colors, focus-state-layer-color),
+      pressed-color: map.get($colors, pressed-state-layer-color),
+    )
+  );
+
+  .icon ::slotted(*) {
+    color: map.get($colors, icon-color);
+  }
+
+  &:focus {
+    color: map.get($colors, focus-icon-color);
+  }
+
+  &:hover {
+    color: map.get($colors, hover-icon-color);
+  }
+
+  &:active {
+    color: map.get($colors, pressed-icon-color);
+  }
+
+  .label {
+    color: map.get($colors, label-text-color);
+
+    .fab:hover & {
+      color: map.get($colors, hover-label-text-color);
+    }
+
+    .fab:focus & {
+      color: map.get($colors, focus-label-text-color);
+    }
+
+    .fab:active & {
+      color: map.get($colors, pressed-label-text-color);
+    }
   }
 }