@universal-material/web 3.0.20 → 3.0.21

package/scss/data-table/_data-table.scss

@@ -0,0 +1,33 @@
+@use "../functions";
+
+.u-data-table table,
+table.u-data-table {
+  min-width: 100%;
+  border-collapse: collapse;
+
+}
+
+.u-data-table {
+  font-family: var(--u-font-family, #{functions.get-font-family-var()});
+
+  tr:not(:first-child) {
+    border-top: 1px solid #{functions.get-color-var(outline-variant)};
+  }
+
+  td {
+    display: table-cell;
+    padding: var(--u-td-padding, 13px 16px);
+    font-size: var(--u-td-font-size, .875rem);
+    font-weight: var(--u-td-font-weight, #{functions.get-font-weight-var(medium)});
+    text-align: start;
+  }
+
+  th {
+    display: table-cell;
+    padding: var(--u-th-padding, 13px 16px);
+    font-size: var(--u-th-font-size, .8125rem);
+    font-weight: var(--u-th-font-weight, #{functions.get-font-weight-var(medium)});
+    text-align: start;
+    color: var(--u-low-emphasis-color, #{functions.get-color-var(on-surface-variant)});
+  }
+}

package/scss/data-table/_variables.scss

@@ -0,0 +1,24 @@
+@import "../../colors";
+@import "../../font";
+@import "../../mixins";
+
+//Data table
+$row-horizontal-padding: 1rem !default;
+
+$u-data-table-divider-width: .0625rem !default;
+$u-data-table-border: $u-data-table-divider-width solid var(--u-outline-variant-color) !default;
+
+$u-data-table-horizontal-padding: $row-horizontal-padding !default;
+
+$u-data-table-column-vertical-padding: .8125rem !default;
+$u-data-table-column-header-vertical-padding: 1rem !default;
+$u-data-table-column-header-font-size: .8125rem !default;
+$u-data-table-column-header-font-weight: var(--u-font-weight-medium) !default;
+$u-data-table-column-header-line-height: 1rem !default;
+
+$u-data-table-card-footer-height: 4rem !default;
+$u-data-table-card-footer-font-size: .75rem !default;
+$u-data-table-card-footer-font-weight: var(--u-font-weight-regular) !default;
+
+$u-data-table-content-font-size: .875rem !default;
+$u-data-table-content-font-weight: var(--u-font-weight-medium) !default;

package/scss/functions/_font.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+@use "sass:math";
+
+@use "../variables";
+
+@function get-rem-from-sp($sp-font-size) {
+  @return $sp-font-size * 0.0625rem;
+}
+
+@function get-letter-spacing($px-tracking, $sp-font-size) {
+  @return math.div($px-tracking, $sp-font-size) * 1rem;
+}
+
+@function get-font-family-var() {
+  @return var(--u-font-family, variables.$font-family);
+}
+
+@function get-font-weight-var($name) {
+  @return var(--u-font-weight-#{$name}, map.get(variables.$font-weights, $name));
+}
+
+@function get-typo-style($line-height, $font-size, $tracking, $font-weight) {
+  @return (
+    line-height: get-rem-from-sp($line-height),
+    font-size: get-rem-from-sp($font-size),
+    letter-spacing: get-letter-spacing($tracking, $font-size),
+    font-weight: $font-weight
+  );
+}

package/scss/mixins/_breakpoints.scss

@@ -0,0 +1,21 @@
+@use "../variables";
+
+@function breakpoint-min($name) {
+  $min: map-get(variables.$breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@function breakpoint-infix($name) {
+  @return if(breakpoint-min($name) == null, "", "-#{$name}");
+}
+
+@mixin media-breakpoint-up($name) {
+  $min: breakpoint-min($name);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

package/scss/mixins/_colors.scss

@@ -0,0 +1,6 @@
+@use "sass:color";
+
+@mixin _color-vars($color-name, $color-value) {
+  --u-color-#{$color-name}: #{$color-value};
+  --u-color-#{$color-name}-rgb: #{color.red($color-value)},#{color.green($color-value)},#{color.blue($color-value)};
+}

package/scss/mixins/_text-bg.scss

@@ -0,0 +1,33 @@
+@use "sass:string";
+
+@mixin _current-color-vars-important($current-color-rgb) {
+  --u-current-text-color-rgb: #{$current-color-rgb} !important;
+  --u-text-opacity: 1;
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+
+@mixin _bg-variant-important($color-name) {
+  .u-bg-#{$color-name} {
+    background-color: var(--u-color-#{$color-name}) !important;
+  }
+}
+
+@mixin _text-bg-variant-important($color-name, $on-color-name: null) {
+
+  @if $on-color-name == null {
+    $on-color-name: on-#{$color-name};
+  }
+
+  $container-index: string.index($on-color-name, "surface-container");
+  @if $container-index != null {
+    $on-color-name: #{string.slice($on-color-name, 1, $container-index - 1)}surface;
+  }
+
+  .u-text-bg-#{$color-name} {
+    @include _current-color-vars-important(var(--u-color-#{$on-color-name}-rgb));
+    background-color: var(--u-color-#{$color-name}) !important;
+
+    --u-divider-color: rgb(var(--u-current-text-color-rgb)) !important;
+    --u-divider-opacity: .4 !important;
+  }
+}

package/scss/mixins/_typo.scss

@@ -0,0 +1,26 @@
+@use "sass:map";
+
+@use "../typo/variables";
+@use "../functions";
+
+@mixin typo($style, $target-name: null) {
+  @if not map.has-key(variables.$typography-styles, $style) {
+    @error "Invalid style specified! #{$style} doesn't exist. Choose one of #{map.keys(variables.$typography-styles)}";
+  }
+
+  @if $target-name != null {
+    font-family: var(--u-font-family, #{functions.get-font-family-var()});
+  } @else {
+    font-family: var(--u-font-family);
+  }
+
+  $props: map.get(variables.$typography-styles, $style);
+
+  @each $key, $value in $props {
+    @if $target-name != null {
+      #{$key}: var(--u-#{$target-name}-#{$key}, var(--u-#{$style}-#{$key}, #{$value}));
+    } @else {
+      #{$key}: var(--u-#{$style}-#{$key});
+    }
+  }
+}

package/scss/text-bg/_text-bg.scss

@@ -0,0 +1,38 @@
+@use "sass:string";
+
+@use "../variables";
+@import "../mixins/text-bg";
+
+@each $color in variables.$color-roles {
+
+  @include _text-bg-variant-important($color);
+  @include _text-bg-variant-important(inverse-#{$color});
+
+  @include _bg-variant-important($color);
+  @include _bg-variant-important(inverse-#{$color});
+}
+
+@each $color in variables.$fixed-colors {
+  @include _text-bg-variant-important($color);
+  @include _text-bg-variant-important(#{$color}-container);
+
+  @include _bg-variant-important($color);
+  @include _bg-variant-important(#{$color}-container);
+}
+
+@each $color in variables.$theme-colors {
+  @include _text-bg-variant-important(#{$color}-fixed);
+  @include _text-bg-variant-important(#{$color}-fixed-dim, on-#{$color}-fixed);
+  @include _bg-variant-important(#{$color}-fixed);
+  @include _bg-variant-important(#{$color}-fixed-dim);
+}
+
+@include _text-bg-variant-important(body);
+@include _text-bg-variant-important(inverse-body);
+@include _text-bg-variant-important(light);
+@include _text-bg-variant-important(dark);
+
+@include _bg-variant-important(body);
+@include _bg-variant-important(inverse-body);
+@include _bg-variant-important(light);
+@include _bg-variant-important(dark);

package/scss/text-bg/_text.scss

@@ -0,0 +1,73 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+
+@use "../variables";
+@import "../mixins/text-bg";
+
+@mixin _text-variant-block($name, $color-name) {
+
+  @if string.index($name, "-container") == null and string.index($name, "-surface") == null {
+    @include _text-variant($name, $color-name);
+    @include _text-variant($name, $color-name, inverse-);
+  }
+
+  @include _text-variant($name, $color-name, on-);
+  @include _text-variant($name, $color-name, on-inverse-);
+}
+
+@mixin _text-variant($name, $color-name: null, $prefix: '') {
+
+  @if ($color-name == null) {
+    $color-name: $name;
+  }
+
+  .u-text-#{$prefix}#{$name} {
+    @include _current-color-vars-important(var(--u-color-#{$prefix}#{$color-name}-rgb));
+  }
+}
+
+@each $weight, $value in variables.$font-weights {
+  .u-font-weight-#{$weight} {
+    font-weight: var(--u-font-weight-#{$weight}) !important;
+  }
+}
+
+
+@each $color in variables.$color-roles {
+  @include _text-variant-block($color, $color);
+}
+
+@each $color in variables.$fixed-colors {
+  @include _text-variant($color);
+  @include _text-variant(on-#{$color});
+  @include _text-variant(#{$color}-container);
+  @include _text-variant(on-#{$color}-container);
+}
+
+@each $color in variables.$theme-colors {
+  @include _text-variant(#{$color}-fixed);
+  @include _text-variant(#{$color}-fixed-dim);
+  @include _text-variant(on-#{$color}-fixed);
+  @include _text-variant(on-#{$color}-fixed-variant);
+}
+
+@include _text-variant(on-body);
+@include _text-variant(on-inverse-body);
+@include _text-variant(on-light);
+@include _text-variant(on-dark);
+
+.u-text-high-emphasis {
+  --u-text-opacity: var(--u-high-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+.u-text-low-emphasis {
+  --u-text-opacity: var(--u-low-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+
+.u-text-lower-emphasis {
+  --u-text-opacity: var(--u-lower-emphasis-opacity);
+  color: rgba(var(--u-current-text-color-rgb), var(--u-text-opacity)) !important;
+}
+

package/scss/typo/_font.scss

@@ -0,0 +1,5 @@
+@use "../variables";
+
+:root {
+  --u-font-family: #{variables.$font-family};
+}

package/scss/typo/_typo.scss

@@ -0,0 +1,19 @@
+@use "sass:map";
+
+@use "variables";
+@use "../functions";
+@use "../mixins";
+
+:root {
+  @each $style, $props in (variables.$typography-styles) {
+    @each $key, $value in $props {
+      --u-#{$style}-#{$key}: #{$value};
+    }
+  }
+}
+
+@each $style in map.keys(variables.$typography-styles) {
+  .u-#{$style} {
+    @include mixins.typo($style);
+  }
+}

package/scss/typo/_variables.scss

@@ -0,0 +1,19 @@
+@use "../functions";
+
+$typography-styles: (
+  display-l: functions.get-typo-style(64, 57, -.25, #{functions.get-font-weight-var(regular)}),
+  display-m: functions.get-typo-style(52, 45, 0, #{functions.get-font-weight-var(regular)}),
+  display-s: functions.get-typo-style(44, 36, 0, #{functions.get-font-weight-var(regular)}),
+  headline-l: functions.get-typo-style(40, 32, 0, #{functions.get-font-weight-var(regular)}),
+  headline-m: functions.get-typo-style(36, 28, 0, #{functions.get-font-weight-var(regular)}),
+  headline-s: functions.get-typo-style(32, 24, 0, #{functions.get-font-weight-var(regular)}),
+  title-l: functions.get-typo-style(28, 22, 0, #{functions.get-font-weight-var(regular)}),
+  title-m: functions.get-typo-style(24, 16, .15, #{functions.get-font-weight-var(medium)}),
+  title-s: functions.get-typo-style(20, 14, .1, #{functions.get-font-weight-var(medium)}),
+  body-l: functions.get-typo-style(24, 16, .5, #{functions.get-font-weight-var(regular)}),
+  body-m: functions.get-typo-style(20, 14, .25, #{functions.get-font-weight-var(regular)}),
+  body-s: functions.get-typo-style(16, 12, .4, #{functions.get-font-weight-var(regular)}),
+  label-l: functions.get-typo-style(20, 14, .1, #{functions.get-font-weight-var(medium)}),
+  label-m: functions.get-typo-style(16, 12, .5, #{functions.get-font-weight-var(medium)}),
+  label-s: functions.get-typo-style(16, 11, .5, #{functions.get-font-weight-var(medium)})
+) !default;

package/scss/universal-material.scss

@@ -0,0 +1,7 @@
+@import "css-vars";
+@import "common";
+@import "data-table/data-table";
+@import "text-bg/text-bg";
+@import "text-bg/text";
+@import "typo/font";
+@import "typo/typo";

package/shared/base.styles.js

@@ -2,7 +2,7 @@ import { css } from 'lit';
 export const styles = css `
   :host,
   * {
-    font-family: var(--u-font-family-base, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+    font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
   }
 `;

package/shared/base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;CAMzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family-base, system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\");\n    box-sizing: border-box;\n  }\n`;\n"]}
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;CAMzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n  }\n`;\n"]}

package/shared/button-wrapper.d.ts

@@ -0,0 +1,35 @@
+import { HTMLTemplateResult, LitElement, nothing } from 'lit';
+import '../elevation/elevation';
+import '../ripple/ripple';
+export declare abstract class UmButtonWrapper extends LitElement {
+    /**
+     * Whether the button is disabled or not.
+     */
+    disabled: boolean;
+    /**
+     * The URL that the link button points to.
+     */
+    href: string | undefined;
+    /**
+     * Where to display the linked `href` URL for a link button. Common options
+     * include `_blank` to open in a new tab.
+     */
+    target: string | undefined;
+    name: string | undefined;
+    private readonly buttonElement;
+    private readonly ripple;
+    get pathname(): string;
+    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 innerFocusHandler;
+    private innerClickHandler;
+    protected handleClick(_: UIEvent): void;
+}
+//# sourceMappingURL=button-wrapper.d.ts.map

package/shared/button-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-wrapper.d.ts","sourceRoot":"","sources":["../../src/shared/button-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGpE,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAG1B,8BAAsB,eAAgB,SAAQ,UAAU;IAEtD;;OAEG;IACuC,QAAQ,UAAS;IAE3D;;OAEG;IACS,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAErC;;;OAGG;IACS,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAe;IAC5C,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAY;IAEtD,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,MAAM;IAMzB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,UAAU;IAclB,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAOjB,oBAAoB;IAOpB,KAAK;IAIL,IAAI;IAKb,SAAS,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,GAAG,OAAO,OAAO;IAIxD,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI;CAGxC"}

package/shared/button-wrapper.js

@@ -0,0 +1,110 @@
+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, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import '../elevation/elevation';
+import '../ripple/ripple';
+export class UmButtonWrapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the button is disabled or not.
+         */
+        this.disabled = false;
+    }
+    get pathname() {
+        return this.buttonElement?.pathname;
+    }
+    render() {
+        return typeof this.href === 'string'
+            ? 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>
+      <div class="content">${this.renderContent()}</div>`;
+    }
+    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>
+    <div class="content">${this.renderContent()}</div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.innerClickHandler);
+        this.addEventListener('focus', this.innerFocusHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.innerClickHandler);
+        this.removeEventListener('focus', this.innerFocusHandler);
+    }
+    focus() {
+        this.buttonElement?.focus();
+    }
+    blur() {
+        this.buttonElement?.blur();
+    }
+    getAriaLabel() {
+        return this.ariaLabel || nothing;
+    }
+    innerFocusHandler() {
+        const tabIndexAttributeValue = this.getAttribute('tabindex');
+        if (tabIndexAttributeValue !== "0") {
+            return;
+        }
+        this.removeAttribute('tabindex');
+        setTimeout(() => this.buttonElement?.focus());
+    }
+    innerClickHandler(event) {
+        if (this.disabled) {
+            return;
+        }
+        if (!event.pointerType) {
+            this.ripple.createRipple();
+        }
+        this.handleClick(event);
+    }
+    handleClick(_) {
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmButtonWrapper.prototype, "disabled", void 0);
+__decorate([
+    property()
+], UmButtonWrapper.prototype, "href", void 0);
+__decorate([
+    property()
+], UmButtonWrapper.prototype, "target", void 0);
+__decorate([
+    property()
+], UmButtonWrapper.prototype, "name", void 0);
+__decorate([
+    query('.button')
+], UmButtonWrapper.prototype, "buttonElement", void 0);
+__decorate([
+    query('u-ripple')
+], UmButtonWrapper.prototype, "ripple", void 0);
+//# sourceMappingURL=button-wrapper.js.map

package/shared/button-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-wrapper.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.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';\nimport '../ripple/ripple';\nimport { UmRipple } from '../ripple/ripple';\n\nexport abstract class UmButtonWrapper extends LitElement {\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: string | undefined;\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 | undefined;\n\n  @property() name: string | undefined;\n\n  @query('.button') private readonly buttonElement!: HTMLElement;\n  @query('u-ripple') private readonly ripple!: UmRipple;\n\n  get pathname(): string {\n    return (<HTMLAnchorElement>this.buttonElement)?.pathname\n  }\n\n  protected override render() {\n    return typeof this.href === 'string'\n      ? this.renderLink()\n      : this.renderButton();\n  }\n\n  private renderButton() {\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      <div class=\"content\">${this.renderContent()}</div>`;\n\n  }\n\n  private renderLink() {\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    <div class=\"content\">${this.renderContent()}</div>`;\n  }\n\n  protected abstract renderContent(): HTMLTemplateResult;\n\n  override connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('click', this.innerClickHandler);\n    this.addEventListener('focus', this.innerFocusHandler)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('click', this.innerClickHandler);\n    this.removeEventListener('focus', this.innerFocusHandler);\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n\n    this.buttonElement?.blur();\n  }\n\n  protected getAriaLabel(): string | null | typeof nothing {\n    return this.ariaLabel || nothing;\n  }\n\n  private innerFocusHandler(): void {\n    const tabIndexAttributeValue = this.getAttribute('tabindex');\n\n    if (tabIndexAttributeValue !== \"0\") {\n      return;\n    }\n \n    this.removeAttribute('tabindex');\n    setTimeout(() => this.buttonElement?.focus());\n  }\n\n  private innerClickHandler(event: MouseEvent): void {\n\n    if (this.disabled) {\n      return;\n    }\n\n    if (!(<PointerEvent>event).pointerType) {\n      this.ripple.createRipple();\n    }\n\n    this.handleClick(event);\n  }\n\n  protected handleClick(_: UIEvent): void {\n\n  }\n}\n"]}

package/shared/button-wrapper.styles.d.ts

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

package/shared/button-wrapper.styles.d.ts.map

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

package/{button/button-base.styles.js → shared/button-wrapper.styles.js}

@@ -3,14 +3,11 @@ 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;
+    --u-elevation-level: 0;
     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;
+    display: inline-block;
+    font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    appearance: none !important;
   }
 
   :host([disabled]) {
@@ -34,7 +31,10 @@ export const styles = css `
   .button {
     cursor: pointer;
     position: absolute;
-    inset: 0;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100%;
+    height: 100%;
     font-family: inherit;
     border-radius: inherit;
     color: inherit;
@@ -50,12 +50,30 @@ export const styles = css `
     z-index: 0;
   }
 
+  .content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    width: 100%;
+    height: 100%;
+  }
+
   .button:focus-visible {
     animation: offset-pulse 400ms ease;
     animation-fill-mode: forwards;
     outline-offset: 2px;
   }
 
+  .icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    line-height: 1em;
+  }
+
   ::slotted([slot=icon]) {
     display: inline-block;
   }
@@ -72,4 +90,4 @@ export const styles = css `
     }
   }
 `;
-//# sourceMappingURL=button-base.styles.js.map
+//# sourceMappingURL=button-wrapper.styles.js.map

package/shared/button-wrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-wrapper.styles.js","sourceRoot":"","sources":["../../src/shared/button-wrapper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FzB,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    --u-elevation-level: 0;\n    position: relative;\n    display: inline-block;\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    appearance: none !important;\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-inline-start: 0;\n    inset-block-start: 0;\n    width: 100%;\n    height: 100%;\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  .content {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    width: 100%;\n    height: 100%;\n  }\n\n  .button:focus-visible {\n    animation: offset-pulse 400ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: 2px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1em;\n  }\n\n  ::slotted([slot=icon]) {\n    display: inline-block;\n  }\n\n  @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/snackbar/snackbar.d.ts

@@ -0,0 +1,38 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+export interface SnackbarConfig {
+    label: string;
+    duration?: SnackbarDuration;
+    buttonLabel?: string;
+    showClose?: boolean;
+}
+export declare enum SnackbarDuration {
+    short = 2500,
+    long = 5000,
+    infinite = -1
+}
+export declare class UmSnackbar extends LitElement {
+    static styles: import("lit").CSSResult[];
+    label: string;
+    buttonLabel: string;
+    showClose: boolean;
+    dismissed: boolean;
+    private duration;
+    private snackbar;
+    render(): HTMLTemplateResult;
+    private renderButton;
+    private renderCloseButton;
+    dismiss(): void;
+    private static _queue;
+    private static _consuming;
+    static show(label: string): UmSnackbar;
+    static show(config: SnackbarConfig): UmSnackbar;
+    private static consumeQueue;
+    private static showNext;
+    private static createSnackbar;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-snackbar': UmSnackbar;
+    }
+}
+//# sourceMappingURL=snackbar.d.ts.map

package/snackbar/snackbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAMpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAGpB;IAEyB,KAAK,EAAE,MAAM,CAAM;IACnB,WAAW,EAAE,MAAM,CAAM;IACe,SAAS,UAAS;IAC3C,SAAS,UAAS;IAE5D,OAAO,CAAC,QAAQ,CAAoB;IAChB,OAAO,CAAC,QAAQ,CAAe;IAE1C,MAAM,IAAI,kBAAkB;IASrC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU;IACtC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAqB/C,OAAO,CAAC,MAAM,CAAC,YAAY;IAQ3B,OAAO,CAAC,MAAM,CAAC,QAAQ;IAmBvB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}