@universal-material/web 3.0.8 → 3.0.9

package/button/button-base.styles.js

@@ -1,75 +0,0 @@
-import { css } from 'lit';
-export const styles = css `
-  :host {
-    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
-    -webkit-tap-highlight-color: transparent;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: baseline;
-    position: relative;
-    white-space: nowrap;
-    font-family: var(--u-font-family-base, system-ui);
-    transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
-  }
-
-  :host([disabled]) {
-    --u-elevation-level: 0 !important;
-    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.12)) !important;
-    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.38)) !important;
-  }
-
-  :host([disabled]) .button {
-    cursor: default;
-  }
-
-  * {
-    color: inherit;
-  }
-
-  u-elevation {
-    z-index: -1;
-  }
-
-  .button {
-    cursor: pointer;
-    position: absolute;
-    inset: 0;
-    font-family: inherit;
-    border-radius: inherit;
-    color: inherit;
-    border: none;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    white-space: nowrap;
-    background: transparent;
-    user-select: none;
-    text-decoration: none;
-    outline: 0;
-    z-index: 0;
-  }
-
-  .button:focus-visible {
-    animation: offset-pulse 400ms ease;
-    animation-fill-mode: forwards;
-    outline-offset: 2px;
-  }
-
-  ::slotted([slot=icon]) {
-    display: inline-block;
-  }
-
-  @keyframes offset-pulse {
-    0% {
-      outline: 4px solid var(--_color-primary);
-    }
-    50% {
-      outline: 8px solid var(--_color-primary);
-    }
-    100% {
-      outline: 4px solid var(--_color-primary);
-    }
-  }
-`;
-//# sourceMappingURL=button-base.styles.js.map

package/button/button-base.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-base.styles.js","sourceRoot":"","sources":["../../src/button/button-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    -webkit-tap-highlight-color: transparent;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: baseline;\n    position: relative;\n    white-space: nowrap;\n    font-family: var(--u-font-family-base, system-ui);\n    transition: color 150ms ease-in-out, background-color 150ms ease-in-out;\n  }\n\n  :host([disabled]) {\n    --u-elevation-level: 0 !important;\n    background-color: var(--u-button-disabled-background-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.12)) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface, 29, 27, 32), 0.38)) !important;\n  }\n\n  :host([disabled]) .button {\n    cursor: default;\n  }\n\n  * {\n    color: inherit;\n  }\n\n  u-elevation {\n    z-index: -1;\n  }\n\n  .button {\n    cursor: pointer;\n    position: absolute;\n    inset: 0;\n    font-family: inherit;\n    border-radius: inherit;\n    color: inherit;\n    border: none;\n    margin: 0;\n    padding: 0;\n    text-align: center;\n    white-space: nowrap;\n    background: transparent;\n    user-select: none;\n    text-decoration: none;\n    outline: 0;\n    z-index: 0;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @keyframes offset-pulse {\n    0% {\n      outline: 4px solid var(--_color-primary);\n    }\n    50% {\n      outline: 8px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`;\n"]}

package/button/button-set.d.ts

@@ -1,20 +0,0 @@
-import { HTMLTemplateResult, LitElement } from 'lit';
-export type UmButtonSetAlignment = 'start' | 'center' | 'end';
-export declare class UmButtonSet extends LitElement {
-    static styles: import("lit").CSSResult;
-    /**
-     * Set the alignment of the buttons at the `start`, `center` or at the `end`.
-     */
-    align: UmButtonSetAlignment;
-    /**
-     * Whether to render the buttons stacked or not
-     */
-    stack: boolean;
-    render(): HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-button-set': UmButtonSet;
-    }
-}
-//# sourceMappingURL=button-set.d.ts.map

package/button/button-set.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-set.d.ts","sourceRoot":"","sources":["../../src/button/button-set.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAK3D,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE9D,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,0BAAU;IAEhC;;OAEG;IACwB,KAAK,EAAE,oBAAoB,CAAS;IAE/D;;OAEG;IACuC,KAAK,UAAS;IAE/C,MAAM,IAAI,kBAAkB;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/button/button-set.js

@@ -1,38 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styles } from './button-set.styles';
-let UmButtonSet = class UmButtonSet extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Set the alignment of the buttons at the `start`, `center` or at the `end`.
-         */
-        this.align = 'end';
-        /**
-         * Whether to render the buttons stacked or not
-         */
-        this.stack = false;
-    }
-    render() {
-        return html `
-      <slot></slot>`;
-    }
-};
-UmButtonSet.styles = styles;
-__decorate([
-    property({ reflect: true })
-], UmButtonSet.prototype, "align", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], UmButtonSet.prototype, "stack", void 0);
-UmButtonSet = __decorate([
-    customElement('u-button-set')
-], UmButtonSet);
-export { UmButtonSet };
-//# sourceMappingURL=button-set.js.map

package/button/button-set.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-set.js","sourceRoot":"","sources":["../../src/button/button-set.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAKtC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL;;WAEG;QACwB,UAAK,GAAyB,KAAK,CAAC;QAE/D;;WAEG;QACuC,UAAK,GAAG,KAAK,CAAC;IAM1D,CAAC;IAJU,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,CAAC;IACnB,CAAC;;AAfe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAKL;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAqC;AAKrB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAe;AAZ7C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkBvB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './button-set.styles';\n\nexport type UmButtonSetAlignment = 'start' | 'center' | 'end';\n\n@customElement('u-button-set')\nexport class UmButtonSet extends LitElement {\n\n  static override styles = styles;\n\n  /**\n   * Set the alignment of the buttons at the `start`, `center` or at the `end`.\n   */\n  @property({reflect: true}) align: UmButtonSetAlignment = 'end';\n\n  /**\n   * Whether to render the buttons stacked or not\n   */\n  @property({type: Boolean, reflect: true}) stack = false;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-set': UmButtonSet;\n  }\n}\n"]}

package/button/button-set.styles.d.ts

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

package/button/button-set.styles.d.ts.map

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

package/button/button-set.styles.js

@@ -1,39 +0,0 @@
-import { css } from 'lit';
-export const styles = css `
-  :host {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  :host([align=start]) {
-    justify-content: flex-start;
-  }
-
-  :host([align=center]) {
-    justify-content: center;
-  }
-
-  :host([align=end]) {
-    justify-content: flex-end;
-  }
-
-  :host([stack][align=start]) {
-    align-items: flex-start;
-  }
-
-  :host([stack][align=center]) {
-    align-items: center;
-  }
-
-  :host([stack][align=end]) {
-    align-items: flex-end;
-  }
-
-  :host([stack]) {
-    flex-direction: column;
-    justify-content: flex-start;
-  }
-`;
-//# sourceMappingURL=button-set.styles.js.map

package/button/button-set.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-set.styles.js","sourceRoot":"","sources":["../../src/button/button-set.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-wrap: wrap;\n  }\n\n  :host([align=start]) {\n    justify-content: flex-start;\n  }\n\n  :host([align=center]) {\n    justify-content: center;\n  }\n\n  :host([align=end]) {\n    justify-content: flex-end;\n  }\n\n  :host([stack][align=start]) {\n    align-items: flex-start;\n  }\n\n  :host([stack][align=center]) {\n    align-items: center;\n  }\n\n  :host([stack][align=end]) {\n    align-items: flex-end;\n  }\n\n  :host([stack]) {\n    flex-direction: column;\n    justify-content: flex-start;\n  }\n`;\n"]}

package/button/button.d.ts

@@ -1,34 +0,0 @@
-import { CSSResult, HTMLTemplateResult } from 'lit';
-import { UmButtonBase } from './button-base';
-import '../ripple/ripple.js';
-export type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
-export type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;
-export declare class UmButton extends UmButtonBase {
-    static styles: CSSResult | CSSResult[];
-    /**
-     * The Button variant to render
-     */
-    variant: UmButtonVariant;
-    /**
-     * The Button color
-     *
-     * _Note:_ Filled buttons only
-     */
-    color: UmButtonColor;
-    trailingIcon: boolean;
-    /**
-     * Whether the button has icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasIcon: boolean;
-    private readonly assignedIcons;
-    protected renderContent(): HTMLTemplateResult;
-    private handleSlotChange;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-button': UmButton;
-    }
-}
-//# sourceMappingURL=button.d.ts.map

package/button/button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvF,qBACa,QAAS,SAAQ,YAAY;IAExC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAA8B;IAE7E;;OAEG;IACwB,OAAO,EAAE,eAAe,CAAY;IAE/D;;;;OAIG;IACwB,KAAK,EAAE,aAAa,CAAC;IAEsB,YAAY,UAAS;IAE3F;;;;OAIG;IAC8D,OAAO,UAAS;IAGjF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;IActD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/button/button.js

@@ -1,64 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-import { UmButtonBase } from './button-base';
-import { styles as buttonBaseStyles } from './button-base.styles';
-import { styles } from './button.styles';
-import '../ripple/ripple.js';
-let UmButton = class UmButton extends UmButtonBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The Button variant to render
-         */
-        this.variant = 'filled';
-        this.trailingIcon = false;
-        /**
-         * Whether the button has icon or not
-         *
-         * _Note:_ Readonly
-         */
-        this.hasIcon = false;
-    }
-    renderContent() {
-        const icon = html `
-      <slot
-        name="icon"
-        aria-hidden="true"
-        @slotchange="${this.handleSlotChange}"></slot>`;
-        return html `
-      ${this.trailingIcon ? nothing : icon}
-      <span><slot></slot></span>
-      ${this.trailingIcon ? icon : nothing}
-    `;
-    }
-    handleSlotChange() {
-        this.hasIcon = this.assignedIcons.length > 0;
-    }
-};
-UmButton.styles = [buttonBaseStyles, styles];
-__decorate([
-    property({ reflect: true })
-], UmButton.prototype, "variant", void 0);
-__decorate([
-    property({ reflect: true })
-], UmButton.prototype, "color", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'trailing-icon', reflect: true })
-], UmButton.prototype, "trailingIcon", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'has-icon', reflect: true })
-], UmButton.prototype, "hasIcon", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'icon', flatten: true })
-], UmButton.prototype, "assignedIcons", void 0);
-UmButton = __decorate([
-    customElement('u-button')
-], UmButton);
-export { UmButton };
-//# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAa,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAMtB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,YAAY;IAAnC;;QAIL;;WAEG;QACwB,YAAO,GAAoB,QAAQ,CAAC;QASO,iBAAY,GAAG,KAAK,CAAC;QAE3F;;;;WAIG;QAC8D,YAAO,GAAG,KAAK,CAAC;IAsBnF,CAAC;IAjBoB,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;;;uBAIE,IAAI,CAAC,gBAAgB,WAAW,CAAC;QAEpD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAElC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;AA1Ce,eAAM,GAA4B,CAAC,gBAAgB,EAAE,MAAM,CAAC,AAAtD,CAAuD;AAKlD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAqC;AAOpC;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAsB;AAEsB;IAArE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAAsB;AAO1B;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAiB;AAGhE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CACN;AA1BpC,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CA6CpB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base';\nimport { styles as buttonBaseStyles } from './button-base.styles';\nimport { styles } from './button.styles';\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;\n\n@customElement('u-button')\nexport class UmButton extends UmButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property({reflect: true}) variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   *\n   * _Note:_ Filled buttons only\n   */\n  @property({reflect: true}) color: UmButtonColor;\n\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;\n\n  /**\n   * Whether the button has icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n    const icon = html`\n      <slot\n        name=\"icon\"\n        aria-hidden=\"true\"\n        @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      ${this.trailingIcon ? nothing : icon}\n      <span><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}

package/button/button.styles.d.ts

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

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

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

package/button/button.styles.js

@@ -1,96 +0,0 @@
-import { css } from 'lit';
-export const styles = css `
-  :host {
-    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);
-    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);
-    --u-common-button-font-weight: var(--u-font-weight-medium, 500);
-    --_common-button-height: var(--u-common-button-height, 2.5rem);
-    --_common-button-padding: var(--u-common-button-padding, 24px);
-    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);
-    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));
-    font-family: var(--u-font-family-base, system-ui);
-    height: var(--u-common-button-height, 40px);
-    font-size: var(--u-common-button-font-size);
-    font-weight: var(--u-common-button-font-weight);
-    padding-inline: var(--_common-button-padding);
-    box-sizing: border-box;
-  }
-
-  :host([variant=filled]),
-  :host([variant=filled][color=primary]) {
-    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));
-    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
-  }
-
-  :host([variant=filled][color=secondary]) {
-    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));
-    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
-  }
-
-  :host([variant=filled][color=tertiary]) {
-    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));
-    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));
-  }
-
-  :host([variant=filled][color=error]) {
-    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));
-    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));
-  }
-
-  :host([variant=tonal]) {
-    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
-    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
-  }
-
-  :host([variant=elevated]) {
-    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
-    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
-  }
-
-  @media (hover: hover) {
-    :host([variant=filled]:hover:not(:focus-within):not(:active)),
-    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {
-      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
-    }
-  }
-  :host([variant=outlined]),
-  :host([variant=text]),
-  :host([variant=elevated]) {
-    color: var(--_color-primary);
-  }
-
-  :host([variant=outlined]) {
-    border: 1px solid var(--u-color-outline-color, );
-  }
-
-  :host([variant=elevated]) {
-    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
-  }
-
-  @media (hover: hover) {
-    :host([variant=elevated]:hover) {
-      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
-    }
-  }
-  :host([has-icon]) {
-    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);
-  }
-
-  :host([has-icon][trailing-icon]) {
-    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);
-  }
-
-  ::slotted([slot=icon]) {
-    display: inline-block;
-    width: var(--u-common-button-icon-size, 1.125rem);
-    height: var(--u-common-button-icon-size, 1.125rem);
-    margin-inline-end: 8px;
-    font-size: var(--u-common-button-icon-size, 1.125rem);
-    line-height: var(--u-common-button-icon-size, 1.125rem);
-  }
-
-  :host([trailing-icon]) ::slotted([slot=icon]) {
-    margin-inline: 8px 0;
-  }
-`;
-//# sourceMappingURL=button.styles.js.map

package/button/button.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../src/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n    --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-height: var(--u-common-button-height, 2.5rem);\n    --_common-button-padding: var(--u-common-button-padding, 24px);\n    --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n    border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n    font-family: var(--u-font-family-base, system-ui);\n    height: var(--u-common-button-height, 40px);\n    font-size: var(--u-common-button-font-size);\n    font-weight: var(--u-common-button-font-weight);\n    padding-inline: var(--_common-button-padding);\n    box-sizing: border-box;\n  }\n\n  :host([variant=filled]),\n  :host([variant=filled][color=primary]) {\n    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=secondary]) {\n    background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=tertiary]) {\n    background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n    color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=filled][color=error]) {\n    background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n    color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n  }\n\n  :host([variant=tonal]) {\n    background-color: var(--u-tonal-button-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:hover:not(:focus-within):not(:active)),\n    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  :host([variant=outlined]),\n  :host([variant=text]),\n  :host([variant=elevated]) {\n    color: var(--_color-primary);\n  }\n\n  :host([variant=outlined]) {\n    border: 1px solid var(--u-color-outline-color, );\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host([variant=elevated]:hover) {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n  :host([has-icon]) {\n    padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n  }\n\n  :host([has-icon][trailing-icon]) {\n    padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n    width: var(--u-common-button-icon-size, 1.125rem);\n    height: var(--u-common-button-icon-size, 1.125rem);\n    margin-inline-end: 8px;\n    font-size: var(--u-common-button-icon-size, 1.125rem);\n    line-height: var(--u-common-button-icon-size, 1.125rem);\n  }\n\n  :host([trailing-icon]) ::slotted([slot=icon]) {\n    margin-inline: 8px 0;\n  }\n`;\n"]}

package/button/fab.d.ts

@@ -1,31 +0,0 @@
-import { CSSResult, HTMLTemplateResult } from 'lit';
-import { UmButtonBase } from './button-base';
-export type UmFabColor = 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';
-export type UmFabSize = 'small' | 'medium' | 'large';
-export declare class UmFab extends UmButtonBase {
-    static styles: CSSResult | CSSResult[];
-    /**
-     * The FAB color variant to render.
-     */
-    color: UmFabColor;
-    /**
-     * The size of the FAB.
-     */
-    size: UmFabSize;
-    /**
-     * The text to display the FAB.
-     */
-    label: string | null;
-    /**
-     * Lowers the FAB's elevation.
-     */
-    lowered: boolean;
-    get extended(): boolean;
-    protected renderContent(): HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'u-fab': UmFab;
-    }
-}
-//# sourceMappingURL=fab.d.ts.map

package/button/fab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAI7C,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,EAAE,SAAS,GAAG,SAAS,EAAE,CAA8B;IAE7E;;OAEG;IACwB,KAAK,EAAE,UAAU,CAAa;IAEzD;;OAEG;IACwB,IAAI,EAAE,SAAS,CAAY;IAEtD;;OAEG;IACwB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEvD;;OAEG;IACuC,OAAO,UAAS;IAE1D,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"}

package/button/fab.js

@@ -1,63 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { UmButtonBase } from './button-base';
-import { styles as buttonBaseStyles } from './button-base.styles';
-import { styles } from './fab.styles';
-let UmFab = class UmFab extends UmButtonBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * The FAB color variant to render.
-         */
-        this.color = 'primary';
-        /**
-         * The size of the FAB.
-         */
-        this.size = 'medium';
-        /**
-         * The text to display the FAB.
-         */
-        this.label = null;
-        /**
-         * Lowers the FAB's elevation.
-         */
-        this.lowered = false;
-    }
-    get extended() {
-        return !!this.label;
-    }
-    renderContent() {
-        const labelTag = html `<span>${this.label}</span>`;
-        return html `
-      <span class="icon" aria-hidden="true"><slot></slot></span>
-      ${this.label ? labelTag : nothing}
-    `;
-    }
-};
-UmFab.styles = [buttonBaseStyles, styles];
-__decorate([
-    property({ reflect: true })
-], UmFab.prototype, "color", void 0);
-__decorate([
-    property({ reflect: true })
-], UmFab.prototype, "size", void 0);
-__decorate([
-    property({ reflect: true })
-], 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);
-export { UmFab };
-//# sourceMappingURL=fab.js.map

package/button/fab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAa,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACnE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAM/B,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,YAAY;IAAhC;;QAIL;;WAEG;QACwB,UAAK,GAAe,SAAS,CAAC;QAEzD;;WAEG;QACwB,SAAI,GAAc,QAAQ,CAAC;QAEtD;;WAEG;QACwB,UAAK,GAAkB,IAAI,CAAC;QAEvD;;WAEG;QACuC,YAAO,GAAG,KAAK,CAAC;IAe5D,CAAC;IAZC,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;;AAlCe,YAAM,GAA4B,CAAC,gBAAgB,EAAE,MAAM,CAAC,AAAtD,CAAuD;AAKlD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oCAA+B;AAK9B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;mCAA4B;AAK3B;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;oCAA6B;AAKb;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAiB;AAG1D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAGxC;AA3BU,KAAK;IADjB,aAAa,CAAC,OAAO,CAAC;GACV,KAAK,CAqCjB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base';\nimport { styles as buttonBaseStyles } from './button-base.styles';\nimport { styles } from './fab.styles';\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: CSSResult | CSSResult[] = [buttonBaseStyles, 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"]}

package/button/fab.styles.d.ts

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

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

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

package/button/fab.styles.js

@@ -1,89 +0,0 @@
-import { css } from 'lit';
-export const styles = css `
-  :host {
-    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);
-    }
-  }
-  @media (hover: hover) {
-    :host(:hover:not(:focus-within):not(:active)) {
-      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);
-    }
-  }
-  :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));
-  }
-
-  :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));
-  }
-
-  :host([size=large]) .icon {
-    font-size: var(--u-fab-button-icon-size, 2rem);
-  }
-
-  :host([extended]) .icon,
-  :host([size=small]) .icon,
-  :host([size=medium]) .icon {
-    font-size: var(--u-fab-button-icon-size, 1.5rem);
-  }
-
-  :host([extended]) {
-    width: auto;
-    height: var(--u-extended-fab-button-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);
-  }
-
-  :host([extended]) .icon {
-    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);
-  }
-
-  :host([color=primary]) {
-    background-color: var(--u-fab-button-primary-background-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)));
-  }
-
-  :host([color=secondary]) {
-    background-color: var(--u-fab-button-secondary-background-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)));
-  }
-
-  :host([color=tertiary]) {
-    background-color: var(--u-fab-button-tertiary-background-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)));
-  }
-
-  :host([color=branded]),
-  :host([color=surface]) {
-    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));
-    color: var(--u-fab-button-surface-text-color, var(--_color-primary));
-  }
-
-  :host([color=branded][lowered]),
-  :host([color=surface][lowered]) {
-    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
-  }
-`;
-//# sourceMappingURL=fab.styles.js.map

package/button/fab.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fab.styles.js","sourceRoot":"","sources":["../../src/button/fab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    aspect-ratio: 1;\n    --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n  }\n\n  :host([lowered]) {\n    --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n  }\n\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n    :host(:hover:not(:focus-within):not(:active)[lowered]) {\n      --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n    }\n  }\n  @media (hover: hover) {\n    :host(:hover:not(:focus-within):not(:active)) {\n      --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n    }\n  }\n  :host([size=small]) {\n    width: var(--u-fab-button-small-size, 40px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n  }\n\n  :host([size=large]) {\n    width: var(--u-fab-button-medium-size, 96px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n  }\n\n  :host([extended]),\n  :host([size=medium]) {\n    width: var(--u-fab-button-medium-size, 56px);\n    border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n  }\n\n  :host([size=large]) .icon {\n    font-size: var(--u-fab-button-icon-size, 2rem);\n  }\n\n  :host([extended]) .icon,\n  :host([size=small]) .icon,\n  :host([size=medium]) .icon {\n    font-size: var(--u-fab-button-icon-size, 1.5rem);\n  }\n\n  :host([extended]) {\n    width: auto;\n    height: var(--u-extended-fab-button-height, 56px);\n    aspect-ratio: auto;\n    min-width: var(--u-extended-fab-button-min-width, 80px);\n    padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n  }\n\n  :host([extended]) .icon {\n    margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n  }\n\n  :host([color=primary]) {\n    background-color: var(--u-fab-button-primary-background-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n    color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n  }\n\n  :host([color=secondary]) {\n    background-color: var(--u-fab-button-secondary-background-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host([color=tertiary]) {\n    background-color: var(--u-fab-button-tertiary-background-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n    color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n  }\n\n  :host([color=branded]),\n  :host([color=surface]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n    color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n  }\n\n  :host([color=branded][lowered]),\n  :host([color=surface][lowered]) {\n    background-color: var(--u-fab-button-surface-background-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n  }\n`;\n"]}