@ponchia/ui 0.8.1 → 0.10.0

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/core.css

@@ -18,6 +18,7 @@
 @import url('./site.css') layer(bronto);
 @import url('./content.css') layer(bronto);
 @import url('./primitives.css') layer(bronto);
+@import url('./row.css') layer(bronto);
 @import url('./forms.css') layer(bronto);
 @import url('./feedback.css') layer(bronto);
 @import url('./overlay.css') layer(bronto);

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

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/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/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;
 }
@@ -247,6 +231,12 @@ html:has(.ui-modal.is-open) {
   position: relative;
 }
 
+/* The SURFACE only. Placement is a separate decision, because a menu is not
+   always a dropdown: a canvas context menu opens at the pointer, a mobile one
+   arrives as a sheet. This rule used to weld `position: absolute` plus a
+   trigger-relative offset into the surface itself, so a consumer with a
+   pointer-positioned menu could not use it at all and re-declared the panel,
+   the border, the radius and the shadow to get one. */
 .ui-menu {
   background: var(--panel-strong);
   border: 1px solid var(--line-strong);
@@ -256,35 +246,43 @@ html:has(.ui-modal.is-open) {
   gap: 1px;
   min-inline-size: 11rem;
   padding: 0.3rem;
+}
+
+/* The dropdown placement this class always had: anchored under its trigger
+   inside a `.ui-menu-host`. Unchanged behaviour, now opted into. */
+.ui-menu--dropdown {
   position: absolute;
   inset-inline-end: 0;
   inset-block-start: calc(100% + 0.4rem);
   z-index: var(--z-overlay);
 }
 
+/* Opened at a point the host computes — a right-click, a long-press. The host
+   sets `left`/`top` (or `inset-inline-start`/`inset-block-start`); Bronto only
+   takes it out of flow and gives it the layer. */
+.ui-menu--at-pointer {
+  position: fixed;
+  z-index: var(--z-popover);
+}
+
 .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,
+   and keeping two copies of that shape is how they drift. What is menu-specific
+   stays here: the mono face, the slightly roomier padding a pointer target
+   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 {
-  align-items: center;
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: var(--text-soft);
-  cursor: pointer;
-  display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
-  gap: 0.5rem;
   padding: 0.5rem 0.55rem;
-  text-align: start;
-  inline-size: 100%;
 }
 
 .ui-menu__item::before {
@@ -380,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;
 }