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

package/src/checkbox-group/checkbox-group.css

@@ -5,7 +5,7 @@
    * The group arranges the checkboxes and holds the value; every box draws
    * itself, because `checkbox` is the family beside this one rather than a part
    * of it. Nothing here selects into that family: a rule reaching
-   * `[data-ui='checkbox']` from this stylesheet would make one family's DOM part
+   * `[data-ui-checkbox]` from this stylesheet would make one family's DOM part
    * of another's contract, and moving a box inside a wrapper would then change
    * its appearance with no test to notice.
    *
@@ -14,7 +14,7 @@
    * named group, and a second one named by the same legend is the same group
    * announced twice.
    */
-  [data-ui='checkbox-group'][data-part='root'] {
+  [data-ui-checkbox-group][data-part-root] {
     --_gap: var(--slotted-control-gap-md, 8px);
 
     display: flex;
@@ -33,7 +33,7 @@
    * the same stated reason: two choices have to read as further apart than a
    * box and its own label.
    */
-  [data-ui='checkbox-group'][data-part='root']:has([data-part='description']) {
+  [data-ui-checkbox-group][data-part-root]:has([data-part-description]) {
     row-gap: var(--slotted-checkbox-group-gap, calc(var(--_gap) * 2));
   }
 
@@ -41,7 +41,7 @@
    * Horizontal wraps rather than scrolls or clips. A row of choices that runs
    * past the container is a row whose last option nobody can see.
    */
-  [data-ui='checkbox-group'][data-part='root'][data-orientation='horizontal'] {
+  [data-ui-checkbox-group][data-part-root][data-orientation='horizontal'] {
     /** Twice the control gap: two choices have to read as further apart than a
         box and its own label. */
     column-gap: calc(var(--_gap) * 2);
@@ -56,15 +56,15 @@
    * them through the binding rather than through a descendant selector.
    */
 
-  [data-ui='checkbox-group'][data-part='root'][data-size='sm'] {
+  [data-ui-checkbox-group][data-part-root][data-size='sm'] {
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='checkbox-group'][data-part='root'][data-size='md'] {
+  [data-ui-checkbox-group][data-part-root][data-size='md'] {
     --_gap: var(--slotted-control-gap-md, 8px);
   }
 
-  [data-ui='checkbox-group'][data-part='root'][data-size='lg'] {
+  [data-ui-checkbox-group][data-part-root][data-size='lg'] {
     --_gap: var(--slotted-control-gap-lg, 8px);
   }
 }

package/src/code-block/code-block.css

@@ -13,7 +13,7 @@
    * The type does not follow density; the inset and the gutter do. Code at
    * `dense` is still read one character at a time.
    */
-  [data-ui='code-block'] {
+  [data-ui-code-block] {
     --_ground: var(--slotted-code-block-surface, var(--slotted-surface-sunken, Canvas));
     --_edge: var(--slotted-code-block-border-color, var(--slotted-border-subtle, GrayText));
     --_ink: var(--slotted-code-block-color, var(--slotted-text, CanvasText));
@@ -63,7 +63,7 @@
    * page's direction while the code below keeps its own, so a title reads in
    * the reader's language and the code in its own.
    */
-  [data-ui='code-block'] > [data-part='header'] {
+  [data-ui-code-block] > [data-part-header] {
     align-items: center;
     border-block-end: var(--slotted-border-width-thin, 1px) solid var(--_edge);
     display: flex;
@@ -76,7 +76,7 @@
   }
 
   /* The file's kind, an `Icon` the binding draws from the name's extension. */
-  [data-ui='code-block'] > [data-part='header'] > [data-part='icon'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-icon] {
     --slotted-icon-size: var(--_icon);
 
     block-size: var(--_icon);
@@ -86,7 +86,7 @@
     inline-size: var(--_icon);
   }
 
-  [data-ui='code-block'] > [data-part='header'] > [data-part='title'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-title] {
     font-family: var(--slotted-code-block-font-family, var(--slotted-font-family-mono, monospace));
     min-inline-size: 0;
     overflow: hidden;
@@ -94,7 +94,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='code-block'] > [data-part='header'] > [data-part='language'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-language] {
     color: var(--_muted);
     font-size: var(--slotted-font-size-xs, 0.75rem);
     letter-spacing: 0.02em;
@@ -102,19 +102,19 @@
     text-transform: uppercase;
   }
 
-  [data-ui='code-block'] > [data-part='header'] > [data-part='title'] + [data-part='language'],
-  [data-ui='code-block'] > [data-part='header'] > [data-part='icon'] + [data-part='language'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-title] + [data-part-language],
+  [data-ui-code-block] > [data-part-header] > [data-part-icon] + [data-part-language] {
     margin-inline-start: auto;
   }
 
-  [data-ui='code-block'] > [data-part='header'] > [data-part='actions'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-actions] {
     align-items: center;
     display: flex;
     gap: var(--slotted-space-1, 0.125rem);
     margin-inline-start: auto;
   }
 
-  [data-ui='code-block'] > [data-part='header'] > [data-part='language'] + [data-part='actions'] {
+  [data-ui-code-block] > [data-part-header] > [data-part-language] + [data-part-actions] {
     margin-inline-start: var(--slotted-space-3, 0.375rem);
   }
 
@@ -123,7 +123,7 @@
    * inline end of the first line, on the ground's own colour, so the code
    * beneath them is still there when the pointer leaves.
    */
-  [data-ui='code-block'] > [data-part='actions'] {
+  [data-ui-code-block] > [data-part-actions] {
     align-items: center;
     background-color: var(--_ground);
     border-radius: var(--slotted-control-radius, 4px);
@@ -138,7 +138,7 @@
   /* ── The two controls, description-list's ────────────────────────────── */
 
   /* Each holds an `Icon`: text-wrap, and copy that turns to a check once done. */
-  [data-ui='code-block'] :is([data-part='copy'], [data-part='wrap']) {
+  [data-ui-code-block] :is([data-part-copy], [data-part-wrap]) {
     --slotted-icon-size: var(--_icon);
 
     align-items: center;
@@ -164,48 +164,45 @@
      reaches 44 pixels, and the ground and the ring stay square. The two
      stand two pixels apart, so neither reaches across the edge they share. */
   @media (pointer: coarse) {
-    [data-ui='code-block'] :is([data-part='copy'], [data-part='wrap']) {
+    [data-ui-code-block] :is([data-part-copy], [data-part-wrap]) {
       position: relative;
     }
 
-    [data-ui='code-block'] :is([data-part='copy'], [data-part='wrap'])::before {
+    [data-ui-code-block] :is([data-part-copy], [data-part-wrap])::before {
       content: '';
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       position: absolute;
     }
 
-    [data-ui='code-block'] [data-part='wrap']:has(+ [data-part='copy'])::before {
+    [data-ui-code-block] [data-part-wrap]:has(+ [data-part-copy])::before {
       inset-inline-end: 0;
     }
 
-    [data-ui='code-block'] [data-part='wrap'] + [data-part='copy']::before {
+    [data-ui-code-block] [data-part-wrap] + [data-part-copy]::before {
       inset-inline-start: 0;
     }
   }
 
-  [data-ui='code-block']
-    :is([data-part='copy'], [data-part='wrap']):enabled:not([data-complete]):hover {
+  [data-ui-code-block] :is([data-part-copy], [data-part-wrap]):enabled:not([data-complete]):hover {
     background-color: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
     color: var(--_ink);
   }
 
-  [data-ui='code-block']
-    :is([data-part='copy'], [data-part='wrap']):enabled:not([data-complete]):active {
+  [data-ui-code-block] :is([data-part-copy], [data-part-wrap]):enabled:not([data-complete]):active {
     background-color: var(--slotted-tone-secondary-subtle-active, ButtonFace);
   }
 
-  [data-ui='code-block'] [data-part='wrap'][data-pressed] {
+  [data-ui-code-block] [data-part-wrap][data-pressed] {
     background-color: var(--slotted-tone-accent-surface, Canvas);
     color: var(--slotted-tone-accent-text, CanvasText);
   }
 
   /** A copy that finished: the mark changes as well as the colour, and returns on its own. */
-  [data-ui='code-block'] [data-part='copy'][data-complete] {
+  [data-ui-code-block] [data-part-copy][data-complete] {
     color: var(--slotted-tone-success-text, CanvasText);
   }
 
-  [data-ui='code-block']
-    :is([data-part='copy'], [data-part='wrap'], [data-part='reveal']):focus-visible {
+  [data-ui-code-block] :is([data-part-copy], [data-part-wrap], [data-part-reveal]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -217,27 +214,27 @@
    * The block's radius reaches it through `inherit`, and the mask
    * scroll-area draws at an overflowing edge is what a wide line fades into.
    */
-  [data-ui='code-block'] > [data-part='body'] {
+  [data-ui-code-block] > [data-part-body] {
     border-radius: 0 0 var(--_radius) var(--_radius);
     min-inline-size: 0;
   }
 
-  [data-ui='code-block'] > [data-part='body']:first-child {
+  [data-ui-code-block] > [data-part-body]:first-child {
     border-radius: var(--_radius);
   }
 
-  [data-ui='code-block'] > [data-part='body'][data-max-lines] > [data-part='viewport'] {
+  [data-ui-code-block] > [data-part-body][data-max-lines] > [data-part-viewport] {
     max-block-size: calc(
       var(--slotted-code-block-max-lines) * var(--_line) + var(--_inset-block) * 2
     );
   }
 
-  [data-ui='code-block'] > [data-part='body'] > [data-part='viewport']:focus-visible {
+  [data-ui-code-block] > [data-part-body] > [data-part-viewport]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='code-block'] [data-part='pre'] {
+  [data-ui-code-block] [data-part-pre] {
     /**
      * Code reads left to right whatever the page does: the order of the
      * characters is what the code means. `prose` decided it for a fence.
@@ -251,13 +248,13 @@
     white-space: pre;
   }
 
-  [data-ui='code-block'][data-wrap] [data-part='pre'] {
+  [data-ui-code-block][data-wrap] [data-part-pre] {
     min-inline-size: 0;
     overflow-wrap: anywhere;
     white-space: pre-wrap;
   }
 
-  [data-ui='code-block'] [data-part='code'] {
+  [data-ui-code-block] [data-part-code] {
     display: grid;
     font: inherit;
     grid-template-columns: minmax(0, 1fr);
@@ -272,7 +269,7 @@
    * own leading whitespace — the binding measures it once into
    * `--slotted-code-block-indent`, in characters.
    */
-  [data-ui='code-block'] [data-part='line'] {
+  [data-ui-code-block] [data-part-line] {
     --_indent: calc(var(--slotted-code-block-indent, 0) * 1ch);
     box-sizing: border-box;
     display: grid;
@@ -282,21 +279,21 @@
     position: relative;
   }
 
-  [data-ui='code-block'][data-line-numbers] [data-part='line'] {
+  [data-ui-code-block][data-line-numbers] [data-part-line] {
     --_number: var(--_gutter);
     padding-inline-start: 0;
   }
 
   /** The number is in the DOM whether or not it is drawn, so turning numbers on moves no line. */
-  [data-ui='code-block']:not([data-line-numbers]) [data-part='number'] {
+  [data-ui-code-block]:not([data-line-numbers]) [data-part-number] {
     display: none;
   }
 
-  [data-ui='code-block'][data-marks] [data-part='line'] {
+  [data-ui-code-block][data-marks] [data-part-line] {
     --_marker: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='code-block'] [data-part='number'] {
+  [data-ui-code-block] [data-part-number] {
     color: var(--_muted);
     font-variant-numeric: tabular-nums;
     grid-column: 1;
@@ -305,65 +302,65 @@
     user-select: none;
   }
 
-  [data-ui='code-block'] [data-part='marker'] {
+  [data-ui-code-block] [data-part-marker] {
     grid-column: 2;
     text-align: center;
     user-select: none;
   }
 
-  [data-ui='code-block'] [data-part='line'] > [data-part='token'],
-  [data-ui='code-block'] [data-part='line'] > [data-part='text'] {
+  [data-ui-code-block] [data-part-line] > [data-part-token],
+  [data-ui-code-block] [data-part-line] > [data-part-text] {
     grid-column: 3;
   }
 
   /** The tokens flow as one inline run inside the third column. */
-  [data-ui='code-block'] [data-part='line'] > [data-part='text'] {
+  [data-ui-code-block] [data-part-line] > [data-part-text] {
     display: block;
     min-inline-size: 0;
   }
 
-  [data-ui='code-block'][data-wrap] [data-part='line'] > [data-part='text'] {
+  [data-ui-code-block][data-wrap] [data-part-line] > [data-part-text] {
     padding-inline-start: var(--_indent);
     text-indent: calc(var(--_indent) * -1);
   }
 
   /* ── Scopes ─────────────────────────────────────────────────────────── */
 
-  [data-ui='code-block'] [data-token='comment'] {
+  [data-ui-code-block] [data-token='comment'] {
     color: var(--slotted-code-comment, var(--slotted-text-muted, GrayText));
     font-style: italic;
   }
-  [data-ui='code-block'] [data-token='keyword'] {
+  [data-ui-code-block] [data-token='keyword'] {
     color: var(--slotted-code-keyword, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='string'] {
+  [data-ui-code-block] [data-token='string'] {
     color: var(--slotted-code-string, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='number'] {
+  [data-ui-code-block] [data-token='number'] {
     color: var(--slotted-code-number, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='function'] {
+  [data-ui-code-block] [data-token='function'] {
     color: var(--slotted-code-function, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='type'] {
+  [data-ui-code-block] [data-token='type'] {
     color: var(--slotted-code-type, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='variable'] {
+  [data-ui-code-block] [data-token='variable'] {
     color: var(--slotted-code-variable, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='property'] {
+  [data-ui-code-block] [data-token='property'] {
     color: var(--slotted-code-property, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='punctuation'] {
+  [data-ui-code-block] [data-token='punctuation'] {
     color: var(--slotted-code-punctuation, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='tag'] {
+  [data-ui-code-block] [data-token='tag'] {
     color: var(--slotted-code-tag, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='attribute'] {
+  [data-ui-code-block] [data-token='attribute'] {
     color: var(--slotted-code-attribute, var(--slotted-text, CanvasText));
   }
-  [data-ui='code-block'] [data-token='constant'] {
+  [data-ui-code-block] [data-token='constant'] {
     color: var(--slotted-code-constant, var(--slotted-text, CanvasText));
   }
 
@@ -374,13 +371,13 @@
    * diff pair. The sign is text in a gutter nobody can select, so it never
    * reaches a clipboard.
    */
-  [data-ui='code-block'] [data-part='line'][data-mark] {
+  [data-ui-code-block] [data-part-line][data-mark] {
     --_tone: var(--slotted-tone-accent-text, CanvasText);
     background-color: color-mix(in srgb, var(--_tone) calc(var(--_tint) * 100%), transparent);
   }
 
-  [data-ui='code-block']
-    [data-part='line']:is(
+  [data-ui-code-block]
+    [data-part-line]:is(
       [data-mark='highlight'],
       [data-mark='error'],
       [data-mark='warning']
@@ -393,33 +390,33 @@
     position: absolute;
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='add'] {
+  [data-ui-code-block] [data-part-line][data-mark='add'] {
     --_tone: var(--slotted-tone-success-text, CanvasText);
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='remove'] {
+  [data-ui-code-block] [data-part-line][data-mark='remove'] {
     --_tone: var(--slotted-tone-danger-text, CanvasText);
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='error'] {
+  [data-ui-code-block] [data-part-line][data-mark='error'] {
     --_tone: var(--slotted-tone-danger-text, CanvasText);
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='warning'] {
+  [data-ui-code-block] [data-part-line][data-mark='warning'] {
     --_tone: var(--slotted-tone-warning-text, CanvasText);
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='add'] > [data-part='marker']::before {
+  [data-ui-code-block] [data-part-line][data-mark='add'] > [data-part-marker]::before {
     color: var(--_tone);
     content: '+';
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='remove'] > [data-part='marker']::before {
+  [data-ui-code-block] [data-part-line][data-mark='remove'] > [data-part-marker]::before {
     color: var(--_tone);
     content: '−';
   }
 
-  [data-ui='code-block'] [data-part='line'][data-mark='remove'] > [data-part='text'] {
+  [data-ui-code-block] [data-part-line][data-mark='remove'] > [data-part-text] {
     opacity: 0.72;
   }
 
@@ -430,7 +427,7 @@
    * reduced motion with the transition; the dim stays, because it is the
    * information.
    */
-  [data-ui='code-block'] [data-part='line'][data-dim] {
+  [data-ui-code-block] [data-part-line][data-dim] {
     color: var(--_muted);
     filter: blur(1px);
     transition:
@@ -438,19 +435,18 @@
       color var(--slotted-duration-medium) var(--slotted-easing-standard);
   }
 
-  [data-ui='code-block'] [data-part='line'][data-dim] [data-part='token'] {
+  [data-ui-code-block] [data-part-line][data-dim] [data-part-token] {
     color: inherit;
   }
 
-  [data-ui='code-block']:not([data-loading]):is(:hover, :focus-within)
-    [data-part='line'][data-dim] {
+  [data-ui-code-block]:not([data-loading]):is(:hover, :focus-within) [data-part-line][data-dim] {
     color: var(--_ink);
     filter: none;
   }
 
-  [data-ui='code-block']:not([data-loading]):is(:hover, :focus-within)
-    [data-part='line'][data-dim]
-    [data-part='token'] {
+  [data-ui-code-block]:not([data-loading]):is(:hover, :focus-within)
+    [data-part-line][data-dim]
+    [data-part-token] {
     color: revert-layer;
   }
 
@@ -461,9 +457,9 @@
    * hidden lines stay in the DOM and in a selection. Revealed, the limit
    * goes and the control reads "show less".
    */
-  [data-ui='code-block'][data-collapse]:not([data-revealed])
-    > [data-part='body']
-    > [data-part='viewport'] {
+  [data-ui-code-block][data-collapse]:not([data-revealed])
+    > [data-part-body]
+    > [data-part-viewport] {
     --_visible: calc(var(--slotted-code-block-collapse) * var(--_line) + var(--_inset-block));
     mask-image: linear-gradient(
       to bottom,
@@ -474,7 +470,7 @@
     overflow-y: hidden;
   }
 
-  [data-ui='code-block'] > [data-part='reveal'] {
+  [data-ui-code-block] > [data-part-reveal] {
     appearance: none;
     background: none;
     border: 0;
@@ -492,63 +488,63 @@
   }
 
   /** The control is flush with the block's edge, so its ring is drawn inside it and takes the block's corners. */
-  [data-ui='code-block'] > [data-part='reveal']:focus-visible {
+  [data-ui-code-block] > [data-part-reveal]:focus-visible {
     border-end-end-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
 
-  [data-ui='code-block'] > [data-part='reveal']:enabled:hover {
+  [data-ui-code-block] > [data-part-reveal]:enabled:hover {
     background-color: var(--slotted-tone-accent-subtle-hover, ButtonFace);
   }
 
-  [data-ui='code-block'] > [data-part='reveal']:enabled:active {
+  [data-ui-code-block] > [data-part-reveal]:enabled:active {
     background-color: var(--slotted-tone-accent-subtle-active, ButtonFace);
   }
 
   /* ── Loading, empty ─────────────────────────────────────────────────── */
 
-  [data-ui='code-block'][data-loading] [data-part='code'] {
+  [data-ui-code-block][data-loading] [data-part-code] {
     gap: var(--slotted-space-3, 0.375rem);
     padding-inline: var(--_inset-inline);
   }
 
-  [data-ui='code-block'][data-loading] [data-part='code'] > [data-ui='skeleton'] {
+  [data-ui-code-block][data-loading] [data-part-code] > [data-ui-skeleton] {
     block-size: var(--_font-size);
   }
 
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='code-block'] [data-part='line'][data-dim] {
+    [data-ui-code-block] [data-part-line][data-dim] {
       filter: none;
     }
   }
 
   @media (forced-colors: active) {
     /* The system owns the palette: a mark keeps its bar and its sign and loses its tint; the dim goes. */
-    [data-ui='code-block'] [data-part='line'][data-mark] {
+    [data-ui-code-block] [data-part-line][data-mark] {
       background-color: transparent;
     }
 
-    [data-ui='code-block'] [data-part='line'][data-dim] {
+    [data-ui-code-block] [data-part-line][data-dim] {
       color: inherit;
       filter: none;
     }
   }
 
   @media print {
-    [data-ui='code-block'] [data-part='pre'] {
+    [data-ui-code-block] [data-part-pre] {
       min-inline-size: 0;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
     }
 
-    [data-ui='code-block'][data-collapse] > [data-part='body'] > [data-part='viewport'] {
+    [data-ui-code-block][data-collapse] > [data-part-body] > [data-part-viewport] {
       mask-image: none;
       max-block-size: none;
     }
 
-    [data-ui='code-block'] > [data-part='reveal'],
-    [data-ui='code-block'] [data-part='wrap'] {
+    [data-ui-code-block] > [data-part-reveal],
+    [data-ui-code-block] [data-part-wrap] {
       display: none;
     }
   }