@rackbops/styles 0.1.0 → 0.1.1

package/concrete-signal/components/dialog.css

@@ -0,0 +1,33 @@
+/* concrete-signal — dialog (native <dialog>)
+ * A square-cornered slab dropped onto a flat, unblurred backdrop — this
+ * theme never uses blur/glass, so the scrim behind the dialog stays flat. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-dialog {
+  padding: 0;
+  max-width: min(92vw, 32rem);
+  width: calc(100vw - 2rem);
+  background: var(--rb-surface);
+  border: 2px solid var(--rb-border-strong);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  box-shadow: var(--rb-shadow-lg);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-dialog__body {
+  padding: var(--rb-space-5);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-dialog__title {
+  margin: 0 0 var(--rb-space-3);
+  text-transform: uppercase;
+  font-family: var(--rb-font-display);
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-3) var(--rb-space-5);
+  border-top: 1px solid var(--rb-border);
+}

package/concrete-signal/components/form.css

@@ -0,0 +1,138 @@
+/* concrete-signal — form controls: input, textarea, select, checkbox, radio, switch
+ * Sunken square-cornered fields; focus is a hard border-weight change (1px to
+ * 2px solid accent) — no soft wash ring, brutalism doesn't glow. Checked
+ * checkbox/radio/switch states are a flat accent fill, not a tinted ring. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rb-space-1);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-label {
+  color: var(--rb-text-soft);
+  text-transform: uppercase;
+  font-size: var(--rb-text-sm);
+  font-weight: var(--rb-font-weight-medium);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-input,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-select {
+  display: block;
+  width: 100%;
+  padding: var(--rb-space-2) var(--rb-space-3);
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight);
+  font-size: var(--rb-text-sm);
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-select {
+  appearance: none;
+  padding-right: 2.25rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f8f8a' stroke-width='1.5'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--rb-space-3) center;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-input::placeholder,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea::placeholder {
+  color: var(--rb-text-faint);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-input:focus,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea:focus,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-select:focus {
+  outline: none;
+  border: 2px solid var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-input[aria-invalid="true"],
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea[aria-invalid="true"] {
+  border-color: var(--rb-danger);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  cursor: pointer;
+}
+
+/* checkbox & radio — square, sunken; checked is a flat accent fill framed by
+   an inset ring of the field background, not a glow */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-checkbox,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-radio {
+  appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  cursor: pointer;
+  transition: border-color var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-checkbox:checked,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-radio:checked {
+  background: var(--rb-accent);
+  border-color: var(--rb-accent);
+  box-shadow: inset 0 0 0 3px var(--rb-surface-sunken);
+}
+
+/* switch — square track and thumb; flat accent fill when on */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch {
+  appearance: none;
+  position: relative;
+  width: 2.4rem;
+  height: 1.3rem;
+  margin: 0;
+  vertical-align: text-bottom;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  cursor: pointer;
+  transition: border-color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: calc(1.3rem - 6px);
+  height: calc(1.3rem - 6px);
+  background: var(--rb-text-faint);
+  transition: transform var(--rb-transition), background var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch:checked {
+  border-color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch:checked::after {
+  transform: translateX(1.1rem);
+  background: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-checkbox:focus-visible,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-radio:focus-visible,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch:focus-visible {
+  outline: none;
+  border: 2px solid var(--rb-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-input,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-textarea,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-select,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-checkbox,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-radio,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch,
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-switch::after {
+    transition: none;
+  }
+}

package/concrete-signal/components/link.css

@@ -0,0 +1,44 @@
+/* concrete-signal — nav link (tree/sidebar row)
+ * Hover fills to surface-2 and stamps a hard 3px solid accent bar on the left
+ * edge — no gradient, no blur, no glow; active carries the accent wash plus
+ * the same bar and bold text. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--rb-space-2);
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-radius: var(--rb-radius);
+  color: var(--rb-text);
+  font-size: var(--rb-text-sm);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--rb-transition), color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: transparent;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link:hover {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link:hover::before,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link.rb-link--active {
+  background: var(--rb-accent-wash);
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-bold);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-link {
+    transition: none;
+  }
+}

package/concrete-signal/components/log.css

@@ -0,0 +1,19 @@
+/* concrete-signal — log / terminal block
+ * Pairs with .rb-pre for the shared look (surface-sunken well, hairline
+ * border, zero 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="concrete-signal"], [data-rb-style="concrete-signal"] *).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="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-pre.rb-log {
+  overflow-x: hidden;
+}

package/concrete-signal/components/muted.css

@@ -0,0 +1,7 @@
+/* concrete-signal — muted / empty-state text
+ * Faint secondary text — captions, meta, "No results yet." style empty
+ * states. No italic: brutalism carries its voice through weight, case, and
+ * tracking, never a softening slant. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-muted {
+  color: var(--rb-text-faint);
+}

package/concrete-signal/components/nav-rail.css

@@ -0,0 +1,15 @@
+/* concrete-signal — nav rail (vertical sidebar container)
+ * Flush edge chrome, not a floating card: fixed-width flex column, surface
+ * background, a 1px border-strong right edge (this theme's spec-sheet
+ * convention, not a faint hairline). Composes with .rb-link for items --
+ * active/hover are entirely that component's own tokens, nothing new here. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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-strong);
+}

package/concrete-signal/components/pre.css

@@ -0,0 +1,14 @@
+/* concrete-signal — command / log block
+ * Styled <pre> for shell commands or short log output: sunken well, hairline
+ * border, small mono, scrolls horizontally instead of wrapping. Zero radius
+ * falls out of --rb-radius automatically, same as every other panel here. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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/concrete-signal/components/progress.css

@@ -0,0 +1,44 @@
+/* concrete-signal — progress bar & spinner
+ * A sunken, square-cornered trough with a flat accent fill — no gradient fill,
+ * no glow. The spinner keeps the theme's zero-radius signature: a square
+ * rotating frame rather than a soft circular arc. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-progress {
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--rb-surface-sunken);
+  border: 1px solid var(--rb-border);
+  border-radius: var(--rb-radius);
+  overflow: hidden;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-progress::-webkit-progress-bar {
+  background: var(--rb-surface-sunken);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-progress::-webkit-progress-value {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-progress::-moz-progress-bar {
+  background: var(--rb-accent);
+}
+
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-spinner {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--rb-border-strong);
+  border-top-color: var(--rb-accent);
+  border-radius: var(--rb-radius);
+  animation: rb-signal-spin 0.7s linear infinite;
+}
+@keyframes rb-signal-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-spinner {
+    animation-duration: 2s;
+  }
+}

package/concrete-signal/components/stepper.css

@@ -0,0 +1,83 @@
+/* concrete-signal — 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. No
+ * glow or blur -- ever, per this theme's rule -- so the current node's lift
+ * is the hard, literal offset shadow-lg, and a segment snaps instantly
+ * instead of transitioning. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper {
+  display: flex;
+  isolation: isolate;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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="concrete-signal"], [data-rb-style="concrete-signal"] *).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;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step:not(:first-child).rb-stepper--complete::before,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__step:not(:first-child).rb-stepper--current::before {
+  background: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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-bold);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper__label {
+  font-size: var(--rb-text-sm);
+  color: var(--rb-text-faint);
+  text-transform: uppercase;
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--complete .rb-stepper__node {
+  background: var(--rb-accent);
+  color: var(--rb-accent-fg);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--complete .rb-stepper__label {
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-stepper--current .rb-stepper__label {
+  color: var(--rb-accent);
+  font-weight: var(--rb-font-weight-bold);
+}

package/concrete-signal/components/table.css

@@ -0,0 +1,48 @@
+/* concrete-signal — table
+ * Dense, spec-sheet reading: 1px border-strong rules everywhere (not faint
+ * hairlines), uppercase tracked headers, tabular numerals, and a row hover
+ * that snaps instantly — no transition softness. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--rb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table th {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text-faint);
+  text-align: left;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: var(--rb-font-weight-bold);
+  letter-spacing: var(--rb-label-tracking);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table td {
+  padding: var(--rb-space-2) var(--rb-space-3);
+  border-bottom: 1px solid var(--rb-border-strong);
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).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;
+ * no transition here either, matching the table's instant-snap hover. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table--interactive tbody tr {
+  cursor: pointer;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table--interactive tbody tr:focus-visible,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table--interactive tbody tr:has(:focus-visible) {
+  outline: 2px solid var(--rb-accent);
+  outline-offset: -2px;
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table--interactive tbody tr:focus-visible td,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table--interactive tbody tr:has(:focus-visible) td {
+  background: var(--rb-surface-2);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-table .rb-num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/concrete-signal/components/tabs.css

@@ -0,0 +1,49 @@
+/* concrete-signal — tabs
+ * Uppercase text tabs; the active tab carries accent text and a hard 3px
+ * underline in the theme's one rationed gradient — its only appearance
+ * outside the token declaration itself. */
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tabs {
+  display: flex;
+  gap: var(--rb-space-2);
+  border-bottom: 1px solid var(--rb-border);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab {
+  position: relative;
+  padding: var(--rb-space-2) var(--rb-space-4);
+  background: none;
+  border: none;
+  color: var(--rb-text-soft);
+  text-transform: uppercase;
+  font-family: var(--rb-font-body);
+  font-weight: var(--rb-font-weight-bold);
+  font-size: var(--rb-text-sm);
+  letter-spacing: var(--rb-label-tracking);
+  cursor: pointer;
+  transition: color var(--rb-transition);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab:hover {
+  color: var(--rb-text);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab.rb-tab--active,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab[aria-selected="true"] {
+  color: var(--rb-accent);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab.rb-tab--active::after,
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 3px;
+  background: var(--rb-accent-grad);
+}
+:where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tabpanel {
+  padding: var(--rb-space-4) 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-rb-style="concrete-signal"], [data-rb-style="concrete-signal"] *).rb-tab {
+    transition: none;
+  }
+}