@ponchia/ui 0.9.0 → 0.11.0

package/css/discussion.css

@@ -0,0 +1,150 @@
+/* Discussions: readable messages and composers. The host owns storage, identity,
+   focus management, anchoring, notifications, and posting state. */
+.ui-discussion {
+  color: var(--text);
+  font-family: var(--sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.ui-discussion__header {
+  align-items: start;
+  display: flex;
+  gap: var(--space-md);
+  justify-content: space-between;
+}
+
+.ui-discussion__header > div {
+  min-inline-size: 0;
+}
+
+.ui-discussion__header h2 {
+  font-family: var(--sans);
+  font-size: var(--text-lg);
+  font-weight: 650;
+  letter-spacing: normal;
+  line-height: 1.25;
+  margin: 0;
+  text-transform: none;
+}
+
+.ui-discussion__header p,
+.ui-discussion__meta,
+.ui-discussion__hint,
+.ui-discussion__state {
+  color: var(--text-dim);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.ui-discussion__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.ui-discussion__quote {
+  background: var(--panel);
+  border-inline-start: 3px solid var(--accent);
+  color: var(--text);
+  font-family: var(--sans);
+  margin: var(--space-md) 0;
+  padding: var(--space-sm) var(--space-md);
+  white-space: pre-wrap;
+}
+
+.ui-discussion__messages,
+.ui-discussion__list {
+  list-style: none;
+  margin: var(--space-md) 0;
+  padding: 0;
+}
+
+.ui-discussion__message {
+  border-block-end: 1px solid var(--line);
+  padding-block: var(--space-md);
+}
+
+.ui-discussion__message .ui-prose {
+  font-family: var(--sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.ui-discussion__meta {
+  margin-block: 0 var(--space-sm);
+}
+
+.ui-discussion__item {
+  background: transparent;
+  border: 0;
+  border-block-end: 1px solid var(--line);
+  color: inherit;
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: var(--space-xs);
+  inline-size: 100%;
+  min-block-size: 44px;
+  padding: var(--space-md) var(--space-sm);
+  text-align: start;
+}
+
+.ui-discussion__item > :first-child {
+  font-weight: 600;
+}
+
+.ui-discussion__item small {
+  color: var(--text-dim);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+}
+
+.ui-discussion__item:is(:hover, :focus-visible) {
+  background: var(--panel);
+}
+
+.ui-discussion__item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.ui-discussion__composer {
+  border-block-start: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-sm);
+  padding-block: var(--space-md);
+}
+
+.ui-discussion__composer textarea {
+  font-family: var(--sans);
+  inline-size: 100%;
+  min-block-size: 7rem;
+  resize: vertical;
+}
+
+@media (forced-colors: active) {
+  .ui-discussion__quote {
+    border-color: Highlight;
+  }
+
+  .ui-discussion__item:focus-visible {
+    outline-color: Highlight;
+  }
+}
+
+@media print {
+  .ui-discussion__actions,
+  .ui-discussion__composer {
+    display: none;
+  }
+
+  .ui-discussion__message {
+    break-inside: avoid;
+  }
+}

package/css/feedback.css

@@ -50,12 +50,12 @@
 
 .ui-alert__title {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-alert__body {
@@ -67,7 +67,7 @@
   border: 0;
   color: var(--text-dim);
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--sans);
   grid-column: 3;
   grid-row: 1;
   line-height: 1;
@@ -199,12 +199,12 @@
 
 .ui-toast__title {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-toast__close {
@@ -284,7 +284,7 @@
     block-size: auto;
     inline-size: auto;
     margin-block-start: 0;
-    font-family: var(--mono);
+    font-family: var(--sans);
     font-weight: 700;
     line-height: 1.1;
   }
@@ -327,15 +327,15 @@
   border-radius: var(--radius-sm);
   inset-block-end: calc(100% + 0.5rem);
   color: var(--bg);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   inset-inline-start: 50%;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   opacity: 0;
   padding: 0.34rem 0.5rem;
   pointer-events: none;
   position: absolute;
-  text-transform: uppercase;
+  text-transform: none;
   transform: translate(-50%, 4px);
   transition: opacity var(--duration-fast) var(--ease-standard);
   white-space: nowrap;
@@ -540,7 +540,7 @@
 
 .ui-meter__value {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-variant-numeric: tabular-nums;
   text-align: end;
 }
@@ -575,17 +575,17 @@
   counter-increment: ui-step;
   display: inline-flex;
   flex: 1 1 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: 0.5rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
 
   /* Prefer the natural one-line width, but never wider than the container: a
      long step label at `max-content` couldn't shrink and overflowed the page on
      narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
      over-long label wrap instead of overflowing. */
   min-inline-size: min(100%, max-content);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-steps__item::before {

package/css/figure.css

@@ -8,6 +8,7 @@
    ========================================================================== */
 
 .ui-figure {
+  container: bronto-figure / inline-size;
   display: grid;
   gap: var(--space-sm);
   margin: 0;
@@ -22,11 +23,11 @@
 
 .ui-figure__caption {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-sm);
   letter-spacing: 0;
   line-height: 1.5;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-figure__body {
@@ -81,7 +82,7 @@
   margin-block-start: var(--space-xs);
 }
 
-@media (max-width: 44rem) {
+@container bronto-figure (max-width: 44rem) {
   .ui-figure__body--key-right {
     grid-template-columns: 1fr;
   }
@@ -89,6 +90,7 @@
 
 @media print {
   .ui-figure {
+    container-type: normal;
     break-inside: avoid;
   }
 

package/css/forms.css

@@ -9,11 +9,11 @@
 
 .ui-label {
   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);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-input,
@@ -23,7 +23,7 @@
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   padding: 0.6rem 0.7rem;
   transition:
@@ -286,6 +286,7 @@
 
 /* --- Range --- */
 .ui-range {
+  margin-inline: 0;
   accent-color: var(--accent);
   inline-size: 100%;
 }
@@ -315,9 +316,9 @@
   font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0 0 var(--space-xs);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-error-summary__list {
@@ -369,7 +370,7 @@
   background: transparent;
   border: 0;
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   outline: none;
   padding: 0.6rem 0;

package/css/generated.css

@@ -25,11 +25,11 @@
   align-items: center;
   color: var(--text-dim);
   display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.4rem;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 /* --- Origin label — "AI assisted" / "model output" / "human reviewed". --- */
@@ -39,12 +39,12 @@
   border-radius: var(--radius-pill);
   color: var(--text-soft);
   display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
   gap: 0.35rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.08rem 0.55rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-origin-label--ai {
@@ -61,10 +61,10 @@
 .ui-reasoning > summary {
   color: var(--text-soft);
   cursor: pointer;
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-reasoning__body {
@@ -110,6 +110,13 @@
   white-space: pre-wrap;
 }
 
+@media (pointer: coarse) {
+  .ui-reasoning > summary,
+  .ui-tool-call > summary {
+    min-block-size: var(--tap-target);
+  }
+}
+
 @media (forced-colors: active) {
   .ui-generated {
     border-inline-start-color: CanvasText;

package/css/legend.css

@@ -18,7 +18,7 @@
   color: var(--text-soft);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: var(--space-2xs) var(--space-md);
   list-style: none;
@@ -37,13 +37,15 @@
 
 .ui-legend__title {
   color: var(--text-dim);
-  font-size: var(--text-2xs);
+  font-size: var(--text-xs);
   letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-legend__item {
+  min-inline-size: 0;
+  max-inline-size: 100%;
   align-items: center;
   color: inherit;
   display: inline-flex;
@@ -51,6 +53,8 @@
 }
 
 .ui-legend__label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   color: inherit;
 }
 
@@ -62,9 +66,9 @@
 
 .ui-legend__caption {
   color: var(--text-dim);
-  font-size: var(--text-2xs);
+  font-size: var(--text-xs);
   letter-spacing: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 /* Swatch — same token contract as the chart fill: set `--chart-color` (and,
@@ -202,6 +206,8 @@
 }
 
 .ui-legend--with-values .ui-legend__item {
+  min-inline-size: 0;
+  max-inline-size: 100%;
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
@@ -242,6 +248,8 @@
 
 .ui-legend__item.is-inactive .ui-legend__label,
 .ui-legend__item[aria-pressed='false'] .ui-legend__label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   text-decoration: line-through;
 }
 

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