@universal-material/web 3.0.0 → 3.0.2

package/button/button.js

@@ -4,22 +4,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-import '../ripple/ripple';
 import { ButtonBase } from './button-base';
-let Button = class Button extends ButtonBase {
+import { styles as buttonBaseStyles } from './button-base.styles';
+import { styles } from './button.styles';
+import '../ripple/ripple.js';
+let UmButton = class UmButton extends ButtonBase {
     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>`;
+        const icon = html `
+      <slot
+        name="icon"
+        aria-hidden="true"
+        @slotchange="${this.handleSlotChange}"></slot>`;
         return html `
       ${this.trailingIcon ? nothing : icon}
       <span><slot></slot></span>
@@ -30,108 +41,24 @@ let Button = class Button extends ButtonBase {
         this.hasIcon = this.assignedIcons.length > 0;
     }
 };
-Button.styles = [
-    ButtonBase.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, 9999px);
-        font-family: var(--u-font-family-base, system-ui);
-        height: var(--u-common-button-height, 40px);
-      }
-  
-      :host([variant="filled"]) {
-        background-color: var(--u-filled-button-background-color, var(--_primary-color));
-        color: var(--u-filled-button-text-color, var(--u-on-primary-color, #fff));
-      }
-  
-      :host([variant="tonal"]) {
-        background-color: var(--u-tonal-button-background-color, var(--u-secondary-container-color, #e8def8));
-        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));
-      }
-
-      :host([variant="elevated"]) {
-        background-color: var(--u-elevated-button-background-color, var(--u-surface-container-low-color, #f7f2fa));
-        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));
-      }
-  
-      @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(--_primary-color);
-      }
-  
-      :host([variant="outlined"]) {
-        border: 1px solid var(--u-outline-color, #79747e);
-      }
-  
-      :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);
-        }
-      }
-  
-      .button {
-        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([has-icon]) .button {
-        padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);
-      }
-  
-      :host([has-icon][trailing-icon]) .button {
-        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;
-      }
-    `
-];
+UmButton.styles = [buttonBaseStyles, styles];
 __decorate([
     property({ reflect: true })
-], Button.prototype, "variant", void 0);
+], UmButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], UmButton.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'trailing-icon', reflect: true })
-], Button.prototype, "trailingIcon", void 0);
+], UmButton.prototype, "trailingIcon", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'has-icon', reflect: true })
-], Button.prototype, "hasIcon", void 0);
+], UmButton.prototype, "hasIcon", void 0);
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
-], Button.prototype, "assignedIcons", void 0);
-Button = __decorate([
+], UmButton.prototype, "assignedIcons", void 0);
+UmButton = __decorate([
     customElement('u-button')
-], Button);
-export { Button };
+], UmButton);
+export { UmButton };
 //# sourceMappingURL=button.js.map

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,GAAG,EAAa,IAAI,EAAsB,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAEjF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAGlC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QA2FsB,YAAO,GAA6C,QAAQ,CAAC;QAElB,iBAAY,GAAG,KAAK,CAAC;QAC1B,YAAO,GAAG,KAAK,CAAC;IAqBnF,CAAC;IAhBoB,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;;qBAGA,IAAI,CAAC,gBAAgB,WAAW,CAAC;QAElD,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;;AAhHe,aAAM,GAA4B;IACrC,UAAU,CAAC,MAAM;IAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoFF;CACF,AAvFqB,CAuFpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA8D;AAElB;IAArE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAsB;AAC1B;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAiB;AAGhE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CACN;AAjGpC,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CAmHlB","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, nothing} from 'lit';\nimport {customElement, property, queryAssignedElements} from 'lit/decorators.js';\n\nimport '../ripple/ripple';\nimport {ButtonBase} from './button-base';\n\n@customElement('u-button')\nexport class Button extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [\n    <CSSResult>ButtonBase.styles,\n    css`\n  \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  \n        border-radius: var(--u-common-button-shape, 9999px);\n        font-family: var(--u-font-family-base, system-ui);\n        height: var(--u-common-button-height, 40px);\n      }\n  \n      :host([variant=\"filled\"]) {\n        background-color: var(--u-filled-button-background-color, var(--_primary-color));\n        color: var(--u-filled-button-text-color, var(--u-on-primary-color, #fff));\n      }\n  \n      :host([variant=\"tonal\"]) {\n        background-color: var(--u-tonal-button-background-color, var(--u-secondary-container-color, #e8def8));\n        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));\n      }\n\n      :host([variant=\"elevated\"]) {\n        background-color: var(--u-elevated-button-background-color, var(--u-surface-container-low-color, #f7f2fa));\n        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));\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  \n      :host([variant=\"outlined\"]),\n      :host([variant=\"text\"]),\n      :host([variant=\"elevated\"]) {\n        color: var(--_primary-color);\n      }\n  \n      :host([variant=\"outlined\"]) {\n        border: 1px solid var(--u-outline-color, #79747e);\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  \n      .button {\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([has-icon]) .button {\n        padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n      }\n  \n      :host([has-icon][trailing-icon]) .button {\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  ];\n\n  @property({reflect: true}) variant: 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';\n\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;\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`<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': Button;\n  }\n}\n"]}
+{"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,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,qBAAqB,CAAC;AAGtB,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIL;;WAEG;QACwB,YAAO,GAA0D,QAAQ,CAAC;QAS/B,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;yCAA2E;AAO1E;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAmE;AAEvB;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 { ButtonBase } from './button-base';\nimport { styles as buttonBaseStyles } from './button-base.styles';\nimport { styles } from './button.styles';\nimport '../ripple/ripple.js';\n\n@customElement('u-button')\nexport class UmButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property({reflect: true}) variant: 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text' = 'filled';\n\n  /**\n   * The Button color\n   *\n   * _Note:_ Filled buttons only\n   */\n  @property({reflect: true}) color: 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;\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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,96 @@
+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

@@ -0,0 +1 @@
+{"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,17 +1,29 @@
 import { CSSResult, HTMLTemplateResult } from 'lit';
 import { ButtonBase } from './button-base';
-export declare class FabButton extends ButtonBase {
+export declare class UmFabButton extends ButtonBase {
     static styles: CSSResult | CSSResult[];
+    /**
+     * The FAB color variant to render.
+     */
     color: 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';
+    /**
+     * The size of the FAB.
+     */
     size: 'small' | 'medium' | 'large';
+    /**
+     * 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': FabButton;
+        'u-fab': UmFabButton;
     }
 }
 //# sourceMappingURL=fab.d.ts.map

package/button/fab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAQ,kBAAkB,EAAU,MAAM,KAAK,CAAC;AAGtE,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,qBACa,SAAU,SAAQ,UAAU;IAEvC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CA+F7C;IAEyB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAa;IAChF,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC9C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IACb,OAAO,UAAS;IAC1D,IACI,QAAQ,IAAI,OAAO,CAEtB;cAEkB,aAAa,IAAI,kBAAkB;CAQvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,OAAO,EAAE,SAAS,CAAC;KACpB;CACF"}
+{"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,UAAU,EAAE,MAAM,eAAe,CAAC;AAI3C,qBACa,WAAY,SAAQ,UAAU;IAEzC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAA8B;IAE7E;;OAEG;IACwB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAa;IAE3G;;OAEG;IACwB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAEzE;;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,WAAW,CAAC;KACtB;CACF"}

package/button/fab.js

@@ -4,15 +4,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { css, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ButtonBase } from './button-base';
-let FabButton = class FabButton extends ButtonBase {
+import { styles as buttonBaseStyles } from './button-base.styles';
+import { styles } from './fab.styles';
+let UmFabButton = class UmFabButton extends ButtonBase {
     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() {
@@ -26,119 +40,24 @@ let FabButton = class FabButton extends ButtonBase {
     `;
     }
 };
-FabButton.styles = [
-    ButtonBase.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, 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, 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, var(--u-shape-corner-large, 16px));
-      }
-
-      :host([size="large"]) .icon {
-        font-size: var(--u-fab-button-icon-size, 2rem);
-      }
-
-      :host([extended]),
-      :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);
-      }
-
-      :host([extended]) .button {
-        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-primary-container-color, #eaddff));
-        color: var(--u-fab-button-primary-text-color, var(--u-on-primary-container-color, #21005d));        
-      }
-
-      :host([color="secondary"]) {
-        background-color: var(--u-fab-button-secondary-background-color, var(--u-secondary-container-color, #e8def8));
-        color: var(--u-fab-button-secondary-text-color, var(--u-on-secondary-container-color, #1d192b));        
-      }
-
-      :host([color="tertiary"]) {
-        background-color: var(--u-fab-button-tertiary-background-color, var(--u-tertiary-container-color, #ffd8e4));
-        color: var(--u-fab-button-tertiary-text-color, var(--u-on-tertiary-container-color, #31111d));
-      }
-
-      :host([color="branded"]),
-      :host([color="surface"]) {
-        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-high-color, #ece6f0));
-        color: var(--u-fab-button-surface-text-color, var(--_primary-color));
-      }
-
-      :host([color="branded"][lowered]),
-      :host([color="surface"][lowered]) {
-        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-low-color, #ece6f0));
-      }
-    `
-];
+UmFabButton.styles = [buttonBaseStyles, styles];
 __decorate([
     property({ reflect: true })
-], FabButton.prototype, "color", void 0);
+], UmFabButton.prototype, "color", void 0);
 __decorate([
     property({ reflect: true })
-], FabButton.prototype, "size", void 0);
+], UmFabButton.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
-], FabButton.prototype, "label", void 0);
+], UmFabButton.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], FabButton.prototype, "lowered", void 0);
+], UmFabButton.prototype, "lowered", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], FabButton.prototype, "extended", null);
-FabButton = __decorate([
+], UmFabButton.prototype, "extended", null);
+UmFabButton = __decorate([
     customElement('u-fab')
-], FabButton);
-export { FabButton };
+], UmFabButton);
+export { UmFabButton };
 //# sourceMappingURL=fab.js.map

package/button/fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"fab.js","sourceRoot":"","sources":["../../src/button/fab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,GAAG,EAAa,IAAI,EAAsB,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAGlC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmGsB,UAAK,GAAiE,SAAS,CAAC;QAChF,SAAI,GAAiC,QAAQ,CAAC;QAC9C,UAAK,GAAkB,IAAI,CAAC;QACb,YAAO,GAAG,KAAK,CAAC;IAc5D,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;;AAjHe,gBAAM,GAA4B;IACrC,UAAU,CAAC,MAAM;IAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FF;CACF,AA/FqB,CA+FpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiF;AAChF;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA+C;AAC9C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAA6B;AACb;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiB;AAE1D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAGxC;AA1GU,SAAS;IADrB,aAAa,CAAC,OAAO,CAAC;GACV,SAAS,CAoHrB","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\n\nimport {ButtonBase} from './button-base';\n\n@customElement('u-fab')\nexport class FabButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [\n    <CSSResult>ButtonBase.styles,\n    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\n        :host(:hover:not(:focus-within):not(:active)[lowered]) {\n          --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n        }\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\n      :host([size=\"small\"]) {\n        width: var(--u-fab-button-small-size, 40px);\n        border-radius: var(--u-fab-button-medium-shape, 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, 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, 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]),\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      }\n\n      :host([extended]) .button {\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-primary-container-color, #eaddff));\n        color: var(--u-fab-button-primary-text-color, var(--u-on-primary-container-color, #21005d));        \n      }\n\n      :host([color=\"secondary\"]) {\n        background-color: var(--u-fab-button-secondary-background-color, var(--u-secondary-container-color, #e8def8));\n        color: var(--u-fab-button-secondary-text-color, var(--u-on-secondary-container-color, #1d192b));        \n      }\n\n      :host([color=\"tertiary\"]) {\n        background-color: var(--u-fab-button-tertiary-background-color, var(--u-tertiary-container-color, #ffd8e4));\n        color: var(--u-fab-button-tertiary-text-color, var(--u-on-tertiary-container-color, #31111d));\n      }\n\n      :host([color=\"branded\"]),\n      :host([color=\"surface\"]) {\n        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-high-color, #ece6f0));\n        color: var(--u-fab-button-surface-text-color, var(--_primary-color));\n      }\n\n      :host([color=\"branded\"][lowered]),\n      :host([color=\"surface\"][lowered]) {\n        background-color: var(--u-fab-button-surface-background-color, var(--u-surface-container-low-color, #ece6f0));\n      }\n    `\n  ];\n\n  @property({reflect: true}) color: 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded' = 'primary';\n  @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';\n  @property({reflect: true}) label: string | null = null;\n  @property({type: Boolean, reflect: true}) lowered = false;\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 name=\"icon\"></slot></span>\n      ${this.label ? labelTag : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab': FabButton;\n  }\n}\n"]}
+{"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,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAG/B,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL;;WAEG;QACwB,UAAK,GAAiE,SAAS,CAAC;QAE3G;;WAEG;QACwB,SAAI,GAAiC,QAAQ,CAAC;QAEzE;;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,kBAAM,GAA4B,CAAC,gBAAgB,EAAE,MAAM,CAAC,AAAtD,CAAuD;AAKlD;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAiF;AAKhF;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;yCAA+C;AAK9C;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;0CAA6B;AAKb;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAiB;AAG1D;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CAGxC;AA3BU,WAAW;IADvB,aAAa,CAAC,OAAO,CAAC;GACV,WAAW,CAqCvB","sourcesContent":["import { CSSResult, html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { ButtonBase } from './button-base';\nimport { styles as buttonBaseStyles } from './button-base.styles';\nimport { styles } from './fab.styles';\n\n@customElement('u-fab')\nexport class UmFabButton extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [buttonBaseStyles, styles];\n  \n  /**\n   * The FAB color variant to render.\n   */\n  @property({reflect: true}) color: 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded' = 'primary';\n\n  /**\n   * The size of the FAB.\n   */\n  @property({reflect: true}) size: 'small' | 'medium' | 'large' = '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 name=\"icon\"></slot></span>\n      ${this.label ? labelTag : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab': UmFabButton;\n  }\n}\n"]}

package/button/fab.styles.d.ts

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1 @@
+{"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"]}