@m3e/web 2.5.7 → 2.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/all.js +3599 -863
  2. package/dist/all.js.map +1 -1
  3. package/dist/all.min.js +120 -57
  4. package/dist/all.min.js.map +1 -1
  5. package/dist/card.js +2 -2
  6. package/dist/card.js.map +1 -1
  7. package/dist/card.min.js +1 -1
  8. package/dist/card.min.js.map +1 -1
  9. package/dist/content-pane.js +1 -1
  10. package/dist/content-pane.js.map +1 -1
  11. package/dist/content-pane.min.js +1 -1
  12. package/dist/content-pane.min.js.map +1 -1
  13. package/dist/core.js +20 -4
  14. package/dist/core.js.map +1 -1
  15. package/dist/core.min.js +1 -1
  16. package/dist/core.min.js.map +1 -1
  17. package/dist/css-custom-data.json +496 -481
  18. package/dist/custom-elements.json +5642 -5588
  19. package/dist/drawer-container.js +13 -7
  20. package/dist/drawer-container.js.map +1 -1
  21. package/dist/drawer-container.min.js +1 -1
  22. package/dist/drawer-container.min.js.map +1 -1
  23. package/dist/html-custom-data.json +292 -292
  24. package/dist/loading-indicator.js +8 -8
  25. package/dist/loading-indicator.js.map +1 -1
  26. package/dist/loading-indicator.min.js +1 -1
  27. package/dist/loading-indicator.min.js.map +1 -1
  28. package/dist/slide-group.js +1 -1
  29. package/dist/slide-group.js.map +1 -1
  30. package/dist/slide-group.min.js.map +1 -1
  31. package/dist/snackbar.js +2 -2
  32. package/dist/snackbar.js.map +1 -1
  33. package/dist/snackbar.min.js +1 -1
  34. package/dist/snackbar.min.js.map +1 -1
  35. package/dist/src/card/styles/CardStyle.d.ts.map +1 -1
  36. package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
  37. package/dist/src/core/shared/controllers/ScrollController.d.ts.map +1 -1
  38. package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
  39. package/dist/src/drawer-container/DrawerToggleElement.d.ts.map +1 -1
  40. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts +1 -1
  41. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts.map +1 -1
  42. package/dist/src/snackbar/SnackbarElement.d.ts.map +1 -1
  43. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  44. package/dist/src/toc/TocElement.d.ts +4 -0
  45. package/dist/src/toc/TocElement.d.ts.map +1 -1
  46. package/dist/theme.js +3529 -832
  47. package/dist/theme.js.map +1 -1
  48. package/dist/theme.min.js +94 -31
  49. package/dist/theme.min.js.map +1 -1
  50. package/dist/toc.js +23 -6
  51. package/dist/toc.js.map +1 -1
  52. package/dist/toc.min.js +1 -1
  53. package/dist/toc.min.js.map +1 -1
  54. package/package.json +2 -2
package/dist/snackbar.js CHANGED
@@ -131,10 +131,10 @@ _M3eSnackbarElement_handleBeforeToggle = function _M3eSnackbarElement_handleBefo
131
131
  registerStyleSheet(css`m3e-snackbar { margin-inline: auto; }`);
132
132
  })();
133
133
  /** The styles of the element. */
134
- M3eSnackbarElement.styles = css`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scale(0.8); transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
134
+ M3eSnackbarElement.styles = css`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
135
135
  transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard},
136
136
  overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,
137
- visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scale(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${DesignToken.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`;
137
+ visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scaleY(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scaleY(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${DesignToken.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${DesignToken.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`;
138
138
  /** @private */
139
139
  M3eSnackbarElement.__current = null;
140
140
  __decorate([property({
@@ -1 +1 @@
1
- {"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-snackbar {\r\n margin-inline: auto;\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n position: fixed;\r\n top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n display: inline-flex;\r\n align-items: center;\r\n min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n max-width: var(--m3e-snackbar-max-width, 42rem);\r\n visibility: hidden;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host::backdrop {\r\n background-color: transparent;\r\n }\r\n :host(:popover-open) {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n @starting-style {\r\n :host(:popover-open) {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n }\r\n .base {\r\n display: inline-flex;\r\n align-items: center;\r\n flex: 1 1 auto;\r\n box-sizing: border-box;\r\n padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(\r\n --m3e-snackbar-supporting-text-font-weight,\r\n ${DesignToken.typescale.standard.label.large.fontWeight}\r\n );\r\n line-height: var(\r\n --m3e-snackbar-supporting-text-line-height,\r\n ${DesignToken.typescale.standard.label.large.lineHeight}\r\n );\r\n letter-spacing: var(\r\n --m3e-snackbar-supporting-text-tracking,\r\n ${DesignToken.typescale.standard.label.large.tracking}\r\n );\r\n color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n --m3e-text-button-hover-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-hover-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-standard-icon-button-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n }\r\n :host([dismissible]) .base {\r\n padding-inline-end: 0.5rem;\r\n }\r\n .supporting-text {\r\n flex: 1 1 auto;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-clamp: 2;\r\n margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n }\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host {\r\n background-color: Canvas;\r\n color: CanvasText;\r\n border-radius: ${DesignToken.shape.corner.small};\r\n box-sizing: border-box;\r\n outline: 1px solid CanvasText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n /** @private */ #timeoutId = -1;\r\n /** @private */ #actionTaken = false;\r\n /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n /** The currently open snackbar. */\r\n static get current(): M3eSnackbarElement | null {\r\n return M3eSnackbarElement.__current;\r\n }\r\n\r\n /**\r\n * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n * @default 3000\r\n */\r\n @property({ type: Number }) duration = 3000;\r\n\r\n /**\r\n * The label of the snackbar's action.\r\n * @default \"\"\r\n */\r\n @property() action = \"\";\r\n\r\n /**\r\n * Whether a button is presented that can be used to close the snackbar.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n /**\r\n * The accessible label given to the button used to dismiss the snackbar.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /** Whether the user clicked the action. */\r\n get isActionTaken(): boolean {\r\n return this.#actionTaken;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n this.setAttribute(\"popover\", \"manual\");\r\n this.ariaLive = \"polite\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render() {\r\n return html`<div class=\"base\">\r\n <span class=\"supporting-text\"><slot></slot></span>\r\n ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n </div>`;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues): void {\r\n super.updated(_changedProperties);\r\n\r\n // After render, compute the (unscaled) height of the snackbar in order\r\n // to properly position it relative to the viewport.\r\n // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n }\r\n\r\n /** @private */\r\n #renderActionButton(): unknown {\r\n return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderCloseButton(): unknown {\r\n return !this.dismissible\r\n ? nothing\r\n : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\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\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleActionClick(): void {\r\n this.#actionTaken = true;\r\n this.hidePopover();\r\n }\r\n\r\n /** @private */\r\n #handleBeforeToggle(e: ToggleEvent): void {\r\n if (e.newState == \"open\") {\r\n M3eSnackbarElement.__current?.hidePopover();\r\n M3eSnackbarElement.__current = this;\r\n\r\n if (this.duration > 0) {\r\n this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n }\r\n } else {\r\n if (M3eSnackbarElement.__current === this) {\r\n M3eSnackbarElement.__current = null;\r\n }\r\n\r\n clearTimeout(this.#timeoutId);\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-snackbar\": M3eSnackbarElement;\r\n }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n duration?: number;\r\n\r\n /** The accessible label given to the close button used to dismiss the snackbar. */\r\n closeLabel?: string;\r\n\r\n /** The callback function invoked when the action is clicked. */\r\n actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n * actionCallback: () => {\r\n * // Undo logic here\r\n * },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n /**\r\n * Opens a snackbar with a message.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and action.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message, action and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n static open(\r\n message: string,\r\n actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n dismissibleOrOptions?: boolean | SnackbarOptions,\r\n options?: SnackbarOptions,\r\n ): void {\r\n if (isServer) return;\r\n\r\n const snackbar = document.createElement(\"m3e-snackbar\");\r\n snackbar.append(document.createTextNode(message));\r\n\r\n let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n snackbar.action = actionOrDismissibleOrOptions;\r\n } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = actionOrDismissibleOrOptions;\r\n } else {\r\n actualOptions = actionOrDismissibleOrOptions;\r\n }\r\n\r\n if (typeof dismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = dismissibleOrOptions;\r\n } else {\r\n actualOptions = dismissibleOrOptions;\r\n }\r\n\r\n if (options) {\r\n actualOptions = options;\r\n }\r\n\r\n if (actualOptions?.duration !== undefined) {\r\n snackbar.duration = actualOptions.duration;\r\n }\r\n if (actualOptions?.closeLabel) {\r\n snackbar.closeLabel = actualOptions.closeLabel;\r\n }\r\n\r\n snackbar.addEventListener(\"toggle\", (e) => {\r\n if (e.newState === \"closed\") {\r\n if (prefersReducedMotion()) {\r\n snackbar.remove();\r\n } else {\r\n snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n }\r\n\r\n if (snackbar.isActionTaken) {\r\n actualOptions?.actionCallback?.();\r\n }\r\n }\r\n });\r\n\r\n (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n snackbar.showPopover();\r\n }\r\n\r\n /** Dismisses the currently visible snackbar. */\r\n static dismiss(): void {\r\n M3eSnackbarElement.current?.hidePopover();\r\n }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
1
+ {"version":3,"file":"snackbar.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-snackbar {\r\n margin-inline: auto;\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n position: fixed;\r\n top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n display: inline-flex;\r\n align-items: center;\r\n min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n max-width: var(--m3e-snackbar-max-width, 42rem);\r\n visibility: hidden;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n opacity: 0;\r\n transform: scaleY(0.8);\r\n transform-origin: bottom;\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host::backdrop {\r\n background-color: transparent;\r\n }\r\n :host(:popover-open) {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scaleY(1);\r\n }\r\n @starting-style {\r\n :host(:popover-open) {\r\n opacity: 0;\r\n transform: scaleY(0.8);\r\n }\r\n }\r\n .base {\r\n display: inline-flex;\r\n align-items: center;\r\n flex: 1 1 auto;\r\n box-sizing: border-box;\r\n padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(\r\n --m3e-snackbar-supporting-text-font-weight,\r\n ${DesignToken.typescale.standard.label.large.fontWeight}\r\n );\r\n line-height: var(\r\n --m3e-snackbar-supporting-text-line-height,\r\n ${DesignToken.typescale.standard.label.large.lineHeight}\r\n );\r\n letter-spacing: var(\r\n --m3e-snackbar-supporting-text-tracking,\r\n ${DesignToken.typescale.standard.label.large.tracking}\r\n );\r\n color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n --m3e-text-button-hover-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-hover-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-standard-icon-button-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n }\r\n :host([dismissible]) .base {\r\n padding-inline-end: 0.5rem;\r\n }\r\n .supporting-text {\r\n flex: 1 1 auto;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-clamp: 2;\r\n margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n }\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host {\r\n background-color: Canvas;\r\n color: CanvasText;\r\n border-radius: ${DesignToken.shape.corner.small};\r\n box-sizing: border-box;\r\n outline: 1px solid CanvasText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n /** @private */ #timeoutId = -1;\r\n /** @private */ #actionTaken = false;\r\n /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n /** The currently open snackbar. */\r\n static get current(): M3eSnackbarElement | null {\r\n return M3eSnackbarElement.__current;\r\n }\r\n\r\n /**\r\n * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n * @default 3000\r\n */\r\n @property({ type: Number }) duration = 3000;\r\n\r\n /**\r\n * The label of the snackbar's action.\r\n * @default \"\"\r\n */\r\n @property() action = \"\";\r\n\r\n /**\r\n * Whether a button is presented that can be used to close the snackbar.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n /**\r\n * The accessible label given to the button used to dismiss the snackbar.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /** Whether the user clicked the action. */\r\n get isActionTaken(): boolean {\r\n return this.#actionTaken;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n this.setAttribute(\"popover\", \"manual\");\r\n this.ariaLive = \"polite\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render() {\r\n return html`<div class=\"base\">\r\n <span class=\"supporting-text\"><slot></slot></span>\r\n ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n </div>`;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues): void {\r\n super.updated(_changedProperties);\r\n\r\n // After render, compute the (unscaled) height of the snackbar in order\r\n // to properly position it relative to the viewport.\r\n // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n }\r\n\r\n /** @private */\r\n #renderActionButton(): unknown {\r\n return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderCloseButton(): unknown {\r\n return !this.dismissible\r\n ? nothing\r\n : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\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\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleActionClick(): void {\r\n this.#actionTaken = true;\r\n this.hidePopover();\r\n }\r\n\r\n /** @private */\r\n #handleBeforeToggle(e: ToggleEvent): void {\r\n if (e.newState == \"open\") {\r\n M3eSnackbarElement.__current?.hidePopover();\r\n M3eSnackbarElement.__current = this;\r\n\r\n if (this.duration > 0) {\r\n this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n }\r\n } else {\r\n if (M3eSnackbarElement.__current === this) {\r\n M3eSnackbarElement.__current = null;\r\n }\r\n\r\n clearTimeout(this.#timeoutId);\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-snackbar\": M3eSnackbarElement;\r\n }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n duration?: number;\r\n\r\n /** The accessible label given to the close button used to dismiss the snackbar. */\r\n closeLabel?: string;\r\n\r\n /** The callback function invoked when the action is clicked. */\r\n actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n * actionCallback: () => {\r\n * // Undo logic here\r\n * },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n /**\r\n * Opens a snackbar with a message.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and action.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message, action and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n static open(\r\n message: string,\r\n actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n dismissibleOrOptions?: boolean | SnackbarOptions,\r\n options?: SnackbarOptions,\r\n ): void {\r\n if (isServer) return;\r\n\r\n const snackbar = document.createElement(\"m3e-snackbar\");\r\n snackbar.append(document.createTextNode(message));\r\n\r\n let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n snackbar.action = actionOrDismissibleOrOptions;\r\n } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = actionOrDismissibleOrOptions;\r\n } else {\r\n actualOptions = actionOrDismissibleOrOptions;\r\n }\r\n\r\n if (typeof dismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = dismissibleOrOptions;\r\n } else {\r\n actualOptions = dismissibleOrOptions;\r\n }\r\n\r\n if (options) {\r\n actualOptions = options;\r\n }\r\n\r\n if (actualOptions?.duration !== undefined) {\r\n snackbar.duration = actualOptions.duration;\r\n }\r\n if (actualOptions?.closeLabel) {\r\n snackbar.closeLabel = actualOptions.closeLabel;\r\n }\r\n\r\n snackbar.addEventListener(\"toggle\", (e) => {\r\n if (e.newState === \"closed\") {\r\n if (prefersReducedMotion()) {\r\n snackbar.remove();\r\n } else {\r\n snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n }\r\n\r\n if (snackbar.isActionTaken) {\r\n actualOptions?.actionCallback?.();\r\n }\r\n }\r\n });\r\n\r\n (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n snackbar.showPopover();\r\n }\r\n\r\n /** Dismisses the currently visible snackbar. */\r\n static dismiss(): void {\r\n M3eSnackbarElement.current?.hidePopover();\r\n }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","nothing","_M3eSnackbarElement_handleActionClick","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","append","createTextNode","actualOptions","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
@@ -3,5 +3,5 @@
3
3
  * Copyright (c) 2025–2026 matraic
4
4
  * See LICENSE file in the project root for full license text.
5
5
  */
6
- import{LitElement as e,html as t,nothing as o,css as r,unsafeCSS as a,isServer as n}from"lit";import{Role as i,registerStyleSheet as s,DesignToken as c,customElement as l,prefersReducedMotion as d}from"@m3e/web/core";import{__classPrivateFieldGet as m,__classPrivateFieldSet as b,__decorate as p}from"tslib";import{property as u}from"lit/decorators.js";import"@m3e/web/button";import"@m3e/web/icon-button";var v,h,g,k,f,x,y,$,w;let S=w=class extends(i(e,"status")){constructor(){super(...arguments),v.add(this),h.set(this,-1),g.set(this,!1),k.set(this,e=>m(this,v,"m",$).call(this,e)),this.duration=3e3,this.action="",this.dismissible=!1,this.closeLabel="Close"}static get current(){return w.__current}get isActionTaken(){return m(this,g,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("beforetoggle",m(this,k,"f")),this.setAttribute("popover","manual"),this.ariaLive="polite"}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("beforetoggle",m(this,k,"f"))}render(){return t`<div class="base"><span class="supporting-text"><slot></slot></span>${m(this,v,"m",f).call(this)} ${m(this,v,"m",x).call(this)}</div>`}updated(e){super.updated(e),this.style.setProperty("--_snackbar-height",this.getBoundingClientRect().height/.8+"px")}};h=new WeakMap,g=new WeakMap,k=new WeakMap,v=new WeakSet,f=function(){return this.action?t`<m3e-button @click="${m(this,v,"m",y)}">${this.action}</m3e-button>`:o},x=function(){return this.dismissible?t`<m3e-icon-button aria-label="${this.closeLabel}" @click="${this.hidePopover}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button>`:o},y=function(){b(this,g,!0,"f"),this.hidePopover()},$=function(e){"open"==e.newState?(w.__current?.hidePopover(),w.__current=this,this.duration>0&&b(this,h,setTimeout(()=>this.hidePopover(),this.duration),"f")):(w.__current===this&&(w.__current=null),clearTimeout(m(this,h,"f")))},s(r`m3e-snackbar { margin-inline: auto; }`),S.styles=r`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scale(0.8); transition: ${a(`opacity ${c.motion.duration.short3} ${c.motion.easing.standard}, \n transform ${c.motion.duration.short3} ${c.motion.easing.standard}, \n overlay ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete,\n visibility ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scale(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scale(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${c.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${c.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${c.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${c.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${c.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${c.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${c.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${c.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${c.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`,S.__current=null,p([u({type:Number})],S.prototype,"duration",void 0),p([u()],S.prototype,"action",void 0),p([u({type:Boolean,reflect:!0})],S.prototype,"dismissible",void 0),p([u({attribute:"close-label"})],S.prototype,"closeLabel",void 0),S=w=p([l("m3e-snackbar")],S);class P{static open(e,t,o,r){if(n)return;const a=document.createElement("m3e-snackbar");let i;a.append(document.createTextNode(e)),"string"==typeof t?a.action=t:"boolean"==typeof t?a.dismissible=t:i=t,"boolean"==typeof o?a.dismissible=o:i=o,r&&(i=r),void 0!==i?.duration&&(a.duration=i.duration),i?.closeLabel&&(a.closeLabel=i.closeLabel),a.addEventListener("toggle",e=>{"closed"===e.newState&&(d()?a.remove():a.addEventListener("transitionend",()=>a.remove(),{once:!0}),a.isActionTaken&&i?.actionCallback?.())}),(document.querySelector("m3e-theme")??document.body).append(a),a.showPopover()}static dismiss(){S.current?.hidePopover()}}globalThis.M3eSnackbar=P;export{P as M3eSnackbar,S as M3eSnackbarElement};
6
+ import{LitElement as e,html as t,nothing as o,css as r,unsafeCSS as a,isServer as n}from"lit";import{Role as i,registerStyleSheet as s,DesignToken as c,customElement as l,prefersReducedMotion as d}from"@m3e/web/core";import{__classPrivateFieldGet as m,__classPrivateFieldSet as b,__decorate as p}from"tslib";import{property as u}from"lit/decorators.js";import"@m3e/web/button";import"@m3e/web/icon-button";var v,h,g,k,f,x,y,$,w;let S=w=class extends(i(e,"status")){constructor(){super(...arguments),v.add(this),h.set(this,-1),g.set(this,!1),k.set(this,e=>m(this,v,"m",$).call(this,e)),this.duration=3e3,this.action="",this.dismissible=!1,this.closeLabel="Close"}static get current(){return w.__current}get isActionTaken(){return m(this,g,"f")}connectedCallback(){super.connectedCallback(),this.addEventListener("beforetoggle",m(this,k,"f")),this.setAttribute("popover","manual"),this.ariaLive="polite"}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("beforetoggle",m(this,k,"f"))}render(){return t`<div class="base"><span class="supporting-text"><slot></slot></span>${m(this,v,"m",f).call(this)} ${m(this,v,"m",x).call(this)}</div>`}updated(e){super.updated(e),this.style.setProperty("--_snackbar-height",this.getBoundingClientRect().height/.8+"px")}};h=new WeakMap,g=new WeakMap,k=new WeakMap,v=new WeakSet,f=function(){return this.action?t`<m3e-button @click="${m(this,v,"m",y)}">${this.action}</m3e-button>`:o},x=function(){return this.dismissible?t`<m3e-icon-button aria-label="${this.closeLabel}" @click="${this.hidePopover}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor"><path 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"/></svg></slot></m3e-icon-button>`:o},y=function(){b(this,g,!0,"f"),this.hidePopover()},$=function(e){"open"==e.newState?(w.__current?.hidePopover(),w.__current=this,this.duration>0&&b(this,h,setTimeout(()=>this.hidePopover(),this.duration),"f")):(w.__current===this&&(w.__current=null),clearTimeout(m(this,h,"f")))},s(r`m3e-snackbar { margin-inline: auto; }`),S.styles=r`:host { position: fixed; top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem)); display: inline-flex; align-items: center; min-width: var(--m3e-snackbar-min-width, 21.5rem); max-width: var(--m3e-snackbar-max-width, 42rem); visibility: hidden; border: none; margin: 0; padding: 0; opacity: 0; transform: scaleY(0.8); transform-origin: bottom; transition: ${a(`opacity ${c.motion.duration.short3} ${c.motion.easing.standard}, \n transform ${c.motion.duration.short3} ${c.motion.easing.standard}, \n overlay ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete,\n visibility ${c.motion.duration.short3} ${c.motion.easing.standard} allow-discrete`)}; } :host::backdrop { background-color: transparent; } :host(:popover-open) { visibility: visible; opacity: 1; transform: scaleY(1); } @starting-style { :host(:popover-open) { opacity: 0; transform: scaleY(0.8); } } .base { display: inline-flex; align-items: center; flex: 1 1 auto; box-sizing: border-box; padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem); border-radius: var(--m3e-snackbar-container-shape, ${c.shape.corner.extraSmall}); background-color: var(--m3e-snackbar-container-color, ${c.color.inverseSurface}); font-size: var(--m3e-snackbar-supporting-text-font-size, ${c.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-snackbar-supporting-text-font-weight, ${c.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-snackbar-supporting-text-line-height, ${c.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-snackbar-supporting-text-tracking, ${c.typescale.standard.label.large.tracking} ); color: var(--m3e-snackbar-supporting-text-color, ${c.color.inverseOnSurface}); --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${c.color.inversePrimary}); --m3e-text-button-hover-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-hover-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-focus-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-label-text-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-text-button-pressed-state-layer-color: var( --m3e-snackbar-action-text-color, ${c.color.inversePrimary} ); --m3e-standard-icon-button-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-hover-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-focus-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-icon-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); --m3e-standard-icon-button-pressed-state-layer-color: var( --m3e-snackbar-close-icon-color, ${c.color.inverseOnSurface} ); } :host([dismissible]) .base { padding-inline-end: 0.5rem; } .supporting-text { flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem); } ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important; } @media (forced-colors: active) { :host { background-color: Canvas; color: CanvasText; border-radius: ${c.shape.corner.small}; box-sizing: border-box; outline: 1px solid CanvasText; } }`,S.__current=null,p([u({type:Number})],S.prototype,"duration",void 0),p([u()],S.prototype,"action",void 0),p([u({type:Boolean,reflect:!0})],S.prototype,"dismissible",void 0),p([u({attribute:"close-label"})],S.prototype,"closeLabel",void 0),S=w=p([l("m3e-snackbar")],S);class P{static open(e,t,o,r){if(n)return;const a=document.createElement("m3e-snackbar");let i;a.append(document.createTextNode(e)),"string"==typeof t?a.action=t:"boolean"==typeof t?a.dismissible=t:i=t,"boolean"==typeof o?a.dismissible=o:i=o,r&&(i=r),void 0!==i?.duration&&(a.duration=i.duration),i?.closeLabel&&(a.closeLabel=i.closeLabel),a.addEventListener("toggle",e=>{"closed"===e.newState&&(d()?a.remove():a.addEventListener("transitionend",()=>a.remove(),{once:!0}),a.isActionTaken&&i?.actionCallback?.())}),(document.querySelector("m3e-theme")??document.body).append(a),a.showPopover()}static dismiss(){S.current?.hidePopover()}}globalThis.M3eSnackbar=P;export{P as M3eSnackbar,S as M3eSnackbarElement};
7
7
  //# sourceMappingURL=snackbar.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"snackbar.min.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-snackbar {\r\n margin-inline: auto;\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n position: fixed;\r\n top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n display: inline-flex;\r\n align-items: center;\r\n min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n max-width: var(--m3e-snackbar-max-width, 42rem);\r\n visibility: hidden;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n opacity: 0;\r\n transform: scale(0.8);\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host::backdrop {\r\n background-color: transparent;\r\n }\r\n :host(:popover-open) {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n @starting-style {\r\n :host(:popover-open) {\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n }\r\n .base {\r\n display: inline-flex;\r\n align-items: center;\r\n flex: 1 1 auto;\r\n box-sizing: border-box;\r\n padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(\r\n --m3e-snackbar-supporting-text-font-weight,\r\n ${DesignToken.typescale.standard.label.large.fontWeight}\r\n );\r\n line-height: var(\r\n --m3e-snackbar-supporting-text-line-height,\r\n ${DesignToken.typescale.standard.label.large.lineHeight}\r\n );\r\n letter-spacing: var(\r\n --m3e-snackbar-supporting-text-tracking,\r\n ${DesignToken.typescale.standard.label.large.tracking}\r\n );\r\n color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n --m3e-text-button-hover-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-hover-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-standard-icon-button-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n }\r\n :host([dismissible]) .base {\r\n padding-inline-end: 0.5rem;\r\n }\r\n .supporting-text {\r\n flex: 1 1 auto;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-clamp: 2;\r\n margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n }\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host {\r\n background-color: Canvas;\r\n color: CanvasText;\r\n border-radius: ${DesignToken.shape.corner.small};\r\n box-sizing: border-box;\r\n outline: 1px solid CanvasText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n /** @private */ #timeoutId = -1;\r\n /** @private */ #actionTaken = false;\r\n /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n /** The currently open snackbar. */\r\n static get current(): M3eSnackbarElement | null {\r\n return M3eSnackbarElement.__current;\r\n }\r\n\r\n /**\r\n * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n * @default 3000\r\n */\r\n @property({ type: Number }) duration = 3000;\r\n\r\n /**\r\n * The label of the snackbar's action.\r\n * @default \"\"\r\n */\r\n @property() action = \"\";\r\n\r\n /**\r\n * Whether a button is presented that can be used to close the snackbar.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n /**\r\n * The accessible label given to the button used to dismiss the snackbar.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /** Whether the user clicked the action. */\r\n get isActionTaken(): boolean {\r\n return this.#actionTaken;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n this.setAttribute(\"popover\", \"manual\");\r\n this.ariaLive = \"polite\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render() {\r\n return html`<div class=\"base\">\r\n <span class=\"supporting-text\"><slot></slot></span>\r\n ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n </div>`;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues): void {\r\n super.updated(_changedProperties);\r\n\r\n // After render, compute the (unscaled) height of the snackbar in order\r\n // to properly position it relative to the viewport.\r\n // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n }\r\n\r\n /** @private */\r\n #renderActionButton(): unknown {\r\n return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderCloseButton(): unknown {\r\n return !this.dismissible\r\n ? nothing\r\n : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\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\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleActionClick(): void {\r\n this.#actionTaken = true;\r\n this.hidePopover();\r\n }\r\n\r\n /** @private */\r\n #handleBeforeToggle(e: ToggleEvent): void {\r\n if (e.newState == \"open\") {\r\n M3eSnackbarElement.__current?.hidePopover();\r\n M3eSnackbarElement.__current = this;\r\n\r\n if (this.duration > 0) {\r\n this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n }\r\n } else {\r\n if (M3eSnackbarElement.__current === this) {\r\n M3eSnackbarElement.__current = null;\r\n }\r\n\r\n clearTimeout(this.#timeoutId);\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-snackbar\": M3eSnackbarElement;\r\n }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n duration?: number;\r\n\r\n /** The accessible label given to the close button used to dismiss the snackbar. */\r\n closeLabel?: string;\r\n\r\n /** The callback function invoked when the action is clicked. */\r\n actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n * actionCallback: () => {\r\n * // Undo logic here\r\n * },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n /**\r\n * Opens a snackbar with a message.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and action.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message, action and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n static open(\r\n message: string,\r\n actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n dismissibleOrOptions?: boolean | SnackbarOptions,\r\n options?: SnackbarOptions,\r\n ): void {\r\n if (isServer) return;\r\n\r\n const snackbar = document.createElement(\"m3e-snackbar\");\r\n snackbar.append(document.createTextNode(message));\r\n\r\n let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n snackbar.action = actionOrDismissibleOrOptions;\r\n } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = actionOrDismissibleOrOptions;\r\n } else {\r\n actualOptions = actionOrDismissibleOrOptions;\r\n }\r\n\r\n if (typeof dismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = dismissibleOrOptions;\r\n } else {\r\n actualOptions = dismissibleOrOptions;\r\n }\r\n\r\n if (options) {\r\n actualOptions = options;\r\n }\r\n\r\n if (actualOptions?.duration !== undefined) {\r\n snackbar.duration = actualOptions.duration;\r\n }\r\n if (actualOptions?.closeLabel) {\r\n snackbar.closeLabel = actualOptions.closeLabel;\r\n }\r\n\r\n snackbar.addEventListener(\"toggle\", (e) => {\r\n if (e.newState === \"closed\") {\r\n if (prefersReducedMotion()) {\r\n snackbar.remove();\r\n } else {\r\n snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n }\r\n\r\n if (snackbar.isActionTaken) {\r\n actualOptions?.actionCallback?.();\r\n }\r\n }\r\n });\r\n\r\n (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n snackbar.showPopover();\r\n }\r\n\r\n /** Dismisses the currently visible snackbar. */\r\n static dismiss(): void {\r\n M3eSnackbarElement.current?.hidePopover();\r\n }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","this","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","super","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","_M3eSnackbarElement_handleActionClick","nothing","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","actualOptions","append","createTextNode","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
1
+ {"version":3,"file":"snackbar.min.js","sources":["../../src/snackbar/SnackbarElement.ts","../../src/snackbar/Snackbar.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\n\r\nimport { css, CSSResultGroup, html, LitElement, nothing, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, registerStyleSheet, Role } from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/button\";\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen.\r\n * @tag m3e-snackbar\r\n *\r\n * @slot - Renders the content of the snackbar.\r\n * @slot close-icon - Renders the icon of the button used to close the snackbar.\r\n *\r\n * @attr action - The label of the snackbar's action.\r\n * @attr close-label - The accessible label given to the button used to dismiss the snackbar.\r\n * @attr dismissible - Whether a button is presented that can be used to close the snackbar.\r\n * @attr duration - The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n *\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-snackbar-margin - Vertical offset from the bottom of the viewport.\r\n * @cssprop --m3e-snackbar-container-shape - Border radius of the snackbar container.\r\n * @cssprop --m3e-snackbar-container-color - Background color of the snackbar.\r\n * @cssprop --m3e-snackbar-padding - Internal spacing of the snackbar container.\r\n * @cssprop --m3e-snackbar-min-width - Minimum width of the snackbar.\r\n * @cssprop --m3e-snackbar-max-width - Maximum width of the snackbar.\r\n */\r\n@customElement(\"m3e-snackbar\")\r\nexport class M3eSnackbarElement extends Role(LitElement, \"status\") {\r\n static {\r\n registerStyleSheet(css`\r\n m3e-snackbar {\r\n margin-inline: auto;\r\n }\r\n `);\r\n }\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n position: fixed;\r\n top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n display: inline-flex;\r\n align-items: center;\r\n min-width: var(--m3e-snackbar-min-width, 21.5rem);\r\n max-width: var(--m3e-snackbar-max-width, 42rem);\r\n visibility: hidden;\r\n border: none;\r\n margin: 0;\r\n padding: 0;\r\n opacity: 0;\r\n transform: scaleY(0.8);\r\n transform-origin: bottom;\r\n transition: ${unsafeCSS(\r\n `opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n transform ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host::backdrop {\r\n background-color: transparent;\r\n }\r\n :host(:popover-open) {\r\n visibility: visible;\r\n opacity: 1;\r\n transform: scaleY(1);\r\n }\r\n @starting-style {\r\n :host(:popover-open) {\r\n opacity: 0;\r\n transform: scaleY(0.8);\r\n }\r\n }\r\n .base {\r\n display: inline-flex;\r\n align-items: center;\r\n flex: 1 1 auto;\r\n box-sizing: border-box;\r\n padding: var(--m3e-snackbar-padding, 0 1rem 0 1rem);\r\n border-radius: var(--m3e-snackbar-container-shape, ${DesignToken.shape.corner.extraSmall});\r\n background-color: var(--m3e-snackbar-container-color, ${DesignToken.color.inverseSurface});\r\n font-size: var(--m3e-snackbar-supporting-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n font-weight: var(\r\n --m3e-snackbar-supporting-text-font-weight,\r\n ${DesignToken.typescale.standard.label.large.fontWeight}\r\n );\r\n line-height: var(\r\n --m3e-snackbar-supporting-text-line-height,\r\n ${DesignToken.typescale.standard.label.large.lineHeight}\r\n );\r\n letter-spacing: var(\r\n --m3e-snackbar-supporting-text-tracking,\r\n ${DesignToken.typescale.standard.label.large.tracking}\r\n );\r\n color: var(--m3e-snackbar-supporting-text-color, ${DesignToken.color.inverseOnSurface});\r\n\r\n --m3e-text-button-label-text-color: var(--m3e-snackbar-action-text-color, ${DesignToken.color.inversePrimary});\r\n --m3e-text-button-hover-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-hover-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-focus-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-label-text-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-text-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-action-text-color,\r\n ${DesignToken.color.inversePrimary}\r\n );\r\n --m3e-standard-icon-button-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-hover-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-focus-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-icon-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n --m3e-standard-icon-button-pressed-state-layer-color: var(\r\n --m3e-snackbar-close-icon-color,\r\n ${DesignToken.color.inverseOnSurface}\r\n );\r\n }\r\n :host([dismissible]) .base {\r\n padding-inline-end: 0.5rem;\r\n }\r\n .supporting-text {\r\n flex: 1 1 auto;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n line-clamp: 2;\r\n margin-block: var(--m3e-snackbar-supporting-text-margin-block, 0.875rem);\r\n }\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: var(--m3e-icon-button-icon-size, 1.5rem) !important;\r\n }\r\n @media (forced-colors: active) {\r\n :host {\r\n background-color: Canvas;\r\n color: CanvasText;\r\n border-radius: ${DesignToken.shape.corner.small};\r\n box-sizing: border-box;\r\n outline: 1px solid CanvasText;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */ static __current: M3eSnackbarElement | null = null;\r\n\r\n /** @private */ #timeoutId = -1;\r\n /** @private */ #actionTaken = false;\r\n /** @private */ readonly #beforeToggleHandler = (e: ToggleEvent) => this.#handleBeforeToggle(e);\r\n\r\n /** The currently open snackbar. */\r\n static get current(): M3eSnackbarElement | null {\r\n return M3eSnackbarElement.__current;\r\n }\r\n\r\n /**\r\n * The length of time, in milliseconds, to wait before automatically dismissing the snackbar.\r\n * @default 3000\r\n */\r\n @property({ type: Number }) duration = 3000;\r\n\r\n /**\r\n * The label of the snackbar's action.\r\n * @default \"\"\r\n */\r\n @property() action = \"\";\r\n\r\n /**\r\n * Whether a button is presented that can be used to close the snackbar.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) dismissible = false;\r\n\r\n /**\r\n * The accessible label given to the button used to dismiss the snackbar.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /** Whether the user clicked the action. */\r\n get isActionTaken(): boolean {\r\n return this.#actionTaken;\r\n }\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.addEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n this.setAttribute(\"popover\", \"manual\");\r\n this.ariaLive = \"polite\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n\r\n this.removeEventListener(\"beforetoggle\", this.#beforeToggleHandler);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render() {\r\n return html`<div class=\"base\">\r\n <span class=\"supporting-text\"><slot></slot></span>\r\n ${this.#renderActionButton()} ${this.#renderCloseButton()}\r\n </div>`;\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues): void {\r\n super.updated(_changedProperties);\r\n\r\n // After render, compute the (unscaled) height of the snackbar in order\r\n // to properly position it relative to the viewport.\r\n // top: calc(100vh - var(--_snackbar-height, 0px) - var(--m3e-snackbar-margin, 1rem));\r\n\r\n this.style.setProperty(\"--_snackbar-height\", `${this.getBoundingClientRect().height / 0.8}px`);\r\n }\r\n\r\n /** @private */\r\n #renderActionButton(): unknown {\r\n return !this.action ? nothing : html`<m3e-button @click=\"${this.#handleActionClick}\">${this.action}</m3e-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderCloseButton(): unknown {\r\n return !this.dismissible\r\n ? nothing\r\n : html`<m3e-icon-button aria-label=\"${this.closeLabel}\" @click=\"${this.hidePopover}\">\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\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\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleActionClick(): void {\r\n this.#actionTaken = true;\r\n this.hidePopover();\r\n }\r\n\r\n /** @private */\r\n #handleBeforeToggle(e: ToggleEvent): void {\r\n if (e.newState == \"open\") {\r\n M3eSnackbarElement.__current?.hidePopover();\r\n M3eSnackbarElement.__current = this;\r\n\r\n if (this.duration > 0) {\r\n this.#timeoutId = setTimeout(() => this.hidePopover(), this.duration);\r\n }\r\n } else {\r\n if (M3eSnackbarElement.__current === this) {\r\n M3eSnackbarElement.__current = null;\r\n }\r\n\r\n clearTimeout(this.#timeoutId);\r\n }\r\n }\r\n}\r\n\r\ninterface M3eSnackbarElementEventMap extends HTMLElementEventMap {\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSnackbarElement {\r\n addEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSnackbarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSnackbarElement, ev: M3eSnackbarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-snackbar\": M3eSnackbarElement;\r\n }\r\n}\r\n","import { isServer } from \"lit\";\r\n\r\nimport { prefersReducedMotion } from \"@m3e/web/core\";\r\n\r\nimport { M3eSnackbarElement } from \"./SnackbarElement\";\r\n\r\n/** Encapsulates options used to present a snackbar message. */\r\nexport interface SnackbarOptions {\r\n /** The length of time, in milliseconds, to wait before automatically dismissing the snackbar. */\r\n duration?: number;\r\n\r\n /** The accessible label given to the close button used to dismiss the snackbar. */\r\n closeLabel?: string;\r\n\r\n /** The callback function invoked when the action is clicked. */\r\n actionCallback?: () => void;\r\n}\r\n\r\n/**\r\n * Presents short updates about application processes at the bottom of the screen from anywhere in an application.\r\n * @example\r\n * The following example illustrates basic usage.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\");\r\n * ```\r\n * @example\r\n * The next example illustrates presenting a snackbar with an action and callback.\r\n * ```js\r\n * M3eSnackbar.open(\"File deleted\", \"Undo\", {\r\n * actionCallback: () => {\r\n * // Undo logic here\r\n * },\r\n * });\r\n */\r\nexport class M3eSnackbar {\r\n /**\r\n * Opens a snackbar with a message.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and action.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message, action and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {string} action The label for the snackbar action.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, action: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n /**\r\n * Opens a snackbar with a message and optional close affordance.\r\n * @param {string} message The message to show in the snackbar.\r\n * @param {boolean} dismissible Whether to present close affordance.\r\n * @param {SnackbarOptions | undefined} options Options that control the behavior of the snackbar.\r\n */\r\n static open(message: string, dismissible: boolean, options?: SnackbarOptions): void;\r\n\r\n static open(\r\n message: string,\r\n actionOrDismissibleOrOptions?: string | boolean | SnackbarOptions,\r\n dismissibleOrOptions?: boolean | SnackbarOptions,\r\n options?: SnackbarOptions,\r\n ): void {\r\n if (isServer) return;\r\n\r\n const snackbar = document.createElement(\"m3e-snackbar\");\r\n snackbar.append(document.createTextNode(message));\r\n\r\n let actualOptions: SnackbarOptions | undefined = undefined;\r\n\r\n if (typeof actionOrDismissibleOrOptions == \"string\") {\r\n snackbar.action = actionOrDismissibleOrOptions;\r\n } else if (typeof actionOrDismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = actionOrDismissibleOrOptions;\r\n } else {\r\n actualOptions = actionOrDismissibleOrOptions;\r\n }\r\n\r\n if (typeof dismissibleOrOptions == \"boolean\") {\r\n snackbar.dismissible = dismissibleOrOptions;\r\n } else {\r\n actualOptions = dismissibleOrOptions;\r\n }\r\n\r\n if (options) {\r\n actualOptions = options;\r\n }\r\n\r\n if (actualOptions?.duration !== undefined) {\r\n snackbar.duration = actualOptions.duration;\r\n }\r\n if (actualOptions?.closeLabel) {\r\n snackbar.closeLabel = actualOptions.closeLabel;\r\n }\r\n\r\n snackbar.addEventListener(\"toggle\", (e) => {\r\n if (e.newState === \"closed\") {\r\n if (prefersReducedMotion()) {\r\n snackbar.remove();\r\n } else {\r\n snackbar.addEventListener(\"transitionend\", () => snackbar.remove(), { once: true });\r\n }\r\n\r\n if (snackbar.isActionTaken) {\r\n actualOptions?.actionCallback?.();\r\n }\r\n }\r\n });\r\n\r\n (document.querySelector(\"m3e-theme\") ?? document.body).append(snackbar);\r\n snackbar.showPopover();\r\n }\r\n\r\n /** Dismisses the currently visible snackbar. */\r\n static dismiss(): void {\r\n M3eSnackbarElement.current?.hidePopover();\r\n }\r\n}\r\n\r\n// This is the class type, as opposed to an instance of the class.\r\ntype M3eSnackbarClass = typeof M3eSnackbar;\r\n\r\ndeclare global {\r\n /** Presents short updates about application processes at the bottom of the screen from anywhere in an application. */\r\n var M3eSnackbar: M3eSnackbarClass;\r\n}\r\n\r\nglobalThis.M3eSnackbar = M3eSnackbar;\r\n"],"names":["M3eSnackbarElement","M3eSnackbarElement_1","Role","LitElement","constructor","_M3eSnackbarElement_timeoutId","set","this","_M3eSnackbarElement_actionTaken","_M3eSnackbarElement_beforeToggleHandler","e","__classPrivateFieldGet","call","duration","action","dismissible","closeLabel","current","__current","isActionTaken","connectedCallback","super","addEventListener","setAttribute","ariaLive","disconnectedCallback","removeEventListener","render","html","_M3eSnackbarElement_instances","_M3eSnackbarElement_renderActionButton","_M3eSnackbarElement_renderCloseButton","updated","_changedProperties","style","setProperty","getBoundingClientRect","height","_M3eSnackbarElement_handleActionClick","nothing","hidePopover","__classPrivateFieldSet","newState","setTimeout","clearTimeout","registerStyleSheet","css","styles","unsafeCSS","DesignToken","motion","short3","easing","standard","shape","corner","extraSmall","color","inverseSurface","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","inverseOnSurface","inversePrimary","small","__decorate","property","type","Number","prototype","Boolean","reflect","attribute","customElement","M3eSnackbar","open","message","actionOrDismissibleOrOptions","dismissibleOrOptions","options","isServer","snackbar","document","createElement","actualOptions","append","createTextNode","undefined","prefersReducedMotion","remove","once","actionCallback","querySelector","body","showPopover","dismiss","globalThis"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CardStyle.d.ts","sourceRoot":"","sources":["../../../../src/card/styles/CardStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAa,MAAM,KAAK,CAAC;AAOhD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,SAyKvB,CAAC"}
1
+ {"version":3,"file":"CardStyle.d.ts","sourceRoot":"","sources":["../../../../src/card/styles/CardStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,SAAS,EAAa,MAAM,KAAK,CAAC;AAOhD;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,SA2KvB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"ContentPaneElement.d.ts","sourceRoot":"","sources":["../../../src/content-pane/ContentPaneElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAIvF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,qBAAsB,SAAQ,0BAA+B;;IACxE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAqCpC;IAEF,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
1
+ {"version":3,"file":"ContentPaneElement.d.ts","sourceRoot":"","sources":["../../../src/content-pane/ContentPaneElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;;AAIvF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,qBAAsB,SAAQ,0BAA+B;;IACxE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAsCpC;IAEF,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAmBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollController.d.ts","sourceRoot":"","sources":["../../../../../src/core/shared/controllers/ScrollController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAG1F,4EAA4E;AAC5E,MAAM,MAAM,wBAAwB,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjE,mEAAmE;AACnE,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,8DAA8D;IAC9D,QAAQ,EAAE,wBAAwB,CAAC;IAEnC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wGAAwG;AACxG,qBAAa,gBAAiB,SAAQ,qBAAqB;;IAMzD;;;;OAIG;gBACS,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,OAAO,EAAE,uBAAuB;IAMxF;;;;OAIG;IACH,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,EAAE,GAAG,SAAS;IAI/D,kBAAkB;cACC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAYtD,kBAAkB;cACC,UAAU,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAoCxD,eAAe;IAEf,OAAO,CAAC,iBAAiB;CAG1B"}
1
+ {"version":3,"file":"ScrollController.d.ts","sourceRoot":"","sources":["../../../../../src/core/shared/controllers/ScrollController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAG1F,4EAA4E;AAC5E,MAAM,MAAM,wBAAwB,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjE,mEAAmE;AACnE,MAAM,WAAW,uBAAwB,SAAQ,wBAAwB;IACvE,8DAA8D;IAC9D,QAAQ,EAAE,wBAAwB,CAAC;IAEnC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wGAAwG;AACxG,qBAAa,gBAAiB,SAAQ,qBAAqB;;IAMzD;;;;OAIG;gBACS,IAAI,EAAE,sBAAsB,GAAG,WAAW,EAAE,OAAO,EAAE,uBAAuB;IAMxF;;;;OAIG;IACH,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,EAAE,GAAG,SAAS;IAI/D,kBAAkB;cACC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAYtD,kBAAkB;cACC,UAAU,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IA+DxD,eAAe;IAEf,OAAO,CAAC,iBAAiB;CAG1B"}
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerContainerElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAevE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,yBAA0B,SAAQ,8BAAgD;;IAC7F,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAYhF;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmD,SAAS,EAAE,UAAU,CAAU;IAErF;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;OAGG;IACyC,GAAG,UAAS;IAExD;;;OAGG;IACiD,OAAO,EAAE,UAAU,CAAU;IAEjF;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0B5E,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IASpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA2IrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
1
+ {"version":3,"file":"DrawerContainerElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAevE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,yBAA0B,SAAQ,8BAAgD;;IAC7F,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAYhF;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmD,SAAS,EAAE,UAAU,CAAU;IAErF;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;OAGG;IACyC,GAAG,UAAS;IAExD;;;OAGG;IACiD,OAAO,EAAE,UAAU,CAAU;IAEjF;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAwB5E,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IASpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA8IrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerToggleElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerToggleElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAA0B,MAAM,eAAe,CAAC;;AAK1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,sBAAuB,SAAQ,2BAA0B;;IAIpE,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAc3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAcvB,kBAAkB;IACT,QAAQ,IAAI,IAAI;CAgE1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
1
+ {"version":3,"file":"DrawerToggleElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerToggleElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAA0B,MAAM,eAAe,CAAC;;AAK1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,sBAAuB,SAAQ,2BAA0B;;IAIpE,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAc3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IAcvB,kBAAkB;IACT,QAAQ,IAAI,IAAI;CAsE1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
@@ -32,7 +32,7 @@ export declare class M3eLoadingIndicatorElement extends M3eLoadingIndicatorEleme
32
32
  /** The styles of the element. */
33
33
  static styles: import("lit").CSSResult;
34
34
  /** @private */
35
- private readonly _activeIndicator?;
35
+ private readonly _container?;
36
36
  /**
37
37
  * The appearance variant of the indicator.
38
38
  * @default "uncontained"
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingIndicatorElement.d.ts","sourceRoot":"","sources":["../../../src/loading-indicator/LoadingIndicatorElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,0BAA2B,SAAQ,+BAAoD;IAClG,iCAAiC;IACjC,OAAgB,MAAM,0BAgGpB;IAEF,eAAe;IACa,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAc;IAE5E;;;OAGG;IAC0B,OAAO,EAAE,uBAAuB,CAAiB;IAE9E,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAOlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;IACT,MAAM;CAKhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
1
+ {"version":3,"file":"LoadingIndicatorElement.d.ts","sourceRoot":"","sources":["../../../src/loading-indicator/LoadingIndicatorElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;;AAIpE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,0BAA2B,SAAQ,+BAAoD;IAClG,iCAAiC;IACjC,OAAgB,MAAM,0BAyGpB;IAEF,eAAe;IACM,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAc;IAE/D;;;OAGG;IAC0B,OAAO,EAAE,uBAAuB,CAAiB;IAE9E,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAOlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAKrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAKpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;IACT,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,0BAA0B,CAAC;KACrD;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"SnackbarElement.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAKhG,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;;AAE9B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,uBAA0B;;IAQhE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0IpC;IAEF,eAAe,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAMnE,mCAAmC;IACnC,MAAM,KAAK,OAAO,IAAI,kBAAkB,GAAG,IAAI,CAE9C;IAED;;;OAGG;IACyB,QAAQ,SAAQ;IAE5C;;;OAGG;IACS,MAAM,SAAM;IAExB;;;OAGG;IACyC,WAAW,UAAS;IAEhE;;;OAGG;IACqC,UAAU,SAAW;IAE7D,2CAA2C;IAC3C,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAQlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,MAAM;IAOzB,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;CAqDrE;AAED,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,YAAY,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EACzD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC5D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
1
+ {"version":3,"file":"SnackbarElement.d.ts","sourceRoot":"","sources":["../../../src/snackbar/SnackbarElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;AAKhG,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;;AAE9B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,uBAA0B;;IAQhE,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA2IpC;IAEF,eAAe,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,GAAG,IAAI,CAAQ;IAMnE,mCAAmC;IACnC,MAAM,KAAK,OAAO,IAAI,kBAAkB,GAAG,IAAI,CAE9C;IAED;;;OAGG;IACyB,QAAQ,SAAQ;IAE5C;;;OAGG;IACS,MAAM,SAAM;IAExB;;;OAGG;IACyC,WAAW,UAAS;IAEhE;;;OAGG;IACqC,UAAU,SAAW;IAE7D,2CAA2C;IAC3C,IAAI,aAAa,IAAI,OAAO,CAE3B;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAQlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAMrC,kBAAkB;cACC,MAAM;IAOzB,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;CAqDrE;AAED,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,YAAY,EAAE,WAAW,CAAC;IAC1B,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EACzD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IAER,mBAAmB,CAAC,CAAC,SAAS,MAAM,0BAA0B,EAC5D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IAER,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeElement.d.ts","sourceRoot":"","sources":["../../../src/theme/ThemeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAc5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,eAAgB,SAAQ,UAAU;;IAC7C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAUF;;;OAGG;IACS,KAAK,SAAa;IAE9B;;;OAGG;IACS,MAAM,EAAE,WAAW,CAAU;IAEzC;;;OAGG;IACS,QAAQ,EAAE,aAAa,CAAc;IAEjD;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACyB,OAAO,SAAK;IAExC;;OAEG;IACS,MAAM,EAAE,YAAY,CAAc;IAE9C,uCAAuC;IACvC,IAAI,MAAM,IAAI,OAAO,CAiBpB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IA4BlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAarC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAqGrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
1
+ {"version":3,"file":"ThemeElement.d.ts","sourceRoot":"","sources":["../../../src/theme/ThemeElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAc5E,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,eAAgB,SAAQ,UAAU;;IAC7C,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAIpC;IAUF;;;OAGG;IACS,KAAK,SAAa;IAE9B;;;OAGG;IACS,MAAM,EAAE,WAAW,CAAU;IAEzC;;;OAGG;IACS,QAAQ,EAAE,aAAa,CAAc;IAEjD;;;OAGG;IACqD,WAAW,UAAS;IAE5E;;;OAGG;IACyB,OAAO,SAAK;IAExC;;OAEG;IACS,MAAM,EAAE,YAAY,CAAc;IAE9C,uCAAuC;IACvC,IAAI,MAAM,IAAI,OAAO,CAiBpB;IAED,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IA4BlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAarC,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ1E,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA0GrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}
@@ -37,6 +37,9 @@ declare const M3eTocElement_base: import("../core/shared/mixins/Constructor").Co
37
37
  * @attr max-depth - The maximum depth of the table of contents.
38
38
  *
39
39
  * @cssprop --m3e-toc-width - Width of the table of contents.
40
+ * @cssprop --m3e-toc-container-color - Background color of the table of contents container.
41
+ * @cssprop --m3e-toc-container-padding-inline - Inline padding of the table of contents container.
42
+ * @cssprop --m3e-toc-container-padding-block - Block padding of the table of contents container.
40
43
  * @cssprop --m3e-toc-item-shape - Border radius of TOC items and active indicator.
41
44
  * @cssprop --m3e-toc-active-indicator-color - Border color of the active indicator.
42
45
  * @cssprop --m3e-toc-active-indicator-animation-duration - Animation duration for the active indicator.
@@ -59,6 +62,7 @@ export declare class M3eTocElement extends M3eTocElement_base {
59
62
  static styles: CSSResultGroup;
60
63
  /** @private */ private _toc;
61
64
  /** @private */ private readonly _activeIndicator;
65
+ /** @private */ private readonly _scrollContainer;
62
66
  /**
63
67
  * The maximum depth of the table of contents.
64
68
  * @default 2
@@ -1 +1 @@
1
- {"version":3,"file":"TocElement.d.ts","sourceRoot":"","sources":["../../../src/toc/TocElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;;AAwBhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,qBACa,aAAc,SAAQ,kBAAwD;;IACzF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAuFpC;IAEF,eAAe,CAAU,OAAO,CAAC,IAAI,CAAsB;IAC3D,eAAe,CAA6B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IA4E5F;;;OAGG;IACiD,QAAQ,SAAK;IAEjE,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAO3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IASvB,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IA2BpE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAqDpC,eAAe;IAEf,OAAO,CAAC,UAAU;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}
1
+ {"version":3,"file":"TocElement.d.ts","sourceRoot":"","sources":["../../../src/toc/TocElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;;AAwBhG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,aAAc,SAAQ,kBAAwD;;IACzF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAwGpC;IAEF,eAAe,CAAU,OAAO,CAAC,IAAI,CAAsB;IAC3D,eAAe,CAA6B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAC5F,eAAe,CAA6B,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAe;IAuF5F;;;OAGG;IACiD,QAAQ,SAAK;IAEjE,kBAAkB;IACT,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAO3C,kBAAkB;IACT,MAAM,IAAI,IAAI;IASvB,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IA2BpE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAyDpC,eAAe;IAEf,OAAO,CAAC,UAAU;CAGnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAC;KAC1B;CACF"}