@slotted/styles 0.1.0-beta.0 → 0.1.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slotted/styles",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.10",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/accordion/accordion.css

@@ -3,7 +3,7 @@
    * A set of disclosures that share a value.
    *
    * Nothing here selects into `collapsible`. A rule reaching
-   * `[data-ui='collapsible']` from this stylesheet would make one family's DOM
+   * `[data-ui-collapsible]` from this stylesheet would make one family's DOM
    * part of another's contract, so moving an item inside a wrapper would change
    * its appearance with no test to notice — the rule `checkbox-group` set for
    * every group family in the library. The group arranges its items and draws
@@ -13,7 +13,7 @@
    * The set is a single column. A horizontally stacked set of sections of which
    * one is open is a tab list, and `tabs` owns it.
    */
-  [data-ui='accordion'] {
+  [data-ui-accordion] {
     --_rule-size: var(--slotted-border-width-thin, 1px);
     /**
      * The distance between two cards under `separated`. Every other variant
@@ -28,11 +28,11 @@
     min-inline-size: 0;
   }
 
-  [data-ui='accordion'][data-size='sm'] {
+  [data-ui-accordion][data-size='sm'] {
     --_gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='accordion'][data-size='lg'] {
+  [data-ui-accordion][data-size='lg'] {
     --_gap: var(--slotted-space-5, 0.75rem);
   }
 
@@ -43,7 +43,7 @@
    * one list and what keeps an item from having to know whether it is the last
    * one. The bottom of the stack is the set's own edge, so the set draws it.
    */
-  [data-ui='accordion'][data-variant='ruled'] {
+  [data-ui-accordion][data-variant='ruled'] {
     border-block-end: var(--_rule-size) solid
       var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));
   }
@@ -53,7 +53,7 @@
    * own edge is the rule above the first item and below the last, and `clip` is
    * what makes the corner an item's hover fill meets the corner the frame drew.
    */
-  [data-ui='accordion'][data-variant='framed'] {
+  [data-ui-accordion][data-variant='framed'] {
     background-color: var(--slotted-accordion-surface, var(--slotted-surface-raised, Canvas));
     border: var(--_rule-size) solid
       var(--slotted-accordion-rule-color, var(--slotted-border-subtle, ButtonBorder));
@@ -70,9 +70,9 @@
    * The child is reached structurally rather than by its identity. Which
    * element is first is the group's own layout fact; what that element is
    * inside remains the item family's, which is why nothing here names
-   * `[data-ui='collapsible']` or one of its parts.
+   * `[data-ui-collapsible]` or one of its parts.
    */
-  [data-ui='accordion'][data-variant='framed'] > :first-child {
+  [data-ui-accordion][data-variant='framed'] > :first-child {
     border-block-start-color: transparent;
   }
 
@@ -81,7 +81,7 @@
    * border and radius, and the only thing left for the set is the air between
    * them.
    */
-  [data-ui='accordion'][data-variant='separated'] {
+  [data-ui-accordion][data-variant='separated'] {
     row-gap: var(--slotted-accordion-gap, var(--_gap));
   }
 
@@ -90,7 +90,7 @@
    * native one, which is what actually stops the press; this is the colour that
    * says so for the words the set draws itself, if a consumer puts any in it.
    */
-  [data-ui='accordion'][data-disabled] {
+  [data-ui-accordion][data-disabled] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 }

package/src/action-bar/action-bar.css

@@ -18,7 +18,7 @@
    * overflow trigger. Everything else a reader sees belongs to the control the
    * consumer placed.
    */
-  [data-ui='action-bar'] {
+  [data-ui-action-bar] {
     /**
      * The bar's own rhythm, from the control scales, so the three densities
      * move it without a rule of their own.
@@ -56,7 +56,7 @@
     padding-inline: var(--slotted-action-bar-inset-inline, var(--_inset-inline));
   }
 
-  [data-ui='action-bar'][data-size='sm'] {
+  [data-ui-action-bar][data-size='sm'] {
     --_gap: var(--slotted-control-gap-sm, 0.375rem);
     --_inset-block: var(--slotted-space-3, 0.375rem);
     --_inset-inline: var(--slotted-space-4, 0.5rem);
@@ -66,7 +66,7 @@
     --_separator-inset: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='action-bar'][data-size='lg'] {
+  [data-ui-action-bar][data-size='lg'] {
     --_gap: var(--slotted-control-gap-lg, 0.5rem);
     --_inset-block: var(--slotted-space-5, 0.75rem);
     --_inset-inline: var(--slotted-space-6, 1rem);
@@ -82,8 +82,8 @@
    * still consumes the gap of the column that holds it — and, under `raised`,
    * draws a rule straight across the screen with nothing under it.
    */
-  [data-ui='action-bar']:not(:has([data-part='actions'] > *:not([hidden]))):not(
-      :has([data-part='status'])
+  [data-ui-action-bar]:not(:has([data-part-actions] > *:not([hidden]))):not(
+      :has([data-part-status])
     ) {
     display: none;
   }
@@ -99,7 +99,7 @@
    * or above a table. It takes the surface and one hairline at the top, which
    * is the whole of the separation a bar at the end of a region needs.
    */
-  [data-ui='action-bar'][data-variant='raised'] {
+  [data-ui-action-bar][data-variant='raised'] {
     background-color: var(--slotted-action-bar-background, var(--slotted-surface, Canvas));
     border-block-start: var(--slotted-border-width-thin, 1px) solid
       var(--slotted-action-bar-border-color, var(--slotted-border-subtle, ButtonBorder));
@@ -120,7 +120,7 @@
    * of the surveyed implementations composes with the page's own chrome; each
    * of them fixes the bar and then compensates.
    */
-  [data-ui='action-bar'][data-sticky] {
+  [data-ui-action-bar][data-sticky] {
     inset-block-end: var(--slotted-page-sticky-bottom, 0px);
     position: sticky;
     z-index: var(--slotted-z-index-sticky, 100);
@@ -133,13 +133,13 @@
    * existence under the reader's hands is the jump
    * `docs/component-features.md` §11 forbids by name.
    */
-  [data-ui='action-bar'][data-status] {
+  [data-ui-action-bar][data-status] {
     transition:
       translate var(--_duration) var(--_easing),
       opacity var(--_duration) var(--_easing);
   }
 
-  [data-ui='action-bar']:is([data-status='entering'], [data-status='exiting']) {
+  [data-ui-action-bar]:is([data-status='entering'], [data-status='exiting']) {
     opacity: 0;
     translate: 0 100%;
   }
@@ -151,7 +151,7 @@
    * what is selected. It takes what is left over and gives way first, so a long
    * message shortens itself rather than pushing the actions off the bar.
    */
-  [data-ui='action-bar'] [data-part='status'] {
+  [data-ui-action-bar] [data-part-status] {
     align-items: center;
     color: var(--slotted-action-bar-status-color, var(--slotted-text-muted, GrayText));
     display: flex;
@@ -171,7 +171,7 @@
    * action and never the last action itself. The property is logical, so the
    * anchor mirrors with the bar in a right-to-left document.
    */
-  [data-ui='action-bar'] [data-part='actions'] {
+  [data-ui-action-bar] [data-part-actions] {
     align-items: center;
     display: flex;
     flex: 0 0 auto;
@@ -196,12 +196,12 @@
    * buttons, Polaris puts them at the end, Fluent at the start. The anchor is
    * what `end` is, so the other two are the ones that state a margin.
    */
-  [data-ui='action-bar'][data-align='start'] [data-part='actions'] {
+  [data-ui-action-bar][data-align='start'] [data-part-actions] {
     justify-content: flex-start;
     margin-inline: 0 auto;
   }
 
-  [data-ui='action-bar'][data-align='center'] [data-part='actions'] {
+  [data-ui-action-bar][data-align='center'] [data-part-actions] {
     justify-content: center;
     margin-inline: auto;
   }
@@ -210,8 +210,7 @@
    * A bar with no status region at all still puts its run where `align` says,
    * which without this is where the first `auto` margin happens to leave it.
    */
-  [data-ui='action-bar'][data-align='center']:not(:has([data-part='status']))
-    [data-part='actions'] {
+  [data-ui-action-bar][data-align='center']:not(:has([data-part-status])) [data-part-actions] {
     margin-inline: auto;
   }
 
@@ -225,7 +224,7 @@
    * It paints nothing: everything a reader sees inside it belongs to the
    * control the consumer placed.
    */
-  [data-ui='action-bar'] [data-part='action'] {
+  [data-ui-action-bar] [data-part-action] {
     align-items: center;
     display: inline-flex;
     flex: none;
@@ -239,8 +238,8 @@
    * and without this every collapsed unit stays on the bar and the collapse
    * does nothing at all.
    */
-  [data-ui='action-bar']
-    :is([data-part='action'], [data-part='separator'], [data-part='overflow'])[hidden] {
+  [data-ui-action-bar]
+    :is([data-part-action], [data-part-separator], [data-part-overflow])[hidden] {
     display: none;
   }
 
@@ -257,7 +256,7 @@
    * It is a part of this family rather than the `divider` family because its
    * geometry belongs to the bar: it is measured against the controls beside it.
    */
-  [data-ui='action-bar'] [data-part='separator'] {
+  [data-ui-action-bar] [data-part-separator] {
     align-self: stretch;
     background-color: var(
       --slotted-action-bar-separator-color,
@@ -283,7 +282,7 @@
    * Its accessible name carries the count, so what a reader hears is a number
    * rather than three dots.
    */
-  [data-ui='action-bar'] [data-part='overflow'] {
+  [data-ui-action-bar] [data-part-overflow] {
     align-items: center;
     appearance: none;
     background-color: transparent;
@@ -321,7 +320,7 @@
   }
 
   /* The ground moves under the pointer and nothing else does. */
-  [data-ui='action-bar'] [data-part='overflow']:not(:disabled):hover {
+  [data-ui-action-bar] [data-part-overflow]:not(:disabled):hover {
     background-color: var(
       --slotted-action-bar-overflow-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -329,7 +328,7 @@
     color: var(--slotted-action-bar-overflow-hover-color, var(--slotted-text, CanvasText));
   }
 
-  [data-ui='action-bar'] [data-part='overflow']:not(:disabled):active {
+  [data-ui-action-bar] [data-part-overflow]:not(:disabled):active {
     background-color: var(
       --slotted-action-bar-overflow-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -341,7 +340,7 @@
    * reader who moved the pointer off the trigger loses every sign of which
    * control the layer belongs to.
    */
-  [data-ui='action-bar'] [data-part='overflow'][data-open] {
+  [data-ui-action-bar] [data-part-overflow][data-open] {
     background-color: var(
       --slotted-action-bar-overflow-open-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -355,12 +354,12 @@
    * looking operable, and it answers neither hover nor press, which is the
    * precedence `docs/state-and-events.md` fixes.
    */
-  [data-ui='action-bar'] [data-part='overflow']:disabled {
+  [data-ui-action-bar] [data-part-overflow]:disabled {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: default;
   }
 
-  [data-ui='action-bar'] [data-part='overflow']:focus-visible {
+  [data-ui-action-bar] [data-part-overflow]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -389,7 +388,7 @@
      * the order a form is read in, and only the paint is reversed. `stretch`
      * fills the column, because a column of natural widths is a ragged edge.
      */
-    [data-ui='action-bar'] [data-part='actions'] {
+    [data-ui-action-bar] [data-part-actions] {
       --_stacked: 1;
 
       align-items: stretch;
@@ -398,7 +397,7 @@
       margin-inline: 0;
     }
 
-    [data-ui='action-bar'] [data-part='action'] > * {
+    [data-ui-action-bar] [data-part-action] > * {
       inline-size: 100%;
     }
 
@@ -409,7 +408,7 @@
      * painted at the top of the column by the reversal, which is where the
      * action that confirms belongs.
      */
-    [data-ui='action-bar'] [data-part='overflow'] {
+    [data-ui-action-bar] [data-part-overflow] {
       display: none;
     }
 
@@ -417,7 +416,7 @@
      * A rule that divided two controls in a row divides two rows here, so it
      * turns with them.
      */
-    [data-ui='action-bar'] [data-part='separator'] {
+    [data-ui-action-bar] [data-part-separator] {
       block-size: var(--slotted-border-width-thin, 1px);
       inline-size: auto;
       margin-block: calc(var(--_gap) / 2);
@@ -425,14 +424,14 @@
       min-block-size: 0;
     }
 
-    [data-ui='action-bar'] [data-part='status'] {
+    [data-ui-action-bar] [data-part-status] {
       flex: 1 1 100%;
     }
 
     /* What the consumer put in the status, addressed as the part's child and
        never by a class of its own: while the bar is a column the status fills
        the row, as an action does two rules above. */
-    [data-ui='action-bar'] [data-part='status'] > * {
+    [data-ui-action-bar] [data-part-status] > * {
       align-content: space-between;
       inline-size: 100%;
     }
@@ -447,7 +446,7 @@
    * destructive action and a frequent one is still there to read.
    */
   @media (forced-colors: active) {
-    [data-ui='action-bar'] [data-part='separator'] {
+    [data-ui-action-bar] [data-part-separator] {
       background-color: CanvasText;
       forced-color-adjust: none;
     }

package/src/action-sheet/action-sheet.css

@@ -22,7 +22,7 @@
    * Every part is reached with a child combinator, except the rows of the
    * list, which a group may hold one level down.
    */
-  [data-ui='action-sheet'] {
+  [data-ui-action-sheet] {
     /** The row's inset, which the header, every item and the footer share. */
     --_inset: var(--slotted-control-padding-inline-lg, 16px);
     --_gap: var(--slotted-control-gap-lg, 8px);
@@ -93,7 +93,7 @@
   }
 
   @media (pointer: coarse) {
-    [data-ui='action-sheet'] {
+    [data-ui-action-sheet] {
       --_label-size: var(--slotted-font-size-lg, 1rem);
     }
   }
@@ -105,7 +105,7 @@
    * set small and the actions large — the hierarchy UIKit and Ionic draw, and
    * the reverse of `drawer`, whose title names a task the body carries out.
    */
-  [data-ui='action-sheet'] > [data-part='header'] {
+  [data-ui-action-sheet] > [data-part-header] {
     border-block-end: var(--_rule-size) solid var(--_rule);
     display: grid;
     padding-block: var(--slotted-space-6, 1rem) var(--slotted-space-5, 0.75rem);
@@ -113,7 +113,7 @@
     row-gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='action-sheet'] [data-part='title'] {
+  [data-ui-action-sheet] [data-part-title] {
     color: var(--slotted-text, CanvasText);
     font-family: var(
       --slotted-font-family-heading,
@@ -126,7 +126,7 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='action-sheet'] [data-part='message'] {
+  [data-ui-action-sheet] [data-part-message] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     line-height: var(--slotted-line-height-sm, 1.45);
@@ -147,7 +147,7 @@
    * row was 44 pixels and a three-line label was painted over the two items
    * below it.
    */
-  [data-ui='action-sheet'] > [data-part='list'] {
+  [data-ui-action-sheet] > [data-part-list] {
     --_mark: 0px;
     --_column-gap: 0px;
 
@@ -170,7 +170,7 @@
     padding-inline: var(--_list-inset);
   }
 
-  [data-ui='action-sheet'] > [data-part='list']:has([data-part='icon']) {
+  [data-ui-action-sheet] > [data-part-list]:has([data-part-icon]) {
     --_mark: var(--_icon-size);
     --_column-gap: var(--_gap);
   }
@@ -179,17 +179,17 @@
    * The home indicator sits under the last row of a sheet with no footer, so
    * that row carries the bottom inset instead.
    */
-  [data-ui='action-sheet']:not(:has(> [data-part='footer'])) > [data-part='list'] {
+  [data-ui-action-sheet]:not(:has(> [data-part-footer])) > [data-part-list] {
     padding-block-end: calc(var(--slotted-space-2, 0.25rem) + env(safe-area-inset-bottom, 0px));
   }
 
-  [data-ui='action-sheet'] [data-part='group'] {
+  [data-ui-action-sheet] [data-part-group] {
     display: grid;
     grid-auto-rows: max-content;
     grid-template-columns: minmax(0, 1fr);
   }
 
-  [data-ui='action-sheet'] [data-part='group-label'] {
+  [data-ui-action-sheet] [data-part-group-label] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     font-weight: var(--slotted-font-weight-semibold, 600);
@@ -198,7 +198,7 @@
     padding-inline: calc(var(--_inset) - var(--_list-inset));
   }
 
-  [data-ui='action-sheet'] [data-part='separator'] {
+  [data-ui-action-sheet] [data-part-separator] {
     background-color: var(--_rule);
     block-size: var(--_rule-size);
     border: 0;
@@ -215,7 +215,7 @@
    * `min-block-size` rather than a height, because an item with a description
    * is two lines tall and still has to clear the target.
    */
-  [data-ui='action-sheet'] [data-part='item'] {
+  [data-ui-action-sheet] [data-part-item] {
     align-content: center;
     appearance: none;
     background: transparent;
@@ -251,13 +251,13 @@
    * pointer that has not moved focus yet, before the script has run, still
    * gets the hover.
    */
-  [data-ui='action-sheet'] [data-part='item']:focus {
+  [data-ui-action-sheet] [data-part-item]:focus {
     background-color: var(--_highlight);
     outline: none;
   }
 
   @media (hover: hover) {
-    [data-ui='action-sheet'] [data-part='item']:hover:not([data-disabled]):not([data-loading]) {
+    [data-ui-action-sheet] [data-part-item]:hover:not([data-disabled]):not([data-loading]) {
       background-color: var(--_highlight);
     }
   }
@@ -266,12 +266,12 @@
    * Inset, so the ring follows the row's own corner and never meets the
    * neighbour's edge.
    */
-  [data-ui='action-sheet'] [data-part='item']:focus-visible {
+  [data-ui-action-sheet] [data-part-item]: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));
   }
 
-  [data-ui='action-sheet'] [data-part='item']:active:not([data-disabled]):not([data-loading]) {
+  [data-ui-action-sheet] [data-part-item]:active:not([data-disabled]):not([data-loading]) {
     background-color: var(--_highlight-active);
   }
 
@@ -279,16 +279,16 @@
    * Focusable and inert, as the menu pattern requires, and legible rather than
    * faded: the words keep the theme's disabled ink at its contrast.
    */
-  [data-ui='action-sheet'] [data-part='item'][data-disabled] {
+  [data-ui-action-sheet] [data-part-item][data-disabled] {
     color: var(--slotted-disabled-foreground, GrayText);
     cursor: not-allowed;
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-disabled]:focus {
+  [data-ui-action-sheet] [data-part-item][data-disabled]:focus {
     background-color: var(--slotted-disabled-background, ButtonFace);
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-loading] {
+  [data-ui-action-sheet] [data-part-item][data-loading] {
     cursor: progress;
   }
 
@@ -298,7 +298,7 @@
    * The mark sits on the label's first line rather than on the middle of a
    * two-line item: the line box is the item's, and the box is one line tall.
    */
-  [data-ui='action-sheet'] [data-part='icon'] {
+  [data-ui-action-sheet] [data-part-icon] {
     --slotted-icon-size: var(--_icon-size);
     --slotted-spinner-size: var(--_icon-size);
 
@@ -311,19 +311,19 @@
     justify-content: center;
   }
 
-  [data-ui='action-sheet'] [data-part='icon'] > * {
+  [data-ui-action-sheet] [data-part-icon] > * {
     flex: none;
     font-size: var(--_icon-size);
   }
 
-  [data-ui='action-sheet'] [data-part='label'] {
+  [data-ui-action-sheet] [data-part-label] {
     grid-column: 2;
     grid-row: 1;
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='action-sheet'] [data-part='description'] {
+  [data-ui-action-sheet] [data-part-description] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
     grid-column: 2;
@@ -333,7 +333,7 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-disabled] > [data-part='description'] {
+  [data-ui-action-sheet] [data-part-item][data-disabled] > [data-part-description] {
     color: inherit;
   }
 
@@ -344,31 +344,31 @@
    * The tone paints the words, the mark and the highlight together; `danger`
    * is the destructive action.
    */
-  [data-ui='action-sheet'] [data-part='item'][data-tone='accent'] {
+  [data-ui-action-sheet] [data-part-item][data-tone='accent'] {
     --_accent: var(--slotted-tone-accent-text);
     --_highlight: var(--slotted-tone-accent-surface);
     --_highlight-active: var(--slotted-tone-accent-subtle-active);
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-tone='secondary'] {
+  [data-ui-action-sheet] [data-part-item][data-tone='secondary'] {
     --_accent: var(--slotted-tone-secondary-text);
     --_highlight: var(--slotted-tone-secondary-surface);
     --_highlight-active: var(--slotted-tone-secondary-subtle-active);
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-tone='success'] {
+  [data-ui-action-sheet] [data-part-item][data-tone='success'] {
     --_accent: var(--slotted-tone-success-text);
     --_highlight: var(--slotted-tone-success-surface);
     --_highlight-active: var(--slotted-tone-success-subtle-active);
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-tone='warning'] {
+  [data-ui-action-sheet] [data-part-item][data-tone='warning'] {
     --_accent: var(--slotted-tone-warning-text);
     --_highlight: var(--slotted-tone-warning-surface);
     --_highlight-active: var(--slotted-tone-warning-subtle-active);
   }
 
-  [data-ui='action-sheet'] [data-part='item'][data-tone='danger'] {
+  [data-ui-action-sheet] [data-part-item][data-tone='danger'] {
     --_accent: var(--slotted-tone-danger-text);
     --_highlight: var(--slotted-tone-danger-surface);
     --_highlight-active: var(--slotted-tone-danger-subtle-active);
@@ -381,7 +381,7 @@
    * more action. It carries the bottom safe-area inset, which is where a
    * phone's home indicator sits.
    */
-  [data-ui='action-sheet'] > [data-part='footer'] {
+  [data-ui-action-sheet] > [data-part-footer] {
     background: var(--slotted-action-sheet-footer-surface, var(--slotted-surface-sunken, Canvas));
     border-block-start: var(--_rule-size) solid var(--_rule);
     display: grid;
@@ -395,7 +395,7 @@
    * A button with a face, on the band: the one control of the sheet that is
    * not an item, and the one that always works — it is never disabled.
    */
-  [data-ui='action-sheet'] [data-part='cancel'] {
+  [data-ui-action-sheet] [data-part-cancel] {
     appearance: none;
     background: var(--slotted-control-surface, ButtonFace);
     border: var(--slotted-control-border-width, 1px) solid
@@ -421,7 +421,7 @@
   }
 
   @media (hover: hover) {
-    [data-ui='action-sheet'] [data-part='cancel']:hover:not(:disabled) {
+    [data-ui-action-sheet] [data-part-cancel]:hover:not(:disabled) {
       background: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
     }
   }
@@ -430,13 +430,13 @@
    * `button`'s press: the face settles a hairline and gives up its lift. It is
    * instant, as a press is, and the ground eases back on release.
    */
-  [data-ui='action-sheet'] [data-part='cancel']:active:not(:disabled) {
+  [data-ui-action-sheet] [data-part-cancel]:active:not(:disabled) {
     background: var(--slotted-tone-secondary-subtle-active, ButtonFace);
     box-shadow: none;
     translate: 0 var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='action-sheet'] [data-part='cancel']:focus-visible {
+  [data-ui-action-sheet] [data-part-cancel]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -448,13 +448,13 @@
    * so the focused row would lose its highlight.
    */
   @media (forced-colors: active) {
-    [data-ui='action-sheet'] [data-part='item']:focus {
+    [data-ui-action-sheet] [data-part-item]:focus {
       background-color: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
 
-    [data-ui='action-sheet'] [data-part='item'][data-disabled]:focus {
+    [data-ui-action-sheet] [data-part-item][data-disabled]:focus {
       background-color: Highlight;
       color: GrayText;
     }