loading-state-zoo 0.4.0 → 0.4.1

package/dist/theme.css

@@ -161,34 +161,6 @@
     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));
@@ -389,7 +361,7 @@
   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;
+  animation: lz-spin-reverse calc(12s * var(--lz-speed, 1)) linear infinite;
 }
 .lz-scan-sweep .lz-ring-inner {
   position: absolute;
@@ -449,7 +421,7 @@
       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;
@@ -470,7 +442,7 @@
       farthest-side,
       transparent calc(100% - 0.07em),
       #000 calc(100% - 0.07em));
-  animation: lz-spin calc(2.5s * var(--lz-speed, 1)) linear infinite;
+  animation: lz-spin calc(4s * var(--lz-speed, 1)) linear infinite;
 }
 .lz-orbit-dots {
   position: relative;
@@ -802,152 +774,6 @@
       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;
@@ -989,7 +815,7 @@
       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;
+  animation: lz-spin calc(7s * var(--lz-speed, 1)) linear infinite;
 }
 .lz-vinyl .lz-disc::before {
   content: "";
@@ -1042,7 +868,7 @@
   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;
+  animation: lz-needle-bob calc(2.4s * var(--lz-speed, 1)) ease-in-out infinite;
 }
 .lz-vinyl .lz-post {
   position: absolute;

package/docs/AI.md

@@ -5,9 +5,10 @@
 ## Package identity
 
 - Package name: `loading-state-zoo`
-- 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.
+- 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,20 @@
    - 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 (30)
+## 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`, `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-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)`. 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:
 
-- **`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-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.
 
 ## Minimal valid usage