@universal-material/web 3.4.1 → 3.5.0

package/button/button-base.d.ts

@@ -8,6 +8,6 @@ export declare abstract class UmButtonBase extends UmButtonWrapper {
     value: string;
     get form(): HTMLFormElement | null;
     constructor();
-    protected handleClick(_: UIEvent): void;
+    protected _handleClick(_: UIEvent): void;
 }
 //# sourceMappingURL=button-base.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,8BAAsB,YAAa,SAAQ,eAAe;;IAExD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9D,IAAI,SAAY;IAEC,KAAK,SAAM;IAExC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CA8BjD"}
+{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAI/D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAG9D,8BAAsB,YAAa,SAAQ,eAAe;;IAExD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,cAAc,CAAoC;IAE9D,IAAI,SAAY;IAEC,KAAK,SAAM;IAExC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,YAAY,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CA8BlD"}

package/button/button-base.js

@@ -15,7 +15,7 @@ export class UmButtonBase extends UmButtonWrapper {
         this.value = '';
         this.#elementInternals = this.attachInternals();
     }
-    handleClick(_) {
+    _handleClick(_) {
         if (this.type === 'button' || !!this.href) {
             return;
         }

package/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,OAAgB,YAAa,SAAQ,eAAe;aAExC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAM1E,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACrC,CAAC;IAEQ,iBAAiB,CAAmB;IAE7C;QACE,KAAK,EAAE,CAAC;QAXE,SAAI,GAAG,QAAQ,CAAC;QAEC,UAAK,GAAG,EAAE,CAAC;QAUtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAClD,CAAC;IAEkB,WAAW,CAAC,CAAU;QAEvC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,QAAQ,EACR,WAAW,CAAC,EAAE;YACZ,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;gBAC9C,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAC9B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;;AA5CW;IAAX,QAAQ,EAAE;0CAAiB;AAEC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './button-base.styles.js';\n\nexport abstract class UmButtonBase extends UmButtonWrapper {\n\n  static readonly formAssociated = true;\n\n  static override styles: CSSResultGroup = [UmButtonWrapper.styles, styles];\n\n  @property() type = 'submit';\n\n  @property({ reflect: true }) value = '';\n\n  get form(): HTMLFormElement | null {\n    return this.#elementInternals.form;\n  }\n\n  readonly #elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.#elementInternals = this.attachInternals();\n  }\n\n  protected override handleClick(_: UIEvent): void {\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    if (!this.form) {\n      return;\n    }\n\n    this.#elementInternals.setFormValue(this.value);\n\n    if (this.type === 'reset') {\n      this.form.reset();\n      return;\n    }\n\n    this.form.addEventListener(\n      'submit',\n      submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => this,\n        });\n      },\n      { capture: true, once: true },\n    );\n    this.form.requestSubmit();\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,OAAgB,YAAa,SAAQ,eAAe;aAExC,mBAAc,GAAG,IAAI,AAAP,CAAQ;aAEtB,WAAM,GAAmB,CAAC,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnD,CAAoD;IAM1E,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACrC,CAAC;IAEQ,iBAAiB,CAAmB;IAE7C;QACE,KAAK,EAAE,CAAC;QAXE,SAAI,GAAG,QAAQ,CAAC;QAEC,UAAK,GAAG,EAAE,CAAC;QAUtC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAClD,CAAC;IAEkB,YAAY,CAAC,CAAU;QAExC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1C,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,gBAAgB,CACxB,QAAQ,EACR,WAAW,CAAC,EAAE;YACZ,MAAM,CAAC,cAAc,CAAC,WAAW,EAAE,WAAW,EAAE;gBAC9C,YAAY,EAAE,IAAI;gBAClB,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI;aAChB,CAAC,CAAC;QACL,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAC9B,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;IAC5B,CAAC;;AA5CW;IAAX,QAAQ,EAAE;0CAAiB;AAEC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { property } from 'lit/decorators.js';\n\nimport { UmButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './button-base.styles.js';\n\nexport abstract class UmButtonBase extends UmButtonWrapper {\n\n  static readonly formAssociated = true;\n\n  static override styles: CSSResultGroup = [UmButtonWrapper.styles, styles];\n\n  @property() type = 'submit';\n\n  @property({ reflect: true }) value = '';\n\n  get form(): HTMLFormElement | null {\n    return this.#elementInternals.form;\n  }\n\n  readonly #elementInternals: ElementInternals;\n\n  constructor() {\n    super();\n    this.#elementInternals = this.attachInternals();\n  }\n\n  protected override _handleClick(_: UIEvent): void {\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    if (!this.form) {\n      return;\n    }\n\n    this.#elementInternals.setFormValue(this.value);\n\n    if (this.type === 'reset') {\n      this.form.reset();\n      return;\n    }\n\n    this.form.addEventListener(\n      'submit',\n      submitEvent => {\n        Object.defineProperty(submitEvent, 'submitter', {\n          configurable: true,\n          enumerable: true,\n          get: () => this,\n        });\n      },\n      { capture: true, once: true },\n    );\n    this.form.requestSubmit();\n  }\n}\n"]}

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

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

package/button/button-base.styles.js

@@ -2,6 +2,9 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     --_morph-duration: var(--u-button-morph-duration, 125ms);
+  }
+
+  .container {
     transition: background-color var(--_morph-duration) linear, border-radius var(--_morph-duration) linear, color var(--_morph-duration) linear;
   }
 

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_morph-duration: var(--u-button-morph-duration, 125ms);\n    transition: background-color var(--_morph-duration) linear, border-radius var(--_morph-duration) linear, color var(--_morph-duration) linear;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n`;\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;CAqBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_morph-duration: var(--u-button-morph-duration, 125ms);\n  }\n\n  .container {\n    transition: background-color var(--_morph-duration) linear, border-radius var(--_morph-duration) linear, color var(--_morph-duration) linear;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n`;\n"]}

package/button/button.d.ts

@@ -4,7 +4,7 @@ import { HTMLTemplateResult } from 'lit';
 import { UmToggleButton } from './toggle-button.js';
 import '../ripple/ripple.js';
 export type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';
-export type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error' | undefined;
+export type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error';
 export declare class UmButton extends UmToggleButton {
     #private;
     static styles: CSSResultGroup;
@@ -17,20 +17,14 @@ export declare class UmButton extends UmToggleButton {
      */
     color: UmButtonColor;
     trailingIcon: boolean;
-    /**
-     * Whether the button has icon or not
-     *
-     * _Note:_ Readonly
-     */
-    hasIcon: boolean;
-    hasSelectionLabel: boolean;
+    private _hasIcon;
+    private _hasSelectionLabel;
     animateTextChange: boolean;
     private readonly _textWrapper;
     private readonly _text;
     firstUpdated(changedProperties: PropertyValues): void;
-    protected renderContent(): HTMLTemplateResult;
-    private handleIconSlotChange;
-    protected handleSelectedLabelSlotChange(e: Event): void;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,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,cAAc;;IAC1C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEzE;;OAEG;IAC0B,OAAO,EAAE,eAAe,CAAY;IAEjE;;OAEG;IAC0B,KAAK,EAAE,aAAa,CAAC;IAEsB,YAAY,UAAS;IAE7F;;;;OAIG;IACgE,OAAO,UAAS;IAEL,iBAAiB,UAAS;IAE/F,iBAAiB,UAAS;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IACtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAInD,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAuBpC,aAAa,IAAI,kBAAkB;IA0BtD,OAAO,CAAC,oBAAoB;IAI5B,SAAS,CAAC,6BAA6B,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;CAGxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAK/C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,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,CAAC;AAE3E,qBACa,QAAS,SAAQ,cAAc;;IAC1C,OAAgB,MAAM,EAAE,cAAc,CAAmC;IAEzE;;OAEG;IACS,OAAO,EAAE,eAAe,CAAY;IAEhD;;OAEG;IACS,KAAK,EAAE,aAAa,CAAa;IAE2B,YAAY,UAAS;IAEpF,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,kBAAkB,CAAS;IACnC,iBAAiB,UAAS;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAe;IACtD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAInD,YAAY,CAAC,iBAAiB,EAAE,cAAc;cAuBpC,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAW/C,cAAc,IAAI,kBAAkB;CAiCxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}

package/button/button.js

@@ -12,14 +12,13 @@ let UmButton = class UmButton extends UmToggleButton {
          * The Button variant to render
          */
         this.variant = 'filled';
-        this.trailingIcon = false;
         /**
-         * Whether the button has icon or not
-         *
-         * _Note:_ Readonly
+         * The Button color
          */
-        this.hasIcon = false;
-        this.hasSelectionLabel = false;
+        this.color = 'primary';
+        this.trailingIcon = false;
+        this._hasIcon = false;
+        this._hasSelectionLabel = false;
         this.animateTextChange = false;
     }
     static { this.styles = [UmToggleButton.styles, styles]; }
@@ -39,15 +38,25 @@ let UmButton = class UmButton extends UmToggleButton {
         }
         setTimeout(() => this.animateTextChange = animateTextChange);
     }
-    renderContent() {
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            [this.color]: true,
+            [this.variant]: true,
+            'trailing-icon': this.trailingIcon,
+            'has-icon': this._hasIcon,
+            'has-selection-label': this._hasSelectionLabel,
+        };
+    }
+    _renderContent() {
         const labelContainerClasses = { animate: this.animateTextChange };
         return html `
       <span class="icon-container" aria-hidden="true">
         <span class="icon icon-default">
-          <slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot>
+          <slot name="icon" @slotchange="${this.#handleIconSlotChange}"></slot>
         </span>
         <span class="icon icon-selected">
-          <slot name="icon-selected" @slotchange="${this.handleSelectedIconSlotChange}"></slot>
+          <slot name="icon-selected" @slotchange="${this._handleSelectedIconSlotChange}"></slot>
         </span>
       </span>
 
@@ -57,34 +66,34 @@ let UmButton = class UmButton extends UmToggleButton {
             <slot></slot>
           </span>
           <span class="label label-selected">
-            <slot name="label-selected" @slotchange="${this.handleSelectedLabelSlotChange}"></slot>
+            <slot name="label-selected" @slotchange="${this.#handleSelectedLabelSlotChange}"></slot>
           </span>
         </span>
       </span>
     `;
     }
-    handleIconSlotChange(e) {
-        this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
+    #handleIconSlotChange(e) {
+        this._hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
     }
-    handleSelectedLabelSlotChange(e) {
-        this.hasSelectionLabel = e.target.assignedElements({ flatten: true }).length > 0;
+    #handleSelectedLabelSlotChange(e) {
+        this._hasSelectionLabel = e.target.assignedElements({ flatten: true }).length > 0;
     }
 };
 __decorate([
-    property({ reflect: true })
+    property()
 ], UmButton.prototype, "variant", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], 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);
+    state()
+], UmButton.prototype, "_hasIcon", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'has-selection-label', reflect: true })
-], UmButton.prototype, "hasSelectionLabel", void 0);
+    state()
+], UmButton.prototype, "_hasSelectionLabel", void 0);
 __decorate([
     state()
 ], UmButton.prototype, "animateTextChange", void 0);

package/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\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 UmToggleButton {\n  static override styles: CSSResultGroup = [UmToggleButton.styles, 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  @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  @property({ type: Boolean, attribute: 'has-selection-label', reflect: true }) hasSelectionLabel = false;\n\n  @state() animateTextChange = false;\n\n  @query('.label-container', true) private readonly _textWrapper!: HTMLElement;\n  @query('#label', true) private readonly _text!: HTMLElement;\n\n  #textSizeObserver!: ResizeObserver | null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.#textSizeObserver = new ResizeObserver(() => this.#setTextWrapperWidth());\n    this.#textSizeObserver.observe(this._text);\n    this.#setTextWrapperWidth();\n  }\n\n  #setTextWrapperWidth(): void {\n\n    const width = `${this._text.offsetWidth}px`;\n    this._textWrapper.style.width = width;\n\n    const animateTextChange = !!parseInt(width, 10);\n\n    if (this.animateTextChange === animateTextChange) {\n      return;\n    }\n\n    setTimeout(() =>\n      this.animateTextChange = animateTextChange);\n  }\n\n  protected override renderContent(): HTMLTemplateResult {\n    const labelContainerClasses = { animate: this.animateTextChange };\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"icon-selected\" @slotchange=\"${this.handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n\n      <span class=\"label-container ${classMap(labelContainerClasses)}\">\n        <span id=\"label\">\n          <span class=\"label label-default\">\n            <slot></slot>\n          </span>\n          <span class=\"label label-selected\">\n            <slot name=\"label-selected\" @slotchange=\"${this.handleSelectedLabelSlotChange}\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  private handleIconSlotChange(e: Event) {\n    this.hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  protected handleSelectedLabelSlotChange(e: Event): void {\n    this.hasSelectionLabel = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles } from './button.styles.js';\nimport { UmToggleButton } from './toggle-button.js';\n\nimport '../ripple/ripple.js';\n\nexport type UmButtonVariant = 'filled' | 'tonal' | 'elevated' | 'outlined' | 'text';\nexport type UmButtonColor = 'primary' | 'secondary' | 'tertiary' | 'error';\n\n@customElement('u-button')\nexport class UmButton extends UmToggleButton {\n  static override styles: CSSResultGroup = [UmToggleButton.styles, styles];\n\n  /**\n   * The Button variant to render\n   */\n  @property() variant: UmButtonVariant = 'filled';\n\n  /**\n   * The Button color\n   */\n  @property() color: UmButtonColor = 'primary';\n\n  @property({ type: Boolean, attribute: 'trailing-icon', reflect: true }) trailingIcon = false;\n\n  @state() private _hasIcon = false;\n  @state() private _hasSelectionLabel = false;\n  @state() animateTextChange = false;\n\n  @query('.label-container', true) private readonly _textWrapper!: HTMLElement;\n  @query('#label', true) private readonly _text!: HTMLElement;\n\n  #textSizeObserver!: ResizeObserver | null;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    this.#textSizeObserver = new ResizeObserver(() => this.#setTextWrapperWidth());\n    this.#textSizeObserver.observe(this._text);\n    this.#setTextWrapperWidth();\n  }\n\n  #setTextWrapperWidth(): void {\n\n    const width = `${this._text.offsetWidth}px`;\n    this._textWrapper.style.width = width;\n\n    const animateTextChange = !!parseInt(width, 10);\n\n    if (this.animateTextChange === animateTextChange) {\n      return;\n    }\n\n    setTimeout(() =>\n      this.animateTextChange = animateTextChange);\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      [this.color]: true,\n      [this.variant]: true,\n      'trailing-icon': this.trailingIcon,\n      'has-icon': this._hasIcon,\n      'has-selection-label': this._hasSelectionLabel,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const labelContainerClasses = { animate: this.animateTextChange };\n\n    return html`\n      <span class=\"icon-container\" aria-hidden=\"true\">\n        <span class=\"icon icon-default\">\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\n        </span>\n        <span class=\"icon icon-selected\">\n          <slot name=\"icon-selected\" @slotchange=\"${this._handleSelectedIconSlotChange}\"></slot>\n        </span>\n      </span>\n\n      <span class=\"label-container ${classMap(labelContainerClasses)}\">\n        <span id=\"label\">\n          <span class=\"label label-default\">\n            <slot></slot>\n          </span>\n          <span class=\"label label-selected\">\n            <slot name=\"label-selected\" @slotchange=\"${this.#handleSelectedLabelSlotChange}\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  #handleIconSlotChange(e: Event) {\n    this._hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n\n  #handleSelectedLabelSlotChange(e: Event): void {\n    this._hasSelectionLabel = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': UmButton;\n  }\n}\n"]}

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

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

package/button/button.styles.js

@@ -50,128 +50,119 @@ export const styles = css `
     --_padding: var(--_small-padding);
     --_icon-margin: var(--_small-icon-margin);
     --_round-shape-corner: var(--u-common-button-round-shape-corner, calc(var(--_size) / 2));
-    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");
-    font-size: var(--_font-size);
-    font-weight: var(--_font-weight);
-    padding-inline: var(--_padding);
-    box-sizing: border-box;
   }
 
-  :host([size=extra-small]) {
+  .extra-small {
     --_font-size: var(--_extra-small-font-size);
     --_font-weight: var(--_extra-small-font-weight);
     --_padding: var(--_extra-small-padding);
     --_icon-margin: var(--_extra-small-icon-margin);
   }
 
-  :host([size=medium]) {
+  .medium {
     --_font-size: var(--_medium-font-size);
     --_font-weight: var(--_medium-font-weight);
     --_padding: var(--_medium-padding);
     --_icon-margin: var(--_medium-icon-margin);
   }
 
-  :host([size=large]) {
+  .large {
     --_font-size: var(--_large-font-size);
     --_font-weight: var(--_large-font-weight);
     --_padding: var(--_large-padding);
     --_icon-margin: var(--_large-icon-margin);
   }
 
-  :host([size=extra-large]) {
+  .extra-large {
     --_font-size: var(--_extra-large-font-size);
     --_font-weight: var(--_extra-large-font-weight);
     --_padding: var(--_extra-large-padding);
     --_icon-margin: var(--_extra-large-icon-margin);
   }
 
-  :host([variant=filled][toggle]) {
-    background-color: var(--u-filled-button-primary-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247)));
-    color: var(--u-filled-button-primary-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  .container {
+    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");
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    padding-inline: var(--_padding);
+    box-sizing: border-box;
   }
 
-  :host([variant=filled]:not([toggle])),
-  :host([variant=filled][selected]),
-  :host([variant=filled][color=primary]:not([toggle])),
-  :host([variant=filled][color=primary][selected]) {
-    background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));
+  .filled.primary, .filled.primary.selected {
+    background-color: var(--u-filled-button-primary-container-color, var(--u-color-primary, rgb(103, 80, 164)));
     color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));
   }
-
-  :host([variant=filled][color=secondary]:not([toggle])),
-  :host([variant=filled][color=secondary][selected]) {
+  .filled.secondary, .filled.secondary.selected {
     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]:not([toggle])),
-  :host([variant=filled][color=tertiary][selected]) {
+  .filled.tertiary, .filled.tertiary.selected {
     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]:not([toggle])),
-  :host([variant=filled][color=error][selected]) {
+  .filled.error, .filled.error.selected {
     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)));
   }
+  .filled.toggle {
+    background-color: var(--u-filled-button-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247)));
+    color: var(--u-filled-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
 
-  :host([variant=tonal]) {
+  .tonal {
     background-color: var(--u-tonal-button-container-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=tonal][selected]) {
+  .tonal.selected {
     background-color: var(--u-tonal-button-container-selected-color, var(--u-color-secondary, rgb(98, 91, 113)));
     color: var(--u-tonal-button-text-selected-color, var(--u-color-on-secondary, rgb(255, 255, 255)));
   }
 
-  :host([variant=elevated]) {
+  .elevated {
     background-color: var(--u-elevated-button-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));
     color: var(--u-elevated-button-text-color, var(--u-color-primary, rgb(103, 80, 164)));
   }
-
-  :host([variant=elevated][selected]) {
+  .elevated.selected {
     background-color: var(--u-elevated-button-container-selected-color, var(--u-color-primary, rgb(103, 80, 164)));
     color: var(--u-elevated-button-text-selected-color, var(--u-color-on-primary, rgb(255, 255, 255)));
   }
 
   @media (hover: hover) {
-    :host([variant=filled]:hover:not(:focus-within):not(:active)),
-    :host([variant=tonal]:hover:not(:focus-within):not(:active)) {
+    .filled:hover:not(:focus-within):not(:active),
+    .tonal:hover:not(:focus-within):not(:active) {
       --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
     }
   }
-  :host([variant=text]) {
+  .text {
     color: var(--u-text-button-text-color, var(--_color-primary));
   }
 
-  :host([variant=outlined]) {
+  .outlined {
     color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));
     border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));
   }
-
-  :host([variant=outlined][selected]) {
+  .outlined.selected {
     background-color: var(--u-outlined-button-container-selected-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));
     color: var(--u-outlined-button-text-selected-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
   }
-
-  :host([variant=elevated]) {
-    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
-    color: var(--u-elevated-button-text-color, var(--_color-primary));
+  .outlined.disabled {
+    border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important;
   }
-
-  :host([disabled][variant=outlined]) {
+  .outlined.disabled:not(.selected) {
     background-color: transparent !important;
-    border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important;
   }
 
+  .elevated {
+    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
+    color: var(--u-elevated-button-text-color, var(--_color-primary));
+  }
   @media (hover: hover) {
-    :host([variant=elevated]:hover) {
+    .elevated:hover {
       --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
     }
   }
-  :host(:not([has-icon])) .icon-container {
+
+  .container:not(.has-icon) .icon-container {
     display: none;
   }
 
@@ -183,7 +174,7 @@ export const styles = css `
     font-size: var(--_icon-size);
   }
 
-  :host([trailing-icon]) .content {
+  .trailing-icon .content {
     flex-direction: row-reverse;
   }
 
@@ -215,12 +206,12 @@ export const styles = css `
     transition-delay: 0ms;
   }
 
-  :host([selected][has-selection-label]) .label-default {
+  .selected.has-selection-label .label-default {
     position: absolute;
     opacity: 0;
     transition-delay: 0ms;
   }
-  :host([selected][has-selection-label]) .label-selected {
+  .selected.has-selection-label .label-selected {
     position: static;
     opacity: 1;
     transition-delay: calc(var(--_morph-duration) / 2);

package/button/button.styles.js.map

@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOzB,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, .875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-padding: var(--u-common-button-padding, 16px);\n    --_extra-small-font-size: var(--u-common-button-extra-small-font-size, .875rem);\n    --_small-font-size: var(--u-common-button-small-font-size, .875rem);\n    --_medium-font-size: var(--u-common-button-medium-font-size, 1rem);\n    --_large-font-size: var(--u-common-button-large-font-size, 1.5rem);\n    --_extra-large-font-size: var(--u-common-button-extra-large-font-size, 2rem);\n    --_extra-small-font-weight: var(--u-common-button-extra-small-font-weight, var(--u-font-weight-medium, 500));\n    --_small-font-weight: var(--u-common-button-small-font-weight, var(--u-font-weight-medium, 500));\n    --_medium-font-weight: var(--u-common-button-medium-font-weight, var(--u-font-weight-medium, 500));\n    --_large-font-weight: var(--u-common-button-large-font-weight, var(--u-font-weight-regular, 400));\n    --_extra-large-font-weight: var(--u-common-button-extra-large-font-weight, var(--u-font-weight-regular, 400));\n    --_extra-small-size: var(--u-common-button-extra-small-height, 32px);\n    --_small-size: var(--u-common-button-small-height, 40px);\n    --_medium-size: var(--u-common-button-medium-height, 56px);\n    --_large-size: var(--u-common-button-large-height, 96px);\n    --_extra-large-size: var(--u-common-button-extra-large-height, 136px);\n    --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n    --_small-icon-size: var(--u-icon-button-small-icon-size, 1.25rem);\n    --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n    --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n    --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n    --_extra-small-icon-margin: var(--u-icon-button-extra-small-icon-margin, 8px);\n    --_small-icon-margin: var(--u-icon-button-small-icon-margin, 8px);\n    --_medium-icon-margin: var(--u-icon-button-medium-icon-margin, 8px);\n    --_large-icon-margin: var(--u-icon-button-large-icon-margin, 12px);\n    --_extra-large-icon-margin: var(--u-icon-button-extra-large-icon-margin, 16px);\n    --_extra-small-padding: var(--u-common-button-extra-small-padding, 12px);\n    --_small-padding: var(--u-common-button-small-padding, 16px);\n    --_medium-padding: var(--u-common-button-medium-padding, 24px);\n    --_large-padding: var(--u-common-button-large-padding, 48px);\n    --_extra-large-padding: var(--u-common-button-extra-large-padding, 64px);\n    --_extra-small-square-shape-corner: var(--u-common-button-extra-small-square-shape-corner, 12px);\n    --_small-square-shape-corner: var(--u-common-button-small-square-shape-corner, 12px);\n    --_medium-square-shape-corner: var(--u-common-button-medium-square-shape-corner, 16px);\n    --_large-square-shape-corner: var(--u-common-button-large-square-shape-corner, 28px);\n    --_extra-large-square-shape-corner: var(--u-common-button-extra-large-square-shape-corner, 28px);\n    --_extra-small-pressed-shape-corner: var(--u-common-button-extra-small-pressed-shape-corner, 8px);\n    --_small-pressed-shape-corner: var(--u-common-button-small-pressed-shape-corner, 8px);\n    --_medium-pressed-shape-corner: var(--u-common-button-medium-pressed-shape-corner, 12px);\n    --_large-pressed-shape-corner: var(--u-common-button-large-pressed-shape-corner, 16px);\n    --_extra-large-pressed-shape-corner: var(--u-common-button-extra-large-pressed-shape-corner, 16px);\n    --_font-size: var(--_small-font-size);\n    --_font-weight: var(--_small-font-weight);\n    --_padding: var(--_small-padding);\n    --_icon-margin: var(--_small-icon-margin);\n    --_round-shape-corner: var(--u-common-button-round-shape-corner, calc(var(--_size) / 2));\n    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    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    padding-inline: var(--_padding);\n    box-sizing: border-box;\n  }\n\n  :host([size=extra-small]) {\n    --_font-size: var(--_extra-small-font-size);\n    --_font-weight: var(--_extra-small-font-weight);\n    --_padding: var(--_extra-small-padding);\n    --_icon-margin: var(--_extra-small-icon-margin);\n  }\n\n  :host([size=medium]) {\n    --_font-size: var(--_medium-font-size);\n    --_font-weight: var(--_medium-font-weight);\n    --_padding: var(--_medium-padding);\n    --_icon-margin: var(--_medium-icon-margin);\n  }\n\n  :host([size=large]) {\n    --_font-size: var(--_large-font-size);\n    --_font-weight: var(--_large-font-weight);\n    --_padding: var(--_large-padding);\n    --_icon-margin: var(--_large-icon-margin);\n  }\n\n  :host([size=extra-large]) {\n    --_font-size: var(--_extra-large-font-size);\n    --_font-weight: var(--_extra-large-font-weight);\n    --_padding: var(--_extra-large-padding);\n    --_icon-margin: var(--_extra-large-icon-margin);\n  }\n\n  :host([variant=filled][toggle]) {\n    background-color: var(--u-filled-button-primary-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  :host([variant=filled]:not([toggle])),\n  :host([variant=filled][selected]),\n  :host([variant=filled][color=primary]:not([toggle])),\n  :host([variant=filled][color=primary][selected]) {\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]:not([toggle])),\n  :host([variant=filled][color=secondary][selected]) {\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]:not([toggle])),\n  :host([variant=filled][color=tertiary][selected]) {\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]:not([toggle])),\n  :host([variant=filled][color=error][selected]) {\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-container-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=tonal][selected]) {\n    background-color: var(--u-tonal-button-container-selected-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-tonal-button-text-selected-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  :host([variant=elevated]) {\n    background-color: var(--u-elevated-button-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-elevated-button-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  :host([variant=elevated][selected]) {\n    background-color: var(--u-elevated-button-container-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n    color: var(--u-elevated-button-text-selected-color, var(--u-color-on-primary, rgb(255, 255, 255)));\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=text]) {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  :host([variant=outlined]) {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n\n  :host([variant=outlined][selected]) {\n    background-color: var(--u-outlined-button-container-selected-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-button-text-selected-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n\n  :host([variant=elevated]) {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n\n  :host([disabled][variant=outlined]) {\n    background-color: transparent !important;\n    border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important;\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(:not([has-icon])) .icon-container {\n    display: none;\n  }\n\n  .content {\n    gap: var(--_icon-margin);\n  }\n\n  .icon {\n    font-size: var(--_icon-size);\n  }\n\n  :host([trailing-icon]) .content {\n    flex-direction: row-reverse;\n  }\n\n  #label {\n    display: inline-block;\n  }\n\n  .label {\n    display: inline-block;\n    inset-inline-start: 0;\n    transition-duration: calc(var(--_morph-duration) * 0.7);\n  }\n\n  .label-container {\n    position: relative;\n  }\n  .label-container.animate {\n    transition: width var(--_morph-duration) linear;\n  }\n\n  .label-default {\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  .label-selected {\n    position: absolute;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n\n  :host([selected][has-selection-label]) .label-default {\n    position: absolute;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n  :host([selected][has-selection-label]) .label-selected {\n    position: static;\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n`;\n"]}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNzB,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, .875rem);\n    --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n    --_common-button-padding: var(--u-common-button-padding, 16px);\n    --_extra-small-font-size: var(--u-common-button-extra-small-font-size, .875rem);\n    --_small-font-size: var(--u-common-button-small-font-size, .875rem);\n    --_medium-font-size: var(--u-common-button-medium-font-size, 1rem);\n    --_large-font-size: var(--u-common-button-large-font-size, 1.5rem);\n    --_extra-large-font-size: var(--u-common-button-extra-large-font-size, 2rem);\n    --_extra-small-font-weight: var(--u-common-button-extra-small-font-weight, var(--u-font-weight-medium, 500));\n    --_small-font-weight: var(--u-common-button-small-font-weight, var(--u-font-weight-medium, 500));\n    --_medium-font-weight: var(--u-common-button-medium-font-weight, var(--u-font-weight-medium, 500));\n    --_large-font-weight: var(--u-common-button-large-font-weight, var(--u-font-weight-regular, 400));\n    --_extra-large-font-weight: var(--u-common-button-extra-large-font-weight, var(--u-font-weight-regular, 400));\n    --_extra-small-size: var(--u-common-button-extra-small-height, 32px);\n    --_small-size: var(--u-common-button-small-height, 40px);\n    --_medium-size: var(--u-common-button-medium-height, 56px);\n    --_large-size: var(--u-common-button-large-height, 96px);\n    --_extra-large-size: var(--u-common-button-extra-large-height, 136px);\n    --_extra-small-icon-size: var(--u-icon-button-extra-small-icon-size, 1.25rem);\n    --_small-icon-size: var(--u-icon-button-small-icon-size, 1.25rem);\n    --_medium-icon-size: var(--u-icon-button-medium-icon-size, 1.5rem);\n    --_large-icon-size: var(--u-icon-button-large-icon-size, 2rem);\n    --_extra-large-icon-size: var(--u-icon-button-extra-large-icon-size, 2.5rem);\n    --_extra-small-icon-margin: var(--u-icon-button-extra-small-icon-margin, 8px);\n    --_small-icon-margin: var(--u-icon-button-small-icon-margin, 8px);\n    --_medium-icon-margin: var(--u-icon-button-medium-icon-margin, 8px);\n    --_large-icon-margin: var(--u-icon-button-large-icon-margin, 12px);\n    --_extra-large-icon-margin: var(--u-icon-button-extra-large-icon-margin, 16px);\n    --_extra-small-padding: var(--u-common-button-extra-small-padding, 12px);\n    --_small-padding: var(--u-common-button-small-padding, 16px);\n    --_medium-padding: var(--u-common-button-medium-padding, 24px);\n    --_large-padding: var(--u-common-button-large-padding, 48px);\n    --_extra-large-padding: var(--u-common-button-extra-large-padding, 64px);\n    --_extra-small-square-shape-corner: var(--u-common-button-extra-small-square-shape-corner, 12px);\n    --_small-square-shape-corner: var(--u-common-button-small-square-shape-corner, 12px);\n    --_medium-square-shape-corner: var(--u-common-button-medium-square-shape-corner, 16px);\n    --_large-square-shape-corner: var(--u-common-button-large-square-shape-corner, 28px);\n    --_extra-large-square-shape-corner: var(--u-common-button-extra-large-square-shape-corner, 28px);\n    --_extra-small-pressed-shape-corner: var(--u-common-button-extra-small-pressed-shape-corner, 8px);\n    --_small-pressed-shape-corner: var(--u-common-button-small-pressed-shape-corner, 8px);\n    --_medium-pressed-shape-corner: var(--u-common-button-medium-pressed-shape-corner, 12px);\n    --_large-pressed-shape-corner: var(--u-common-button-large-pressed-shape-corner, 16px);\n    --_extra-large-pressed-shape-corner: var(--u-common-button-extra-large-pressed-shape-corner, 16px);\n    --_font-size: var(--_small-font-size);\n    --_font-weight: var(--_small-font-weight);\n    --_padding: var(--_small-padding);\n    --_icon-margin: var(--_small-icon-margin);\n    --_round-shape-corner: var(--u-common-button-round-shape-corner, calc(var(--_size) / 2));\n  }\n\n  .extra-small {\n    --_font-size: var(--_extra-small-font-size);\n    --_font-weight: var(--_extra-small-font-weight);\n    --_padding: var(--_extra-small-padding);\n    --_icon-margin: var(--_extra-small-icon-margin);\n  }\n\n  .medium {\n    --_font-size: var(--_medium-font-size);\n    --_font-weight: var(--_medium-font-weight);\n    --_padding: var(--_medium-padding);\n    --_icon-margin: var(--_medium-icon-margin);\n  }\n\n  .large {\n    --_font-size: var(--_large-font-size);\n    --_font-weight: var(--_large-font-weight);\n    --_padding: var(--_large-padding);\n    --_icon-margin: var(--_large-icon-margin);\n  }\n\n  .extra-large {\n    --_font-size: var(--_extra-large-font-size);\n    --_font-weight: var(--_extra-large-font-weight);\n    --_padding: var(--_extra-large-padding);\n    --_icon-margin: var(--_extra-large-icon-margin);\n  }\n\n  .container {\n    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    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    padding-inline: var(--_padding);\n    box-sizing: border-box;\n  }\n\n  .filled.primary, .filled.primary.selected {\n    background-color: var(--u-filled-button-primary-container-color, var(--u-color-primary, rgb(103, 80, 164)));\n    color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n  .filled.secondary, .filled.secondary.selected {\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  .filled.tertiary, .filled.tertiary.selected {\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  .filled.error, .filled.error.selected {\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  .filled.toggle {\n    background-color: var(--u-filled-button-container-unselected-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    color: var(--u-filled-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .tonal {\n    background-color: var(--u-tonal-button-container-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  .tonal.selected {\n    background-color: var(--u-tonal-button-container-selected-color, var(--u-color-secondary, rgb(98, 91, 113)));\n    color: var(--u-tonal-button-text-selected-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n  }\n\n  .elevated {\n    background-color: var(--u-elevated-button-container-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n    color: var(--u-elevated-button-text-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n  .elevated.selected {\n    background-color: var(--u-elevated-button-container-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n    color: var(--u-elevated-button-text-selected-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n  }\n\n  @media (hover: hover) {\n    .filled:hover:not(:focus-within):not(:active),\n    .tonal:hover:not(:focus-within):not(:active) {\n      --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n    }\n  }\n  .text {\n    color: var(--u-text-button-text-color, var(--_color-primary));\n  }\n\n  .outlined {\n    color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n    border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n  }\n  .outlined.selected {\n    background-color: var(--u-outlined-button-container-selected-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    color: var(--u-outlined-button-text-selected-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n  }\n  .outlined.disabled {\n    border-color: var(--u-outlined-button-disabled-border-color, color-mix(in srgb, var(--u-color-on-surface, rgb(29, 27, 32)) var(--u-outlined-button-disabled-border-opacity, 12%), transparent)) !important;\n  }\n  .outlined.disabled:not(.selected) {\n    background-color: transparent !important;\n  }\n\n  .elevated {\n    --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n    color: var(--u-elevated-button-text-color, var(--_color-primary));\n  }\n  @media (hover: hover) {\n    .elevated:hover {\n      --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n    }\n  }\n\n  .container:not(.has-icon) .icon-container {\n    display: none;\n  }\n\n  .content {\n    gap: var(--_icon-margin);\n  }\n\n  .icon {\n    font-size: var(--_icon-size);\n  }\n\n  .trailing-icon .content {\n    flex-direction: row-reverse;\n  }\n\n  #label {\n    display: inline-block;\n  }\n\n  .label {\n    display: inline-block;\n    inset-inline-start: 0;\n    transition-duration: calc(var(--_morph-duration) * 0.7);\n  }\n\n  .label-container {\n    position: relative;\n  }\n  .label-container.animate {\n    transition: width var(--_morph-duration) linear;\n  }\n\n  .label-default {\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n\n  .label-selected {\n    position: absolute;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n\n  .selected.has-selection-label .label-default {\n    position: absolute;\n    opacity: 0;\n    transition-delay: 0ms;\n  }\n  .selected.has-selection-label .label-selected {\n    position: static;\n    opacity: 1;\n    transition-delay: calc(var(--_morph-duration) / 2);\n  }\n`;\n"]}

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

@@ -0,0 +1,5 @@
+import { UmFabColor } from './fab.js';
+export declare const fabMenuColorContext: {
+    __context__: UmFabColor;
+};
+//# sourceMappingURL=fab-menu-color-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-color-context.d.ts","sourceRoot":"","sources":["../../src/button/fab-menu-color-context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,eAAO,MAAM,mBAAmB;;CAA2D,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-color-context.js","sourceRoot":"","sources":["../../src/button/fab-menu-color-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAI7C,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAa,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\nimport { UmFabColor } from './fab.js';\n\nexport const fabMenuColorContext = createContext<UmFabColor>(Symbol('fabMenuColorContext'));\n"]}

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

@@ -0,0 +1,23 @@
+import { HTMLTemplateResult } from 'lit';
+import { UmButtonBase } from './button-base.js';
+export declare class UmFabMenuItem extends UmButtonBase {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    private readonly _color;
+    private readonly _menuOpen;
+    /**
+     * The text to display the FAB menu item.
+     */
+    label: string | null;
+    private _hasIcon;
+    get _index(): number;
+    set _index(value: number);
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-fab-menu-item': UmFabMenuItem;
+    }
+}
+//# sourceMappingURL=fab-menu-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-item.d.ts","sourceRoot":"","sources":["../../src/button/fab-menu-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhD,qBACa,aAAc,SAAQ,YAAY;;IAE7C,OAAgB,MAAM,iCAAiC;IAKvD,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAc;IAIrC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAW;IAErC;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE/B,OAAO,CAAC,QAAQ,CAAS;IAElC,IACI,MAAM,WAET;IAED,IAAI,MAAM,CAAC,KAAK,QAAA,EAGf;cAEkB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAS/C,cAAc,IAAI,kBAAkB;CAaxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/button/fab-menu-item.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { consume } from '@lit/context';
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { UmButtonBase } from './button-base.js';
+import { fabMenuColorContext } from './fab-menu-color-context.js';
+import { styles } from './fab-menu-item.styles.js';
+import { fabMenuOpenContext } from './fab-menu-open-context.js';
+let UmFabMenuItem = class UmFabMenuItem extends UmButtonBase {
+    constructor() {
+        super(...arguments);
+        this.#index = 0;
+        /**
+         * The text to display the FAB menu item.
+         */
+        this.label = null;
+        this._hasIcon = false;
+    }
+    static { this.styles = [UmButtonBase.styles, styles]; }
+    #index;
+    get _index() {
+        return this.#index;
+    }
+    set _index(value) {
+        this.#index = value;
+        this.style.setProperty('--_animation-delay-increment', value.toString());
+    }
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            open: this._menuOpen,
+            [this._color]: true,
+            'has-icon': this._hasIcon,
+        };
+    }
+    _renderContent() {
+        return html `
+      <span class="clipper"></span>
+      <span class="icon" aria-hidden="true">
+        <slot @slotchange=${this.#handleIconSlotChange}></slot>
+      </span>
+      <span class="label">${this.label}</span>
+    `;
+    }
+    #handleIconSlotChange(e) {
+        this._hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
+    }
+};
+__decorate([
+    consume({ context: fabMenuColorContext, subscribe: true }),
+    state()
+], UmFabMenuItem.prototype, "_color", void 0);
+__decorate([
+    consume({ context: fabMenuOpenContext, subscribe: true }),
+    state()
+], UmFabMenuItem.prototype, "_menuOpen", void 0);
+__decorate([
+    property()
+], UmFabMenuItem.prototype, "label", void 0);
+__decorate([
+    state()
+], UmFabMenuItem.prototype, "_hasIcon", void 0);
+__decorate([
+    state()
+], UmFabMenuItem.prototype, "_index", null);
+UmFabMenuItem = __decorate([
+    customElement('u-fab-menu-item')
+], UmFabMenuItem);
+export { UmFabMenuItem };
+//# sourceMappingURL=fab-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fab-menu-item.js","sourceRoot":"","sources":["../../src/button/fab-menu-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAsB,MAAM,KAAK,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIzD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,YAAY;IAAxC;;QAGL,WAAM,GAAG,CAAC,CAAC;QAUX;;WAEG;QACS,UAAK,GAAkB,IAAI,CAAC;QAEvB,aAAQ,GAAG,KAAK,CAAC;IAkCpC,CAAC;aAlDiB,WAAM,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAhC,CAAiC;IACvD,MAAM,CAAK;IAkBX,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,MAAM,CAAC,KAAK;QACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,8BAA8B,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3E,CAAC;IAEkB,oBAAoB;QACrC,OAAO;YACL,GAAG,KAAK,CAAC,oBAAoB,EAAE;YAC/B,IAAI,EAAE,IAAI,CAAC,SAAS;YACpB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI;YACnB,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;IACJ,CAAC;IAEkB,cAAc;QAC/B,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,qBAAqB;;4BAE1B,IAAI,CAAC,KAAK;KACjC,CAAC;IACJ,CAAC;IAED,qBAAqB,CAAC,CAAQ;QAC5B,IAAI,CAAC,QAAQ,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/F,CAAC;;AA5CgB;IAFhB,OAAO,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IAC1D,KAAK,EAAE;6CAC6B;AAIpB;IAFhB,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACzD,KAAK,EAAE;gDAC6B;AAKzB;IAAX,QAAQ,EAAE;4CAA6B;AAEvB;IAAhB,KAAK,EAAE;+CAA0B;AAGlC;IADC,KAAK,EAAE;2CAGP;AAvBU,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAoDzB","sourcesContent":["import { consume } from '@lit/context';\n\nimport { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { UmButtonBase } from './button-base.js';\nimport { fabMenuColorContext } from './fab-menu-color-context.js';\nimport { styles } from './fab-menu-item.styles.js';\nimport { fabMenuOpenContext } from './fab-menu-open-context.js';\nimport { UmFabColor } from './fab.js';\n\n@customElement('u-fab-menu-item')\nexport class UmFabMenuItem extends UmButtonBase {\n\n  static override styles = [UmButtonBase.styles, styles];\n  #index = 0;\n\n  @consume({ context: fabMenuColorContext, subscribe: true })\n  @state()\n  private readonly _color!: UmFabColor;\n\n  @consume({ context: fabMenuOpenContext, subscribe: true })\n  @state()\n  private readonly _menuOpen!: boolean;\n\n  /**\n   * The text to display the FAB menu item.\n   */\n  @property() label: string | null = null;\n\n  @state() private _hasIcon = false;\n\n  @state()\n  get _index() {\n    return this.#index;\n  }\n\n  set _index(value) {\n    this.#index = value;\n    this.style.setProperty('--_animation-delay-increment', value.toString());\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      open: this._menuOpen,\n      [this._color]: true,\n      'has-icon': this._hasIcon,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    return html`\n      <span class=\"clipper\"></span>\n      <span class=\"icon\" aria-hidden=\"true\">\n        <slot @slotchange=${this.#handleIconSlotChange}></slot>\n      </span>\n      <span class=\"label\">${this.label}</span>\n    `;\n  }\n\n  #handleIconSlotChange(e: Event) {\n    this._hasIcon = (e.target as HTMLSlotElement).assignedElements({ flatten: true }).length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-fab-menu-item': UmFabMenuItem;\n  }\n}\n"]}

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

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

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

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