nano-skeleton 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- feat: RTL support
+
+## 0.3.0
+
+### Minor Changes
+
+- feat: add `text` attribute to force text mode for text wrapped in elements
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -2,6 +2,8 @@
 
 A tiny, framework-agnostic skeleton loader built on Web Components.
 
+**[Live demo](https://smashercosmo.github.io/nano-skeleton/)**
+
 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
@@ -101,7 +103,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
 
@@ -130,6 +132,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
@@ -329,6 +359,7 @@ declare module "react" {
         Skeleton
       > & {
         interactive?: boolean;
+        text?: boolean;
       };
       [PROVIDER_NAME]: DetailedHTMLProps<
         HTMLAttributes<SkeletonProvider>,
@@ -362,13 +393,14 @@ While loading, the provider is exposed to assistive technology as
 | 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).                                      |
+| `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
@@ -452,6 +484,12 @@ The default colors use `light-dark()`, so they follow the page's
 }
 ```
 
+### Right-to-left
+
+The shimmer follows the reading direction: in right-to-left content, set with
+`dir="rtl"` on the skeleton or any ancestor, it moves from right to left. A
+custom `--nano-skeleton-animation` with its own keyframes isn't affected.
+
 ### Reduced motion
 
 The animation is disabled automatically for users with

package/dist/Skeleton.d.ts

@@ -5,7 +5,10 @@ export declare class Skeleton extends HTMLElement {
   /** Keeps the content focusable and clickable while loading */
   get interactive(): boolean;
   set interactive(value: boolean);
-  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
+  /** 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{static observedAttributes=[`interactive`];#e=!1;#t;#n=new MutationObserver(()=>this.#r());get interactive(){return this.hasAttribute(`interactive`)}set interactive(e){this.toggleAttribute(`interactive`,!!e)}attributeChangedCallback(e,t,n){t!==n&&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=!1;for(let t of this.childNodes)if(t instanceof Text&&t.data.trim()!==``){e=!0;break}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};
+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","value","oldValue","newValue","#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\"];\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  attributeChangedCallback(\n    _name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ) {\n    if (oldValue === newValue) return;\n    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 = 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.#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,aAAa,EAE1C,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,CAEA,yBACE,EACA,EACA,EACA,CACIC,IAAaC,GACjB,KAAKC,GAAQ,KAAKC,EAAQ,CAC5B,CAEA,mBAAoB,CAClB,IAAMC,EAAO,KAAK,YAAY,EAE1BT,EAAuBS,CAAI,GAC7BC,EAAYD,CAAI,EAGlB,KAAKN,GAAQ,EACb,KAAKI,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,GACb,IAAK,IAAMhB,KAAQ,KAAK,WACtB,GAAIA,aAAgB,MAAQA,EAAK,KAAK,KAAK,IAAM,GAAI,CACnD,EAAS,GACT,KACF,CAEF,KAAK,gBAAgB,YAAagB,CAAM,CAC1C,CAEA,GAAQ,EAAkB,CACxB,KAAKT,GAAWO,EAChB,KAAK,gBAAgB,QAASA,GAAW,CAAC,KAAK,WAAW,EAC1D,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/constants.js

@@ -44,6 +44,20 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
    * -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 {
@@ -72,12 +86,21 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
   }
 }
 
+/**
+ * The shimmer follows the reading direction
+ */
+:scope[data-loading][data-text]:dir(rtl),
+:scope[data-loading]:not([data-text]) > :dir(rtl) {
+  --nano-skeleton-shimmer-from: 0%;
+  --nano-skeleton-shimmer-to: 100%;
+}
+
 @keyframes shimmer {
   from {
-    background-position-x: 100%;
+    background-position-x: var(--nano-skeleton-shimmer-from, 100%);
   }
   to {
-    background-position-x: 0;
+    background-position-x: var(--nano-skeleton-shimmer-to, 0%);
   }
 }
 `},r=Symbol.for(`${e}-context`);export{e as COMPONENT_NAME,n as CSS_CONTENT,t as PROVIDER_NAME,r as SKELETON_CONTEXT};

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGb,EAIWC,EAAmB,OAAO,IAAI,GAAGH,EAAe,SAAS,E"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nano-skeleton",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The perfect skeleton component",
-  "homepage": "https://github.com/smashercosmo/nano-skeleton#readme",
+  "homepage": "https://smashercosmo.github.io/nano-skeleton/",
   "bugs": {
     "url": "https://github.com/smashercosmo/nano-skeleton/issues"
   },