@m3e/web 2.2.1 → 2.3.0

package/dist/skeleton.js

@@ -0,0 +1,153 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 matraic
+ * See LICENSE file in the project root for full license text.
+ */
+import { __classPrivateFieldGet, __decorate } from 'tslib';
+import { LitElement, html, unsafeCSS, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ReconnectedCallback, waitForUpgrade, 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;
+/**
+ * A visual placeholder that mimics the layout of content while it's still loading.
+ * @description
+ * The `m3e-skeleton` component provides a loading placeholder surface with flexible shape variants and
+ * motion-based animations that communicate loading state while preserving layout stability. It mimics
+ * the layout of content while it's still loading, ensuring a smooth user experience during data fetching
+ * or rendering delays. The component supports different animation effects (`pulse`, `wave`, `none`) and
+ * shape variants (`circular`, `rounded`, `square`, `auto`) to adapt to various content types. When the
+ * content is loaded, the skeleton fades out with a smooth transition.
+ *
+ * @example
+ * The following example illustrates a skeleton shaped and sized by the slotted `m3e-card`.
+ * ```html
+ * <m3e-skeleton>
+ *  <m3e-card></m3e-card>
+ * </m3e-skeleton>
+ * ```
+ *
+ * @tag m3e-skeleton
+ *
+ * @attr animation - The animation effect of the skeleton.
+ * @attr shape - The shape of the skeleton.
+ * @attr loaded - Whether the content of the skeleton has been loaded.
+ *
+ * @slot - Renders the content to be mimicked by the skeleton.
+ *
+ * @cssprop --m3e-skeleton-color - Base fill color for the skeleton surface.
+ * @cssprop --m3e-skeleton-tint-color - Tint fill color for the skeleton surface.
+ * @cssprop --m3e-skeleton-tint-opacity - Tint Opacity applied when the skeleton animation is not pulsating.
+ * @cssprop --m3e-skeleton-accent-color - Accent color used in wave animation.
+ * @cssprop --m3e-skeleton-accent-opacity - Opacity of the accent effect in animations.
+ * @cssprop --m3e-skeleton-rounded-shape - Corner radius for the rounded skeleton shape.
+ * @cssprop --m3e-skeleton-circular-shape - Corner radius for the circular skeleton shape.
+ * @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) {
+  constructor() {
+    super(...arguments);
+    _M3eSkeletonElement_instances.add(this);
+    /** @private */
+    _M3eSkeletonElement_anchoringCleanupMap.set(this, new Map());
+    /**
+     * The shape of the skeleton.
+     * @default "auto"
+     */
+    this.shape = "auto";
+    /**
+     * The animation effect of the skeleton.
+     * @default "wave"
+     */
+    this.animation = "wave";
+    /**
+     * Whether the content of the skeleton has been loaded.
+     * @default false
+     */
+    this.loaded = false;
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+  }
+  /** @inheritdoc */
+  reconnectedCallback() {
+    super.reconnectedCallback();
+    __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<slot ?inert="${!this.loaded}" @slotchange="${__classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_handleSlotChange)}"></slot>`;
+  }
+};
+_M3eSkeletonElement_anchoringCleanupMap = new WeakMap();
+_M3eSkeletonElement_instances = new WeakSet();
+_M3eSkeletonElement_handleSlotChange = /** @private */
+async function _M3eSkeletonElement_handleSlotChange() {
+  __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShapes).call(this);
+};
+_M3eSkeletonElement_clearShapes = function _M3eSkeletonElement_clearShapes() {
+  for (const item of __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f")) {
+    item[0].remove();
+    item[1]();
+  }
+  __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").clear();
+};
+_M3eSkeletonElement_createShapes = /** @private */
+async function _M3eSkeletonElement_createShapes() {
+  __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_clearShapes).call(this);
+  const slot = this.shadowRoot?.querySelector("slot");
+  if (!slot) return;
+  for (const element of slot.assignedElements({
+    flatten: true
+  }).filter(x => x instanceof HTMLElement)) {
+    await __classPrivateFieldGet(this, _M3eSkeletonElement_instances, "m", _M3eSkeletonElement_createShape).call(this, element);
+  }
+};
+_M3eSkeletonElement_createShape = /** @private */
+async function _M3eSkeletonElement_createShape(element) {
+  await waitForUpgrade(element);
+  const shape = document.createElement("div");
+  shape.classList.add("shape");
+  if (this.shape === "auto") {
+    let borderRadius = getComputedStyle(element).borderRadius;
+    if (!borderRadius || borderRadius === "0px") {
+      const firstElement = element.shadowRoot?.firstElementChild;
+      if (firstElement && !firstElement.nextElementSibling) {
+        borderRadius = getComputedStyle(firstElement).borderRadius;
+      }
+    }
+    if (borderRadius && borderRadius !== "0px") {
+      shape.style.borderRadius = borderRadius;
+    }
+  }
+  const anchoringCleanup = await positionAnchor(shape, element, {
+    position: "bottom"
+  }, (x, y) => {
+    shape.style.left = `${x}px`;
+    shape.style.top = `${y - element.clientHeight}px`;
+    shape.style.width = `${element.clientWidth}px`;
+    shape.style.height = `${element.clientHeight}px`;
+  });
+  __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").set(shape, anchoringCleanup);
+  this.shadowRoot?.appendChild(shape);
+};
+/** 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%; animation: pulse 1.2s ease-in-out infinite; background-color: var(--m3e-skeleton-tint-color, ${DesignToken.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; opacity: var(--m3e-skeleton-accent-opacity, 6%); background: linear-gradient( 90deg, transparent, var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}), transparent ); animation: wave 2.1s linear infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: var(--m3e-skeleton-accent-opacity, 6%); } 100% { opacity: 1; } } @keyframes wave { 0% { left: -150%; } 100% { left: 100%; } } @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);
+__decorate([property({
+  reflect: true
+})], M3eSkeletonElement.prototype, "animation", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eSkeletonElement.prototype, "loaded", void 0);
+M3eSkeletonElement = __decorate([customElement("m3e-skeleton")], M3eSkeletonElement);
+
+export { M3eSkeletonElement };
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +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, 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  /** 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      animation: pulse 1.2s ease-in-out infinite;\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: -150%;\r\n      height: 100%;\r\n      width: 150%;\r\n      opacity: var(--m3e-skeleton-accent-opacity, 6%);\r\n      background: linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}),\r\n        transparent\r\n      );\r\n      animation: wave 2.1s linear infinite;\r\n    }\r\n    @keyframes pulse {\r\n      0% {\r\n        opacity: 1;\r\n      }\r\n      50% {\r\n        opacity: var(--m3e-skeleton-accent-opacity, 6%);\r\n      }\r\n      100% {\r\n        opacity: 1;\r\n      }\r\n    }\r\n    @keyframes wave {\r\n      0% {\r\n        left: -150%;\r\n      }\r\n      100% {\r\n        left: 100%;\r\n      }\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","styles","css","DesignToken","color","surface","onSurface","unsafeCSS","motion","duration","short3","easing","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"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"}

package/dist/skeleton.min.js

@@ -0,0 +1,7 @@
+/**
+ * @license MIT
+ * Copyright (c) 2025 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,unsafeCSS as s,css as n}from"lit";import{property as i}from"lit/decorators.js";import{ReconnectedCallback as r,waitForUpgrade as l,DesignToken as c,customElement as d}from"@m3e/web/core";import{positionAnchor as p}from"@m3e/web/core/anchoring";var h,m,f,u,y,b;let k=class extends(r(o)){constructor(){super(...arguments),h.add(this),m.set(this,new Map),this.shape="auto",this.animation="wave",this.loaded=!1}disconnectedCallback(){super.disconnectedCallback(),e(this,h,"m",u).call(this)}reconnectedCallback(){super.reconnectedCallback(),e(this,h,"m",y).call(this)}render(){return a`<slot ?inert="${!this.loaded}" @slotchange="${e(this,h,"m",f)}"></slot>`}};m=new WeakMap,h=new WeakSet,f=async function(){e(this,h,"m",y).call(this)},u=function(){for(const t of e(this,m,"f"))t[0].remove(),t[1]();e(this,m,"f").clear()},y=async function(){e(this,h,"m",u).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,h,"m",b).call(this,o)},b=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 p(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,m,"f").set(o,a),this.shadowRoot?.appendChild(o)},k.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])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${s(`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%; animation: pulse 1.2s ease-in-out infinite; background-color: var(--m3e-skeleton-tint-color, ${c.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; opacity: var(--m3e-skeleton-accent-opacity, 6%); background: linear-gradient( 90deg, transparent, var(--m3e-skeleton-accent-color, ${c.color.onSurface}), transparent ); animation: wave 2.1s linear infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: var(--m3e-skeleton-accent-opacity, 6%); } 100% { opacity: 1; } } @keyframes wave { 0% { left: -150%; } 100% { left: 100%; } } @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})],k.prototype,"shape",void 0),t([i({reflect:!0})],k.prototype,"animation",void 0),t([i({type:Boolean,reflect:!0})],k.prototype,"loaded",void 0),k=t([d("m3e-skeleton")],k);export{k as M3eSkeletonElement};
+//# sourceMappingURL=skeleton.min.js.map

package/dist/skeleton.min.js.map

@@ -0,0 +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, 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  /** 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      animation: pulse 1.2s ease-in-out infinite;\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: -150%;\r\n      height: 100%;\r\n      width: 150%;\r\n      opacity: var(--m3e-skeleton-accent-opacity, 6%);\r\n      background: linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        var(--m3e-skeleton-accent-color, ${DesignToken.color.onSurface}),\r\n        transparent\r\n      );\r\n      animation: wave 2.1s linear infinite;\r\n    }\r\n    @keyframes pulse {\r\n      0% {\r\n        opacity: 1;\r\n      }\r\n      50% {\r\n        opacity: var(--m3e-skeleton-accent-opacity, 6%);\r\n      }\r\n      100% {\r\n        opacity: 1;\r\n      }\r\n    }\r\n    @keyframes wave {\r\n      0% {\r\n        left: -150%;\r\n      }\r\n      100% {\r\n        left: 100%;\r\n      }\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","styles","css","DesignToken","color","surface","onSurface","unsafeCSS","motion","duration","short3","easing","standard","corner","large","full","surfaceDim","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":";;;;;oWA8CO,IAAMA,EAAN,cAAiCC,EAAoBC,IAArDC,WAAAA,mCA4GoBC,EAAAC,IAAAC,KAAuB,IAAIC,KAMvBD,KAAAE,MAAuB,OAMvBF,KAAAG,UAA+B,OAMhBH,KAAAI,QAAS,CAmFvD,CAhFWC,oBAAAA,GACPC,MAAMD,uBACNE,EAAAP,KAAIQ,EAAA,IAAAC,GAAaC,KAAjBV,KACF,CAGSW,mBAAAA,GACPL,MAAMK,sBACNJ,EAAAP,KAAIQ,EAAA,IAAAI,GAAcF,KAAlBV,KACF,CAGmBa,MAAAA,GACjB,OAAOC,CAAI,kBAAkBd,KAAKI,wBAAwBG,EAAAP,KAAIQ,EAAA,IAAAO,aAChE,iCAGAC,iBACET,EAAAP,KAAIQ,EAAA,IAAAI,GAAcF,KAAlBV,KACF,eAIE,IAAK,MAAMiB,KAAQV,EAAAP,KAAIF,EAAA,KACrBmB,EAAK,GAAGC,SACRD,EAAK,KAEPV,EAAAP,KAAIF,EAAA,KAAsBqB,OAC5B,IAGAH,iBACET,EAAAP,KAAIQ,EAAA,IAAAC,GAAaC,KAAjBV,MAEA,MAAMoB,EAAOpB,KAAKqB,YAAYC,cAAc,QAC5C,GAAKF,EAEL,IAAK,MAAMG,KAAWH,EAAKI,iBAAiB,CAAEC,SAAS,IAAQC,OAAQC,GAAMA,aAAaC,mBAClFrB,EAAAP,KAAIQ,EAAA,IAAAqB,GAAanB,KAAjBV,KAAkBuB,EAE5B,IAGAP,eAAmBO,SACXO,EAAeP,GAErB,MAAMrB,EAAQ6B,SAASC,cAAc,OAGrC,GAFA9B,EAAM+B,UAAUC,IAAI,SAED,SAAflC,KAAKE,MAAkB,CACzB,IAAIiC,EAAeC,iBAAiBb,GAASY,aAC7C,IAAKA,GAAiC,QAAjBA,EAAwB,CAC3C,MAAME,EAAed,EAAQF,YAAYiB,kBACrCD,IAAiBA,EAAaE,qBAChCJ,EAAeC,iBAAiBC,GAAcF,aAElD,CAEIA,GAAiC,QAAjBA,IAClBjC,EAAMsC,MAAML,aAAeA,EAE/B,CAEA,MAAMM,QAAyBC,EAC7BxC,EACAqB,EACA,CACEoB,SAAU,UAEZ,CAAChB,EAAGiB,KACF1C,EAAMsC,MAAMK,KAAO,GAAGlB,MACtBzB,EAAMsC,MAAMM,IAASF,EAAIrB,EAAQwB,aAAf,KAClB7C,EAAMsC,MAAMQ,MAAQ,GAAGzB,EAAQ0B,gBAC/B/C,EAAMsC,MAAMU,OAAS,GAAG3B,EAAQwB,mBAIpCxC,EAAAP,YAA0BD,IAAIG,EAAOuC,GACrCzC,KAAKqB,YAAY8B,YAAYjD,EAC/B,EA9MgBR,EAAA0D,OAAyBC,CAAG,6JASMC,EAAYC,MAAMC,kLAW7BF,EAAYC,MAAME,yKASvCC,EAAU,WAAWJ,EAAYK,OAAOC,SAASC,UAAUP,EAAYK,OAAOG,OAAOC,+HAGtBT,EAAYpD,MAAM8D,OAAOC,6HAGxBX,EAAYpD,MAAM8D,OAAOE,oWAapDZ,EAAYC,MAAMY,8RAahCb,EAAYC,MAAME,kgBAmD9BW,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsC5E,EAAA6E,UAAA,aAAA,GAM9BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8C5E,EAAA6E,UAAA,iBAAA,GAMvBH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB5E,EAAA6E,UAAA,cAAA,GA9HhD7E,EAAkB0E,EAAA,CAD9BM,EAAc,iBACFhF"}