nano-skeleton 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- feat: add `text` attribute to force text mode for text wrapped in elements
+
+## 0.2.0
+
+### Minor Changes
+
+- feat: add `interactive` attribute to keep loading content focusable
+
+- feat: expose `aria-busy` on loading providers
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -34,7 +34,8 @@ for a shimmering placeholder of the same shape.
 - **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`.
+  focused or clicked, the provider is marked `aria-busy`, and the shimmer
+  respects `prefers-reduced-motion`. Opt out per skeleton with `interactive`.
 - **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.
@@ -100,7 +101,7 @@ 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.
+content (text mode can also be forced with the `text` attribute).
 
 ### Text mode
 
@@ -129,6 +130,34 @@ placeholder text first and replace it with real data later:
 <h2><nano-skeleton>Loading title…</nano-skeleton></h2>
 ```
 
+#### Text wrapped in elements
+
+Automatic detection only looks at text placed directly inside the skeleton.
+When the text is wrapped in an inline element, like a link or `<strong>`, add
+`text` to force text mode:
+
+```html
+<p>
+  <nano-skeleton text>
+    <a href="/posts/42">Read the full post</a>
+  </nano-skeleton>
+</p>
+```
+
+The placeholder follows the text lines exactly like plain text does. The
+wrapping elements should be inline: a block or `inline-block` child gets a
+single bar for its whole box.
+
+Text decorations, such as a link's underline, stay visible while loading, so the
+placeholder still reads as a link. To hide them too, wrap the link's content in
+a `<span>`:
+
+```html
+<nano-skeleton text>
+  <a href="/posts/42"><span>Read the full post</span></a>
+</nano-skeleton>
+```
+
 ### Element mode
 
 If the skeleton contains elements, it becomes `display: contents` (it doesn't
@@ -156,6 +185,38 @@ 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.
 
+The content is hidden with `opacity: 0`, so if an element inside has a
+`transition` on `opacity` (or `transition: all`), it fades in and out when
+`loading` changes instead of switching instantly.
+
+### Interactive skeletons
+
+By default, a loading skeleton is `inert`: its content can't be focused, clicked
+or reached by assistive technology. That's usually what you want, but sometimes
+the content is usable before the data arrives, e.g. a link whose `href` is
+already known, or a button that doesn't depend on the data.
+
+It matters most when content goes back into the loading state (a background
+refetch, pagination): an `inert` element that had focus loses it, and keyboard
+users are sent back to the top of the page.
+
+Add `interactive` to keep the content focusable and clickable while loading:
+
+```html
+<nano-skeleton-provider loading>
+  <nano-skeleton interactive>
+    <a href="/posts/42" class="card__link">
+      <span>Placeholder post title</span>
+    </a>
+  </nano-skeleton>
+</nano-skeleton-provider>
+```
+
+The placeholder looks the same, but the content stays in the tab order and
+keeps its accessible name. Make sure that name makes sense while loading, as screen reader users
+will hear it. The provider sets `aria-busy="true"` while loading to tell them
+the region is still updating.
+
 ## Examples
 
 ### A card
@@ -291,7 +352,13 @@ import type { DetailedHTMLProps, HTMLAttributes } from "react";
 declare module "react" {
   namespace JSX {
     interface IntrinsicElements {
-      [COMPONENT_NAME]: DetailedHTMLProps<HTMLAttributes<Skeleton>, Skeleton>;
+      [COMPONENT_NAME]: DetailedHTMLProps<
+        HTMLAttributes<Skeleton>,
+        Skeleton
+      > & {
+        interactive?: boolean;
+        text?: boolean;
+      };
       [PROVIDER_NAME]: DetailedHTMLProps<
         HTMLAttributes<SkeletonProvider>,
         SkeletonProvider
@@ -316,16 +383,23 @@ Registers `<nano-skeleton-provider>` and `<nano-skeleton>` with
 | -------------------- | --------- | --------------------------------------------------------------------- |
 | `loading`            | `boolean` | When present/`true`, all descendant skeletons render as placeholders. |
 
+While loading, the provider is exposed to assistive technology as
+`aria-busy="true"`. An `aria-busy` attribute you set yourself takes precedence.
+
 ### `<nano-skeleton>`
 
-No attributes to set. It exposes these state attributes, which you can use as
-styling hooks:
+| Attribute / property | Type      | Description                                                                                                   |
+| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------- |
+| `interactive`        | `boolean` | Keeps the content focusable and clickable while loading. See [Interactive skeletons](#interactive-skeletons). |
+| `text`               | `boolean` | Forces text mode, e.g. for text inside a link. See [Text wrapped in elements](#text-wrapped-in-elements).     |
+
+It also 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. |
+| Attribute      | Set when                                                                              |
+| -------------- | ------------------------------------------------------------------------------------- |
+| `data-loading` | The nearest provider is loading.                                                      |
+| `data-text`    | The skeleton directly contains text, or `text` is set (text mode).                    |
+| `inert`        | The nearest provider is loading and `interactive` isn't set. Blocks focus and clicks. |
 
 ### Exports
 

package/dist/Skeleton.d.ts

@@ -1,6 +1,14 @@
 //#region src/Skeleton.d.ts
 export declare class Skeleton extends HTMLElement {
   #private;
+  static observedAttributes: string[];
+  /** Keeps the content focusable and clickable while loading */
+  get interactive(): boolean;
+  set interactive(value: boolean);
+  /** Forces text mode, even when the text is wrapped in elements */
+  get text(): boolean;
+  set text(value: boolean);
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }

package/dist/Skeleton.js

@@ -1,2 +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};
+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{static observedAttributes=[`interactive`,`text`];#e=!1;#t;#n=new MutationObserver(()=>this.#r());get interactive(){return this.hasAttribute(`interactive`)}set interactive(e){this.toggleAttribute(`interactive`,!!e)}get text(){return this.hasAttribute(`text`)}set text(e){this.toggleAttribute(`text`,!!e)}attributeChangedCallback(e,t,n){t!==n&&(e===`text`?this.#r():this.#i(this.#e))}connectedCallback(){let i=this.getRootNode();r(i)&&n(i),this.#r(),this.#i(!1),this.dispatchEvent(new t(e,(e,t)=>{t&&(this.#t=t),this.#i(e)},!0)),this.#n.observe(this,{childList:!0,characterData:!0,subtree:!0})}disconnectedCallback(){this.#t?.(),this.#t=void 0,this.#n.disconnect()}#r(){let e=this.text;for(let t of this.childNodes){if(e)break;t instanceof Text&&t.data.trim()!==``&&(e=!0)}this.toggleAttribute(`data-text`,e)}#i(e){this.#e=e,this.toggleAttribute(`inert`,e&&!this.interactive),this.toggleAttribute(`data-loading`,e)}};export{i as Skeleton};
 //# sourceMappingURL=Skeleton.js.map

package/dist/Skeleton.js.map

@@ -1 +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"}
+{"version":3,"file":"Skeleton.js","names":["isDocumentOrShadowRoot","node","Skeleton","#update","value","oldValue","newValue","name","#render","#loading","root","adoptStyles","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  static observedAttributes = [\"interactive\", \"text\"];\n\n  #loading = false;\n  #unsubscribe?: Unsubscribe | undefined;\n  #observer = new MutationObserver(() => this.#update());\n\n  /** Keeps the content focusable and clickable while loading */\n  get interactive() {\n    return this.hasAttribute(\"interactive\");\n  }\n\n  set interactive(value: boolean) {\n    this.toggleAttribute(\"interactive\", Boolean(value));\n  }\n\n  /** Forces text mode, even when the text is wrapped in elements */\n  get text() {\n    return this.hasAttribute(\"text\");\n  }\n\n  set text(value: boolean) {\n    this.toggleAttribute(\"text\", Boolean(value));\n  }\n\n  attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (oldValue === newValue) return;\n    if (name === \"text\") this.#update();\n    else this.#render(this.#loading);\n  }\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 = this.text;\n    for (const node of this.childNodes) {\n      if (isText) break;\n      if (node instanceof Text && node.data.trim() !== \"\") {\n        isText = true;\n      }\n    }\n    this.toggleAttribute(\"data-text\", isText);\n  }\n\n  #render(loading: boolean) {\n    this.#loading = loading;\n    this.toggleAttribute(\"inert\", loading && !this.interactive);\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,OAAO,mBAAqB,CAAC,cAAe,MAAM,EAElD,GAAW,GACX,GACA,GAAY,IAAI,qBAAuB,KAAKC,GAAQ,CAAC,EAGrD,IAAI,aAAc,CAChB,OAAO,KAAK,aAAa,aAAa,CACxC,CAEA,IAAI,YAAY,EAAgB,CAC9B,KAAK,gBAAgB,cAAe,EAAQC,CAAM,CACpD,CAGA,IAAI,MAAO,CACT,OAAO,KAAK,aAAa,MAAM,CACjC,CAEA,IAAI,KAAK,EAAgB,CACvB,KAAK,gBAAgB,OAAQ,EAAQA,CAAM,CAC7C,CAEA,yBACE,EACA,EACA,EACA,CACIC,IAAaC,IACbC,IAAS,OAAQ,KAAKJ,GAAQ,EAC7B,KAAKK,GAAQ,KAAKC,EAAQ,EACjC,CAEA,mBAAoB,CAClB,IAAMC,EAAO,KAAK,YAAY,EAE1BV,EAAuBU,CAAI,GAC7BC,EAAYD,CAAI,EAGlB,KAAKP,GAAQ,EACb,KAAKK,GAAQ,EAAK,EAElB,KAAK,cACH,IAAII,EACFC,GACC,EAAS,IAAgB,CACpBC,IAAa,KAAKC,GAAeD,GACrC,KAAKN,GAAQQ,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,KAAK,KAClB,IAAK,IAAMjB,KAAQ,KAAK,WAAY,CAClC,GAAIiB,EAAQ,MACRjB,aAAgB,MAAQA,EAAK,KAAK,KAAK,IAAM,KAC/C,EAAS,GAEb,CACA,KAAK,gBAAgB,YAAaiB,CAAM,CAC1C,CAEA,GAAQ,EAAkB,CACxB,KAAKT,GAAWO,EAChB,KAAK,gBAAgB,QAASA,GAAW,CAAC,KAAK,WAAW,EAC1D,KAAK,gBAAgB,eAAgBA,CAAO,CAC9C,CACF,E"}

package/dist/SkeletonProvider.js

@@ -1,2 +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};
+import{SKELETON_CONTEXT as e}from"./constants.js";var t=class extends HTMLElement{static observedAttributes=[`loading`];#e=/* @__PURE__ */ new Set;#t=this.attachInternals();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){this.#t.ariaBusy=this.loading?`true`:null;for(let e of this.#e)e(this.loading)}}};export{t as SkeletonProvider};
 //# sourceMappingURL=SkeletonProvider.js.map

package/dist/SkeletonProvider.js.map

@@ -1 +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"}
+{"version":3,"file":"SkeletonProvider.js","names":["SkeletonProvider","event","SKELETON_CONTEXT","#subscribers","callback","value","oldValue","newValue","#internals"],"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  #internals = this.attachInternals();\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    /**\n     * Via internals, so an aria-busy attribute set by the user still takes\n     * precedence.\n     */\n    this.#internals.ariaBusy = this.loading ? \"true\" : null;\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,IACnB,GAAa,KAAK,gBAAgB,EAElC,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,EAKjB,MAAKC,GAAW,SAAW,KAAK,QAAU,OAAS,KACnD,IAAK,IAAMJ,KAAY,KAAKD,GAAcC,EAAS,KAAK,OAAO,CADZ,CAErD,CACF,E"}

package/dist/constants.js

@@ -21,10 +21,11 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
 
 /*
  * Everything inside the root should disappear, but nothing jumps,
- * as layout is intact.
+ * as layout is intact. Hidden visually only: focus and accessibility are
+ * handled by inert, so interactive skeletons keep both.
  */
-:scope[data-loading] > * :is(*, *:before, *:after) {
-  visibility: hidden !important;
+:scope[data-loading] > * > * {
+  opacity: 0 !important;
 }
 
 /**
@@ -37,13 +38,26 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
     var(--nano-skeleton-text-border-radius-default)
   );
   box-decoration-break: clone;
-  text-box-edge: cap alphabetic;
-  text-box-trim: trim-both;
+  text-box: cap alphabetic;
   /**
    * 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;
+  /**
+   * Text might get visible when selected
+   */
+  user-select: none;
+}
+
+/**
+ * Children and grandchildren need to inherit these styles
+ * for consistent outlines
+ */
+:scope[data-loading][data-text] > *,
+:scope[data-loading][data-text] > * > * {
+  border-radius: inherit;
+  text-box: inherit;
 }
 
 :scope[data-loading] > :is(video, img):only-child {

package/dist/constants.js.map

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGb,EAIWC,EAAmB,OAAO,IAAI,GAAGH,EAAe,SAAS,E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nano-skeleton",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "The perfect skeleton component",
   "homepage": "https://github.com/smashercosmo/nano-skeleton#readme",
   "bugs": {