loading-state-zoo 0.2.0 → 0.4.0

package/dist/theme.css

@@ -151,6 +151,84 @@
     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-ios-glow {
+  0%, 100% {
+    opacity: var(--lz-ios-fade, 0.2);
+    transform: scale(var(--lz-ios-min, 0.5));
+  }
+  35% {
+    opacity: 1;
+    transform: scale(var(--lz-ios-peak, 1.25));
+  }
+  50% {
+    opacity: 1;
+    transform: scale(var(--lz-ios-peak, 1.25));
+  }
+}
+@keyframes lz-ai-sparkle {
+  0%, 100% {
+    opacity: 0;
+    transform: scale(0.1) rotate(0deg);
+  }
+  20% {
+    opacity: 1;
+    transform: scale(1) rotate(8deg);
+  }
+  45% {
+    opacity: 0;
+    transform: scale(1.35) rotate(14deg);
+  }
+}
+@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(22deg);
+  }
+  50% {
+    transform: rotate(27deg);
+  }
+}
 .lz-bouncing-dots {
   display: flex;
   gap: 0.7em;
@@ -306,20 +384,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(10s * 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;
@@ -329,12 +444,34 @@
     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;
 }
+.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(2.5s * var(--lz-speed, 1)) linear infinite;
+}
 .lz-orbit-dots {
   position: relative;
   width: var(--lz-size, 44px);
@@ -665,3 +802,414 @@
       transparent);
   animation: lz-skeleton-sheen calc(1.4s * var(--lz-speed, 1)) linear infinite;
 }
+.lz-ios-27-orb {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-ios-27-orb .lz-slot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 0;
+  height: 0;
+}
+.lz-ios-27-orb .lz-dot {
+  position: absolute;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0.12em 0.05em currentColor;
+  animation: lz-ios-glow calc(3.2s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-ai-orb {
+  position: relative;
+  width: var(--lz-size, 44px);
+  height: var(--lz-size, 44px);
+}
+.lz-ai-orb .lz-orb {
+  position: absolute;
+  inset: 0.08em;
+  border-radius: 50%;
+  background:
+    radial-gradient(
+      circle at 34% 32%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 18%, white) 0%,
+      var(--lz-accent, #0a84ff) 40%,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 45%, transparent) 74%,
+      transparent 100%);
+  box-shadow: 0 0 0.5em color-mix(in srgb, var(--lz-accent, #0a84ff) 35%, transparent);
+  animation: lz-orb-breathe calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-ai-orb .lz-orbit {
+  position: absolute;
+  inset: 0;
+  animation: lz-spin calc(4.5s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-ai-orb .lz-light {
+  position: absolute;
+  left: 50%;
+  top: calc(50% - 0.46em);
+  width: 0.13em;
+  height: 0.13em;
+  margin-left: -0.065em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  box-shadow: 0 0 0.22em 0.05em color-mix(in srgb, var(--lz-color, #f5f5f7) 55%, transparent);
+  animation: lz-pulse-breath calc(1.1s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-ai-orb .lz-sparkle {
+  position: absolute;
+  width: 0.28em;
+  height: 0.28em;
+  animation: lz-ai-sparkle calc(3s * var(--lz-speed, 1)) ease-in-out infinite;
+}
+.lz-ai-orb .lz-sparkle::before,
+.lz-ai-orb .lz-sparkle::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--lz-color, #f5f5f7);
+}
+.lz-ai-orb .lz-sparkle::before {
+  clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
+}
+.lz-ai-orb .lz-sparkle::after {
+  clip-path: polygon(50% 0, 58% 50%, 50% 100%, 42% 50%);
+  transform: rotate(90deg);
+}
+.lz-ai-orb .lz-sparkle.a {
+  right: 0.01em;
+  top: -0.01em;
+}
+.lz-ai-orb .lz-sparkle.b {
+  left: -0.01em;
+  bottom: 0.02em;
+  animation-delay: -1.5s;
+}
+.lz-ai-thinking {
+  position: relative;
+  width: 2.1em;
+  height: 0.66em;
+  font-size: var(--lz-size, 40px);
+}
+.lz-ai-thinking .lz-field {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.32em;
+  border-radius: 999px;
+  background: var(--lz-surface, rgba(255, 255, 255, 0.07));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lz-color, #f5f5f7) 12%, transparent);
+}
+.lz-ai-thinking .lz-dot {
+  width: 0.16em;
+  height: 0.16em;
+  border-radius: 50%;
+  background: var(--lz-color, #f5f5f7);
+  animation: lz-typing-pulse calc(1s * var(--lz-speed, 1)) cubic-bezier(0.28, 0.1, 0.25, 1.15) infinite;
+}
+.lz-ai-thinking .lz-field .lz-dot:nth-child(2) {
+  animation-delay: -0.2s;
+}
+.lz-ai-thinking .lz-field .lz-dot:nth-child(3) {
+  animation-delay: -0.4s;
+}
+.lz-ai-thinking .lz-aura {
+  position: absolute;
+  inset: -0.16em;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background:
+    conic-gradient(
+      from 0deg,
+      transparent 0deg,
+      var(--lz-accent, #0a84ff) 8deg,
+      color-mix(in srgb, var(--lz-accent, #0a84ff) 30%, transparent) 34deg,
+      transparent 92deg) border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  animation: lz-spin calc(1.9s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-ai-neural {
+  display: grid;
+  grid-template-columns: repeat(5, 1em);
+  gap: var(--lz-grid-gap, 10px);
+  font-size: var(--lz-size, 6px);
+}
+.lz-ai-neural .lz-dot {
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  animation: lz-grid-dot-wave calc(1.5s * var(--lz-speed, 1)) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
+}
+.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%;
+  overflow: hidden;
+  background:
+    repeating-radial-gradient(
+      circle at 50% 50%,
+      rgba(255, 255, 255, 0.055) 0 1px,
+      transparent 1px 4px),
+    radial-gradient(
+      circle at 50% 50%,
+      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.2s * var(--lz-speed, 1)) linear infinite;
+}
+.lz-vinyl .lz-disc::before {
+  content: "";
+  position: absolute;
+  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(1.8s * 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.48em;
+  border-radius: 3px;
+  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-shaft::before {
+  content: "";
+  position: absolute;
+  top: -0.035em;
+  left: -0.04em;
+  width: 0.14em;
+  height: 0.14em;
+  border-radius: 50%;
+  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;
+  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: center;
+  gap: 0.5em;
+  font-size: var(--lz-size, 32px);
+  line-height: 1;
+}
+.lz-music-note .lz-note {
+  position: relative;
+  display: inline-block;
+  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-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-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-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);
+  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.4.0`
+- 30 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,27 @@
    - 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 (30)
 
-Dots: `lz-bouncing-dots`, `lz-typing-dots`, `lz-wave-dots`, `lz-helix-dots`, `lz-dot-grid-wave`
-Spinners: `lz-arc-spinner`, `lz-material-double-arc`, `lz-scan-sweep`, `lz-orbit-dots`, `lz-orbit-ring-dots`
+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`, `lz-sonar`
+Orbs: `lz-ios-27-orb`
+AI: `lz-ai-orb`, `lz-ai-thinking`, `lz-ai-neural`
 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-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:
+
+- **`lz-ios-27-orb`** renders exactly 27 dots (14 outer + 8 mid + 4 inner + 1 center) wired into a ring/spiral layout. The bright glow travels dot-to-dot (per-dot `lz-ios-glow`, negative delays `-(idx/27)*3.2s`). Dot color mixes between `--lz-color` (cool pole) and `--lz-accent` (warm pole) by angle. Geometry uses inline absolute positioning (`left`/`top` in em, negative margins) so the animated `transform`/`opacity` effects are never overridden. No `count` attribute — 27 is fixed.
+- **AI patterns:** `lz-ai-orb` (breathing gradient sphere + orbiting light dot + sparkles), `lz-ai-thinking` (pill field with typing dots + rotating conic-gradient ring via `mask-composite: exclude`), `lz-ai-neural` (dot grid like `lz-dot-grid-wave` but with a diagonal wave, delays `-(r+c)*0.12s`; details: alternating checking/resting dots via `color-mix` of `--lz-accent` and `--lz-color`).
+- **Orbs** now only `lz-ios-27-orb`: `accent` + `color` pick the two hue poles; `--lz-ios-fade`/`--lz-ios-min`/`--lz-ios-peak` tune the glow.
+- **`lz-sonar`** moved to the Spinners family (radar use).
+- **Music** patterns: `lz-waveform` (`count`, `bar-width`, `gap`), `lz-vinyl` (label/spindle/sheen rotate with the disc; `accent` = label/stylus, `color` = tonearm), `lz-music-note` (drawn note = head + stem + flag, `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.
 
 ## Minimal valid usage