@material/web 1.0.0-pre.12 → 1.0.0-pre.14

package/fab/internal/_shared.scss

@@ -0,0 +1,227 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../elevation/elevation';
+@use '../../focus/focus-ring';
+@use '../../ripple/ripple';
+@use '../../tokens';
+@use './fab';
+// go/keep-sorted end
+
+$_md-sys-motion: tokens.md-sys-motion-values();
+
+@mixin styles() {
+  :host {
+    @include ripple.theme(
+      (
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+
+    display: inline-flex;
+  }
+
+  .fab,
+  .icon,
+  .icon ::slotted(*) {
+    display: flex;
+  }
+
+  .fab {
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    padding: 0;
+    position: relative;
+    height: var(--_container-height);
+    transition-property: background-color;
+    border-width: 0px;
+    outline: none;
+    // Required for elevation and ripple to stay below content
+    z-index: 0;
+
+    &.extended {
+      width: inherit;
+      box-sizing: border-box;
+      padding-inline-start: 16px;
+      padding-inline-end: 20px;
+    }
+
+    &:not(.extended) {
+      width: var(--_container-width);
+    }
+
+    &.large {
+      width: var(--_large-container-width);
+      height: var(--_large-container-height);
+
+      .icon ::slotted(*) {
+        width: var(--_large-icon-size);
+        height: var(--_large-icon-size);
+        font-size: var(--_large-icon-size);
+      }
+
+      &,
+      .ripple {
+        border-start-start-radius: var(--_large-container-shape-start-start);
+        border-start-end-radius: var(--_large-container-shape-start-end);
+        border-end-start-radius: var(--_large-container-shape-end-start);
+        border-end-end-radius: var(--_large-container-shape-end-end);
+      }
+
+      md-focus-ring {
+        @include focus-ring.theme(
+          (
+            'shape-start-start': var(--_large-container-shape-start-start),
+            'shape-start-end': var(--_large-container-shape-start-end),
+            'shape-end-end': var(--_large-container-shape-end-end),
+            'shape-end-start': var(--_large-container-shape-end-start),
+          )
+        );
+      }
+    }
+
+    @include _elevation(
+      (
+        'default': var(--_container-elevation),
+        'focus': var(--_focus-container-elevation),
+        'hover': var(--_hover-container-elevation),
+        'pressed': var(--_pressed-container-elevation),
+      ),
+      var(--_container-shadow-color)
+    );
+
+    &.lowered {
+      background-color: var(--_lowered-container-color);
+
+      @include _elevation(
+        (
+          'default': var(--_lowered-container-elevation),
+          'focus': var(--_lowered-focus-container-elevation),
+          'hover': var(--_lowered-hover-container-elevation),
+          'pressed': var(--_lowered-pressed-container-elevation),
+        )
+      );
+    }
+
+    @include fab.color(
+      (
+        'container-color': var(--_container-color),
+        'hover-state-layer-color': var(--_hover-state-layer-color),
+        'pressed-state-layer-color': var(--_pressed-state-layer-color),
+        'label-text-color': var(--_label-text-color),
+        'hover-label-text-color': var(--_hover-label-text-color),
+        'focus-label-text-color': var(--_focus-label-text-color),
+        'pressed-label-text-color': var(--_pressed-label-text-color),
+      )
+    );
+  }
+
+  .label {
+    padding-inline-start: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: var(--_label-text-type);
+  }
+
+  .ripple {
+    overflow: hidden;
+  }
+
+  .ripple,
+  md-elevation {
+    // puts both behind content
+    z-index: -1;
+  }
+
+  .touch-target {
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 50%;
+    width: 48px;
+    transform: translate(-50%, -50%);
+  }
+
+  md-elevation,
+  .fab {
+    // TODO: replace duration with animation tokens
+    transition-duration: 280ms;
+    transition-timing-function: map.get($_md-sys-motion, 'easing-emphasized');
+  }
+
+  .fab,
+  .ripple {
+    border-start-start-radius: var(--_container-shape-start-start);
+    border-start-end-radius: var(--_container-shape-start-end);
+    border-end-start-radius: var(--_container-shape-end-start);
+    border-end-end-radius: var(--_container-shape-end-end);
+  }
+
+  md-focus-ring {
+    @include focus-ring.theme(
+      (
+        'shape-start-start': var(--_container-shape-start-start),
+        'shape-start-end': var(--_container-shape-start-end),
+        'shape-end-end': var(--_container-shape-end-end),
+        'shape-end-start': var(--_container-shape-end-start),
+      )
+    );
+  }
+
+  .icon ::slotted(*) {
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    font-size: var(--_icon-size);
+  }
+}
+
+@mixin _elevation($states, $shadow-color: null) {
+  @include elevation.theme(
+    (
+      'level': map.get($states, 'default'),
+    )
+  );
+
+  @if $shadow-color {
+    @include elevation.theme(
+      (
+        'shadow-color': $shadow-color,
+      )
+    );
+  }
+
+  // apply elevation in order of focused, hovered, pressed, disabled
+  // this ensures a button will have hover elevation after being focused
+  &:focus {
+    @include elevation.theme(
+      (
+        'level': map.get($states, 'focus'),
+      )
+    );
+  }
+
+  &:hover {
+    @include elevation.theme(
+      (
+        'level': map.get($states, 'hover'),
+      )
+    );
+  }
+
+  &:active {
+    @include elevation.theme(
+      (
+        'level': map.get($states, 'pressed'),
+      )
+    );
+  }
+}

package/fab/internal/fab-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-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab:not(.hasIcon){padding-inline-start:20px}.fab:not(.hasIcon) .icon{display:none}.fab:not(.hasIcon) .label{padding-inline-start:0}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .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)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */
+`;
+//# sourceMappingURL=fab-styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-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-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab:not(.hasIcon){padding-inline-start:20px}.fab:not(.hasIcon) .icon{display:none}.fab:not(.hasIcon) .label{padding-inline-start:0}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .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)}.fab.small md-focus-ring{--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */\n`;\n "]}

package/fab/internal/fab.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SharedFab } from './shared.js';
+/**
+ * The variants available to non-branded FABs.
+ */
+export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';
+export declare class Fab extends SharedFab {
+    /**
+     * The FAB color variant to render.
+     */
+    variant: FabVariant;
+    getRenderClasses(): {
+        primary: boolean;
+        secondary: boolean;
+        tertiary: boolean;
+        lowered: boolean;
+        small: boolean;
+        large: boolean;
+        extended: boolean;
+        hasIcon: boolean;
+    };
+}

package/fab/internal/fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAOtC,gEAAgE;AAChE,MAAM,OAAO,GAAI,SAAQ,SAAS;IAAlC;;QACE;;WAEG;QACS,YAAO,GAAe,SAAS,CAAC;IAU9C,CAAC;IARU,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;SACxC,CAAC;IACJ,CAAC;CACF;AAVa;IAAX,QAAQ,EAAE;oCAAiC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {property} from 'lit/decorators.js';\n\nimport {SharedFab} from './shared.js';\n\n/**\n * The variants available to non-branded FABs.\n */\nexport type FabVariant = 'surface'|'primary'|'secondary'|'tertiary';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class Fab extends SharedFab {\n  /**\n   * The FAB color variant to render.\n   */\n  @property() variant: FabVariant = 'surface';\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': this.variant === 'primary',\n      'secondary': this.variant === 'secondary',\n      'tertiary': this.variant === 'tertiary',\n    };\n  }\n}\n"]}

package/fab/internal/forced-colors-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 `@media(forced-colors: active){.fab{border:1px solid ButtonText}.fab.extended{padding-inline-start:15px;padding-inline-end:19px}md-focus-ring{--md-focus-ring-outward-offset: 3px}}/*# sourceMappingURL=forced-colors-styles.css.map */
+`;
+//# sourceMappingURL=forced-colors-styles.css.js.map

package/fab/internal/forced-colors-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"forced-colors-styles.css.js","sourceRoot":"","sources":["forced-colors-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`@media(forced-colors: active){.fab{border:1px solid ButtonText}.fab.extended{padding-inline-start:15px;padding-inline-end:19px}md-focus-ring{--md-focus-ring-outward-offset: 3px}}/*# sourceMappingURL=forced-colors-styles.css.map */\n`;\n "]}

package/fab/internal/forced-colors-styles.scss

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../focus/focus-ring';
+// go/keep-sorted end
+
+@media (forced-colors: active) {
+  .fab {
+    border: 1px solid ButtonText;
+
+    &.extended {
+      // Adjust the padding-inline to account for the 1px border in HCM.
+      padding-inline-start: 15px;
+      padding-inline-end: 19px;
+    }
+  }
+
+  md-focus-ring {
+    // Adjust the focus ring padding to account for the 1px border in HCM.
+    @include focus-ring.theme(
+      (
+        'outward-offset': 3px,
+      )
+    );
+  }
+}

package/fab/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{--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex}.fab,.icon,.icon ::slotted(*){display:flex}.fab{align-items:center;justify-content:center;vertical-align:middle;padding:0;position:relative;height:var(--_container-height);transition-property:background-color;border-width:0px;outline:none;z-index:0;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);background-color:var(--_container-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color)}.fab.extended{width:inherit;box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px}.fab:not(.extended){width:var(--_container-width)}.fab.large{width:var(--_large-container-width);height:var(--_large-container-height)}.fab.large .icon ::slotted(*){width:var(--_large-icon-size);height:var(--_large-icon-size);font-size:var(--_large-icon-size)}.fab.large,.fab.large .ripple{border-start-start-radius:var(--_large-container-shape-start-start);border-start-end-radius:var(--_large-container-shape-start-end);border-end-start-radius:var(--_large-container-shape-end-start);border-end-end-radius:var(--_large-container-shape-end-end)}.fab.large md-focus-ring{--md-focus-ring-shape-start-start: var(--_large-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_large-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_large-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_large-container-shape-end-start)}.fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.fab:hover{--md-elevation-level:var(--_hover-container-elevation)}.fab:active{--md-elevation-level:var(--_pressed-container-elevation)}.fab.lowered{background-color:var(--_lowered-container-color);--md-elevation-level:var(--_lowered-container-elevation)}.fab.lowered:focus{--md-elevation-level:var(--_lowered-focus-container-elevation)}.fab.lowered:hover{--md-elevation-level:var(--_lowered-hover-container-elevation)}.fab.lowered:active{--md-elevation-level:var(--_lowered-pressed-container-elevation)}.fab .label{color:var(--_label-text-color)}.fab:hover .fab .label{color:var(--_hover-label-text-color)}.fab:focus .fab .label{color:var(--_focus-label-text-color)}.fab:active .fab .label{color:var(--_pressed-label-text-color)}.label{padding-inline-start:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--_label-text-type)}.ripple{overflow:hidden}.ripple,md-elevation{z-index:-1}.touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}md-elevation,.fab{transition-duration:280ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}.fab,.ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.icon ::slotted(*){width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/fab/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{--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);display:inline-flex}.fab,.icon,.icon ::slotted(*){display:flex}.fab{align-items:center;justify-content:center;vertical-align:middle;padding:0;position:relative;height:var(--_container-height);transition-property:background-color;border-width:0px;outline:none;z-index:0;--md-elevation-level:var(--_container-elevation);--md-elevation-shadow-color:var(--_container-shadow-color);background-color:var(--_container-color);--md-ripple-hover-color: var(--_hover-state-layer-color);--md-ripple-pressed-color: var(--_pressed-state-layer-color)}.fab.extended{width:inherit;box-sizing:border-box;padding-inline-start:16px;padding-inline-end:20px}.fab:not(.extended){width:var(--_container-width)}.fab.large{width:var(--_large-container-width);height:var(--_large-container-height)}.fab.large .icon ::slotted(*){width:var(--_large-icon-size);height:var(--_large-icon-size);font-size:var(--_large-icon-size)}.fab.large,.fab.large .ripple{border-start-start-radius:var(--_large-container-shape-start-start);border-start-end-radius:var(--_large-container-shape-start-end);border-end-start-radius:var(--_large-container-shape-end-start);border-end-end-radius:var(--_large-container-shape-end-end)}.fab.large md-focus-ring{--md-focus-ring-shape-start-start: var(--_large-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_large-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_large-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_large-container-shape-end-start)}.fab:focus{--md-elevation-level:var(--_focus-container-elevation)}.fab:hover{--md-elevation-level:var(--_hover-container-elevation)}.fab:active{--md-elevation-level:var(--_pressed-container-elevation)}.fab.lowered{background-color:var(--_lowered-container-color);--md-elevation-level:var(--_lowered-container-elevation)}.fab.lowered:focus{--md-elevation-level:var(--_lowered-focus-container-elevation)}.fab.lowered:hover{--md-elevation-level:var(--_lowered-hover-container-elevation)}.fab.lowered:active{--md-elevation-level:var(--_lowered-pressed-container-elevation)}.fab .label{color:var(--_label-text-color)}.fab:hover .fab .label{color:var(--_hover-label-text-color)}.fab:focus .fab .label{color:var(--_focus-label-text-color)}.fab:active .fab .label{color:var(--_pressed-label-text-color)}.label{padding-inline-start:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--_label-text-type)}.ripple{overflow:hidden}.ripple,md-elevation{z-index:-1}.touch-target{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}md-elevation,.fab{transition-duration:280ms;transition-timing-function:cubic-bezier(0.2, 0, 0, 1)}.fab,.ripple{border-start-start-radius:var(--_container-shape-start-start);border-start-end-radius:var(--_container-shape-start-end);border-end-start-radius:var(--_container-shape-end-start);border-end-end-radius:var(--_container-shape-end-end)}md-focus-ring{--md-focus-ring-shape-start-start: var(--_container-shape-start-start);--md-focus-ring-shape-start-end: var(--_container-shape-start-end);--md-focus-ring-shape-end-end: var(--_container-shape-end-end);--md-focus-ring-shape-end-start: var(--_container-shape-end-start)}.icon ::slotted(*){width:var(--_icon-size);height:var(--_icon-size);font-size:var(--_icon-size)}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

package/fab/internal/shared.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { LitElement } from 'lit';
+/**
+ * Sizes variants available to non-extended FABs.
+ */
+export type FabSize = 'medium' | 'small' | 'large';
+export declare abstract class SharedFab extends LitElement {
+    /** @nocollapse */
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The size of the FAB.
+     *
+     * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
+     * have different sizes.
+     */
+    size: FabSize;
+    /**
+     * The text to display on the FAB.
+     */
+    label: string;
+    /**
+     * Lowers the FAB's elevation.
+     */
+    lowered: boolean;
+    /**
+     * NOTE: For SSR use only as it will be overriden by icon slotchange event.
+     *
+     * Whether to display the icon or not in extended FAB. Does nothing on branded
+     * and non-extended FABs.
+     */
+    hasIcon: boolean;
+    /**
+     * Lowers the FAB's elevation and places it into the `lowered` state.
+     */
+    reducedTouchTarget: boolean;
+    protected render(): import("lit-html").TemplateResult<1>;
+    protected getRenderClasses(): {
+        lowered: boolean;
+        small: boolean;
+        large: boolean;
+        extended: boolean;
+        hasIcon: boolean;
+    };
+    private renderTouchTarget;
+    private renderLabel;
+    private renderIcon;
+    private onSlotchange;
+}

package/fab/internal/shared.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+import { __decorate } from "tslib";
+import '../../elevation/elevation.js';
+import '../../focus/md-focus-ring.js';
+import '../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../internal/aria/delegate.js';
+// tslint:disable-next-line:enforce-comments-on-exported-symbols
+export class SharedFab extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The size of the FAB.
+         *
+         * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not
+         * have different sizes.
+         */
+        this.size = 'medium';
+        /**
+         * The text to display on the FAB.
+         */
+        this.label = '';
+        /**
+         * Lowers the FAB's elevation.
+         */
+        this.lowered = false;
+        /**
+         * NOTE: For SSR use only as it will be overriden by icon slotchange event.
+         *
+         * Whether to display the icon or not in extended FAB. Does nothing on branded
+         * and non-extended FABs.
+         */
+        this.hasIcon = false;
+        /**
+         * Lowers the FAB's elevation and places it into the `lowered` state.
+         */
+        this.reducedTouchTarget = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="fab ${classMap(this.getRenderClasses())}"
+        aria-label=${ariaLabel || nothing}
+      >
+        <md-elevation></md-elevation>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <md-ripple class="ripple"></md-ripple>
+        ${this.renderTouchTarget()}
+        ${this.renderIcon()}
+        ${this.renderLabel()}
+      </button>
+    `;
+    }
+    getRenderClasses() {
+        const isExtended = !!this.label;
+        return {
+            'lowered': this.lowered,
+            'small': this.size === 'small' && !isExtended,
+            'large': this.size === 'large' && !isExtended,
+            'extended': isExtended,
+            'hasIcon': !isExtended || this.hasIcon,
+        };
+    }
+    renderTouchTarget() {
+        return this.reducedTouchTarget ? html `` :
+            html `<div class="touch-target"></div>`;
+    }
+    renderLabel() {
+        return this.label ? html `<span class="label">${this.label}</span>` : '';
+    }
+    renderIcon() {
+        const { ariaLabel } = this;
+        return html `<span class="icon">
+        <slot
+            name="icon"
+            aria-hidden=${ariaLabel || this.label ? 'true' : nothing}
+            @slotchange=${this.onSlotchange}>
+        </slot>
+      </span>`;
+    }
+    onSlotchange(event) {
+        const slotEl = event.target;
+        const slottedEls = slotEl.assignedElements({ flatten: true });
+        this.hasIcon = slottedEls.length !== 0;
+    }
+}
+_a = SharedFab;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+/** @nocollapse */
+SharedFab.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+__decorate([
+    property()
+], SharedFab.prototype, "size", void 0);
+__decorate([
+    property()
+], SharedFab.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], SharedFab.prototype, "lowered", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-icon' })
+], SharedFab.prototype, "hasIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'reduced-touch-target' })
+], SharedFab.prototype, "reducedTouchTarget", void 0);
+//# sourceMappingURL=shared.js.map

package/fab/internal/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAO1E,gEAAgE;AAChE,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QAWE;;;;;WAKG;QACS,SAAI,GAAY,QAAQ,CAAC;QAErC;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAGvB;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;;;;WAKG;QAC+C,YAAO,GAAG,KAAK,CAAC;QAElE;;WAEG;QAEH,uBAAkB,GAAG,KAAK,CAAC;IAyD7B,CAAC;IAvDoB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;qBACjC,SAAS,IAAI,OAAO;;;;;UAK/B,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;;KAEvB,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChC,OAAO;YACL,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,UAAU,EAAE,UAAU;YACtB,SAAS,EAAE,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO;SACvC,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC,CAAC;YACR,IAAI,CAAA,kCAAkC,CAAC;IAC1E,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,CAAC;IAEO,UAAU;QAChB,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;;0BAIP,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAA6B;0BAC9C,IAAI,CAAC,YAAY;;cAE7B,CAAC;IACb,CAAC;IAEO,YAAY,CAAC,KAAY;QAC/B,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;QAC/C,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,KAAK,CAAC,CAAC;IACzC,CAAC;;;AAjGD;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,2BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAe;IACrB,cAAc,EAAE,IAAI;CACrB,CAAC;AAQU;IAAX,QAAQ,EAAE;uCAA0B;AAKzB;IAAX,QAAQ,EAAE;wCAAY;AAMI;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAiB;AAQO;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAC,CAAC;0CAAiB;AAMlE;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,sBAAsB,EAAC,CAAC;qDAClC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../elevation/elevation.js';\nimport '../../focus/md-focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/**\n * Sizes variants available to non-extended FABs.\n */\nexport type FabSize = 'medium'|'small'|'large';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class SharedFab extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /** @nocollapse */\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open' as const,\n    delegatesFocus: true,\n  };\n\n  /**\n   * The size of the FAB.\n   *\n   * NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not\n   * have different sizes.\n   */\n  @property() size: FabSize = 'medium';\n\n  /**\n   * The text to display on the FAB.\n   */\n  @property() label = '';\n\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({type: Boolean}) lowered = false;\n\n  /**\n   * NOTE: For SSR use only as it will be overriden by icon slotchange event.\n   *\n   * Whether to display the icon or not in extended FAB. Does nothing on branded\n   * and non-extended FABs.\n   */\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  /**\n   * Lowers the FAB's elevation and places it into the `lowered` state.\n   */\n  @property({type: Boolean, attribute: 'reduced-touch-target'})\n  reducedTouchTarget = false;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        class=\"fab ${classMap(this.getRenderClasses())}\"\n        aria-label=${ariaLabel || nothing}\n      >\n        <md-elevation></md-elevation>\n        <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n        <md-ripple class=\"ripple\"></md-ripple>\n        ${this.renderTouchTarget()}\n        ${this.renderIcon()}\n        ${this.renderLabel()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    const isExtended = !!this.label;\n    return {\n      'lowered': this.lowered,\n      'small': this.size === 'small' && !isExtended,\n      'large': this.size === 'large' && !isExtended,\n      'extended': isExtended,\n      'hasIcon': !isExtended || this.hasIcon,\n    };\n  }\n\n  private renderTouchTarget() {\n    return this.reducedTouchTarget ? html`` :\n                                     html`<div class=\"touch-target\"></div>`;\n  }\n\n  private renderLabel() {\n    return this.label ? html`<span class=\"label\">${this.label}</span>` : '';\n  }\n\n  private renderIcon() {\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<span class=\"icon\">\n        <slot\n            name=\"icon\"\n            aria-hidden=${\n        ariaLabel || this.label ? 'true' : nothing as unknown as 'false'}\n            @slotchange=${this.onSlotchange}>\n        </slot>\n      </span>`;\n  }\n\n  private onSlotchange(event: Event) {\n    const slotEl = event.target as HTMLSlotElement;\n    const slottedEls = slotEl.assignedElements({flatten: true});\n    this.hasIcon = slottedEls.length !== 0;\n  }\n}\n"]}

package/field/_filled-field.scss

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

package/field/_outlined-field.scss

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

package/field/filled-field.d.ts

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { FilledField } from './lib/filled-field.js';
+import { FilledField } from './internal/filled-field.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-filled-field': MdFilledField;

package/field/filled-field.js

@@ -5,9 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { FilledField } from './lib/filled-field.js';
-import { styles as filledStyles } from './lib/filled-styles.css.js';
-import { styles as sharedStyles } from './lib/shared-styles.css.js';
+import { FilledField } from './internal/filled-field.js';
+import { styles as filledStyles } from './internal/filled-styles.css.js';
+import { styles as sharedStyles } from './internal/shared-styles.css.js';
 /**
  * TODO(b/228525797): add docs
  * @final

package/field/filled-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAD3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledField} from './lib/filled-field.js';\nimport {styles as filledStyles} from './lib/filled-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-field': MdFilledField;\n  }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-field')\nexport class MdFilledField extends FilledField {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}
+{"version":3,"file":"filled-field.js","sourceRoot":"","sources":["filled-field.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,iCAAiC,CAAC;AAQvE;;;;GAIG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;;AAC5B,oBAAM,GAAG,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAD3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAEzB;SAFY,aAAa","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {FilledField} from './internal/filled-field.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-field': MdFilledField;\n  }\n}\n\n/**\n * TODO(b/228525797): add docs\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-field')\nexport class MdFilledField extends FilledField {\n  static override styles = [sharedStyles, filledStyles];\n}\n"]}

package/field/harness.d.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { Harness } from '../testing/harness.js';
-import { Field } from './lib/field.js';
+import { Field } from './internal/field.js';
 /**
  * Test harness for field elements.
  */

package/field/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,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAgB,CAAC;IAC1E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Field} from './lib/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n            this.element.renderRoot.querySelector('.field')) as HTMLElement;\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,YAAa,SAAQ,OAAc;IACrC,KAAK,CAAC,iBAAiB,CAAC,OAA0B,EAAE;QAC3D,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEQ,KAAK,CAAC,gBAAgB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,KAAK,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC;IAEQ,KAAK,CAAC,IAAI;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACrB,CAAC;IAEkB,KAAK,CAAC,qBAAqB;QAC5C,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAgB,CAAC;IAC1E,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {Field} from './internal/field.js';\n\n/**\n * Test harness for field elements.\n */\nexport class FieldHarness extends Harness<Field> {\n  override async focusWithKeyboard(init: KeyboardEventInit = {}) {\n    this.element.focused = true;\n    await super.focusWithKeyboard(init);\n  }\n\n  override async focusWithPointer() {\n    this.element.focused = true;\n    await super.focusWithPointer();\n  }\n\n  override async blur() {\n    this.element.focused = false;\n    await super.blur();\n  }\n\n  protected override async getInteractiveElement() {\n    await this.element.updateComplete;\n    return (this.element.querySelector(':not([slot])') ||\n            this.element.renderRoot.querySelector('.field')) as HTMLElement;\n  }\n}\n"]}