@aejkatappaja/phantom-ui 0.6.1 → 0.7.0

package/README.md

@@ -174,7 +174,7 @@ function UserProfile({ userId }: { userId: string }) {
   });
 
   return (
-    <phantom-ui loading={isLoading || undefined}>
+    <phantom-ui loading={isLoading}>
       <div className="card">
         <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
         <h3>{user?.name ?? "Placeholder Name"}</h3>
@@ -197,7 +197,7 @@ function UserProfile({ userId }: { userId: string }) {
   const { data: user, isLoading } = useSWR(`/api/users/${userId}`);
 
   return (
-    <phantom-ui loading={isLoading || undefined}>
+    <phantom-ui loading={isLoading}>
       <div className="card">
         <img src={user?.avatar ?? "/placeholder.png"} width="48" height="48" />
         <h3>{user?.name ?? "Placeholder Name"}</h3>
@@ -219,7 +219,7 @@ const { data: users, isLoading } = useQuery({
 });
 
 return (
-  <phantom-ui loading={isLoading || undefined} count={5} count-gap={8}>
+  <phantom-ui loading={isLoading} count={5} count-gap={8}>
     {isLoading ? (
       <div className="row">
         <img src="/placeholder.png" width="32" height="32" />
@@ -248,7 +248,7 @@ import "@aejkatappaja/phantom-ui";
 
 function ProfileCard({ user, isLoading }: Props) {
   return (
-    <phantom-ui loading={isLoading || undefined} animation="pulse" reveal={0.3}>
+    <phantom-ui loading={isLoading} animation="pulse" reveal={0.3}>
       <div className="card">
         <img src={user?.avatar ?? "/placeholder.png"} className="avatar" />
         <h3>{user?.name ?? "Placeholder Name"}</h3>
@@ -261,7 +261,7 @@ function ProfileCard({ user, isLoading }: Props) {
 // List with repeat mode
 function UserList({ users, isLoading }: Props) {
   return (
-    <phantom-ui loading={isLoading || undefined} count={5} count-gap={8}>
+    <phantom-ui loading={isLoading} count={5} count-gap={8}>
       <div className="row">
         <img src="/placeholder.png" width="32" height="32" />
         <span>Placeholder Name</span>
@@ -343,7 +343,7 @@ function ProfileCard() {
   const [loading, setLoading] = createSignal(true);
 
   return (
-    <phantom-ui attr:loading={loading() || undefined} animation="shimmer" stagger={0.05}>
+    <phantom-ui attr:loading={loading()} animation="shimmer" stagger={0.05}>
       <div class="card">
         <img src="/avatar.png" class="avatar" />
         <h3>Ada Lovelace</h3>

package/dist/phantom-ui.cdn.js

@@ -162,7 +162,7 @@
 						${n}
 					"
         ></div>
-      `})}};p.styles=Tt,g([_({type:Boolean,reflect:!0})],p.prototype,"loading",2),g([_({attribute:"shimmer-color"})],p.prototype,"shimmerColor",2),g([_({attribute:"background-color"})],p.prototype,"backgroundColor",2),g([_({type:Number})],p.prototype,"duration",2),g([_({type:Number,attribute:"fallback-radius"})],p.prototype,"fallbackRadius",2),g([_({reflect:!0})],p.prototype,"animation",2),g([_({type:Number})],p.prototype,"stagger",2),g([_({type:Number})],p.prototype,"reveal",2),g([_({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],p.prototype,"count",2),g([_({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],p.prototype,"countGap",2),g([it()],p.prototype,"_blocks",2),g([it()],p.prototype,"_revealing",2),p=g([$t("phantom-ui")],p);})();
+      `})}};p.styles=Tt,g([_({type:Boolean,reflect:!0,converter:{fromAttribute:e=>e!==null&&e!=="false",toAttribute:e=>e?"":null}})],p.prototype,"loading",2),g([_({attribute:"shimmer-color"})],p.prototype,"shimmerColor",2),g([_({attribute:"background-color"})],p.prototype,"backgroundColor",2),g([_({type:Number})],p.prototype,"duration",2),g([_({type:Number,attribute:"fallback-radius"})],p.prototype,"fallbackRadius",2),g([_({reflect:!0})],p.prototype,"animation",2),g([_({type:Number})],p.prototype,"stagger",2),g([_({type:Number})],p.prototype,"reveal",2),g([_({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],p.prototype,"count",2),g([_({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],p.prototype,"countGap",2),g([it()],p.prototype,"_blocks",2),g([it()],p.prototype,"_revealing",2),p=g([$t("phantom-ui")],p);})();
 /*! Bundled license information:
 
 @lit/reactive-element/css-tag.js:

package/dist/phantom-ui.js

@@ -1,4 +1,4 @@
-var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var l=(n,r,e,o)=>{for(var t=o>1?void 0:o?O(r,e):r,i=n.length-1,a;i>=0;i--)(a=n[i])&&(t=(o?a(r,e,t):a(t))||t);return o&&t&&E(r,e,t),t};import{LitElement as N,html as g}from"lit";import{customElement as M,property as u,state as k}from"lit/decorators.js";import{styleMap as H}from"lit/directives/style-map.js";var R=new Set(["IMG","SVG","VIDEO","CANVAS","IFRAME","INPUT","TEXTAREA","BUTTON","HR"]),T=new Set(["BR","WBR","HR"]);function C(n){if(R.has(n.tagName))return!0;for(let r of n.children)if(!T.has(r.tagName))return!1;return!0}function S(n){for(let r of n.childNodes)if(r.nodeType===Node.TEXT_NODE&&r.textContent?.trim())return!0;return!1}function f(n,r){let e=[];function o(t){let i=t.getBoundingClientRect(),a=Number(t.getAttribute("data-shimmer-width"))||0,d=Number(t.getAttribute("data-shimmer-height"))||0,p=a||i.width,m=d||i.height;if(p===0||m===0||t.hasAttribute("data-shimmer-ignore"))return;if(t.hasAttribute("data-shimmer-no-children")||C(t)){let b=getComputedStyle(t).borderRadius;if((t.tagName==="TD"||t.tagName==="TH")&&S(t)&&!a){let h=document.createElement("span");h.style.visibility="hidden",h.style.position="absolute",h.textContent=t.textContent,t.appendChild(h);let x=h.getBoundingClientRect();t.removeChild(h),e.push({x:i.left-r.left,y:i.top-r.top,width:Math.min(x.width,i.width),height:m,tag:t.tagName.toLowerCase(),borderRadius:b==="0px"?"":b});return}e.push({x:i.left-r.left,y:i.top-r.top,width:p,height:m,tag:t.tagName.toLowerCase(),borderRadius:b==="0px"?"":b});return}for(let v of t.children)o(v)}return o(n),e}function y(n,r){let e=null,o=new ResizeObserver(()=>{e!==null&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{e=null,r()})});return o.observe(n),o}import{css as A}from"lit";var _=A`
+var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var l=(n,r,e,o)=>{for(var t=o>1?void 0:o?O(r,e):r,i=n.length-1,a;i>=0;i--)(a=n[i])&&(t=(o?a(r,e,t):a(t))||t);return o&&t&&E(r,e,t),t};import{LitElement as N,html as g}from"lit";import{customElement as M,property as u,state as k}from"lit/decorators.js";import{styleMap as H}from"lit/directives/style-map.js";var R=new Set(["IMG","SVG","VIDEO","CANVAS","IFRAME","INPUT","TEXTAREA","BUTTON","HR"]),T=new Set(["BR","WBR","HR"]);function C(n){if(R.has(n.tagName))return!0;for(let r of n.children)if(!T.has(r.tagName))return!1;return!0}function A(n){for(let r of n.childNodes)if(r.nodeType===Node.TEXT_NODE&&r.textContent?.trim())return!0;return!1}function f(n,r){let e=[];function o(t){let i=t.getBoundingClientRect(),a=Number(t.getAttribute("data-shimmer-width"))||0,d=Number(t.getAttribute("data-shimmer-height"))||0,p=a||i.width,m=d||i.height;if(p===0||m===0||t.hasAttribute("data-shimmer-ignore"))return;if(t.hasAttribute("data-shimmer-no-children")||C(t)){let b=getComputedStyle(t).borderRadius;if((t.tagName==="TD"||t.tagName==="TH")&&A(t)&&!a){let h=document.createElement("span");h.style.visibility="hidden",h.style.position="absolute",h.textContent=t.textContent,t.appendChild(h);let x=h.getBoundingClientRect();t.removeChild(h),e.push({x:i.left-r.left,y:i.top-r.top,width:Math.min(x.width,i.width),height:m,tag:t.tagName.toLowerCase(),borderRadius:b==="0px"?"":b});return}e.push({x:i.left-r.left,y:i.top-r.top,width:p,height:m,tag:t.tagName.toLowerCase(),borderRadius:b==="0px"?"":b});return}for(let v of t.children)o(v)}return o(n),e}function y(n,r){let e=null,o=new ResizeObserver(()=>{e!==null&&cancelAnimationFrame(e),e=requestAnimationFrame(()=>{e=null,r()})});return o.observe(n),o}import{css as S}from"lit";var _=S`
 	:host {
 		display: block;
 		position: relative;
@@ -160,4 +160,4 @@ var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var l=(n,r,e,o
 						${a}
 					"
         ></div>
-      `})}};s.styles=_,l([u({type:Boolean,reflect:!0})],s.prototype,"loading",2),l([u({attribute:"shimmer-color"})],s.prototype,"shimmerColor",2),l([u({attribute:"background-color"})],s.prototype,"backgroundColor",2),l([u({type:Number})],s.prototype,"duration",2),l([u({type:Number,attribute:"fallback-radius"})],s.prototype,"fallbackRadius",2),l([u({reflect:!0})],s.prototype,"animation",2),l([u({type:Number})],s.prototype,"stagger",2),l([u({type:Number})],s.prototype,"reveal",2),l([u({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],s.prototype,"count",2),l([u({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],s.prototype,"countGap",2),l([k()],s.prototype,"_blocks",2),l([k()],s.prototype,"_revealing",2),s=l([M("phantom-ui")],s);export{s as PhantomUi};
+      `})}};s.styles=_,l([u({type:Boolean,reflect:!0,converter:{fromAttribute:e=>e!==null&&e!=="false",toAttribute:e=>e?"":null}})],s.prototype,"loading",2),l([u({attribute:"shimmer-color"})],s.prototype,"shimmerColor",2),l([u({attribute:"background-color"})],s.prototype,"backgroundColor",2),l([u({type:Number})],s.prototype,"duration",2),l([u({type:Number,attribute:"fallback-radius"})],s.prototype,"fallbackRadius",2),l([u({reflect:!0})],s.prototype,"animation",2),l([u({type:Number})],s.prototype,"stagger",2),l([u({type:Number})],s.prototype,"reveal",2),l([u({type:Number,converter:e=>Math.max(1,Math.round(Number(e)||1))})],s.prototype,"count",2),l([u({type:Number,attribute:"count-gap",converter:e=>Math.max(0,Number(e)||0)})],s.prototype,"countGap",2),l([k()],s.prototype,"_blocks",2),l([k()],s.prototype,"_revealing",2),s=l([M("phantom-ui")],s);export{s as PhantomUi};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@aejkatappaja/phantom-ui",
-	"version": "0.6.1",
+	"version": "0.7.0",
 	"description": "Structure-aware shimmer skeleton loader as a universal Web Component built with Lit. Works with React, Vue, Svelte, Angular, Solid, or vanilla JS.",
 	"repository": {
 		"type": "git",