@universal-material/web 3.0.9 → 3.0.11

package/button/button-base.d.ts

@@ -0,0 +1,43 @@
+import { HTMLTemplateResult, LitElement, nothing } from 'lit';
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
+export declare abstract class UmButtonBase extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    /**
+     * Whether the button is disabled or not.
+     */
+    disabled: boolean;
+    /**
+     * The URL that the link button points to.
+     */
+    href: string;
+    /**
+     * Where to display the linked `href` URL for a link button. Common options
+     * include `_blank` to open in a new tab.
+     */
+    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;
+    protected abstract renderContent(): HTMLTemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    focus(): void;
+    blur(): void;
+    protected getAriaLabel(): string | null | typeof nothing;
+    private innerHandleClick;
+    protected handleClick(_: UIEvent): void;
+}
+//# sourceMappingURL=button-base.d.ts.map

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

@@ -0,0 +1 @@
+{"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,YAAa,SAAQ,UAAU;;IAEnD,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

@@ -0,0 +1,152 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 _UmButtonBase_elementInternals;
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../elevation/elevation.js';
+import '../ripple/ripple.js';
+export class UmButtonBase 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, _UmButtonBase_elementInternals, "f").form;
+    }
+    constructor() {
+        super();
+        /**
+         * Whether the button is disabled or not.
+         */
+        this.disabled = false;
+        /**
+         * The URL that the link button points to.
+         */
+        this.href = '';
+        /**
+         * Where to display the linked `href` URL for a link button. Common options
+         * include `_blank` to open in a new tab.
+         */
+        this.target = '';
+        this.type = 'submit';
+        this.value = '';
+        _UmButtonBase_elementInternals.set(this, void 0);
+        __classPrivateFieldSet(this, _UmButtonBase_elementInternals, this.attachInternals(), "f");
+    }
+    render() {
+        return this.href
+            ? this.renderLink()
+            : this.renderButton();
+    }
+    renderButton() {
+        return html `
+      <button
+        id="button"
+        class="button"
+        ?disabled=${this.disabled}
+        aria-label="${this.getAriaLabel()}"
+        type="button">
+        <u-ripple ?disabled=${this.disabled}></u-ripple>
+        <u-elevation></u-elevation>
+      </button>
+      ${this.renderContent()}`;
+    }
+    renderLink() {
+        return html `<a
+      id="link"
+      class="button"
+      href=${this.disabled ? nothing : this.href}
+      aria-disabled=${this.disabled || nothing}
+      aria-label="${this.getAriaLabel()}"
+      target=${this.target || nothing}>
+      <u-elevation></u-elevation>
+      <u-ripple ?disabled=${this.disabled}></u-ripple>
+    </a>
+    ${this.renderContent()}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.innerHandleClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.innerHandleClick);
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    getAriaLabel() {
+        return this.ariaLabel || nothing;
+    }
+    innerHandleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (event.detail === 0) {
+            this.ripple.createRipple();
+        }
+        this.handleClick(event);
+        if (this.type === 'button' || !!this.href) {
+            return;
+        }
+        if (!this.form) {
+            return;
+        }
+        __classPrivateFieldGet(this, _UmButtonBase_elementInternals, "f").setFormValue(this.value);
+        if (this.type === 'submit') {
+            this.form.requestSubmit();
+            return;
+        }
+        this.form.reset();
+    }
+    handleClick(_) {
+    }
+}
+_UmButtonBase_elementInternals = new WeakMap();
+UmButtonBase.formAssociated = true;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmButtonBase.prototype, "disabled", void 0);
+__decorate([
+    property()
+], UmButtonBase.prototype, "href", void 0);
+__decorate([
+    property()
+], UmButtonBase.prototype, "target", void 0);
+__decorate([
+    property()
+], UmButtonBase.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], UmButtonBase.prototype, "value", void 0);
+__decorate([
+    property()
+], UmButtonBase.prototype, "name", void 0);
+__decorate([
+    query('.button')
+], UmButtonBase.prototype, "buttonElement", void 0);
+__decorate([
+    query('u-ripple')
+], UmButtonBase.prototype, "ripple", void 0);
+__decorate([
+    property()
+], UmButtonBase.prototype, "form", null);
+//# sourceMappingURL=button-base.js.map

package/button/button-base.js.map

@@ -0,0 +1 @@
+{"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 UmButtonBase 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-rgb, 29, 27, 32), 0.12)) !important;
+    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 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-rgb, 29, 27, 32), 0.12)) !important;\n    color: var(--u-button-disabled-text-color, rgba(var(--u-color-on-surface-rgb, 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

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

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

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

package/button/button-set.js

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

package/button/button-set.js.map

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

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

@@ -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: nowrap;
+  }
+
+  :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: nowrap;\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

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

package/button/button.d.ts.map

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

package/button/button.js

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

package/button/button.js.map

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

package/button/button.styles.d.ts

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

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

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

package/button/button.styles.js

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

package/button/button.styles.js.map

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