@mdbase-dev/ui 0.1.0-beta.125 → 0.1.0-beta.147

package/css/controls.css

@@ -2,13 +2,13 @@
  * Shared controls. Text fields stay native and take Editor's field treatment;
  * Select, menus and the app switcher are the components from ./select,
  * ./popover and ./app-switcher, drawn in Editor's quiet treatment: fine
- * outlines, 2px corners, no shadows. Apps set density with --control-height
- * and --control-font-size; the radius stays the family's.
+ * outlines and token corners. Apps set density with --control-height
+ * and --control-font-size; action hierarchy and focus treatment stay shared.
  */
 :root {
   --control-height: 34px;
-  --control-font-size: 12px;
-  --control-radius: 2px;
+  --control-font-size: var(--font-size-ui);
+  --control-radius: var(--radius-sm);
 }
 
 .mdbase-visually-hidden {
@@ -33,7 +33,7 @@
   background: transparent;
   font: inherit;
   font-size: var(--control-font-size);
-  transition: border-color 150ms ease, background 150ms ease;
+  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-field {
@@ -71,7 +71,8 @@ textarea.mdbase-field {
 .mdbase-field[aria-invalid="true"],
 .mdbase-select[aria-invalid="true"] {
   border-color: var(--color-danger);
-  box-shadow: 0 0 0 1px var(--color-danger-soft);
+  outline: 1px solid var(--color-danger-soft);
+  outline-offset: -1px;
 }
 
 /* Select: the trigger reads as a field; its list opens in the top layer. */
@@ -106,7 +107,7 @@ textarea.mdbase-field {
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
-  transition: transform 150ms ease;
+  transition: transform var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-select[aria-expanded="true"] .mdbase-select-chevron {
@@ -129,16 +130,14 @@ textarea.mdbase-field {
   background: var(--color-surface);
 }
 
-/* Compact: a small uppercase label, for kinds and modes beside a value. */
+/* Compact: a sentence-case label for kinds and modes beside a value. */
 .mdbase-select.is-compact {
   min-height: 20px;
   padding: 0;
   border: 0;
   background: transparent;
   color: var(--color-text-muted);
-  font-family: var(--mono);
-  font-size: 11px;
-  text-transform: uppercase;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-select.is-compact .mdbase-select-chevron {
@@ -165,8 +164,8 @@ textarea.mdbase-field {
 .mdbase-select-group {
   padding: 8px 10px 3px;
   color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 700;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
 }
 
 .mdbase-select-option {
@@ -188,7 +187,8 @@ textarea.mdbase-field {
 }
 
 .mdbase-select-list:focus-visible .mdbase-select-option.is-active {
-  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-accent) 45%, transparent);
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
 }
 
 .mdbase-select-option[aria-selected="true"] {
@@ -235,8 +235,8 @@ textarea.mdbase-field {
 .mdbase-menu-heading {
   padding: 6px 8px 4px;
   color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 700;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
 }
 
 .mdbase-menu-list {
@@ -269,7 +269,8 @@ textarea.mdbase-field {
 /* One focus mark inside the row, instead of an outline around it. */
 .mdbase-menu .mdbase-menu-item:focus-visible {
   outline: 0;
-  box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--color-accent) 70%, transparent);
+  outline: 1px solid var(--color-accent);
+  outline-offset: -1px;
 }
 
 .mdbase-menu-item:disabled {
@@ -298,12 +299,12 @@ textarea.mdbase-field {
 
 .mdbase-menu-copy strong {
   color: var(--color-text);
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
 
 .mdbase-menu-copy small {
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-menu-note {
@@ -311,7 +312,7 @@ textarea.mdbase-field {
   padding: 8px 8px 2px;
   border-top: 1px solid var(--color-border);
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 }
 
 /* The app switcher: the wordmark opens the app menu. */
@@ -328,7 +329,7 @@ textarea.mdbase-field {
   background: transparent;
   font: inherit;
   cursor: pointer;
-  transition: background 150ms ease, border-color 150ms ease;
+  transition: background var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-app-switcher:hover,
@@ -344,7 +345,7 @@ textarea.mdbase-field {
   fill: none;
   stroke: var(--color-text-muted);
   stroke-width: 1.6;
-  transition: transform 150ms ease;
+  transition: transform var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-app-switcher[aria-expanded="true"] .mdbase-app-switcher-chevron {
@@ -374,14 +375,10 @@ textarea.mdbase-field {
   border-radius: var(--control-radius);
   color: var(--color-text-soft);
   background: var(--color-surface);
-  font-family: var(--mono);
-  font-size: 11px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
+  font-size: var(--font-size-caption);
 }
 
-/* Buttons: fine outlines like the fields. A primary action is outlined in the accent
-   rather than filled, so the canvas stays the only large surface. */
+/* One filled committing action; tonal secondary actions and text-led tertiary actions. */
 .mdbase-button {
   min-height: var(--control-height);
   display: inline-flex;
@@ -389,16 +386,16 @@ textarea.mdbase-field {
   justify-content: center;
   gap: 6px;
   padding: 0 12px;
-  border: 1px solid var(--color-border-strong);
+  border: 1px solid transparent;
   border-radius: var(--control-radius);
-  color: var(--color-text-soft);
-  background: transparent;
+  color: var(--color-text);
+  background: var(--color-surface-subtle);
   font: inherit;
   font-size: var(--control-font-size);
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
   white-space: nowrap;
   cursor: pointer;
-  transition: color var(--motion-quick) ease, border-color var(--motion-quick) ease, background var(--motion-quick) ease;
+  transition: color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-button:hover:not(:disabled) {
@@ -409,12 +406,25 @@ textarea.mdbase-field {
 
 .mdbase-button.is-primary {
   border-color: var(--color-accent);
-  color: var(--color-accent);
+  color: var(--color-on-accent);
+  background: var(--color-accent);
 }
 
 .mdbase-button.is-primary:hover:not(:disabled) {
   border-color: var(--color-accent-strong);
-  color: var(--color-accent-strong);
+  color: var(--color-on-accent);
+  background: var(--color-accent-strong);
+}
+
+.mdbase-button.is-tertiary {
+  color: var(--color-text-soft);
+  background: transparent;
+}
+
+.mdbase-button.is-tertiary:hover:not(:disabled) {
+  border-color: transparent;
+  color: var(--color-text);
+  background: var(--color-surface-subtle);
 }
 
 .mdbase-button.is-danger {
@@ -427,8 +437,19 @@ textarea.mdbase-field {
 }
 
 .mdbase-button:disabled {
-  cursor: default;
-  opacity: 0.45;
+  border-color: var(--color-border);
+  color: var(--color-text-muted);
+  background: var(--color-surface-subtle);
+  cursor: not-allowed;
+}
+
+.mdbase-button.is-tertiary:disabled {
+  border-color: transparent;
+  background: transparent;
+}
+
+.mdbase-button:disabled svg {
+  opacity: 0.5;
 }
 
 .mdbase-button svg {
@@ -449,7 +470,7 @@ textarea.mdbase-field {
   color: var(--color-text-soft);
   background: transparent;
   cursor: pointer;
-  transition: color var(--motion-quick) ease, background var(--motion-quick) ease;
+  transition: color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-icon-button:hover:not(:disabled),
@@ -475,6 +496,160 @@ textarea.mdbase-field {
   outline-offset: 2px;
 }
 
+/* Switch: native button semantics (role="switch", aria-checked), one track and thumb. */
+.mdbase-switch {
+  position: relative;
+  width: 36px;
+  height: 22px;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-subtle);
+  cursor: pointer;
+  transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
+}
+
+.mdbase-switch > span {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-text-soft);
+  pointer-events: none;
+  transition: transform var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
+}
+
+.mdbase-switch[aria-checked="true"] {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+}
+
+.mdbase-switch[aria-checked="true"] > span {
+  transform: translateX(14px);
+  background: var(--color-on-accent);
+}
+
+.mdbase-switch:disabled {
+  border-color: var(--color-border);
+  background: var(--color-surface-subtle);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Checkbox: native inputs keep Space, label activation, form state and indeterminate support.
+   Writer's Markdown checkbox button uses the same appearance with aria-checked. */
+.mdbase-checkbox {
+  appearance: none;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-on-accent);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: background var(--motion-quick) var(--ease-out), border-color var(--motion-quick) var(--ease-out);
+}
+
+.mdbase-checkbox:checked,
+.mdbase-checkbox:indeterminate,
+.mdbase-checkbox[aria-checked="true"] {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+}
+
+.mdbase-checkbox:checked::after,
+.mdbase-checkbox[aria-checked="true"]::after {
+  width: 4px;
+  height: 8px;
+  margin-top: -2px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.mdbase-checkbox:indeterminate::after {
+  width: 8px;
+  border-top: 2px solid currentColor;
+  content: "";
+}
+
+.mdbase-checkbox:hover:not(:disabled) {
+  border-color: var(--color-accent);
+}
+
+.mdbase-checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.mdbase-checkbox:focus-visible,
+.mdbase-switch:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Checkbox row: the label is the 44px target; the box keeps its size. */
+.mdbase-check {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: 44px;
+  cursor: pointer;
+}
+
+.mdbase-check:has(.mdbase-checkbox:disabled) {
+  cursor: not-allowed;
+}
+
+.mdbase-check-group {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.mdbase-check-group > legend {
+  margin-bottom: var(--space-2);
+  padding: 0;
+}
+
+@media (pointer: coarse) {
+  /* Expand the hit target, not the visual control or its containing row. */
+  .mdbase-checkbox::before,
+  .mdbase-switch::before {
+    position: absolute;
+    inset: -13px;
+    content: "";
+  }
+}
+
+@media (forced-colors: active) {
+  .mdbase-checkbox,
+  .mdbase-switch {
+    border-color: ButtonText;
+    background: ButtonFace;
+    forced-color-adjust: none;
+  }
+  .mdbase-checkbox:is(:checked, :indeterminate, [aria-checked="true"]),
+  .mdbase-switch[aria-checked="true"] {
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .mdbase-switch > span { background: ButtonText; }
+  .mdbase-switch[aria-checked="true"] > span { background: HighlightText; }
+}
+
 /* Dialogs: a native <dialog> in the top layer, drawn like a popover. */
 .mdbase-dialog {
   width: min(40rem, calc(100vw - 32px));
@@ -516,7 +691,7 @@ textarea.mdbase-field {
 .mdbase-dialog-header h2 {
   margin: 0;
   color: var(--color-text);
-  font-size: 17px;
+  font-size: var(--font-size-prose);
   letter-spacing: -0.01em;
   text-transform: none;
 }
@@ -527,7 +702,7 @@ textarea.mdbase-field {
 }
 
 @keyframes mdbase-popover-in {
-  from { opacity: 0; transform: translateY(-3px); }
+  from { transform: translateY(-3px); }
 }
 
 /* Save notices: small, quiet, and gone once there is nothing to act on. */
@@ -536,8 +711,7 @@ textarea.mdbase-field {
   align-items: center;
   gap: 4px;
   color: var(--color-text-muted);
-  font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   white-space: nowrap;
 }
 
@@ -605,7 +779,10 @@ textarea.mdbase-field {
   .mdbase-select,
   .mdbase-select-chevron,
   .mdbase-app-switcher,
-  .mdbase-app-switcher-chevron {
+  .mdbase-app-switcher-chevron,
+  .mdbase-checkbox,
+  .mdbase-switch,
+  .mdbase-switch > span {
     transition: none;
   }
 }

package/css/feedback.css

@@ -1,56 +1,56 @@
 .mdbase-feedback-app { display: contents; }
 .mdbase-feedback-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
-.mdbase-feedback-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-soft); font: 12px/1.4 var(--sans); cursor: pointer; }
+.mdbase-feedback-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-soft); font: var(--font-size-caption)/1.4 var(--sans); cursor: pointer; }
 .mdbase-feedback-trigger:hover { background: var(--color-selected); color: var(--color-text); }
 .mdbase-feedback-bug { width: 22px; height: 22px; flex-shrink: 0; }
 @keyframes mdbase-feedback-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
 @media (prefers-reduced-motion: no-preference) { .mdbase-feedback-bug.is-wiggling { animation: mdbase-feedback-wiggle 280ms ease-in-out 2; } }
-.mdbase-feedback-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 440px; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--color-border-strong); background: var(--color-canvas); color: var(--color-text); font: 13px/1.5 var(--sans); overflow: hidden; }
+.mdbase-feedback-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 440px; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--color-border-strong); background: var(--color-canvas); color: var(--color-text); font: var(--font-size-ui)/1.5 var(--sans); overflow: hidden; }
 .mdbase-feedback-dialog[open] { display: flex; flex-direction: column; }
 .mdbase-feedback-dialog:not([open]) { display: none; }
 .mdbase-feedback-dialog::backdrop { background: var(--color-scrim); }
 .mdbase-feedback-dialog *, .mdbase-feedback-markup * { box-sizing: border-box; }
 .mdbase-feedback-dialog :is(button,input,textarea), .mdbase-feedback-markup button { font: inherit; }
 .mdbase-feedback-dialog :focus-visible, .mdbase-feedback-markup :focus-visible, .mdbase-feedback-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
-.mdbase-feedback-dialog button, .mdbase-feedback-markup .mdbase-feedback-actions button, .mdbase-feedback-tools button { border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 7px 11px; background: var(--color-canvas); color: var(--color-text); cursor: pointer; }
+.mdbase-feedback-dialog button, .mdbase-feedback-markup .mdbase-feedback-actions button, .mdbase-feedback-tools button { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 7px 11px; background: var(--color-canvas); color: var(--color-text); cursor: pointer; }
 .mdbase-feedback-dialog button:hover, .mdbase-feedback-markup button:hover { background: var(--color-selected); }
 .mdbase-feedback-dialog button:disabled, .mdbase-feedback-markup button:disabled { opacity: .5; cursor: default; }
 .mdbase-feedback-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 27px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
-.mdbase-feedback-header h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.5px; margin: 0; color: var(--color-text); }
-.mdbase-feedback-header button { border: 0; width: 34px; height: 34px; padding: 0; font-size: 23px; color: var(--color-text-muted); }
+.mdbase-feedback-header h2 { font-size: var(--font-size-heading); line-height: 1.25; letter-spacing: -.5px; margin: 0; color: var(--color-text); }
+.mdbase-feedback-header button { border: 0; width: 34px; height: 34px; padding: 0; font-size: var(--font-size-heading); color: var(--color-text-muted); }
 .mdbase-feedback-dialog form { display: flex; flex-direction: column; flex: 1; overflow: hidden; margin: 0; }
 .mdbase-feedback-body { flex: 1; overflow-y: auto; padding: 23px 27px; }
 .mdbase-feedback-topics { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 23px; }
-.mdbase-feedback-topics legend { margin-bottom: 10px; font-size: 12px; font-weight: 700; }
-.mdbase-feedback-topics label { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; cursor: pointer; }
+.mdbase-feedback-topics legend { margin-bottom: 10px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
+.mdbase-feedback-topics label { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--font-size-caption); cursor: pointer; }
 .mdbase-feedback-topics label:has(:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
-.mdbase-feedback-dialog input:is([type=radio],[type=checkbox]) { accent-color: var(--color-accent); margin: 0; width: 14px; height: 14px; flex-shrink: 0; }
-.mdbase-feedback-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-weight: 700; }
-.mdbase-feedback-field small { margin-left: 6px; font-weight: 400; font-size: 11px; color: var(--color-text-muted); }
-.mdbase-feedback-field :is(input,textarea) { width: 100%; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: 4px; color: var(--color-text); padding: 10px 11px; font-weight: 400; }
+.mdbase-feedback-dialog input[type=radio] { accent-color: var(--color-accent); margin: 0; width: 14px; height: 14px; flex-shrink: 0; }
+.mdbase-feedback-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-weight: var(--font-weight-semibold); }
+.mdbase-feedback-field small { margin-left: 6px; font-weight: var(--font-weight-regular); font-size: var(--font-size-caption); color: var(--color-text-muted); }
+.mdbase-feedback-field :is(input,textarea) { width: 100%; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text); padding: 10px 11px; font-weight: var(--font-weight-regular); }
 .mdbase-feedback-field textarea { min-height: 125px; resize: vertical; }
 .mdbase-feedback-field :is(input,textarea)::placeholder { color: var(--color-text-muted); }
 .mdbase-feedback-screenshot { margin: 0 0 20px; }
 .mdbase-feedback-dialog .mdbase-feedback-preview { display: block; position: relative; padding: 0; width: 100%; overflow: hidden; }
 .mdbase-feedback-preview img { display: block; width: 100%; height: 165px; object-fit: contain; }
-.mdbase-feedback-preview span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 4px 8px; font-size: 11px; white-space: nowrap; }
-.mdbase-feedback-screenshot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11px; }
+.mdbase-feedback-preview span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 4px 8px; font-size: var(--font-size-caption); white-space: nowrap; }
+.mdbase-feedback-screenshot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: var(--font-size-caption); }
 .mdbase-feedback-screenshot-actions label { display: flex; align-items: center; gap: 7px; }
 .mdbase-feedback-upload { position: relative; color: var(--color-accent); cursor: pointer; padding: 6px 0; }
 .mdbase-feedback-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
 .mdbase-feedback-upload:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }
-.mdbase-feedback-check { display: flex; gap: 8px; align-items: center; font-size: 12px; }
+.mdbase-feedback-check { display: flex; gap: 8px; align-items: center; font-size: var(--font-size-caption); }
 .mdbase-feedback-details > .mdbase-feedback-check { margin: 14px 0 8px; }
-.mdbase-feedback-help { font-size: 11px; line-height: 1.6; color: var(--color-text-muted); margin: 9px 0; }
-.mdbase-feedback-dialog details { font-size: 11px; color: var(--color-text-soft); margin: 12px 0; }
+.mdbase-feedback-help { font-size: var(--font-size-caption); line-height: 1.6; color: var(--color-text-muted); margin: 9px 0; }
+.mdbase-feedback-dialog details { font-size: var(--font-size-caption); color: var(--color-text-soft); margin: 12px 0; }
 .mdbase-feedback-dialog summary { cursor: pointer; }
-.mdbase-feedback-dialog pre { font: 11px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-subtle); padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; }
-.mdbase-feedback-error { color: var(--color-danger); font-size: 12px; }
+.mdbase-feedback-dialog pre { font: var(--font-size-caption)/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-subtle); padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
+.mdbase-feedback-error { color: var(--color-danger); font-size: var(--font-size-caption); }
 .mdbase-feedback-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--color-border); padding: 18px 27px; flex-shrink: 0; }
 .mdbase-feedback-dialog .mdbase-feedback-primary, .mdbase-feedback-markup .mdbase-feedback-actions .mdbase-feedback-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
 .mdbase-feedback-dialog .mdbase-feedback-primary:hover, .mdbase-feedback-markup .mdbase-feedback-actions .mdbase-feedback-primary:hover { background: var(--color-accent-strong); }
 .mdbase-feedback-success { padding: 40px 27px; }
-.mdbase-feedback-success h3 { font-size: 25px; line-height: 1.3; margin: 0 0 17px; }
+.mdbase-feedback-success h3 { font-size: var(--font-size-heading); line-height: 1.3; margin: 0 0 17px; }
 .mdbase-feedback-success .mdbase-feedback-primary { margin-top: 20px; }
 .mdbase-feedback-markup { width: min(1100px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; }
 .mdbase-feedback-markup .mdbase-dialog-body { max-height: calc(100dvh - 34px); display: flex; flex-direction: column; overflow: hidden; padding: 20px; }
@@ -59,4 +59,4 @@
 .mdbase-feedback-canvas { background: var(--color-surface-subtle); border: 1px solid var(--color-border); padding: 12px; overflow: auto; display: flex; justify-content: center; align-items: center; min-height: 0; }
 .mdbase-feedback-canvas canvas { display: block; max-width: 100%; max-height: calc(100dvh - 345px); width: auto; height: auto; background: white; touch-action: none; cursor: crosshair; }
 .mdbase-feedback-markup .mdbase-feedback-actions { padding: 15px 0 0; }
-@media (max-width: 600px) { .mdbase-feedback-header { padding: 23px; } .mdbase-feedback-body { padding: 20px 23px; } .mdbase-feedback-actions { padding: 16px 23px; } .mdbase-feedback-tools { gap: 4px; } .mdbase-feedback-tools button { font-size: 11px; padding: 6px 8px; } }
+@media (max-width: 600px) { .mdbase-feedback-header { padding: 23px; } .mdbase-feedback-body { padding: 20px 23px; } .mdbase-feedback-actions { padding: 16px 23px; } .mdbase-feedback-tools { gap: 4px; } .mdbase-feedback-tools button { font-size: var(--font-size-caption); padding: 6px 8px; } }

package/css/fonts.css

@@ -1,6 +1,5 @@
-/* Latin subsets of the two mdbase families. Browsers fetch a weight only when text uses it. */
-@import "@fontsource/atkinson-hyperlegible/latin-400.css";
-@import "@fontsource/atkinson-hyperlegible/latin-700.css";
+/* Next provides real intermediate weights (200–800), served locally under font-src 'self'. */
+@import "@fontsource-variable/atkinson-hyperlegible-next/wght.css";
 @import "@fontsource/azeret-mono/latin-400.css";
 @import "@fontsource/azeret-mono/latin-500.css";
 @import "@fontsource/azeret-mono/latin-600.css";

package/css/palette.css

@@ -64,7 +64,7 @@
   color: var(--color-text);
   background: transparent;
   font: inherit;
-  font-size: 15px;
+  font-size: var(--font-size-section);
 }
 
 .mdbase-command-search input::placeholder {
@@ -81,8 +81,8 @@
 .mdbase-command-group {
   padding: 10px 10px 4px;
   color: var(--color-text-muted);
-  font-size: 11px;
-  font-weight: 600;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
 }
 
 .mdbase-command-results > button {
@@ -124,14 +124,14 @@
 
 .mdbase-command-results strong {
   flex: 0 1 auto;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: var(--font-size-ui);
+  font-weight: var(--font-weight-medium);
 }
 
 .mdbase-command-results small {
   flex: 1 1 auto;
   color: var(--color-text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-command-results kbd,
@@ -140,7 +140,7 @@
   border: 1px solid var(--color-border);
   border-radius: var(--control-radius);
   color: var(--color-text-muted);
-  font: 10px/1.2 var(--mono);
+  font: var(--font-size-caption)/1.2 var(--sans);
 }
 
 .mdbase-command-footer kbd {
@@ -149,7 +149,7 @@
 
 .mdbase-command-alternate {
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   white-space: nowrap;
 }
 
@@ -160,13 +160,13 @@
   padding: 8px 14px;
   border-top: 1px solid var(--color-border);
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-command-empty {
   padding: 28px;
   color: var(--color-text-muted);
-  font-size: 13px;
+  font-size: var(--font-size-ui);
   text-align: center;
 }