nano-skeleton 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to
+[Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2026-10-19
+
+Initial release.
+
+### Added
+
+- `<nano-skeleton>` element that turns its content into a placeholder of the
+  same shape while loading, with no layout shift.
+- `<nano-skeleton-provider>` element with a `loading` attribute/property that
+  controls all skeletons inside it.
+
+[0.1.0]: https://github.com/smashercosmo/nano-skeleton/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vladislav Shkodin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,429 @@
-# Temporary Holding Version
+# nano-skeleton
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A tiny, framework-agnostic skeleton loader built on Web Components.
+
+Instead of maintaining a separate "loading" version of every component, wrap the
+pieces of your real UI in `<nano-skeleton>` and flip a single `loading` switch.
+The layout stays exactly where it is, nothing jumps, and the content is swapped
+for a shimmering placeholder of the same shape.
+
+```html
+<nano-skeleton-provider loading>
+  <article class="card">
+    <nano-skeleton>
+      <img src="/cover.png" width="320" height="240" alt="" />
+    </nano-skeleton>
+    <h2><nano-skeleton>Card title</nano-skeleton></h2>
+    <p>
+      <nano-skeleton>
+        Some description text that wraps over several lines.
+      </nano-skeleton>
+    </p>
+  </article>
+</nano-skeleton-provider>
+```
+
+## Features
+
+- **Zero layout shift.** The skeleton is drawn over your real markup, so the
+  loading state has the exact same size as the loaded one.
+- **One switch per region.** A `<nano-skeleton-provider>` controls every
+  `<nano-skeleton>` inside it, no matter how deeply nested.
+- **Text-aware.** Inline text gets a per-line placeholder that follows line
+  wrapping, including truncated text with an ellipsis.
+- **Media-aware.** `<img>` and `<video>` keep their box while their content is
+  hidden.
+- **Accessible by default.** Loading content is made `inert`, so it can't be
+  focused or clicked, and the shimmer respects `prefers-reduced-motion`.
+- **Light and dark mode** out of the box via `light-dark()`.
+- **Works everywhere:** plain HTML, any framework, inside Shadow DOM.
+- **No dependencies**, styles included. No CSS file to import.
+
+## Installation
+
+```bash
+npm install nano-skeleton
+# or
+pnpm add nano-skeleton
+# or
+yarn add nano-skeleton
+```
+
+## Quick start
+
+Call `init()` once to register the custom elements:
+
+```js
+import { init } from "nano-skeleton";
+
+init();
+```
+
+`init()` is idempotent, so calling it more than once (for example from several
+entry points or during hot reload) is safe.
+
+Then use the elements in your markup:
+
+```html
+<nano-skeleton-provider id="profile" loading>
+  <nano-skeleton>
+    <img src="/avatar.png" width="64" height="64" alt="" />
+  </nano-skeleton>
+  <strong><nano-skeleton>Jane Doe</nano-skeleton></strong>
+</nano-skeleton-provider>
+
+<script type="module">
+  const profile = document.getElementById("profile");
+
+  const user = await fetch("/api/me").then((r) => r.json());
+  // ...render user data...
+
+  profile.loading = false; // or profile.removeAttribute("loading")
+</script>
+```
+
+## How it works
+
+There are two elements:
+
+| Element                    | Role                                                                     |
+| -------------------------- | ------------------------------------------------------------------------ |
+| `<nano-skeleton-provider>` | Owns the `loading` state for everything inside it.                       |
+| `<nano-skeleton>`          | Marks a piece of content that should become a placeholder while loading. |
+
+When a `<nano-skeleton>` connects, it asks the nearest provider above it for the
+loading state (using the
+[Context Protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md))
+and subscribes to changes. Toggling the provider's `loading` attribute updates
+all of its skeletons at once.
+
+A `<nano-skeleton>` without a provider simply renders its content as usual.
+
+`<nano-skeleton>` works in one of two modes, picked automatically from its
+content.
+
+### Text mode
+
+If the skeleton directly contains non-empty text, it renders inline and the text
+itself becomes the placeholder. Each line of wrapped text gets its own rounded
+bar, so the skeleton has the same shape as the real paragraph.
+
+```html
+<h2><nano-skeleton>Lorem ipsum dolor sit amet</nano-skeleton></h2>
+
+<p>
+  <nano-skeleton>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />
+    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </nano-skeleton>
+</p>
+```
+
+Tip: put the skeleton _inside_ the heading or paragraph, not around it, so the
+placeholder matches the text and not the whole block.
+
+The mode is re-evaluated whenever the content changes, so you can render
+placeholder text first and replace it with real data later:
+
+```html
+<h2><nano-skeleton>Loading title…</nano-skeleton></h2>
+```
+
+### Element mode
+
+If the skeleton contains elements, it becomes `display: contents` (it doesn't
+affect layout at all), and each **direct child** is painted as a placeholder
+block while everything inside it is hidden.
+
+```html
+<!-- Image: keeps its box, the picture itself is hidden -->
+<nano-skeleton>
+  <img src="/cover.png" width="1600" height="1200" alt="" />
+</nano-skeleton>
+
+<!-- Video: the poster/frame and controls are hidden -->
+<nano-skeleton>
+  <video controls width="400" src="/clip.webm"></video>
+</nano-skeleton>
+
+<!-- Any box: a button, a badge, a chart container... -->
+<nano-skeleton>
+  <button type="button">Follow</button>
+</nano-skeleton>
+```
+
+Because the placeholder is just the element's own box, make sure it has a size
+while loading, e.g. `width`/`height` attributes or `aspect-ratio` on images, or
+a fixed size on containers.
+
+## Examples
+
+### A card
+
+```html
+<nano-skeleton-provider loading>
+  <article class="card">
+    <div class="card__media">
+      <nano-skeleton>
+        <img src="/preview.png" width="1600" height="1200" alt="" />
+      </nano-skeleton>
+    </div>
+    <div class="card__content">
+      <h2 class="card__title">
+        <nano-skeleton>Lorem ipsum dolor sit amet</nano-skeleton>
+      </h2>
+      <p class="card__description">
+        <nano-skeleton>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </nano-skeleton>
+      </p>
+    </div>
+  </article>
+</nano-skeleton-provider>
+
+<style>
+  .card__media img {
+    width: 320px;
+    height: auto;
+    aspect-ratio: 4 / 3;
+    display: block;
+    border-radius: 0.5rem;
+  }
+</style>
+```
+
+### A list with independent loading states
+
+Each provider controls only its own subtree, so items can finish loading
+independently:
+
+```html
+<ul>
+  <li>
+    <nano-skeleton-provider loading data-id="1">
+      <nano-skeleton>Item one</nano-skeleton>
+    </nano-skeleton-provider>
+  </li>
+  <li>
+    <nano-skeleton-provider loading data-id="2">
+      <nano-skeleton>Item two</nano-skeleton>
+    </nano-skeleton-provider>
+  </li>
+</ul>
+
+<script type="module">
+  for (const provider of document.querySelectorAll("nano-skeleton-provider")) {
+    loadItem(provider.dataset.id).then(() => (provider.loading = false));
+  }
+</script>
+```
+
+### Nested providers
+
+The nearest provider wins. This lets a page load in stages: the outer shell
+finishes first, while an inner section keeps its own state.
+
+```html
+<nano-skeleton-provider id="page">
+  <h1><nano-skeleton>Dashboard</nano-skeleton></h1>
+
+  <nano-skeleton-provider id="stats" loading>
+    <!-- Controlled by #stats, not by #page -->
+    <p><nano-skeleton>Revenue: $12,345</nano-skeleton></p>
+  </nano-skeleton-provider>
+</nano-skeleton-provider>
+```
+
+### React
+
+React 19 passes properties to custom elements, so `loading` can be bound
+directly:
+
+```tsx
+import { init } from "nano-skeleton";
+import { useQuery } from "@tanstack/react-query";
+
+init();
+
+export function UserCard({ id }: { id: string }) {
+  const { data, isPending } = useQuery({
+    queryKey: ["user", id],
+    queryFn: () => fetchUser(id),
+  });
+
+  return (
+    <nano-skeleton-provider loading={isPending}>
+      <article>
+        <nano-skeleton>
+          <img src={data?.avatar} width={64} height={64} alt="" />
+        </nano-skeleton>
+        <h2>
+          <nano-skeleton>{data?.name ?? "Placeholder name"}</nano-skeleton>
+        </h2>
+        <p>
+          <nano-skeleton>
+            {data?.bio ??
+              "A placeholder bio that is roughly as long as a real one."}
+          </nano-skeleton>
+        </p>
+      </article>
+    </nano-skeleton-provider>
+  );
+}
+```
+
+Placeholder text while loading gives the skeleton a realistic size, as it's
+never visible to the user.
+
+To get JSX type checking for the custom elements, add a declaration file:
+
+```ts
+// nano-skeleton.d.ts
+import type {
+  Skeleton,
+  SkeletonProvider,
+  COMPONENT_NAME,
+  PROVIDER_NAME,
+} from "nano-skeleton";
+import type { DetailedHTMLProps, HTMLAttributes } from "react";
+
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      [COMPONENT_NAME]: DetailedHTMLProps<HTMLAttributes<Skeleton>, Skeleton>;
+      [PROVIDER_NAME]: DetailedHTMLProps<
+        HTMLAttributes<SkeletonProvider>,
+        SkeletonProvider
+      > & {
+        loading?: boolean;
+      };
+    }
+  }
+}
+```
+
+## API
+
+### `init()`
+
+Registers `<nano-skeleton-provider>` and `<nano-skeleton>` with
+`customElements`. Safe to call multiple times.
+
+### `<nano-skeleton-provider>`
+
+| Attribute / property | Type      | Description                                                           |
+| -------------------- | --------- | --------------------------------------------------------------------- |
+| `loading`            | `boolean` | When present/`true`, all descendant skeletons render as placeholders. |
+
+### `<nano-skeleton>`
+
+No attributes to set. It exposes these state attributes, which you can use as
+styling hooks:
+
+| Attribute      | Set when                                                  |
+| -------------- | --------------------------------------------------------- |
+| `data-loading` | The nearest provider is loading.                          |
+| `data-text`    | The skeleton directly contains text (text mode).          |
+| `inert`        | The nearest provider is loading. Blocks focus and clicks. |
+
+### Exports
+
+```ts
+import {
+  init,
+  Skeleton, // <nano-skeleton> class
+  SkeletonProvider, // <nano-skeleton-provider> class
+  COMPONENT_NAME, // "nano-skeleton"
+  PROVIDER_NAME, // "nano-skeleton-provider"
+} from "nano-skeleton";
+```
+
+## Customization
+
+The look is controlled by CSS custom properties:
+
+| Property                             | Default                                |
+| ------------------------------------ | -------------------------------------- |
+| `--nano-skeleton-background-image`   | A light/dark-aware horizontal gradient |
+| `--nano-skeleton-background-size`    | `300%`                                 |
+| `--nano-skeleton-animation`          | `shimmer 2s infinite ease-in-out`      |
+| `--nano-skeleton-text-border-radius` | `0.375rem` (text mode only)            |
+
+Each `<nano-skeleton>` inherits these from its ancestors, so set them on a
+parent element (or on `:root` to change all skeletons at once), not on the
+`nano-skeleton` element itself:
+
+```css
+/* All skeletons on the page */
+:root {
+  --nano-skeleton-background-size: 200%;
+}
+
+/* Brand-colored shimmer for skeletons inside .card */
+.card {
+  --nano-skeleton-background-image: linear-gradient(
+    90deg,
+    light-dark(#e0e7ff, #1e1b4b) 33%,
+    light-dark(#eef2ff, #312e81),
+    light-dark(#e0e7ff, #1e1b4b) 66%
+  );
+}
+
+/* Pulse instead of shimmer */
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+.pulse {
+  --nano-skeleton-animation: pulse 1.5s infinite ease-in-out;
+}
+
+/* Square text bars */
+.table {
+  --nano-skeleton-text-border-radius: 0;
+}
+```
+
+Shape (border radius, size) in element mode comes from your own element, so a
+rounded avatar produces a rounded placeholder:
+
+```css
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+}
+```
+
+### Dark mode
+
+The default colors use `light-dark()`, so they follow the page's
+`color-scheme`. Make sure it's set:
+
+```css
+:root {
+  color-scheme: light dark;
+}
+```
+
+### Reduced motion
+
+The animation is disabled automatically for users with
+`prefers-reduced-motion: reduce`. They see a static placeholder instead, and a
+custom `--nano-skeleton-animation` is skipped for them as well.
+
+## Browser support
+
+nano-skeleton targets modern evergreen browsers. It relies on
+[`@scope`](https://developer.mozilla.org/docs/Web/CSS/@scope),
+[constructable stylesheets](https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
+and [`light-dark()`](https://developer.mozilla.org/docs/Web/CSS/color_value/light-dark).
+Tighter text bars via `text-box-trim` are applied where supported and ignored
+elsewhere.
+
+## License
+
+[MIT](https://github.com/smashercosmo/nano-skeleton/blob/main/LICENSE) ©
+Vladislav Shkodin

package/dist/ContextRequestEvent.js

@@ -0,0 +1,2 @@
+var e=class extends Event{context;callback;subscribe;constructor(e,t,n=!1){super(`context-request`,{bubbles:!0,composed:!0}),this.context=e,this.callback=t,this.subscribe=n}};export{e as ContextRequestEvent};
+//# sourceMappingURL=ContextRequestEvent.js.map

package/dist/ContextRequestEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextRequestEvent.js","names":["ContextRequestEvent","context","callback","subscribe"],"sources":["../src/ContextRequestEvent.ts"],"sourcesContent":["import type { LoadingCallback } from \"#root/types.js\";\n\n/**\n * Follows the community Context Protocol (@see\n * https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md)\n */\nexport class ContextRequestEvent extends Event {\n  readonly context: unknown;\n  readonly callback: LoadingCallback;\n  readonly subscribe: boolean;\n\n  constructor(context: unknown, callback: LoadingCallback, subscribe = false) {\n    /** Composed, so skeletons inside shadow roots can reach a provider outside */\n    super(\"context-request\", { bubbles: true, composed: true });\n    this.context = context;\n    this.callback = callback;\n    this.subscribe = subscribe;\n  }\n}\n"],"mappings":"AAMA,IAAaA,EAAb,cAAyC,KAAM,CAC7C,QACA,SACA,UAEA,YAAY,EAAkB,EAA2B,EAAY,GAAO,CAE1E,MAAM,kBAAmB,CAAE,QAAS,GAAM,SAAU,EAAK,CAAC,EAC1D,KAAK,QAAUC,EACf,KAAK,SAAWC,EAChB,KAAK,UAAYC,CACnB,CACF,E"}

package/dist/Skeleton.d.ts

@@ -0,0 +1,8 @@
+//#region src/Skeleton.d.ts
+export declare class Skeleton extends HTMLElement {
+  #private;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+//#endregion
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/Skeleton.js

@@ -0,0 +1,2 @@
+import{SKELETON_CONTEXT as e}from"./constants.js";import{ContextRequestEvent as t}from"./ContextRequestEvent.js";import{adoptStyles as n}from"./styles.js";function r(e){return`adoptedStyleSheets`in e}var i=class extends HTMLElement{#e;#t=new MutationObserver(()=>this.#n());connectedCallback(){let i=this.getRootNode();r(i)&&n(i),this.#n(),this.#r(!1),this.dispatchEvent(new t(e,(e,t)=>{t&&(this.#e=t),this.#r(e)},!0)),this.#t.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){this.#e?.(),this.#e=void 0,this.#t.disconnect()}#n(){let e=!1;for(let t of this.childNodes)if(t instanceof Text&&t.data.trim()!==``){e=!0;break}this.toggleAttribute(`data-text`,e)}#r(e){this.toggleAttribute(`inert`,e),this.toggleAttribute(`data-loading`,e)}};export{i as Skeleton};
+//# sourceMappingURL=Skeleton.js.map

package/dist/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["isDocumentOrShadowRoot","node","Skeleton","#update","root","adoptStyles","#render","ContextRequestEvent","SKELETON_CONTEXT","unsubscribe","#unsubscribe","loading","#observer","isText"],"sources":["../src/Skeleton.ts"],"sourcesContent":["import { SKELETON_CONTEXT } from \"#root/constants.js\";\nimport { ContextRequestEvent } from \"#root/ContextRequestEvent.js\";\nimport { adoptStyles } from \"#root/styles.js\";\nimport { type Unsubscribe } from \"#root/types.js\";\n\nfunction isDocumentOrShadowRoot(\n  node: Node | Document | ShadowRoot,\n): node is Document | ShadowRoot {\n  return \"adoptedStyleSheets\" in node;\n}\n\nexport class Skeleton extends HTMLElement {\n  #unsubscribe?: Unsubscribe | undefined;\n  #observer = new MutationObserver(() => this.#update());\n\n  connectedCallback() {\n    const root = this.getRootNode();\n\n    if (isDocumentOrShadowRoot(root)) {\n      adoptStyles(root);\n    }\n\n    this.#update();\n    this.#render(false);\n\n    this.dispatchEvent(\n      new ContextRequestEvent(\n        SKELETON_CONTEXT,\n        (loading, unsubscribe) => {\n          if (unsubscribe) this.#unsubscribe = unsubscribe;\n          this.#render(loading);\n        },\n        true,\n      ),\n    );\n\n    this.#observer.observe(this, {\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.#unsubscribe?.();\n    this.#unsubscribe = undefined;\n    this.#observer.disconnect();\n  }\n\n  #update() {\n    let isText = false;\n    for (const node of this.childNodes) {\n      if (node instanceof Text && node.data.trim() !== \"\") {\n        isText = true;\n        break;\n      }\n    }\n    this.toggleAttribute(\"data-text\", isText);\n  }\n\n  #render(loading: boolean) {\n    this.toggleAttribute(\"inert\", loading);\n    this.toggleAttribute(\"data-loading\", loading);\n  }\n}\n"],"mappings":"A,2JAKA,SAASA,EACP,EAC+B,CAC/B,MAAO,uBAAwBC,CACjC,CAEA,IAAaC,EAAb,cAA8B,WAAY,CACxC,GACA,GAAY,IAAI,qBAAuB,KAAKC,GAAQ,CAAC,EAErD,mBAAoB,CAClB,IAAMC,EAAO,KAAK,YAAY,EAE1BJ,EAAuBI,CAAI,GAC7BC,EAAYD,CAAI,EAGlB,KAAKD,GAAQ,EACb,KAAKG,GAAQ,EAAK,EAElB,KAAK,cACH,IAAIC,EACFC,GACC,EAAS,IAAgB,CACpBC,IAAa,KAAKC,GAAeD,GACrC,KAAKH,GAAQK,CAAO,CACtB,EACA,EACF,CACF,EAEA,KAAKC,GAAU,QAAQ,KAAM,CAC3B,UAAW,GACX,cAAe,GACf,QAAS,EACX,CAAC,CACH,CAEA,sBAAuB,CACrB,KAAKF,KAAe,EACpB,KAAKA,GAAe,IAAA,GACpB,KAAKE,GAAU,WAAW,CAC5B,CAEA,IAAU,CACR,IAAIC,EAAS,GACb,IAAK,IAAMZ,KAAQ,KAAK,WACtB,GAAIA,aAAgB,MAAQA,EAAK,KAAK,KAAK,IAAM,GAAI,CACnD,EAAS,GACT,KACF,CAEF,KAAK,gBAAgB,YAAaY,CAAM,CAC1C,CAEA,GAAQ,EAAkB,CACxB,KAAK,gBAAgB,QAASF,CAAO,EACrC,KAAK,gBAAgB,eAAgBA,CAAO,CAC9C,CACF,E"}

package/dist/SkeletonProvider.d.ts

@@ -0,0 +1,11 @@
+//#region src/SkeletonProvider.d.ts
+export declare class SkeletonProvider extends HTMLElement {
+  #private;
+  static observedAttributes: string[];
+  constructor();
+  get loading(): boolean;
+  set loading(value: boolean);
+  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+}
+//#endregion
+//# sourceMappingURL=SkeletonProvider.d.ts.map

package/dist/SkeletonProvider.js

@@ -0,0 +1,2 @@
+import{SKELETON_CONTEXT as e}from"./constants.js";var t=class extends HTMLElement{static observedAttributes=[`loading`];#e=/* @__PURE__ */ new Set;constructor(){super(),this.addEventListener(`context-request`,t=>{if(t.context!==e||typeof t.callback!=`function`)return;t.stopPropagation();let{callback:n}=t;t.subscribe?(this.#e.add(n),n(this.loading,()=>this.#e.delete(n))):n(this.loading)})}get loading(){return this.hasAttribute(`loading`)}set loading(e){this.toggleAttribute(`loading`,!!e)}attributeChangedCallback(e,t,n){if(t!==n)for(let e of this.#e)e(this.loading)}};export{t as SkeletonProvider};
+//# sourceMappingURL=SkeletonProvider.js.map

package/dist/SkeletonProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonProvider.js","names":["SkeletonProvider","event","SKELETON_CONTEXT","#subscribers","callback","value","oldValue","newValue"],"sources":["../src/SkeletonProvider.ts"],"sourcesContent":["import type { ContextRequestEvent } from \"#root/ContextRequestEvent.js\";\nimport type { LoadingCallback } from \"#root/types.js\";\n\nimport { SKELETON_CONTEXT } from \"#root/constants.js\";\n\nexport class SkeletonProvider extends HTMLElement {\n  static observedAttributes = [\"loading\"];\n\n  #subscribers = new Set<LoadingCallback>();\n\n  constructor() {\n    super();\n    /**\n     * Adding listener from the constructor so the provider is ready before any\n     * descendant connects and asks for context.\n     */\n    this.addEventListener(\"context-request\", (event: ContextRequestEvent) => {\n      if (\n        event.context !== SKELETON_CONTEXT ||\n        typeof event.callback !== \"function\"\n      )\n        return;\n\n      /** The nearest provider wins */\n      event.stopPropagation();\n\n      const { callback } = event;\n\n      if (event.subscribe) {\n        this.#subscribers.add(callback);\n        callback(this.loading, () => this.#subscribers.delete(callback));\n      } else {\n        callback(this.loading);\n      }\n    });\n  }\n\n  get loading() {\n    return this.hasAttribute(\"loading\");\n  }\n\n  set loading(value: boolean) {\n    this.toggleAttribute(\"loading\", Boolean(value));\n  }\n\n  attributeChangedCallback(\n    _name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (oldValue === newValue) return;\n    for (const callback of this.#subscribers) callback(this.loading);\n  }\n}\n"],"mappings":"A,kDAKA,IAAaA,EAAb,cAAsC,WAAY,CAChD,OAAO,mBAAqB,CAAC,SAAS,EAEtC,mBAAe,IAAI,IAEnB,aAAc,CACZ,MAAM,EAKN,KAAK,iBAAiB,kBAAoB,GAA+B,CACvE,GACEC,EAAM,UAAYC,GAClB,OAAOD,EAAM,UAAa,WAE1B,OAGFA,EAAM,gBAAgB,EAEtB,GAAM,CAAE,YAAaA,EAEjBA,EAAM,WACR,KAAKE,GAAa,IAAIC,CAAQ,EAC9BA,EAAS,KAAK,YAAe,KAAKD,GAAa,OAAOC,CAAQ,CAAC,GAE/DA,EAAS,KAAK,OAAO,CAEzB,CAAC,CACH,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,aAAa,SAAS,CACpC,CAEA,IAAI,QAAQ,EAAgB,CAC1B,KAAK,gBAAgB,UAAW,EAAQC,CAAM,CAChD,CAEA,yBACE,EACA,EACA,EACA,CACA,GAAIC,IAAaC,EACjB,IAAK,IAAMH,KAAY,KAAKD,GAAcC,EAAS,KAAK,OAAO,CACjE,CACF,E"}

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+//#region src/constants.d.ts
+export declare const COMPONENT_NAME: "nano-skeleton";
+export declare const PROVIDER_NAME: "nano-skeleton-provider";
+//#endregion
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.js

@@ -0,0 +1,84 @@
+const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
+  --nano-skeleton-animation: inherit;
+  --nano-skeleton-background-image: inherit;
+  --nano-skeleton-background-size: inherit;
+  --nano-skeleton-text-border-radius: inherit;
+
+  --nano-skeleton-text-border-radius-default: 0.375rem;
+  --nano-skeleton-animation-default: shimmer 2s infinite ease-in-out;
+  --nano-skeleton-background-size-default: 300%;
+  --nano-skeleton-background-image-default: linear-gradient(
+    90deg,
+    light-dark(#e9e9e9, #2c2c2c) 33%,
+    light-dark(#fff, #393939),
+    light-dark(#e9e9e9, #2c2c2c) 66%
+  );
+}
+
+:scope:not([data-text]) {
+  display: contents;
+}
+
+/*
+ * Everything inside the root should disappear, but nothing jumps,
+ * as layout is intact.
+ */
+:scope[data-loading] > * :is(*, *:before, *:after) {
+  visibility: hidden !important;
+}
+
+/**
+ * Skeleton's content is just an inline text
+ */
+:scope[data-loading][data-text] {
+  display: inline;
+  border-radius: var(
+    --nano-skeleton-text-border-radius,
+    var(--nano-skeleton-text-border-radius-default)
+  );
+  box-decoration-break: clone;
+  text-box-edge: cap alphabetic;
+  text-box-trim: trim-both;
+  /**
+   * This ensures the ellipsis on truncated text is also hidden.
+   * -webkit-text-fill-color overrides any "color" property that is also set.
+   */
+  -webkit-text-fill-color: transparent;
+}
+
+:scope[data-loading] > :is(video, img):only-child {
+  content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") !important;
+}
+
+:scope[data-loading][data-text],
+:scope[data-loading]:not([data-text]) > * {
+  background-image: var(
+    --nano-skeleton-background-image,
+    var(--nano-skeleton-background-image-default)
+  ) !important;
+  background-size: var(
+    --nano-skeleton-background-size,
+    var(--nano-skeleton-background-size-default)
+  ) !important;
+}
+
+@media not (prefers-reduced-motion: reduce) {
+  :scope[data-loading][data-text],
+  :scope[data-loading]:not([data-text]) > * {
+    animation: var(
+      --nano-skeleton-animation,
+      var(--nano-skeleton-animation-default)
+    ) !important;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position-x: 100%;
+  }
+  to {
+    background-position-x: 0;
+  }
+}
+`},r=Symbol.for(`${e}-context`);export{e as COMPONENT_NAME,n as CSS_CONTENT,t as PROVIDER_NAME,r as SKELETON_CONTEXT};
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["COMPONENT_NAME","PROVIDER_NAME","CSS_CONTENT","SKELETON_CONTEXT"],"sources":["../src/constants.ts"],"sourcesContent":["const isDev = import.meta.env.MODE !== \"production\";\n\nexport const COMPONENT_NAME = \"nano-skeleton\" as const;\n\nexport const PROVIDER_NAME = `${COMPONENT_NAME}-provider` as const;\n\nconst { default: CSS_CONTENT } = isDev\n  ? await import(\"./styles.css?inline\")\n  : { default: `__CSS_CONTENT__` };\n\nexport { CSS_CONTENT };\n\nexport const SKELETON_CONTEXT = Symbol.for(`${COMPONENT_NAME}-context`);\n"],"mappings":"AAEA,MAAaA,EAAiB,gBAEjBC,EAAgB,GAAGD,EAAe,WAEzC,CAAE,QAASE,GAEb,CAAE,QAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFb,EAIWC,EAAmB,OAAO,IAAI,GAAGH,EAAe,SAAS,E"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { COMPONENT_NAME, PROVIDER_NAME } from "./constants.js";
+import { Skeleton } from "./Skeleton.js";
+import { SkeletonProvider } from "./SkeletonProvider.js";
+//#region src/index.d.ts
+export declare function init(): void;
+//#endregion
+export { COMPONENT_NAME, PROVIDER_NAME, Skeleton, SkeletonProvider };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,2 @@
+import{COMPONENT_NAME as e,PROVIDER_NAME as t}from"./constants.js";import{Skeleton as n}from"./Skeleton.js";import{SkeletonProvider as r}from"./SkeletonProvider.js";function i(){customElements.get(`nano-skeleton-provider`)||customElements.define(t,r),customElements.get(`nano-skeleton`)||customElements.define(e,n)}export{e as COMPONENT_NAME,t as PROVIDER_NAME,n as Skeleton,r as SkeletonProvider,i as init};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["init","PROVIDER_NAME","SkeletonProvider","COMPONENT_NAME","Skeleton"],"sources":["../src/index.ts"],"sourcesContent":["import { PROVIDER_NAME, COMPONENT_NAME } from \"#root/constants.js\";\nimport { Skeleton } from \"#root/Skeleton.js\";\nimport { SkeletonProvider } from \"#root/SkeletonProvider.js\";\n\nexport function init() {\n  if (!customElements.get(PROVIDER_NAME)) {\n    customElements.define(PROVIDER_NAME, SkeletonProvider);\n  }\n  if (!customElements.get(COMPONENT_NAME)) {\n    customElements.define(COMPONENT_NAME, Skeleton);\n  }\n}\n\nexport { Skeleton, SkeletonProvider };\nexport { PROVIDER_NAME, COMPONENT_NAME };\n"],"mappings":"A,qKAIA,SAAgBA,GAAO,CAChB,eAAe,IAAA,wBAAiB,GACnC,eAAe,OAAOC,EAAeC,CAAgB,EAElD,eAAe,IAAA,eAAkB,GACpC,eAAe,OAAOC,EAAgBC,CAAQ,CAElD,C"}

package/dist/styles.js

@@ -0,0 +1,4 @@
+import{COMPONENT_NAME as e,CSS_CONTENT as t}from"./constants.js";const n=`@scope (${e}) {
+  ${t}
+}`;let r;function i(e){r||(r=new CSSStyleSheet,r.replaceSync(n)),e.adoptedStyleSheets.includes(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,r])}export{i as adoptStyles};
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["css","COMPONENT_NAME","CSS_CONTENT","sheet","adoptStyles","root"],"sources":["../src/styles.ts"],"sourcesContent":["import { CSS_CONTENT, COMPONENT_NAME } from \"#root/constants.js\";\n\n/** It gets replaced with styles.css content during build. */\nconst css = `@scope (${COMPONENT_NAME}) {\n  ${CSS_CONTENT}\n}`;\n\nlet sheet: CSSStyleSheet | undefined;\n\nexport function adoptStyles(root: Document | ShadowRoot) {\n  if (!sheet) {\n    sheet = new CSSStyleSheet();\n    sheet.replaceSync(css);\n  }\n  if (!root.adoptedStyleSheets.includes(sheet)) {\n    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];\n  }\n}\n"],"mappings":"A,iEAGA,MAAMA,EAAM,WAAWC,EAAe;IAClCC,EAAY;GAGhB,IAAIC,EAEJ,SAAgBC,EAAY,EAA6B,CAClDD,IACH,EAAQ,IAAI,cACZA,EAAM,YAAYH,CAAG,GAElBK,EAAK,mBAAmB,SAASF,CAAK,IACzC,EAAK,mBAAqB,CAAC,GAAGE,EAAK,mBAAoBF,CAAK,EAEhE,C"}

package/package.json

@@ -1,6 +1,40 @@
 {
   "name": "nano-skeleton",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "The perfect skeleton component",
+  "homepage": "https://github.com/smashercosmo/nano-skeleton#readme",
+  "bugs": {
+    "url": "https://github.com/smashercosmo/nano-skeleton/issues"
+  },
+  "license": "MIT",
+  "author": "Vladislav Shkodin <smashercosmo@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smashercosmo/nano-skeleton.git"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "imports": {
+    "#root/*": "./src/*"
+  },
+  "devDependencies": {
+    "@internal/tsconfig": "0.0.0",
+    "@types/node": "26.6.5",
+    "@tsdown/css": "0.23.1",
+    "bumpp": "12.3.0",
+    "rolldown": "1.2.14",
+    "tsdown": "0.23.1"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "lint:types": "tsc -b"
+  }
 }