@surflane/ui 0.4.0 → 0.5.0

package/src/styles.css

@@ -24,7 +24,9 @@
     border-radius: var(--control-radius);
     background: var(--control-background);
     color: var(--ink);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     outline: none;
     transition:
       background-color var(--duration-fast) var(--ease-out),
@@ -48,8 +50,7 @@
   .pui-select-trigger:focus-visible {
     background: var(--control-focus-background);
     border-color: var(--control-focus);
-    box-shadow: 0 0 0 3px
-      color-mix(in oklch, var(--control-focus) 18%, transparent);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
   }
   .pui-input:disabled,
   .pui-select-trigger:disabled {
@@ -113,7 +114,9 @@
     background: var(--menu-background);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     outline: none;
   }
   .pui-tooltip-positioner {
@@ -133,7 +136,11 @@
     align-items: center;
     gap: var(--space-2);
     min-height: var(--control-height);
-    padding: 6px var(--space-3) 6px 32px;
+    padding: max(var(--space-1), calc((var(--control-height) - 1lh) / 2))
+      var(--space-3);
+    padding-inline-start: calc(
+      var(--space-3) + var(--icon-size-sm) + var(--space-2)
+    );
     border-radius: var(--control-radius);
     cursor: default;
     outline: none;
@@ -143,21 +150,47 @@
     background: var(--menu-hover-background);
   }
   .pui-select-item[data-selected] {
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-select-item[data-disabled] {
     opacity: var(--control-disabled-opacity);
   }
   .pui-select-check {
     position: absolute;
-    left: 10px;
+    inset-inline-start: var(--space-3);
     display: flex;
+    width: var(--icon-size-sm);
   }
+  /* A popover fits its content up to its width, so long text wraps at a readable
+     measure instead of the viewport. */
   .pui-popover {
+    --popover-width: var(--size-popover-default);
+    width: max-content;
+    max-width: min(var(--popover-width), calc(100vw - var(--space-6)));
     padding: var(--space-4);
     max-height: var(--available-height);
     overflow: auto;
   }
+  .pui-popover[data-size='small'] {
+    --popover-width: var(--size-popover-small);
+  }
+  .pui-popover[data-size='large'] {
+    --popover-width: var(--size-popover-large);
+  }
+  .pui-popover-title {
+    margin: 0 0 var(--space-2);
+    color: var(--ink);
+    font: var(--weight-medium) var(--type-subsection-size) /
+      var(--type-subsection-leading) var(--font-body);
+    letter-spacing: var(--type-subsection-tracking);
+  }
+  .pui-popover-description {
+    margin: 0 0 var(--space-4);
+    color: var(--ink-body);
+  }
+  .pui-popover-description:last-child {
+    margin-bottom: 0;
+  }
   .pui-menu {
     padding: var(--space-1);
     min-width: 176px;
@@ -166,10 +199,11 @@
     border: 0;
     background: var(--tooltip-background);
     color: var(--tooltip-foreground);
-    padding: 8px 12px;
+    padding: var(--space-2) var(--space-3);
     max-width: 256px;
-    font-size: 12px;
-    line-height: 18px;
+    font-size: var(--type-caption-size);
+    letter-spacing: var(--type-caption-tracking);
+    line-height: var(--type-caption-leading);
   }
   .pui-button {
     box-sizing: border-box;
@@ -179,10 +213,12 @@
     justify-content: center;
     gap: var(--space-2);
     min-height: var(--control-height);
-    padding: 0 14px;
+    padding: 0 var(--size-button-padding-default);
     border: 1px solid transparent;
     border-radius: var(--radius-full);
-    font: 500 14px/20px var(--font-body);
+    font: var(--weight-medium) var(--type-label-size)/var(--type-label-leading)
+      var(--font-body);
+    letter-spacing: var(--type-label-tracking);
     color: var(--ink);
     background: var(--canvas);
     /* A link rendered as a button drops the user-agent underline. */
@@ -217,8 +253,8 @@
     text-decoration-thickness: 2px;
   }
   .pui-button:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-button:is(:disabled, [data-disabled], [aria-disabled='true']) {
     opacity: var(--control-disabled-opacity);
@@ -375,17 +411,19 @@
   .pui-button[data-size='xs'] {
     height: 24px;
     min-height: 24px;
-    padding-inline: 8px;
-    font-size: 12px;
-    gap: 4px;
+    padding-inline: var(--space-2);
+    font-size: var(--type-caption-size);
+    letter-spacing: var(--type-caption-tracking);
+    gap: var(--space-1);
   }
   .pui-button[data-size^='icon'] {
     width: var(--control-height);
     padding: 0;
   }
-  @media (max-width: 760px) {
+  /* Touch targets grow on narrow screens and on touch, as --control-height does. */
+  @media (max-width: 760px), (pointer: coarse) {
     .pui-button {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
   }
 
@@ -432,9 +470,12 @@
     inset: 0;
     z-index: 1;
     display: flex;
-    padding: 12px;
+    padding: var(--space-3);
     pointer-events: none;
   }
+  .pui-panel-viewport[data-flush] {
+    padding: 0;
+  }
   .pui-panel-viewport[data-side='right'] {
     justify-content: flex-end;
   }
@@ -450,7 +491,7 @@
     justify-content: center;
   }
   .pui-panel {
-    --panel-width: 440px;
+    --panel-width: var(--size-panel-default);
     --panel-enter-x: 0px;
     --panel-enter-y: 0px;
     position: relative;
@@ -466,7 +507,9 @@
     border-radius: var(--radius-sheet);
     box-shadow: var(--shadow-float);
     outline: none;
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     transform: translate(
       var(--drawer-swipe-movement-x, 0px),
       calc(
@@ -476,11 +519,11 @@
     );
     transition: transform var(--duration-base) var(--ease-out);
   }
-  .pui-panel[data-size='sm'] {
-    --panel-width: 320px;
+  .pui-panel[data-size='small'] {
+    --panel-width: var(--size-panel-small);
   }
-  .pui-panel[data-size='lg'] {
-    --panel-width: 640px;
+  .pui-panel[data-size='large'] {
+    --panel-width: var(--size-panel-large);
   }
   .pui-panel[data-side='right'] {
     --panel-enter-x: calc(100% + 12px);
@@ -498,6 +541,23 @@
     --panel-enter-y: calc(100% + 12px);
     max-height: min(85dvh, 100%);
   }
+  /* A flush panel squares the corners on the edge it is attached to. */
+  .pui-panel[data-flush][data-side='bottom'] {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .pui-panel[data-flush][data-side='top'] {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .pui-panel[data-flush][data-side='right'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .pui-panel[data-flush][data-side='left'] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .pui-panel[data-starting-style],
   .pui-panel[data-ending-style] {
     transform: translate(var(--panel-enter-x), var(--panel-enter-y));
@@ -514,23 +574,28 @@
   }
   .pui-panel-header {
     flex: none;
-    padding: 24px 68px 20px 24px;
+    padding-block: var(--space-6) var(--space-5);
+    padding-inline: var(--space-6)
+      calc(var(--control-height) + var(--space-4) * 2);
   }
   .pui-panel-title {
     margin: 0;
-    font: 500 22px/28px var(--font-display);
-    letter-spacing: var(--tracking);
+    font: var(--weight-medium)
+      var(--type-section-size)/var(--type-section-leading) var(--font-display);
+    letter-spacing: var(--type-section-tracking);
   }
   .pui-panel-description {
-    margin: 8px 0 0;
+    margin: var(--space-2) 0 0;
     color: var(--ink-body);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
   }
   .pui-panel-body {
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: 0 24px 24px;
+    padding: 0 var(--space-6) var(--space-6);
     overscroll-behavior: contain;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
@@ -552,20 +617,21 @@
     justify-content: flex-end;
     flex-wrap: wrap;
     gap: var(--space-2);
-    padding: 16px 24px max(20px, env(safe-area-inset-bottom));
+    padding: var(--space-4) var(--space-6)
+      max(var(--space-5), env(safe-area-inset-bottom));
     background: var(--surface);
   }
   .pui-panel-close {
     position: absolute;
-    top: 16px;
-    right: 16px;
+    inset-block-start: var(--space-4);
+    inset-inline-end: var(--space-4);
     z-index: 1;
   }
   .pui-drawer-handle {
     flex: none;
     width: 36px;
     height: 4px;
-    margin: 10px auto 0;
+    margin: var(--space-3) auto 0;
     border-radius: var(--radius-full);
     background: var(--line);
   }
@@ -594,8 +660,8 @@
 
   .pui-dialog-close {
     position: absolute;
-    top: 16px;
-    right: 16px;
+    inset-block-start: var(--space-4);
+    inset-inline-end: var(--space-4);
     z-index: 1;
   }
 
@@ -604,7 +670,8 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    width: min(640px, calc(100% - 32px));
+    --dialog-width: var(--size-dialog-default);
+    width: min(var(--dialog-width), calc(100% - var(--space-4) * 2));
     max-height: calc(100dvh - 32px);
     overflow: hidden;
     scrollbar-gutter: auto;
@@ -614,7 +681,9 @@
     background: var(--canvas);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
   }
   .pui-dialog-header,
   .pui-dialog-body,
@@ -628,22 +697,26 @@
     align-self: stretch;
   }
   .pui-dialog-header {
-    padding: 24px 72px 20px 24px;
+    padding-block: var(--space-6) var(--space-5);
+    padding-inline: var(--space-6)
+      calc(var(--control-height) + var(--space-4) * 2);
     border-bottom: 1px solid var(--line);
   }
   .pui-dialog-header h2 {
     margin: 0;
-    font: 500 22px/28px var(--font-display);
+    font: var(--weight-medium)
+      var(--type-section-size)/var(--type-section-leading) var(--font-display);
+    letter-spacing: var(--type-section-tracking);
   }
   .pui-dialog-header p {
-    margin: 8px 0 0;
+    margin: var(--space-2) 0 0;
     color: var(--ink-body);
   }
   .pui-dialog-body {
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: 24px;
+    padding: var(--space-6);
     overscroll-behavior: contain;
     scrollbar-width: thin;
     scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
@@ -664,7 +737,7 @@
     justify-content: flex-end;
     flex-wrap: wrap;
     gap: var(--space-2);
-    padding: 20px 24px;
+    padding: var(--space-5) var(--space-6);
     border-top: 1px solid var(--line);
   }
   .pui-dialog-close:disabled {
@@ -673,15 +746,24 @@
   }
 
   .pui-confirm-content {
-    width: min(420px, calc(100% - 32px));
+    --dialog-width: var(--size-dialog-small);
+  }
+  .pui-dialog-content[data-size='small'] {
+    --dialog-width: var(--size-dialog-small);
+  }
+  .pui-dialog-content[data-size='default'] {
+    --dialog-width: var(--size-dialog-default);
+  }
+  .pui-dialog-content[data-size='large'] {
+    --dialog-width: var(--size-dialog-large);
   }
   .pui-confirm-content .pui-dialog-header {
-    padding-inline-end: 24px;
+    padding-inline-end: var(--space-6);
     border-bottom: 0;
   }
   .pui-confirm-content .pui-dialog-footer {
     border-top: 0;
-    padding-top: 8px;
+    padding-top: var(--space-2);
   }
 
   /* Form and selection primitives: semantic labels, consistent control states. */
@@ -701,13 +783,14 @@
     display: block;
     margin: 0;
     color: var(--ink);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
   }
   .pui-field-description,
   .pui-field-error {
     margin: 0;
-    font: 400 var(--type-caption-size)/var(--type-caption-leading)
-      var(--font-body);
+    font: var(--weight-regular)
+      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
     overflow-wrap: anywhere;
   }
   .pui-field-description {
@@ -729,7 +812,8 @@
     padding: 0;
     margin-bottom: var(--space-4);
     color: var(--ink);
-    font: 500 var(--type-subsection-size)/var(--type-subsection-leading)
+    font: var(--weight-medium)
+      var(--type-subsection-size)/var(--type-subsection-leading)
       var(--font-body);
   }
   .pui-field-item {
@@ -833,8 +917,8 @@
   .pui-checkbox:focus-visible,
   .pui-radio:focus-visible,
   .pui-switch:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 3px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-checkbox[data-disabled],
   .pui-radio[data-disabled],
@@ -878,7 +962,9 @@
   .pui-switch {
     width: var(--control-switch-width);
     height: var(--control-switch-height);
-    padding: 3px;
+    padding: calc(
+      (var(--control-switch-height) - var(--control-switch-thumb)) / 2 - 1px
+    );
     border-radius: var(--radius-full);
     justify-content: flex-start;
   }
@@ -895,14 +981,12 @@
   .pui-switch[data-checked] .pui-switch-thumb {
     background: var(--on-brand);
     transform: translateX(
-      calc(var(--control-switch-width) - var(--control-switch-thumb) - 8px)
+      calc(var(--control-switch-width) - var(--control-switch-height))
     );
   }
   .pui-switch:dir(rtl)[data-checked] .pui-switch-thumb {
     transform: translateX(
-      calc(
-        -1 * (var(--control-switch-width) - var(--control-switch-thumb) - 8px)
-      )
+      calc(var(--control-switch-height) - var(--control-switch-width))
     );
   }
   @media (prefers-reduced-motion: reduce) {
@@ -945,7 +1029,8 @@
     max-width: 100%;
     cursor: pointer;
     color: var(--ink-body);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
   }
   .pui-choice-label:has([data-disabled]) {
     cursor: not-allowed;
@@ -954,6 +1039,29 @@
     min-width: 0;
     overflow-wrap: anywhere;
   }
+  /* ChoiceLabel: the control holds one line, so it centers on the first line of the text
+     whether or not a description follows. */
+  .pui-choice-label:has(> .pui-choice-text > .pui-choice-description) {
+    align-items: flex-start;
+  }
+  .pui-choice-control {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    min-block-size: 1lh;
+  }
+  .pui-choice-text {
+    display: grid;
+    gap: var(--space-1);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .pui-choice-description {
+    color: var(--ink-muted);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
 
   .pui-choice-label:has([data-readonly]) {
     cursor: default;
@@ -987,7 +1095,8 @@
     padding: 0 var(--space-3);
     background: transparent;
     color: var(--ink-muted);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     cursor: pointer;
     white-space: nowrap;
     outline: none;
@@ -1002,11 +1111,11 @@
   .pui-tabs-tab[data-active] {
     background: var(--canvas);
     color: var(--ink);
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-tabs-tab:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: -3px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-tabs-tab:is(:disabled, [data-disabled]) {
     opacity: var(--control-disabled-opacity);
@@ -1019,8 +1128,8 @@
     overflow-wrap: anywhere;
   }
   .pui-tabs-panel:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 3px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
     border-radius: var(--radius-md);
   }
   .pui-tabs-indicator {
@@ -1084,7 +1193,8 @@
     border-radius: var(--radius-md);
     background: transparent;
     color: var(--ink);
-    font: 500 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-medium) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     text-align: start;
     cursor: pointer;
     outline: none;
@@ -1100,8 +1210,8 @@
     background: var(--interaction-active-bg);
   }
   .pui-disclosure-trigger:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: -2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-disclosure-trigger:disabled {
     opacity: var(--control-disabled-opacity);
@@ -1109,16 +1219,15 @@
   }
   .pui-disclosure-chevron {
     flex: none;
-    transition: transform var(--duration-fast) var(--ease-out);
+    transition: rotate var(--duration-fast) var(--ease-out);
   }
+  /* The chevron mirrors itself in right-to-left text, so it turns the other way to
+     point down when open. */
   .pui-disclosure-trigger[data-panel-open] > .pui-disclosure-chevron {
-    transform: rotate(90deg);
-  }
-  .pui-disclosure-trigger:dir(rtl) > .pui-disclosure-chevron {
-    transform: rotate(180deg);
+    rotate: 90deg;
   }
   .pui-disclosure-trigger:dir(rtl)[data-panel-open] > .pui-disclosure-chevron {
-    transform: rotate(90deg);
+    rotate: -90deg;
   }
   .pui-accordion-panel,
   .pui-collapsible-panel {
@@ -1313,8 +1422,7 @@
   .pui-combobox-group:focus-within,
   .pui-number-group:focus-within {
     border-color: var(--control-focus);
-    box-shadow: 0 0 0 3px
-      color-mix(in srgb, var(--control-focus) 18%, transparent);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
   }
   .pui-combobox-group > .pui-combobox-input {
     flex: 1;
@@ -1343,8 +1451,8 @@
   .pui-combobox-action:focus-visible,
   .pui-number-step:focus-visible,
   .pui-combobox-chip-remove:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: -3px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-combobox-group[data-disabled],
   .pui-number-group[data-disabled] {
@@ -1369,7 +1477,9 @@
     background: var(--menu-background);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     outline: none;
     transition:
       opacity var(--duration-fast) var(--ease-out),
@@ -1387,14 +1497,16 @@
     max-height: min(280px, var(--available-height));
     overflow: auto;
   }
+  /* Select, Menu and Combobox items share one row: the control height. */
   .pui-combobox-item {
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    padding: var(--space-2) var(--space-3);
-    min-height: 36px;
+    padding: max(var(--space-1), calc((var(--control-height) - 1lh) / 2))
+      var(--space-3);
+    min-height: var(--control-height);
     box-sizing: border-box;
-    border-radius: var(--radius-md);
+    border-radius: var(--control-radius);
     cursor: default;
     outline: none;
     overflow-wrap: anywhere;
@@ -1424,7 +1536,9 @@
   .pui-combobox-section-label {
     padding: var(--space-2) var(--space-3);
     color: var(--ink-muted);
-    font-size: 12px;
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
   }
   .pui-combobox-separator {
     height: 1px;
@@ -1455,7 +1569,9 @@
     border-radius: var(--radius-full);
     background: var(--selected);
     color: var(--ink);
-    font-size: 12px;
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
   }
   .pui-combobox-chip-remove {
     width: 28px;
@@ -1477,7 +1593,9 @@
     outline: none;
     background: transparent;
     color: var(--ink);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
@@ -1485,13 +1603,13 @@
     cursor: ew-resize;
     touch-action: none;
   }
-  @media (max-width: 760px) {
+  @media (max-width: 760px), (pointer: coarse) {
     .pui-combobox-item {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
     .pui-combobox-chip-remove {
-      width: 44px;
-      height: 44px;
+      width: var(--control-target-size);
+      height: var(--control-target-size);
     }
   }
   @media (prefers-reduced-motion: reduce) {
@@ -1562,7 +1680,7 @@
     align-items: center;
     width: 100%;
     min-width: 0;
-    height: 44px;
+    height: var(--control-target-size);
     touch-action: pan-y;
     user-select: none;
     cursor: pointer;
@@ -1586,8 +1704,8 @@
     background: var(--canvas);
   }
   .pui-slider-thumb:focus-within {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 3px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-slider[data-disabled] {
     opacity: var(--control-disabled-opacity);
@@ -1601,7 +1719,7 @@
     min-width: 120px;
   }
   .pui-slider-control[data-orientation='vertical'] {
-    width: 44px;
+    width: var(--control-target-size);
     height: 192px;
     justify-content: center;
     justify-self: center;
@@ -1721,7 +1839,8 @@
     align-items: center;
     gap: var(--space-2);
     min-height: var(--control-height);
-    padding: var(--space-2) var(--space-3);
+    padding: max(var(--space-1), calc((var(--control-height) - 1lh) / 2))
+      var(--space-3);
     border-radius: var(--control-radius);
     color: var(--ink);
     outline: none;
@@ -1736,21 +1855,32 @@
     opacity: var(--control-disabled-opacity);
   }
   .pui-menu-check-item {
-    padding-inline-start: 36px;
+    padding-inline-start: calc(
+      var(--space-3) + var(--icon-size-sm) + var(--space-2)
+    );
   }
   .pui-menu-indicator {
     position: absolute;
     inset-inline-start: var(--space-3);
     display: inline-flex;
-    width: 16px;
+    width: var(--icon-size-sm);
   }
   .pui-menu-check-item[aria-checked='false'] > .pui-menu-indicator {
     visibility: hidden;
   }
-  .pui-menu-group-label {
+  .pui-menu-group-label,
+  .pui-select-group-label {
     padding: var(--space-2) var(--space-3);
     color: var(--ink-muted);
-    font-size: 12px;
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
+  /* A group heading starts where its options' text does, past the check column. */
+  .pui-select-group-label {
+    padding-inline-start: calc(
+      var(--space-3) + var(--icon-size-sm) + var(--space-2)
+    );
   }
   .pui-menu-separator {
     height: 1px;
@@ -1764,12 +1894,9 @@
     flex: none;
     margin-inline-start: var(--space-3);
   }
-  .pui-menu-submenu-trigger:dir(rtl) .pui-submenu-arrow {
-    transform: rotate(180deg);
-  }
-  @media (max-width: 760px) {
+  @media (max-width: 760px), (pointer: coarse) {
     .pui-menu-item {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
   }
   @media (forced-colors: active) {
@@ -1833,7 +1960,9 @@
     background: var(--menu-background);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     overflow-wrap: anywhere;
     outline: none;
     transform: translateY(0);
@@ -1890,7 +2019,7 @@
   }
   .pui-navigation-trigger {
     padding-inline: var(--space-3);
-    font-weight: 500;
+    font-weight: var(--weight-medium);
     background: transparent;
     color: var(--ink-body);
   }
@@ -1918,7 +2047,9 @@
     border-radius: var(--radius-md);
     color: var(--ink-body);
     text-decoration: none;
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     overflow-wrap: anywhere;
   }
   .pui-navigation-link:hover,
@@ -1928,11 +2059,11 @@
   .pui-navigation-link[aria-current='page'] {
     background: var(--selected);
     color: var(--ink);
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-navigation-link:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-navigation-popup {
     box-sizing: border-box;
@@ -1946,7 +2077,9 @@
     background: var(--menu-background);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 14px/22px var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    letter-spacing: var(--type-body-tracking);
     outline: none;
     opacity: 1;
     translate: 0 0;
@@ -1977,10 +2110,10 @@
     padding: var(--space-4);
     overflow-wrap: anywhere;
   }
-  @media (max-width: 760px) {
+  @media (max-width: 760px), (pointer: coarse) {
     .pui-navigation-trigger,
     .pui-navigation-link {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
   }
   @media (prefers-reduced-motion: reduce) {
@@ -2026,13 +2159,15 @@
     flex: 1 1 auto;
   }
   .pui-otp-input {
-    flex: 0 1 44px;
-    width: 44px;
-    height: 44px;
+    flex: 0 1 var(--control-target-size);
+    width: var(--control-target-size);
+    height: var(--control-target-size);
     min-width: 0;
     padding: 0;
     text-align: center;
-    font: 400 20px/24px var(--font-code);
+    font: var(--weight-regular)
+      var(--type-section-size)/var(--type-section-leading) var(--font-code);
+    letter-spacing: var(--tracking-mono);
     font-variant-numeric: tabular-nums;
     caret-color: var(--control-focus);
   }
@@ -2057,7 +2192,7 @@
     }
     .pui-otp-input:focus-visible {
       outline: 2px solid Highlight;
-      outline-offset: 2px;
+      outline-offset: var(--focus-ring-offset);
     }
     .pui-otp-input[aria-invalid='true'] {
       border-color: LinkText;
@@ -2101,7 +2236,9 @@
     background: var(--menu-background);
     color: var(--ink);
     box-shadow: var(--shadow-float);
-    font: 400 13px/20px var(--font-body);
+    font: var(--weight-regular)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
     overflow-wrap: anywhere;
     pointer-events: auto;
     opacity: 1;
@@ -2134,8 +2271,8 @@
     display: none;
   }
   .pui-toast:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-toast-content {
     display: flex;
@@ -2160,13 +2297,16 @@
   }
   .pui-toast-title {
     margin: 0;
-    font: 500 13px/20px var(--font-body);
+    font: var(--weight-medium)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
   }
   .pui-toast-description {
     margin: 2px 0 0;
     color: var(--ink-muted);
-    font-size: 13px;
-    line-height: 18px;
+    font-size: var(--type-compact-size);
+    letter-spacing: var(--type-compact-tracking);
+    line-height: var(--type-compact-leading);
   }
   /* Close and Action are small Buttons (see toast.tsx); only their placement is set here. */
   .pui-toast-close {
@@ -2201,8 +2341,8 @@
 
   .pui-toast-viewport[data-layout='stack']:focus-visible {
     border-radius: var(--radius-lg);
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: -2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-toast-viewport[data-layout='anchored'] {
     inset: 0;
@@ -2222,8 +2362,8 @@
   }
 
   .pui-toast-viewport[data-layout='anchored']:focus-visible .pui-toast {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
 
   .pui-file-upload {
@@ -2258,16 +2398,17 @@
     flex-direction: row;
     width: fit-content;
     cursor: pointer;
-    font-size: 14px;
-    line-height: 22px;
+    font-size: var(--type-body-size);
+    letter-spacing: var(--type-body-tracking);
+    line-height: var(--type-body-leading);
   }
   .pui-file-trigger[data-disabled] {
     opacity: var(--control-disabled-opacity);
     cursor: not-allowed;
   }
   .pui-file-upload:has(.pui-file-native:focus-visible) .pui-file-trigger {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-file-upload:has(.pui-file-native[aria-invalid='true'])
     .pui-file-dropzone {
@@ -2276,11 +2417,15 @@
   .pui-file-drop-hint {
     margin: 0;
     color: var(--ink-muted);
-    font-size: 13px;
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
   }
   .pui-file-errors {
     color: var(--status-danger-fg);
-    font: 400 13px/20px var(--font-body);
+    font: var(--weight-regular)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
     overflow-wrap: anywhere;
   }
   .pui-file-errors:empty {
@@ -2308,13 +2453,15 @@
     flex-wrap: wrap;
     align-items: center;
     gap: var(--space-2) var(--space-3);
-    font-size: 13px;
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
   }
   .pui-file-info > strong {
     min-width: 0;
     max-width: 100%;
     overflow-wrap: anywhere;
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-file-info > span:not(.pui-badge) {
     color: var(--ink-muted);
@@ -2331,12 +2478,16 @@
   .pui-file-upload-error {
     margin: var(--space-2) 0 0;
     color: var(--status-danger-fg);
-    font-size: 13px;
+    font-size: var(--type-compact-size);
+    line-height: var(--type-compact-leading);
+    letter-spacing: var(--type-compact-tracking);
   }
-  @media (max-width: 760px) {
+  @media (max-width: 760px), (pointer: coarse) {
     .pui-file-trigger {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
+  }
+  @media (max-width: 760px) {
     .pui-file-dropzone {
       padding: var(--space-4);
     }
@@ -2384,7 +2535,7 @@
     /* An auto row adopts the tallest card while its height transitions, moving
        the bottom anchor during collapse when a behind-card has an action. */
     grid-template-rows: var(--toast-frontmost-height, 80px);
-    padding-top: 24px;
+    padding-top: var(--space-6);
     height: calc(var(--toast-frontmost-height, 80px) + 48px);
     overflow: visible;
   }
@@ -2412,7 +2563,7 @@
     pointer-events: auto;
     height: min(calc(var(--toast-stack-height, 240px) + 48px), 100dvh);
     grid-template-rows: var(--toast-stack-height, auto);
-    padding-top: 24px;
+    padding-top: var(--space-6);
     overflow: visible;
   }
   .pui-toast-viewport[data-layout='stack'][data-expanded][data-stack-overflow] {
@@ -2428,7 +2579,7 @@
   .pui-toast-viewport[data-layout='stack'] > .pui-toast[data-ending-style] {
     transition-duration: 0s;
   }
-  /* Touch targets grow to 44px with the small Button scheme; the close button stays centred
+  /* Touch targets grow to the target size with the small Button scheme; the close button stays centred
      on the first line. */
   @media (max-width: 760px), (pointer: coarse) {
     .pui-toast-close {
@@ -2592,11 +2743,11 @@
   .pui-app-shell-link[aria-current='page'] {
     background: var(--selected);
     color: var(--ink);
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-app-shell-link:focus-visible {
-    outline: 2px solid var(--control-focus);
-    outline-offset: -2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-app-shell-icon {
     display: grid;
@@ -2626,13 +2777,15 @@
     .pui-app-shell-sidebar {
       display: none;
     }
-    .pui-app-shell-link {
-      min-block-size: 44px;
-    }
     .pui-app-shell-content {
       padding: var(--space-4);
     }
   }
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-app-shell-link {
+      min-block-size: var(--control-target-size);
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .pui-app-shell-link {
       transition: none;
@@ -2754,7 +2907,7 @@
     border-radius: var(--radius-md);
     color: var(--ink);
     cursor: default;
-    outline-offset: -2px;
+    outline-offset: var(--focus-ring-inset);
     transition: background-color var(--duration-fast) var(--ease-out);
   }
   .pui-tree-item:hover {
@@ -2764,7 +2917,7 @@
     background: var(--selected);
   }
   .pui-tree-item:focus-visible {
-    outline: 2px solid var(--control-focus);
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
   }
   .pui-tree-item[aria-disabled='true'] {
     color: var(--ink-muted);
@@ -2793,8 +2946,8 @@
   .pui-tree-toggle svg[data-expanded] {
     rotate: 90deg;
   }
-  .pui-tree:dir(rtl) .pui-tree-toggle svg:not([data-expanded]) {
-    rotate: 180deg;
+  .pui-tree:dir(rtl) .pui-tree-toggle svg[data-expanded] {
+    rotate: -90deg;
   }
   .pui-tree-label {
     min-inline-size: 0;
@@ -2859,8 +3012,7 @@
   .pui-date-group:focus-within {
     background: var(--control-focus-background);
     border-color: var(--control-focus);
-    box-shadow: 0 0 0 3px
-      color-mix(in oklch, var(--control-focus) 18%, transparent);
+    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
   }
   :is(.pui-date-picker, .pui-time-field)[data-invalid] .pui-date-group {
     border-color: var(--status-danger-fg);
@@ -2878,7 +3030,8 @@
     flex: 1;
     min-width: 0;
     padding-block: var(--space-1);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     white-space: nowrap;
   }
   .pui-date-segment {
@@ -2935,8 +3088,8 @@
     background: var(--selected);
   }
   :is(.pui-date-trigger, .pui-calendar-nav)[data-focus-visible] {
-    outline: 2px solid var(--control-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   :is(.pui-date-trigger, .pui-calendar-nav)[data-disabled] {
     opacity: var(--control-disabled-opacity);
@@ -2962,7 +3115,8 @@
   .pui-calendar {
     width: 280px;
     max-width: 100%;
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
   }
   .pui-calendar-header {
     display: flex;
@@ -2973,7 +3127,8 @@
   }
   .pui-calendar-heading {
     margin: 0;
-    font: 500 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-medium) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     text-align: center;
   }
   .pui-calendar-grid {
@@ -2985,8 +3140,10 @@
   }
   .pui-calendar-weekday {
     color: var(--ink-muted);
-    font-weight: 400;
+    font-weight: var(--weight-regular);
     font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
     text-align: center;
   }
   .pui-calendar-day {
@@ -3018,8 +3175,8 @@
     color: var(--on-brand);
   }
   .pui-calendar-day[data-focus-visible] {
-    outline: 2px solid var(--control-focus);
-    outline-offset: -2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
   }
   .pui-calendar-day[data-today] {
     border-color: var(--control-border);
@@ -3080,9 +3237,6 @@
   .pui-calendar-day[data-focus-visible][data-selected] {
     outline-color: var(--ink);
   }
-  .pui-calendar:dir(rtl) .pui-calendar-nav svg {
-    transform: scaleX(-1);
-  }
 
   @media (prefers-reduced-motion: reduce) {
     .pui-file-dropzone {
@@ -3099,14 +3253,16 @@
     gap: var(--space-3);
   }
   .pui-chart-caption strong {
-    font: 500 var(--type-subsection-size)/var(--type-subsection-leading)
+    font: var(--weight-medium)
+      var(--type-subsection-size)/var(--type-subsection-leading)
       var(--font-body);
   }
   .pui-chart-caption p,
   .pui-chart-help {
     margin: var(--space-2) 0 0;
     color: var(--ink-muted);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
   }
   .pui-chart-legend {
     display: flex;
@@ -3127,7 +3283,8 @@
     border-radius: var(--radius-md);
     background: transparent;
     color: var(--ink-body);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     cursor: pointer;
     text-align: start;
   }
@@ -3150,15 +3307,15 @@
   .pui-chart-legend-button:focus-visible,
   .pui-chart-plot .recharts-surface:focus-visible,
   .pui-chart-table summary:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
     border-radius: var(--radius-sm);
   }
   .pui-chart-axis-label {
     margin: 0;
     color: var(--ink-muted);
-    font: 400 var(--type-caption-size)/var(--type-caption-leading)
-      var(--font-body);
+    font: var(--weight-regular)
+      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
     overflow-wrap: anywhere;
   }
   .pui-chart-x-label {
@@ -3176,14 +3333,15 @@
     background: var(--surface);
     color: var(--ink-body);
     border-radius: var(--radius-md);
-    font: 400 var(--type-body-size)/var(--type-body-leading) var(--font-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
     overflow-wrap: anywhere;
   }
   .pui-chart-inspector[hidden] {
     display: none;
   }
   .pui-chart-readout strong {
-    font-weight: 500;
+    font-weight: var(--weight-medium);
   }
   .pui-chart-readout ul {
     display: flex;
@@ -3219,12 +3377,15 @@
     text-underline-offset: 3px;
   }
   .pui-chart-table .pui-scroll-root {
-    max-height: 320px;
     margin-top: var(--space-2);
   }
+  /* The data table scrolls inside a bounded region, so long series stay compact. */
+  .pui-chart-table .pui-scroll-viewport {
+    max-block-size: 320px;
+  }
   @media (max-width: 760px), (pointer: coarse) {
     .pui-chart-legend-button {
-      min-height: 44px;
+      min-height: var(--control-target-size);
     }
   }
   @media (forced-colors: active) {
@@ -3444,7 +3605,7 @@
     padding-inline: var(--ui-card-padding);
   }
   :where([data-ui-size], [data-ui-size] *).pui-dialog-header {
-    padding-inline-end: calc(var(--ui-card-padding) + 48px);
+    padding-inline-end: calc(var(--control-height) + var(--space-4) * 2);
   }
   :where([data-ui-size], [data-ui-size] *).pui-confirm-content
     .pui-dialog-header {
@@ -3523,8 +3684,11 @@
   /* Coarse pointers retain comfortable targets even with a compact visual scheme. */
   @media (max-width: 760px), (pointer: coarse) {
     [data-ui-size] {
-      --control-height: max(44px, var(--ui-control-height));
-      --ui-row: max(44px, var(--ui-control-height));
+      --control-height: max(
+        var(--control-target-size),
+        var(--ui-control-height)
+      );
+      --ui-row: max(var(--control-target-size), var(--ui-control-height));
     }
   }
   @media (forced-colors: active) {
@@ -3562,10 +3726,10 @@
   }
   @media (max-width: 760px), (pointer: coarse) {
     :where([data-ui-size], [data-ui-size] *).pui-field-item {
-      min-block-size: 44px;
+      min-block-size: var(--control-target-size);
     }
     :where([data-ui-size], [data-ui-size] *).pui-slider-control {
-      min-block-size: 44px;
+      min-block-size: var(--control-target-size);
     }
   }
 
@@ -3595,15 +3759,19 @@
     font-size: var(--ui-font);
   }
   :where([data-ui-size], [data-ui-size] *).pui-avatar[data-ui-size] {
-    font-size: clamp(12px, calc(var(--ui-avatar) / 3), 16px);
+    font-size: clamp(
+      var(--type-caption-size),
+      calc(var(--ui-avatar) / 3),
+      var(--size-font-large)
+    );
   }
   @media (max-width: 760px), (pointer: coarse) {
     :where([data-ui-size], [data-ui-size] *):is(
       .pui-date-trigger,
       .pui-calendar-nav
     ) {
-      inline-size: 44px;
-      block-size: 44px;
+      inline-size: var(--control-target-size);
+      block-size: var(--control-target-size);
     }
   }
 
@@ -3652,10 +3820,11 @@
     padding: var(--ui-surface-padding, var(--space-4));
     background: var(--code-bg);
     border-radius: var(--radius-md);
-    font: 400 13px/20px var(--font-code);
+    font: var(--weight-regular) var(--type-code-size)/var(--type-code-leading)
+      var(--font-code);
     /* Code shows the characters as typed, like the other code text: no === or => ligatures. */
     font-variant-ligatures: none;
-    letter-spacing: 0;
+    letter-spacing: var(--tracking-mono);
     tab-size: 2;
     white-space: pre;
   }
@@ -3709,8 +3878,8 @@
     text-underline-offset: 3px;
   }
   .pui-markdown a:focus-visible {
-    outline: 2px solid var(--interaction-focus);
-    outline-offset: 2px;
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
   }
   .pui-markdown .contains-task-list {
     list-style: none;
@@ -3728,9 +3897,8 @@
   .pui-markdown-inline-code {
     padding: 2px 4px;
     background: var(--code-bg);
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0;
+    font-weight: var(--weight-regular);
+    letter-spacing: var(--tracking-mono);
   }
   .pui-markdown .pui-table {
     min-inline-size: 480px;