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

package/src/toggle/toggle.css

@@ -24,7 +24,7 @@
    * some, so the ring is held off the edge at the foundation's offset, where
    * the joined bar draws it inward.
    */
-  [data-ui='toggle'][data-part='root'] {
+  [data-ui-toggle][data-part-root] {
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
     --_font-size: var(--slotted-control-font-size-md, 13px);
@@ -93,7 +93,7 @@
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='toggle'][data-part='root'][data-size='sm'] {
+  [data-ui-toggle][data-part-root][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);
@@ -101,7 +101,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='toggle'][data-part='root'][data-size='lg'] {
+  [data-ui-toggle][data-part-root][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);
@@ -118,12 +118,12 @@
    * words: the Angular binding projects the words into a box it always
    * renders, and a box with nothing in it must not hold the gap open either.
    */
-  [data-ui='toggle'][data-part='root']:not(:has([data-part='label']:not(:empty))) {
+  [data-ui-toggle][data-part-root]:not(:has([data-part-label]:not(:empty))) {
     inline-size: var(--_height);
     padding-inline: 0;
   }
 
-  [data-ui='toggle'] [data-part='label']:empty {
+  [data-ui-toggle] [data-part-label]:empty {
     display: none;
   }
 
@@ -132,7 +132,7 @@
    * 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='toggle'] [data-part='icon'] {
+  [data-ui-toggle] [data-part-icon] {
     --slotted-icon-size: var(--_icon-size);
 
     block-size: var(--_icon-size);
@@ -142,7 +142,7 @@
     inline-size: var(--_icon-size);
   }
 
-  [data-ui='toggle'] [data-part='icon'] > * {
+  [data-ui-toggle] [data-part-icon] > * {
     block-size: 100%;
     display: block;
     inline-size: 100%;
@@ -155,7 +155,7 @@
    * whole in the DOM — the library's rule is that truncation never removes
    * content.
    */
-  [data-ui='toggle'] [data-part='label'] {
+  [data-ui-toggle] [data-part-label] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -163,7 +163,7 @@
 
   /* ── The edge ─────────────────────────────────────────────────────────── */
 
-  [data-ui='toggle'][data-part='root'][data-variant='outline'] {
+  [data-ui-toggle][data-part-root][data-variant='outline'] {
     border-color: var(--_border-color);
     /* A framed control lifts off its ground at rest, as button's outline does. */
     box-shadow: var(--slotted-toggle-shadow, var(--slotted-control-shadow, none));
@@ -177,7 +177,7 @@
    * `STATE_PRECEDENCE` sets. Both variants take the edge: a ghost toggle that
    * is on has become a framed thing, and the edge is half of what says so.
    */
-  [data-ui='toggle'][data-part='root'][data-pressed]:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle][data-part-root][data-pressed]:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-pressed-background,
       var(--slotted-tone-accent-subtle-active, Highlight)
@@ -198,18 +198,14 @@
    * is on answers the pointer on the accent ground's own steps, so the two
    * states share no surface in any of theirs.
    */
-  [data-ui='toggle'][data-part='root']:hover:not(:disabled):not([data-disabled]):not(
-      [data-pressed]
-    ) {
+  [data-ui-toggle][data-part-root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]) {
     background: var(
       --slotted-toggle-hover-background,
       var(--slotted-tone-secondary-subtle-hover, ButtonFace)
     );
   }
 
-  [data-ui='toggle'][data-part='root']:active:not(:disabled):not([data-disabled]):not(
-      [data-pressed]
-    ) {
+  [data-ui-toggle][data-part-root]:active:not(:disabled):not([data-disabled]):not([data-pressed]) {
     background: var(
       --slotted-toggle-active-background,
       var(--slotted-tone-secondary-subtle-active, ButtonFace)
@@ -220,14 +216,14 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='toggle'][data-part='root'][data-pressed]:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle][data-part-root][data-pressed]:hover:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-pressed-hover-background,
       var(--slotted-tone-accent-subtle-hover, Highlight)
     );
   }
 
-  [data-ui='toggle'][data-part='root'][data-pressed]:active:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle][data-part-root][data-pressed]:active:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-pressed-background,
       var(--slotted-tone-accent-subtle-active, Highlight)
@@ -235,13 +231,54 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
+  /**
+   * ── Chips ──────────────────────────────────────────────────────────────
+   *
+   * The same chip `toggle-group` draws: a rounded item with the control edge,
+   * pressed in the neutral tone's ink.
+   */
+  [data-ui-toggle][data-part-root][data-variant='chips'] {
+    border-color: var(--_border-color);
+    border-radius: var(--slotted-toggle-chips-radius, var(--slotted-radius-full, 9999px));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui-toggle][data-part-root][data-variant='chips'][data-pressed]:not(:disabled):not(
+      [data-disabled]
+    ),
+  [data-ui-toggle][data-part-root][data-variant='chips'][data-pressed]:active:not(:disabled):not(
+      [data-disabled]
+    ) {
+    background: var(
+      --slotted-toggle-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    border-color: var(
+      --slotted-toggle-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    color: var(--slotted-toggle-chips-pressed-color, var(--slotted-tone-neutral-on-solid, Canvas));
+  }
+
+  [data-ui-toggle][data-part-root][data-variant='chips'][data-pressed]:hover:not(:disabled):not(
+      [data-disabled]
+    ) {
+    background: var(--slotted-tone-neutral-solid-hover, CanvasText);
+    border-color: var(--slotted-tone-neutral-solid-hover, CanvasText);
+  }
+
+  [data-ui-toggle][data-part-root][data-variant='chips']:disabled,
+  [data-ui-toggle][data-part-root][data-variant='chips'][data-disabled] {
+    border-color: var(--slotted-disabled-border, GrayText);
+  }
+
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
   /**
    * A standalone control has room around it, so the ring is held off the
    * edge the way every other control in the library holds it.
    */
-  [data-ui='toggle'][data-part='root']:focus-visible {
+  [data-ui-toggle][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);
   }
@@ -252,15 +289,15 @@
    * `[data-disabled]` as well as `:disabled`, because a control taken out of
    * action with a `fieldset` carries no attribute of its own.
    */
-  [data-ui='toggle'][data-part='root']:disabled,
-  [data-ui='toggle'][data-part='root'][data-disabled] {
+  [data-ui-toggle][data-part-root]:disabled,
+  [data-ui-toggle][data-part-root][data-disabled] {
     background: transparent;
     color: var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));
     cursor: not-allowed;
   }
 
-  [data-ui='toggle'][data-part='root'][data-variant='outline']:disabled,
-  [data-ui='toggle'][data-part='root'][data-variant='outline'][data-disabled] {
+  [data-ui-toggle][data-part-root][data-variant='outline']:disabled,
+  [data-ui-toggle][data-part-root][data-variant='outline'][data-disabled] {
     border-color: var(
       --slotted-toggle-disabled-border-color,
       var(--slotted-disabled-border, GrayText)
@@ -276,8 +313,8 @@
    * cannot change. In `high-contrast` the ground is the page's own white, and
    * the edge is then the only thing carrying it.
    */
-  [data-ui='toggle'][data-part='root'][data-pressed]:disabled,
-  [data-ui='toggle'][data-part='root'][data-pressed][data-disabled] {
+  [data-ui-toggle][data-part-root][data-pressed]:disabled,
+  [data-ui-toggle][data-part-root][data-pressed][data-disabled] {
     background: var(
       --slotted-toggle-disabled-pressed-background,
       var(--slotted-disabled-background, ButtonFace)

package/src/toggle/toggle.tokens.json

@@ -31,9 +31,14 @@
   "--slotted-focus-ring-color",
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
+  "--slotted-font-weight-medium",
+  "--slotted-radius-full",
   "--slotted-text",
   "--slotted-toggle-active-background",
   "--slotted-toggle-border-color",
+  "--slotted-toggle-chips-pressed-background",
+  "--slotted-toggle-chips-pressed-color",
+  "--slotted-toggle-chips-radius",
   "--slotted-toggle-color",
   "--slotted-toggle-disabled-border-color",
   "--slotted-toggle-disabled-color",
@@ -49,6 +54,9 @@
   "--slotted-tone-accent-subtle-active",
   "--slotted-tone-accent-subtle-hover",
   "--slotted-tone-accent-text",
+  "--slotted-tone-neutral-on-solid",
+  "--slotted-tone-neutral-solid",
+  "--slotted-tone-neutral-solid-hover",
   "--slotted-tone-secondary-subtle-active",
   "--slotted-tone-secondary-subtle-hover"
 ]

package/src/toggle-group/toggle-group.css

@@ -32,7 +32,7 @@
    * correctly: a coloured border inside a grey one, and an edge that was one
    * pixel in places and two in others.
    */
-  [data-ui='toggle-group'][data-part='root'] {
+  [data-ui-toggle-group][data-part-root] {
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
     --_font-size: var(--slotted-control-font-size-md, 13px);
@@ -76,13 +76,13 @@
    * from a permission filter renders one often, and an empty box still eats a
    * gap in the row that holds it — `button-group` records the same defect.
    */
-  [data-ui='toggle-group'][data-part='root']:empty {
+  [data-ui-toggle-group][data-part-root]:empty {
     display: none;
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='toggle-group'][data-part='root'][data-size='sm'] {
+  [data-ui-toggle-group][data-part-root][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);
@@ -90,7 +90,7 @@
     --_gap: var(--slotted-control-gap-sm, 6px);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-size='lg'] {
+  [data-ui-toggle-group][data-part-root][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);
@@ -100,7 +100,7 @@
 
   /* ── Orientation ──────────────────────────────────────────────────────── */
 
-  [data-ui='toggle-group'][data-part='root'][data-orientation='vertical'] {
+  [data-ui-toggle-group][data-part-root][data-orientation='vertical'] {
     flex-direction: column;
   }
 
@@ -111,18 +111,18 @@
    * shrinks to its content, which is what a set of formatting toggles beside a
    * paragraph needs and what every surveyed implementation defaults to.
    */
-  [data-ui='toggle-group'][data-part='root'][data-full-width] {
+  [data-ui-toggle-group][data-part-root][data-full-width] {
     display: flex;
     inline-size: 100%;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-full-width] [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-full-width] [data-part-item] {
     flex: 1 1 0;
   }
 
   /* ── The item ─────────────────────────────────────────────────────────── */
 
-  [data-ui='toggle-group'] [data-part='item'] {
+  [data-ui-toggle-group] [data-part-item] {
     align-items: center;
     appearance: none;
     background: transparent;
@@ -176,11 +176,11 @@
    * An item with no words is a square holding one mark, so its inline padding
    * is whatever centres that mark rather than the padding a label needs.
    */
-  [data-ui='toggle-group'] [data-part='item']:not(:has([data-part='label'])) {
+  [data-ui-toggle-group] [data-part-item]:not(:has([data-part-label])) {
     padding-inline: 0;
   }
 
-  [data-ui='toggle-group'] [data-part='icon'] {
+  [data-ui-toggle-group] [data-part-icon] {
     block-size: var(--_icon-size);
     display: inline-flex;
     flex: none;
@@ -193,7 +193,7 @@
    * and what an icon beside it is aligned against. The string stays whole in
    * the DOM — the library's rule is that truncation never removes content.
    */
-  [data-ui='toggle-group'] [data-part='label'] {
+  [data-ui-toggle-group] [data-part-label] {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -201,12 +201,12 @@
 
   /* ── The edge ─────────────────────────────────────────────────────────── */
 
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'] [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-variant='outline'] [data-part-item] {
     border-color: var(--_border-color);
     /* A framed item lifts off its ground at rest, as button's outline does. */
     box-shadow: var(--slotted-toggle-group-shadow, var(--slotted-control-shadow, none));
   }
-  [data-ui='toggle-group'][data-part='root']:not([data-attached]) {
+  [data-ui-toggle-group][data-part-root]:not([data-attached]) {
     gap: var(--_separation);
   }
 
@@ -231,54 +231,54 @@
    * anything: an item that is on replaces the grey line in its column with its
    * own, and the bar's outline stays one pixel everywhere.
    */
-  [data-ui='toggle-group'][data-part='root'][data-attached]:not([data-orientation='vertical'])
-    [data-part='item']
-    + [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-attached]:not([data-orientation='vertical'])
+    [data-part-item]
+    + [data-part-item] {
     margin-inline-start: var(--_overlap);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached][data-orientation='vertical']
-    [data-part='item']
-    + [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-attached][data-orientation='vertical']
+    [data-part-item]
+    + [data-part-item] {
     margin-block-start: var(--_overlap);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached]:not([data-orientation='vertical'])
-    [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-attached]:not([data-orientation='vertical'])
+    [data-part-item] {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached]:not([data-orientation='vertical'])
-    [data-part='item']:first-child {
+  [data-ui-toggle-group][data-part-root][data-attached]:not([data-orientation='vertical'])
+    [data-part-item]:first-child {
     border-end-start-radius: var(--_radius);
     border-start-start-radius: var(--_radius);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached]:not([data-orientation='vertical'])
-    [data-part='item']:last-child {
+  [data-ui-toggle-group][data-part-root][data-attached]:not([data-orientation='vertical'])
+    [data-part-item]:last-child {
     border-end-end-radius: var(--_radius);
     border-start-end-radius: var(--_radius);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached][data-orientation='vertical']
-    [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-attached][data-orientation='vertical']
+    [data-part-item] {
     border-end-start-radius: 0;
     border-end-end-radius: 0;
     border-start-start-radius: 0;
     border-start-end-radius: 0;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached][data-orientation='vertical']
-    [data-part='item']:first-child {
+  [data-ui-toggle-group][data-part-root][data-attached][data-orientation='vertical']
+    [data-part-item]:first-child {
     border-start-end-radius: var(--_radius);
     border-start-start-radius: var(--_radius);
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-attached][data-orientation='vertical']
-    [data-part='item']:last-child {
+  [data-ui-toggle-group][data-part-root][data-attached][data-orientation='vertical']
+    [data-part-item]:last-child {
     border-end-end-radius: var(--_radius);
     border-end-start-radius: var(--_radius);
   }
@@ -290,29 +290,29 @@
    * four edges, and the neighbour after it gives up the leading edge that would
    * otherwise be painted over the accent one.
    */
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'][data-attached]:not(
+  [data-ui-toggle-group][data-part-root][data-variant='outline'][data-attached]:not(
       [data-orientation='vertical']
     )
-    [data-part='item']:not(:last-child):not([data-pressed]) {
+    [data-part-item]:not(:last-child):not([data-pressed]) {
     border-inline-end-color: transparent;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'][data-attached][data-orientation='vertical']
-    [data-part='item']:not(:last-child):not([data-pressed]) {
+  [data-ui-toggle-group][data-part-root][data-variant='outline'][data-attached][data-orientation='vertical']
+    [data-part-item]:not(:last-child):not([data-pressed]) {
     border-block-end-color: transparent;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'][data-attached]:not(
+  [data-ui-toggle-group][data-part-root][data-variant='outline'][data-attached]:not(
       [data-orientation='vertical']
     )
-    [data-part='item'][data-pressed]
-    + [data-part='item'] {
+    [data-part-item][data-pressed]
+    + [data-part-item] {
     border-inline-start-color: transparent;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'][data-attached][data-orientation='vertical']
-    [data-part='item'][data-pressed]
-    + [data-part='item'] {
+  [data-ui-toggle-group][data-part-root][data-variant='outline'][data-attached][data-orientation='vertical']
+    [data-part-item][data-pressed]
+    + [data-part-item] {
     border-block-start-color: transparent;
   }
 
@@ -327,7 +327,7 @@
    * It sits above hover and below disabled, which is the order
    * `STATE_PRECEDENCE` sets.
    */
-  [data-ui='toggle-group'] [data-part='item'][data-pressed]:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle-group] [data-part-item][data-pressed]:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-group-pressed-background,
       var(--slotted-tone-accent-subtle-active, Highlight)
@@ -342,7 +342,7 @@
     );
   }
 
-  [data-ui='toggle-group'] [data-part='item'][data-pressed] {
+  [data-ui-toggle-group] [data-part-item][data-pressed] {
     z-index: 1;
   }
 
@@ -355,16 +355,16 @@
    * that is on answers the pointer on the accent ground's own steps, so the
    * two states share no surface in any of theirs.
    */
-  [data-ui='toggle-group']
-    [data-part='item']:hover:not(:disabled):not([data-disabled]):not([data-pressed]) {
+  [data-ui-toggle-group]
+    [data-part-item]:hover:not(:disabled):not([data-disabled]):not([data-pressed]) {
     background: var(
       --slotted-toggle-group-hover-background,
       var(--slotted-tone-secondary-subtle-hover, ButtonFace)
     );
   }
 
-  [data-ui='toggle-group']
-    [data-part='item']:active:not(:disabled):not([data-disabled]):not([data-pressed]) {
+  [data-ui-toggle-group]
+    [data-part-item]:active:not(:disabled):not([data-disabled]):not([data-pressed]) {
     background: var(
       --slotted-toggle-group-active-background,
       var(--slotted-tone-secondary-subtle-active, ButtonFace)
@@ -375,16 +375,14 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
-  [data-ui='toggle-group']
-    [data-part='item'][data-pressed]:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle-group] [data-part-item][data-pressed]:hover:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-group-pressed-hover-background,
       var(--slotted-tone-accent-subtle-hover, Highlight)
     );
   }
 
-  [data-ui='toggle-group']
-    [data-part='item'][data-pressed]:active:not(:disabled):not([data-disabled]) {
+  [data-ui-toggle-group] [data-part-item][data-pressed]:active:not(:disabled):not([data-disabled]) {
     background: var(
       --slotted-toggle-group-pressed-background,
       var(--slotted-tone-accent-subtle-active, Highlight)
@@ -392,6 +390,55 @@
     transition-duration: var(--slotted-duration-instant);
   }
 
+  /**
+   * ── Chips ──────────────────────────────────────────────────────────────
+   *
+   * A short list of choices as separate rounded items that wrap onto a second
+   * line rather than overflow, never joined into a bar. A chip at rest has the
+   * control edge; the pressed one is the neutral tone's ink — its solid ground
+   * under its own label — which is the one state a chip has to say at a
+   * glance. Hover and press move the ground of a chip at rest only.
+   */
+  [data-ui-toggle-group][data-part-root][data-variant='chips'] {
+    flex-wrap: wrap;
+    gap: var(--slotted-toggle-group-chips-gap, var(--slotted-space-3, 0.375rem));
+  }
+
+  [data-ui-toggle-group][data-part-root][data-variant='chips'] [data-part-item] {
+    border-color: var(--_border-color);
+    border-radius: var(--slotted-toggle-group-chips-radius, var(--slotted-radius-full, 9999px));
+    font-weight: var(--slotted-font-weight-medium, 500);
+  }
+
+  [data-ui-toggle-group][data-part-root][data-variant='chips']
+    [data-part-item][data-pressed]:not(:disabled):not([data-disabled]),
+  [data-ui-toggle-group][data-part-root][data-variant='chips']
+    [data-part-item][data-pressed]:active:not(:disabled):not([data-disabled]) {
+    background: var(
+      --slotted-toggle-group-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    border-color: var(
+      --slotted-toggle-group-chips-pressed-background,
+      var(--slotted-tone-neutral-solid, CanvasText)
+    );
+    color: var(
+      --slotted-toggle-group-chips-pressed-color,
+      var(--slotted-tone-neutral-on-solid, Canvas)
+    );
+  }
+
+  [data-ui-toggle-group][data-part-root][data-variant='chips']
+    [data-part-item][data-pressed]:hover:not(:disabled):not([data-disabled]) {
+    background: var(--slotted-tone-neutral-solid-hover, CanvasText);
+    border-color: var(--slotted-tone-neutral-solid-hover, CanvasText);
+  }
+
+  [data-ui-toggle-group][data-part-root][data-variant='chips'] [data-part-item]:disabled,
+  [data-ui-toggle-group][data-part-root][data-variant='chips'] [data-part-item][data-disabled] {
+    border-color: var(--slotted-disabled-border, GrayText);
+  }
+
   /* ── Focus ────────────────────────────────────────────────────────────── */
 
   /**
@@ -399,7 +446,7 @@
    * edge the way every other control in the library holds it. The focused item
    * is raised above every other, including one that is on.
    */
-  [data-ui='toggle-group'] [data-part='item']:focus-visible {
+  [data-ui-toggle-group] [data-part-item]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: var(--slotted-focus-ring-offset, 2px);
     z-index: 2;
@@ -417,7 +464,7 @@
    * gives. It then replaces that item's own border rather than standing beside
    * it, and every seam in the bar stays one line wide.
    */
-  [data-ui='toggle-group'][data-part='root'][data-attached] [data-part='item']:focus-visible {
+  [data-ui-toggle-group][data-part-root][data-attached] [data-part-item]:focus-visible {
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
 
@@ -428,16 +475,15 @@
    * out of action with a `fieldset` and its items then carry no attribute of
    * their own.
    */
-  [data-ui='toggle-group'] [data-part='item']:disabled,
-  [data-ui='toggle-group'] [data-part='item'][data-disabled] {
+  [data-ui-toggle-group] [data-part-item]:disabled,
+  [data-ui-toggle-group] [data-part-item][data-disabled] {
     background: transparent;
     color: var(--slotted-toggle-group-disabled-color, var(--slotted-disabled-foreground, GrayText));
     cursor: default;
   }
 
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline'] [data-part='item']:disabled,
-  [data-ui='toggle-group'][data-part='root'][data-variant='outline']
-    [data-part='item'][data-disabled] {
+  [data-ui-toggle-group][data-part-root][data-variant='outline'] [data-part-item]:disabled,
+  [data-ui-toggle-group][data-part-root][data-variant='outline'] [data-part-item][data-disabled] {
     border-color: var(
       --slotted-toggle-group-disabled-border-color,
       var(--slotted-disabled-border, GrayText)
@@ -453,8 +499,8 @@
    * a control they cannot change. In `high-contrast` the ground is the page's
    * own white, and the edge is then the only thing carrying it.
    */
-  [data-ui='toggle-group'] [data-part='item'][data-pressed]:disabled,
-  [data-ui='toggle-group'] [data-part='item'][data-pressed][data-disabled] {
+  [data-ui-toggle-group] [data-part-item][data-pressed]:disabled,
+  [data-ui-toggle-group] [data-part-item][data-pressed][data-disabled] {
     background: var(
       --slotted-toggle-group-disabled-pressed-background,
       var(--slotted-disabled-background, ButtonFace)

package/src/toggle-group/toggle-group.tokens.json

@@ -31,9 +31,16 @@
   "--slotted-focus-ring-color",
   "--slotted-focus-ring-offset",
   "--slotted-focus-ring-width",
+  "--slotted-font-weight-medium",
+  "--slotted-radius-full",
+  "--slotted-space-3",
   "--slotted-text",
   "--slotted-toggle-group-active-background",
   "--slotted-toggle-group-border-color",
+  "--slotted-toggle-group-chips-gap",
+  "--slotted-toggle-group-chips-pressed-background",
+  "--slotted-toggle-group-chips-pressed-color",
+  "--slotted-toggle-group-chips-radius",
   "--slotted-toggle-group-color",
   "--slotted-toggle-group-disabled-border-color",
   "--slotted-toggle-group-disabled-color",
@@ -49,6 +56,9 @@
   "--slotted-tone-accent-subtle-active",
   "--slotted-tone-accent-subtle-hover",
   "--slotted-tone-accent-text",
+  "--slotted-tone-neutral-on-solid",
+  "--slotted-tone-neutral-solid",
+  "--slotted-tone-neutral-solid-hover",
   "--slotted-tone-secondary-subtle-active",
   "--slotted-tone-secondary-subtle-hover"
 ]