@ponchia/ui 0.8.1 → 0.10.0

package/css/primitives.css

@@ -6,6 +6,8 @@
 /* --- Layout composition --- */
 
 .ui-stack {
+  min-inline-size: 0;
+  grid-template-columns: minmax(0, 1fr);
   display: grid;
   gap: var(--stack-gap, var(--space-md));
 }
@@ -169,7 +171,7 @@
 .ui-app-metrics {
   display: grid;
   gap: var(--space-md);
-  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
 }
 
 /* Inside an opt-in .ui-cq container, collapse to one column when the
@@ -201,27 +203,27 @@
 .ui-stat__label,
 .ui-app-metric__label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-stat__value,
 .ui-app-metric__value {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: 1.9rem;
   font-variant-numeric: tabular-nums;
   font-weight: var(--display-weight-strong);
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
   line-height: 1.05;
   overflow-wrap: anywhere; /* break an unspaced ID/hash rather than overflow */
 }
 
 .ui-stat__delta,
 .ui-app-metric__delta {
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
 }
 
@@ -329,18 +331,18 @@
   color: var(--success);
 }
 
-/* --- Eyebrow / section label — dot-matrix face --- */
+/* --- Eyebrow / section label — supporting text --- */
 
 .ui-eyebrow {
   /* accent-strong, not accent: this is small bold text and must clear
      WCAG AA 4.5:1 on the soft/tinted surfaces eyebrows sit on too. */
   color: var(--accent-text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-eyebrow--muted {
@@ -363,17 +365,17 @@
   color: var(--button-text);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 600;
   gap: 0.45rem;
   justify-content: center;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   min-block-size: 2.4rem;
   min-inline-size: 2.4rem;
   padding: 0.66rem 1rem;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard),
@@ -554,14 +556,14 @@
   text-decoration: none;
 }
 
-/* CTA: the eyebrow-faced action link (accent · display · uppercase),
+/* CTA: the accent action link with a directional cue,
    composed from the same tokens as .ui-eyebrow + the arrow glyph. */
 .ui-link--cta {
   color: var(--accent-text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-link--arrow::after,
@@ -603,14 +605,14 @@
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.36rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   min-block-size: 1.7rem;
   padding: 0.32rem 0.55rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-chip--accent {
@@ -619,6 +621,24 @@
   border-color: var(--accent);
 }
 
+/* Static labels in a pane header need less height than a clickable control. */
+.ui-chip--dense {
+  min-block-size: 1.25rem;
+  padding: 0.15rem 0.4rem;
+}
+
+.ui-chip--dense:is(button, a, [role='button']) {
+  min-block-size: var(--tap-target-min);
+  min-inline-size: var(--tap-target-min);
+}
+
+@media (pointer: coarse) {
+  .ui-chip--dense:is(button, a, [role='button']) {
+    min-block-size: var(--tap-target);
+    min-inline-size: var(--tap-target);
+  }
+}
+
 /* --- Badge / status pill --- */
 
 .ui-badge {
@@ -628,14 +648,14 @@
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
   gap: 0.34rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
   padding: 0.28rem 0.5rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 /* Tone rides the border + tint; text stays the high-contrast neutral
@@ -726,17 +746,17 @@
 
 .ui-key-value dt {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   line-height: 1;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-key-value dd {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   margin: 0;
   min-inline-size: 0;
   overflow-wrap: anywhere; /* IDs/hashes/paths are the common value — break, don't overflow */

package/css/report.css

@@ -8,19 +8,31 @@
 
 .ui-report {
   /* Declare override-surface tokens first so authors can set them. */
-  --report-width: 72rem;
+  --report-width: 64rem;
   --report-padding-block: var(--space-2xl);
-  --report-gap: var(--space-lg);
-  --report-measure: 74ch;
+  --report-gap: var(--space-xl);
+  --report-measure: 68ch;
 
   color: var(--text-soft);
   display: grid;
+  font-size: 1.125rem;
+  line-height: 1.65;
   gap: var(--report-gap);
   inline-size: min(100%, var(--report-width));
   margin-inline: auto;
   padding: var(--report-padding-block) var(--space-md);
 }
 
+/* Keep reading measure independent of a wide figure or evidence table. */
+.ui-report p,
+.ui-report__section > :is(ul, ol, blockquote) {
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report .ui-prose {
+  font-size: inherit;
+}
+
 .ui-report--compact {
   --report-gap: var(--space-md);
   --report-padding-block: var(--space-xl);
@@ -74,14 +86,14 @@
 
 .ui-report__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: calc(var(--text-xl) * 1.35);
-  font-weight: var(--display-weight-strong);
+  font-family: var(--sans);
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 650;
   letter-spacing: 0;
-  line-height: 1.05;
+  line-height: 1.15;
   margin: 0;
   max-inline-size: var(--report-measure);
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -98,14 +110,14 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.55rem;
   letter-spacing: 0;
   list-style: none;
   margin: 0;
   padding: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__meta > * {
@@ -123,11 +135,22 @@
 }
 
 .ui-report__toc {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+  border-block: 1px solid var(--line);
   display: grid;
   gap: var(--space-xs);
-  padding: var(--space-md);
+  padding-block: var(--space-md);
+}
+
+.ui-report__toc > summary {
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  min-block-size: var(--tap-target);
+  padding-block: var(--space-xs);
+}
+
+details.ui-report__toc:not([open]) > :not(summary) {
+  display: none;
 }
 
 .ui-report__toc ol,
@@ -162,7 +185,7 @@
 
 .ui-report__decision {
   background: var(--panel);
-  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
+  border: 0;
   border-inline-start: 3px solid var(--accent);
   border-radius: var(--radius-md);
   display: grid;
@@ -172,22 +195,22 @@
 
 .ui-report__decision-kicker {
   color: var(--accent-text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__decision-title {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-lg);
   font-weight: var(--display-weight);
   letter-spacing: 0;
   line-height: 1.18;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -202,7 +225,7 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.45rem 0.75rem;
   letter-spacing: 0;
@@ -230,10 +253,10 @@
 
 .ui-report__decision-label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-report__decision-value {
@@ -346,10 +369,10 @@
 .ui-claim__scope,
 .ui-claim__refs {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-claim__basis,
@@ -386,13 +409,13 @@
 
 .ui-report__section-head {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xl);
-  font-weight: var(--display-weight);
+  font-weight: 650;
   letter-spacing: 0;
   line-height: 1.1;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
   text-wrap: balance;
 }
 
@@ -415,11 +438,11 @@
 
 .ui-report__caption {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
   line-height: 1.5;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-evidence-grid {
@@ -446,7 +469,7 @@
 
 .ui-evidence-item__meta {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
 }
@@ -472,10 +495,10 @@
 .ui-evidence-item__window,
 .ui-evidence-item__source {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-evidence-item__value {
@@ -516,13 +539,13 @@
 
 .ui-report__action-status {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   grid-column: 2;
   grid-row: 1;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   place-self: start end;
-  text-transform: uppercase;
+  text-transform: none;
   white-space: nowrap;
 }
 
@@ -546,10 +569,10 @@
 .ui-report__action-priority,
 .ui-report__action-source {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-report__action-criteria {
@@ -613,10 +636,10 @@
 
 .ui-compare__head {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 /* A chart is NOT a bronto component — it needs scales + data binding, which the
@@ -660,6 +683,7 @@
     --line-strong: #b3b3b3;
 
     inline-size: auto;
+    font-size: 11pt;
     padding: 0;
   }
 

package/css/row.css

@@ -0,0 +1,154 @@
+/* ==========================================================================
+   row — the dense selectable row. IN THE DEFAULT BUNDLE.
+
+   Every workbench grows a list of these: a search result, a file in an
+   explorer, an outline entry, a backlink, an inbox item, a commit. They are not
+   table rows — there is no column contract and no header — and they are not
+   menu items, because they persist rather than dismissing. But they are all the
+   same object: a full-width clickable line with a leading mark, a title that
+   gives up space first, and trailing metadata that does not.
+
+   Bronto already had this shape and it was imprisoned. `.ui-menu__item` is
+   exactly it, minus the persistence — so a consumer building an explorer either
+   claimed to be a menu or wrote the row again. One downstream workbench had
+   SIXTY-THREE families of it, about 1,200 lines, each re-deciding the selected
+   state, the hover, the ellipsis and the coarse-pointer floor.
+
+   `.ui-menu__item` now composes this, so the two cannot drift.
+
+   BOUNDARY. The host owns what a row means, what selects it, and what its
+   columns are. Bronto owns the line: its rhythm, its states, and the fact that
+   the title is the part that truncates. Rows that carry a severity should reach
+   for `.ui-severity-row` in `state.css` instead — that one adds the tone gutter.
+
+   In core rather than opt-in, unusually for a new surface, because
+   `.ui-menu__item` composes it and a core component cannot depend on a leaf.
+   ========================================================================== */
+
+.ui-row {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 0.5rem;
+
+  /* The companion to `__title`'s ellipsis, and the demo proved it is not
+     optional: a row is usually a flex or grid ITEM, whose automatic minimum
+     size is its min-content width — and `__title` is `white-space: nowrap`, so
+     that min-content is the WHOLE title. Without this a long title stops the
+     row shrinking and pushes its container past the viewport instead of
+     truncating. Caught at 320/360/390px by the overflow specs. */
+  min-inline-size: 0;
+  padding: 0.4rem 0.5rem;
+  text-align: start;
+  inline-size: 100%;
+}
+
+/* A row is usually a <button> or an <a>; when it is neither, it still needs to
+   look inert rather than pressable. */
+.ui-row:not(button, a, [role='button'], [role='option'], [tabindex]) {
+  cursor: default;
+}
+
+/* The title gives up space FIRST — it is the only part of a row that can be
+   truncated without losing a fact. Everything else keeps its size. */
+.ui-row__title {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Trailing facts: a count, an age, a path fragment. Never the thing that
+   shrinks, because a half-rendered number is worse than no number. */
+.ui-row__meta {
+  color: var(--text-dim);
+  flex: none;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+}
+
+/* A leading mark — an icon, a glyph, a status dot. Sized by the host. */
+.ui-row__mark {
+  display: inline-flex;
+  flex: none;
+}
+
+/* A row that wraps to a second line: a result with a snippet under its title.
+   The parts stack rather than sharing the baseline. */
+.ui-row--stacked {
+  align-items: stretch;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.ui-row--stacked .ui-row__title {
+  flex: none;
+}
+
+/* Rows in a list read as one object when they share a rule; rows in a menu
+   float. `--ruled` is the list form. */
+.ui-row--ruled {
+  border-block-end: 1px solid var(--line);
+  border-radius: 0;
+}
+
+/* --- States, and WHICH attribute is yours to use.
+
+   `aria-selected` is only valid on a row that has a role which accepts it —
+   `option` inside a `listbox`, or `row` / `tab` / `gridcell` / `treeitem`. On a
+   bare `<button>` it is invalid ARIA, and axe rates that CRITICAL. This project
+   shipped exactly that mistake in its own demo and the a11y gate caught it.
+
+   So: `aria-current` for a row that is merely the current one (the common
+   case), `aria-selected` only when the row genuinely carries an option/row
+   role, and `.is-selected` when neither applies. All three paint the same. --- */
+
+.ui-row[aria-selected='true'],
+.ui-row[aria-current]:not([aria-current='false']),
+.ui-row.is-selected {
+  background: var(--panel-soft);
+  color: var(--text);
+}
+
+@media (hover: hover) {
+  .ui-row:is(button, a, [role='button'], [role='option'], [tabindex]):hover {
+    background: var(--bg-accent);
+    color: var(--text);
+  }
+}
+
+.ui-row:focus-visible {
+  background: var(--bg-accent);
+  color: var(--text);
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+/* Touch: a row is a primary target in a list, so it floats to the full
+   tap-target rather than the 24px minimum. */
+@media (pointer: coarse) {
+  .ui-row {
+    min-block-size: var(--tap-target);
+  }
+}
+
+/* Forced colours strip the tinted hover/selected background, which would leave
+   the current row indistinguishable from its siblings. Re-assert a system
+   Highlight, the same way the menu and combobox rows do. */
+@media (forced-colors: active) {
+  .ui-row[aria-selected='true'],
+  .ui-row[aria-current]:not([aria-current='false']),
+  .ui-row.is-selected,
+  .ui-row:hover,
+  .ui-row:focus-visible {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}