loading-state-zoo 0.2.0 → 0.3.0

package/dist/theme.css

@@ -151,6 +151,96 @@
     transform: scale(var(--lz-ellipsis-min, 0.8));
   }
 }
+@keyframes lz-orb-breathe {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(var(--lz-orb-scale, 1.16));
+    opacity: var(--lz-orb-fade, 0.88);
+  }
+}
+@keyframes lz-blob-morph {
+  0% {
+    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
+    transform: rotate(6deg) scale(1.06);
+  }
+  50% {
+    border-radius: 46% 54% 48% 52% / 48% 55% 45% 52%;
+    transform: rotate(-5deg) scale(0.95);
+  }
+  75% {
+    border-radius: 55% 45% 52% 48% / 46% 52% 48% 55%;
+    transform: rotate(3deg) scale(1.05);
+  }
+  100% {
+    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
+    transform: rotate(0deg) scale(1);
+  }
+}
+@keyframes lz-siri-sheen {
+  0% {
+    transform: translate3d(-24%, -14%, 0) rotate(0deg);
+  }
+  100% {
+    transform: translate3d(24%, 14%, 0) rotate(360deg);
+  }
+}
+@keyframes lz-dot-orb {
+  0%, 100% {
+    opacity: var(--lz-orb-fade, 0.14);
+    transform: scale(var(--lz-dot-min, 0.7));
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes lz-waveform {
+  0%, 100% {
+    transform: scaleY(var(--lz-wf-min, 0.22));
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+@keyframes lz-sonar-ring {
+  0% {
+    transform: scale(0.18);
+    opacity: var(--lz-sonar-fade, 0.9);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes lz-note-bob {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  45% {
+    transform: translateY(var(--lz-note-bob, 0.35em));
+  }
+  60% {
+    transform: rotate(4deg) translateY(var(--lz-note-bob, 0.35em));
+  }
+  75% {
+    transform: rotate(-4deg) translateY(var(--lz-note-bob, 0.35em));
+  }
+}
+@keyframes lz-needle-bob {
+  0%, 100% {
+    transform: rotate(38deg);
+  }
+  50% {
+    transform: rotate(43deg);
+  }
+}
 .lz-bouncing-dots {
   display: flex;
   gap: 0.7em;
@@ -665,3 +755,364 @@
       transparent);
   animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
 }
+.lz-pulsing-orb {
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 35% 32%,
+      var(--lz-accent, #0a84ff) 0%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 55%,
+      transparent 72%);
+  box-shadow: 0 0 calc(0.5 * var(--lz-size, 44px)) color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent);
+  animation: lz-orb-breathe calc(2.2s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-morphing-orb {
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+  background:
+    radial-gradient(
+      circle at 34% 30%,
+      var(--lz-accent, #0a84ff) 0%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 60%, transparent) 62%,
+      transparent 78%);
+  box-shadow: 0 0 calc(0.55 * var(--lz-size, 44px)) color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
+  animation: lz-blob-morph calc(3.4s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-siri-orb {
+  position: relative;
+  overflow: hidden;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 30% 28%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white) 0%,
+      transparent 60%);
+  animation: lz-orb-breathe calc(2.6s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-siri-orb .lz-sheen {
+  position: absolute;
+  width: calc(2.4 * var(--lz-size, 44px));
+  height: calc(2.4 * var(--lz-size, 44px));
+  left: 50%;
+  top: 50%;
+  margin: -1.2em 0 0 -1.2em;
+  background:
+    conic-gradient(
+      from 0deg at 50% 50%,
+      transparent 0deg,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 55%, transparent) 40deg,
+      transparent 90deg,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent) 150deg,
+      transparent 200deg,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 50%, transparent) 270deg,
+      transparent 360deg);
+  animation: lz-siri-sheen calc(5s * var(--lz-speed, 1)) linear infinite;
+  opacity: 0.9;
+}
+.lz-dot-orb {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-dot-orb .lz-slot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+}
+.lz-dot-orb .lz-dot {
+  position: absolute;
+  left: -0.08em;
+  top: -0.08em;
+  width: 0.16em;
+  height: 0.16em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  animation: lz-dot-orb calc(2s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-dot-orb .lz-slot:nth-child(1) {
+  transform: rotate(0deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(2) {
+  transform: rotate(45deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(3) {
+  transform: rotate(90deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(4) {
+  transform: rotate(135deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(5) {
+  transform: rotate(180deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(6) {
+  transform: rotate(225deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(7) {
+  transform: rotate(270deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(8) {
+  transform: rotate(315deg) translateY(-0.32em);
+}
+.lz-dot-orb .lz-slot:nth-child(odd) .lz-dot {
+  animation-delay: -0.25s;
+}
+.lz-planet-orb {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-planet-orb .lz-core {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.42em;
+  height: 0.42em;
+  margin: -0.21em 0 0 -0.21em;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, white) 0%,
+      var(--lz-accent, #0a84ff) 50%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 40%, transparent) 100%);
+  box-shadow: 0 0 calc(0.3em) color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent);
+  animation: lz-orb-breathe calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-planet-orb .lz-orbit {
+  position: absolute;
+  inset: 0;
+  animation: lz-spin calc(2.2s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-planet-orb .lz-moon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.14em;
+  height: 0.14em;
+  margin: -0.07em 0 0 -0.07em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: 0 0 calc(0.16em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
+}
+.lz-planet-orb .lz-moon:nth-child(1) {
+  transform: rotate(0deg) translateX(0.36em);
+}
+.lz-planet-orb .lz-moon:nth-child(2) {
+  transform: rotate(180deg) translateX(0.36em);
+}
+.lz-planet-orb .lz-moon:nth-child(3) {
+  transform: rotate(120deg) translateX(0.36em);
+}
+.lz-planet-orb .lz-moon:nth-child(4) {
+  transform: rotate(240deg) translateX(0.36em);
+}
+.lz-planet-orb .lz-moon:nth-child(5) {
+  transform: rotate(72deg) translateX(0.36em);
+}
+.lz-aura-orb {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-aura-orb .lz-layer {
+  position: absolute;
+  inset: 0;
+  animation: lz-spin calc(3s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-aura-orb .lz-layer.a {
+  animation-duration: calc(2.6s * var(--lz-speed, 1));
+}
+.lz-aura-orb .lz-layer.b {
+  animation-name: lz-spin-reverse;
+  animation-duration: calc(3.4s * var(--lz-speed, 1));
+}
+.lz-aura-orb .lz-orb {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.78em;
+  height: 0.78em;
+  margin: -0.39em 0 0 -0.39em;
+  border-radius: 50%;
+  transform: translateX(0.14em);
+}
+.lz-aura-orb .lz-layer.a .lz-orb {
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 90%, transparent) 0%,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 40%, transparent) 62%,
+      transparent 76%);
+}
+.lz-aura-orb .lz-layer.b .lz-orb {
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      var(--lz-accent, #0a84ff) 0%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 62%,
+      transparent 76%);
+  opacity: 0.9;
+}
+.lz-waveform {
+  display: flex;
+  align-items: center;
+  gap: var(--lz-gap, 4px);
+}
+.lz-waveform .lz-bar {
+  width: var(--lz-bar-width, 4px);
+  height: var(--lz-size, 32px);
+  border-radius: 2px;
+  transform-origin: center;
+  background: var(--lz-color, #f5f5f7);
+  animation: lz-waveform calc(1.6s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-waveform .lz-bar.accent {
+  background: var(--lz-accent, #0a84ff);
+}
+.lz-vinyl {
+  position: relative;
+  width: 2.2em;
+  height: 2.2em;
+  font-size: var(--lz-size, 48px);
+}
+.lz-vinyl .lz-disc {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    repeating-radial-gradient(
+      circle at 50% 50%,
+      rgba(255, 255, 255, 0.06) 0 1px,
+      transparent 1px 4px),
+    radial-gradient(
+      circle at 50% 50%,
+      var(--lz-accent, #0a84ff) 0 13%,
+      rgba(0, 0, 0, 0.88) 14% 100%);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+  animation: lz-spin calc(3.5s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-vinyl .lz-needle {
+  position: absolute;
+  top: 0.08em;
+  right: 0.18em;
+  width: 0.06em;
+  height: 0.7em;
+  border-radius: 3px;
+  background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 30%, transparent));
+  transform: rotate(38deg);
+  transform-origin: top right;
+  animation: lz-needle-bob calc(1.8s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-vinyl .lz-needle .lz-tip {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0.1em;
+  height: 0.1em;
+  margin-left: -0.05em;
+  transform: translateY(0.1em);
+  border-radius: 50%;
+  background: var(--lz-accent, #0a84ff);
+}
+.lz-sonar {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-sonar .lz-core {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.18em;
+  height: 0.18em;
+  margin: -0.09em 0 0 -0.09em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: 0 0 calc(0.2em) color-mix(in srgb, var(--lz-color, #f5f5f7) 50%, transparent);
+}
+.lz-sonar .lz-ring {
+  position: absolute;
+  inset: 0.14em;
+  border-radius: 50%;
+  border: 1px solid var(--lz-accent, #0a84ff);
+  animation: lz-sonar-ring calc(3.6s * var(--lz-speed, 1)) cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
+}
+.lz-sonar .lz-ring:nth-child(2) {
+  animation-delay: -1.2s;
+}
+.lz-sonar .lz-ring:nth-child(3) {
+  animation-delay: -2.4s;
+}
+.lz-sonar .lz-ring:nth-child(4) {
+  animation-delay: -0.9s;
+}
+.lz-music-note {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45em;
+  font-size: var(--lz-size, 32px);
+  line-height: 1;
+}
+.lz-music-note .lz-note {
+  display: inline-block;
+  line-height: 1;
+  color: var(--lz-color, #f5f5f7);
+  animation: lz-note-bob calc(1.4s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-music-note .lz-note:nth-child(2) {
+  animation-delay: -0.5s;
+}
+.lz-music-note .lz-note:nth-child(3) {
+  animation-delay: -0.9s;
+}
+.lz-music-note .lz-note:nth-child(4) {
+  animation-delay: -0.3s;
+}
+.lz-activity-rings {
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-activity-rings svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.lz-activity-rings .lz-g {
+  animation: lz-spin calc(2.8s * var(--lz-speed, 1)) linear infinite;
+  transform-origin: center;
+}
+.lz-activity-rings .lz-g.mid {
+  animation-duration: calc(3.6s * var(--lz-speed, 1));
+  animation-direction: reverse;
+}
+.lz-activity-rings .lz-g.inner {
+  animation-duration: calc(2.1s * var(--lz-speed, 1));
+}
+.lz-activity-rings .lz-track {
+  fill: none;
+  stroke: var(--lz-track, rgba(255, 255, 255, 0.08));
+  stroke-width: 5;
+}
+.lz-activity-rings .lz-ring {
+  fill: none;
+  stroke-linecap: round;
+  stroke-width: 5;
+}
+.lz-activity-rings .lz-outer {
+  stroke: var(--lz-accent, #fa114f);
+  stroke-dasharray: 209 58;
+}
+.lz-activity-rings .lz-mid {
+  stroke: var(--lz-color, #30d158);
+  stroke-dasharray: 169 48;
+}
+.lz-activity-rings .lz-inner {
+  stroke: var(--lz-color-weak, #32d7ff);
+  stroke-dasharray: 128 39;
+}

package/docs/AI.md

@@ -5,8 +5,8 @@
 ## Package identity
 
 - Package name: `loading-state-zoo`
-- Version: `0.1.0`
-- 17 loading-pattern UI components. All are *web components* (custom elements) with a thin React wrapper plus a standalone CSS theme.
+- Version: `0.3.0`
+- 32 loading-pattern UI components. All are *web components* (custom elements) with a thin React wrapper plus a standalone CSS theme.
 - License: MIT. No data collection of any kind.
 
 ## Entry points (exact import strings)
@@ -38,17 +38,25 @@
    - Dots: dot diameter (default 8 → Helix/Grid 6).
    - Spinners/shapes: the square bounding box (default 44 → Breathing 36).
    - Bars/skeletons: use `width` + `height` instead (Indeterminate 160×6, Skeleton 120×28), Equalizer uses `size` = bar height (22).
-7. **Progress ring is static** (driven by `percent` 0–100, clamped; `role="progressbar"` with live `aria-valuenow`). It does not animate by itself.
+7. **Progress ring and progress bar are static** (driven by `percent` 0–100, clamped; `role="progressbar"` with live `aria-valuenow`). They do not animate by themselves.
 
-## Component registry (17)
+## Component registry (32)
 
-Dots: `lz-bouncing-dots`, `lz-typing-dots`, `lz-wave-dots`, `lz-helix-dots`, `lz-dot-grid-wave`
+Dots: `lz-bouncing-dots`, `lz-typing-dots`, `lz-wave-dots`, `lz-helix-dots`, `lz-dot-grid-wave`, `lz-ellipsis`
 Spinners: `lz-arc-spinner`, `lz-material-double-arc`, `lz-scan-sweep`, `lz-orbit-dots`, `lz-orbit-ring-dots`
+Orbs: `lz-pulsing-orb`, `lz-morphing-orb`, `lz-siri-orb`, `lz-dot-orb`, `lz-planet-orb`, `lz-aura-orb`
 Shapes: `lz-eyes`, `lz-morphing-square`, `lz-breathing-pulse`
-Bars & rings: `lz-equalizer`, `lz-progress-ring`, `lz-indeterminate-progress-bar`
-Skeletons: `lz-skeleton-shimmer`
+Bars & rings: `lz-equalizer`, `lz-progress-ring`, `lz-progress-bar`, `lz-indeterminate-progress-bar`, `lz-activity-rings`
+Music: `lz-waveform`, `lz-vinyl`, `lz-sonar`, `lz-music-note`
+Skeletons: `lz-skeleton-shimmer`, `lz-skeleton-card`, `lz-skeleton-list`
 
-Every element: shadow DOM (`mode:"open"`), inline `<style>` per element (shared keyframes string), geometry in `em` relative to host `font-size: var(--lz-size, 44px)`.
+Every element: shadow DOM (`mode:"open"`), inline `<style>` per element (shared keyframes string), geometry in `em` relative to host `font-size: var(--lz-size, 44px)`. Sized elements (progress bars, skeletons) take explicit `width`/`height` instead. New families:
+
+- **Orbs** use `accent` as their primary hue (default `#0a84ff`); `lz-dot-orb` and `lz-planet-orb` also accept `count`; `lz-planet-orb`/`lz-aura-orb` use `color` for moons/second orb.
+- **Music** patterns: `lz-waveform` (`count`, `bar-width`, `gap`), `lz-vinyl` (`accent` = label/stylus, `color` = tonearm), `lz-sonar` (`count` rings, `accent` = ring, `color` = core), `lz-music-note` (`count` notes).
+- **`lz-activity-rings`** is SVG-based (role `img`), defaults to Apple watch hues: outer `accent` `#fa114f`, middle `color` `#30d158`, inner `color-weak` `#32d7ff`; three rings rotate via `lz-spin` / reverse at distinct durations.
+
+Every element: shadow DOM (`mode:"open"`), inline `<style>` per element (shared keyframes string), geometry in `em` relative to host `font-size: var(--lz-size, 44px)`. Sized elements (progress bars, skeletons) take explicit `width`/`height` instead.
 
 ## Minimal valid usage