nano-skeleton 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.5.0
+
+### Minor Changes
+
+- refactor: get rid of data attributes
+
+  BREAKING CHANGES:
+
+  - use `inline` attribute instead of `text` attribute
+  - `data-text` attribute is no more
+  - `data-loading` attribute is no more as well
+
+## 0.4.1
+
+### Patch Changes
+
+- fix: link's skeleton and link's underline have different widths
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/Skeleton.d.ts

@@ -2,12 +2,14 @@
 export declare class Skeleton extends HTMLElement {
   #private;
   static observedAttributes: string[];
+  get loading(): boolean;
+  set loading(value: boolean);
   /** 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);
+  get inline(): boolean;
+  set inline(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`,`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};
+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`,`inline`];#e;#t=new MutationObserver(()=>this.#n());get loading(){return this.hasAttribute(`loading`)}set loading(e){this.toggleAttribute(`loading`,!!e)}get interactive(){return this.hasAttribute(`interactive`)}set interactive(e){this.toggleAttribute(`interactive`,!!e)}get inline(){return this.hasAttribute(`inline`)}set inline(e){this.toggleAttribute(`inline`,!!e)}attributeChangedCallback(e,t,n){t!==n&&(e===`inline`?this.#n():this.#r(this.loading))}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=this.inline;for(let t of this.childNodes){if(e)break;t instanceof Text&&t.data.trim()!==``&&(e=!0)}this.toggleAttribute(`inline`,e)}#r(e){this.toggleAttribute(`loading`,e),this.toggleAttribute(`inert`,e&&!this.interactive)}};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","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"}
+{"version":3,"file":"Skeleton.js","names":["isDocumentOrShadowRoot","node","Skeleton","#update","value","oldValue","newValue","name","#render","root","adoptStyles","ContextRequestEvent","SKELETON_CONTEXT","unsubscribe","#unsubscribe","loading","#observer","isInline"],"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\", \"inline\"];\n\n  #unsubscribe?: Unsubscribe | undefined;\n  #observer = new MutationObserver(() => this.#update());\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  /** 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 inline() {\n    return this.hasAttribute(\"inline\");\n  }\n\n  set inline(value: boolean) {\n    this.toggleAttribute(\"inline\", 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 === \"inline\") 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 isInline = this.inline;\n    for (const node of this.childNodes) {\n      if (isInline) break;\n      if (node instanceof Text && node.data.trim() !== \"\") {\n        isInline = true;\n      }\n    }\n    this.toggleAttribute(\"inline\", isInline);\n  }\n\n  #render(loading: boolean) {\n    this.toggleAttribute(\"loading\", loading);\n    this.toggleAttribute(\"inert\", loading && !this.interactive);\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,QAAQ,EAEpD,GACA,GAAY,IAAI,qBAAuB,KAAKC,GAAQ,CAAC,EAErD,IAAI,SAAU,CACZ,OAAO,KAAK,aAAa,SAAS,CACpC,CAEA,IAAI,QAAQ,EAAgB,CAC1B,KAAK,gBAAgB,UAAW,EAAQC,CAAM,CAChD,CAGA,IAAI,aAAc,CAChB,OAAO,KAAK,aAAa,aAAa,CACxC,CAEA,IAAI,YAAY,EAAgB,CAC9B,KAAK,gBAAgB,cAAe,EAAQA,CAAM,CACpD,CAGA,IAAI,QAAS,CACX,OAAO,KAAK,aAAa,QAAQ,CACnC,CAEA,IAAI,OAAO,EAAgB,CACzB,KAAK,gBAAgB,SAAU,EAAQA,CAAM,CAC/C,CAEA,yBACE,EACA,EACA,EACA,CACIC,IAAaC,IACbC,IAAS,SAAU,KAAKJ,GAAQ,EAC/B,KAAKK,GAAQ,KAAK,OAAO,EAChC,CAEA,mBAAoB,CAClB,IAAMC,EAAO,KAAK,YAAY,EAE1BT,EAAuBS,CAAI,GAC7BC,EAAYD,CAAI,EAGlB,KAAKN,GAAQ,EACb,KAAKK,GAAQ,EAAK,EAElB,KAAK,cACH,IAAIG,EACFC,GACC,EAAS,IAAgB,CACpBC,IAAa,KAAKC,GAAeD,GACrC,KAAKL,GAAQO,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,EAAW,KAAK,OACpB,IAAK,IAAMhB,KAAQ,KAAK,WAAY,CAClC,GAAIgB,EAAU,MACVhB,aAAgB,MAAQA,EAAK,KAAK,KAAK,IAAM,KAC/C,EAAW,GAEf,CACA,KAAK,gBAAgB,SAAUgB,CAAQ,CACzC,CAEA,GAAQ,EAAkB,CACxB,KAAK,gBAAgB,UAAWF,CAAO,EACvC,KAAK,gBAAgB,QAASA,GAAW,CAAC,KAAK,WAAW,CAC5D,CACF,E"}

package/dist/constants.js

@@ -15,7 +15,7 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
   );
 }
 
-:scope:not([data-text]) {
+:scope:not([inline]) {
   display: contents;
 }
 
@@ -24,20 +24,21 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
  * as layout is intact. Hidden visually only: focus and accessibility are
  * handled by inert, so interactive skeletons keep both.
  */
-:scope[data-loading] > * > * {
+:scope[loading] > * > * {
   opacity: 0 !important;
 }
 
 /**
  * Skeleton's content is just an inline text
  */
-:scope[data-loading][data-text] {
+:scope[loading][inline] {
   display: inline;
   border-radius: var(
     --nano-skeleton-text-border-radius,
     var(--nano-skeleton-text-border-radius-default)
   );
   box-decoration-break: clone;
+  text-decoration-skip-ink: none;
   text-box: cap alphabetic;
   /**
    * This ensures the ellipsis on truncated text is also hidden.
@@ -54,18 +55,18 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
  * Children and grandchildren need to inherit these styles
  * for consistent outlines
  */
-:scope[data-loading][data-text] > *,
-:scope[data-loading][data-text] > * > * {
+:scope[loading][inline] > *,
+:scope[loading][inline] > * > * {
   border-radius: inherit;
   text-box: inherit;
 }
 
-:scope[data-loading] > :is(video, img):only-child {
+:scope[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]) > * {
+:scope[loading][inline],
+:scope[loading]:not([inline]) > * {
   background-image: var(
     --nano-skeleton-background-image,
     var(--nano-skeleton-background-image-default)
@@ -77,8 +78,8 @@ const e=`nano-skeleton`,t=`${e}-provider`,{default:n}={default:`:scope {
 }
 
 @media not (prefers-reduced-motion: reduce) {
-  :scope[data-loading][data-text],
-  :scope[data-loading]:not([data-text]) > * {
+  :scope[loading][inline],
+  :scope[loading]:not([inline]) > * {
     animation: var(
       --nano-skeleton-animation,
       var(--nano-skeleton-animation-default)
@@ -89,8 +90,8 @@ 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) {
+:scope[loading][inline]:dir(rtl),
+:scope[loading]:not([inline]) > :dir(rtl) {
   --nano-skeleton-shimmer-from: 0%;
   --nano-skeleton-shimmer-to: 100%;
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nano-skeleton",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The perfect skeleton component",
   "homepage": "https://smashercosmo.github.io/nano-skeleton/",
   "bugs": {