@threadlabs/looma 0.22.13 → 0.23.0

package/components/ui-search-result-row/ui-search-result-row.html

@@ -1,5 +1,7 @@
 <template component="ui-search-result-row">
   <defs>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact keeps a title and location together in a 3.125rem row for small destination pickers; comfortable preserves the existing rich result spacing.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables the row's button, so it cannot be chosen or focused, and gives it a flat muted treatment.</prop>
     <prop name="selected" type="boolean" default="false"
@@ -61,14 +63,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);
     }
 
+    :host-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);
+    }
+
     :host:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
@@ -76,13 +87,14 @@
     :host-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);
     }
 
     :host: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));
     }
 
     :host:disabled {
@@ -127,6 +139,13 @@
       margin: 0;
     }
 
+    @media (forced-colors: active) {
+      :host-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. */
     :host[hidden] {
       display: none;

package/components/ui-search-shell/ui-search-shell.html

@@ -122,7 +122,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))));
     }
@@ -136,7 +136,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);
@@ -146,8 +146,8 @@
 
     :slotted(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);
     }
 
     .status,

package/components/ui-section/ui-section.html

@@ -30,19 +30,19 @@
 
     :host-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);
     }
 
     :host-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);
     }
 
     :host-state([variant="card"][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/components/ui-select/ui-select.html

@@ -64,7 +64,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);
@@ -112,7 +112,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/components/ui-separator/ui-separator.html

@@ -17,13 +17,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));
     }
 
     :host[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));
     }
   </style>
 </template>

package/components/ui-sidebar/ui-sidebar.html

@@ -69,12 +69,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));
     }
 
     :host-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
@@ -149,7 +149,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/components/ui-stack/ui-stack.html

@@ -1,8 +1,8 @@
 <template component="ui-stack">
   <defs>
-    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
-    >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,
-      set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
+    <prop name="gap" type="keyword" values="none, xs, s, m, l, xl"
+    >Space between items, on the spacing scale: none is zero, xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap
+      custom property, set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="align" type="keyword" values="start, center, end, stretch"
     >How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the
       start, in the middle, or against the end.</prop>
@@ -29,6 +29,9 @@
       margin: 0;
     }
 
+    :host-state([gap="none"]) {
+      --_layout-gap: 0px;
+    }
     :host-state([gap="xs"]) {
       --_layout-gap: var(--ui-space-2);
     }

package/components/ui-status-message/ui-status-message.html

@@ -36,7 +36,7 @@
 
     :host-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/components/ui-switch/ui-switch.html

@@ -95,7 +95,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);
@@ -128,8 +128,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);
     }
 
     :host-state([disabled]) {

package/components/ui-table/ui-table.html

@@ -51,8 +51,8 @@
     }
 
     :host: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));
     }
 
     :host-state([density="compact"]) {
@@ -85,7 +85,7 @@
     :slotted(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/components/ui-tabs/ui-tabs.html

@@ -94,16 +94,16 @@
       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);
     }
 
     .list button,
     .list > :slotted(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;
@@ -153,7 +153,7 @@
     .list > :slotted(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);
     }
 
@@ -173,14 +173,14 @@
       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);
     }
 
     :host-state([orientation="vertical"]) .list button,
     :host-state([orientation="vertical"]) .list > :slotted(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/components/ui-text/ui-text.html

@@ -1,5 +1,9 @@
 <template component="ui-text">
   <defs>
+    <prop name="font" type="keyword" values="inherit, sans" default="inherit"
+    >Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.</prop>
+    <prop name="wrap" type="keyword" values="normal, anywhere" default="normal"
+    >Use anywhere for unbroken values such as long destinations; ordinary prose keeps its normal wrapping.</prop>
     <prop name="size" type="keyword" values="inherit, xs, sm, md, lg" default="inherit"
     >The step on the type scale. inherit (the default) keeps the size of the text around it; xs is for fine print, sm for supporting text such as help and
       metadata, md is body text, and lg is a lead paragraph.</prop>
@@ -129,6 +133,14 @@
       text-align: center;
     }
 
+    :host-state([font="sans"]) {
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
+    :host-state([wrap="anywhere"]) {
+      overflow-wrap: anywhere;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-textarea/ui-textarea.html

@@ -58,7 +58,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);
@@ -102,7 +102,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/components/ui-toast/ui-toast.html

@@ -52,8 +52,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/components/ui-toast-region/ui-toast-region.html

@@ -140,7 +140,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)));
@@ -150,16 +150,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/components/ui-tooltip/ui-tooltip.html

@@ -117,7 +117,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));
@@ -165,27 +165,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);
     }
 
     :host[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);
     }
 
     :host[data-ui-actual-align="center"] .surface::after {
@@ -206,16 +206,16 @@
 
     :host[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);
     }
 
     :host[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);
     }
 
     :host[data-ui-actual-placement="left"][data-ui-actual-align="start"] .surface::after,

package/components/ui-top-bar/ui-top-bar.html

@@ -51,7 +51,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/components/ui-tree-item/ui-tree-item.html

@@ -157,7 +157,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),
@@ -168,12 +168,20 @@
     }
 
     .row:hover,
-    :host-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. */
+    :host-state([selected]) > .row {
+      color: var(--ui-selection-text);
+      background: var(--ui-selection-surface);
+    }
+    :host-state([selected]):not([aria-disabled="true"]) > .row > .leading {
+      color: var(--ui-selection-text);
+    }
+
     :host-state([disabled]) .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
@@ -188,13 +196,13 @@
     }
 
     :host: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. */
     :host[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,
@@ -517,7 +525,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;
@@ -530,7 +538,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%);
@@ -545,12 +553,12 @@
 
     :host[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));
     }
 
     :host[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] {
@@ -612,6 +620,17 @@
       }
     }
 
+    @media (forced-colors: active) {
+      :host:focus-visible > .row {
+        outline: var(--ui-focus-width) solid Highlight;
+        outline-offset: calc(-1 * var(--ui-focus-width));
+      }
+      :host-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. */
     :host[hidden] {
       display: none;