fix(sortable-list): expose part="list" + wire ::part cross-shadow grid on Lit (SortableListNested)

SortableListNestedDemo's outer kanban grid (`.board :deep(.rozie-sortable-list)`)
laid out columns side-by-side on the 5 light-DOM targets but rendered STACKED on
Lit: `:deep()` is a descendant selector and cannot pierce the child
<rozie-sortable-list>'s shadow root. Phase 17 shipped `::part()` as the
standards-track cross-shadow answer and even documented this exact
`SortableList::part(list)` pattern in sortable-list.md — but the producer was
never tagged `part="list"` and the demo never adopted the rule, so the documented
pattern was dead and the Lit column grid never applied.

- packages/ui/sortable-list/src/SortableList.rozie: tag the list element
  `part="list"` (a no-op standard HTML attr on the 5 non-Lit targets; the
  cross-shadow handle on Lit). Regenerates all 6 @rozie-ui leaves.
- examples/demos/SortableListNestedDemo.rozie: add `SortableList::part(list)`
  alongside the existing `:deep()` (Phase 17 "coexist" — `:deep` for the 5
  light-DOM targets, `::part` for Lit). Both carry identical grid declarations.
- tests/visual-regression: register SortableListNested as a matrix cell (settle
  on 9 `.rozie-sortable-item` = 3 columns + 6 cards) + land the Linux-rendered
  shared baseline. All 6 targets now diff byte-identically against
  SortableListNested.png — Lit's column grid matches the other 5 (previously the
  documented stacked divergence).

One cell now validates nested two-level drag, distinct SortableJS groups, slot
scope params, cross-component `cards-change` sync, and the Lit `::part`
cross-shadow grid.

Gates: turbo test 59/59, typecheck 70/70, VR matrix 6/6 vs new baseline (+ Solid
behavioral drag specs), solid-vite nested e2e. No dist-parity drift (SortableList
is sourced from packages/ui, not a dist-parity fixture).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: serpentblade

examples/demos/SortableListNestedDemo.rozie

@@ -133,18 +133,28 @@ header code {
 }
 
 /* Reach into the producer SortableList to lay its outer list out as a
-   grid of columns. `:deep()` is the cross-component CSS escape hatch
-   (quick task 260526-mk4): the outer compound (`.board`) is scoped to
-   this demo, but `.rozie-sortable-list` is lifted OUT of the scope so
-   it matches the SortableList-rendered DOM directly. The inner
-   SortableList(s) inside each KanbanColumn keep their own
-   `display: block` cascade.
-
-   Lit consumers render columns stacked rather than gridded because
-   each <rozie-sortable-list> custom element lives in its own shadow
-   root, and `:deep()` does not cross shadow-DOM boundaries. Cross-
-   shadow styling is `::part()` territory (planned, not v1). */
+   grid of columns. Two coexisting cross-component CSS escape hatches,
+   one per shadow model (Phase 17 Q1 "coexist"):
+
+   - `:deep()` (quick task 260526-mk4) — the light-DOM path for the 5
+     non-Lit targets. The outer compound (`.board`) is scoped to this
+     demo, but `.rozie-sortable-list` is lifted OUT of the scope so it
+     matches the SortableList-rendered DOM directly.
+
+   - `SortableList::part(list)` (Phase 17) — the shadow-DOM path for Lit.
+     Each <rozie-sortable-list> lives in its own shadow root, so `:deep()`
+     (a descendant selector) cannot pierce it; the W3C `::part()` mechanism
+     can. The producer tags its list element with `part="list"`; this rule
+     compiles to `rozie-sortable-list[data-rozie-s-<hash>]::part(list)` on
+     Lit and is stripped as a no-op on the other 5 targets.
+
+   Both rules carry identical declarations, so all six targets render the
+   columns as a 3-up grid. Only the OUTER list is gridded: the consumer's
+   styles reach its direct-child <rozie-sortable-list> (the outer list);
+   the inner lists live in each KanbanColumn's own shadow root and keep
+   their `display: block` cascade. */
 .board :deep(.rozie-sortable-list) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
+SortableList::part(list) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
 
 .controls {
   display: flex;

packages/ui/sortable-list/packages/angular/src/SortableList.ts

@@ -17,7 +17,7 @@ interface DefaultCtx {
   template: `
 
     <div class="rozie-sortable-wrap" #__rozieRoot #rozieSpread_0 #rozieListenersTarget_1>
-      <div class="rozie-sortable-list" #listEl>
+      <div class="rozie-sortable-list" #listEl part="list">
         @for (item of items(); track keyFor(item, index); let index = $index) {
     <div class="rozie-sortable-item" [ngClass]="{ 'rozie-sortable-item-lifted': liftedIndex() === index }" role="listitem" tabindex="0" (keydown)="onRowKeyDown($event, index)">
           <ng-container *ngTemplateOutlet="(defaultTpl ?? templates()?.['defaultSlot']); context: { $implicit: { item: item, index: index }, item: item, index: index }" />

packages/ui/sortable-list/packages/lit/src/SortableList.ts

@@ -201,7 +201,7 @@ private __rozieFirstUpdateDone = false;
   render() {
     return html`
 <div class="rozie-sortable-wrap" ${rozieSpread(this.$attrs)} ${rozieListeners(this.$listeners)} data-rozie-ref="__rozieRoot" data-rozie-s-0af24eae>
-  <div class="rozie-sortable-list" data-rozie-ref="listEl" data-rozie-s-0af24eae>${keyed(this._rozieReconcileSeq ?? 0, html`
+  <div class="rozie-sortable-list" part="list" data-rozie-ref="listEl" data-rozie-s-0af24eae>${keyed(this._rozieReconcileSeq ?? 0, html`
     ${repeat<any>(this.items, (item, index) => this.keyFor(item, index), (item, index) => html`<div class="${Object.entries({ "rozie-sortable-item": true, 'rozie-sortable-item-lifted': this._liftedIndex.value === index }).filter(([, v]) => v).map(([k]) => k).join(' ')}" key=${rozieDisplay(this.keyFor(item, index))} role="listitem" tabindex="0" @keydown=${($event: Event) => { this.onRowKeyDown($event, index); }} data-rozie-s-0af24eae>
       ${this.__rozieDefaultSlot__ !== undefined ? this.__rozieDefaultSlot__({item: item, index: index}) : html`<slot data-rozie-params=${(() => { try { return JSON.stringify({item: item, index: index}); } catch { return '{}'; } })()}></slot>`}
     </div>`)}

packages/ui/sortable-list/packages/react/src/SortableList.tsx

@@ -269,7 +269,7 @@ export default function SortableList(_props: SortableListProps): JSX.Element {
   return (
     <>
     <div ref={__rozieRoot} {...attrs} className={clsx("rozie-sortable-wrap", (attrs.className as string | undefined))} data-rozie-s-0af24eae="">
-      <div className={"rozie-sortable-list"} ref={listEl} data-rozie-s-0af24eae="">
+      <div className={"rozie-sortable-list"} ref={listEl} part="list" data-rozie-s-0af24eae="">
         {items.map((item, index) => <div key={keyFor(item, index)} className={clsx("rozie-sortable-item", { "rozie-sortable-item-lifted": liftedIndex === index })} role="listitem" tabIndex={0} onKeyDown={($event) => { onRowKeyDown($event, index); }} data-rozie-s-0af24eae="">
           {typeof (props.children ?? props.slots?.['']) === 'function' ? ((props.children ?? props.slots?.['']) as Function)({ item, index }) : (props.children ?? props.slots?.[''])}
         </div>)}

packages/ui/sortable-list/packages/solid/src/SortableList.tsx

@@ -232,7 +232,7 @@ export default function SortableList(_props: SortableListProps): JSX.Element {
   return (
     <>
     <div ref={(el) => { __rozieRootRef = el as HTMLElement; }} {...attrs} class={"rozie-sortable-wrap" + (((attrs as unknown as Record<string, unknown>).class as string | undefined) ? " " + ((attrs as unknown as Record<string, unknown>).class as string | undefined) : "")} data-rozie-s-0af24eae="">
-      <div class={"rozie-sortable-list"} ref={(el) => { listElRef = el as HTMLElement; }} data-rozie-s-0af24eae="">
+      <div class={"rozie-sortable-list"} ref={(el) => { listElRef = el as HTMLElement; }} part="list" data-rozie-s-0af24eae="">
         <For each={items()}>{(item, index) => <div role="listitem" class={"rozie-sortable-item"} classList={{ 'rozie-sortable-item-lifted': liftedIndex() === index() }} tabIndex={0} onKeyDown={($event) => { onRowKeyDown($event, index()); }} data-rozie-s-0af24eae="">
           {typeof local.children === 'function' ? (local.children as (s: any) => any)({ item, index: index() }) : resolved()}
         </div>}</For>

packages/ui/sortable-list/packages/svelte/src/SortableList.svelte

@@ -259,7 +259,7 @@ $effect(() => { const __watchVal = (() => easing)(); untrack(() => { if (__rozie
 
 
 <div bind:this={__rozieRoot} {...__rozieAttrs} class={["rozie-sortable-wrap", (__rozieAttrs)?.class]} use:applyListeners={__rozieAttrs} data-rozie-s-0af24eae>
-  <div class="rozie-sortable-list" bind:this={listEl} data-rozie-s-0af24eae>
+  <div class="rozie-sortable-list" bind:this={listEl} part="list" data-rozie-s-0af24eae>
     {#each items as item, index (keyFor(item, index))}<div class={["rozie-sortable-item", { 'rozie-sortable-item-lifted': liftedIndex === index }]} role="listitem" tabindex="0" onkeydown={($event) => { onRowKeyDown($event, index); }} data-rozie-s-0af24eae>
       {@render children?.({ item, index })}
     </div>{/each}

packages/ui/sortable-list/packages/vue/src/SortableList.vue

@@ -1,7 +1,7 @@
 <template>
 
 <div class="rozie-sortable-wrap" ref="__rozieRootRef" v-bind="$attrs">
-  <div class="rozie-sortable-list" ref="listElRef">
+  <div class="rozie-sortable-list" ref="listElRef" part="list">
     <div v-for="(item, index) in items" :key="keyFor(item, index)" :class="['rozie-sortable-item', { 'rozie-sortable-item-lifted': liftedIndex === index }]" role="listitem" tabindex="0" @keydown="onRowKeyDown($event, index)">
       <slot :item="item" :index="index"></slot>
     </div>

packages/ui/sortable-list/src/SortableList.rozie

@@ -229,7 +229,7 @@ $watch(() => $props.easing,      (v) => instance?.option('easing',      v))
 
 <template>
 <div class="rozie-sortable-wrap">
-  <div class="rozie-sortable-list" ref="listEl" r-external>
+  <div class="rozie-sortable-list" ref="listEl" r-external part="list">
     <div
       r-for="item, index in $props.items"
       :key="keyFor(item, index)"

tests/visual-regression/__screenshots__/SortableListNested.png

@@ -100,6 +100,19 @@ const EXAMPLES = [
   'SortableListClone',
   'SortableListFilter',
   'SortableListShowcase',
+  // SortableListNested (Kanban) — nested two-level drag dogfood. Validates a
+  // dense bundle of features at once: outer-list column reorder + inner-list
+  // card drag (distinct SortableJS groups), slot scope params, cross-component
+  // `cards-change` two-way sync, AND the Lit cross-shadow `::part(list)` grid
+  // layout (the consumer grids the outer list via `SortableList::part(list)`,
+  // reaching the child's `part="list"` element across the shadow boundary; the
+  // other 5 targets grid it via the coexisting `:deep()` light-DOM rule). Per
+  // D-10 all 6 targets diff against the same shared `SortableListNested.png`
+  // baseline — with the ::part fix the Lit column grid now matches the other 5
+  // (previously Lit rendered stacked, the documented :deep cross-shadow gap).
+  // Baseline-gates to `test.fixme` via `baselineExists()` until the Linux-Docker
+  // baseline regen lands the PNG (`feedback_vr_linux_baselines`).
+  'SortableListNested',
   'Flatpickr',
   'Uppy',
   'TipTap',
@@ -277,6 +290,14 @@ async function settleExample(
   if (example === 'SortableListShowcase') {
     await expect(page.locator('[class*="rozie-sortable-item"]')).toHaveCount(8);
   }
+  // SortableListNested (Kanban): reset() seeds 3 columns; the OUTER SortableList
+  // renders one `.rozie-sortable-item` per column (3) and each column's INNER
+  // SortableList renders one per card (3 + 2 + 1 = 6) → 9 total. Playwright's
+  // CSS locator pierces the nested shadow roots on Lit; `[class*=...]` survives
+  // React CSS-Modules hashing (same rationale as the SortableList branch above).
+  if (example === 'SortableListNested') {
+    await expect(page.locator('[class*="rozie-sortable-item"]')).toHaveCount(9);
+  }
   // Flatpickr: the Flatpickr wrapper renders `<input class="rozie-flatpickr">`;
   // the flatpickr engine attaches to it on `$onMount`. Wait for the input to
   // be visible — its presence proves the wrapper template painted and the