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

package/src/split-button/split-button.css

@@ -39,7 +39,7 @@
    *   itself;
    * - only focus is raised.
    */
-  [data-ui='split-button'][data-part='root'] {
+  [data-ui-split-button][data-part-root] {
     --_radius: var(--slotted-split-button-radius, var(--slotted-control-radius, 4px));
     --_overlap: calc(-1 * var(--slotted-control-border-width, 1px));
 
@@ -68,19 +68,19 @@
    * square from the control height and stays so, because a wide chevron is a
    * second button nobody asked for.
    */
-  [data-ui='split-button'][data-part='root'][data-full-width] {
+  [data-ui-split-button][data-part-root][data-full-width] {
     display: flex;
     inline-size: 100%;
   }
 
-  [data-ui='split-button'][data-part='root'][data-full-width] > [data-part='primary'] {
+  [data-ui-split-button][data-part-root][data-full-width] > [data-part-primary] {
     flex: 1 1 0;
     min-inline-size: 0;
   }
 
   /* ── The shape ────────────────────────────────────────────────────────── */
 
-  [data-ui='split-button'][data-part='root'] > [data-part='primary'] {
+  [data-ui-split-button][data-part-root] > [data-part-primary] {
     border-end-end-radius: 0;
     border-end-start-radius: var(--_radius);
     border-start-end-radius: 0;
@@ -90,7 +90,7 @@
     min-inline-size: 0;
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root] > [data-part-menu-trigger] {
     border-end-end-radius: var(--_radius);
     border-end-start-radius: 0;
     border-start-end-radius: var(--_radius);
@@ -113,19 +113,15 @@
    * `button-group` records: the rule has to outrank every border rule `button`
    * writes for the same control whatever order the two sheets load in.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='outline'][data-pressed],
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='outline'][data-disabled],
-  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='outline']:disabled {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline'][data-pressed],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline'][data-disabled],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='outline']:disabled {
     border-color: var(--slotted-control-border-color, ButtonBorder);
   }
 
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='ghost'][data-pressed],
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='ghost'][data-disabled],
-  [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-variant='ghost']:disabled {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost'][data-pressed],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost'][data-disabled],
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-variant='ghost']:disabled {
     border-color: transparent;
   }
 
@@ -136,8 +132,7 @@
    * narrowed, because a narrower border box would move its label by half a
    * pixel — and the trigger's leading edge is the one seen.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-part='primary'][data-variant] {
+  [data-ui-split-button][data-part-root] > [data-ui-button][data-part-primary][data-variant] {
     border-inline-end-color: transparent;
   }
 
@@ -153,28 +148,32 @@
    * one. It is painted on the trigger's leading edge, the one edge the rule
    * above leaves in the column.
    */
-  [data-ui='split-button'][data-part='root'] > [data-tone='accent'] {
+  [data-ui-split-button][data-part-root] > [data-tone='accent'] {
     --_seam: var(--slotted-tone-accent-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='secondary'] {
+  [data-ui-split-button][data-part-root] > [data-tone='secondary'] {
     --_seam: var(--slotted-tone-secondary-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='success'] {
+  [data-ui-split-button][data-part-root] > [data-tone='success'] {
     --_seam: var(--slotted-tone-success-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='warning'] {
+  [data-ui-split-button][data-part-root] > [data-tone='info'] {
+    --_seam: var(--slotted-tone-info-solid-active);
+  }
+
+  [data-ui-split-button][data-part-root] > [data-tone='warning'] {
     --_seam: var(--slotted-tone-warning-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root'] > [data-tone='danger'] {
+  [data-ui-split-button][data-part-root] > [data-tone='danger'] {
     --_seam: var(--slotted-tone-danger-solid-active);
   }
 
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger] {
     border-inline-start-color: var(--_seam, ButtonBorder);
   }
 
@@ -184,10 +183,10 @@
    * and the seam takes that border so the bar reads as one unavailable
    * control rather than as a grey one with a coloured line through it.
    */
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger']:disabled,
-  [data-ui='split-button'][data-part='root']
-    > [data-ui='button'][data-variant='solid'][data-part='menu-trigger'][data-disabled] {
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger]:disabled,
+  [data-ui-split-button][data-part-root]
+    > [data-ui-button][data-variant='solid'][data-part-menu-trigger][data-disabled] {
     border-inline-start-color: var(--slotted-disabled-border, ButtonBorder);
   }
 
@@ -197,7 +196,7 @@
    * follows it in the DOM. Hover and press repaint a fill and never an edge,
    * so there is nothing to lift for them — `button-group`'s reading.
    */
-  [data-ui='split-button'][data-part='root'] > *:focus-visible {
+  [data-ui-split-button][data-part-root] > *:focus-visible {
     z-index: 1;
   }
 
@@ -235,7 +234,7 @@
    * send. `pointer-events: none` is also what takes hover away without a
    * state the stylesheet would have to hold back.
    */
-  [data-ui='split-button'][data-part='root'][data-loading] > [data-part='menu-trigger'] {
+  [data-ui-split-button][data-part-root][data-loading] > [data-part-menu-trigger] {
     pointer-events: none;
   }
 
@@ -246,7 +245,7 @@
    * puts it back — `button-group`'s rule for the same case.
    */
   @media (forced-colors: active) {
-    [data-ui='split-button'][data-part='root'] > [data-ui='button'][data-pressed] {
+    [data-ui-split-button][data-part-root] > [data-ui-button][data-pressed] {
       border-color: Highlight;
     }
   }

package/src/split-button/split-button.tokens.json

@@ -6,6 +6,7 @@
   "--slotted-split-button-radius",
   "--slotted-tone-accent-solid-active",
   "--slotted-tone-danger-solid-active",
+  "--slotted-tone-info-solid-active",
   "--slotted-tone-secondary-solid-active",
   "--slotted-tone-success-solid-active",
   "--slotted-tone-warning-solid-active"

package/src/splitter/splitter.css

@@ -15,7 +15,7 @@
    *
    * `touch-action: none` so a drag is not read as a scroll on the way past.
    */
-  [data-ui='splitter'] {
+  [data-ui-splitter] {
     /**
      * The track is what the pointer sees and `--slotted-target-min` is what it
      * gets: `::before` below is a transparent box centred on the track, which
@@ -111,9 +111,9 @@
    * `data-dragging` and rest as the same picture. Closing the gap hands those
    * pixels to the lines, and the pair roughly doubles instead.
    */
-  [data-ui='splitter']:not([data-disabled]):hover,
-  [data-ui='splitter']:not([data-disabled]):focus-visible,
-  [data-ui='splitter'][data-dragging] {
+  [data-ui-splitter]:not([data-disabled]):hover,
+  [data-ui-splitter]:not([data-disabled]):focus-visible,
+  [data-ui-splitter][data-dragging] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
@@ -124,14 +124,14 @@
    * other. A container that packs its children instead of stretching them
    * would otherwise size the bar from its content.
    */
-  [data-ui='splitter'][data-orientation='vertical'] {
+  [data-ui-splitter][data-orientation='vertical'] {
     flex-direction: column;
     inline-size: var(--_track);
     align-self: stretch;
     cursor: col-resize;
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] {
+  [data-ui-splitter][data-orientation='horizontal'] {
     flex-direction: row;
     block-size: var(--_track);
     justify-self: stretch;
@@ -142,18 +142,18 @@
    * The reach. Transparent, centred on the track, and the reason a sixteen-pixel
    * picture is a twenty-four-pixel target.
    */
-  [data-ui='splitter']::before {
+  [data-ui-splitter]::before {
     content: '';
     position: absolute;
     --_overhang: calc((var(--_reach) - var(--_track)) / -2);
   }
 
-  [data-ui='splitter'][data-orientation='vertical']::before {
+  [data-ui-splitter][data-orientation='vertical']::before {
     inset-block: 0;
     inset-inline: var(--_overhang);
   }
 
-  [data-ui='splitter'][data-orientation='horizontal']::before {
+  [data-ui-splitter][data-orientation='horizontal']::before {
     inset-inline: 0;
     inset-block: var(--_overhang);
   }
@@ -181,7 +181,7 @@
    * A proportion leaves slack at every track length. That slack is what the
    * hand claims.
    */
-  [data-ui='splitter'] > [data-part='line'] {
+  [data-ui-splitter] > [data-part-line] {
     flex: 0 1 min(var(--_line-length), 20%);
     min-block-size: 0;
     min-inline-size: 0;
@@ -193,28 +193,28 @@
         var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line'] {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line] {
     inline-size: var(--_line);
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line'] {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line] {
     block-size: var(--_line);
   }
 
   /* Solid at the grip, gone at the far end. Four rules, one per direction. */
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:first-child {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line]:first-child {
     background: linear-gradient(to bottom, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='line']:last-child {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-line]:last-child {
     background: linear-gradient(to top, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:first-child {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line]:first-child {
     background: linear-gradient(to right, transparent, var(--_rest));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='line']:last-child {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-line]:last-child {
     background: linear-gradient(to left, transparent, var(--_rest));
   }
 
@@ -227,9 +227,9 @@
    * Hover is held back for `data-disabled`, which is the shared rule from
    * `packages/styles/src/states.test.mjs`.
    */
-  [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
-  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='line'],
-  [data-ui='splitter'][data-dragging] > [data-part='line'] {
+  [data-ui-splitter]:not([data-disabled]):hover > [data-part-line],
+  [data-ui-splitter]:not([data-disabled]):focus-visible > [data-part-line],
+  [data-ui-splitter][data-dragging] > [data-part-line] {
     flex-basis: 100%;
     background: var(--_active);
   }
@@ -245,7 +245,7 @@
    * pixels, and the second saying cost the first its shape.
    */
 
-  [data-ui='splitter']:focus-visible {
+  [data-ui-splitter]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-offset, 2px));
   }
@@ -259,7 +259,7 @@
    * are one mark and have to move together, and `currentColor` is the one place
    * that says so.
    */
-  [data-ui='splitter'] > [data-part='grip'] {
+  [data-ui-splitter] > [data-part-grip] {
     flex: none;
     color: var(--_rest);
     background-image: radial-gradient(circle at center, currentColor 40%, transparent 42%);
@@ -269,19 +269,19 @@
       var(--slotted-control-transition-easing, var(--slotted-easing-standard));
   }
 
-  [data-ui='splitter'][data-orientation='vertical'] > [data-part='grip'] {
+  [data-ui-splitter][data-orientation='vertical'] > [data-part-grip] {
     inline-size: calc(2 * var(--_dot));
     block-size: calc(3 * var(--_dot));
   }
 
-  [data-ui='splitter'][data-orientation='horizontal'] > [data-part='grip'] {
+  [data-ui-splitter][data-orientation='horizontal'] > [data-part-grip] {
     inline-size: calc(3 * var(--_dot));
     block-size: calc(2 * var(--_dot));
   }
 
-  [data-ui='splitter']:not([data-disabled]):hover > [data-part='grip'],
-  [data-ui='splitter']:not([data-disabled]):focus-visible > [data-part='grip'],
-  [data-ui='splitter'][data-dragging] > [data-part='grip'] {
+  [data-ui-splitter]:not([data-disabled]):hover > [data-part-grip],
+  [data-ui-splitter]:not([data-disabled]):focus-visible > [data-part-grip],
+  [data-ui-splitter][data-dragging] > [data-part-grip] {
     color: var(--_active);
   }
 
@@ -290,7 +290,7 @@
    * separator can still read its value — so this changes the picture and the
    * cursor and nothing about the focus.
    */
-  [data-ui='splitter'][data-disabled] {
+  [data-ui-splitter][data-disabled] {
     cursor: default;
     --_rest: var(--slotted-splitter-disabled-line-color, var(--slotted-disabled-border, GrayText));
   }
@@ -301,23 +301,23 @@
    * grip's gradient is replaced for the same reason.
    */
   @media (forced-colors: active) {
-    [data-ui='splitter'] > [data-part='line'] {
+    [data-ui-splitter] > [data-part-line] {
       background: ButtonBorder;
       forced-color-adjust: none;
     }
 
-    [data-ui='splitter']:not([data-disabled]):hover > [data-part='line'],
-    [data-ui='splitter'][data-dragging] > [data-part='line'] {
+    [data-ui-splitter]:not([data-disabled]):hover > [data-part-line],
+    [data-ui-splitter][data-dragging] > [data-part-line] {
       background: ButtonText;
     }
 
-    [data-ui='splitter'] > [data-part='grip'] {
+    [data-ui-splitter] > [data-part-grip] {
       background-image: none;
       background-color: ButtonBorder;
     }
 
-    [data-ui='splitter'][data-disabled] > [data-part='line'],
-    [data-ui='splitter'][data-disabled] > [data-part='grip'] {
+    [data-ui-splitter][data-disabled] > [data-part-line],
+    [data-ui-splitter][data-disabled] > [data-part-grip] {
       background: GrayText;
     }
   }
@@ -328,8 +328,8 @@
    * without travelling.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='splitter'] > [data-part='line'],
-    [data-ui='splitter'] > [data-part='grip'] {
+    [data-ui-splitter] > [data-part-line],
+    [data-ui-splitter] > [data-part-grip] {
       transition-duration: var(--slotted-duration-instant);
     }
   }

package/src/stack/stack.css

@@ -10,7 +10,7 @@
    * base rule, so a nested layout can never inherit the separation of the one
    * above it.
    */
-  [data-ui='stack'] {
+  [data-ui-stack] {
     --_gap: var(--slotted-space-6, 1rem);
 
     display: flex;
@@ -25,55 +25,55 @@
   }
 
   /* Separation is a step on the scale, never a length the consumer states. */
-  [data-ui='stack'][data-gap='0'] {
+  [data-ui-stack][data-gap='0'] {
     --_gap: 0;
   }
 
-  [data-ui='stack'][data-gap='1'] {
+  [data-ui-stack][data-gap='1'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='stack'][data-gap='2'] {
+  [data-ui-stack][data-gap='2'] {
     --_gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='stack'][data-gap='3'] {
+  [data-ui-stack][data-gap='3'] {
     --_gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='stack'][data-gap='4'] {
+  [data-ui-stack][data-gap='4'] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='stack'][data-gap='5'] {
+  [data-ui-stack][data-gap='5'] {
     --_gap: var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='stack'][data-gap='6'] {
+  [data-ui-stack][data-gap='6'] {
     --_gap: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='stack'][data-gap='7'] {
+  [data-ui-stack][data-gap='7'] {
     --_gap: var(--slotted-space-7, 1.25rem);
   }
 
-  [data-ui='stack'][data-gap='8'] {
+  [data-ui-stack][data-gap='8'] {
     --_gap: var(--slotted-space-8, 1.5rem);
   }
 
-  [data-ui='stack'][data-gap='9'] {
+  [data-ui-stack][data-gap='9'] {
     --_gap: var(--slotted-space-9, 2rem);
   }
 
-  [data-ui='stack'][data-gap='10'] {
+  [data-ui-stack][data-gap='10'] {
     --_gap: var(--slotted-space-10, 2.5rem);
   }
 
-  [data-ui='stack'][data-gap='11'] {
+  [data-ui-stack][data-gap='11'] {
     --_gap: var(--slotted-space-11, 3rem);
   }
 
-  [data-ui='stack'][data-gap='12'] {
+  [data-ui-stack][data-gap='12'] {
     --_gap: var(--slotted-space-12, 4rem);
   }
 
@@ -82,19 +82,19 @@
    * axis. The keywords are the logical ones, so a right-to-left document is the
    * same component mirrored rather than a second stylesheet.
    */
-  [data-ui='stack'][data-align='start'] {
+  [data-ui-stack][data-align='start'] {
     align-items: start;
   }
 
-  [data-ui='stack'][data-align='center'] {
+  [data-ui-stack][data-align='center'] {
     align-items: center;
   }
 
-  [data-ui='stack'][data-align='end'] {
+  [data-ui-stack][data-align='end'] {
     align-items: end;
   }
 
-  [data-ui='stack'][data-align='stretch'] {
+  [data-ui-stack][data-align='stretch'] {
     align-items: stretch;
   }
 
@@ -102,27 +102,27 @@
    * `justify` positions children along the flow, which for a stack is the block
    * axis. It moves nothing until the stack is given a block size to distribute.
    */
-  [data-ui='stack'][data-justify='start'] {
+  [data-ui-stack][data-justify='start'] {
     justify-content: start;
   }
 
-  [data-ui='stack'][data-justify='center'] {
+  [data-ui-stack][data-justify='center'] {
     justify-content: center;
   }
 
-  [data-ui='stack'][data-justify='end'] {
+  [data-ui-stack][data-justify='end'] {
     justify-content: end;
   }
 
-  [data-ui='stack'][data-justify='between'] {
+  [data-ui-stack][data-justify='between'] {
     justify-content: space-between;
   }
 
-  [data-ui='stack'][data-justify='around'] {
+  [data-ui-stack][data-justify='around'] {
     justify-content: space-around;
   }
 
-  [data-ui='stack'][data-justify='evenly'] {
+  [data-ui-stack][data-justify='evenly'] {
     justify-content: space-evenly;
   }
 }