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

package/src/carousel/carousel.css

@@ -15,7 +15,7 @@
    *   └────────────────────────────────────────┘
    *     ⏸   ◀   ● ━━ ● ●   ▶   2 / 4             controls placement="below"
    */
-  [data-ui='carousel'] {
+  [data-ui-carousel] {
     --_control-size: var(--slotted-control-height-md, 34px);
     --_icon-size: var(--slotted-control-icon-size-md, 16px);
     --_gap: var(--slotted-carousel-gap, var(--slotted-space-6, 1rem));
@@ -55,12 +55,12 @@
     row-gap: var(--slotted-carousel-controls-gap, var(--slotted-space-5, 0.75rem));
   }
 
-  [data-ui='carousel'][data-size='sm'] {
+  [data-ui-carousel][data-size='sm'] {
     --_control-size: var(--slotted-control-height-sm, 30px);
     --_icon-size: var(--slotted-control-icon-size-sm, 14px);
   }
 
-  [data-ui='carousel'][data-size='lg'] {
+  [data-ui-carousel][data-size='lg'] {
     --_control-size: var(--slotted-control-height-lg, 38px);
     --_icon-size: var(--slotted-control-icon-size-lg, 18px);
   }
@@ -72,7 +72,7 @@
    * viewport, without the absolute positioning that puts it outside the
    * component's box.
    */
-  [data-ui='carousel'][data-arrows='outside'] {
+  [data-ui-carousel][data-arrows='outside'] {
     column-gap: var(--slotted-space-4, 0.5rem);
     grid-template-columns: auto minmax(0, 1fr) auto;
   }
@@ -87,7 +87,7 @@
    * container query that writes `--slotted-carousel-slides-per-view` changes
    * the layout and the engine reads the new pages from it.
    */
-  [data-ui='carousel'] > [data-part='viewport'] {
+  [data-ui-carousel] > [data-part-viewport] {
     /**
      * The share of the row a slide takes, never below the slide's own floor:
      * three cards per view at 240 pixels are 64-pixel cards, and the floor
@@ -122,15 +122,15 @@
     scrollbar-width: none;
   }
 
-  [data-ui='carousel'][data-arrows='outside'] > [data-part='viewport'] {
+  [data-ui-carousel][data-arrows='outside'] > [data-part-viewport] {
     grid-area: 1 / 2;
   }
 
-  [data-ui='carousel'] > [data-part='viewport']::-webkit-scrollbar {
+  [data-ui-carousel] > [data-part-viewport]::-webkit-scrollbar {
     display: none;
   }
 
-  [data-ui='carousel'] > [data-part='viewport']:focus-visible {
+  [data-ui-carousel] > [data-part-viewport]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -144,7 +144,7 @@
    * pointer. Both movements end exactly on a page, so snap returns without
    * moving anything.
    */
-  [data-ui='carousel'] > [data-part='viewport'][data-moving] {
+  [data-ui-carousel] > [data-part-viewport][data-moving] {
     scroll-snap-type: none;
   }
 
@@ -154,22 +154,22 @@
    * has no cursor to change.
    */
   @media (hover: hover) and (pointer: fine) {
-    [data-ui='carousel'][data-draggable]:not([data-transition='fade']) > [data-part='viewport'] {
+    [data-ui-carousel][data-draggable]:not([data-transition='fade']) > [data-part-viewport] {
       cursor: grab;
     }
   }
 
-  [data-ui='carousel'][data-dragging] > [data-part='viewport'] {
+  [data-ui-carousel][data-dragging] > [data-part-viewport] {
     cursor: grabbing;
     user-select: none;
   }
 
   /** A picture inside a draggable row would otherwise start the browser's own image drag. */
-  [data-ui='carousel'][data-draggable] > [data-part='viewport'] img {
+  [data-ui-carousel][data-draggable] > [data-part-viewport] img {
     -webkit-user-drag: none;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] > [data-part='viewport'] {
+  [data-ui-carousel][data-orientation='vertical'] > [data-part-viewport] {
     /**
      * A column of slides needs a height to divide, and the content cannot
      * give one: the tallest slide would make the viewport as tall as the
@@ -197,7 +197,7 @@
    * `--slotted-carousel-overscroll` — less and less the further the hand
    * goes — and springs it back to nothing on release.
    */
-  [data-ui='carousel'] > [data-part='viewport'] > [data-part='slide'] {
+  [data-ui-carousel] > [data-part-viewport] > [data-part-slide] {
     min-block-size: 0;
     min-inline-size: 0;
     position: relative;
@@ -205,7 +205,7 @@
     translate: var(--slotted-carousel-overscroll, none);
   }
 
-  [data-ui='carousel'][data-align='center'] > [data-part='viewport'] > [data-part='slide'] {
+  [data-ui-carousel][data-align='center'] > [data-part-viewport] > [data-part-slide] {
     scroll-snap-align: center;
   }
 
@@ -214,9 +214,7 @@
    * snap point. Before that every slide is one, which is the right paging for
    * a server response and for one slide per view.
    */
-  [data-ui='carousel'][data-measured]
-    > [data-part='viewport']
-    > [data-part='slide']:not([data-snap]) {
+  [data-ui-carousel][data-measured] > [data-part-viewport] > [data-part-slide]:not([data-snap]) {
     scroll-snap-align: none;
   }
 
@@ -235,7 +233,7 @@
    * so it hides the leaving slide when its fade ends and nothing in it can be
    * reached once it is gone.
    */
-  [data-ui='carousel'][data-transition='fade'] > [data-part='viewport'] {
+  [data-ui-carousel][data-transition='fade'] > [data-part-viewport] {
     grid-auto-columns: 100%;
     grid-template-areas: 'stack';
     overflow: hidden;
@@ -243,7 +241,7 @@
     touch-action: pan-y;
   }
 
-  [data-ui='carousel'][data-transition='fade'] > [data-part='viewport'] > [data-part='slide'] {
+  [data-ui-carousel][data-transition='fade'] > [data-part-viewport] > [data-part-slide] {
     grid-area: stack;
     opacity: 0;
     transition:
@@ -252,9 +250,9 @@
     visibility: hidden;
   }
 
-  [data-ui='carousel'][data-transition='fade']
-    > [data-part='viewport']
-    > [data-part='slide'][data-current] {
+  [data-ui-carousel][data-transition='fade']
+    > [data-part-viewport]
+    > [data-part-slide][data-current] {
     opacity: 1;
     transition:
       opacity var(--slotted-duration-long) var(--slotted-easing-enter, ease-out),
@@ -271,9 +269,9 @@
    * 16-pixel mark; the family takes the control scale, 34 at `md`, so the
    * pair is a step larger than the dots and matches a toolbar's buttons.
    */
-  [data-ui='carousel'] [data-part='previous'],
-  [data-ui='carousel'] [data-part='next'],
-  [data-ui='carousel'] [data-part='autoplay'] {
+  [data-ui-carousel] [data-part-previous],
+  [data-ui-carousel] [data-part-next],
+  [data-ui-carousel] [data-part-autoplay] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -306,44 +304,44 @@
   }
 
   /** Over the viewport, at the two ends of its axis. */
-  [data-ui='carousel'] > [data-part='previous'],
-  [data-ui='carousel'] > [data-part='next'] {
+  [data-ui-carousel] > [data-part-previous],
+  [data-ui-carousel] > [data-part-next] {
     align-self: center;
     grid-area: 1 / 1;
     margin-inline: var(--_inset);
     z-index: 1;
   }
 
-  [data-ui='carousel'] > [data-part='previous'] {
+  [data-ui-carousel] > [data-part-previous] {
     justify-self: start;
   }
 
-  [data-ui='carousel'] > [data-part='next'] {
+  [data-ui-carousel] > [data-part-next] {
     justify-self: end;
   }
 
-  [data-ui='carousel'][data-arrows='outside'] > [data-part='previous'] {
+  [data-ui-carousel][data-arrows='outside'] > [data-part-previous] {
     grid-area: 1 / 1;
     margin-inline: 0;
   }
 
-  [data-ui='carousel'][data-arrows='outside'] > [data-part='next'] {
+  [data-ui-carousel][data-arrows='outside'] > [data-part-next] {
     grid-area: 1 / 3;
     margin-inline: 0;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] > [data-part='previous'],
-  [data-ui='carousel'][data-orientation='vertical'] > [data-part='next'] {
+  [data-ui-carousel][data-orientation='vertical'] > [data-part-previous],
+  [data-ui-carousel][data-orientation='vertical'] > [data-part-next] {
     justify-self: center;
     margin-block: var(--_inset);
     margin-inline: 0;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] > [data-part='previous'] {
+  [data-ui-carousel][data-orientation='vertical'] > [data-part-previous] {
     align-self: start;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] > [data-part='next'] {
+  [data-ui-carousel][data-orientation='vertical'] > [data-part-next] {
     align-self: end;
   }
 
@@ -352,15 +350,15 @@
    * icon box mirrors it in a right-to-left document. Previous turns it round;
    * a vertical carousel turns both a quarter so they point along the column.
    */
-  [data-ui='carousel'] [data-part='previous'] > [data-ui='icon'] {
+  [data-ui-carousel] [data-part-previous] > [data-ui-icon] {
     rotate: 180deg;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] [data-part='previous'] > [data-ui='icon'] {
+  [data-ui-carousel][data-orientation='vertical'] [data-part-previous] > [data-ui-icon] {
     rotate: -90deg;
   }
 
-  [data-ui='carousel'][data-orientation='vertical'] [data-part='next'] > [data-ui='icon'] {
+  [data-ui-carousel][data-orientation='vertical'] [data-part-next] > [data-ui-icon] {
     rotate: 90deg;
   }
 
@@ -370,15 +368,15 @@
    * and a mirrored chevron turned a quarter points the other way along the
    * column.
    */
-  [data-ui='carousel'][data-orientation='vertical']
-    :is([data-part='previous'], [data-part='next'])
-    > [data-ui='icon']:dir(rtl) {
+  [data-ui-carousel][data-orientation='vertical']
+    :is([data-part-previous], [data-part-next])
+    > [data-ui-icon]:dir(rtl) {
     scale: none;
   }
 
-  [data-ui='carousel'] [data-part='previous']:hover:not([data-disabled]):not(:disabled),
-  [data-ui='carousel'] [data-part='next']:hover:not([data-disabled]):not(:disabled),
-  [data-ui='carousel'] [data-part='autoplay']:hover:not([data-disabled]):not(:disabled) {
+  [data-ui-carousel] [data-part-previous]:hover:not([data-disabled]):not(:disabled),
+  [data-ui-carousel] [data-part-next]:hover:not([data-disabled]):not(:disabled),
+  [data-ui-carousel] [data-part-autoplay]:hover:not([data-disabled]):not(:disabled) {
     background: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
   }
 
@@ -388,18 +386,18 @@
    * standing over a picture has no floor to be put down on, and a scale is
    * the press that reads on a shape with no bottom edge.
    */
-  [data-ui='carousel'] [data-part='previous']:active:not([data-disabled]):not(:disabled),
-  [data-ui='carousel'] [data-part='next']:active:not([data-disabled]):not(:disabled),
-  [data-ui='carousel'] [data-part='autoplay']:active:not([data-disabled]):not(:disabled) {
+  [data-ui-carousel] [data-part-previous]:active:not([data-disabled]):not(:disabled),
+  [data-ui-carousel] [data-part-next]:active:not([data-disabled]):not(:disabled),
+  [data-ui-carousel] [data-part-autoplay]:active:not([data-disabled]):not(:disabled) {
     background: var(--slotted-tone-secondary-subtle-active, ButtonFace);
     box-shadow: none;
     scale: 0.94;
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='carousel'] [data-part='previous']:focus-visible,
-  [data-ui='carousel'] [data-part='next']:focus-visible,
-  [data-ui='carousel'] [data-part='autoplay']:focus-visible {
+  [data-ui-carousel] [data-part-previous]:focus-visible,
+  [data-ui-carousel] [data-part-next]:focus-visible,
+  [data-ui-carousel] [data-part-autoplay]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -411,7 +409,7 @@
    * foundation's disabled ink, with its ground kept so it still reads as a
    * control over a picture.
    */
-  [data-ui='carousel'] :is([data-part='previous'], [data-part='next'])[data-disabled] {
+  [data-ui-carousel] :is([data-part-previous], [data-part-next])[data-disabled] {
     border-color: var(--slotted-disabled-border, GrayText);
     box-shadow: none;
     color: var(--slotted-disabled-foreground, GrayText);
@@ -425,7 +423,7 @@
    * pixels, and a carousel in a third of a dashboard is narrower than that.
    * The counter drops under the dots, centred, before anything is clipped.
    */
-  [data-ui='carousel'] > [data-part='controls'] {
+  [data-ui-carousel] > [data-part-controls] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -435,7 +433,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='carousel'][data-arrows='outside'] > [data-part='controls'] {
+  [data-ui-carousel][data-arrows='outside'] > [data-part-controls] {
     grid-column: 2;
   }
 
@@ -445,7 +443,7 @@
    * has to read in every scheme, and a ground that lets the picture through
    * gives the dots a different ground on every slide.
    */
-  [data-ui='carousel'] > [data-part='controls'][data-placement='overlay'] {
+  [data-ui-carousel] > [data-part-controls][data-placement='overlay'] {
     align-self: end;
     background: var(--slotted-surface-raised, Canvas);
     border-radius: var(--slotted-radius-full, 9999px);
@@ -465,9 +463,9 @@
    * They take the height the foundation gives the inside of a control, so
    * the pill is that height and a step of air either side of it.
    */
-  [data-ui='carousel']
-    > [data-part='controls'][data-placement='overlay']
-    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+  [data-ui-carousel]
+    > [data-part-controls][data-placement='overlay']
+    > :is([data-part-previous], [data-part-next], [data-part-autoplay]) {
     --_control-size: var(--slotted-control-inner-size-md, 24px);
 
     background: transparent;
@@ -475,29 +473,29 @@
     box-shadow: none;
   }
 
-  [data-ui='carousel'][data-size='sm']
-    > [data-part='controls'][data-placement='overlay']
-    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+  [data-ui-carousel][data-size='sm']
+    > [data-part-controls][data-placement='overlay']
+    > :is([data-part-previous], [data-part-next], [data-part-autoplay]) {
     --_control-size: var(--slotted-control-inner-size-sm, 22px);
   }
 
-  [data-ui='carousel'][data-size='lg']
-    > [data-part='controls'][data-placement='overlay']
-    > :is([data-part='previous'], [data-part='next'], [data-part='autoplay']) {
+  [data-ui-carousel][data-size='lg']
+    > [data-part-controls][data-placement='overlay']
+    > :is([data-part-previous], [data-part-next], [data-part-autoplay]) {
     --_control-size: var(--slotted-control-inner-size-lg, 28px);
   }
 
-  [data-ui='carousel'][data-arrows='outside'] > [data-part='controls'][data-placement='overlay'] {
+  [data-ui-carousel][data-arrows='outside'] > [data-part-controls][data-placement='overlay'] {
     grid-area: 1 / 2;
   }
 
-  [data-ui='carousel'] > [data-part='controls'] > [data-part='indicators'][data-variant='line'] {
+  [data-ui-carousel] > [data-part-controls] > [data-part-indicators][data-variant='line'] {
     flex: 1 1 auto;
   }
 
   /* ── The indicators ───────────────────────────────────────────────────── */
 
-  [data-ui='carousel'] [data-part='indicators'] {
+  [data-ui-carousel] [data-part-indicators] {
     align-items: center;
     display: flex;
     /* A dot's box is twenty pixels; four between two boxes puts their centres twenty-four apart. */
@@ -513,7 +511,7 @@
    * centre, which is the spacing WCAG 2.2 SC 2.5.8 accepts for a target
    * smaller than twenty-four.
    */
-  [data-ui='carousel'] [data-part='indicator'] {
+  [data-ui-carousel] [data-part-indicator] {
     appearance: none;
     background: transparent;
     block-size: var(--slotted-target-min, 24px);
@@ -529,16 +527,16 @@
     transition: inline-size var(--slotted-duration-medium) var(--slotted-easing-standard, ease);
   }
 
-  [data-ui='carousel'] [data-part='indicator'][data-current] {
+  [data-ui-carousel] [data-part-indicator][data-current] {
     inline-size: calc(var(--_dot-current) + 2 * var(--_dot-air));
   }
 
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']::before,
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']::after {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]::before,
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]::after {
     block-size: var(--_dot);
     border-radius: var(--slotted-radius-full, 9999px);
     content: '';
@@ -552,30 +550,30 @@
    * every surface a carousel stands on; the current one is the ink, and its
    * shape already differs.
    */
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']::before {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]::before {
     background: var(--slotted-border-strong, transparent);
     transition: background-color var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing, ease);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])::before {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]:hover:not([data-current]):not([data-disabled])::before {
     background: var(--slotted-text-muted, transparent);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']:active:not([data-current]):not([data-disabled])::before {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]:active:not([data-current]):not([data-disabled])::before {
     background: var(--slotted-text, transparent);
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator'][data-current]::before {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator][data-current]::before {
     background: var(--slotted-text, transparent);
   }
 
@@ -590,24 +588,24 @@
    * disagree. The fill grows its own inline size from the inline start, like
    * `toast`'s countdown, so there is no origin to mirror.
    */
-  [data-ui='carousel'][data-playing]
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator'][data-current]::before {
+  [data-ui-carousel][data-playing]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator][data-current]::before {
     background: var(--slotted-border-strong, transparent);
   }
 
-  [data-ui='carousel'][data-playing]
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator'][data-current]::after {
+  [data-ui-carousel][data-playing]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator][data-current]::after {
     animation: slotted-carousel-countdown
       var(--slotted-carousel-autoplay-delay, var(--slotted-duration-loop-slow)) linear forwards;
     background: var(--slotted-text, transparent);
     inset-inline-end: auto;
   }
 
-  [data-ui='carousel'][data-playing][data-paused]
-    [data-part='indicators']
-    > [data-part='indicator'][data-current]::after {
+  [data-ui-carousel][data-playing][data-paused]
+    [data-part-indicators]
+    > [data-part-indicator][data-current]::after {
     animation-play-state: paused;
   }
 
@@ -629,15 +627,15 @@
    * stays a tab in the arrow ring, and moving onto it makes it current, which
    * brings the window to it.
    */
-  [data-ui='carousel']
-    [data-part='indicators'][data-adaptive]
-    > [data-part='indicator'][data-distance='2']::before {
+  [data-ui-carousel]
+    [data-part-indicators][data-adaptive]
+    > [data-part-indicator][data-distance='2']::before {
     scale: 0.66;
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-adaptive]
-    > [data-part='indicator'][data-distance='far'] {
+  [data-ui-carousel]
+    [data-part-indicators][data-adaptive]
+    > [data-part-indicator][data-distance='far'] {
     inline-size: 0;
     overflow: hidden;
   }
@@ -649,34 +647,30 @@
    * dot, and the current one is the ink — the progress line ReUI's `blog-3`
    * draws as a single pixel, at the thickness the foundation gives a marker.
    */
-  [data-ui='carousel'] [data-part='indicators'][data-variant='line'] {
+  [data-ui-carousel] [data-part-indicators][data-variant='line'] {
     gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='carousel'] [data-part='indicators'][data-variant='line'] > [data-part='indicator'],
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='line']
-    > [data-part='indicator'][data-current] {
+  [data-ui-carousel] [data-part-indicators][data-variant='line'] > [data-part-indicator],
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='line']
+    > [data-part-indicator][data-current] {
     flex: 1 1 0;
     inline-size: auto;
     min-inline-size: var(--slotted-target-min, 24px);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='line']
-    > [data-part='indicator']::before,
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='line']
-    > [data-part='indicator']::after {
+  [data-ui-carousel] [data-part-indicators][data-variant='line'] > [data-part-indicator]::before,
+  [data-ui-carousel] [data-part-indicators][data-variant='line'] > [data-part-indicator]::after {
     block-size: var(--_line);
     border-radius: var(--slotted-radius-full, 9999px);
     inset-block-start: calc(50% - var(--_line) / 2);
     inset-inline: 0;
   }
 
-  [data-ui='carousel'][data-playing]
-    [data-part='indicators'][data-variant='line']
-    > [data-part='indicator'][data-current]::after {
+  [data-ui-carousel][data-playing]
+    [data-part-indicators][data-variant='line']
+    > [data-part-indicator][data-current]::after {
     animation-name: slotted-carousel-countdown-line;
   }
 
@@ -700,7 +694,7 @@
    * the ink, inside its own box, so the focus ring drawn outside it is never
    * confused with it.
    */
-  [data-ui='carousel'] [data-part='indicators'][data-variant='thumbnails'] {
+  [data-ui-carousel] [data-part-indicators][data-variant='thumbnails'] {
     gap: var(--slotted-space-4, 0.5rem);
     justify-content: flex-start;
     overflow-x: auto;
@@ -710,12 +704,10 @@
     scrollbar-width: none;
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator'],
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator'][data-current] {
+  [data-ui-carousel] [data-part-indicators][data-variant='thumbnails'] > [data-part-indicator],
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator][data-current] {
     block-size: var(--_thumbnail);
     border-radius: var(--slotted-radius-md, 6px);
     inline-size: var(--_thumbnail);
@@ -723,10 +715,7 @@
     transition: none;
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator']
-    > * {
+  [data-ui-carousel] [data-part-indicators][data-variant='thumbnails'] > [data-part-indicator] > * {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -736,23 +725,23 @@
       var(--slotted-control-transition-easing, ease);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator]:hover:not([data-current]):not([data-disabled])
     > * {
     opacity: 0.85;
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator'][data-current]
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator][data-current]
     > * {
     opacity: 1;
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator']::after {
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator]::after {
     border-radius: inherit;
     box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-border-subtle, transparent);
@@ -769,28 +758,28 @@
    * under hover, and the ink under the press, so the part itself carries the
    * state and not only the picture inside it.
    */
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator']:hover:not([data-current]):not([data-disabled])::after {
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator]:hover:not([data-current]):not([data-disabled])::after {
     box-shadow: inset 0 0 0 var(--slotted-border-width-thin, 1px)
       var(--slotted-border-strong, transparent);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator']:active:not([data-current]):not([data-disabled])::after {
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator]:active:not([data-current]):not([data-disabled])::after {
     box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px)
       var(--slotted-border-strong, transparent);
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='carousel']
-    [data-part='indicators'][data-variant='thumbnails']
-    > [data-part='indicator'][data-current]::after {
+  [data-ui-carousel]
+    [data-part-indicators][data-variant='thumbnails']
+    > [data-part-indicator][data-current]::after {
     box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px) var(--slotted-text, transparent);
   }
 
-  [data-ui='carousel'] [data-part='indicator']:focus-visible {
+  [data-ui-carousel] [data-part-indicator]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -800,9 +789,9 @@
    * pixels round a box much taller than the mark. The ring of a dot or a
    * segment hugs the row instead, which is the box the pointer hits.
    */
-  [data-ui='carousel']
-    [data-part='indicators']:not([data-variant='thumbnails'])
-    > [data-part='indicator']:focus-visible {
+  [data-ui-carousel]
+    [data-part-indicators]:not([data-variant='thumbnails'])
+    > [data-part-indicator]:focus-visible {
     outline-offset: calc(var(--slotted-focus-ring-width, 2px) * -1);
   }
 
@@ -812,7 +801,7 @@
    * Tabular figures, so "9 / 12" and "10 / 12" are the same width and the
    * controls beside the counter do not move when the page changes.
    */
-  [data-ui='carousel'] [data-part='counter'] {
+  [data-ui-carousel] [data-part-counter] {
     color: var(--slotted-text-muted, GrayText);
     font-family: var(--slotted-font-family-sans, sans-serif);
     font-size: var(--slotted-font-size-sm, 0.8125rem);
@@ -836,23 +825,23 @@
    * which forced colours map to the highlight.
    */
   @media (forced-colors: active) {
-    [data-ui='carousel'] [data-part='indicator']::before,
-    [data-ui='carousel'] [data-part='indicator']::after {
+    [data-ui-carousel] [data-part-indicator]::before,
+    [data-ui-carousel] [data-part-indicator]::after {
       forced-color-adjust: none;
     }
 
-    [data-ui='carousel']
-      [data-part='indicators']:not([data-variant='thumbnails'])
-      > [data-part='indicator'][data-current]::before,
-    [data-ui='carousel']
-      [data-part='indicators']:not([data-variant='thumbnails'])
-      > [data-part='indicator'][data-current]::after {
+    [data-ui-carousel]
+      [data-part-indicators]:not([data-variant='thumbnails'])
+      > [data-part-indicator][data-current]::before,
+    [data-ui-carousel]
+      [data-part-indicators]:not([data-variant='thumbnails'])
+      > [data-part-indicator][data-current]::after {
       background: var(--slotted-tone-accent-solid, transparent);
     }
 
-    [data-ui='carousel']
-      [data-part='indicators'][data-variant='thumbnails']
-      > [data-part='indicator'][data-current]::after {
+    [data-ui-carousel]
+      [data-part-indicators][data-variant='thumbnails']
+      > [data-part-indicator][data-current]::after {
       box-shadow: inset 0 0 0 var(--slotted-border-width-thick, 2px)
         var(--slotted-tone-accent-solid, transparent);
     }