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

package/css/brand.css

@@ -38,7 +38,7 @@
 }
 
 .mdbase-mark .mdbase-mark-progress-fill {
-  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: width var(--motion-slow) var(--ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -53,8 +53,8 @@
   gap: 8px;
   color: var(--color-text);
   font-family: var(--mono);
-  font-size: 12px;
-  font-weight: 500;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   letter-spacing: -0.02em;
 }
@@ -72,19 +72,19 @@
   gap: 0.65ch;
   white-space: nowrap;
   transition:
-    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
-    display 140ms allow-discrete;
+    opacity var(--motion-quick) var(--ease-out),
+    transform var(--motion-quick) var(--ease-out),
+    display var(--motion-quick) allow-discrete;
 }
 
 .wordmark strong {
   display: inline-block;
   color: var(--color-text-muted);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
   transition:
-    opacity 140ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
-    display 140ms allow-discrete;
+    opacity var(--motion-quick) var(--ease-out),
+    transform var(--motion-quick) var(--ease-out),
+    display var(--motion-quick) allow-discrete;
 }
 
 @starting-style {

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,135 @@ 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;
+}
+
+@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 +666,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;
 }
@@ -536,8 +686,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 +754,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;
 }
 

package/css/screens.css

@@ -25,13 +25,13 @@
 
 .mdbase-opening-message p {
   max-width: 44ch;
-  font-size: 13px;
+  font-size: var(--font-size-ui);
 }
 
 .mdbase-opening-message small {
   margin-top: 4px;
   color: var(--color-text-muted);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-opening[data-loading-state="failed"] .mdbase-opening-message p {
@@ -55,8 +55,8 @@
 .mdbase-connect-screen h1 {
   margin: 44px 0 22px;
   color: var(--color-text);
-  font-size: 48px;
-  font-weight: 700;
+  font-size: var(--font-size-title);
+  font-weight: var(--font-weight-semibold);
   line-height: 0.98;
   letter-spacing: -0.045em;
 }
@@ -65,14 +65,14 @@
   max-width: 34ch;
   margin: 0;
   color: var(--color-text-soft);
-  font-size: 17px;
+  font-size: var(--font-size-prose);
   line-height: 1.55;
 }
 
 .mdbase-connect-status {
   margin: 14px 0 0;
   color: var(--color-text-muted);
-  font-size: 13px;
+  font-size: var(--font-size-ui);
 }
 
 /* The one strong action on the screen. */
@@ -88,10 +88,10 @@
   color: var(--color-text);
   background: var(--color-surface);
   font: inherit;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--font-size-ui);
+  font-weight: var(--font-weight-semibold);
   cursor: pointer;
-  transition: border-color var(--motion-quick) ease, background var(--motion-quick) ease;
+  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-connect-action:hover:not(:disabled) {
@@ -113,28 +113,28 @@
   max-width: 47ch;
   margin: 18px 0 0;
   color: var(--color-text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
   line-height: 1.55;
 }
 
 .mdbase-connect-error {
   margin: 18px 0 0;
   color: var(--color-danger);
-  font-size: 13px;
+  font-size: var(--font-size-ui);
   line-height: 1.45;
 }
 
 .mdbase-connect-detail {
   margin-top: 10px;
   color: var(--color-text-muted);
-  font-size: 12px;
+  font-size: var(--font-size-caption);
 }
 
 .mdbase-connect-detail code {
   display: block;
   margin-top: 6px;
   font-family: var(--mono);
-  font-size: 11px;
+  font-size: var(--font-size-caption);
   overflow-wrap: anywhere;
 }
 
@@ -150,6 +150,6 @@
 
   .mdbase-connect-screen h1 {
     margin-top: 48px;
-    font-size: 43px;
+    font-size: var(--font-size-title);
   }
 }

package/css/tokens.css

@@ -44,16 +44,56 @@
   --app-editor: #005c88;
   --app-reader: #a4467f;
   --app-writer: #d55e00;
-  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sans: "Atkinson Hyperlegible Next Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  /* Motion: popovers and small entrances are quick and ease out; a settled
-     confirmation holds, then fades away (see controls.css). */
+  /* Six steps: captions, UI chrome, section titles, prose, headings, document titles. */
+  --font-size-caption: 12px;
+  --font-size-ui: 13px;
+  --font-size-section: 15px;
+  --font-size-prose: 17px;
+  --font-size-heading: 24px;
+  --font-size-title: 34px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --elevation-low: 0 4px 12px var(--color-shadow);
+  --elevation-high: 0 12px 32px var(--color-shadow);
+  --space-0: 0;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  /* Transitions share durations and easing; settled confirmations hold then fade. */
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-fast: 120ms;
   --motion-quick: 150ms;
   --motion-base: 180ms;
+  --motion-slow: 240ms;
+  --motion-spin: 700ms;
+  --motion-pulse: 1.1s;
   --motion-settle: 2.4s;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-fast: 0ms;
+    --motion-quick: 0ms;
+    --motion-base: 0ms;
+    --motion-slow: 0ms;
+    --motion-spin: 0ms;
+    --motion-pulse: 0ms;
+  }
+}
+
 :root[data-theme="dark"] {
   color-scheme: dark;
   --color-canvas: oklch(17.5% 0.012 255);

package/dist/Feedback.js

@@ -242,6 +242,6 @@ export function FeedbackProvider({ endpoint: configuredEndpoint, application, tu
         }
     }
     const config = feedbackTopics[topic];
-    return _jsxs(FeedbackContext.Provider, { value: controls, children: [_jsx("div", { className: "mdbase-feedback-app", ref: content, children: children }), _jsx("span", { className: "mdbase-feedback-sr-only", role: "status", children: wiggle ? "A problem occurred. You can use Send feedback to report it." : "" }), endpoint && _jsxs("dialog", { ref: dialog, className: "mdbase-feedback-dialog", "aria-labelledby": `${id}-title`, onKeyDown: (event) => event.stopPropagation(), onCancel: (event) => { event.preventDefault(); close(); }, children: [_jsxs("header", { className: "mdbase-feedback-header", children: [_jsx("h2", { id: `${id}-title`, children: "Send feedback" }), _jsx("button", { type: "button", disabled: submitting, onClick: close, "aria-label": "Close feedback", children: "\u00D7" })] }), submitted ? _jsxs("section", { className: "mdbase-feedback-success", children: [_jsx("h3", { ref: successHeading, tabIndex: -1, children: feedbackTopics[submitted].thanks }), _jsx("p", { children: "Sent privately to the mdbase team." }), _jsx("button", { type: "button", className: "mdbase-feedback-primary", onClick: close, children: "Back to your work" })] }) : _jsxs("form", { onSubmit: (event) => { event.preventDefault(); void submit(); }, children: [_jsxs("div", { className: "mdbase-feedback-body", ref: body, children: [_jsxs("fieldset", { className: "mdbase-feedback-topics", disabled: submitting, children: [_jsx("legend", { className: "mdbase-feedback-sr-only", children: "Feedback type" }), Object.keys(feedbackTopics).map((value) => _jsxs("label", { children: [_jsx("input", { type: "radio", name: `${id}-topic`, checked: topic === value, onChange: () => setTopic(value) }), feedbackTopics[value].label] }, value))] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsx("span", { children: config.prompt }), _jsx("textarea", { ref: messageField, required: true, maxLength: FEEDBACK_MAX_MESSAGE_LENGTH, rows: 5, placeholder: config.placeholder, value: message, disabled: submitting, onChange: (event) => setMessage(event.target.value) })] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsxs("span", { children: ["Reply email ", _jsx("small", { children: "Optional" })] }), _jsx("input", { type: "email", maxLength: 320, autoComplete: "email", placeholder: "you@example.com", value: replyEmail, disabled: submitting, onChange: (event) => setReplyEmail(event.target.value) })] }), _jsxs("div", { className: "mdbase-feedback-screenshot", role: "group", "aria-label": "Screenshot", children: [screenshot && _jsxs(_Fragment, { children: [_jsxs("button", { className: "mdbase-feedback-preview", type: "button", disabled: imageBusy || submitting, onClick: () => { setIncludeScreenshot(false); setMarkup(true); }, "aria-label": "Mark up screenshot", children: [_jsx("img", { src: screenshotUrl(screenshot), alt: "Screenshot attached to your feedback" }), _jsx("span", { children: "Mark up screenshot" })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: includeScreenshot, disabled: submitting, onChange: (event) => setIncludeScreenshot(event.target.checked) }), "Include screenshot"] }), _jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => { setScreenshot(null); setScreenshotError(""); setCaptureStatus(""); }, children: "Remove" })] })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => void capture(), children: capturing ? "Taking screenshot…" : screenshot ? "Retake screenshot" : "Attach screenshot" }), _jsxs("label", { className: "mdbase-feedback-upload", children: [_jsx("span", { children: "Choose an image" }), _jsx("input", { type: "file", accept: "image/png,image/jpeg", disabled: imageBusy || submitting, onChange: (event) => { const file = event.target.files?.[0]; event.target.value = ""; if (file)
-                                                                    void upload(file); } })] })] }), screenshot && _jsx("p", { className: "mdbase-feedback-help", children: "Review for private information before sending." }), captureStatus && _jsx("p", { className: "mdbase-feedback-help", role: "status", children: captureStatus }), screenshotError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: screenshotError })] }), _jsxs("details", { className: "mdbase-feedback-details", children: [_jsx("summary", { children: "What gets sent" }), _jsx("p", { className: "mdbase-feedback-help", children: "Your message, any reply email and included screenshot, plus these app and build details." }), _jsx("pre", { children: JSON.stringify(application, null, 2) }), collectionName && _jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { type: "checkbox", checked: includeCollection, disabled: submitting, onChange: (event) => setIncludeCollection(event.target.checked) }), "Include collection name: ", collectionName] }), topic === "problem" && _jsxs(_Fragment, { children: [_jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { type: "checkbox", checked: includeDiagnostics, disabled: submitting, onChange: (event) => setIncludeDiagnostics(event.target.checked) }), "Include technical diagnostics"] }), _jsx("p", { className: "mdbase-feedback-help", children: "Browser, OS, viewport and recent error codes. No note contents, paths or credentials." }), includeDiagnostics && _jsx("pre", { children: JSON.stringify(diagnostics, null, 2) })] }), _jsx("p", { className: "mdbase-feedback-help", children: "Images: PNG or JPEG, up to 3 MB. Blackout replaces pixels; only the final image is attached." }), _jsx("p", { className: "mdbase-feedback-help", children: "Replies aren\u2019t guaranteed. Not for security reports or urgent support." })] }), turnstileSiteKey && open && !capturing && _jsx(FeedbackVerification, { siteKey: turnstileSiteKey, onToken: setTurnstileToken }, verificationAttempt), submitError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: submitError }), _jsx("p", { className: "mdbase-feedback-help", children: "Private feedback to the mdbase team." })] }), _jsxs("footer", { className: "mdbase-feedback-actions", children: [_jsx("button", { type: "button", disabled: submitting, onClick: close, children: "Cancel" }), _jsx("button", { type: "submit", className: "mdbase-feedback-primary", disabled: submitting || imageBusy || !message.trim() || Boolean(turnstileSiteKey && !turnstileToken), children: submitting ? "Sending…" : "Send feedback" })] })] })] }), markup && screenshot && _jsx(FeedbackMarkup, { screenshot: screenshot, onClose: () => { setMarkup(false); setCaptureStatus("Markup discarded. Screenshot excluded."); }, onApply: (next) => { setScreenshot(next); setIncludeScreenshot(true); setMarkup(false); setCaptureStatus("Markup applied."); } })] });
+    return _jsxs(FeedbackContext.Provider, { value: controls, children: [_jsx("div", { className: "mdbase-feedback-app", ref: content, children: children }), _jsx("span", { className: "mdbase-feedback-sr-only", role: "status", children: wiggle ? "A problem occurred. You can use Send feedback to report it." : "" }), endpoint && _jsxs("dialog", { ref: dialog, className: "mdbase-feedback-dialog", "aria-labelledby": `${id}-title`, onKeyDown: (event) => event.stopPropagation(), onCancel: (event) => { event.preventDefault(); close(); }, children: [_jsxs("header", { className: "mdbase-feedback-header", children: [_jsx("h2", { id: `${id}-title`, children: "Send feedback" }), _jsx("button", { type: "button", disabled: submitting, onClick: close, "aria-label": "Close feedback", children: "\u00D7" })] }), submitted ? _jsxs("section", { className: "mdbase-feedback-success", children: [_jsx("h3", { ref: successHeading, tabIndex: -1, children: feedbackTopics[submitted].thanks }), _jsx("p", { children: "Sent privately to the mdbase team." }), _jsx("button", { type: "button", className: "mdbase-feedback-primary", onClick: close, children: "Back to your work" })] }) : _jsxs("form", { onSubmit: (event) => { event.preventDefault(); void submit(); }, children: [_jsxs("div", { className: "mdbase-feedback-body", ref: body, children: [_jsxs("fieldset", { className: "mdbase-feedback-topics", disabled: submitting, children: [_jsx("legend", { className: "mdbase-feedback-sr-only", children: "Feedback type" }), Object.keys(feedbackTopics).map((value) => _jsxs("label", { children: [_jsx("input", { type: "radio", name: `${id}-topic`, checked: topic === value, onChange: () => setTopic(value) }), feedbackTopics[value].label] }, value))] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsx("span", { children: config.prompt }), _jsx("textarea", { ref: messageField, required: true, maxLength: FEEDBACK_MAX_MESSAGE_LENGTH, rows: 5, placeholder: config.placeholder, value: message, disabled: submitting, onChange: (event) => setMessage(event.target.value) })] }), _jsxs("label", { className: "mdbase-feedback-field", children: [_jsxs("span", { children: ["Reply email ", _jsx("small", { children: "Optional" })] }), _jsx("input", { type: "email", maxLength: 320, autoComplete: "email", placeholder: "you@example.com", value: replyEmail, disabled: submitting, onChange: (event) => setReplyEmail(event.target.value) })] }), _jsxs("div", { className: "mdbase-feedback-screenshot", role: "group", "aria-label": "Screenshot", children: [screenshot && _jsxs(_Fragment, { children: [_jsxs("button", { className: "mdbase-feedback-preview", type: "button", disabled: imageBusy || submitting, onClick: () => { setIncludeScreenshot(false); setMarkup(true); }, "aria-label": "Mark up screenshot", children: [_jsx("img", { src: screenshotUrl(screenshot), alt: "Screenshot attached to your feedback" }), _jsx("span", { children: "Mark up screenshot" })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsxs("label", { children: [_jsx("input", { className: "mdbase-checkbox", type: "checkbox", checked: includeScreenshot, disabled: submitting, onChange: (event) => setIncludeScreenshot(event.target.checked) }), "Include screenshot"] }), _jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => { setScreenshot(null); setScreenshotError(""); setCaptureStatus(""); }, children: "Remove" })] })] }), _jsxs("div", { className: "mdbase-feedback-screenshot-actions", children: [_jsx("button", { type: "button", disabled: imageBusy || submitting, onClick: () => void capture(), children: capturing ? "Taking screenshot…" : screenshot ? "Retake screenshot" : "Attach screenshot" }), _jsxs("label", { className: "mdbase-feedback-upload", children: [_jsx("span", { children: "Choose an image" }), _jsx("input", { type: "file", accept: "image/png,image/jpeg", disabled: imageBusy || submitting, onChange: (event) => { const file = event.target.files?.[0]; event.target.value = ""; if (file)
+                                                                    void upload(file); } })] })] }), screenshot && _jsx("p", { className: "mdbase-feedback-help", children: "Review for private information before sending." }), captureStatus && _jsx("p", { className: "mdbase-feedback-help", role: "status", children: captureStatus }), screenshotError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: screenshotError })] }), _jsxs("details", { className: "mdbase-feedback-details", children: [_jsx("summary", { children: "What gets sent" }), _jsx("p", { className: "mdbase-feedback-help", children: "Your message, any reply email and included screenshot, plus these app and build details." }), _jsx("pre", { children: JSON.stringify(application, null, 2) }), collectionName && _jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { className: "mdbase-checkbox", type: "checkbox", checked: includeCollection, disabled: submitting, onChange: (event) => setIncludeCollection(event.target.checked) }), "Include collection name: ", collectionName] }), topic === "problem" && _jsxs(_Fragment, { children: [_jsxs("label", { className: "mdbase-feedback-check", children: [_jsx("input", { className: "mdbase-checkbox", type: "checkbox", checked: includeDiagnostics, disabled: submitting, onChange: (event) => setIncludeDiagnostics(event.target.checked) }), "Include technical diagnostics"] }), _jsx("p", { className: "mdbase-feedback-help", children: "Browser, OS, viewport and recent error codes. No note contents, paths or credentials." }), includeDiagnostics && _jsx("pre", { children: JSON.stringify(diagnostics, null, 2) })] }), _jsx("p", { className: "mdbase-feedback-help", children: "Images: PNG or JPEG, up to 3 MB. Blackout replaces pixels; only the final image is attached." }), _jsx("p", { className: "mdbase-feedback-help", children: "Replies aren\u2019t guaranteed. Not for security reports or urgent support." })] }), turnstileSiteKey && open && !capturing && _jsx(FeedbackVerification, { siteKey: turnstileSiteKey, onToken: setTurnstileToken }, verificationAttempt), submitError && _jsx("p", { className: "mdbase-feedback-error", role: "alert", children: submitError }), _jsx("p", { className: "mdbase-feedback-help", children: "Private feedback to the mdbase team." })] }), _jsxs("footer", { className: "mdbase-feedback-actions", children: [_jsx("button", { type: "button", disabled: submitting, onClick: close, children: "Cancel" }), _jsx("button", { type: "submit", className: "mdbase-feedback-primary", disabled: submitting || imageBusy || !message.trim() || Boolean(turnstileSiteKey && !turnstileToken), children: submitting ? "Sending…" : "Send feedback" })] })] })] }), markup && screenshot && _jsx(FeedbackMarkup, { screenshot: screenshot, onClose: () => { setMarkup(false); setCaptureStatus("Markup discarded. Screenshot excluded."); }, onApply: (next) => { setScreenshot(next); setIncludeScreenshot(true); setMarkup(false); setCaptureStatus("Markup applied."); } })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdbase-dev/ui",
-  "version": "0.1.0-beta.125",
+  "version": "0.1.0-beta.126",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -93,7 +93,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@fontsource/atkinson-hyperlegible": "^5.3.0",
+    "@fontsource-variable/atkinson-hyperlegible-next": "^5.3.0",
     "@fontsource/azeret-mono": "^5.3.0"
   },
   "peerDependencies": {
@@ -107,7 +107,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^7.0.2",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "peerDependenciesMeta": {
     "@codemirror/view": {