Rewrite the showcase's Containment section without Tailwind

Plan step 38 (last batch): every example moves onto the layout
components, the md-* text classes and tokens. Wrapper divs that only
sized or grouped a demo (grid/list widths, the divider-and-collapse
stack, the dragged-card scope) become <x-grid>/<x-stack>/<x-row> with
an inline style where a specific px width still matters; a video
thumbnail's Tailwind gradient utility becomes an inline
background/color pair since each list-item's own colours differ. The
standard side sheet demo keeps M3's row-then-column breakpoint through
<x-row stack-below="expanded">, with a data-md-showcase-side-sheet-demo
hook that restores the row's own stretch alignment once it collapses
to a column (an explicit align="start", needed for the row layout,
would otherwise leave it shrink-wrapped).

Every id, data-md-* selector and visible string the Chromium
ContainmentTest reads (#containment, its dialog/sheet/card queries) is
unchanged; no demo content removed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -32,6 +32,16 @@
  * attribute, so a few widths below are plain `.showcase-*` classes instead of `data-md-showcase-*`
  * hooks — the same "caller's class" mechanism any application would reach for, deliberately not
  * named `md-*` since they are not part of the fixed set text.css declares.
+ *
+ * Batch 4 (the last: containment, carousel, bars, navigation, pages) adds the standard side
+ * sheet demo's own breakpoint (a `<x-row>` beats its own `stack-below` alignment back to `stretch`
+ * once collapsed to a column, which an `align` the row mode needs would otherwise leave
+ * shrink-wrapped), a bordered app-bar/toolbar frame (plain, `visible` for the search bar whose
+ * docked suggestions must not clip, `rounded` for the large-screen docked toolbar), a narrow
+ * scrollable-tabs box, and the navigation bar and rail demo frames (`bar`, `bar-wide` inside its
+ * own horizontal-scroll wrapper, `rail`, `rail-wide`) with their filler "page" and content panes.
+ * Every per-item carousel colour stays the caller's own inline `style`, the same mechanism as the
+ * colour swatch above.
  */
 
 @layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@@ -446,6 +456,17 @@
         width: 100%;
         overflow-x: auto;
     }
+
+    /* Containment: the standard side sheet demo is a row from `expanded` (840px), M3's own
+       condition for a co-planar sheet, and a column below it — `<x-row>`'s own `stack-below`
+       stacks it there, but leaves the `align="start"` the row layout needs (so the sheet does not
+       stretch to the text column's height) in place, which would otherwise shrink-wrap both
+       columns instead of stacking them full width. */
+    @media (width < 840px) {
+        [data-md-showcase-side-sheet-demo] {
+            align-items: stretch;
+        }
+    }
 }
 
 /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and