@ponchia/ui 0.2.2 → 0.3.1

package/css/forms.css

@@ -66,7 +66,7 @@
 .ui-input:focus-visible,
 .ui-select:focus-visible,
 .ui-textarea:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 1px;
 }
 
@@ -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;
@@ -183,10 +285,34 @@
 }
 
 .ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   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/navigation.css

@@ -1,15 +1,10 @@
 /* ==========================================================================
-   navigation — site nav, menu, theme toggle (Nothing flat, dot indicator)
-   Class names kept stable for site-nav compatibility.
+   navigation — theme toggle (Nothing flat, dot-thumb switch).
+   Site nav/menu live in site.css as ui-sitenav / ui-sitemenu; the legacy
+   .site-nav / .site-menu vocabulary was removed in 0.3.0.
    ========================================================================== */
 
-.site-menu {
-  display: none;
-  position: relative;
-}
-
-.site-menu__toggle,
-.theme-toggle__button {
+.ui-themetoggle__button {
   align-items: center;
   background: transparent;
   border: 1px solid var(--line-strong);
@@ -21,9 +16,10 @@
   font-size: var(--text-xs);
   font-weight: 600;
   gap: 0.4rem;
+  justify-content: center;
   letter-spacing: var(--tracking-wide);
-  list-style: none;
   min-block-size: 2rem;
+  min-inline-size: 7rem;
   padding: 0.42rem 0.66rem;
   text-transform: uppercase;
   transition:
@@ -33,32 +29,21 @@
   white-space: nowrap;
 }
 
-.theme-toggle__button {
-  justify-content: center;
-  min-inline-size: 7rem;
-}
-
-.site-menu__toggle::-webkit-details-marker {
-  display: none;
-}
-
-.site-menu[open] .site-menu__toggle,
-.site-menu__toggle:hover,
-.theme-toggle__button:hover {
+.ui-themetoggle__button:hover {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
-.theme-toggle__prefix {
+.ui-themetoggle__prefix {
   color: var(--text-dim);
 }
 
-.theme-toggle__label {
+.ui-themetoggle__label {
   color: var(--text);
   font-weight: 700;
 }
 
-.theme-toggle__track {
+.ui-themetoggle__track {
   background: var(--panel-soft);
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-pill);
@@ -68,7 +53,7 @@
   inline-size: 1.5rem;
 }
 
-.theme-toggle__thumb {
+.ui-themetoggle__thumb {
   background: var(--text-dim);
   border-radius: 50%;
   display: block;
@@ -80,72 +65,18 @@
   inline-size: 0.56rem;
 }
 
-[data-theme='dark'] .theme-toggle__thumb {
+[data-theme='dark'] .ui-themetoggle__thumb {
   background: var(--accent);
   transform: translateX(0.6rem);
 }
 
-[dir='rtl'][data-theme='dark'] .theme-toggle__thumb,
-[dir='rtl'] [data-theme='dark'] .theme-toggle__thumb {
+[dir='rtl'][data-theme='dark'] .ui-themetoggle__thumb,
+[dir='rtl'] [data-theme='dark'] .ui-themetoggle__thumb {
   transform: translateX(-0.6rem);
 }
 
-.site-nav {
-  display: inline-flex;
-  gap: 0.15rem;
-}
-
-.site-nav a {
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  color: var(--text-soft);
-  display: inline-flex;
-  font-family: var(--mono);
-  font-size: var(--text-xs);
-  gap: 0.45rem;
-  letter-spacing: var(--tracking-wide);
-  padding: 0.4rem 0.6rem;
-  position: relative;
-  text-transform: uppercase;
-  transition:
-    border-color var(--duration-fast) var(--ease-standard),
-    background-color var(--duration-fast) var(--ease-standard),
-    color var(--duration-fast) var(--ease-standard);
-}
-
-/* Leading dot is the active/hover indicator — Nothing glyph cue. */
-.site-nav a::before {
-  background: currentColor;
-  border-radius: 50%;
-  content: '';
-  block-size: 0.32rem;
-  opacity: 0;
-  transform: scale(0.5);
-  transition:
-    opacity var(--duration-fast) var(--ease-standard),
-    transform var(--duration-fast) var(--ease-spring);
-  inline-size: 0.32rem;
-}
-
-.site-nav a:hover,
-.site-nav a.is-active {
-  color: var(--text);
-}
-
-.site-nav a.is-active {
-  color: var(--accent);
-}
-
-.site-nav a:hover::before,
-.site-nav a.is-active::before {
-  opacity: 1;
-  transform: scale(1);
-}
-
 @media (hover: hover) {
-  .site-menu__toggle:active,
-  .theme-toggle__button:active {
+  .ui-themetoggle__button:active {
     transform: translateY(1px);
   }
 }

package/css/overlay.css

@@ -91,12 +91,20 @@
 @media (hover: hover) {
   .ui-modal__close:hover {
     border-color: var(--accent);
-    color: var(--accent);
+    color: var(--accent-text);
   }
 }
 
 /* --- Dropdown menu — pairs with native <details> --- */
 
+/* The positioned host for a <details> dropdown: .ui-menu is absolute, so
+   its <details> wrapper must establish a containing block. (Replaces the
+   role the legacy .site-menu wrapper served, now a first-class ui-*.) */
+.ui-menu-host {
+  display: inline-block;
+  position: relative;
+}
+
 .ui-menu {
   background: var(--panel-strong);
   border: 1px solid var(--line-strong);
@@ -109,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 {
@@ -164,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,
@@ -78,7 +147,7 @@
 .ui-eyebrow {
   /* accent-strong, not accent: this is small bold text and must clear
      WCAG AA 4.5:1 on the soft/tinted surfaces eyebrows sit on too. */
-  color: var(--accent-strong);
+  color: var(--accent-text);
   font-family: var(--display);
   font-size: var(--text-xs);
   font-weight: 700;
@@ -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 {
@@ -203,8 +298,10 @@
 }
 
 .ui-chip--accent {
+  /* accent-strong, not accent: chip text is small uppercase mono and must
+     clear WCAG AA 4.5:1 — same rule as .ui-eyebrow above. */
+  color: var(--accent-text);
   border-color: var(--accent);
-  color: var(--accent);
 }
 
 /* --- Badge / status pill --- */
@@ -307,7 +404,7 @@
   }
 
   .ui-link:hover {
-    color: var(--accent);
+    color: var(--accent-text);
     text-decoration-color: var(--accent);
   }