@surflane/ui 0.11.0 → 0.13.0

package/dist/css/rules/dialog.css

@@ -36,9 +36,11 @@
   .surf-dialog-backdrop[data-starting-style] {
     opacity: 0;
   }
+  /* Closing fades only, in --surf-dialog-exit-duration (0ms: at once). Dropping the
+     rise from the transition cancels one still running, so nothing waits on it. */
   .surf-dialog-popup[data-ending-style],
   .surf-dialog-backdrop[data-ending-style] {
-    transition: none;
+    transition-property: opacity;
     transition-duration: var(--surf-dialog-exit-duration);
     opacity: 0;
   }
@@ -68,7 +70,9 @@
     overflow: hidden;
     scrollbar-gutter: auto;
     padding: 0;
-    border: 1px solid var(--surf-line);
+    /* A modal is a plane on the backdrop: the backdrop and the shadow set it apart,
+       and forced colors draw its edge. */
+    border: 0;
     border-radius: var(--surf-radius-sheet);
     background: var(--surf-canvas);
     color: var(--surf-ink);
@@ -89,20 +93,27 @@
     flex: none;
     align-self: stretch;
   }
+  /* Planes, as in Sheet and Drawer: no line under the head; the body scrolls and
+     clips, so a focus ring's room moves from the head's bottom to the body's top. */
+  .surf-dialog-popup {
+    --surf-dialog-ring-room: calc(
+      var(--surf-focus-ring-width) + var(--surf-focus-ring-offset)
+    );
+  }
   .surf-dialog-header {
-    padding-block: var(--surf-space-6) var(--surf-space-5);
+    padding-block: var(--surf-space-6)
+      calc(var(--surf-space-5) - var(--surf-dialog-ring-room));
     padding-inline: var(--surf-space-6)
       calc(var(--surf-control-height) + var(--surf-space-4) * 2);
-    border-bottom: 1px solid var(--surf-line);
   }
-  .surf-dialog-header h2 {
+  .surf-dialog-title {
     margin: 0;
     font: var(--surf-weight-medium)
       var(--surf-type-section-size)/var(--surf-type-section-leading)
       var(--surf-font-display);
     letter-spacing: var(--surf-type-section-tracking);
   }
-  .surf-dialog-header p {
+  .surf-dialog-description {
     margin: var(--surf-space-2) 0 0;
     color: var(--surf-ink-body);
   }
@@ -115,6 +126,9 @@
     scrollbar-width: thin;
     scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
+  .surf-dialog-header + .surf-dialog-body {
+    padding-top: var(--surf-dialog-ring-room);
+  }
   .surf-dialog-body::-webkit-scrollbar {
     width: var(--surf-scrollbar-size);
     height: var(--surf-scrollbar-size);
@@ -132,7 +146,9 @@
     flex-wrap: wrap;
     gap: var(--surf-space-2);
     padding: var(--surf-space-5) var(--surf-space-6);
-    border-top: 1px solid var(--surf-line);
+    background: var(--surf-surface);
+    --surf-plane: var(--surf-surface);
+    --surf-recessed: var(--surf-canvas);
   }
   .surf-dialog-close:disabled {
     opacity: var(--surf-control-disabled-opacity);
@@ -147,20 +163,44 @@
   .surf-dialog-content[data-size='large'] {
     --surf-dialog-width: var(--surf-size-dialog-large);
   }
+  /* Forced colors drop the backdrop tint and the shadow, so the edge is a line. */
+  @media (forced-colors: active) {
+    .surf-dialog-popup {
+      border: 1px solid CanvasText;
+    }
+  }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *).surf-dialog-body {
     padding: var(--surf-ui-card-padding);
   }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-header
+    + .surf-dialog-body {
+    padding-top: var(--surf-dialog-ring-room);
+  }
   :where([data-ui-size], [data-ui-size] *):is(
     .surf-dialog-header,
     .surf-dialog-footer
   ) {
     padding-inline: var(--surf-ui-card-padding);
   }
+  /* Head and footer follow the size's card padding: 24/20px and 20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-dialog-header {
+    padding-block: var(--surf-ui-card-padding)
+      calc(
+        var(--surf-ui-card-padding) - var(--surf-space-1) -
+          var(--surf-dialog-ring-room)
+      );
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-footer {
+    padding-block: calc(var(--surf-ui-card-padding) - var(--surf-space-1));
+  }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-title {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/disclosure.css

@@ -8,9 +8,17 @@
     border-radius: var(--surf-radius-md);
     min-width: 0;
   }
+  /* The open item is recessed one step from its plane, and what it holds sits on
+     that step: the pair passes to its children swapped. */
   .surf-accordion-item[data-open],
   .surf-collapsible[data-open] {
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
+    --surf-disclosure-plane: var(--surf-recessed);
+    --surf-disclosure-recessed: var(--surf-plane);
+  }
+  :is(.surf-accordion-item, .surf-collapsible)[data-open] > * {
+    --surf-plane: var(--surf-disclosure-plane);
+    --surf-recessed: var(--surf-disclosure-recessed);
   }
   .surf-disclosure-trigger {
     display: flex;
@@ -36,10 +44,16 @@
     overflow-wrap: anywhere;
   }
   .surf-disclosure-trigger:hover:not(:disabled) {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-disclosure-trigger:active:not(:disabled) {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-disclosure-trigger:focus-visible {
     outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);

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

@@ -46,7 +46,10 @@
       [aria-disabled='true'],
       :focus-visible
     ) {
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
     border-color: var(--surf-control-hover-border);
   }
   .surf-input:focus,
@@ -60,14 +63,14 @@
   .surf-select-trigger:disabled {
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
-    background: var(--surf-control-disabled-background);
+    background: var(--surf-recessed);
   }
-  /* Read-only shows a value, not a box to type in: the value sits on the surface
-     plane without the field's border. Its text stays at full ink, apart from a
-     disabled field, and focus still rings it, so the value stays copyable. */
+  /* Read-only shows a value, not a box to type in: the value sits on the recessed
+     step of its plane without the field's border. Its text stays at full ink, apart
+     from a disabled field, and focus still rings it, so the value stays copyable. */
   .surf-input[readonly]:not(:focus, [aria-invalid='true']) {
     border-color: transparent;
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
   }
   /* An invalid field keeps its edge while hovered; hover still tints the fill. */
   .surf-input[aria-invalid='true'],

package/dist/css/rules/file-upload.css

@@ -26,11 +26,18 @@
     padding-inline: var(--surf-file-inset);
     border: 1px solid transparent;
     border-radius: var(--surf-radius-lg);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
+    /* The file list sits on the drop zone: its progress tracks take the other step. */
+    --surf-file-plane: var(--surf-recessed);
+    --surf-file-recessed: var(--surf-plane);
+  }
+  .surf-file-dropzone > * {
+    --surf-plane: var(--surf-file-plane);
+    --surf-recessed: var(--surf-file-recessed);
   }
   .surf-file-upload[data-dragging] .surf-file-dropzone {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
   }
   .surf-file-picker {
     display: flex;
@@ -43,9 +50,6 @@
     flex-direction: row;
     width: fit-content;
     cursor: pointer;
-    font-size: var(--surf-type-body-size);
-    letter-spacing: var(--surf-type-body-tracking);
-    line-height: var(--surf-type-body-leading);
   }
   .surf-file-trigger[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);

package/dist/css/rules/filter-bar.css

@@ -15,17 +15,25 @@
     gap: var(--surf-space-4);
     min-inline-size: 0;
   }
+  /* A filter keeps its width; only the search field takes the room left in the row. */
   .surf-filter-bar-field {
     display: grid;
     gap: var(--surf-space-2);
-    flex: 1 1 12rem;
+    flex: 0 1 12rem;
     min-inline-size: 0;
     max-inline-size: 100%;
   }
   .surf-filter-bar-field[data-width='search'] {
     flex: 2 1 20rem;
   }
-  .surf-filter-bar-field > :is(.surf-control, .surf-select-trigger) {
+  /* On a phone each field fills its row. */
+  @media (max-width: 760px) {
+    .surf-filter-bar-field {
+      flex-grow: 1;
+    }
+  }
+  /* Select renders its trigger inside a .surf-select wrapper. */
+  .surf-filter-bar-field > :is(.surf-control, .surf-select) {
     inline-size: 100%;
     min-inline-size: 0;
   }
@@ -44,6 +52,28 @@
   }
 }
 @layer surflane.sizes {
+  /* Compact density: fields sit 8px apart, and a phone puts two filters in a row;
+     the search field keeps a row of its own. */
+  :where([data-ui-density='compact'], [data-ui-density='compact'] *):is(
+    .surf-filter-bar,
+    .surf-filter-bar-controls
+  ) {
+    gap: var(--surf-ui-density-inset);
+  }
+  @media (max-width: 760px) {
+    :where(
+        [data-ui-density='compact'],
+        [data-ui-density='compact'] *
+      ).surf-filter-bar-field:not([data-width='search']) {
+      flex: 1 1 calc(50% - var(--surf-ui-density-inset) / 2);
+    }
+    :where(
+        [data-ui-density='compact'],
+        [data-ui-density='compact'] *
+      ).surf-filter-bar-field[data-width='search'] {
+      flex-basis: 100%;
+    }
+  }
   .surf-filter-bar-actions > .surf-button {
     max-inline-size: 100%;
     min-height: var(--surf-control-height);

package/dist/css/rules/gauge.css

@@ -25,7 +25,7 @@
     height: var(--surf-space-2);
     overflow: hidden;
     border-radius: var(--surf-radius-full);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
   }
   .surf-gauge-indicator {
     background: var(--surf-ink-body);
@@ -35,7 +35,7 @@
   .surf-gauge-indicator[data-indeterminate] {
     width: 40%;
     height: inherit;
-    animation: surf-progress-pulse 1.4s ease-in-out infinite;
+    animation: surf-progress-pulse var(--surf-motion-pulse) ease-in-out infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .surf-gauge-indicator,

package/dist/css/rules/icon.css

@@ -21,11 +21,6 @@
     width: var(--surf-size-icon-large);
     height: var(--surf-size-icon-large);
   }
-  /* Deprecated: the 24px size, off the scale. Removed in a later minor. */
-  .surf-icon[data-size='lg'] {
-    width: var(--surf-icon-size-lg);
-    height: var(--surf-icon-size-lg);
-  }
   .surf-icon[data-directional='true']:dir(rtl) {
     transform: scaleX(-1);
   }

package/dist/css/rules/input-group.css

@@ -19,19 +19,25 @@
       border-color var(--surf-duration-fast) var(--surf-ease-out),
       box-shadow var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .surf-combobox-group:hover,
-  .surf-number-group:hover {
+  /* Hover as text fields have it: not while disabled or focused. */
+  :is(.surf-combobox-group, .surf-number-group):hover:not(
+      [data-disabled],
+      :focus-within
+    ) {
     border-color: var(--surf-control-hover-border);
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
-  /* Read-only shows a value on the surface plane, without the field's border, as
+  /* Read-only shows a value on the recessed step, without the field's border, as
      text fields do. */
   :is(.surf-combobox-group, .surf-number-group)[data-readonly]:not(
       :focus-within,
       [data-invalid]
     ) {
     border-color: transparent;
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
   }
   .surf-combobox-group:focus-within,
   .surf-number-group:focus-within {
@@ -66,10 +72,19 @@
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .surf-combobox-action[data-disabled],
-  .surf-number-step[data-disabled],
-  .surf-combobox-chip-remove[data-disabled] {
+  /* A button fades on its own only: in a disabled field the group faded it already. */
+  :is(
+      .surf-combobox-action,
+      .surf-number-step,
+      .surf-combobox-chip-remove
+    )[data-disabled]:not([data-disabled] *) {
     opacity: var(--surf-control-disabled-opacity);
+  }
+  :is(
+    .surf-combobox-action,
+    .surf-number-step,
+    .surf-combobox-chip-remove
+  )[data-disabled] {
     cursor: not-allowed;
   }
   /* A read-only field keeps its value readable and copyable, but its steppers do

package/dist/css/rules/link.css

@@ -1,9 +1,3 @@
 /* Link, with the styles of what it renders. */
 @layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
   surflane.sizes;
-
-@layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.surf-link) {
-    font-size: var(--surf-ui-font);
-  }
-}

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);
+  }
+}