nano-skeleton 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- feat: RTL support
+
 ## 0.3.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
@@ -482,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/constants.js

@@ -86,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGb,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.3.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"
   },