@ponchia/ui 0.9.0 → 0.11.0

package/classes/index.js

@@ -55,6 +55,7 @@ export const cls = Object.freeze({
   badgeDot: 'ui-badge--dot',
   chip: 'ui-chip',
   chipAccent: 'ui-chip--accent',
+  chipDense: 'ui-chip--dense',
   link: 'ui-link',
   linkArrow: 'ui-link--arrow',
   linkCta: 'ui-link--cta',
@@ -399,6 +400,19 @@ export const cls = Object.freeze({
   legendTrack: 'ui-legend__track',
   legendTicks: 'ui-legend__ticks',
   legendTick: 'ui-legend__tick',
+  // discussions (opt-in discussion.css; host-owned state)
+  discussion: 'ui-discussion',
+  discussionHeader: 'ui-discussion__header',
+  discussionActions: 'ui-discussion__actions',
+  discussionQuote: 'ui-discussion__quote',
+  discussionMessages: 'ui-discussion__messages',
+  discussionList: 'ui-discussion__list',
+  discussionMessage: 'ui-discussion__message',
+  discussionMeta: 'ui-discussion__meta',
+  discussionHint: 'ui-discussion__hint',
+  discussionState: 'ui-discussion__state',
+  discussionItem: 'ui-discussion__item',
+  discussionComposer: 'ui-discussion__composer',
   annotation: 'ui-annotation',
   annotationSubject: 'ui-annotation__subject',
   annotationConnector: 'ui-annotation__connector',
@@ -617,6 +631,14 @@ export const cls = Object.freeze({
   severityRow: 'ui-severity-row',
   severityRowTitle: 'ui-severity-row__title',
   severityRowMeta: 'ui-severity-row__meta',
+  // The tone as a value, for a mark Bronto does not ship (an SVG shape, a
+  // gradient stop): it paints nothing and only resolves `--severity-tone`.
+  severityTone: 'ui-severity-tone',
+  // timestrip — WHEN, beside the ladder's HOW BAD (css/state.css)
+  timestrip: 'ui-timestrip',
+  timestripAxis: 'ui-timestrip__axis',
+  timestripNow: 'ui-timestrip__now',
+  timestripEvent: 'ui-timestrip__event',
   // generated content / AI-trust surfaces (css/generated.css)
   generated: 'ui-generated',
   generatedLabel: 'ui-generated__label',
@@ -985,7 +1007,7 @@ export const ui = {
   compare: ({ cols } = {}) => j(cls.compare, cols === 2 && cls.compare2up),
   reportFinding: ({ severity } = {}) => j(cls.reportFinding, reportFindingSeverity(severity)),
   claim: ({ status } = {}) => j(cls.claim, claimStatus(status)),
-  chip: ({ accent } = {}) => j(cls.chip, accent && cls.chipAccent),
+  chip: ({ accent, dense } = {}) => j(cls.chip, accent && cls.chipAccent, dense && cls.chipDense),
   link: ({ arrow, cta } = {}) => j(cls.link, arrow && cls.linkArrow, cta && cls.linkCta),
   dot: ({ tone, live } = {}) => j(cls.dot, dotTone(tone), live && cls.dotLive),
   dotgrid: ({ accent, dense } = {}) =>
@@ -1010,7 +1032,7 @@ export const ui = {
   dotspinner: ({ size } = {}) =>
     j(cls.dotspinner, size === 'sm' && cls.dotspinnerSm, size === 'lg' && cls.dotspinnerLg),
   dotbar: ({ indeterminate } = {}) => j(cls.dotbar, indeterminate && cls.dotbarIndeterminate),
-  modal: ({ drawer, open } = {}) => j(cls.modal, drawer && cls.modalDrawer, open && 'is-open'),
+  modal: ({ drawer } = {}) => j(cls.modal, drawer && cls.modalDrawer),
   tab: ({ active } = {}) => j(cls.tab, active && 'is-active'),
   avatar: ({ size } = {}) =>
     j(cls.avatar, size === 'sm' && cls.avatarSm, size === 'lg' && cls.avatarLg),
@@ -1157,8 +1179,16 @@ export const SEVERITY_LEVELS = Object.freeze(['critical', 'error', 'warning', 'n
 /** `data-level` + the severity class, bundled so the attribute that carries the
  *  meaning cannot be forgotten — the class alone paints the neutral tone and
  *  silently loses the level. Unknown/absent levels resolve to `unknown`. */
+const SEVERITY_PARTS = {
+  chip: 'severity',
+  dot: 'severityDot',
+  row: 'severityRow',
+  // Paints nothing; resolves the tone for a mark Bronto does not ship.
+  tone: 'severityTone',
+};
+
 export const severity = (level, { part = 'chip' } = {}) => ({
-  class: part === 'dot' ? cls.severityDot : part === 'row' ? cls.severityRow : cls.severity,
+  class: cls[SEVERITY_PARTS[part] ?? 'severity'],
   'data-level': SEVERITY_LEVELS.includes(level) ? level : 'unknown',
 });
 

package/classes/vscode.css-custom-data.json

@@ -239,11 +239,11 @@
     },
     {
       "name": "--radius-lg",
-      "description": "Global scale token. Value: `3px`"
+      "description": "Global scale token. Value: `6px`"
     },
     {
       "name": "--radius-md",
-      "description": "Global scale token. Value: `2px`"
+      "description": "Global scale token. Value: `4px`"
     },
     {
       "name": "--radius-pill",
@@ -251,11 +251,11 @@
     },
     {
       "name": "--radius-sm",
-      "description": "Global scale token. Value: `1px`"
+      "description": "Global scale token. Value: `2px`"
     },
     {
       "name": "--radius-xl",
-      "description": "Global scale token. Value: `4px`"
+      "description": "Global scale token. Value: `8px`"
     },
     {
       "name": "--safe-area-bottom",
@@ -371,11 +371,11 @@
     },
     {
       "name": "--text-2xs",
-      "description": "Global scale token. Value: `0.72rem`"
+      "description": "Global scale token. Value: `0.75rem`"
     },
     {
       "name": "--text-base",
-      "description": "Global scale token. Value: `0.95rem`"
+      "description": "Global scale token. Value: `1rem`"
     },
     {
       "name": "--text-dim",
@@ -383,11 +383,11 @@
     },
     {
       "name": "--text-lg",
-      "description": "Global scale token. Value: `1.15rem`"
+      "description": "Global scale token. Value: `1.125rem`"
     },
     {
       "name": "--text-sm",
-      "description": "Global scale token. Value: `0.86rem`"
+      "description": "Global scale token. Value: `0.875rem`"
     },
     {
       "name": "--text-soft",
@@ -395,11 +395,11 @@
     },
     {
       "name": "--text-xl",
-      "description": "Global scale token. Value: `1.45rem`"
+      "description": "Global scale token. Value: `1.5rem`"
     },
     {
       "name": "--text-xs",
-      "description": "Global scale token. Value: `0.76rem`"
+      "description": "Global scale token. Value: `0.8125rem`"
     },
     {
       "name": "--tracking-wide",

package/css/annotations.css

@@ -14,7 +14,7 @@
   --annotation-stroke-width: 1.5;
 
   color: var(--annotation-color);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   overflow: visible;
 }
@@ -96,7 +96,7 @@
   stroke: var(--annotation-note-bg);
   stroke-linejoin: round;
   stroke-width: 3;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-annotation__label {

package/css/app.css

@@ -64,20 +64,22 @@
 
 .ui-app-nav__section {
   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;
   margin: var(--space-sm) 0 0.3rem;
   padding: 0 0.5rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-nav a {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   align-items: center;
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
   display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   gap: 0.55rem;
   padding: 0.5rem 0.6rem;
@@ -148,7 +150,7 @@
 .ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   margin-block-start: auto;
   padding-block-start: var(--space-sm);
@@ -163,9 +165,15 @@
   display: flex;
   gap: var(--space-xs);
   margin-block-start: auto;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   padding-block-start: var(--space-sm);
 }
 
+.ui-app-rail__account > * {
+  min-inline-size: 0;
+}
+
 .ui-app-rail__account + .ui-app-rail__foot {
   margin-block-start: 0;
 }
@@ -204,17 +212,17 @@
 
 .ui-app-topbar__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 1.1rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.25rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-content {
   display: grid;
-  gap: var(--space-lg);
+  gap: var(--space-xl);
   padding: var(--space-lg);
 }
 
@@ -222,14 +230,12 @@
 
 .ui-app-toolbar {
   align-items: center;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+  border-block-end: 1px solid var(--line);
   display: flex;
   flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
-  padding: 0.7rem 0.85rem;
+  padding-block-end: var(--space-md);
 }
 
 .ui-app-toolbar__group {
@@ -242,29 +248,43 @@
 /* --- Panel --- */
 
 .ui-app-panel {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
   display: grid;
-  gap: 0.85rem;
-  padding: var(--space-md);
+  gap: var(--space-md);
+  min-inline-size: 0;
 }
 
 .ui-app-panel__head {
   align-items: flex-start;
   display: flex;
+  flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
 .ui-app-panel__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 0.95rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.125rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
+}
+
+/* A service overview needs a compact scan, including on a phone. Keep the
+   generic stat tile available elsewhere; avoid framing every metric twice. */
+.ui-app-panel > .ui-statgrid,
+.ui-app-panel > .ui-app-metrics {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
+}
+
+.ui-app-panel > .ui-statgrid > .ui-stat,
+.ui-app-panel > .ui-app-metrics > .ui-app-metric {
+  background: none;
+  border: 0;
+  border-block-start: 1px solid var(--line);
+  border-radius: 0;
+  padding: var(--space-md) 0;
 }
 
 .ui-app-panel__head p {
@@ -285,7 +305,7 @@
    permanent admin-shell alias (grouped on the canonical rules there —
    identical output). Nothing app-specific left to define here. */
 
-/* --- Mobile rail: collapses to a horizontal scrolling strip --- */
+/* --- Mobile rail: navigation wraps instead of hiding destinations offscreen. --- */
 
 @media (max-width: 880px) {
   .ui-app-shell {
@@ -300,10 +320,10 @@
   }
 
   .ui-app-rail {
-    flex-direction: row;
+    flex-flow: row wrap;
     block-size: auto;
-    overflow-x: auto;
-    position: sticky;
+    overflow: visible;
+    position: static;
     inset-block-start: 0;
     z-index: calc(var(--z-raised) + 1);
   }
@@ -321,7 +341,9 @@
   }
 
   .ui-app-nav {
-    grid-auto-flow: column;
+    display: flex;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
     gap: 0.15rem;
   }
 
@@ -330,9 +352,11 @@
   }
 
   .ui-app-nav a {
+    flex: 1 1 auto;
+    justify-content: center;
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .ui-app-nav a.is-active,

package/css/base.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   base — reset + element defaults, Nothing-flat
+   base — reset + readable element defaults
    ========================================================================== */
 
 *,
@@ -13,9 +13,8 @@ html {
   color: var(--text);
   font-family: var(--sans);
 
-  /* = 15px at the 16px default, but rem honours a user's browser font-size
-     preference (which a px root would ignore). */
-  font-size: 0.9375rem;
+  /* Preserve the browser's preferred reading size. Compact controls use tokens. */
+  font-size: 1rem;
   line-height: 1.55;
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
@@ -74,27 +73,25 @@ li {
   line-height: 1.65;
 }
 
-/* Headings ride the dot-matrix display face. */
+/* Everyday headings are readable text. .ui-display owns the brand face. */
 h1,
 h2,
 h3,
 h4 {
   color: var(--text);
-  font-family: var(--display);
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  line-height: 1.06;
+  font-family: var(--sans);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
 }
 
 h1 {
-  font-size: clamp(2.6rem, 6vw, 4.6rem);
-  letter-spacing: 0.02em;
+  font-size: clamp(2rem, 4vw, 3rem);
 }
 
 h2 {
-  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
+  font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
 h3 {
@@ -103,7 +100,6 @@ h3 {
 
 h4 {
   font-size: 1rem;
-  letter-spacing: var(--tracking-wide);
 }
 
 strong,

package/css/command.css

@@ -43,11 +43,11 @@
 
 .ui-command__group {
   color: var(--text-dim);
-  font-family: var(--mono);
-  font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: var(--text-xs);
+  letter-spacing: 0;
   padding: 0.5rem 0.6rem 0.25rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-command__item {

package/css/content.css

@@ -9,6 +9,8 @@
    ========================================================================== */
 
 .ui-prose {
+  /* A prose block must shrink as a grid/flex item; its pre blocks scroll locally. */
+  min-inline-size: 0;
   color: var(--text-soft);
   font-size: var(--text-base);
   line-height: 1.7;
@@ -41,27 +43,27 @@
   max-inline-size: none;
 }
 
-/* --- Headings — brand display face; only the top two shout --- */
+/* --- Headings — readable hierarchy inside narrative content --- */
 
 .ui-prose :is(h1, h2, h3, h4, h5, h6) {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   line-height: 1.12;
   text-wrap: balance;
 }
 
 .ui-prose h1 {
   font-size: var(--text-xl);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose h2 {
   font-size: var(--text-lg);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding-block-end: 0.3rem;
   border-block-end: 1px solid var(--line);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-prose h3 {
@@ -70,8 +72,8 @@
 
 .ui-prose :is(h4, h5, h6) {
   font-size: var(--text-base);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose :is(h5, h6) {
@@ -185,11 +187,11 @@
 
 .ui-prose 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);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose dd {
@@ -241,10 +243,10 @@
 
 .ui-prose figcaption {
   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;
 }
 
 /* --- Table — raw Markdown tables look like ui-table ---
@@ -262,7 +264,7 @@
   border-collapse: collapse;
   border-radius: var(--radius-md);
   display: block;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   inline-size: 100%;
   overflow-x: auto;
@@ -280,8 +282,8 @@
   color: var(--text-dim);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose td {
@@ -316,7 +318,7 @@
 .ui-quote {
   color: var(--text);
   display: grid;
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xl);
   font-weight: var(--display-weight);
   gap: var(--space-sm);
@@ -335,9 +337,9 @@
 
 .ui-quote__cite {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-style: normal;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }

package/css/disclosure.css

@@ -32,13 +32,13 @@
   cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: 0.4rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin-block-end: -1px;
   padding: 0.6rem 0.85rem;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard);
@@ -104,13 +104,13 @@
   color: var(--text);
   cursor: pointer;
   display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   gap: 0.6rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   list-style: none;
   padding: 0.85rem 0.2rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-accordion__summary::-webkit-details-marker {
@@ -192,12 +192,12 @@
   color: var(--text-soft);
   cursor: pointer;
   flex: 1 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.42rem 0.8rem;
   text-align: center;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     color var(--duration-fast) var(--ease-standard);
@@ -233,14 +233,14 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.5rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   list-style: none;
   margin: 0;
   padding: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-breadcrumb__item {
@@ -302,7 +302,7 @@
   color: var(--text-soft);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   justify-content: center;
   min-block-size: 2rem;
@@ -370,14 +370,14 @@
   color: var(--text);
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: calc(var(--av-size) * 0.38);
   font-weight: 700;
   block-size: var(--av-size);
   justify-content: center;
   letter-spacing: 0.04em;
   overflow: hidden;
-  text-transform: uppercase;
+  text-transform: none;
   inline-size: var(--av-size);
 }
 
@@ -528,11 +528,11 @@
   background: color-mix(in srgb, var(--panel-strong) 75%, transparent);
   border-radius: var(--radius-pill);
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   inset-block-end: var(--space-xs);
   inset-inline-start: var(--space-xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.2rem 0.5rem;
   position: absolute;
 }