@ponchia/ui 0.9.0 → 0.10.0

package/classes/vscode.css-custom-data.json

@@ -239,11 +239,11 @@
     },
     {
       "name": "--radius-lg",
-      "description": "Global scale token. Value: `3px`"
+      "description": "Global scale token. Value: `6px`"
     },
     {
       "name": "--radius-md",
-      "description": "Global scale token. Value: `2px`"
+      "description": "Global scale token. Value: `4px`"
     },
     {
       "name": "--radius-pill",
@@ -251,11 +251,11 @@
     },
     {
       "name": "--radius-sm",
-      "description": "Global scale token. Value: `1px`"
+      "description": "Global scale token. Value: `2px`"
     },
     {
       "name": "--radius-xl",
-      "description": "Global scale token. Value: `4px`"
+      "description": "Global scale token. Value: `8px`"
     },
     {
       "name": "--safe-area-bottom",
@@ -371,11 +371,11 @@
     },
     {
       "name": "--text-2xs",
-      "description": "Global scale token. Value: `0.72rem`"
+      "description": "Global scale token. Value: `0.75rem`"
     },
     {
       "name": "--text-base",
-      "description": "Global scale token. Value: `0.95rem`"
+      "description": "Global scale token. Value: `1rem`"
     },
     {
       "name": "--text-dim",
@@ -383,11 +383,11 @@
     },
     {
       "name": "--text-lg",
-      "description": "Global scale token. Value: `1.15rem`"
+      "description": "Global scale token. Value: `1.125rem`"
     },
     {
       "name": "--text-sm",
-      "description": "Global scale token. Value: `0.86rem`"
+      "description": "Global scale token. Value: `0.875rem`"
     },
     {
       "name": "--text-soft",
@@ -395,11 +395,11 @@
     },
     {
       "name": "--text-xl",
-      "description": "Global scale token. Value: `1.45rem`"
+      "description": "Global scale token. Value: `1.5rem`"
     },
     {
       "name": "--text-xs",
-      "description": "Global scale token. Value: `0.76rem`"
+      "description": "Global scale token. Value: `0.8125rem`"
     },
     {
       "name": "--tracking-wide",

package/css/app.css

@@ -64,12 +64,12 @@
 
 .ui-app-nav__section {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: var(--space-sm) 0 0.3rem;
   padding: 0 0.5rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-nav a {
@@ -77,7 +77,7 @@
   border-inline-start: 2px solid transparent;
   color: var(--text-soft);
   display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   gap: 0.55rem;
   padding: 0.5rem 0.6rem;
@@ -148,7 +148,7 @@
 .ui-app-rail__foot {
   border-block-start: 1px solid var(--line);
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   margin-block-start: auto;
   padding-block-start: var(--space-sm);
@@ -163,9 +163,15 @@
   display: flex;
   gap: var(--space-xs);
   margin-block-start: auto;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   padding-block-start: var(--space-sm);
 }
 
+.ui-app-rail__account > * {
+  min-inline-size: 0;
+}
+
 .ui-app-rail__account + .ui-app-rail__foot {
   margin-block-start: 0;
 }
@@ -204,17 +210,17 @@
 
 .ui-app-topbar__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 1.1rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.25rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-app-content {
   display: grid;
-  gap: var(--space-lg);
+  gap: var(--space-xl);
   padding: var(--space-lg);
 }
 
@@ -222,14 +228,12 @@
 
 .ui-app-toolbar {
   align-items: center;
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
+  border-block-end: 1px solid var(--line);
   display: flex;
   flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
-  padding: 0.7rem 0.85rem;
+  padding-block-end: var(--space-md);
 }
 
 .ui-app-toolbar__group {
@@ -242,29 +246,43 @@
 /* --- Panel --- */
 
 .ui-app-panel {
-  background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: var(--radius-md);
   display: grid;
-  gap: 0.85rem;
-  padding: var(--space-md);
+  gap: var(--space-md);
+  min-inline-size: 0;
 }
 
 .ui-app-panel__head {
   align-items: flex-start;
   display: flex;
+  flex-wrap: wrap;
   gap: 0.7rem;
   justify-content: space-between;
 }
 
 .ui-app-panel__title {
   color: var(--text);
-  font-family: var(--display);
-  font-size: 0.95rem;
-  font-weight: var(--display-weight);
-  letter-spacing: var(--tracking-wide);
+  font-family: var(--sans);
+  font-size: 1.125rem;
+  font-weight: 650;
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
+}
+
+/* A service overview needs a compact scan, including on a phone. Keep the
+   generic stat tile available elsewhere; avoid framing every metric twice. */
+.ui-app-panel > .ui-statgrid,
+.ui-app-panel > .ui-app-metrics {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
+}
+
+.ui-app-panel > .ui-statgrid > .ui-stat,
+.ui-app-panel > .ui-app-metrics > .ui-app-metric {
+  background: none;
+  border: 0;
+  border-block-start: 1px solid var(--line);
+  border-radius: 0;
+  padding: var(--space-md) 0;
 }
 
 .ui-app-panel__head p {
@@ -285,7 +303,7 @@
    permanent admin-shell alias (grouped on the canonical rules there —
    identical output). Nothing app-specific left to define here. */
 
-/* --- Mobile rail: collapses to a horizontal scrolling strip --- */
+/* --- Mobile rail: navigation wraps instead of hiding destinations offscreen. --- */
 
 @media (max-width: 880px) {
   .ui-app-shell {
@@ -300,10 +318,10 @@
   }
 
   .ui-app-rail {
-    flex-direction: row;
+    flex-flow: row wrap;
     block-size: auto;
-    overflow-x: auto;
-    position: sticky;
+    overflow: visible;
+    position: static;
     inset-block-start: 0;
     z-index: calc(var(--z-raised) + 1);
   }
@@ -321,7 +339,9 @@
   }
 
   .ui-app-nav {
-    grid-auto-flow: column;
+    display: flex;
+    flex: 1 0 100%;
+    flex-wrap: wrap;
     gap: 0.15rem;
   }
 
@@ -330,6 +350,8 @@
   }
 
   .ui-app-nav a {
+    flex: 1 1 auto;
+    justify-content: center;
     border-inline-start: 0;
     border-block-end: 2px solid transparent;
     white-space: nowrap;

package/css/base.css

@@ -1,5 +1,5 @@
 /* ==========================================================================
-   base — reset + element defaults, Nothing-flat
+   base — reset + readable element defaults
    ========================================================================== */
 
 *,
@@ -13,9 +13,8 @@ html {
   color: var(--text);
   font-family: var(--sans);
 
-  /* = 15px at the 16px default, but rem honours a user's browser font-size
-     preference (which a px root would ignore). */
-  font-size: 0.9375rem;
+  /* Preserve the browser's preferred reading size. Compact controls use tokens. */
+  font-size: 1rem;
   line-height: 1.55;
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
@@ -74,27 +73,25 @@ li {
   line-height: 1.65;
 }
 
-/* Headings ride the dot-matrix display face. */
+/* Everyday headings are readable text. .ui-display owns the brand face. */
 h1,
 h2,
 h3,
 h4 {
   color: var(--text);
-  font-family: var(--display);
-  font-weight: 700;
-  letter-spacing: 0.01em;
-  line-height: 1.06;
+  font-family: var(--sans);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
 }
 
 h1 {
-  font-size: clamp(2.6rem, 6vw, 4.6rem);
-  letter-spacing: 0.02em;
+  font-size: clamp(2rem, 4vw, 3rem);
 }
 
 h2 {
-  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
+  font-size: clamp(1.5rem, 3vw, 2rem);
 }
 
 h3 {
@@ -103,7 +100,6 @@ h3 {
 
 h4 {
   font-size: 1rem;
-  letter-spacing: var(--tracking-wide);
 }
 
 strong,

package/css/content.css

@@ -9,6 +9,8 @@
    ========================================================================== */
 
 .ui-prose {
+  /* A prose block must shrink as a grid/flex item; its pre blocks scroll locally. */
+  min-inline-size: 0;
   color: var(--text-soft);
   font-size: var(--text-base);
   line-height: 1.7;
@@ -41,27 +43,27 @@
   max-inline-size: none;
 }
 
-/* --- Headings — brand display face; only the top two shout --- */
+/* --- Headings — readable hierarchy inside narrative content --- */
 
 .ui-prose :is(h1, h2, h3, h4, h5, h6) {
   color: var(--text);
-  font-family: var(--display);
+  font-family: var(--sans);
   line-height: 1.12;
   text-wrap: balance;
 }
 
 .ui-prose h1 {
   font-size: var(--text-xl);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose h2 {
   font-size: var(--text-lg);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding-block-end: 0.3rem;
   border-block-end: 1px solid var(--line);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-prose h3 {
@@ -70,8 +72,8 @@
 
 .ui-prose :is(h4, h5, h6) {
   font-size: var(--text-base);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose :is(h5, h6) {
@@ -185,11 +187,11 @@
 
 .ui-prose dt {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose dd {
@@ -241,10 +243,10 @@
 
 .ui-prose figcaption {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 /* --- Table — raw Markdown tables look like ui-table ---
@@ -262,7 +264,7 @@
   border-collapse: collapse;
   border-radius: var(--radius-md);
   display: block;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   inline-size: 100%;
   overflow-x: auto;
@@ -280,8 +282,8 @@
   color: var(--text-dim);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-prose td {
@@ -316,7 +318,7 @@
 .ui-quote {
   color: var(--text);
   display: grid;
-  font-family: var(--display);
+  font-family: var(--sans);
   font-size: var(--text-xl);
   font-weight: var(--display-weight);
   gap: var(--space-sm);
@@ -335,9 +337,9 @@
 
 .ui-quote__cite {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-style: normal;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }

package/css/disclosure.css

@@ -32,13 +32,13 @@
   cursor: pointer;
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: 0.4rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin-block-end: -1px;
   padding: 0.6rem 0.85rem;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     color var(--duration-fast) var(--ease-standard),
     border-color var(--duration-fast) var(--ease-standard);
@@ -104,13 +104,13 @@
   color: var(--text);
   cursor: pointer;
   display: flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   gap: 0.6rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   list-style: none;
   padding: 0.85rem 0.2rem;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-accordion__summary::-webkit-details-marker {
@@ -192,12 +192,12 @@
   color: var(--text-soft);
   cursor: pointer;
   flex: 1 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.42rem 0.8rem;
   text-align: center;
-  text-transform: uppercase;
+  text-transform: none;
   transition:
     background-color var(--duration-fast) var(--ease-standard),
     color var(--duration-fast) var(--ease-standard);
@@ -233,14 +233,14 @@
   color: var(--text-dim);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   gap: 0.5rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   list-style: none;
   margin: 0;
   padding: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-breadcrumb__item {
@@ -302,7 +302,7 @@
   color: var(--text-soft);
   cursor: pointer;
   display: inline-flex;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   justify-content: center;
   min-block-size: 2rem;
@@ -370,14 +370,14 @@
   color: var(--text);
   display: inline-flex;
   flex: 0 0 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: calc(var(--av-size) * 0.38);
   font-weight: 700;
   block-size: var(--av-size);
   justify-content: center;
   letter-spacing: 0.04em;
   overflow: hidden;
-  text-transform: uppercase;
+  text-transform: none;
   inline-size: var(--av-size);
 }
 
@@ -528,11 +528,11 @@
   background: color-mix(in srgb, var(--panel-strong) 75%, transparent);
   border-radius: var(--radius-pill);
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   inset-block-end: var(--space-xs);
   inset-inline-start: var(--space-xs);
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   padding: 0.2rem 0.5rem;
   position: absolute;
 }

package/css/feedback.css

@@ -50,12 +50,12 @@
 
 .ui-alert__title {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-alert__body {
@@ -67,7 +67,7 @@
   border: 0;
   color: var(--text-dim);
   cursor: pointer;
-  font-family: var(--mono);
+  font-family: var(--sans);
   grid-column: 3;
   grid-row: 1;
   line-height: 1;
@@ -199,12 +199,12 @@
 
 .ui-toast__title {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-toast__close {
@@ -284,7 +284,7 @@
     block-size: auto;
     inline-size: auto;
     margin-block-start: 0;
-    font-family: var(--mono);
+    font-family: var(--sans);
     font-weight: 700;
     line-height: 1.1;
   }
@@ -327,15 +327,15 @@
   border-radius: var(--radius-sm);
   inset-block-end: calc(100% + 0.5rem);
   color: var(--bg);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   inset-inline-start: 50%;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   opacity: 0;
   padding: 0.34rem 0.5rem;
   pointer-events: none;
   position: absolute;
-  text-transform: uppercase;
+  text-transform: none;
   transform: translate(-50%, 4px);
   transition: opacity var(--duration-fast) var(--ease-standard);
   white-space: nowrap;
@@ -540,7 +540,7 @@
 
 .ui-meter__value {
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-variant-numeric: tabular-nums;
   text-align: end;
 }
@@ -575,17 +575,17 @@
   counter-increment: ui-step;
   display: inline-flex;
   flex: 1 1 auto;
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-xs);
   gap: 0.5rem;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
 
   /* Prefer the natural one-line width, but never wider than the container: a
      long step label at `max-content` couldn't shrink and overflowed the page on
      narrow viewports (tabs scroll; steps didn't). Capping at 100% lets an
      over-long label wrap instead of overflowing. */
   min-inline-size: min(100%, max-content);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-steps__item::before {

package/css/forms.css

@@ -9,11 +9,11 @@
 
 .ui-label {
   color: var(--text-dim);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-2xs);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
-  text-transform: uppercase;
+  letter-spacing: 0;
+  text-transform: none;
 }
 
 .ui-input,
@@ -23,7 +23,7 @@
   border: 1px solid var(--line-strong);
   border-radius: var(--radius-md);
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   padding: 0.6rem 0.7rem;
   transition:
@@ -286,6 +286,7 @@
 
 /* --- Range --- */
 .ui-range {
+  margin-inline: 0;
   accent-color: var(--accent);
   inline-size: 100%;
 }
@@ -315,9 +316,9 @@
   font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 700;
-  letter-spacing: var(--tracking-wide);
+  letter-spacing: 0;
   margin: 0 0 var(--space-xs);
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .ui-error-summary__list {
@@ -369,7 +370,7 @@
   background: transparent;
   border: 0;
   color: var(--text);
-  font-family: var(--mono);
+  font-family: var(--sans);
   font-size: var(--text-sm);
   outline: none;
   padding: 0.6rem 0;