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

package/src/description-list/description-list.css

@@ -15,7 +15,7 @@
    * setting those same properties, rather than by restating six rules that
    * would have to be kept in step with the six above them.
    */
-  [data-ui='description-list'] {
+  [data-ui-description-list] {
     /**
      * The root is the query container and nothing else. An element with
      * `container-type: inline-size` is a container for its descendants and not
@@ -27,7 +27,7 @@
     display: block;
   }
 
-  [data-ui='description-list'] [data-part='list'] {
+  [data-ui-description-list] [data-part-list] {
     /* ── The colours ─────────────────────────────────────────────────── */
     --_ink: var(--slotted-description-list-color, var(--slotted-text, CanvasText));
     --_term-ink: var(--slotted-description-list-term-color, var(--slotted-text-muted, GrayText));
@@ -145,7 +145,7 @@
    * always would end every row of every actionless list with a distance
    * nothing asked for.
    */
-  [data-ui='description-list'] [data-part='list']:has([data-part='action']) {
+  [data-ui-description-list] [data-part-list]:has([data-part-action]) {
     --_pair: fit-content(var(--_term-width)) minmax(0, 1fr) auto;
     --_span-1: 3;
     --_span-2: 6;
@@ -153,11 +153,11 @@
     --_desc-col: 2 / -2;
   }
 
-  [data-ui='description-list'][data-columns='2'] [data-part='list'] {
+  [data-ui-description-list][data-columns='2'] [data-part-list] {
     --_cols: repeat(2, var(--_pair));
   }
 
-  [data-ui='description-list'][data-columns='3'] [data-part='list'] {
+  [data-ui-description-list][data-columns='3'] [data-part-list] {
     --_cols: repeat(3, var(--_pair));
   }
 
@@ -167,7 +167,7 @@
    * thing under it — which is what GOV.UK's summary list does at its own narrow
    * width.
    */
-  [data-ui='description-list'][data-layout='stack'] [data-part='list'] {
+  [data-ui-description-list][data-layout='stack'] [data-part-list] {
     --_pair: minmax(0, 1fr);
     --_term-floor: 0px;
     --_span-1: 1;
@@ -182,14 +182,14 @@
     --_action-row: 1;
   }
 
-  [data-ui='description-list'][data-layout='stack'] [data-part='list']:has([data-part='action']) {
+  [data-ui-description-list][data-layout='stack'] [data-part-list]:has([data-part-action]) {
     --_item-cols: minmax(0, 1fr) auto;
     --_desc-col: 1 / -1;
   }
 
   /* ── The pair ──────────────────────────────────────────────────────── */
 
-  [data-ui='description-list'] [data-part='item'] {
+  [data-ui-description-list] [data-part-item] {
     column-gap: var(--_item-col-gap);
     display: grid;
     grid-column: span var(--_span-1);
@@ -198,15 +198,15 @@
     row-gap: var(--_stack-gap);
   }
 
-  [data-ui='description-list'] [data-part='item'][data-span='2'] {
+  [data-ui-description-list] [data-part-item][data-span='2'] {
     grid-column: span var(--_span-2);
   }
 
-  [data-ui='description-list'] [data-part='item'][data-span='3'] {
+  [data-ui-description-list] [data-part-item][data-span='3'] {
     grid-column: span var(--_span-3);
   }
 
-  [data-ui='description-list'] [data-part='term'] {
+  [data-ui-description-list] [data-part-term] {
     color: var(--_term-ink);
     font-weight: var(
       --slotted-description-list-term-weight,
@@ -238,11 +238,11 @@
    * needs a layer, and the layer is still available when the explanation is
    * longer than a line.
    */
-  [data-ui='description-list'] [data-part='list']:has([data-part='hint']) {
+  [data-ui-description-list] [data-part-list]:has([data-part-hint]) {
     --_term-floor: var(--slotted-description-list-term-min, 12rem);
   }
 
-  [data-ui='description-list'] [data-part='hint'] {
+  [data-ui-description-list] [data-part-hint] {
     color: var(--_hint-ink);
     /**
      * A hint is a sentence and a term is two words, so a hint left to size its
@@ -276,20 +276,20 @@
    * value and a copy control is a block, and the grid below is for the ones
    * that have a second row to place.
    */
-  [data-ui='description-list'] [data-part='description']:not([data-clamp]) {
+  [data-ui-description-list] [data-part-description]:not([data-clamp]) {
     display: block;
   }
 
-  [data-ui='description-list'] [data-part='description']:not([data-clamp]) [data-part='value'] {
+  [data-ui-description-list] [data-part-description]:not([data-clamp]) [data-part-value] {
     display: inline;
   }
 
-  [data-ui='description-list'] [data-part='description']:not([data-clamp]) [data-part='copy'] {
+  [data-ui-description-list] [data-part-description]:not([data-clamp]) [data-part-copy] {
     margin-inline-start: var(--_pair-gap);
     vertical-align: text-bottom;
   }
 
-  [data-ui='description-list'] [data-part='description'] {
+  [data-ui-description-list] [data-part-description] {
     align-items: baseline;
     /**
      * The distance from a value to the control that reaches it does not follow
@@ -310,7 +310,7 @@
     row-gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='description-list'] [data-part='value'] {
+  [data-ui-description-list] [data-part-value] {
     grid-column: 1;
     min-inline-size: 0;
     /* An unbroken token — a hash, an ARN, a URL — breaks rather than leaving
@@ -325,16 +325,14 @@
    * family — a long value may be copied or revealed, never truncated without
    * access.
    */
-  [data-ui='description-list'] [data-part='description'][data-clamp] [data-part='value'] {
+  [data-ui-description-list] [data-part-description][data-clamp] [data-part-value] {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--slotted-description-list-clamp, 2);
     display: -webkit-box;
     overflow: hidden;
   }
 
-  [data-ui='description-list']
-    [data-part='description'][data-clamp][data-revealed]
-    [data-part='value'] {
+  [data-ui-description-list] [data-part-description][data-clamp][data-revealed] [data-part-value] {
     -webkit-line-clamp: none;
     display: block;
     overflow: visible;
@@ -363,13 +361,13 @@
    * `—` and never `-`: a hyphen is a word joiner, half the width, and it sits
    * at a different height.
    */
-  [data-ui='description-list'] [data-part='placeholder'] {
+  [data-ui-description-list] [data-part-placeholder] {
     color: var(--_placeholder-ink);
   }
 
   /* ── The controls ──────────────────────────────────────────────────── */
 
-  [data-ui='description-list'] :is([data-part='copy'], [data-part='toggle']) {
+  [data-ui-description-list] :is([data-part-copy], [data-part-toggle]) {
     appearance: none;
     background: none;
     border: 0;
@@ -382,7 +380,7 @@
         var(--slotted-control-transition-easing);
   }
 
-  [data-ui='description-list'] :is([data-part='copy'], [data-part='toggle']):focus-visible {
+  [data-ui-description-list] :is([data-part-copy], [data-part-toggle]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -393,7 +391,7 @@
    * twenty-four pixels and an equal negative margin gives the space back to the
    * line, so the row keeps its rhythm and the target keeps its size.
    */
-  [data-ui='description-list'] [data-part='copy'] {
+  [data-ui-description-list] [data-part-copy] {
     --slotted-icon-size: var(--_glyph);
     align-items: center;
     block-size: var(--slotted-target-min, 24px);
@@ -412,7 +410,7 @@
     padding: var(--_hit);
   }
 
-  [data-ui='description-list'] [data-part='copy']:enabled:not([data-complete]):hover {
+  [data-ui-description-list] [data-part-copy]:enabled:not([data-complete]):hover {
     background-color: var(
       --slotted-description-list-control-surface-hover,
       var(--slotted-tone-secondary-subtle-hover, ButtonFace)
@@ -420,7 +418,7 @@
     color: var(--_control-ink-hover);
   }
 
-  [data-ui='description-list'] [data-part='copy']:enabled:not([data-complete]):active {
+  [data-ui-description-list] [data-part-copy]:enabled:not([data-complete]):active {
     background-color: var(
       --slotted-description-list-control-surface-active,
       var(--slotted-tone-secondary-subtle-active, ButtonFace)
@@ -434,7 +432,7 @@
    * control returns to rest on its own, so nothing is left claiming a state
    * that has passed.
    */
-  [data-ui='description-list'] [data-part='copy'][data-complete] {
+  [data-ui-description-list] [data-part-copy][data-complete] {
     color: var(--_control-ink-done);
   }
 
@@ -443,11 +441,11 @@
      reaches 44 pixels, and the ground and the ring stay square. The row keeps
      its rhythm, because the halo takes no room. */
   @media (pointer: coarse) {
-    [data-ui='description-list'] [data-part='copy'] {
+    [data-ui-description-list] [data-part-copy] {
       position: relative;
     }
 
-    [data-ui='description-list'] [data-part='copy']::before {
+    [data-ui-description-list] [data-part-copy]::before {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
@@ -461,7 +459,7 @@
    * carries — the `Glyph` the binding draws after the words, turned, not
    * swapped, so the eye follows one mark rather than catching two.
    */
-  [data-ui='description-list'] [data-part='toggle'] {
+  [data-ui-description-list] [data-part-toggle] {
     --slotted-icon-size: var(--_glyph);
     align-items: center;
     color: var(--_link-ink);
@@ -473,28 +471,28 @@
     padding-inline: 0;
   }
 
-  [data-ui='description-list'] [data-part='toggle'] > [data-ui='icon'] {
+  [data-ui-description-list] [data-part-toggle] > [data-ui-icon] {
     rotate: 0deg;
     transition: rotate var(--slotted-control-transition-duration)
       var(--slotted-control-transition-easing);
   }
 
-  [data-ui='description-list'] [data-revealed] [data-part='toggle'] > [data-ui='icon'] {
+  [data-ui-description-list] [data-revealed] [data-part-toggle] > [data-ui-icon] {
     rotate: 180deg;
   }
 
-  [data-ui='description-list'] [data-part='toggle']:enabled:hover {
+  [data-ui-description-list] [data-part-toggle]:enabled:hover {
     text-decoration-line: underline;
     text-underline-offset: var(--slotted-description-list-underline-offset, 0.2em);
   }
 
-  [data-ui='description-list'] [data-part='toggle']:enabled:active {
+  [data-ui-description-list] [data-part-toggle]:enabled:active {
     color: var(--_control-ink-hover);
   }
 
   /* ── The row's own action ──────────────────────────────────────────── */
 
-  [data-ui='description-list'] [data-part='action'] {
+  [data-ui-description-list] [data-part-action] {
     align-self: start;
     grid-column: var(--_action-col);
     grid-row: var(--_action-row);
@@ -510,7 +508,7 @@
    * this variant. It is the form that belongs inside a card, where the card
    * already draws the box and a second frame would be two.
    */
-  [data-ui='description-list'][data-variant='plain'] [data-part='list'] {
+  [data-ui-description-list][data-variant='plain'] [data-part-list] {
     row-gap: var(--_row-gap);
   }
 
@@ -522,11 +520,11 @@
    * also the only form of the rule that survives a pair spanning two columns,
    * because it needs to know nothing about which row a pair is in.
    */
-  [data-ui='description-list'][data-variant='ruled'] [data-part='list'] {
+  [data-ui-description-list][data-variant='ruled'] [data-part-list] {
     row-gap: 0;
   }
 
-  [data-ui='description-list'][data-variant='ruled'] [data-part='item'] {
+  [data-ui-description-list][data-variant='ruled'] [data-part-item] {
     border-block-end: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     padding-block: var(--_pad-block);
   }
@@ -539,7 +537,7 @@
    * calls it `bordered` and Carbon draws the same rules; here the frame is the
    * family's and the surface underneath is the theme's.
    */
-  [data-ui='description-list'][data-variant='framed'] [data-part='list'] {
+  [data-ui-description-list][data-variant='framed'] [data-part-list] {
     background-color: var(--_surface);
     border: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     border-radius: var(--slotted-description-list-frame-radius, var(--slotted-radius-md, 6px));
@@ -549,32 +547,31 @@
     row-gap: 0;
   }
 
-  [data-ui='description-list'][data-variant='framed'] [data-part='item'] {
+  [data-ui-description-list][data-variant='framed'] [data-part-item] {
     border-block-start: var(--slotted-border-width-thin, 1px) solid var(--_rule);
     column-gap: 0;
   }
 
-  [data-ui='description-list'][data-variant='framed'][data-columns='1']
-    [data-part='item']:first-child,
-  [data-ui='description-list'][data-variant='framed'][data-columns='2']
-    [data-part='item']:nth-child(-n + 2),
-  [data-ui='description-list'][data-variant='framed'][data-columns='3']
-    [data-part='item']:nth-child(-n + 3) {
+  [data-ui-description-list][data-variant='framed'][data-columns='1'] [data-part-item]:first-child,
+  [data-ui-description-list][data-variant='framed'][data-columns='2']
+    [data-part-item]:nth-child(-n + 2),
+  [data-ui-description-list][data-variant='framed'][data-columns='3']
+    [data-part-item]:nth-child(-n + 3) {
     border-block-start-width: 0;
   }
 
-  [data-ui='description-list'][data-variant='framed']
-    :is([data-part='term'], [data-part='description'], [data-part='action']) {
+  [data-ui-description-list][data-variant='framed']
+    :is([data-part-term], [data-part-description], [data-part-action]) {
     padding-block: var(--_pad-block);
     padding-inline: var(--_pad-inline);
   }
 
-  [data-ui='description-list'][data-variant='framed'] [data-part='term'] {
+  [data-ui-description-list][data-variant='framed'] [data-part-term] {
     background-color: var(--_term-surface);
     border-inline-end: var(--slotted-border-width-thin, 1px) solid var(--_rule);
   }
 
-  [data-ui='description-list'][data-variant='framed'][data-layout='stack'] [data-part='term'] {
+  [data-ui-description-list][data-variant='framed'][data-layout='stack'] [data-part-term] {
     /* Stacked, the term is a bar above its value rather than a cell beside it,
        and a rule on its inline edge would point at nothing. */
     border-inline-end: 0;
@@ -601,15 +598,15 @@
    * of a four-track grid.
    */
   @container slotted-description-list (max-width: 48rem) {
-    [data-ui='description-list'][data-columns='3'] [data-part='list'] {
+    [data-ui-description-list][data-columns='3'] [data-part-list] {
       --_cols: repeat(2, var(--_pair));
       --_span-3: var(--_span-2);
     }
   }
 
   @container slotted-description-list (max-width: 34rem) {
-    [data-ui='description-list'][data-columns='2'] [data-part='list'],
-    [data-ui='description-list'][data-columns='3'] [data-part='list'] {
+    [data-ui-description-list][data-columns='2'] [data-part-list],
+    [data-ui-description-list][data-columns='3'] [data-part-list] {
       --_cols: var(--_pair);
       --_span-2: var(--_span-1);
       --_span-3: var(--_span-1);
@@ -624,7 +621,7 @@
      * twenty-six rem, and they are written twice because two container
      * conditions cannot share one rule.
      */
-    [data-ui='description-list'][data-layout='row'] [data-part='list']:has([data-part='hint']) {
+    [data-ui-description-list][data-layout='row'] [data-part-list]:has([data-part-hint]) {
       --_pair: minmax(0, 1fr);
       --_term-floor: 0px;
       --_span-1: 1;
@@ -637,20 +634,20 @@
       --_action-row: 1;
     }
 
-    [data-ui='description-list'][data-layout='row']
-      [data-part='list']:has([data-part='hint']):has([data-part='action']) {
+    [data-ui-description-list][data-layout='row']
+      [data-part-list]:has([data-part-hint]):has([data-part-action]) {
       --_item-cols: minmax(0, 1fr) auto;
     }
 
-    [data-ui='description-list'][data-variant='framed'][data-layout='row']
-      [data-part='list']:has([data-part='hint'])
-      [data-part='term'] {
+    [data-ui-description-list][data-variant='framed'][data-layout='row']
+      [data-part-list]:has([data-part-hint])
+      [data-part-term] {
       border-inline-end: 0;
     }
   }
 
   @container slotted-description-list (max-width: 26rem) {
-    [data-ui='description-list'][data-layout='row'] [data-part='list'] {
+    [data-ui-description-list][data-layout='row'] [data-part-list] {
       --_pair: minmax(0, 1fr);
       --_term-floor: 0px;
       --_span-1: 1;
@@ -663,12 +660,12 @@
       --_action-row: 1;
     }
 
-    [data-ui='description-list'][data-layout='row'] [data-part='list']:has([data-part='action']) {
+    [data-ui-description-list][data-layout='row'] [data-part-list]:has([data-part-action]) {
       --_item-cols: minmax(0, 1fr) auto;
       --_desc-col: 1 / -1;
     }
 
-    [data-ui='description-list'][data-variant='framed'][data-layout='row'] [data-part='term'] {
+    [data-ui-description-list][data-variant='framed'][data-layout='row'] [data-part-term] {
       border-inline-end: 0;
     }
   }