@ponchia/ui 0.2.1 → 0.2.2

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,
@@ -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,6 +178,10 @@
   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-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/layout.css

@@ -13,7 +13,7 @@
 
 .site-shell {
   margin: 0 auto;
-  max-width: 1320px;
+  max-inline-size: 1320px;
   padding: 0.9rem;
   position: relative;
   z-index: 1;
@@ -56,7 +56,7 @@
   margin: 0 auto 0.9rem;
   padding: 0.55rem 0.65rem;
   position: sticky;
-  top: 0.65rem;
+  inset-block-start: 0.65rem;
   z-index: 10;
 }
 
@@ -92,7 +92,7 @@
   display: flex;
   gap: 1rem;
   justify-content: space-between;
-  margin-top: 1rem;
+  margin-block-start: 1rem;
   padding: 0.85rem 1rem;
 }
 
@@ -133,11 +133,11 @@
 .page-head,
 .post-shell {
   border-radius: var(--radius-xl);
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   padding: 1.35rem;
   position: relative;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .hero {

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

package/css/navigation.css

@@ -23,7 +23,7 @@
   gap: 0.4rem;
   letter-spacing: var(--tracking-wide);
   list-style: none;
-  min-height: 2rem;
+  min-block-size: 2rem;
   padding: 0.42rem 0.66rem;
   text-transform: uppercase;
   transition:
@@ -35,7 +35,7 @@
 
 .theme-toggle__button {
   justify-content: center;
-  min-width: 7rem;
+  min-inline-size: 7rem;
 }
 
 .site-menu__toggle::-webkit-details-marker {
@@ -63,21 +63,21 @@
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-pill);
   display: inline-flex;
-  height: 0.8rem;
+  block-size: 0.8rem;
   padding: 0.12rem;
-  width: 1.5rem;
+  inline-size: 1.5rem;
 }
 
 .theme-toggle__thumb {
   background: var(--text-dim);
   border-radius: 50%;
   display: block;
-  height: 100%;
+  block-size: 100%;
   transform: translateX(0);
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     transform var(--duration-fast) var(--ease-spring);
-  width: 0.56rem;
+  inline-size: 0.56rem;
 }
 
 [data-theme='dark'] .theme-toggle__thumb {
@@ -85,6 +85,11 @@
   transform: translateX(0.6rem);
 }
 
+[dir='rtl'][data-theme='dark'] .theme-toggle__thumb,
+[dir='rtl'] [data-theme='dark'] .theme-toggle__thumb {
+  transform: translateX(-0.6rem);
+}
+
 .site-nav {
   display: inline-flex;
   gap: 0.15rem;
@@ -114,13 +119,13 @@
   background: currentColor;
   border-radius: 50%;
   content: '';
-  height: 0.32rem;
+  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);
-  width: 0.32rem;
+  inline-size: 0.32rem;
 }
 
 .site-nav a:hover,

package/css/overlay.css

@@ -0,0 +1,198 @@
+/* ==========================================================================
+   overlay — modal / drawer / dropdown menu
+   Built on native <dialog> and <details> so the framework stays
+   CSS-first; the optional initDialog behavior only adds open/close glue.
+   ========================================================================== */
+
+/* --- Modal — style the native <dialog> --- */
+
+.ui-modal {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-raised);
+  color: var(--text);
+  margin: auto;
+  max-block-size: min(85vh, 44rem);
+  max-inline-size: min(32rem, calc(100vw - 2rem));
+  overflow: hidden;
+  padding: 0;
+  inline-size: 100%;
+}
+
+.ui-modal::backdrop {
+  backdrop-filter: blur(2px);
+  background: color-mix(in srgb, var(--bg) 70%, transparent);
+}
+
+.ui-modal[open] {
+  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
+.ui-modal__head {
+  align-items: flex-start;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+  padding: var(--space-md);
+}
+
+.ui-modal__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-lg);
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-modal__body {
+  overflow-y: auto;
+  padding: var(--space-md);
+}
+
+.ui-modal__foot {
+  border-block-start: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  justify-content: flex-end;
+  padding: var(--space-md);
+}
+
+.ui-modal__close {
+  background: transparent;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text);
+  cursor: pointer;
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  line-height: 1;
+  padding: 0.34rem 0.5rem;
+}
+
+/* Drawer — full-height panel slid in from the inline-end edge
+   (right in LTR, left in RTL). */
+.ui-modal--drawer {
+  block-size: 100vh;
+  margin: 0;
+  margin-inline-start: auto;
+  max-block-size: 100vh;
+  max-inline-size: min(26rem, 100vw);
+  border-radius: 0;
+  border-width: 0;
+  border-inline-start-width: 1px;
+}
+
+@media (hover: hover) {
+  .ui-modal__close:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+}
+
+/* --- Dropdown menu — pairs with native <details> --- */
+
+.ui-menu {
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  display: grid;
+  gap: 1px;
+  min-inline-size: 11rem;
+  padding: 0.3rem;
+  position: absolute;
+  inset-inline-end: 0;
+  inset-block-start: calc(100% + 0.4rem);
+  z-index: 30;
+}
+
+.ui-menu__label {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.45rem 0.55rem 0.2rem;
+  text-transform: uppercase;
+}
+
+.ui-menu__item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  gap: 0.5rem;
+  padding: 0.5rem 0.55rem;
+  text-align: start;
+  inline-size: 100%;
+}
+
+.ui-menu__item::before {
+  background: currentColor;
+  border-radius: 50%;
+  content: '';
+  block-size: 0.3rem;
+  opacity: 0.4;
+  inline-size: 0.3rem;
+}
+
+.ui-menu__sep {
+  background: var(--line);
+  border: 0;
+  block-size: 1px;
+  margin: 0.2rem 0;
+}
+
+@media (hover: hover) {
+  .ui-menu__item:hover {
+    background: var(--bg-accent);
+    color: var(--text);
+  }
+
+  .ui-menu__item:hover::before {
+    opacity: 1;
+  }
+}
+
+/* --- Mobile: modal becomes a bottom sheet, drawer goes full-width --- */
+
+@media (max-width: 560px) {
+  .ui-modal {
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    margin: auto auto 0;
+    max-block-size: 88vh;
+    max-inline-size: 100vw;
+    inline-size: 100vw;
+  }
+
+  .ui-modal--drawer {
+    border-radius: 0;
+    border-width: 1px 0 0;
+    block-size: 88vh;
+    margin: auto 0 0;
+    max-block-size: 88vh;
+    max-inline-size: 100vw;
+    inline-size: 100vw;
+  }
+
+  .ui-menu {
+    inset-inline: 0;
+    min-inline-size: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-modal[open] {
+    animation: none;
+  }
+}

package/css/primitives.css

@@ -69,14 +69,16 @@
 
 .ui-divider {
   border: 0;
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   margin: 0;
 }
 
 /* --- Eyebrow / section label — dot-matrix face --- */
 
 .ui-eyebrow {
-  color: var(--accent);
+  /* 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);
   font-family: var(--display);
   font-size: var(--text-xs);
   font-weight: 700;
@@ -106,8 +108,8 @@
   justify-content: center;
   letter-spacing: var(--tracking-wide);
   line-height: 1;
-  min-height: 2.4rem;
-  min-width: 2.4rem;
+  min-block-size: 2.4rem;
+  min-inline-size: 2.4rem;
   padding: 0.66rem 1rem;
   text-transform: uppercase;
   transition:
@@ -137,7 +139,7 @@
 
 .ui-button--icon {
   aspect-ratio: 1;
-  min-width: 2.4rem;
+  min-inline-size: 2.4rem;
   padding: 0;
 }
 
@@ -172,13 +174,13 @@
 }
 
 .ui-link--arrow::after {
-  border-right: 1px solid currentColor;
-  border-top: 1px solid currentColor;
+  border-inline-end: 1px solid currentColor;
+  border-block-start: 1px solid currentColor;
   content: '';
-  height: 0.42rem;
+  block-size: 0.42rem;
   transform: rotate(45deg);
   transition: transform var(--duration-fast) var(--ease-standard);
-  width: 0.42rem;
+  inline-size: 0.42rem;
 }
 
 /* --- Chip / tag --- */
@@ -195,7 +197,7 @@
   gap: 0.36rem;
   letter-spacing: var(--tracking-wide);
   line-height: 1;
-  min-height: 1.7rem;
+  min-block-size: 1.7rem;
   padding: 0.32rem 0.55rem;
   text-transform: uppercase;
 }
@@ -224,28 +226,26 @@
   text-transform: uppercase;
 }
 
+/* Tone rides the border + tint; text stays the high-contrast neutral
+   (the soft tint can't carry 4.5:1 small-bold tone-on-tone — WCAG). */
 .ui-badge--accent {
   background: var(--accent-soft);
   border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
-  color: var(--accent);
 }
 
 .ui-badge--success {
   background: var(--success-soft);
   border-color: color-mix(in srgb, var(--success) 40%, var(--line));
-  color: var(--success);
 }
 
 .ui-badge--warning {
   background: var(--warning-soft);
   border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
-  color: var(--warning);
 }
 
 .ui-badge--danger {
   background: var(--danger-soft);
   border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
-  color: var(--danger);
 }
 
 /* --- Key/value list --- */
@@ -257,10 +257,10 @@
 }
 
 .ui-key-value div {
-  border-top: 1px solid var(--line);
+  border-block-start: 1px solid var(--line);
   display: grid;
   gap: 0.16rem;
-  padding-top: 0.6rem;
+  padding-block-start: 0.6rem;
 }
 
 .ui-key-value dt {
@@ -315,7 +315,24 @@
     transform: translateX(0.14rem) rotate(45deg);
   }
 
+  [dir='rtl'] .ui-link--arrow:hover::after {
+    transform: translateX(-0.14rem) rotate(45deg);
+  }
+
   .ui-chip--accent:hover {
     background: var(--accent-soft);
   }
 }
+
+/* --- Touch: comfortable hit targets on coarse pointers --- */
+
+@media (pointer: coarse) {
+  .ui-button {
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+
+  .ui-button--icon {
+    min-inline-size: 2.9rem;
+  }
+}

package/css/responsive.css

@@ -55,7 +55,7 @@
 
   .site-header__actions {
     align-items: center;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   .site-menu {
@@ -63,7 +63,7 @@
   }
 
   .site-menu[open] {
-    min-width: 0;
+    min-inline-size: 0;
   }
 
   .site-menu[open] .site-nav--mobile {
@@ -77,22 +77,22 @@
     box-shadow: var(--shadow-raised);
     display: none;
     gap: 0.35rem;
-    margin-top: 0;
+    margin-block-start: 0;
     padding: 0.6rem;
     position: absolute;
-    right: 0;
-    top: calc(100% + 0.7rem);
-    width: min(12rem, calc(100vw - 1.8rem));
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + 0.7rem);
+    inline-size: min(12rem, calc(100vw - 1.8rem));
     z-index: 20;
   }
 
   .site-nav--mobile a {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .hero--home .problem-panel {
-    border-left: 0;
-    border-top: 1px solid var(--line);
+    border-inline-start: 0;
+    border-block-start: 1px solid var(--line);
     padding: 1rem 0 0;
   }
 
@@ -114,10 +114,10 @@
   }
 
   .notes-strip__latest {
-    border-left: 0;
-    border-top: 1px solid var(--line);
-    padding-left: 0;
-    padding-top: 1rem;
+    border-inline-start: 0;
+    border-block-start: 1px solid var(--line);
+    padding-inline-start: 0;
+    padding-block-start: 1rem;
   }
 
   .hero--home .hero__panel {
@@ -152,6 +152,6 @@
   }
 
   .theme-toggle__button {
-    min-width: 4.2rem;
+    min-inline-size: 4.2rem;
   }
 }