@surflane/ui 0.12.0 → 0.13.0

package/dist/css/rules/menu.css

@@ -8,7 +8,7 @@
     min-width: 176px;
   }
   .surf-menu-trigger[data-popup-open] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     border-color: var(--surf-control-border);
   }
   .surf-menu-item {
@@ -31,7 +31,10 @@
     overflow-wrap: anywhere;
   }
   .surf-menu-item[data-highlighted] {
-    background: var(--surf-menu-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-menu-item[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);

package/dist/css/rules/menubar.css

@@ -6,7 +6,7 @@
   .surf-menubar {
     padding: var(--surf-space-1);
     border-radius: var(--surf-radius-md);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     width: fit-content;
     max-width: 100%;
   }

package/dist/css/rules/navigation-menu.css

@@ -20,22 +20,20 @@
     align-items: stretch;
   }
   .surf-navigation-trigger {
-    padding-inline: var(--surf-space-3);
     font-weight: var(--surf-weight-medium);
     background: transparent;
     color: var(--surf-ink-body);
   }
-  .surf-navigation-trigger:hover,
-  .surf-navigation-trigger[data-popup-open] {
-    background: var(--surf-menu-hover-background);
-  }
+  /* The trigger is a ghost Button, whose hover layer it keeps; open is held, as an
+     open menu trigger is. */
   .surf-navigation-trigger[data-popup-open] {
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
   }
   .surf-navigation-icon {
     display: inline-flex;
     flex: none;
-    transition: rotate var(--surf-motion-enter) var(--surf-motion-ease);
+    transition: rotate var(--surf-duration-fast) var(--surf-ease-out);
   }
   .surf-navigation-icon[data-popup-open] {
     rotate: 180deg;
@@ -57,10 +55,28 @@
   }
   .surf-navigation-link:hover,
   .surf-navigation-link[data-highlighted] {
-    background: var(--surf-menu-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
+  }
+  /* A link that names a destination and says what is there: the title at the link's
+     size in medium weight, the description under it in the compact role, quieter. */
+  .surf-navigation-link-title {
+    display: block;
+    color: var(--surf-ink);
+    font-weight: var(--surf-weight-medium);
+  }
+  .surf-navigation-link-description {
+    display: block;
+    margin-block-start: var(--surf-space-1);
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+    letter-spacing: var(--surf-type-compact-tracking);
   }
   .surf-navigation-link[aria-current='page'] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
     font-weight: var(--surf-weight-medium);
   }
@@ -85,19 +101,6 @@
       var(--surf-font-body);
     letter-spacing: var(--surf-type-body-tracking);
     outline: none;
-    opacity: 1;
-    translate: 0 0;
-    transition:
-      opacity var(--surf-dialog-enter-duration) var(--surf-motion-ease),
-      translate var(--surf-dialog-enter-duration)
-        var(--surf-motion-spatial-ease);
-  }
-  .surf-navigation-popup[data-starting-style] {
-    opacity: 0;
-    translate: 0 12px;
-  }
-  .surf-navigation-popup[data-ending-style] {
-    transition-duration: 0s;
   }
   .surf-navigation-viewport {
     position: relative;
@@ -122,13 +125,9 @@
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .surf-navigation-popup,
     .surf-navigation-icon {
       transition: none;
     }
-    .surf-navigation-popup[data-starting-style] {
-      translate: 0 0;
-    }
   }
   @media (forced-colors: active) {
     .surf-navigation-popup {
@@ -137,7 +136,9 @@
       border-color: CanvasText;
     }
     .surf-navigation-link[aria-current='page'] {
-      border-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
     }
   }
   /* Keep the floating box measurable even when the popup anchors from its bottom edge. */
@@ -159,4 +160,8 @@
     font-size: var(--surf-ui-font);
     line-height: var(--surf-ui-leading);
   }
+  /* The trigger is a button: it keeps the label leading. */
+  :where([data-ui-size], [data-ui-size] *).surf-navigation-trigger {
+    line-height: var(--surf-ui-label-leading);
+  }
 }

package/dist/css/rules/number-field.css

@@ -26,6 +26,13 @@
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
+  /* iOS zooms the page into a focused field whose text is under 16px. */
+  .surf-number-input {
+    font-size: max(
+      var(--surf-control-text-min-size),
+      var(--surf-type-body-size)
+    );
+  }
   .surf-number-scrub {
     cursor: ew-resize;
     touch-action: none;
@@ -50,7 +57,7 @@
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *):is(.surf-number-input) {
-    font-size: var(--surf-ui-font);
+    font-size: max(var(--surf-control-text-min-size), var(--surf-ui-font));
     line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/otp-field.css

@@ -16,9 +16,9 @@
     flex: 1 1 auto;
   }
   .surf-otp-input {
-    flex: 0 1 var(--surf-control-target-size);
-    width: var(--surf-control-target-size);
-    height: var(--surf-control-target-size);
+    flex: 0 1 var(--surf-size-otp-default);
+    width: var(--surf-size-otp-default);
+    height: var(--surf-size-otp-default);
     min-width: 0;
     padding: 0;
     text-align: center;
@@ -64,9 +64,19 @@
   }
 }
 @layer surflane.sizes {
+  /* The box follows the size; the digits keep the section role, as type roles do. */
   :where([data-ui-size], [data-ui-size] *).surf-otp-input {
     flex-basis: var(--surf-ui-otp);
     width: var(--surf-ui-otp);
     height: var(--surf-ui-otp);
+    font-size: var(--surf-type-section-size);
+    line-height: var(--surf-type-section-leading);
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    :where([data-ui-size], [data-ui-size] *).surf-otp-input {
+      flex-basis: max(var(--surf-ui-otp), var(--surf-control-target-size));
+      width: max(var(--surf-ui-otp), var(--surf-control-target-size));
+      height: max(var(--surf-ui-otp), var(--surf-control-target-size));
+    }
   }
 }

package/dist/css/rules/page-header.css

@@ -1,3 +1,13 @@
 /* Page header, with the styles of what it renders. */
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
+
+@layer surflane.sizes {
+  /* Compact density: the copy and the actions sit 8px apart. */
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-page-header-content {
+    gap: var(--surf-ui-density-inset);
+  }
+}

package/dist/css/rules/panel.css

@@ -36,11 +36,13 @@
   .surf-panel-viewport[data-flush] {
     padding: 0;
   }
-  .surf-panel-viewport[data-side='right'] {
-    justify-content: flex-end;
+  /* side names a physical edge, as the slide and the squared corners do: an auto
+     margin pushes the panel to it whatever the writing direction. */
+  .surf-panel-viewport[data-side='right'] > .surf-panel {
+    margin-left: auto;
   }
-  .surf-panel-viewport[data-side='left'] {
-    justify-content: flex-start;
+  .surf-panel-viewport[data-side='left'] > .surf-panel {
+    margin-right: auto;
   }
   .surf-panel-viewport[data-side='top'] {
     align-items: flex-start;
@@ -62,6 +64,7 @@
     max-height: 100%;
     overflow: hidden;
     pointer-events: auto;
+    /* A plane on the backdrop, as a dialog is: forced colors draw its edge. */
     background: var(--surf-canvas);
     color: var(--surf-ink);
     border-radius: var(--surf-radius-sheet);
@@ -102,6 +105,11 @@
     --surf-panel-enter-y: calc(100% + 12px);
     max-height: min(85dvh, 100%);
   }
+  /* A top or bottom panel fits its content unless --surf-panel-height holds it at one
+     height, so it doesn't jump as a list inside changes. */
+  .surf-panel:is([data-side='top'], [data-side='bottom']) {
+    height: var(--surf-panel-height, auto);
+  }
   /* A flush panel squares the corners on the edge it is attached to. */
   .surf-panel[data-flush][data-side='bottom'] {
     border-bottom-left-radius: 0;
@@ -133,10 +141,18 @@
     min-height: 0;
     flex: 1;
   }
+  /* The body scrolls, so it clips: the room a focus ring takes moves from the head's
+     bottom to the body's top, and the first control's ring shows whole. */
+  .surf-panel {
+    --surf-panel-ring-room: calc(
+      var(--surf-focus-ring-width) + var(--surf-focus-ring-offset)
+    );
+  }
   .surf-panel-header {
     flex: none;
-    padding-block: var(--surf-space-6) var(--surf-space-5);
-    padding-inline: var(--surf-space-6)
+    padding-block: var(--surf-space-6)
+      calc(var(--surf-space-5) - var(--surf-panel-ring-room));
+    padding-inline: var(--surf-panel-inset, var(--surf-space-6))
       calc(var(--surf-control-height) + var(--surf-space-4) * 2);
   }
   .surf-panel-title {
@@ -158,11 +174,16 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: 0 var(--surf-space-6) var(--surf-space-6);
+    padding: var(--surf-space-6) var(--surf-panel-inset, var(--surf-space-6));
+    /* A control scrolled into view keeps room from the clipped edge. */
+    scroll-padding-block: var(--surf-space-4);
     overscroll-behavior: contain;
     scrollbar-width: thin;
     scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
+  .surf-panel-header + .surf-panel-body {
+    padding-top: var(--surf-panel-ring-room);
+  }
   .surf-panel-body::-webkit-scrollbar {
     width: var(--surf-scrollbar-size);
     height: var(--surf-scrollbar-size);
@@ -180,9 +201,20 @@
     justify-content: flex-end;
     flex-wrap: wrap;
     gap: var(--surf-space-2);
-    padding: var(--surf-space-4) var(--surf-space-6)
+    padding: var(--surf-space-4) var(--surf-panel-inset, var(--surf-space-6))
       max(var(--surf-space-5), env(safe-area-inset-bottom));
     background: var(--surf-surface);
+    --surf-plane: var(--surf-surface);
+    --surf-recessed: var(--surf-canvas);
+  }
+  /* Stacked: each action takes the full width, one under the other, within reach
+     of a thumb on a phone. */
+  .surf-panel-footer[data-stacked] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .surf-panel-footer[data-stacked] > * {
+    inline-size: 100%;
   }
   .surf-panel-close {
     position: absolute;
@@ -208,6 +240,12 @@
   .surf-panel-viewport[data-side='bottom'] {
     bottom: var(--drawer-keyboard-inset, 0px);
   }
+  /* Forced colors drop the backdrop tint and the shadow, so the edge is a line. */
+  @media (forced-colors: active) {
+    .surf-panel {
+      border: 1px solid CanvasText;
+    }
+  }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *):is(
@@ -215,13 +253,16 @@
     .surf-panel-body,
     .surf-panel-footer
   ) {
-    padding-inline: var(--surf-ui-card-padding);
+    padding-inline: var(--surf-panel-inset, var(--surf-ui-card-padding));
   }
   /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap.
    * Above and below, the head follows the size's card padding: 24/20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-panel-header {
     padding-block: var(--surf-ui-card-padding)
-      calc(var(--surf-ui-card-padding) - var(--surf-space-1));
+      calc(
+        var(--surf-ui-card-padding) - var(--surf-space-1) -
+          var(--surf-panel-ring-room)
+      );
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );

package/dist/css/rules/popup.css

@@ -25,4 +25,54 @@
     letter-spacing: var(--surf-type-body-tracking);
     outline: none;
   }
+  /* One entrance for every popup: it fades in and rises --surf-motion-lift in
+     --surf-duration-fast, and closes at once, so closing never makes the reader
+     wait. Dialogs, sheets and toasts move on their own tokens. */
+  :is(
+    .surf-select-popup,
+    .surf-popover,
+    .surf-menu,
+    .surf-combobox-popup,
+    .surf-preview-card,
+    .surf-navigation-popup
+  ) {
+    translate: 0 0;
+    transition:
+      opacity var(--surf-duration-fast) var(--surf-ease-out),
+      translate var(--surf-duration-fast) var(--surf-ease-out);
+  }
+  :is(
+    .surf-select-popup,
+    .surf-popover,
+    .surf-menu,
+    .surf-combobox-popup,
+    .surf-preview-card,
+    .surf-navigation-popup
+  )[data-starting-style] {
+    opacity: 0;
+    translate: 0 var(--surf-motion-lift);
+  }
+  :is(
+    .surf-select-popup,
+    .surf-popover,
+    .surf-menu,
+    .surf-combobox-popup,
+    .surf-preview-card,
+    .surf-navigation-popup
+  ):is([data-ending-style], [data-instant]) {
+    transition: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :is(
+      .surf-select-popup,
+      .surf-popover,
+      .surf-menu,
+      .surf-combobox-popup,
+      .surf-preview-card,
+      .surf-navigation-popup
+    ) {
+      transition: none;
+      translate: none;
+    }
+  }
 }

package/dist/css/rules/preview-card.css

@@ -23,11 +23,6 @@
     letter-spacing: var(--surf-type-body-tracking);
     overflow-wrap: anywhere;
     outline: none;
-    transform: translateY(0);
-    opacity: 1;
-    transition:
-      opacity var(--surf-dialog-enter-duration) var(--surf-ease-out),
-      transform var(--surf-dialog-enter-duration) var(--surf-ease-out);
   }
   .surf-preview-card > :first-child {
     margin-top: 0;
@@ -35,22 +30,6 @@
   .surf-preview-card > :last-child {
     margin-bottom: 0;
   }
-  .surf-preview-card[data-starting-style] {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  .surf-preview-card[data-ending-style] {
-    transition-duration: 0s;
-  }
-  .surf-preview-card[data-instant] {
-    transition-duration: 0s;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    .surf-preview-card {
-      transition: none;
-      transform: none;
-    }
-  }
   @media (forced-colors: active) {
     .surf-preview-card {
       border-color: CanvasText;

package/dist/css/rules/scroll-area.css

@@ -40,6 +40,18 @@
       #000 var(--surf-space-6)
     );
   }
+  /* Start and end are logical: right to left, the end that hides content is the
+     left edge, and the start the right. */
+  .surf-scroll-root:dir(rtl)[data-overflow-x-end] > .surf-scroll-viewport {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--surf-space-6)
+    );
+  }
+  .surf-scroll-root:dir(rtl)[data-overflow-x-start] > .surf-scroll-viewport {
+    mask-image: linear-gradient(to left, transparent, #000 var(--surf-space-6));
+  }
   .surf-scroll-root[data-overflow-x-start][data-overflow-x-end]
     > .surf-scroll-viewport {
     mask-image: linear-gradient(
@@ -82,13 +94,15 @@
     left: 0;
     right: 0;
   }
+  /* The vertical bar sits at the inline end: the right, or the left right to left,
+     where a page's own scrollbar sits. */
   .surf-scrollbar[data-orientation='vertical'] {
     flex-direction: column;
     width: calc(var(--surf-scrollbar-indicator-size) + 4px);
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
   }
   .surf-scroll-thumb {
     flex: none;
@@ -107,6 +121,11 @@
       pointer-events: none;
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .surf-scrollbar {
+      transition: none;
+    }
+  }
   @media (forced-colors: active) {
     .surf-scrollbar {
       opacity: 1;

package/dist/css/rules/select.css

@@ -74,7 +74,10 @@
     overflow-wrap: anywhere;
   }
   .surf-select-item[data-highlighted] {
-    background: var(--surf-menu-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-select-item[data-selected] {
     font-weight: var(--surf-weight-medium);

package/dist/css/rules/sizing.css

@@ -21,6 +21,7 @@
     --surf-ui-button-padding: var(--surf-size-button-padding-small);
     --surf-ui-font: var(--surf-size-font-small);
     --surf-ui-leading: var(--surf-size-leading-small);
+    --surf-ui-label-leading: var(--surf-size-label-leading-small);
     --surf-ui-choice: var(--surf-size-choice-small);
     --surf-ui-switch-width: var(--surf-size-switch-width-small);
     --surf-ui-switch-height: var(--surf-size-switch-height-small);
@@ -64,6 +65,7 @@
     --surf-ui-button-padding: var(--surf-size-button-padding-default);
     --surf-ui-font: var(--surf-size-font-default);
     --surf-ui-leading: var(--surf-size-leading-default);
+    --surf-ui-label-leading: var(--surf-size-label-leading-default);
     --surf-ui-choice: var(--surf-size-choice-default);
     --surf-ui-switch-width: var(--surf-size-switch-width-default);
     --surf-ui-switch-height: var(--surf-size-switch-height-default);
@@ -107,6 +109,7 @@
     --surf-ui-button-padding: var(--surf-size-button-padding-large);
     --surf-ui-font: var(--surf-size-font-large);
     --surf-ui-leading: var(--surf-size-leading-large);
+    --surf-ui-label-leading: var(--surf-size-label-leading-large);
     --surf-ui-choice: var(--surf-size-choice-large);
     --surf-ui-switch-width: var(--surf-size-switch-width-large);
     --surf-ui-switch-height: var(--surf-size-switch-height-large);
@@ -138,15 +141,24 @@
     --surf-control-switch-thumb: var(--surf-ui-switch-thumb);
   }
   /* Coarse pointers retain comfortable targets even with a compact visual scheme. */
+  /* Compact density: blocks sit 12px apart and 8px inside, and touch keeps a
+     control at its size, no smaller than the 24px WCAG 2.2 AA target. */
+  [data-ui-density='compact'] {
+    --surf-ui-density-gap: var(--surf-space-3);
+    --surf-ui-density-inset: var(--surf-space-2);
+    --surf-control-target-size: var(--surf-control-target-size-min);
+  }
   @media (max-width: 760px), (pointer: coarse) {
-    [data-ui-size] {
+    [data-ui-size],
+    [data-ui-density='compact'] {
+      /* A density scope outside any size scope takes the default height. */
       --surf-control-height: max(
         var(--surf-control-target-size),
-        var(--surf-ui-control-height)
+        var(--surf-ui-control-height, var(--surf-size-control-height-default))
       );
       --surf-ui-row: max(
         var(--surf-control-target-size),
-        var(--surf-ui-control-height)
+        var(--surf-ui-control-height, var(--surf-size-control-height-default))
       );
     }
   }

package/dist/css/rules/skeleton.css

@@ -12,7 +12,7 @@
     /* Its own tokens: --surf-surface is about 1.07:1 on a light canvas, and a pulse
        through opacity faded it further. The pulse moves between the two shades. */
     background: var(--surf-skeleton-base);
-    animation: surf-skeleton-pulse 1.4s ease-in-out infinite;
+    animation: surf-skeleton-pulse var(--surf-motion-pulse) ease-in-out infinite;
   }
   @keyframes surf-skeleton-pulse {
     50% {

package/dist/css/rules/slider.css

@@ -40,10 +40,10 @@
     width: 100%;
     height: var(--surf-size-slider-track-default);
     border-radius: var(--surf-radius-full);
-    background: var(--surf-slider-track);
+    background: var(--surf-recessed);
   }
-  /* The pair Progress uses: a brand-mark fill on the surface track, 3:1 against both
-     the track and the sheet in either theme. */
+  /* The pair Progress uses: a brand-mark fill on the recessed track, 3:1 against the
+     track and the plane in either theme. */
   .surf-slider-indicator {
     background: var(--surf-brand-mark);
     border-radius: inherit;
@@ -61,7 +61,8 @@
     outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
     outline-offset: var(--surf-focus-ring-offset);
   }
-  .surf-slider[data-disabled] {
+  /* Disabled fades the control only: the label and value stay readable. */
+  .surf-slider-control[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);
   }
   .surf-slider-control[data-disabled],
@@ -80,13 +81,14 @@
     touch-action: pan-x;
   }
   .surf-slider-track[data-orientation='vertical'] {
-    width: 6px;
+    width: var(--surf-size-slider-track-default);
     height: 100%;
   }
+  /* A phone takes the large thumb at every size. */
   @media (max-width: 760px) {
     .surf-slider-thumb {
-      width: 28px;
-      height: 28px;
+      width: var(--surf-size-slider-thumb-large);
+      height: var(--surf-size-slider-thumb-large);
     }
   }
   @media (forced-colors: active) {
@@ -107,6 +109,12 @@
     width: var(--surf-ui-slider-thumb);
     height: var(--surf-ui-slider-thumb);
   }
+  @media (max-width: 760px) {
+    :where([data-ui-size], [data-ui-size] *).surf-slider-thumb {
+      width: var(--surf-size-slider-thumb-large);
+      height: var(--surf-size-slider-thumb-large);
+    }
+  }
   @media (max-width: 760px), (pointer: coarse) {
     :where([data-ui-size], [data-ui-size] *).surf-slider-control {
       min-block-size: var(--surf-control-target-size);
@@ -115,7 +123,7 @@
   :where([data-ui-size], [data-ui-size] *).surf-slider-track:not(
       [data-orientation='vertical']
     ) {
-    height: var(--surf-ui-gauge);
+    height: var(--surf-ui-slider-track);
   }
   :where(
       [data-ui-size],

package/dist/css/rules/spinner.css

@@ -16,7 +16,7 @@
   .surf-spinner > svg {
     width: 100%;
     height: 100%;
-    animation: surf-feedback-spin 1s linear infinite;
+    animation: surf-feedback-spin var(--surf-motion-spin) linear infinite;
   }
   @keyframes surf-feedback-spin {
     to {

package/dist/css/rules/stat.css

@@ -114,3 +114,12 @@
     color: var(--surf-ink-body);
   }
 }
+@layer surflane.sizes {
+  /* Compact density: values of a group sit 8px apart in a row and 12px across. */
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-stat-group-items {
+    gap: var(--surf-ui-density-inset) var(--surf-ui-density-gap);
+  }
+}