@m3e/web 2.5.6 → 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 (62) hide show
  1. package/dist/all.js +3844 -911
  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 +307 -292
  18. package/dist/custom-elements.json +2749 -2542
  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 +105 -105
  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 +6 -1
  29. package/dist/slide-group.js.map +1 -1
  30. package/dist/slide-group.min.js +1 -1
  31. package/dist/slide-group.min.js.map +1 -1
  32. package/dist/snackbar.js +2 -2
  33. package/dist/snackbar.js.map +1 -1
  34. package/dist/snackbar.min.js +1 -1
  35. package/dist/snackbar.min.js.map +1 -1
  36. package/dist/src/card/styles/CardStyle.d.ts.map +1 -1
  37. package/dist/src/content-pane/ContentPaneElement.d.ts.map +1 -1
  38. package/dist/src/core/shared/controllers/ScrollController.d.ts.map +1 -1
  39. package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
  40. package/dist/src/drawer-container/DrawerToggleElement.d.ts.map +1 -1
  41. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts +1 -1
  42. package/dist/src/loading-indicator/LoadingIndicatorElement.d.ts.map +1 -1
  43. package/dist/src/slide-group/SlideGroupElement.d.ts.map +1 -1
  44. package/dist/src/snackbar/SnackbarElement.d.ts.map +1 -1
  45. package/dist/src/tabs/TabsElement.d.ts +2 -1
  46. package/dist/src/tabs/TabsElement.d.ts.map +1 -1
  47. package/dist/src/theme/ThemeElement.d.ts.map +1 -1
  48. package/dist/src/toc/TocElement.d.ts +4 -0
  49. package/dist/src/toc/TocElement.d.ts.map +1 -1
  50. package/dist/tabs.js +186 -15
  51. package/dist/tabs.js.map +1 -1
  52. package/dist/tabs.min.js +1 -1
  53. package/dist/tabs.min.js.map +1 -1
  54. package/dist/theme.js +3564 -846
  55. package/dist/theme.js.map +1 -1
  56. package/dist/theme.min.js +94 -31
  57. package/dist/theme.min.js.map +1 -1
  58. package/dist/toc.js +23 -6
  59. package/dist/toc.js.map +1 -1
  60. package/dist/toc.min.js +1 -1
  61. package/dist/toc.min.js.map +1 -1
  62. package/package.json +2 -2
package/dist/loading-indicator.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-indicator.js","sources":["../../src/loading-indicator/LoadingIndicatorToken.ts","../../src/loading-indicator/ShapePolygon.ts","../../src/loading-indicator/LoadingIndicatorElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nexport const LoadingIndicatorToken = {\r\n activeIndicatorSize: unsafeCSS(`var(--m3e-loading-indicator-size, 2.375rem)`),\r\n activeIndicatorColor: unsafeCSS(`var(--m3e-loading-indicator-active-indicator-color, ${DesignToken.color.primary})`),\r\n containedActiveIndicatorColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-active-indicator-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-container-color, ${DesignToken.color.secondaryContainer})`,\r\n ),\r\n containerShape: unsafeCSS(`var(--m3e-loading-indicator-container-shape, ${DesignToken.shape.corner.full})`),\r\n containerSize: unsafeCSS(`var(--m3e-loading-indicator-container-size, 3rem)`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { generateClipPaths } from \"@m3e/web/core\";\r\n\r\nconst SHAPE_PATHS: Record<string, string> = {\r\n \"4-sided-cookie\":\r\n \"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z\",\r\n \"7-sided-cookie\":\r\n \"M142.67 51.7842C146.243 48.6394 148.029 47.067 149.671 45.7954C173.425 27.4015 206.575 27.4015 230.329 45.7954C231.971 47.067 233.757 48.6394 237.33 51.7842C238.526 52.8372 239.124 53.3636 239.724 53.8672C248.136 60.9247 258.171 65.7683 268.92 67.9594C269.688 68.1158 270.471 68.2562 272.038 68.537C276.719 69.3756 279.059 69.7949 281.075 70.2889C310.234 77.4346 330.902 103.411 331.364 133.493C331.396 135.573 331.283 137.953 331.057 142.713C330.982 144.307 330.944 145.104 330.925 145.888C330.665 156.88 333.143 167.763 338.136 177.553C338.493 178.252 338.872 178.953 339.63 180.356C341.894 184.547 343.026 186.642 343.897 188.53C356.503 215.834 349.127 248.226 325.949 267.344C324.347 268.666 322.42 270.061 318.566 272.852C317.276 273.787 316.63 274.254 316.007 274.729C307.27 281.377 300.326 290.105 295.803 300.122C295.48 300.837 295.169 301.571 294.547 303.04C292.69 307.427 291.761 309.62 290.832 311.48C277.393 338.382 247.526 352.798 218.162 346.556C216.132 346.124 213.842 345.484 209.262 344.204C207.728 343.776 206.962 343.562 206.203 343.369C195.569 340.668 184.431 340.668 173.797 343.369C173.038 343.562 172.272 343.776 170.738 344.204C166.158 345.484 163.868 346.124 161.838 346.556C132.474 352.798 102.607 338.382 89.168 311.48C88.2388 309.62 87.3102 307.427 85.453 303.04C84.8311 301.571 84.5202 300.837 84.1975 300.122C79.6741 290.105 72.7297 281.377 63.993 274.729C63.3696 274.254 62.7244 273.787 61.434 272.852C57.5801 270.061 55.6532 268.666 54.0507 267.344C30.873 248.226 23.4965 215.834 36.1027 188.53C36.9742 186.642 38.1062 184.547 40.3703 180.356C41.1283 178.953 41.5074 178.252 41.8636 177.553C46.8568 167.763 49.3353 156.88 49.0745 145.888C49.0559 145.104 49.0182 144.307 48.9426 142.713C48.7168 137.953 48.6039 135.573 48.6359 133.493C49.0982 103.411 69.7665 77.4346 98.9252 70.2889C100.941 69.7949 103.281 69.3756 107.962 68.537C109.529 68.2562 110.312 68.1158 111.08 67.9594C121.829 65.7683 131.864 60.9247 140.276 53.8672C140.876 53.3636 141.474 52.8372 142.67 51.7842Z\",\r\n oval: \"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z\",\r\n pentagon:\r\n \"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z\",\r\n pill: \"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z\",\r\n \"soft-burst\":\r\n \"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z\",\r\n \"very-sunny\":\r\n \"M166.725 43.1869C177.261 25.6044 202.739 25.6044 213.275 43.1868L225.124 62.9597C231.268 73.2136 243.399 78.2385 254.995 75.3327L277.355 69.7294C297.237 64.7468 315.253 82.7627 310.271 102.645L304.667 125.005C301.762 136.601 306.786 148.732 317.04 154.876L336.813 166.725C354.396 177.261 354.396 202.739 336.813 213.275L317.04 225.124C306.786 231.268 301.762 243.399 304.667 254.995L310.271 277.355C315.253 297.237 297.237 315.253 277.355 310.271L254.995 304.667C243.399 301.762 231.268 306.786 225.124 317.04L213.275 336.813C202.739 354.396 177.261 354.396 166.725 336.813L154.876 317.04C148.732 306.786 136.601 301.762 125.005 304.667L102.646 310.271C82.7627 315.253 64.7468 297.237 69.7294 277.355L75.3327 254.995C78.2385 243.399 73.2136 231.268 62.9597 225.124L43.1869 213.275C25.6044 202.739 25.6044 177.261 43.1868 166.725L62.9597 154.876C73.2136 148.732 78.2385 136.601 75.3327 125.005L69.7294 102.646C64.7468 82.7627 82.7627 64.7468 102.645 69.7294L125.005 75.3327C136.601 78.2385 148.732 73.2136 154.876 62.9597L166.725 43.1869Z\",\r\n};\r\n\r\nlet shapes = new Array<string>();\r\nconst indexMap = new Map<string, number>();\r\nfor (const key in SHAPE_PATHS) {\r\n shapes.push(SHAPE_PATHS[key]);\r\n indexMap.set(key, shapes.length - 1);\r\n}\r\n\r\nconst _ShapePolygon: Record<string, CSSResult> = {};\r\n\r\nshapes = generateClipPaths(shapes, 300);\r\nfor (const item of indexMap) {\r\n _ShapePolygon[item[0]] = unsafeCSS(shapes[item[1]]);\r\n}\r\n\r\n/**\r\n * Normalized polygons for each shape.\r\n * @internal\r\n */\r\nexport const ShapePolygon: Record<string, CSSResult> = _ShapePolygon;\r\n","import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, Role } from \"@m3e/web/core\";\r\n\r\nimport { LoadingIndicatorVariant } from \"./LoadingIndicatorVariant\";\r\nimport { LoadingIndicatorToken } from \"./LoadingIndicatorToken\";\r\nimport { ShapePolygon } from \"./ShapePolygon\";\r\n\r\n/**\r\n * Shows indeterminate progress for a short wait time.\r\n *\r\n * @description\r\n * The `m3e-loading-indicator` component uses animation to grab attention, mitigate perceived latency, and indicate\r\n * that an activity is in progress.\r\n *\r\n * When placed over other content, use the `variant` attribute to change the appearance from `uncontained` (the default),\r\n * to `contained` so that it has strong contrast to help it stand out better.\r\n *\r\n * @example\r\n * The following example illustrates an uncontained loading indicator.\r\n * ```html\r\n * <m3e-loading-indicator></m3e-loading-indicator>\r\n * ```\r\n *\r\n * @tag m3e-loading-indicator\r\n *\r\n * @attr variant - The appearance variant of the indicator.\r\n *\r\n * @cssprop --m3e-loading-indicator-active-indicator-color - Uncontained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-active-indicator-color - Contained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-container-color - Contained container (background) color.\r\n * @cssprop --m3e-loading-indicator-active-indicator-size - Size of the active indicator.\r\n * @cssprop --m3e-loading-indicator-container-shape - Container shape.\r\n * @cssprop --m3e-loading-indicator-container-size - Container size.\r\n */\r\n@customElement(\"m3e-loading-indicator\")\r\nexport class M3eLoadingIndicatorElement extends ReconnectedCallback(Role(LitElement, \"progressbar\")) {\r\n /** The styles of the element. */\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n aspect-ratio: 1 / 1;\r\n contain: strict;\r\n vertical-align: middle;\r\n content-visibility: auto;\r\n }\r\n :host([variant=\"uncontained\"]) {\r\n width: ${LoadingIndicatorToken.activeIndicatorSize};\r\n }\r\n :host([variant=\"contained\"]) {\r\n width: ${LoadingIndicatorToken.containerSize};\r\n }\r\n :host([variant=\"uncontained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.activeIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .container {\r\n background-color: ${LoadingIndicatorToken.containedContainerColor};\r\n }\r\n .container {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: ${LoadingIndicatorToken.containerShape};\r\n }\r\n .active-indicator {\r\n margin: auto;\r\n aspect-ratio: 1 / 1;\r\n width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842);\r\n transform-origin: center;\r\n transition: clip-path ${DesignToken.motion.spring.slowEffects};\r\n will-change: transform, clip-path;\r\n\r\n --_polygon-soft-burst: polygon(${ShapePolygon[\"soft-burst\"]});\r\n --_polygon-7-sided-cookie: polygon(${ShapePolygon[\"7-sided-cookie\"]});\r\n --_polygon-pentagon: polygon(${ShapePolygon[\"pentagon\"]});\r\n --_polygon-pill: polygon(${ShapePolygon[\"pill\"]});\r\n --_polygon-very-sunny: polygon(${ShapePolygon[\"very-sunny\"]});\r\n --_polygon-4-sided-cookie: polygon(${ShapePolygon[\"4-sided-cookie\"]});\r\n --_polygon-oval: polygon(${ShapePolygon[\"oval\"]});\r\n }\r\n .active-indicator.animate {\r\n animation: rotate 4998ms infinite;\r\n }\r\n @keyframes rotate {\r\n 0% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(0deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 14% {\r\n clip-path: var(--_polygon-7-sided-cookie);\r\n transform: rotate(154deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 29% {\r\n clip-path: var(--_polygon-pentagon);\r\n transform: rotate(309deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 43% {\r\n clip-path: var(--_polygon-pill);\r\n transform: rotate(463deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 57% {\r\n clip-path: var(--_polygon-very-sunny);\r\n transform: rotate(617deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 71% {\r\n clip-path: var(--_polygon-4-sided-cookie);\r\n transform: rotate(771deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 83% {\r\n clip-path: var(--_polygon-oval);\r\n transform: rotate(926deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 100% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(1080deg);\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .active-indicator {\r\n background-color: CanvasText !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */\r\n @query(\".active-indicator\") private readonly _activeIndicator?: HTMLElement;\r\n\r\n /**\r\n * The appearance variant of the indicator.\r\n * @default \"uncontained\"\r\n */\r\n @property({ reflect: true }) variant: LoadingIndicatorVariant = \"uncontained\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaValueMin = this.ariaValueMin || \"0\";\r\n this.ariaValueMax = this.ariaValueMax || \"100\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this._activeIndicator?.classList.toggle(\"animate\", false);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this._activeIndicator?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this._activeIndicator?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override render() {\r\n return html`<div class=\"container\" aria-hidden=\"true\">\r\n <div class=\"active-indicator\"></div>\r\n </div>`;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-loading-indicator\": M3eLoadingIndicatorElement;\r\n }\r\n}\r\n"],"names":["LoadingIndicatorToken","activeIndicatorSize","unsafeCSS","activeIndicatorColor","DesignToken","color","primary","containedActiveIndicatorColor","onPrimaryContainer","containedContainerColor","secondaryContainer","containerShape","shape","corner","full","containerSize","SHAPE_PATHS","oval","pentagon","pill","shapes","Array","indexMap","Map","key","push","set","length","_ShapePolygon","generateClipPaths","item","ShapePolygon","M3eLoadingIndicatorElement","ReconnectedCallback","Role","LitElement","constructor","variant","connectedCallback","ariaValueMin","ariaValueMax","disconnectedCallback","_activeIndicator","classList","toggle","reconnectedCallback","firstUpdated","_changedProperties","render","html","styles","css","motion","spring","slowEffects","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"loading-indicator.js","sources":["../../src/loading-indicator/LoadingIndicatorToken.ts","../../src/loading-indicator/ShapePolygon.ts","../../src/loading-indicator/LoadingIndicatorElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nexport const LoadingIndicatorToken = {\r\n activeIndicatorSize: unsafeCSS(`var(--m3e-loading-indicator-size, 2.375rem)`),\r\n activeIndicatorColor: unsafeCSS(`var(--m3e-loading-indicator-active-indicator-color, ${DesignToken.color.primary})`),\r\n containedActiveIndicatorColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-active-indicator-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-container-color, ${DesignToken.color.secondaryContainer})`,\r\n ),\r\n containerShape: unsafeCSS(`var(--m3e-loading-indicator-container-shape, ${DesignToken.shape.corner.full})`),\r\n containerSize: unsafeCSS(`var(--m3e-loading-indicator-container-size, 3rem)`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { generateClipPaths } from \"@m3e/web/core\";\r\n\r\nconst SHAPE_PATHS: Record<string, string> = {\r\n \"4-sided-cookie\":\r\n \"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z\",\r\n \"9-sided-cookie\":\r\n \"M154.828 43.2756C156.574 41.8498 157.448 41.1369 158.245 40.535C177.03 26.3548 202.97 26.3548 221.755 40.535C222.552 41.1369 223.425 41.8498 225.172 43.2756C225.952 43.9121 226.342 44.2303 226.727 44.5333C235.567 51.4788 246.406 55.4147 257.652 55.7636C258.143 55.7788 258.647 55.785 259.654 55.7975C261.911 55.8255 263.039 55.8395 264.037 55.8898C287.563 57.0742 307.435 73.7107 312.689 96.6205C312.912 97.5928 313.121 98.6991 313.541 100.911C313.728 101.899 313.822 102.393 313.922 102.872C316.219 113.862 321.986 123.828 330.377 131.308C330.743 131.635 331.125 131.962 331.888 132.618C333.599 134.087 334.454 134.821 335.187 135.5C352.445 151.495 356.95 176.983 346.215 197.903C345.76 198.791 345.208 199.773 344.104 201.737C343.611 202.613 343.364 203.052 343.132 203.483C337.812 213.375 335.809 224.708 337.418 235.82C337.488 236.304 337.569 236.8 337.732 237.792C338.096 240.014 338.278 241.125 338.402 242.115C341.318 265.436 328.347 287.851 306.647 296.991C305.726 297.379 304.67 297.778 302.559 298.574C301.617 298.929 301.146 299.107 300.69 299.289C290.241 303.455 281.406 310.852 275.48 320.395C275.221 320.811 274.964 321.243 274.449 322.107C273.297 324.043 272.721 325.011 272.178 325.849C259.387 345.584 235.011 354.436 212.498 347.521C211.543 347.228 210.477 346.856 208.347 346.112C207.396 345.78 206.921 345.614 206.455 345.461C195.767 341.951 184.233 341.951 173.545 345.461C173.079 345.614 172.603 345.78 171.652 346.112C169.522 346.856 168.457 347.228 167.502 347.521C144.989 354.436 120.613 345.584 107.822 325.849C107.279 325.011 106.703 324.043 105.55 322.107C105.036 321.243 104.779 320.811 104.52 320.395C98.5939 310.852 89.7583 303.455 79.3096 299.289C78.8539 299.107 78.3827 298.929 77.4404 298.574C75.3294 297.778 74.274 297.379 73.3529 296.991C51.6523 287.851 38.6819 265.436 41.598 242.115C41.7218 241.125 41.9039 240.014 42.2682 237.792C42.4308 236.8 42.5121 236.304 42.5822 235.82C44.1908 224.708 42.188 213.375 36.8675 203.483C36.6354 203.052 36.389 202.613 35.8962 201.737C34.7921 199.773 34.2401 198.791 33.7845 197.903C23.0499 176.983 27.5544 151.495 44.8128 135.5C45.5454 134.821 46.4007 134.087 48.1113 132.618C48.875 131.962 49.2568 131.635 49.6228 131.308C58.0134 123.828 63.7804 113.862 66.0777 102.872C66.1779 102.393 66.2715 101.899 66.4588 100.911C66.8783 98.699 67.088 97.5928 67.311 96.6204C72.5652 73.7107 92.4369 57.0742 115.962 55.8898C116.961 55.8395 118.089 55.8255 120.346 55.7975C121.353 55.785 121.857 55.7788 122.347 55.7636C133.594 55.4147 144.432 51.4788 153.272 44.5333C153.658 44.2303 154.048 43.9121 154.828 43.2756Z\",\r\n oval: \"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z\",\r\n pentagon:\r\n \"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z\",\r\n pill: \"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z\",\r\n \"soft-burst\":\r\n \"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z\",\r\n sunny:\r\n \"M276.453 68.8118C286.405 69.4881 291.381 69.8263 295.404 71.5853C301.223 74.1305 305.87 78.7766 308.415 84.5965C310.174 88.6186 310.512 93.5948 311.188 103.547L312.732 126.259C313.005 130.284 313.142 132.296 313.579 134.219C314.212 136.997 315.31 139.648 316.827 142.059C317.877 143.728 319.203 145.248 321.856 148.288L336.824 165.438C343.384 172.954 346.663 176.712 348.263 180.8C350.579 186.715 350.579 193.285 348.263 199.2C346.663 203.288 343.384 207.046 336.824 214.562L321.856 231.712C319.203 234.752 317.877 236.272 316.827 237.941C315.31 240.352 314.212 243.003 313.579 245.781C313.142 247.704 313.005 249.716 312.732 253.741L311.188 276.453C310.512 286.405 310.174 291.381 308.415 295.404C305.87 301.223 301.223 305.87 295.404 308.415C291.381 310.174 286.405 310.512 276.453 311.188L253.741 312.732C249.716 313.005 247.704 313.142 245.781 313.579C243.003 314.212 240.352 315.31 237.941 316.827C236.272 317.877 234.752 319.203 231.712 321.856L214.562 336.824C207.046 343.384 203.288 346.663 199.2 348.263C193.285 350.579 186.715 350.579 180.8 348.263C176.712 346.663 172.954 343.384 165.438 336.824L148.288 321.856C145.248 319.203 143.728 317.877 142.059 316.827C139.648 315.31 136.997 314.212 134.219 313.579C132.296 313.142 130.284 313.005 126.259 312.732L103.547 311.188C93.5947 310.512 88.6186 310.174 84.5965 308.415C78.7766 305.87 74.1305 301.223 71.5853 295.404C69.8263 291.381 69.4881 286.405 68.8118 276.453L67.2684 253.741C66.9949 249.716 66.8581 247.704 66.4206 245.781C65.7883 243.003 64.6903 240.352 63.173 237.941C62.123 236.272 60.7965 234.752 58.1437 231.712L43.1756 214.562C36.6164 207.046 33.3369 203.288 31.7366 199.2C29.4211 193.285 29.4211 186.715 31.7366 180.8C33.3369 176.712 36.6164 172.954 43.1756 165.438L58.1437 148.288C60.7965 145.248 62.123 143.728 63.173 142.059C64.6903 139.648 65.7883 136.997 66.4206 134.219C66.8581 132.296 66.9949 130.284 67.2684 126.259L68.8118 103.547C69.4881 93.5948 69.8263 88.6186 71.5853 84.5965C74.1305 78.7766 78.7766 74.1305 84.5965 71.5853C88.6186 69.8263 93.5948 69.4881 103.547 68.8118L126.259 67.2684C130.284 66.9949 132.296 66.8581 134.219 66.4206C136.997 65.7883 139.648 64.6903 142.059 63.173C143.728 62.123 145.248 60.7966 148.288 58.1437L165.438 43.1756C172.954 36.6164 176.712 33.3369 180.8 31.7366C186.715 29.4211 193.285 29.4211 199.2 31.7366C203.288 33.3369 207.046 36.6164 214.562 43.1756L231.712 58.1437C234.752 60.7966 236.272 62.123 237.941 63.173C240.352 64.6903 243.003 65.7883 245.781 66.4206C247.704 66.8581 249.716 66.9949 253.741 67.2684L276.453 68.8118Z\",\r\n};\r\n\r\nlet shapes = new Array<string>();\r\nconst indexMap = new Map<string, number>();\r\nfor (const key in SHAPE_PATHS) {\r\n shapes.push(SHAPE_PATHS[key]);\r\n indexMap.set(key, shapes.length - 1);\r\n}\r\n\r\nconst _ShapePolygon: Record<string, CSSResult> = {};\r\n\r\nshapes = generateClipPaths(shapes, 300);\r\nfor (const item of indexMap) {\r\n _ShapePolygon[item[0]] = unsafeCSS(shapes[item[1]]);\r\n}\r\n\r\n/**\r\n * Normalized polygons for each shape.\r\n * @internal\r\n */\r\nexport const ShapePolygon: Record<string, CSSResult> = _ShapePolygon;\r\n","import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, Role } from \"@m3e/web/core\";\r\n\r\nimport { LoadingIndicatorVariant } from \"./LoadingIndicatorVariant\";\r\nimport { LoadingIndicatorToken } from \"./LoadingIndicatorToken\";\r\nimport { ShapePolygon } from \"./ShapePolygon\";\r\n\r\n/**\r\n * Shows indeterminate progress for a short wait time.\r\n *\r\n * @description\r\n * The `m3e-loading-indicator` component uses animation to grab attention, mitigate perceived latency, and indicate\r\n * that an activity is in progress.\r\n *\r\n * When placed over other content, use the `variant` attribute to change the appearance from `uncontained` (the default),\r\n * to `contained` so that it has strong contrast to help it stand out better.\r\n *\r\n * @example\r\n * The following example illustrates an uncontained loading indicator.\r\n * ```html\r\n * <m3e-loading-indicator></m3e-loading-indicator>\r\n * ```\r\n *\r\n * @tag m3e-loading-indicator\r\n *\r\n * @attr variant - The appearance variant of the indicator.\r\n *\r\n * @cssprop --m3e-loading-indicator-active-indicator-color - Uncontained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-active-indicator-color - Contained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-container-color - Contained container (background) color.\r\n * @cssprop --m3e-loading-indicator-active-indicator-size - Size of the active indicator.\r\n * @cssprop --m3e-loading-indicator-container-shape - Container shape.\r\n * @cssprop --m3e-loading-indicator-container-size - Container size.\r\n */\r\n@customElement(\"m3e-loading-indicator\")\r\nexport class M3eLoadingIndicatorElement extends ReconnectedCallback(Role(LitElement, \"progressbar\")) {\r\n /** The styles of the element. */\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n aspect-ratio: 1 / 1;\r\n contain: strict;\r\n vertical-align: middle;\r\n content-visibility: auto;\r\n }\r\n :host([variant=\"uncontained\"]) {\r\n width: ${LoadingIndicatorToken.activeIndicatorSize};\r\n }\r\n :host([variant=\"contained\"]) {\r\n width: ${LoadingIndicatorToken.containerSize};\r\n }\r\n :host([variant=\"uncontained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.activeIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .container {\r\n background-color: ${LoadingIndicatorToken.containedContainerColor};\r\n }\r\n .container {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: ${LoadingIndicatorToken.containerShape};\r\n }\r\n .active-indicator {\r\n margin: auto;\r\n aspect-ratio: 1 / 1;\r\n width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842);\r\n transform-origin: center;\r\n transition: clip-path ${DesignToken.motion.spring.slowEffects};\r\n will-change: transform, clip-path;\r\n\r\n --_polygon-soft-burst: polygon(${ShapePolygon[\"soft-burst\"]});\r\n --_polygon-9-sided-cookie: polygon(${ShapePolygon[\"9-sided-cookie\"]});\r\n --_polygon-pentagon: polygon(${ShapePolygon[\"pentagon\"]});\r\n --_polygon-pill: polygon(${ShapePolygon[\"pill\"]});\r\n --_polygon-sunny: polygon(${ShapePolygon[\"sunny\"]});\r\n --_polygon-4-sided-cookie: polygon(${ShapePolygon[\"4-sided-cookie\"]});\r\n --_polygon-oval: polygon(${ShapePolygon[\"oval\"]});\r\n }\r\n .container.animate .active-indicator-wrapper {\r\n animation: rotate-outer 4666ms linear infinite;\r\n transform-origin: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n will-change: transform;\r\n }\r\n @keyframes rotate-outer {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n .container.animate .active-indicator {\r\n animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite;\r\n }\r\n @keyframes rotate-inner {\r\n 0% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(0deg);\r\n }\r\n 14% {\r\n clip-path: var(--_polygon-9-sided-cookie);\r\n transform: rotate(154deg) scale(1);\r\n }\r\n 29% {\r\n clip-path: var(--_polygon-pentagon);\r\n transform: rotate(309deg) scale(1);\r\n }\r\n 43% {\r\n clip-path: var(--_polygon-pill);\r\n transform: rotate(463deg) scale(1);\r\n }\r\n 57% {\r\n clip-path: var(--_polygon-sunny);\r\n transform: rotate(617deg) scale(1);\r\n }\r\n 71% {\r\n clip-path: var(--_polygon-4-sided-cookie);\r\n transform: rotate(771deg) scale(1);\r\n }\r\n 83% {\r\n clip-path: var(--_polygon-oval);\r\n transform: rotate(926deg) scale(1);\r\n }\r\n 100% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(1080deg) scale(1);\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .active-indicator {\r\n background-color: CanvasText !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */\r\n @query(\".container\") private readonly _container?: HTMLElement;\r\n\r\n /**\r\n * The appearance variant of the indicator.\r\n * @default \"uncontained\"\r\n */\r\n @property({ reflect: true }) variant: LoadingIndicatorVariant = \"uncontained\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaValueMin = this.ariaValueMin || \"0\";\r\n this.ariaValueMax = this.ariaValueMax || \"100\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this._container?.classList.toggle(\"animate\", false);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this._container?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this._container?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override render() {\r\n return html`<div class=\"container\" aria-hidden=\"true\">\r\n <div class=\"active-indicator-wrapper\">\r\n <div class=\"active-indicator\"></div>\r\n </div>\r\n </div>`;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-loading-indicator\": M3eLoadingIndicatorElement;\r\n }\r\n}\r\n"],"names":["LoadingIndicatorToken","activeIndicatorSize","unsafeCSS","activeIndicatorColor","DesignToken","color","primary","containedActiveIndicatorColor","onPrimaryContainer","containedContainerColor","secondaryContainer","containerShape","shape","corner","full","containerSize","SHAPE_PATHS","oval","pentagon","pill","sunny","shapes","Array","indexMap","Map","key","push","set","length","_ShapePolygon","generateClipPaths","item","ShapePolygon","M3eLoadingIndicatorElement","ReconnectedCallback","Role","LitElement","constructor","variant","connectedCallback","ariaValueMin","ariaValueMax","disconnectedCallback","_container","classList","toggle","reconnectedCallback","firstUpdated","_changedProperties","render","html","styles","css","motion","spring","slowEffects","__decorate","query","prototype","property","reflect","customElement"],"mappings":"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"}
package/dist/loading-indicator.min.js CHANGED
@@ -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{__decorate as i}from"tslib";import{unsafeCSS as o,LitElement as t,html as a,css as n}from"lit";import{query as e,property as r}from"lit/decorators.js";import{DesignToken as c,generateClipPaths as l,ReconnectedCallback as s,Role as C,customElement as d}from"@m3e/web/core";const p=o("var(--m3e-loading-indicator-size, 2.375rem)"),g=o(`var(--m3e-loading-indicator-active-indicator-color, ${c.color.primary})`),m=o(`var(--m3e-loading-indicator-contained-active-indicator-color, ${c.color.onPrimaryContainer})`),L=o(`var(--m3e-loading-indicator-contained-container-color, ${c.color.secondaryContainer})`),v=o(`var(--m3e-loading-indicator-container-shape, ${c.shape.corner.full})`),u=o("var(--m3e-loading-indicator-container-size, 3rem)"),y={"4-sided-cookie":"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z","7-sided-cookie":"M142.67 51.7842C146.243 48.6394 148.029 47.067 149.671 45.7954C173.425 27.4015 206.575 27.4015 230.329 45.7954C231.971 47.067 233.757 48.6394 237.33 51.7842C238.526 52.8372 239.124 53.3636 239.724 53.8672C248.136 60.9247 258.171 65.7683 268.92 67.9594C269.688 68.1158 270.471 68.2562 272.038 68.537C276.719 69.3756 279.059 69.7949 281.075 70.2889C310.234 77.4346 330.902 103.411 331.364 133.493C331.396 135.573 331.283 137.953 331.057 142.713C330.982 144.307 330.944 145.104 330.925 145.888C330.665 156.88 333.143 167.763 338.136 177.553C338.493 178.252 338.872 178.953 339.63 180.356C341.894 184.547 343.026 186.642 343.897 188.53C356.503 215.834 349.127 248.226 325.949 267.344C324.347 268.666 322.42 270.061 318.566 272.852C317.276 273.787 316.63 274.254 316.007 274.729C307.27 281.377 300.326 290.105 295.803 300.122C295.48 300.837 295.169 301.571 294.547 303.04C292.69 307.427 291.761 309.62 290.832 311.48C277.393 338.382 247.526 352.798 218.162 346.556C216.132 346.124 213.842 345.484 209.262 344.204C207.728 343.776 206.962 343.562 206.203 343.369C195.569 340.668 184.431 340.668 173.797 343.369C173.038 343.562 172.272 343.776 170.738 344.204C166.158 345.484 163.868 346.124 161.838 346.556C132.474 352.798 102.607 338.382 89.168 311.48C88.2388 309.62 87.3102 307.427 85.453 303.04C84.8311 301.571 84.5202 300.837 84.1975 300.122C79.6741 290.105 72.7297 281.377 63.993 274.729C63.3696 274.254 62.7244 273.787 61.434 272.852C57.5801 270.061 55.6532 268.666 54.0507 267.344C30.873 248.226 23.4965 215.834 36.1027 188.53C36.9742 186.642 38.1062 184.547 40.3703 180.356C41.1283 178.953 41.5074 178.252 41.8636 177.553C46.8568 167.763 49.3353 156.88 49.0745 145.888C49.0559 145.104 49.0182 144.307 48.9426 142.713C48.7168 137.953 48.6039 135.573 48.6359 133.493C49.0982 103.411 69.7665 77.4346 98.9252 70.2889C100.941 69.7949 103.281 69.3756 107.962 68.537C109.529 68.2562 110.312 68.1158 111.08 67.9594C121.829 65.7683 131.864 60.9247 140.276 53.8672C140.876 53.3636 141.474 52.8372 142.67 51.7842Z",oval:"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z",pentagon:"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z",pill:"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z","soft-burst":"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z","very-sunny":"M166.725 43.1869C177.261 25.6044 202.739 25.6044 213.275 43.1868L225.124 62.9597C231.268 73.2136 243.399 78.2385 254.995 75.3327L277.355 69.7294C297.237 64.7468 315.253 82.7627 310.271 102.645L304.667 125.005C301.762 136.601 306.786 148.732 317.04 154.876L336.813 166.725C354.396 177.261 354.396 202.739 336.813 213.275L317.04 225.124C306.786 231.268 301.762 243.399 304.667 254.995L310.271 277.355C315.253 297.237 297.237 315.253 277.355 310.271L254.995 304.667C243.399 301.762 231.268 306.786 225.124 317.04L213.275 336.813C202.739 354.396 177.261 354.396 166.725 336.813L154.876 317.04C148.732 306.786 136.601 301.762 125.005 304.667L102.646 310.271C82.7627 315.253 64.7468 297.237 69.7294 277.355L75.3327 254.995C78.2385 243.399 73.2136 231.268 62.9597 225.124L43.1869 213.275C25.6044 202.739 25.6044 177.261 43.1868 166.725L62.9597 154.876C73.2136 148.732 78.2385 136.601 75.3327 125.005L69.7294 102.646C64.7468 82.7627 82.7627 64.7468 102.645 69.7294L125.005 75.3327C136.601 78.2385 148.732 73.2136 154.876 62.9597L166.725 43.1869Z"};let f=new Array;const h=new Map;for(const i in y)f.push(y[i]),h.set(i,f.length-1);const b={};f=l(f,300);for(const i of h)b[i[0]]=o(f[i[1]]);const k=b;let $=class extends(s(C(t,"progressbar"))){constructor(){super(...arguments),this.variant="uncontained"}connectedCallback(){super.connectedCallback(),this.ariaValueMin=this.ariaValueMin||"0",this.ariaValueMax=this.ariaValueMax||"100"}disconnectedCallback(){super.disconnectedCallback(),this._activeIndicator?.classList.toggle("animate",!1)}reconnectedCallback(){super.reconnectedCallback(),this._activeIndicator?.classList.toggle("animate",!0)}firstUpdated(i){super.firstUpdated(i),this._activeIndicator?.classList.toggle("animate",!0)}render(){return a`<div class="container" aria-hidden="true"><div class="active-indicator"></div></div>`}};$.styles=n`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${p}; } :host([variant="contained"]) { width: ${u}; } :host([variant="uncontained"]) .active-indicator { background-color: ${g}; } :host([variant="contained"]) .active-indicator { background-color: ${m}; } :host([variant="contained"]) .container { background-color: ${L}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${v}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${p} * 0.842); transform-origin: center; transition: clip-path ${c.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${k["soft-burst"]}); --_polygon-7-sided-cookie: polygon(${k["7-sided-cookie"]}); --_polygon-pentagon: polygon(${k.pentagon}); --_polygon-pill: polygon(${k.pill}); --_polygon-very-sunny: polygon(${k["very-sunny"]}); --_polygon-4-sided-cookie: polygon(${k["4-sided-cookie"]}); --_polygon-oval: polygon(${k.oval}); } .active-indicator.animate { animation: rotate 4998ms infinite; } @keyframes rotate { 0% { clip-path: var(--_polygon-soft-burst); transform: rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 14% { clip-path: var(--_polygon-7-sided-cookie); transform: rotate(154deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 29% { clip-path: var(--_polygon-pentagon); transform: rotate(309deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 43% { clip-path: var(--_polygon-pill); transform: rotate(463deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 57% { clip-path: var(--_polygon-very-sunny); transform: rotate(617deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 71% { clip-path: var(--_polygon-4-sided-cookie); transform: rotate(771deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 83% { clip-path: var(--_polygon-oval); transform: rotate(926deg); animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8); } 100% { clip-path: var(--_polygon-soft-burst); transform: rotate(1080deg); } } @media (forced-colors: active) { .active-indicator { background-color: CanvasText !important; } }`,i([e(".active-indicator")],$.prototype,"_activeIndicator",void 0),i([r({reflect:!0})],$.prototype,"variant",void 0),$=i([d("m3e-loading-indicator")],$);export{$ as M3eLoadingIndicatorElement};
6
+ import{__decorate as o}from"tslib";import{unsafeCSS as t,LitElement as a,html as i,css as n}from"lit";import{query as e,property as r}from"lit/decorators.js";import{DesignToken as C,generateClipPaths as c,ReconnectedCallback as s,Role as l,customElement as d}from"@m3e/web/core";const p=t("var(--m3e-loading-indicator-size, 2.375rem)"),g=t(`var(--m3e-loading-indicator-active-indicator-color, ${C.color.primary})`),L=t(`var(--m3e-loading-indicator-contained-active-indicator-color, ${C.color.onPrimaryContainer})`),m=t(`var(--m3e-loading-indicator-contained-container-color, ${C.color.secondaryContainer})`),v=t(`var(--m3e-loading-indicator-container-shape, ${C.shape.corner.full})`),f=t("var(--m3e-loading-indicator-container-size, 3rem)"),y={"4-sided-cookie":"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z","9-sided-cookie":"M154.828 43.2756C156.574 41.8498 157.448 41.1369 158.245 40.535C177.03 26.3548 202.97 26.3548 221.755 40.535C222.552 41.1369 223.425 41.8498 225.172 43.2756C225.952 43.9121 226.342 44.2303 226.727 44.5333C235.567 51.4788 246.406 55.4147 257.652 55.7636C258.143 55.7788 258.647 55.785 259.654 55.7975C261.911 55.8255 263.039 55.8395 264.037 55.8898C287.563 57.0742 307.435 73.7107 312.689 96.6205C312.912 97.5928 313.121 98.6991 313.541 100.911C313.728 101.899 313.822 102.393 313.922 102.872C316.219 113.862 321.986 123.828 330.377 131.308C330.743 131.635 331.125 131.962 331.888 132.618C333.599 134.087 334.454 134.821 335.187 135.5C352.445 151.495 356.95 176.983 346.215 197.903C345.76 198.791 345.208 199.773 344.104 201.737C343.611 202.613 343.364 203.052 343.132 203.483C337.812 213.375 335.809 224.708 337.418 235.82C337.488 236.304 337.569 236.8 337.732 237.792C338.096 240.014 338.278 241.125 338.402 242.115C341.318 265.436 328.347 287.851 306.647 296.991C305.726 297.379 304.67 297.778 302.559 298.574C301.617 298.929 301.146 299.107 300.69 299.289C290.241 303.455 281.406 310.852 275.48 320.395C275.221 320.811 274.964 321.243 274.449 322.107C273.297 324.043 272.721 325.011 272.178 325.849C259.387 345.584 235.011 354.436 212.498 347.521C211.543 347.228 210.477 346.856 208.347 346.112C207.396 345.78 206.921 345.614 206.455 345.461C195.767 341.951 184.233 341.951 173.545 345.461C173.079 345.614 172.603 345.78 171.652 346.112C169.522 346.856 168.457 347.228 167.502 347.521C144.989 354.436 120.613 345.584 107.822 325.849C107.279 325.011 106.703 324.043 105.55 322.107C105.036 321.243 104.779 320.811 104.52 320.395C98.5939 310.852 89.7583 303.455 79.3096 299.289C78.8539 299.107 78.3827 298.929 77.4404 298.574C75.3294 297.778 74.274 297.379 73.3529 296.991C51.6523 287.851 38.6819 265.436 41.598 242.115C41.7218 241.125 41.9039 240.014 42.2682 237.792C42.4308 236.8 42.5121 236.304 42.5822 235.82C44.1908 224.708 42.188 213.375 36.8675 203.483C36.6354 203.052 36.389 202.613 35.8962 201.737C34.7921 199.773 34.2401 198.791 33.7845 197.903C23.0499 176.983 27.5544 151.495 44.8128 135.5C45.5454 134.821 46.4007 134.087 48.1113 132.618C48.875 131.962 49.2568 131.635 49.6228 131.308C58.0134 123.828 63.7804 113.862 66.0777 102.872C66.1779 102.393 66.2715 101.899 66.4588 100.911C66.8783 98.699 67.088 97.5928 67.311 96.6204C72.5652 73.7107 92.4369 57.0742 115.962 55.8898C116.961 55.8395 118.089 55.8255 120.346 55.7975C121.353 55.785 121.857 55.7788 122.347 55.7636C133.594 55.4147 144.432 51.4788 153.272 44.5333C153.658 44.2303 154.048 43.9121 154.828 43.2756Z",oval:"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z",pentagon:"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z",pill:"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z","soft-burst":"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z",sunny:"M276.453 68.8118C286.405 69.4881 291.381 69.8263 295.404 71.5853C301.223 74.1305 305.87 78.7766 308.415 84.5965C310.174 88.6186 310.512 93.5948 311.188 103.547L312.732 126.259C313.005 130.284 313.142 132.296 313.579 134.219C314.212 136.997 315.31 139.648 316.827 142.059C317.877 143.728 319.203 145.248 321.856 148.288L336.824 165.438C343.384 172.954 346.663 176.712 348.263 180.8C350.579 186.715 350.579 193.285 348.263 199.2C346.663 203.288 343.384 207.046 336.824 214.562L321.856 231.712C319.203 234.752 317.877 236.272 316.827 237.941C315.31 240.352 314.212 243.003 313.579 245.781C313.142 247.704 313.005 249.716 312.732 253.741L311.188 276.453C310.512 286.405 310.174 291.381 308.415 295.404C305.87 301.223 301.223 305.87 295.404 308.415C291.381 310.174 286.405 310.512 276.453 311.188L253.741 312.732C249.716 313.005 247.704 313.142 245.781 313.579C243.003 314.212 240.352 315.31 237.941 316.827C236.272 317.877 234.752 319.203 231.712 321.856L214.562 336.824C207.046 343.384 203.288 346.663 199.2 348.263C193.285 350.579 186.715 350.579 180.8 348.263C176.712 346.663 172.954 343.384 165.438 336.824L148.288 321.856C145.248 319.203 143.728 317.877 142.059 316.827C139.648 315.31 136.997 314.212 134.219 313.579C132.296 313.142 130.284 313.005 126.259 312.732L103.547 311.188C93.5947 310.512 88.6186 310.174 84.5965 308.415C78.7766 305.87 74.1305 301.223 71.5853 295.404C69.8263 291.381 69.4881 286.405 68.8118 276.453L67.2684 253.741C66.9949 249.716 66.8581 247.704 66.4206 245.781C65.7883 243.003 64.6903 240.352 63.173 237.941C62.123 236.272 60.7965 234.752 58.1437 231.712L43.1756 214.562C36.6164 207.046 33.3369 203.288 31.7366 199.2C29.4211 193.285 29.4211 186.715 31.7366 180.8C33.3369 176.712 36.6164 172.954 43.1756 165.438L58.1437 148.288C60.7965 145.248 62.123 143.728 63.173 142.059C64.6903 139.648 65.7883 136.997 66.4206 134.219C66.8581 132.296 66.9949 130.284 67.2684 126.259L68.8118 103.547C69.4881 93.5948 69.8263 88.6186 71.5853 84.5965C74.1305 78.7766 78.7766 74.1305 84.5965 71.5853C88.6186 69.8263 93.5948 69.4881 103.547 68.8118L126.259 67.2684C130.284 66.9949 132.296 66.8581 134.219 66.4206C136.997 65.7883 139.648 64.6903 142.059 63.173C143.728 62.123 145.248 60.7966 148.288 58.1437L165.438 43.1756C172.954 36.6164 176.712 33.3369 180.8 31.7366C186.715 29.4211 193.285 29.4211 199.2 31.7366C203.288 33.3369 207.046 36.6164 214.562 43.1756L231.712 58.1437C234.752 60.7966 236.272 62.123 237.941 63.173C240.352 64.6903 243.003 65.7883 245.781 66.4206C247.704 66.8581 249.716 66.9949 253.741 67.2684L276.453 68.8118Z"};let u=new Array;const h=new Map;for(const o in y)u.push(y[o]),h.set(o,u.length-1);const b={};u=c(u,300);for(const o of h)b[o[0]]=t(u[o[1]]);const k=b;let $=class extends(s(l(a,"progressbar"))){constructor(){super(...arguments),this.variant="uncontained"}connectedCallback(){super.connectedCallback(),this.ariaValueMin=this.ariaValueMin||"0",this.ariaValueMax=this.ariaValueMax||"100"}disconnectedCallback(){super.disconnectedCallback(),this._container?.classList.toggle("animate",!1)}reconnectedCallback(){super.reconnectedCallback(),this._container?.classList.toggle("animate",!0)}firstUpdated(o){super.firstUpdated(o),this._container?.classList.toggle("animate",!0)}render(){return i`<div class="container" aria-hidden="true"><div class="active-indicator-wrapper"><div class="active-indicator"></div></div></div>`}};$.styles=n`:host { display: inline-block; aspect-ratio: 1 / 1; contain: strict; vertical-align: middle; content-visibility: auto; } :host([variant="uncontained"]) { width: ${p}; } :host([variant="contained"]) { width: ${f}; } :host([variant="uncontained"]) .active-indicator { background-color: ${g}; } :host([variant="contained"]) .active-indicator { background-color: ${L}; } :host([variant="contained"]) .container { background-color: ${m}; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: ${v}; } .active-indicator { margin: auto; aspect-ratio: 1 / 1; width: calc(${p} * 0.842); transform-origin: center; transition: clip-path ${C.motion.spring.slowEffects}; will-change: transform, clip-path; --_polygon-soft-burst: polygon(${k["soft-burst"]}); --_polygon-9-sided-cookie: polygon(${k["9-sided-cookie"]}); --_polygon-pentagon: polygon(${k.pentagon}); --_polygon-pill: polygon(${k.pill}); --_polygon-sunny: polygon(${k.sunny}); --_polygon-4-sided-cookie: polygon(${k["4-sided-cookie"]}); --_polygon-oval: polygon(${k.oval}); } .container.animate .active-indicator-wrapper { animation: rotate-outer 4666ms linear infinite; transform-origin: center; display: flex; align-items: center; justify-content: center; will-change: transform; } @keyframes rotate-outer { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container.animate .active-indicator { animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite; } @keyframes rotate-inner { 0% { clip-path: var(--_polygon-soft-burst); transform: rotate(0deg); } 14% { clip-path: var(--_polygon-9-sided-cookie); transform: rotate(154deg) scale(1); } 29% { clip-path: var(--_polygon-pentagon); transform: rotate(309deg) scale(1); } 43% { clip-path: var(--_polygon-pill); transform: rotate(463deg) scale(1); } 57% { clip-path: var(--_polygon-sunny); transform: rotate(617deg) scale(1); } 71% { clip-path: var(--_polygon-4-sided-cookie); transform: rotate(771deg) scale(1); } 83% { clip-path: var(--_polygon-oval); transform: rotate(926deg) scale(1); } 100% { clip-path: var(--_polygon-soft-burst); transform: rotate(1080deg) scale(1); } } @media (forced-colors: active) { .active-indicator { background-color: CanvasText !important; } }`,o([e(".container")],$.prototype,"_container",void 0),o([r({reflect:!0})],$.prototype,"variant",void 0),$=o([d("m3e-loading-indicator")],$);export{$ as M3eLoadingIndicatorElement};
7
7
  //# sourceMappingURL=loading-indicator.min.js.map
package/dist/loading-indicator.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-indicator.min.js","sources":["../../src/loading-indicator/LoadingIndicatorToken.ts","../../src/loading-indicator/ShapePolygon.ts","../../src/loading-indicator/LoadingIndicatorElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nexport const LoadingIndicatorToken = {\r\n activeIndicatorSize: unsafeCSS(`var(--m3e-loading-indicator-size, 2.375rem)`),\r\n activeIndicatorColor: unsafeCSS(`var(--m3e-loading-indicator-active-indicator-color, ${DesignToken.color.primary})`),\r\n containedActiveIndicatorColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-active-indicator-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-container-color, ${DesignToken.color.secondaryContainer})`,\r\n ),\r\n containerShape: unsafeCSS(`var(--m3e-loading-indicator-container-shape, ${DesignToken.shape.corner.full})`),\r\n containerSize: unsafeCSS(`var(--m3e-loading-indicator-container-size, 3rem)`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { generateClipPaths } from \"@m3e/web/core\";\r\n\r\nconst SHAPE_PATHS: Record<string, string> = {\r\n \"4-sided-cookie\":\r\n \"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z\",\r\n \"7-sided-cookie\":\r\n \"M142.67 51.7842C146.243 48.6394 148.029 47.067 149.671 45.7954C173.425 27.4015 206.575 27.4015 230.329 45.7954C231.971 47.067 233.757 48.6394 237.33 51.7842C238.526 52.8372 239.124 53.3636 239.724 53.8672C248.136 60.9247 258.171 65.7683 268.92 67.9594C269.688 68.1158 270.471 68.2562 272.038 68.537C276.719 69.3756 279.059 69.7949 281.075 70.2889C310.234 77.4346 330.902 103.411 331.364 133.493C331.396 135.573 331.283 137.953 331.057 142.713C330.982 144.307 330.944 145.104 330.925 145.888C330.665 156.88 333.143 167.763 338.136 177.553C338.493 178.252 338.872 178.953 339.63 180.356C341.894 184.547 343.026 186.642 343.897 188.53C356.503 215.834 349.127 248.226 325.949 267.344C324.347 268.666 322.42 270.061 318.566 272.852C317.276 273.787 316.63 274.254 316.007 274.729C307.27 281.377 300.326 290.105 295.803 300.122C295.48 300.837 295.169 301.571 294.547 303.04C292.69 307.427 291.761 309.62 290.832 311.48C277.393 338.382 247.526 352.798 218.162 346.556C216.132 346.124 213.842 345.484 209.262 344.204C207.728 343.776 206.962 343.562 206.203 343.369C195.569 340.668 184.431 340.668 173.797 343.369C173.038 343.562 172.272 343.776 170.738 344.204C166.158 345.484 163.868 346.124 161.838 346.556C132.474 352.798 102.607 338.382 89.168 311.48C88.2388 309.62 87.3102 307.427 85.453 303.04C84.8311 301.571 84.5202 300.837 84.1975 300.122C79.6741 290.105 72.7297 281.377 63.993 274.729C63.3696 274.254 62.7244 273.787 61.434 272.852C57.5801 270.061 55.6532 268.666 54.0507 267.344C30.873 248.226 23.4965 215.834 36.1027 188.53C36.9742 186.642 38.1062 184.547 40.3703 180.356C41.1283 178.953 41.5074 178.252 41.8636 177.553C46.8568 167.763 49.3353 156.88 49.0745 145.888C49.0559 145.104 49.0182 144.307 48.9426 142.713C48.7168 137.953 48.6039 135.573 48.6359 133.493C49.0982 103.411 69.7665 77.4346 98.9252 70.2889C100.941 69.7949 103.281 69.3756 107.962 68.537C109.529 68.2562 110.312 68.1158 111.08 67.9594C121.829 65.7683 131.864 60.9247 140.276 53.8672C140.876 53.3636 141.474 52.8372 142.67 51.7842Z\",\r\n oval: \"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z\",\r\n pentagon:\r\n \"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z\",\r\n pill: \"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z\",\r\n \"soft-burst\":\r\n \"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z\",\r\n \"very-sunny\":\r\n \"M166.725 43.1869C177.261 25.6044 202.739 25.6044 213.275 43.1868L225.124 62.9597C231.268 73.2136 243.399 78.2385 254.995 75.3327L277.355 69.7294C297.237 64.7468 315.253 82.7627 310.271 102.645L304.667 125.005C301.762 136.601 306.786 148.732 317.04 154.876L336.813 166.725C354.396 177.261 354.396 202.739 336.813 213.275L317.04 225.124C306.786 231.268 301.762 243.399 304.667 254.995L310.271 277.355C315.253 297.237 297.237 315.253 277.355 310.271L254.995 304.667C243.399 301.762 231.268 306.786 225.124 317.04L213.275 336.813C202.739 354.396 177.261 354.396 166.725 336.813L154.876 317.04C148.732 306.786 136.601 301.762 125.005 304.667L102.646 310.271C82.7627 315.253 64.7468 297.237 69.7294 277.355L75.3327 254.995C78.2385 243.399 73.2136 231.268 62.9597 225.124L43.1869 213.275C25.6044 202.739 25.6044 177.261 43.1868 166.725L62.9597 154.876C73.2136 148.732 78.2385 136.601 75.3327 125.005L69.7294 102.646C64.7468 82.7627 82.7627 64.7468 102.645 69.7294L125.005 75.3327C136.601 78.2385 148.732 73.2136 154.876 62.9597L166.725 43.1869Z\",\r\n};\r\n\r\nlet shapes = new Array<string>();\r\nconst indexMap = new Map<string, number>();\r\nfor (const key in SHAPE_PATHS) {\r\n shapes.push(SHAPE_PATHS[key]);\r\n indexMap.set(key, shapes.length - 1);\r\n}\r\n\r\nconst _ShapePolygon: Record<string, CSSResult> = {};\r\n\r\nshapes = generateClipPaths(shapes, 300);\r\nfor (const item of indexMap) {\r\n _ShapePolygon[item[0]] = unsafeCSS(shapes[item[1]]);\r\n}\r\n\r\n/**\r\n * Normalized polygons for each shape.\r\n * @internal\r\n */\r\nexport const ShapePolygon: Record<string, CSSResult> = _ShapePolygon;\r\n","import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, Role } from \"@m3e/web/core\";\r\n\r\nimport { LoadingIndicatorVariant } from \"./LoadingIndicatorVariant\";\r\nimport { LoadingIndicatorToken } from \"./LoadingIndicatorToken\";\r\nimport { ShapePolygon } from \"./ShapePolygon\";\r\n\r\n/**\r\n * Shows indeterminate progress for a short wait time.\r\n *\r\n * @description\r\n * The `m3e-loading-indicator` component uses animation to grab attention, mitigate perceived latency, and indicate\r\n * that an activity is in progress.\r\n *\r\n * When placed over other content, use the `variant` attribute to change the appearance from `uncontained` (the default),\r\n * to `contained` so that it has strong contrast to help it stand out better.\r\n *\r\n * @example\r\n * The following example illustrates an uncontained loading indicator.\r\n * ```html\r\n * <m3e-loading-indicator></m3e-loading-indicator>\r\n * ```\r\n *\r\n * @tag m3e-loading-indicator\r\n *\r\n * @attr variant - The appearance variant of the indicator.\r\n *\r\n * @cssprop --m3e-loading-indicator-active-indicator-color - Uncontained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-active-indicator-color - Contained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-container-color - Contained container (background) color.\r\n * @cssprop --m3e-loading-indicator-active-indicator-size - Size of the active indicator.\r\n * @cssprop --m3e-loading-indicator-container-shape - Container shape.\r\n * @cssprop --m3e-loading-indicator-container-size - Container size.\r\n */\r\n@customElement(\"m3e-loading-indicator\")\r\nexport class M3eLoadingIndicatorElement extends ReconnectedCallback(Role(LitElement, \"progressbar\")) {\r\n /** The styles of the element. */\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n aspect-ratio: 1 / 1;\r\n contain: strict;\r\n vertical-align: middle;\r\n content-visibility: auto;\r\n }\r\n :host([variant=\"uncontained\"]) {\r\n width: ${LoadingIndicatorToken.activeIndicatorSize};\r\n }\r\n :host([variant=\"contained\"]) {\r\n width: ${LoadingIndicatorToken.containerSize};\r\n }\r\n :host([variant=\"uncontained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.activeIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .container {\r\n background-color: ${LoadingIndicatorToken.containedContainerColor};\r\n }\r\n .container {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: ${LoadingIndicatorToken.containerShape};\r\n }\r\n .active-indicator {\r\n margin: auto;\r\n aspect-ratio: 1 / 1;\r\n width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842);\r\n transform-origin: center;\r\n transition: clip-path ${DesignToken.motion.spring.slowEffects};\r\n will-change: transform, clip-path;\r\n\r\n --_polygon-soft-burst: polygon(${ShapePolygon[\"soft-burst\"]});\r\n --_polygon-7-sided-cookie: polygon(${ShapePolygon[\"7-sided-cookie\"]});\r\n --_polygon-pentagon: polygon(${ShapePolygon[\"pentagon\"]});\r\n --_polygon-pill: polygon(${ShapePolygon[\"pill\"]});\r\n --_polygon-very-sunny: polygon(${ShapePolygon[\"very-sunny\"]});\r\n --_polygon-4-sided-cookie: polygon(${ShapePolygon[\"4-sided-cookie\"]});\r\n --_polygon-oval: polygon(${ShapePolygon[\"oval\"]});\r\n }\r\n .active-indicator.animate {\r\n animation: rotate 4998ms infinite;\r\n }\r\n @keyframes rotate {\r\n 0% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(0deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 14% {\r\n clip-path: var(--_polygon-7-sided-cookie);\r\n transform: rotate(154deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 29% {\r\n clip-path: var(--_polygon-pentagon);\r\n transform: rotate(309deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 43% {\r\n clip-path: var(--_polygon-pill);\r\n transform: rotate(463deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 57% {\r\n clip-path: var(--_polygon-very-sunny);\r\n transform: rotate(617deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 71% {\r\n clip-path: var(--_polygon-4-sided-cookie);\r\n transform: rotate(771deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 83% {\r\n clip-path: var(--_polygon-oval);\r\n transform: rotate(926deg);\r\n animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);\r\n }\r\n 100% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(1080deg);\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .active-indicator {\r\n background-color: CanvasText !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */\r\n @query(\".active-indicator\") private readonly _activeIndicator?: HTMLElement;\r\n\r\n /**\r\n * The appearance variant of the indicator.\r\n * @default \"uncontained\"\r\n */\r\n @property({ reflect: true }) variant: LoadingIndicatorVariant = \"uncontained\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaValueMin = this.ariaValueMin || \"0\";\r\n this.ariaValueMax = this.ariaValueMax || \"100\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this._activeIndicator?.classList.toggle(\"animate\", false);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this._activeIndicator?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this._activeIndicator?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override render() {\r\n return html`<div class=\"container\" aria-hidden=\"true\">\r\n <div class=\"active-indicator\"></div>\r\n </div>`;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-loading-indicator\": M3eLoadingIndicatorElement;\r\n }\r\n}\r\n"],"names":["LoadingIndicatorToken","unsafeCSS","DesignToken","color","primary","onPrimaryContainer","secondaryContainer","shape","corner","full","SHAPE_PATHS","oval","pentagon","pill","shapes","Array","indexMap","Map","key","push","set","length","_ShapePolygon","generateClipPaths","item","ShapePolygon","M3eLoadingIndicatorElement","ReconnectedCallback","Role","LitElement","constructor","this","variant","connectedCallback","super","ariaValueMin","ariaValueMax","disconnectedCallback","_activeIndicator","classList","toggle","reconnectedCallback","firstUpdated","_changedProperties","render","html","styles","css","motion","spring","slowEffects","__decorate","query","prototype","property","reflect","customElement"],"mappings":";;;;;uRAIO,MAAMA,EACUC,EAAU,+CADpBD,EAEWC,EAAU,uDAAuDC,EAAYC,MAAMC,YAF9FJ,EAGoBC,EAC7B,iEAAiEC,EAAYC,MAAME,uBAJ1EL,EAMcC,EACvB,0DAA0DC,EAAYC,MAAMG,uBAPnEN,EASKC,EAAU,gDAAgDC,EAAYK,MAAMC,OAAOC,SATxFT,EAUIC,EAAU,qDCVrBS,EAAsC,CAC1C,iBACE,ugBACF,iBACE,s9DACFC,KAAM,oNACNC,SACE,mUACFC,KAAM,oPACN,aACE,iwCACF,aACE,ihCAGJ,IAAIC,EAAS,IAAIC,MACjB,MAAMC,EAAW,IAAIC,IACrB,IAAK,MAAMC,KAAOR,EAChBI,EAAOK,KAAKT,EAAYQ,IACxBF,EAASI,IAAIF,EAAKJ,EAAOO,OAAS,GAGpC,MAAMC,EAA2C,CAAA,EAEjDR,EAASS,EAAkBT,EAAQ,KACnC,IAAK,MAAMU,KAAQR,EACjBM,EAAcE,EAAK,IAAMvB,EAAUa,EAAOU,EAAK,KAO1C,MAAMC,EAA0CH,ECAhD,IAAMI,EAAN,cAAyCC,EAAoBC,EAAKC,EAAY,iBAA9EC,WAAAA,uBA2GwBC,KAAAC,QAAmC,aAkClE,CA/BWC,iBAAAA,GACPC,MAAMD,oBAENF,KAAKI,aAAeJ,KAAKI,cAAgB,IACzCJ,KAAKK,aAAeL,KAAKK,cAAgB,KAC3C,CAGSC,oBAAAA,GACPH,MAAMG,uBACNN,KAAKO,kBAAkBC,UAAUC,OAAO,WAAW,EACrD,CAGSC,mBAAAA,GACPP,MAAMO,sBACNV,KAAKO,kBAAkBC,UAAUC,OAAO,WAAW,EACrD,CAGmBE,YAAAA,CAAaC,GAC9BT,MAAMQ,aAAaC,GACnBZ,KAAKO,kBAAkBC,UAAUC,OAAO,WAAW,EACrD,CAGSI,MAAAA,GACP,OAAOC,CAAI,sFAGb,GA1IgBnB,EAAAoB,OAASC,CAAG,oKASf/C,8CAGAA,6EAGWA,2EAGAA,oEAGAA,4HAQHA,2EAKHA,+DAEUE,EAAY8C,OAAOC,OAAOC,kFAGjBzB,EAAa,sDACTA,EAAa,oDACnBA,EAAuB,uCAC3BA,EAAmB,yCACbA,EAAa,sDACTA,EAAa,gDACvBA,EAAmB,0qCAsDL0B,EAAA,CAA5CC,EAAM,sBAAqE1B,EAAA2B,UAAA,2BAM/CF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAyD7B,EAAA2B,UAAA,eAAA,GA3GnE3B,EAA0ByB,EAAA,CADtCK,EAAc,0BACF9B"}
1
+ {"version":3,"file":"loading-indicator.min.js","sources":["../../src/loading-indicator/LoadingIndicatorToken.ts","../../src/loading-indicator/ShapePolygon.ts","../../src/loading-indicator/LoadingIndicatorElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nexport const LoadingIndicatorToken = {\r\n activeIndicatorSize: unsafeCSS(`var(--m3e-loading-indicator-size, 2.375rem)`),\r\n activeIndicatorColor: unsafeCSS(`var(--m3e-loading-indicator-active-indicator-color, ${DesignToken.color.primary})`),\r\n containedActiveIndicatorColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-active-indicator-color, ${DesignToken.color.onPrimaryContainer})`,\r\n ),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-loading-indicator-contained-container-color, ${DesignToken.color.secondaryContainer})`,\r\n ),\r\n containerShape: unsafeCSS(`var(--m3e-loading-indicator-container-shape, ${DesignToken.shape.corner.full})`),\r\n containerSize: unsafeCSS(`var(--m3e-loading-indicator-container-size, 3rem)`),\r\n} as const;\r\n","import { CSSResult, unsafeCSS } from \"lit\";\r\n\r\nimport { generateClipPaths } from \"@m3e/web/core\";\r\n\r\nconst SHAPE_PATHS: Record<string, string> = {\r\n \"4-sided-cookie\":\r\n \"M230.389 50.473C293.109 23.2328 356.767 86.8908 329.527 149.611L325.023 159.981C316.707 179.13 316.707 200.87 325.023 220.019L329.527 230.389C356.767 293.109 293.109 356.767 230.389 329.527L220.019 325.023C200.87 316.707 179.13 316.707 159.981 325.023L149.611 329.527C86.8908 356.767 23.2328 293.109 50.473 230.389L54.9768 220.019C63.2934 200.87 63.2934 179.13 54.9768 159.981L50.473 149.611C23.2328 86.8908 86.8908 23.2328 149.611 50.473L159.981 54.9768C179.13 63.2934 200.87 63.2934 220.019 54.9768L230.389 50.473Z\",\r\n \"9-sided-cookie\":\r\n \"M154.828 43.2756C156.574 41.8498 157.448 41.1369 158.245 40.535C177.03 26.3548 202.97 26.3548 221.755 40.535C222.552 41.1369 223.425 41.8498 225.172 43.2756C225.952 43.9121 226.342 44.2303 226.727 44.5333C235.567 51.4788 246.406 55.4147 257.652 55.7636C258.143 55.7788 258.647 55.785 259.654 55.7975C261.911 55.8255 263.039 55.8395 264.037 55.8898C287.563 57.0742 307.435 73.7107 312.689 96.6205C312.912 97.5928 313.121 98.6991 313.541 100.911C313.728 101.899 313.822 102.393 313.922 102.872C316.219 113.862 321.986 123.828 330.377 131.308C330.743 131.635 331.125 131.962 331.888 132.618C333.599 134.087 334.454 134.821 335.187 135.5C352.445 151.495 356.95 176.983 346.215 197.903C345.76 198.791 345.208 199.773 344.104 201.737C343.611 202.613 343.364 203.052 343.132 203.483C337.812 213.375 335.809 224.708 337.418 235.82C337.488 236.304 337.569 236.8 337.732 237.792C338.096 240.014 338.278 241.125 338.402 242.115C341.318 265.436 328.347 287.851 306.647 296.991C305.726 297.379 304.67 297.778 302.559 298.574C301.617 298.929 301.146 299.107 300.69 299.289C290.241 303.455 281.406 310.852 275.48 320.395C275.221 320.811 274.964 321.243 274.449 322.107C273.297 324.043 272.721 325.011 272.178 325.849C259.387 345.584 235.011 354.436 212.498 347.521C211.543 347.228 210.477 346.856 208.347 346.112C207.396 345.78 206.921 345.614 206.455 345.461C195.767 341.951 184.233 341.951 173.545 345.461C173.079 345.614 172.603 345.78 171.652 346.112C169.522 346.856 168.457 347.228 167.502 347.521C144.989 354.436 120.613 345.584 107.822 325.849C107.279 325.011 106.703 324.043 105.55 322.107C105.036 321.243 104.779 320.811 104.52 320.395C98.5939 310.852 89.7583 303.455 79.3096 299.289C78.8539 299.107 78.3827 298.929 77.4404 298.574C75.3294 297.778 74.274 297.379 73.3529 296.991C51.6523 287.851 38.6819 265.436 41.598 242.115C41.7218 241.125 41.9039 240.014 42.2682 237.792C42.4308 236.8 42.5121 236.304 42.5822 235.82C44.1908 224.708 42.188 213.375 36.8675 203.483C36.6354 203.052 36.389 202.613 35.8962 201.737C34.7921 199.773 34.2401 198.791 33.7845 197.903C23.0499 176.983 27.5544 151.495 44.8128 135.5C45.5454 134.821 46.4007 134.087 48.1113 132.618C48.875 131.962 49.2568 131.635 49.6228 131.308C58.0134 123.828 63.7804 113.862 66.0777 102.872C66.1779 102.393 66.2715 101.899 66.4588 100.911C66.8783 98.699 67.088 97.5928 67.311 96.6204C72.5652 73.7107 92.4369 57.0742 115.962 55.8898C116.961 55.8395 118.089 55.8255 120.346 55.7975C121.353 55.785 121.857 55.7788 122.347 55.7636C133.594 55.4147 144.432 51.4788 153.272 44.5333C153.658 44.2303 154.048 43.9121 154.828 43.2756Z\",\r\n oval: \"M271.309 271.309C201.705 340.913 108.877 360.935 63.9707 316.029C19.0648 271.123 39.0867 178.295 108.691 108.691C178.295 39.0867 271.123 19.0648 316.029 63.9707C360.935 108.877 340.913 201.705 271.309 271.309Z\",\r\n pentagon:\r\n \"M155.064 49.459C176.093 34.1803 204.569 34.1803 225.598 49.459L322.926 120.171C343.955 135.45 352.754 162.532 344.722 187.253L307.546 301.668C299.514 326.39 276.476 343.127 250.483 343.127H130.18C104.186 343.127 81.1489 326.39 73.1164 301.668L35.9407 187.253C27.9082 162.532 36.7077 135.45 57.737 120.171L155.064 49.459Z\",\r\n pill: \"M116.116 71.7851C169.162 18.7383 255.168 18.7383 308.215 71.7851C361.262 124.832 361.262 210.838 308.215 263.884L263.884 308.215C210.838 361.262 124.832 361.262 71.7851 308.215C18.7383 255.168 18.7383 169.162 71.7851 116.116L116.116 71.7851Z\",\r\n \"soft-burst\":\r\n \"M175.147 33.1508C181.983 22.2831 198.017 22.2831 204.853 33.1508L221.238 59.2009C225.731 66.3458 234.797 69.2506 242.692 66.0751L271.475 54.4972C283.482 49.6671 296.455 58.9613 295.507 71.7154L293.235 102.288C292.612 110.673 298.215 118.278 306.494 120.284L336.681 127.601C349.275 130.653 354.23 145.692 345.861 155.461L325.8 178.877C320.298 185.3 320.298 194.7 325.8 201.123L345.861 224.539C354.23 234.308 349.275 249.347 336.681 252.399L306.494 259.716C298.215 261.722 292.612 269.327 293.235 277.712L295.507 308.285C296.455 321.039 283.482 330.333 271.475 325.503L242.692 313.925C234.797 310.749 225.731 313.654 221.238 320.799L204.853 346.849C198.017 357.717 181.983 357.717 175.147 346.849L158.762 320.799C154.269 313.654 145.203 310.749 137.308 313.925L108.525 325.503C96.5177 330.333 83.5454 321.039 84.4931 308.285L86.7649 277.712C87.388 269.327 81.785 261.722 73.5056 259.716L43.3186 252.399C30.7252 249.347 25.7702 234.308 34.1391 224.539L54.1997 201.123C59.7018 194.7 59.7018 185.3 54.1997 178.877L34.1391 155.461C25.7702 145.692 30.7252 130.653 43.3186 127.601L73.5056 120.284C81.785 118.278 87.388 110.673 86.7649 102.288L84.4931 71.7154C83.5454 58.9613 96.5177 49.6671 108.525 54.4972L137.308 66.0751C145.203 69.2506 154.269 66.3458 158.762 59.201L175.147 33.1508Z\",\r\n sunny:\r\n \"M276.453 68.8118C286.405 69.4881 291.381 69.8263 295.404 71.5853C301.223 74.1305 305.87 78.7766 308.415 84.5965C310.174 88.6186 310.512 93.5948 311.188 103.547L312.732 126.259C313.005 130.284 313.142 132.296 313.579 134.219C314.212 136.997 315.31 139.648 316.827 142.059C317.877 143.728 319.203 145.248 321.856 148.288L336.824 165.438C343.384 172.954 346.663 176.712 348.263 180.8C350.579 186.715 350.579 193.285 348.263 199.2C346.663 203.288 343.384 207.046 336.824 214.562L321.856 231.712C319.203 234.752 317.877 236.272 316.827 237.941C315.31 240.352 314.212 243.003 313.579 245.781C313.142 247.704 313.005 249.716 312.732 253.741L311.188 276.453C310.512 286.405 310.174 291.381 308.415 295.404C305.87 301.223 301.223 305.87 295.404 308.415C291.381 310.174 286.405 310.512 276.453 311.188L253.741 312.732C249.716 313.005 247.704 313.142 245.781 313.579C243.003 314.212 240.352 315.31 237.941 316.827C236.272 317.877 234.752 319.203 231.712 321.856L214.562 336.824C207.046 343.384 203.288 346.663 199.2 348.263C193.285 350.579 186.715 350.579 180.8 348.263C176.712 346.663 172.954 343.384 165.438 336.824L148.288 321.856C145.248 319.203 143.728 317.877 142.059 316.827C139.648 315.31 136.997 314.212 134.219 313.579C132.296 313.142 130.284 313.005 126.259 312.732L103.547 311.188C93.5947 310.512 88.6186 310.174 84.5965 308.415C78.7766 305.87 74.1305 301.223 71.5853 295.404C69.8263 291.381 69.4881 286.405 68.8118 276.453L67.2684 253.741C66.9949 249.716 66.8581 247.704 66.4206 245.781C65.7883 243.003 64.6903 240.352 63.173 237.941C62.123 236.272 60.7965 234.752 58.1437 231.712L43.1756 214.562C36.6164 207.046 33.3369 203.288 31.7366 199.2C29.4211 193.285 29.4211 186.715 31.7366 180.8C33.3369 176.712 36.6164 172.954 43.1756 165.438L58.1437 148.288C60.7965 145.248 62.123 143.728 63.173 142.059C64.6903 139.648 65.7883 136.997 66.4206 134.219C66.8581 132.296 66.9949 130.284 67.2684 126.259L68.8118 103.547C69.4881 93.5948 69.8263 88.6186 71.5853 84.5965C74.1305 78.7766 78.7766 74.1305 84.5965 71.5853C88.6186 69.8263 93.5948 69.4881 103.547 68.8118L126.259 67.2684C130.284 66.9949 132.296 66.8581 134.219 66.4206C136.997 65.7883 139.648 64.6903 142.059 63.173C143.728 62.123 145.248 60.7966 148.288 58.1437L165.438 43.1756C172.954 36.6164 176.712 33.3369 180.8 31.7366C186.715 29.4211 193.285 29.4211 199.2 31.7366C203.288 33.3369 207.046 36.6164 214.562 43.1756L231.712 58.1437C234.752 60.7966 236.272 62.123 237.941 63.173C240.352 64.6903 243.003 65.7883 245.781 66.4206C247.704 66.8581 249.716 66.9949 253.741 67.2684L276.453 68.8118Z\",\r\n};\r\n\r\nlet shapes = new Array<string>();\r\nconst indexMap = new Map<string, number>();\r\nfor (const key in SHAPE_PATHS) {\r\n shapes.push(SHAPE_PATHS[key]);\r\n indexMap.set(key, shapes.length - 1);\r\n}\r\n\r\nconst _ShapePolygon: Record<string, CSSResult> = {};\r\n\r\nshapes = generateClipPaths(shapes, 300);\r\nfor (const item of indexMap) {\r\n _ShapePolygon[item[0]] = unsafeCSS(shapes[item[1]]);\r\n}\r\n\r\n/**\r\n * Normalized polygons for each shape.\r\n * @internal\r\n */\r\nexport const ShapePolygon: Record<string, CSSResult> = _ShapePolygon;\r\n","import { LitElement, html, css, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, Role } from \"@m3e/web/core\";\r\n\r\nimport { LoadingIndicatorVariant } from \"./LoadingIndicatorVariant\";\r\nimport { LoadingIndicatorToken } from \"./LoadingIndicatorToken\";\r\nimport { ShapePolygon } from \"./ShapePolygon\";\r\n\r\n/**\r\n * Shows indeterminate progress for a short wait time.\r\n *\r\n * @description\r\n * The `m3e-loading-indicator` component uses animation to grab attention, mitigate perceived latency, and indicate\r\n * that an activity is in progress.\r\n *\r\n * When placed over other content, use the `variant` attribute to change the appearance from `uncontained` (the default),\r\n * to `contained` so that it has strong contrast to help it stand out better.\r\n *\r\n * @example\r\n * The following example illustrates an uncontained loading indicator.\r\n * ```html\r\n * <m3e-loading-indicator></m3e-loading-indicator>\r\n * ```\r\n *\r\n * @tag m3e-loading-indicator\r\n *\r\n * @attr variant - The appearance variant of the indicator.\r\n *\r\n * @cssprop --m3e-loading-indicator-active-indicator-color - Uncontained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-active-indicator-color - Contained active indicator color.\r\n * @cssprop --m3e-loading-indicator-contained-container-color - Contained container (background) color.\r\n * @cssprop --m3e-loading-indicator-active-indicator-size - Size of the active indicator.\r\n * @cssprop --m3e-loading-indicator-container-shape - Container shape.\r\n * @cssprop --m3e-loading-indicator-container-size - Container size.\r\n */\r\n@customElement(\"m3e-loading-indicator\")\r\nexport class M3eLoadingIndicatorElement extends ReconnectedCallback(Role(LitElement, \"progressbar\")) {\r\n /** The styles of the element. */\r\n static override styles = css`\r\n :host {\r\n display: inline-block;\r\n aspect-ratio: 1 / 1;\r\n contain: strict;\r\n vertical-align: middle;\r\n content-visibility: auto;\r\n }\r\n :host([variant=\"uncontained\"]) {\r\n width: ${LoadingIndicatorToken.activeIndicatorSize};\r\n }\r\n :host([variant=\"contained\"]) {\r\n width: ${LoadingIndicatorToken.containerSize};\r\n }\r\n :host([variant=\"uncontained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.activeIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .active-indicator {\r\n background-color: ${LoadingIndicatorToken.containedActiveIndicatorColor};\r\n }\r\n :host([variant=\"contained\"]) .container {\r\n background-color: ${LoadingIndicatorToken.containedContainerColor};\r\n }\r\n .container {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: ${LoadingIndicatorToken.containerShape};\r\n }\r\n .active-indicator {\r\n margin: auto;\r\n aspect-ratio: 1 / 1;\r\n width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842);\r\n transform-origin: center;\r\n transition: clip-path ${DesignToken.motion.spring.slowEffects};\r\n will-change: transform, clip-path;\r\n\r\n --_polygon-soft-burst: polygon(${ShapePolygon[\"soft-burst\"]});\r\n --_polygon-9-sided-cookie: polygon(${ShapePolygon[\"9-sided-cookie\"]});\r\n --_polygon-pentagon: polygon(${ShapePolygon[\"pentagon\"]});\r\n --_polygon-pill: polygon(${ShapePolygon[\"pill\"]});\r\n --_polygon-sunny: polygon(${ShapePolygon[\"sunny\"]});\r\n --_polygon-4-sided-cookie: polygon(${ShapePolygon[\"4-sided-cookie\"]});\r\n --_polygon-oval: polygon(${ShapePolygon[\"oval\"]});\r\n }\r\n .container.animate .active-indicator-wrapper {\r\n animation: rotate-outer 4666ms linear infinite;\r\n transform-origin: center;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n will-change: transform;\r\n }\r\n @keyframes rotate-outer {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n .container.animate .active-indicator {\r\n animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite;\r\n }\r\n @keyframes rotate-inner {\r\n 0% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(0deg);\r\n }\r\n 14% {\r\n clip-path: var(--_polygon-9-sided-cookie);\r\n transform: rotate(154deg) scale(1);\r\n }\r\n 29% {\r\n clip-path: var(--_polygon-pentagon);\r\n transform: rotate(309deg) scale(1);\r\n }\r\n 43% {\r\n clip-path: var(--_polygon-pill);\r\n transform: rotate(463deg) scale(1);\r\n }\r\n 57% {\r\n clip-path: var(--_polygon-sunny);\r\n transform: rotate(617deg) scale(1);\r\n }\r\n 71% {\r\n clip-path: var(--_polygon-4-sided-cookie);\r\n transform: rotate(771deg) scale(1);\r\n }\r\n 83% {\r\n clip-path: var(--_polygon-oval);\r\n transform: rotate(926deg) scale(1);\r\n }\r\n 100% {\r\n clip-path: var(--_polygon-soft-burst);\r\n transform: rotate(1080deg) scale(1);\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n .active-indicator {\r\n background-color: CanvasText !important;\r\n }\r\n }\r\n `;\r\n\r\n /** @private */\r\n @query(\".container\") private readonly _container?: HTMLElement;\r\n\r\n /**\r\n * The appearance variant of the indicator.\r\n * @default \"uncontained\"\r\n */\r\n @property({ reflect: true }) variant: LoadingIndicatorVariant = \"uncontained\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n\r\n this.ariaValueMin = this.ariaValueMin || \"0\";\r\n this.ariaValueMax = this.ariaValueMax || \"100\";\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this._container?.classList.toggle(\"animate\", false);\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this._container?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this._container?.classList.toggle(\"animate\", true);\r\n }\r\n\r\n /** @inheritdoc */\r\n override render() {\r\n return html`<div class=\"container\" aria-hidden=\"true\">\r\n <div class=\"active-indicator-wrapper\">\r\n <div class=\"active-indicator\"></div>\r\n </div>\r\n </div>`;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-loading-indicator\": M3eLoadingIndicatorElement;\r\n }\r\n}\r\n"],"names":["LoadingIndicatorToken","unsafeCSS","DesignToken","color","primary","onPrimaryContainer","secondaryContainer","shape","corner","full","SHAPE_PATHS","oval","pentagon","pill","sunny","shapes","Array","indexMap","Map","key","push","set","length","_ShapePolygon","generateClipPaths","item","ShapePolygon","M3eLoadingIndicatorElement","ReconnectedCallback","Role","LitElement","constructor","this","variant","connectedCallback","super","ariaValueMin","ariaValueMax","disconnectedCallback","_container","classList","toggle","reconnectedCallback","firstUpdated","_changedProperties","render","html","styles","css","motion","spring","slowEffects","__decorate","query","prototype","property","reflect","customElement"],"mappings":";;;;;uRAIO,MAAMA,EACUC,EAAU,+CADpBD,EAEWC,EAAU,uDAAuDC,EAAYC,MAAMC,YAF9FJ,EAGoBC,EAC7B,iEAAiEC,EAAYC,MAAME,uBAJ1EL,EAMcC,EACvB,0DAA0DC,EAAYC,MAAMG,uBAPnEN,EASKC,EAAU,gDAAgDC,EAAYK,MAAMC,OAAOC,SATxFT,EAUIC,EAAU,qDCVrBS,EAAsC,CAC1C,iBACE,ugBACF,iBACE,mhFACFC,KAAM,oNACNC,SACE,mUACFC,KAAM,oPACN,aACE,iwCACFC,MACE,q/EAGJ,IAAIC,EAAS,IAAIC,MACjB,MAAMC,EAAW,IAAIC,IACrB,IAAK,MAAMC,KAAOT,EAChBK,EAAOK,KAAKV,EAAYS,IACxBF,EAASI,IAAIF,EAAKJ,EAAOO,OAAS,GAGpC,MAAMC,EAA2C,CAAA,EAEjDR,EAASS,EAAkBT,EAAQ,KACnC,IAAK,MAAMU,KAAQR,EACjBM,EAAcE,EAAK,IAAMxB,EAAUc,EAAOU,EAAK,KAO1C,MAAMC,EAA0CH,ECAhD,IAAMI,EAAN,cAAyCC,EAAoBC,EAAKC,EAAY,iBAA9EC,WAAAA,uBAoHwBC,KAAAC,QAAmC,aAoClE,CAjCWC,iBAAAA,GACPC,MAAMD,oBAENF,KAAKI,aAAeJ,KAAKI,cAAgB,IACzCJ,KAAKK,aAAeL,KAAKK,cAAgB,KAC3C,CAGSC,oBAAAA,GACPH,MAAMG,uBACNN,KAAKO,YAAYC,UAAUC,OAAO,WAAW,EAC/C,CAGSC,mBAAAA,GACPP,MAAMO,sBACNV,KAAKO,YAAYC,UAAUC,OAAO,WAAW,EAC/C,CAGmBE,YAAAA,CAAaC,GAC9BT,MAAMQ,aAAaC,GACnBZ,KAAKO,YAAYC,UAAUC,OAAO,WAAW,EAC/C,CAGSI,MAAAA,GACP,OAAOC,CAAI,kIAKb,GArJgBnB,EAAAoB,OAASC,CAAG,oKASfhD,8CAGAA,6EAGWA,2EAGAA,oEAGAA,4HAQHA,2EAKHA,+DAEUE,EAAY+C,OAAOC,OAAOC,kFAGjBzB,EAAa,sDACTA,EAAa,oDACnBA,EAAuB,uCAC3BA,EAAmB,oCAClBA,EAAoB,8CACXA,EAAa,gDACvBA,EAAmB,grCA+DZ0B,EAAA,CAArCC,EAAM,eAAwD1B,EAAA2B,UAAA,qBAMlCF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAyD7B,EAAA2B,UAAA,eAAA,GApHnE3B,EAA0ByB,EAAA,CADtCK,EAAc,0BACF9B"}
package/dist/slide-group.js CHANGED
@@ -121,6 +121,7 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
121
121
  }
122
122
  /** @private */
123
123
  _updatePaging() {
124
+ const canPage = this._canPage;
124
125
  if (this.disabled) {
125
126
  this._canPage = false;
126
127
  } else if (!this.vertical) {
@@ -139,6 +140,10 @@ let M3eSlideGroupElement = class M3eSlideGroupElement extends ReconnectedCallbac
139
140
  if (!this._canPage) {
140
141
  this._canPageStart = this._canPageEnd = false;
141
142
  }
143
+ if (canPage != this._canPage) {
144
+ // Emit internal (undocumented) event for use with tabs.
145
+ this["dispatchEvent"](new CustomEvent("pagination-changed"));
146
+ }
142
147
  }
143
148
  };
144
149
  _M3eSlideGroupElement_directionalitySubscription = new WeakMap();
@@ -187,7 +192,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
187
192
  }
188
193
  };
189
194
  /** The styles of the element. */
190
- M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`;
195
+ M3eSlideGroupElement.styles = css`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`;
191
196
  __decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
192
197
  __decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
193
198
  __decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);
package/dist/slide-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"slide-group.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold. It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n * <div>Item 1</div>\r\n * <div>Item 2</div>\r\n * <div>Item 3</div>\r\n * <div>Item 4</div>\r\n * <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n overflow: hidden;\r\n }\r\n :host([vertical]) {\r\n flex-direction: column;\r\n }\r\n .prev-button,\r\n .next-button {\r\n flex: none;\r\n --m3e-icon-button-small-shape-round: 0px;\r\n --m3e-icon-button-small-shape-square: 0px;\r\n --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n --m3e-focus-ring-visibility: hidden;\r\n }\r\n ::slotted(prev-icon),\r\n ::slotted(next-icon),\r\n .icon {\r\n width: 1em;\r\n font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n }\r\n :host(:not([vertical])) .prev-button,\r\n :host(:not([vertical])) .next-button {\r\n --m3e-icon-button-small-container-height: 100%;\r\n width: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button,\r\n :host([vertical]) .next-button {\r\n width: unset;\r\n --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button .icon,\r\n :host([vertical]) .next-button .icon {\r\n transform: rotate(90deg);\r\n }\r\n .content {\r\n flex: 1 1 auto;\r\n display: inherit;\r\n flex-wrap: inherit;\r\n flex-direction: inherit;\r\n overflow: inherit;\r\n position: relative;\r\n border-top: var(--m3e-slide-group-divider-top);\r\n border-bottom: var(--m3e-slide-group-divider-bottom);\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this._updatePaging(),\r\n });\r\n\r\n /** @internal A reference to the container used to scroll content. */\r\n @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n /** @private */ @state() private _canPage = false;\r\n /** @private */ @state() private _canPageStart = false;\r\n /** @private */ @state() private _canPageEnd = false;\r\n\r\n /**\r\n * Whether scroll buttons are disabled.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n /**\r\n * Whether content is oriented vertically.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n /**\r\n * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @default 0\r\n */\r\n @property({ type: Number }) threshold = 0;\r\n\r\n /**\r\n * The accessible label given to the button used to move to the previous page.\r\n * @default \"Previous page\"\r\n */\r\n @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n /**\r\n * The accessible label given to the button used to move to the next page.\r\n * @default \"Next page\"\r\n */\r\n @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n const prevButton = html`<m3e-icon-button\r\n class=\"prev-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.previousPageLabel}\"\r\n ?disabled=\"${!this._canPageStart}\"\r\n @click=\"${this.#pageStart}\"\r\n >\r\n <slot name=\"prev-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n const nextButton = html`<m3e-icon-button\r\n class=\"next-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.nextPageLabel}\"\r\n ?disabled=\"${!this._canPageEnd}\"\r\n @click=\"${this.#pageEnd}\"\r\n >\r\n <slot name=\"next-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n return html`${this._canPage ? prevButton : nothing}\r\n <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n ${this._canPage ? nextButton : nothing}`;\r\n }\r\n\r\n /** @private */\r\n #pageStart(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n if (left <= this.threshold) {\r\n left = 0;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n if (top <= this.threshold) {\r\n top = 0;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n #pageEnd(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _updatePaging(): void {\r\n if (this.disabled) {\r\n this._canPage = false;\r\n } else if (!this.vertical) {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n }\r\n } else {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n }\r\n }\r\n\r\n if (!this._canPage) {\r\n this._canPageStart = this._canPageEnd = false;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-slide-group\": M3eSlideGroupElement;\r\n }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","Math","round","scrollWidth","clientWidth","scrollLeft","scrollHeight","clientHeight","scrollTop","left","scrollTo","behavior","top","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"slide-group.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold. It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n * <div>Item 1</div>\r\n * <div>Item 2</div>\r\n * <div>Item 3</div>\r\n * <div>Item 4</div>\r\n * <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n }\r\n :host([vertical]) {\r\n flex-direction: column;\r\n }\r\n .prev-button,\r\n .next-button {\r\n flex: none;\r\n --m3e-icon-button-small-shape-round: 0px;\r\n --m3e-icon-button-small-shape-square: 0px;\r\n --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n --m3e-focus-ring-visibility: hidden;\r\n }\r\n ::slotted(prev-icon),\r\n ::slotted(next-icon),\r\n .icon {\r\n width: 1em;\r\n font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n }\r\n :host(:not([vertical])) .prev-button,\r\n :host(:not([vertical])) .next-button {\r\n --m3e-icon-button-small-container-height: 100%;\r\n width: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button,\r\n :host([vertical]) .next-button {\r\n width: unset;\r\n --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button .icon,\r\n :host([vertical]) .next-button .icon {\r\n transform: rotate(90deg);\r\n }\r\n .content {\r\n flex: 1 1 auto;\r\n display: inherit;\r\n flex-wrap: inherit;\r\n flex-direction: inherit;\r\n position: relative;\r\n border-top: var(--m3e-slide-group-divider-top);\r\n border-bottom: var(--m3e-slide-group-divider-bottom);\r\n scrollbar-width: none;\r\n }\r\n .content::-webkit-scrollbar {\r\n display: none;\r\n }\r\n :host([vertical]) .content {\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n :host(:not([vertical])) .content {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this._updatePaging(),\r\n });\r\n\r\n /** @internal A reference to the container used to scroll content. */\r\n @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n /** @private */ @state() private _canPage = false;\r\n /** @private */ @state() private _canPageStart = false;\r\n /** @private */ @state() private _canPageEnd = false;\r\n\r\n /**\r\n * Whether scroll buttons are disabled.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n /**\r\n * Whether content is oriented vertically.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n /**\r\n * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @default 0\r\n */\r\n @property({ type: Number }) threshold = 0;\r\n\r\n /**\r\n * The accessible label given to the button used to move to the previous page.\r\n * @default \"Previous page\"\r\n */\r\n @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n /**\r\n * The accessible label given to the button used to move to the next page.\r\n * @default \"Next page\"\r\n */\r\n @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n const prevButton = html`<m3e-icon-button\r\n class=\"prev-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.previousPageLabel}\"\r\n ?disabled=\"${!this._canPageStart}\"\r\n @click=\"${this.#pageStart}\"\r\n >\r\n <slot name=\"prev-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n const nextButton = html`<m3e-icon-button\r\n class=\"next-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.nextPageLabel}\"\r\n ?disabled=\"${!this._canPageEnd}\"\r\n @click=\"${this.#pageEnd}\"\r\n >\r\n <slot name=\"next-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n return html`${this._canPage ? prevButton : nothing}\r\n <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n ${this._canPage ? nextButton : nothing}`;\r\n }\r\n\r\n /** @private */\r\n #pageStart(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n if (left <= this.threshold) {\r\n left = 0;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n if (top <= this.threshold) {\r\n top = 0;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n #pageEnd(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _updatePaging(): void {\r\n const canPage = this._canPage;\r\n if (this.disabled) {\r\n this._canPage = false;\r\n } else if (!this.vertical) {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n }\r\n } else {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n }\r\n }\r\n\r\n if (!this._canPage) {\r\n this._canPageStart = this._canPageEnd = false;\r\n }\r\n\r\n if (canPage != this._canPage) {\r\n // Emit internal (undocumented) event for use with tabs.\r\n this[\"dispatchEvent\"](new CustomEvent(\"pagination-changed\"));\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-slide-group\": M3eSlideGroupElement;\r\n }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","canPage","Math","round","scrollWidth","clientWidth","scrollLeft","scrollHeight","clientHeight","scrollTop","CustomEvent","left","scrollTo","behavior","top","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}
package/dist/slide-group.min.js CHANGED
@@ -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{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as o}from"tslib";import{LitElement as i,html as l,nothing as s,css as r}from"lit";import{query as n,state as a,property as c}from"lit/decorators.js";import{ReconnectedCallback as h,ResizeController as d,debounce as p,customElement as u}from"@m3e/web/core";import{M3eDirectionality as v}from"@m3e/web/core/bidi";import"@m3e/web/icon-button";var g,b,m,C,f;let P=class extends(h(i)){constructor(){super(...arguments),g.add(this),b.set(this,void 0),m.set(this,new d(this,{target:null,callback:()=>this._updatePaging()})),this._canPage=!1,this._canPageStart=!1,this._canPageEnd=!1,this.disabled=!1,this.vertical=!1,this.threshold=0,this.previousPageLabel="Previous page",this.nextPageLabel="Next page"}connectedCallback(){super.connectedCallback(),t(this,b,v.observe(()=>this.requestUpdate()),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,b,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"f").observe(this.scrollContainer)}firstUpdated(t){super.firstUpdated(t),e(this,m,"f").observe(this.scrollContainer)}render(){const t=l`<m3e-icon-button class="prev-button" tabindex="-1" aria-label="${this.previousPageLabel}" ?disabled="${!this._canPageStart}" @click="${e(this,g,"m",C)}"><slot name="prev-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot></m3e-icon-button>`,o=l`<m3e-icon-button class="next-button" tabindex="-1" aria-label="${this.nextPageLabel}" ?disabled="${!this._canPageEnd}" @click="${e(this,g,"m",f)}"><slot name="next-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot></m3e-icon-button>`;return l`${this._canPage?t:s}<div class="content" @scroll="${this._updatePaging}"><slot></slot></div>${this._canPage?o:s}`}_updatePaging(){this.disabled?this._canPage=!1:this.vertical?(this._canPage=Math.round(this.scrollContainer.scrollHeight)>Math.round(this.scrollContainer.clientHeight)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollTop)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollTop)+ +this.threshold<Math.round(this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight))):(this._canPage=Math.round(this.scrollContainer.scrollWidth)>Math.round(this.scrollContainer.clientWidth)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollLeft)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollLeft)+this.threshold<Math.round(this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth))),this._canPage||(this._canPageStart=this._canPageEnd=!1)}};b=new WeakMap,m=new WeakMap,g=new WeakSet,C=function(){if(this.vertical){let t=this.scrollContainer.scrollTop-this.scrollContainer.clientHeight;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft-this.scrollContainer.clientWidth;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},f=function(){if(this.vertical){let t=this.scrollContainer.scrollTop+this.scrollContainer.clientHeight;t>=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight-this.threshold&&(t=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft+this.scrollContainer.clientWidth;t>=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth-this.threshold&&(t=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},P.styles=r`:host { display: flex; flex-wrap: nowrap; overflow: hidden; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; overflow: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); }`,o([n(".content")],P.prototype,"scrollContainer",void 0),o([a()],P.prototype,"_canPage",void 0),o([a()],P.prototype,"_canPageStart",void 0),o([a()],P.prototype,"_canPageEnd",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"disabled",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"vertical",void 0),o([c({type:Number})],P.prototype,"threshold",void 0),o([c({attribute:"previous-page-label"})],P.prototype,"previousPageLabel",void 0),o([c({attribute:"next-page-label"})],P.prototype,"nextPageLabel",void 0),o([p(40)],P.prototype,"_updatePaging",null),P=o([u("m3e-slide-group")],P);export{P as M3eSlideGroupElement};
6
+ import{__classPrivateFieldSet as t,__classPrivateFieldGet as e,__decorate as o}from"tslib";import{LitElement as i,html as l,nothing as s,css as n}from"lit";import{query as r,state as a,property as c}from"lit/decorators.js";import{ReconnectedCallback as h,ResizeController as d,debounce as p,customElement as u}from"@m3e/web/core";import{M3eDirectionality as v}from"@m3e/web/core/bidi";import"@m3e/web/icon-button";var g,b,m,C,f;let P=class extends(h(i)){constructor(){super(...arguments),g.add(this),b.set(this,void 0),m.set(this,new d(this,{target:null,callback:()=>this._updatePaging()})),this._canPage=!1,this._canPageStart=!1,this._canPageEnd=!1,this.disabled=!1,this.vertical=!1,this.threshold=0,this.previousPageLabel="Previous page",this.nextPageLabel="Next page"}connectedCallback(){super.connectedCallback(),t(this,b,v.observe(()=>this.requestUpdate()),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,b,"f")?.call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"f").observe(this.scrollContainer)}firstUpdated(t){super.firstUpdated(t),e(this,m,"f").observe(this.scrollContainer)}render(){const t=l`<m3e-icon-button class="prev-button" tabindex="-1" aria-label="${this.previousPageLabel}" ?disabled="${!this._canPageStart}" @click="${e(this,g,"m",C)}"><slot name="prev-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`}</slot></m3e-icon-button>`,o=l`<m3e-icon-button class="next-button" tabindex="-1" aria-label="${this.nextPageLabel}" ?disabled="${!this._canPageEnd}" @click="${e(this,g,"m",f)}"><slot name="next-icon">${"ltr"===v.current||this.vertical?l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z"/></svg>`:l`<svg class="icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>`}</slot></m3e-icon-button>`;return l`${this._canPage?t:s}<div class="content" @scroll="${this._updatePaging}"><slot></slot></div>${this._canPage?o:s}`}_updatePaging(){const t=this._canPage;this.disabled?this._canPage=!1:this.vertical?(this._canPage=Math.round(this.scrollContainer.scrollHeight)>Math.round(this.scrollContainer.clientHeight)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollTop)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollTop)+ +this.threshold<Math.round(this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight))):(this._canPage=Math.round(this.scrollContainer.scrollWidth)>Math.round(this.scrollContainer.clientWidth)+this.threshold,this._canPage&&(this._canPageStart=Math.round(this.scrollContainer.scrollLeft)>this.threshold,this._canPageEnd=Math.round(this.scrollContainer.scrollLeft)+this.threshold<Math.round(this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth))),this._canPage||(this._canPageStart=this._canPageEnd=!1),t!=this._canPage&&this.dispatchEvent(new CustomEvent("pagination-changed"))}};b=new WeakMap,m=new WeakMap,g=new WeakSet,C=function(){if(this.vertical){let t=this.scrollContainer.scrollTop-this.scrollContainer.clientHeight;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft-this.scrollContainer.clientWidth;t<=this.threshold&&(t=0),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},f=function(){if(this.vertical){let t=this.scrollContainer.scrollTop+this.scrollContainer.clientHeight;t>=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight-this.threshold&&(t=this.scrollContainer.scrollHeight-this.scrollContainer.clientHeight),this.scrollContainer.scrollTo({top:t,behavior:"smooth"})}else{let t=this.scrollContainer.scrollLeft+this.scrollContainer.clientWidth;t>=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth-this.threshold&&(t=this.scrollContainer.scrollWidth-this.scrollContainer.clientWidth),this.scrollContainer.scrollTo({left:t,behavior:"smooth"})}},P.styles=n`:host { display: flex; flex-wrap: nowrap; } :host([vertical]) { flex-direction: column; } .prev-button, .next-button { flex: none; --m3e-icon-button-small-shape-round: 0px; --m3e-icon-button-small-shape-square: 0px; --m3e-icon-button-small-shape-pressed-morph: 0px; --m3e-focus-ring-visibility: hidden; } ::slotted(prev-icon), ::slotted(next-icon), .icon { width: 1em; font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important; } :host(:not([vertical])) .prev-button, :host(:not([vertical])) .next-button { --m3e-icon-button-small-container-height: 100%; width: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button, :host([vertical]) .next-button { width: unset; --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem); } :host([vertical]) .prev-button .icon, :host([vertical]) .next-button .icon { transform: rotate(90deg); } .content { flex: 1 1 auto; display: inherit; flex-wrap: inherit; flex-direction: inherit; position: relative; border-top: var(--m3e-slide-group-divider-top); border-bottom: var(--m3e-slide-group-divider-bottom); scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } :host([vertical]) .content { overflow-x: hidden; overflow-y: auto; } :host(:not([vertical])) .content { overflow-x: auto; overflow-y: hidden; }`,o([r(".content")],P.prototype,"scrollContainer",void 0),o([a()],P.prototype,"_canPage",void 0),o([a()],P.prototype,"_canPageStart",void 0),o([a()],P.prototype,"_canPageEnd",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"disabled",void 0),o([c({type:Boolean,reflect:!0})],P.prototype,"vertical",void 0),o([c({type:Number})],P.prototype,"threshold",void 0),o([c({attribute:"previous-page-label"})],P.prototype,"previousPageLabel",void 0),o([c({attribute:"next-page-label"})],P.prototype,"nextPageLabel",void 0),o([p(40)],P.prototype,"_updatePaging",null),P=o([u("m3e-slide-group")],P);export{P as M3eSlideGroupElement};
7
7
  //# sourceMappingURL=slide-group.min.js.map
package/dist/slide-group.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"slide-group.min.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold. It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n * <div>Item 1</div>\r\n * <div>Item 2</div>\r\n * <div>Item 3</div>\r\n * <div>Item 4</div>\r\n * <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n overflow: hidden;\r\n }\r\n :host([vertical]) {\r\n flex-direction: column;\r\n }\r\n .prev-button,\r\n .next-button {\r\n flex: none;\r\n --m3e-icon-button-small-shape-round: 0px;\r\n --m3e-icon-button-small-shape-square: 0px;\r\n --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n --m3e-focus-ring-visibility: hidden;\r\n }\r\n ::slotted(prev-icon),\r\n ::slotted(next-icon),\r\n .icon {\r\n width: 1em;\r\n font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n }\r\n :host(:not([vertical])) .prev-button,\r\n :host(:not([vertical])) .next-button {\r\n --m3e-icon-button-small-container-height: 100%;\r\n width: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button,\r\n :host([vertical]) .next-button {\r\n width: unset;\r\n --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button .icon,\r\n :host([vertical]) .next-button .icon {\r\n transform: rotate(90deg);\r\n }\r\n .content {\r\n flex: 1 1 auto;\r\n display: inherit;\r\n flex-wrap: inherit;\r\n flex-direction: inherit;\r\n overflow: inherit;\r\n position: relative;\r\n border-top: var(--m3e-slide-group-divider-top);\r\n border-bottom: var(--m3e-slide-group-divider-bottom);\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this._updatePaging(),\r\n });\r\n\r\n /** @internal A reference to the container used to scroll content. */\r\n @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n /** @private */ @state() private _canPage = false;\r\n /** @private */ @state() private _canPageStart = false;\r\n /** @private */ @state() private _canPageEnd = false;\r\n\r\n /**\r\n * Whether scroll buttons are disabled.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n /**\r\n * Whether content is oriented vertically.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n /**\r\n * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @default 0\r\n */\r\n @property({ type: Number }) threshold = 0;\r\n\r\n /**\r\n * The accessible label given to the button used to move to the previous page.\r\n * @default \"Previous page\"\r\n */\r\n @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n /**\r\n * The accessible label given to the button used to move to the next page.\r\n * @default \"Next page\"\r\n */\r\n @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n const prevButton = html`<m3e-icon-button\r\n class=\"prev-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.previousPageLabel}\"\r\n ?disabled=\"${!this._canPageStart}\"\r\n @click=\"${this.#pageStart}\"\r\n >\r\n <slot name=\"prev-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n const nextButton = html`<m3e-icon-button\r\n class=\"next-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.nextPageLabel}\"\r\n ?disabled=\"${!this._canPageEnd}\"\r\n @click=\"${this.#pageEnd}\"\r\n >\r\n <slot name=\"next-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n return html`${this._canPage ? prevButton : nothing}\r\n <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n ${this._canPage ? nextButton : nothing}`;\r\n }\r\n\r\n /** @private */\r\n #pageStart(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n if (left <= this.threshold) {\r\n left = 0;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n if (top <= this.threshold) {\r\n top = 0;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n #pageEnd(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _updatePaging(): void {\r\n if (this.disabled) {\r\n this._canPage = false;\r\n } else if (!this.vertical) {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n }\r\n } else {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n }\r\n }\r\n\r\n if (!this._canPage) {\r\n this._canPageStart = this._canPageEnd = false;\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-slide-group\": M3eSlideGroupElement;\r\n }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","this","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","super","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","Math","round","scrollHeight","clientHeight","scrollTop","scrollWidth","clientWidth","scrollLeft","top","scrollTo","behavior","left","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"slide-group.min.js","sources":["../../src/slide-group/SlideGroupElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\n\r\nimport { customElement, debounce, ReconnectedCallback, ResizeController } from \"@m3e/web/core\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\n/**\r\n * Presents pagination controls used to scroll overflowing content.\r\n *\r\n * @description\r\n * The `m3e-slide-group` component presents directional pagination controls for navigating overflowing content.\r\n * It orchestrates scrollable layouts with expressive slot-based icons and adaptive orientation, revealing navigation\r\n * affordances only when content exceeds a defined threshold. It supports both horizontal and vertical flows, and\r\n * encodes accessibility through customizable labels and interaction states.\r\n *\r\n * @example\r\n * The following example illustrates a horizontally scrollable group of items with directional pagination buttons.\r\n * The scroll controls appear when content exceeds the `48px` threshold.\r\n * ```html\r\n * <m3e-slide-group threshold=\"48\">\r\n * <div>Item 1</div>\r\n * <div>Item 2</div>\r\n * <div>Item 3</div>\r\n * <div>Item 4</div>\r\n * <div>Item 5</div>\r\n * </m3e-slide-group>\r\n * ```\r\n *\r\n * @tag m3e-slide-group\r\n *\r\n * @slot - Renders the content to paginate.\r\n * @slot next-icon - Renders the icon to present for the next button.\r\n * @slot prev-icon - Renders the icon to present for the previous button.\r\n *\r\n * @attr disabled - Whether scroll buttons are disabled.\r\n * @attr next-page-label - The accessible label given to the button used to move to the previous page.\r\n * @attr previous-page-label - The accessible label given to the button used to move to the next page.\r\n * @attr threshold - A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @attr vertical - Whether content is oriented vertically.\r\n *\r\n * @cssprop --m3e-slide-group-button-icon-size - Sets icon size for scroll buttons; overrides default small icon size.\r\n * @cssprop --m3e-slide-group-button-size - Defines scroll button size; used for width (horizontal) or height (vertical).\r\n * @cssprop --m3e-slide-group-divider-top - Adds top border to content container for visual separation.\r\n * @cssprop --m3e-slide-group-divider-bottom - Adds bottom border to content container for visual separation.\r\n */\r\n@customElement(\"m3e-slide-group\")\r\nexport class M3eSlideGroupElement extends ReconnectedCallback(LitElement) {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: flex;\r\n flex-wrap: nowrap;\r\n }\r\n :host([vertical]) {\r\n flex-direction: column;\r\n }\r\n .prev-button,\r\n .next-button {\r\n flex: none;\r\n --m3e-icon-button-small-shape-round: 0px;\r\n --m3e-icon-button-small-shape-square: 0px;\r\n --m3e-icon-button-small-shape-pressed-morph: 0px;\r\n --m3e-focus-ring-visibility: hidden;\r\n }\r\n ::slotted(prev-icon),\r\n ::slotted(next-icon),\r\n .icon {\r\n width: 1em;\r\n font-size: var(--m3e-slide-group-button-icon-size, var(--m3e-icon-button-small-icon-size, 1.5rem)) !important;\r\n }\r\n :host(:not([vertical])) .prev-button,\r\n :host(:not([vertical])) .next-button {\r\n --m3e-icon-button-small-container-height: 100%;\r\n width: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button,\r\n :host([vertical]) .next-button {\r\n width: unset;\r\n --m3e-icon-button-small-container-height: var(--m3e-slide-group-button-size, 2.5rem);\r\n }\r\n :host([vertical]) .prev-button .icon,\r\n :host([vertical]) .next-button .icon {\r\n transform: rotate(90deg);\r\n }\r\n .content {\r\n flex: 1 1 auto;\r\n display: inherit;\r\n flex-wrap: inherit;\r\n flex-direction: inherit;\r\n position: relative;\r\n border-top: var(--m3e-slide-group-divider-top);\r\n border-bottom: var(--m3e-slide-group-divider-bottom);\r\n scrollbar-width: none;\r\n }\r\n .content::-webkit-scrollbar {\r\n display: none;\r\n }\r\n :host([vertical]) .content {\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n :host(:not([vertical])) .content {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }\r\n `;\r\n\r\n /** @private */ #directionalitySubscription?: () => void;\r\n\r\n /** @private */\r\n readonly #resizeController = new ResizeController(this, {\r\n target: null,\r\n callback: () => this._updatePaging(),\r\n });\r\n\r\n /** @internal A reference to the container used to scroll content. */\r\n @query(\".content\") scrollContainer!: HTMLElement;\r\n\r\n /** @private */ @state() private _canPage = false;\r\n /** @private */ @state() private _canPageStart = false;\r\n /** @private */ @state() private _canPageEnd = false;\r\n\r\n /**\r\n * Whether scroll buttons are disabled.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) disabled = false;\r\n\r\n /**\r\n * Whether content is oriented vertically.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) vertical = false;\r\n\r\n /**\r\n * A value, in pixels, indicating the scroll threshold at which to begin showing pagination controls.\r\n * @default 0\r\n */\r\n @property({ type: Number }) threshold = 0;\r\n\r\n /**\r\n * The accessible label given to the button used to move to the previous page.\r\n * @default \"Previous page\"\r\n */\r\n @property({ attribute: \"previous-page-label\" }) previousPageLabel = \"Previous page\";\r\n\r\n /**\r\n * The accessible label given to the button used to move to the next page.\r\n * @default \"Next page\"\r\n */\r\n @property({ attribute: \"next-page-label\" }) nextPageLabel = \"Next page\";\r\n\r\n /** @inheritdoc */\r\n override connectedCallback(): void {\r\n super.connectedCallback();\r\n this.#directionalitySubscription = M3eDirectionality.observe(() => this.requestUpdate());\r\n }\r\n\r\n /** @inheritdoc */\r\n override disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this.#directionalitySubscription?.();\r\n }\r\n\r\n /** @inheritdoc */\r\n override reconnectedCallback(): void {\r\n super.reconnectedCallback();\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override firstUpdated(_changedProperties: PropertyValues): void {\r\n super.firstUpdated(_changedProperties);\r\n this.#resizeController.observe(this.scrollContainer);\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n const prevButton = html`<m3e-icon-button\r\n class=\"prev-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.previousPageLabel}\"\r\n ?disabled=\"${!this._canPageStart}\"\r\n @click=\"${this.#pageStart}\"\r\n >\r\n <slot name=\"prev-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n const nextButton = html`<m3e-icon-button\r\n class=\"next-button\"\r\n tabindex=\"-1\"\r\n aria-label=\"${this.nextPageLabel}\"\r\n ?disabled=\"${!this._canPageEnd}\"\r\n @click=\"${this.#pageEnd}\"\r\n >\r\n <slot name=\"next-icon\">\r\n ${M3eDirectionality.current === \"ltr\" || this.vertical\r\n ? html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z\" />\r\n </svg>`\r\n : html`<svg class=\"icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z\" />\r\n </svg>`}\r\n </slot>\r\n </m3e-icon-button>`;\r\n\r\n return html`${this._canPage ? prevButton : nothing}\r\n <div class=\"content\" @scroll=\"${this._updatePaging}\"><slot></slot></div>\r\n ${this._canPage ? nextButton : nothing}`;\r\n }\r\n\r\n /** @private */\r\n #pageStart(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft - this.scrollContainer.clientWidth;\r\n if (left <= this.threshold) {\r\n left = 0;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop - this.scrollContainer.clientHeight;\r\n if (top <= this.threshold) {\r\n top = 0;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n #pageEnd(): void {\r\n if (!this.vertical) {\r\n let left = this.scrollContainer.scrollLeft + this.scrollContainer.clientWidth;\r\n if (left >= this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth - this.threshold) {\r\n left = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth;\r\n }\r\n this.scrollContainer.scrollTo({ left, behavior: \"smooth\" });\r\n } else {\r\n let top = this.scrollContainer.scrollTop + this.scrollContainer.clientHeight;\r\n if (top >= this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight - this.threshold) {\r\n top = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;\r\n }\r\n this.scrollContainer.scrollTo({ top, behavior: \"smooth\" });\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _updatePaging(): void {\r\n const canPage = this._canPage;\r\n if (this.disabled) {\r\n this._canPage = false;\r\n } else if (!this.vertical) {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollWidth) > Math.round(this.scrollContainer.clientWidth) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollLeft) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollLeft) + this.threshold <\r\n Math.round(this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth);\r\n }\r\n } else {\r\n this._canPage =\r\n Math.round(this.scrollContainer.scrollHeight) > Math.round(this.scrollContainer.clientHeight) + this.threshold;\r\n if (this._canPage) {\r\n this._canPageStart = Math.round(this.scrollContainer.scrollTop) > this.threshold;\r\n this._canPageEnd =\r\n Math.round(this.scrollContainer.scrollTop) + +this.threshold <\r\n Math.round(this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight);\r\n }\r\n }\r\n\r\n if (!this._canPage) {\r\n this._canPageStart = this._canPageEnd = false;\r\n }\r\n\r\n if (canPage != this._canPage) {\r\n // Emit internal (undocumented) event for use with tabs.\r\n this[\"dispatchEvent\"](new CustomEvent(\"pagination-changed\"));\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-slide-group\": M3eSlideGroupElement;\r\n }\r\n}\r\n"],"names":["M3eSlideGroupElement","ReconnectedCallback","LitElement","constructor","_M3eSlideGroupElement_directionalitySubscription","set","this","_M3eSlideGroupElement_resizeController","ResizeController","target","callback","_updatePaging","_canPage","_canPageStart","_canPageEnd","disabled","vertical","threshold","previousPageLabel","nextPageLabel","connectedCallback","super","__classPrivateFieldSet","M3eDirectionality","observe","requestUpdate","disconnectedCallback","__classPrivateFieldGet","call","reconnectedCallback","scrollContainer","firstUpdated","_changedProperties","render","prevButton","html","_M3eSlideGroupElement_instances","_M3eSlideGroupElement_pageStart","current","nextButton","_M3eSlideGroupElement_pageEnd","nothing","canPage","Math","round","scrollHeight","clientHeight","scrollTop","scrollWidth","clientWidth","scrollLeft","CustomEvent","top","scrollTo","behavior","left","styles","css","__decorate","query","prototype","state","property","type","Boolean","reflect","Number","attribute","debounce","customElement"],"mappings":"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"}
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({