@ponchia/ui 0.3.0 → 0.3.1

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,
@@ -153,6 +222,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 {

package/css/site.css

@@ -32,7 +32,7 @@
   inset-inline-start: var(--space-md);
   padding: 0.7rem 1rem;
   position: fixed;
-  z-index: 60;
+  z-index: var(--z-toast);
 }
 
 .ui-skiplink:focus {
@@ -182,7 +182,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;
+}

package/css/tokens.css

@@ -52,6 +52,54 @@
   --dot-size: 2px;
   --dot-gap: 14px;
 
+  /* Stacking-context scale. Replaces scattered magic z-indexes so
+     consumers can reason about (and override) layering coherently.
+     Values match the prior literals — purely a refactor, no visual
+     change. */
+  --z-base: 0;
+  --z-raised: 10;
+  --z-sticky: 20;
+  --z-overlay: 30;
+  --z-popover: 50;
+  --z-toast: 60;
+
+  /* Accent ramp — a stepped family for charts / data-viz / multi-state
+     surfaces (the use case tokens/index.js advertises). Derived from the
+     single --accent knob via color-mix against the theme bg, so it
+     re-brands and theme-adapts automatically; no per-theme duplication. */
+  --accent-1: color-mix(in srgb, var(--accent) 8%, var(--bg));
+  --accent-2: color-mix(in srgb, var(--accent) 16%, var(--bg));
+  --accent-3: color-mix(in srgb, var(--accent) 32%, var(--bg));
+  --accent-4: color-mix(in srgb, var(--accent) 60%, var(--bg));
+  --accent-5: var(--accent);
+  --accent-6: var(--accent-strong);
+
+  /* Neutral surface ramp (low → high contrast against --bg). */
+  --surface-1: var(--bg);
+  --surface-2: var(--bg-elevated);
+  --surface-3: var(--panel);
+  --surface-4: var(--panel-soft);
+  --surface-5: var(--line);
+  --surface-6: var(--line-strong);
+
+  /* Semantic tier — stable, prefixed aliases over the (shorter,
+     legacy) primitive names. New consumer code should target these:
+     re-skinning one role no longer means chasing component internals.
+     The short names below stay as permanent back-compat aliases. */
+  --bronto-color-bg: var(--bg);
+  --bronto-color-surface: var(--panel);
+  --bronto-color-surface-raised: var(--panel-strong);
+  --bronto-color-border: var(--line);
+  --bronto-color-border-strong: var(--line-strong);
+  --bronto-color-text: var(--text);
+  --bronto-color-text-muted: var(--text-dim);
+  --bronto-color-action: var(--accent);
+  --bronto-color-on-action: var(--button-text);
+  --bronto-color-focus: var(--focus-ring);
+  --bronto-color-success: var(--success);
+  --bronto-color-warning: var(--warning);
+  --bronto-color-danger: var(--danger);
+
   /* Aliases kept for back-compat with existing semantic classes */
   --surface: var(--panel);
   --surface-raised: var(--panel-strong);
@@ -83,17 +131,17 @@
   --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
   --success: #2f7d4f;
-  --success-soft: rgba(47, 125, 79, 0.12);
+  --success-soft: rgb(47, 125, 79, 0.12);
   --warning: #806414;
-  --warning-soft: rgba(128, 100, 20, 0.13);
+  --warning-soft: rgb(128, 100, 20, 0.13);
   --orange: #a85f32;
-  --orange-soft: rgba(168, 95, 50, 0.13);
+  --orange-soft: rgb(168, 95, 50, 0.13);
   --danger: #c01622;
-  --danger-soft: rgba(192, 22, 34, 0.1);
-  --code-bg: rgba(10, 10, 10, 0.05);
+  --danger-soft: rgb(192, 22, 34, 0.1);
+  --code-bg: rgb(10, 10, 10, 0.05);
   --button-text: #ffffff;
-  --field-dot: rgba(10, 10, 10, 0.16);
-  --field-dot-hot: rgba(10, 10, 10, 0.4);
+  --field-dot: rgb(10, 10, 10, 0.16);
+  --field-dot-hot: rgb(10, 10, 10, 0.4);
   --field-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
 
   /* Solid by default: this token drives every focus outline, so it must
@@ -134,17 +182,17 @@
     --accent-text: var(--accent-strong);
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
     --success: #4ec27e;
-    --success-soft: rgba(78, 194, 126, 0.14);
+    --success-soft: rgb(78, 194, 126, 0.14);
     --warning: #d8bd72;
-    --warning-soft: rgba(216, 189, 114, 0.14);
+    --warning-soft: rgb(216, 189, 114, 0.14);
     --orange: #d08c5b;
-    --orange-soft: rgba(208, 140, 91, 0.15);
+    --orange-soft: rgb(208, 140, 91, 0.15);
     --danger: #ff4d54;
-    --danger-soft: rgba(255, 77, 84, 0.15);
-    --code-bg: rgba(255, 255, 255, 0.05);
+    --danger-soft: rgb(255, 77, 84, 0.15);
+    --code-bg: rgb(255, 255, 255, 0.05);
     --button-text: #000000;
-    --field-dot: rgba(242, 242, 242, 0.14);
-    --field-dot-hot: rgba(242, 242, 242, 0.36);
+    --field-dot: rgb(242, 242, 242, 0.14);
+    --field-dot-hot: rgb(242, 242, 242, 0.36);
     --field-dot-accent: color-mix(in srgb, var(--accent) 82%, transparent);
     --focus-ring: var(--accent);
     --shadow: none;
@@ -171,17 +219,17 @@
   --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
   --success: #4ec27e;
-  --success-soft: rgba(78, 194, 126, 0.14);
+  --success-soft: rgb(78, 194, 126, 0.14);
   --warning: #d8bd72;
-  --warning-soft: rgba(216, 189, 114, 0.14);
+  --warning-soft: rgb(216, 189, 114, 0.14);
   --orange: #d08c5b;
-  --orange-soft: rgba(208, 140, 91, 0.15);
+  --orange-soft: rgb(208, 140, 91, 0.15);
   --danger: #ff4d54;
-  --danger-soft: rgba(255, 77, 84, 0.15);
-  --code-bg: rgba(255, 255, 255, 0.05);
+  --danger-soft: rgb(255, 77, 84, 0.15);
+  --code-bg: rgb(255, 255, 255, 0.05);
   --button-text: #000000;
-  --field-dot: rgba(242, 242, 242, 0.14);
-  --field-dot-hot: rgba(242, 242, 242, 0.36);
+  --field-dot: rgb(242, 242, 242, 0.14);
+  --field-dot-hot: rgb(242, 242, 242, 0.36);
   --field-dot-accent: color-mix(in srgb, var(--accent) 82%, transparent);
   --focus-ring: var(--accent);
   --shadow: none;