@ponchia/ui 0.10.0 → 0.12.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/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/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,
@@ -154,8 +158,7 @@
     var(--chart-seq-2),
     var(--chart-seq-3),
     var(--chart-seq-4),
-    var(--chart-seq-5),
-    var(--chart-seq-6)
+    var(--chart-seq-5)
   );
   block-size: 0.7rem;
   border: 1px solid var(--line);
@@ -202,6 +205,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 +247,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/report.css

@@ -27,6 +27,7 @@
 .ui-report p,
 .ui-report__section > :is(ul, ol, blockquote) {
   max-inline-size: var(--report-measure);
+  overflow-wrap: anywhere;
 }
 
 .ui-report .ui-prose {
@@ -232,6 +233,7 @@ details.ui-report__toc:not([open]) > :not(summary) {
 }
 
 .ui-report__decision-grid {
+  container: bronto-decision / inline-size;
   border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0;
@@ -260,6 +262,7 @@ details.ui-report__toc:not([open]) > :not(summary) {
 }
 
 .ui-report__decision-value {
+  overflow-wrap: anywhere;
   color: var(--text-soft);
   line-height: 1.5;
 }
@@ -519,6 +522,7 @@ details.ui-report__toc:not([open]) > :not(summary) {
 }
 
 .ui-report__actions {
+  container: bronto-actions / inline-size;
   border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0;
@@ -546,7 +550,8 @@ details.ui-report__toc:not([open]) > :not(summary) {
   letter-spacing: 0;
   place-self: start end;
   text-transform: none;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  white-space: normal;
 }
 
 .ui-report__action-title,
@@ -581,8 +586,13 @@ details.ui-report__toc:not([open]) > :not(summary) {
   line-height: 1.5;
 }
 
-@media (max-width: 32rem) {
-  .ui-report__decision-item,
+@container bronto-decision (max-width: 32rem) {
+  .ui-report__decision-item {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@container bronto-actions (max-width: 32rem) {
   .ui-report__action {
     grid-template-columns: 1fr;
   }
@@ -611,7 +621,7 @@ details.ui-report__toc:not([open]) > :not(summary) {
    a single stack on a narrow screen via auto-fit, so two panels never
    overflow. `ui-compare__col` is one side, `ui-compare__head` labels it.
    `ui-compare--2up` pins exactly two equal columns for a hard before/after
-   pairing (still collapsing to one column on a phone). */
+   pairing, with a 16rem reading floor per column in any parent. */
 .ui-compare {
   display: grid;
   gap: var(--space-md);
@@ -619,13 +629,12 @@ details.ui-report__toc:not([open]) > :not(summary) {
 }
 
 .ui-compare--2up {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-@media (max-width: 33rem) {
-  .ui-compare--2up {
-    grid-template-columns: 1fr;
-  }
+  /* At most two columns, each at least 16rem unless the whole parent is narrower.
+     Intrinsic wrapping also works outside a report or named query container. */
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(16rem, (100% - var(--space-md)) / 2)), 1fr)
+  );
 }
 
 .ui-compare__col {
@@ -687,6 +696,11 @@ details.ui-report__toc:not([open]) > :not(summary) {
     padding: 0;
   }
 
+  .ui-report__decision-grid,
+  .ui-report__actions {
+    container-type: normal;
+  }
+
   .ui-report__cover {
     min-block-size: auto;
   }

package/css/sources.css

@@ -78,7 +78,7 @@
 .ui-citation {
   color: var(--accent-text);
   font-family: var(--mono);
-  font-size: 0.72em;
+  font-size: max(0.72em, var(--text-2xs));
   font-weight: 600;
   text-decoration: none;
   vertical-align: super;