@universal-material/web 3.0.0

package/all.d.ts

@@ -0,0 +1,9 @@
+import './button/button';
+import './button/fab';
+import './button/icon-button';
+import './button/button-set';
+import './card/card';
+import './divider/divider';
+import './elevation/elevation';
+import './ripple/ripple';
+//# sourceMappingURL=all.d.ts.map

package/all.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.d.ts","sourceRoot":"","sources":["../src/all.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AACrB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC"}

package/all.js

@@ -0,0 +1,9 @@
+import './button/button';
+import './button/fab';
+import './button/icon-button';
+import './button/button-set';
+import './card/card';
+import './divider/divider';
+import './elevation/elevation';
+import './ripple/ripple';
+//# sourceMappingURL=all.js.map

package/all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","sourceRoot":"","sources":["../src/all.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,aAAa,CAAC;AACrB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC","sourcesContent":["import './button/button';\nimport './button/fab';\nimport './button/icon-button';\nimport './button/button-set';\nimport './card/card';\nimport './divider/divider';\nimport './elevation/elevation';\nimport './ripple/ripple';\n"]}

package/button/button-base.d.ts

@@ -0,0 +1,37 @@
+import { CSSResult, HTMLTemplateResult, LitElement, nothing } from 'lit';
+import '../elevation/elevation';
+import '../ripple/ripple';
+export declare abstract class ButtonBase extends LitElement {
+    static readonly formAssociated = true;
+    static styles: CSSResult | CSSResult[];
+    /**
+     * Whether or not the button is disabled.
+     */
+    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: '_blank' | '_parent' | '_self' | '_top' | '';
+    type: 'submit' | 'button' | 'reset';
+    form: string | null;
+    private readonly buttonElement;
+    private readonly ripple;
+    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;
+    private getFormElement;
+}
+//# 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,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"}

package/button/button-base.js

@@ -0,0 +1,199 @@
+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 { css, html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../elevation/elevation';
+import '../ripple/ripple';
+export class ButtonBase extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether or not the button is disabled.
+         */
+        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';
+        // @property() variant: 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';
+        this.form = null;
+    }
+    render() {
+        return this.href
+            ? this.renderLink()
+            : this.renderButton();
+    }
+    renderButton() {
+        // Needed for closure conformance
+        return html `
+      <button
+        id="button"
+        class="button"
+        ?disabled=${this.disabled}
+        aria-label="${this.getAriaLabel()}"
+        type="button">
+        <u-elevation></u-elevation>
+        <u-ripple ?disabled=${this.disabled}></u-ripple>
+        ${this.renderContent()}
+      </button>`;
+    }
+    renderLink() {
+        // Needed for closure conformance
+        // const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
+        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>
+      ${this.renderContent()}
+    </a>`;
+    }
+    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;
+        }
+        const formElement = this.getFormElement();
+        if (this.type === 'submit') {
+            formElement?.submit();
+            return;
+        }
+        formElement?.reset();
+    }
+    handleClick(_) {
+    }
+    getFormElement() {
+        if (!this.form) {
+            return this.closest('FORM');
+        }
+        return document.getElementById(this.form);
+    }
+}
+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);
+__decorate([
+    property()
+], ButtonBase.prototype, "href", void 0);
+__decorate([
+    property()
+], ButtonBase.prototype, "target", void 0);
+__decorate([
+    property()
+], ButtonBase.prototype, "type", void 0);
+__decorate([
+    property()
+], ButtonBase.prototype, "form", void 0);
+__decorate([
+    query('.button')
+], ButtonBase.prototype, "buttonElement", void 0);
+__decorate([
+    query('u-ripple')
+], ButtonBase.prototype, "ripple", void 0);
+//# 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 {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"]}

package/button/button-set.d.ts

@@ -0,0 +1,11 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class ButtonSet extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-button-set': ButtonSet;
+    }
+}
+//# 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,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"}

package/button/button-set.js

@@ -0,0 +1,27 @@
+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 { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let ButtonSet = class ButtonSet extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+ButtonSet.styles = css `
+    :host {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+  `;
+ButtonSet = __decorate([
+    customElement('u-button-set')
+], ButtonSet);
+export { ButtonSet };
+//# 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,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"]}

package/button/button.d.ts

@@ -0,0 +1,18 @@
+import { CSSResult, HTMLTemplateResult } from 'lit';
+import '../ripple/ripple';
+import { ButtonBase } from './button-base';
+export declare class Button extends ButtonBase {
+    static styles: CSSResult | CSSResult[];
+    variant: 'filled' | 'tonal' | 'outlined' | 'text';
+    trailingIcon: boolean;
+    hasIcon: boolean;
+    private readonly assignedIcons;
+    protected renderContent(): HTMLTemplateResult;
+    private handleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-button': Button;
+    }
+}
+//# 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,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"}

package/button/button.js

@@ -0,0 +1,137 @@
+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 { css, html, nothing } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import '../ripple/ripple';
+import { ButtonBase } from './button-base';
+let Button = class Button extends ButtonBase {
+    constructor() {
+        super(...arguments);
+        this.variant = 'filled';
+        this.trailingIcon = false;
+        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;
+    }
+};
+Button.styles = [
+    ButtonBase.styles,
+    css `
+  
+      :host {
+        --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);
+        --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);
+        --u-common-button-font-weight: var(--u-font-weight-medium, 500);
+        --_common-button-height: var(--u-common-button-height, 2.5rem);
+        --_common-button-padding: var(--u-common-button-padding, 24px);
+        --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);
+  
+        border-radius: var(--u-common-button-shape, 9999px);
+        font-family: var(--u-font-family-base, system-ui);
+        height: var(--u-common-button-height, 40px);
+      }
+  
+      :host([variant="filled"]) {
+        background-color: var(--u-filled-button-background-color, var(--_primary-color));
+        color: var(--u-filled-button-text-color, var(--u-on-primary-color, #fff));
+      }
+  
+      :host([variant="tonal"]) {
+        background-color: var(--u-tonal-button-background-color, var(--u-secondary-container-color, #e8def8));
+        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));
+      }
+
+      :host([variant="elevated"]) {
+        background-color: var(--u-elevated-button-background-color, var(--u-surface-container-low-color, #f7f2fa));
+        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));
+      }
+  
+      @media (hover: hover) {
+        :host([variant="filled"]:hover:not(:focus-within):not(:active)),
+        :host([variant="tonal"]:hover:not(:focus-within):not(:active)) {
+          --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);
+        }
+      }
+  
+      :host([variant="outlined"]),
+      :host([variant="text"]),
+      :host([variant="elevated"]) {
+        color: var(--_primary-color);
+      }
+  
+      :host([variant="outlined"]) {
+        border: 1px solid var(--u-outline-color, #79747e);
+      }
+  
+      :host([variant="elevated"]) {
+        --u-elevation-level: var(--u-elevated-button-elevation-level, 1);
+      }
+
+      @media (hover: hover) {
+        :host([variant="elevated"]:hover) {
+          --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);
+        }
+      }
+  
+      .button {
+        font-size: var(--u-common-button-font-size);
+        font-weight: var(--u-common-button-font-weight);
+        padding-inline: var(--_common-button-padding);
+        box-sizing: border-box;
+      }
+      
+      :host([has-icon]) .button {
+        padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);
+      }
+  
+      :host([has-icon][trailing-icon]) .button {
+        padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);
+      }
+  
+      ::slotted([slot=icon]) {
+        display: inline-block;
+        width: var(--u-common-button-icon-size, 1.125rem);
+        height: var(--u-common-button-icon-size, 1.125rem);
+        margin-inline-end: 8px;
+        font-size: var(--u-common-button-icon-size, 1.125rem);
+        line-height: var(--u-common-button-icon-size, 1.125rem);
+      }
+  
+      :host([trailing-icon]) ::slotted([slot=icon]) {
+        margin-inline: 8px 0;
+      }
+    `
+];
+__decorate([
+    property({ reflect: true })
+], Button.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'trailing-icon', reflect: true })
+], Button.prototype, "trailingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-icon', reflect: true })
+], Button.prototype, "hasIcon", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], Button.prototype, "assignedIcons", void 0);
+Button = __decorate([
+    customElement('u-button')
+], Button);
+export { Button };
+//# 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,EAAC,GAAG,EAAa,IAAI,EAAsB,OAAO,EAAC,MAAM,KAAK,CAAC;AACtE,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAEjF,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AAGlC,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QA2FsB,YAAO,GAA6C,QAAQ,CAAC;QAElB,iBAAY,GAAG,KAAK,CAAC;QAC1B,YAAO,GAAG,KAAK,CAAC;IAqBnF,CAAC;IAhBoB,aAAa;QAC9B,MAAM,IAAI,GAAG,IAAI,CAAA;;;qBAGA,IAAI,CAAC,gBAAgB,WAAW,CAAC;QAElD,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAElC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KACrC,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/C,CAAC;;AAhHe,aAAM,GAA4B;IACrC,UAAU,CAAC,MAAM;IAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoFF;CACF,AAvFqB,CAuFpB;AAEyB;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA8D;AAElB;IAArE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAsB;AAC1B;IAAhE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAAiB;AAGhE;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CACN;AAjGpC,MAAM;IADlB,aAAa,CAAC,UAAU,CAAC;GACb,MAAM,CAmHlB","sourcesContent":["import {css, CSSResult, html, HTMLTemplateResult, nothing} from 'lit';\nimport {customElement, property, queryAssignedElements} from 'lit/decorators.js';\n\nimport '../ripple/ripple';\nimport {ButtonBase} from './button-base';\n\n@customElement('u-button')\nexport class Button extends ButtonBase {\n\n  static override styles: CSSResult | CSSResult[] = [\n    <CSSResult>ButtonBase.styles,\n    css`\n  \n      :host {\n        --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n        --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n        --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n        --_common-button-height: var(--u-common-button-height, 2.5rem);\n        --_common-button-padding: var(--u-common-button-padding, 24px);\n        --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n  \n        border-radius: var(--u-common-button-shape, 9999px);\n        font-family: var(--u-font-family-base, system-ui);\n        height: var(--u-common-button-height, 40px);\n      }\n  \n      :host([variant=\"filled\"]) {\n        background-color: var(--u-filled-button-background-color, var(--_primary-color));\n        color: var(--u-filled-button-text-color, var(--u-on-primary-color, #fff));\n      }\n  \n      :host([variant=\"tonal\"]) {\n        background-color: var(--u-tonal-button-background-color, var(--u-secondary-container-color, #e8def8));\n        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));\n      }\n\n      :host([variant=\"elevated\"]) {\n        background-color: var(--u-elevated-button-background-color, var(--u-surface-container-low-color, #f7f2fa));\n        color: var(--u-tonal-button-text-color, var(--u-on-secondary-container-color, #1d192b));\n      }\n  \n      @media (hover: hover) {\n        :host([variant=\"filled\"]:hover:not(:focus-within):not(:active)),\n        :host([variant=\"tonal\"]:hover:not(:focus-within):not(:active)) {\n          --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n        }\n      }\n  \n      :host([variant=\"outlined\"]),\n      :host([variant=\"text\"]),\n      :host([variant=\"elevated\"]) {\n        color: var(--_primary-color);\n      }\n  \n      :host([variant=\"outlined\"]) {\n        border: 1px solid var(--u-outline-color, #79747e);\n      }\n  \n      :host([variant=\"elevated\"]) {\n        --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n      }\n\n      @media (hover: hover) {\n        :host([variant=\"elevated\"]:hover) {\n          --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n        }\n      }\n  \n      .button {\n        font-size: var(--u-common-button-font-size);\n        font-weight: var(--u-common-button-font-weight);\n        padding-inline: var(--_common-button-padding);\n        box-sizing: border-box;\n      }\n      \n      :host([has-icon]) .button {\n        padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n      }\n  \n      :host([has-icon][trailing-icon]) .button {\n        padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n      }\n  \n      ::slotted([slot=icon]) {\n        display: inline-block;\n        width: var(--u-common-button-icon-size, 1.125rem);\n        height: var(--u-common-button-icon-size, 1.125rem);\n        margin-inline-end: 8px;\n        font-size: var(--u-common-button-icon-size, 1.125rem);\n        line-height: var(--u-common-button-icon-size, 1.125rem);\n      }\n  \n      :host([trailing-icon]) ::slotted([slot=icon]) {\n        margin-inline: 8px 0;\n      }\n    `\n  ];\n\n  @property({reflect: true}) variant: 'filled' | 'tonal' | 'outlined' | 'text' = 'filled';\n\n  @property({type: Boolean, attribute: 'trailing-icon', reflect: true}) trailingIcon = false;\n  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly assignedIcons!: HTMLElement[];\n\n  protected override renderContent(): HTMLTemplateResult {\n    const icon = html`<slot\n      name=\"icon\"\n      aria-hidden=\"true\"\n      @slotchange=\"${this.handleSlotChange}\"></slot>`;\n\n    return html`\n      ${this.trailingIcon ? nothing : icon}\n      <span><slot></slot></span>\n      ${this.trailingIcon ? icon : nothing}\n    `;\n  }\n\n  private handleSlotChange() {\n    this.hasIcon = this.assignedIcons.length > 0;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-button': Button;\n  }\n}\n"]}

package/button/fab.d.ts

@@ -0,0 +1,17 @@
+import { CSSResult, HTMLTemplateResult } from 'lit';
+import { ButtonBase } from './button-base';
+export declare class FabButton extends ButtonBase {
+    static styles: CSSResult | CSSResult[];
+    color: 'primary' | 'secondary' | 'tertiary' | 'surface' | 'branded';
+    size: 'small' | 'medium' | 'large';
+    label: string | null;
+    lowered: boolean;
+    get extended(): boolean;
+    protected renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-fab': FabButton;
+    }
+}
+//# sourceMappingURL=fab.d.ts.map

package/button/fab.d.ts.map

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