@veluai/velu 0.1.13 → 0.1.14

package/runtime/velu-ui/components/sidebar.css

@@ -1,144 +1,144 @@
-/* Sidebar — sidebar-specific styling ONLY.
-
-   Vertical rhythm (nav, section lists, nested sublists) is composed from the
-   Stack primitive in Sidebar.jsx (DRY) — Stack supplies display/flex/gap
-   inline. This file holds only what Stack cannot express: the indent rails,
-   active accent rail, the horizontal item rows, summary marker, chevron
-   rotation, and centralized icon sizing/stroke. All values are tokens. */
-
-.velu-sidebar {
-  border-left: var(--border-width) solid var(--surface-color);
-  margin-left: var(--s1);
-}
-
-.velu-sidebar__section {
-  /* Sticky section header: each heading pins to the top of the scroll
-     region until its own section scrolls past, then the next heading
-     takes over (iOS-list style). It sticks within its section wrapper
-     (Sidebar.jsx renders each section in its own Stack), which bounds
-     the push-out. Full-width opaque background so scrolling items
-     don't show behind it; --page-bg matches the surroundings, so the
-     bar is invisible until it's actually covering scrolled content. */
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 1;
-  background: var(--page-bg);
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding-block: var(--s-4);
-  padding-inline: var(--s-3);
-  /* A notch smaller than the default h5, with a little tracking so the
-     uppercase label stays legible at the reduced size. */
-  font-size: var(--f-h6);
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-/* Fade zone just below the pinned heading: a gradient overlay
-   (page-bg → transparent) that sits directly under the sticky header
-   and scrolls with it. Items sliding up pass behind it and fade out
-   before they tuck under the (crisp) heading. Absolutely positioned
-   so it adds no resting layout space; pointer-events:none so it never
-   eats clicks. Hidden by default — only shown once the nav is actually
-   scrolled (the layout toggles it via data-fade-top on the scroll
-   region), so a section's first item isn't faded at rest. */
-.velu-sidebar__section::after {
-  content: '';
-  position: absolute;
-  inset-inline: 0;
-  inset-block-start: 100%;
-  block-size: var(--s3);
-  background: linear-gradient(
-    to bottom,
-    var(--page-bg),
-    color-mix(in srgb, var(--page-bg) 55%, transparent),
-    transparent
-  );
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-/* When a heading becomes the newly-pinned one (data-stuck set by the
-   runtime as you scroll past sections), fade + slide it in so the
-   handoff from the previous heading reads as a transition rather than
-   a hard swap. */
-.velu-sidebar__section[data-stuck='true'] {
-  animation: velu-sidebar-stick-in 0.2s ease;
-}
-@keyframes velu-sidebar-stick-in {
-  from {
-    opacity: 0.3;
-    transform: translateY(-0.2rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Lists are Stacks (flex/gap come from Stack inline) — only reset list chrome. */
-.velu-sidebar__list,
-.velu-sidebar__sublist {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.velu-sidebar__sublist {
-  margin-left: var(--s0);
-  border-left: var(--border-width) solid var(--border-color);
-}
-
-/* Item rows are horizontal (icon · label · chevron) — Stack is vertical-only,
-   so these stay CSS until/if a Cluster/Inline primitive exists. */
-.velu-sidebar__item,
-.velu-sidebar__subitem {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding-inline: var(--s0);
-  color: var(--text-color);
-  text-decoration: none;
-}
-
-.velu-sidebar__subitem {
-  padding-block: var(--s-5);
-}
-
-.velu-sidebar__item--active {
-  color: var(--accent-color);
-  border-left: 2px solid var(--accent-color);
-}
-
-.velu-sidebar__summary {
-  cursor: pointer;
-  list-style: none;
-}
-.velu-sidebar__summary::-webkit-details-marker {
-  display: none;
-}
-
-/* Icon sizing centralized here; stroke weight is the global --icon-stroke
-   token (.lucide rule in base.css), not set per-component. */
-.velu-sidebar__icon {
-  display: inline-flex;
-  flex: none;
-  inline-size: var(--f-body);
-  block-size: var(--f-body);
-}
-.velu-sidebar__icon svg {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.velu-sidebar__chevron {
-  flex: none;
-  inline-size: var(--f-body);
-  block-size: var(--f-body);
-  transition: transform 0.15s ease;
-}
-
-details[open] > .velu-sidebar__summary .velu-sidebar__chevron {
-  transform: rotate(90deg);
-}
+/* Sidebar — sidebar-specific styling ONLY.
+
+   Vertical rhythm (nav, section lists, nested sublists) is composed from the
+   Stack primitive in Sidebar.jsx (DRY) — Stack supplies display/flex/gap
+   inline. This file holds only what Stack cannot express: the indent rails,
+   active accent rail, the horizontal item rows, summary marker, chevron
+   rotation, and centralized icon sizing/stroke. All values are tokens. */
+
+.velu-sidebar {
+  border-left: var(--border-width) solid var(--surface-color);
+  margin-left: var(--s1);
+}
+
+.velu-sidebar__section {
+  /* Sticky section header: each heading pins to the top of the scroll
+     region until its own section scrolls past, then the next heading
+     takes over (iOS-list style). It sticks within its section wrapper
+     (Sidebar.jsx renders each section in its own Stack), which bounds
+     the push-out. Full-width opaque background so scrolling items
+     don't show behind it; --page-bg matches the surroundings, so the
+     bar is invisible until it's actually covering scrolled content. */
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+  background: var(--page-bg);
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-block: var(--s-4);
+  padding-inline: var(--s-3);
+  /* A notch smaller than the default h5, with a little tracking so the
+     uppercase label stays legible at the reduced size. */
+  font-size: var(--f-h6);
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+}
+/* Fade zone just below the pinned heading: a gradient overlay
+   (page-bg → transparent) that sits directly under the sticky header
+   and scrolls with it. Items sliding up pass behind it and fade out
+   before they tuck under the (crisp) heading. Absolutely positioned
+   so it adds no resting layout space; pointer-events:none so it never
+   eats clicks. Hidden by default — only shown once the nav is actually
+   scrolled (the layout toggles it via data-fade-top on the scroll
+   region), so a section's first item isn't faded at rest. */
+.velu-sidebar__section::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: 100%;
+  block-size: var(--s3);
+  background: linear-gradient(
+    to bottom,
+    var(--page-bg),
+    color-mix(in srgb, var(--page-bg) 55%, transparent),
+    transparent
+  );
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+/* When a heading becomes the newly-pinned one (data-stuck set by the
+   runtime as you scroll past sections), fade + slide it in so the
+   handoff from the previous heading reads as a transition rather than
+   a hard swap. */
+.velu-sidebar__section[data-stuck='true'] {
+  animation: velu-sidebar-stick-in 0.2s ease;
+}
+@keyframes velu-sidebar-stick-in {
+  from {
+    opacity: 0.3;
+    transform: translateY(-0.2rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Lists are Stacks (flex/gap come from Stack inline) — only reset list chrome. */
+.velu-sidebar__list,
+.velu-sidebar__sublist {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.velu-sidebar__sublist {
+  margin-left: var(--s0);
+  border-left: var(--border-width) solid var(--border-color);
+}
+
+/* Item rows are horizontal (icon · label · chevron) — Stack is vertical-only,
+   so these stay CSS until/if a Cluster/Inline primitive exists. */
+.velu-sidebar__item,
+.velu-sidebar__subitem {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-inline: var(--s0);
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.velu-sidebar__subitem {
+  padding-block: var(--s-5);
+}
+
+.velu-sidebar__item--active {
+  color: var(--accent-color);
+  border-left: 2px solid var(--accent-color);
+}
+
+.velu-sidebar__summary {
+  cursor: pointer;
+  list-style: none;
+}
+.velu-sidebar__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Icon sizing centralized here; stroke weight is the global --icon-stroke
+   token (.lucide rule in base.css), not set per-component. */
+.velu-sidebar__icon {
+  display: inline-flex;
+  flex: none;
+  inline-size: var(--f-body);
+  block-size: var(--f-body);
+}
+.velu-sidebar__icon svg {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.velu-sidebar__chevron {
+  flex: none;
+  inline-size: var(--f-body);
+  block-size: var(--f-body);
+  transition: transform 0.15s ease;
+}
+
+details[open] > .velu-sidebar__summary .velu-sidebar__chevron {
+  transform: rotate(90deg);
+}

package/runtime/velu-ui/components/steps.css

@@ -1,77 +1,77 @@
-/* Steps — numbered procedural list with a continuous accent rail
-   running through every step's left margin. All values are tokens;
-   light/dark via [data-theme]. */
-
-.velu-steps {
-  display: block;
-}
-
-/* Each step is a 2-col / 2-row grid placed explicitly:
-
-     col 1               col 2
-   ┌──────────────────┬────────────────────┐
-   │ circle (row 1,   │ title  (row 1,     │
-   │ align-self: end) │ align-self: end)   │
-   ├──────────────────┼────────────────────┤
-   │ line (row 2,     │ body   (row 2)     │
-   │ 100% block-size) │                    │
-   └──────────────────┴────────────────────┘
-
-   `align-self: end` on both row-1 items puts the circle's bottom and
-   the title's bottom flush together — so an oversize circle no longer
-   hovers above the title. Row 1 height is whichever child is taller
-   (the circle). row-gap stays at 0 so the line touches the next step's
-   circle with no visible break in the rail. */
-.velu-step {
-  display: grid;
-  grid-template-columns: var(--step-circle, 2em) 1fr;
-  column-gap: var(--s0);
-  row-gap: 0;
-}
-
-.velu-step__circle {
-  grid-row: 1;
-  grid-column: 1;
-  align-self: center;
-  justify-self: center;
-  inline-size: var(--step-circle, 2em);
-  block-size: var(--step-circle, 2em);
-  border-radius: 50%;
-  background: var(--accent-color);
-  color: var(--page-bg);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--f-h6);
-  line-height: 1;
-  font-weight: var(--weight-medium);
-}
-
-.velu-step__line {
-  grid-row: 2;
-  grid-column: 1;
-  justify-self: center;
-  inline-size: 2px;
-  block-size: 100%;
-  min-block-size: var(--s2);
-  background: var(--accent-color);
-}
-
-.velu-step__title {
-  grid-row: 1;
-  grid-column: 2;
-  align-self: center;
-  font-size: var(--f-h4);
-  line-height: var(--lh-h4);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-
-.velu-step__body {
-  grid-row: 2;
-  grid-column: 2;
-  padding-block: var(--s-1) var(--s2);
-  color: var(--text-color);
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-}
+/* Steps — numbered procedural list with a continuous accent rail
+   running through every step's left margin. All values are tokens;
+   light/dark via [data-theme]. */
+
+.velu-steps {
+  display: block;
+}
+
+/* Each step is a 2-col / 2-row grid placed explicitly:
+
+     col 1               col 2
+   ┌──────────────────┬────────────────────┐
+   │ circle (row 1,   │ title  (row 1,     │
+   │ align-self: end) │ align-self: end)   │
+   ├──────────────────┼────────────────────┤
+   │ line (row 2,     │ body   (row 2)     │
+   │ 100% block-size) │                    │
+   └──────────────────┴────────────────────┘
+
+   `align-self: end` on both row-1 items puts the circle's bottom and
+   the title's bottom flush together — so an oversize circle no longer
+   hovers above the title. Row 1 height is whichever child is taller
+   (the circle). row-gap stays at 0 so the line touches the next step's
+   circle with no visible break in the rail. */
+.velu-step {
+  display: grid;
+  grid-template-columns: var(--step-circle, 2em) 1fr;
+  column-gap: var(--s0);
+  row-gap: 0;
+}
+
+.velu-step__circle {
+  grid-row: 1;
+  grid-column: 1;
+  align-self: center;
+  justify-self: center;
+  inline-size: var(--step-circle, 2em);
+  block-size: var(--step-circle, 2em);
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: var(--page-bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--f-h6);
+  line-height: 1;
+  font-weight: var(--weight-medium);
+}
+
+.velu-step__line {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: center;
+  inline-size: 2px;
+  block-size: 100%;
+  min-block-size: var(--s2);
+  background: var(--accent-color);
+}
+
+.velu-step__title {
+  grid-row: 1;
+  grid-column: 2;
+  align-self: center;
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+
+.velu-step__body {
+  grid-row: 2;
+  grid-column: 2;
+  padding-block: var(--s-1) var(--s2);
+  color: var(--text-color);
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}

package/runtime/velu-ui/components/theme-toggle.css

@@ -1,101 +1,101 @@
-/* ThemeToggle — circular button with a sun/moon glyph; click flips
-   the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
-   centred inside. The pill-with-slider design was replaced earlier;
-   only the circle survives now.
-
-   In light mode: --page-bg circle, sun glyph.
-   In dark mode:  --page-bg circle, moon glyph.
-
-   Visibility model: BOTH icons are always rendered, stacked at the
-   same `position: absolute` slot inside the button. Opacity controls
-   which one is visible. We use opacity (not display: none) because:
-
-     1. Stacked icons render at the exact same point — no layout
-        shift when the theme flips.
-     2. Opacity is not touched anywhere else for these elements, so
-        the cascade is trivial — no risk of a stray rule (preflight,
-        utility class, dev-time fallback) overriding `display: none`
-        and revealing the wrong icon.
-     3. Identical markup on server + client → SSR-safe, no hydration
-        mismatch and no icon flash.
-
-   All values are tokens. */
-
-.velu-theme-toggle {
-  /* `relative` so the absolutely-positioned icons inside are
-     anchored to this button, not the page. */
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2rem;
-  block-size: 2rem;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 999px;
-  padding: 0;
-  background: var(--page-bg);
-  cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease,
-    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-.velu-theme-toggle:hover {
-  border-color: var(--accent-color);
-}
-/* Tactile press feedback on click. */
-.velu-theme-toggle:active {
-  transform: scale(0.9);
-}
-
-/* Both icons stack here, centred. Each animates in/out on a theme flip:
-   the hidden glyph is faded, shrunk, and rotated off its axis; the active
-   one springs to full size at 0deg. Centring is done with margins (above),
-   so `transform` is free to drive the rotate/scale animation. */
-.velu-theme-toggle__icon {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  inline-size: 1.125rem;
-  block-size: 1.125rem;
-  margin-block-start: -0.5625rem;     /* half of block-size */
-  margin-inline-start: -0.5625rem;    /* half of inline-size */
-  color: var(--text-color);
-  opacity: 0;
-  transition: opacity 0.28s ease,
-    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  pointer-events: none;
-}
-
-/* Hidden state per glyph — sun spins out clockwise, moon anti-clockwise,
-   so the swap reads as one rotating through the other. */
-.velu-theme-toggle__icon--sun {
-  transform: rotate(90deg) scale(0.4);
-}
-.velu-theme-toggle__icon--moon {
-  transform: rotate(-90deg) scale(0.4);
-}
-
-/* Exactly one glyph is shown — the sun in light, the moon in dark — at full
-   size, upright. Higher specificity than the hidden defaults above, so it
-   wins for whichever glyph the active theme selects. */
-:root:not([data-theme='dark']) .velu-theme-toggle__icon--sun,
-[data-theme='dark'] .velu-theme-toggle__icon--moon {
-  opacity: 1;
-  transform: rotate(0deg) scale(1);
-}
-
-/* Honour reduced-motion: keep a plain crossfade — no spin, scale, or press. */
-@media (prefers-reduced-motion: reduce) {
-  .velu-theme-toggle {
-    transition: border-color 0.12s ease, background 0.12s ease;
-  }
-  .velu-theme-toggle:active {
-    transform: none;
-  }
-  .velu-theme-toggle__icon {
-    transition: opacity 0.2s ease;
-  }
-  .velu-theme-toggle__icon--sun,
-  .velu-theme-toggle__icon--moon {
-    transform: none;
-  }
-}
+/* ThemeToggle — circular button with a sun/moon glyph; click flips
+   the theme. Geometry is a 32 × 32 circle with an 18 × 18 glyph
+   centred inside. The pill-with-slider design was replaced earlier;
+   only the circle survives now.
+
+   In light mode: --page-bg circle, sun glyph.
+   In dark mode:  --page-bg circle, moon glyph.
+
+   Visibility model: BOTH icons are always rendered, stacked at the
+   same `position: absolute` slot inside the button. Opacity controls
+   which one is visible. We use opacity (not display: none) because:
+
+     1. Stacked icons render at the exact same point — no layout
+        shift when the theme flips.
+     2. Opacity is not touched anywhere else for these elements, so
+        the cascade is trivial — no risk of a stray rule (preflight,
+        utility class, dev-time fallback) overriding `display: none`
+        and revealing the wrong icon.
+     3. Identical markup on server + client → SSR-safe, no hydration
+        mismatch and no icon flash.
+
+   All values are tokens. */
+
+.velu-theme-toggle {
+  /* `relative` so the absolutely-positioned icons inside are
+     anchored to this button, not the page. */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 999px;
+  padding: 0;
+  background: var(--page-bg);
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease,
+    transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.velu-theme-toggle:hover {
+  border-color: var(--accent-color);
+}
+/* Tactile press feedback on click. */
+.velu-theme-toggle:active {
+  transform: scale(0.9);
+}
+
+/* Both icons stack here, centred. Each animates in/out on a theme flip:
+   the hidden glyph is faded, shrunk, and rotated off its axis; the active
+   one springs to full size at 0deg. Centring is done with margins (above),
+   so `transform` is free to drive the rotate/scale animation. */
+.velu-theme-toggle__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  margin-block-start: -0.5625rem;     /* half of block-size */
+  margin-inline-start: -0.5625rem;    /* half of inline-size */
+  color: var(--text-color);
+  opacity: 0;
+  transition: opacity 0.28s ease,
+    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  pointer-events: none;
+}
+
+/* Hidden state per glyph — sun spins out clockwise, moon anti-clockwise,
+   so the swap reads as one rotating through the other. */
+.velu-theme-toggle__icon--sun {
+  transform: rotate(90deg) scale(0.4);
+}
+.velu-theme-toggle__icon--moon {
+  transform: rotate(-90deg) scale(0.4);
+}
+
+/* Exactly one glyph is shown — the sun in light, the moon in dark — at full
+   size, upright. Higher specificity than the hidden defaults above, so it
+   wins for whichever glyph the active theme selects. */
+:root:not([data-theme='dark']) .velu-theme-toggle__icon--sun,
+[data-theme='dark'] .velu-theme-toggle__icon--moon {
+  opacity: 1;
+  transform: rotate(0deg) scale(1);
+}
+
+/* Honour reduced-motion: keep a plain crossfade — no spin, scale, or press. */
+@media (prefers-reduced-motion: reduce) {
+  .velu-theme-toggle {
+    transition: border-color 0.12s ease, background 0.12s ease;
+  }
+  .velu-theme-toggle:active {
+    transform: none;
+  }
+  .velu-theme-toggle__icon {
+    transition: opacity 0.2s ease;
+  }
+  .velu-theme-toggle__icon--sun,
+  .velu-theme-toggle__icon--moon {
+    transform: none;
+  }
+}