@universal-material/web 3.4.2 → 3.5.0

package/button/fab-menu-item.styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+export const styles = css `
+  .container {
+    --_animation-duration: 225ms;
+    --_height: var(--u-fab-menu-item-height, 56px);
+    height: var(--_height);
+    border-radius: calc(var(--_height) / 2);
+    padding-inline: var(--u-fab-menu-item-padding, 24px);
+    opacity: 0;
+    transition: opacity var(--_animation-duration) linear;
+  }
+  .container:not(.has-icon) .icon {
+    display: none;
+  }
+
+  .icon {
+    font-size: var(--u-fab-icon-size, 1.5rem);
+    margin-inline-end: var(--u-fab-menu-item-icon-margin, 8px);
+  }
+
+  .label {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-fab-menu-item-label-line-height, var(--u-title-m-line-height, 1.5rem));
+    font-size: var(--u-fab-menu-item-label-font-size, var(--u-title-m-font-size, 1rem));
+    letter-spacing: var(--u-fab-menu-item-label-letter-spacing, var(--u-title-m-letter-spacing, 0.009375rem));
+    font-weight: var(--u-fab-menu-item-label-font-weight, var(--u-title-m-font-weight, var(--u-font-weight-medium, 500)));
+  }
+
+  .primary {
+    background-color: var(--u-fab-menu-item-primary-container-color, var(--u-color-primary-container, rgb(234, 221, 255)));
+    color: var(--u-fab-menu-item-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
+  }
+
+  .secondary {
+    background-color: var(--u-fab-menu-item-secondary-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+    color: var(--u-fab-menu-item-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+
+  .tertiary {
+    background-color: var(--u-fab-menu-item-tertiary-container-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));
+    color: var(--u-fab-menu-item-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));
+  }
+
+  .clipper {
+    animation: clip-out var(--_animation-duration) forwards linear;
+  }
+
+  .open {
+    opacity: 1;
+    transition-delay: calc(75ms * var(--_animation-delay-increment, 0));
+  }
+  .open .clipper {
+    animation-name: clip-in;
+  }
+  .open .clipper {
+    animation-delay: calc(75ms * var(--_animation-delay-increment, 0));
+  }
+
+  @keyframes clip-in {
+    0% {
+      margin-inline-start: -32px;
+    }
+    25% {
+      margin-inline-start: -8px;
+    }
+    50% {
+      margin-inline-start: 16px;
+    }
+    100% {
+      margin-inline-start: 0;
+    }
+  }
+  @keyframes clip-out {
+    0% {
+      margin-inline-start: 0;
+    }
+    100% {
+      margin-inline-start: -32px;
+    }
+  }
+`;
+//# sourceMappingURL=fab-menu-item.styles.js.map

package/button/fab-menu-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-item.styles.js","sourceRoot":"","sources":["../../src/button/fab-menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+EzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  .container {\n    --_animation-duration: 225ms;\n    --_height: var(--u-fab-menu-item-height, 56px);\n    height: var(--_height);\n    border-radius: calc(var(--_height) / 2);\n    padding-inline: var(--u-fab-menu-item-padding, 24px);\n    opacity: 0;\n    transition: opacity var(--_animation-duration) linear;\n  }\n  .container:not(.has-icon) .icon {\n    display: none;\n  }\n\n  .icon {\n    font-size: var(--u-fab-icon-size, 1.5rem);\n    margin-inline-end: var(--u-fab-menu-item-icon-margin, 8px);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-fab-menu-item-label-line-height, var(--u-title-m-line-height, 1.5rem));\n    font-size: var(--u-fab-menu-item-label-font-size, var(--u-title-m-font-size, 1rem));\n    letter-spacing: var(--u-fab-menu-item-label-letter-spacing, var(--u-title-m-letter-spacing, 0.009375rem));\n    font-weight: var(--u-fab-menu-item-label-font-weight, var(--u-title-m-font-weight, var(--u-font-weight-medium, 500)));\n  }\n\n  .primary {\n    background-color: var(--u-fab-menu-item-primary-container-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-menu-item-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  .secondary {\n    background-color: var(--u-fab-menu-item-secondary-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-menu-item-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  .tertiary {\n    background-color: var(--u-fab-menu-item-tertiary-container-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-menu-item-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  .clipper {\n    animation: clip-out var(--_animation-duration) forwards linear;\n  }\n\n  .open {\n    opacity: 1;\n    transition-delay: calc(75ms * var(--_animation-delay-increment, 0));\n  }\n  .open .clipper {\n    animation-name: clip-in;\n  }\n  .open .clipper {\n    animation-delay: calc(75ms * var(--_animation-delay-increment, 0));\n  }\n\n  @keyframes clip-in {\n    0% {\n      margin-inline-start: -32px;\n    }\n    25% {\n      margin-inline-start: -8px;\n    }\n    50% {\n      margin-inline-start: 16px;\n    }\n    100% {\n      margin-inline-start: 0;\n    }\n  }\n  @keyframes clip-out {\n    0% {\n      margin-inline-start: 0;\n    }\n    100% {\n      margin-inline-start: -32px;\n    }\n  }\n`;\n"]}

package/button/fab-menu-open-context.d.ts

@@ -0,0 +1,4 @@
+export declare const fabMenuOpenContext: {
+    __context__: boolean;
+};
+//# sourceMappingURL=fab-menu-open-context.d.ts.map

package/button/fab-menu-open-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-open-context.d.ts","sourceRoot":"","sources":["../../src/button/fab-menu-open-context.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;CAAuD,CAAC"}

package/button/fab-menu-open-context.js

@@ -0,0 +1,3 @@
+import { createContext } from '@lit/context';
+export const fabMenuOpenContext = createContext(Symbol('fabMenuOpenContext'));
+//# sourceMappingURL=fab-menu-open-context.js.map

package/button/fab-menu-open-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-open-context.js","sourceRoot":"","sources":["../../src/button/fab-menu-open-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAU,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\nexport const fabMenuOpenContext = createContext<boolean>(Symbol('fabMenuOpenContext'));\n"]}

package/button/fab-menu.d.ts

@@ -0,0 +1,26 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import { UmFabColor, UmFabSize } from './fab.js';
+export declare class UmFabMenu extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * The FAB color variant to render.
+     */
+    color: UmFabColor;
+    /**
+     * The size of the FAB.
+     */
+    size: UmFabSize;
+    /**
+     * Lowers the FAB's elevation.
+     */
+    lowered: boolean;
+    open: boolean;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-fab-menu': UmFabMenu;
+    }
+}
+//# sourceMappingURL=fab-menu.d.ts.map

package/button/fab-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu.d.ts","sourceRoot":"","sources":["../../src/button/fab-menu.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAQ3D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAEjD,qBACa,SAAU,SAAQ,UAAU;;IAEvC,OAAgB,MAAM,4BAAY;IAElC;;OAEG;IAGH,KAAK,EAAE,UAAU,CAAa;IAE9B;;OAEG;IACS,IAAI,EAAE,SAAS,CAAY;IAEvC;;OAEG;IACyC,OAAO,UAAS;IAI5D,IAAI,UAAS;cAEM,MAAM,IAAI,kBAAkB;CAmDhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/button/fab-menu.js

@@ -0,0 +1,93 @@
+import { __decorate } from "tslib";
+import { provide } from '@lit/context';
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { fabMenuColorContext } from './fab-menu-color-context.js';
+import { UmFabMenuItem } from './fab-menu-item.js';
+import { fabMenuOpenContext } from './fab-menu-open-context.js';
+import { styles } from './fab-menu.styles.js';
+let UmFabMenu = class UmFabMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The FAB color variant to render.
+         */
+        this.color = 'primary';
+        /**
+         * The size of the FAB.
+         */
+        this.size = 'medium';
+        /**
+         * Lowers the FAB's elevation.
+         */
+        this.lowered = false;
+        this.open = false;
+    }
+    static { this.styles = [styles]; }
+    render() {
+        const containerClasses = classMap({
+            open: this.open,
+            [this.color]: true,
+        });
+        return html `
+      <div class="container ${containerClasses}">
+        <div class="menu-items">
+          <slot @slotchange=${this.#handleIconItemsSlotChange}></slot>
+        </div>
+        <u-fab class="toggle-container" .size=${this.size}>
+          <u-fab 
+            class="toggle"
+            .color=${this.color}
+            .lowered=${this.lowered}
+            .size=${this.open ? 'medium' : this.size}
+            @click=${this.#toggle}>
+            <span class="icon-container" aria-hidden="true">
+              <span class="icon icon-default">
+                <slot name="icon"></slot>
+              </span>
+              <span class="icon icon-close">
+                <slot name="close-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor">
+                    <path
+                      d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+                  </svg>
+                </slot>
+              </span>
+            </span>
+          </u-fab>
+        </u-fab>
+      </div>
+    `;
+    }
+    #toggle() {
+        this.open = !this.open;
+    }
+    #handleIconItemsSlotChange(event) {
+        const elements = event.target.assignedElements({ flatten: true });
+        let index = 0;
+        for (const element of elements.filter(e => e instanceof UmFabMenuItem).reverse()) {
+            element._index = index;
+            index++;
+        }
+    }
+};
+__decorate([
+    provide({ context: fabMenuColorContext }),
+    property()
+], UmFabMenu.prototype, "color", void 0);
+__decorate([
+    property()
+], UmFabMenu.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmFabMenu.prototype, "lowered", void 0);
+__decorate([
+    provide({ context: fabMenuOpenContext }),
+    state()
+], UmFabMenu.prototype, "open", void 0);
+UmFabMenu = __decorate([
+    customElement('u-fab-menu')
+], UmFabMenu);
+export { UmFabMenu };
+//# sourceMappingURL=fab-menu.js.map

package/button/fab-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu.js","sourceRoot":"","sources":["../../src/button/fab-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAIvC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIL;;WAEG;QAGH,UAAK,GAAe,SAAS,CAAC;QAE9B;;WAEG;QACS,SAAI,GAAc,QAAQ,CAAC;QAEvC;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;QAI5D,SAAI,GAAG,KAAK,CAAC;IAqDf,CAAC;aA1EiB,WAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;IAuBf,MAAM;QACvB,MAAM,gBAAgB,GAAG,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;SACnB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;8BACe,gBAAgB;;8BAEhB,IAAI,CAAC,0BAA0B;;gDAEb,IAAI,CAAC,IAAI;;;qBAGpC,IAAI,CAAC,KAAK;uBACR,IAAI,CAAC,OAAO;oBACf,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;qBAC/B,IAAI,CAAC,OAAO;;;;;;;;;;;;;;;;;KAiB5B,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED,0BAA0B,CAAC,KAAY;QACrC,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEvF,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,KAAK,MAAM,OAAO,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAAY,aAAa,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC;YACjF,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;YACvB,KAAK,EAAE,CAAC;QACV,CAAC;IACH,CAAC;;AAlED;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC;IACzC,QAAQ,EAAE;wCACmB;AAKlB;IAAX,QAAQ,EAAE;uCAA4B;AAKK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAI5D;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,CAAC;IACxC,KAAK,EAAE;uCACK;AAvBF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA4ErB","sourcesContent":["import { provide } from '@lit/context';\n\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { fabMenuColorContext } from './fab-menu-color-context.js';\nimport { UmFabMenuItem } from './fab-menu-item.js';\nimport { fabMenuOpenContext } from './fab-menu-open-context.js';\nimport { styles } from './fab-menu.styles.js';\nimport { UmFabColor, UmFabSize } from './fab.js';\n\n@customElement('u-fab-menu')\nexport class UmFabMenu extends LitElement {\n\n  static override styles = [styles];\n\n  /**\n   * The FAB color variant to render.\n   */\n  @provide({ context: fabMenuColorContext })\n  @property()\n  color: UmFabColor = 'primary';\n\n  /**\n   * The size of the FAB.\n   */\n  @property() size: UmFabSize = 'medium';\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered = false;\n\n  @provide({ context: fabMenuOpenContext })\n  @state()\n  open = false;\n\n  protected override render(): HTMLTemplateResult {\n    const containerClasses = classMap({\n      open: this.open,\n      [this.color]: true,\n    });\n\n    return html`\n      <div class=\"container ${containerClasses}\">\n        <div class=\"menu-items\">\n          <slot @slotchange=${this.#handleIconItemsSlotChange}></slot>\n        </div>\n        <u-fab class=\"toggle-container\" .size=${this.size}>\n          <u-fab \n            class=\"toggle\"\n            .color=${this.color}\n            .lowered=${this.lowered}\n            .size=${this.open ? 'medium' : this.size}\n            @click=${this.#toggle}>\n            <span class=\"icon-container\" aria-hidden=\"true\">\n              <span class=\"icon icon-default\">\n                <slot name=\"icon\"></slot>\n              </span>\n              <span class=\"icon icon-close\">\n                <slot name=\"close-icon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 -960 960 960\" width=\"1em\" fill=\"currentColor\">\n                    <path\n                      d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n                  </svg>\n                </slot>\n              </span>\n            </span>\n          </u-fab>\n        </u-fab>\n      </div>\n    `;\n  }\n\n  #toggle(): void {\n    this.open = !this.open;\n  }\n\n  #handleIconItemsSlotChange(event: Event) {\n    const elements = (event.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    let index = 0;\n\n    for (const element of elements.filter(e => e instanceof UmFabMenuItem).reverse()) {\n      element._index = index;\n      index++;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab-menu': UmFabMenu;\n  }\n}\n"]}

package/button/fab-menu.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=fab-menu.styles.d.ts.map

package/button/fab-menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu.styles.d.ts","sourceRoot":"","sources":["../../src/button/fab-menu.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8IlB,CAAC"}

package/button/fab-menu.styles.js

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_fab-menu-morph-duration: var(--u-fab-menu-morph-duration, 175ms);
+    --u-button-morph-duration: var(--_fab-menu-morph-duration);
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .menu-items {
+    display: flex;
+    align-items: flex-end;
+    flex-direction: column;
+    gap: var(--u-fab-menu-item-margin, 4px);
+    pointer-events: none;
+  }
+
+  .toggle-container {
+    position: relative;
+  }
+  .toggle-container * {
+    pointer-events: auto;
+  }
+  .toggle-container::part(container) {
+    --u-elevation-level: 0 !important;
+    background: transparent !important;
+  }
+
+  .toggle {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    margin-top: var(--u-fab-menu-toggle-margin, 8px);
+  }
+  .toggle::part(container) {
+    transition: width var(--_fab-menu-morph-duration), height var(--_fab-menu-morph-duration), background-color var(--_fab-menu-morph-duration) linear, border-radius var(--_fab-menu-morph-duration) linear, color var(--_fab-menu-morph-duration) linear;
+  }
+
+  .icon-container {
+    position: relative;
+    height: 1px;
+  }
+
+  .icon {
+    --_scale: 1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate3d(-50%, -50%, 0) scale(var(--_scale));
+    transition: opacity, transform;
+    transition-duration: calc(var(--_fab-menu-morph-duration) * 0.75);
+  }
+
+  .icon-default {
+    --_scale: 1;
+    opacity: 1;
+    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);
+  }
+
+  .icon-close {
+    --_scale: .5;
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+
+  .open .menu-items {
+    display: flex;
+    pointer-events: auto;
+  }
+  .open .toggle::part(container) {
+    border-radius: 50%;
+  }
+  .open .icon-default {
+    --_scale: .5;
+    opacity: 0;
+    transition-delay: 0ms;
+  }
+  .open .icon-close {
+    --_scale: 1;
+    opacity: 1;
+    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);
+  }
+  .open.primary {
+    --u-fab-primary-container-color: var(--u-fab-menu-toggle-primary-container-color, var(--u-color-primary, rgb(103, 80, 164)));
+    --u-fab-primary-text-color: var(--u-fab-menu-toggle-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+  }
+  .open.secondary {
+    --u-fab-secondary-container-color: var(--u-fab-menu-toggle-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
+    --u-fab-secondary-text-color: var(--u-fab-menu-toggle-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
+  }
+  .open.tertiary {
+    --u-fab-tertiary-container-color: var(--u-fab-menu-toggle-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));
+    --u-fab-tertiary-text-color: var(--u-fab-menu-toggle-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+
+  ::slotted(u-fab-menu-item) {
+    --_animation-delay: $i * 50ms;
+  }
+`;
+//# sourceMappingURL=fab-menu.styles.js.map

package/button/fab-menu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu.styles.js","sourceRoot":"","sources":["../../src/button/fab-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_fab-menu-morph-duration: var(--u-fab-menu-morph-duration, 175ms);\n    --u-button-morph-duration: var(--_fab-menu-morph-duration);\n    display: inline-block;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n  }\n\n  .menu-items {\n    display: flex;\n    align-items: flex-end;\n    flex-direction: column;\n    gap: var(--u-fab-menu-item-margin, 4px);\n    pointer-events: none;\n  }\n\n  .toggle-container {\n    position: relative;\n  }\n  .toggle-container * {\n    pointer-events: auto;\n  }\n  .toggle-container::part(container) {\n    --u-elevation-level: 0 !important;\n    background: transparent !important;\n  }\n\n  .toggle {\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-end: 0;\n    margin-top: var(--u-fab-menu-toggle-margin, 8px);\n  }\n  .toggle::part(container) {\n    transition: width var(--_fab-menu-morph-duration), height var(--_fab-menu-morph-duration), background-color var(--_fab-menu-morph-duration) linear, border-radius var(--_fab-menu-morph-duration) linear, color var(--_fab-menu-morph-duration) linear;\n  }\n\n  .icon-container {\n    position: relative;\n    height: 1px;\n  }\n\n  .icon {\n    --_scale: 1;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    transform: translate3d(-50%, -50%, 0) scale(var(--_scale));\n    transition: opacity, transform;\n    transition-duration: calc(var(--_fab-menu-morph-duration) * 0.75);\n  }\n\n  .icon-default {\n    --_scale: 1;\n    opacity: 1;\n    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);\n  }\n\n  .icon-close {\n    --_scale: .5;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n\n  .open .menu-items {\n    display: flex;\n    pointer-events: auto;\n  }\n  .open .toggle::part(container) {\n    border-radius: 50%;\n  }\n  .open .icon-default {\n    --_scale: .5;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n  .open .icon-close {\n    --_scale: 1;\n    opacity: 1;\n    transition-delay: calc(var(--_fab-menu-morph-duration) * 0.5);\n  }\n  .open.primary {\n    --u-fab-primary-container-color: var(--u-fab-menu-toggle-primary-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --u-fab-primary-text-color: var(--u-fab-menu-toggle-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n  .open.secondary {\n    --u-fab-secondary-container-color: var(--u-fab-menu-toggle-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    --u-fab-secondary-text-color: var(--u-fab-menu-toggle-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n  .open.tertiary {\n    --u-fab-tertiary-container-color: var(--u-fab-menu-toggle-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    --u-fab-tertiary-text-color: var(--u-fab-menu-toggle-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n\n  ::slotted(u-fab-menu-item) {\n    --_animation-delay: $i * 50ms;\n  }\n`;\n"]}

package/button/fab.d.ts

@@ -21,7 +21,8 @@ export declare class UmFab extends UmButtonBase {
      */
     lowered: boolean;
     get extended(): boolean;
-    protected renderContent(): HTMLTemplateResult;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/button/fab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,qBACa,KAAM,SAAQ,YAAY;IAErC,OAAgB,MAAM,iCAAiC;IAEvD;;OAEG;IAC0B,KAAK,EAAE,UAAU,CAAa;IAE3D;;OAEG;IAC0B,IAAI,EAAE,SAAS,CAAY;IAExD;;OAEG;IAC0B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEzD;;OAEG;IACyC,OAAO,UAAS;IAE5D,IACI,QAAQ,IAAI,OAAO,CAEtB;cAEkB,aAAa,IAAI,kBAAkB;CAQvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}
+{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAErD,qBACa,KAAM,SAAQ,YAAY;IAErC,OAAgB,MAAM,iCAAiC;IAEvD;;OAEG;IACS,KAAK,EAAE,UAAU,CAAa;IAE1C;;OAEG;IACS,IAAI,EAAE,SAAS,CAAY;IAEvC;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAExC;;OAEG;IACyC,OAAO,UAAS;IAE5D,IAAI,QAAQ,IAAI,OAAO,CAEtB;cAEkB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAU/C,cAAc,IAAI,kBAAkB;CAQxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,KAAK,CAAC;KAChB;CACF"}

package/button/fab.js

@@ -27,7 +27,16 @@ let UmFab = class UmFab extends UmButtonBase {
     get extended() {
         return !!this.label;
     }
-    renderContent() {
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            [this.color]: true,
+            [this.size]: true,
+            lowered: this.lowered,
+            extended: this.extended,
+        };
+    }
+    _renderContent() {
         const labelTag = html `<span>${this.label}</span>`;
         return html `
       <span class="icon" aria-hidden="true"><slot></slot></span>
@@ -36,20 +45,17 @@ let UmFab = class UmFab extends UmButtonBase {
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmFab.prototype, "color", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmFab.prototype, "size", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmFab.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], UmFab.prototype, "lowered", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], UmFab.prototype, "extended", null);
 UmFab = __decorate([
     customElement('u-fab')
 ], UmFab);

package/button/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMlC,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,YAAY;IAAhC;;QAIL;;WAEG;QAC0B,UAAK,GAAe,SAAS,CAAC;QAE3D;;WAEG;QAC0B,SAAI,GAAc,QAAQ,CAAC;QAExD;;WAEG;QAC0B,UAAK,GAAkB,IAAI,CAAC;QAEzD;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;IAe9D,CAAC;aAnCiB,WAAM,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;IAuBvD,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAEkB,aAAa;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAA,SAAS,IAAI,CAAC,KAAK,SAAS,CAAC;QAElD,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;KAClC,CAAC;IACJ,CAAC;;AA7B4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA+B;AAK9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAA4B;AAK3B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA6B;AAKb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAiB;AAG5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAG1C;AA3BU,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CAqCjB","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './fab.styles.js';\n\nexport type UmFabColor = 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';\nexport type UmFabSize = 'small' | 'medium' | 'large';\n\n@customElement('u-fab')\nexport class UmFab extends UmButtonBase {\n\n  static override styles = [UmButtonBase.styles, styles];\n\n  /**\n   * The FAB color variant to render.\n   */\n  @property({ reflect: true }) color: UmFabColor = 'primary';\n\n  /**\n   * The size of the FAB.\n   */\n  @property({ reflect: true }) size: UmFabSize = 'medium';\n\n  /**\n   * The text to display the FAB.\n   */\n  @property({ reflect: true }) label: string | null = null;\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered = false;\n\n  @property({ type: Boolean, reflect: true })\n  get extended(): boolean {\n    return !!this.label;\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n    const labelTag = html`<span>${this.label}</span>`;\n\n    return html`\n      <span class=\"icon\" aria-hidden=\"true\"><slot></slot></span>\n      ${this.label ? labelTag : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab': UmFab;\n  }\n}\n"]}
+{"version":3,"file":"fab.js","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAMlC,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,YAAY;IAAhC;;QAIL;;WAEG;QACS,UAAK,GAAe,SAAS,CAAC;QAE1C;;WAEG;QACS,SAAI,GAAc,QAAQ,CAAC;QAEvC;;WAEG;QACS,UAAK,GAAkB,IAAI,CAAC;QAExC;;WAEG;QACyC,YAAO,GAAG,KAAK,CAAC;IAwB9D,CAAC;aA5CiB,WAAM,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;IAsBvD,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAEkB,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI;YAClB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAEkB,cAAc;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAA,SAAS,IAAI,CAAC,KAAK,SAAS,CAAC;QAElD,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;KAClC,CAAC;IACJ,CAAC;;AAtCW;IAAX,QAAQ,EAAE;oCAA+B;AAK9B;IAAX,QAAQ,EAAE;mCAA4B;AAK3B;IAAX,QAAQ,EAAE;oCAA6B;AAKI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAiB;AAtBjD,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CA8CjB","sourcesContent":["import { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { styles } from './fab.styles.js';\n\nexport type UmFabColor = 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';\nexport type UmFabSize = 'small' | 'medium' | 'large';\n\n@customElement('u-fab')\nexport class UmFab extends UmButtonBase {\n\n  static override styles = [UmButtonBase.styles, styles];\n\n  /**\n   * The FAB color variant to render.\n   */\n  @property() color: UmFabColor = 'primary';\n\n  /**\n   * The size of the FAB.\n   */\n  @property() size: UmFabSize = 'medium';\n\n  /**\n   * The text to display the FAB.\n   */\n  @property() label: string | null = null;\n\n  /**\n   * Lowers the FAB's elevation.\n   */\n  @property({ type: Boolean, reflect: true }) lowered = false;\n\n  get extended(): boolean {\n    return !!this.label;\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.color]: true,\n      [this.size]: true,\n      lowered: this.lowered,\n      extended: this.extended,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const labelTag = html`<span>${this.label}</span>`;\n\n    return html`\n      <span class=\"icon\" aria-hidden=\"true\"><slot></slot></span>\n      ${this.label ? labelTag : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab': UmFab;\n  }\n}\n"]}

package/button/fab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.styles.d.ts","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAsFlB,CAAC"}
+{"version":3,"file":"fab.styles.d.ts","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgFlB,CAAC"}

package/button/fab.styles.js

@@ -1,89 +1,83 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
+  .container {
+    --u-elevation-level: var(--u-fab-elevation-level, 3);
     aspect-ratio: 1;
-    --u-elevation-level: var(--u-fab-button-elevation-level, 3);
   }
-
-  :host([lowered]) {
-    --u-elevation-level: var(--u-fab-button-elevation-level, 1);
-  }
-
   @media (hover: hover) {
-    :host(:hover:not(:focus-within):not(:active)) {
-      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-    }
-    :host(:hover:not(:focus-within):not(:active)[lowered]) {
-      --u-elevation-level: var(--u-fab-button-elevation-level, 2);
+    .container:hover:not(:focus-within):not(:active) {
+      --u-elevation-level: var(--u-fab-hover-elevation-level, 4);
     }
   }
+
+  .lowered {
+    --u-elevation-level: var(--u-fab-elevation-level, 1);
+  }
   @media (hover: hover) {
-    :host(:hover:not(:focus-within):not(:active)) {
-      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
+    .lowered:hover:not(:focus-within):not(:active) {
+      --u-elevation-level: var(--u-fab-elevation-level, 2);
     }
   }
-  :host([size=small]) {
-    width: var(--u-fab-button-small-size, 40px);
-    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));
-  }
 
-  :host([size=large]) {
-    width: var(--u-fab-button-medium-size, 96px);
-    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));
+  .small {
+    width: var(--u-fab-small-size, 40px);
+    border-radius: var(--u-fab-small-shape-corner, var(--u-shape-corner-medium, 12px));
   }
 
-  :host([extended]),
-  :host([size=medium]) {
-    width: var(--u-fab-button-medium-size, 56px);
-    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));
+  .large {
+    width: var(--u-fab-large-size, 96px);
+    border-radius: var(--u-fab-large-shape-corner, var(--u-shape-corner-extra-large, 28px));
+  }
+  .large .icon {
+    font-size: var(--u-fab-large-icon-size, 2rem);
   }
 
-  :host([size=large]) .icon {
-    font-size: var(--u-fab-button-icon-size, 2rem);
+  .extended,
+  .medium {
+    width: var(--u-fab-medium-size, 56px);
+    border-radius: var(--u-fab-medium-shape-corner, var(--u-shape-corner-large, 16px));
   }
 
-  :host([extended]) .icon,
-  :host([size=small]) .icon,
-  :host([size=medium]) .icon {
-    font-size: var(--u-fab-button-icon-size, 1.5rem);
+  .extended .icon,
+  .small .icon,
+  .medium .icon {
+    font-size: var(--u-fab-icon-size, 1.5rem);
   }
 
-  :host([extended]) {
+  .extended {
     width: auto;
-    height: var(--u-extended-fab-button-height, 56px);
+    height: var(--u-extended-fab-height, 56px);
     aspect-ratio: auto;
-    min-width: var(--u-extended-fab-button-min-width, 80px);
-    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);
+    min-width: var(--u-extended-fab-min-width, 80px);
+    padding-inline: var(--u-extended-fab-padding, 16px 24px);
   }
-
-  :host([extended]) .icon {
-    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
-  }
-
-  :host([color=primary]) {
-    background-color: var(--u-fab-button-primary-bg-color, var(--u-color-primary-container, rgb(234, 221, 255)));
-    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
+  .extended .icon {
+    margin-inline-end: var(--u-extended-fab-icon-margin, 12px);
   }
 
-  :host([color=secondary]) {
-    background-color: var(--u-fab-button-secondary-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
-    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  .primary {
+    background-color: var(--u-fab-primary-container-color, var(--u-color-primary-container, rgb(234, 221, 255)));
+    color: var(--u-fab-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));
   }
 
-  :host([color=tertiary]) {
-    background-color: var(--u-fab-button-tertiary-bg-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));
-    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));
+  .secondary {
+    background-color: var(--u-fab-secondary-container-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+    color: var(--u-fab-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
   }
 
-  :host([color=branded]),
-  :host([color=surface]) {
-    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
-    color: var(--u-fab-button-surface-text-color, var(--_color-primary));
+  .tertiary {
+    background-color: var(--u-fab-tertiary-container-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));
+    color: var(--u-fab-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));
   }
 
-  :host([color=branded][lowered]),
-  :host([color=surface][lowered]) {
-    background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
+  .branded,
+  .surface {
+    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
+    color: var(--u-fab-surface-text-color, var(--_color-primary));
+  }
+  .branded.lowered,
+  .surface.lowered {
+    background-color: var(--u-fab-surface-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
   }
 `;
 //# sourceMappingURL=fab.styles.js.map