@rackbops/styles 0.1.0 → 0.1.2

package/rackbops-noir/components/card.css

@@ -19,6 +19,15 @@
   border-color: var(--rb-border-strong);
   box-shadow: var(--rb-shadow-lg);
 }
+/* --raised: the hover-lifted look, at rest — still lifts a further notch on hover */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card--raised {
+  transform: translateY(-4px);
+  border-color: var(--rb-border-strong);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card--raised:hover {
+  transform: translateY(-6px);
+}
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-card__tag {
   display: flex;
   align-items: center;

package/rackbops-noir/components/log.css

@@ -0,0 +1,19 @@
+/* rackbops-noir — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
+ * line-height so dense text stays readable. Use together on one element:
+ * <pre class="rb-pre rb-log">. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-log {
+  max-height: 16rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+/* Specificity-pinned (not import-order-dependent) override of .rb-pre's
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/rackbops-noir/components/muted.css

@@ -0,0 +1,7 @@
+/* rackbops-noir — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic reads naturally in this editorial, print-like theme. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/rackbops-noir/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* rackbops-noir — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
+ * background, a hairline right edge. Composes with .rb-link for items --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-nav-rail {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--rb-space-1);
+  width: 14rem;
+  padding: var(--rb-space-3);
+  background: var(--rb-surface);
+  border-right: 1px solid var(--rb-border);
+}

package/rackbops-noir/components/pre.css

@@ -0,0 +1,13 @@
+/* rackbops-noir — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well,
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-pre {
+  margin: 0;
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  overflow-x: auto;
+}

package/rackbops-noir/components/principle.css

@@ -23,6 +23,7 @@
   padding-top: 3px;
 }
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle__body h3 {
+  margin: 0; /* the tight 7px gap below is the following p's own margin-top */
   font-size: 1.16rem;
 }
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-principle__body p {

package/rackbops-noir/components/stepper.css

@@ -0,0 +1,87 @@
+/* rackbops-noir — stepper (delivery / milestone tracker)
+ * <ol class="rb-stepper"> with one
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
+ * Each non-first step draws its OWN connector segment back to the previous
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
+ * aligning to node centers regardless of item count or label width -- a
+ * single full-width rail can't do this without knowing how many steps there
+ * are, since node centers sit inset within their own slice). isolation:
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
+ * it paints behind every node without needing per-node z-index of its own.
+ * A segment fills once its OWN step is reached (complete or current) -- the
+ * same state class already on the <li>, not a second progress mechanism.
+ * Elevation here is soft shadow, not frosted glass or glow, so the current
+ * node's lift is the theme's own shadow-lg. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rb-space-2);
+  text-align: center;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-surface-sunken);
+  z-index: -1;
+  transition: background-color var(--rb-transition);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-surface-2);
+  color: var(--rb-text-faint);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/rackbops-noir/components/table.css

@@ -25,6 +25,24 @@
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table tbody tr:hover td {
   background: var(--rb-surface-2);
 }
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the hover wash and a focus ring,
+ * matching the editorial themes' bolder 2.5px ring. */
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2.5px solid var(--rb-accent);
+  outline-offset: -3px;
+  /* base.css's global :focus-visible rule also sets a 3px border-radius (meant
+   * for buttons/inputs); cancel it here since a table row shouldn't inherit it. */
+  border-radius: 0;
+}
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
 :where([data-rb-style="rackbops-noir"], [data-rb-style="rackbops-noir"] *).rb-table .rb-num {
   text-align: right;
   font-variant-numeric: tabular-nums;

package/rackbops-noir/design.md

@@ -46,6 +46,9 @@ Identical to rackbops-studio: the system sans at weight **800** for headlines
 (tracking `-0.02em`, `text-wrap: balance`), the same sans body, and the mono voice
 (`ui-monospace, "SF Mono", …`) for eyebrows, nav, tags, and the rack readouts. The
 eyebrow is mono, uppercase, tracked `0.18em`, accent-coloured, with a leading rule.
+Bare `h1`-`h6`/`p`/`ul`/`ol` get the same treatment as rackbops-studio too:
+unclassed headlines, `--rb-space-3` margin on headings/paragraphs/lists, and
+`--rb-space-4` marker indent with real disc/decimal markers on `ul`/`ol`.
 
 ## Shape & effects
 
@@ -65,9 +68,9 @@ eyebrow is mono, uppercase, tracked `0.18em`, accent-coloured, with a leading ru
 ## Components
 
 Class prefix `rb-`; the full rackbops-studio inventory, styled identically from
-tokens — `.rb-btn`, `.rb-card` (+ `__tag`), `.rb-link`, the form set, `.rb-badge`,
-`.rb-alert`, `.rb-dialog`, `.rb-tabs`, `.rb-table`, `.rb-progress`/`.rb-spinner`,
-`.rb-eyebrow` — plus the studio extras `.rb-rack` (equaliser panel; its panel palette
+tokens — `.rb-btn` (+ `--sm` compact size, `.rb-icon-btn` icon-only square), `.rb-card` (+ `__tag`), `.rb-link`, `.rb-nav-rail`, the form set, `.rb-badge`,
+`.rb-alert`, `.rb-dialog`, `.rb-tabs`, `.rb-table` (+ `--interactive`), `.rb-progress`/`.rb-spinner`, `.rb-stepper`,
+`.rb-eyebrow`, `.rb-muted`, `.rb-pre` (+ `.rb-log`) — plus the studio extras `.rb-rack` (equaliser panel; its panel palette
 matches rackbops.com's dark-mode rack — a near-canvas block set off by its border), `.rb-principles`/
 `.rb-principle`, and `.rb-tags`/`.rb-tag`. See rackbops-studio's `design.md` for
 the per-component notes. The Boppy mascot asset ships with rackbops-studio

package/rackbops-noir/index.css

@@ -4,6 +4,7 @@
 @import "./components/button.css";
 @import "./components/card.css";
 @import "./components/link.css";
+@import "./components/nav-rail.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,7 +12,11 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
 @import "./components/eyebrow.css";
 @import "./components/rack.css";
 @import "./components/principle.css";
 @import "./components/tag.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/rackbops-studio/base.css

@@ -28,8 +28,8 @@
 }
 
 /* Heavy, balanced headlines with tight tracking — the studio's editorial voice. */
-:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *):where(h1, h2, h3) {
-  margin: 0;
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *):where(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 var(--rb-space-3);
   font-family: var(--rb-font-display);
   font-weight: var(--rb-font-weight-bold);
   letter-spacing: var(--rb-heading-tracking);
@@ -37,6 +37,15 @@
   text-wrap: balance;
 }
 
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *):where(a) {
   color: inherit;
 }

package/rackbops-studio/components/button.css

@@ -20,6 +20,22 @@
     border-color var(--rb-transition) ease,
     color var(--rb-transition) ease;
 }
+/* --sm: compact size for inline/table-row actions; drops to the theme's small
+ * type scale. The optional arrow inherits font-size, so it scales too. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn--sm {
+  padding: 7px 14px;
+  font-size: var(--rb-text-sm);
+}
+/* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
+ * optional color variant) — inherits color/hover/focus from it. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-icon-btn {
+  padding: var(--rb-space-2);
+  min-width: 2rem;
+  min-height: 2rem;
+  gap: 0;
+  justify-content: center;
+  line-height: 1;
+}
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-btn:active {
   transform: translateY(1px);
 }

package/rackbops-studio/components/card.css

@@ -19,6 +19,15 @@
   border-color: var(--rb-border-strong);
   box-shadow: var(--rb-shadow-lg);
 }
+/* --raised: the hover-lifted look, at rest — still lifts a further notch on hover */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-card--raised {
+  transform: translateY(-4px);
+  border-color: var(--rb-border-strong);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-card--raised:hover {
+  transform: translateY(-6px);
+}
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-card__tag {
   display: flex;
   align-items: center;

package/rackbops-studio/components/log.css

@@ -0,0 +1,19 @@
+/* rackbops-studio — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
+ * line-height so dense text stays readable. Use together on one element:
+ * <pre class="rb-pre rb-log">. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-log {
+  max-height: 16rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+/* Specificity-pinned (not import-order-dependent) override of .rb-pre's
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/rackbops-studio/components/muted.css

@@ -0,0 +1,7 @@
+/* rackbops-studio — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. Italic reads naturally in this editorial, print-like theme. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-muted {
+  color: var(--rb-text-faint);
+  font-style: italic;
+}

package/rackbops-studio/components/nav-rail.css

@@ -0,0 +1,14 @@
+/* rackbops-studio — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
+ * background, a hairline right edge. Composes with .rb-link for items --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-nav-rail {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--rb-space-1);
+  width: 14rem;
+  padding: var(--rb-space-3);
+  background: var(--rb-surface);
+  border-right: 1px solid var(--rb-border);
+}

package/rackbops-studio/components/pre.css

@@ -0,0 +1,13 @@
+/* rackbops-studio — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well,
+ * hairline border, small mono, scrolls horizontally instead of wrapping. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-pre {
+  margin: 0;
+  padding: var(--rb-space-3) var(--rb-space-4);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  font-family: var(--rb-font-mono);
+  font-size: var(--rb-text-sm);
+  overflow-x: auto;
+}

package/rackbops-studio/components/principle.css

@@ -23,6 +23,7 @@
   padding-top: 3px;
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-principle__body h3 {
+  margin: 0; /* the tight 7px gap below is the following p's own margin-top */
   font-size: 1.16rem;
 }
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-principle__body p {

package/rackbops-studio/components/stepper.css

@@ -0,0 +1,87 @@
+/* rackbops-studio — stepper (delivery / milestone tracker)
+ * <ol class="rb-stepper"> with one
+ * <li class="rb-stepper__step rb-stepper--complete|current|upcoming"> per
+ * milestone: a .rb-stepper__node icon/number circle + .rb-stepper__label.
+ * Each non-first step draws its OWN connector segment back to the previous
+ * step's node (right: 50%; width: 100% of that step's own flex slice, self-
+ * aligning to node centers regardless of item count or label width -- a
+ * single full-width rail can't do this without knowing how many steps there
+ * are, since node centers sit inset within their own slice). isolation:
+ * isolate keeps every segment's negative z-index scoped to this stepper, so
+ * it paints behind every node without needing per-node z-index of its own.
+ * A segment fills once its OWN step is reached (complete or current) -- the
+ * same state class already on the <li>, not a second progress mechanism.
+ * Elevation here is soft shadow on white, not frosted glass or glow, so the
+ * current node's lift is the theme's own shadow-lg. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--rb-space-2);
+  text-align: center;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 1rem;
+  right: 50%;
+  width: 100%;
+  height: 2px;
+  background: var(--rb-surface-sunken);
+  z-index: -1;
+  transition: background-color var(--rb-transition);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid transparent;
+  border-radius: var(--rb-radius-pill);
+  background: var(--rb-surface-2);
+  color: var(--rb-text-faint);
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__node {
+  background: var(--rb-surface);
+  border-color: var(--rb-accent);
+  color: var(--rb-accent);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-medium);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-stepper__step:not(:first-child)::before {
+    transition: none;
+  }
+}

package/rackbops-studio/components/table.css

@@ -25,6 +25,24 @@
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table tbody tr:hover td {
   background: var(--rb-surface-2);
 }
+/* --interactive: clickable rows (a tabindex tr, or a row-wrapping button/link) —
+ * pointer cursor plus a keyboard-equivalent of the hover wash and a focus ring,
+ * matching the editorial themes' bolder 2.5px ring. */
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2.5px solid var(--rb-accent);
+  outline-offset: -3px;
+  /* base.css's global :focus-visible rule also sets a 3px border-radius (meant
+   * for buttons/inputs); cancel it here since a table row shouldn't inherit it. */
+  border-radius: 0;
+}
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
 :where([data-rb-style="rackbops-studio"], [data-rb-style="rackbops-studio"] *).rb-table .rb-num {
   text-align: right;
   font-variant-numeric: tabular-nums;

package/rackbops-studio/design.md

@@ -52,6 +52,10 @@ component). The marketing site itself uses no colour beyond the accent.
   the rack readouts.
 - **Eyebrow:** mono, uppercase, wide-tracked (`0.18em`), accent-coloured, with a
   short leading rule — the kicker above every section headline.
+- **Bare tags:** unclassed `h1`-`h6` carry the same headline treatment above
+  with no `.rb-*` class needed, plus `--rb-space-3` margin below. Bare `p`
+  gets that same margin; bare `ul`/`ol` add it too, with `--rb-space-4`
+  marker indent (real disc/decimal markers, not stripped).
 
 ## Shape & effects
 
@@ -101,10 +105,16 @@ Class prefix `rb-`; shared token/class contract with the other themes.
 
 - **Button** `.rb-btn` — `--primary` ink-fill→vermillion, `--accent` solid
   vermillion, `--ghost` bordered outline, `--danger` rose outline; `.rb-btn__arrow`
-  slides on hover.
+  slides on hover. `--sm` is a compact size for inline/table-row actions — the
+  arrow scales with it. `.rb-icon-btn` is a square icon-only hit target
+  (>=2rem), paired with `.rb-btn`.
 - **Card** `.rb-card` (+ `__tag`) — white panel, soft shadow, `-4px` hover lift.
+  `--raised` makes that lift the resting state (a further `-6px` on hover).
 - **NavLink** `.rb-link` — mono header nav; hover fills to a surface pill; accent
   on the active route.
+- **Nav rail** `.rb-nav-rail` — the sidebar container: 14rem fixed-width flex
+  column, surface background, a hairline right edge. Composes with `.rb-link`
+  for items; introduces no active-state convention of its own.
 - **Form** `.rb-input` / `.rb-textarea` / `.rb-select` / `.rb-label` / `.rb-field`
   / `.rb-choice` / `.rb-checkbox` / `.rb-radio` / `.rb-switch` — white fields;
   focus is a vermillion border + wash ring.
@@ -116,10 +126,27 @@ Class prefix `rb-`; shared token/class contract with the other themes.
 - **Tabs** `.rb-tabs` / `.rb-tab` / `.rb-tabpanel` — understated; active goes ink
   with a vermillion underbar.
 - **Table** `.rb-table` (+ `.rb-num`) — mono uppercase header rule, generous rows,
-  quiet hover wash.
+  quiet hover wash. `--interactive` marks clickable rows: pointer cursor, plus
+  a bolder 2.5px focus-visible ring (and the same hover wash) for a `tabindex`
+  row or a row-wrapping button/link.
 - **Progress / Spinner** `.rb-progress` / `.rb-spinner` — pill trough with a
   vermillion fill; single-arc spinner.
+- **Stepper** `.rb-stepper` (+ `__step` / `__node` / `__label`, `--complete` /
+  `--current` / `--upcoming`) — a milestone rail: complete nodes solid accent
+  with a checkmark, current a white-on-accent-border ring with `shadow-lg`
+  lift, upcoming faint surface-2. Rail track is `surface-sunken`; each
+  connector segment fills to accent once its own step is reached
+  (complete or current), so the rail can't drift out of sync with the
+  step states.
 - **Eyebrow** `.rb-eyebrow` — the mono kicker with leading rule.
+- **Muted text** `.rb-muted` — faint secondary/empty-state text;
+  `color: var(--rb-text-faint)`, italic — reads naturally in this editorial,
+  print-like theme.
+- **Pre / log block** `.rb-pre` — command/log `<pre>`; surface-sunken
+  background, hairline border, radius, small mono, horizontal scroll. Pair
+  with `.rb-log` (`<pre class="rb-pre rb-log">`) for multi-line streaming
+  output: a capped 16rem height with vertical scroll, wrapped lines instead
+  of horizontal scroll, and roomier line-height for dense text.
 
 ### Theme extras
 

package/rackbops-studio/index.css

@@ -4,6 +4,7 @@
 @import "./components/button.css";
 @import "./components/card.css";
 @import "./components/link.css";
+@import "./components/nav-rail.css";
 @import "./components/form.css";
 @import "./components/badge.css";
 @import "./components/alert.css";
@@ -11,7 +12,11 @@
 @import "./components/tabs.css";
 @import "./components/table.css";
 @import "./components/progress.css";
+@import "./components/stepper.css";
 @import "./components/eyebrow.css";
 @import "./components/rack.css";
 @import "./components/principle.css";
 @import "./components/tag.css";
+@import "./components/muted.css";
+@import "./components/pre.css";
+@import "./components/log.css";

package/summer-cloud/base.css

@@ -41,13 +41,25 @@
   background-attachment: fixed;
 }
 
-:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(h1, h2, h3, h4) {
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(h1, h2, h3, h4, h5, h6) {
+  margin: 0 0 var(--rb-space-3);
   font-family: var(--rb-font-display);
   font-weight: var(--rb-font-weight-bold);
   letter-spacing: var(--rb-heading-tracking);
+  line-height: 1.15;
+  text-wrap: balance;
   color: var(--rb-text);
 }
 
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(p) {
+  margin: 0 0 var(--rb-space-3);
+}
+
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(ul, ol) {
+  margin: 0 0 var(--rb-space-3);
+  padding-inline-start: var(--rb-space-4);
+}
+
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *):where(a) {
   color: var(--rb-accent);
 }

package/summer-cloud/components/button.css

@@ -20,6 +20,23 @@
     box-shadow 0.2s ease,
     transform 0.2s var(--rb-ease-bounce);
 }
+/* --sm: compact size for inline/table-row actions (composes with any variant);
+ * keeps the pill radius inherited from .rb-btn. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn--sm {
+  padding: var(--rb-space-1) var(--rb-space-3);
+  font-size: calc(var(--rb-text-sm) - 1px);
+}
+/* --icon: square icon-only hit target (>=2rem); pair with .rb-btn (+ an
+ * optional color variant) — keeps the pill radius inherited from .rb-btn,
+ * which reads as a circle on a square box. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-icon-btn {
+  padding: var(--rb-space-2);
+  min-width: 2rem;
+  min-height: 2rem;
+  gap: 0;
+  justify-content: center;
+  line-height: 1;
+}
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:hover,
 :where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-btn:focus-visible {
   background: rgba(255, 255, 255, 0.6);

package/summer-cloud/components/log.css

@@ -0,0 +1,19 @@
+/* summer-cloud — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, radius, small mono) -- .rb-log itself only adds what changes for
+ * multi-line streaming output: a capped height with vertical scroll, wrapped
+ * long lines instead of .rb-pre's horizontal scroll, and a touch more
+ * line-height so dense text stays readable. Use together on one element:
+ * <pre class="rb-pre rb-log">. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-log {
+  max-height: 16rem;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+}
+/* Specificity-pinned (not import-order-dependent) override of .rb-pre's
+ * overflow-x: auto -- .rb-log wraps instead of scrolling horizontally. */
+:where([data-rb-style="summer-cloud"], [data-rb-style="summer-cloud"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}