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

package/src/timeline/timeline.css

@@ -22,7 +22,7 @@
    * in, the browser rounded the half to a whole CSS pixel, and the line was
    * drawn one device pixel off the dot's centre at 100%, 150% and 200%.
    */
-  [data-ui='timeline'] {
+  [data-ui-timeline] {
     --_icon: var(--slotted-control-icon-size-md, 16px);
     --_font-size: var(--slotted-timeline-font-size, var(--slotted-control-font-size-md, 13px));
     /**
@@ -105,7 +105,7 @@
     line-height: var(--_leading);
   }
 
-  [data-ui='timeline'][data-size='sm'] {
+  [data-ui-timeline][data-size='sm'] {
     --_icon: var(--slotted-control-icon-size-sm, 14px);
     --_font-size: var(--slotted-timeline-font-size, var(--slotted-control-font-size-sm, 12px));
     --_gap: var(
@@ -114,7 +114,7 @@
     );
   }
 
-  [data-ui='timeline'][data-size='lg'] {
+  [data-ui-timeline][data-size='lg'] {
     --_icon: var(--slotted-control-icon-size-lg, 18px);
     --_font-size: var(--slotted-timeline-font-size, var(--slotted-control-font-size-lg, 14px));
     --_gap: var(
@@ -129,11 +129,11 @@
    * title starts at the same indent. A spinner and the check of a finished
    * dot are a dot's size and widen nothing.
    */
-  [data-ui='timeline']:has([data-part='marker'] > :not([data-ui='spinner'], [data-check])) {
+  [data-ui-timeline]:has([data-part-marker] > :not([data-ui-spinner], [data-check])) {
     --_rail: var(--_badge);
   }
 
-  [data-ui='timeline']:has([data-part='marker'] > [data-ui='avatar']) {
+  [data-ui-timeline]:has([data-part-marker] > [data-ui-avatar]) {
     --_rail: max(var(--_badge), var(--_avatar));
   }
 
@@ -144,8 +144,8 @@
    * item that names its own wins by being nearer.
    */
 
-  [data-ui='timeline'],
-  [data-ui='timeline'] [data-tone='secondary'] {
+  [data-ui-timeline],
+  [data-ui-timeline] [data-tone='secondary'] {
     --_tone-solid: var(--slotted-tone-secondary-solid, ButtonFace);
     --_tone-on-solid: var(--slotted-tone-secondary-on-solid, ButtonText);
     --_tone-surface: var(--slotted-tone-secondary-surface, Canvas);
@@ -159,8 +159,8 @@
     --_tone-mark: var(--slotted-border-strong, GrayText);
   }
 
-  [data-ui='timeline'][data-tone='accent'],
-  [data-ui='timeline'] [data-tone='accent'] {
+  [data-ui-timeline][data-tone='accent'],
+  [data-ui-timeline] [data-tone='accent'] {
     --_tone-solid: var(--slotted-tone-accent-solid, Highlight);
     --_tone-on-solid: var(--slotted-tone-accent-on-solid, HighlightText);
     --_tone-surface: var(--slotted-tone-accent-surface, Canvas);
@@ -169,8 +169,8 @@
     --_tone-text: var(--slotted-tone-accent-text, Highlight);
   }
 
-  [data-ui='timeline'][data-tone='success'],
-  [data-ui='timeline'] [data-tone='success'] {
+  [data-ui-timeline][data-tone='success'],
+  [data-ui-timeline] [data-tone='success'] {
     --_tone-solid: var(--slotted-tone-success-solid, ButtonFace);
     --_tone-on-solid: var(--slotted-tone-success-on-solid, ButtonText);
     --_tone-surface: var(--slotted-tone-success-surface, Canvas);
@@ -179,8 +179,18 @@
     --_tone-text: var(--slotted-tone-success-text, CanvasText);
   }
 
-  [data-ui='timeline'][data-tone='warning'],
-  [data-ui='timeline'] [data-tone='warning'] {
+  [data-ui-timeline][data-tone='info'],
+  [data-ui-timeline] [data-tone='info'] {
+    --_tone-solid: var(--slotted-tone-info-solid, ButtonFace);
+    --_tone-on-solid: var(--slotted-tone-info-on-solid, ButtonText);
+    --_tone-surface: var(--slotted-tone-info-surface, Canvas);
+    --_tone-border: var(--slotted-tone-info-border, ButtonBorder);
+    --_tone-mark: var(--slotted-tone-info-border, ButtonBorder);
+    --_tone-text: var(--slotted-tone-info-text, CanvasText);
+  }
+
+  [data-ui-timeline][data-tone='warning'],
+  [data-ui-timeline] [data-tone='warning'] {
     --_tone-solid: var(--slotted-tone-warning-solid, ButtonFace);
     --_tone-on-solid: var(--slotted-tone-warning-on-solid, ButtonText);
     --_tone-surface: var(--slotted-tone-warning-surface, Canvas);
@@ -189,8 +199,8 @@
     --_tone-text: var(--slotted-tone-warning-text, CanvasText);
   }
 
-  [data-ui='timeline'][data-tone='danger'],
-  [data-ui='timeline'] [data-tone='danger'] {
+  [data-ui-timeline][data-tone='danger'],
+  [data-ui-timeline] [data-tone='danger'] {
     --_tone-solid: var(--slotted-tone-danger-solid, Mark);
     --_tone-on-solid: var(--slotted-tone-danger-on-solid, MarkText);
     --_tone-surface: var(--slotted-tone-danger-surface, Canvas);
@@ -206,7 +216,7 @@
    * like. A group nests a second list of the same kind.
    */
 
-  [data-ui='timeline'] :is([data-part='list'], [data-part='group-list']) {
+  [data-ui-timeline] :is([data-part-list], [data-part-group-list]) {
     display: flex;
     flex-direction: column;
     list-style: none;
@@ -219,7 +229,7 @@
    * read from the list rather than declared, so a consumer who writes the part
    * on one event gets the column on every event and the titles keep lining up.
    */
-  [data-ui='timeline'] [data-part='list']:has([data-part='opposite']) {
+  [data-ui-timeline] [data-part-list]:has([data-part-opposite]) {
     --_opposite-column: var(--_opposite);
   }
 
@@ -231,7 +241,7 @@
    * title still sits on the title's first line.
    */
 
-  [data-ui='timeline'] [data-part='item'] {
+  [data-ui-timeline] [data-part-item] {
     align-items: stretch;
     column-gap: var(--_gap);
     display: grid;
@@ -242,9 +252,7 @@
     position: relative;
   }
 
-  [data-ui='timeline']
-    :where([data-part='list']:not(:has([data-part='opposite'])))
-    [data-part='item'] {
+  [data-ui-timeline] :where([data-part-list]:not(:has([data-part-opposite]))) [data-part-item] {
     grid-template-columns: [rail] var(--_rail) [content] minmax(0, 1fr);
   }
 
@@ -253,15 +261,15 @@
    * around an article wraps the event and not the air under it; the connector
    * runs on through the margin to the next marker.
    */
-  [data-ui='timeline'] [data-part='item'] {
+  [data-ui-timeline] [data-part-item] {
     margin-block-end: var(--_item-gap);
   }
 
-  [data-ui='timeline'] [data-part='item']:last-child {
+  [data-ui-timeline] [data-part-item]:last-child {
     margin-block-end: 0;
   }
 
-  [data-ui='timeline'] [data-part='content'] {
+  [data-ui-timeline] [data-part-content] {
     align-self: baseline;
     grid-column: content;
     /**
@@ -273,7 +281,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='timeline'] [data-part='opposite'] {
+  [data-ui-timeline] [data-part-opposite] {
     align-self: baseline;
     color: var(--_muted);
     grid-column: opposite;
@@ -291,7 +299,7 @@
    * connector starts and ends — whatever size the marker is.
    */
 
-  [data-ui='timeline'] [data-part='rail'] {
+  [data-ui-timeline] [data-part-rail] {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -315,7 +323,7 @@
    * and a core laid over it at a whole-pixel inset. There is no smaller box
    * centred by arithmetic, so the core lands where the ring does.
    */
-  [data-ui='timeline'] [data-part='marker'] {
+  [data-ui-timeline] [data-part-marker] {
     --_marker: var(--_dot);
     /**
      * Rounded to a whole pixel: a line of 19.5 put a 13-pixel dot at a
@@ -355,7 +363,7 @@
    * pixels, since the dot and the core differ by an even number. A finished
    * dot holds its check instead, so it is not empty and draws no core.
    */
-  [data-ui='timeline'] [data-part='marker']:empty::after {
+  [data-ui-timeline] [data-part-marker]:empty::after {
     background-color: var(--_tone-mark);
     border-radius: inherit;
     content: '';
@@ -377,8 +385,7 @@
    * the marker stays a dot, and every rule a dot takes names it beside
    * `:empty`.
    */
-  [data-ui='timeline']
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])) {
+  [data-ui-timeline] [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])) {
     --_marker: var(--_badge);
 
     background-color: var(--_surface);
@@ -386,7 +393,7 @@
     border-width: var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='timeline'] [data-part='marker'] > [data-ui='icon'] {
+  [data-ui-timeline] [data-part-marker] > [data-ui-icon] {
     --slotted-icon-size: calc(
       var(--_badge) - 2 * round(down, (var(--_badge) - var(--_glyph)) / 2, 1px)
     );
@@ -395,17 +402,17 @@
   }
 
   /* A spinner is a dot: the same box, and the same size as the glyph in a badge. */
-  [data-ui='timeline'] [data-part='marker'] > [data-ui='spinner'] {
+  [data-ui-timeline] [data-part-marker] > [data-ui-spinner] {
     --slotted-spinner-size: var(--_dot);
 
     color: inherit;
   }
 
-  [data-ui='timeline'] [data-part='marker'] > [data-ui='avatar'] {
+  [data-ui-timeline] [data-part-marker] > [data-ui-avatar] {
     --slotted-avatar-size: var(--_avatar);
   }
 
-  [data-ui='timeline'] [data-part='marker']:has(> [data-ui='avatar']) {
+  [data-ui-timeline] [data-part-marker]:has(> [data-ui-avatar]) {
     --_marker: var(--_avatar);
 
     background-color: transparent;
@@ -422,22 +429,18 @@
    * the core alone, threaded on the line, or the bare glyph over it.
    */
 
-  [data-ui='timeline']
-    [data-variant='outline']
-    [data-part='marker']:is(:empty, :has(> [data-check])) {
+  [data-ui-timeline] [data-variant='outline'] [data-part-marker]:is(:empty, :has(> [data-check])) {
     background-color: var(--_surface);
     border-color: var(--_tone-mark);
     border-width: var(--_edge);
   }
 
-  [data-ui='timeline'] [data-variant='outline'] [data-part='marker']:empty::after,
-  [data-ui='timeline'] [data-variant='solid'] [data-part='marker']:empty::after {
+  [data-ui-timeline] [data-variant='outline'] [data-part-marker]:empty::after,
+  [data-ui-timeline] [data-variant='solid'] [data-part-marker]:empty::after {
     content: none;
   }
 
-  [data-ui='timeline']
-    [data-variant='solid']
-    [data-part='marker']:is(:empty, :has(> [data-check])) {
+  [data-ui-timeline] [data-variant='solid'] [data-part-marker]:is(:empty, :has(> [data-check])) {
     background-color: var(--_tone-mark);
     /* A border as wide as the radius, so forced colours, which drop the ground, keep the disc. */
     border-color: var(--_tone-mark);
@@ -445,45 +448,39 @@
   }
 
   /* The core alone, on the line: the ground and the halo give way so the line runs into it. */
-  [data-ui='timeline']
-    [data-variant='plain']
-    [data-part='marker']:is(:empty, :has(> [data-check])) {
+  [data-ui-timeline] [data-variant='plain'] [data-part-marker]:is(:empty, :has(> [data-check])) {
     background-color: transparent;
     box-shadow: none;
   }
 
   /* The glyph of a hairline or frameless badge is drawn in the dot's own ink. */
-  [data-ui='timeline']
-    [data-variant='outline']
-    [data-part='marker']:not(:empty, :has(> [data-check])) {
+  [data-ui-timeline] [data-variant='outline'] [data-part-marker]:not(:empty, :has(> [data-check])) {
     color: var(--_tone-mark);
   }
 
-  [data-ui='timeline']
+  [data-ui-timeline]
     [data-variant='outline'][data-tone]:not([data-tone='secondary'])
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])) {
+    [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])) {
     border-color: var(--_tone-border);
   }
 
-  [data-ui='timeline']
+  [data-ui-timeline]
     [data-variant='solid']
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])) {
+    [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])) {
     background-color: var(--_tone-solid);
     border-color: var(--_tone-solid);
     color: var(--_tone-on-solid);
   }
 
-  [data-ui='timeline']
+  [data-ui-timeline]
     [data-variant='subtle']
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])) {
+    [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])) {
     background-color: var(--_tone-surface);
     border-color: var(--_tone-border);
     color: var(--_tone-text);
   }
 
-  [data-ui='timeline']
-    [data-variant='plain']
-    [data-part='marker']:not(:empty, :has(> [data-check])) {
+  [data-ui-timeline] [data-variant='plain'] [data-part-marker]:not(:empty, :has(> [data-check])) {
     background-color: var(--_surface);
     border-color: transparent;
     color: var(--_tone-mark);
@@ -507,20 +504,18 @@
    * radius: that border would leave the check no box to stand in. Forced
    * colours keep the ground through the block at the end.
    */
-  [data-ui='timeline']
-    [data-complete]:not([data-current])
-    [data-part='marker']:has(> [data-check]) {
+  [data-ui-timeline] [data-complete]:not([data-current]) [data-part-marker]:has(> [data-check]) {
     background-color: var(--_tone-mark);
     border-width: 0;
   }
 
-  [data-ui='timeline'] [data-current] [data-part='marker']:empty {
+  [data-ui-timeline] [data-current] [data-part-marker]:empty {
     background-color: var(--_tone-mark);
     border-color: var(--_tone-mark);
     border-width: calc(var(--_marker) / 2);
   }
 
-  [data-ui='timeline'] [data-current] [data-part='marker']:empty::after {
+  [data-ui-timeline] [data-current] [data-part-marker]:empty::after {
     content: none;
   }
 
@@ -529,25 +524,25 @@
    * reads in every tone and scheme without a token of its own; it is the
    * dot less a step a side, the same air a badge gives its glyph.
    */
-  [data-ui='timeline'] [data-part='marker'] > [data-ui='icon'][data-check] {
+  [data-ui-timeline] [data-part-marker] > [data-ui-icon][data-check] {
     --slotted-icon-size: calc(var(--_marker) - 2 * var(--slotted-space-1, 0.125rem));
 
     color: var(--_surface);
   }
 
-  [data-ui='timeline'] [data-current] [data-part='marker'] {
+  [data-ui-timeline] [data-current] [data-part-marker] {
     box-shadow:
       0 0 0 var(--slotted-border-width-thick, 2px) var(--_surface),
       0 0 0 var(--_reach) var(--_tone-mark),
       0 0 0 calc(var(--_reach) + var(--_line-gap)) var(--_surface);
   }
 
-  [data-ui='timeline']
+  [data-ui-timeline]
     [data-complete]:not([data-current])
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])),
-  [data-ui='timeline']
+    [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])),
+  [data-ui-timeline]
     [data-current]
-    [data-part='marker']:not(:empty, :has(> [data-ui='spinner'], > [data-check])) {
+    [data-part-marker]:not(:empty, :has(> [data-ui-spinner], > [data-check])) {
     background-color: var(--_tone-solid);
     border-color: var(--_tone-solid);
     color: var(--_tone-on-solid);
@@ -558,14 +553,14 @@
    * for every family that waits — standing bare on the ground, the size of a
    * dot, in the tone's ink.
    */
-  [data-ui='timeline'] [data-loading][data-variant] [data-part='marker'] {
+  [data-ui-timeline] [data-loading][data-variant] [data-part-marker] {
     background-color: var(--_surface);
     border-color: transparent;
     box-shadow: 0 0 0 var(--_line-gap) var(--_surface);
     color: var(--_tone-mark);
   }
 
-  [data-ui='timeline'] [data-loading] > [data-part='content'] {
+  [data-ui-timeline] [data-loading] > [data-part-content] {
     color: var(--_muted);
   }
 
@@ -579,7 +574,7 @@
    * none, because there is nothing after it.
    */
 
-  [data-ui='timeline'] [data-part='connector'] {
+  [data-ui-timeline] [data-part-connector] {
     /* Both edges named, so the dashed style below reaches only the one drawn. */
     border-block-start: 0 solid var(--_line);
     border-inline-start: var(--_rule) solid var(--_line);
@@ -593,13 +588,13 @@
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='timeline'] [data-connector='dashed'] [data-part='connector'] {
+  [data-ui-timeline] [data-connector='dashed'] [data-part-connector] {
     border-block-start-style: dashed;
     border-inline-start-style: dashed;
   }
 
-  [data-ui='timeline'] [data-connector='none'] [data-part='connector'],
-  [data-ui='timeline'] [data-part='item']:last-child [data-part='connector'] {
+  [data-ui-timeline] [data-connector='none'] [data-part-connector],
+  [data-ui-timeline] [data-part-item]:last-child [data-part-connector] {
     display: none;
   }
 
@@ -607,7 +602,7 @@
    * The line after a finished event is painted in its tone, so a tracking
    * timeline reads as a filled track up to where the reader is.
    */
-  [data-ui='timeline'] [data-complete] [data-part='connector'] {
+  [data-ui-timeline] [data-complete] [data-part-connector] {
     border-color: var(--_tone-mark);
   }
 
@@ -625,7 +620,7 @@
    * under.
    */
 
-  [data-ui='timeline'] [data-part='content'] {
+  [data-ui-timeline] [data-part-content] {
     /**
      * No column gap: the timestamp carries the distance itself, so a body
      * with no timestamp has no empty column and no gap beside it.
@@ -638,15 +633,15 @@
     row-gap: 0;
   }
 
-  [data-ui='timeline'] [data-part='content'] > :not([data-part='title'], [data-part='time']) {
+  [data-ui-timeline] [data-part-content] > :not([data-part-title], [data-part-time]) {
     grid-column: 1 / -1;
   }
 
-  [data-ui='timeline'] [data-part='content'] > :is([data-part='actor'], [data-part='description']) {
+  [data-ui-timeline] [data-part-content] > :is([data-part-actor], [data-part-description]) {
     margin-block-start: var(--slotted-timeline-content-gap, var(--slotted-space-2, 0.25rem));
   }
 
-  [data-ui='timeline'] [data-part='title'] {
+  [data-ui-timeline] [data-part-title] {
     color: var(--_strong);
     font-weight: var(--slotted-timeline-title-weight, var(--slotted-font-weight-medium, 500));
     grid-column: 1;
@@ -654,20 +649,20 @@
     overflow-wrap: anywhere;
   }
 
-  [data-ui='timeline'] [data-part='content'] > [data-part='time'] {
+  [data-ui-timeline] [data-part-content] > [data-part-time] {
     grid-column: 2;
     grid-row: 1;
     margin-inline-start: var(--_gap);
   }
 
-  [data-ui='timeline'] [data-part='time'] {
+  [data-ui-timeline] [data-part-time] {
     color: var(--_muted);
     font-size: var(--slotted-timeline-time-font-size, var(--slotted-font-size-xs, 0.75rem));
     font-variant-numeric: tabular-nums;
     white-space: nowrap;
   }
 
-  [data-ui='timeline'] [data-part='actor'] {
+  [data-ui-timeline] [data-part-actor] {
     align-items: center;
     color: var(--_muted);
     column-gap: var(--slotted-space-3, 0.375rem);
@@ -676,14 +671,14 @@
     min-inline-size: 0;
   }
 
-  [data-ui='timeline'] [data-part='description'] {
+  [data-ui-timeline] [data-part-description] {
     color: var(--_muted);
     font-size: var(--_meta-size);
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
-  [data-ui='timeline'] [data-part='actions'] {
+  [data-ui-timeline] [data-part-actions] {
     column-gap: var(--_gap);
     display: flex;
     flex-wrap: wrap;
@@ -698,7 +693,7 @@
    * theme states, around the whole row rather than around the words.
    */
 
-  [data-ui='timeline'] [data-part='item'][tabindex]:focus-visible {
+  [data-ui-timeline] [data-part-item][tabindex]:focus-visible {
     border-radius: var(--slotted-timeline-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);
@@ -711,11 +706,11 @@
    * track that ran into it would say the opposite.
    */
 
-  [data-ui='timeline'] [data-part='group'] {
+  [data-ui-timeline] [data-part-group] {
     display: block;
   }
 
-  [data-ui='timeline'] [data-part='group'] + [data-part='group'] {
+  [data-ui-timeline] [data-part-group] + [data-part-group] {
     margin-block-start: var(--_item-gap);
   }
 
@@ -724,7 +719,7 @@
    * trigger on the heading's baseline added the font's descent under its
    * 24 pixels, and the heading measured 26.5.
    */
-  [data-ui='timeline'] [data-part='group-label'] {
+  [data-ui-timeline] [data-part-group-label] {
     align-items: center;
     color: var(--_muted);
     display: flex;
@@ -734,7 +729,7 @@
     margin: 0 0 var(--slotted-timeline-group-gap, var(--slotted-space-4, 0.5rem));
   }
 
-  [data-ui='timeline'] [data-part='group-trigger'] {
+  [data-ui-timeline] [data-part-group-trigger] {
     align-items: center;
     appearance: none;
     background: none;
@@ -754,7 +749,7 @@
       translate var(--slotted-duration-instant) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='timeline'] [data-part='group-trigger']:enabled:hover {
+  [data-ui-timeline] [data-part-group-trigger]:enabled:hover {
     color: var(--_strong);
   }
 
@@ -763,12 +758,12 @@
    * strongest ink, so a press answers in place: the label settles by a
    * hairline, the press `button` draws on a solid fill.
    */
-  [data-ui='timeline'] [data-part='group-trigger']:enabled:active {
+  [data-ui-timeline] [data-part-group-trigger]:enabled:active {
     color: var(--_strong);
     translate: 0 var(--slotted-border-width-thin, 1px);
   }
 
-  [data-ui='timeline'] [data-part='group-trigger']:focus-visible {
+  [data-ui-timeline] [data-part-group-trigger]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -778,7 +773,7 @@
    * that rotates between down and up is the same mark in every direction. The
    * part sizes the icon box and the box turns.
    */
-  [data-ui='timeline'] [data-part='group-indicator'] {
+  [data-ui-timeline] [data-part-group-indicator] {
     --slotted-icon-size: var(--_icon);
 
     display: inline-flex;
@@ -793,21 +788,21 @@
    * one frame, the exiting curve held the list at 0.9 for the first fifty-five milliseconds
    * after the press, and the chevron finished seventy milliseconds after the list had gone.
    */
-  [data-ui='timeline'] [data-part='group'] {
+  [data-ui-timeline] [data-part-group] {
     --_fold: var(--slotted-duration-medium)
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='timeline'] [data-part='group-indicator'] > [data-ui='icon'] {
+  [data-ui-timeline] [data-part-group-indicator] > [data-ui-icon] {
     rotate: -90deg;
     transition: rotate var(--_fold);
   }
 
-  [data-ui='timeline']
+  [data-ui-timeline]
     [data-open]
-    > [data-part='group-label']
-    [data-part='group-indicator']
-    > [data-ui='icon'] {
+    > [data-part-group-label]
+    [data-part-group-indicator]
+    > [data-ui-icon] {
     rotate: 0deg;
   }
 
@@ -821,7 +816,7 @@
    * opening. The clip margin keeps the current marker's ring and a focus
    * ring at the list's edge whole.
    */
-  [data-ui='timeline'] [data-part='group-list'] {
+  [data-ui-timeline] [data-part-group-list] {
     interpolate-size: allow-keywords;
     opacity: 1;
     overflow: clip;
@@ -835,7 +830,7 @@
       visibility var(--_fold);
   }
 
-  [data-ui='timeline'] [data-part='group-list'][hidden] {
+  [data-ui-timeline] [data-part-group-list][hidden] {
     block-size: 0;
     display: flex;
     opacity: 0;
@@ -843,11 +838,11 @@
   }
 
   /* A folded group ends at its heading; the distance to the next is the group's own. */
-  [data-ui='timeline'] [data-part='group-label'] {
+  [data-ui-timeline] [data-part-group-label] {
     transition: margin-block-end var(--_fold);
   }
 
-  [data-ui='timeline'] [data-part='group-label']:has(+ [data-part='group-list'][hidden]) {
+  [data-ui-timeline] [data-part-group-label]:has(+ [data-part-group-list][hidden]) {
     margin-block-end: 0;
   }
 
@@ -858,8 +853,8 @@
    * been loaded; `empty` is the list with nothing in it yet.
    */
 
-  [data-ui='timeline'] [data-part='fresh'],
-  [data-ui='timeline'] button[data-part='more'] {
+  [data-ui-timeline] [data-part-fresh],
+  [data-ui-timeline] button[data-part-more] {
     align-items: center;
     appearance: none;
     background-color: var(--_surface);
@@ -886,7 +881,7 @@
       color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='timeline'] [data-part='fresh'] {
+  [data-ui-timeline] [data-part-fresh] {
     --_tone-solid: var(--slotted-tone-accent-solid, Highlight);
     --_tone-surface: var(--slotted-tone-accent-surface, Canvas);
     --_tone-border: var(--slotted-tone-accent-border, Highlight);
@@ -928,7 +923,7 @@
    * (`text-scale.test.mjs`).
    */
   @starting-style {
-    [data-ui='timeline'] [data-part='fresh']:not([hidden]) {
+    [data-ui-timeline] [data-part-fresh]:not([hidden]) {
       block-size: 0;
       border-block-width: 0;
       margin-block-end: 0;
@@ -937,7 +932,7 @@
     }
   }
 
-  [data-ui='timeline'] [data-part='fresh'][hidden] {
+  [data-ui-timeline] [data-part-fresh][hidden] {
     block-size: 0;
     border-block-width: 0;
     display: none;
@@ -954,7 +949,7 @@
    * on — `subtle-hover` lightened it toward the page in the light scheme, and
    * matched the page in the dark one, and `subtle-active` was the rest colour.
    */
-  [data-ui='timeline'] [data-part='fresh']:enabled:hover {
+  [data-ui-timeline] [data-part-fresh]:enabled:hover {
     background-color: color-mix(
       in oklab,
       var(--_tone-surface),
@@ -962,7 +957,7 @@
     );
   }
 
-  [data-ui='timeline'] [data-part='fresh']:enabled:active {
+  [data-ui-timeline] [data-part-fresh]:enabled:active {
     background-color: color-mix(
       in oklab,
       var(--_tone-surface),
@@ -970,21 +965,21 @@
     );
   }
 
-  [data-ui='timeline'] button[data-part='more']:enabled:hover {
+  [data-ui-timeline] button[data-part-more]:enabled:hover {
     background-color: var(--slotted-tone-secondary-subtle-hover, Canvas);
   }
 
-  [data-ui='timeline'] button[data-part='more']:enabled:active {
+  [data-ui-timeline] button[data-part-more]:enabled:active {
     background-color: var(--slotted-tone-secondary-subtle-active, Canvas);
   }
 
   /* A press lands at once, as a `button` does; the release eases back. */
-  [data-ui='timeline'] :is([data-part='fresh'], button[data-part='more']):enabled:active {
+  [data-ui-timeline] :is([data-part-fresh], button[data-part-more]):enabled:active {
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='timeline'] [data-part='fresh']:focus-visible,
-  [data-ui='timeline'] button[data-part='more']:focus-visible {
+  [data-ui-timeline] [data-part-fresh]:focus-visible,
+  [data-ui-timeline] button[data-part-more]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -993,16 +988,16 @@
    * The end of the loaded list, in the body's own column so it reads as the
    * next event's place rather than as a footer.
    */
-  [data-ui='timeline'] [data-part='more'] {
+  [data-ui-timeline] [data-part-more] {
     margin-block-start: var(--_item-gap);
     margin-inline-start: calc(var(--_opposite-column, 0px) + var(--_rail) + var(--_gap));
   }
 
-  [data-ui='timeline'] [data-part='list']:has([data-part='opposite']) ~ [data-part='more'] {
+  [data-ui-timeline] [data-part-list]:has([data-part-opposite]) ~ [data-part-more] {
     margin-inline-start: calc(var(--_opposite) + var(--_rail) + 2 * var(--_gap));
   }
 
-  [data-ui='timeline'] div[data-part='more'] {
+  [data-ui-timeline] div[data-part-more] {
     align-items: center;
     color: var(--_muted);
     column-gap: var(--_gap);
@@ -1011,11 +1006,11 @@
     min-block-size: var(--slotted-control-height-sm, 30px);
   }
 
-  [data-ui='timeline'] [data-part='more'] > [data-ui='spinner'] {
+  [data-ui-timeline] [data-part-more] > [data-ui-spinner] {
     --slotted-spinner-size: var(--_icon);
   }
 
-  [data-ui='timeline'] [data-part='empty'] {
+  [data-ui-timeline] [data-part-empty] {
     color: var(--_muted);
     padding-block: var(--_item-gap);
     text-align: center;
@@ -1029,45 +1024,45 @@
    * document `start` is the same timeline mirrored.
    */
 
-  [data-ui='timeline'][data-placement='start'] [data-part='item'] {
+  [data-ui-timeline][data-placement='start'] [data-part-item] {
     grid-template-columns:
       [content] minmax(0, 1fr)
       [rail] var(--_rail)
       [opposite] var(--_opposite-column, 0);
   }
 
-  [data-ui='timeline'][data-placement='start']
-    :where([data-part='list']:not(:has([data-part='opposite'])))
-    [data-part='item'] {
+  [data-ui-timeline][data-placement='start']
+    :where([data-part-list]:not(:has([data-part-opposite])))
+    [data-part-item] {
     grid-template-columns: [content] minmax(0, 1fr) [rail] var(--_rail);
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='content'] {
+  [data-ui-timeline][data-placement='start'] [data-part-content] {
     text-align: end;
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='content'] {
+  [data-ui-timeline][data-placement='start'] [data-part-content] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='content'] > [data-part='title'] {
+  [data-ui-timeline][data-placement='start'] [data-part-content] > [data-part-title] {
     grid-column: 2;
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='content'] > [data-part='time'] {
+  [data-ui-timeline][data-placement='start'] [data-part-content] > [data-part-time] {
     grid-column: 1;
     margin-inline: 0 var(--_gap);
   }
 
-  [data-ui='timeline'][data-placement='start'] :is([data-part='actor'], [data-part='actions']) {
+  [data-ui-timeline][data-placement='start'] :is([data-part-actor], [data-part-actions]) {
     justify-content: flex-end;
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='opposite'] {
+  [data-ui-timeline][data-placement='start'] [data-part-opposite] {
     text-align: start;
   }
 
-  [data-ui='timeline'][data-placement='start'] [data-part='more'] {
+  [data-ui-timeline][data-placement='start'] [data-part-more] {
     margin-inline-start: 0;
   }
 
@@ -1076,18 +1071,18 @@
    * rest: two equal fractions of an odd remainder put the rail, and every
    * marker on it, at half a pixel.
    */
-  [data-ui='timeline'][data-placement='alternate'] [data-part='item'] {
+  [data-ui-timeline][data-placement='alternate'] [data-part-item] {
     grid-template-columns:
       [before] round(down, calc((100% - var(--_rail)) / 2 - var(--_gap)), 1px)
       [rail] var(--_rail)
       [after] minmax(0, 1fr);
   }
 
-  [data-ui='timeline'][data-placement='alternate'] [data-part='content'] {
+  [data-ui-timeline][data-placement='alternate'] [data-part-content] {
     grid-column: after;
   }
 
-  [data-ui='timeline'][data-placement='alternate'] [data-part='opposite'] {
+  [data-ui-timeline][data-placement='alternate'] [data-part-opposite] {
     grid-column: before;
   }
 
@@ -1095,72 +1090,72 @@
    * Even rows swap sides. Parity is read from the list rather than written by
    * a binding, and an item that names its own side wins.
    */
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='content'],
-  [data-ui='timeline'][data-placement='alternate'] [data-side='start'] [data-part='content'] {
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-content],
+  [data-ui-timeline][data-placement='alternate'] [data-side='start'] [data-part-content] {
     grid-column: before;
     text-align: end;
   }
 
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='opposite'],
-  [data-ui='timeline'][data-placement='alternate'] [data-side='start'] [data-part='opposite'] {
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-opposite],
+  [data-ui-timeline][data-placement='alternate'] [data-side='start'] [data-part-opposite] {
     grid-column: after;
     text-align: start;
   }
 
-  [data-ui='timeline'][data-placement='alternate'] [data-side='end'] [data-part='content'] {
+  [data-ui-timeline][data-placement='alternate'] [data-side='end'] [data-part-content] {
     grid-column: after;
     text-align: start;
   }
 
-  [data-ui='timeline'][data-placement='alternate'] [data-side='end'] [data-part='opposite'] {
+  [data-ui-timeline][data-placement='alternate'] [data-side='end'] [data-part-opposite] {
     grid-column: before;
     text-align: end;
   }
 
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='content'],
-  [data-ui='timeline'][data-placement='alternate'] [data-side='start'] [data-part='content'] {
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-content],
+  [data-ui-timeline][data-placement='alternate'] [data-side='start'] [data-part-content] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='content']
-    > [data-part='title'],
-  [data-ui='timeline'][data-placement='alternate']
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-content]
+    > [data-part-title],
+  [data-ui-timeline][data-placement='alternate']
     [data-side='start']
-    [data-part='content']
-    > [data-part='title'] {
+    [data-part-content]
+    > [data-part-title] {
     grid-column: 2;
   }
 
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='content']
-    > [data-part='time'],
-  [data-ui='timeline'][data-placement='alternate']
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-content]
+    > [data-part-time],
+  [data-ui-timeline][data-placement='alternate']
     [data-side='start']
-    [data-part='content']
-    > [data-part='time'] {
+    [data-part-content]
+    > [data-part-time] {
     grid-column: 1;
     margin-inline: 0 var(--_gap);
   }
 
-  [data-ui='timeline'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    :is([data-part='actor'], [data-part='actions']),
-  [data-ui='timeline'][data-placement='alternate']
+  [data-ui-timeline][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    :is([data-part-actor], [data-part-actions]),
+  [data-ui-timeline][data-placement='alternate']
     [data-side='start']
-    :is([data-part='actor'], [data-part='actions']) {
+    :is([data-part-actor], [data-part-actions]) {
     justify-content: flex-end;
   }
 
-  [data-ui='timeline'][data-placement='alternate'] [data-part='more'] {
+  [data-ui-timeline][data-placement='alternate'] [data-part-more] {
     margin-inline-start: calc(50% + var(--_rail) / 2 + var(--_gap));
   }
 
@@ -1173,7 +1168,7 @@
    * titles are.
    */
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='list'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-list] {
     display: grid;
     grid-auto-columns: minmax(
       var(--slotted-timeline-track-min, var(--slotted-space-12, 4rem)),
@@ -1193,7 +1188,7 @@
     padding-inline: round(up, var(--_reach), 1px);
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='item'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-item] {
     /**
      * The rows keep their own height. Every item in the row is stretched to
      * the tallest, and `auto` rows would share that extra space out — which
@@ -1210,7 +1205,7 @@
     row-gap: 0;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='item']:last-child {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-item]:last-child {
     padding-inline-end: 0;
   }
 
@@ -1219,7 +1214,7 @@
    * the marker centred in it, so every centre sits half a rail in and the
    * line runs from one to the next along the same row.
    */
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='rail'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-rail] {
     align-items: start;
     align-self: start;
     block-size: var(--_rail);
@@ -1228,13 +1223,13 @@
     justify-content: center;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='marker'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-marker] {
     --_lift: 0px;
 
     margin-inline-start: calc((var(--_rail) - var(--_marker)) / 2);
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='connector'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-connector] {
     /* Widths only: the colour and the dash are the rules above, for both edges. */
     border-block-start-width: var(--_rule);
     border-inline-start-width: 0;
@@ -1246,7 +1241,7 @@
     inset-inline-start: calc(var(--_rail) / 2);
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='content'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-content] {
     align-self: start;
     grid-column: 1;
     grid-row: after;
@@ -1254,7 +1249,7 @@
     text-align: start;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='opposite'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-opposite] {
     align-self: start;
     grid-column: 1;
     grid-row: before;
@@ -1262,21 +1257,20 @@
     text-align: start;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'][data-placement='start'] [data-part='content'],
-  [data-ui='timeline'][data-orientation='horizontal'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='content'] {
+  [data-ui-timeline][data-orientation='horizontal'][data-placement='start'] [data-part-content],
+  [data-ui-timeline][data-orientation='horizontal'][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-content] {
     grid-column: 1;
     grid-row: before;
     margin-block: 0 var(--_gap);
     text-align: start;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'][data-placement='start']
-    [data-part='opposite'],
-  [data-ui='timeline'][data-orientation='horizontal'][data-placement='alternate']
-    [data-part='item']:nth-child(even)
-    [data-part='opposite'] {
+  [data-ui-timeline][data-orientation='horizontal'][data-placement='start'] [data-part-opposite],
+  [data-ui-timeline][data-orientation='horizontal'][data-placement='alternate']
+    [data-part-item]:nth-child(even)
+    [data-part-opposite] {
     grid-column: 1;
     grid-row: after;
     margin-block: var(--_gap) 0;
@@ -1287,23 +1281,22 @@
    * the placements swap are then irrelevant, and the DOM order — title, time,
    * actor, description, actions — is the order a narrow body reads in.
    */
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='content'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-content] {
     display: flex;
     flex-direction: column;
   }
 
   /* On a line of its own the timestamp may wrap: nowrap is for the title's line. */
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='content'] > [data-part='time'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-content] > [data-part-time] {
     margin-inline: 0;
     white-space: normal;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal']
-    :is([data-part='actor'], [data-part='actions']) {
+  [data-ui-timeline][data-orientation='horizontal'] :is([data-part-actor], [data-part-actions]) {
     justify-content: flex-start;
   }
 
-  [data-ui='timeline'][data-orientation='horizontal'] [data-part='more'] {
+  [data-ui-timeline][data-orientation='horizontal'] [data-part-more] {
     margin-block-start: var(--_gap);
     margin-inline-start: 0;
   }
@@ -1323,12 +1316,12 @@
    */
 
   @container slotted-timeline (max-width: 20rem) {
-    [data-ui='timeline'][data-orientation='vertical'] [data-part='content'] {
+    [data-ui-timeline][data-orientation='vertical'] [data-part-content] {
       display: flex;
       flex-direction: column;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'] [data-part='content'] > [data-part='time'] {
+    [data-ui-timeline][data-orientation='vertical'] [data-part-content] > [data-part-time] {
       margin-inline: 0;
       white-space: normal;
     }
@@ -1338,62 +1331,59 @@
      * body's measure. The opposite side takes the line above the body, and
      * the rail spans both.
      */
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='list']
-      [data-part='item']:nth-child(n) {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-list]
+      [data-part-item]:nth-child(n) {
       grid-template-columns: [rail] var(--_rail) [content] minmax(0, 1fr);
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n)
-      > [data-part='opposite'] {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n)
+      > [data-part-opposite] {
       grid-column: content;
       grid-row: 1;
       text-align: start;
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n):has(> [data-part='opposite'])
-      > [data-part='content'] {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n):has(> [data-part-opposite])
+      > [data-part-content] {
       grid-row: 2;
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n):has(> [data-part='opposite'])
-      > [data-part='rail'] {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n):has(> [data-part-opposite])
+      > [data-part-rail] {
       grid-row: 1 / 3;
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n)
-      > [data-part='content'] {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n)
+      > [data-part-content] {
       grid-column: content;
       text-align: start;
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n)
-      :is([data-part='actor'], [data-part='actions']) {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n)
+      :is([data-part-actor], [data-part-actions]) {
       justify-content: flex-start;
     }
 
-    [data-ui='timeline'][data-orientation='vertical']:not([data-reflow='false'])
-      [data-part='more'] {
+    [data-ui-timeline][data-orientation='vertical']:not([data-reflow='false']) [data-part-more] {
       margin-inline-start: calc(var(--_rail) + var(--_gap));
     }
   }
 
   @container slotted-timeline (max-width: 30rem) {
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='list'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false']) [data-part-list] {
       display: flex;
       flex-direction: column;
       overflow-x: visible;
       padding: 0;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='item'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false']) [data-part-item] {
       align-items: stretch;
       column-gap: var(--_gap);
       grid-template-columns: [rail] var(--_rail) [content] minmax(0, 1fr);
@@ -1403,13 +1393,12 @@
       row-gap: 0;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='item']:last-child {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false'])
+      [data-part-item]:last-child {
       margin-block-end: 0;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='rail'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false']) [data-part-rail] {
       align-items: center;
       align-self: stretch;
       block-size: auto;
@@ -1419,15 +1408,15 @@
       justify-content: flex-start;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='marker'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false'])
+      [data-part-marker] {
       --_lift: round(nearest, calc((1lh - var(--_marker)) / 2), 1px);
 
       margin-inline-start: 0;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='connector'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false'])
+      [data-part-connector] {
       border-block-start-width: 0;
       border-inline-start-width: var(--_rule);
       block-size: auto;
@@ -1443,9 +1432,9 @@
      * so the column wins over them here; a container query adds no weight of
      * its own.
      */
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n)
-      > [data-part='opposite'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n)
+      > [data-part-opposite] {
       align-self: baseline;
       grid-column: content;
       grid-row: 1;
@@ -1453,9 +1442,9 @@
       text-align: start;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='item']:nth-child(n)
-      > [data-part='content'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false'])
+      [data-part-item]:nth-child(n)
+      > [data-part-content] {
       align-self: baseline;
       grid-column: content;
       grid-row: auto;
@@ -1463,8 +1452,7 @@
       text-align: start;
     }
 
-    [data-ui='timeline'][data-orientation='horizontal']:not([data-reflow='false'])
-      [data-part='more'] {
+    [data-ui-timeline][data-orientation='horizontal']:not([data-reflow='false']) [data-part-more] {
       margin-block-start: var(--_item-gap);
       margin-inline-start: calc(var(--_rail) + var(--_gap));
     }
@@ -1474,85 +1462,85 @@
      * are two columns of three words. The opposite side takes the line above
      * the body, in reading order.
      */
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item'] {
+      [data-part-item] {
       grid-template-columns: [rail] var(--_rail) [content] minmax(0, 1fr);
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']
-      :is([data-part='content'], [data-part='opposite']) {
+      [data-part-item]
+      :is([data-part-content], [data-part-opposite]) {
       grid-column: content;
       text-align: start;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']
-      [data-part='opposite'] {
+      [data-part-item]
+      [data-part-opposite] {
       grid-row: 1;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']:has(> [data-part='opposite'])
-      > [data-part='content'] {
+      [data-part-item]:has(> [data-part-opposite])
+      > [data-part-content] {
       grid-row: 2;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']:has(> [data-part='opposite'])
-      > [data-part='rail'] {
+      [data-part-item]:has(> [data-part-opposite])
+      > [data-part-rail] {
       grid-row: 1 / 3;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']:nth-child(n)
-      [data-part='content'] {
+      [data-part-item]:nth-child(n)
+      [data-part-content] {
       grid-template-columns: minmax(0, 1fr) auto;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']:nth-child(n)
-      [data-part='content']
-      > [data-part='title'] {
+      [data-part-item]:nth-child(n)
+      [data-part-content]
+      > [data-part-title] {
       grid-column: 1;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']:nth-child(n)
-      [data-part='content']
-      > [data-part='time'] {
+      [data-part-item]:nth-child(n)
+      [data-part-content]
+      > [data-part-time] {
       grid-column: 2;
       margin-inline: var(--_gap) 0;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='item']
-      :is([data-part='actor'], [data-part='actions']) {
+      [data-part-item]
+      :is([data-part-actor], [data-part-actions]) {
       justify-content: flex-start;
     }
 
-    [data-ui='timeline'][data-orientation='vertical'][data-placement='alternate']:not(
+    [data-ui-timeline][data-orientation='vertical'][data-placement='alternate']:not(
         [data-reflow='false']
       )
-      [data-part='more'] {
+      [data-part-more] {
       margin-inline-start: calc(var(--_rail) + var(--_gap));
     }
   }
@@ -1571,12 +1559,12 @@
 
   @media (forced-colors: active) {
     /* The core in the marker's own ink, which the system has already forced. */
-    [data-ui='timeline'] [data-part='marker']:empty::after {
+    [data-ui-timeline] [data-part-marker]:empty::after {
       background-color: currentColor;
       forced-color-adjust: none;
     }
 
-    [data-ui='timeline'] [data-complete]:not([data-current]) [data-part='marker'] {
+    [data-ui-timeline] [data-complete]:not([data-current]) [data-part-marker] {
       background-color: Highlight;
       border-color: Highlight;
       color: HighlightText;
@@ -1584,11 +1572,11 @@
     }
 
     /* The check in the finished disc's forced ink, not the author's ground. */
-    [data-ui='timeline'] [data-part='marker'] > [data-ui='icon'][data-check] {
+    [data-ui-timeline] [data-part-marker] > [data-ui-icon][data-check] {
       color: inherit;
     }
 
-    [data-ui='timeline'] [data-current]:not([data-loading]) [data-part='marker'] {
+    [data-ui-timeline] [data-current]:not([data-loading]) [data-part-marker] {
       outline: var(--_edge) solid CanvasText;
       outline-offset: var(--slotted-border-width-thick, 2px);
     }