@universal-material/web 3.0.0 → 3.0.1

package/README.md

@@ -0,0 +1,28 @@
+# Universal Material
+
+### Getting started
+
+#### Install
+Install Universal Material components using [npm and node](https://nodejs.org/).
+
+```
+npm i @universal-material/web
+```
+
+### Import
+Import element definitions from `@universal-material/web/<component>/<component-variant>.js` or import everything from `@universal-material/web`.
+```
+// index.js
+import '@universal-material/web/button/button.js';
+import '@universal-material/web/card/card.js';
+import '@universal-material/web/checkbox/checkbox.js';
+```
+
+### Documentation
+https://universal-material.github.io
+
+## Thanks
+
+<img src="https://live.browserstack.com/images/opensource/browserstack-logo.svg" alt="BrowserStack Logo" width="490" height="106">
+
+Thanks to [BrowserStack](https://www.browserstack.com/) for providing the infrastructure that allows us to test in real browsers!

package/button/button-base.d.ts

@@ -1,11 +1,11 @@
-import { CSSResult, HTMLTemplateResult, LitElement, nothing } from 'lit';
-import '../elevation/elevation';
-import '../ripple/ripple';
+import { HTMLTemplateResult, LitElement, nothing } from 'lit';
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
 export declare abstract class ButtonBase extends LitElement {
+    #private;
     static readonly formAssociated = true;
-    static styles: CSSResult | CSSResult[];
     /**
-     * Whether or not the button is disabled.
+     * Whether the button is disabled or not.
      */
     disabled: boolean;
     /**
@@ -16,11 +16,18 @@ export declare abstract class ButtonBase extends LitElement {
      * Where to display the linked `href` URL for a link button. Common options
      * include `_blank` to open in a new tab.
      */
-    target: '_blank' | '_parent' | '_self' | '_top' | '';
-    type: 'submit' | 'button' | 'reset';
-    form: string | null;
+    target: string;
+    type: string;
+    value: string;
+    name: string | undefined;
     private readonly buttonElement;
     private readonly ripple;
+    /**
+     * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
+     */
+    get form(): HTMLFormElement | null;
+    constructor();
     protected render(): import("lit-html").TemplateResult<1>;
     private renderButton;
     private renderLink;
@@ -32,6 +39,5 @@ export declare abstract class ButtonBase extends LitElement {
     protected getAriaLabel(): string | null | typeof nothing;
     private innerHandleClick;
     protected handleClick(_: UIEvent): void;
-    private getFormElement;
 }
 //# 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,EAAM,SAAS,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAGlF,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAG1B,8BAAsB,UAAW,SAAQ,UAAU;IAEjD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAmE/C;IAEA;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,SAAM;IAEtB;;;OAGG;IACS,MAAM,EAAE,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,EAAE,CAAM;IAE1D,IAAI,EAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAGhD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAU;cAGjC,MAAM;IAOzB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,UAAU;IAgBlB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAKpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,gBAAgB;IA0BxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;IAIvC,OAAO,CAAC,cAAc;CAOvB"}
+{"version":3,"file":"button-base.d.ts","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAG7B,8BAAsB,UAAW,SAAQ,UAAU;;IAEjD,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAEtC;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,SAAM;IAEtB;;;OAGG;IACS,MAAM,EAAE,MAAM,CAAM;IAEpB,IAAI,EAAE,MAAM,CAAY;IAET,KAAK,EAAE,MAAM,CAAM;IAClC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD;;;OAGG;IACH,IACI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;;cASkB,MAAM;IAMzB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAelB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAMjB,oBAAoB;IAMpB,KAAK;IAIL,IAAI;IAIb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,gBAAgB;IA8BxB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}

package/button/button-base.js

@@ -4,15 +4,34 @@ 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, LitElement, nothing } from 'lit';
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _ButtonBase_elementInternals;
+import { html, LitElement, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import '../elevation/elevation';
-import '../ripple/ripple';
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
 export class ButtonBase extends LitElement {
+    /**
+     * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form
+     */
+    get form() {
+        return __classPrivateFieldGet(this, _ButtonBase_elementInternals, "f").form;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * Whether or not the button is disabled.
+         * Whether the button is disabled or not.
          */
         this.disabled = false;
         /**
@@ -25,8 +44,9 @@ export class ButtonBase extends LitElement {
          */
         this.target = '';
         this.type = 'submit';
-        // @property() variant: 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';
-        this.form = null;
+        this.value = '';
+        _ButtonBase_elementInternals.set(this, void 0);
+        __classPrivateFieldSet(this, _ButtonBase_elementInternals, this.attachInternals(), "f");
     }
     render() {
         return this.href
@@ -34,7 +54,6 @@ export class ButtonBase extends LitElement {
             : this.renderButton();
     }
     renderButton() {
-        // Needed for closure conformance
         return html `
       <button
         id="button"
@@ -42,14 +61,12 @@ export class ButtonBase extends LitElement {
         ?disabled=${this.disabled}
         aria-label="${this.getAriaLabel()}"
         type="button">
-        <u-elevation></u-elevation>
         <u-ripple ?disabled=${this.disabled}></u-ripple>
-        ${this.renderContent()}
-      </button>`;
+        <u-elevation></u-elevation>
+      </button>
+      ${this.renderContent()}`;
     }
     renderLink() {
-        // Needed for closure conformance
-        // const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
         return html `<a
       id="link"
       class="button"
@@ -59,8 +76,8 @@ export class ButtonBase extends LitElement {
       target=${this.target || nothing}>
       <u-elevation></u-elevation>
       <u-ripple ?disabled=${this.disabled}></u-ripple>
-      ${this.renderContent()}
-    </a>`;
+    </a>
+    ${this.renderContent()}`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -90,91 +107,21 @@ export class ButtonBase extends LitElement {
         if (this.type === 'button' || !!this.href) {
             return;
         }
-        const formElement = this.getFormElement();
+        if (!this.form) {
+            return;
+        }
+        __classPrivateFieldGet(this, _ButtonBase_elementInternals, "f").setFormValue(this.value);
         if (this.type === 'submit') {
-            formElement?.submit();
+            this.form.requestSubmit();
             return;
         }
-        formElement?.reset();
+        this.form.reset();
     }
     handleClick(_) {
     }
-    getFormElement() {
-        if (!this.form) {
-            return this.closest('FORM');
-        }
-        return document.getElementById(this.form);
-    }
 }
+_ButtonBase_elementInternals = new WeakMap();
 ButtonBase.formAssociated = true;
-ButtonBase.styles = css `
-
-    :host {
-      --_primary-color: var(--u-primary-color, #6750a4);
-      --_shadow-color-rgb: var(--u-shadow-color-rgb, 0,0,0);
-
-      -webkit-tap-highlight-color: transparent;
-      display: inline-block;
-      vertical-align: baseline;
-      transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
-    }
-
-    :host([disabled]) {
-      --u-elevation-level: 0 !important;
-      background-color: var(--u-button-disabled-background-color, rgba(var(--u-on-surface-color-rgb, 29, 27, 32), .12)) !important;
-      color: var(--u-button-disabled-text-color, rgba(var(--u-on-surface-color-rgb, 29, 27, 32), .38)) !important;
-    }
-
-    :host([disabled]) .button {
-      cursor: default;
-    }
-        
-    * {
-      color: inherit;
-    }
-    
-    u-elevation {
-      z-index: -1;
-    }
-
-    .button {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      font-family: inherit;
-      border-radius: inherit;
-      color: inherit;
-      border: none;
-      text-align: center;
-      white-space: nowrap;
-      background: transparent;
-      user-select: none;
-      text-decoration: none;
-      outline: 0;
-      z-index: 0;
-    }
-    
-    .button:focus-visible {
-      animation: offset-pulse 400ms ease;
-      animation-fill-mode: forwards;
-      outline-offset: 2px;
-    }
-
-    ::slotted([slot=icon]) {
-      display: inline-block;
-    }
-   
-    @keyframes offset-pulse {
-      0% {outline: 4px solid var(--u-primary-color, #6750a4)}
-      50% {outline: 8px solid var(--u-primary-color, #6750a4)}
-      100% {outline: 4px solid var(--u-primary-color, #6750a4)}
-    }
-`;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], ButtonBase.prototype, "disabled", void 0);
@@ -187,13 +134,19 @@ __decorate([
 __decorate([
     property()
 ], ButtonBase.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], ButtonBase.prototype, "value", void 0);
 __decorate([
     property()
-], ButtonBase.prototype, "form", void 0);
+], ButtonBase.prototype, "name", void 0);
 __decorate([
     query('.button')
 ], ButtonBase.prototype, "buttonElement", void 0);
 __decorate([
     query('u-ripple')
 ], ButtonBase.prototype, "ripple", void 0);
+__decorate([
+    property()
+], ButtonBase.prototype, "form", null);
 //# sourceMappingURL=button-base.js.map

package/button/button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, LitElement, nothing} from 'lit';\nimport {property, query} from 'lit/decorators.js';\n\nimport '../elevation/elevation';\nimport '../ripple/ripple';\nimport {Ripple} from '../ripple/ripple';\n\nexport abstract class ButtonBase extends LitElement {\n\n  static readonly formAssociated = true;\n\n  static override styles: CSSResult | CSSResult[] = css`\n\n    :host {\n      --_primary-color: var(--u-primary-color, #6750a4);\n      --_shadow-color-rgb: var(--u-shadow-color-rgb, 0,0,0);\n\n      -webkit-tap-highlight-color: transparent;\n      display: inline-block;\n      vertical-align: baseline;\n      transition: color 150ms ease-in-out, background-color 150ms ease-in-out;\n    }\n\n    :host([disabled]) {\n      --u-elevation-level: 0 !important;\n      background-color: var(--u-button-disabled-background-color, rgba(var(--u-on-surface-color-rgb, 29, 27, 32), .12)) !important;\n      color: var(--u-button-disabled-text-color, rgba(var(--u-on-surface-color-rgb, 29, 27, 32), .38)) !important;\n    }\n\n    :host([disabled]) .button {\n      cursor: default;\n    }\n        \n    * {\n      color: inherit;\n    }\n    \n    u-elevation {\n      z-index: -1;\n    }\n\n    .button {\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      width: 100%;\n      height: 100%;\n      margin: 0;\n      font-family: inherit;\n      border-radius: inherit;\n      color: inherit;\n      border: none;\n      text-align: center;\n      white-space: nowrap;\n      background: transparent;\n      user-select: none;\n      text-decoration: none;\n      outline: 0;\n      z-index: 0;\n    }\n    \n    .button:focus-visible {\n      animation: offset-pulse 400ms ease;\n      animation-fill-mode: forwards;\n      outline-offset: 2px;\n    }\n\n    ::slotted([slot=icon]) {\n      display: inline-block;\n    }\n   \n    @keyframes offset-pulse {\n      0% {outline: 4px solid var(--u-primary-color, #6750a4)}\n      50% {outline: 8px solid var(--u-primary-color, #6750a4)}\n      100% {outline: 4px solid var(--u-primary-color, #6750a4)}\n    }\n`;\n\n  /**\n   * Whether or not the button is disabled.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n  @property() type : 'submit' | 'button' | 'reset' = 'submit';\n  // @property() variant: 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';\n\n  @property() form: string | null = null;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: Ripple;\n\n\n  protected override render() {\n    return this.href\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n\n  private renderButton() {\n\n    // Needed for closure conformance\n    return html`\n      <button\n        id=\"button\"\n        class=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=\"${this.getAriaLabel()}\"\n        type=\"button\">\n        <u-elevation></u-elevation>\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n        ${this.renderContent()}\n      </button>`;\n  }\n\n  private renderLink() {\n    // Needed for closure conformance\n    // const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      href=${this.disabled ? nothing : this.href}\n      aria-disabled=${this.disabled || nothing}\n      aria-label=\"${this.getAriaLabel()}\"\n      target=${this.target || nothing}>\n      <u-elevation></u-elevation>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>\n      ${this.renderContent()}\n    </a>`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerHandleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.innerHandleClick);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    return this.ariaLabel || nothing;\n  }\n\n  private innerHandleClick(event: UIEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.detail === 0) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n\n    if (this.type === 'button' || !!this.href) {\n      return;\n    }\n\n    const formElement = this.getFormElement();\n\n    if (this.type === 'submit') {\n      formElement?.submit()\n      return;\n    }\n\n    formElement?.reset();\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n\n  private getFormElement(): HTMLFormElement | null {\n    if (!this.form) {\n      return this.closest<HTMLFormElement>('FORM');\n    }\n\n    return <HTMLFormElement>document.getElementById(this.form);\n  }\n}\n"]}
+{"version":3,"file":"button-base.js","sourceRoot":"","sources":["../../src/button/button-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nimport '../elevation/elevation.js';\nimport '../ripple/ripple.js';\nimport { UmRipple } from '../ripple/ripple';\n\nexport abstract class ButtonBase extends LitElement {\n\n  static readonly formAssociated = true;\n\n  /**\n   * Whether the button is disabled or not.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * The URL that the link button points to.\n   */\n  @property() href = '';\n\n  /**\n   * Where to display the linked `href` URL for a link button. Common options\n   * include `_blank` to open in a new tab.\n   */\n  @property() target: string = '';\n\n  @property() type: string = 'submit';\n\n  @property({reflect: true}) value: string = '';\n  @property() name: string | undefined;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  /**\n   * The `<form>` element to associate the button with (its form owner). The value of this attribute must be the id of a `<form>` in the same document. (If this attribute is not set, the button is associated with its ancestor `<form>` element, if any.)\n   * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form\n   */\n  @property()\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 render() {\n    return this.href\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n  private renderButton() {\n\n    return html`\n      <button\n        id=\"button\"\n        class=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=\"${this.getAriaLabel()}\"\n        type=\"button\">\n        <u-ripple ?disabled=${this.disabled}></u-ripple>\n        <u-elevation></u-elevation>\n      </button>\n      ${this.renderContent()}`;\n  }\n\n  private renderLink() {\n\n    return html`<a\n      id=\"link\"\n      class=\"button\"\n      href=${this.disabled ? nothing : this.href}\n      aria-disabled=${this.disabled || nothing}\n      aria-label=\"${this.getAriaLabel()}\"\n      target=${this.target || nothing}>\n      <u-elevation></u-elevation>\n      <u-ripple ?disabled=${this.disabled}></u-ripple>\n    </a>\n    ${this.renderContent()}`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerHandleClick);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('click', this.innerHandleClick);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    return this.ariaLabel || nothing;\n  }\n\n  private innerHandleClick(event: UIEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.detail === 0) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\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 === 'submit') {\n      this.form.requestSubmit();\n      return;\n    }\n\n    this.form.reset();\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n}\n"]}

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

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

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

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

package/button/button-base.styles.js

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

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

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

package/button/button-set.d.ts

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

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

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

package/button/button-set.js

@@ -4,24 +4,35 @@ 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 { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let ButtonSet = class ButtonSet extends LitElement {
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './button-set.styles';
+let UmButtonSet = class UmButtonSet extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set the alignment of the buttons at the `start`, `center` or at the `end`.
+         */
+        this.align = 'end';
+        /**
+         * Whether to render the buttons stacked or not
+         */
+        this.stack = false;
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `
+      <slot></slot>`;
     }
 };
-ButtonSet.styles = css `
-    :host {
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: flex-end;
-      flex-wrap: wrap;
-    }
-  `;
-ButtonSet = __decorate([
+UmButtonSet.styles = styles;
+__decorate([
+    property({ reflect: true })
+], UmButtonSet.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmButtonSet.prototype, "stack", void 0);
+UmButtonSet = __decorate([
     customElement('u-button-set')
-], ButtonSet);
-export { ButtonSet };
+], UmButtonSet);
+export { UmButtonSet };
 //# sourceMappingURL=button-set.js.map

package/button/button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-set.js","sourceRoot":"","sources":["../../src/button/button-set.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAqB,UAAU,EAAE,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAY9B,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAZe,gBAAM,GAAG,GAAG,CAAA;;;;;;;;GAQ3B,AARqB,CAQpB;AAVS,SAAS;IADrB,aAAa,CAAC,cAAc,CAAC;GACjB,SAAS,CAerB","sourcesContent":["import {HTMLTemplateResult, LitElement, css, html} from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('u-button-set')\nexport class ButtonSet extends LitElement {\n\n  static override styles = css`\n    :host {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n      justify-content: flex-end;\n      flex-wrap: wrap;\n    }\n  `;\n\n  override render(): HTMLTemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-set': ButtonSet;\n  }\n}\n"]}
+{"version":3,"file":"button-set.js","sourceRoot":"","sources":["../../src/button/button-set.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAGtC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAIL;;WAEG;QACwB,UAAK,GAA+B,KAAK,CAAC;QAErE;;WAEG;QACuC,UAAK,GAAG,KAAK,CAAC;IAM1D,CAAC;IAJU,MAAM;QACb,OAAO,IAAI,CAAA;oBACK,CAAC;IACnB,CAAC;;AAfe,kBAAM,GAAG,MAAM,AAAT,CAAU;AAKL;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;0CAA2C;AAK3B;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAe;AAZ7C,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkBvB","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './button-set.styles';\n\n@customElement('u-button-set')\nexport class UmButtonSet extends LitElement {\n\n  static override styles = styles;\n\n  /**\n   * Set the alignment of the buttons at the `start`, `center` or at the `end`.\n   */\n  @property({reflect: true}) align: 'start' | 'center' | 'end' = 'end';\n\n  /**\n   * Whether to render the buttons stacked or not\n   */\n  @property({type: Boolean, reflect: true}) stack = false;\n\n  override render(): HTMLTemplateResult {\n    return html`\n      <slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button-set': UmButtonSet;\n  }\n}\n"]}

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

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

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

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

package/button/button-set.styles.js

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

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

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

package/button/button.d.ts

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

package/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAQ,kBAAkB,EAAU,MAAM,KAAK,CAAC;AAGtE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAEzC,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAuF7C;IAEyB,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAY;IAElB,YAAY,UAAS;IAC1B,OAAO,UAAS;IAGjF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;IAatD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,qBAAqB,CAAC;AAE7B,qBACa,QAAS,SAAQ,UAAU;IAEtC,OAAgB,MAAM,EAAE,SAAS,GAAG,SAAS,EAAE,CAA8B;IAE7E;;OAEG;IACwB,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAY;IAErG;;;;OAIG;IACwB,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAEvB,YAAY,UAAS;IAE3F;;;;OAIG;IAC8D,OAAO,UAAS;IAGjF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;cAE5B,aAAa,IAAI,kBAAkB;IActD,OAAO,CAAC,gBAAgB;CAGzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}