@ponchia/ui 0.9.0 → 0.10.0

package/css/navigation.css

@@ -12,16 +12,16 @@
   color: var(--text);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   font-weight: 600;
   gap: 0.4rem;
   justify-content: center;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   min-block-size: 2rem;
   min-inline-size: 7rem;
   padding: 0.42rem 0.66rem;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard),

package/css/overlay.css

@@ -33,8 +33,8 @@
 /* Enter AND exit, zero JS — `@starting-style` + `transition-behavior:
    allow-discrete` keep the native <dialog> (and its backdrop) in the top
    layer while it transitions out on close, so it fades/scales both ways
-   instead of only animating in. Scoped to `dialog.ui-modal` so the
-   controlled `.is-open` (non-<dialog>) path keeps its own entrance.
+   instead of only animating in. The native dialog owns top-layer state;
+   an application toggles it through showModal() and close().
    Needs a 2026-era floor (see CONTRIBUTING → Browser floor). */
 dialog.ui-modal {
   opacity: 0;
@@ -76,24 +76,8 @@ dialog.ui-modal[open]::backdrop {
   }
 }
 
-/* Controlled (non-<dialog>) usage. A portal/React modal that can't be a
-   native <dialog> wears the same skin + open layout via `.is-open`.
-   Backdrop and top-layer stacking are then the consumer's responsibility
-   (the native <dialog> path gets them free); focus-trapping no longer is —
-   mark the overlay `data-bronto-modal` and run `initModal` for an
-   inert-based trap + focus-return + Escape signal. */
-.ui-modal.is-open {
-  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-}
-
-/* Background scroll-lock. A native <dialog> top layer does NOT stop the page
-   behind it scrolling, and the no-JS native path can't lock it in script — so
-   lock it in CSS, for both the native [open] dialog and the controlled .is-open
-   overlay (incl. the drawer modifier, same base). */
-html:has(dialog.ui-modal[open]),
-html:has(.ui-modal.is-open) {
+/* Native dialogs lock the document while open. */
+html:has(dialog.ui-modal[open]) {
   overflow: hidden;
 }
 
@@ -108,11 +92,11 @@ html:has(.ui-modal.is-open) {
 
 .ui-modal__title {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-lg);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-modal__body {
@@ -136,7 +120,7 @@ html:has(.ui-modal.is-open) {
   color: var(--text);
   cursor: pointer;
   flex: 0 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   line-height: 1;
   padding: 0.34rem 0.5rem;
 }
@@ -283,11 +267,11 @@ html:has(.ui-modal.is-open) {
 
 .ui-menu__label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.45rem 0.55rem 0.2rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 /* Composes `.ui-row` (css/row.css) — a menu item IS a dense selectable row,
@@ -296,7 +280,7 @@ html:has(.ui-modal.is-open) {
    wants, and the leading bullet below. `row.css` is in the core bundle, which
    is what lets a core component compose it. */
 .ui-menu__item {
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   padding: 0.5rem 0.55rem;
 }
@@ -394,7 +378,7 @@ html:has(.ui-modal.is-open) {
   border-radius: var(--radius-sm);
   color: var(--text-soft);
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   padding: 0.5rem 0.55rem;
 }

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;
   }