@attrus-ds/core 1.0.10 → 1.0.12

package/dist/css/components/sidebar.css

@@ -56,7 +56,7 @@
 .sb-section {
   padding: var(--space-6) var(--space-5) var(--space-2);
   font-family: var(--font-sans);
-  font-size: var(--fs-xxs); font-weight: var(--w-semibold);
+  font-size: var(--fs-xxs); font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   opacity: 0.7;
   letter-spacing: var(--ls-caps); text-transform: uppercase;
@@ -68,7 +68,7 @@
   height: 36px; box-sizing: border-box;
   border-radius: var(--radius-sm);
   color: var(--color-foreground-default);
-  font-size: var(--fs-md); font-weight: var(--w-medium);
+  font-size: var(--fs-md); font-weight: var(--w-regular);
   cursor: pointer; position: relative;
   white-space: nowrap; overflow: hidden;
   transition: background .15s, color .15s;
@@ -77,7 +77,7 @@
 .sb-item.active {
   background: var(--color-background-selected);
   color: var(--color-foreground-brand);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .sb-item.active::before {
   content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
@@ -100,12 +100,13 @@
 .sb-badge.alert { background: var(--color-danger-500); }
 .sb-badge.warning { background: var(--color-warning-500); }
 .sb-count {
-  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs);
   color: var(--color-foreground-muted);
   background: var(--color-background-subtle);
   padding: 1px 6px; border-radius: var(--radius-xs);
 }
-.sb-item.active .sb-count { background: var(--color-brand-subtle); color: var(--color-brand-text); }
+.sb-item.active .sb-count { background: var(--color-brand-subtle); color: var(--color-foreground-brand); }
 
 /* Footer — user mini-card */
 .sb-foot {
@@ -121,7 +122,7 @@
   display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
 }
 .sb-foot .meta { flex: 1; min-width: 0; }
-.sb-foot .meta .name { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-foot .meta .name { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sb-foot .meta .role { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sb-foot .logout { color: var(--color-foreground-muted); cursor: pointer; flex-shrink: 0; display: inline-flex; }
 .sb-foot .logout svg, .sb-foot .logout i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
@@ -169,7 +170,7 @@
   height: 38px; box-sizing: border-box;
   border-radius: var(--radius-sm);
   color: var(--color-foreground-secondary);
-  font-size: var(--fs-sm); font-weight: var(--w-medium);
+  font-size: var(--fs-sm); font-weight: var(--w-regular);
   cursor: pointer; position: relative;
   transition: var(--transition-fast);
 }
@@ -181,11 +182,12 @@
 }
 .sb-children .sb-subitem:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
 .sb-children .sb-subitem:hover::before { opacity: 1; background: var(--color-foreground-muted); }
-.sb-children .sb-subitem.active { color: var(--color-foreground-brand); font-weight: var(--w-semibold); background: var(--color-background-selected); }
+.sb-children .sb-subitem.active { color: var(--color-foreground-brand); font-weight: var(--w-regular); background: var(--color-background-selected); }
 .sb-children .sb-subitem.active::before { background: var(--color-brand-solid); opacity: 1; }
 .sb-children .sb-subitem .count, .sb-children .sb-subitem .sb-count {
   margin-left: auto;
-  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xxs);
   color: var(--color-foreground-muted);
   background: var(--color-background-subtle);
   padding: 1px 6px; border-radius: var(--radius-xs);

package/dist/css/components/smart-search.css

@@ -18,11 +18,11 @@
 
 .ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
 .ss-section:last-of-type { border-bottom: 0; }
-.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }: var(--space-2); }
+.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
 
 /* Suggestion chips (active state) */
 .ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
+.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
 .ss-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
 .ss-chip svg, .ss-chip i { width: 11px; height: 11px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
 
@@ -32,9 +32,9 @@
 .ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
 .ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
 .ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-.ss-list-item .icon-leading.brand { background: var(--color-brand-subtle-solid); color: var(--color-brand-text); }
+.ss-list-item .icon-leading.brand { background: var(--color-brand-subtle-solid); color: var(--color-brand-text-on-light); }
 .ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); }
 .ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground-muted); }
 .ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
@@ -46,21 +46,22 @@
 
 /* Empty/result label */
 .ss-result-label { padding: 0 var(--space-2) var(--space-2); }
-.ss-result-label .l { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); }
+.ss-result-label .l { font-size: var(--fs-xxs); font-weight: var(--w-regular); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); }
 .ss-no-result { padding: 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-foreground-muted); }
-.ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+.ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-regular); }
 
 /* Tip / hint card (similar match suggestion, ID format hint) */
 .ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
 .ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
 .ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
 .ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
-.ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
-.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: var(--color-brand-subtle); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
+.ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-regular); }
+.ss-hint .body code { font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: var(--color-brand-subtle); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
 
 /* ID type-picker buttons */
 .ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
+.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
 .ss-typebtn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
 .ss-typebtn svg, .ss-typebtn i { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
 .ss-typebtn .grow { flex: 1; }
@@ -79,13 +80,14 @@
 
 .ss-illo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
 .ss-illo svg.illustration { width: 84px; height: 60px; }
-.ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-regular); color: var(--color-foreground-default); }
 .ss-illo .body { font-size: var(--fs-xs); color: var(--color-foreground-muted); max-width: 32ch; line-height: var(--lh-relaxed); }
 
 /* Footer with keyboard shortcuts */
 .ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: 1px solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
 .ss-foot .kbd-group { display: inline-flex; align-items: center; gap: 4px; }
-kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
+kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust); font-size: 10px; font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
 .ss-foot .sep { width: 1px; height: 12px; background: var(--color-border-default); }
 
 

package/dist/css/components/status-pills.css

@@ -19,7 +19,7 @@
   border-radius: var(--radius-pill);
   font-family: var(--font-sans);
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   line-height: 1;
   letter-spacing: var(--ls-caps);
   white-space: nowrap;

package/dist/css/components/stepper.css

@@ -66,8 +66,9 @@
   background: var(--color-background-surface);
   border: 1.5px solid var(--color-border-default);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   text-decoration: none;
   transition: var(--transition-fast);
@@ -98,10 +99,30 @@ a.step-marker:focus-visible {
 }
 .step-label {
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   letter-spacing: var(--ls-title);
   color: var(--color-foreground-secondary);
   line-height: var(--lh-tight);
+  /* Truncate by default — labels used to overlap into "AtivaçãoRecebimento" in any
+     narrow container. Opt into two lines with .stepper.is-wrap. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.step-help {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+/* Wrap modifier — allow labels/helpers to run to two lines instead of truncating */
+.stepper.is-wrap .step-label,
+.stepper.is-wrap .step-help {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  text-wrap: pretty;
 }
 .step-help {
   font-size: var(--fs-xs);
@@ -199,7 +220,11 @@ a.step-marker:focus-visible {
 .stepper .step-body {
   align-items: center;
   padding-top: 0;
-  max-width: 16ch;
+  /* Constrain to the step, never wider — a fixed 16ch let the body overflow its
+     own flex:1 step on both sides, so the label's nowrap+ellipsis never engaged
+     and the labels overlapped ("AtivaçãoRecebimento"). */
+  max-width: 100%;
+  min-width: 0;
 }
 .stepper .step-label { text-align: center; }
 .stepper .step-help { text-align: center; }
@@ -282,10 +307,11 @@ a.step-marker:focus-visible {
 .stepper.is-rule .step-label {
   text-align: left;
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   text-transform: uppercase;
   letter-spacing: var(--ls-caps);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .stepper.is-rule .step.is-done .step-marker { background: var(--color-feedback-success-foreground); }
 .stepper.is-rule .step.is-current .step-marker { background: var(--color-brand-accent-700); box-shadow: none; }
@@ -301,6 +327,57 @@ a.step-marker:focus-visible {
   .stepper.is-collapse-sm .step { gap: 0; }
 }
 
+/* ============================================================
+   LABEL SIZE — .stepper-label-sm / -md / -lg
+   Type scale for the label + helper, independent of marker geometry.
+   Density (marker size, connector offset) stays with .is-compact, so the two
+   axes compose: a compact stepper can still carry a large label, and a full
+   stepper can carry a small one.
+   Default (no class) is --fs-sm for the label and --fs-xs for the helper.
+   ============================================================ */
+.stepper-label-sm .step-label { font-size: var(--fs-xs); }
+.stepper-label-sm .step-help  { font-size: var(--fs-xxs); }
+.stepper-label-md .step-label { font-size: var(--fs-sm); }
+.stepper-label-md .step-help  { font-size: var(--fs-xs); }
+.stepper-label-lg .step-label { font-size: var(--fs-md); }
+.stepper-label-lg .step-help  { font-size: var(--fs-sm); }
+/* An explicit label size wins over the density modifier's own type scale */
+.stepper.is-compact.stepper-label-md .step-label { font-size: var(--fs-sm); }
+.stepper.is-compact.stepper-label-md .step-help  { font-size: var(--fs-xs); }
+.stepper.is-compact.stepper-label-lg .step-label { font-size: var(--fs-md); }
+.stepper.is-compact.stepper-label-lg .step-help  { font-size: var(--fs-sm); }
+
+/* ============================================================
+   ON INVERSE — stepper on a permanently-dark surface
+   ============================================================ */
+.stepper.on-inverse .step-label { color: var(--color-foreground-inverse-secondary); }
+.stepper.on-inverse .step-help  { color: var(--color-foreground-inverse-muted); }
+.stepper.on-inverse .step-marker {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-secondary);
+}
+.stepper.on-inverse .step::after { background: var(--color-border-inverse); }
+.stepper.on-inverse .step.is-current .step-marker {
+  background: var(--color-accent-solid);
+  border-color: var(--color-accent-solid);
+  color: var(--color-foreground-on-solid);
+}
+.stepper.on-inverse .step.is-current .step-label,
+.stepper.on-inverse .step.is-done .step-label { color: var(--color-foreground-inverse-default); }
+.stepper.on-inverse .step.is-done .step-marker {
+  background: color-mix(in srgb, var(--color-accent-solid) 30%, transparent);
+  border-color: var(--color-accent-solid);
+  color: var(--color-foreground-inverse-default);
+}
+.stepper.on-inverse .step.is-done::after { background: var(--color-accent-solid); }
+.stepper.on-inverse .step.is-error .step-marker,
+.stepper.on-inverse .step.is-error .step-label { color: var(--color-danger-300); }
+.stepper.on-inverse .step.is-error .step-marker { border-color: var(--color-danger-300); }
+.stepper.on-inverse .step.is-skipped .step-label,
+.stepper.on-inverse .step.is-skipped .step-marker { color: var(--color-foreground-inverse-muted); }
+.stepper.on-inverse .step-btn:focus-visible { box-shadow: var(--shadow-focus-inverse); }
+
 /* ============================================================
    Reduced motion
    ============================================================ */

package/dist/css/components/table.css

@@ -74,7 +74,7 @@
 }
 .dt-toolbar .count {
   color: var(--color-foreground-default);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .dt-toolbar .count .total {
   color: var(--color-foreground-muted);
@@ -106,6 +106,7 @@
 }
 .dt-pagination .range {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
   color: var(--color-foreground-muted);
 }
@@ -126,8 +127,9 @@
   background: var(--color-background-surface);
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-secondary);
   cursor: pointer;
   transition:
@@ -165,8 +167,9 @@
    ---------------------------------------------------------------- */
 .dt thead th {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
   text-transform: uppercase;
   letter-spacing: var(--ls-caps);
@@ -244,7 +247,7 @@
 }
 .dt-cell-stack > .pri {
   font-size: var(--fs-md);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   white-space: nowrap;
   overflow: hidden;
@@ -257,6 +260,7 @@
 }
 .dt-cell-stack > .sub.mono {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
 }
 
@@ -309,6 +313,10 @@
   white-space: nowrap;
   letter-spacing: -0.01em;
 }
+/* Header label follows the values (beats `.dt thead th { text-align:left }`
+   by specificity); stacked cells in a numeric column align flex to the right. */
+.dt thead th.dt-num { text-align: right; }
+.dt td.dt-num .dt-cell-stack { align-items: flex-end; }
 .dt-num .ccy {
   color: var(--color-foreground-muted);
   font-weight: var(--w-regular);
@@ -322,6 +330,7 @@
 /* IDs / hashes */
 .dt-id {
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xs);
   color: var(--color-foreground-muted);
   white-space: nowrap;
@@ -415,7 +424,7 @@
 .dt-empty .ttl {
   display: block;
   font-size: var(--fs-base);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   margin-bottom: var(--space-2);
 }
@@ -459,6 +468,7 @@
   background: var(--color-background-subtle);
   padding: var(--space-3) var(--space-5);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   font-weight: var(--w-regular);
   color: var(--color-foreground-muted);
@@ -566,8 +576,9 @@
     content: attr(data-label);
     flex-shrink: 0;
     font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
     font-size: var(--fs-xxs);
-    font-weight: var(--w-semibold);
+    font-weight: var(--w-regular);
     text-transform: uppercase;
     letter-spacing: var(--ls-caps);
     color: var(--color-foreground-muted);
@@ -582,7 +593,7 @@
     justify-content: flex-start;
     text-align: left;
     font-size: var(--fs-base);
-    font-weight: var(--w-semibold);
+    font-weight: var(--w-regular);
     padding-top: var(--space-3);
   }
   /* The lead block (avatar + name + country/doc) reads left-to-right */
@@ -600,3 +611,153 @@
   .dt-responsive .dt tbody tr.dt-empty td { border: 0; text-align: center; }
   .dt-responsive .dt tbody tr.dt-empty td::before { content: none; }
 }
+
+/* ----------------------------------------------------------------
+   12. SUBROWS — a row bound to the row above it
+   ----------------------------------------------------------------
+   For a line item that belongs to another line item and shares its columns:
+   an ACH fee under its payment, a refund under its charge, a leg under its
+   transfer. This is hierarchy (tree rows), NOT a detail panel — the child
+   fills the same columns as the parent, so the two read as one block.
+
+   Structure:
+     <tr class="has-subrows">   parent — loses its bottom border, so the pair glues
+     <tr class="dt-subrow">     child  — sunken bg, one type step down, no border
+     <tr class="dt-subrow is-last">  last child of the group — restores the border
+
+   Indent scales by depth through one token, so nesting costs no new rules:
+     <tr class="dt-subrow" data-depth="2">
+
+   ROW STATES DO NOT CASCADE IN CSS — a sibling selector cannot read the
+   previous row's class. The component echoes is-muted / is-error / is-selected
+   onto each subrow; without that the child visually detaches from its parent.
+
+   ACCESSIBILITY — native table semantics are kept on purpose. role="treegrid"
+   is the formally correct role for hierarchical rows, but it is a PROMISE of a
+   keyboard model (arrow-key cell/row navigation, aria-level, aria-expanded,
+   posinset/setsize). Claiming it without implementing that model is worse for
+   a screen-reader user than a plain table. Since these subrows are always
+   visible and one level deep, hierarchy is conveyed in CONTENT instead: the
+   lead cell carries a visually-hidden prefix naming its parent. Revisit
+   treegrid only if the rows ever become collapsible and keyboard-navigable.
+   ---------------------------------------------------------------- */
+
+/* Glue: the parent gives up its bottom border so no line splits the pair */
+.dt tbody tr.has-subrows > td { border-bottom: 0; }
+
+.dt tbody tr.dt-subrow > td {
+  background: var(--color-background-subtle);
+  border-bottom: 0;
+  padding-top: var(--space-2-5);
+  padding-bottom: var(--space-2-5);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-secondary);
+}
+/* The group closes with a normal rule */
+.dt tbody tr.dt-subrow.is-last > td { border-bottom: 1px solid var(--color-border-default); }
+
+/* Hover reads on the whole group, not on one row */
+.dt tbody tr.has-subrows.is-clickable:hover > td,
+.dt tbody tr.has-subrows.is-clickable:hover + tr.dt-subrow > td {
+  background: var(--color-background-hover);
+}
+
+/* Indent — one token, multiplied by depth */
+/* --subrow-indent is a real token (declared in colors_and_type.css §7 spacing);
+   depth multiplies it in the calc, so no custom property is declared under a
+   component selector and N levels still cost one rule each. */
+.dt tbody tr.dt-subrow > td:first-child {
+  padding-left: calc(var(--space-5) + var(--subrow-indent) * 1);
+}
+.dt tbody tr.dt-subrow[data-depth="2"] > td:first-child {
+  padding-left: calc(var(--space-5) + var(--subrow-indent) * 2);
+}
+.dt tbody tr.dt-subrow[data-depth="3"] > td:first-child {
+  padding-left: calc(var(--space-5) + var(--subrow-indent) * 3);
+}
+
+/* Lead cell — connector glyph + content. The glyph is a ::before so it is not
+   copied with the text and not announced as a character. */
+.dt-subrow-lead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  min-width: 0;
+}
+.dt-subrow-lead::before {
+  content: "\21B3";
+  color: var(--color-foreground-placeholder);
+  font-size: var(--fs-sm);
+  line-height: 1;
+  flex-shrink: 0;
+}
+/* Small square icon tile, quieter than the parent's .ic-tile */
+.dt-subrow-lead > .ic-mini {
+  width: 20px; height: 20px;
+  border-radius: var(--radius-2xs);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-foreground-muted);
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+.dt-subrow-lead > .ic-mini > i,
+.dt-subrow-lead > .ic-mini > svg { width: 11px; height: 11px; stroke-width: var(--icon-stroke); }
+.dt-subrow-lead > .txt {
+  color: var(--color-foreground-default);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* Neutral tag for the item kind (Fee, Refund, Leg) */
+.dt-subrow-tag {
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-2xs);
+  padding: 1px var(--space-2);
+  flex-shrink: 0;
+}
+/* Status text on a subrow is plain muted copy, not a pill — the parent owns the
+   status signal and two pills in a group compete. */
+.dt-subrow-status { color: var(--color-foreground-muted); font-size: var(--fs-xs); flex-shrink: 0; }
+
+/* Row states echoed from the parent by the component */
+.dt tbody tr.dt-subrow.is-muted > td { opacity: .55; }
+.dt tbody tr.dt-subrow.is-selected > td { background: var(--color-background-selected); }
+.dt tbody tr.dt-subrow.is-error > td { background: color-mix(in srgb, var(--color-feedback-danger-background) 40%, transparent); }
+
+/* Inverse / dark */
+.dt.on-inverse tbody tr.dt-subrow > td,
+.dark .dt tbody tr.dt-subrow > td {
+  background: color-mix(in srgb, var(--color-pure-white) 3%, transparent);
+  color: var(--color-foreground-inverse-secondary);
+}
+.dt.on-inverse .dt-subrow-lead > .txt,
+.dark .dt .dt-subrow-lead > .txt { color: var(--color-foreground-inverse-default); }
+.dt.on-inverse .dt-subrow-lead > .ic-mini,
+.dark .dt .dt-subrow-lead > .ic-mini {
+  background: transparent;
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-muted);
+}
+.dt.on-inverse .dt-subrow-tag,
+.dark .dt .dt-subrow-tag {
+  background: transparent;
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-muted);
+}
+
+/* Mobile — inside the card stack the child becomes a nested block, still
+   visibly hanging off its parent card. */
+@media (max-width: 900px) {
+  .dt-responsive .dt tbody tr.dt-subrow {
+    margin: calc(-1 * var(--space-3)) var(--space-3) var(--space-3);
+    border-radius: var(--shape-control);
+    border: 1px solid var(--color-border-default);
+    border-top: 0;
+    display: flex; flex-wrap: wrap; gap: var(--space-2);
+  }
+  .dt-responsive .dt tbody tr.dt-subrow > td { border-bottom: 0; padding-left: var(--space-4); }
+  .dt-responsive .dt tbody tr.dt-subrow > td::before { display: none; }
+}

package/dist/css/components/tabs.css

@@ -36,7 +36,7 @@
   cursor: pointer;
   font-family: var(--font-sans);
   font-size: var(--fs-sm);
-  font-weight: var(--w-medium);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-secondary);
   position: relative;
   white-space: nowrap;
@@ -47,7 +47,7 @@
 .tab[aria-selected="true"],
 .tab.is-active {
   color: var(--color-brand-accent-700);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
 }
 .tab[aria-selected="true"]::after,
 .tab.is-active::after {
@@ -75,6 +75,7 @@
   height: 20px;
   padding: 0 var(--space-2);
   font-family: var(--font-mono);
+  font-size-adjust: var(--font-mono-adjust);
   font-size: var(--fs-xxs);
   font-weight: var(--w-bold);
   background: var(--color-background-subtle);
@@ -204,7 +205,7 @@
 }
 .tab-label::after {
   content: attr(data-label);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   height: 0;
   visibility: hidden;
   overflow: hidden;

package/dist/css/components/toast.css

@@ -54,7 +54,7 @@
 }
 .toast-title {
   font-size: var(--fs-sm);
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-default);
   margin: 0 0 var(--space-1);
   letter-spacing: var(--ls-tight);
@@ -74,7 +74,7 @@
   border: 0;
   padding: 0;
   font: inherit;
-  font-weight: var(--w-semibold);
+  font-weight: var(--w-regular);
   color: var(--color-foreground-accent);
   text-decoration: underline;
   text-underline-offset: 3px;