@ponchia/ui 0.2.1 → 0.3.0

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-height: 2rem;
+  min-block-size: 2rem;
+  min-inline-size: 7rem;
   padding: 0.42rem 0.66rem;
   text-transform: uppercase;
   transition:
@@ -33,114 +29,54 @@
   white-space: nowrap;
 }
 
-.theme-toggle__button {
-  justify-content: center;
-  min-width: 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);
   display: inline-flex;
-  height: 0.8rem;
+  block-size: 0.8rem;
   padding: 0.12rem;
-  width: 1.5rem;
+  inline-size: 1.5rem;
 }
 
-.theme-toggle__thumb {
+.ui-themetoggle__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 {
+[data-theme='dark'] .ui-themetoggle__thumb {
   background: var(--accent);
   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: '';
-  height: 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;
-}
-
-.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);
+[dir='rtl'][data-theme='dark'] .ui-themetoggle__thumb,
+[dir='rtl'] [data-theme='dark'] .ui-themetoggle__thumb {
+  transform: translateX(-0.6rem);
 }
 
 @media (hover: hover) {
-  .site-menu__toggle:active,
-  .theme-toggle__button:active {
+  .ui-themetoggle__button:active {
     transform: translateY(1px);
   }
 }

package/css/overlay.css

@@ -0,0 +1,206 @@
+/* ==========================================================================
+   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-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);
+  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-text);
   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,14 +197,16 @@
   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;
 }
 
 .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 --- */
@@ -224,28 +228,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 +259,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 {
@@ -307,7 +309,7 @@
   }
 
   .ui-link:hover {
-    color: var(--accent);
+    color: var(--accent-text);
     text-decoration-color: var(--accent);
   }
 
@@ -315,7 +317,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;
+  }
+}