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

package/src/inline/inline.css

@@ -10,7 +10,7 @@
    * type step, so a run of items reads as one line rather than as a list laid
    * sideways.
    */
-  [data-ui='inline'] {
+  [data-ui-inline] {
     --_gap: var(--slotted-space-4, 0.5rem);
 
     display: flex;
@@ -27,55 +27,55 @@
   }
 
   /* Separation is a step on the scale, never a length the consumer states. */
-  [data-ui='inline'][data-gap='0'] {
+  [data-ui-inline][data-gap='0'] {
     --_gap: 0;
   }
 
-  [data-ui='inline'][data-gap='1'] {
+  [data-ui-inline][data-gap='1'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='inline'][data-gap='2'] {
+  [data-ui-inline][data-gap='2'] {
     --_gap: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='inline'][data-gap='3'] {
+  [data-ui-inline][data-gap='3'] {
     --_gap: var(--slotted-space-3, 0.375rem);
   }
 
-  [data-ui='inline'][data-gap='4'] {
+  [data-ui-inline][data-gap='4'] {
     --_gap: var(--slotted-space-4, 0.5rem);
   }
 
-  [data-ui='inline'][data-gap='5'] {
+  [data-ui-inline][data-gap='5'] {
     --_gap: var(--slotted-space-5, 0.75rem);
   }
 
-  [data-ui='inline'][data-gap='6'] {
+  [data-ui-inline][data-gap='6'] {
     --_gap: var(--slotted-space-6, 1rem);
   }
 
-  [data-ui='inline'][data-gap='7'] {
+  [data-ui-inline][data-gap='7'] {
     --_gap: var(--slotted-space-7, 1.25rem);
   }
 
-  [data-ui='inline'][data-gap='8'] {
+  [data-ui-inline][data-gap='8'] {
     --_gap: var(--slotted-space-8, 1.5rem);
   }
 
-  [data-ui='inline'][data-gap='9'] {
+  [data-ui-inline][data-gap='9'] {
     --_gap: var(--slotted-space-9, 2rem);
   }
 
-  [data-ui='inline'][data-gap='10'] {
+  [data-ui-inline][data-gap='10'] {
     --_gap: var(--slotted-space-10, 2.5rem);
   }
 
-  [data-ui='inline'][data-gap='11'] {
+  [data-ui-inline][data-gap='11'] {
     --_gap: var(--slotted-space-11, 3rem);
   }
 
-  [data-ui='inline'][data-gap='12'] {
+  [data-ui-inline][data-gap='12'] {
     --_gap: var(--slotted-space-12, 4rem);
   }
 
@@ -85,23 +85,23 @@
    * line can share a baseline, and a label beside a badge reads wrong without
    * it.
    */
-  [data-ui='inline'][data-align='start'] {
+  [data-ui-inline][data-align='start'] {
     align-items: start;
   }
 
-  [data-ui='inline'][data-align='center'] {
+  [data-ui-inline][data-align='center'] {
     align-items: center;
   }
 
-  [data-ui='inline'][data-align='end'] {
+  [data-ui-inline][data-align='end'] {
     align-items: end;
   }
 
-  [data-ui='inline'][data-align='stretch'] {
+  [data-ui-inline][data-align='stretch'] {
     align-items: stretch;
   }
 
-  [data-ui='inline'][data-align='baseline'] {
+  [data-ui-inline][data-align='baseline'] {
     align-items: baseline;
   }
 
@@ -110,31 +110,31 @@
    * 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='inline'][data-justify='start'] {
+  [data-ui-inline][data-justify='start'] {
     justify-content: start;
   }
 
-  [data-ui='inline'][data-justify='center'] {
+  [data-ui-inline][data-justify='center'] {
     justify-content: center;
   }
 
-  [data-ui='inline'][data-justify='end'] {
+  [data-ui-inline][data-justify='end'] {
     justify-content: end;
   }
 
-  [data-ui='inline'][data-justify='between'] {
+  [data-ui-inline][data-justify='between'] {
     justify-content: space-between;
   }
 
-  [data-ui='inline'][data-justify='around'] {
+  [data-ui-inline][data-justify='around'] {
     justify-content: space-around;
   }
 
-  [data-ui='inline'][data-justify='evenly'] {
+  [data-ui-inline][data-justify='evenly'] {
     justify-content: space-evenly;
   }
 
-  [data-ui='inline'][data-wrap='wrap'] {
+  [data-ui-inline][data-wrap='wrap'] {
     flex-wrap: wrap;
   }
 
@@ -143,7 +143,7 @@
    * content. That is what the consumer asked for, and it is why the family does
    * not ask for it on the consumer's behalf.
    */
-  [data-ui='inline'][data-wrap='nowrap'] {
+  [data-ui-inline][data-wrap='nowrap'] {
     flex-wrap: nowrap;
   }
 }

package/src/inline-message/inline-message.css

@@ -20,7 +20,7 @@
    *   DOM so it is read first; `position: absolute` is what keeps it from
    *   taking a grid cell or adding a line.
    */
-  [data-ui='inline-message'][data-part='root'] {
+  [data-ui-inline-message][data-part-root] {
     /**
      * The default is the help tone, which is what most fields carry. It is the
      * one tone that paints in the neutral muted ink rather than in a tone's
@@ -91,23 +91,27 @@
    * a severity.
    */
 
-  [data-ui='inline-message'][data-part='root'][data-tone='accent'] {
+  [data-ui-inline-message][data-part-root][data-tone='accent'] {
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='secondary'] {
+  [data-ui-inline-message][data-part-root][data-tone='secondary'] {
     --_text: var(--slotted-text-muted);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='success'] {
+  [data-ui-inline-message][data-part-root][data-tone='success'] {
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='warning'] {
+  [data-ui-inline-message][data-part-root][data-tone='info'] {
+    --_text: var(--slotted-tone-info-text);
+  }
+
+  [data-ui-inline-message][data-part-root][data-tone='warning'] {
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-tone='danger'] {
+  [data-ui-inline-message][data-part-root][data-tone='danger'] {
     --_text: var(--slotted-tone-danger-text);
   }
 
@@ -119,11 +123,11 @@
    * field. Both are restated per density by the theme.
    */
 
-  [data-ui='inline-message'][data-part='root'][data-size='sm'] {
+  [data-ui-inline-message][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
   }
 
-  [data-ui='inline-message'][data-part='root'][data-size='md'] {
+  [data-ui-inline-message][data-part-root][data-size='md'] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
   }
 
@@ -137,7 +141,7 @@
    * character as the message. A space is content: it defeats `:empty` below, so
    * the mark and the severity word would be drawn beside nothing.
    */
-  [data-ui='inline-message'][data-part='root'][data-reserve] {
+  [data-ui-inline-message][data-part-root][data-reserve] {
     min-block-size: 1lh;
   }
 
@@ -156,7 +160,7 @@
    * a one-pixel box, clipped, out of flow, on a single line, with the negative
    * margin that keeps it from adding a pixel of scrollable overflow.
    */
-  [data-ui='inline-message'] > [data-part='prefix'] {
+  [data-ui-inline-message] > [data-part-prefix] {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -183,7 +187,7 @@
    * A mark the page supplies instead takes the same box and its place on the
    * first line, centred in it.
    */
-  [data-ui='inline-message'] > [data-part='icon'] {
+  [data-ui-inline-message] > [data-part-icon] {
     --slotted-icon-size: var(--_mark-size);
 
     align-items: center;
@@ -221,12 +225,12 @@
    * page's own artwork alone: a supplied mark keeps the full box it was
    * measured for.
    */
-  [data-ui='inline-message'][data-part='root'][data-mark='dot'] {
+  [data-ui-inline-message][data-part-root][data-mark='dot'] {
     --_dot-size: calc(var(--_mark-size) / 3);
   }
 
-  [data-ui='inline-message'][data-mark='dot']
-    > [data-part='icon']:has(> [data-ui='icon'] > [data-glyph='dot']) {
+  [data-ui-inline-message][data-mark='dot']
+    > [data-part-icon]:has(> [data-ui-icon] > [data-glyph='dot']) {
     --slotted-icon-size: calc(var(--_dot-size) * 2);
 
     inline-size: var(--_dot-size);
@@ -242,8 +246,8 @@
    * and it is stated as an absence rather than as `[data-mark='glyph']` so
    * markup written without the attribute keeps the rule.
    */
-  [data-ui='inline-message'][data-tone='secondary']:not([data-loading]):not([data-mark='dot'])
-    > [data-part='icon']:empty {
+  [data-ui-inline-message][data-tone='secondary']:not([data-loading]):not([data-mark='dot'])
+    > [data-part-icon]:empty {
     display: none;
   }
 
@@ -263,7 +267,7 @@
    * `:not([data-loading])` keeps the ring, because a message with no mark can
    * be waiting for something like any other.
    */
-  [data-ui='inline-message'][data-mark='none']:not([data-loading]) > [data-part='icon']:empty {
+  [data-ui-inline-message][data-mark='none']:not([data-loading]) > [data-part-icon]:empty {
     display: none;
   }
 
@@ -279,21 +283,41 @@
    * name without a hyphen. Nothing is removed: the whole string stays in the
    * DOM, in the accessibility tree, and findable by a page search.
    */
-  [data-ui='inline-message'] > [data-part='text'] {
+  [data-ui-inline-message] > [data-part-text] {
     grid-column: 2;
     grid-row: 1;
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
 
+  /**
+   * The answers the message offers — "R$ 2,00 · R$ 15,00" under an amount that
+   * could be either. They wrap under the sentence, in its column, at the gap
+   * the family puts between its mark and its sentence; the root is then a
+   * group named by the sentence, so a reader hears what the buttons answer.
+   */
+  [data-ui-inline-message] > [data-part-actions] {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--slotted-inline-message-actions-gap, var(--_column-gap));
+    grid-column: 2;
+    grid-row: 2;
+    margin-block-start: var(
+      --slotted-inline-message-actions-offset,
+      var(--slotted-space-2, 0.25rem)
+    );
+    min-inline-size: 0;
+  }
+
   /**
    * Nothing to say, so nothing is drawn. This is the half of `reserve` that
    * makes it usable: the line is held open, and a mark and a severity word
    * standing beside an empty sentence would be the layout shift moved rather
    * than removed.
    */
-  [data-ui='inline-message']:has([data-part='text']:empty) > [data-part='icon'],
-  [data-ui='inline-message']:has([data-part='text']:empty) > [data-part='prefix'] {
+  [data-ui-inline-message]:has([data-part-text]:empty) > [data-part-icon],
+  [data-ui-inline-message]:has([data-part-text]:empty) > [data-part-prefix] {
     display: none;
   }
 
@@ -309,7 +333,7 @@
    * It is the ring `button` draws for the same reason, at the same duration,
    * in the mark's own square on the first line where the mark it replaced was.
    */
-  [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+  [data-ui-inline-message][data-loading] > [data-part-icon] {
     animation: slotted-inline-message-spin var(--slotted-duration-loop-fast) linear infinite;
     block-size: var(--_mark-size);
     border: max(var(--slotted-border-width-thin, 1px), calc(var(--_mark-size) / 8)) solid
@@ -329,7 +353,7 @@
 
   /* The page's own artwork withdraws for the ring rather than sitting inside
      it, because the ring is the mark while the message is waiting. */
-  [data-ui='inline-message'][data-loading] > [data-part='icon'] > * {
+  [data-ui-inline-message][data-loading] > [data-part-icon] > * {
     display: none;
   }
 
@@ -343,11 +367,11 @@
    * own. The ring does need one: `STATE_PRECEDENCE` puts `disabled` above
    * `loading`, and a control nobody can use is not waiting for anything.
    */
-  [data-ui='inline-message'][data-part='root'][data-disabled] {
+  [data-ui-inline-message][data-part-root][data-disabled] {
     color: var(--slotted-disabled-foreground);
   }
 
-  [data-ui='inline-message'][data-disabled] > [data-part='icon'] {
+  [data-ui-inline-message][data-disabled] > [data-part-icon] {
     animation: none;
   }
 
@@ -357,7 +381,7 @@
    * is the decision `button` recorded for the same ring.
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+    [data-ui-inline-message][data-loading] > [data-part-icon] {
       animation: none;
     }
   }
@@ -374,15 +398,15 @@
    * one colour and the turn would be a complete circle turning invisibly.
    */
   @media (forced-colors: active) {
-    [data-ui='inline-message'] > [data-part='icon'] {
+    [data-ui-inline-message] > [data-part-icon] {
       color: CanvasText;
     }
 
-    [data-ui='inline-message'][data-part='root'][data-disabled] > [data-part='icon'] {
+    [data-ui-inline-message][data-part-root][data-disabled] > [data-part-icon] {
       color: GrayText;
     }
 
-    [data-ui='inline-message'][data-loading] > [data-part='icon'] {
+    [data-ui-inline-message][data-loading] > [data-part-icon] {
       border-color: CanvasText;
       border-inline-end-color: Canvas;
     }

package/src/inline-message/inline-message.tokens.json

@@ -5,15 +5,19 @@
   "--slotted-control-font-size-sm",
   "--slotted-disabled-foreground",
   "--slotted-duration-loop-fast",
+  "--slotted-inline-message-actions-gap",
+  "--slotted-inline-message-actions-offset",
   "--slotted-inline-message-column-gap",
   "--slotted-inline-message-font-family",
   "--slotted-inline-message-line-height",
   "--slotted-line-height-md",
   "--slotted-radius-full",
+  "--slotted-space-2",
   "--slotted-space-4",
   "--slotted-text-muted",
   "--slotted-tone-accent-text",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-text",
   "--slotted-tone-success-text",
   "--slotted-tone-warning-text"
 ]

package/src/kbd/kbd.css

@@ -19,7 +19,7 @@
    * The same length is the minimum inline size, which is what makes a
    * one-letter cap square instead of a slot.
    */
-  [data-ui='kbd'] {
+  [data-ui-kbd] {
     /**
      * The height comes from the space scale — 16, 20, 24, 28 — and not from
      * the control geometry. A cap on its own is a glyph box, not a control,
@@ -73,7 +73,7 @@
     --_color: var(--slotted-text, CanvasText);
   }
 
-  [data-ui='kbd'][data-part='root'] {
+  [data-ui-kbd][data-part-root] {
     background-color: var(--_background);
     background-image: var(--_face);
     /**
@@ -167,7 +167,7 @@
    * so the trim moves the ink and never the box.
    */
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='kbd'] [data-part='legend'] {
+    [data-ui-kbd] [data-part-legend] {
       text-box: trim-both cap alphabetic;
     }
 
@@ -179,7 +179,7 @@
      * three sat visibly high in the cap. Left untrimmed, what gets centred is
      * the em box, which is where a mark is drawn.
      */
-    [data-ui='kbd'] [data-part='legend'][data-legend='symbol'] {
+    [data-ui-kbd] [data-part-legend][data-legend='symbol'] {
       text-box: normal;
     }
   }
@@ -193,7 +193,7 @@
    * below the cap height of `K`, and at 1.15em `⌫` stood wider than the
    * `Esc` beside it.
    */
-  [data-ui='kbd'] [data-part='legend'][data-legend='symbol'] {
+  [data-ui-kbd] [data-part-legend][data-legend='symbol'] {
     font-family: var(--slotted-kbd-symbol-font-family, var(--slotted-font-family-sans, sans-serif));
     font-size: 1.1em;
   }
@@ -208,7 +208,7 @@
    * whose accessible name disappears when a consumer forgets an import has no
    * accessible name.
    */
-  [data-ui='kbd'] [data-part='name'] {
+  [data-ui-kbd] [data-part-name] {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -233,10 +233,14 @@
    * pinned. A key legend written in Arabic still renders right-to-left within
    * its own cap, because that is a run of its own.
    */
-  [data-ui='kbd'][data-part='shortcut'] {
+  [data-ui-kbd][data-part-shortcut] {
     align-items: center;
     direction: ltr;
     display: inline-flex;
+    /* The root is a `kbd`: without these it keeps the user agent's monospace
+       face and its line box, which a key in the combination does not share. */
+    font-family: var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));
+    line-height: 1;
     /**
      * A shortcut wider than its column wraps between caps and never inside
      * one. The row gets taller; no instruction gets shorter.
@@ -262,11 +266,11 @@
    * `⌥⇧⌘P` and `⌘K` read as one run of six keys. One step tighter is what says
    * these caps are one shortcut. Everywhere else the `+` says it instead.
    */
-  [data-ui='kbd'][data-part='shortcut'][data-platform='mac'] {
+  [data-ui-kbd][data-part-shortcut][data-platform='mac'] {
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='kbd'][data-part='shortcut'][data-platform='mac'][data-size='inherit'] {
+  [data-ui-kbd][data-part-shortcut][data-platform='mac'][data-size='inherit'] {
     --_gap: 0.125em;
   }
 
@@ -277,7 +281,7 @@
    * announce for the same shortcut. The word is not hidden: it is the only
    * thing that tells a sequence from a combination.
    */
-  [data-ui='kbd'] [data-part='separator'] {
+  [data-ui-kbd] [data-part-separator] {
     color: var(--slotted-text-muted, GrayText);
     flex: none;
     font-family: var(--slotted-kbd-font-family, var(--slotted-control-font-family, sans-serif));
@@ -285,7 +289,7 @@
     line-height: 1;
   }
 
-  [data-ui='kbd'] [data-part='separator'][data-separator='then'] {
+  [data-ui-kbd] [data-part-separator][data-separator='then'] {
     font-family: var(--slotted-control-font-family, sans-serif);
     /**
      * A step boundary is a bigger break than a key join, so it gets more air
@@ -307,7 +311,7 @@
    * scale starts at 12px, and 12px in a 16-pixel cap left one pixel of air
    * above an ascender, so this step writes the one size the scale lacks.
    */
-  [data-ui='kbd'][data-size='xs'] {
+  [data-ui-kbd][data-size='xs'] {
     --_size: var(--slotted-space-6, 1rem);
     --_font-size: 0.6875rem;
     --_inset-inline: var(--slotted-space-2, 0.25rem);
@@ -315,13 +319,13 @@
     --_gap: var(--slotted-space-1, 0.125rem);
   }
 
-  [data-ui='kbd'][data-size='sm'] {
+  [data-ui-kbd][data-size='sm'] {
     --_size: var(--slotted-space-7, 1.25rem);
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_inset-inline: var(--slotted-space-2, 0.25rem);
   }
 
-  [data-ui='kbd'][data-size='lg'] {
+  [data-ui-kbd][data-size='lg'] {
     --_size: calc(var(--slotted-space-8, 1.5rem) + var(--slotted-space-2, 0.25rem));
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_inset-inline: var(--slotted-space-4, 0.5rem);
@@ -341,7 +345,7 @@
    * insets plus edges, made 25.8px on 16px text set at 24px lines. The radius
    * is a quarter of that height, the proportion of the absolute steps.
    */
-  [data-ui='kbd'][data-size='inherit'] {
+  [data-ui-kbd][data-size='inherit'] {
     --_size: 1.5em;
     --_font-size: 0.8em;
     --_inset-inline: 0.4em;
@@ -351,7 +355,7 @@
 
   /* A fractional height puts both horizontal edges between pixels. */
   @supports (inline-size: round(nearest, 1.5em, 1px)) {
-    [data-ui='kbd'][data-size='inherit'] {
+    [data-ui-kbd][data-size='inherit'] {
       --_size: round(nearest, 1.5em, 1px);
     }
   }
@@ -363,7 +367,7 @@
    * outlined one, and it is why `raised` is the default: it is the only value
    * that reads as an object rather than as a box drawn round a word.
    */
-  [data-ui='kbd'][data-variant='raised'] {
+  [data-ui-kbd][data-variant='raised'] {
     --_base-width: var(--slotted-kbd-base-width, var(--slotted-border-width-thick, 2px));
     /**
      * The skirt. The lower part of the face turns a tenth of the way toward
@@ -390,7 +394,7 @@
    * survive an unknown surface was the one variant that could not. A box that
    * borrows its ground borrows its foreground with it.
    */
-  [data-ui='kbd'][data-variant='outline'] {
+  [data-ui-kbd][data-variant='outline'] {
     --_background: transparent;
     /* The edge is all this variant draws, so it is the strong one all round. */
     --_border: var(--slotted-border-strong, ButtonBorder);
@@ -403,7 +407,7 @@
    * panel, where a key painted with it would disappear; the neutral tone's
    * surface is the step `badge` calibrated to read on both.
    */
-  [data-ui='kbd'][data-variant='soft'] {
+  [data-ui-kbd][data-variant='soft'] {
     --_background: var(--slotted-tone-secondary-surface);
     /**
      * The tinted key draws the tone's own edge, as every `badge` variant does,
@@ -431,14 +435,14 @@
    * also what makes the row work: a menu item that dims dims its shortcut with
    * it, with no state to set and nothing left bright at the end of a grey row.
    */
-  [data-ui='kbd'][data-variant='plain'] {
+  [data-ui-kbd][data-variant='plain'] {
     --_background: transparent;
     --_border: transparent;
     --_base: transparent;
     --_color: inherit;
   }
 
-  [data-ui='kbd'][data-part='root'][data-variant='plain'] {
+  [data-ui-kbd][data-part-root][data-variant='plain'] {
     min-inline-size: 0;
     padding-inline: 0;
   }
@@ -451,7 +455,7 @@
    * belongs to owns the semantics: `kbd` may carry only the global ARIA
    * attributes, and `aria-disabled` is not one of them.
    */
-  [data-ui='kbd'][data-disabled] {
+  [data-ui-kbd][data-disabled] {
     --_background: var(--slotted-disabled-background, Canvas);
     --_face: none;
     --_border: var(--slotted-disabled-border, GrayText);
@@ -459,7 +463,7 @@
     --_color: var(--slotted-disabled-foreground, GrayText);
   }
 
-  [data-ui='kbd'][data-disabled] [data-part='separator'] {
+  [data-ui-kbd][data-disabled] [data-part-separator] {
     color: var(--slotted-disabled-foreground, GrayText);
   }
 
@@ -468,12 +472,12 @@
    * that filled itself grey would be a grey rectangle on whatever surface it
    * was placed over, which is the one thing the variant exists to avoid.
    */
-  [data-ui='kbd'][data-variant='outline'][data-disabled],
-  [data-ui='kbd'][data-variant='plain'][data-disabled] {
+  [data-ui-kbd][data-variant='outline'][data-disabled],
+  [data-ui-kbd][data-variant='plain'][data-disabled] {
     --_background: transparent;
   }
 
-  [data-ui='kbd'][data-variant='plain'][data-disabled] {
+  [data-ui-kbd][data-variant='plain'][data-disabled] {
     --_border: transparent;
     --_base: transparent;
   }