@surflane/ui 0.12.0 → 0.13.0

package/dist/css/rules/combobox.css

@@ -28,19 +28,10 @@
       var(--surf-font-body);
     letter-spacing: var(--surf-type-body-tracking);
     outline: none;
-    transition:
-      opacity var(--surf-duration-fast) var(--surf-ease-out),
-      transform var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .surf-combobox-popup[data-starting-style] {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  .surf-combobox-popup[data-ending-style] {
-    opacity: 0;
-    transition: none;
-  }
-  .surf-combobox-list {
+  /* In its popup the list scrolls itself. An inline list leaves scrolling to the
+     container it is placed in, such as a ScrollArea. */
+  .surf-combobox-popup .surf-combobox-list {
     max-height: min(280px, var(--available-height));
     overflow: auto;
   }
@@ -61,11 +52,16 @@
     outline: none;
     overflow-wrap: anywhere;
   }
+  /* The highlight is a layer over the selected fill, so the keyboard position
+     shows on a chosen option too. */
   .surf-combobox-item[data-highlighted] {
-    background: var(--surf-menu-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-combobox-item[data-selected] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
   }
   .surf-combobox-item[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);
@@ -117,7 +113,7 @@
     gap: var(--surf-space-1);
     padding-inline-start: var(--surf-space-3);
     border-radius: var(--surf-radius-pill);
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
     font-size: var(--surf-type-caption-size);
     line-height: var(--surf-type-caption-leading);
@@ -143,7 +139,12 @@
     }
   }
   @media (forced-colors: active) {
-    .surf-combobox-item:is([data-selected], [data-highlighted]) {
+    .surf-combobox-item[data-highlighted] {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+    /* A chosen value keeps its chip edge when its fill is gone. */
+    .surf-combobox-chip {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
     }

package/dist/css/rules/dashboard.css

@@ -6,14 +6,35 @@
   /* As many columns as fit a panel's minimum width; one on a phone. */
   .surf-dashboard {
     --surf-dashboard-panel-min-width: 20rem;
+    --surf-dashboard-gap: var(--surf-space-4);
     display: grid;
     grid-template-columns: repeat(
       auto-fill,
       minmax(min(100%, var(--surf-dashboard-panel-min-width)), 1fr)
     );
-    gap: var(--surf-space-4);
+    gap: var(--surf-dashboard-gap);
     min-inline-size: 0;
   }
+  /* columns caps the count: a column is never narrower than its share of that many. */
+  .surf-dashboard[data-columns] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(
+        min(
+          100%,
+          max(
+            var(--surf-dashboard-panel-min-width),
+            (
+                100% - (var(--surf-dashboard-columns) - 1) *
+                  var(--surf-dashboard-gap)
+              ) /
+              var(--surf-dashboard-columns)
+          )
+        ),
+        1fr
+      )
+    );
+  }
   /* The header keeps its height; the content takes the rest of a stretched row. */
   .surf-dashboard-panel {
     grid-template-rows: auto minmax(0, 1fr);
@@ -42,6 +63,15 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    border-radius: var(--surf-radius-sm);
+  }
+  /* The title takes focus after Retry; a keyboard reader sees where they are. */
+  .surf-dashboard-panel-header .surf-card-title:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
+  }
+  .surf-dashboard-panel-header .surf-card-title:focus:not(:focus-visible) {
+    outline: none;
   }
   .surf-dashboard-panel-actions {
     display: flex;
@@ -53,6 +83,12 @@
     min-inline-size: 0;
     min-block-size: 0;
   }
+  /* A stale panel keeps its last content under the caution. */
+  .surf-dashboard-panel[data-state='stale'] > .surf-dashboard-panel-body {
+    display: grid;
+    align-content: start;
+    gap: var(--surf-space-3);
+  }
   .surf-dashboard-panel-empty {
     margin: 0;
     color: var(--surf-ink-muted);
@@ -64,3 +100,19 @@
     }
   }
 }
+@layer surflane.sizes {
+  /* Compact density: panels sit 12px apart. The card inside tightens itself. */
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-dashboard {
+    --surf-dashboard-gap: var(--surf-ui-density-gap);
+  }
+  :where(
+      [data-ui-density='compact'],
+      [data-ui-density='compact'] *
+    ).surf-dashboard-panel[data-state='stale']
+    > .surf-dashboard-panel-body {
+    gap: var(--surf-ui-density-inset);
+  }
+}

package/dist/css/rules/date-picker.css

@@ -31,7 +31,10 @@
   }
   :is(.surf-date-picker, .surf-time-field):not([data-disabled], [data-readonly])
     .surf-date-group:hover:not([data-focus-within], :focus-within) {
-    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-date-group[data-focus-within],
@@ -55,14 +58,14 @@
   :is(.surf-date-picker, .surf-time-field)[data-disabled] .surf-date-group {
     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: it sits on the surface plane
+  /* Read-only shows a value, not a box to type in: it sits on the recessed step
      without the field's border, as text fields do. */
   :is(.surf-date-picker, .surf-time-field)[data-readonly]:not([data-invalid])
     .surf-date-group:not([data-focus-within], :focus-within) {
     border-color: transparent;
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
   }
   .surf-date-input {
     display: flex;
@@ -73,6 +76,11 @@
     font: var(--surf-weight-regular)
       var(--surf-type-body-size)/var(--surf-type-body-leading)
       var(--surf-font-body);
+    /* iOS zooms the page into a focused segment whose text is under 16px. */
+    font-size: max(
+      var(--surf-control-text-min-size),
+      var(--surf-type-body-size)
+    );
     white-space: nowrap;
   }
   .surf-date-segment {
@@ -88,10 +96,12 @@
   .surf-date-segment[data-placeholder] {
     color: var(--surf-control-placeholder);
   }
+  /* The group carries the focus halo; the segment being typed into is marked
+     like a selected table row, a selected fill told apart by its 3:1 edge. */
   .surf-date-segment[data-focused] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
-    outline: 1px solid var(--surf-control-focus);
+    box-shadow: inset 0 0 0 1px var(--surf-selected-edge);
   }
   .surf-date-range-inputs {
     display: flex;
@@ -128,13 +138,19 @@
   :is(.surf-date-trigger, .surf-calendar-nav)[data-hovered]:not(
       [data-disabled]
     ) {
-    background: var(--surf-selected);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   :is(.surf-date-trigger, .surf-calendar-nav)[data-focus-visible] {
     outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
     outline-offset: var(--surf-focus-ring-offset);
   }
-  :is(.surf-date-trigger, .surf-calendar-nav)[data-disabled] {
+  /* A disabled field has faded its trigger with the group already. */
+  :is(.surf-date-trigger, .surf-calendar-nav)[data-disabled]:not(
+      [data-disabled] *
+    ) {
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
@@ -145,9 +161,9 @@
     overflow: auto;
     overscroll-behavior: contain;
     padding: var(--surf-space-2);
-    border: 1px solid var(--surf-line);
+    border: 1px solid var(--surf-menu-border);
     border-radius: var(--surf-radius-lg);
-    background: var(--surf-canvas);
+    background: var(--surf-menu-background);
     color: var(--surf-ink);
     box-shadow: var(--surf-shadow-float);
     z-index: var(--surf-layer-popup);
@@ -204,19 +220,19 @@
     outline: none;
     font-variant-numeric: tabular-nums;
   }
-  .surf-calendar-day[data-hovered]:not(
-      [data-disabled],
-      [data-unavailable],
-      [data-selected]
-    ) {
-    background: var(--surf-hover);
+  /* Hover is a layer, over a selected day's fill too. */
+  .surf-calendar-day[data-hovered]:not([data-disabled], [data-unavailable]) {
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-calendar-day[data-selected] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
   }
   .surf-calendar-day:is([data-selection-start], [data-selection-end]) {
-    background: var(--surf-brand-mark);
+    background-color: var(--surf-brand-mark);
     color: var(--surf-on-brand);
   }
   .surf-calendar-day[data-focus-visible] {
@@ -238,12 +254,12 @@
   @media (max-width: 760px), (pointer: coarse) {
     .surf-date-trigger,
     .surf-calendar-nav {
-      width: 40px;
-      height: 40px;
-      min-width: 40px;
+      width: var(--surf-control-target-size);
+      height: var(--surf-control-target-size);
+      min-width: var(--surf-control-target-size);
     }
     .surf-calendar-day {
-      min-height: 40px;
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (prefers-reduced-motion: reduce) {
@@ -267,10 +283,12 @@
       color: HighlightText;
       forced-color-adjust: none;
     }
-    .surf-calendar-day[data-focus-visible],
-    .surf-date-segment[data-focused] {
+    .surf-calendar-day[data-focus-visible] {
       outline-color: Highlight;
     }
+    .surf-date-segment[data-focused] {
+      outline: 1px solid Highlight;
+    }
   }
   .surf-calendar-grid :is(th, td) {
     padding: 0;
@@ -278,8 +296,13 @@
     min-width: 0;
     text-align: center;
   }
-  .surf-calendar-day[data-focus-visible][data-selected] {
-    outline-color: var(--surf-ink);
+  /* The ring sits inside the day. On a range end's brand fill the focus color
+     can match the fill, so it takes the color written on that fill. */
+  .surf-calendar-day:is(
+      [data-selection-start],
+      [data-selection-end]
+    )[data-focus-visible] {
+    outline-color: var(--surf-on-brand);
   }
 }
 @layer surflane.sizes {
@@ -287,7 +310,7 @@
     .surf-date-input,
     .surf-date-segment
   ) {
-    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);
   }
   :where([data-ui-size], [data-ui-size] *):is(.surf-date-trigger) > svg {

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,11 +163,21 @@
   .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
@@ -161,7 +187,10 @@
   /* 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));
+      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
     );
@@ -169,7 +198,7 @@
   :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-header h2 {
+  :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

@@ -32,7 +32,8 @@
       flex-grow: 1;
     }
   }
-  .surf-filter-bar-field > :is(.surf-control, .surf-select-trigger) {
+  /* 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;
   }
@@ -51,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);
-  }
-}