@ponchia/ui 0.2.1 → 0.3.0

package/css/dots.css

@@ -39,9 +39,9 @@
   background-position: 0 50%;
   background-size: 9px 9px;
   border: 0;
-  height: 3px;
+  block-size: 3px;
   margin: var(--space-md) 0;
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* Status dot — the glyph-style state indicator. */
@@ -50,8 +50,8 @@
   border-radius: 50%;
   display: inline-block;
   flex: 0 0 auto;
-  height: 0.55rem;
-  width: 0.55rem;
+  block-size: 0.55rem;
+  inline-size: 0.55rem;
 }
 
 .ui-dot--accent {
@@ -108,8 +108,8 @@
   animation: pulseDot 1s var(--ease-standard) infinite;
   background: var(--accent);
   border-radius: 50%;
-  height: 0.42rem;
-  width: 0.42rem;
+  block-size: 0.42rem;
+  inline-size: 0.42rem;
 }
 
 .ui-dotloader span:nth-child(2) {
@@ -120,6 +120,83 @@
   animation-delay: 0.32s;
 }
 
+/* Dot spinner — the Nothing-signature loader: a ring of dots, the lit
+   one stepping around the circle. Pure CSS: a steps() rotation of the
+   container plus a static opacity ramp on the dots reads as a comet.
+   Markup: <span class="ui-dotspinner"><i></i> ×8</span>. Size via
+   --ds-box / --ds-dot. */
+.ui-dotspinner {
+  --ds-box: 1.6rem;
+  --ds-dot: 0.26rem;
+
+  animation: uiSpin 1s steps(8) infinite;
+  display: inline-block;
+  flex: 0 0 auto;
+  block-size: var(--ds-box);
+  position: relative;
+  inline-size: var(--ds-box);
+}
+
+.ui-dotspinner i {
+  background: var(--accent);
+  border-radius: 50%;
+  block-size: var(--ds-dot);
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  inline-size: var(--ds-dot);
+}
+
+.ui-dotspinner i:nth-child(1) {
+  opacity: 1;
+  transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(2) {
+  opacity: 0.85;
+  transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(3) {
+  opacity: 0.7;
+  transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(4) {
+  opacity: 0.56;
+  transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(5) {
+  opacity: 0.44;
+  transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(6) {
+  opacity: 0.34;
+  transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(7) {
+  opacity: 0.25;
+  transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(8) {
+  opacity: 0.16;
+  transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner--sm {
+  --ds-box: 1.05rem;
+  --ds-dot: 0.18rem;
+}
+
+.ui-dotspinner--lg {
+  --ds-box: 2.6rem;
+  --ds-dot: 0.42rem;
+}
+
 /* Dot progress meter — segmented LED bar. */
 .ui-dotbar {
   display: flex;
@@ -130,13 +207,46 @@
   background: var(--field-dot);
   border-radius: 1px;
   flex: 1;
-  height: 0.5rem;
+  block-size: 0.5rem;
 }
 
 .ui-dotbar i.is-on {
   background: var(--accent);
 }
 
+/* Indeterminate: the lit cell sweeps left→right across the segments. */
+.ui-dotbar--indeterminate i {
+  animation: pulseDot 1.1s var(--ease-standard) infinite;
+}
+
+.ui-dotbar--indeterminate i:nth-child(2) {
+  animation-delay: 0.09s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(3) {
+  animation-delay: 0.18s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(4) {
+  animation-delay: 0.27s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(5) {
+  animation-delay: 0.36s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(6) {
+  animation-delay: 0.45s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(7) {
+  animation-delay: 0.54s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(n + 8) {
+  animation-delay: 0.63s;
+}
+
 /* Matrix-reveal wrapper — content wipes in left→right on .is-in. */
 .ui-matrix {
   clip-path: inset(0 100% 0 0);
@@ -149,10 +259,17 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ui-dot--live::after,
-  .ui-dotloader span {
+  .ui-dotloader span,
+  .ui-dotspinner,
+  .ui-dotbar--indeterminate i {
     animation: none;
   }
 
+  /* Keep the spinner legible while static. */
+  .ui-dotspinner i {
+    opacity: 0.6;
+  }
+
   .ui-matrix {
     clip-path: none;
   }

package/css/feedback.css

@@ -0,0 +1,243 @@
+/* ==========================================================================
+   feedback — alert / toast / tooltip / progress
+   Status is carried by a single leading dot + a rationed tone colour,
+   never a fill. Nothing-flat, hairline, sharp.
+   ========================================================================== */
+
+/* --- Alert / callout — inline, dismissible-compatible --- */
+
+.ui-alert {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text-soft);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: 0.3rem;
+  grid-template-columns: auto 1fr;
+  padding: 0.8rem 0.9rem;
+}
+
+/* Leading status glyph — the Nothing state cue. */
+.ui-alert::before {
+  background: var(--text-dim);
+  border-radius: 50%;
+  content: '';
+  block-size: 0.5rem;
+  margin-block-start: 0.32rem;
+  inline-size: 0.5rem;
+}
+
+.ui-alert > * {
+  grid-column: 2;
+}
+
+.ui-alert__title {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-alert__body {
+  margin: 0;
+}
+
+.ui-alert__dismiss {
+  background: transparent;
+  border: 0;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: var(--mono);
+  grid-column: 3;
+  grid-row: 1;
+  line-height: 1;
+  padding: 0.1rem 0.3rem;
+}
+
+.ui-alert:has(.ui-alert__dismiss) {
+  grid-template-columns: auto 1fr auto;
+}
+
+.ui-alert--accent {
+  border-inline-start-color: var(--accent);
+}
+
+.ui-alert--accent::before {
+  background: var(--accent);
+}
+
+.ui-alert--success {
+  border-inline-start-color: var(--success);
+}
+
+.ui-alert--success::before {
+  background: var(--success);
+}
+
+.ui-alert--warning {
+  border-inline-start-color: var(--warning);
+}
+
+.ui-alert--warning::before {
+  background: var(--warning);
+}
+
+.ui-alert--danger {
+  border-inline-start-color: var(--danger);
+}
+
+.ui-alert--danger::before {
+  background: var(--danger);
+}
+
+@media (hover: hover) {
+  .ui-alert__dismiss:hover {
+    color: var(--text);
+  }
+}
+
+/* --- Toast — transient, stacked, screen-anchored --- */
+
+.ui-toast-stack {
+  display: grid;
+  gap: 0.5rem;
+
+  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. */
+  inset-block: auto 1.25rem;
+  inset-inline: auto 1.25rem;
+  justify-items: end;
+  max-inline-size: min(22rem, calc(100vw - 2rem));
+  pointer-events: none;
+  position: fixed;
+  z-index: 60;
+}
+
+.ui-toast {
+  align-items: flex-start;
+  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  color: var(--text-soft);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: 0.2rem 0.55rem;
+  grid-template-columns: auto 1fr;
+  padding: 0.7rem 0.85rem;
+  pointer-events: auto;
+  inline-size: 100%;
+}
+
+.ui-toast::before {
+  background: var(--text-dim);
+  border-radius: 50%;
+  content: '';
+  grid-row: 1 / -1;
+  block-size: 0.5rem;
+  margin-block-start: 0.3rem;
+  inline-size: 0.5rem;
+}
+
+.ui-toast__title {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-toast--accent::before {
+  background: var(--accent);
+}
+
+.ui-toast--success::before {
+  background: var(--success);
+}
+
+.ui-toast--warning::before {
+  background: var(--warning);
+}
+
+.ui-toast--danger::before {
+  background: var(--danger);
+}
+
+/* --- Tooltip — CSS-only, hover/focus, no JS --- */
+
+.ui-tooltip {
+  display: inline-flex;
+  position: relative;
+}
+
+.ui-tooltip__bubble {
+  background: var(--text);
+  border-radius: var(--radius-sm);
+  inset-block-end: calc(100% + 0.5rem);
+  color: var(--bg);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inset-inline-start: 50%;
+  letter-spacing: var(--tracking-wide);
+  opacity: 0;
+  padding: 0.34rem 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  text-transform: uppercase;
+  transform: translate(-50%, 4px);
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+  z-index: 50;
+}
+
+.ui-tooltip:hover .ui-tooltip__bubble,
+.ui-tooltip:focus-within .ui-tooltip__bubble {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+/* --- Progress — linear, determinate or indeterminate --- */
+
+.ui-progress {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+  position: relative;
+  inline-size: 100%;
+}
+
+.ui-progress__bar {
+  background: var(--accent);
+  block-size: 100%;
+  transition: inline-size var(--duration-base) var(--ease-out);
+  inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
+}
+
+.ui-progress--indeterminate .ui-progress__bar {
+  animation: uiTrack 1.1s var(--ease-standard) infinite;
+  position: absolute;
+  inline-size: 45%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-progress--indeterminate .ui-progress__bar {
+    animation-duration: 0.01ms;
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  .ui-toast {
+    animation: none;
+  }
+}

package/css/fonts.css

@@ -58,3 +58,14 @@
   font-display: swap;
   src: url('../fonts/doto-900.ttf') format('truetype');
 }
+
+/* Data-saver: never *use* Doto, so the browser never fetches it. The
+   webfont is only requested when matched to rendered text, so pointing
+   --display / --dot-font at the system mono stack opts the whole
+   payload out under prefers-reduced-data (same lever as self-hosting). */
+@media (prefers-reduced-data: reduce) {
+  :root {
+    --display: var(--mono);
+    --dot-font: var(--mono);
+  }
+}

package/css/forms.css

@@ -29,7 +29,7 @@
   transition:
     border-color var(--duration-fast) var(--ease-standard),
     background-color var(--duration-fast) var(--ease-standard);
-  width: 100%;
+  inline-size: 100%;
 }
 
 .ui-input::placeholder,
@@ -38,7 +38,7 @@
 }
 
 .ui-textarea {
-  min-height: 6rem;
+  min-block-size: 6rem;
   resize: vertical;
 }
 
@@ -48,7 +48,12 @@
   background-position: right 0.75rem center;
   background-repeat: no-repeat;
   background-size: 5px 5px;
-  padding-right: 1.8rem;
+  padding-inline-end: 1.8rem;
+}
+
+/* background-position has no logical form — mirror the marker for RTL. */
+[dir='rtl'] .ui-select {
+  background-position: left 0.75rem center;
 }
 
 .ui-input:focus,
@@ -61,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;
 }
 
@@ -103,8 +108,8 @@
   border-radius: 50%;
   content: '';
   flex: 0 0 auto;
-  height: 0.42rem;
-  width: 0.42rem;
+  block-size: 0.42rem;
+  inline-size: 0.42rem;
 }
 
 .ui-search:focus-within {
@@ -123,7 +128,7 @@
   font-size: var(--text-sm);
   outline: none;
   padding: 0.6rem 0;
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* Toggle switch — square Nothing-style track. */
@@ -145,22 +150,22 @@
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-pill);
   display: inline-flex;
-  height: 1.05rem;
+  block-size: 1.05rem;
   padding: 2px;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard);
-  width: 1.95rem;
+  inline-size: 1.95rem;
 }
 
 .ui-switch__thumb {
   background: var(--text-dim);
   border-radius: 50%;
-  height: 100%;
+  block-size: 100%;
   transition:
     transform var(--duration-fast) var(--ease-spring),
     background-color var(--duration-fast) var(--ease-standard);
-  width: 0.78rem;
+  inline-size: 0.78rem;
 }
 
 .ui-switch input:checked + .ui-switch__track {
@@ -173,8 +178,12 @@
   transform: translateX(0.9rem);
 }
 
+[dir='rtl'] .ui-switch input:checked + .ui-switch__track .ui-switch__thumb {
+  transform: translateX(-0.9rem);
+}
+
 .ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid var(--accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
@@ -189,6 +198,24 @@
 
 .ui-check input {
   accent-color: var(--accent);
-  height: 1rem;
-  width: 1rem;
+  block-size: 1rem;
+  inline-size: 1rem;
+}
+
+/* Touch: comfortable hit targets on coarse pointers. */
+@media (pointer: coarse) {
+  .ui-input,
+  .ui-select,
+  .ui-textarea {
+    min-block-size: 2.9rem;
+  }
+
+  .ui-search {
+    min-block-size: 2.9rem;
+  }
+
+  .ui-check input {
+    block-size: 1.15rem;
+    inline-size: 1.15rem;
+  }
 }

package/css/motion.css

@@ -148,6 +148,30 @@
   }
 }
 
+/* Indeterminate progress: a short segment sweeps the track. */
+@keyframes uiTrack {
+  0% {
+    inset-inline-start: -45%;
+  }
+
+  100% {
+    inset-inline-start: 100%;
+  }
+}
+
+/* Toast / overlay entrance: rise + fade, spring-tipped. */
+@keyframes uiToastIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 /* --- Utilities --- */
 
 .ui-animate-in {
@@ -229,23 +253,23 @@
   animation: uiShimmer 1.4s linear infinite;
   border-radius: var(--radius-sm);
   color: transparent;
-  min-height: 0.8em;
+  min-block-size: 0.8em;
 }
 
 .ui-spinner {
   animation: uiSpin 0.7s linear infinite;
   border: 2px solid var(--line);
   border-radius: 50%;
-  border-top-color: var(--accent);
+  border-block-start-color: var(--accent);
   display: inline-block;
-  height: 1.1rem;
-  width: 1.1rem;
+  block-size: 1.1rem;
+  inline-size: 1.1rem;
 }
 
 .ui-caret::after {
   animation: uiBlink 1.1s steps(1) infinite;
   content: '▮';
-  margin-left: 0.1em;
+  margin-inline-start: 0.1em;
 }
 
 @media (prefers-reduced-motion: reduce) {