loading-state-zoo 0.1.2 → 0.3.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.3.0 — machine-readable spec. Source of truth for all 32 components. Defaults match the rendered site.",
   "package": {
     "name": "loading-state-zoo",
+    "version": "0.3.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,360 @@
         "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} />"
+      }
+    },
+    {
+      "id": "pulsing-orb",
+      "tag": "lz-pulsing-orb",
+      "reactComponent": "PulsingOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "A glowing gradient orb that breathes in and out.",
+      "useCases": ["ambient loads", "hero panels", "app splash"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Orb glow color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-orb-scale", "default": "1.16", "purpose": "Peak breathe scale" },
+        { "name": "--lz-orb-fade", "default": "0.88", "purpose": "Peak breathe opacity" }
+      ],
+      "examples": {
+        "html": "<lz-pulsing-orb size=\"64\" accent=\"#ff375f\"></lz-pulsing-orb>",
+        "react": "<PulsingOrb size={64} accent=\"#ff375f\" />"
+      }
+    },
+    {
+      "id": "morphing-orb",
+      "tag": "lz-morphing-orb",
+      "reactComponent": "MorphingOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "A blob that continuously morphs its silhouette between rounded shapes.",
+      "useCases": ["creative waits", "brand moments", "game loading"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Blob box size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Blob color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-morphing-orb size=\"64\" accent=\"#30d158\"></lz-morphing-orb>",
+        "react": "<MorphingOrb size={64} accent=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "siri-orb",
+      "tag": "lz-siri-orb",
+      "reactComponent": "SiriOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "A Siri-style orb with a multicolored conic sheen swirling inside.",
+      "useCases": ["voice assistants", "AI thinking", "smart waits"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Sheen hue" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-siri-orb size=\"72\" accent=\"#64d2ff\"></lz-siri-orb>",
+        "react": "<SiriOrb size={72} accent=\"#64d2ff\" />"
+      }
+    },
+    {
+      "id": "dot-orb",
+      "tag": "lz-dot-orb",
+      "reactComponent": "DotOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "A ring of shimmering dots arranged into an orb silhouette.",
+      "useCases": ["orbit waits", "spatial loading", "gaming screens"],
+      "defaults": { "size": 44, "count": 8, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "dots", "default": 8 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb diameter" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Dot color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-dot-min", "default": "0.7", "purpose": "Resting dot scale" },
+        { "name": "--lz-orb-fade", "default": "0.14", "purpose": "Resting dot opacity" }
+      ],
+      "examples": {
+        "html": "<lz-dot-orb count=\"12\" color=\"#ff9f0a\"></lz-dot-orb>",
+        "react": "<DotOrb count={12} color=\"#ff9f0a\" />"
+      }
+    },
+    {
+      "id": "planet-orb",
+      "tag": "lz-planet-orb",
+      "reactComponent": "PlanetOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "A glowing planet core with small moons orbiting it.",
+      "useCases": ["space motifs", "science apps", "sci-fi waits"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "count": 2, "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "moons", "default": 2 },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Planet color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Moon color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-planet-orb count=\"3\" accent=\"#bf5af2\" color=\"#64d2ff\"></lz-planet-orb>",
+        "react": "<PlanetOrb count={3} accent=\"#bf5af2\" color=\"#64d2ff\" />"
+      }
+    },
+    {
+      "id": "aura-orb",
+      "tag": "lz-aura-orb",
+      "reactComponent": "AuraOrb",
+      "category": "Orbs",
+      "role": "status",
+      "description": "Two tinted orbs counter-rotating in overlapping orbits.",
+      "useCases": ["gradient waits", "brand palettes", "hero backgrounds"],
+      "defaults": { "size": 44, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Orb box size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Counter orb color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Primary orb color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-aura-orb accent=\"#ff375f\" color=\"#64d2ff\"></lz-aura-orb>",
+        "react": "<AuraOrb accent=\"#ff375f\" color=\"#64d2ff\" />"
+      }
+    },
+    {
+      "id": "waveform",
+      "tag": "lz-waveform",
+      "reactComponent": "Waveform",
+      "category": "Music",
+      "role": "status",
+      "description": "A mirrored audio waveform pulsing around a center line.",
+      "useCases": ["audio apps", "playing states", "podcast waits"],
+      "defaults": { "size": 32, "count": 11, "color": "#f5f5f7", "accent": "#0a84ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "bars", "default": 11 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "32px", "purpose": "Wave height" },
+        { "name": "--lz-bar-width", "default": "4px", "purpose": "Bar thickness" },
+        { "name": "--lz-gap", "default": "4px", "purpose": "Bar spacing" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-wf-min", "default": "0.22", "purpose": "Resting bar scale" }
+      ],
+      "examples": {
+        "html": "<lz-waveform count=\"15\" accent=\"#bf5af2\"></lz-waveform>",
+        "react": "<Waveform count={15} accent=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "vinyl",
+      "tag": "lz-vinyl",
+      "reactComponent": "Vinyl",
+      "category": "Music",
+      "role": "status",
+      "description": "A spinning record with a gently bobbing tonearm.",
+      "useCases": ["music apps", "retro waits", "album screens"],
+      "defaults": { "size": 48, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 48 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "48px", "purpose": "Record diameter" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Label / stylus color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Tonearm color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-vinyl accent=\"#fa114f\" color=\"#f5f5f7\"></lz-vinyl>",
+        "react": "<Vinyl accent=\"#fa114f\" />"
+      }
+    },
+    {
+      "id": "sonar",
+      "tag": "lz-sonar",
+      "reactComponent": "Sonar",
+      "category": "Music",
+      "role": "status",
+      "description": "A pulsing core emitting expanding sonar rings.",
+      "useCases": ["audio pulses", "location pings", "motion waits"],
+      "defaults": { "size": 44, "count": 3, "accent": "#0a84ff", "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "rings", "default": 3 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#0a84ff" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Radar size" },
+        { "name": "--lz-accent", "default": "#0a84ff", "purpose": "Ring color" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Core color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-sonar-fade", "default": "0.9", "purpose": "Ring start opacity" }
+      ],
+      "examples": {
+        "html": "<lz-sonar count=\"4\" accent=\"#30d158\"></lz-sonar>",
+        "react": "<Sonar count={4} accent=\"#30d158\" />"
+      }
+    },
+    {
+      "id": "music-note",
+      "tag": "lz-music-note",
+      "reactComponent": "MusicNote",
+      "category": "Music",
+      "role": "status",
+      "description": "Musical note glyphs bobbing in a sing-song rhythm.",
+      "useCases": ["music players", "karaoke", "playful waits"],
+      "defaults": { "size": 32, "count": 2, "color": "#f5f5f7", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 32 },
+        { "name": "count", "reactProp": "count", "type": "number", "unit": "notes", "default": 2 },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#f5f5f7" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "32px", "purpose": "Note size" },
+        { "name": "--lz-color", "default": "#f5f5f7", "purpose": "Note color" }
+      ],
+      "keyframeVars": [
+        { "name": "--lz-note-bob", "default": "0.35em", "purpose": "Note bob height" }
+      ],
+      "examples": {
+        "html": "<lz-music-note count=\"3\" color=\"#bf5af2\"></lz-music-note>",
+        "react": "<MusicNote count={3} color=\"#bf5af2\" />"
+      }
+    },
+    {
+      "id": "activity-rings",
+      "tag": "lz-activity-rings",
+      "reactComponent": "ActivityRings",
+      "category": "Bars & rings",
+      "role": "img",
+      "description": "Three Apple Watch-style activity rings spinning at different speeds and directions.",
+      "useCases": ["fitness apps", "health dashboards", "workout sync"],
+      "defaults": { "size": 44, "accent": "#fa114f", "color": "#30d158", "colorWeak": "#32d7ff", "speed": 1 },
+      "attributes": [
+        { "name": "size", "reactProp": "size", "type": "number", "unit": "px", "default": 44 },
+        { "name": "accent", "reactProp": "accent", "type": "string", "default": "#fa114f" },
+        { "name": "color", "reactProp": "color", "type": "string", "default": "#30d158" },
+        { "name": "color-weak", "reactProp": "colorWeak", "type": "string", "default": "#32d7ff" },
+        { "name": "speed", "reactProp": "speed", "type": "number", "default": 1 }
+      ],
+      "cssVars": [
+        { "name": "--lz-size", "default": "44px", "purpose": "Ring box size" },
+        { "name": "--lz-accent", "default": "#fa114f", "purpose": "Outer ring color" },
+        { "name": "--lz-color", "default": "#30d158", "purpose": "Middle ring color" },
+        { "name": "--lz-color-weak", "default": "#32d7ff", "purpose": "Inner ring color" }
+      ],
+      "keyframeVars": [],
+      "examples": {
+        "html": "<lz-activity-rings size=\"64\"></lz-activity-rings>",
+        "react": "<ActivityRings size={64} />"
+      }
     }
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loading-state-zoo",
-  "version": "0.1.2",
-  "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.",
+  "version": "0.3.0",
+  "description": "32 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",
   "module": "./dist/index.js",