@threadlabs/looma 0.22.13 → 0.23.0

package/styles/ui-search-result-row.css

@@ -45,14 +45,23 @@
       align-items: flex-start;
       gap: var(--ui-search-result-row-gap, var(--ui-space-3));
       background: var(--ui-search-result-row-surface, transparent);
-      border: 1px solid var(--ui-search-result-row-border, transparent);
-      border-radius: var(--ui-radius-md);
+      border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
+      border-radius: var(--ui-selection-radius);
       color: inherit;
       cursor: pointer;
       text-align: left;
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :scope[data-ui-search-result-row-state~="density=compact"] {
+      min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
+      gap: var(--ui-search-result-row-gap, var(--ui-space-2));
+      align-items: center;
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
     :scope:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
@@ -60,13 +69,14 @@
     :scope[data-ui-search-result-row-state~="selected"] {
       background: var(
         --ui-search-result-row-selected-bg,
-        var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
+        var(--ui-selection-surface)
       );
+      color: var(--ui-selection-text);
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope:disabled {
@@ -104,6 +114,13 @@
       display: none;
     }
 
+    @media (forced-colors: active) {
+      :scope[data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled) {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -121,5 +138,8 @@
       margin: 0;
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-search-shell.css

@@ -97,7 +97,7 @@
       margin-inline: auto;
       overflow: hidden;
       background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
       box-shadow: var(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
@@ -184,7 +184,7 @@
       inline-size: 100%;
       min-block-size: var(--ui-control-min-block-size);
       padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-control-border);
+      border: var(--ui-border-width) solid var(--ui-control-border);
       border-radius: var(--ui-field-radius, var(--ui-radius-md));
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
@@ -194,8 +194,8 @@
 
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]:focus-visible) {
       border-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: var(--ui-focus-width);
     }
 
     /* Laid out like the dialog's action row: actions right-aligned, spaced as buttons, no fill. */

package/styles/ui-section.css

@@ -11,19 +11,19 @@
 
     :scope[data-ui-section-state~="variant=card"] {
       padding: var(--ui-space-5);
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }
 
     :scope[data-ui-section-state~="variant=divided"] {
       padding-block-start: var(--ui-space-6);
-      border-block-start: 1px solid var(--ui-border-divider);
+      border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     :scope[data-ui-section-state~="variant=card"][data-ui-section-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: 4px solid var(--ui-danger);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);
     }
 

package/styles/ui-select.css

@@ -50,7 +50,7 @@
       min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
-      border: 1px solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);
@@ -98,7 +98,11 @@
       box-shadow: var(
         --ui-select-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 

package/styles/ui-separator.css

@@ -12,13 +12,13 @@
       align-self: stretch;
       margin: 0;
       border: 0;
-      border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+      border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
 
     :scope[aria-orientation="vertical"] {
       block-size: auto;
       border-block-start: 0;
-      border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--ui-border-divider));
     }
 }
 @scope ([data-component~="ui-separator"]) to ([data-component]) {

package/styles/ui-sidebar.css

@@ -31,12 +31,12 @@
       max-inline-size: 100%;
       min-block-size: 0;
       background: var(--ui-sidebar-surface, var(--ui-surface-default));
-      border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+      border-inline-end: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     :scope[data-ui-sidebar-state~="side=end"] {
       border-inline-end: 0;
-      border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-divider));
+      border-inline-start: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
 
     /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
@@ -111,7 +111,7 @@
       inset-inline-start: 50%;
       inline-size: 6px;
       block-size: 22px;
-      border: 1px solid var(--ui-border-strong);
+      border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       opacity: 0;

package/styles/ui-stack.css

@@ -17,6 +17,9 @@
       margin: 0;
     }
 
+    :scope[data-ui-stack-state~="gap=none"] {
+      --_layout-gap: 0px;
+    }
     :scope[data-ui-stack-state~="gap=xs"] {
       --_layout-gap: var(--ui-space-2);
     }

package/styles/ui-status-message.css

@@ -19,7 +19,7 @@
 
     :scope[data-ui-status-message-state~="layout=panel"] {
       padding: var(--ui-space-6);
-      border: 1px dashed var(--ui-border-strong);
+      border: var(--ui-border-width) dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 

package/styles/ui-switch.css

@@ -58,7 +58,7 @@
       width: var(--_ui-switch-track-width, 2.5rem);
       height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-radius-round);
       background-color: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: var(--ui-control-inset);
@@ -91,8 +91,8 @@
     }
 
     input:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
-      outline-offset: 2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: var(--ui-focus-width);
     }
 
     :scope[data-ui-switch-state~="disabled"] {

package/styles/ui-table.css

@@ -41,8 +41,8 @@
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring);
-      outline-offset: -2px;
+      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+      outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
     :scope[data-ui-table-state~="density=compact"] {
@@ -92,7 +92,7 @@
     :where([data-slotted], [data-slotted] *):is(td) {
       block-size: var(--_row-size);
       padding: var(--_pad-block) var(--_pad-inline);
-      border-block-end: 1px solid var(--ui-border-subtle);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-subtle);
       text-align: start;
       vertical-align: middle;
     }

package/styles/ui-tabs.css

@@ -52,7 +52,7 @@
       overflow-y: hidden;
       overscroll-behavior: contain;
       scrollbar-width: thin;
-      border-block-end: 1px solid var(--ui-border-divider);
+      border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
@@ -78,7 +78,7 @@
       grid-auto-flow: row;
       grid-auto-columns: auto;
       border-block-end: 0;
-      border-inline-end: 1px solid var(--ui-border-divider);
+      border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -97,10 +97,10 @@
     .list button,
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
-      margin: 0 0 -1px;
+      margin: 0 0 calc(-1 * var(--ui-border-width));
       padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
       border: 0;
-      border-block-end: 2px solid transparent;
+      border-block-end: var(--ui-accent-line-width) solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       font: inherit;
@@ -146,7 +146,7 @@
     .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]:focus-visible) {
       position: relative;
       outline: none;
-      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+      box-shadow: inset 0 0 0 var(--ui-focus-width) color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
       border-radius: var(--ui-radius-sm);
     }
     .panels > :where([data-slotted], [data-slotted] *):is(*) {
@@ -155,9 +155,9 @@
 
     :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
     :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
-      margin: 0 -1px 0 0;
+      margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
       border-block-end: 0;
-      border-inline-end: 2px solid transparent;
+      border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;
     }
 

package/styles/ui-text.css

@@ -91,6 +91,14 @@
       text-align: center;
     }
 
+    :scope[data-ui-text-state~="font=sans"] {
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
+    :scope[data-ui-text-state~="wrap=anywhere"] {
+      overflow-wrap: anywhere;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;

package/styles/ui-textarea.css

@@ -33,7 +33,7 @@
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
-      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
@@ -77,7 +77,11 @@
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+          transparent
+        )
       );
     }
 

package/styles/ui-toast-region.css

@@ -129,7 +129,7 @@
       grid-template-columns: 1fr auto;
       gap: var(--ui-space-2);
       align-items: start;
-      border: 1px solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border: var(--ui-border-width) solid var(--_ui-toast-region-border, var(--ui-overlay-border, var(--ui-border-strong)));
       border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--_ui-toast-region-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
@@ -139,16 +139,16 @@
     }
 
     .toast[data-tone="info"] {
-      border-inline-start: 3px solid var(--ui-info-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-info-solid);
     }
     .toast[data-tone="success"] {
-      border-inline-start: 3px solid var(--ui-success-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-success-solid);
     }
     .toast[data-tone="warning"] {
-      border-inline-start: 3px solid var(--ui-warning-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-warning-solid);
     }
     .toast[data-tone="danger"] {
-      border-inline-start: 3px solid var(--ui-danger-solid);
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger-solid);
     }
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */

package/styles/ui-toast.css

@@ -32,8 +32,8 @@
       inline-size: 100%;
       margin: 0;
       padding: var(--ui-space-3) var(--ui-space-4);
-      border: 1px solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
-      border-inline-start: 3px solid var(--ui-toast-accent, var(--_ui-toast-accent));
+      border: var(--ui-border-width) solid var(--ui-toast-border, var(--ui-overlay-border, var(--ui-border-strong)));
+      border-inline-start: var(--ui-accent-line-width) solid var(--ui-toast-accent, var(--_ui-toast-accent));
       border-radius: var(--ui-toast-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
       background: var(--ui-toast-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--ui-text-primary);

package/styles/ui-tooltip.css

@@ -80,7 +80,7 @@
       position: relative;
       box-sizing: border-box;
       max-inline-size: var(--_ui-tooltip-max-inline-size, 18rem);
-      border: 1px solid var(--_tooltip-line);
+      border: var(--ui-border-width) solid var(--_tooltip-line);
       border-radius: var(--_ui-tooltip-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
       background: var(--_ui-tooltip-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
       color: var(--_ui-tooltip-text, var(--ui-text-primary));
@@ -125,27 +125,27 @@
       position: absolute;
       z-index: 1;
       inset-inline-start: var(--ui-space-3);
-      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inline-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       block-size: var(--_ui-tooltip-arrow-size, 0.625rem);
       box-sizing: border-box;
       background: inherit;
       border: 0 solid var(--_tooltip-line);
-      border-inline-end-width: 1px;
-      border-block-end-width: 1px;
-      border-end-end-radius: 1px;
+      border-inline-end-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
+      border-end-end-radius: var(--ui-border-width);
       transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
     }
 
     :scope[data-ui-actual-placement="bottom"] .surface::after {
-      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-block-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-block-end: auto;
       border-inline-end-width: 0;
       border-block-end-width: 0;
-      border-inline-start-width: 1px;
-      border-block-start-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
       border-end-end-radius: 0;
-      border-start-start-radius: 1px;
+      border-start-start-radius: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-align="center"] .surface::after {
@@ -166,16 +166,16 @@
 
     :scope[data-ui-actual-placement="left"] .surface::after {
       inset-inline-start: auto;
-      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
-      border-inline-end-width: 1px;
-      border-block-start-width: 1px;
+      inset-inline-end: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
+      border-inline-end-width: var(--ui-border-width);
+      border-block-start-width: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-placement="right"] .surface::after {
-      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - 0.5px);
+      inset-inline-start: calc(var(--_ui-tooltip-arrow-size, 0.625rem) / -2 - var(--ui-border-width) / 2);
       inset-inline-end: auto;
-      border-inline-start-width: 1px;
-      border-block-end-width: 1px;
+      border-inline-start-width: var(--ui-border-width);
+      border-block-end-width: var(--ui-border-width);
     }
 
     :scope[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,

package/styles/ui-top-bar.css

@@ -45,7 +45,7 @@
       padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
       padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
       background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
-      border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-divider));
+      border-block-end: var(--ui-border-width) solid var(--ui-top-bar-border, var(--ui-border-divider));
     }
 
     .leading,

package/styles/ui-tree-item.css

@@ -56,7 +56,7 @@
       min-block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
       font-size: var(--_ui-tree-item-font-size, var(--ui-font-size-sm));
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-selection-radius);
       color: var(--ui-text-secondary);
       transition:
         background-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -67,12 +67,20 @@
     }
 
     .row:hover,
-    :scope[data-ui-tree-item-state~="selected"] .row,
     .row:focus-within {
       color: var(--ui-text-primary);
       background: var(--ui-surface-muted);
     }
 
+    /* Selection is the same surface recipe as destination and choice rows. */
+    :scope[data-ui-tree-item-state~="selected"] > .row {
+      color: var(--ui-selection-text);
+      background: var(--ui-selection-surface);
+    }
+    :scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"]) > .row > .leading {
+      color: var(--ui-selection-text);
+    }
+
     :scope[data-ui-tree-item-state~="disabled"] .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
@@ -87,13 +95,13 @@
     }
 
     :scope:focus-visible .row {
-      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+      box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
     }
 
     /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
     :scope[data-drop-position="inside"] > .row {
       background: var(--ui-accent-subtle);
-      box-shadow: inset 0 0 0 1px var(--_ui-tree-drop-color, var(--ui-accent-solid));
+      box-shadow: inset 0 0 0 var(--ui-accent-line-width) var(--_ui-tree-drop-color, var(--ui-accent-solid));
     }
 
     .disclosure,
@@ -389,7 +397,7 @@
       z-index: 3;
       inset-inline: 1px;
       display: none;
-      block-size: 2px;
+      block-size: var(--ui-accent-line-width);
       border-radius: var(--ui-radius-round);
       background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
       pointer-events: none;
@@ -402,7 +410,7 @@
       inset-block-start: 50%;
       inline-size: 7px;
       block-size: 7px;
-      border: 2px solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
+      border: var(--ui-accent-line-width) solid var(--_ui-tree-drop-color, var(--ui-accent-solid));
       border-radius: var(--ui-radius-round);
       background: var(--ui-surface-elevated);
       transform: translateY(-50%);
@@ -417,12 +425,12 @@
 
     :scope[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
-      inset-block-start: -1px;
+      inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     :scope[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
-      inset-block-end: -1px;
+      inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
     }
 
     .children[hidden] {
@@ -484,6 +492,17 @@
       }
     }
 
+    @media (forced-colors: active) {
+      :scope:focus-visible > .row {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"]) > .row {
+        outline: var(--ui-border-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-border-width));
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {
       display: none;
@@ -492,6 +511,8 @@
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* Selection is the same surface recipe as destination and choice rows. */
+
     /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
 
     /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
@@ -552,5 +573,8 @@
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }