@material/web 1.0.0-pre.8 → 1.0.0

package/elevation/lib/_elevation.scss

@@ -1,165 +0,0 @@
-//
-// 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 '../../sass/theme';
-@use '../../sass/var';
-@use '../../tokens';
-// go/keep-sorted end
-
-@mixin theme($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: tokens.md-comp-elevation-values();
-  $tokens: theme.create-theme-vars($tokens, 'elevation');
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: #{$value};
-    }
-
-    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;
-  }
-
-  // Key box shadow
-  .shadow::before {
-    // level0: box-shadow: 0px 0px 0px 0px;
-    // level1: box-shadow: 0px 1px 2px 0px;
-    // level2: box-shadow: 0px 1px 2px 0px;
-    // level3: box-shadow: 0px 1px 3px 0px;
-    // level4: box-shadow: 0px 2px 3px 0px;
-    // level5: box-shadow: 0px 4px 4px 0px;
-
-    // Add a clamped value for each level to build the correct values.
-    // Sass will simplify nested calc()s.
-
-    // 0 + 0 = 0
-    // $level0-y: 0; // +0 is a no-op
-    // 0 + 1 = 1
-    $level1-y: clamp(0, var(--_level), 1);
-    // 1 + 0 = 1
-    // $level2-y: 0; // +0 is a no-op
-    // 1 + 0 = 1
-    // $level3-y: 0; // +0 is a no-op
-    // 1 + 1 = 2
-    $level4-y: clamp(0, var(--_level) - 3, 1);
-    // 2 + 2 = 4
-    $level5-y: calc(2 * clamp(0, var(--_level) - 4, 1));
-    // Convert to px.
-    $y: calc(1px * ($level1-y + $level4-y + $level5-y));
-
-    // 0 + 0 = 0
-    // $level0-blur: 0; // +0 is a no-op
-    // 0 + 2 = 2
-    $level1-blur: calc(2 * clamp(0, var(--_level), 1));
-    // 2 + 0 = 2
-    // $level2-blur: 0; // +0 is a no-op
-    // 2 + 1 = 3
-    $level3-blur: clamp(0, var(--_level) - 2, 1);
-    // 3 + 0 = 3
-    // $level4-blur: 0; // +0 is a no-op
-    // 3 + 1 = 4
-    $level5-blur: clamp(0, var(--_level) - 4, 1);
-    // Convert to px.
-    $blur: calc(1px * ($level1-blur + $level3-blur + $level5-blur));
-
-    box-shadow: 0px $y $blur 0px var(--_shadow-color);
-    opacity: 0.3;
-  }
-
-  // Ambient box shadow
-  .shadow::after {
-    // level0: box-shadow: 0px 0px 0px 0px;
-    // level1: box-shadow: 0px 1px 3px 1px;
-    // level2: box-shadow: 0px 2px 6px 2px;
-    // level3: box-shadow: 0px 4px 8px 3px;
-    // level4: box-shadow: 0px 6px 10px 4px;
-    // level5: box-shadow: 0px 8px 12px 6px;
-
-    // Add a clamped value for each level to build the correct values.
-    // Sass will simplify nested calc()s.
-
-    // 0 + 0 = 0
-    // $level0-y: 0; // +0 is a no-op
-    // 0 + 1 = 1
-    $level1-y: clamp(0, var(--_level), 1);
-    // 1 + 1 = 2
-    $level2-y: clamp(0, var(--_level) - 1, 1);
-    // 2 + 2 = 4
-    // $level3-y: 2 * clamp(0, var(--_level) - 2, 1);
-    // 4 + 2 = 6
-    // $level4-y: 2 * clamp(0, var(--_level) - 3, 1);
-    // 6 + 2 = 8
-    // $level5-y: 2 * clamp(0, var(--_level) - 4, 1);
-    // Levels 3-5 can be simplified by changing the max clamp value.
-    $level3to5-y: calc(2 * clamp(0, var(--_level) - 2, 3));
-    // Convert to px.
-    $y: calc(1px * ($level1-y + $level2-y + $level3to5-y));
-
-    // 0 + 0 = 0
-    // $level0-blur: 0; // +0 is a no-op
-    // 0 + 3 = 3
-    // $level1-blur: 3 * clamp(0, var(--_level), 1);
-    // 3 + 3 = 6
-    // $level2-blur: 3 * clamp(0, var(--_level) - 1, 1);
-    // Levels 1-2 can be simplified by changing the max clamp value.
-    $level1to2-blur: calc(3 * clamp(0, var(--_level), 2));
-    // 6 + 2 = 8
-    // $level3-blur: 2 * clamp(0, var(--_level) - 2, 1);
-    // 8 + 2 = 10
-    // $level4-blur: 2 * clamp(0, var(--_level) - 3, 1);
-    // 10 + 2 = 12
-    // $level5-blur: 2 * clamp(0, var(--_level) - 4, 1);
-    // Levels 3-5 can be simplified by changing the max clamp value.
-    $level3to5-blur: calc(2 * clamp(0, var(--_level) - 2, 3));
-    // Convert to px.
-    $blur: calc(1px * ($level1to2-blur + $level3to5-blur));
-
-    // 0 + 0 = 0
-    // $level0-spread: 0; // +0 is a no-op
-    // 0 + 1 = 1
-    // $level1-spread: clamp(0, var(--_level), 1);
-    // 1 + 1 = 2
-    // $level2-spread: clamp(0, var(--_level) - 1, 1);
-    // 2 + 1 = 3
-    // $level3-spread: clamp(0, var(--_level) - 2, 1);
-    // 3 + 1 = 4
-    // $level4-spread: clamp(0, var(--_level) - 3, 1);
-    // 4 + 2 = 6
-    // Levels 1-4 can be simplified by changing the max clamp value
-    $level1to4-spread: clamp(0, var(--_level), 4);
-    $level5-spread: calc(2 * clamp(0, var(--_level) - 4, 1));
-    // Convert to px.
-    $spread: calc(1px * ($level1to4-spread + $level5-spread));
-
-    box-shadow: 0px $y $blur $spread var(--_shadow-color);
-    opacity: 0.15;
-  }
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @license
-  * Copyright 2022 Google LLC
-  * SPDX-License-Identifier: Apache-2.0
-  */
-import { css } from 'lit';
-export const styles = css `:host{--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000));display:flex;pointer-events:none}:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-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 +0,0 @@
-{"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

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

package/elevation/lib/elevation.js

@@ -1,15 +0,0 @@
-/**
- * @license
- * Copyright 2022 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { html, LitElement } from 'lit';
-/**
- * A component for elevation.
- */
-export class Elevation extends LitElement {
-    render() {
-        return html `<span class="shadow"></span>`;
-    }
-}
-//# sourceMappingURL=elevation.js.map

package/elevation/lib/elevation.js.map

@@ -1 +0,0 @@
-{"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;IACpB,MAAM;QACvB,OAAO,IAAI,CAAA,8BAA8B,CAAC;IAC5C,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement} from 'lit';\n\n/**\n * A component for elevation.\n */\nexport class Elevation extends LitElement {\n  protected override render() {\n    return html`<span class=\"shadow\"></span>`;\n  }\n}\n"]}

package/fab/lib/_fab.scss

@@ -1,245 +0,0 @@
-//
-// Copyright 2022 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-@use 'sass:map';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../focus/focus-ring';
-@use '../../ripple/ripple';
-@use '../../tokens';
-// go/keep-sorted end
-
-@mixin theme($tokens) {
-  $supported-tokens: list.join(
-    tokens.$md-comp-fab-supported-tokens,
-    (
-      'container-shape-start-start',
-      'container-shape-start-end',
-      'container-shape-end-end',
-      'container-shape-end-start',
-      'large-container-shape-start-start',
-      'large-container-shape-start-end',
-      'large-container-shape-end-end',
-      'large-container-shape-end-start',
-      'small-container-shape-start-start',
-      'small-container-shape-start-end',
-      'small-container-shape-end-end',
-      'small-container-shape-end-start'
-    )
-  );
-
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-fab-#{$token}: #{$value};
-    }
-  }
-}
-
-@mixin styles() {
-  $tokens: tokens.md-comp-fab-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-fab-#{$token}, #{$value});
-    }
-
-    // Support logical shape properties
-    --_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 {
-    @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-start-start': var(--_small-container-shape-start-start),
-          'shape-start-end': var(--_small-container-shape-start-end),
-          'shape-end-end': var(--_small-container-shape-end-end),
-          'shape-end-start': var(--_small-container-shape-end-start),
-        )
-      );
-    }
-  }
-}
-
-@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);
-    }
-  }
-}

package/fab/lib/_shared.scss

@@ -1,224 +0,0 @@
-//
-// 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),
-        focus-opacity: var(--_focus-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);
-
-        @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),
-        'focus-state-layer-color': var(--_focus-state-layer-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);
-    @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/lib/fab-branded-styles.css.js

@@ -1,9 +0,0 @@
-/**
-  * @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-branded-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-branded-container-elevation, 3);--_container-height: var(--md-fab-branded-container-height, 56px);--_container-shadow-color: var(--md-fab-branded-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-branded-container-shape, 16px);--_container-width: var(--md-fab-branded-container-width, 56px);--_focus-container-elevation: var(--md-fab-branded-focus-container-elevation, 3);--_focus-state-layer-color: var(--md-fab-branded-focus-state-layer-color, var(--md-sys-color-primary, #6750a4));--_focus-state-layer-opacity: var(--md-fab-branded-focus-state-layer-opacity, 0.12);--_hover-container-elevation: var(--md-fab-branded-hover-container-elevation, 4);--_hover-state-layer-color: var(--md-fab-branded-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-branded-hover-state-layer-opacity, 0.08);--_icon-size: var(--md-fab-branded-icon-size, 36px);--_lowered-container-color: var(--md-fab-branded-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-branded-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-branded-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-branded-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-branded-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-branded-pressed-container-elevation, 3);--_pressed-state-layer-color: var(--md-fab-branded-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-branded-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-branded-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-branded-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-branded-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_label-text-type: var(--md-fab-branded-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-branded-large-container-height, 96px);--_large-container-shape: var(--md-fab-branded-large-container-shape, 28px);--_large-container-width: var(--md-fab-branded-large-container-width, 96px);--_large-icon-size: var(--md-fab-branded-large-icon-size, 48px);--_pressed-label-text-color: var(--md-fab-branded-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_container-shape-start-start: var( --md-fab-branded-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-branded-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-branded-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-branded-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-branded-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-branded-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-branded-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-branded-large-container-shape-end-start, var(--_large-container-shape) )}/*# sourceMappingURL=fab-branded-styles.css.map */
-`;
-//# sourceMappingURL=fab-branded-styles.css.js.map