@ponchia/ui 0.2.2 → 0.3.0

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);
@@ -236,6 +220,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 +254,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/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;
 }
 
@@ -183,7 +183,7 @@
 }
 
 .ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 

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

package/css/primitives.css

@@ -78,7 +78,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;
@@ -203,8 +203,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 +309,7 @@
   }
 
   .ui-link:hover {
-    color: var(--accent);
+    color: var(--accent-text);
     text-decoration-color: var(--accent);
   }