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

package/src/tags-input/tags-input.css

@@ -2,9 +2,10 @@
   /**
    * ── A frame of typed values, with a field that adds more ────────────────
    *
-   * One subtree, where the consumer wrote it. Nothing is portalled and
-   * nothing opens: the input is a text box, and the values beside it are the
-   * texts the reader typed.
+   * One subtree, where the consumer wrote it. Nothing is portalled: the
+   * input is a text box, and the values beside it are the texts the reader
+   * typed. With `suggestions` the one thing that opens is the listbox of
+   * them, placed under the frame by the positioner with a fixed position.
    *
    *   ┌─ root ─ the frame ─────────────────────────────────────────┐
    *   │ ┌─ control ─ role="grid" ───────────────┐                  │
@@ -53,7 +54,7 @@
 
   /* ── The frame ────────────────────────────────────────────────────────── */
 
-  [data-ui='tags-input'][data-part='root'] {
+  [data-ui-tags-input][data-part-root] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
@@ -123,7 +124,7 @@
       box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);
   }
 
-  [data-ui='tags-input'][data-part='root']:not([data-full-width]) {
+  [data-ui-tags-input][data-part-root]:not([data-full-width]) {
     inline-size: auto;
   }
 
@@ -132,7 +133,7 @@
    * role is what the layout-grid pattern asks for, and the geometry belongs to
    * the row that wraps.
    */
-  [data-ui='tags-input'] > [data-part='control'] {
+  [data-ui-tags-input] > [data-part-control] {
     display: flex;
     flex: 1 1 auto;
     min-inline-size: 0;
@@ -145,7 +146,7 @@
    * what is typed and what acts on it is never narrower than the rhythm inside
    * it. `multi-select` measured the two-pixel version of this and rejected it.
    */
-  [data-ui='tags-input'] > [data-part='control'] + * {
+  [data-ui-tags-input] > [data-part-control] + * {
     margin-inline-start: var(--_row-gap);
   }
 
@@ -154,7 +155,7 @@
    * the reading order stays linear and "previous" and "next" have one meaning
    * each — which is why the grid answers neither `ArrowDown` nor `ArrowUp`.
    */
-  [data-ui='tags-input'] [data-part='chips'] {
+  [data-ui-tags-input] [data-part-chips] {
     /* `safe`, because this box scrolls: centring a scroll container's content
        pushes the first line above the scrollport when there is more than fits,
        and nothing can scroll back to it. `multi-select` found the first three
@@ -193,7 +194,7 @@
     scrollbar-width: none;
   }
 
-  [data-ui='tags-input'] [data-part='chips']::-webkit-scrollbar {
+  [data-ui-tags-input] [data-part-chips]::-webkit-scrollbar {
     display: none;
   }
 
@@ -203,7 +204,7 @@
    * hold the rest, so the row itself opens — the rule after this one — while
    * the control has focus within.
    */
-  [data-ui='tags-input'][data-overflow='collapse']:not([data-expanded]) [data-part='chips'] {
+  [data-ui-tags-input][data-overflow='collapse']:not([data-expanded]) [data-part-chips] {
     flex-wrap: nowrap;
     max-block-size: none;
     overflow: hidden;
@@ -218,9 +219,7 @@
    * No transition. The row's height changes as focus arrives, and a transition
    * would make the reader wait for the chip they are about to reach.
    */
-  [data-ui='tags-input'][data-overflow='collapse'][data-expanded]
-    [data-part='chips']
-    > [data-count] {
+  [data-ui-tags-input][data-overflow='collapse'][data-expanded] [data-part-chips] > [data-count] {
     display: none;
   }
 
@@ -232,7 +231,7 @@
    * belongs to the chip, and the query's own input is told apart by the part it
    * does have.
    */
-  [data-ui='tags-input'] [data-part='chips'] input:not([data-part='input']) {
+  [data-ui-tags-input] [data-part-chips] input:not([data-part-input]) {
     background-color: transparent;
     border: 0;
     color: inherit;
@@ -249,7 +248,7 @@
    * target minimum — so three of them plus their gaps divide the cap above
    * exactly, and no fourth row shows as a sliver under the third.
    */
-  [data-ui='tags-input'] [data-part='chips'] > :not([data-part='field']) {
+  [data-ui-tags-input] [data-part-chips] > :not([data-part-field]) {
     flex: 0 0 auto;
     max-inline-size: 100%;
     min-block-size: var(--_row-size);
@@ -259,10 +258,10 @@
   /**
    * The chip takes the height the inside of this control has, through the
    * property `tag` reads for it. Set on the row, inherited by every chip, and
-   * no rule of this sheet names `[data-ui='tag']`: the host stands beside the
+   * no rule of this sheet names `[data-ui-tag]`: the host stands beside the
    * tag sheet and never reaches into it.
    */
-  [data-ui='tags-input'] [data-part='chips'] {
+  [data-ui-tags-input] [data-part-chips] {
     --slotted-control-inner-size: var(--_inner-size);
   }
 
@@ -273,7 +272,7 @@
    * has somewhere to type and a 240-pixel control holding two values does not
    * stand two rows tall with one row empty.
    */
-  [data-ui='tags-input'] [data-part='field'] {
+  [data-ui-tags-input] [data-part-field] {
     align-items: center;
     display: flex;
     flex: 1 1 var(--slotted-tags-input-field-basis, 4rem);
@@ -287,7 +286,7 @@
    * composition, autofill, the browser's own completion from a `datalist`, and
    * every native attribute the consumer wrote.
    */
-  [data-ui='tags-input'] [data-part='input'] {
+  [data-ui-tags-input] [data-part-input] {
     background-color: transparent;
     border: 0;
     color: inherit;
@@ -302,18 +301,28 @@
     text-overflow: ellipsis;
   }
 
-  [data-ui='tags-input'] [data-part='input']::placeholder {
+  [data-ui-tags-input] [data-part-input]::placeholder {
     color: var(--slotted-tags-input-placeholder-color, var(--slotted-text-muted, GrayText));
     text-overflow: ellipsis;
   }
 
   /**
-   * Autofill. Chrome paints its own ground over the control's, and a
-   * hundred-pixel inset shadow is the only way to reach it. The signal is kept
-   * rather than erased, in the accent surface the theme owns — the repair
-   * `text-field` makes, for the same reason.
+   * Autofill. Chrome paints its own ground over the input, and a hundred-pixel
+   * inset shadow is the only way to reach it. The signal is kept rather than
+   * erased, in the accent surface the theme owns, and it is the whole
+   * control's: the frame takes the tint under its border and inside its
+   * corner, and the input repaints the browser's ground in the same colour.
+   * Painted on the input alone, the tint left the frame's padding, the slots
+   * and the buttons bare.
    */
-  [data-ui='tags-input'] [data-part='input']:autofill {
+  [data-ui-tags-input][data-part-root]:has([data-part-input]:autofill) {
+    background-color: var(
+      --slotted-tags-input-autofill-background,
+      var(--slotted-tone-accent-surface)
+    );
+  }
+
+  [data-ui-tags-input] [data-part-input]:autofill {
     box-shadow: inset 0 0 0 100px
       var(--slotted-tags-input-autofill-background, var(--slotted-tone-accent-surface));
     -webkit-text-fill-color: var(--slotted-tags-input-color, var(--slotted-text, CanvasText));
@@ -337,7 +346,7 @@
    * its own inner ring two widths in to keep a sliver of ground outside it;
    * here that sliver would cost the text its leading.
    */
-  [data-ui='tags-input'] [data-part='chips'] > :not([data-part='field']):focus-visible {
+  [data-ui-tags-input] [data-part-chips] > :not([data-part-field]):focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(-1 * var(--slotted-focus-ring-width, 2px));
   }
@@ -347,9 +356,9 @@
    * takes focus, and for one long step of the motion scale its edge is the
    * accent's, so a reader who looked away from the ring still sees which chip
    * answered — through the edge token `tag` reads, so this sheet names
-   * `[data-ui='tag']` nowhere.
+   * `[data-ui-tag]` nowhere.
    */
-  [data-ui='tags-input'] [data-part='chips'] > [data-current] {
+  [data-ui-tags-input] [data-part-chips] > [data-current] {
     --slotted-tag-border-color: var(
       --slotted-tags-input-current-border-color,
       var(--slotted-tone-accent-border)
@@ -362,7 +371,7 @@
    * whose last one happens to be a count, and `createCollapse` measures it the
    * way it measures every other unit.
    */
-  [data-ui='tags-input'] [data-part='chips'] > [data-count] {
+  [data-ui-tags-input] [data-part-chips] > [data-count] {
     cursor: pointer;
     flex: none;
   }
@@ -373,7 +382,7 @@
    * too narrow for a chip — because a counter with nothing to count against is
    * furniture.
    */
-  [data-ui='tags-input'] > [data-part='counter'] {
+  [data-ui-tags-input] > [data-part-counter] {
     align-self: center;
     color: var(--slotted-tags-input-counter-color, var(--slotted-text-muted, GrayText));
     flex: none;
@@ -393,13 +402,13 @@
    * uses for a chosen value. Not a warning tone: reaching the limit is the
    * reader arriving somewhere, not going wrong.
    */
-  [data-ui='tags-input'][data-complete] > [data-part='counter'] {
+  [data-ui-tags-input][data-complete] > [data-part-counter] {
     color: var(--slotted-tags-input-counter-complete-color, var(--slotted-tone-accent-text));
     font-weight: var(--slotted-font-weight-medium, 500);
   }
 
   /* Too narrow for a chip: the count is the whole answer. */
-  [data-ui='tags-input'][data-narrow] [data-part='chips'] > :not([data-part='field']) {
+  [data-ui-tags-input][data-narrow] [data-part-chips] > :not([data-part-field]) {
     display: none;
   }
 
@@ -412,7 +421,7 @@
    * The `message` lives inside the chip and the `hint` beside the row; both
    * are positioned against the frame, which is the nearest containing block.
    */
-  [data-ui='tags-input'] :is([data-part='message'], [data-part='hint']) {
+  [data-ui-tags-input] :is([data-part-message], [data-part-hint]) {
     block-size: 1px;
     border: 0;
     clip-path: inset(50%);
@@ -426,7 +435,7 @@
 
   /* ── The button inside the frame ──────────────────────────────────────── */
 
-  [data-ui='tags-input'] > [data-part='clear'] {
+  [data-ui-tags-input] > [data-part-clear] {
     align-items: center;
     align-self: center;
     appearance: none;
@@ -458,7 +467,7 @@
    * control is 24 pixels tall — the WCAG 2.2 minimum — so nothing drawn inside
    * it can also be 24.
    */
-  [data-ui='tags-input'] > [data-part='clear']::after {
+  [data-ui-tags-input] > [data-part-clear]::after {
     content: '';
     inset: min(0px, calc((100% - var(--slotted-target-min, 24px)) / 2));
     position: absolute;
@@ -469,7 +478,7 @@
      the hit area above grows to 44 pixels around them. It does not reach back
      over the chips, where the last chip's remove stands a few pixels away. */
   @media (pointer: coarse) {
-    [data-ui='tags-input'] > [data-part='clear']::after {
+    [data-ui-tags-input] > [data-part-clear]::after {
       inset: min(0px, calc((100% - var(--slotted-target-comfortable, 44px)) / 2));
       inset-inline-start: 0;
     }
@@ -477,13 +486,13 @@
 
   /* The cross is the `Glyph` element the binding renders inside the button,
      drawn at the control's own icon step. */
-  [data-ui='tags-input'] > [data-part='clear'] {
+  [data-ui-tags-input] > [data-part-clear] {
     --slotted-icon-size: var(--_icon-size);
   }
 
   /* ── Size ─────────────────────────────────────────────────────────────── */
 
-  [data-ui='tags-input'][data-part='root'][data-size='sm'] {
+  [data-ui-tags-input][data-part-root][data-size='sm'] {
     --_font-size: var(--slotted-control-font-size-sm, 12px);
     --_height: var(--slotted-control-height-sm, 30px);
     --_inner-size: var(--slotted-control-inner-size-sm, 22px);
@@ -492,7 +501,7 @@
     --_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));
   }
 
-  [data-ui='tags-input'][data-part='root'][data-size='md'] {
+  [data-ui-tags-input][data-part-root][data-size='md'] {
     --_font-size: var(--slotted-control-font-size-md, 13px);
     --_height: var(--slotted-control-height-md, 34px);
     --_padding-inline: var(--slotted-control-padding-inline-md, 13px);
@@ -501,7 +510,7 @@
     --_inner-size: var(--slotted-control-inner-size-md, 24px);
   }
 
-  [data-ui='tags-input'][data-part='root'][data-size='lg'] {
+  [data-ui-tags-input][data-part-root][data-size='lg'] {
     --_font-size: var(--slotted-control-font-size-lg, 14px);
     --_height: var(--slotted-control-height-lg, 38px);
     --_inner-size: var(--slotted-control-inner-size-lg, 28px);
@@ -512,7 +521,7 @@
 
   /* ── Variant ──────────────────────────────────────────────────────────── */
 
-  [data-ui='tags-input'][data-part='root'][data-variant='subtle'] {
+  [data-ui-tags-input][data-part-root][data-variant='subtle'] {
     background-color: var(
       --slotted-tags-input-subtle-background,
       var(--slotted-surface-sunken, Canvas)
@@ -526,7 +535,7 @@
   /* No edge, no lift, no ground and no corner of its own: the cell it sits in
      is the box, the row is the ground, a cell has no corner, and the resting
      shadow would draw the cell where there is none. */
-  [data-ui='tags-input'][data-part='root'][data-variant='plain'] {
+  [data-ui-tags-input][data-part-root][data-variant='plain'] {
     background-color: transparent;
     border-color: transparent;
     border-radius: var(--slotted-radius-none, 0px);
@@ -534,31 +543,31 @@
   }
 
   @media (forced-colors: active) {
-    [data-ui='tags-input'][data-part='root'][data-variant='plain'] {
+    [data-ui-tags-input][data-part-root][data-variant='plain'] {
       border-color: ButtonBorder;
     }
   }
 
   /* ── States on the control ────────────────────────────────────────────── */
 
-  [data-ui='tags-input'][data-part='root']:hover:not([data-disabled]):not([data-readonly]):not(
+  [data-ui-tags-input][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not(
       [data-invalid]
     ) {
     border-color: var(--slotted-tags-input-hover-border-color, var(--slotted-tone-accent-border));
   }
 
-  [data-ui='tags-input'][data-part='root'][data-variant='subtle']:hover:not([data-disabled]):not(
+  [data-ui-tags-input][data-part-root][data-variant='subtle']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has([data-part-input]:autofill)) {
     background-color: var(
       --slotted-tags-input-subtle-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='tags-input'][data-part='root'][data-variant='plain']:hover:not([data-disabled]):not(
+  [data-ui-tags-input][data-part-root][data-variant='plain']:hover:not([data-disabled]):not(
       [data-readonly]
-    ):not([data-invalid]) {
+    ):not([data-invalid]):not(:has([data-part-input]:autofill)) {
     background-color: var(
       --slotted-tags-input-plain-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -571,14 +580,14 @@
    * The frame carries the ring for whatever inside it holds focus — the input
    * or a chip — because the frame is the control a reader is operating.
    */
-  [data-ui='tags-input'][data-part='root']:has([data-part='input']:focus-visible),
-  [data-ui='tags-input'][data-part='root']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-tags-input][data-part-root]:has([data-part-input]:focus-visible),
+  [data-ui-tags-input][data-part-root]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow: var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px)
       var(--slotted-focus-ring-color, Highlight);
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
-    outline-offset: var(--slotted-focus-ring-offset, 2px);
+    outline-offset: var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px));
   }
 
   /**
@@ -588,11 +597,9 @@
    * shadow that appears only under focus is a cell that changes size when it
    * is used.
    */
-  [data-ui='tags-input'][data-part='root'][data-variant='plain']:has(
-      [data-part='input']:focus-visible
-    ),
-  [data-ui='tags-input'][data-part='root'][data-variant='plain']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-tags-input][data-part-root][data-variant='plain']:has([data-part-input]:focus-visible),
+  [data-ui-tags-input][data-part-root][data-variant='plain']:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow: none;
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
@@ -603,13 +610,13 @@
    * is two rings for one focus. The frame keeps its lift and gives up the
    * outline while the ring is inside it.
    */
-  [data-ui='tags-input'][data-part='root']:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-tags-input][data-part-root]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     outline: none;
   }
 
-  [data-ui='tags-input'][data-part='root'][data-invalid] {
+  [data-ui-tags-input][data-part-root][data-invalid] {
     --slotted-focus-ring-color: var(
       --slotted-tags-input-invalid-focus-ring-color,
       var(--slotted-focus-ring-color-invalid, Highlight)
@@ -634,9 +641,9 @@
     box-shadow: var(--_invalid-edge);
   }
 
-  [data-ui='tags-input'][data-part='root'][data-invalid]:has([data-part='input']:focus-visible),
-  [data-ui='tags-input'][data-part='root'][data-invalid]:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible),
+  [data-ui-tags-input][data-part-root][data-invalid]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     box-shadow:
       var(--_invalid-edge),
@@ -644,11 +651,11 @@
         var(--slotted-focus-ring-color, Highlight);
   }
 
-  [data-ui='tags-input'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='input']:focus-visible
+  [data-ui-tags-input][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-input]:focus-visible
     ),
-  [data-ui='tags-input'][data-part='root'][data-variant='plain'][data-invalid]:has(
-      [data-part='chips'] > :not([data-part='field']):focus-visible
+  [data-ui-tags-input][data-part-root][data-variant='plain'][data-invalid]:has(
+      [data-part-chips] > :not([data-part-field]):focus-visible
     ) {
     /* The ring lies inside the box here, over the border and an edge as wide as
        it; the edge reaches past the ring. */
@@ -666,21 +673,24 @@
    * control draws its ring double, which a valid ring is not.
    */
   @media (forced-colors: active) {
-    [data-ui='tags-input'][data-part='root'][data-invalid] {
+    [data-ui-tags-input][data-part-root][data-invalid] {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
         -1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width))
       );
     }
 
-    [data-ui='tags-input'][data-part='root'][data-invalid]:has([data-part='input']:focus-visible) {
+    [data-ui-tags-input][data-part-root][data-invalid]:has([data-part-input]:focus-visible) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
-      outline-offset: var(--slotted-focus-ring-offset, 2px);
+      outline-offset: var(
+        --slotted-control-focus-ring-offset,
+        var(--slotted-focus-ring-offset, 2px)
+      );
     }
 
-    [data-ui='tags-input'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='input']:focus-visible
+    [data-ui-tags-input][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-input]:focus-visible
       ) {
       outline: calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double
         var(--slotted-focus-ring-color, Highlight);
@@ -689,11 +699,11 @@
       );
     }
 
-    [data-ui='tags-input'][data-part='root'][data-invalid]:has(
-        [data-part='chips'] > :not([data-part='field']):focus-visible
+    [data-ui-tags-input][data-part-root][data-invalid]:has(
+        [data-part-chips] > :not([data-part-field]):focus-visible
       ),
-    [data-ui='tags-input'][data-part='root'][data-variant='plain'][data-invalid]:has(
-        [data-part='chips'] > :not([data-part='field']):focus-visible
+    [data-ui-tags-input][data-part-root][data-variant='plain'][data-invalid]:has(
+        [data-part-chips] > :not([data-part-field]):focus-visible
       ) {
       outline: var(--_invalid-edge-width) solid CanvasText;
       outline-offset: calc(
@@ -707,7 +717,7 @@
    * withholds every remove control. The native `readonly` gives the text half;
    * the rest is the family's.
    */
-  [data-ui='tags-input'][data-part='root'][data-readonly] {
+  [data-ui-tags-input][data-part-root][data-readonly] {
     background-color: var(
       --slotted-tags-input-readonly-background,
       var(--slotted-tone-secondary-subtle-hover)
@@ -719,8 +729,8 @@
    * because a disabled `fieldset` disables every control inside it and the
    * control has no way to say so.
    */
-  [data-ui='tags-input'][data-part='root'][data-disabled],
-  [data-ui='tags-input'][data-part='root']:has([data-part='input']:disabled) {
+  [data-ui-tags-input][data-part-root][data-disabled],
+  [data-ui-tags-input][data-part-root]:has([data-part-input]:disabled) {
     background-color: var(
       --slotted-tags-input-disabled-background,
       var(--slotted-disabled-background)
@@ -731,14 +741,14 @@
     cursor: not-allowed;
   }
 
-  [data-ui='tags-input'] > [data-part='clear']:hover:not(:disabled):not([data-disabled]) {
+  [data-ui-tags-input] > [data-part-clear]:hover:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-tags-input-action-hover-background,
       var(--slotted-tone-secondary-subtle-hover)
     );
   }
 
-  [data-ui='tags-input'] > [data-part='clear']:active:not(:disabled):not([data-disabled]) {
+  [data-ui-tags-input] > [data-part-clear]:active:not(:disabled):not([data-disabled]) {
     background-color: var(
       --slotted-tags-input-action-active-background,
       var(--slotted-tone-secondary-subtle-active)
@@ -750,8 +760,61 @@
    * from the input to it has to move something visible, and a ring around the
    * whole frame would sit still while focus moved inside it.
    */
-  [data-ui='tags-input'] > [data-part='clear']:focus-visible {
+  [data-ui-tags-input] > [data-part-clear]:focus-visible {
     outline: var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);
     outline-offset: calc(var(--slotted-focus-ring-offset, 2px) * -1);
   }
+
+  /* ── The suggestions ──────────────────────────────────────────────────── */
+
+  /**
+   * A raised surface as wide as the frame, written where the positioner puts
+   * it: `left` and `top` are its, and the width is the anchor's, which it
+   * publishes. Ten options are seen before the list scrolls.
+   */
+  [data-ui-tags-input] > [data-part-suggestions] {
+    background-color: var(--slotted-surface-raised, Canvas);
+    border: var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, GrayText);
+    border-radius: var(--slotted-radius-lg, 8px);
+    box-shadow: var(--slotted-shadow-md);
+    box-sizing: border-box;
+    color: var(--slotted-text, CanvasText);
+    font-size: var(--_font-size);
+    /* No inset of its own: the positioner writes `left` and `top`, and an
+       inline inset would resolve to `right` in a right-to-left document. */
+    inline-size: var(--slotted-positioner-anchor-width, 100%);
+    max-block-size: calc(10 * var(--_height) + 2 * var(--slotted-space-2, 0.25rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--slotted-space-2, 0.25rem);
+    position: fixed;
+    z-index: calc(var(--slotted-z-index-popover, 1100) + var(--slotted-layer-depth, 0));
+  }
+
+  /* One option is one control row, so the list reads at the frame's own step. */
+  [data-ui-tags-input] > [data-part-suggestions] > [data-part-suggestion] {
+    align-items: center;
+    border-radius: var(--slotted-control-radius, 4px);
+    cursor: default;
+    display: flex;
+    min-block-size: var(--_height);
+    overflow-wrap: anywhere;
+    padding-inline: var(--_padding-inline);
+  }
+
+  /**
+   * The highlight follows the arrow keys and the pointer alike. The `-active`
+   * step of the neutral tone, the one that lifts off a raised surface in every
+   * scheme, as `combobox.css` explains.
+   */
+  [data-ui-tags-input] > [data-part-suggestions] > [data-highlighted] {
+    background-color: var(--slotted-tone-secondary-subtle-active);
+  }
+
+  @media (forced-colors: active) {
+    [data-ui-tags-input] > [data-part-suggestions] > [data-highlighted] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
 }

package/src/tags-input/tags-input.tokens.json

@@ -1,7 +1,9 @@
 [
   "--slotted-border-subtle",
+  "--slotted-border-width-thin",
   "--slotted-control-border-color",
   "--slotted-control-border-width",
+  "--slotted-control-focus-ring-offset",
   "--slotted-control-font-family",
   "--slotted-control-font-size-lg",
   "--slotted-control-font-size-md",
@@ -38,9 +40,12 @@
   "--slotted-font-size-xs",
   "--slotted-font-weight-medium",
   "--slotted-line-height-sm",
+  "--slotted-radius-lg",
   "--slotted-radius-none",
+  "--slotted-shadow-md",
   "--slotted-space-1",
   "--slotted-space-2",
+  "--slotted-surface-raised",
   "--slotted-surface-sunken",
   "--slotted-tags-input-action-active-background",
   "--slotted-tags-input-action-color",
@@ -80,5 +85,6 @@
   "--slotted-tone-accent-text",
   "--slotted-tone-danger-border",
   "--slotted-tone-secondary-subtle-active",
-  "--slotted-tone-secondary-subtle-hover"
+  "--slotted-tone-secondary-subtle-hover",
+  "--slotted-z-index-popover"
 ]