@ponchia/ui 0.3.0 → 0.3.2

package/css/forms.css

@@ -92,6 +92,108 @@
   color: var(--danger);
 }
 
+/* --- Input group: prefix/suffix affix around a control --- */
+.ui-input-group {
+  display: flex;
+  isolation: isolate;
+}
+
+.ui-input-group > .ui-input,
+.ui-input-group > .ui-select {
+  border-radius: 0;
+  flex: 1;
+  margin-inline-start: -1px;
+}
+
+.ui-input-group > :first-child {
+  border-start-start-radius: var(--radius-md);
+  border-end-start-radius: var(--radius-md);
+  margin-inline-start: 0;
+}
+
+.ui-input-group > :last-child {
+  border-start-end-radius: var(--radius-md);
+  border-end-end-radius: var(--radius-md);
+}
+
+.ui-input-group > .ui-input:focus-visible {
+  z-index: 1; /* keep the focus ring above the adjacent addon border */
+}
+
+.ui-input-group__addon {
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  color: var(--text-dim);
+  display: flex;
+  font-size: var(--text-sm);
+  padding-inline: var(--space-sm);
+  white-space: nowrap;
+}
+
+/* --- File input --- */
+.ui-file {
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+}
+
+.ui-file::file-selector-button {
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  cursor: pointer;
+  font: inherit;
+  margin-inline-end: var(--space-sm);
+  padding: 0.5rem 0.85rem;
+}
+
+.ui-file::file-selector-button:hover {
+  border-color: var(--accent);
+}
+
+/* --- Range --- */
+.ui-range {
+  accent-color: var(--accent);
+  inline-size: 100%;
+}
+
+.ui-range:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 4px;
+}
+
+/* --- Error summary: one focusable, assertive list of form errors --- */
+.ui-error-summary {
+  border: 1px solid var(--danger);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  padding: var(--space-md);
+}
+
+.ui-error-summary[hidden] {
+  display: none;
+}
+
+.ui-error-summary__title {
+  color: var(--danger);
+  font-family: var(--display);
+  font-size: var(--text-sm);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0 0 var(--space-xs);
+  text-transform: uppercase;
+}
+
+.ui-error-summary__list {
+  margin: 0;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-error-summary__list a {
+  color: var(--danger);
+}
+
 /* Search field with leading dot. */
 .ui-search {
   align-items: center;
@@ -187,6 +289,30 @@
   outline-offset: 2px;
 }
 
+/* ARIA contract: `.ui-switch` is a visually-styled checkbox. Author
+   `role="switch"` on the `<input>` so AT announces "switch, on/off"
+   rather than "checkbox, checked" — the native `checked` state then
+   drives `aria-checked` automatically, so no JS is required. In
+   forced-colors mode the colour cues are dropped by the OS, so convey
+   on/off with system-colour border + thumb instead. */
+@media (forced-colors: active) {
+  .ui-switch__track {
+    border-color: ButtonBorder;
+  }
+
+  .ui-switch__thumb {
+    background: ButtonText;
+  }
+
+  .ui-switch input:checked + .ui-switch__track {
+    border-color: Highlight;
+  }
+
+  .ui-switch input:checked + .ui-switch__track .ui-switch__thumb {
+    background: Highlight;
+  }
+}
+
 /* Checkbox / radio — square accent. */
 .ui-check {
   align-items: center;

package/css/overlay.css

@@ -117,7 +117,7 @@
   position: absolute;
   inset-inline-end: 0;
   inset-block-start: calc(100% + 0.4rem);
-  z-index: 30;
+  z-index: var(--z-overlay);
 }
 
 .ui-menu__label {
@@ -172,6 +172,69 @@
   }
 }
 
+/* --- Combobox: an input with a filtered listbox popup (APG pattern,
+   wired by initCombobox). Reuses the menu surface tokens. --- */
+.ui-combobox {
+  display: inline-block;
+  min-inline-size: 14rem;
+  position: relative;
+}
+
+.ui-combobox__input {
+  inline-size: 100%;
+}
+
+.ui-combobox__list {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  display: grid;
+  gap: 1px;
+  list-style: none;
+  margin: 0;
+  max-block-size: 16rem;
+  overflow-y: auto;
+  padding: 0.3rem;
+  position: absolute;
+  inset-block-start: calc(100% + 0.4rem);
+  inset-inline: 0;
+  z-index: var(--z-overlay);
+}
+
+.ui-combobox__list[hidden] {
+  display: none;
+}
+
+.ui-combobox__option {
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  padding: 0.5rem 0.55rem;
+}
+
+.ui-combobox__option[hidden] {
+  display: none;
+}
+
+.ui-combobox__option.is-active,
+.ui-combobox__option[aria-selected='true'] {
+  background: var(--bg-accent);
+  color: var(--text);
+}
+
+.ui-combobox__empty {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+  padding: 0.5rem 0.55rem;
+}
+
+.ui-combobox__empty[hidden] {
+  display: none;
+}
+
 /* --- Mobile: modal becomes a bottom sheet, drawer goes full-width --- */
 
 @media (max-width: 560px) {

package/css/primitives.css

@@ -27,6 +27,75 @@
   grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
 }
 
+/* Every-Layout set — the layouts consumers otherwise hand-roll. All
+   intrinsic (no media queries): they respond to content + available
+   space, so they work the same in a viewport or a container. */
+
+/* Sidebar + main; the sidebar is its natural width, main takes the
+   rest, and they stack once main would go below --sidebar-min. */
+.ui-sidebar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sidebar-gap, var(--space-md));
+}
+
+.ui-sidebar > :first-child {
+  flex-basis: var(--sidebar-width, 16rem);
+  flex-grow: 1;
+}
+
+.ui-sidebar > :last-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--sidebar-min, 60%);
+}
+
+/* All children in one row until they no longer fit --switcher-min,
+   then all switch to a column together (no half-states). */
+.ui-switcher {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--switcher-gap, var(--space-md));
+}
+
+.ui-switcher > * {
+  flex-basis: calc((var(--switcher-min, 24rem) - 100%) * 999);
+  flex-grow: 1;
+}
+
+/* Centered measure-bounded column. */
+.ui-center {
+  box-sizing: content-box;
+  margin-inline: auto;
+  max-inline-size: var(--center-max, 64rem);
+  padding-inline: var(--center-gutter, var(--space-md));
+}
+
+/* Intrinsic aspect-ratio box; the media child fills it. */
+.ui-ratio {
+  aspect-ratio: var(--ratio, 16 / 9);
+}
+
+.ui-ratio > * {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/* Opt-in containment: add .ui-cq to a wrapper to make descendant
+   .ui-grid / .ui-app-metrics adapt to THIS box, not the viewport
+   (island-safe). Inert until applied, so existing layouts/baselines
+   are unaffected. */
+.ui-cq {
+  container: var(--cq-name, bronto) / inline-size;
+}
+
+@container bronto (max-width: 34rem) {
+  .ui-grid {
+    --grid-min: 100%;
+  }
+}
+
 /* --- Surfaces --- */
 
 .ui-surface,
@@ -59,6 +128,13 @@
   border-color: var(--accent);
 }
 
+/* Interactive cards usually wrap a single link; keyboard users get no
+   hover, so surface the focused state on the card itself (not pointer-
+   gated — lives outside the @media (hover) block below). */
+.ui-card--interactive:focus-within {
+  border-color: var(--line-strong);
+}
+
 .ui-card__head,
 .ui-panel__head {
   align-items: flex-start;
@@ -73,6 +149,95 @@
   margin: 0;
 }
 
+/* --- Stat / metric tile — shell-agnostic ---
+   The canonical metric primitive. `.ui-app-metric*` / `.ui-app-metrics`
+   are permanent aliases grouped here so the admin shell keeps working
+   with byte-identical output (no baseline drift). */
+
+.ui-statgrid,
+.ui-app-metrics {
+  display: grid;
+  gap: var(--space-md);
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+}
+
+/* Inside an opt-in .ui-cq container, collapse to one column when the
+   container (not the viewport) is narrow — keeps tiles usable in a slim
+   panel. Inert without .ui-cq, so baselines are unaffected. */
+@container bronto (max-width: 30rem) {
+  .ui-statgrid,
+  .ui-app-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ui-stat,
+.ui-app-metric {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: 0.4rem;
+  padding: var(--space-md);
+}
+
+.ui-stat__label,
+.ui-app-metric__label {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-stat__value,
+.ui-app-metric__value {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: 1.9rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+
+.ui-stat__delta,
+.ui-app-metric__delta {
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+}
+
+.ui-stat__delta.is-pos,
+.ui-app-metric__delta.is-pos {
+  color: var(--success);
+}
+
+.ui-stat__delta.is-neg,
+.ui-app-metric__delta.is-neg {
+  color: var(--danger);
+}
+
+/* --- Numeric value vocabulary ---
+   The same tabular/aligned/tone intent the table has shipped since
+   0.1.0, but freed from `.ui-table` so cards, stats and inline figures
+   share one P&L vocabulary. Token-identical to the table's is-num/
+   is-pos/is-neg (which stay table-local). */
+.ui-num {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+.ui-num--pos {
+  color: var(--success);
+}
+
+.ui-num--neg {
+  color: var(--danger);
+}
+
+.ui-num--muted {
+  color: var(--text-dim);
+}
+
 /* --- Eyebrow / section label — dot-matrix face --- */
 
 .ui-eyebrow {
@@ -91,6 +256,12 @@
   color: var(--text-dim);
 }
 
+/* Dense contexts (cards, table toolbars) — restores the size step that
+   0.2.2 had as eyebrow--tight. Composes with --muted. */
+.ui-eyebrow--sm {
+  font-size: var(--text-2xs);
+}
+
 /* --- Buttons --- */
 
 .ui-button {
@@ -153,6 +324,32 @@
   transform: translateY(1px);
 }
 
+/* Async/pending state — set aria-busy="true" (and disable) on submit.
+   A leading ring spinner is injected with no extra markup; the label
+   stays for context. Inert until aria-busy is set, so default buttons
+   and visual baselines are unaffected. */
+.ui-button[aria-busy='true'] {
+  cursor: progress;
+  pointer-events: none;
+}
+
+.ui-button[aria-busy='true']::before {
+  animation: uiSpin 0.6s linear infinite;
+  block-size: 0.9em;
+  border: 2px solid currentcolor;
+  border-block-start-color: transparent;
+  border-radius: var(--radius-pill);
+  content: '';
+  flex: none;
+  inline-size: 0.9em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-button[aria-busy='true']::before {
+    animation-duration: 1.4s;
+  }
+}
+
 /* --- Link --- */
 
 .ui-link {
@@ -166,14 +363,26 @@
     text-decoration-color var(--duration-fast) var(--ease-standard);
 }
 
-.ui-link--arrow {
+.ui-link--arrow,
+.ui-link--cta {
   align-items: center;
   display: inline-flex;
   gap: 0.4rem;
   text-decoration: none;
 }
 
-.ui-link--arrow::after {
+/* CTA: the eyebrow-faced action link (accent · display · uppercase),
+   composed from the same tokens as .ui-eyebrow + the arrow glyph. */
+.ui-link--cta {
+  color: var(--accent-text);
+  font-family: var(--display);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-link--arrow::after,
+.ui-link--cta::after {
   border-inline-end: 1px solid currentColor;
   border-block-start: 1px solid currentColor;
   content: '';
@@ -250,6 +459,42 @@
   border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
 }
 
+/* Idle / unknown — the honest "no signal yet" tone (distinct from the
+   default tinted badge). Token-safe; no new hue. */
+.ui-badge--muted {
+  background: transparent;
+  border-color: var(--line);
+  color: var(--text-dim);
+}
+
+/* Leading state dot — composes with any tone modifier; the dot takes
+   the tone via currentColor-adjacent text, but stays neutral-strong so
+   it reads on the soft tint (same WCAG rationale as the tone note). */
+.ui-badge--dot::before {
+  background: var(--text-soft);
+  border-radius: 50%;
+  content: '';
+  flex: 0 0 auto;
+  block-size: 0.4rem;
+  inline-size: 0.4rem;
+}
+
+.ui-badge--accent.ui-badge--dot::before {
+  background: var(--accent);
+}
+
+.ui-badge--success.ui-badge--dot::before {
+  background: var(--success);
+}
+
+.ui-badge--warning.ui-badge--dot::before {
+  background: var(--warning);
+}
+
+.ui-badge--danger.ui-badge--dot::before {
+  background: var(--danger);
+}
+
 /* --- Key/value list --- */
 
 .ui-key-value {
@@ -289,6 +534,7 @@
   }
 
   .ui-card--interactive:hover {
+    box-shadow: var(--shadow-raised);
     transform: translateY(-2px);
   }
 
@@ -313,11 +559,13 @@
     text-decoration-color: var(--accent);
   }
 
-  .ui-link--arrow:hover::after {
+  .ui-link--arrow:hover::after,
+  .ui-link--cta:hover::after {
     transform: translateX(0.14rem) rotate(45deg);
   }
 
-  [dir='rtl'] .ui-link--arrow:hover::after {
+  [dir='rtl'] .ui-link--arrow:hover::after,
+  [dir='rtl'] .ui-link--cta:hover::after {
     transform: translateX(-0.14rem) rotate(45deg);
   }
 

package/css/site.css

@@ -21,6 +21,12 @@
   max-inline-size: var(--container-narrow, 44rem);
 }
 
+/* App / marketing shells run wider than the 72rem reading measure.
+   Override the cap per-consumer via --container-wide. */
+.ui-container--wide {
+  max-inline-size: var(--container-wide, 82rem);
+}
+
 /* --- Skip link — first focusable, jumps to main --- */
 
 .ui-skiplink {
@@ -32,7 +38,7 @@
   inset-inline-start: var(--space-md);
   padding: 0.7rem 1rem;
   position: fixed;
-  z-index: 60;
+  z-index: var(--z-toast);
 }
 
 .ui-skiplink:focus {
@@ -51,6 +57,14 @@
   padding-block: var(--space-sm);
 }
 
+/* Structural sticky only — the floating-card skin (radius/shadow/panel
+   bg) is consumer identity, not a framework concern; layer it yourself. */
+.ui-siteheader--sticky {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--z-sticky);
+}
+
 .ui-siteheader__brand {
   align-items: center;
   color: var(--text);
@@ -182,7 +196,7 @@
   min-inline-size: 12rem;
   padding: 0.4rem;
   position: absolute;
-  z-index: 30;
+  z-index: var(--z-overlay);
 }
 
 /* Below the breakpoint the inline nav collapses into the menu. */

package/css/table.css

@@ -100,3 +100,62 @@
   padding: 2rem;
   text-align: center;
 }
+
+/* --- Sortable headers (wired by initTableSort) --- */
+.ui-table__sort {
+  align-items: center;
+  background: none;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  gap: 0.4rem;
+  letter-spacing: inherit;
+  padding: 0;
+  text-transform: inherit;
+  inline-size: 100%;
+}
+
+.ui-table__sort::after {
+  content: '↕';
+  opacity: 0.4;
+}
+
+.ui-table th[aria-sort='ascending'] .ui-table__sort::after {
+  content: '↑';
+  opacity: 1;
+}
+
+.ui-table th[aria-sort='descending'] .ui-table__sort::after {
+  content: '↓';
+  opacity: 1;
+}
+
+/* --- Row selection --- */
+.ui-table__select {
+  inline-size: 1px; /* shrink-to-fit checkbox column */
+  white-space: nowrap;
+}
+
+.ui-table--selectable tbody tr[aria-selected='true'] td {
+  background: var(--bg-accent);
+}
+
+/* --- Bulk-action toolbar --- */
+.ui-table__toolbar {
+  align-items: center;
+  border: 1px solid var(--line);
+  border-block-end: 0;
+  border-start-start-radius: var(--radius-md);
+  border-start-end-radius: var(--radius-md);
+  display: flex;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+}
+
+/* --- Loading state: set aria-busy + .ui-table--loading on the wrap --- */
+.ui-table--loading {
+  opacity: 0.6;
+  pointer-events: none;
+}