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

package/src/button/button.css

@@ -20,7 +20,7 @@
    * outline. The rebuild that preceded this one thickened the border on a
    * pressed toggle, which moved every control beside it by two pixels.
    */
-  [data-ui='button'] {
+  [data-ui-button] {
     --_solid: var(--slotted-tone-accent-solid);
     --_solid-hover: var(--slotted-tone-accent-solid-hover);
     --_solid-active: var(--slotted-tone-accent-solid-active);
@@ -135,7 +135,7 @@
 
   /* ── Tone: which of the five semantic colours the control speaks in ───── */
 
-  [data-ui='button'][data-tone='secondary'] {
+  [data-ui-button][data-tone='secondary'] {
     --_solid: var(--slotted-tone-secondary-solid);
     --_solid-hover: var(--slotted-tone-secondary-solid-hover);
     --_solid-active: var(--slotted-tone-secondary-solid-active);
@@ -158,7 +158,20 @@
     --_edge: var(--_solid-active);
   }
 
-  [data-ui='button'][data-tone='success'] {
+  /**
+   * Ink: the theme's `neutral` tone fills with the inverse surface and labels
+   * with the inverse text. A product that keeps the accent for data draws its
+   * primary action in it.
+   */
+  [data-ui-button][data-tone='neutral'] {
+    --_solid: var(--slotted-tone-neutral-solid);
+    --_solid-hover: var(--slotted-tone-neutral-solid-hover);
+    --_solid-active: var(--slotted-tone-neutral-solid-active);
+    --_on-solid: var(--slotted-tone-neutral-on-solid);
+    --_text: var(--slotted-tone-neutral-text);
+  }
+
+  [data-ui-button][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_solid-hover: var(--slotted-tone-success-solid-hover);
     --_solid-active: var(--slotted-tone-success-solid-active);
@@ -166,7 +179,15 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='button'][data-tone='warning'] {
+  [data-ui-button][data-tone='info'] {
+    --_solid: var(--slotted-tone-info-solid);
+    --_solid-hover: var(--slotted-tone-info-solid-hover);
+    --_solid-active: var(--slotted-tone-info-solid-active);
+    --_on-solid: var(--slotted-tone-info-on-solid);
+    --_text: var(--slotted-tone-info-text);
+  }
+
+  [data-ui-button][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_solid-hover: var(--slotted-tone-warning-solid-hover);
     --_solid-active: var(--slotted-tone-warning-solid-active);
@@ -174,7 +195,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='button'][data-tone='danger'] {
+  [data-ui-button][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_solid-hover: var(--slotted-tone-danger-solid-hover);
     --_solid-active: var(--slotted-tone-danger-solid-active);
@@ -184,7 +205,7 @@
 
   /* ── Size: the control scale, one step of it per member instance ──────── */
 
-  [data-ui='button'][data-size='sm'] {
+  [data-ui-button][data-size='sm'] {
     --_height: var(--slotted-control-height-sm, 30px);
     --_padding-inline: var(--slotted-control-padding-inline-sm, 10px);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
@@ -192,7 +213,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='button'][data-size='lg'] {
+  [data-ui-button][data-size='lg'] {
     --_height: var(--slotted-control-height-lg, 38px);
     --_padding-inline: var(--slotted-control-padding-inline-lg, 16px);
     --_font-size: var(--slotted-control-font-size-lg, 14px);
@@ -234,7 +255,7 @@
    * sheet carried the shadow on the base rule for one release and every
    * member inherited it, which is the defect this split exists to close.
    */
-  [data-ui='button'][data-variant='solid'] {
+  [data-ui-button][data-variant='solid'] {
     background: var(--_solid, ButtonFace);
     border-color: var(--_edge, ButtonBorder);
     box-shadow: var(--slotted-control-shadow, none);
@@ -250,14 +271,14 @@
    * button the darkest line on the form, and the foundation now keeps that
    * step for the line between two surfaces.
    */
-  [data-ui='button'][data-variant='outline'] {
+  [data-ui-button][data-variant='outline'] {
     background: transparent;
     border-color: var(--slotted-control-border-color, ButtonBorder);
     box-shadow: var(--slotted-control-shadow, none);
     color: var(--_text, ButtonText);
   }
 
-  [data-ui='button'][data-variant='ghost'] {
+  [data-ui-button][data-variant='ghost'] {
     background: transparent;
     border-color: transparent;
     color: var(--_text, ButtonText);
@@ -269,9 +290,9 @@
    * rule: its solid step is the page's own colour, so it takes the band the way
    * a bare control does.
    */
-  [data-ui='button'][data-variant='outline'],
-  [data-ui='button'][data-variant='ghost'],
-  [data-ui='button'][data-variant='solid'][data-tone='secondary'] {
+  [data-ui-button][data-variant='outline'],
+  [data-ui-button][data-variant='ghost'],
+  [data-ui-button][data-variant='solid'][data-tone='secondary'] {
     --_sweep-strength: 0.18;
   }
 
@@ -293,7 +314,7 @@
    * It sits above hover and below loading and disabled, which is the order
    * `STATE_PRECEDENCE` sets.
    */
-  [data-ui='button'][data-pressed]:not(:disabled):not([data-disabled]) {
+  [data-ui-button][data-pressed]:not(:disabled):not([data-disabled]) {
     background: var(--slotted-tone-accent-subtle-active, Highlight);
     border-color: var(--slotted-tone-accent-border, Highlight);
     /* A ghost toggle that is on has taken a fill and an edge, so it is a framed
@@ -327,13 +348,13 @@
    * and nothing moves.
    */
 
-  [data-ui='button'][data-variant='solid']:hover:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='solid']:hover:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]) {
     background: var(--_solid-hover, Highlight);
   }
 
-  [data-ui='button'][data-variant='solid']:active:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='solid']:active:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]) {
     background: var(--_solid-active, Highlight);
@@ -342,19 +363,19 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='button'][data-variant='outline']:hover:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='outline']:hover:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]),
-  [data-ui='button'][data-variant='ghost']:hover:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='ghost']:hover:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]) {
     background: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
   }
 
-  [data-ui='button'][data-variant='outline']:active:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='outline']:active:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]),
-  [data-ui='button'][data-variant='ghost']:active:not(:disabled):not([data-disabled]):not(
+  [data-ui-button][data-variant='ghost']:active:not(:disabled):not([data-disabled]):not(
       [data-loading]
     ):not([data-pressed]) {
     background: var(--slotted-tone-secondary-subtle-active, ButtonFace);
@@ -366,18 +387,18 @@
    * ground's own hover step and never on the neutral one a toggle that is off
    * hovers with — the two states share no surface in any of theirs.
    */
-  [data-ui='button'][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]) {
+  [data-ui-button][data-pressed]:hover:not(:disabled):not([data-disabled]):not([data-loading]) {
     background: var(--slotted-tone-accent-subtle-hover, Highlight);
   }
 
-  [data-ui='button'][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]) {
+  [data-ui-button][data-pressed]:active:not(:disabled):not([data-disabled]):not([data-loading]) {
     background: var(--slotted-tone-accent-subtle-active, Highlight);
     transition-duration: var(--slotted-duration-instant);
   }
 
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
-  [data-ui='button']:focus-visible {
+  [data-ui-button]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -395,8 +416,8 @@
    * is always there.
    */
 
-  [data-ui='button']:disabled,
-  [data-ui='button'][data-disabled] {
+  [data-ui-button]:disabled,
+  [data-ui-button][data-disabled] {
     /* Nothing a person cannot reach is lifted off the page — the rule
        `text-field` states for the same shadow. */
     box-shadow: none;
@@ -404,8 +425,8 @@
     cursor: not-allowed;
   }
 
-  [data-ui='button'][data-variant='solid']:disabled,
-  [data-ui='button'][data-variant='solid'][data-disabled] {
+  [data-ui-button][data-variant='solid']:disabled,
+  [data-ui-button][data-variant='solid'][data-disabled] {
     background: var(--slotted-disabled-background, ButtonFace);
     /**
      * The disabled border rather than the disabled surface, because in the
@@ -415,8 +436,8 @@
     border-color: var(--slotted-disabled-border, ButtonBorder);
   }
 
-  [data-ui='button'][data-variant='outline']:disabled,
-  [data-ui='button'][data-variant='outline'][data-disabled] {
+  [data-ui-button][data-variant='outline']:disabled,
+  [data-ui-button][data-variant='outline'][data-disabled] {
     background: transparent;
     border-color: var(--slotted-disabled-border, GrayText);
   }
@@ -427,8 +448,8 @@
    * is `aria-pressed`, which the platform announces whether or not the control
    * can be operated.
    */
-  [data-ui='button'][data-pressed]:disabled,
-  [data-ui='button'][data-pressed][data-disabled] {
+  [data-ui-button][data-pressed]:disabled,
+  [data-ui-button][data-pressed][data-disabled] {
     background: var(--slotted-disabled-background, ButtonFace);
     border-color: var(--slotted-disabled-border, GrayText);
     color: var(--slotted-disabled-foreground, GrayText);
@@ -456,18 +477,18 @@
    * a natively disabled control keeps the disabled tokens above, and a ghost
    * stays flat and takes only the text.
    */
-  [data-ui='button'][data-disabled]:not(:disabled) {
+  [data-ui-button][data-disabled]:not(:disabled) {
     color: var(--slotted-text-muted, GrayText);
   }
 
-  [data-ui='button'][data-variant='solid'][data-disabled]:not(:disabled),
-  [data-ui='button'][data-pressed][data-disabled]:not(:disabled) {
+  [data-ui-button][data-variant='solid'][data-disabled]:not(:disabled),
+  [data-ui-button][data-pressed][data-disabled]:not(:disabled) {
     background: var(--slotted-tone-secondary-subtle-hover, ButtonFace);
     border-color: var(--slotted-border-subtle, GrayText);
     color: var(--slotted-text-muted, GrayText);
   }
 
-  [data-ui='button'][data-variant='outline'][data-disabled]:not(:disabled) {
+  [data-ui-button][data-variant='outline'][data-disabled]:not(:disabled) {
     border-color: var(--slotted-border-subtle, GrayText);
   }
 
@@ -492,11 +513,11 @@
    * supplies survives the wait and combines with the indicator's own.
    */
 
-  [data-ui='button'][data-loading] {
+  [data-ui-button][data-loading] {
     cursor: progress;
   }
 
-  [data-ui='button'][data-loading]:has(> [data-part='indicator']) > :not([data-part='indicator']) {
+  [data-ui-button][data-loading]:has(> [data-part-indicator]) > :not([data-part-indicator]) {
     opacity: 0;
   }
 
@@ -505,14 +526,35 @@
    * that waits. This family only says how big it is — the glyph box of its
    * own step — and where it sits.
    */
-  [data-ui='button'] [data-part='indicator'] {
+  [data-ui-button] [data-part-indicator] {
     --slotted-spinner-size: var(--_icon-size);
 
     flex: none;
   }
 
+  /**
+   * The ring that stands in for a glyph takes the glyph's box. The glyph stays
+   * in the DOM, so the slot keeps its width, and is not drawn: the slot hides
+   * what it holds and the ring alone shows again. `IconButton` drew both side
+   * by side in a square of one glyph.
+   */
+  [data-ui-button] [data-part-start]:has(> [data-part-indicator]),
+  [data-ui-button] [data-part-end]:has(> [data-part-indicator]),
+  [data-ui-button] [data-part-icon]:has(> [data-part-indicator]) {
+    visibility: hidden;
+  }
+
+  [data-ui-button] [data-part-start] > [data-part-indicator],
+  [data-ui-button] [data-part-end] > [data-part-indicator],
+  [data-ui-button] [data-part-icon] > [data-part-indicator] {
+    inset: 0;
+    margin: auto;
+    position: absolute;
+    visibility: visible;
+  }
+
   /* Only the ring that has no visual slot to sit in is placed against the box. */
-  [data-ui='button'] > [data-part='indicator'] {
+  [data-ui-button] > [data-part-indicator] {
     inset: 0;
     /* `inset: 0` with a definite size and automatic margins centres on both
        axes without naming a physical side. */
@@ -551,7 +593,7 @@
    */
   @media (prefers-reduced-motion: no-preference) {
     @media not (forced-colors: active) {
-      [data-ui='button']:not([data-shape])[data-loading]:has([data-part='indicator'])::after {
+      [data-ui-button]:not([data-shape])[data-loading]:has([data-part-indicator])::after {
         /**
          * The tile is crossed once per cycle, so the pair sets the speed the
          * band travels rather than the time it takes: two heights per loop
@@ -575,19 +617,17 @@
        * A band that travels against the reading direction reads as undoing
        * rather than as progressing, so it is mirrored rather than reused.
        */
-      [data-ui='button']:not([data-shape])[data-loading]:has([data-part='indicator']):dir(
-          rtl
-        )::after {
+      [data-ui-button]:not([data-shape])[data-loading]:has([data-part-indicator]):dir(rtl)::after {
         animation-direction: reverse;
         background-image: linear-gradient(to left, transparent, currentColor 40%, transparent 80%);
       }
 
-      [data-ui='button']:not([data-shape])[data-loading]:has(> [data-part='indicator'])
-        > :not([data-part='indicator']) {
+      [data-ui-button]:not([data-shape])[data-loading]:has(> [data-part-indicator])
+        > :not([data-part-indicator]) {
         opacity: 1;
       }
 
-      [data-ui='button']:not([data-shape])[data-loading] [data-part='indicator'] {
+      [data-ui-button]:not([data-shape])[data-loading] [data-part-indicator] {
         opacity: 0;
         position: absolute;
       }
@@ -596,9 +636,9 @@
 
   /* ── Parts ────────────────────────────────────────────────────────────── */
 
-  [data-ui='button'] [data-part='start'],
-  [data-ui='button'] [data-part='end'],
-  [data-ui='button'] [data-part='icon'] {
+  [data-ui-button] [data-part-start],
+  [data-ui-button] [data-part-end],
+  [data-ui-button] [data-part-icon] {
     align-items: center;
     block-size: var(--_icon-size);
     box-sizing: border-box;
@@ -612,20 +652,35 @@
     position: relative;
   }
 
-  [data-ui='button'] [data-part='start'] > *:not([data-part='indicator']),
-  [data-ui='button'] [data-part='end'] > *:not([data-part='indicator']),
-  [data-ui='button'] [data-part='icon'] > *:not([data-part='indicator']) {
+  [data-ui-button] [data-part-start] > *:not([data-part-indicator], [data-ui-kbd]),
+  [data-ui-button] [data-part-end] > *:not([data-part-indicator], [data-ui-kbd]),
+  [data-ui-button] [data-part-icon] > *:not([data-part-indicator]) {
     block-size: 100%;
     display: block;
     inline-size: 100%;
   }
 
+  /**
+   * A key in a slot is sized by its own family. The slot above is a glyph's
+   * box: it stated `display: block` on the key, which put the legend on a line
+   * box's baseline instead of the key's centre, sixteen pixels square, and the
+   * icon's font size, which `size="inherit"` read as the text's. Measured, a
+   * `Kbd` legend stood 1.5px above the label's centre and a `Shortcut` 1.5px
+   * below it. Here the slot takes the key's measure and the label's type, and
+   * the flex container centres the key on the label.
+   */
+  [data-ui-button] :is([data-part-start], [data-part-end]):has(> [data-ui-kbd]) {
+    block-size: auto;
+    font-size: inherit;
+    inline-size: auto;
+  }
+
   /**
    * The label carries a wrapping line height of its own: the control's line
    * height is 1, which centres a single line inside the box and crushes the
    * second one. A token longer than the container breaks instead of escaping.
    */
-  [data-ui='button'] [data-part='label'] {
+  [data-ui-button] [data-part-label] {
     line-height: var(--slotted-line-height-sm, 1.45);
     min-inline-size: 0;
     overflow-wrap: anywhere;
@@ -656,7 +711,7 @@
    * of a pixel, which is the only thing the term governs.
    */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='button'] [data-part='label'] {
+    [data-ui-button] [data-part-label] {
       padding-block: calc((var(--slotted-line-height-sm, 1.45) * 1em - 0.75em) / 2);
       text-box: trim-both cap alphabetic;
     }
@@ -667,20 +722,40 @@
    * letter. An icon-only control is exempt, because both of its sides hold
    * the same glyph and its inset is zero.
    */
-  [data-ui='button']:not([data-shape]):has(> [data-part='start']) {
+  [data-ui-button]:not([data-shape]):has(> [data-part-start]) {
     padding-inline-start: var(--_padding-inline-visual);
   }
 
-  [data-ui='button']:not([data-shape]):has(> [data-part='end']) {
+  [data-ui-button]:not([data-shape]):has(> [data-part-end]) {
     padding-inline-end: var(--_padding-inline-visual);
   }
 
   /* ── Inline size ──────────────────────────────────────────────────────── */
 
-  [data-ui='button'][data-full-width] {
+  [data-ui-button][data-full-width] {
     inline-size: 100%;
   }
 
+  /**
+   * A field trigger: the label at the start and `end` at the inline end. The
+   * label takes the free space, so `start` stays beside it and the end slot is
+   * pushed to the edge; flex follows the writing direction, so it mirrors.
+   */
+  [data-ui-button][data-justify='between'] {
+    justify-content: space-between;
+  }
+
+  [data-ui-button][data-justify='between'] > [data-part-label] {
+    flex: 1 1 auto;
+    text-align: start;
+  }
+
+  /* What a trigger holds at its end — a shortcut, a count — is as wide as it is. */
+  [data-ui-button][data-justify='between'] > [data-part-end] {
+    inline-size: auto;
+    min-inline-size: var(--_icon-size);
+  }
+
   /**
    * An icon-only control is square from the control height, so its visual box
    * and its target are the same box. The two minimums are the WCAG 2.2 floor
@@ -688,7 +763,7 @@
    * small in one axis is the family's to correct, and theme validation only
    * guarantees the block axis.
    */
-  [data-ui='button'][data-shape] {
+  [data-ui-button][data-shape] {
     aspect-ratio: 1;
     inline-size: var(--_height);
     min-block-size: max(var(--_height), var(--slotted-target-min, 24px));
@@ -697,7 +772,7 @@
     padding-inline: 0;
   }
 
-  [data-ui='button'][data-shape='circle'] {
+  [data-ui-button][data-shape='circle'] {
     border-radius: var(--slotted-radius-full, 9999px);
   }
 
@@ -711,16 +786,16 @@
    * for a fill the system has flattened.
    */
   @media (forced-colors: active) {
-    [data-ui='button'] {
+    [data-ui-button] {
       border-color: ButtonBorder;
     }
 
-    [data-ui='button'][data-pressed] {
+    [data-ui-button][data-pressed] {
       border-color: Highlight;
     }
 
-    [data-ui='button']:disabled,
-    [data-ui='button'][data-disabled] {
+    [data-ui-button]:disabled,
+    [data-ui-button][data-disabled] {
       border-color: GrayText;
       color: GrayText;
     }
@@ -731,7 +806,7 @@
    * shows the wait, and the sweep above is the loop this sheet owns.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='button'] [data-part='indicator'] {
+    [data-ui-button] [data-part-indicator] {
       animation: none;
     }
   }

package/src/button/button.tokens.json

@@ -52,6 +52,16 @@
   "--slotted-tone-danger-solid-active",
   "--slotted-tone-danger-solid-hover",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-on-solid",
+  "--slotted-tone-info-solid",
+  "--slotted-tone-info-solid-active",
+  "--slotted-tone-info-solid-hover",
+  "--slotted-tone-info-text",
+  "--slotted-tone-neutral-on-solid",
+  "--slotted-tone-neutral-solid",
+  "--slotted-tone-neutral-solid-active",
+  "--slotted-tone-neutral-solid-hover",
+  "--slotted-tone-neutral-text",
   "--slotted-tone-secondary-on-solid",
   "--slotted-tone-secondary-solid",
   "--slotted-tone-secondary-solid-active",