loading-state-zoo 0.3.0 → 0.4.1

package/dist/theme.css

@@ -161,46 +161,6 @@
     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));
@@ -235,10 +195,10 @@
 }
 @keyframes lz-needle-bob {
   0%, 100% {
-    transform: rotate(38deg);
+    transform: rotate(22deg);
   }
   50% {
-    transform: rotate(43deg);
+    transform: rotate(27deg);
   }
 }
 .lz-bouncing-dots {
@@ -396,20 +356,57 @@
   border-radius: 50%;
   border: 1px solid var(--lz-track, rgba(255, 255, 255, 0.12));
 }
+.lz-scan-sweep .lz-dial {
+  position: absolute;
+  inset: 0.075em;
+  border-radius: 50%;
+  border: 1px dashed rgba(255, 255, 255, 0.1);
+  animation: lz-spin-reverse calc(12s * var(--lz-speed, 1)) linear infinite;
+}
 .lz-scan-sweep .lz-ring-inner {
   position: absolute;
-  inset: 0.28em;
+  inset: 0.27em;
   border-radius: 50%;
   border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
 }
-.lz-scan-sweep .lz-core {
+.lz-scan-sweep .lz-tick-slot {
   position: absolute;
-  width: 0.14em;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+}
+.lz-scan-sweep .lz-tick {
+  position: absolute;
+  left: -0.025em;
+  top: 0;
+  width: 0.05em;
   height: 0.14em;
-  left: 0.43em;
-  top: 0.43em;
+  border-radius: 1px;
+  background: var(--lz-color-weak, rgba(245, 245, 247, 0.8));
+}
+.lz-scan-sweep .lz-tick.short {
+  height: 0.09em;
+}
+.lz-scan-sweep .lz-core-ring {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.26em;
+  height: 0.26em;
+  margin: -0.13em 0 0 -0.13em;
+  border-radius: 50%;
+  border: 1px solid var(--lz-track-weak, rgba(255, 255, 255, 0.08));
+}
+.lz-scan-sweep .lz-core {
+  position: absolute;
+  width: 0.1em;
+  height: 0.1em;
+  left: 0.45em;
+  top: 0.45em;
   border-radius: 50%;
   background: var(--lz-color-weak, rgba(245, 245, 247, 0.8));
+  box-shadow: 0 0 0.18em 0.03em color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent);
 }
 .lz-scan-sweep .lz-sweep {
   position: absolute;
@@ -419,11 +416,33 @@
     conic-gradient(
       from 0deg,
       var(--lz-color, #f5f5f7) 0deg,
-      var(--lz-color-sweep, rgba(245, 245, 247, 0.08)) 60deg,
-      transparent 90deg);
+      var(--lz-color-sweep, rgba(245, 245, 247, 0.08)) 8deg,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 5%, transparent) 55deg,
+      transparent 95deg);
   -webkit-mask: radial-gradient(closest-side, #000 100%);
   mask: radial-gradient(closest-side, #000 100%);
-  animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
+  animation: lz-spin calc(4s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-scan-sweep .lz-sweep-edge {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      var(--lz-color, #f5f5f7) 0deg,
+      transparent 5deg);
+  -webkit-mask:
+    radial-gradient(
+      farthest-side,
+      transparent calc(100% - 0.07em),
+      #000 calc(100% - 0.07em));
+  mask:
+    radial-gradient(
+      farthest-side,
+      transparent calc(100% - 0.07em),
+      #000 calc(100% - 0.07em));
+  animation: lz-spin calc(4s * var(--lz-speed, 1)) linear infinite;
 }
 .lz-orbit-dots {
   position: relative;
@@ -755,210 +774,6 @@
       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;
@@ -985,40 +800,122 @@
   position: absolute;
   inset: 0;
   border-radius: 50%;
+  overflow: hidden;
   background:
     repeating-radial-gradient(
       circle at 50% 50%,
-      rgba(255, 255, 255, 0.06) 0 1px,
+      rgba(255, 255, 255, 0.055) 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%);
+      rgba(255, 255, 255, 0.05) 0 17%,
+      rgba(0, 0, 0, 0.22) 17% 18%,
+      transparent 18% 20%,
+      rgba(255, 255, 255, 0.045) 20% 21%,
+      transparent 21% 100%),
+    radial-gradient(circle at 50% 50%, #141216 0 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;
+  animation: lz-spin calc(7s * var(--lz-speed, 1)) linear infinite;
 }
-.lz-vinyl .lz-needle {
+.lz-vinyl .lz-disc::before {
+  content: "";
   position: absolute;
-  top: 0.08em;
-  right: 0.18em;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      112deg,
+      transparent 26%,
+      rgba(255, 255, 255, 0.17) 40%,
+      rgba(255, 255, 255, 0.04) 49%,
+      transparent 62%);
+}
+.lz-vinyl .lz-label {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.5em;
+  height: 0.5em;
+  margin: -0.25em 0 0 -0.25em;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 36% 30%,
+      rgba(255, 255, 255, 0.35) 0 5%,
+      transparent 6%),
+    radial-gradient(
+      circle at 63% 68%,
+      rgba(0, 0, 0, 0.4) 0 7%,
+      transparent 8%),
+    var(--lz-accent, #0a84ff);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
+}
+.lz-vinyl .lz-spindle {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0.09em;
+  height: 0.09em;
+  margin: -0.045em 0 0 -0.045em;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.9);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+.lz-vinyl .lz-arm {
+  position: absolute;
+  top: 0.05em;
+  right: 0.06em;
+  width: 0.8em;
+  height: 0.8em;
+  transform-origin: top right;
+  animation: lz-needle-bob calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-vinyl .lz-post {
+  position: absolute;
+  right: -0.01em;
+  top: -0.01em;
+  width: 0.13em;
+  height: 0.13em;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 35% 30%,
+      var(--lz-color, #f5f5f7) 0 42%,
+      color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, transparent) 100%);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
+.lz-vinyl .lz-shaft {
+  position: absolute;
+  right: 0.045em;
+  top: 0.02em;
   width: 0.06em;
-  height: 0.7em;
+  height: 0.48em;
   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;
+  background: linear-gradient(var(--lz-color, #f5f5f7), color-mix(in srgb, var(--lz-color, #f5f5f7) 35%, transparent));
+  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
+  transform-origin: top center;
+  transform: rotate(24deg);
 }
-.lz-vinyl .lz-needle .lz-tip {
+.lz-vinyl .lz-shaft::before {
+  content: "";
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0.1em;
-  height: 0.1em;
-  margin-left: -0.05em;
-  transform: translateY(0.1em);
+  top: -0.035em;
+  left: -0.04em;
+  width: 0.14em;
+  height: 0.14em;
   border-radius: 50%;
-  background: var(--lz-accent, #0a84ff);
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
+}
+.lz-vinyl .lz-shaft::after {
+  content: "";
+  position: absolute;
+  bottom: -0.05em;
+  left: 0.005em;
+  width: 0.05em;
+  height: 0.1em;
+  border-radius: 0 0 3px 3px;
+  background: color-mix(in srgb, var(--lz-accent, #0a84ff) 75%, white);
 }
 .lz-sonar {
   position: relative;
@@ -1054,25 +951,51 @@
 }
 .lz-music-note {
   display: flex;
-  align-items: baseline;
-  gap: 0.45em;
+  align-items: center;
+  gap: 0.5em;
   font-size: var(--lz-size, 32px);
   line-height: 1;
 }
 .lz-music-note .lz-note {
+  position: relative;
   display: inline-block;
-  line-height: 1;
-  color: var(--lz-color, #f5f5f7);
+  width: 0.42em;
+  height: 0.88em;
   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-head {
+  position: absolute;
+  left: 0;
+  bottom: 0.06em;
+  width: 0.3em;
+  height: 0.24em;
+  border-radius: 55% 45% 50% 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: inset -0.045em -0.02em 0 color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, #000);
+  transform: rotate(-18deg);
 }
-.lz-music-note .lz-note:nth-child(3) {
-  animation-delay: -0.9s;
+.lz-music-note .lz-stem {
+  position: absolute;
+  left: 0.175em;
+  bottom: 0.13em;
+  width: 0.045em;
+  height: 0.6em;
+  border-radius: 2px;
+  background: var(--lz-color, #f5f5f7);
 }
-.lz-music-note .lz-note:nth-child(4) {
-  animation-delay: -0.3s;
+.lz-music-note .lz-flag {
+  position: absolute;
+  left: 0.22em;
+  bottom: 0.61em;
+  width: 0.24em;
+  height: 0.2em;
+  border: 0.045em solid var(--lz-color, #f5f5f7);
+  border-left: none;
+  border-top: none;
+  border-radius: 0 0 0.14em 0.02em / 0 0 0.26em 0.02em;
+}
+.lz-music-note .lz-note.second .lz-head {
+  background: color-mix(in srgb, var(--lz-color, #f5f5f7) 45%, var(--lz-accent, #0a84ff));
 }
 .lz-activity-rings {
   width: var(--lz-size, 44px);

package/docs/AI.md

@@ -5,9 +5,10 @@
 ## Package identity
 
 - Package name: `loading-state-zoo`
-- 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.
+- Version: `0.4.1`
+- 26 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.
+- **Recommended production version:** `^0.4.1` is the stable line; use it for production installs.
 
 ## Entry points (exact import strings)
 
@@ -40,24 +41,22 @@
    - Bars/skeletons: use `width` + `height` instead (Indeterminate 160×6, Skeleton 120×28), Equalizer uses `size` = bar height (22).
 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 (32)
+## Component registry (26)
 
 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`
+Spinners: `lz-arc-spinner`, `lz-material-double-arc`, `lz-scan-sweep`, `lz-orbit-dots`, `lz-orbit-ring-dots`, `lz-sonar`
 Shapes: `lz-eyes`, `lz-morphing-square`, `lz-breathing-pulse`
 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`
+Music: `lz-waveform`, `lz-vinyl`, `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)`. Sized elements (progress bars, skeletons) take explicit `width`/`height` instead. New families:
+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. Family notes:
 
-- **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-sonar`** lives in the Spinners family (radar use).
+- **Music** patterns: `lz-waveform` (`count`, `bar-width`, `gap`), `lz-vinyl` (label/spindle/sheen rotate with a slow-spinning disc; `accent` = label/stylus, `color` = tonearm — disc spins over 7s so the motion reads as a record turning, not a blur), `lz-music-note` (drawn note = head + stem + flag, `count` notes).
+- **`lz-scan-sweep`** radar sweep rotates over 4s (dial counter-rotates over 12s). Slower means calmer — the sweep stays legible instead of whipping round.
 - **`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
 
 Web: