material-web-evo 10002.10001.10000

package/divider/divider.js

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Divider } from './internal/divider.js';
+import { styles } from './internal/divider-styles.js';
+/**
+ * @summary A divider is a thin line that groups content in lists and
+ * containers.
+ *
+ * @description Dividers can reinforce tapability, such as when used to separate
+ * list items or define tappable regions in an accordion.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdDivider = class MdDivider extends Divider {
+};
+MdDivider.styles = [styles];
+MdDivider = __decorate([
+    customElement('md-divider')
+], MdDivider);
+//# sourceMappingURL=divider.js.map

package/divider/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,8BAA8B,CAAC;AAQpD;;;;;;;;;GASG;AAEI,WAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,OAAO;;AACpB,gBAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAErB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Divider} from './internal/divider.js';\nimport {styles} from './internal/divider-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-divider': MdDivider;\n  }\n}\n\n/**\n * @summary A divider is a thin line that groups content in lists and\n * containers.\n *\n * @description Dividers can reinforce tapability, such as when used to separate\n * list items or define tappable regions in an accordion.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-divider')\nexport class MdDivider extends Divider {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"]}

package/divider/internal/_divider.scss

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $supported-tokens: tokens.$md-comp-divider-supported-tokens;
+
+  @each $token, $value in $tokens {
+    @if list.index($supported-tokens, $token) == null {
+      @error 'Token `#{$token}` is not a supported token.';
+    }
+
+    @if $value {
+      --md-divider-#{$token}: #{$value};
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-divider-values();
+
+  :host {
+    box-sizing: border-box;
+    color: map.get($tokens, 'color');
+    display: flex;
+    height: map.get($tokens, 'thickness');
+    width: 100%;
+  }
+
+  :host([inset]),
+  :host([inset-start]) {
+    padding-inline-start: 16px;
+  }
+
+  :host([inset]),
+  :host([inset-end]) {
+    padding-inline-end: 16px;
+  }
+
+  :host::before {
+    background: currentColor;
+    content: '';
+    height: 100%;
+    width: 100%;
+  }
+
+  @media (forced-colors: active) {
+    :host::before {
+      background: CanvasText;
+    }
+  }
+}

package/divider/internal/divider-styles.css

@@ -0,0 +1 @@
+:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}/*# sourceMappingURL=divider-styles.css.map */

package/divider/internal/divider-styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_divider.scss"],"names":[],"mappings":"AA8BE,MACE,sBACA,4EACA,aACA,wCACA,WAGF,oCAEE,0BAGF,kCAEE,wBAGF,cACE,wBACA,WACA,YACA,WAGF,8BACE,cACE","file":"divider-styles.css"}

package/divider/internal/divider-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/divider/internal/divider-styles.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./divider/internal/divider-styles.css.
+import { css } from 'lit';
+export const styles = css `:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:"";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}
+`;
+//# sourceMappingURL=divider-styles.js.map

package/divider/internal/divider-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider-styles.js","sourceRoot":"","sources":["divider-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,kEAAkE;AAClE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./divider/internal/divider-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host{box-sizing:border-box;color:var(--md-divider-color, var(--md-sys-color-outline-variant, #cac4d0));display:flex;height:var(--md-divider-thickness, 1px);width:100%}:host([inset]),:host([inset-start]){padding-inline-start:16px}:host([inset]),:host([inset-end]){padding-inline-end:16px}:host::before{background:currentColor;content:\"\";height:100%;width:100%}@media(forced-colors: active){:host::before{background:CanvasText}}\n`;\n"]}

package/divider/internal/divider-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './divider';
+// go/keep-sorted end
+
+@include divider.styles;

package/divider/internal/divider.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { LitElement } from 'lit';
+/**
+ * A divider component.
+ */
+export declare class Divider extends LitElement {
+    /**
+     * Indents the divider with equal padding on both sides.
+     */
+    inset: boolean;
+    /**
+     * Indents the divider with padding on the leading side.
+     */
+    insetStart: boolean;
+    /**
+     * Indents the divider with padding on the trailing side.
+     */
+    insetEnd: boolean;
+}

package/divider/internal/divider.js

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * A divider component.
+ */
+export class Divider extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indents the divider with equal padding on both sides.
+         */
+        this.inset = false;
+        /**
+         * Indents the divider with padding on the leading side.
+         */
+        this.insetStart = false;
+        /**
+         * Indents the divider with padding on the trailing side.
+         */
+        this.insetEnd = false;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Divider.prototype, "inset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'inset-start' })
+], Divider.prototype, "insetStart", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'inset-end' })
+], Divider.prototype, "insetEnd", void 0);
+//# sourceMappingURL=divider.js.map

package/divider/internal/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["divider.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE3C;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,UAAU;IAAvC;;QACE;;WAEG;QACuC,UAAK,GAAG,KAAK,CAAC;QAExD;;WAEG;QAEH,eAAU,GAAG,KAAK,CAAC;QAEnB;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;IACnB,CAAC;CAAA;AAb2C;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAe;AAMxD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAC,CAAC;2CAChD;AAMnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAC,CAAC;yCAChD","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement} from 'lit';\nimport {property} from 'lit/decorators.js';\n\n/**\n * A divider component.\n */\nexport class Divider extends LitElement {\n  /**\n   * Indents the divider with equal padding on both sides.\n   */\n  @property({type: Boolean, reflect: true}) inset = false;\n\n  /**\n   * Indents the divider with padding on the leading side.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'inset-start'})\n  insetStart = false;\n\n  /**\n   * Indents the divider with padding on the trailing side.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'inset-end'})\n  insetEnd = false;\n}\n"]}

package/elevation/_elevation.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/elevation' show theme;

package/elevation/elevation.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { Elevation } from './internal/elevation.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-elevation': MdElevation;
+    }
+}
+/**
+ * The `<md-elevation>` custom element with default styles.
+ *
+ * Elevation is the relative distance between two surfaces along the z-axis.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdElevation extends Elevation {
+    static styles: CSSResultOrNative[];
+}

package/elevation/elevation.js

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { Elevation } from './internal/elevation.js';
+import { styles } from './internal/elevation-styles.js';
+/**
+ * The `<md-elevation>` custom element with default styles.
+ *
+ * Elevation is the relative distance between two surfaces along the z-axis.
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export let MdElevation = class MdElevation extends Elevation {
+};
+MdElevation.styles = [styles];
+MdElevation = __decorate([
+    customElement('md-elevation')
+], MdElevation);
+//# sourceMappingURL=elevation.js.map

package/elevation/elevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.js","sourceRoot":"","sources":["elevation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,gCAAgC,CAAC;AAQtD;;;;;;;GAOG;AAEI,WAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;;AACxB,kBAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAEvB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Elevation} from './internal/elevation.js';\nimport {styles} from './internal/elevation-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-elevation': MdElevation;\n  }\n}\n\n/**\n * The `<md-elevation>` custom element with default styles.\n *\n * Elevation is the relative distance between two surfaces along the z-axis.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-elevation')\nexport class MdElevation extends Elevation {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"]}

package/elevation/internal/_elevation.scss

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

package/elevation/internal/elevation-styles.css

@@ -0,0 +1 @@
+:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}:host{display:flex;pointer-events:none;transition-property:box-shadow,opacity}.shadow::before,.shadow::after{content:"";transition-property:box-shadow,opacity;--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000))}.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 */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["_elevation.scss"],"names":[],"mappings":"AA8BE,6CAIE,sBACA,QACA,kBACA,4BACA,4BACA,mCAGF,MACE,aACA,oBACA,uCAGF,+BAEE,WACA,uCAMA,uCACA,oFAIF,gBAyCE,kPACA,WAIF,eAgEE,uRACA","file":"elevation-styles.css"}

package/elevation/internal/elevation-styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/elevation/internal/elevation-styles.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"elevation-styles.js","sourceRoot":"","sources":["elevation-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,sEAAsE;AACtE,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2024 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./elevation/internal/elevation-styles.css.\nimport {css} from 'lit';\nexport const styles = css`:host,.shadow,.shadow::before,.shadow::after{border-radius:inherit;inset:0;position:absolute;transition-duration:inherit;transition-property:inherit;transition-timing-function:inherit}:host{display:flex;pointer-events:none;transition-property:box-shadow,opacity}.shadow::before,.shadow::after{content:\"\";transition-property:box-shadow,opacity;--_level: var(--md-elevation-level, 0);--_shadow-color: var(--md-elevation-shadow-color, var(--md-sys-color-shadow, #000))}.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}\n`;\n"]}

package/elevation/internal/elevation-styles.scss

@@ -0,0 +1,10 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './elevation';
+// go/keep-sorted end
+
+@include elevation.styles;

package/elevation/internal/elevation.d.ts

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

package/elevation/internal/elevation.js

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

package/elevation/internal/elevation.js.map

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

package/fab/_fab.scss

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './internal/fab-branded' as branded-* show branded-theme;
+@forward './internal/fab' show theme;

package/fab/branded-fab.d.ts

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

package/fab/branded-fab.js

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

package/fab/branded-fab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"branded-fab.js","sourceRoot":"","sources":["branded-fab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,GAAG,EAAa,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,6BAA6B,CAAC;AAUnE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEI,WAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,GAAG;IAM1B,gBAAgB;QACvB,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;SACf,CAAC;IACJ,CAAC;;AACe,mBAAM,GAAwB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,CAAC,AAA5D,CAA6D;AAfxE,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgBxB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {Fab, FabVariant} from './internal/fab.js';\nimport {styles} from './internal/fab-branded-styles.js';\nimport {styles as forcedColors} from './internal/forced-colors-styles.js';\nimport {styles as sharedStyles} from './internal/shared-styles.js';\n\nexport {type FabSize} from './internal/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-branded-fab': MdBrandedFab;\n  }\n}\n\n/**\n * @summary Floating action buttons (FABs) help people take primary actions.\n * They’re used to represent the most important action on a screen, such as\n * Create or Reply.\n *\n * @description\n * __Emphasis:__ High emphasis – For the primary, most important, or most common\n * action on a screen\n *\n * __Rationale:__ The FAB remains the default component for a screen’s primary\n * action. It comes in three sizes: small FAB, FAB, and large FAB. The extended\n * FAB’s wider format and text label give it more visual prominence than a  FAB.\n * It’s often used on larger screens where a FAB would seem too small. Branded\n * FABs are used to specifically call attention to branded logo icons.\n *\n * __Example usages:__\n * - FAB\n *   - Create\n *   - Compose\n * - Extended FAB\n *   - Create\n *   - Compose\n *   - New Thread\n *   - New File\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-branded-fab')\nexport class MdBrandedFab extends Fab {\n  /**\n   * Branded FABs have no variants\n   */\n  override variant!: FabVariant;\n\n  override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'primary': false,\n      'secondary': false,\n      'tertiary': false,\n      'small': false,\n    };\n  }\n  static override styles: CSSResultOrNative[] = [sharedStyles, styles, forcedColors];\n}\n"]}