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

package/src/badge/badge.css

@@ -16,7 +16,7 @@
    * that keeps an icon-only badge the same height as a text one, and the
    * minimum inline size that makes a one-figure pill a circle.
    */
-  [data-ui='badge'][data-part='root'] {
+  [data-ui-badge][data-part-root] {
     /**
      * Tone. The default is the one a badge carrying a value should speak in: a
      * badge with no tone stated is holding a number, not an opinion.
@@ -123,11 +123,11 @@
 
   /* ── Tone: which of the five semantic colours the badge speaks in ─────── */
 
-  [data-ui='badge'][data-part='root'][data-tone='secondary'] {
+  [data-ui-badge][data-part-root][data-tone='secondary'] {
     --_edge: var(--_border);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='accent'] {
+  [data-ui-badge][data-part-root][data-tone='accent'] {
     --_solid: var(--slotted-tone-accent-solid);
     --_on-solid: var(--slotted-tone-accent-on-solid);
     --_surface: var(--slotted-tone-accent-surface);
@@ -135,7 +135,7 @@
     --_text: var(--slotted-tone-accent-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='success'] {
+  [data-ui-badge][data-part-root][data-tone='success'] {
     --_solid: var(--slotted-tone-success-solid);
     --_on-solid: var(--slotted-tone-success-on-solid);
     --_surface: var(--slotted-tone-success-surface);
@@ -143,7 +143,15 @@
     --_text: var(--slotted-tone-success-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='warning'] {
+  [data-ui-badge][data-part-root][data-tone='info'] {
+    --_solid: var(--slotted-tone-info-solid);
+    --_on-solid: var(--slotted-tone-info-on-solid);
+    --_surface: var(--slotted-tone-info-surface);
+    --_border: var(--slotted-tone-info-border);
+    --_text: var(--slotted-tone-info-text);
+  }
+
+  [data-ui-badge][data-part-root][data-tone='warning'] {
     --_solid: var(--slotted-tone-warning-solid);
     --_on-solid: var(--slotted-tone-warning-on-solid);
     --_surface: var(--slotted-tone-warning-surface);
@@ -151,7 +159,7 @@
     --_text: var(--slotted-tone-warning-text);
   }
 
-  [data-ui='badge'][data-part='root'][data-tone='danger'] {
+  [data-ui-badge][data-part-root][data-tone='danger'] {
     --_solid: var(--slotted-tone-danger-solid);
     --_on-solid: var(--slotted-tone-danger-on-solid);
     --_surface: var(--slotted-tone-danger-surface);
@@ -180,19 +188,19 @@
    * border looks like and disagree about which of them should wear it.
    */
 
-  [data-ui='badge'][data-part='root'][data-variant='solid'] {
+  [data-ui-badge][data-part-root][data-variant='solid'] {
     background-color: var(--_solid, ButtonFace);
     border-color: var(--_edge, ButtonFace);
     color: var(--_on-solid, ButtonText);
   }
 
-  [data-ui='badge'][data-part='root'][data-variant='soft'] {
+  [data-ui-badge][data-part-root][data-variant='soft'] {
     background-color: var(--_surface, ButtonFace);
     border-color: var(--_border, ButtonBorder);
     color: var(--_text, ButtonText);
   }
 
-  [data-ui='badge'][data-part='root'][data-variant='outline'] {
+  [data-ui-badge][data-part-root][data-variant='outline'] {
     background-color: transparent;
     border-color: var(--_border, ButtonBorder);
     color: var(--_text, ButtonText);
@@ -200,7 +208,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='badge'][data-part='root'][data-size='sm'] {
+  [data-ui-badge][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     /* `0px` rather than `0`: a unitless zero inside the `--_block-size` sum
        makes the whole calculation invalid, and `min-block-size` silently fell
@@ -216,7 +224,7 @@
    * a rounding error: a 12px badge and a 13px badge should not carry visibly
    * different glyphs.
    */
-  [data-ui='badge'][data-part='root'][data-size='lg'] {
+  [data-ui-badge][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_icon-size: var(--slotted-control-icon-size-md, 16px);
     --_inset-block: var(--slotted-space-2, 0.25rem);
@@ -226,7 +234,7 @@
 
   /* ── Shape ────────────────────────────────────────────────────────────── */
 
-  [data-ui='badge'][data-part='root'][data-shape='square'] {
+  [data-ui-badge][data-part-root][data-shape='square'] {
     border-radius: var(--slotted-badge-radius, var(--slotted-radius-sm, 4px));
   }
 
@@ -244,7 +252,7 @@
    * A dot renders no value, so nothing is clipped. Text a consumer forces into
    * one overflows rather than disappearing.
    */
-  [data-ui='badge'][data-part='root'][data-shape='dot'] {
+  [data-ui-badge][data-part-root][data-shape='dot'] {
     block-size: var(--_dot-size);
     border-color: var(--slotted-badge-dot-border-color, var(--slotted-border-strong, CanvasText));
     border-radius: var(--slotted-radius-full, 9999px);
@@ -262,7 +270,7 @@
    * can make the root an `<a>` and a ring that appears only where a family
    * expects focus is a ring that goes missing.
    */
-  [data-ui='badge'][data-part='root']:focus-visible {
+  [data-ui-badge][data-part-root]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
   }
@@ -293,14 +301,14 @@
    * below its content inside the flex root, which is the condition
    * `text-overflow` needs to have anything to do.
    */
-  [data-ui='badge'] [data-part='label'] {
+  [data-ui-badge] [data-part-label] {
     min-inline-size: 0;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   @supports (text-box: trim-both cap alphabetic) {
-    [data-ui='badge'] [data-part='label'] {
+    [data-ui-badge] [data-part-label] {
       /**
        * A descender and a tall diacritic both live outside a box trimmed to the
        * cap and the baseline, and `overflow: hidden` cut them off — visible in
@@ -323,8 +331,8 @@
    * from its container, and a bare glyph host such as `ng-icon` reads the
    * slot's font-size, so both are the glyph scale.
    */
-  [data-ui='badge'] [data-part='start'],
-  [data-ui='badge'] [data-part='end'] {
+  [data-ui-badge] [data-part-start],
+  [data-ui-badge] [data-part-end] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -338,8 +346,8 @@
     line-height: 1;
   }
 
-  [data-ui='badge'] [data-part='start'] > *,
-  [data-ui='badge'] [data-part='end'] > * {
+  [data-ui-badge] [data-part-start] > *,
+  [data-ui-badge] [data-part-end] > * {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -358,7 +366,7 @@
    * frame is read in. Everything else — which corner, how far in from it — is
    * written in logical insets and mirrors on its own.
    */
-  [data-ui='badge'][data-part='anchor'] {
+  [data-ui-badge][data-part-anchor] {
     --_dir: 1;
     /* Half the badge's own size. A proportion of the box rather than a step of
        any scale, which is why it is geometry here and not a token. */
@@ -389,25 +397,25 @@
     vertical-align: middle;
   }
 
-  [data-ui='badge'][data-part='anchor']:dir(rtl) {
+  [data-ui-badge][data-part-anchor]:dir(rtl) {
     --_dir: -1;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-overlap='circle'] {
+  [data-ui-badge][data-part-anchor][data-overlap='circle'] {
     --_anchor-inset: 14%;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-start'],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] {
     --_overhang-inline: -50%;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] {
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] {
     --_overhang-block: 50%;
   }
 
-  [data-ui='badge'][data-part='anchor'] > [data-ui='badge'][data-part='root'] {
+  [data-ui-badge][data-part-anchor] > [data-ui-badge][data-part-root] {
     /**
      * The ring is what separates the badge from whatever it is sitting on.
      * It is a token rather than a boolean, because a badge inside a card, a
@@ -424,23 +432,23 @@
     z-index: 1;
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='top-start'] > [data-part-root] {
     inset-block-start: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] > [data-part-root] {
     inset-block-end: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-end'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-end'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-end'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-end'] > [data-part-root] {
     inset-inline-end: var(--_anchor-inset);
   }
 
-  [data-ui='badge'][data-part='anchor'][data-placement='top-start'] > [data-part='root'],
-  [data-ui='badge'][data-part='anchor'][data-placement='bottom-start'] > [data-part='root'] {
+  [data-ui-badge][data-part-anchor][data-placement='top-start'] > [data-part-root],
+  [data-ui-badge][data-part-anchor][data-placement='bottom-start'] > [data-part-root] {
     inset-inline-start: var(--_anchor-inset);
   }
 
@@ -455,7 +463,7 @@
    * from the page.
    */
   @media (forced-colors: active) {
-    [data-ui='badge'][data-part='root'] {
+    [data-ui-badge][data-part-root] {
       border-color: currentColor;
     }
   }

package/src/badge/badge.tokens.json

@@ -40,6 +40,11 @@
   "--slotted-tone-danger-solid",
   "--slotted-tone-danger-surface",
   "--slotted-tone-danger-text",
+  "--slotted-tone-info-border",
+  "--slotted-tone-info-on-solid",
+  "--slotted-tone-info-solid",
+  "--slotted-tone-info-surface",
+  "--slotted-tone-info-text",
   "--slotted-tone-secondary-border",
   "--slotted-tone-secondary-on-solid",
   "--slotted-tone-secondary-solid-hover",

package/src/breadcrumb/breadcrumb.css

@@ -12,7 +12,7 @@
    * rule `link` arrived at after painting hover with a fill role; a trail is
    * text for the same reason a link is.
    */
-  [data-ui='breadcrumb'] {
+  [data-ui-breadcrumb] {
     --_rest: var(--slotted-breadcrumb-color, var(--slotted-text-muted, GrayText));
     --_strong: var(--slotted-breadcrumb-color-current, var(--slotted-text, CanvasText));
     --_hover: var(
@@ -59,7 +59,7 @@
    * inline gap because two wrapped lines of one type size need less air between
    * them than two words do beside each other.
    */
-  [data-ui='breadcrumb'] [data-part='list'] {
+  [data-ui-breadcrumb] [data-part-list] {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
@@ -79,7 +79,7 @@
     );
   }
 
-  [data-ui='breadcrumb'] [data-part='item'] {
+  [data-ui-breadcrumb] [data-part-item] {
     align-items: center;
     column-gap: var(--_gap);
     display: flex;
@@ -104,7 +104,7 @@
    * crumb rendered and the collapse did nothing at all. The capture is what
    * said so; both bindings write the attribute and neither could have known.
    */
-  [data-ui='breadcrumb'] [data-part='item'][hidden] {
+  [data-ui-breadcrumb] [data-part-item][hidden] {
     display: none;
   }
 
@@ -120,12 +120,12 @@
    * frame of a drag, and the ellipsis returns in the same frame to the place
    * the crumbs leave.
    */
-  [data-ui='breadcrumb'][data-expanded] [data-part='item'] {
+  [data-ui-breadcrumb][data-expanded] [data-part-item] {
     transition: opacity var(--slotted-duration-medium) var(--slotted-easing-enter);
   }
 
   @starting-style {
-    [data-ui='breadcrumb'][data-expanded] [data-part='item'] {
+    [data-ui-breadcrumb][data-expanded] [data-part-item] {
       opacity: 0;
     }
   }
@@ -139,7 +139,7 @@
    * it distinguishes the one crumb being addressed from the seven beside it.
    */
 
-  [data-ui='breadcrumb'] :is([data-part='link'], [data-part='page'], [data-part='trigger']) {
+  [data-ui-breadcrumb] :is([data-part-link], [data-part-page], [data-part-trigger]) {
     border-radius: var(--slotted-breadcrumb-radius, var(--slotted-control-radius, 4px));
     display: block;
     /**
@@ -165,7 +165,7 @@
     white-space: nowrap;
   }
 
-  [data-ui='breadcrumb'] [data-part='link'] {
+  [data-ui-breadcrumb] [data-part-link] {
     color: inherit;
   }
 
@@ -175,7 +175,7 @@
    * the pointer, and a chevron after the label that says a list opens here
    * rather than a page. It keeps the line's height; the menu is the consumer's.
    */
-  [data-ui='breadcrumb'] [data-part='trigger'] {
+  [data-ui-breadcrumb] [data-part-trigger] {
     appearance: none;
     background-color: transparent;
     border: 0;
@@ -187,7 +187,7 @@
   }
 
   /* The switcher of the page the reader is on is still the page. */
-  [data-ui='breadcrumb'] [data-part='trigger'][aria-current='page'] {
+  [data-ui-breadcrumb] [data-part-trigger][aria-current='page'] {
     color: var(--_strong);
     font-weight: var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500));
   }
@@ -201,26 +201,26 @@
    * An atomic inline box takes no underline, so the hover rule marks the words
    * and not the glyph.
    */
-  [data-ui='breadcrumb']
-    :is([data-part='link'], [data-part='page'], [data-part='trigger'])
-    > :is([data-ui='icon'], [data-ui='avatar']) {
+  [data-ui-breadcrumb]
+    :is([data-part-link], [data-part-page], [data-part-trigger])
+    > :is([data-ui-icon], [data-ui-avatar]) {
     margin-inline-end: var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px));
   }
 
-  [data-ui='breadcrumb']
-    :is([data-part='link'], [data-part='page'], [data-part='trigger'])
-    > [data-ui='badge'] {
+  [data-ui-breadcrumb]
+    :is([data-part-link], [data-part-page], [data-part-trigger])
+    > [data-ui-badge] {
     margin-inline-start: var(--slotted-breadcrumb-content-gap, var(--slotted-space-3, 6px));
   }
 
   /* The switcher's chevron is its last element, after the label. */
-  [data-ui='breadcrumb'] [data-part='trigger'] > [data-ui='icon']:last-child {
+  [data-ui-breadcrumb] [data-part-trigger] > [data-ui-icon]:last-child {
     margin-inline: var(--slotted-space-2, 4px) 0;
     transition: rotate var(--slotted-duration-short) var(--slotted-easing-standard);
   }
 
   /* The chevron turns while the menu it opened is up, and back when it closes. */
-  [data-ui='breadcrumb'] [data-part='trigger'][data-open] > [data-ui='icon']:last-child {
+  [data-ui-breadcrumb] [data-part-trigger][data-open] > [data-ui-icon]:last-child {
     rotate: 180deg;
   }
 
@@ -230,19 +230,19 @@
    * weight is on the one crumb that never moves, so nothing beside it shifts
    * when the pointer arrives.
    */
-  [data-ui='breadcrumb'] [data-part='page'] {
+  [data-ui-breadcrumb] [data-part-page] {
     color: var(--_strong);
     font-weight: var(--slotted-breadcrumb-page-weight, var(--slotted-font-weight-medium, 500));
   }
 
-  [data-ui='breadcrumb'] :is([data-part='link'], [data-part='trigger']):not([data-disabled]):hover {
+  [data-ui-breadcrumb] :is([data-part-link], [data-part-trigger]):not([data-disabled]):hover {
     color: var(--_hover);
     text-decoration-color: currentColor;
   }
 
   /* An open switcher holds the pressed colour for as long as its menu is up. */
-  [data-ui='breadcrumb']
-    :is([data-part='link'], [data-part='trigger']):not([data-disabled]):is(:active, [data-open]) {
+  [data-ui-breadcrumb]
+    :is([data-part-link], [data-part-trigger]):not([data-disabled]):is(:active, [data-open]) {
     color: var(--_strong);
     /* Without the pointer over it an open switcher would read as the page:
        same colour, no mark. The underline says which crumb the menu is from. */
@@ -254,12 +254,12 @@
    * brings only the underline, and a press — or the menu it opened — steps the
    * label back to the hover mix. Hover and press still differ, as on a link.
    */
-  [data-ui='breadcrumb'] [data-part='trigger'][aria-current='page']:not([data-disabled]):hover {
+  [data-ui-breadcrumb] [data-part-trigger][aria-current='page']:not([data-disabled]):hover {
     color: var(--_strong);
   }
 
-  [data-ui='breadcrumb']
-    [data-part='trigger'][aria-current='page']:not([data-disabled]):is(:active, [data-open]) {
+  [data-ui-breadcrumb]
+    [data-part-trigger][aria-current='page']:not([data-disabled]):is(:active, [data-open]) {
     color: var(--_hover);
   }
 
@@ -273,13 +273,13 @@
    * box, so a ring drawn outside crossed both separators — at two pixels out,
    * and on its own edge at dense.
    */
-  [data-ui='breadcrumb'] :is([data-part='link'], [data-part='trigger']):focus-visible {
+  [data-ui-breadcrumb] :is([data-part-link], [data-part-trigger]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-breadcrumb-focus-ring-offset, 1px);
     text-decoration-color: currentColor;
   }
 
-  [data-ui='breadcrumb'] [data-part='ellipsis']:focus-visible {
+  [data-ui-breadcrumb] [data-part-ellipsis]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(
       --slotted-breadcrumb-ellipsis-focus-ring-offset,
@@ -300,7 +300,7 @@
    * with children shows the children and the empty one shows the rule.
    */
 
-  [data-ui='breadcrumb'] [data-part='separator'] {
+  [data-ui-breadcrumb] [data-part-separator] {
     align-items: center;
     color: var(--_separator);
     display: flex;
@@ -308,7 +308,7 @@
     justify-content: center;
   }
 
-  [data-ui='breadcrumb'] [data-part='separator']:empty {
+  [data-ui-breadcrumb] [data-part-separator]:empty {
     background-color: currentColor;
     /* Rounded, so a rule of `0.9em` ends on a whole pixel: 12 at 13px, 11 dense. */
     block-size: round(nearest, var(--slotted-breadcrumb-separator-length, 0.9em), 1px);
@@ -325,7 +325,7 @@
    * trail itself runs the other way. `:dir()` rather than an ancestor `[dir]`,
    * so a trail inside a left-to-right island leans the way that island reads.
    */
-  [data-ui='breadcrumb'] [data-part='separator']:empty:dir(rtl) {
+  [data-ui-breadcrumb] [data-part-separator]:empty:dir(rtl) {
     rotate: calc(-1 * var(--slotted-breadcrumb-separator-skew, 20deg));
   }
 
@@ -359,7 +359,7 @@
    * reader hears is a count rather than three dots.
    */
 
-  [data-ui='breadcrumb'] [data-part='ellipsis'] {
+  [data-ui-breadcrumb] [data-part-ellipsis] {
     --slotted-icon-size: var(--_icon-size);
 
     align-items: center;
@@ -394,7 +394,7 @@
   }
 
   /* The halo that completes the target where the line is shorter than it. */
-  [data-ui='breadcrumb'] [data-part='ellipsis']::after {
+  [data-ui-breadcrumb] [data-part-ellipsis]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -403,17 +403,17 @@
   /* On a finger the halo reaches the comfortable size in both axes; the box
      keeps the line's height, so the trail does not grow. */
   @media (pointer: coarse) {
-    [data-ui='breadcrumb'] [data-part='ellipsis']::after {
+    [data-ui-breadcrumb] [data-part-ellipsis]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
     }
   }
 
   /* The ground moves under the pointer and nothing else does (R2). */
-  [data-ui='breadcrumb'] [data-part='ellipsis']:not([data-disabled]):hover {
+  [data-ui-breadcrumb] [data-part-ellipsis]:not([data-disabled]):hover {
     background-color: var(--slotted-breadcrumb-ellipsis-background-hover, var(--_ellipsis-hover));
   }
 
-  [data-ui='breadcrumb'] [data-part='ellipsis']:not([data-disabled]):active {
+  [data-ui-breadcrumb] [data-part-ellipsis]:not([data-disabled]):active {
     background-color: var(--slotted-breadcrumb-ellipsis-background-active, var(--_ellipsis-active));
   }
 
@@ -430,11 +430,11 @@
    */
 
   @media (forced-colors: active) {
-    [data-ui='breadcrumb'] [data-part='separator']:empty {
+    [data-ui-breadcrumb] [data-part-separator]:empty {
       background-color: GrayText;
     }
 
-    [data-ui='breadcrumb'] [data-part='ellipsis'] {
+    [data-ui-breadcrumb] [data-part-ellipsis] {
       border: var(--slotted-border-width-thin, 1px) solid ButtonBorder;
     }
   }