@surflane/ui 0.11.0 → 0.13.0

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,12 +253,23 @@
     .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. */
+  /* 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) -
+          var(--surf-panel-ring-room)
+      );
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-panel-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/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

@@ -11,11 +11,35 @@
     text-align: start;
     cursor: pointer;
   }
-  .surf-select-trigger > span:first-child {
+  .surf-select-trigger > span:first-child,
+  .surf-select-value {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Content width: the trigger fits its longest option and keeps that width. */
+  .surf-select[data-width='content'],
+  .surf-select[data-width='content'] .surf-select-trigger {
+    width: auto;
+  }
+  .surf-select-sizer {
+    display: grid;
+    min-width: 0;
+  }
+  .surf-select-sizer > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-select-sizer > [aria-hidden='true'] {
+    visibility: hidden;
+  }
+  .surf-select-separator {
+    block-size: 1px;
+    margin-block: var(--surf-space-1);
+    background: var(--surf-line);
+  }
   .surf-select-icon {
     display: flex;
     align-items: center;
@@ -50,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

@@ -11,12 +11,17 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-small);
     --surf-ui-file-padding: var(--surf-size-file-padding-small);
     --surf-ui-content-gap: var(--surf-size-content-gap-small);
+    /* Surface titles (Card, Sheet, Dialog) step down one role at Small. */
+    --surf-ui-title-size: var(--surf-type-subsection-size);
+    --surf-ui-title-leading: var(--surf-type-subsection-leading);
+    --surf-ui-title-tracking: var(--surf-type-subsection-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-small);
     --surf-ui-control-padding: var(--surf-size-control-padding-small);
     --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);
@@ -51,12 +56,16 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-default);
     --surf-ui-file-padding: var(--surf-size-file-padding-default);
     --surf-ui-content-gap: var(--surf-size-content-gap-default);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-default);
     --surf-ui-control-padding: var(--surf-size-control-padding-default);
     --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);
@@ -91,12 +100,16 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-large);
     --surf-ui-file-padding: var(--surf-size-file-padding-large);
     --surf-ui-content-gap: var(--surf-size-content-gap-large);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-large);
     --surf-ui-control-padding: var(--surf-size-control-padding-large);
     --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);
@@ -128,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

@@ -49,6 +49,35 @@
   .surf-stat-change[data-tone='down'] {
     color: var(--surf-trend-down-fg);
   }
+  /* The value's state: the tone's icon and text, on the value's line. */
+  .surf-stat-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--surf-space-1);
+    color: var(--surf-status-neutral-fg);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+    font-weight: var(--surf-weight-medium);
+  }
+  .surf-stat-status[data-tone='info'] {
+    color: var(--surf-status-info-fg);
+  }
+  .surf-stat-status[data-tone='success'] {
+    color: var(--surf-status-success-fg);
+  }
+  .surf-stat-status[data-tone='progress'] {
+    color: var(--surf-status-progress-fg);
+  }
+  /* Past a threshold the value takes the status color as well. */
+  .surf-stat-status[data-tone='caution'],
+  .surf-stat:has(> .surf-stat-status[data-tone='caution']) > .surf-stat-value {
+    color: var(--surf-status-caution-fg);
+  }
+  .surf-stat-status[data-tone='danger'],
+  .surf-stat:has(> .surf-stat-status[data-tone='danger']) > .surf-stat-value {
+    color: var(--surf-status-danger-fg);
+  }
   .surf-stat-caption {
     flex: 1 0 100%;
     color: var(--surf-ink-muted);
@@ -56,4 +85,41 @@
     line-height: var(--surf-type-caption-leading);
     letter-spacing: var(--surf-type-caption-tracking);
   }
+  /* A group: the shared label, then each value under its own name, side by side. */
+  .surf-stat-group {
+    display: grid;
+    gap: var(--surf-space-2);
+    min-width: 0;
+  }
+  .surf-stat-group-label {
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+  }
+  /* Each value takes its own width and wraps to a new line when the row is full. */
+  .surf-stat-group-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--surf-space-3) var(--surf-space-6);
+    min-width: 0;
+  }
+  /* In a group each value stacks its lines, so it is only as wide as the widest. */
+  .surf-stat-group-items > .surf-stat {
+    display: grid;
+    justify-items: start;
+    align-content: start;
+  }
+  .surf-stat-group-items .surf-stat-label {
+    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);
+  }
 }

package/dist/css/rules/tabs.css

@@ -14,7 +14,7 @@
     min-width: 0;
     max-width: 100%;
     padding: var(--surf-space-1);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     border-radius: var(--surf-radius-md);
     overflow: auto;
     scrollbar-width: thin;
@@ -38,15 +38,23 @@
     white-space: nowrap;
     outline: none;
   }
+  /* State layers paint over the tab's own fill, so hovering or pressing the
+     selected tab keeps it selected. */
   .surf-tabs-tab:hover:not(:disabled):not([data-disabled]) {
     color: var(--surf-ink);
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-tabs-tab:active:not(:disabled):not([data-disabled]) {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-tabs-tab[data-active] {
-    background: var(--surf-canvas);
+    background-color: var(--surf-plane);
     color: var(--surf-ink);
     font-weight: var(--surf-weight-medium);
   }
@@ -77,12 +85,12 @@
     height: var(--active-tab-height);
     box-sizing: border-box;
     border: 0;
-    background: var(--surf-canvas);
+    background: var(--surf-plane);
     border-radius: var(--surf-control-radius);
     pointer-events: none;
   }
   .surf-tabs-list:has(.surf-tabs-indicator) .surf-tabs-tab[data-active] {
-    background: transparent;
+    background-color: transparent;
     border-color: transparent;
   }
   .surf-tabs[data-orientation='vertical'] {

package/dist/css/rules/textarea.css

@@ -13,6 +13,34 @@
     scrollbar-width: thin;
     scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
+  /* Embedded: the pane it fills draws the boundary, so the editor keeps the pane's
+     plane and no edge of its own. An outside halo would fall on the pane's edge,
+     so focus is a ring inside it, and an invalid value an edge inside it. */
+  .surf-textarea[data-variant='embedded'] {
+    inline-size: 100%;
+    padding: var(--surf-space-4);
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    resize: none;
+  }
+  .surf-textarea[data-variant='embedded']:focus {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 var(--surf-focus-ring-width)
+      var(--surf-control-focus);
+  }
+  .surf-textarea[data-variant='embedded'][aria-invalid='true'] {
+    box-shadow: inset 0 0 0 1px var(--surf-status-danger-fg);
+  }
+  .surf-textarea[data-variant='embedded'][aria-invalid='true']:focus {
+    box-shadow: inset 0 0 0 var(--surf-focus-ring-width)
+      var(--surf-status-danger-fg);
+  }
+  @media (forced-colors: active) {
+    .surf-textarea[data-variant='embedded']:focus {
+      outline-offset: var(--surf-focus-ring-inset);
+    }
+  }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *).surf-textarea {

package/dist/css/rules/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* The span, the interval and the button sit on one line in a header or toolbar. */
+  .surf-time-range {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--surf-space-2);
+    max-inline-size: 100%;
+  }
+}

package/dist/css/rules/toast.css

@@ -32,7 +32,9 @@
     box-sizing: border-box;
     width: 100%;
     padding: var(--surf-space-4);
-    border: 0;
+    /* No backdrop sets a toast apart from the same-tone page, and its shadow fades
+       in the dark theme: it keeps the floating edge. */
+    border: 1px solid var(--surf-menu-border);
     border-radius: var(--surf-radius-lg);
     background: var(--surf-menu-background);
     color: var(--surf-ink);