@veluai/velu 0.2.13 → 0.2.15

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

@@ -1,205 +1,205 @@
-/* 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 {
-  position: relative; /* anchors the gliding active indicator */
-  margin-left: var(--s1);
-}
-
-/* The single active indicator — a crimson tint band with a flush-left 2px bar
-   that GLIDES between items (one element animating its position/height) instead
-   of each item painting its own active state. z-index 0 keeps it BEHIND the
-   items + sticky headings (both positioned, z-index 1), so the text reads over
-   the tint and a pinned heading's opaque background covers the indicator when an
-   item scrolls under it. Driven imperatively from JS (transform/height/opacity);
-   the easing curve makes the slide feel continuous. */
-.velu-sidebar__indicator {
-  position: absolute;
-  inset-inline-start: 0;
-  inset-inline-end: var(--s-3);
-  inset-block-start: 0;
-  height: 0;
-  opacity: 0;
-  z-index: 0;
-  pointer-events: none;
-  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
-  border-radius: var(--radius-sm);
-  transition:
-    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
-    height 0.3s cubic-bezier(0.32, 0.72, 0, 1),
-    opacity 0.2s ease;
-  will-change: transform, height;
-}
-.velu-sidebar__indicator::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block: 15%;
-  inline-size: 2px;
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
-  background: var(--accent-color);
-}
-/* Honour reduced-motion: snap instead of glide. */
-@media (prefers-reduced-motion: reduce) {
-  .velu-sidebar__indicator {
-    transition: opacity 0.2s ease;
-  }
-}
-
-.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;
-  /* Above the items (z-index 1) so scrolled rows tuck UNDER the heading (its
-     opaque bg + the ::after fade hide them), not over it; above the gliding
-     indicator (z-index 0) too. */
-  z-index: 2;
-  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 {
-  /* Positioned above the gliding indicator (z-index 0) so the label reads over
-     the tint band. */
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding-inline: var(--s0);
-  color: var(--text-color);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.velu-sidebar__subitem {
-  padding-block: var(--s-5);
-}
-
-/* Active = colour + weight only; the moving indicator paints the bar + tint. */
-.velu-sidebar__item--active {
-  color: var(--accent-color);
-  font-weight: 500;
-}
-.velu-sidebar__item--active .velu-sidebar__icon {
-  color: var(--accent-color);
-}
-
-/* The label fills the row so the group chevron (and any external-link icon)
-   sit flush at the row's RIGHT end, not crowded against the label — faithful
-   to the design's `flex: 1` label. */
-.velu-sidebar__label {
-  flex: 1;
-  min-inline-size: 0;
-}
-
-.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 {
+  position: relative; /* anchors the gliding active indicator */
+  margin-left: var(--s1);
+}
+
+/* The single active indicator — a crimson tint band with a flush-left 2px bar
+   that GLIDES between items (one element animating its position/height) instead
+   of each item painting its own active state. z-index 0 keeps it BEHIND the
+   items + sticky headings (both positioned, z-index 1), so the text reads over
+   the tint and a pinned heading's opaque background covers the indicator when an
+   item scrolls under it. Driven imperatively from JS (transform/height/opacity);
+   the easing curve makes the slide feel continuous. */
+.velu-sidebar__indicator {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-inline-end: var(--s-3);
+  inset-block-start: 0;
+  height: 0;
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+  border-radius: var(--radius-sm);
+  transition:
+    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
+    height 0.3s cubic-bezier(0.32, 0.72, 0, 1),
+    opacity 0.2s ease;
+  will-change: transform, height;
+}
+.velu-sidebar__indicator::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block: 15%;
+  inline-size: 2px;
+  border-start-end-radius: 2px;
+  border-end-end-radius: 2px;
+  background: var(--accent-color);
+}
+/* Honour reduced-motion: snap instead of glide. */
+@media (prefers-reduced-motion: reduce) {
+  .velu-sidebar__indicator {
+    transition: opacity 0.2s ease;
+  }
+}
+
+.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;
+  /* Above the items (z-index 1) so scrolled rows tuck UNDER the heading (its
+     opaque bg + the ::after fade hide them), not over it; above the gliding
+     indicator (z-index 0) too. */
+  z-index: 2;
+  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 {
+  /* Positioned above the gliding indicator (z-index 0) so the label reads over
+     the tint band. */
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-inline: var(--s0);
+  color: var(--text-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.velu-sidebar__subitem {
+  padding-block: var(--s-5);
+}
+
+/* Active = colour + weight only; the moving indicator paints the bar + tint. */
+.velu-sidebar__item--active {
+  color: var(--accent-color);
+  font-weight: 500;
+}
+.velu-sidebar__item--active .velu-sidebar__icon {
+  color: var(--accent-color);
+}
+
+/* The label fills the row so the group chevron (and any external-link icon)
+   sit flush at the row's RIGHT end, not crowded against the label — faithful
+   to the design's `flex: 1` label. */
+.velu-sidebar__label {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.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);
+}