@slotted/styles 0.1.0-beta.1 → 0.1.0-beta.11

package/src/drawer/drawer.css

@@ -36,7 +36,7 @@
    * a drawer is the ordinary case, and a descendant rule would paint the inner
    * panel with the outer panel's geometry.
    */
-  [data-ui='drawer'] {
+  [data-ui-drawer] {
     /**
      * The panel's resting measure, per size step. Five named steps rather than
      * the pixel string Ant and MUI both take: a theme retunes a step and cannot
@@ -47,7 +47,7 @@
     /**
      * What the panel actually measures. `--slotted-drawer-extent` is the one
      * name for it, and it is read from two places: an application setting one
-     * measure for every drawer writes it on `[data-ui='drawer']`, and the
+     * measure for every drawer writes it on `[data-ui-drawer]`, and the
      * binding writes the length the reader dragged to as an inline custom
      * property on this element. Both are lengths, so the cascade decides
      * between them the way it decides everything else.
@@ -176,7 +176,7 @@
   }
 
   /** Leaving is shorter than arriving: a reader who has decided is waiting. */
-  [data-ui='drawer']:not([data-open]) {
+  [data-ui-drawer]:not([data-open]) {
     --_slide: var(--slotted-duration-medium) var(--slotted-easing-exit);
     --_move: var(--slotted-duration-medium) var(--slotted-easing-exit);
   }
@@ -186,27 +186,27 @@
    * every pointer position would lag the hand by the whole duration, and a
    * bottom sheet the reader is pulling has to follow it.
    */
-  [data-ui='drawer'][data-dragging] {
+  [data-ui-drawer][data-dragging] {
     --_move: var(--slotted-duration-instant) var(--slotted-easing-standard);
   }
 
-  [data-ui='drawer'][data-size='sm'] {
+  [data-ui-drawer][data-size='sm'] {
     --_step: var(--slotted-drawer-extent-sm, 18rem);
     --_padding-inline: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='drawer'][data-size='lg'] {
+  [data-ui-drawer][data-size='lg'] {
     --_step: var(--slotted-drawer-extent-lg, 30rem);
   }
 
-  [data-ui='drawer'][data-size='xl'] {
+  [data-ui-drawer][data-size='xl'] {
     --_step: var(--slotted-drawer-extent-xl, 40rem);
     --_padding-inline: var(--slotted-space-8, 1.5rem);
     --_title-font-size: var(--slotted-font-size-xl, 1.125rem);
   }
 
   /** The step a drawer that is a page takes: the whole layer, and no measure. */
-  [data-ui='drawer'][data-size='full'] {
+  [data-ui-drawer][data-size='full'] {
     --_step: 100%;
   }
 
@@ -218,7 +218,7 @@
    * over a dialog is one step above it on the single stack the library keeps
    * rather than a number this stylesheet guessed.
    */
-  [data-ui='drawer'][data-mode='overlay'] {
+  [data-ui-drawer][data-mode='overlay'] {
     position: fixed;
     inset: 0;
     z-index: calc(var(--slotted-z-index-overlay, 1000) + var(--slotted-layer-depth, 0));
@@ -235,20 +235,20 @@
    * a mode here, because a family writing a margin on an element it does not
    * own is a family deciding someone else's layout.
    */
-  [data-ui='drawer'][data-mode='inline'] {
+  [data-ui-drawer][data-mode='inline'] {
     overflow: clip;
   }
 
-  [data-ui='drawer'][data-mode='inline'][data-side='start'],
-  [data-ui='drawer'][data-mode='inline'][data-side='end'] {
+  [data-ui-drawer][data-mode='inline'][data-side='start'],
+  [data-ui-drawer][data-mode='inline'][data-side='end'] {
     inline-size: 0;
     transition:
       inline-size var(--_move),
       var(--_reveal);
   }
 
-  [data-ui='drawer'][data-mode='inline'][data-side='top'],
-  [data-ui='drawer'][data-mode='inline'][data-side='bottom'] {
+  [data-ui-drawer][data-mode='inline'][data-side='top'],
+  [data-ui-drawer][data-mode='inline'][data-side='bottom'] {
     block-size: 0;
     transition:
       block-size var(--_move),
@@ -269,14 +269,14 @@
    * to nought, and a cap against a box on its way to nought is what would
    * rewrap the panel on the way out.
    */
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='start'],
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='end'] {
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='start'],
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='end'] {
     inline-size: var(--_extent);
     max-inline-size: 100%;
   }
 
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='top'],
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='bottom'] {
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='top'],
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='bottom'] {
     block-size: var(--_extent);
     max-block-size: 100%;
   }
@@ -290,7 +290,7 @@
    * `data-open`: the entering frame has no `data-open` either, and a hidden
    * panel in that frame refuses the focus scope's initial focus.
    */
-  [data-ui='drawer'][inert] {
+  [data-ui-drawer][inert] {
     content-visibility: hidden;
     pointer-events: none;
   }
@@ -304,7 +304,7 @@
    * is `none` in that mode, and a panel separated only by elevation would sit on
    * an opaque ground with nothing marking where it starts.
    */
-  [data-ui='drawer'] > [data-part='backdrop'] {
+  [data-ui-drawer] > [data-part-backdrop] {
     grid-area: 1 / 1;
     background: var(--slotted-drawer-scrim, var(--slotted-scrim, Canvas));
     opacity: 0;
@@ -321,7 +321,7 @@
    * close is waiting, and the page behind is back before the panel has finished
    * going.
    */
-  [data-ui='drawer'][data-open] > [data-part='backdrop'] {
+  [data-ui-drawer][data-open] > [data-part-backdrop] {
     opacity: 1;
     transition: opacity var(--slotted-duration-long) var(--slotted-easing-standard);
   }
@@ -334,7 +334,7 @@
    * body is long — the failure Vaul, MUI and Angular Material all leave to each
    * consumer's own CSS, because none of the three ships a layout.
    */
-  [data-ui='drawer'] > [data-part='panel'] {
+  [data-ui-drawer] > [data-part-panel] {
     grid-area: 1 / 1;
     box-sizing: border-box;
     /**
@@ -403,7 +403,7 @@
    * physical axis, and a start-side panel leaves toward the left of a
    * left-to-right document and toward the right of a mirrored one.
    */
-  [data-ui='drawer'][data-mode='overlay'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='overlay'] > [data-part-panel] {
     box-shadow: var(--slotted-shadow-lg);
     translate: 0 0;
     /* The measure is restated here, or this rule would replace the base one:
@@ -412,10 +412,12 @@
     transition:
       translate var(--_slide),
       inline-size var(--_move),
-      block-size var(--_move);
+      block-size var(--_move),
+      border-start-start-radius var(--_move),
+      border-start-end-radius var(--_move);
   }
 
-  [data-ui='drawer'][data-mode='overlay']:not([data-open]) > [data-part='panel'] {
+  [data-ui-drawer][data-mode='overlay']:not([data-open]) > [data-part-panel] {
     translate: var(--_shift-x, 0) var(--_shift-y, 0);
   }
 
@@ -435,18 +437,18 @@
    * transition here would put the panel behind the hand by the whole duration.
    * The slide stays, because a panel released mid-gesture still has an exit.
    */
-  [data-ui='drawer'][data-dragging] > [data-part='panel'] {
+  [data-ui-drawer][data-dragging] > [data-part-panel] {
     transition: none;
   }
 
-  [data-ui='drawer'][data-dragging][data-mode='overlay'] > [data-part='panel'] {
+  [data-ui-drawer][data-dragging][data-mode='overlay'] > [data-part-panel] {
     transition: translate var(--_slide);
   }
 
-  [data-ui='drawer'][data-dragging][data-mode='inline'][data-side='start'],
-  [data-ui='drawer'][data-dragging][data-mode='inline'][data-side='end'],
-  [data-ui='drawer'][data-dragging][data-mode='inline'][data-side='top'],
-  [data-ui='drawer'][data-dragging][data-mode='inline'][data-side='bottom'] {
+  [data-ui-drawer][data-dragging][data-mode='inline'][data-side='start'],
+  [data-ui-drawer][data-dragging][data-mode='inline'][data-side='end'],
+  [data-ui-drawer][data-dragging][data-mode='inline'][data-side='top'],
+  [data-ui-drawer][data-dragging][data-mode='inline'][data-side='bottom'] {
     transition: var(--_reveal);
   }
 
@@ -456,7 +458,7 @@
    * closed panel sits at rest because the layer hides it whole, above.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='drawer'][data-mode='overlay'] > [data-part='panel'] {
+    [data-ui-drawer][data-mode='overlay'] > [data-part-panel] {
       translate: 0 0;
       transition:
         inline-size var(--_move),
@@ -466,20 +468,20 @@
 
   /* ── Where the panel sits, and where it goes when it leaves ───────────── */
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'],
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel],
+  [data-ui-drawer][data-side='end'] > [data-part-panel] {
     align-self: stretch;
     inline-size: min(var(--_extent), 100%);
     grid-template-rows: auto minmax(0, 1fr) auto;
   }
 
-  [data-ui='drawer'][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] {
     justify-self: stretch;
     block-size: min(var(--_extent), 100%);
   }
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] {
     justify-self: start;
     --_shift-x: -100%;
     /* The resizer lies over this edge, so the rows keep clear of it. */
@@ -487,7 +489,7 @@
     border-inline-end-width: var(--_rule-size);
   }
 
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='end'] > [data-part-panel] {
     justify-self: end;
     --_shift-x: 100%;
     --_row-padding-inline-start: max(var(--_padding-inline), var(--_resizer-thickness));
@@ -507,7 +509,7 @@
    * resizer would otherwise put its body in an `auto` track and lose the one
    * declaration that keeps the footer on screen.
    */
-  [data-ui='drawer'][data-side='top'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] {
     align-self: start;
     grid-template-rows: auto minmax(0, 1fr) auto auto;
     --_shift-y: -100%;
@@ -516,7 +518,7 @@
     border-end-end-radius: var(--slotted-drawer-radius, var(--_radius));
   }
 
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] {
     align-self: end;
     grid-template-rows: auto auto minmax(0, 1fr) auto;
     --_shift-y: 100%;
@@ -525,20 +527,36 @@
     border-start-end-radius: var(--slotted-drawer-radius, var(--_radius));
   }
 
+  /**
+   * A sheet that reaches the top of the layer is the screen, Material 3's
+   * expanded bottom sheet: its top corners square — a theme keeps a radius
+   * with `--slotted-drawer-radius-expanded` — and its header clears the safe
+   * area the status bar takes. The binding writes `data-expanded` while the
+   * extent is the whole layer, and under `size="full"`.
+   */
+  [data-ui-drawer][data-side='bottom'][data-expanded] > [data-part-panel] {
+    border-start-start-radius: var(--slotted-drawer-radius-expanded, 0px);
+    border-start-end-radius: var(--slotted-drawer-radius-expanded, 0px);
+  }
+
+  [data-ui-drawer][data-side='bottom'][data-expanded] > [data-part-panel] > [data-part-header] {
+    padding-block-start: calc(var(--_padding-block) + env(safe-area-inset-top, 0px));
+  }
+
   /**
    * A sheet's separator takes the first row, so the three that follow move down
    * one. `top` needs no such rule: its separator is the fourth row and the
    * three above it are already where the base puts them.
    */
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='header'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-header] {
     grid-row: 2;
   }
 
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='body'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-body] {
     grid-row: 3;
   }
 
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='footer'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-footer] {
     grid-row: 4;
   }
 
@@ -550,8 +568,8 @@
    * edge then shows on three sides, so the panel draws it on three; on a phone
    * the two side edges sit on the screen's own and read as nothing.
    */
-  [data-ui='drawer'][data-mode='overlay'][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-mode='overlay'][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='overlay'][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-mode='overlay'][data-side='bottom'] > [data-part-panel] {
     justify-self: center;
     inline-size: min(
       100%,
@@ -574,7 +592,7 @@
    * arrives while the sheet is open, and a release back onto the content stop. A
    * browser without it jumps, and nothing else changes.
    */
-  [data-ui='drawer'][data-size='content'] {
+  [data-ui-drawer][data-size='content'] {
     --_step: auto;
     --_content-cap: min(
       var(--slotted-drawer-extent, calc(100% - var(--slotted-space-12, 4rem))),
@@ -583,19 +601,19 @@
     interpolate-size: allow-keywords;
   }
 
-  [data-ui='drawer'][data-size='content'][data-side='start'],
-  [data-ui='drawer'][data-size='content'][data-side='end'] {
+  [data-ui-drawer][data-size='content'][data-side='start'],
+  [data-ui-drawer][data-size='content'][data-side='end'] {
     --_step: max-content;
   }
 
-  [data-ui='drawer'][data-size='content'][data-side='start'] > [data-part='panel'],
-  [data-ui='drawer'][data-size='content'][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-size='content'][data-side='start'] > [data-part-panel],
+  [data-ui-drawer][data-size='content'][data-side='end'] > [data-part-panel] {
     inline-size: var(--_extent);
     max-inline-size: var(--_content-cap);
   }
 
-  [data-ui='drawer'][data-size='content'][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-size='content'][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-size='content'][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-size='content'][data-side='bottom'] > [data-part-panel] {
     block-size: var(--_extent);
     max-block-size: var(--_content-cap);
   }
@@ -606,7 +624,7 @@
    * cell the panel sits in shrinks by it, so a sheet lands above the keys and a
    * side panel's footer does too, and every `100%` cap shrinks with the cell.
    */
-  [data-ui='drawer'][data-mode='overlay'] {
+  [data-ui-drawer][data-mode='overlay'] {
     padding-block-end: var(--slotted-keyboard-inset, 0px);
   }
 
@@ -616,18 +634,18 @@
    * press on it reaches it. The opacity keeps the transition the scrim already
    * has, so crossing the stop fades rather than blinks.
    */
-  [data-ui='drawer'][data-undimmed] > [data-part='backdrop'] {
+  [data-ui-drawer][data-undimmed] > [data-part-backdrop] {
     opacity: 0;
     pointer-events: none;
   }
 
   /* The layer is fixed over the whole viewport, so the scrim alone letting the
      press through leaves the root to catch it; the panel takes it back. */
-  [data-ui='drawer'][data-undimmed] {
+  [data-ui-drawer][data-undimmed] {
     pointer-events: none;
   }
 
-  [data-ui='drawer'][data-undimmed] > [data-part='panel'] {
+  [data-ui-drawer][data-undimmed] > [data-part-panel] {
     pointer-events: auto;
   }
 
@@ -636,16 +654,16 @@
    * sits over its end. The inset is padding inside the scrollport, so the last
    * line scrolls clear of the indicator rather than stopping under it.
    */
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='body']:last-child {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-body]:last-child {
     padding-block-end: calc(var(--_padding-block) + env(safe-area-inset-bottom, 0px));
   }
 
   /** `start` is the left edge in one direction and the right edge in the other. */
-  [data-ui='drawer'][data-side='start']:dir(rtl) > [data-part='panel'] {
+  [data-ui-drawer][data-side='start']:dir(rtl) > [data-part-panel] {
     --_shift-x: 100%;
   }
 
-  [data-ui='drawer'][data-side='end']:dir(rtl) > [data-part='panel'] {
+  [data-ui-drawer][data-side='end']:dir(rtl) > [data-part-panel] {
     --_shift-x: -100%;
   }
 
@@ -661,7 +679,7 @@
    * step, because a container condition cannot hold a custom property — buy one
    * hairline at the extreme edge of the viewport.
    */
-  [data-ui='drawer'][data-size='full'] > [data-part='panel'] {
+  [data-ui-drawer][data-size='full'] > [data-part-panel] {
     border-width: 0;
     border-radius: 0;
   }
@@ -671,13 +689,13 @@
    * from, which is what `overflow: clip` on the root is for. `min(…, 100%)`
    * would resolve against a box that is on its way to nought.
    */
-  [data-ui='drawer'][data-mode='inline'][data-side='start'] > [data-part='panel'],
-  [data-ui='drawer'][data-mode='inline'][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='inline'][data-side='start'] > [data-part-panel],
+  [data-ui-drawer][data-mode='inline'][data-side='end'] > [data-part-panel] {
     inline-size: var(--_extent);
   }
 
-  [data-ui='drawer'][data-mode='inline'][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-mode='inline'][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='inline'][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-mode='inline'][data-side='bottom'] > [data-part-panel] {
     block-size: var(--_extent);
   }
 
@@ -688,13 +706,13 @@
    * a worse picture than one that wrapped. The cap is on `[data-open]` for the
    * reason the root's is.
    */
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='start'] > [data-part='panel'],
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='start'] > [data-part-panel],
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='end'] > [data-part-panel] {
     max-inline-size: 100%;
   }
 
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-mode='inline'][data-open][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-mode='inline'][data-open][data-side='bottom'] > [data-part-panel] {
     max-block-size: 100%;
   }
 
@@ -753,7 +771,7 @@
    *
    * `touch-action: none` so a drag is not read as a scroll on the way past.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -781,16 +799,14 @@
   }
 
   /* Under the hand the gap closes and the marks read as one. */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer']:not([data-disabled]):hover,
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):focus-visible,
-  [data-ui='drawer'][data-dragging] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer]:not([data-disabled]):hover,
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer]:not([data-disabled]):focus-visible,
+  [data-ui-drawer][data-dragging] > [data-part-panel] > [data-part-resizer] {
     gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'] > [data-part='resizer'],
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] > [data-part-resizer],
+  [data-ui-drawer][data-side='end'] > [data-part-panel] > [data-part-resizer] {
     flex-direction: column;
   }
 
@@ -798,52 +814,52 @@
    * The reach. Transparent, centred on the gutter and above the panel's own
    * rows, which is what makes a four-pixel picture a twenty-four-pixel target.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer']::before {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer]::before {
     content: '';
     position: absolute;
     --_reach-overhang: calc((var(--_resizer-reach) - var(--_resizer-thickness)) / -2);
   }
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'] > [data-part='resizer']::before,
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] > [data-part='resizer']::before {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] > [data-part-resizer]::before,
+  [data-ui-drawer][data-side='end'] > [data-part-panel] > [data-part-resizer]::before {
     inset-block: 0;
     inset-inline: var(--_reach-overhang);
   }
 
-  [data-ui='drawer'][data-side='top'] > [data-part='panel'] > [data-part='resizer']::before,
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='resizer']::before {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] > [data-part-resizer]::before,
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-resizer]::before {
     inset-inline: 0;
     inset-block: var(--_reach-overhang);
   }
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'] > [data-part='resizer'],
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] > [data-part-resizer],
+  [data-ui-drawer][data-side='end'] > [data-part-panel] > [data-part-resizer] {
     position: absolute;
     inset-block: 0;
     inline-size: var(--_resizer-thickness);
     cursor: col-resize;
   }
 
-  [data-ui='drawer'][data-side='start'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] > [data-part-resizer] {
     inset-inline-end: 0;
   }
 
-  [data-ui='drawer'][data-side='end'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='end'] > [data-part-panel] > [data-part-resizer] {
     inset-inline-start: 0;
   }
 
-  [data-ui='drawer'][data-side='top'] > [data-part='panel'] > [data-part='resizer'],
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] > [data-part-resizer],
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-resizer] {
     position: relative;
     block-size: var(--_resizer-thickness);
     cursor: row-resize;
   }
 
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-resizer] {
     grid-row: 1;
   }
 
-  [data-ui='drawer'][data-side='top'] > [data-part='panel'] > [data-part='resizer'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] > [data-part-resizer] {
     grid-row: 4;
   }
 
@@ -856,7 +872,7 @@
    *
    * A sheet paints none of them — see the grabber below.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer'] > [data-part='line'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer] > [data-part-line] {
     flex: 0 1 min(var(--slotted-space-12, 4rem), 20%);
     min-block-size: 0;
     min-inline-size: 0;
@@ -869,40 +885,37 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='drawer'][data-side='start']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line']:first-child,
-  [data-ui='drawer'][data-side='end']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line']:first-child {
+  [data-ui-drawer][data-side='start']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-line]:first-child,
+  [data-ui-drawer][data-side='end']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-line]:first-child {
     background: linear-gradient(to bottom, transparent, var(--_rest));
   }
 
-  [data-ui='drawer'][data-side='start']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line']:last-child,
-  [data-ui='drawer'][data-side='end']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line']:last-child {
+  [data-ui-drawer][data-side='start']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-line]:last-child,
+  [data-ui-drawer][data-side='end']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-line]:last-child {
     background: linear-gradient(to top, transparent, var(--_rest));
   }
 
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):hover
-    > [data-part='line'],
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):focus-visible
-    > [data-part='line'],
-  [data-ui='drawer'][data-dragging]
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line'] {
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):hover
+    > [data-part-line],
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):focus-visible
+    > [data-part-line],
+  [data-ui-drawer][data-dragging] > [data-part-panel] > [data-part-resizer] > [data-part-line] {
     flex-basis: 100%;
     background: var(--_active);
   }
@@ -918,7 +931,7 @@
    * there because a sheet is not held at its corners; it is held in the middle,
    * which is where every mobile sheet in the field puts its mark.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer'] > [data-part='grip'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer] > [data-part-grip] {
     flex: none;
     transition:
       background-color var(--slotted-control-transition-duration, var(--slotted-duration-short))
@@ -927,14 +940,8 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='drawer'][data-side='start']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'],
-  [data-ui='drawer'][data-side='end']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'] {
+  [data-ui-drawer][data-side='start'] > [data-part-panel] > [data-part-resizer] > [data-part-grip],
+  [data-ui-drawer][data-side='end'] > [data-part-panel] > [data-part-resizer] > [data-part-grip] {
     color: var(--_rest);
     background-image: radial-gradient(circle at center, currentColor 40%, transparent 42%);
     background-size: var(--slotted-space-2, 0.25rem) var(--slotted-space-2, 0.25rem);
@@ -943,14 +950,11 @@
   }
 
   /* The grabber. Four by thirty-six, full radius, centred above the header. */
-  [data-ui='drawer'][data-side='top']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'],
-  [data-ui='drawer'][data-side='bottom']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] > [data-part-resizer] > [data-part-grip],
+  [data-ui-drawer][data-side='bottom']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-grip] {
     background-color: var(--_rest);
     border-radius: var(--slotted-radius-full, 9999px);
     block-size: var(--slotted-space-2, 0.25rem);
@@ -958,14 +962,11 @@
   }
 
   /* A sheet's lines are not painted: the pill is the whole picture. */
-  [data-ui='drawer'][data-side='top']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line'],
-  [data-ui='drawer'][data-side='bottom']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='line'] {
+  [data-ui-drawer][data-side='top'] > [data-part-panel] > [data-part-resizer] > [data-part-line],
+  [data-ui-drawer][data-side='bottom']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-line] {
     display: none;
   }
 
@@ -976,45 +977,42 @@
    * under focus. `splitter`, which draws the same picture, only ever changed
    * `color`. The pill on a block side is a filled box, so it recolours its fill.
    */
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):hover
-    > [data-part='grip'],
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):focus-visible
-    > [data-part='grip'],
-  [data-ui='drawer'][data-dragging]
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'] {
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):hover
+    > [data-part-grip],
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):focus-visible
+    > [data-part-grip],
+  [data-ui-drawer][data-dragging] > [data-part-panel] > [data-part-resizer] > [data-part-grip] {
     color: var(--_active);
   }
 
-  [data-ui='drawer'][data-side='top']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):hover
-    > [data-part='grip'],
-  [data-ui='drawer'][data-side='bottom']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):hover
-    > [data-part='grip'],
-  [data-ui='drawer'][data-side='top']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):focus-visible
-    > [data-part='grip'],
-  [data-ui='drawer'][data-side='bottom']
-    > [data-part='panel']
-    > [data-part='resizer']:not([data-disabled]):focus-visible
-    > [data-part='grip'],
-  [data-ui='drawer'][data-dragging][data-side='top']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'],
-  [data-ui='drawer'][data-dragging][data-side='bottom']
-    > [data-part='panel']
-    > [data-part='resizer']
-    > [data-part='grip'] {
+  [data-ui-drawer][data-side='top']
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):hover
+    > [data-part-grip],
+  [data-ui-drawer][data-side='bottom']
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):hover
+    > [data-part-grip],
+  [data-ui-drawer][data-side='top']
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):focus-visible
+    > [data-part-grip],
+  [data-ui-drawer][data-side='bottom']
+    > [data-part-panel]
+    > [data-part-resizer]:not([data-disabled]):focus-visible
+    > [data-part-grip],
+  [data-ui-drawer][data-dragging][data-side='top']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-grip],
+  [data-ui-drawer][data-dragging][data-side='bottom']
+    > [data-part-panel]
+    > [data-part-resizer]
+    > [data-part-grip] {
     background-color: var(--_active);
   }
 
@@ -1034,7 +1032,7 @@
    * forbids a system colour inside `::before` or `::after`, and the ring's own
    * last resort is `Highlight`.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='resizer']:focus-visible {
+  [data-ui-drawer] > [data-part-panel] > [data-part-resizer]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-offset, 2px));
   }
@@ -1046,13 +1044,13 @@
    * between a resize the engine prepares for and one it discovers each frame.
    * It is written on the panel because the panel is what changes size.
    */
-  [data-ui='drawer'][data-dragging][data-side='start'] > [data-part='panel'],
-  [data-ui='drawer'][data-dragging][data-side='end'] > [data-part='panel'] {
+  [data-ui-drawer][data-dragging][data-side='start'] > [data-part-panel],
+  [data-ui-drawer][data-dragging][data-side='end'] > [data-part-panel] {
     will-change: inline-size;
   }
 
-  [data-ui='drawer'][data-dragging][data-side='top'] > [data-part='panel'],
-  [data-ui='drawer'][data-dragging][data-side='bottom'] > [data-part='panel'] {
+  [data-ui-drawer][data-dragging][data-side='top'] > [data-part-panel],
+  [data-ui-drawer][data-dragging][data-side='bottom'] > [data-part-panel] {
     will-change: block-size;
   }
 
@@ -1068,7 +1066,7 @@
    * consumer can write: a header, a body and a footer draw two rules; a header
    * and a footer alone draw one; and a panel that is only a body draws none.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-header] {
     grid-row: 1;
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
@@ -1085,7 +1083,7 @@
    * panel past its own measure, and a panel pinned to an edge then pushes its
    * inner edge across the layer.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] > [data-part='title'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-title] {
     grid-column: 1;
     grid-row: 1;
     margin: 0;
@@ -1104,7 +1102,7 @@
     color: var(--slotted-drawer-title-color, var(--slotted-text, CanvasText));
   }
 
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] > [data-part='description'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-description] {
     grid-column: 1;
     grid-row: 2;
     margin: 0;
@@ -1125,7 +1123,7 @@
    * an `icon` box, sized here through the icon token so the box and the
    * formula above read one length.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] > [data-part='close'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-close] {
     --slotted-icon-size: var(--_icon-size);
 
     grid-column: 2;
@@ -1156,21 +1154,21 @@
      is the one a mouse sees: a transparent `::before` centred on the control
      reaches 44 pixels, and the ground and the ring stay square. */
   @media (pointer: coarse) {
-    [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] > [data-part='close'] {
+    [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-close] {
       position: relative;
     }
 
-    [data-ui='drawer'] > [data-part='panel'] > [data-part='header'] > [data-part='close']::before {
+    [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-close]::before {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
     }
   }
 
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='header']
-    > [data-part='close']:not(:disabled):hover {
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-header]
+    > [data-part-close]:not(:disabled):hover {
     /* The ground moves under the pointer and nothing else does (R2). */
     background-color: var(
       --slotted-drawer-close-hover-background,
@@ -1178,20 +1176,17 @@
     );
   }
 
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='header']
-    > [data-part='close']:not(:disabled):active {
+  [data-ui-drawer]
+    > [data-part-panel]
+    > [data-part-header]
+    > [data-part-close]:not(:disabled):active {
     background-color: var(
       --slotted-drawer-close-active-background,
       var(--slotted-tone-secondary-subtle-active)
     );
   }
 
-  [data-ui='drawer']
-    > [data-part='panel']
-    > [data-part='header']
-    > [data-part='close']:focus-visible {
+  [data-ui-drawer] > [data-part-panel] > [data-part-header] > [data-part-close]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-offset, 2px));
   }
@@ -1204,7 +1199,7 @@
    * `dismissable-layer` covers the modal case; this covers the other two, where
    * the page behind is not locked at all.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='body'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-body] {
     grid-row: 2;
     min-block-size: 0;
     min-inline-size: 0;
@@ -1221,11 +1216,11 @@
   }
 
   /* Content that brings its own inset — a page, a list on the panel's edges. */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='body'][data-inset='none'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-body][data-inset='none'] {
     padding: 0;
   }
 
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='body']:not(:first-child) {
+  [data-ui-drawer] > [data-part-panel] > [data-part-body]:not(:first-child) {
     border-block-start: var(--_rule-size) solid
       var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder));
   }
@@ -1237,7 +1232,7 @@
    * instead, and the header, the close button, Escape and the resizer all stay
    * operable: a loading drawer a reader cannot leave is the worse failure.
    */
-  [data-ui='drawer'][data-loading] > [data-part='panel'] > [data-part='body'] {
+  [data-ui-drawer][data-loading] > [data-part-panel] > [data-part-body] {
     min-block-size: var(--slotted-space-12, 4rem);
   }
 
@@ -1249,7 +1244,7 @@
    * reason the middle one is bounded — an unbounded panel pushes it past the
    * fold, which is the whole failure the three-row grid exists to prevent.
    */
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='footer'] {
+  [data-ui-drawer] > [data-part-panel] > [data-part-footer] {
     grid-row: 3;
     display: flex;
     flex-wrap: wrap;
@@ -1274,13 +1269,13 @@
    * above it and the header already clears it; the body scrolls, so an inset on
    * it would be padding inside a scrollport rather than under it.
    */
-  [data-ui='drawer'][data-side='bottom'] > [data-part='panel'] > [data-part='footer'] {
+  [data-ui-drawer][data-side='bottom'] > [data-part-panel] > [data-part-footer] {
     padding-block-end: calc(
       var(--_footer-padding-block, var(--_padding-block)) + env(safe-area-inset-bottom, 0px)
     );
   }
 
-  [data-ui='drawer'] > [data-part='panel'] > [data-part='footer']:not(:first-child) {
+  [data-ui-drawer] > [data-part-panel] > [data-part-footer]:not(:first-child) {
     border-block-start: var(--_rule-size) solid
       var(--slotted-drawer-rule-color, var(--slotted-border-subtle, ButtonBorder));
   }
@@ -1295,7 +1290,7 @@
    * border is read at, and gives the panel the three edges its side does not.
    */
   @media (forced-colors: active) {
-    [data-ui='drawer'] > [data-part='panel'] {
+    [data-ui-drawer] > [data-part-panel] {
       border-width: var(--slotted-border-width-thick, 2px);
       border-color: CanvasText;
     }