loading-state-zoo 0.1.2 → 0.2.0

package/docs/components.json

@@ -1,8 +1,9 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$comment": "loading-state-zoo v0.1.0 — machine-readable spec. Source of truth for all 17 components. Defaults match the rendered site.",
+  "$comment": "loading-state-zoo v0.2.0 — machine-readable spec. Source of truth for all 21 components. Defaults match the rendered site.",
   "package": {
     "name": "loading-state-zoo",
+    "version": "0.2.0",
     "entrypoints": {
       "webComponents": "loading-state-zoo",
       "react": "loading-state-zoo/react",
@@ -201,6 +202,33 @@
         "react": "<DotGridWave rows={4} cols={6} size={8} gap={14} />"
       }
     },
+    {
+      "id": "ellipsis",
+      "tag": "lz-ellipsis",
+      "reactComponent": "Ellipsis",
+      "category": "Dots",
+      "role": "status",
+      "description": "Three periods appearing in a typing rhythm.",
+      "useCases": ["chat", "messaging", "text queues"],
+      "defaults": { "size": 8, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 8 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "8px", "purpose": "Dot diameter" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-ellipsis-min", "default": "0.8", "purpose": "Resting dot scale" },
+        { "name": "--lz-ellipsis-fade", "default": "0.15", "purpose": "Resting dot opacity" }
+      ],
+      "examples": {
+        "html": "<lz-ellipsis size=\"10\" color=\"#0a84ff\"></lz-ellipsis>",
+        "react": "<Ellipsis size={10} color=\"#0a84ff\" />"
+      }
+    },
     {
       "id": "arc-spinner",
       "tag": "lz-arc-spinner",
@@ -471,6 +499,37 @@
         "react": "<ProgressRing percent={65} size={56} strokeWidth={6} color=\"#0a84ff\" />"
       }
     },
+    {
+      "id": "progress-bar",
+      "tag": "lz-progress-bar",
+      "reactComponent": "ProgressBar",
+      "category": "Bars & rings",
+      "role": "progressbar",
+      "description": "A determinate linear progress bar filling to a driven percentage.",
+      "useCases": ["uploads", "downloads", "known percent tasks"],
+      "defaults": { "width": 160, "height": 6, "percent": 0, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "width", "reactProp": "width", "type": "number", "unit": "px", "default": 160 },
+        { "name": "height", "reactProp": "height", "type": "number", "unit": "px", "default": 6 },
+        { "name": "percent", "reactProp": "percent", "type": "number", "unit": "0-100", "default": 0 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "rgba(255,255,255,0.15)" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-width", "default": "160px", "purpose": "Bar width" },
+        { "name": "--lz-height", "default": "6px", "purpose": "Bar thickness" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Fill color" },
+        { "name": "--lz-track", "default": "rgba(255,255,255,0.15)", "purpose": "Track color" },
+        { "name": "--lz-percent", "default": "0", "purpose": "Fill percent number" }
+      ],
+      "keyframeVars": [],
+      "a11y": "role=progressbar, aria-valuenow/min/max updated with percent",
+      "examples": {
+        "html": "<lz-progress-bar percent=\"65\" width=\"220\" height=\"8\" color=\"#0a84ff\"></lz-progress-bar>",
+        "react": "<ProgressBar percent={65} width={220} height={8} color=\"#0a84ff\" />"
+      }
+    },
     {
       "id": "indeterminate-progress-bar",
       "tag": "lz-indeterminate-progress-bar",
@@ -528,6 +587,65 @@
         "html": "<lz-skeleton-shimmer width=\"240\" height=\"24\"></lz-skeleton-shimmer>",
         "react": "<SkeletonShimmer width={240} height={24} />"
       }
+    },
+    {
+      "id": "skeleton-card",
+      "tag": "lz-skeleton-card",
+      "reactComponent": "SkeletonCard",
+      "category": "Skeletons",
+      "role": "status",
+      "description": "A composite card skeleton with an avatar circle and text lines under one shared sheen.",
+      "useCases": ["profile cards", "feed items", "user rows"],
+      "defaults": { "width": 200, "height": 64, "speed": 1 },
+      "attributes": [
+        { "name": "width", "reactProp": "width", "type": "number", "unit": "px", "default": 200 },
+        { "name": "height", "reactProp": "height", "type": "number", "unit": "px", "default": 64 },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "#1c1c1e" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-width", "default": "200px", "purpose": "Card width" },
+        { "name": "--lz-height", "default": "64px", "purpose": "Card height" },
+        { "name": "--lz-surface", "default": "#1c1c1e", "purpose": "Block background" },
+        { "name": "--lz-radius", "default": "10px", "purpose": "Corner radius" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-sheen-from", "default": "-120%", "purpose": "Sheen start" },
+        { "name": "--lz-sheen-to", "default": "220%", "purpose": "Sheen end" }
+      ],
+      "examples": {
+        "html": "<lz-skeleton-card width=\"240\" height=\"72\"></lz-skeleton-card>",
+        "react": "<SkeletonCard width={240} height={72} />"
+      }
+    },
+    {
+      "id": "skeleton-list",
+      "tag": "lz-skeleton-list",
+      "reactComponent": "SkeletonList",
+      "category": "Skeletons",
+      "role": "status",
+      "description": "Repeated list rows with avatars and text lines under one shared sheen.",
+      "useCases": ["chat lists", "inbox rows", "search results"],
+      "defaults": { "width": 180, "rows": 4, "speed": 1 },
+      "attributes": [
+        { "name": "width", "reactProp": "width", "type": "number", "unit": "px", "default": 180 },
+        { "name": "rows", "reactProp": "rows", "type": "number", "unit": "rows", "default": 4 },
+        { "name": "track-color", "reactProp": "trackColor", "type": "string", "default": "#1c1c1e" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-width", "default": "180px", "purpose": "List width" },
+        { "name": "--lz-surface", "default": "#1c1c1e", "purpose": "Block background" },
+        { "name": "--lz-radius", "default": "10px", "purpose": "Corner radius" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-sheen-from", "default": "-120%", "purpose": "Sheen start" },
+        { "name": "--lz-sheen-to", "default": "220%", "purpose": "Sheen end" }
+      ],
+      "examples": {
+        "html": "<lz-skeleton-list width=\"220\" rows=\"5\"></lz-skeleton-list>",
+        "react": "<SkeletonList width={220} rows={5} />"
+      }
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loading-state-zoo",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "17 smooth, transform-only loading patterns as framework-agnostic web components with a thin React wrapper. Works in React, plain web, iOS and Android WebViews.",
   "type": "module",
   "main": "./dist/index.cjs",