@threadlabs/looma 0.31.2 → 0.31.4

package/vue/components.css

@@ -945,12 +945,12 @@ ol:where([data-hn-ui-breadcrumbs]) {
 }
 
 /* A rounded SVG arc grows and recedes over a quiet full-circle track. */
-@keyframes ui-spinner-rotate-87fd2b5f {
+@keyframes ui-spinner-rotate-f38ab49c {
 100% {
     transform: rotate(1turn);
 }
 }
-@keyframes ui-spinner-dash-87fd2b5f {
+@keyframes ui-spinner-dash-f38ab49c {
 0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -986,7 +986,7 @@ svg {
     display: block;
     inline-size: 100%;
     block-size: 100%;
-    animation: ui-spinner-rotate-87fd2b5f 2s linear infinite;
+    animation: ui-spinner-rotate-f38ab49c 2s linear infinite;
 }
 circle {
     stroke-width: 3;
@@ -999,7 +999,7 @@ circle {
     stroke: currentColor;
     stroke-dasharray: 90, 150;
     stroke-dashoffset: 0;
-    animation: ui-spinner-dash-87fd2b5f 1.5s ease-in-out infinite;
+    animation: ui-spinner-dash-f38ab49c 1.5s ease-in-out infinite;
 }
 @media (prefers-reduced-motion: reduce) {
 svg,.arc {
@@ -1783,7 +1783,7 @@ html[data-ui-input-modality="touch"]
 /* The label, and under it an optional line saying what the choice means. */
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-aac88235 {
+@keyframes ui-checkbox-check-6120eba6 {
 from {
     opacity: 0;
     transform: translateY(-0.09rem) rotate(45deg) scale(0.55);
@@ -1878,7 +1878,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
     border-width: 0 0.125rem 0.125rem 0;
     opacity: 1;
     transform: translateY(-0.09rem) rotate(45deg);
-    animation: ui-checkbox-check-aac88235 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
+    animation: ui-checkbox-check-6120eba6 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
       both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
@@ -2654,148 +2654,490 @@ button:where([data-hn-ui-combobox]) {
     display: none;
 }
 }
+@scope ([data-slotted~="ui-combobox"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-combobox-label-text: var(--ui-combobox-label-text);
+    --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
+    --_ui-combobox-affordance-text: var(--ui-combobox-affordance-text);
+    --_ui-combobox-max-block-size: var(--ui-combobox-max-block-size);
+    --_ui-combobox-option-text: var(--ui-combobox-option-text);
+    --_ui-combobox-message-text: var(--ui-combobox-message-text);
+    --_ui-combobox-option-check: var(--ui-combobox-option-check);
+    --_ui-combobox-item-min-block-size: var(--ui-combobox-item-min-block-size);
+    --_ui-combobox-item-input-min-inline-size: var(--ui-combobox-item-input-min-inline-size);
+    --_ui-combobox-item-item-max-inline-size: var(--ui-combobox-item-item-max-inline-size);
+    --_ui-combobox-radius: var(--ui-combobox-radius);
+    --_ui-combobox-invalid-border: var(--ui-combobox-invalid-border);
+    --_ui-combobox-popup-surface: var(--ui-combobox-popup-surface);
+    --_ui-combobox-popup-border: var(--ui-combobox-popup-border);
+    --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
+    --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-container-gutters {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-container-measure {
-  syntax: "*";
-  inherits: false;
+    --_row: var(--ui-control-size-md);
+    display: grid;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    font: inherit;
 }
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-container) to ([data-hn]) {
-:scope:where([data-hn-ui-container]) {
-    --_container-measure: 65ch;
-    --_container-gutters: var(--ui-space-4);
-    display: block;
-    inline-size: 100%;
-    max-inline-size: var(--ui-container-measure, var(--_container-measure));
-    margin-inline: auto;
-    padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+label:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--_ui-combobox-label-text, var(--ui-text-primary));
+    font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
+    font-weight: 500;
 }
-:scope[data-ui-container-state~="measure=narrow"]:where([data-hn-ui-container]) {
-    --_container-measure: 45ch;
+.control:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
 }
-:scope[data-ui-container-state~="fill"]:where([data-hn-ui-container]) {
+.field:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     box-sizing: border-box;
+    min-block-size: var(--_row);
+    flex: 1 1 auto;
     display: flex;
-    flex-direction: column;
-    flex: 1;
     min-inline-size: 0;
-    min-block-size: 0;
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-default));
+    border-radius: var(--_ui-combobox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-default));
+    box-shadow: var(--ui-control-inset);
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope[data-ui-container-state~="measure=wide"]:where([data-hn-ui-container]) {
-    --_container-measure: 80ch;
+.field:focus-within:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
 }
-:scope[data-ui-container-state~="gutters=s"]:where([data-hn-ui-container]) {
-    --_container-gutters: var(--ui-space-3);
+.entry:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: flex;
+    flex: 1 1 auto;
+    min-inline-size: 0;
 }
-:scope[data-ui-container-state~="gutters=m"]:where([data-hn-ui-container]) {
-    --_container-gutters: var(--ui-space-4);
+.help:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ui-control-size-sm);
+    block-size: var(--ui-control-size-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-round);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope[data-ui-container-state~="gutters=l"]:where([data-hn-ui-container]) {
-    --_container-gutters: var(--ui-space-5);
+.help:hover:enabled:where(:scope, :scope *):where([data-hn-ui-combobox]),.help[aria-expanded="true"]:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    background: color-mix(in srgb, currentColor 8%, transparent);
+    color: var(--ui-text-primary);
 }
-:scope[hidden]:where([data-hn-ui-container]) {
-    display: none;
+.help:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
 }
+.help:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-context-menu-surface {
-  syntax: "*";
-  inherits: false;
+.help-icon:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
 }
-@property --ui-context-menu-border {
-  syntax: "*";
-  inherits: false;
+input:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where(:scope, :scope
+    *):where([data-hn-ui-combobox])::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
 }
-@property --ui-context-menu-radius {
-  syntax: "*";
-  inherits: false;
+input:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    appearance: none;
+    width: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+    box-sizing: border-box;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: var(--ui-line-height-tight);
+    padding: var(--ui-space-2) var(--ui-space-3);
+    margin: 0;
+    outline: none;
 }
-@property --ui-context-menu-shadow {
-  syntax: "*";
-  inherits: false;
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    --_row: var(--ui-control-size-sm);
 }
-@property --ui-context-menu-z-index {
-  syntax: "*";
-  inherits: false;
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-sm);
 }
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-context-menu) to ([data-hn]) {
-:scope:where([data-hn-ui-context-menu]) {
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-context-menu-surface: var(--ui-context-menu-surface);
-    --_ui-context-menu-border: var(--ui-context-menu-border);
-    --_ui-context-menu-radius: var(--ui-context-menu-radius);
-    --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
-    --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
-
-    display: contents;
+:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    --_row: var(--ui-control-size-lg);
 }
-.menu:where([data-hn-ui-context-menu]) {
-    position: fixed;
-    inset: auto;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
+:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    padding: var(--ui-space-3) var(--ui-space-4);
+    font-size: var(--ui-font-size-md);
+}
+button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    align-self: stretch;
+    border: 0;
+    border-radius: var(--ui-radius-md);
+    background: transparent;
+    color: var(--_ui-combobox-affordance-text, var(--ui-text-secondary));
+    font: inherit;
+    font-weight: 400;
+    min-inline-size: 2rem;
+    padding: 0 var(--ui-space-1);
+    cursor: pointer;
+}
+.affordance-icon:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: block;
+    inline-size: var(--ui-icon-size-sm);
+    block-size: var(--ui-icon-size-sm);
+}
+button:hover:enabled:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+}
+button:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    outline: none;
+    background: var(--ui-surface-muted);
+    box-shadow: inset 0 0 0 var(--ui-focus-width)
+      color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+}
+input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+}
+.field:has(input:disabled):where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+}
+:where(.ui-combobox)[data-ui-combobox-state~="validationStatus=error"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]),:where(.ui-combobox)[data-ui-combobox-state~="invalid"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    border-color: var(
+      --_ui-combobox-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active)))
+    );
+}
+.popup:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     box-sizing: border-box;
+    min-inline-size: 12rem;
+    max-inline-size: calc(100vw - 1rem);
+    max-block-size: var(--_ui-combobox-max-block-size, 18rem);
+    overflow: auto;
+    margin: 0;
     padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid
+      var(--_ui-combobox-popup-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-combobox-popup-radius, var(--ui-overlay-radius, var(--ui-radius-md)));
     background: var(
-      --_ui-context-menu-surface,
+      --_ui-combobox-popup-surface,
       var(--ui-overlay-surface, var(--ui-surface-elevated))
     );
-    border: var(--ui-border-width) solid
-      var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
-    border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    color: var(--ui-text-primary);
     box-shadow: var(
-      --_ui-context-menu-shadow,
+      --_ui-combobox-popup-shadow,
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    outline: 0;
-    overflow: auto;
-    z-index: var(--_ui-context-menu-z-index, 1000);
-    min-width: 12rem;
-    opacity: 0;
-    transform: translateY(-4px) scale(0.99);
-    transition:
-      opacity var(--ui-motion-fast) var(--ui-motion-ease),
-      transform var(--ui-motion-fast) var(--ui-motion-ease),
-      display var(--ui-motion-fast) allow-discrete,
-      overlay var(--ui-motion-fast) allow-discrete;
-}
-.menu hr:where([data-hn-ui-context-menu]) {
-    align-self: stretch;
-    block-size: 0;
-    margin: var(--ui-space-1) 0;
-    border: 0;
-    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
-.menu:popover-open:where([data-hn-ui-context-menu]) {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-@starting-style {
-.menu:popover-open:where([data-hn-ui-context-menu]) {
-      opacity: 0;
-      transform: translateY(-4px) scale(0.99);
-}
 }
-.menu[hidden]:where([data-hn-ui-context-menu]),.menu[popover]:not(:popover-open):where([data-hn-ui-context-menu]) {
+[hidden]:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     display: none;
 }
-@media (prefers-reduced-motion: reduce) {
-.menu:where([data-hn-ui-context-menu]) {
-      transition: none;
-}
+.option[aria-disabled="true"]:where(:scope, :scope *)
+    .primary:where([data-hn-ui-combobox]),.option[aria-disabled="true"]:where(:scope, :scope *)
+    .secondary:where([data-hn-ui-combobox]) {
+    color: var(--ui-disabled-text);
 }
-:scope[hidden]:where([data-hn-ui-context-menu]) {
-    display: none;
+.primary:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: block;
+    color: var(--_ui-combobox-option-text, inherit);
+    font-weight: 500;
+}
+.detail:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: grid;
+    gap: var(--ui-space-0-5);
+    min-inline-size: 0;
+}
+.line:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-2);
+}
+.description:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--ui-text-muted);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-md);
+}
+.message:where(:scope, :scope *):where([data-hn-ui-combobox]),.group:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
+    font-weight: 400;
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height-md);
+    overflow-wrap: anywhere;
+}
+.group:where(:scope, :scope *):where([data-hn-ui-combobox]),.popup:where(:scope, :scope *) .message:where([data-hn-ui-combobox]) {
+    padding: var(--ui-space-2) var(--ui-space-3);
+}
+.sr-only:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+@media (pointer: coarse) {
+:where(.ui-combobox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+      --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+}
+button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+      min-inline-size: 2.75rem;
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+}
+    /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
+       body-size text: below 16px, iOS zooms the page into the focused field. */
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+      --_row: var(--ui-control-min-block-size);
+}
+:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+      input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+      font-size: inherit;
+}
+}
+@media (forced-colors: active) {
+.field:where(:scope, :scope *):where([data-hn-ui-combobox]),.popup:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+      border-color: CanvasText;
+}
+.option.active:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+      outline-color: Highlight;
+}
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    align-items: center;
+    min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
+    padding: var(--ui-space-1);
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    align-items: center;
+    gap: var(--ui-space-1);
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    .entry:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox])::-webkit-scrollbar {
+    display: none;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
+    width: auto;
+    min-block-size: 1.75rem;
+    padding: var(--ui-space-0-5) var(--ui-space-1);
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    min-block-size: 0;
+    padding: var(--ui-space-0-5);
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
+    padding: 0 var(--ui-space-1);
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    .field:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    min-block-size: 0;
+}
+:where(.ui-combobox)[data-ui-combobox-state~="multiple"]:where(.ui-combobox)[data-ui-combobox-state~="size=lg"]
+    input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    min-block-size: calc(
+      var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1)
+    );
+}
+.item:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    appearance: none;
+    display: inline-flex;
+    flex: none;
+    min-inline-size: 0;
+    max-inline-size: min(100%, var(--_ui-combobox-item-item-max-inline-size, 12rem));
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: default;
+}
+.item:focus-visible:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-border-width);
+}
+.item:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]) {
+    color: var(--ui-disabled-text);
+}
+:where(.ui-combobox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-container-gutters {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-container-measure {
+  syntax: "*";
+  inherits: false;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-container) to ([data-hn]) {
+:scope:where([data-hn-ui-container]) {
+    --_container-measure: 65ch;
+    --_container-gutters: var(--ui-space-4);
+    display: block;
+    inline-size: 100%;
+    max-inline-size: var(--ui-container-measure, var(--_container-measure));
+    margin-inline: auto;
+    padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+}
+:scope[data-ui-container-state~="measure=narrow"]:where([data-hn-ui-container]) {
+    --_container-measure: 45ch;
+}
+:scope[data-ui-container-state~="fill"]:where([data-hn-ui-container]) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    min-block-size: 0;
+}
+:scope[data-ui-container-state~="measure=wide"]:where([data-hn-ui-container]) {
+    --_container-measure: 80ch;
+}
+:scope[data-ui-container-state~="gutters=s"]:where([data-hn-ui-container]) {
+    --_container-gutters: var(--ui-space-3);
+}
+:scope[data-ui-container-state~="gutters=m"]:where([data-hn-ui-container]) {
+    --_container-gutters: var(--ui-space-4);
+}
+:scope[data-ui-container-state~="gutters=l"]:where([data-hn-ui-container]) {
+    --_container-gutters: var(--ui-space-5);
+}
+:scope[hidden]:where([data-hn-ui-container]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-context-menu-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-context-menu-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-context-menu) to ([data-hn]) {
+:scope:where([data-hn-ui-context-menu]) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-context-menu-surface: var(--ui-context-menu-surface);
+    --_ui-context-menu-border: var(--ui-context-menu-border);
+    --_ui-context-menu-radius: var(--ui-context-menu-radius);
+    --_ui-context-menu-shadow: var(--ui-context-menu-shadow);
+    --_ui-context-menu-z-index: var(--ui-context-menu-z-index);
+
+    display: contents;
+}
+.menu:where([data-hn-ui-context-menu]) {
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: var(--ui-space-1);
+    background: var(
+      --_ui-context-menu-surface,
+      var(--ui-overlay-surface, var(--ui-surface-elevated))
+    );
+    border: var(--ui-border-width) solid
+      var(--_ui-context-menu-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--_ui-context-menu-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    box-shadow: var(
+      --_ui-context-menu-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    outline: 0;
+    overflow: auto;
+    z-index: var(--_ui-context-menu-z-index, 1000);
+    min-width: 12rem;
+    opacity: 0;
+    transform: translateY(-4px) scale(0.99);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform var(--ui-motion-fast) var(--ui-motion-ease),
+      display var(--ui-motion-fast) allow-discrete,
+      overlay var(--ui-motion-fast) allow-discrete;
+}
+.menu hr:where([data-hn-ui-context-menu]) {
+    align-self: stretch;
+    block-size: 0;
+    margin: var(--ui-space-1) 0;
+    border: 0;
+    border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+}
+.menu:popover-open:where([data-hn-ui-context-menu]) {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+}
+@starting-style {
+.menu:popover-open:where([data-hn-ui-context-menu]) {
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+}
+}
+.menu[hidden]:where([data-hn-ui-context-menu]),.menu[popover]:not(:popover-open):where([data-hn-ui-context-menu]) {
+    display: none;
+}
+@media (prefers-reduced-motion: reduce) {
+.menu:where([data-hn-ui-context-menu]) {
+      transition: none;
+}
+}
+:scope[hidden]:where([data-hn-ui-context-menu]) {
+    display: none;
 }
 }
 
@@ -3042,13 +3384,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-0e4bd8b5 {
+@keyframes ui-dialog-enter-3b5ed45a {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-0e4bd8b5 {
+@keyframes ui-dialog-backdrop-enter-3b5ed45a {
 from {
     background-color: transparent;
 }
@@ -3096,7 +3438,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-0e4bd8b5 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-3b5ed45a var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3217,7 +3559,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-0e4bd8b5 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-3b5ed45a var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -3226,24 +3568,205 @@ footer:empty:where([data-hn-ui-dialog]) {
     transition: none;
 }
 }
+@scope ([data-slotted~="ui-dialog"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-dialog-duration: var(--ui-dialog-duration);
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-disclosure-trigger-min-block-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-disclosure-trigger-padding-block {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-disclosure-trigger-padding-inline {
-  syntax: "*";
-  inherits: false;
-}
-
-/* Density resolves into the summary row's own values; the public tokens still override them. */
-
-/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
+    position: fixed;
+    inset: 0;
+    box-sizing: border-box;
+    inline-size: min(
+      calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2),
+      var(--ui-dialog-max-width, var(--_ui-dialog-size, 440px))
+    );
+    max-inline-size: none;
+    max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4)) * 2);
+    margin: auto;
+    padding: 0;
+    overflow: hidden;
+    flex-direction: column;
+    background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+    border: var(--ui-border-width) solid
+      var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+    border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)))
+    );
+    visibility: hidden;
+    pointer-events: none;
+    opacity: 0;
+    transform: scale(0.96);
+    transition:
+      opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      visibility var(--ui-dialog-duration, var(--ui-motion-base)),
+      display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
+      overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
+}
+:where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    display: flex;
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+    animation: ui-dialog-enter-3b5ed45a var(--ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+}
+:where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    --_ui-dialog-size: 360px;
+}
+:where(.ui-dialog)[data-ui-dialog-state~="size=lg"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    --_ui-dialog-size: 640px;
+}
+:where(.ui-dialog)[data-ui-dialog-state~="size=fullscreen"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100dvh;
+    max-block-size: none;
+    margin: 0;
+    border-radius: var(--ui-dialog-radius, 0);
+}
+:where(.ui-dialog)[data-ui-dialog-state~="alert"]
+    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    display: none;
+}
+header:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-3);
+    flex: none;
+    /* The title's ink sits inside its line box and the taller close target. Balance that
+       visible top inset against the action row's bottom inset, not just the boxes. */
+    padding: calc(var(--ui-space-3) + var(--ui-space-1) / 2) var(--ui-space-3) var(--ui-space-3)
+      var(--ui-space-5);
+}
+:where(.ui-dialog)[data-ui-dialog-state~="alert"]
+    header:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    padding: var(--ui-space-5) var(--ui-space-5) var(--ui-space-3);
+}
+:where(.ui-dialog)
+    .title:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    flex: 1;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: var(--ui-text-primary);
+    letter-spacing: normal;
+    font-size: var(--ui-font-size-lg);
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+}
+.close:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--ui-control-size-sm);
+    block-size: var(--ui-control-size-sm);
+    padding: 0;
+    border: 0;
+    border-radius: var(--ui-radius-round);
+    background: transparent;
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::before,.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::after {
+    content: "";
+    grid-area: 1 / 1;
+    inline-size: 0.875rem;
+    block-size: 1.5px;
+    border-radius: 1px;
+    background: currentColor;
+    transform: rotate(45deg);
+}
+.close:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope
+    *):where([data-hn-ui-dialog])::after {
+    transform: rotate(-45deg);
+}
+.close:hover:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    background: var(--ui-surface-muted);
+    color: var(--ui-text-primary);
+}
+.close:focus-visible:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+}
+@media (pointer: coarse) {
+.close:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+      inline-size: var(--ui-control-min-block-size);
+      block-size: var(--ui-control-min-block-size);
+}
+}
+html[data-ui-input-modality="touch"]
+    :where(.ui-dialog)
+    .close:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    inline-size: var(--ui-control-min-block-size);
+    block-size: var(--ui-control-min-block-size);
+}
+.body:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
+}
+footer:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--ui-space-2);
+    padding: 0 var(--ui-space-5) var(--ui-space-5);
+}
+footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
+    display: none;
+}
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
+    background-color: transparent;
+    transition:
+      background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+      display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease)
+      allow-discrete,
+      overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease)
+      allow-discrete;
+}
+:where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
+    background-color: var(--ui-overlay-backdrop);
+    animation: ui-dialog-backdrop-enter-3b5ed45a var(--_ui-dialog-duration, var(--ui-motion-base))
+      var(--ui-motion-ease);
+}
+:where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
+    background-color: transparent;
+    animation: none;
+    transition: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-disclosure-trigger-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-disclosure-trigger-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-disclosure-trigger-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+
+/* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
  * select or combobox. Stacked disclosures share their dividers. */
 
 /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
@@ -4843,6 +5366,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
 :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+    box-sizing: border-box;
     position: relative;
     top: auto;
     width: max-content;
@@ -5389,6 +5913,8 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
   syntax: "*";
   inherits: false;
 }
+
+/* A toolbar or card can supply its own surface, including an unclipped shadow. */
 @scope (.ui-popover) to ([data-hn]) {
 :scope:where([data-hn-ui-popover]) {
     --_ui-popover-surface: var(--ui-popover-surface);
@@ -5425,6 +5951,13 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
 }
+:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover]) {
+    overflow: visible;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
 :scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover]) {
     display: none;
 }
@@ -7489,6 +8022,73 @@ ul:where([data-hn-ui-editor-slash-menu-group]) {
     display: none;
 }
 }
+@scope ([data-slotted~="ui-listbox"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-listbox):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    position: relative;
+    box-sizing: border-box;
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--ui-space-1);
+    border: var(--ui-border-width) solid var(--ui-listbox-border, var(--ui-control-border));
+    border-radius: var(--ui-listbox-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-listbox-surface, var(--ui-control-surface));
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(--ui-control-inset);
+    outline: none;
+}
+.choices:where(:scope, :scope *):where([data-hn-ui-listbox]) {
+    display: flex;
+    flex-direction: column;
+    max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
+}
+:where(.ui-listbox):not([data-enhanced]):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+:where(.ui-listbox):not([data-enhanced])
+    .choices:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]),:where(.ui-listbox)[data-enhanced]
+    .fallback:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    display: none;
+}
+.fallback:where(:scope, :scope *):where([data-hn-ui-listbox]) {
+    box-sizing: border-box;
+    inline-size: 100%;
+    font: inherit;
+}
+.validity:where(:scope, :scope *):where([data-hn-ui-listbox]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    opacity: 0;
+    pointer-events: none;
+}
+:where(.ui-listbox):focus-visible:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    border-color: var(--ui-control-focus);
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-focus-width);
+    box-shadow: var(--ui-listbox-focus-shadow, var(--ui-focus-halo));
+}
+:where(.ui-listbox)[aria-invalid="true"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    border-color: var(--ui-listbox-invalid-border, var(--ui-field-danger, var(--ui-danger)));
+}
+:where(.ui-listbox)[aria-disabled="true"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    background: var(--ui-control-surface-disabled);
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
+}
+:where(.ui-listbox)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-listbox"]))):where([data-hn-ui-listbox]) {
+    display: none;
+}
+}
 
 @scope (.ui-menu-group) to ([data-hn]) {
 :scope:where([data-hn-ui-menu-group]) {
@@ -9408,36 +10008,95 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     display: none;
 }
 }
+@scope ([data-slotted~="ui-toast"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-toast):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    --_ui-toast-accent: var(--ui-border-strong);
+    --_ui-toast-surface: var(--ui-surface-muted);
 
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-toast-region-surface {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-toast-region-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-toast-region-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-toast-region-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-toast-region-enter-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-toast-region-exit-duration {
-  syntax: "*";
-  inherits: false;
-}
-
-/* Leaving slides on down and fades; the controller removes the toast when this ends. */
-@keyframes ui-toast-enter-cab264c9 {
-from {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    border: var(--ui-border-width) solid
+      var(
+        --ui-toast-border,
+        var(--ui-overlay-border, 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-toast-surface)));
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-toast-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    pointer-events: auto;
+}
+:where(.ui-toast)[data-ui-toast-state~="tone=info"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    --_ui-toast-accent: var(--ui-info-solid);
+    --_ui-toast-surface: var(--ui-info-soft);
+}
+:where(.ui-toast)[data-ui-toast-state~="tone=success"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    --_ui-toast-accent: var(--ui-success-solid);
+    --_ui-toast-surface: var(--ui-success-soft);
+}
+:where(.ui-toast)[data-ui-toast-state~="tone=warning"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    --_ui-toast-accent: var(--ui-warning-solid);
+    --_ui-toast-surface: var(--ui-warning-soft);
+}
+:where(.ui-toast)[data-ui-toast-state~="tone=danger"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    --_ui-toast-accent: var(--ui-danger-solid);
+    --_ui-toast-surface: var(--ui-danger-soft);
+}
+.message:where(:scope, :scope *):where([data-hn-ui-toast]) {
+    min-inline-size: 0;
+    flex: 1;
+}
+.action:not(:has(> *)):where(:scope, :scope *):where([data-hn-ui-toast]) {
+    display: none;
+}
+:where(.ui-toast)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast"]))):where([data-hn-ui-toast]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-toast-region-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-enter-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-exit-duration {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Leaving slides on down and fades; the controller removes the toast when this ends. */
+@keyframes ui-toast-enter-1bebce00 {
+from {
     opacity: 0;
     transform: translateY(-1rem);
 }
@@ -9446,7 +10105,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-cab264c9 {
+@keyframes ui-toast-exit-1bebce00 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9456,7 +10115,7 @@ to {
     transform: translateY(0.75rem);
 }
 }
-@keyframes ui-toast-enter-bottom-cab264c9 {
+@keyframes ui-toast-enter-bottom-1bebce00 {
 from {
     opacity: 0;
     transform: translateY(1rem);
@@ -9466,7 +10125,7 @@ to {
     transform: translateY(0);
 }
 }
-@keyframes ui-toast-exit-bottom-cab264c9 {
+@keyframes ui-toast-exit-bottom-1bebce00 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -9557,7 +10216,7 @@ to {
       --_ui-toast-region-shadow,
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
-    animation: ui-toast-enter-cab264c9 var(--_ui-toast-region-enter-duration, 0.32s)
+    animation: ui-toast-enter-1bebce00 var(--_ui-toast-region-enter-duration, 0.32s)
       var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 .toast[data-tone="info"]:where([data-hn-ui-toast-region]) {
@@ -9577,17 +10236,17 @@ to {
     --_ui-toast-region-tone-surface: var(--ui-danger-soft);
 }
 .toast.closing:where([data-hn-ui-toast-region]) {
-    animation: ui-toast-exit-cab264c9 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+    animation: ui-toast-exit-1bebce00 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
       both;
     pointer-events: none;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-enter-bottom-cab264c9;
+    animation-name: ui-toast-enter-bottom-1bebce00;
 }
 :is(:scope[data-ui-toast-region-state~="placement=bottom"], :scope[data-ui-toast-region-state~="placement=bottom-start"], :scope[data-ui-toast-region-state~="placement=bottom-end"])
     .toast.closing:where([data-hn-ui-toast-region]) {
-    animation-name: ui-toast-exit-bottom-cab264c9;
+    animation-name: ui-toast-exit-bottom-1bebce00;
 }
 @media (prefers-reduced-motion: reduce) {
 .toast:where([data-hn-ui-toast-region]),.toast.closing:where([data-hn-ui-toast-region]) {
@@ -9605,6 +10264,130 @@ to {
     display: none;
 }
 }
+@scope ([data-slotted~="ui-toast-region"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-toast-region):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-toast-region-surface: var(--ui-toast-region-surface);
+    --_ui-toast-region-border: var(--ui-toast-region-border);
+    --_ui-toast-region-radius: var(--ui-toast-region-radius);
+    --_ui-toast-region-shadow: var(--ui-toast-region-shadow);
+    --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+    --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
+    position: fixed;
+    top: calc(var(--ui-space-4) + env(safe-area-inset-top));
+    right: auto;
+    bottom: auto;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 9999;
+    display: grid;
+    gap: var(--ui-space-2);
+    inline-size: min(24rem, calc(100vw - var(--ui-space-4) * 2));
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    box-shadow: none;
+    pointer-events: none;
+}
+:where(.ui-toast-region):not(:popover-open):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    display: none;
+}
+:where(.ui-toast-region)[data-ui-toast-region-state~="placement=top-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]),:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    left: auto;
+    right: auto;
+    inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
+    transform: none;
+}
+:where(.ui-toast-region)[data-ui-toast-region-state~="placement=top-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]),:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    left: auto;
+    right: auto;
+    inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
+    transform: none;
+}
+:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]),:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]),:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    top: auto;
+    bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
+}
+.toast:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    --_ui-toast-region-accent: var(--ui-border-strong);
+    --_ui-toast-region-tone-surface: var(--ui-surface-muted);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: var(--ui-space-2);
+    align-items: start;
+    border: var(--ui-border-width) solid
+      var(--_ui-toast-region-border, var(--ui-overlay-border, var(--_ui-toast-region-accent)));
+    border-radius: var(--_ui-toast-region-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+    padding: var(--ui-space-3) var(--ui-space-4);
+    /* The close button's internal space supplies the rest of the trailing inset. */
+    padding-inline-end: var(--ui-space-2);
+    background: var(
+      --_ui-toast-region-surface,
+      var(--ui-overlay-surface, var(--_ui-toast-region-tone-surface))
+    );
+    color: var(--ui-text-primary);
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-normal);
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --_ui-toast-region-shadow,
+      var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
+    );
+    animation: ui-toast-enter-1bebce00 var(--_ui-toast-region-enter-duration, 0.32s)
+      var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+.toast[data-tone="info"]:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    --_ui-toast-region-accent: var(--ui-info-solid);
+    --_ui-toast-region-tone-surface: var(--ui-info-soft);
+}
+.toast[data-tone="success"]:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    --_ui-toast-region-accent: var(--ui-success-solid);
+    --_ui-toast-region-tone-surface: var(--ui-success-soft);
+}
+.toast[data-tone="warning"]:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    --_ui-toast-region-accent: var(--ui-warning-solid);
+    --_ui-toast-region-tone-surface: var(--ui-warning-soft);
+}
+.toast[data-tone="danger"]:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    --_ui-toast-region-accent: var(--ui-danger-solid);
+    --_ui-toast-region-tone-surface: var(--ui-danger-soft);
+}
+.toast.closing:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    animation: ui-toast-exit-1bebce00 var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease)
+      both;
+    pointer-events: none;
+}
+:is(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    animation-name: ui-toast-enter-bottom-1bebce00;
+}
+:is(:where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-start"], :where(.ui-toast-region)[data-ui-toast-region-state~="placement=bottom-end"])
+    .toast.closing:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    animation-name: ui-toast-exit-bottom-1bebce00;
+}
+@media (prefers-reduced-motion: reduce) {
+.toast:where(:scope, :scope *):where([data-hn-ui-toast-region]),.toast.closing:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+      animation: none;
+}
+}
+.message:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    min-inline-size: 0;
+    align-self: center;
+}
+.dismiss:where(:scope, :scope *):where([data-hn-ui-toast-region]) {
+    align-self: center;
+}
+:where(.ui-toast-region)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-toast-region"]))):where([data-hn-ui-toast-region]) {
+    display: none;
+}
+}
 
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-top-bar-actions-gap {
@@ -9713,102 +10496,620 @@ to {
     --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
     --_ui-default-tree-item-label-padding-block: 0;
 }
-:scope:where([data-hn-ui-tree]) {
-    /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
-       starts again from its own settings. */
-    --_ui-tree-indent: var(--ui-tree-indent);
-    --_ui-tree-drop-color: var(--ui-tree-drop-color);
-    --_ui-default-tree-item-marquee: initial;
-    --_ui-default-tree-item-min-block-size: initial;
-    --_ui-default-tree-item-font-size: initial;
-    --_ui-default-tree-item-label-padding-block: initial;
-    display: block;
-    min-inline-size: 0;
-    padding-inline-start: var(--ui-tree-gutter, 0px);
+:scope:where([data-hn-ui-tree]) {
+    /* Hooks do not inherit: the tree hands its own to its items here, and a tree nested in an item
+       starts again from its own settings. */
+    --_ui-tree-indent: var(--ui-tree-indent);
+    --_ui-tree-drop-color: var(--ui-tree-drop-color);
+    --_ui-default-tree-item-marquee: initial;
+    --_ui-default-tree-item-min-block-size: initial;
+    --_ui-default-tree-item-font-size: initial;
+    --_ui-default-tree-item-label-padding-block: initial;
+    display: block;
+    min-inline-size: 0;
+    padding-inline-start: var(--ui-tree-gutter, 0px);
+}
+:scope[data-move-mode]:where([data-hn-ui-tree])::after {
+    content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
+    display: block;
+    padding: var(--ui-space-2);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+}
+:scope[hidden]:where([data-hn-ui-tree]) {
+    display: none;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-tree-item-depth {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-item-font-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-item-label-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-item-label-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tree-item-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+
+/* 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. */
+
+/* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
+
+/* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
+
+/* The label spans the row's height and centres its content, so slotted content (a link) can
+   stretch to fill the row as its own hit area; the padding tokens remove the inset. */
+
+/* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
+   its own text and reading as overflow. */
+
+/* The controls sit over the label's end, so the text fades out where they begin. The fade is
+   the truncation mark while it shows: an ellipsis under it would read as a second one. */
+
+/* A hovered row reads its whole name: the label slides far enough to show the end, rests
+   there, and starts again. Only when it actually overflows — the controller measures by how
+   much — after the controls have taken their place over its end — and hands over the distance
+   and a duration from it, so every name moves at the same speed. */
+
+/* This comes after the hover fade, which it replaces at the same specificity. While the name
+   slides, the label reaches back under the icon (the controller measures how far) with its text
+   where it was, and fades out across the gap before the icon, fully gone where the icon begins
+   to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
+@keyframes ui-tree-item-marquee-fc4c8748 {
+from {
+    transform: translateX(0);
+}
+to {
+    transform: translateX(var(--_marquee-distance));
+}
+}
+
+/* Reduced motion keeps the fade, which already says the name continues. */
+
+/* Without hover there is no reveal, so the controls keep their own column. */
+
+/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+   patch rather than as a control. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-tree-item) to ([data-hn]) {
+:scope:where([data-hn-ui-tree-item]) {
+    /* Hooks do not inherit, so the parts below read them from the root. The tree's density
+       sets the defaults, in --_ui-default-*. */
+    --_ui-tree-item-min-block-size: var(
+      --ui-tree-item-min-block-size,
+      var(--_ui-default-tree-item-min-block-size)
+    );
+    --_ui-tree-item-font-size: var(
+      --ui-tree-item-font-size,
+      var(--_ui-default-tree-item-font-size)
+    );
+    --_ui-tree-item-label-padding-block: var(
+      --ui-tree-item-label-padding-block,
+      var(--_ui-default-tree-item-label-padding-block)
+    );
+    --_ui-tree-item-label-padding-inline: var(--ui-tree-item-label-padding-inline);
+
+    --_tree-row-min-height: 32px;
+    --_tree-disclosure-size: 16px;
+
+    position: relative;
+    display: block;
+    min-inline-size: 0;
+    margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
+}
+.row:where([data-hn-ui-tree-item]) {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
+    align-items: center;
+    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-selection-radius);
+    color: var(--ui-text-secondary);
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      min-block-size var(--ui-motion-base) var(--ui-motion-ease);
+}
+.row:hover:where([data-hn-ui-tree-item]),.row:focus-within:where([data-hn-ui-tree-item]) {
+    color: var(--ui-text-primary);
+    background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+}
+:scope[data-ui-tree-item-state~="selected"] > .row:where([data-hn-ui-tree-item]) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+    background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
+    box-shadow: inset 0 0 0 var(--ui-border-width)
+      var(--_ui-selection-context-border, var(--ui-selection-border));
+}
+:scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
+    > .row
+    > .leading:where([data-hn-ui-tree-item]) {
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+}
+:scope[data-ui-tree-item-state~="disabled"] .row:where([data-hn-ui-tree-item]) {
+    color: var(--ui-disabled-text);
+    background: var(--ui-disabled-surface);
+    box-shadow: none;
+}
+:scope[data-dragging]:not([data-move-source]) .row:where([data-hn-ui-tree-item]) {
+    opacity: 0.42;
+}
+:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .leading:where([data-hn-ui-tree-item]) {
+    opacity: 0.42;
+}
+:scope:focus:where([data-hn-ui-tree-item]) {
+    outline: none;
+}
+:scope:focus-visible .row:where([data-hn-ui-tree-item]) {
+    box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
+}
+:scope[data-drop-position="inside"] > .row:where([data-hn-ui-tree-item]) {
+    background: var(--ui-accent-subtle);
+    box-shadow: inset 0 0 0 var(--ui-accent-line-width)
+      var(--_ui-tree-drop-color, var(--ui-accent-solid));
+}
+.disclosure:where([data-hn-ui-tree-item]),.disclosure-spacer:where([data-hn-ui-tree-item]) {
+    grid-column: 1;
+    grid-row: 1;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 28px;
+}
+.disclosure:where([data-hn-ui-tree-item]) {
+    display: grid;
+    /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
+    place-items: center start;
+    padding: 0;
+    color: var(--ui-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    cursor: pointer;
+}
+.disclosure[hidden]:where([data-hn-ui-tree-item]) {
+    display: none;
+}
+.selection-hit:where([data-hn-ui-tree-item]) {
+    display: none;
+    grid-column: 2;
+    grid-row: 1;
+    place-items: center;
+    inline-size: 1.25rem;
+    block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
+    cursor: pointer;
+}
+.selection-checkbox:where([data-hn-ui-tree-item]) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    accent-color: var(--ui-accent-solid);
+}
+:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item]) {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
+}
+:scope[data-selection-mode="multiple"]
+    > .row
+    > .selection-hit:where([data-hn-ui-tree-item]) {
+    display: grid;
+}
+:scope[data-selection-mode="multiple"] > .row > .leading:where([data-hn-ui-tree-item]) {
+    grid-column: 3;
+}
+:scope[data-selection-mode="multiple"] > .row > .label:where([data-hn-ui-tree-item]) {
+    grid-column: 4;
+}
+.disclosure:hover:where([data-hn-ui-tree-item]) {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-elevated);
+}
+.disclosure-icon:where([data-hn-ui-tree-item]) {
+    display: grid;
+    place-items: center;
+    inline-size: 12px;
+    block-size: 12px;
+    transform: rotate(-90deg);
+    transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.disclosure-icon:where([data-hn-ui-tree-item])::before {
+    display: block;
+    inline-size: 0.375rem;
+    block-size: 0.375rem;
+    border-inline-end: 1.5px solid currentColor;
+    border-block-end: 1.5px solid currentColor;
+    content: "";
+    /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
+    transform: translateY(-20%) rotate(45deg);
+}
+:scope[aria-expanded="true"]
+    > .row
+    > .disclosure
+    > .disclosure-icon:where([data-hn-ui-tree-item]) {
+    transform: rotate(0deg);
+}
+.drag-handle svg:where([data-hn-ui-tree-item]) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+}
+.leading:where([data-hn-ui-tree-item]) {
+    display: inline-grid;
+    place-items: center;
+    grid-column: 2;
+    grid-row: 1;
+    inline-size: 1em;
+    block-size: 1em;
+    margin-inline-start: var(--ui-space-1);
+    color: var(--ui-text-muted);
+    /* Above the label, so a sliding name passes under the icon. */
+    position: relative;
+    z-index: 1;
+}
+.leading:empty:where([data-hn-ui-tree-item]) {
+    display: none;
+}
+:where(:not([data-hn-ui-tree-item])):is(svg),:where(:not([data-hn-ui-tree-item])):is(img) {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    flex: none;
+}
+.label:where([data-hn-ui-tree-item]) {
+    grid-column: 3;
+    grid-row: 1;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
+    overflow: hidden;
+    padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1))
+      var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
+    /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+       is where the controller reads the length in pixels to stop a sliding name before the fade. */
+    column-gap: var(--ui-space-1);
+}
+.label-text:where([data-hn-ui-tree-item]) {
+    display: flex;
+    align-items: center;
+    /* Stretches, so slotted content can still be the row's full-height hit area. */
+    align-self: stretch;
+    block-size: 100%;
+    min-inline-size: 0;
+    inline-size: 100%;
+    white-space: nowrap;
+}
+.label-text > :where(:not([data-hn-ui-tree-item])):is(*) {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+}
+.row:hover > .label:where([data-hn-ui-tree-item]),.row:focus-within > .label:where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]) {
+    text-overflow: clip;
+    mask-image: linear-gradient(
+      to right,
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+}
+.row:hover > .label:dir(rtl):where([data-hn-ui-tree-item]),.row:focus-within > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+    mask-image: linear-gradient(
+      to left,
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+}
+.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
+    /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
+       long enough to read rather than sliding back and forth. */
+    animation: ui-tree-item-marquee-fc4c8748 var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    will-change: transform;
+}
+.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {
+    margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+    padding-inline-start: calc(
+      var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      ),
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+}
+.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+    mask-image: linear-gradient(
+      to left,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      ),
+      #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
+      transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+    );
+}
+@media (prefers-reduced-motion: reduce) {
+.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
+      animation: none;
+}
+}
+.row:hover > .label > :where(:not([data-hn-ui-tree-item])):is(*),.row:focus-within > .label > :where(:not([data-hn-ui-tree-item])):is(*) {
+    text-overflow: clip;
+}
+.actions:where([data-hn-ui-tree-item]) {
+    position: absolute;
+    z-index: 1;
+    inset-block: 0;
+    inset-inline-end: 0;
+    display: inline-flex;
+    align-items: center;
+    min-inline-size: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.row:hover > .actions:where([data-hn-ui-tree-item]),.row:focus-within > .actions:where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+    > .row
+    > .actions:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .actions:where([data-hn-ui-tree-item]) {
+    opacity: 1;
+    pointer-events: auto;
+}
+@media (hover: none), (pointer: coarse) {
+.row:where([data-hn-ui-tree-item]) {
+      grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+}
+.actions:where([data-hn-ui-tree-item]) {
+      position: static;
+      grid-column: 4;
+      grid-row: 1;
+      padding-inline-start: 0;
+      background: none;
+      opacity: 1;
+      pointer-events: auto;
+}
+.row:is(:hover, :focus-within) > .label:where([data-hn-ui-tree-item]),.row:is(:hover, :focus-within) > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+      mask-image: none;
+}
+.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {
+      mask-image: linear-gradient(
+        to right,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+}
+
+    /* Persistent content has its own column on touch. Fade only the label's end. */
+:scope[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:where([data-hn-ui-tree-item]) {
+      mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+}
+:scope[data-ui-tree-item-state~="actionsVisible"]
+      > .row
+      > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+      mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+}
+.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+      mask-image: linear-gradient(
+        to left,
+        transparent var(--_marquee-icon-width, 0px),
+        #000 calc(
+          var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+        )
+      );
+}
+:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item]) {
+      grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+}
+:scope[data-selection-mode="multiple"]
+      > .row
+      > .actions:where([data-hn-ui-tree-item]) {
+      grid-column: 5;
+}
+}
+.drag-handle:where([data-hn-ui-tree-item]) {
+    position: absolute;
+    z-index: 2;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    inline-size: var(--_tree-disclosure-size);
+    block-size: 24px;
+    display: grid;
+    place-items: center;
+    padding: 5px 2px;
+    color: var(--ui-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    cursor: grab;
+    /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
+       the pointer onto it must not hide it on the way. */
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+.row:hover .drag-handle:where([data-hn-ui-tree-item]),.drag-handle:hover:where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where([data-hn-ui-tree-item]),:scope[data-dragging] > .row > .drag-handle:where([data-hn-ui-tree-item]) {
+    opacity: 1;
+}
+:scope[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle:where([data-hn-ui-tree-item]) {
+    inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+}
+.drag-handle:hover:where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where([data-hn-ui-tree-item]) {
+    color: var(--ui-text-primary);
+    background: var(--ui-surface-hover);
+}
+.drag-handle:active:where([data-hn-ui-tree-item]) {
+    cursor: grabbing;
+}
+.drop-indicator:where([data-hn-ui-tree-item]) {
+    position: absolute;
+    z-index: 3;
+    inset-inline: 1px;
+    display: none;
+    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;
+}
+.drop-indicator:where([data-hn-ui-tree-item])::before,.drop-indicator:where([data-hn-ui-tree-item])::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: 7px;
+    block-size: 7px;
+    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%);
+}
+.drop-indicator:where([data-hn-ui-tree-item])::before {
+    inset-inline-start: -1px;
+}
+.drop-indicator:where([data-hn-ui-tree-item])::after {
+    inset-inline-end: -1px;
+}
+:scope[data-drop-position="before"]
+    > .row
+    > .row-drop-indicator:where([data-hn-ui-tree-item]) {
+    display: block;
+    inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
+}
+:scope[data-drop-position="after"]
+    > .subtree-drop-indicator:where([data-hn-ui-tree-item]) {
+    display: block;
+    inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
+}
+.children[hidden]:where([data-hn-ui-tree-item]) {
+    display: none;
+}
+html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-tree-item]) {
+    --_tree-row-min-height: 44px;
+}
+html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item]) {
+    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
+}
+html[data-ui-input-modality="touch"] :scope .drag-handle:where([data-hn-ui-tree-item]),html[data-ui-input-modality="touch"]
+    :scope[data-ui-tree-item-state~="isContainer"]
+    > .row
+    > .drag-handle:where([data-hn-ui-tree-item]) {
+    position: relative;
+    grid-column: 1;
+    grid-row: 1;
+    inset: auto;
+    inline-size: 44px;
+    block-size: 44px;
+    padding: 14px;
+    opacity: 1;
+    transform: none;
+    cursor: pointer;
+}
+html[data-ui-input-modality="touch"] :scope .disclosure:where([data-hn-ui-tree-item]) {
+    grid-column: 2;
+}
+html[data-ui-input-modality="touch"] :scope .leading:where([data-hn-ui-tree-item]) {
+    grid-column: 3;
+}
+html[data-ui-input-modality="touch"] :scope .label:where([data-hn-ui-tree-item]) {
+    grid-column: 4;
+}
+html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row:where([data-hn-ui-tree-item]) {
+    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
+}
+html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row
+    > .selection-hit:where([data-hn-ui-tree-item]) {
+    grid-column: 3;
+    inline-size: 44px;
+    block-size: 44px;
+}
+html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row
+    > .leading:where([data-hn-ui-tree-item]) {
+    grid-column: 4;
+}
+html[data-ui-input-modality="touch"]
+    :scope[data-selection-mode="multiple"]
+    > .row
+    > .label:where([data-hn-ui-tree-item]) {
+    grid-column: 5;
 }
-:scope[data-move-mode]:where([data-hn-ui-tree])::after {
-    content: "Choose a destination row, or use Up and Down; Right nests inside a branch. Enter places it, Escape cancels.";
-    display: block;
-    padding: var(--ui-space-2);
-    color: var(--ui-text-secondary);
-    font-size: var(--ui-font-size-sm);
+@media (hover: none), (pointer: coarse) {
+html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item]) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-:scope[hidden]:where([data-hn-ui-tree]) {
-    display: none;
+html[data-ui-input-modality="touch"] :scope .actions:where([data-hn-ui-tree-item]) {
+      grid-column: 5;
 }
+html[data-ui-input-modality="touch"]
+      :scope[data-selection-mode="multiple"]
+      > .row:where([data-hn-ui-tree-item]) {
+      grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-tree-item-depth {
-  syntax: "*";
-  inherits: false;
+html[data-ui-input-modality="touch"]
+      :scope[data-selection-mode="multiple"]
+      > .row
+      > .actions:where([data-hn-ui-tree-item]) {
+      grid-column: 6;
 }
-@property --ui-tree-item-font-size {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-tree-item-label-padding-block {
-  syntax: "*";
-  inherits: false;
+@media (prefers-reduced-motion: reduce) {
+.row:where([data-hn-ui-tree-item]),.disclosure-icon:where([data-hn-ui-tree-item]),.drag-handle:where([data-hn-ui-tree-item]) {
+      transition: none;
 }
-@property --ui-tree-item-label-padding-inline {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-tree-item-min-block-size {
-  syntax: "*";
-  inherits: false;
+@media (forced-colors: active) {
+:scope:focus-visible > .row:where([data-hn-ui-tree-item]) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-focus-width));
 }
-
-/* 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. */
-
-/* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
-
-/* Icons match the label's size (as in Knit's tree): an unsized SVG would otherwise render 300×150. */
-
-/* The label spans the row's height and centres its content, so slotted content (a link) can
-   stretch to fill the row as its own hit area; the padding tokens remove the inset. */
-
-/* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
-   its own text and reading as overflow. */
-
-/* The controls sit over the label's end, so the text fades out where they begin. The fade is
-   the truncation mark while it shows: an ellipsis under it would read as a second one. */
-
-/* A hovered row reads its whole name: the label slides far enough to show the end, rests
-   there, and starts again. Only when it actually overflows — the controller measures by how
-   much — after the controls have taken their place over its end — and hands over the distance
-   and a duration from it, so every name moves at the same speed. */
-
-/* This comes after the hover fade, which it replaces at the same specificity. While the name
-   slides, the label reaches back under the icon (the controller measures how far) with its text
-   where it was, and fades out across the gap before the icon, fully gone where the icon begins
-   to cover it: the name slips under the icon rather than stopping at a hard edge beside it. */
-@keyframes ui-tree-item-marquee-16fe002b {
-from {
-    transform: translateX(0);
+:scope[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
+      > .row:where([data-hn-ui-tree-item]) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
 }
-to {
-    transform: translateX(var(--_marquee-distance));
 }
+:scope[hidden]:where([data-hn-ui-tree-item]) {
+    display: none;
 }
-
-/* Reduced motion keeps the fade, which already says the name continues. */
-
-/* Without hover there is no reveal, so the controls keep their own column. */
-
-/* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
-   empty column, right before the icon; a branch's disclosure is there, so its handle sits just
-   outside the row. It is bare until pointed at: a resting surface behind it read as a faint
-   patch rather than as a control. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-tree-item) to ([data-hn]) {
-:scope:where([data-hn-ui-tree-item]) {
+}
+@scope ([data-slotted~="ui-tree-item"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-tree-item):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     /* Hooks do not inherit, so the parts below read them from the root. The tree's density
        sets the defaults, in --_ui-default-*. */
     --_ui-tree-item-min-block-size: var(
@@ -9833,7 +11134,7 @@ to {
     min-inline-size: 0;
     margin-inline-start: calc(var(--_ui-tree-item-indent-step, 0) * var(--_ui-tree-indent, 16px));
 }
-.row:where([data-hn-ui-tree-item]) {
+.row:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     position: relative;
     display: grid;
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr);
@@ -9850,52 +11151,61 @@ to {
       box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
       min-block-size var(--ui-motion-base) var(--ui-motion-ease);
 }
-.row:hover:where([data-hn-ui-tree-item]),.row:focus-within:where([data-hn-ui-tree-item]) {
+.row:hover:where(:scope, :scope *):where([data-hn-ui-tree-item]),.row:focus-within:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     color: var(--ui-text-primary);
     background: var(--_ui-selection-context-surface, var(--ui-surface-muted));
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
 }
-:scope[data-ui-tree-item-state~="selected"] > .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
     background: var(--_ui-selection-context-surface, var(--ui-selection-surface));
     box-shadow: inset 0 0 0 var(--ui-border-width)
       var(--_ui-selection-context-border, var(--ui-selection-border));
 }
-:scope[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
+:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]:not([aria-disabled="true"])
     > .row
-    > .leading:where([data-hn-ui-tree-item]) {
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     color: var(--_ui-selection-context-text, var(--ui-selection-text));
 }
-:scope[data-ui-tree-item-state~="disabled"] .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-ui-tree-item-state~="disabled"]
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     color: var(--ui-disabled-text);
     background: var(--ui-disabled-surface);
     box-shadow: none;
 }
-:scope[data-dragging]:not([data-move-source]) .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-dragging]:not([data-move-source])
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     opacity: 0.42;
 }
-:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .leading:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     opacity: 0.42;
 }
-:scope:focus:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item):focus:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     outline: none;
 }
-:scope:focus-visible .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item):focus-visible
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     box-shadow: 0 0 0 var(--ui-focus-width) var(--ui-focus-ring);
 }
-:scope[data-drop-position="inside"] > .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-drop-position="inside"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     background: var(--ui-accent-subtle);
     box-shadow: inset 0 0 0 var(--ui-accent-line-width)
       var(--_ui-tree-drop-color, var(--ui-accent-solid));
 }
-.disclosure:where([data-hn-ui-tree-item]),.disclosure-spacer:where([data-hn-ui-tree-item]) {
+.disclosure:where(:scope, :scope *):where([data-hn-ui-tree-item]),.disclosure-spacer:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     grid-column: 1;
     grid-row: 1;
     inline-size: var(--_tree-disclosure-size);
     block-size: 28px;
 }
-.disclosure:where([data-hn-ui-tree-item]) {
+.disclosure:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: grid;
     /* Start-aligned: the chevron's ink, not its hit area, aligns with the content above it. */
     place-items: center start;
@@ -9906,10 +11216,10 @@ to {
     border-radius: var(--ui-radius-sm);
     cursor: pointer;
 }
-.disclosure[hidden]:where([data-hn-ui-tree-item]) {
+.disclosure[hidden]:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: none;
 }
-.selection-hit:where([data-hn-ui-tree-item]) {
+.selection-hit:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: none;
     grid-column: 2;
     grid-row: 1;
@@ -9918,31 +11228,36 @@ to {
     block-size: var(--_ui-tree-item-min-block-size, var(--_tree-row-min-height));
     cursor: pointer;
 }
-.selection-checkbox:where([data-hn-ui-tree-item]) {
+.selection-checkbox:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     inline-size: 1rem;
     block-size: 1rem;
     margin: 0;
     accent-color: var(--ui-accent-solid);
 }
-:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr);
 }
-:scope[data-selection-mode="multiple"]
+:where(.ui-tree-item)[data-selection-mode="multiple"]
     > .row
-    > .selection-hit:where([data-hn-ui-tree-item]) {
+    > .selection-hit:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     display: grid;
 }
-:scope[data-selection-mode="multiple"] > .row > .leading:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 3;
 }
-:scope[data-selection-mode="multiple"] > .row > .label:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 4;
 }
-.disclosure:hover:where([data-hn-ui-tree-item]) {
+.disclosure:hover:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     color: var(--ui-text-primary);
     background: var(--ui-surface-elevated);
 }
-.disclosure-icon:where([data-hn-ui-tree-item]) {
+.disclosure-icon:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: grid;
     place-items: center;
     inline-size: 12px;
@@ -9950,7 +11265,8 @@ to {
     transform: rotate(-90deg);
     transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.disclosure-icon:where([data-hn-ui-tree-item])::before {
+.disclosure-icon:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before {
     display: block;
     inline-size: 0.375rem;
     block-size: 0.375rem;
@@ -9960,18 +11276,18 @@ to {
     /* A chevron's ink sits below its box centre; lift it so it centres optically (in either rotation). */
     transform: translateY(-20%) rotate(45deg);
 }
-:scope[aria-expanded="true"]
+:where(.ui-tree-item)[aria-expanded="true"]
     > .row
     > .disclosure
-    > .disclosure-icon:where([data-hn-ui-tree-item]) {
+    > .disclosure-icon:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     transform: rotate(0deg);
 }
-.drag-handle svg:where([data-hn-ui-tree-item]) {
+.drag-handle:where(:scope, :scope *) svg:where([data-hn-ui-tree-item]) {
     display: block;
     inline-size: 100%;
     block-size: 100%;
 }
-.leading:where([data-hn-ui-tree-item]) {
+.leading:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: inline-grid;
     place-items: center;
     grid-column: 2;
@@ -9984,16 +11300,10 @@ to {
     position: relative;
     z-index: 1;
 }
-.leading:empty:where([data-hn-ui-tree-item]) {
+.leading:empty:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: none;
 }
-:where(:not([data-hn-ui-tree-item])):is(svg),:where(:not([data-hn-ui-tree-item])):is(img) {
-    display: block;
-    inline-size: 1em;
-    block-size: 1em;
-    flex: none;
-}
-.label:where([data-hn-ui-tree-item]) {
+.label:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     grid-column: 3;
     grid-row: 1;
     align-self: stretch;
@@ -10008,7 +11318,7 @@ to {
        is where the controller reads the length in pixels to stop a sliding name before the fade. */
     column-gap: var(--ui-space-1);
 }
-.label-text:where([data-hn-ui-tree-item]) {
+.label-text:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: flex;
     align-items: center;
     /* Stretches, so slotted content can still be the row's full-height hit area. */
@@ -10018,13 +11328,11 @@ to {
     inline-size: 100%;
     white-space: nowrap;
 }
-.label-text > :where(:not([data-hn-ui-tree-item])):is(*) {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-}
-.row:hover > .label:where([data-hn-ui-tree-item]),.row:focus-within > .label:where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+.row:hover:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item]),.row:focus-within:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
     > .row
-    > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]) {
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     text-overflow: clip;
     mask-image: linear-gradient(
       to right,
@@ -10032,22 +11340,27 @@ to {
       transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
 }
-.row:hover > .label:dir(rtl):where([data-hn-ui-tree-item]),.row:focus-within > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+.row:hover:where(:scope, :scope *) > .label:dir(rtl):where([data-hn-ui-tree-item]),.row:focus-within:where(:scope, :scope *)
+    > .label:dir(rtl):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
     > .row
-    > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+    > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     mask-image: linear-gradient(
       to left,
       #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
       transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
 }
-.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *)
+    > .label
+    > .label-text:where([data-hn-ui-tree-item]) {
     /* Once per pass: the controller restarts it after a rest at the end, so the name holds still
        long enough to read rather than sliding back and forth. */
-    animation: ui-tree-item-marquee-16fe002b var(--_marquee-duration) linear 0.5s 1 normal forwards;
+    animation: ui-tree-item-marquee-fc4c8748 var(--_marquee-duration) linear 0.5s 1 normal forwards;
     will-change: transform;
 }
-.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item]) {
     margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
     padding-inline-start: calc(
       var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
@@ -10062,7 +11375,8 @@ to {
       transparent calc(100% - var(--_tree-actions-width, 1.75rem))
     );
 }
-.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *)
+    > .label:dir(rtl):where([data-hn-ui-tree-item]) {
     mask-image: linear-gradient(
       to left,
       transparent var(--_marquee-icon-width, 0px),
@@ -10074,14 +11388,13 @@ to {
     );
 }
 @media (prefers-reduced-motion: reduce) {
-.row[data-ui-marquee] > .label > .label-text:where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *)
+      > .label
+      > .label-text:where([data-hn-ui-tree-item]) {
       animation: none;
 }
 }
-.row:hover > .label > :where(:not([data-hn-ui-tree-item])):is(*),.row:focus-within > .label > :where(:not([data-hn-ui-tree-item])):is(*) {
-    text-overflow: clip;
-}
-.actions:where([data-hn-ui-tree-item]) {
+.actions:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     position: absolute;
     z-index: 1;
     inset-block: 0;
@@ -10093,17 +11406,19 @@ to {
     pointer-events: none;
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover > .actions:where([data-hn-ui-tree-item]),.row:focus-within > .actions:where([data-hn-ui-tree-item]),:scope[data-ui-tree-item-state~="actionsVisible"]
+.row:hover:where(:scope, :scope *) > .actions:where([data-hn-ui-tree-item]),.row:focus-within:where(:scope, :scope *) > .actions:where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
     > .row
-    > .actions:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .actions:where([data-hn-ui-tree-item]) {
+    > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+    > .row
+    > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     opacity: 1;
     pointer-events: auto;
 }
 @media (hover: none), (pointer: coarse) {
-.row:where([data-hn-ui-tree-item]) {
+.row:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
       grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-.actions:where([data-hn-ui-tree-item]) {
+.actions:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
       position: static;
       grid-column: 4;
       grid-row: 1;
@@ -10112,10 +11427,16 @@ to {
       opacity: 1;
       pointer-events: auto;
 }
-.row:is(:hover, :focus-within) > .label:where([data-hn-ui-tree-item]),.row:is(:hover, :focus-within) > .label:dir(rtl):where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:where([data-hn-ui-tree-item]),:scope[data-move-source] > .row > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+.row:is(:hover, :focus-within):where(:scope, :scope *)
+      > .label:where([data-hn-ui-tree-item]),.row:is(:hover, :focus-within):where(:scope, :scope *)
+      > .label:dir(rtl):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+      > .row
+      > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-move-source]
+      > .row
+      > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       mask-image: none;
 }
-.row[data-ui-marquee] > .label:where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *) > .label:where([data-hn-ui-tree-item]) {
       mask-image: linear-gradient(
         to right,
         transparent var(--_marquee-icon-width, 0px),
@@ -10126,17 +11447,18 @@ to {
 }
 
     /* Persistent content has its own column on touch. Fade only the label's end. */
-:scope[data-ui-tree-item-state~="actionsVisible"]
+:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
       > .row
-      > .label:where([data-hn-ui-tree-item]) {
+      > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
 }
-:scope[data-ui-tree-item-state~="actionsVisible"]
+:where(.ui-tree-item)[data-ui-tree-item-state~="actionsVisible"]
       > .row
-      > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+      > .label:dir(rtl):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
 }
-.row[data-ui-marquee] > .label:dir(rtl):where([data-hn-ui-tree-item]) {
+.row[data-ui-marquee]:where(:scope, :scope *)
+      > .label:dir(rtl):where([data-hn-ui-tree-item]) {
       mask-image: linear-gradient(
         to left,
         transparent var(--_marquee-icon-width, 0px),
@@ -10145,16 +11467,17 @@ to {
         )
       );
 }
-:scope[data-selection-mode="multiple"] > .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
 }
-:scope[data-selection-mode="multiple"]
+:where(.ui-tree-item)[data-selection-mode="multiple"]
       > .row
-      > .actions:where([data-hn-ui-tree-item]) {
+      > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-column: 5;
 }
 }
-.drag-handle:where([data-hn-ui-tree-item]) {
+.drag-handle:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     position: absolute;
     z-index: 2;
     inset-block-start: 50%;
@@ -10175,22 +11498,24 @@ to {
     transform: translateY(-50%);
     transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.row:hover .drag-handle:where([data-hn-ui-tree-item]),.drag-handle:hover:where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where([data-hn-ui-tree-item]),:scope[data-dragging] > .row > .drag-handle:where([data-hn-ui-tree-item]) {
+.row:hover:where(:scope, :scope *) .drag-handle:where([data-hn-ui-tree-item]),.drag-handle:hover:where(:scope, :scope *):where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where(:scope, :scope *):where([data-hn-ui-tree-item]),:where(.ui-tree-item)[data-dragging]
+    > .row
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     opacity: 1;
 }
-:scope[data-ui-tree-item-state~="isContainer"]
+:where(.ui-tree-item)[data-ui-tree-item-state~="isContainer"]
     > .row
-    > .drag-handle:where([data-hn-ui-tree-item]) {
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
 }
-.drag-handle:hover:where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where([data-hn-ui-tree-item]) {
+.drag-handle:hover:where(:scope, :scope *):where([data-hn-ui-tree-item]),.drag-handle:focus-visible:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     color: var(--ui-text-primary);
     background: var(--ui-surface-hover);
 }
-.drag-handle:active:where([data-hn-ui-tree-item]) {
+.drag-handle:active:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     cursor: grabbing;
 }
-.drop-indicator:where([data-hn-ui-tree-item]) {
+.drop-indicator:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     position: absolute;
     z-index: 3;
     inset-inline: 1px;
@@ -10200,7 +11525,9 @@ to {
     background: var(--_ui-tree-drop-color, var(--ui-accent-solid));
     pointer-events: none;
 }
-.drop-indicator:where([data-hn-ui-tree-item])::before,.drop-indicator:where([data-hn-ui-tree-item])::after {
+.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before,.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::after {
     content: "";
     position: absolute;
     inset-block-start: 50%;
@@ -10211,36 +11538,43 @@ to {
     background: var(--ui-surface-elevated);
     transform: translateY(-50%);
 }
-.drop-indicator:where([data-hn-ui-tree-item])::before {
+.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::before {
     inset-inline-start: -1px;
 }
-.drop-indicator:where([data-hn-ui-tree-item])::after {
+.drop-indicator:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where(:scope, :scope
+    *):where([data-hn-ui-tree-item])::after {
     inset-inline-end: -1px;
 }
-:scope[data-drop-position="before"]
+:where(.ui-tree-item)[data-drop-position="before"]
     > .row
-    > .row-drop-indicator:where([data-hn-ui-tree-item]) {
+    > .row-drop-indicator:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     display: block;
     inset-block-start: calc(-0.5 * var(--ui-accent-line-width));
 }
-:scope[data-drop-position="after"]
-    > .subtree-drop-indicator:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-drop-position="after"]
+    > .subtree-drop-indicator:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     display: block;
     inset-block-end: calc(-0.5 * var(--ui-accent-line-width));
 }
-.children[hidden]:where([data-hn-ui-tree-item]) {
+.children[hidden]:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
     display: none;
 }
-html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     --_tree-row-min-height: 44px;
 }
-html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr);
 }
-html[data-ui-input-modality="touch"] :scope .drag-handle:where([data-hn-ui-tree-item]),html[data-ui-input-modality="touch"]
-    :scope[data-ui-tree-item-state~="isContainer"]
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]),html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)[data-ui-tree-item-state~="isContainer"]
     > .row
-    > .drag-handle:where([data-hn-ui-tree-item]) {
+    > .drag-handle:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     position: relative;
     grid-column: 1;
     grid-row: 1;
@@ -10252,76 +11586,87 @@ html[data-ui-input-modality="touch"] :scope .drag-handle:where([data-hn-ui-tree-
     transform: none;
     cursor: pointer;
 }
-html[data-ui-input-modality="touch"] :scope .disclosure:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .disclosure:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 2;
 }
-html[data-ui-input-modality="touch"] :scope .leading:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 3;
 }
-html[data-ui-input-modality="touch"] :scope .label:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+    :where(.ui-tree-item)
+    .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-selection-mode="multiple"]
-    > .row:where([data-hn-ui-tree-item]) {
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
+    > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr);
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-selection-mode="multiple"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
     > .row
-    > .selection-hit:where([data-hn-ui-tree-item]) {
+    > .selection-hit:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 3;
     inline-size: 44px;
     block-size: 44px;
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-selection-mode="multiple"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
     > .row
-    > .leading:where([data-hn-ui-tree-item]) {
+    > .leading:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 4;
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-selection-mode="multiple"]
+    :where(.ui-tree-item)[data-selection-mode="multiple"]
     > .row
-    > .label:where([data-hn-ui-tree-item]) {
+    > .label:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     grid-column: 5;
 }
 @media (hover: none), (pointer: coarse) {
-html[data-ui-input-modality="touch"] :scope .row:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)
+      .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
 }
-html[data-ui-input-modality="touch"] :scope .actions:where([data-hn-ui-tree-item]) {
+html[data-ui-input-modality="touch"]
+      :where(.ui-tree-item)
+      .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-column: 5;
 }
 html[data-ui-input-modality="touch"]
-      :scope[data-selection-mode="multiple"]
-      > .row:where([data-hn-ui-tree-item]) {
+      :where(.ui-tree-item)[data-selection-mode="multiple"]
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
 }
 html[data-ui-input-modality="touch"]
-      :scope[data-selection-mode="multiple"]
+      :where(.ui-tree-item)[data-selection-mode="multiple"]
       > .row
-      > .actions:where([data-hn-ui-tree-item]) {
+      > .actions:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       grid-column: 6;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.row:where([data-hn-ui-tree-item]),.disclosure-icon:where([data-hn-ui-tree-item]),.drag-handle:where([data-hn-ui-tree-item]) {
+.row:where(:scope, :scope *):where([data-hn-ui-tree-item]),.disclosure-icon:where(:scope, :scope *):where([data-hn-ui-tree-item]),.drag-handle:where(:scope, :scope *):where([data-hn-ui-tree-item]) {
       transition: none;
 }
 }
 @media (forced-colors: active) {
-:scope:focus-visible > .row:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item):focus-visible
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       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:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[data-ui-tree-item-state~="selected"]:not(:focus-visible):not([aria-disabled="true"])
+      > .row:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
       outline: var(--ui-border-width) solid Highlight;
       outline-offset: calc(-1 * var(--ui-border-width));
 }
 }
-:scope[hidden]:where([data-hn-ui-tree-item]) {
+:where(.ui-tree-item)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-tree-item"]))):where([data-hn-ui-tree-item]) {
     display: none;
 }
 }
@@ -10773,15 +12118,6 @@ html[data-ui-input-modality="touch"]
   background: transparent;
 }
 
-/* The floating toolbar supplies the surface; the containing popover only
-   positions it beside the app-owned trigger. */
-.looma-editor__formatting-popover {
-  --ui-popover-padding: 0;
-  --ui-popover-surface: transparent;
-  --ui-popover-border: transparent;
-  --ui-popover-shadow: none;
-}
-
 .looma-editor__chip-popover {
   inline-size: min(15rem, calc(100vw - 2rem));
 }
@@ -11003,7 +12339,7 @@ html[data-ui-input-modality="touch"]
   width: 3px;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11552,7 +12888,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11586,7 +12922,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11687,7 +13023,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11818,7 +13154,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -11872,7 +13208,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -12348,7 +13684,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -12446,7 +13782,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -12610,7 +13946,7 @@ html[data-ui-input-modality="touch"]
     @media (prefers-reduced-motion: reduce) {
     }
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -12805,7 +14141,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -12877,6 +14213,15 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
       display: none;
     }
@@ -12932,13 +14277,15 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+
     @starting-style {
     }
 
     @media (prefers-reduced-motion: reduce) {
     }
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -13025,7 +14372,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -13179,7 +14526,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -13424,7 +14771,7 @@ html[data-ui-input-modality="touch"]
     @media (prefers-reduced-motion: reduce) {
     }
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -13645,7 +14992,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -13869,7 +15216,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -14080,7 +15427,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -14135,7 +15482,7 @@ html[data-ui-input-modality="touch"]
 
     /* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
@@ -14315,7 +15662,7 @@ html[data-ui-input-modality="touch"]
 
     /* A component that sets its display still honours the hidden attribute on its root. */
 }
-/* Generated by HTML Next 1.0.0-alpha.67. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
 @supports (-moz-appearance: none) {
 :where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }