@universal-material/web 3.7.2 → 3.9.0

package/slider/slider.styles.js

@@ -0,0 +1,292 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_track-height: var(--u-slider-track-height, 16px);
+    --_handle-width: var(--u-slider-handle-width, 4px);
+    --_handle-height: var(--u-slider-handle-height, 44px);
+    --_handle-gap: var(--u-slider-handle-gap, 6px);
+    --_pressed-handle-width: var(--u-slider-pressed-handle-width, 2px);
+    --_inner-corner: var(--u-slider-inner-corner, 2px);
+    --_state-layer-size: var(--u-slider-state-layer-size, 40px);
+    --_stop-indicator-size: var(--u-slider-stop-indicator-size, 4px);
+    --_stop-indicator-trailing-space: var(--u-slider-stop-indicator-space, 2px);
+    --_value-indicator-size: var(--u-slider-value-indicator-size, 44px);
+    --_value-indicator-gap: var(--u-slider-value-indicator-gap, 12px);
+    --_active-color: var(--u-slider-active-color, var(--u-color-primary, rgb(103, 80, 164)));
+    --_inactive-color: var(--u-slider-inactive-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+    --_handle-color: var(--u-slider-handle-color, var(--u-color-primary, rgb(103, 80, 164)));
+    --_value-indicator-bg: var(--u-slider-value-indicator-bg, var(--u-color-inverse-surface, rgb(50, 47, 53)));
+    --_value-indicator-color: var(--u-slider-value-indicator-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));
+    --_stop-indicator-active-color: var(--u-slider-stop-indicator-active-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+    --_stop-indicator-inactive-color: var(--u-slider-stop-indicator-inactive-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+    --_tick-active-color: var(--u-slider-tick-active-color, var(--u-color-on-primary, rgb(255, 255, 255)));
+    --_tick-inactive-color: var(--u-slider-tick-inactive-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+    --_disabled-opacity: var(--u-slider-disabled-opacity, .38);
+    display: block;
+    position: relative;
+    width: 100%;
+    height: max(var(--_handle-height), var(--_state-layer-size));
+    touch-action: none;
+    --_typo: label-l;
+  }
+
+  :host([size=extra-small]) {
+    --_track-height: 16px;
+    --_handle-height: 44px;
+    --_state-layer-size: 40px;
+    --_value-indicator-size: 44px;
+    --_typo: label-l;
+  }
+
+  :host([size=small]) {
+    --_track-height: 24px;
+    --_handle-height: 52px;
+    --_state-layer-size: 48px;
+    --_value-indicator-size: 48px;
+    --_typo: label-l;
+  }
+
+  :host([size=medium]) {
+    --_track-height: 40px;
+    --_handle-height: 64px;
+    --_state-layer-size: 56px;
+    --_value-indicator-size: 56px;
+    --_handle-width: 6px;
+    --_pressed-handle-width: 4px;
+    --_typo: title-m;
+  }
+
+  :host([size=large]) {
+    --_track-height: 56px;
+    --_handle-height: 80px;
+    --_state-layer-size: 68px;
+    --_value-indicator-size: 64px;
+    --_handle-width: 6px;
+    --_pressed-handle-width: 4px;
+    --_typo: title-m;
+  }
+
+  :host([size=extra-large]) {
+    --_track-height: 96px;
+    --_handle-height: 120px;
+    --_state-layer-size: 96px;
+    --_value-indicator-size: 80px;
+    --_handle-width: 8px;
+    --_pressed-handle-width: 6px;
+    --_typo: title-l;
+  }
+
+  :host([disabled]) {
+    opacity: var(--_disabled-opacity);
+    pointer-events: none;
+  }
+
+  .container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding-inline: calc(var(--_handle-width) / 2);
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  :host([disabled]) .container {
+    cursor: default;
+  }
+
+  .track {
+    position: absolute;
+    inset-block: 50%;
+    inset-inline: calc(var(--_handle-width) / 2);
+    transform: translateY(-50%);
+    height: var(--_track-height);
+    pointer-events: none;
+  }
+
+  .segment {
+    position: absolute;
+    inset-block: 0;
+    border-radius: calc(var(--_track-height) / 2);
+  }
+
+  .segment.inactive {
+    background-color: var(--_inactive-color);
+  }
+
+  .segment.active {
+    background-color: var(--_active-color);
+  }
+
+  .stop-indicator {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: var(--_stop-indicator-trailing-space);
+    width: var(--_stop-indicator-size);
+    height: var(--_stop-indicator-size);
+    border-radius: 50%;
+    background-color: var(--_stop-indicator-inactive-color);
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .stop-indicator.leading {
+    inset-inline-start: var(--_stop-indicator-trailing-space);
+    inset-inline-end: auto;
+  }
+
+  .container:not(.range) .stop-indicator.leading {
+    background-color: var(--_stop-indicator-active-color);
+  }
+
+  .ticks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .tick {
+    position: absolute;
+    top: 50%;
+    width: var(--_stop-indicator-size);
+    height: var(--_stop-indicator-size);
+    border-radius: 50%;
+    background-color: var(--_tick-inactive-color);
+    transform: translate(-50%, -50%);
+  }
+
+  .tick.active {
+    background-color: var(--_tick-active-color);
+  }
+
+  .tick.in-gap {
+    opacity: 0;
+  }
+
+  input.native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  input.native::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: var(--_state-layer-size);
+    height: var(--_state-layer-size);
+    border-radius: 50%;
+    background: transparent;
+    border: 0;
+  }
+
+  input.native::-moz-range-thumb {
+    width: var(--_state-layer-size);
+    height: var(--_state-layer-size);
+    border-radius: 50%;
+    background: transparent;
+    border: 0;
+  }
+
+  .thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--_handle-width);
+    height: var(--_handle-height);
+    background-color: var(--_handle-color);
+    border-radius: calc(var(--_handle-width) / 2);
+    pointer-events: none;
+  }
+
+  .focus-ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: calc(var(--_handle-width) + 8px);
+    height: calc(var(--_handle-height) + 8px);
+    border-radius: calc((var(--_handle-width) + 8px) / 2);
+    transform: translate(-50%, -50%);
+    outline: 2px solid var(--_focus-ring-color);
+    outline-offset: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 120ms ease-out;
+  }
+
+  input.native:focus-visible ~ .thumb .focus-ring {
+    opacity: 1;
+  }
+
+  #input:focus-visible ~ .thumb-start .focus-ring {
+    opacity: 1;
+  }
+
+  #input-end:focus-visible ~ .thumb-end .focus-ring {
+    opacity: 1;
+  }
+
+  .container.range #input:focus-visible ~ .thumb-end .focus-ring,
+  .container.range #input-end:focus-visible ~ .thumb-start .focus-ring {
+    opacity: 0;
+  }
+
+  .value-indicator {
+    position: absolute;
+    bottom: calc(100% + var(--_value-indicator-gap));
+    left: 50%;
+    min-width: var(--_value-indicator-size);
+    height: var(--_value-indicator-size);
+    padding: 0 12px;
+    border-radius: calc(var(--_value-indicator-size) / 2);
+    background-color: var(--_value-indicator-bg);
+    color: var(--_value-indicator-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    pointer-events: none;
+    box-sizing: border-box;
+  }
+
+  :host .value-indicator {
+    font-family: var(--u-font-family);
+    line-height: var(--u-label-l-line-height);
+    font-size: var(--u-label-l-font-size);
+    letter-spacing: var(--u-label-l-letter-spacing);
+    font-weight: var(--u-label-l-font-weight);
+  }
+
+  :host([size=small]) .value-indicator {
+    font-family: var(--u-font-family);
+    line-height: var(--u-label-l-line-height);
+    font-size: var(--u-label-l-font-size);
+    letter-spacing: var(--u-label-l-letter-spacing);
+    font-weight: var(--u-label-l-font-weight);
+  }
+
+  :host([size=medium]) .value-indicator,
+  :host([size=large]) .value-indicator {
+    font-family: var(--u-font-family);
+    line-height: var(--u-title-m-line-height);
+    font-size: var(--u-title-m-font-size);
+    letter-spacing: var(--u-title-m-letter-spacing);
+    font-weight: var(--u-title-m-font-weight);
+  }
+
+  :host([size=extra-large]) .value-indicator {
+    font-family: var(--u-font-family);
+    line-height: var(--u-title-l-line-height);
+    font-size: var(--u-title-l-font-size);
+    letter-spacing: var(--u-title-l-letter-spacing);
+    font-weight: var(--u-title-l-font-weight);
+  }
+`;
+//# sourceMappingURL=slider.styles.js.map

package/slider/slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../src/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_track-height: var(--u-slider-track-height, 16px);\n    --_handle-width: var(--u-slider-handle-width, 4px);\n    --_handle-height: var(--u-slider-handle-height, 44px);\n    --_handle-gap: var(--u-slider-handle-gap, 6px);\n    --_pressed-handle-width: var(--u-slider-pressed-handle-width, 2px);\n    --_inner-corner: var(--u-slider-inner-corner, 2px);\n    --_state-layer-size: var(--u-slider-state-layer-size, 40px);\n    --_stop-indicator-size: var(--u-slider-stop-indicator-size, 4px);\n    --_stop-indicator-trailing-space: var(--u-slider-stop-indicator-space, 2px);\n    --_value-indicator-size: var(--u-slider-value-indicator-size, 44px);\n    --_value-indicator-gap: var(--u-slider-value-indicator-gap, 12px);\n    --_active-color: var(--u-slider-active-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_inactive-color: var(--u-slider-inactive-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    --_handle-color: var(--u-slider-handle-color, var(--u-color-primary, rgb(103, 80, 164)));\n    --_value-indicator-bg: var(--u-slider-value-indicator-bg, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    --_value-indicator-color: var(--u-slider-value-indicator-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    --_stop-indicator-active-color: var(--u-slider-stop-indicator-active-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n    --_stop-indicator-inactive-color: var(--u-slider-stop-indicator-inactive-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    --_tick-active-color: var(--u-slider-tick-active-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n    --_tick-inactive-color: var(--u-slider-tick-inactive-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n    --_disabled-opacity: var(--u-slider-disabled-opacity, .38);\n    display: block;\n    position: relative;\n    width: 100%;\n    height: max(var(--_handle-height), var(--_state-layer-size));\n    touch-action: none;\n    --_typo: label-l;\n  }\n\n  :host([size=extra-small]) {\n    --_track-height: 16px;\n    --_handle-height: 44px;\n    --_state-layer-size: 40px;\n    --_value-indicator-size: 44px;\n    --_typo: label-l;\n  }\n\n  :host([size=small]) {\n    --_track-height: 24px;\n    --_handle-height: 52px;\n    --_state-layer-size: 48px;\n    --_value-indicator-size: 48px;\n    --_typo: label-l;\n  }\n\n  :host([size=medium]) {\n    --_track-height: 40px;\n    --_handle-height: 64px;\n    --_state-layer-size: 56px;\n    --_value-indicator-size: 56px;\n    --_handle-width: 6px;\n    --_pressed-handle-width: 4px;\n    --_typo: title-m;\n  }\n\n  :host([size=large]) {\n    --_track-height: 56px;\n    --_handle-height: 80px;\n    --_state-layer-size: 68px;\n    --_value-indicator-size: 64px;\n    --_handle-width: 6px;\n    --_pressed-handle-width: 4px;\n    --_typo: title-m;\n  }\n\n  :host([size=extra-large]) {\n    --_track-height: 96px;\n    --_handle-height: 120px;\n    --_state-layer-size: 96px;\n    --_value-indicator-size: 80px;\n    --_handle-width: 8px;\n    --_pressed-handle-width: 6px;\n    --_typo: title-l;\n  }\n\n  :host([disabled]) {\n    opacity: var(--_disabled-opacity);\n    pointer-events: none;\n  }\n\n  .container {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    padding-inline: calc(var(--_handle-width) / 2);\n    box-sizing: border-box;\n    cursor: pointer;\n  }\n\n  :host([disabled]) .container {\n    cursor: default;\n  }\n\n  .track {\n    position: absolute;\n    inset-block: 50%;\n    inset-inline: calc(var(--_handle-width) / 2);\n    transform: translateY(-50%);\n    height: var(--_track-height);\n    pointer-events: none;\n  }\n\n  .segment {\n    position: absolute;\n    inset-block: 0;\n    border-radius: calc(var(--_track-height) / 2);\n  }\n\n  .segment.inactive {\n    background-color: var(--_inactive-color);\n  }\n\n  .segment.active {\n    background-color: var(--_active-color);\n  }\n\n  .stop-indicator {\n    position: absolute;\n    top: 50%;\n    inset-inline-end: var(--_stop-indicator-trailing-space);\n    width: var(--_stop-indicator-size);\n    height: var(--_stop-indicator-size);\n    border-radius: 50%;\n    background-color: var(--_stop-indicator-inactive-color);\n    transform: translateY(-50%);\n    pointer-events: none;\n  }\n\n  .stop-indicator.leading {\n    inset-inline-start: var(--_stop-indicator-trailing-space);\n    inset-inline-end: auto;\n  }\n\n  .container:not(.range) .stop-indicator.leading {\n    background-color: var(--_stop-indicator-active-color);\n  }\n\n  .ticks {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .tick {\n    position: absolute;\n    top: 50%;\n    width: var(--_stop-indicator-size);\n    height: var(--_stop-indicator-size);\n    border-radius: 50%;\n    background-color: var(--_tick-inactive-color);\n    transform: translate(-50%, -50%);\n  }\n\n  .tick.active {\n    background-color: var(--_tick-active-color);\n  }\n\n  .tick.in-gap {\n    opacity: 0;\n  }\n\n  input.native {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    background: transparent;\n    appearance: none;\n    -webkit-appearance: none;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  input.native::-webkit-slider-thumb {\n    appearance: none;\n    -webkit-appearance: none;\n    width: var(--_state-layer-size);\n    height: var(--_state-layer-size);\n    border-radius: 50%;\n    background: transparent;\n    border: 0;\n  }\n\n  input.native::-moz-range-thumb {\n    width: var(--_state-layer-size);\n    height: var(--_state-layer-size);\n    border-radius: 50%;\n    background: transparent;\n    border: 0;\n  }\n\n  .thumb {\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    width: var(--_handle-width);\n    height: var(--_handle-height);\n    background-color: var(--_handle-color);\n    border-radius: calc(var(--_handle-width) / 2);\n    pointer-events: none;\n  }\n\n  .focus-ring {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: calc(var(--_handle-width) + 8px);\n    height: calc(var(--_handle-height) + 8px);\n    border-radius: calc((var(--_handle-width) + 8px) / 2);\n    transform: translate(-50%, -50%);\n    outline: 2px solid var(--_focus-ring-color);\n    outline-offset: 0;\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 120ms ease-out;\n  }\n\n  input.native:focus-visible ~ .thumb .focus-ring {\n    opacity: 1;\n  }\n\n  #input:focus-visible ~ .thumb-start .focus-ring {\n    opacity: 1;\n  }\n\n  #input-end:focus-visible ~ .thumb-end .focus-ring {\n    opacity: 1;\n  }\n\n  .container.range #input:focus-visible ~ .thumb-end .focus-ring,\n  .container.range #input-end:focus-visible ~ .thumb-start .focus-ring {\n    opacity: 0;\n  }\n\n  .value-indicator {\n    position: absolute;\n    bottom: calc(100% + var(--_value-indicator-gap));\n    left: 50%;\n    min-width: var(--_value-indicator-size);\n    height: var(--_value-indicator-size);\n    padding: 0 12px;\n    border-radius: calc(var(--_value-indicator-size) / 2);\n    background-color: var(--_value-indicator-bg);\n    color: var(--_value-indicator-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    transform: translateX(-50%);\n    pointer-events: none;\n    box-sizing: border-box;\n  }\n\n  :host .value-indicator {\n    font-family: var(--u-font-family);\n    line-height: var(--u-label-l-line-height);\n    font-size: var(--u-label-l-font-size);\n    letter-spacing: var(--u-label-l-letter-spacing);\n    font-weight: var(--u-label-l-font-weight);\n  }\n\n  :host([size=small]) .value-indicator {\n    font-family: var(--u-font-family);\n    line-height: var(--u-label-l-line-height);\n    font-size: var(--u-label-l-font-size);\n    letter-spacing: var(--u-label-l-letter-spacing);\n    font-weight: var(--u-label-l-font-weight);\n  }\n\n  :host([size=medium]) .value-indicator,\n  :host([size=large]) .value-indicator {\n    font-family: var(--u-font-family);\n    line-height: var(--u-title-m-line-height);\n    font-size: var(--u-title-m-font-size);\n    letter-spacing: var(--u-title-m-letter-spacing);\n    font-weight: var(--u-title-m-font-weight);\n  }\n\n  :host([size=extra-large]) .value-indicator {\n    font-family: var(--u-font-family);\n    line-height: var(--u-title-l-line-height);\n    font-size: var(--u-title-l-font-size);\n    letter-spacing: var(--u-title-l-letter-spacing);\n    font-weight: var(--u-title-l-font-weight);\n  }\n`;\n"]}

package/snackbar/snackbar.d.ts

@@ -13,11 +13,20 @@ export declare enum SnackbarDuration {
     long = 5000,
     infinite = -1
 }
-export declare class UmSnackbar extends LitElement {
+export declare class Snackbar extends LitElement {
     static styles: import("lit").CSSResult[];
     static minDisplayTime: number;
+    /**
+     * The message displayed inside the snackbar
+     */
     message: string;
+    /**
+     * The label of the optional action button. When empty, no action button is rendered.
+     */
     action: string;
+    /**
+     * Whether to render the close (dismiss) button next to the message
+     */
     showClose: boolean;
     _dismissed: boolean;
     _canDismiss: boolean;
@@ -32,15 +41,15 @@ export declare class UmSnackbar extends LitElement {
     private static _queue;
     private static _lastEnqueued;
     private static _consuming;
-    static show(message: string): UmSnackbar;
-    static show(config: SnackbarConfig): UmSnackbar;
+    static show(message: string): Snackbar;
+    static show(config: SnackbarConfig): Snackbar;
     private static _consumeQueue;
     private static _showNext;
     private static createSnackbar;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-snackbar': UmSnackbar;
+        'u-snackbar': Snackbar;
     }
 }
 //# sourceMappingURL=snackbar.d.ts.map

package/snackbar/snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAwB;IAC9C,MAAM,CAAC,cAAc,SAAQ;IAEA,OAAO,SAAM;IACb,MAAM,SAAM;IAEzC,SAAS,UAAS;IACT,UAAU,UAAS;IACnB,WAAW,UAAS;IAE7B,QAAQ,EAAG,gBAAgB,GAAG,MAAM,CAAC;IACV,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IAE3D,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAgB9C,MAAM,IAAI,kBAAkB;IAyBrC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,iBAAiB;IAqBzB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc3B,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAoB;IACzC,OAAO,CAAC,MAAM,CAAC,aAAa,CAA2B;IACvD,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,UAAU;IACxC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;IAuB/C,OAAO,CAAC,MAAM,CAAC,aAAa;IAO5B,OAAO,CAAC,MAAM,CAAC,SAAS;IAmBxB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,UAAU,CAAC;KAC1B;CACF"}
+{"version":3,"file":"snackbar.d.ts","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAOpE,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,gBAAgB;IAC1B,KAAK,OAAO;IACZ,IAAI,OAAO;IACX,QAAQ,KAAK;CACd;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAAwB;IAC9C,MAAM,CAAC,cAAc,SAAQ;IAE7B;;OAEG;IAC0B,OAAO,SAAM;IAE1C;;OAEG;IAC0B,MAAM,SAAM;IAEzC;;OAEG;IAEH,SAAS,UAAS;IACT,UAAU,UAAS;IACnB,WAAW,UAAS;IAE7B,QAAQ,EAAG,gBAAgB,GAAG,MAAM,CAAC;IACV,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IAE3D,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAgB9C,MAAM,IAAI,kBAAkB;IAyBrC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,iBAAiB;IAqBzB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAc3B,OAAO,IAAI,IAAI;IAQf,OAAO,CAAC,MAAM,CAAC,MAAM,CAAkB;IACvC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAyB;IACrD,OAAO,CAAC,MAAM,CAAC,UAAU,CAAU;IAEnC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,QAAQ;IACtC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,cAAc,GAAG,QAAQ;IAuB7C,OAAO,CAAC,MAAM,CAAC,aAAa;IAO5B,OAAO,CAAC,MAAM,CAAC,SAAS;IAmBxB,OAAO,CAAC,MAAM,CAAC,cAAc;CAS9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/snackbar/snackbar.js

@@ -1,4 +1,4 @@
-var UmSnackbar_1;
+var Snackbar_1;
 import { __decorate } from "tslib";
 import { html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -13,24 +13,33 @@ export var SnackbarDuration;
     SnackbarDuration[SnackbarDuration["long"] = 5000] = "long";
     SnackbarDuration[SnackbarDuration["infinite"] = -1] = "infinite";
 })(SnackbarDuration || (SnackbarDuration = {}));
-let UmSnackbar = class UmSnackbar extends LitElement {
+let Snackbar = class Snackbar extends LitElement {
     constructor() {
         super(...arguments);
+        /**
+         * The message displayed inside the snackbar
+         */
         this.message = '';
+        /**
+         * The label of the optional action button. When empty, no action button is rendered.
+         */
         this.action = '';
+        /**
+         * Whether to render the close (dismiss) button next to the message
+         */
         this.showClose = false;
         this._dismissed = false;
         this._canDismiss = false;
     }
-    static { UmSnackbar_1 = this; }
+    static { Snackbar_1 = this; }
     static { this.styles = [baseStyles, styles]; }
     static { this.minDisplayTime = 1500; }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         const onAnimationEnd = () => {
             this.container.removeEventListener('animationend', onAnimationEnd);
-            if (UmSnackbar_1.minDisplayTime > 0) {
-                setTimeout(() => this._canDismiss = true, UmSnackbar_1.minDisplayTime);
+            if (Snackbar_1.minDisplayTime > 0) {
+                setTimeout(() => this._canDismiss = true, Snackbar_1.minDisplayTime);
             }
             else {
                 this._canDismiss = true;
@@ -44,7 +53,7 @@ let UmSnackbar = class UmSnackbar extends LitElement {
             const onAnimationEnd = () => {
                 this.container.removeEventListener('animationend', onAnimationEnd);
                 this.remove();
-                UmSnackbar_1._showNext();
+                Snackbar_1._showNext();
             };
             this.container.addEventListener('animationend', onAnimationEnd);
         }
@@ -115,28 +124,28 @@ let UmSnackbar = class UmSnackbar extends LitElement {
         }
         configOrMessage.duration ??= SnackbarDuration.long;
         const snackbar = this.createSnackbar(configOrMessage);
-        UmSnackbar_1._queue.push(snackbar);
-        UmSnackbar_1._lastEnqueued?.dismiss();
-        UmSnackbar_1._lastEnqueued = snackbar;
-        if (!UmSnackbar_1._consuming) {
-            UmSnackbar_1._consumeQueue();
+        Snackbar_1._queue.push(snackbar);
+        Snackbar_1._lastEnqueued?.dismiss();
+        Snackbar_1._lastEnqueued = snackbar;
+        if (!Snackbar_1._consuming) {
+            Snackbar_1._consumeQueue();
         }
         return snackbar;
     }
     static _consumeQueue() {
-        if (UmSnackbar_1._queue.length) {
-            UmSnackbar_1._consuming = true;
-            UmSnackbar_1._showNext();
+        if (Snackbar_1._queue.length) {
+            Snackbar_1._consuming = true;
+            Snackbar_1._showNext();
         }
     }
     static _showNext() {
-        if (!UmSnackbar_1._queue.length) {
-            UmSnackbar_1._consuming = false;
-            UmSnackbar_1._lastEnqueued = null;
+        if (!Snackbar_1._queue.length) {
+            Snackbar_1._consuming = false;
+            Snackbar_1._lastEnqueued = null;
             return;
         }
-        const snackbar = UmSnackbar_1._queue[0];
-        UmSnackbar_1._queue = UmSnackbar_1._queue.slice(1);
+        const snackbar = Snackbar_1._queue[0];
+        Snackbar_1._queue = Snackbar_1._queue.slice(1);
         document.body.appendChild(snackbar);
         if (snackbar.duration === -1) {
             return;
@@ -154,24 +163,24 @@ let UmSnackbar = class UmSnackbar extends LitElement {
 };
 __decorate([
     property({ reflect: true })
-], UmSnackbar.prototype, "message", void 0);
+], Snackbar.prototype, "message", void 0);
 __decorate([
     property({ reflect: true })
-], UmSnackbar.prototype, "action", void 0);
+], Snackbar.prototype, "action", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'show-close', reflect: true })
-], UmSnackbar.prototype, "showClose", void 0);
+], Snackbar.prototype, "showClose", void 0);
 __decorate([
     state()
-], UmSnackbar.prototype, "_dismissed", void 0);
+], Snackbar.prototype, "_dismissed", void 0);
 __decorate([
     state()
-], UmSnackbar.prototype, "_canDismiss", void 0);
+], Snackbar.prototype, "_canDismiss", void 0);
 __decorate([
     query('.container', true)
-], UmSnackbar.prototype, "container", void 0);
-UmSnackbar = UmSnackbar_1 = __decorate([
+], Snackbar.prototype, "container", void 0);
+Snackbar = Snackbar_1 = __decorate([
     customElement('u-snackbar')
-], UmSnackbar);
-export { UmSnackbar };
+], Snackbar);
+export { Snackbar };
 //# sourceMappingURL=snackbar.js.map

package/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button.js';\nimport '../button/icon-button.js';\n\nexport interface SnackbarConfig {\n  message: string;\n  duration?: SnackbarDuration;\n  action?: string;\n  showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n  short = 2500,\n  long = 5000,\n  infinite = -1,\n}\n\n@customElement('u-snackbar')\nexport class UmSnackbar extends LitElement {\n  static override styles = [baseStyles, styles];\n  static minDisplayTime = 1500;\n\n  @property({ reflect: true }) message = '';\n  @property({ reflect: true }) action = '';\n  @property({ type: Boolean, attribute: 'show-close', reflect: true })\n  showClose = false;\n  @state() _dismissed = false;\n  @state() _canDismiss = false;\n\n  duration!: SnackbarDuration | number;\n  @query('.container', true) private readonly container!: HTMLElement;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    const onAnimationEnd = () => {\n      this.container.removeEventListener('animationend', onAnimationEnd);\n\n      if (UmSnackbar.minDisplayTime > 0) {\n        setTimeout(() => this._canDismiss = true, UmSnackbar.minDisplayTime);\n      } else {\n        this._canDismiss = true;\n      }\n    };\n\n    this.container.addEventListener('animationend', onAnimationEnd);\n  }\n\n  override render(): HTMLTemplateResult {\n    const classes = { dismiss: this._dismissed && this._canDismiss };\n\n    if (classes.dismiss) {\n      const onAnimationEnd = () => {\n        this.container.removeEventListener('animationend', onAnimationEnd);\n        this.remove();\n\n        UmSnackbar._showNext();\n      };\n\n      this.container.addEventListener('animationend', onAnimationEnd);\n    }\n\n    return html`\n      <div class=\"container ${classMap(classes)}\" part=\"container\">\n        <u-elevation></u-elevation>\n        <div class=\"message-container\" part=\"message-container\">\n          <div class=\"message\" part=\"message\">${this.message}</div>\n        </div>\n        ${this.renderButton()} ${this.renderCloseButton()}\n      </div>\n    `;\n  }\n\n  private renderButton() {\n    return this.action\n      ? html`\n          <u-button\n            variant=\"text\"\n            @click=${this.actionClick.bind(this)}\n            part=\"action\"\n          >${this.action}\n          </u-button>\n        `\n      : nothing;\n  }\n\n  private renderCloseButton() {\n    return this.showClose\n      ? html`\n          <u-icon-button\n            @click=${this.dismiss.bind(this)}\n            part=\"close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n            </svg>\n          </u-icon-button>\n        `\n      : nothing;\n  }\n\n  actionClick(e: Event): void {\n    e.stopPropagation();\n\n    const actionClickEvent = new CustomEvent('actionClick', { cancelable: true });\n\n    this.dispatchEvent(actionClickEvent);\n\n    if (actionClickEvent.defaultPrevented) {\n      return;\n    }\n\n    this.dismiss();\n  }\n\n  dismiss(): void {\n    if (this._dismissed) {\n      return;\n    }\n\n    this._dismissed = true;\n  }\n\n  private static _queue: UmSnackbar[] = [];\n  private static _lastEnqueued: UmSnackbar | null = null;\n  private static _consuming: boolean;\n\n  static show(message: string): UmSnackbar;\n  static show(config: SnackbarConfig): UmSnackbar;\n  static show(configOrMessage: SnackbarConfig | string): UmSnackbar {\n    if (typeof configOrMessage === 'string') {\n      configOrMessage = {\n        message: configOrMessage,\n      };\n    }\n\n    configOrMessage.duration ??= SnackbarDuration.long;\n\n    const snackbar = this.createSnackbar(configOrMessage);\n    UmSnackbar._queue.push(snackbar);\n\n    UmSnackbar._lastEnqueued?.dismiss();\n    UmSnackbar._lastEnqueued = snackbar;\n\n    if (!UmSnackbar._consuming) {\n      UmSnackbar._consumeQueue();\n    }\n\n    return snackbar;\n  }\n\n  private static _consumeQueue() {\n    if (UmSnackbar._queue.length) {\n      UmSnackbar._consuming = true;\n      UmSnackbar._showNext();\n    }\n  }\n\n  private static _showNext() {\n    if (!UmSnackbar._queue.length) {\n      UmSnackbar._consuming = false;\n      UmSnackbar._lastEnqueued = null;\n      return;\n    }\n\n    const snackbar = UmSnackbar._queue[0];\n    UmSnackbar._queue = UmSnackbar._queue.slice(1);\n\n    document.body.appendChild(snackbar);\n\n    if (snackbar.duration === -1) {\n      return;\n    }\n\n    setTimeout(() => snackbar.dismiss(), snackbar.duration);\n  }\n\n  private static createSnackbar(config: SnackbarConfig): UmSnackbar {\n    const snackbar = document.createElement('u-snackbar');\n    snackbar.message = config.message;\n    snackbar.action = config.action || '';\n    snackbar.showClose = config.showClose!;\n    snackbar.duration = config.duration!;\n\n    return snackbar as unknown as UmSnackbar;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-snackbar': UmSnackbar;\n  }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\n\nimport { html, HTMLTemplateResult, LitElement, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './snackbar.styles.js';\n\nimport '../button/button.js';\nimport '../button/icon-button.js';\n\nexport interface SnackbarConfig {\n  message: string;\n  duration?: SnackbarDuration;\n  action?: string;\n  showClose?: boolean;\n}\n\nexport enum SnackbarDuration {\n  short = 2500,\n  long = 5000,\n  infinite = -1,\n}\n\n@customElement('u-snackbar')\nexport class Snackbar extends LitElement {\n  static override styles = [baseStyles, styles];\n  static minDisplayTime = 1500;\n\n  /**\n   * The message displayed inside the snackbar\n   */\n  @property({ reflect: true }) message = '';\n\n  /**\n   * The label of the optional action button. When empty, no action button is rendered.\n   */\n  @property({ reflect: true }) action = '';\n\n  /**\n   * Whether to render the close (dismiss) button next to the message\n   */\n  @property({ type: Boolean, attribute: 'show-close', reflect: true })\n  showClose = false;\n  @state() _dismissed = false;\n  @state() _canDismiss = false;\n\n  duration!: SnackbarDuration | number;\n  @query('.container', true) private readonly container!: HTMLElement;\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n\n    const onAnimationEnd = () => {\n      this.container.removeEventListener('animationend', onAnimationEnd);\n\n      if (Snackbar.minDisplayTime > 0) {\n        setTimeout(() => this._canDismiss = true, Snackbar.minDisplayTime);\n      } else {\n        this._canDismiss = true;\n      }\n    };\n\n    this.container.addEventListener('animationend', onAnimationEnd);\n  }\n\n  override render(): HTMLTemplateResult {\n    const classes = { dismiss: this._dismissed && this._canDismiss };\n\n    if (classes.dismiss) {\n      const onAnimationEnd = () => {\n        this.container.removeEventListener('animationend', onAnimationEnd);\n        this.remove();\n\n        Snackbar._showNext();\n      };\n\n      this.container.addEventListener('animationend', onAnimationEnd);\n    }\n\n    return html`\n      <div class=\"container ${classMap(classes)}\" part=\"container\">\n        <u-elevation></u-elevation>\n        <div class=\"message-container\" part=\"message-container\">\n          <div class=\"message\" part=\"message\">${this.message}</div>\n        </div>\n        ${this.renderButton()} ${this.renderCloseButton()}\n      </div>\n    `;\n  }\n\n  private renderButton() {\n    return this.action\n      ? html`\n          <u-button\n            variant=\"text\"\n            @click=${this.actionClick.bind(this)}\n            part=\"action\"\n          >${this.action}\n          </u-button>\n        `\n      : nothing;\n  }\n\n  private renderCloseButton() {\n    return this.showClose\n      ? html`\n          <u-icon-button\n            @click=${this.dismiss.bind(this)}\n            part=\"close\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"1em\"\n              viewBox=\"0 -960 960 960\"\n              width=\"1em\"\n              fill=\"currentColor\">\n              <path\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n            </svg>\n          </u-icon-button>\n        `\n      : nothing;\n  }\n\n  actionClick(e: Event): void {\n    e.stopPropagation();\n\n    const actionClickEvent = new CustomEvent('actionClick', { cancelable: true });\n\n    this.dispatchEvent(actionClickEvent);\n\n    if (actionClickEvent.defaultPrevented) {\n      return;\n    }\n\n    this.dismiss();\n  }\n\n  dismiss(): void {\n    if (this._dismissed) {\n      return;\n    }\n\n    this._dismissed = true;\n  }\n\n  private static _queue: Snackbar[] = [];\n  private static _lastEnqueued: Snackbar | null = null;\n  private static _consuming: boolean;\n\n  static show(message: string): Snackbar;\n  static show(config: SnackbarConfig): Snackbar;\n  static show(configOrMessage: SnackbarConfig | string): Snackbar {\n    if (typeof configOrMessage === 'string') {\n      configOrMessage = {\n        message: configOrMessage,\n      };\n    }\n\n    configOrMessage.duration ??= SnackbarDuration.long;\n\n    const snackbar = this.createSnackbar(configOrMessage);\n    Snackbar._queue.push(snackbar);\n\n    Snackbar._lastEnqueued?.dismiss();\n    Snackbar._lastEnqueued = snackbar;\n\n    if (!Snackbar._consuming) {\n      Snackbar._consumeQueue();\n    }\n\n    return snackbar;\n  }\n\n  private static _consumeQueue() {\n    if (Snackbar._queue.length) {\n      Snackbar._consuming = true;\n      Snackbar._showNext();\n    }\n  }\n\n  private static _showNext() {\n    if (!Snackbar._queue.length) {\n      Snackbar._consuming = false;\n      Snackbar._lastEnqueued = null;\n      return;\n    }\n\n    const snackbar = Snackbar._queue[0];\n    Snackbar._queue = Snackbar._queue.slice(1);\n\n    document.body.appendChild(snackbar);\n\n    if (snackbar.duration === -1) {\n      return;\n    }\n\n    setTimeout(() => snackbar.dismiss(), snackbar.duration);\n  }\n\n  private static createSnackbar(config: SnackbarConfig): Snackbar {\n    const snackbar = document.createElement('u-snackbar');\n    snackbar.message = config.message;\n    snackbar.action = config.action || '';\n    snackbar.showClose = config.showClose!;\n    snackbar.duration = config.duration!;\n\n    return snackbar as unknown as Snackbar;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-snackbar': Snackbar;\n  }\n}\n"]}

package/snackbar/snackbar.styles.js

@@ -34,7 +34,7 @@ export const styles = css `
   }
 
   u-button {
-    color: var(--u-color-inverse-primary, );
+    --u-color-primary: var(--u-color-inverse-primary, );
     margin: var(--u-snackbar-action-margin, var(--u-spacing-extra-small, 4px));
   }
 

package/snackbar/snackbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.styles.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    padding: var(--_snackbar-margin);\n    z-index: var(--u-snackbar-z-index, 1070);\n    display: flex;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    min-height: var(--u-snackbar-height, 48px);\n    background-color: var(--u-snackbar-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n    animation-name: snackbar-fade-in;\n    animation-duration: 450ms;\n    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n    animation-fill-mode: forwards;\n    min-width: var(--u-snackbar-min-width, 100%);\n    max-width: var(--u-snackbar-max-width, 100%);\n    pointer-events: auto;\n  }\n  .container.dismiss {\n    animation-name: snackbar-fade-out;\n  }\n\n  u-button {\n    color: var(--u-color-inverse-primary, );\n    margin: var(--u-snackbar-action-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  u-icon-button {\n    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  .message-container {\n    flex: 1 1 auto;\n    overflow: hidden;\n    color: var(--u-snackbar-message-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n    line-height: 18px;\n  }\n\n  .message {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n    }\n    .container {\n      min-width: var(--u-snackbar-min-width, 344px);\n    }\n  }\n  @keyframes snackbar-fade-in {\n    0% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n    100% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes snackbar-fade-out {\n    0% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"snackbar.styles.js","sourceRoot":"","sources":["../../src/snackbar/snackbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --u-elevation-level: var(--u-snackbar-elevation-level, 3);\n    --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-medium, 16px));\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    padding: var(--_snackbar-margin);\n    z-index: var(--u-snackbar-z-index, 1070);\n    display: flex;\n    justify-content: center;\n    pointer-events: none;\n  }\n\n  .container {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: wrap;\n    min-height: var(--u-snackbar-height, 48px);\n    background-color: var(--u-snackbar-container-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n    border-radius: var(--u-snackbar-shape, var(--u-shape-corner-extra-small, 4px));\n    animation-name: snackbar-fade-in;\n    animation-duration: 450ms;\n    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n    animation-fill-mode: forwards;\n    min-width: var(--u-snackbar-min-width, 100%);\n    max-width: var(--u-snackbar-max-width, 100%);\n    pointer-events: auto;\n  }\n  .container.dismiss {\n    animation-name: snackbar-fade-out;\n  }\n\n  u-button {\n    --u-color-primary: var(--u-color-inverse-primary, );\n    margin: var(--u-snackbar-action-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  u-icon-button {\n    color: var(--u-color-on-inverse-surface, rgb(245, 239, 247));\n    margin-inline: var(--u-snackbar-close-button-margin, var(--u-spacing-extra-small, 4px));\n  }\n\n  .message-container {\n    flex: 1 1 auto;\n    overflow: hidden;\n    color: var(--u-snackbar-message-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n    padding: var(--u-snackbar-text-margin, var(--u-spacing-medium, 16px));\n    line-height: 18px;\n  }\n\n  .message {\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  @media (min-width: 840px) {\n    :host {\n      --_snackbar-margin: var(--u-snackbar-margin, var(--u-spacing-large, 24px));\n    }\n    .container {\n      min-width: var(--u-snackbar-min-width, 344px);\n    }\n  }\n  @keyframes snackbar-fade-in {\n    0% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n    100% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n  }\n  @keyframes snackbar-fade-out {\n    0% {\n      opacity: 1;\n      transform: scale3d(1, 1, 1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale3d(0.5, 0.5, 1);\n    }\n  }\n`;\n"]}

package/switch/switch-list-item.d.ts

@@ -1,10 +1,10 @@
-import { UmSwitch } from './switch.js';
-declare const UmSwitchListItem_base: import("../shared/mixin.js").MixinReturn<typeof UmSwitch>;
-export declare class UmSwitchListItem extends UmSwitchListItem_base {
+import { Switch } from './switch.js';
+declare const SwitchListItem_base: import("../shared/mixin.js").MixinReturn<typeof Switch>;
+export declare class SwitchListItem extends SwitchListItem_base {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-switch-list-item': UmSwitchListItem;
+        'u-switch-list-item': SwitchListItem;
     }
 }
 export {};

package/switch/switch-list-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch-list-item.d.ts","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;;AAEvC,qBACa,gBAAiB,SAAQ,qBAAuC;CAE5E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"switch-list-item.d.ts","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;;AAErC,qBACa,cAAe,SAAQ,mBAAqC;CAExE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,cAAc,CAAC;KACtC;CACF"}

package/switch/switch-list-item.js

@@ -1,11 +1,11 @@
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
 import { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';
-import { UmSwitch } from './switch.js';
-let UmSwitchListItem = class UmSwitchListItem extends mixinSelectionControlListItem(UmSwitch) {
+import { Switch } from './switch.js';
+let SwitchListItem = class SwitchListItem extends mixinSelectionControlListItem(Switch) {
 };
-UmSwitchListItem = __decorate([
+SwitchListItem = __decorate([
     customElement('u-switch-list-item')
-], UmSwitchListItem);
-export { UmSwitchListItem };
+], SwitchListItem);
+export { SwitchListItem };
 //# sourceMappingURL=switch-list-item.js.map

package/switch/switch-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch-list-item.js","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGhC,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,6BAA6B,CAAC,QAAQ,CAAC;CAE5E,CAAA;AAFY,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { UmSwitch } from './switch.js';\n\n@customElement('u-switch-list-item')\nexport class UmSwitchListItem extends mixinSelectionControlListItem(UmSwitch) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch-list-item': UmSwitchListItem;\n  }\n}\n"]}
+{"version":3,"file":"switch-list-item.js","sourceRoot":"","sources":["../../src/switch/switch-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,6BAA6B,EAAE,MAAM,4DAA4D,CAAC;AAC3G,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAG9B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,6BAA6B,CAAC,MAAM,CAAC;CAExE,CAAA;AAFY,cAAc;IAD1B,aAAa,CAAC,oBAAoB,CAAC;GACvB,cAAc,CAE1B","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { mixinSelectionControlListItem } from '../shared/selection-control/selection-control-list-item.js';\nimport { Switch } from './switch.js';\n\n@customElement('u-switch-list-item')\nexport class SwitchListItem extends mixinSelectionControlListItem(Switch) {\n\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-switch-list-item': SwitchListItem;\n  }\n}\n"]}

package/switch/switch.d.ts

@@ -1,6 +1,6 @@
 import { HTMLTemplateResult } from 'lit';
-import { UmSelectionControl } from '../shared/selection-control/selection-control.js';
-export declare class UmSwitch extends UmSelectionControl {
+import { SelectionControl } from '../shared/selection-control/selection-control.js';
+export declare class Switch extends SelectionControl {
     static styles: import("lit").CSSResult[];
     constructor();
     protected renderRipple: boolean;
@@ -8,7 +8,7 @@ export declare class UmSwitch extends UmSelectionControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'u-switch': UmSwitch;
+        'u-switch': Switch;
     }
 }
 //# sourceMappingURL=switch.d.ts.map

package/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAGtF,qBACa,QAAS,SAAQ,kBAAkB;IAC9C,OAAgB,MAAM,4BAGpB;;IAMF,UAAmB,YAAY,UAAS;cAErB,eAAe,IAAI,kBAAkB;CASzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,QAAQ,CAAC;KACtB;CACF"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kDAAkD,CAAC;AAGpF,qBACa,MAAO,SAAQ,gBAAgB;IAC1C,OAAgB,MAAM,4BAGpB;;IAMF,UAAmB,YAAY,UAAS;cAErB,eAAe,IAAI,kBAAkB;CASzD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}