@slotted/styles 0.1.0-beta.7 → 0.1.0-beta.9

package/src/upload/upload.css

@@ -31,8 +31,8 @@
    * none of these, and states the same set for itself. They are declared once,
    * for both, rather than copied into a second block that drifts from the first.
    */
-  [data-ui='upload'][data-part='root'],
-  [data-ui='upload'][data-part='viewer'] {
+  [data-ui-upload][data-part-root],
+  [data-ui-upload][data-part-viewer] {
     /**
      * Type, glyph, control height and inner gap come from the control scales,
      * the only ones the theme restates per density, so an upload inside a dense
@@ -175,7 +175,7 @@
   }
 
   /* The family itself: the column the reader sees in the page. */
-  [data-ui='upload'][data-part='root'] {
+  [data-ui-upload][data-part-root] {
     container-name: slotted-upload;
     container-type: inline-size;
     /**
@@ -193,7 +193,7 @@
     gap: var(--_section-gap);
   }
 
-  [data-ui='upload'][data-size='sm'] {
+  [data-ui-upload][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_glyph-size: var(--slotted-control-icon-size-sm, 14px);
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
@@ -202,7 +202,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='upload'][data-size='lg'] {
+  [data-ui-upload][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_glyph-size: var(--slotted-control-icon-size-lg, 18px);
     --_inner-size: var(--slotted-control-inner-size-lg, 28px);
@@ -217,13 +217,13 @@
    * label row, the description and the error slot for every control in this
    * library. They exist for the upload that stands on its own.
    */
-  [data-ui='upload'] [data-part='label'] {
+  [data-ui-upload] [data-part-label] {
     color: var(--slotted-text);
     flex: none;
     font-weight: var(--slotted-upload-label-font-weight, var(--slotted-font-weight-medium, 500));
   }
 
-  [data-ui='upload'] [data-part='description'] {
+  [data-ui-upload] [data-part-description] {
     color: var(--slotted-text-muted);
     flex: none;
     margin: 0;
@@ -237,7 +237,7 @@
    * reaches, and WCAG 2.2 SC 2.5.7 is discharged by its being there rather
    * than by the region pretending to be a control.
    */
-  [data-ui='upload'] [data-part='dropzone'] {
+  [data-ui-upload] [data-part-dropzone] {
     --_zone-border-color: var(--_zone-edge);
     --_zone-surface: var(--_zone-ground);
 
@@ -264,7 +264,7 @@
    * the `dropzone` shape only. The `field` shape is one control's height and
    * has no room for a second mark beside the trigger's.
    */
-  [data-ui='upload'] [data-part='dropzone'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-dropzone] > [data-ui-icon] {
     --slotted-icon-size: var(--_zone-glyph-size);
 
     color: var(--slotted-text-muted);
@@ -277,7 +277,7 @@
    * ratio against the page and against the ground it encloses, and the ground
    * alone would not.
    */
-  [data-ui='upload'] [data-part='dropzone'][data-drop-target] {
+  [data-ui-upload] [data-part-dropzone][data-drop-target] {
     --_zone-border-color: var(--slotted-tone-accent-border);
     --_zone-surface: var(--slotted-tone-accent-surface);
   }
@@ -289,7 +289,7 @@
    * the name or the size — so this is painted for a refusal that is already
    * certain and never for one that is merely possible.
    */
-  [data-ui='upload'] [data-part='dropzone'][data-drop-invalid] {
+  [data-ui-upload] [data-part-dropzone][data-drop-invalid] {
     --_zone-border-color: var(--slotted-tone-danger-border);
     --_zone-surface: var(--slotted-tone-danger-surface);
   }
@@ -308,12 +308,12 @@
    * OKLab L, above the 0.02 the theme holds every surface step to, and eight
    * by 0.062.
    */
-  [data-ui='upload'] [data-part='dropzone'][data-browsable] {
+  [data-ui-upload] [data-part-dropzone][data-browsable] {
     cursor: pointer;
   }
 
-  [data-ui='upload']:not([data-disabled])
-    [data-part='dropzone'][data-browsable]:not([data-drop-target], [data-drop-invalid]):hover {
+  [data-ui-upload]:not([data-disabled])
+    [data-part-dropzone][data-browsable]:not([data-drop-target], [data-drop-invalid]):hover {
     --_zone-surface: color-mix(
       in oklab,
       var(--slotted-text) var(--slotted-upload-zone-state-layer-hover, 4%),
@@ -321,8 +321,8 @@
     );
   }
 
-  [data-ui='upload']:not([data-disabled])
-    [data-part='dropzone'][data-browsable]:not([data-drop-target], [data-drop-invalid]):active {
+  [data-ui-upload]:not([data-disabled])
+    [data-part-dropzone][data-browsable]:not([data-drop-target], [data-drop-invalid]):active {
     --_zone-surface: color-mix(
       in oklab,
       var(--slotted-text) var(--slotted-upload-zone-state-layer-active, 8%),
@@ -331,8 +331,8 @@
   }
 
   /* An invalid region keeps its danger edge under the pointer. */
-  [data-ui='upload']:not([data-disabled], [data-invalid])
-    [data-part='dropzone'][data-browsable]:not([data-drop-target], [data-drop-invalid]):is(
+  [data-ui-upload]:not([data-disabled], [data-invalid])
+    [data-part-dropzone][data-browsable]:not([data-drop-target], [data-drop-invalid]):is(
       :hover,
       :active
     ) {
@@ -344,24 +344,24 @@
    * hover over the region around it, and the two answering at once drew two
    * targets for one press.
    */
-  [data-ui='upload']:not([data-disabled])
-    [data-part='dropzone'][data-browsable]:not([data-drop-target], [data-drop-invalid]):has(
-      [data-part='trigger']:hover
+  [data-ui-upload]:not([data-disabled])
+    [data-part-dropzone][data-browsable]:not([data-drop-target], [data-drop-invalid]):has(
+      [data-part-trigger]:hover
     ) {
     --_zone-border-color: var(--_zone-edge);
     --_zone-surface: var(--_zone-ground);
   }
 
-  [data-ui='upload'][data-disabled][data-part='root'] {
+  [data-ui-upload][data-disabled][data-part-root] {
     --_zone-edge: var(--slotted-disabled-border);
     --_zone-ground: var(--slotted-disabled-background);
   }
 
-  [data-ui='upload'][data-disabled] [data-part='dropzone'] {
+  [data-ui-upload][data-disabled] [data-part-dropzone] {
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='upload'][data-invalid][data-part='root'] {
+  [data-ui-upload][data-invalid][data-part-root] {
     --_zone-edge: var(--slotted-tone-danger-border);
   }
 
@@ -372,7 +372,7 @@
    * family's contract, and what is wanted is one control-height box that opens
    * the picker natively.
    */
-  [data-ui='upload'] [data-part='trigger'] {
+  [data-ui-upload] [data-part-trigger] {
     align-items: center;
     background-color: var(--slotted-upload-trigger-background, var(--slotted-surface));
     block-size: var(--_control-height);
@@ -403,11 +403,11 @@
    * in the `dropzone` shape the region already carries it, and two of the same
    * mark eighty pixels apart is one mark too many.
    */
-  [data-ui='upload'] [data-part='trigger'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-trigger] > [data-ui-icon] {
     --slotted-icon-size: var(--_glyph-size);
   }
 
-  [data-ui='upload']:not([data-disabled]) [data-part='trigger']:hover {
+  [data-ui-upload]:not([data-disabled]) [data-part-trigger]:hover {
     background-color: var(--slotted-tone-secondary-subtle-hover);
   }
 
@@ -415,12 +415,12 @@
    * The trigger is drawn as a control and presses like `button` does: the
    * ground takes the next step and the box settles by a hairline, at once.
    */
-  [data-ui='upload']:not([data-disabled]) [data-part='trigger']:active {
+  [data-ui-upload]:not([data-disabled]) [data-part-trigger]:active {
     background-color: var(--slotted-tone-secondary-subtle-active);
     translate: 0 var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='upload'][data-disabled] [data-part='trigger'] {
+  [data-ui-upload][data-disabled] [data-part-trigger] {
     background-color: var(--slotted-disabled-background);
     border-color: var(--slotted-disabled-border);
     box-shadow: none;
@@ -432,12 +432,12 @@
    * The ring belongs to the trigger and the focus belongs to the input inside
    * it. A ring around a one-pixel input would be a ring around nothing.
    */
-  [data-ui='upload'] [data-part='trigger']:has(:focus-visible) {
+  [data-ui-upload] [data-part-trigger]:has(:focus-visible) {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
-  [data-ui='upload'][data-invalid] [data-part='trigger'] {
+  [data-ui-upload][data-invalid] [data-part-trigger] {
     --slotted-focus-ring-color: var(--slotted-focus-ring-color-invalid);
 
     border-color: var(--slotted-tone-danger-border);
@@ -458,7 +458,7 @@
    * stretching a transparent input across the region takes the drop away from
    * the region and makes the drag state unobservable.
    */
-  [data-ui='upload'] [data-part='input'] {
+  [data-ui-upload] [data-part-input] {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -477,7 +477,7 @@
    * draw on the element holding focus has to go: `tree` moved its ring and
    * forgot this, and a focused row carried two rings in two colours.
    */
-  [data-ui='upload'] [data-part='input']:focus-visible {
+  [data-ui-upload] [data-part-input]:focus-visible {
     outline: none;
   }
 
@@ -488,7 +488,7 @@
    * drawn only when there is more than one file, because for a single file the
    * row already says all of it.
    */
-  [data-ui='upload'] [data-part='summary'] {
+  [data-ui-upload] [data-part-summary] {
     align-items: center;
     color: var(--slotted-text-muted);
     display: flex;
@@ -497,7 +497,7 @@
     justify-content: space-between;
   }
 
-  [data-ui='upload'] [data-part='clear'] {
+  [data-ui-upload] [data-part-clear] {
     appearance: none;
     flex: none;
     white-space: nowrap;
@@ -515,20 +515,20 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='upload'] [data-part='clear']:enabled:hover {
+  [data-ui-upload] [data-part-clear]:enabled:hover {
     background-color: var(--_state-hover);
   }
 
-  [data-ui='upload'] [data-part='clear']:enabled:active {
+  [data-ui-upload] [data-part-clear]:enabled:active {
     background-color: var(--_state-active);
   }
 
-  [data-ui='upload'] [data-part='clear']:disabled {
+  [data-ui-upload] [data-part-clear]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: default;
   }
 
-  [data-ui='upload'] [data-part='clear']:focus-visible {
+  [data-ui-upload] [data-part-clear]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -552,7 +552,7 @@
    * between two — which is what says there is more below without a shadow, a
    * gradient or a count.
    */
-  [data-ui='upload'] [data-part='list'] {
+  [data-ui-upload] [data-part-list] {
     /** One row, from the parts a row is made of. Used twice below. */
     --_row-block-size: calc(
       max(var(--_preview-size), 2lh) + 2 * var(--_item-inset-block) + 2 * var(--_border-width) +
@@ -605,7 +605,7 @@
    * text with icons beside it, and only a failed one had a box; a file is a
    * thing the reader acts on, and it reads as one.
    */
-  [data-ui='upload'] [data-part='item'] {
+  [data-ui-upload] [data-part-item] {
     align-items: center;
     /*
      * A row is never squeezed. Flex children shrink by default, so nine rows in
@@ -653,13 +653,13 @@
    * controlled `files`; the promise is in `docs/process/build-order.md`.
    */
   @starting-style {
-    [data-ui='upload'] [data-part='item'] {
+    [data-ui-upload] [data-part-item] {
       opacity: 0;
       translate: 0 calc(-1 * var(--slotted-space-2, 0.25rem));
     }
   }
 
-  [data-ui='upload'] [data-part='item'][data-status='success'] {
+  [data-ui-upload] [data-part-item][data-status='success'] {
     --_status-text: var(--slotted-tone-success-text);
   }
 
@@ -671,12 +671,12 @@
    * forced colours, where the line survives and a tint does not. ReUI draws
    * its `idle` attachment the same way (`c-attachment-5`).
    */
-  [data-ui='upload'] [data-part='item'][data-status='ready'] {
+  [data-ui-upload] [data-part-item][data-status='ready'] {
     border-style: dashed;
   }
 
-  [data-ui='upload'] [data-part='item'][data-status='paused'],
-  [data-ui='upload'] [data-part='item'][data-status='stalled'] {
+  [data-ui-upload] [data-part-item][data-status='paused'],
+  [data-ui-upload] [data-part-item][data-status='stalled'] {
     --_status-text: var(--slotted-tone-warning-text);
   }
 
@@ -686,18 +686,18 @@
    * both need the reader to do something; a file the reader stopped themselves
    * does not, so it stays neutral and only its word changes.
    */
-  [data-ui='upload'] [data-part='item'][data-status='rejected'],
-  [data-ui='upload'] [data-part='item'][data-status='error'] {
+  [data-ui-upload] [data-part-item][data-status='rejected'],
+  [data-ui-upload] [data-part-item][data-status='error'] {
     --_status-text: var(--slotted-tone-danger-text);
     --_item-surface: var(--slotted-tone-danger-surface);
     --_item-border: var(--slotted-tone-danger-border);
   }
 
-  [data-ui='upload'] [data-part='item'][data-status='canceled'] {
+  [data-ui-upload] [data-part-item][data-status='canceled'] {
     --_status-text: var(--slotted-text-muted);
   }
 
-  [data-ui='upload'][data-disabled] [data-part='item'] {
+  [data-ui-upload][data-disabled] [data-part-item] {
     color: var(--slotted-disabled-foreground);
   }
 
@@ -722,7 +722,7 @@
    * tile. `packages/themes/test/default-theme.test.mjs` measures all
    * twenty-seven.
    */
-  [data-ui='upload'] [data-part='preview'] {
+  [data-ui-upload] [data-part-preview] {
     align-items: center;
     background-color: var(--_kind-tile);
     block-size: var(--_preview-size);
@@ -736,46 +736,46 @@
     overflow: hidden;
   }
 
-  [data-ui='upload'] [data-part='preview'] > img {
+  [data-ui-upload] [data-part-preview] > img {
     block-size: 100%;
     inline-size: 100%;
     object-fit: cover;
   }
 
   /* The kind's glyph, drawn by the binding when there is no picture to show. */
-  [data-ui='upload'] [data-part='preview'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-preview] > [data-ui-icon] {
     --slotted-icon-size: var(--_glyph-size);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='pdf'] {
+  [data-ui-upload] [data-part-preview][data-kind='pdf'] {
     --_kind-tile: var(--slotted-upload-kind-pdf);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='document'] {
+  [data-ui-upload] [data-part-preview][data-kind='document'] {
     --_kind-tile: var(--slotted-upload-kind-document);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='spreadsheet'] {
+  [data-ui-upload] [data-part-preview][data-kind='spreadsheet'] {
     --_kind-tile: var(--slotted-upload-kind-spreadsheet);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='presentation'] {
+  [data-ui-upload] [data-part-preview][data-kind='presentation'] {
     --_kind-tile: var(--slotted-upload-kind-presentation);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='image'] {
+  [data-ui-upload] [data-part-preview][data-kind='image'] {
     --_kind-tile: var(--slotted-upload-kind-image);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='video'] {
+  [data-ui-upload] [data-part-preview][data-kind='video'] {
     --_kind-tile: var(--slotted-upload-kind-video);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='audio'] {
+  [data-ui-upload] [data-part-preview][data-kind='audio'] {
     --_kind-tile: var(--slotted-upload-kind-audio);
   }
 
-  [data-ui='upload'] [data-part='preview'][data-kind='archive'] {
+  [data-ui-upload] [data-part-preview][data-kind='archive'] {
     --_kind-tile: var(--slotted-upload-kind-archive);
   }
 
@@ -800,7 +800,7 @@
    * is what makes a long name truncate instead of pushing the controls off the
    * end.
    */
-  [data-ui='upload'] [data-part='item'] > [data-part='body'] {
+  [data-ui-upload] [data-part-item] > [data-part-body] {
     display: flex;
     flex-direction: column;
     gap: var(--_line-gap);
@@ -817,7 +817,7 @@
    * `pdf.claim-form-2026-0914`. Found in the harness capture at `dir="rtl"`,
    * where nothing failed and the name was backwards.
    */
-  [data-ui='upload'] [data-part='filename'] {
+  [data-ui-upload] [data-part-filename] {
     display: flex;
     /*
      * The name is the row's title and the detail line under it is at the same
@@ -841,7 +841,7 @@
    * Nothing about it looks like a control until the pointer is on it — a list
    * of nine underlined names is a list nobody can read.
    */
-  [data-ui='upload'] button[data-part='filename'] {
+  [data-ui-upload] button[data-part-filename] {
     appearance: none;
     background: none;
     border: 0;
@@ -856,7 +856,7 @@
     transition: translate var(--slotted-duration-instant) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='upload'] button[data-part='filename']:enabled:hover {
+  [data-ui-upload] button[data-part-filename]:enabled:hover {
     text-decoration-line: underline;
     text-underline-offset: 0.2em;
   }
@@ -866,20 +866,20 @@
    * a press answers in place: the name settles by a hairline — the answer
    * `timeline` gives its group heading.
    */
-  [data-ui='upload'] button[data-part='filename']:enabled:active {
+  [data-ui-upload] button[data-part-filename]:enabled:active {
     text-decoration-line: underline;
     text-underline-offset: 0.2em;
     translate: 0 var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='upload'] button[data-part='filename']:focus-visible {
+  [data-ui-upload] button[data-part-filename]:focus-visible {
     border-radius: var(--slotted-control-radius, 4px);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
 
   /* In a wall of pictures the picture is the thing the reader is pointing at. */
-  [data-ui='upload'][data-layout='grid'] button[data-part='preview'] {
+  [data-ui-upload][data-layout='grid'] button[data-part-preview] {
     appearance: none;
     border: 0;
     cursor: pointer;
@@ -893,7 +893,7 @@
    * the file is. CSS cannot truncate in the middle; the split is made at the
    * last dot in the binding, and this is the half of the answer the sheet owes.
    */
-  [data-ui='upload'] [data-part='name'] {
+  [data-ui-upload] [data-part-name] {
     flex: 0 1 auto;
     min-inline-size: 0;
     overflow: hidden;
@@ -901,12 +901,12 @@
     white-space: nowrap;
   }
 
-  [data-ui='upload'] [data-part='extension'] {
+  [data-ui-upload] [data-part-extension] {
     flex: none;
   }
 
   /** The second line: the size, then the word for what is happening to it. */
-  [data-ui='upload'] [data-part='detail'] {
+  [data-ui-upload] [data-part-detail] {
     align-items: baseline;
     color: var(--slotted-text-muted);
     display: flex;
@@ -916,7 +916,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='upload'] [data-part='meta'] {
+  [data-ui-upload] [data-part-meta] {
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
@@ -925,7 +925,7 @@
    * The word, in the colour the status set. A status said in colour alone fails
    * WCAG 2.2 SC 1.4.1, which is why it is a word first and a colour second.
    */
-  [data-ui='upload'] [data-part='status'] {
+  [data-ui-upload] [data-part-status] {
     color: var(--_status-text);
     font-weight: var(--slotted-upload-status-font-weight, var(--slotted-font-weight-medium, 500));
     min-inline-size: 0;
@@ -941,13 +941,13 @@
    * it left an orphaned middot at the start of the second line, which is what
    * the card at 720 pixels showed.
    */
-  [data-ui='upload'] [data-part='meta']:has(+ [data-part='status'])::after {
+  [data-ui-upload] [data-part-meta]:has(+ [data-part-status])::after {
     color: var(--slotted-text-muted);
     content: ' ·';
     margin-inline-end: 0.4em;
   }
 
-  [data-ui='upload'] [data-part='message'] {
+  [data-ui-upload] [data-part-message] {
     color: var(--_status-text);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     line-height: var(--_leading);
@@ -962,7 +962,7 @@
    * answer to one question, drifting from the first the moment either is
    * retuned.
    */
-  [data-ui='upload'] [data-part='progress'] {
+  [data-ui-upload] [data-part-progress] {
     display: block;
     inset-block-end: 0;
     inset-inline: 0;
@@ -989,20 +989,20 @@
    * is no column to keep and a row that offers one control no longer carries
    * two empty slots to prove it.
    */
-  [data-ui='upload'] [data-part='actions'] {
+  [data-ui-upload] [data-part-actions] {
     display: inline-flex;
     gap: var(--slotted-space-1, 0.125rem);
     grid-area: actions;
     justify-content: flex-end;
   }
 
-  [data-ui='upload'] [data-part='viewerExternal'],
-  [data-ui='upload'] [data-part='viewerClose'],
-  [data-ui='upload'] [data-part='start'],
-  [data-ui='upload'] [data-part='pause'],
-  [data-ui='upload'] [data-part='retry'],
-  [data-ui='upload'] [data-part='cancel'],
-  [data-ui='upload'] [data-part='remove'] {
+  [data-ui-upload] [data-part-viewerexternal],
+  [data-ui-upload] [data-part-viewerclose],
+  [data-ui-upload] [data-part-start],
+  [data-ui-upload] [data-part-pause],
+  [data-ui-upload] [data-part-retry],
+  [data-ui-upload] [data-part-cancel],
+  [data-ui-upload] [data-part-remove] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -1028,13 +1028,13 @@
    * pause, rotate-ccw, x and trash. A cross means *stop this* and a bin means
    * *take it away*, because the marks appear together on one row.
    */
-  [data-ui='upload'] [data-part='viewerExternal'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='viewerClose'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='start'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='pause'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='retry'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='cancel'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='remove'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-viewerexternal] > [data-ui-icon],
+  [data-ui-upload] [data-part-viewerclose] > [data-ui-icon],
+  [data-ui-upload] [data-part-start] > [data-ui-icon],
+  [data-ui-upload] [data-part-pause] > [data-ui-icon],
+  [data-ui-upload] [data-part-retry] > [data-ui-icon],
+  [data-ui-upload] [data-part-cancel] > [data-ui-icon],
+  [data-ui-upload] [data-part-remove] > [data-ui-icon] {
     --slotted-icon-size: var(--_action-glyph-size);
   }
 
@@ -1047,67 +1047,67 @@
    * width and is 44 tall.
    */
   @media (pointer: coarse) {
-    [data-ui='upload']
+    [data-ui-upload]
       :is(
-        [data-part='viewerExternal'],
-        [data-part='viewerClose'],
-        [data-part='start'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel'],
-        [data-part='remove']
+        [data-part-viewerexternal],
+        [data-part-viewerclose],
+        [data-part-start],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel],
+        [data-part-remove]
       ) {
       position: relative;
     }
 
-    [data-ui='upload']
+    [data-ui-upload]
       :is(
-        [data-part='viewerExternal'],
-        [data-part='viewerClose'],
-        [data-part='start'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel'],
-        [data-part='remove']
+        [data-part-viewerexternal],
+        [data-part-viewerclose],
+        [data-part-start],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel],
+        [data-part-remove]
       )::after {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
     }
 
-    [data-ui='upload']
+    [data-ui-upload]
       :is(
-        [data-part='viewerExternal'],
-        [data-part='start'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel']
+        [data-part-viewerexternal],
+        [data-part-start],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel]
       ):has(
         + :is(
-            [data-part='viewerClose'],
-            [data-part='pause'],
-            [data-part='retry'],
-            [data-part='cancel'],
-            [data-part='remove']
+            [data-part-viewerclose],
+            [data-part-pause],
+            [data-part-retry],
+            [data-part-cancel],
+            [data-part-remove]
           ):not([hidden])
       )::after {
       inset-inline-end: 0;
     }
 
-    [data-ui='upload']
+    [data-ui-upload]
       :is(
-        [data-part='viewerExternal'],
-        [data-part='start'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel']
+        [data-part-viewerexternal],
+        [data-part-start],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel]
       ):not([hidden])
       + :is(
-        [data-part='viewerClose'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel'],
-        [data-part='remove']
+        [data-part-viewerclose],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel],
+        [data-part-remove]
       )::after {
       inset-inline-start: 0;
     }
@@ -1118,44 +1118,44 @@
    * and the reason it exists: a control the browser has already refused must
    * not answer a pointer.
    */
-  [data-ui='upload'] [data-part='viewerExternal']:enabled:hover,
-  [data-ui='upload'] [data-part='viewerClose']:enabled:hover,
-  [data-ui='upload'] [data-part='start']:enabled:hover,
-  [data-ui='upload'] [data-part='pause']:enabled:hover,
-  [data-ui='upload'] [data-part='retry']:enabled:hover,
-  [data-ui='upload'] [data-part='cancel']:enabled:hover,
-  [data-ui='upload'] [data-part='remove']:enabled:hover {
+  [data-ui-upload] [data-part-viewerexternal]:enabled:hover,
+  [data-ui-upload] [data-part-viewerclose]:enabled:hover,
+  [data-ui-upload] [data-part-start]:enabled:hover,
+  [data-ui-upload] [data-part-pause]:enabled:hover,
+  [data-ui-upload] [data-part-retry]:enabled:hover,
+  [data-ui-upload] [data-part-cancel]:enabled:hover,
+  [data-ui-upload] [data-part-remove]:enabled:hover {
     background-color: var(--_state-hover);
   }
 
-  [data-ui='upload'] [data-part='viewerExternal']:enabled:active,
-  [data-ui='upload'] [data-part='viewerClose']:enabled:active,
-  [data-ui='upload'] [data-part='start']:enabled:active,
-  [data-ui='upload'] [data-part='pause']:enabled:active,
-  [data-ui='upload'] [data-part='retry']:enabled:active,
-  [data-ui='upload'] [data-part='cancel']:enabled:active,
-  [data-ui='upload'] [data-part='remove']:enabled:active {
+  [data-ui-upload] [data-part-viewerexternal]:enabled:active,
+  [data-ui-upload] [data-part-viewerclose]:enabled:active,
+  [data-ui-upload] [data-part-start]:enabled:active,
+  [data-ui-upload] [data-part-pause]:enabled:active,
+  [data-ui-upload] [data-part-retry]:enabled:active,
+  [data-ui-upload] [data-part-cancel]:enabled:active,
+  [data-ui-upload] [data-part-remove]:enabled:active {
     background-color: var(--_state-active);
   }
 
-  [data-ui='upload'] [data-part='viewerExternal']:disabled,
-  [data-ui='upload'] [data-part='viewerClose']:disabled,
-  [data-ui='upload'] [data-part='start']:disabled,
-  [data-ui='upload'] [data-part='pause']:disabled,
-  [data-ui='upload'] [data-part='retry']:disabled,
-  [data-ui='upload'] [data-part='cancel']:disabled,
-  [data-ui='upload'] [data-part='remove']:disabled {
+  [data-ui-upload] [data-part-viewerexternal]:disabled,
+  [data-ui-upload] [data-part-viewerclose]:disabled,
+  [data-ui-upload] [data-part-start]:disabled,
+  [data-ui-upload] [data-part-pause]:disabled,
+  [data-ui-upload] [data-part-retry]:disabled,
+  [data-ui-upload] [data-part-cancel]:disabled,
+  [data-ui-upload] [data-part-remove]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: default;
   }
 
-  [data-ui='upload'] [data-part='viewerExternal']:focus-visible,
-  [data-ui='upload'] [data-part='viewerClose']:focus-visible,
-  [data-ui='upload'] [data-part='start']:focus-visible,
-  [data-ui='upload'] [data-part='pause']:focus-visible,
-  [data-ui='upload'] [data-part='retry']:focus-visible,
-  [data-ui='upload'] [data-part='cancel']:focus-visible,
-  [data-ui='upload'] [data-part='remove']:focus-visible {
+  [data-ui-upload] [data-part-viewerexternal]:focus-visible,
+  [data-ui-upload] [data-part-viewerclose]:focus-visible,
+  [data-ui-upload] [data-part-start]:focus-visible,
+  [data-ui-upload] [data-part-pause]:focus-visible,
+  [data-ui-upload] [data-part-retry]:focus-visible,
+  [data-ui-upload] [data-part-cancel]:focus-visible,
+  [data-ui-upload] [data-part-remove]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
@@ -1172,7 +1172,7 @@
    * survives as the escape hatch inside the viewer, where a PDF is better read
    * in the browser's own full window.
    */
-  [data-ui='upload'][data-part='viewer'] {
+  [data-ui-upload][data-part-viewer] {
     background-color: var(--slotted-surface);
     block-size: 100%;
     display: grid;
@@ -1189,7 +1189,7 @@
     inline-size: 100%;
   }
 
-  [data-ui='upload'] [data-part='viewerHeader'] {
+  [data-ui-upload] [data-part-viewerheader] {
     align-items: center;
     border-block-end: var(--_border-width) solid var(--slotted-border-subtle);
     column-gap: var(--_gap);
@@ -1199,7 +1199,7 @@
     padding-inline: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='upload'] [data-part='viewerTitle'] {
+  [data-ui-upload] [data-part-viewertitle] {
     font-size: var(--slotted-font-size-md, 0.875rem);
     line-height: var(--_leading);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -1209,13 +1209,13 @@
     white-space: nowrap;
   }
 
-  [data-ui='upload'] [data-part='viewerMeta'] {
+  [data-ui-upload] [data-part-viewermeta] {
     color: var(--slotted-text-muted);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     line-height: var(--_leading);
   }
 
-  [data-ui='upload'] [data-part='viewerActions'] {
+  [data-ui-upload] [data-part-vieweractions] {
     align-items: center;
     display: inline-flex;
     gap: var(--slotted-space-1, 0.125rem);
@@ -1226,7 +1226,7 @@
    * on it is the consumer's content and a photograph with a white border on a
    * white page has no edge at all.
    */
-  [data-ui='upload'] [data-part='viewerStage'] {
+  [data-ui-upload] [data-part-viewerstage] {
     background-color: var(--slotted-surface-sunken);
     display: grid;
     min-block-size: 0;
@@ -1251,8 +1251,8 @@
    * a reader saw as an image running off the screen. `contain` is what keeps a
    * portrait scan and a wide dashcam frame both whole in the same box.
    */
-  [data-ui='upload'] [data-part='viewerStage'] > img,
-  [data-ui='upload'] [data-part='viewerStage'] > iframe {
+  [data-ui-upload] [data-part-viewerstage] > img,
+  [data-ui-upload] [data-part-viewerstage] > iframe {
     align-self: stretch;
     block-size: auto;
     inline-size: auto;
@@ -1261,7 +1261,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='upload'] [data-part='viewerStage'] > img {
+  [data-ui-upload] [data-part-viewerstage] > img {
     object-fit: contain;
   }
 
@@ -1272,14 +1272,14 @@
    * no script. Both bindings state it; it is written here because a reader of
    * this file will ask why one frame differs from the other.
    */
-  [data-ui='upload'] [data-part='viewerStage'] > iframe {
+  [data-ui-upload] [data-part-viewerstage] > iframe {
     background-color: var(--slotted-surface);
     border: 0;
   }
 
   /* Sized by the film rather than by the stage, and never past it. */
-  [data-ui='upload'] [data-part='viewerStage'] > video,
-  [data-ui='upload'] [data-part='viewerStage'] > audio {
+  [data-ui-upload] [data-part-viewerstage] > video,
+  [data-ui-upload] [data-part-viewerstage] > audio {
     max-block-size: 100%;
     max-inline-size: 100%;
     min-block-size: 0;
@@ -1292,12 +1292,12 @@
    * because a browser cannot draw them and drawing them needs a server or a
    * megabyte of engine — which is the honest answer rather than an empty box.
    */
-  [data-ui='upload'] [data-part='viewerStage'] > [data-part='preview'] {
+  [data-ui-upload] [data-part-viewerstage] > [data-part-preview] {
     block-size: var(--slotted-upload-viewer-tile-size, 6rem);
     inline-size: var(--slotted-upload-viewer-tile-size, 6rem);
   }
 
-  [data-ui='upload'] [data-part='viewerStage'] > [data-part='preview'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-viewerstage] > [data-part-preview] > [data-ui-icon] {
     --slotted-icon-size: calc(3 * var(--_glyph-size));
   }
 
@@ -1306,7 +1306,7 @@
    * the defaults provider holds, so an application translates it once; the name
    * and the way out are in the header, where they are for every other file.
    */
-  [data-ui='upload'] [data-part='viewerStage'] > p {
+  [data-ui-upload] [data-part-viewerstage] > p {
     color: var(--slotted-text-muted);
     margin: 0;
     max-inline-size: 28ch;
@@ -1319,7 +1319,7 @@
    * different axes and sat diagonally apart; a column of two things centred is
    * one rule with one meaning.
    */
-  [data-ui='upload'] [data-part='viewerStage']:has(> [data-part='preview']) {
+  [data-ui-upload] [data-part-viewerstage]:has(> [data-part-preview]) {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -1332,8 +1332,8 @@
    * the header, where the reader's pointer already is, and they are held off
    * the edge so a photograph that fills the stage is not covered at its corner.
    */
-  [data-ui='upload'] [data-part='viewerPrevious'],
-  [data-ui='upload'] [data-part='viewerNext'] {
+  [data-ui-upload] [data-part-viewerprevious],
+  [data-ui-upload] [data-part-viewernext] {
     align-items: center;
     appearance: none;
     background-color: color-mix(
@@ -1358,11 +1358,11 @@
       translate var(--slotted-duration-instant) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='upload'] [data-part='viewerPrevious'] {
+  [data-ui-upload] [data-part-viewerprevious] {
     inset-inline-start: var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='upload'] [data-part='viewerNext'] {
+  [data-ui-upload] [data-part-viewernext] {
     inset-inline-end: var(--slotted-space-5, 0.75rem);
   }
 
@@ -1372,12 +1372,12 @@
    * chevron rather than a pair. The binding marks both icons `directional`, so
    * they mirror where reading runs right to left.
    */
-  [data-ui='upload'] [data-part='viewerPrevious'] > [data-ui='icon'],
-  [data-ui='upload'] [data-part='viewerNext'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-viewerprevious] > [data-ui-icon],
+  [data-ui-upload] [data-part-viewernext] > [data-ui-icon] {
     --slotted-icon-size: var(--_glyph-size);
   }
 
-  [data-ui='upload'] [data-part='viewerPrevious'] > [data-ui='icon'] {
+  [data-ui-upload] [data-part-viewerprevious] > [data-ui-icon] {
     rotate: 180deg;
   }
 
@@ -1387,8 +1387,8 @@
    * is mixed into the plate instead, which keeps it opaque over the photograph
    * and steps it by the amount every other control in the family steps.
    */
-  [data-ui='upload'] [data-part='viewerPrevious']:enabled:hover,
-  [data-ui='upload'] [data-part='viewerNext']:enabled:hover {
+  [data-ui-upload] [data-part-viewerprevious]:enabled:hover,
+  [data-ui-upload] [data-part-viewernext]:enabled:hover {
     background-color: color-mix(
       in oklab,
       currentcolor var(--slotted-upload-state-layer-hover, 8%),
@@ -1396,8 +1396,8 @@
     );
   }
 
-  [data-ui='upload'] [data-part='viewerPrevious']:enabled:active,
-  [data-ui='upload'] [data-part='viewerNext']:enabled:active {
+  [data-ui-upload] [data-part-viewerprevious]:enabled:active,
+  [data-ui-upload] [data-part-viewernext]:enabled:active {
     background-color: color-mix(
       in oklab,
       currentcolor var(--slotted-upload-state-layer-active, 14%),
@@ -1406,14 +1406,14 @@
     translate: 0 var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='upload'] [data-part='viewerPrevious']:disabled,
-  [data-ui='upload'] [data-part='viewerNext']:disabled {
+  [data-ui-upload] [data-part-viewerprevious]:disabled,
+  [data-ui-upload] [data-part-viewernext]:disabled {
     color: var(--slotted-disabled-foreground);
     cursor: default;
   }
 
-  [data-ui='upload'] [data-part='viewerPrevious']:focus-visible,
-  [data-ui='upload'] [data-part='viewerNext']:focus-visible {
+  [data-ui-upload] [data-part-viewerprevious]:focus-visible,
+  [data-ui-upload] [data-part-viewernext]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -1430,9 +1430,9 @@
    * is a third place the DOM is written and a scene that puts an upload in a
    * field has to look like the form does.
    */
-  [data-ui='field'] [data-ui='upload'] > [data-part='label'],
-  [data-ui='field'] [data-ui='upload'] > [data-part='description'],
-  [data-ui='field'] [data-ui='upload'] > [data-part='message'] {
+  [data-ui-field] [data-ui-upload] > [data-part-label],
+  [data-ui-field] [data-ui-upload] > [data-part-description],
+  [data-ui-field] [data-ui-upload] > [data-part-message] {
     display: none;
   }
 
@@ -1442,7 +1442,7 @@
    * one step: the region, the summary and the list are one block rather than
    * three things with a paragraph's air between them.
    */
-  [data-ui='field'] [data-ui='upload'][data-part='root'] {
+  [data-ui-field] [data-ui-upload][data-part-root] {
     --_section-gap: var(--slotted-upload-field-section-gap, var(--slotted-space-4, 0.5rem));
   }
 
@@ -1452,7 +1452,7 @@
    * is still a target; what it does not do is claim a box the size of a card
    * for an application that wanted a button.
    */
-  [data-ui='upload'][data-variant='button'] [data-part='trigger'] {
+  [data-ui-upload][data-variant='button'] [data-part-trigger] {
     align-self: start;
   }
 
@@ -1470,12 +1470,12 @@
    * written as a border colour on the region, it held one colour through all
    * of them. `:where` keeps it below the invalid and disabled pair.
    */
-  [data-ui='upload'][data-variant='field']:where([data-part='root']) {
+  [data-ui-upload][data-variant='field']:where([data-part-root]) {
     --_zone-edge: var(--slotted-control-border-color);
     --_zone-ground: var(--slotted-control-surface, Field);
   }
 
-  [data-ui='upload'][data-variant='field'] [data-part='dropzone'] {
+  [data-ui-upload][data-variant='field'] [data-part-dropzone] {
     align-items: center;
     border-style: solid;
     border-width: var(--slotted-control-border-width, 1px);
@@ -1493,13 +1493,13 @@
    * controls move to the corner of the picture, where they are over the one
    * thing the reader is pointing at.
    */
-  [data-ui='upload'][data-layout='grid'] [data-part='list'] {
+  [data-ui-upload][data-layout='grid'] [data-part-list] {
     display: grid;
     gap: var(--_gap);
     grid-template-columns: repeat(auto-fill, minmax(var(--slotted-upload-card-measure, 9rem), 1fr));
   }
 
-  [data-ui='upload'][data-layout='grid'] [data-part='item'] {
+  [data-ui-upload][data-layout='grid'] [data-part-item] {
     /*
      * Cards in one row share its height, and the spare height of the shorter
      * ones goes under their content rather than between the picture and the
@@ -1523,7 +1523,7 @@
    * the height: 117.66 at 720 pixels, with every edge under it blurred. The
    * card is a container, so `cqi` is the width the picture fills.
    */
-  [data-ui='upload'][data-layout='grid'] [data-part='preview'] {
+  [data-ui-upload][data-layout='grid'] [data-part-preview] {
     block-size: round(down, calc(100cqi * 3 / 4), 1px);
     inline-size: 100%;
   }
@@ -1546,7 +1546,7 @@
    * the frameless rest state R2 requires of them and the reader still gets one
    * legible plate.
    */
-  [data-ui='upload'][data-layout='grid'] [data-part='actions'] {
+  [data-ui-upload][data-layout='grid'] [data-part-actions] {
     background-color: color-mix(
       in oklab,
       var(--slotted-surface) var(--slotted-upload-card-actions-opacity, 96%),
@@ -1568,7 +1568,7 @@
    * three letters than by the silhouette. It is drawn from the attribute the
    * binding already writes, so the label costs no element.
    */
-  [data-ui='upload'][data-layout='grid'] [data-part='preview']:not(:has(img))::after {
+  [data-ui-upload][data-layout='grid'] [data-part-preview]:not(:has(img))::after {
     content: attr(data-extension);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -1578,7 +1578,7 @@
   }
 
   /* A card's tile carries a mark the size of the card, not the size of a row. */
-  [data-ui='upload'][data-layout='grid'] [data-part='preview'] > [data-ui='icon'] {
+  [data-ui-upload][data-layout='grid'] [data-part-preview] > [data-ui-icon] {
     --slotted-icon-size: calc(2 * var(--_glyph-size));
   }
 
@@ -1595,7 +1595,7 @@
    * words broke across two lines with the underline broken between them.
    */
   @container slotted-upload (max-width: 30rem) {
-    [data-ui='upload'] [data-part='summary'] {
+    [data-ui-upload] [data-part-summary] {
       align-items: start;
       flex-direction: column;
     }
@@ -1608,7 +1608,7 @@
      * characters. The chip spans both rows, so the block it is centred on is
      * still the block it is about.
      */
-    [data-ui='upload'] [data-part='item'] {
+    [data-ui-upload] [data-part-item] {
       grid-template-areas:
         'preview body'
         'preview actions'
@@ -1616,16 +1616,16 @@
       grid-template-columns: auto minmax(0, 1fr);
     }
 
-    [data-ui='upload'] [data-part='preview'] {
+    [data-ui-upload] [data-part-preview] {
       align-self: start;
     }
 
-    [data-ui='upload'] [data-part='actions'] {
+    [data-ui-upload] [data-part-actions] {
       justify-content: flex-start;
       margin-inline-start: calc(-1 * var(--slotted-space-2, 0.25rem));
     }
 
-    [data-ui='upload'] [data-part='dropzone'] {
+    [data-ui-upload] [data-part-dropzone] {
       padding-block: var(--slotted-space-6, 1rem);
     }
   }
@@ -1640,8 +1640,8 @@
    * carries it there instead.
    */
   @media (forced-colors: active) {
-    [data-ui='upload'] [data-part='item'][data-status='rejected'],
-    [data-ui='upload'] [data-part='item'][data-status='error'] {
+    [data-ui-upload] [data-part-item][data-status='rejected'],
+    [data-ui-upload] [data-part-item][data-status='error'] {
       --_item-border: CanvasText;
     }
 
@@ -1651,12 +1651,12 @@
      * out of it — in the system's two colours rather than in nine. What kind a
      * file is, is then said by its shape, which is what survives this mode.
      */
-    [data-ui='upload'] [data-part='preview'] {
+    [data-ui-upload] [data-part-preview] {
       border: var(--_border-width) solid ButtonBorder;
     }
 
-    [data-ui='upload'] [data-part='dropzone'][data-drop-target],
-    [data-ui='upload'] [data-part='dropzone'][data-drop-invalid] {
+    [data-ui-upload] [data-part-dropzone][data-drop-target],
+    [data-ui-upload] [data-part-dropzone][data-drop-invalid] {
       --_zone-border-color: Highlight;
     }
 
@@ -1666,18 +1666,18 @@
      * the reader could see. The system's own pair answers instead — the one
      * `alert` gives its dismiss.
      */
-    [data-ui='upload']
+    [data-ui-upload]
       :is(
-        [data-part='clear'],
-        [data-part='viewerExternal'],
-        [data-part='viewerClose'],
-        [data-part='viewerPrevious'],
-        [data-part='viewerNext'],
-        [data-part='start'],
-        [data-part='pause'],
-        [data-part='retry'],
-        [data-part='cancel'],
-        [data-part='remove']
+        [data-part-clear],
+        [data-part-viewerexternal],
+        [data-part-viewerclose],
+        [data-part-viewerprevious],
+        [data-part-viewernext],
+        [data-part-start],
+        [data-part-pause],
+        [data-part-retry],
+        [data-part-cancel],
+        [data-part-remove]
       ):enabled:is(:hover, :active) {
       background-color: Highlight;
       color: HighlightText;
@@ -1690,14 +1690,14 @@
    * on the same box an invalid ring is double, which a valid one is not.
    */
   @media (forced-colors: active) {
-    [data-ui='upload'][data-invalid] [data-part='trigger'] {
+    [data-ui-upload][data-invalid] [data-part-trigger] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
       );
     }
 
-    [data-ui='upload'][data-invalid] [data-part='trigger']:has(:focus-visible) {
+    [data-ui-upload][data-invalid] [data-part-trigger]:has(:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
       outline-offset: var(--slotted-focus-ring-offset, 2px);