@ponchia/ui 0.2.2 → 0.3.1

package/css/app.css

@@ -3,19 +3,19 @@
    For admin / operator dashboards.
    ========================================================================== */
 
-.app-shell {
+.ui-app-shell {
   display: grid;
   grid-template-columns: var(--app-rail, 14rem) minmax(0, 1fr);
   min-block-size: 100vh;
 }
 
-.app-shell--full {
+.ui-app-shell--full {
   grid-template-columns: minmax(0, 1fr);
 }
 
 /* --- Sidebar rail --- */
 
-.app-rail {
+.ui-app-rail {
   background: var(--panel);
   border-inline-end: 1px solid var(--line);
   display: flex;
@@ -28,7 +28,7 @@
   overflow-y: auto;
 }
 
-.app-rail__brand {
+.ui-app-rail__brand {
   align-items: center;
   color: var(--text);
   display: flex;
@@ -40,7 +40,7 @@
   text-transform: uppercase;
 }
 
-.app-rail__brand::before {
+.ui-app-rail__brand::before {
   background: var(--accent);
   border-radius: 50%;
   content: '';
@@ -48,12 +48,12 @@
   inline-size: 0.5rem;
 }
 
-.app-nav {
+.ui-app-nav {
   display: grid;
   gap: 0.15rem;
 }
 
-.app-nav__section {
+.ui-app-nav__section {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -63,7 +63,7 @@
   text-transform: uppercase;
 }
 
-.app-nav a {
+.ui-app-nav a {
   align-items: center;
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
@@ -78,7 +78,7 @@
     color var(--duration-fast) var(--ease-standard);
 }
 
-.app-nav a::before {
+.ui-app-nav a::before {
   background: currentColor;
   border-radius: 50%;
   content: '';
@@ -87,22 +87,22 @@
   inline-size: 0.34rem;
 }
 
-.app-nav a:hover {
+.ui-app-nav a:hover {
   background: var(--bg-accent);
   color: var(--text);
 }
 
-.app-nav a.is-active {
+.ui-app-nav a.is-active {
   background: var(--accent-soft);
   border-inline-start-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
-.app-nav a.is-active::before {
+.ui-app-nav a.is-active::before {
   opacity: 1;
 }
 
-.app-rail__foot {
+.ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
   font-family: var(--mono);
@@ -113,13 +113,13 @@
 
 /* --- Main column --- */
 
-.app-main {
+.ui-app-main {
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
 }
 
-.app-topbar {
+.ui-app-topbar {
   align-items: center;
   background: color-mix(in srgb, var(--bg) 86%, transparent);
   backdrop-filter: blur(8px);
@@ -130,10 +130,10 @@
   padding: 0.75rem var(--space-lg);
   position: sticky;
   inset-block-start: 0;
-  z-index: 10;
+  z-index: var(--z-raised);
 }
 
-.app-topbar__title {
+.ui-app-topbar__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.1rem;
@@ -142,7 +142,7 @@
   text-transform: uppercase;
 }
 
-.app-content {
+.ui-app-content {
   display: grid;
   gap: var(--space-lg);
   padding: var(--space-lg);
@@ -150,7 +150,7 @@
 
 /* --- Toolbar --- */
 
-.app-toolbar {
+.ui-app-toolbar {
   align-items: center;
   background: var(--panel);
   border: 1px solid var(--line);
@@ -162,7 +162,7 @@
   padding: 0.7rem 0.85rem;
 }
 
-.app-toolbar__group {
+.ui-app-toolbar__group {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -171,7 +171,7 @@
 
 /* --- Panel --- */
 
-.app-panel {
+.ui-app-panel {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -180,14 +180,14 @@
   padding: var(--space-md);
 }
 
-.app-panel__head {
+.ui-app-panel__head {
   align-items: flex-start;
   display: flex;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
-.app-panel__title {
+.ui-app-panel__title {
   color: var(--text);
   font-family: var(--display);
   font-size: 0.95rem;
@@ -196,21 +196,30 @@
   text-transform: uppercase;
 }
 
-.app-panel__head p,
-.app-empty-state p {
+.ui-app-panel__head p,
+.ui-app-empty-state p {
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
 
 /* --- Metric tiles --- */
 
-.app-metrics {
+.ui-app-metrics {
   display: grid;
   gap: var(--space-md);
   grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
 }
 
-.app-metric {
+/* Inside an opt-in .ui-cq container, collapse to one column when the
+   container (not the viewport) is narrow — keeps metric tiles usable
+   in a slim panel. Inert without .ui-cq, so baselines are unaffected. */
+@container bronto (max-width: 30rem) {
+  .ui-app-metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+.ui-app-metric {
   background: var(--panel);
   border: 1px solid var(--line);
   border-radius: var(--radius-md);
@@ -219,7 +228,7 @@
   padding: var(--space-md);
 }
 
-.app-metric__label {
+.ui-app-metric__label {
   color: var(--text-dim);
   font-family: var(--mono);
   font-size: var(--text-2xs);
@@ -227,7 +236,7 @@
   text-transform: uppercase;
 }
 
-.app-metric__value {
+.ui-app-metric__value {
   color: var(--text);
   font-family: var(--display);
   font-size: 1.9rem;
@@ -236,22 +245,22 @@
   line-height: 1;
 }
 
-.app-metric__delta {
+.ui-app-metric__delta {
   font-family: var(--mono);
   font-size: var(--text-xs);
 }
 
-.app-metric__delta.is-pos {
+.ui-app-metric__delta.is-pos {
   color: var(--success);
 }
 
-.app-metric__delta.is-neg {
+.ui-app-metric__delta.is-neg {
   color: var(--danger);
 }
 
 /* --- Empty state --- */
 
-.app-empty-state {
+.ui-app-empty-state {
   border: 1px dashed var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text-dim);
@@ -261,49 +270,49 @@
 
 /* --- Mobile rail collapse --- */
 
-.app-rail__toggle {
+.ui-app-rail__toggle {
   display: none;
 }
 
 @media (max-width: 880px) {
-  .app-shell {
+  .ui-app-shell {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  .app-rail {
+  .ui-app-rail {
     flex-direction: row;
     block-size: auto;
     overflow-x: auto;
     position: sticky;
     inset-block-start: 0;
-    z-index: 11;
+    z-index: calc(var(--z-raised) + 1);
   }
 
-  .app-rail__foot {
+  .ui-app-rail__foot {
     display: none;
   }
 
-  .app-nav {
+  .ui-app-nav {
     grid-auto-flow: column;
     gap: 0.15rem;
   }
 
-  .app-nav__section {
+  .ui-app-nav__section {
     display: none;
   }
 
-  .app-nav a {
+  .ui-app-nav a {
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
     white-space: nowrap;
   }
 
-  .app-nav a.is-active {
+  .ui-app-nav a.is-active {
     border-inline-start: 0;
     border-block-end-color: var(--accent);
   }
 
-  .app-content {
+  .ui-app-content {
     padding: var(--space-md);
   }
 }

package/css/base.css

@@ -161,26 +161,10 @@ input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 [tabindex]:focus-visible {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
-.skip-link {
-  background: var(--panel-strong);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-md);
-  color: var(--text);
-  inset-inline-start: 1rem;
-  padding: 0.7rem 1rem;
-  position: fixed;
-  inset-block-start: -4rem;
-  z-index: 40;
-}
-
-.skip-link:focus {
-  inset-block-start: 1rem;
-}
-
 /* Small global helpers reused across apps. */
 .ui-muted {
   color: var(--text-dim);
@@ -196,7 +180,6 @@ textarea:focus-visible,
 }
 
 .ui-visually-hidden {
-  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   block-size: 1px;
   overflow: hidden;
@@ -236,6 +219,14 @@ textarea:focus-visible,
     outline-offset: -2px;
   }
 
+  /* The active tab signals selection only via accent colour/border, both
+     flattened by the forced palette — re-assert it with a system colour
+     so the selected tab stays distinguishable (a11y review L3). */
+  .ui-tab.is-active {
+    border-block-end-color: Highlight;
+    color: Highlight;
+  }
+
   /* Keyboard focus must never depend on a colour that gets overridden. */
   a:focus-visible,
   button:focus-visible,
@@ -262,11 +253,11 @@ textarea:focus-visible,
   /* Decorative / interactive chrome never prints. */
   .ui-dotfield,
   .ui-toast-stack,
-  .app-rail,
-  .app-topbar,
-  .site-nav,
-  .theme-toggle__button,
-  .site-menu,
+  .ui-app-rail,
+  .ui-app-topbar,
+  .ui-sitenav,
+  .ui-themetoggle__button,
+  .ui-sitemenu,
   .ui-spinner,
   .ui-dotloader,
   .ui-dotspinner,

package/css/content.css

@@ -120,7 +120,7 @@
 
 @media (hover: hover) {
   .ui-prose a:hover {
-    color: var(--accent);
+    color: var(--accent-text);
     text-decoration-color: var(--accent);
   }
 }
@@ -136,7 +136,7 @@
 }
 
 .ui-prose li::marker {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .ui-prose ul {
@@ -287,3 +287,38 @@
 .ui-prose--compact > * + :is(h1, h2, h3, h4, h5, h6) {
   margin-block-start: var(--space-lg);
 }
+
+/* ==========================================================================
+   ui-quote — pull-quote with attribution. A long-form companion to
+   .ui-prose (works inside it or standalone). Emphasis via scale + a
+   short accent rule, not a tinted box. Use <figure>/<blockquote> +
+   <figcaption>; tag-agnostic.
+   ========================================================================== */
+
+.ui-quote {
+  color: var(--text);
+  display: grid;
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  gap: var(--space-sm);
+  line-height: 1.2;
+  margin-block: var(--space-xl);
+  max-inline-size: 40ch;
+  text-wrap: balance;
+}
+
+.ui-quote::before {
+  background: var(--accent);
+  block-size: 2px;
+  content: '';
+  inline-size: 2.5rem;
+}
+
+.ui-quote__cite {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-style: normal;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/css/core.css

@@ -1,5 +1,7 @@
-/* @ponchia/ui — core bundle (no breakpoint overrides).
-   Consumers that manage their own responsive layer import this.
+/* @ponchia/ui — the CSS bundle (single source entrypoint).
+   The legacy non-ui-* vocabulary and the separate responsive layer were
+   removed in 0.3.0; the ui-* components carry their own breakpoints, so
+   there is one bundle, not a core/full split.
 
    Everything ships inside the `bronto` cascade layer. Any un-layered CSS
    in the consuming app therefore wins over the framework without a
@@ -12,9 +14,8 @@
 @import url('./base.css') layer(bronto);
 @import url('./motion.css') layer(bronto);
 @import url('./dots.css') layer(bronto);
-@import url('./layout.css') layer(bronto);
 @import url('./navigation.css') layer(bronto);
-@import url('./typography.css') layer(bronto);
+@import url('./site.css') layer(bronto);
 @import url('./content.css') layer(bronto);
 @import url('./primitives.css') layer(bronto);
 @import url('./forms.css') layer(bronto);
@@ -22,5 +23,4 @@
 @import url('./overlay.css') layer(bronto);
 @import url('./disclosure.css') layer(bronto);
 @import url('./table.css') layer(bronto);
-@import url('./cards.css') layer(bronto);
 @import url('./app.css') layer(bronto);

package/css/disclosure.css

@@ -46,7 +46,19 @@
 
 .ui-tab.is-active {
   border-block-end-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-tab:focus-visible {
+  /* An inset box, deliberately distinct from the .is-active bottom-border
+     so focus ≠ selection for low-vision keyboard users: the global
+     button:focus-visible ring would otherwise sit exactly on the active
+     underline. Geometry (inset offset), not colour, carries the
+     distinction — colour stays the solid accent used by every other
+     control's ring (the --focus-ring token wiring is decided globally,
+     not per-component). */
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -3px;
 }
 
 .ui-tabs__panel[hidden] {
@@ -99,7 +111,7 @@
 }
 
 .ui-accordion__item[open] .ui-accordion__summary {
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .ui-accordion__item[open] .ui-accordion__summary::before {
@@ -157,7 +169,7 @@
 }
 
 .ui-segmented__option:has(input:focus-visible) {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
@@ -209,7 +221,7 @@
 
 @media (hover: hover) {
   .ui-breadcrumb__item a:hover {
-    color: var(--accent);
+    color: var(--accent-text);
   }
 }
 
@@ -246,7 +258,7 @@
 
 .ui-pagination__item.is-active {
   border-color: var(--accent);
-  color: var(--accent);
+  color: var(--accent-text);
 }
 
 .ui-pagination__item[aria-disabled='true'] {

package/css/dots.css

@@ -30,7 +30,7 @@
   mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
   pointer-events: none;
   position: fixed;
-  z-index: 0;
+  z-index: var(--z-base);
 }
 
 /* Dotted divider — replaces a plain rule. */

package/css/feedback.css

@@ -114,7 +114,14 @@
   max-inline-size: min(22rem, calc(100vw - 2rem));
   pointer-events: none;
   position: fixed;
-  z-index: 60;
+  z-index: var(--z-toast);
+}
+
+/* Assertive (error) region — anchored top inline-end so it never
+   overlaps the polite bottom stack and reads as a distinct, urgent
+   channel. */
+.ui-toast-stack--assertive {
+  inset-block: 1.25rem auto;
 }
 
 .ui-toast {
@@ -154,6 +161,30 @@
   text-transform: uppercase;
 }
 
+.ui-toast__close {
+  align-self: start;
+  background: none;
+  border: 0;
+  block-size: 1.4rem;
+  color: var(--text-dim);
+  cursor: pointer;
+  font: inherit;
+  grid-column: 3;
+  grid-row: 1 / -1;
+  inline-size: 1.4rem;
+  padding: 0;
+}
+
+.ui-toast__close::before {
+  content: '\00d7'; /* × — glyph via CSS so the button has no text node */
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.ui-toast__close:hover {
+  color: var(--text);
+}
+
 .ui-toast--accent::before {
   background: var(--accent);
 }
@@ -196,7 +227,7 @@
     opacity var(--duration-fast) var(--ease-standard),
     transform var(--duration-fast) var(--ease-standard);
   white-space: nowrap;
-  z-index: 50;
+  z-index: var(--z-popover);
 }
 
 .ui-tooltip:hover .ui-tooltip__bubble,
@@ -205,6 +236,60 @@
   transform: translate(-50%, 0);
 }
 
+/* Progressive enhancement: where CSS anchor positioning exists, lift
+   the bubble out of the normal flow so it can't be clipped by an
+   ancestor's overflow/scroll and auto-flips at the viewport edge.
+   Unsupported browsers keep the absolutely-positioned fallback above
+   (fine for short labels; use .ui-popover + initPopover for rich or
+   edge-critical content). */
+@supports (anchor-name: --x) {
+  .ui-tooltip {
+    anchor-name: --ui-tooltip;
+  }
+
+  .ui-tooltip__bubble {
+    inset: auto;
+    margin-block-end: 0.5rem;
+    position: fixed;
+    position-anchor: --ui-tooltip;
+    position-area: block-start center;
+    position-try-fallbacks: flip-block;
+    transform: translateY(4px);
+  }
+
+  .ui-tooltip:hover .ui-tooltip__bubble,
+  .ui-tooltip:focus-within .ui-tooltip__bubble {
+    transform: translateY(0);
+  }
+}
+
+/* Popover surface — a top-layer panel positioned by initPopover (JS
+   collision-aware, dependency-free). Uses the native [popover] top
+   layer when available so it never clips; the class styles it either
+   way. */
+.ui-popover {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  color: var(--text-soft);
+  font-size: var(--text-sm);
+  inline-size: max-content;
+  margin: 0;
+  max-inline-size: min(22rem, calc(100vw - 2rem));
+  padding: var(--space-sm) var(--space-md);
+  position: fixed;
+  z-index: var(--z-popover);
+}
+
+.ui-popover:not([popover], .is-open) {
+  display: none;
+}
+
+.ui-popover[popover]:not(:popover-open) {
+  display: none;
+}
+
 /* --- Progress — linear, determinate or indeterminate --- */
 
 .ui-progress {