@ponchia/ui 0.3.4 → 0.3.6

package/css/disclosure.css

@@ -321,3 +321,183 @@
 .ui-avatar-group .ui-avatar:not(:first-child) {
   margin-inline-start: -0.5rem;
 }
+
+/* --- Carousel — a scroll-snap track of slides with an optional thumbnail
+   strip. Native horizontal scroll gives touch/trackpad swipe + momentum
+   for free; initCarousel adds prev/next, keyboard, thumbnail sync and the
+   position counter. A full-screen gallery is this same carousel inside a
+   native <dialog class="ui-lightbox"> (see overlay.css) — the dialog
+   brings the top layer, focus-trap and Esc; nothing is re-implemented. --- */
+
+.ui-carousel {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+/* Positioned frame for the viewport + overlay controls. The arrows can't
+   live inside the scroll viewport (absolute children of a scroll container
+   scroll away with the content), so they anchor to this stage instead. */
+.ui-carousel__stage {
+  position: relative;
+}
+
+.ui-carousel__viewport {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.ui-carousel__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-carousel__viewport:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: -2px;
+}
+
+.ui-carousel__slide {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+}
+
+.ui-carousel__slide > :is(img, picture, .ui-ratio) {
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/* Prev / next — hairline round controls over the stage edges. */
+.ui-carousel__prev,
+.ui-carousel__next {
+  align-items: center;
+  background: color-mix(in srgb, var(--panel-strong) 80%, transparent);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-pill);
+  color: var(--text);
+  cursor: pointer;
+  display: inline-flex;
+  block-size: 2.2rem;
+  inline-size: 2.2rem;
+  inset-block-start: 50%;
+  justify-content: center;
+  position: absolute;
+  transform: translateY(-50%);
+  z-index: var(--z-raised);
+}
+
+.ui-carousel__prev {
+  inset-inline-start: var(--space-xs);
+}
+
+.ui-carousel__next {
+  inset-inline-end: var(--space-xs);
+}
+
+/* Chevron glyph, mirrors for RTL via the logical border edges. */
+.ui-carousel__prev::before,
+.ui-carousel__next::before {
+  block-size: 0.5rem;
+  border-block-start: 1.5px solid currentColor;
+  border-inline-end: 1.5px solid currentColor;
+  content: '';
+  inline-size: 0.5rem;
+}
+
+.ui-carousel__prev::before {
+  margin-inline-start: 0.2rem;
+  transform: rotate(-135deg);
+}
+
+.ui-carousel__next::before {
+  margin-inline-end: 0.2rem;
+  transform: rotate(45deg);
+}
+
+/* The chevron direction is a physical rotation, so flip it for RTL (the
+   buttons already swap sides via the logical insets above). */
+[dir='rtl'] .ui-carousel__prev::before {
+  transform: rotate(45deg);
+}
+
+[dir='rtl'] .ui-carousel__next::before {
+  transform: rotate(-135deg);
+}
+
+.ui-carousel__prev:disabled,
+.ui-carousel__next:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.ui-carousel__prev:focus-visible,
+.ui-carousel__next:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Position counter ("3 / 12") — initCarousel fills the text; aria-live. */
+.ui-carousel__status {
+  background: color-mix(in srgb, var(--panel-strong) 75%, transparent);
+  border-radius: var(--radius-pill);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inset-block-end: var(--space-xs);
+  inset-inline-start: var(--space-xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.2rem 0.5rem;
+  position: absolute;
+}
+
+/* Thumbnail strip — clicking a thumb jumps the track; active = accent. */
+.ui-carousel__thumbs {
+  display: flex;
+  gap: 0.4rem;
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.ui-carousel__thumbs::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-carousel__thumb {
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  flex: 0 0 auto;
+  block-size: 3rem;
+  inline-size: 4rem;
+  overflow: hidden;
+  padding: 0;
+}
+
+.ui-carousel__thumb > img {
+  block-size: 100%;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+.ui-carousel__thumb[aria-current='true'] {
+  border-color: var(--accent);
+}
+
+.ui-carousel__thumb:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-carousel__viewport,
+  .ui-carousel__thumbs {
+    scroll-behavior: auto;
+  }
+}

package/css/dots.css

@@ -47,17 +47,21 @@
 /* Data-bound dot matrix — a grid of state cells (activity / heatmap),
    the on-brand counterpart to the decorative .ui-dotgrid background.
    This is the grid + cell tones only; the data→cell mapping is the
-   consumer's. Tune density via --dotmatrix-cols / --dotmatrix-gap. */
+   consumer's. Tune density via --dotmatrix-cols / --dotmatrix-gap; set
+   --dotmatrix-dot to a fixed dot length (intrinsic sizing, e.g. for the
+   display glyphs in @ponchia/ui/glyphs) instead of stretching to fit;
+   set --dotmatrix-dot-radius: 0 (with --dotmatrix-gap: 0) to fuse the dots
+   into a crisp pixel glyph that stays legible at small/inline sizes. */
 .ui-dotmatrix {
   display: grid;
   gap: var(--dotmatrix-gap, 0.5rem);
-  grid-template-columns: repeat(var(--dotmatrix-cols, 12), minmax(0, 1fr));
+  grid-template-columns: repeat(var(--dotmatrix-cols, 12), var(--dotmatrix-dot, minmax(0, 1fr)));
 }
 
 .ui-dotmatrix__cell {
   aspect-ratio: 1;
   background: var(--field-dot);
-  border-radius: 50%;
+  border-radius: var(--dotmatrix-dot-radius, 50%);
 }
 
 .ui-dotmatrix__cell--hot {
@@ -68,6 +72,38 @@
   background: var(--field-dot-accent);
 }
 
+/* Animation (opt-in, decorative): a dot-matrix that "plays". Meaning stays
+   in the static cells + the element's label — motion is enhancement only,
+   and the reduced-motion block below switches it off. */
+
+/* --reveal: cells power on in a left→right, top→bottom scan. The per-cell
+   delay reads `--i` (the row-major index) which the renderer sets. */
+.ui-dotmatrix--reveal .ui-dotmatrix__cell {
+  animation: dotmatrixCellOn var(--duration-base) var(--ease-out) both;
+  animation-delay: calc(var(--i, 0) * var(--dotmatrix-reveal-step, 3ms));
+}
+
+/* `from`-only on purpose: when reduced-motion kills the animation the cells
+   stay at their natural opacity:1 — i.e. the settled end-state still shows. */
+@keyframes dotmatrixCellOn {
+  from {
+    opacity: 0;
+    transform: scale(0.35);
+  }
+}
+
+/* --pulse: the whole glyph breathes, for a "live"/attention state. */
+.ui-dotmatrix--pulse {
+  animation: dotmatrixPulse 1.8s var(--ease-standard) infinite;
+}
+
+@keyframes dotmatrixPulse {
+  50% {
+    opacity: 0.55;
+    transform: scale(0.94);
+  }
+}
+
 /* Status dot — the glyph-style state indicator. */
 .ui-dot {
   background: var(--text-dim);
@@ -289,7 +325,9 @@
   .ui-dot--live::after,
   .ui-dotloader span,
   .ui-dotspinner,
-  .ui-dotbar--indeterminate i {
+  .ui-dotbar--indeterminate i,
+  .ui-dotmatrix--reveal .ui-dotmatrix__cell,
+  .ui-dotmatrix--pulse {
     animation: none;
   }
 

package/css/feedback.css

@@ -338,3 +338,114 @@
     animation: none;
   }
 }
+
+/* --- Meter — a labelled proportion / threshold bar. Unlike ui-progress
+   (task progress, can be indeterminate), a meter shows a measured static
+   value for data display (coverage, capacity, a KPI against a target).
+   Drive the fill with the same --value knob as progress; tone the fill by
+   threshold. Author role="meter" + aria-valuenow/min/max for AT. --- */
+
+.ui-meter {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+  inline-size: 100%;
+}
+
+/* Default (untoned) fill is --text-dim, not --line-strong: the fill
+   conveys the measured value, so it must clear the 3:1 non-text floor
+   against the --panel-soft track (--line-strong is only ~2:1). --text-dim
+   on --surface-muted is already a gated contrast pairing (≥4.5:1). */
+.ui-meter__fill {
+  background: var(--text-dim);
+  block-size: 100%;
+  transition: inline-size var(--duration-base) var(--ease-out);
+  inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
+}
+
+.ui-meter--accent .ui-meter__fill {
+  background: var(--accent);
+}
+
+.ui-meter--success .ui-meter__fill {
+  background: var(--success);
+}
+
+.ui-meter--warning .ui-meter__fill {
+  background: var(--warning);
+}
+
+.ui-meter--danger .ui-meter__fill {
+  background: var(--danger);
+}
+
+/* --- Steps — progress through a multi-step flow. Use an <ol>; the
+   current step is aria-current="step" (no class), completed steps take
+   --done. Counter-numbered markers, hairline connectors. --- */
+
+.ui-steps {
+  counter-reset: ui-step;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-steps__item {
+  align-items: center;
+  color: var(--text-dim);
+  counter-increment: ui-step;
+  display: inline-flex;
+  flex: 1 1 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.5rem;
+  letter-spacing: var(--tracking-wide);
+  min-inline-size: max-content;
+  text-transform: uppercase;
+}
+
+.ui-steps__item::before {
+  align-items: center;
+  border: 1px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--text-dim);
+  content: counter(ui-step);
+  display: inline-flex;
+  flex: 0 0 auto;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  justify-content: center;
+}
+
+/* Connector hairline trailing every item except the last. */
+.ui-steps__item:not(:last-child)::after {
+  background: var(--line);
+  block-size: 1px;
+  content: '';
+  flex: 1 1 1.5rem;
+  min-inline-size: 1rem;
+}
+
+.ui-steps__item[aria-current='step'] {
+  color: var(--text);
+}
+
+.ui-steps__item[aria-current='step']::before {
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.ui-steps__item--done {
+  color: var(--text-soft);
+}
+
+.ui-steps__item--done::before {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--button-text);
+}

package/css/forms.css

@@ -131,6 +131,50 @@
   white-space: nowrap;
 }
 
+/* --- Input icon: a leading (or trailing) glyph *inside* a single
+   control, distinct from input-group's adjacent affix. Wrap the input:
+   <span class="ui-input-icon"><svg class="ui-input-icon__icon"/>
+   <input class="ui-input"></span>. The icon is a decorative overlay; the
+   input keeps full width and gains padding on the icon side. --end moves
+   the icon to the inline-end. RTL falls out of the logical props. --- */
+.ui-input-icon {
+  display: block;
+  position: relative;
+}
+
+.ui-input-icon > .ui-input {
+  padding-inline-start: 2.2rem;
+}
+
+.ui-input-icon--end > .ui-input {
+  padding-inline: 0.7rem 2.2rem;
+}
+
+.ui-input-icon__icon {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  inset-block-start: 50%;
+  inset-inline-start: 0.7rem;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+.ui-input-icon--end .ui-input-icon__icon {
+  inset-inline: auto 0.7rem;
+}
+
+.ui-input-icon__icon svg {
+  block-size: 1rem;
+  inline-size: 1rem;
+}
+
+.ui-input-icon:focus-within .ui-input-icon__icon {
+  color: var(--accent);
+}
+
 /* --- File input --- */
 .ui-file {
   color: var(--text-soft);

package/css/overlay.css

@@ -105,6 +105,54 @@
   }
 }
 
+/* --- Lightbox — a full-viewport <dialog> wrapping a .ui-carousel. The
+   native <dialog> brings the top layer, focus-trap and Escape; initDialog
+   adds open (`data-bronto-open`) + focus-return; initCarousel drives the
+   inner carousel. No bespoke overlay/focus code — that is the whole point
+   of building it on <dialog>. --- */
+.ui-lightbox {
+  background: color-mix(in srgb, var(--bg) 92%, #000);
+  border: 0;
+  block-size: 100vh;
+  color: var(--text);
+  max-block-size: 100vh;
+  max-inline-size: 100vw;
+  padding: 0;
+  inline-size: 100vw;
+}
+
+.ui-lightbox::backdrop {
+  background: color-mix(in srgb, #000 80%, transparent);
+}
+
+.ui-lightbox[open] {
+  align-content: center;
+  display: grid;
+}
+
+.ui-lightbox .ui-carousel {
+  inline-size: 100%;
+  margin: auto;
+  max-inline-size: min(64rem, 100vw);
+}
+
+/* Lightbox images are shown whole (contain), not cropped like the inline
+   carousel's cover thumbnails. */
+.ui-lightbox .ui-carousel__slide > img {
+  margin-inline: auto;
+  max-block-size: 80vh;
+  max-inline-size: 100%;
+  inline-size: auto;
+  object-fit: contain;
+}
+
+.ui-lightbox__close {
+  inset-block-start: var(--space-sm);
+  inset-inline-end: var(--space-sm);
+  position: fixed;
+  z-index: var(--z-raised);
+}
+
 /* --- Dropdown menu — pairs with native <details> --- */
 
 /* The positioned host for a <details> dropdown: .ui-menu is absolute, so

package/css/primitives.css

@@ -631,3 +631,63 @@
   color: var(--text-dim);
   margin: 0.3rem 0 0;
 }
+
+/* --- Keyboard key — inline glyph for shortcut hints. Wrap a <kbd>. --- */
+
+.ui-kbd {
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  justify-content: center;
+  line-height: 1;
+  min-inline-size: 1.4rem;
+  padding: 0.18rem 0.4rem;
+}
+
+/* --- Timeline — vertical event list on a hairline spine. Use an <ol>;
+   each <li> is a __item with an optional __time label. aria-current marks
+   the live/most-recent event (accent marker). --- */
+
+.ui-timeline {
+  display: grid;
+  gap: var(--space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-timeline__item {
+  border-inline-start: 1px solid var(--line);
+  display: grid;
+  gap: 0.2rem;
+  padding-inline-start: var(--space-md);
+  position: relative;
+}
+
+.ui-timeline__item::before {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  inline-size: 0.5rem;
+  inset-block-start: 0.18rem;
+  inset-inline-start: calc(-0.25rem - 0.5px);
+  position: absolute;
+}
+
+.ui-timeline__item[aria-current]::before {
+  background: var(--accent);
+}
+
+.ui-timeline__time {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}

package/css/site.css

@@ -91,6 +91,39 @@
   gap: var(--space-xs);
 }
 
+/* --- Page header — the in-page title bar every view re-hand-rolls:
+   eyebrow/breadcrumb + title on the start, actions on the end, one
+   hairline beneath. Compose the existing ui-eyebrow / ui-breadcrumb in
+   the title block (don't duplicate them); __actions is a cluster. --- */
+
+.ui-pagehead {
+  align-items: flex-end;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block-end: var(--space-md);
+}
+
+.ui-pagehead__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  letter-spacing: var(--tracking-wide);
+  line-height: 1.1;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-pagehead__actions {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
 /* --- Nav — desktop inline, dot active cue via aria-current --- */
 
 .ui-sitenav {