@m3e/web 2.5.12 → 2.5.14

package/dist/skeleton.js

@@ -9,7 +9,8 @@ import { property } from 'lit/decorators.js';
 import { ReconnectedCallback, waitForUpgrade, registerStyleSheet, DesignToken, customElement } from '@m3e/web/core';
 import { positionAnchor } from '@m3e/web/core/anchoring';
 
-var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape;
+var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3eSkeletonElement_handleSlotChange, _M3eSkeletonElement_clearShapes, _M3eSkeletonElement_createShapes, _M3eSkeletonElement_createShape, _M3eSkeletonElement_updateLoading, _M3eSkeletonElement_registerLoading, _M3eSkeletonElement_unregisterLoading;
+var M3eSkeletonElement_1;
 /**
  * A visual placeholder that mimics the layout of content while it's still loading.
  * @description
@@ -46,7 +47,7 @@ var _M3eSkeletonElement_instances, _M3eSkeletonElement_anchoringCleanupMap, _M3e
  * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.
  * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.
  */
-let M3eSkeletonElement = class M3eSkeletonElement extends ReconnectedCallback(LitElement) {
+let M3eSkeletonElement = M3eSkeletonElement_1 = class M3eSkeletonElement extends ReconnectedCallback(LitElement) {
   constructor() {
     super(...arguments);
     _M3eSkeletonElement_instances.add(this);
@@ -72,16 +73,39 @@ let M3eSkeletonElement = class M3eSkeletonElement extends ReconnectedCallback(Li
   disconnectedCallback() {
     super.disconnectedCallback();
     __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
   }
   /** @inheritdoc */
   reconnectedCallback() {
     super.reconnectedCallback();
     __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_updateLoading).call(this);
+  }
+  /** @inheritdoc */
+  willUpdate(_changedProperties) {
+    super.willUpdate(_changedProperties);
+    if (_changedProperties.has("loaded") || _changedProperties.has("animation")) {
+      __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_updateLoading).call(this);
+    }
   }
   /** @inheritdoc */
   render() {
     return html`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
   }
+  /** @private */
+  static __updateAnimations() {
+    const pause = M3eSkeletonElement_1.__forcedColorsMediaQuery.matches || M3eSkeletonElement_1.__reducedMediaQuery.matches;
+    if (M3eSkeletonElement_1.__pulseLoading.size === 0 || pause) {
+      M3eSkeletonElement_1.__pulseAnimation.pause();
+    } else if (M3eSkeletonElement_1.__pulseLoading.size > 0 && M3eSkeletonElement_1.__pulseAnimation.playState === "paused") {
+      M3eSkeletonElement_1.__pulseAnimation.play();
+    }
+    if (M3eSkeletonElement_1.__waveLoading.size === 0 || pause) {
+      M3eSkeletonElement_1.__waveAnimation.pause();
+    } else if (M3eSkeletonElement_1.__waveLoading.size > 0 && M3eSkeletonElement_1.__waveAnimation.playState === "paused") {
+      M3eSkeletonElement_1.__waveAnimation.play();
+    }
+  }
 };
 _M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
 _M3eSkeletonElement_instances = new WeakSet();
@@ -135,52 +159,73 @@ async function _M3eSkeletonElement_createShape(element) {
   __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").set(shape, anchoringCleanup);
   this.shadowRoot?.appendChild(shape);
 };
+_M3eSkeletonElement_updateLoading = function _M3eSkeletonElement_updateLoading() {
+  if (!this.loaded && this.animation !== "none") {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_registerLoading).call(this);
+  } else {
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_unregisterLoading).call(this);
+  }
+};
+_M3eSkeletonElement_registerLoading = function _M3eSkeletonElement_registerLoading() {
+  switch (this.animation) {
+    case "pulse":
+      M3eSkeletonElement_1.__waveLoading.delete(this);
+      if (!M3eSkeletonElement_1.__pulseLoading.has(this)) {
+        M3eSkeletonElement_1.__pulseLoading.add(this);
+        M3eSkeletonElement_1.__updateAnimations();
+      }
+      break;
+    case "wave":
+      M3eSkeletonElement_1.__pulseLoading.delete(this);
+      if (!M3eSkeletonElement_1.__waveLoading.has(this)) {
+        M3eSkeletonElement_1.__waveLoading.add(this);
+        M3eSkeletonElement_1.__updateAnimations();
+      }
+      break;
+  }
+};
+_M3eSkeletonElement_unregisterLoading = function _M3eSkeletonElement_unregisterLoading() {
+  if (M3eSkeletonElement_1.__pulseLoading.delete(this) || M3eSkeletonElement_1.__waveLoading.delete(this)) {
+    M3eSkeletonElement_1.__updateAnimations();
+  }
+};
+/** @private */
+M3eSkeletonElement.__pulseLoading = new Set();
+/** @private */
+M3eSkeletonElement.__waveLoading = new Set();
 (() => {
-  if (window !== undefined) {
+  if (typeof window !== "undefined") {
     registerStyleSheet(css`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);
-    const reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
-    let waveAnimation = null;
-    let pulseAnimation = null;
-    function startAnimations() {
-      waveAnimation = document.documentElement.animate([{
-        ["--_m3e-skeleton-wave-pct"]: 0
-      }, {
-        ["--_m3e-skeleton-wave-pct"]: 1
-      }], {
-        duration: 2100,
-        iterations: Infinity,
-        easing: "linear"
-      });
-      pulseAnimation = document.documentElement.animate([{
-        ["--_m3e-skeleton-pulse-norm"]: 0
-      }, {
-        ["--_m3e-skeleton-pulse-norm"]: 1
-      }, {
-        ["--_m3e-skeleton-pulse-norm"]: 0
-      }], {
-        duration: 1200,
-        iterations: Infinity,
-        easing: "ease-in-out"
-      });
-    }
-    function applyMotionState() {
-      if (reducedMediaQuery.matches || forcedColorsMediaQuery.matches) {
-        waveAnimation?.pause();
-        pulseAnimation?.pause();
-      } else {
-        waveAnimation?.play();
-        pulseAnimation?.play();
-      }
-    }
-    startAnimations();
-    applyMotionState();
-    reducedMediaQuery.addEventListener("change", applyMotionState);
-    forcedColorsMediaQuery.addEventListener("change", applyMotionState);
+    M3eSkeletonElement_1.__waveAnimation = document.documentElement.animate([{
+      ["--_m3e-skeleton-wave-pct"]: 0
+    }, {
+      ["--_m3e-skeleton-wave-pct"]: 1
+    }], {
+      duration: 2100,
+      iterations: Infinity,
+      easing: "linear"
+    });
+    M3eSkeletonElement_1.__pulseAnimation = document.documentElement.animate([{
+      ["--_m3e-skeleton-pulse-norm"]: 0
+    }, {
+      ["--_m3e-skeleton-pulse-norm"]: 1
+    }, {
+      ["--_m3e-skeleton-pulse-norm"]: 0
+    }], {
+      duration: 1200,
+      iterations: Infinity,
+      easing: "ease-in-out"
+    });
+    M3eSkeletonElement_1.__waveAnimation.pause();
+    M3eSkeletonElement_1.__pulseAnimation.pause();
+    M3eSkeletonElement_1.__reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    M3eSkeletonElement_1.__forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
+    M3eSkeletonElement_1.__reducedMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
+    M3eSkeletonElement_1.__forcedColorsMediaQuery.addEventListener("change", () => M3eSkeletonElement_1.__updateAnimations());
   }
 })();
 /** The styles of the element. */
-M3eSkeletonElement.styles = css`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
+M3eSkeletonElement.styles = css`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) { contain: layout style paint; } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
 __decorate([property({
   reflect: true
 })], M3eSkeletonElement.prototype, "shape", void 0);
@@ -191,7 +236,7 @@ __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eSkeletonElement.prototype, "loaded", void 0);
-M3eSkeletonElement = __decorate([customElement("m3e-skeleton")], M3eSkeletonElement);
+M3eSkeletonElement = M3eSkeletonElement_1 = __decorate([customElement("m3e-skeleton")], M3eSkeletonElement);
 
 export { M3eSkeletonElement };
 //# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n *  <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n  static {\r\n    if (window !== undefined) {\r\n      registerStyleSheet(css`\r\n        @property --_m3e-skeleton-wave-pct {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        @property --_m3e-skeleton-pulse-norm {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        :root {\r\n          --_m3e-skeleton-wave-span: 40vw;\r\n          --_m3e-skeleton-pulse-min: 0.06;\r\n        }\r\n      `);\r\n\r\n      const reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n      const forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n\r\n      let waveAnimation: Animation | null = null;\r\n      let pulseAnimation: Animation | null = null;\r\n\r\n      function startAnimations(): void {\r\n        waveAnimation = document.documentElement.animate(\r\n          [{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }],\r\n          {\r\n            duration: 2100,\r\n            iterations: Infinity,\r\n            easing: \"linear\",\r\n          },\r\n        );\r\n\r\n        pulseAnimation = document.documentElement.animate(\r\n          [\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n          ],\r\n          {\r\n            duration: 1200,\r\n            iterations: Infinity,\r\n            easing: \"ease-in-out\",\r\n          },\r\n        );\r\n      }\r\n\r\n      function applyMotionState(): void {\r\n        if (reducedMediaQuery.matches || forcedColorsMediaQuery.matches) {\r\n          waveAnimation?.pause();\r\n          pulseAnimation?.pause();\r\n        } else {\r\n          waveAnimation?.play();\r\n          pulseAnimation?.play();\r\n        }\r\n      }\r\n\r\n      startAnimations();\r\n      applyMotionState();\r\n\r\n      reducedMediaQuery.addEventListener(\"change\", applyMotionState);\r\n      forcedColorsMediaQuery.addEventListener(\"change\", applyMotionState);\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .shape {\r\n      position: absolute;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      opacity: 1;\r\n      background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n    }\r\n    .shape::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([loaded])) slot {\r\n      visibility: hidden;\r\n    }\r\n    :host([loaded]) .shape {\r\n      opacity: 0;\r\n      transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host([shape=\"rounded\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n    }\r\n    :host([shape=\"circular\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n    }\r\n    :host([shape=\"square\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n    }\r\n    :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      opacity: calc(\r\n        var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n          var(--_m3e-skeleton-pulse-norm)\r\n      );\r\n      background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n    }\r\n    :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-image: linear-gradient(\r\n        90deg,\r\n        transparent 0%,\r\n        transparent 35%,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n        transparent 65%,\r\n        transparent 100%\r\n      );\r\n      background-attachment: fixed;\r\n      background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n      background-position-x: calc(\r\n        var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n      );\r\n\r\n      opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n      .shape {\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n  /**\r\n   * The shape of the skeleton.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n  /**\r\n   * The animation effect of the skeleton.\r\n   * @default \"wave\"\r\n   */\r\n  @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n  /**\r\n   * Whether the content of the skeleton has been loaded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#clearShapes();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @private */\r\n  #clearShapes(): void {\r\n    for (const item of this.#anchoringCleanupMap) {\r\n      item[0].remove();\r\n      item[1]();\r\n    }\r\n    this.#anchoringCleanupMap.clear();\r\n  }\r\n\r\n  /** @private */\r\n  async #createShapes(): Promise<void> {\r\n    this.#clearShapes();\r\n\r\n    const slot = this.shadowRoot?.querySelector(\"slot\");\r\n    if (!slot) return;\r\n\r\n    for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n      await this.#createShape(element);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #createShape(element: HTMLElement): Promise<void> {\r\n    await waitForUpgrade(element);\r\n\r\n    const shape = document.createElement(\"div\");\r\n    shape.classList.add(\"shape\");\r\n\r\n    if (this.shape === \"auto\") {\r\n      let borderRadius = getComputedStyle(element).borderRadius;\r\n      if (!borderRadius || borderRadius === \"0px\") {\r\n        const firstElement = element.shadowRoot?.firstElementChild;\r\n        if (firstElement && !firstElement.nextElementSibling) {\r\n          borderRadius = getComputedStyle(firstElement).borderRadius;\r\n        }\r\n      }\r\n\r\n      if (borderRadius && borderRadius !== \"0px\") {\r\n        shape.style.borderRadius = borderRadius;\r\n      }\r\n    }\r\n\r\n    const anchoringCleanup = await positionAnchor(\r\n      shape,\r\n      element,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        shape.style.left = `${x}px`;\r\n        shape.style.top = `${y - element.clientHeight}px`;\r\n        shape.style.width = `${element.clientWidth}px`;\r\n        shape.style.height = `${element.clientHeight}px`;\r\n      },\r\n    );\r\n\r\n    this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n    this.shadowRoot?.appendChild(shape);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-skeleton\": M3eSkeletonElement;\r\n  }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","Map","shape","animation","loaded","disconnectedCallback","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","reconnectedCallback","_M3eSkeletonElement_createShapes","render","html","_M3eSkeletonElement_handleSlotChange","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","window","undefined","registerStyleSheet","css","reducedMediaQuery","matchMedia","forcedColorsMediaQuery","waveAnimation","pulseAnimation","startAnimations","documentElement","animate","duration","iterations","Infinity","easing","applyMotionState","matches","pause","play","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"skeleton.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n *  <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n  /** @private */ private static __pulseLoading = new Set<M3eSkeletonElement>();\r\n  /** @private */ private static __pulseAnimation: Animation;\r\n\r\n  /** @private */ private static __waveLoading = new Set<M3eSkeletonElement>();\r\n  /** @private */ private static __waveAnimation: Animation;\r\n\r\n  /** @private */ private static __reducedMediaQuery: MediaQueryList;\r\n  /** @private */ private static __forcedColorsMediaQuery: MediaQueryList;\r\n\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      registerStyleSheet(css`\r\n        @property --_m3e-skeleton-wave-pct {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        @property --_m3e-skeleton-pulse-norm {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        :root {\r\n          --_m3e-skeleton-wave-span: 40vw;\r\n          --_m3e-skeleton-pulse-min: 0.06;\r\n        }\r\n      `);\r\n\r\n      M3eSkeletonElement.__waveAnimation = document.documentElement.animate(\r\n        [{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }],\r\n        {\r\n          duration: 2100,\r\n          iterations: Infinity,\r\n          easing: \"linear\",\r\n        },\r\n      );\r\n\r\n      M3eSkeletonElement.__pulseAnimation = document.documentElement.animate(\r\n        [\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n        ],\r\n        {\r\n          duration: 1200,\r\n          iterations: Infinity,\r\n          easing: \"ease-in-out\",\r\n        },\r\n      );\r\n\r\n      M3eSkeletonElement.__waveAnimation.pause();\r\n      M3eSkeletonElement.__pulseAnimation.pause();\r\n\r\n      M3eSkeletonElement.__reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n      M3eSkeletonElement.__forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n\r\n      M3eSkeletonElement.__reducedMediaQuery.addEventListener(\"change\", () => M3eSkeletonElement.__updateAnimations());\r\n      M3eSkeletonElement.__forcedColorsMediaQuery.addEventListener(\"change\", () =>\r\n        M3eSkeletonElement.__updateAnimations(),\r\n      );\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .shape {\r\n      position: absolute;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      opacity: 1;\r\n      background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n    }\r\n    .shape::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([loaded])) {\r\n      contain: layout style paint;\r\n    }\r\n    :host(:not([loaded])) slot {\r\n      visibility: hidden;\r\n    }\r\n    :host([loaded]) .shape {\r\n      opacity: 0;\r\n      transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host([shape=\"rounded\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n    }\r\n    :host([shape=\"circular\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n    }\r\n    :host([shape=\"square\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n    }\r\n    :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      opacity: calc(\r\n        var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n          var(--_m3e-skeleton-pulse-norm)\r\n      );\r\n      background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n    }\r\n    :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-image: linear-gradient(\r\n        90deg,\r\n        transparent 0%,\r\n        transparent 35%,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n        transparent 65%,\r\n        transparent 100%\r\n      );\r\n      background-attachment: fixed;\r\n      background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n      background-position-x: calc(\r\n        var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n      );\r\n\r\n      opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n      .shape {\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n  /**\r\n   * The shape of the skeleton.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n  /**\r\n   * The animation effect of the skeleton.\r\n   * @default \"wave\"\r\n   */\r\n  @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n  /**\r\n   * Whether the content of the skeleton has been loaded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#clearShapes();\r\n    this.#unregisterLoading();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#createShapes();\r\n    this.#updateLoading();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"loaded\") || _changedProperties.has(\"animation\")) {\r\n      this.#updateLoading();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @private */\r\n  #clearShapes(): void {\r\n    for (const item of this.#anchoringCleanupMap) {\r\n      item[0].remove();\r\n      item[1]();\r\n    }\r\n    this.#anchoringCleanupMap.clear();\r\n  }\r\n\r\n  /** @private */\r\n  async #createShapes(): Promise<void> {\r\n    this.#clearShapes();\r\n\r\n    const slot = this.shadowRoot?.querySelector(\"slot\");\r\n    if (!slot) return;\r\n\r\n    for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n      await this.#createShape(element);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #createShape(element: HTMLElement): Promise<void> {\r\n    await waitForUpgrade(element);\r\n\r\n    const shape = document.createElement(\"div\");\r\n    shape.classList.add(\"shape\");\r\n\r\n    if (this.shape === \"auto\") {\r\n      let borderRadius = getComputedStyle(element).borderRadius;\r\n      if (!borderRadius || borderRadius === \"0px\") {\r\n        const firstElement = element.shadowRoot?.firstElementChild;\r\n        if (firstElement && !firstElement.nextElementSibling) {\r\n          borderRadius = getComputedStyle(firstElement).borderRadius;\r\n        }\r\n      }\r\n\r\n      if (borderRadius && borderRadius !== \"0px\") {\r\n        shape.style.borderRadius = borderRadius;\r\n      }\r\n    }\r\n\r\n    const anchoringCleanup = await positionAnchor(\r\n      shape,\r\n      element,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        shape.style.left = `${x}px`;\r\n        shape.style.top = `${y - element.clientHeight}px`;\r\n        shape.style.width = `${element.clientWidth}px`;\r\n        shape.style.height = `${element.clientHeight}px`;\r\n      },\r\n    );\r\n\r\n    this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n    this.shadowRoot?.appendChild(shape);\r\n  }\r\n\r\n  /** @private */\r\n  #updateLoading(): void {\r\n    if (!this.loaded && this.animation !== \"none\") {\r\n      this.#registerLoading();\r\n    } else {\r\n      this.#unregisterLoading();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #registerLoading(): void {\r\n    switch (this.animation) {\r\n      case \"pulse\":\r\n        M3eSkeletonElement.__waveLoading.delete(this);\r\n        if (!M3eSkeletonElement.__pulseLoading.has(this)) {\r\n          M3eSkeletonElement.__pulseLoading.add(this);\r\n          M3eSkeletonElement.__updateAnimations();\r\n        }\r\n        break;\r\n\r\n      case \"wave\":\r\n        M3eSkeletonElement.__pulseLoading.delete(this);\r\n        if (!M3eSkeletonElement.__waveLoading.has(this)) {\r\n          M3eSkeletonElement.__waveLoading.add(this);\r\n          M3eSkeletonElement.__updateAnimations();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #unregisterLoading(): void {\r\n    if (M3eSkeletonElement.__pulseLoading.delete(this) || M3eSkeletonElement.__waveLoading.delete(this)) {\r\n      M3eSkeletonElement.__updateAnimations();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  static __updateAnimations(): void {\r\n    const pause = M3eSkeletonElement.__forcedColorsMediaQuery.matches || M3eSkeletonElement.__reducedMediaQuery.matches;\r\n    if (M3eSkeletonElement.__pulseLoading.size === 0 || pause) {\r\n      M3eSkeletonElement.__pulseAnimation.pause();\r\n    } else if (\r\n      M3eSkeletonElement.__pulseLoading.size > 0 &&\r\n      M3eSkeletonElement.__pulseAnimation.playState === \"paused\"\r\n    ) {\r\n      M3eSkeletonElement.__pulseAnimation.play();\r\n    }\r\n\r\n    if (M3eSkeletonElement.__waveLoading.size === 0 || pause) {\r\n      M3eSkeletonElement.__waveAnimation.pause();\r\n    } else if (M3eSkeletonElement.__waveLoading.size > 0 && M3eSkeletonElement.__waveAnimation.playState === \"paused\") {\r\n      M3eSkeletonElement.__waveAnimation.play();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-skeleton\": M3eSkeletonElement;\r\n  }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","Map","shape","animation","loaded","disconnectedCallback","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","_M3eSkeletonElement_unregisterLoading","reconnectedCallback","_M3eSkeletonElement_createShapes","_M3eSkeletonElement_updateLoading","willUpdate","_changedProperties","has","render","html","_M3eSkeletonElement_handleSlotChange","__updateAnimations","pause","M3eSkeletonElement_1","__forcedColorsMediaQuery","matches","__reducedMediaQuery","__pulseLoading","size","__pulseAnimation","playState","play","__waveLoading","__waveAnimation","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","_M3eSkeletonElement_registerLoading","delete","Set","window","registerStyleSheet","css","documentElement","animate","duration","iterations","Infinity","easing","matchMedia","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}

package/dist/skeleton.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as o,html as a,css as n,unsafeCSS as s}from"lit";import{property as i}from"lit/decorators.js";import{ReconnectedCallback as r,waitForUpgrade as l,registerStyleSheet as c,DesignToken as d,customElement as p}from"@m3e/web/core";import{positionAnchor as h}from"@m3e/web/core/anchoring";var m,u,f,v,k,y;let w=class extends(r(o)){constructor(){super(...arguments),m.add(this),u.set(this,new Map),this.shape="auto",this.animation="wave",this.loaded=!1}disconnectedCallback(){super.disconnectedCallback(),e(this,m,"m",v).call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"m",k).call(this)}render(){return a`<slot ?inert="${!this.loaded}" @slotchange="${e(this,m,"m",f)}"></slot>`}};u=new WeakMap,m=new WeakSet,f=async function(){e(this,m,"m",k).call(this)},v=function(){for(const t of e(this,u,"f"))t[0].remove(),t[1]();e(this,u,"f").clear()},k=async function(){e(this,m,"m",v).call(this);const t=this.shadowRoot?.querySelector("slot");if(t)for(const o of t.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement))await e(this,m,"m",y).call(this,o)},y=async function(t){await l(t);const o=document.createElement("div");if(o.classList.add("shape"),"auto"===this.shape){let e=getComputedStyle(t).borderRadius;if(!e||"0px"===e){const o=t.shadowRoot?.firstElementChild;o&&!o.nextElementSibling&&(e=getComputedStyle(o).borderRadius)}e&&"0px"!==e&&(o.style.borderRadius=e)}const a=await h(o,t,{position:"bottom"},(e,a)=>{o.style.left=`${e}px`,o.style.top=a-t.clientHeight+"px",o.style.width=`${t.clientWidth}px`,o.style.height=`${t.clientHeight}px`});e(this,u,"f").set(o,a),this.shadowRoot?.appendChild(o)},(()=>{if(void 0!==window){c(n`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);const e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=window.matchMedia("(forced-colors: active)");let o=null,a=null;function s(){o=document.documentElement.animate([{"--_m3e-skeleton-wave-pct":0},{"--_m3e-skeleton-wave-pct":1}],{duration:2100,iterations:1/0,easing:"linear"}),a=document.documentElement.animate([{"--_m3e-skeleton-pulse-norm":0},{"--_m3e-skeleton-pulse-norm":1},{"--_m3e-skeleton-pulse-norm":0}],{duration:1200,iterations:1/0,easing:"ease-in-out"})}function i(){e.matches||t.matches?(o?.pause(),a?.pause()):(o?.play(),a?.play())}s(),i(),e.addEventListener("change",i),t.addEventListener("change",i)}})(),w.styles=n`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${d.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${d.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${s(`opacity ${d.motion.duration.short3} ${d.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${d.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${d.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${d.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${d.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`,t([i({reflect:!0})],w.prototype,"shape",void 0),t([i({reflect:!0})],w.prototype,"animation",void 0),t([i({type:Boolean,reflect:!0})],w.prototype,"loaded",void 0),w=t([p("m3e-skeleton")],w);export{w as M3eSkeletonElement};
+import{__classPrivateFieldGet as e,__decorate as t}from"tslib";import{LitElement as a,html as o,css as n,unsafeCSS as i}from"lit";import{property as s}from"lit/decorators.js";import{ReconnectedCallback as r,waitForUpgrade as l,registerStyleSheet as d,DesignToken as c,customElement as p}from"@m3e/web/core";import{positionAnchor as h}from"@m3e/web/core/anchoring";var m,u,_,v,f,w,y,g,k,b;let L=b=class extends(r(a)){constructor(){super(...arguments),m.add(this),u.set(this,new Map),this.shape="auto",this.animation="wave",this.loaded=!1}disconnectedCallback(){super.disconnectedCallback(),e(this,m,"m",v).call(this),e(this,m,"m",k).call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,m,"m",f).call(this),e(this,m,"m",y).call(this)}willUpdate(t){super.willUpdate(t),(t.has("loaded")||t.has("animation"))&&e(this,m,"m",y).call(this)}render(){return o`<slot ?inert="${!this.loaded}" @slotchange="${e(this,m,"m",_)}"></slot>`}static __updateAnimations(){const e=b.__forcedColorsMediaQuery.matches||b.__reducedMediaQuery.matches;0===b.__pulseLoading.size||e?b.__pulseAnimation.pause():b.__pulseLoading.size>0&&"paused"===b.__pulseAnimation.playState&&b.__pulseAnimation.play(),0===b.__waveLoading.size||e?b.__waveAnimation.pause():b.__waveLoading.size>0&&"paused"===b.__waveAnimation.playState&&b.__waveAnimation.play()}};u=new WeakMap,m=new WeakSet,_=async function(){e(this,m,"m",f).call(this)},v=function(){for(const t of e(this,u,"f"))t[0].remove(),t[1]();e(this,u,"f").clear()},f=async function(){e(this,m,"m",v).call(this);const t=this.shadowRoot?.querySelector("slot");if(t)for(const a of t.assignedElements({flatten:!0}).filter(e=>e instanceof HTMLElement))await e(this,m,"m",w).call(this,a)},w=async function(t){await l(t);const a=document.createElement("div");if(a.classList.add("shape"),"auto"===this.shape){let e=getComputedStyle(t).borderRadius;if(!e||"0px"===e){const a=t.shadowRoot?.firstElementChild;a&&!a.nextElementSibling&&(e=getComputedStyle(a).borderRadius)}e&&"0px"!==e&&(a.style.borderRadius=e)}const o=await h(a,t,{position:"bottom"},(e,o)=>{a.style.left=`${e}px`,a.style.top=o-t.clientHeight+"px",a.style.width=`${t.clientWidth}px`,a.style.height=`${t.clientHeight}px`});e(this,u,"f").set(a,o),this.shadowRoot?.appendChild(a)},y=function(){this.loaded||"none"===this.animation?e(this,m,"m",k).call(this):e(this,m,"m",g).call(this)},g=function(){switch(this.animation){case"pulse":b.__waveLoading.delete(this),b.__pulseLoading.has(this)||(b.__pulseLoading.add(this),b.__updateAnimations());break;case"wave":b.__pulseLoading.delete(this),b.__waveLoading.has(this)||(b.__waveLoading.add(this),b.__updateAnimations())}},k=function(){(b.__pulseLoading.delete(this)||b.__waveLoading.delete(this))&&b.__updateAnimations()},L.__pulseLoading=new Set,L.__waveLoading=new Set,"undefined"!=typeof window&&(d(n`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`),b.__waveAnimation=document.documentElement.animate([{"--_m3e-skeleton-wave-pct":0},{"--_m3e-skeleton-wave-pct":1}],{duration:2100,iterations:1/0,easing:"linear"}),b.__pulseAnimation=document.documentElement.animate([{"--_m3e-skeleton-pulse-norm":0},{"--_m3e-skeleton-pulse-norm":1},{"--_m3e-skeleton-pulse-norm":0}],{duration:1200,iterations:1/0,easing:"ease-in-out"}),b.__waveAnimation.pause(),b.__pulseAnimation.pause(),b.__reducedMediaQuery=window.matchMedia("(prefers-reduced-motion: reduce)"),b.__forcedColorsMediaQuery=window.matchMedia("(forced-colors: active)"),b.__reducedMediaQuery.addEventListener("change",()=>b.__updateAnimations()),b.__forcedColorsMediaQuery.addEventListener("change",()=>b.__updateAnimations())),L.styles=n`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${c.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${c.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) { contain: layout style paint; } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${i(`opacity ${c.motion.duration.short3} ${c.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${c.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${c.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${c.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${c.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`,t([s({reflect:!0})],L.prototype,"shape",void 0),t([s({reflect:!0})],L.prototype,"animation",void 0),t([s({type:Boolean,reflect:!0})],L.prototype,"loaded",void 0),L=b=t([p("m3e-skeleton")],L);export{L as M3eSkeletonElement};
 //# sourceMappingURL=skeleton.min.js.map

package/dist/skeleton.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.min.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n *  <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n  static {\r\n    if (window !== undefined) {\r\n      registerStyleSheet(css`\r\n        @property --_m3e-skeleton-wave-pct {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        @property --_m3e-skeleton-pulse-norm {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        :root {\r\n          --_m3e-skeleton-wave-span: 40vw;\r\n          --_m3e-skeleton-pulse-min: 0.06;\r\n        }\r\n      `);\r\n\r\n      const reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n      const forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n\r\n      let waveAnimation: Animation | null = null;\r\n      let pulseAnimation: Animation | null = null;\r\n\r\n      function startAnimations(): void {\r\n        waveAnimation = document.documentElement.animate(\r\n          [{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }],\r\n          {\r\n            duration: 2100,\r\n            iterations: Infinity,\r\n            easing: \"linear\",\r\n          },\r\n        );\r\n\r\n        pulseAnimation = document.documentElement.animate(\r\n          [\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n            { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n          ],\r\n          {\r\n            duration: 1200,\r\n            iterations: Infinity,\r\n            easing: \"ease-in-out\",\r\n          },\r\n        );\r\n      }\r\n\r\n      function applyMotionState(): void {\r\n        if (reducedMediaQuery.matches || forcedColorsMediaQuery.matches) {\r\n          waveAnimation?.pause();\r\n          pulseAnimation?.pause();\r\n        } else {\r\n          waveAnimation?.play();\r\n          pulseAnimation?.play();\r\n        }\r\n      }\r\n\r\n      startAnimations();\r\n      applyMotionState();\r\n\r\n      reducedMediaQuery.addEventListener(\"change\", applyMotionState);\r\n      forcedColorsMediaQuery.addEventListener(\"change\", applyMotionState);\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .shape {\r\n      position: absolute;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      opacity: 1;\r\n      background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n    }\r\n    .shape::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([loaded])) slot {\r\n      visibility: hidden;\r\n    }\r\n    :host([loaded]) .shape {\r\n      opacity: 0;\r\n      transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host([shape=\"rounded\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n    }\r\n    :host([shape=\"circular\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n    }\r\n    :host([shape=\"square\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n    }\r\n    :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      opacity: calc(\r\n        var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n          var(--_m3e-skeleton-pulse-norm)\r\n      );\r\n      background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n    }\r\n    :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-image: linear-gradient(\r\n        90deg,\r\n        transparent 0%,\r\n        transparent 35%,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n        transparent 65%,\r\n        transparent 100%\r\n      );\r\n      background-attachment: fixed;\r\n      background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n      background-position-x: calc(\r\n        var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n      );\r\n\r\n      opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n      .shape {\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n  /**\r\n   * The shape of the skeleton.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n  /**\r\n   * The animation effect of the skeleton.\r\n   * @default \"wave\"\r\n   */\r\n  @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n  /**\r\n   * Whether the content of the skeleton has been loaded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#clearShapes();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @private */\r\n  #clearShapes(): void {\r\n    for (const item of this.#anchoringCleanupMap) {\r\n      item[0].remove();\r\n      item[1]();\r\n    }\r\n    this.#anchoringCleanupMap.clear();\r\n  }\r\n\r\n  /** @private */\r\n  async #createShapes(): Promise<void> {\r\n    this.#clearShapes();\r\n\r\n    const slot = this.shadowRoot?.querySelector(\"slot\");\r\n    if (!slot) return;\r\n\r\n    for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n      await this.#createShape(element);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #createShape(element: HTMLElement): Promise<void> {\r\n    await waitForUpgrade(element);\r\n\r\n    const shape = document.createElement(\"div\");\r\n    shape.classList.add(\"shape\");\r\n\r\n    if (this.shape === \"auto\") {\r\n      let borderRadius = getComputedStyle(element).borderRadius;\r\n      if (!borderRadius || borderRadius === \"0px\") {\r\n        const firstElement = element.shadowRoot?.firstElementChild;\r\n        if (firstElement && !firstElement.nextElementSibling) {\r\n          borderRadius = getComputedStyle(firstElement).borderRadius;\r\n        }\r\n      }\r\n\r\n      if (borderRadius && borderRadius !== \"0px\") {\r\n        shape.style.borderRadius = borderRadius;\r\n      }\r\n    }\r\n\r\n    const anchoringCleanup = await positionAnchor(\r\n      shape,\r\n      element,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        shape.style.left = `${x}px`;\r\n        shape.style.top = `${y - element.clientHeight}px`;\r\n        shape.style.width = `${element.clientWidth}px`;\r\n        shape.style.height = `${element.clientHeight}px`;\r\n      },\r\n    );\r\n\r\n    this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n    this.shadowRoot?.appendChild(shape);\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-skeleton\": M3eSkeletonElement;\r\n  }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","this","Map","shape","animation","loaded","disconnectedCallback","super","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","reconnectedCallback","_M3eSkeletonElement_createShapes","render","html","_M3eSkeletonElement_handleSlotChange","async","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","undefined","window","registerStyleSheet","css","reducedMediaQuery","matchMedia","forcedColorsMediaQuery","waveAnimation","pulseAnimation","startAnimations","documentElement","animate","duration","iterations","Infinity","easing","applyMotionState","matches","pause","play","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}
+{"version":3,"file":"skeleton.min.js","sources":["../../src/skeleton/SkeletonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, ReconnectedCallback, registerStyleSheet, waitForUpgrade } from \"@m3e/web/core\";\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\n\r\nimport { SkeletonShape } from \"./SkeletonShape\";\r\nimport { SkeletonAnimation } from \"./SkeletonAnimation\";\r\n\r\n/**\r\n * A visual placeholder that mimics the layout of content while it's still loading.\r\n * @description\r\n * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and\r\n * motion-based animations that communicate loading state while preserving layout stability. It mimics\r\n * the layout of content while it's still loading, ensuring a smooth user experience during data fetching\r\n * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and\r\n * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the\r\n * content is loaded, the skeleton fades out with a smooth transition.\r\n *\r\n * @example\r\n * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.\r\n * ```html\r\n * <m3e-skeleton>\r\n *  <m3e-card></m3e-card>\r\n * </m3e-skeleton>\r\n * ```\r\n *\r\n * @tag m3e-skeleton\r\n *\r\n * @attr animation - The animation effect of the skeleton.\r\n * @attr shape - The shape of the skeleton.\r\n * @attr loaded - Whether the content of the skeleton has been loaded.\r\n *\r\n * @slot - Renders the content to be mimicked by the skeleton.\r\n *\r\n * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.\r\n * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.\r\n * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.\r\n * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.\r\n * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.\r\n * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.\r\n * @cssprop --m3e-skeleton-square-shape - Corner radius for the square skeleton shape.\r\n * @cssprop --m3e-skeleton-shape - Corner radius for the skeleton shape.\r\n */\r\n@customElement(\"m3e-skeleton\")\r\nexport class M3eSkeletonElement extends ReconnectedCallback(LitElement) {\r\n  /** @private */ private static __pulseLoading = new Set<M3eSkeletonElement>();\r\n  /** @private */ private static __pulseAnimation: Animation;\r\n\r\n  /** @private */ private static __waveLoading = new Set<M3eSkeletonElement>();\r\n  /** @private */ private static __waveAnimation: Animation;\r\n\r\n  /** @private */ private static __reducedMediaQuery: MediaQueryList;\r\n  /** @private */ private static __forcedColorsMediaQuery: MediaQueryList;\r\n\r\n  static {\r\n    if (typeof window !== \"undefined\") {\r\n      registerStyleSheet(css`\r\n        @property --_m3e-skeleton-wave-pct {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        @property --_m3e-skeleton-pulse-norm {\r\n          syntax: \"<number>\";\r\n          inherits: true;\r\n          initial-value: 0;\r\n        }\r\n        :root {\r\n          --_m3e-skeleton-wave-span: 40vw;\r\n          --_m3e-skeleton-pulse-min: 0.06;\r\n        }\r\n      `);\r\n\r\n      M3eSkeletonElement.__waveAnimation = document.documentElement.animate(\r\n        [{ [\"--_m3e-skeleton-wave-pct\"]: 0 }, { [\"--_m3e-skeleton-wave-pct\"]: 1 }],\r\n        {\r\n          duration: 2100,\r\n          iterations: Infinity,\r\n          easing: \"linear\",\r\n        },\r\n      );\r\n\r\n      M3eSkeletonElement.__pulseAnimation = document.documentElement.animate(\r\n        [\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 1 },\r\n          { [\"--_m3e-skeleton-pulse-norm\"]: 0 },\r\n        ],\r\n        {\r\n          duration: 1200,\r\n          iterations: Infinity,\r\n          easing: \"ease-in-out\",\r\n        },\r\n      );\r\n\r\n      M3eSkeletonElement.__waveAnimation.pause();\r\n      M3eSkeletonElement.__pulseAnimation.pause();\r\n\r\n      M3eSkeletonElement.__reducedMediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\r\n      M3eSkeletonElement.__forcedColorsMediaQuery = window.matchMedia(\"(forced-colors: active)\");\r\n\r\n      M3eSkeletonElement.__reducedMediaQuery.addEventListener(\"change\", () => M3eSkeletonElement.__updateAnimations());\r\n      M3eSkeletonElement.__forcedColorsMediaQuery.addEventListener(\"change\", () =>\r\n        M3eSkeletonElement.__updateAnimations(),\r\n      );\r\n    }\r\n  }\r\n\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: contents;\r\n    }\r\n    .shape {\r\n      position: absolute;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      opacity: 1;\r\n      background-color: var(--m3e-skeleton-color, ${DesignToken.color.surface});\r\n    }\r\n    .shape::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-skeleton-tint-color, ${DesignToken.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:not([loaded])) {\r\n      contain: layout style paint;\r\n    }\r\n    :host(:not([loaded])) slot {\r\n      visibility: hidden;\r\n    }\r\n    :host([loaded]) .shape {\r\n      opacity: 0;\r\n      transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host([shape=\"rounded\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.large}));\r\n    }\r\n    :host([shape=\"circular\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken.shape.corner.full}));\r\n    }\r\n    :host([shape=\"square\"]) .shape {\r\n      border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px));\r\n    }\r\n    :host([animation=\"pulse\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      opacity: calc(\r\n        var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) *\r\n          var(--_m3e-skeleton-pulse-norm)\r\n      );\r\n      background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim});\r\n    }\r\n    :host([animation=\"wave\"]:not([loaded])) .shape::after {\r\n      content: \"\";\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-image: linear-gradient(\r\n        90deg,\r\n        transparent 0%,\r\n        transparent 35%,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}) 50%,\r\n        transparent 65%,\r\n        transparent 100%\r\n      );\r\n      background-attachment: fixed;\r\n      background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%;\r\n      background-position-x: calc(\r\n        var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span)\r\n      );\r\n\r\n      opacity: var(--m3e-skeleton-accent-opacity, 0.06);\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n      .shape {\r\n        background-color: GrayText;\r\n      }\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      :host([loaded]) .shape {\r\n        transition: none;\r\n      }\r\n      .shape::after {\r\n        display: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #anchoringCleanupMap = new Map<HTMLElement, () => void>();\r\n\r\n  /**\r\n   * The shape of the skeleton.\r\n   * @default \"auto\"\r\n   */\r\n  @property({ reflect: true }) shape: SkeletonShape = \"auto\";\r\n\r\n  /**\r\n   * The animation effect of the skeleton.\r\n   * @default \"wave\"\r\n   */\r\n  @property({ reflect: true }) animation: SkeletonAnimation = \"wave\";\r\n\r\n  /**\r\n   * Whether the content of the skeleton has been loaded.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean, reflect: true }) loaded = false;\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#clearShapes();\r\n    this.#unregisterLoading();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override reconnectedCallback(): void {\r\n    super.reconnectedCallback();\r\n    this.#createShapes();\r\n    this.#updateLoading();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override willUpdate(_changedProperties: PropertyValues<this>): void {\r\n    super.willUpdate(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"loaded\") || _changedProperties.has(\"animation\")) {\r\n      this.#updateLoading();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot ?inert=\"${!this.loaded}\" @slotchange=\"${this.#handleSlotChange}\"></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  async #handleSlotChange(): Promise<void> {\r\n    this.#createShapes();\r\n  }\r\n\r\n  /** @private */\r\n  #clearShapes(): void {\r\n    for (const item of this.#anchoringCleanupMap) {\r\n      item[0].remove();\r\n      item[1]();\r\n    }\r\n    this.#anchoringCleanupMap.clear();\r\n  }\r\n\r\n  /** @private */\r\n  async #createShapes(): Promise<void> {\r\n    this.#clearShapes();\r\n\r\n    const slot = this.shadowRoot?.querySelector(\"slot\");\r\n    if (!slot) return;\r\n\r\n    for (const element of slot.assignedElements({ flatten: true }).filter((x) => x instanceof HTMLElement)) {\r\n      await this.#createShape(element);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  async #createShape(element: HTMLElement): Promise<void> {\r\n    await waitForUpgrade(element);\r\n\r\n    const shape = document.createElement(\"div\");\r\n    shape.classList.add(\"shape\");\r\n\r\n    if (this.shape === \"auto\") {\r\n      let borderRadius = getComputedStyle(element).borderRadius;\r\n      if (!borderRadius || borderRadius === \"0px\") {\r\n        const firstElement = element.shadowRoot?.firstElementChild;\r\n        if (firstElement && !firstElement.nextElementSibling) {\r\n          borderRadius = getComputedStyle(firstElement).borderRadius;\r\n        }\r\n      }\r\n\r\n      if (borderRadius && borderRadius !== \"0px\") {\r\n        shape.style.borderRadius = borderRadius;\r\n      }\r\n    }\r\n\r\n    const anchoringCleanup = await positionAnchor(\r\n      shape,\r\n      element,\r\n      {\r\n        position: \"bottom\",\r\n      },\r\n      (x, y) => {\r\n        shape.style.left = `${x}px`;\r\n        shape.style.top = `${y - element.clientHeight}px`;\r\n        shape.style.width = `${element.clientWidth}px`;\r\n        shape.style.height = `${element.clientHeight}px`;\r\n      },\r\n    );\r\n\r\n    this.#anchoringCleanupMap.set(shape, anchoringCleanup);\r\n    this.shadowRoot?.appendChild(shape);\r\n  }\r\n\r\n  /** @private */\r\n  #updateLoading(): void {\r\n    if (!this.loaded && this.animation !== \"none\") {\r\n      this.#registerLoading();\r\n    } else {\r\n      this.#unregisterLoading();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #registerLoading(): void {\r\n    switch (this.animation) {\r\n      case \"pulse\":\r\n        M3eSkeletonElement.__waveLoading.delete(this);\r\n        if (!M3eSkeletonElement.__pulseLoading.has(this)) {\r\n          M3eSkeletonElement.__pulseLoading.add(this);\r\n          M3eSkeletonElement.__updateAnimations();\r\n        }\r\n        break;\r\n\r\n      case \"wave\":\r\n        M3eSkeletonElement.__pulseLoading.delete(this);\r\n        if (!M3eSkeletonElement.__waveLoading.has(this)) {\r\n          M3eSkeletonElement.__waveLoading.add(this);\r\n          M3eSkeletonElement.__updateAnimations();\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #unregisterLoading(): void {\r\n    if (M3eSkeletonElement.__pulseLoading.delete(this) || M3eSkeletonElement.__waveLoading.delete(this)) {\r\n      M3eSkeletonElement.__updateAnimations();\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  static __updateAnimations(): void {\r\n    const pause = M3eSkeletonElement.__forcedColorsMediaQuery.matches || M3eSkeletonElement.__reducedMediaQuery.matches;\r\n    if (M3eSkeletonElement.__pulseLoading.size === 0 || pause) {\r\n      M3eSkeletonElement.__pulseAnimation.pause();\r\n    } else if (\r\n      M3eSkeletonElement.__pulseLoading.size > 0 &&\r\n      M3eSkeletonElement.__pulseAnimation.playState === \"paused\"\r\n    ) {\r\n      M3eSkeletonElement.__pulseAnimation.play();\r\n    }\r\n\r\n    if (M3eSkeletonElement.__waveLoading.size === 0 || pause) {\r\n      M3eSkeletonElement.__waveAnimation.pause();\r\n    } else if (M3eSkeletonElement.__waveLoading.size > 0 && M3eSkeletonElement.__waveAnimation.playState === \"paused\") {\r\n      M3eSkeletonElement.__waveAnimation.play();\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-skeleton\": M3eSkeletonElement;\r\n  }\r\n}\r\n"],"names":["M3eSkeletonElement","ReconnectedCallback","LitElement","constructor","_M3eSkeletonElement_anchoringCleanupMap","set","this","Map","shape","animation","loaded","disconnectedCallback","super","__classPrivateFieldGet","_M3eSkeletonElement_instances","_M3eSkeletonElement_clearShapes","call","_M3eSkeletonElement_unregisterLoading","reconnectedCallback","_M3eSkeletonElement_createShapes","_M3eSkeletonElement_updateLoading","willUpdate","_changedProperties","has","render","html","_M3eSkeletonElement_handleSlotChange","__updateAnimations","pause","M3eSkeletonElement_1","__forcedColorsMediaQuery","matches","__reducedMediaQuery","__pulseLoading","size","__pulseAnimation","playState","play","__waveLoading","__waveAnimation","async","item","remove","clear","slot","shadowRoot","querySelector","element","assignedElements","flatten","filter","x","HTMLElement","_M3eSkeletonElement_createShape","waitForUpgrade","document","createElement","classList","add","borderRadius","getComputedStyle","firstElement","firstElementChild","nextElementSibling","style","anchoringCleanup","positionAnchor","position","y","left","top","clientHeight","width","clientWidth","height","appendChild","_M3eSkeletonElement_registerLoading","delete","Set","window","registerStyleSheet","css","documentElement","animate","duration","iterations","Infinity","easing","matchMedia","addEventListener","styles","DesignToken","color","surface","onSurface","unsafeCSS","motion","short3","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}

package/dist/slide-group.js

@@ -192,7 +192,7 @@ _M3eSlideGroupElement_pageEnd = function _M3eSlideGroupElement_pageEnd() {
   }
 };
 /** The styles of the element. */
-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; }`;
+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 { contain: layout style; 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; }`;
 __decorate([query(".content")], M3eSlideGroupElement.prototype, "scrollContainer", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPage", void 0);
 __decorate([state()], M3eSlideGroupElement.prototype, "_canPageStart", void 0);

package/dist/slide-group.js.map

@@ -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    }\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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"}
+{"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      contain: layout style;\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

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-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};
+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 { contain: layout style; 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};
 //# sourceMappingURL=slide-group.min.js.map