luxen-ui 0.22.0 → 0.23.0

package/dist/css/elements/badge.css

@@ -1,209 +1,229 @@
+/*
+ * The badge appearance lives in badge-core.css so shadow-DOM elements that render
+ * rich content (l-select / l-combobox options) can adopt it too; layered here
+ * into `@layer components`.
+ */
 @layer components {
+
+/*
+ * Shared `l-badge` appearance — the single source of truth for the badge's look.
+ * Lives in the HTML tree so it is both:
+ *   - `@import`ed (and layered) by src/css/elements/badge.css for light-DOM
+ *     badges, and
+ *   - imported `?inline` into shadow-DOM elements whose rendered content can
+ *     carry a badge (l-select / l-combobox copy each rich option's markup into
+ *     their shadow root, where the global badge stylesheet cannot reach).
+ *
+ * Intentionally UNLAYERED, like button-core.css: the light-DOM import wraps it in
+ * `@layer components` via `@import … layer(components)`, while shadow consumers
+ * want it unlayered alongside their own (also unlayered) styles.
+ */
+
+/*
+  Autonomous custom elements
+  https://blog.jim-nielsen.com/2021/custom-elements-without-js/
+*/
+l-badge {
+  /* Per-variant primitives — set by [variant], consumed by appearance. The
+     public hooks that override them are threaded at the declaration sites
+     below rather than here, so this whole machinery stays untouched: a
+     consumer value is not competing with `[variant]` / `[appearance]` /
+     `[pill]` on specificity, it sits under them.
+
+     Four hooks, and each one earns its place by hiding something a consumer
+     would otherwise have to know:
+
+       --text-color        the line is a tint of it, so one declaration
+                           repaints the whole chip
+       --background-color  which per-appearance token it is replacing
+       --border-color      the 30% mix, and that it holds through `filled`,
+                           whose default line is transparent
+       --border-radius     that the corner is a squircle, not a plain arc
+
+     Size and spacing get no hook on purpose. `--height` / `--font-size` /
+     `--padding-inline` would be pass-throughs to the identically named
+     properties declared a few lines below, hiding nothing — and `size` is
+     already the API for that axis. Three steps are the design; a badge that
+     can be dialled to any height stops being a size step and starts being a
+     box.
+
+     The line derives from `currentColor` rather than from `--_text-color`, so
+     it follows the ink whoever set it — the hook, a variant, or a consumer's
+     own `color` declaration. */
+  --_text-color: var(--l-color-text-neutral);
+  --_background-color: transparent;
+  --_border-color: color-mix(in oklab, currentColor 30%, transparent);
+  --_border-radius: var(--l-radius-md);
+
+  /* Size defaults (md) */
+  --_height: 1.375rem;
+  --_font-size: var(--l-text-xs);
+  --_padding-inline: 0.375rem;
+  --_gap: 0.25rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--_gap);
+  min-height: var(--_height);
+  padding-block: 0.25rem;
+  padding-inline: var(--_padding-inline);
+  border: 1px solid var(--border-color, var(--_border-color));
+  border-radius: var(--border-radius, var(--_border-radius));
+  corner-shape: squircle;
+  background-color: var(--background-color, var(--_background-color));
+  color: var(--text-color, var(--_text-color));
+  font-family: var(--l-font-neo-grotesque);
+  font-size: var(--_font-size);
+  font-weight: var(--l-font-weight-medium);
+  line-height: 1;
+  text-box: trim-both cap alphabetic;
+
   /*
-    Autonomous custom elements
-    https://blog.jim-nielsen.com/2021/custom-elements-without-js/
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆂🅸🆉🅴🆂
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   */
-  l-badge {
-    /* Per-variant primitives — set by [variant], consumed by appearance. The
-       public hooks that override them are threaded at the declaration sites
-       below rather than here, so this whole machinery stays untouched: a
-       consumer value is not competing with `[variant]` / `[appearance]` /
-       `[pill]` on specificity, it sits under them.
-
-       Four hooks, and each one earns its place by hiding something a consumer
-       would otherwise have to know:
-
-         --text-color        the line is a tint of it, so one declaration
-                             repaints the whole chip
-         --background-color  which per-appearance token it is replacing
-         --border-color      the 30% mix, and that it holds through `filled`,
-                             whose default line is transparent
-         --border-radius     that the corner is a squircle, not a plain arc
-
-       Size and spacing get no hook on purpose. `--height` / `--font-size` /
-       `--padding-inline` would be pass-throughs to the identically named
-       properties declared a few lines below, hiding nothing — and `size` is
-       already the API for that axis. Three steps are the design; a badge that
-       can be dialled to any height stops being a size step and starts being a
-       box.
-
-       The line derives from `currentColor` rather than from `--_text-color`, so
-       it follows the ink whoever set it — the hook, a variant, or a consumer's
-       own `color` declaration. */
-    --_text-color: var(--l-color-text-neutral);
-    --_background-color: transparent;
-    --_border-color: color-mix(in oklab, currentColor 30%, transparent);
-    --_border-radius: var(--l-radius-md);
-
-    /* Size defaults (md) */
-    --_height: 1.375rem;
-    --_font-size: var(--l-text-xs);
-    --_padding-inline: 0.375rem;
-    --_gap: 0.25rem;
-
-    display: inline-flex;
-    align-items: center;
-    gap: var(--_gap);
-    min-height: var(--_height);
-    padding-block: 0.25rem;
-    padding-inline: var(--_padding-inline);
-    border: 1px solid var(--border-color, var(--_border-color));
-    border-radius: var(--border-radius, var(--_border-radius));
-    corner-shape: squircle;
-    background-color: var(--background-color, var(--_background-color));
-    color: var(--text-color, var(--_text-color));
-    font-family: var(--l-font-neo-grotesque);
-    font-size: var(--_font-size);
-    font-weight: var(--l-font-weight-medium);
-    line-height: 1;
-    text-box: trim-both cap alphabetic;
-
-    /*
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-     🆂🅸🆉🅴🆂
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    */
-
-    &[size='sm'] {
-      --_height: 1.25rem;
-      --_padding-inline: 0.25rem;
-      --_gap: 0.125rem;
-    }
-    &[size='lg'] {
-      --_height: 1.5rem;
-      --_font-size: var(--l-text-sm);
-      --_padding-inline: 0.5rem;
-    }
 
-    /*
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-     🆅🅰🆁🅸🅰🅽🆃🆂
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    */
+  &[size='sm'] {
+    --_height: 1.25rem;
+    --_padding-inline: 0.25rem;
+    --_gap: 0.125rem;
+  }
+  &[size='lg'] {
+    --_height: 1.5rem;
+    --_font-size: var(--l-text-sm);
+    --_padding-inline: 0.5rem;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🆅🅰🆁🅸🅰🅽🆃🆂
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  &[variant='info'] {
+    --_text-color: var(--l-color-text-info);
+  }
+  &[variant='success'] {
+    --_text-color: var(--l-color-text-success);
+  }
+  &[variant='warning'] {
+    --_text-color: var(--l-color-text-warning);
+  }
+  &[variant='danger'] {
+    --_text-color: var(--l-color-text-danger);
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅰🅿🅿🅴🅰🆁🅰🅽🅲🅴
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  &[appearance='filled'] {
+    --_background-color: var(--l-color-bg-fill-neutral-subtle);
+    --_border-color: transparent;
 
     &[variant='info'] {
-      --_text-color: var(--l-color-text-info);
+      --_background-color: var(--l-color-bg-fill-info-subtle);
     }
     &[variant='success'] {
-      --_text-color: var(--l-color-text-success);
+      --_background-color: var(--l-color-bg-fill-success-subtle);
     }
     &[variant='warning'] {
-      --_text-color: var(--l-color-text-warning);
+      --_background-color: var(--l-color-bg-fill-warning-subtle);
     }
     &[variant='danger'] {
-      --_text-color: var(--l-color-text-danger);
+      --_background-color: var(--l-color-bg-fill-danger-subtle);
     }
+  }
 
-    /*
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-     🅰🅿🅿🅴🅰🆁🅰🅽🅲🅴
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    */
-
-    &[appearance='filled'] {
-      --_background-color: var(--l-color-bg-fill-neutral-subtle);
-      --_border-color: transparent;
-
-      &[variant='info'] {
-        --_background-color: var(--l-color-bg-fill-info-subtle);
-      }
-      &[variant='success'] {
-        --_background-color: var(--l-color-bg-fill-success-subtle);
-      }
-      &[variant='warning'] {
-        --_background-color: var(--l-color-bg-fill-warning-subtle);
-      }
-      &[variant='danger'] {
-        --_background-color: var(--l-color-bg-fill-danger-subtle);
-      }
-    }
+  &[appearance='filled-outlined'] {
+    --_background-color: var(--l-color-bg-fill-neutral-subtle);
 
-    &[appearance='filled-outlined'] {
-      --_background-color: var(--l-color-bg-fill-neutral-subtle);
-
-      &[variant='info'] {
-        --_background-color: var(--l-color-bg-fill-info-subtle);
-      }
-      &[variant='success'] {
-        --_background-color: var(--l-color-bg-fill-success-subtle);
-      }
-      &[variant='warning'] {
-        --_background-color: var(--l-color-bg-fill-warning-subtle);
-      }
-      &[variant='danger'] {
-        --_background-color: var(--l-color-bg-fill-danger-subtle);
-      }
+    &[variant='info'] {
+      --_background-color: var(--l-color-bg-fill-info-subtle);
     }
-
-    &[appearance='accent'] {
-      --_background-color: var(--l-color-bg-fill-neutral-strong);
-      --_text-color: var(--l-color-surface);
-      --_border-color: transparent;
-
-      &[variant='info'] {
-        --_background-color: var(--l-color-bg-fill-info-strong);
-        --_text-color: white;
-      }
-      &[variant='success'] {
-        --_background-color: var(--l-color-bg-fill-success-strong);
-      }
-      &[variant='warning'] {
-        --_background-color: var(--l-color-bg-fill-warning-strong);
-      }
-      &[variant='danger'] {
-        --_background-color: var(--l-color-bg-fill-danger-strong);
-        --_text-color: white;
-      }
+    &[variant='success'] {
+      --_background-color: var(--l-color-bg-fill-success-subtle);
     }
-
-    /*
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-     🅿🅸🅻🅻
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    */
-
-    /* `--border-radius` keeps the squircle; `pill` is what trades it for a true
-       arc, because a squircle at a full radius reads as a blob. */
-    &[pill] {
-      --_border-radius: var(--l-radius-full);
-      corner-shape: unset;
+    &[variant='warning'] {
+      --_background-color: var(--l-color-bg-fill-warning-subtle);
+    }
+    &[variant='danger'] {
+      --_background-color: var(--l-color-bg-fill-danger-subtle);
     }
+  }
 
-    /*
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-     🅸🅲🅾🅽
-    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
-    */
+  &[appearance='accent'] {
+    --_background-color: var(--l-color-bg-fill-neutral-strong);
+    --_text-color: var(--l-color-surface);
+    --_border-color: transparent;
 
-    iconify-icon {
-      color: currentColor;
-      height: 1em;
+    &[variant='info'] {
+      --_background-color: var(--l-color-bg-fill-info-strong);
+      --_text-color: white;
+    }
+    &[variant='success'] {
+      --_background-color: var(--l-color-bg-fill-success-strong);
+    }
+    &[variant='warning'] {
+      --_background-color: var(--l-color-bg-fill-warning-strong);
+    }
+    &[variant='danger'] {
+      --_background-color: var(--l-color-bg-fill-danger-strong);
+      --_text-color: white;
     }
   }
 
-  /* A glyph against an edge earns a tighter padding on that side: its bounding
-     box already reads as air, so the label keeps the full gutter and the chip
-     does not go lopsided.
-
-     Matches whichever icon element the consumer composes — the library's own
-     `l-icon`, a raw `iconify-icon`, or the inline `<svg>` a framework Iconify
-     binding renders. `l-icon` needs naming explicitly: its `iconify-icon` sits
-     in a shadow root this selector cannot see, so matching the inner element
-     alone silently skipped the correction (the icon still laid out — `l-icon`
-     is `display: contents` — it just sat 2px too far in). Same element set
-     `toast.css` and `story.css` already use. */
-  l-badge:has(:is(iconify-icon, l-icon, svg):first-child) {
-    padding-inline-start: 0.25rem;
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅿🅸🅻🅻
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  /* `--border-radius` keeps the squircle; `pill` is what trades it for a true
+     arc, because a squircle at a full radius reads as a blob. */
+  &[pill] {
+    --_border-radius: var(--l-radius-full);
+    corner-shape: unset;
   }
 
-  /* `:not(:first-child)` is what makes a trailing icon addressable at all.
-     `:first-child` and `:last-child` count elements, not text, so an icon that
-     is the badge's only element child matches both — `<l-badge>Lyon <l-icon/>`
-     is indistinguishable from `<l-badge><l-icon/>Lyon`, and the rule above
-     already claims it. Requiring a preceding element keeps that case exactly as
-     it was and makes this one exact: wrap the label (`<span>Lyon</span>`) and
-     the icon is unambiguously at the end. */
-  l-badge:has(:is(iconify-icon, l-icon, svg):last-child:not(:first-child)) {
-    padding-inline-end: 0.25rem;
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   🅸🅲🅾🅽
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  iconify-icon {
+    color: currentColor;
+    height: 1em;
   }
 }
+
+/* A glyph against an edge earns a tighter padding on that side: its bounding
+   box already reads as air, so the label keeps the full gutter and the chip
+   does not go lopsided.
+
+   Matches whichever icon element the consumer composes — the library's own
+   `l-icon`, a raw `iconify-icon`, or the inline `<svg>` a framework Iconify
+   binding renders. `l-icon` needs naming explicitly: its `iconify-icon` sits
+   in a shadow root this selector cannot see, so matching the inner element
+   alone silently skipped the correction (the icon still laid out — `l-icon`
+   is `display: contents` — it just sat 2px too far in). Same element set
+   `toast.css` and `story.css` already use. */
+l-badge:has(:is(iconify-icon, l-icon, svg):first-child) {
+  padding-inline-start: 0.25rem;
+}
+
+/* `:not(:first-child)` is what makes a trailing icon addressable at all.
+   `:first-child` and `:last-child` count elements, not text, so an icon that
+   is the badge's only element child matches both — `<l-badge>Lyon <l-icon/>`
+   is indistinguishable from `<l-badge><l-icon/>Lyon`, and the rule above
+   already claims it. Requiring a preceding element keeps that case exactly as
+   it was and makes this one exact: wrap the label (`<span>Lyon</span>`) and
+   the icon is unambiguously at the end. */
+l-badge:has(:is(iconify-icon, l-icon, svg):last-child:not(:first-child)) {
+  padding-inline-end: 0.25rem;
+}
+}

package/dist/css/elements/checkbox.css

@@ -5,9 +5,7 @@
    `<l-tree-item>` in `selection="multiple"`). The `.l-checkbox` class is the
    canonical primitive (works anywhere); `l-form-field` also auto-styles a bare
    checkbox via a zero-specificity `:where()` selector, so inside a field no
-   class is needed (`unstyled` opts out). See the partial for details. */
-
-/* Shared checkbox appearance — the visual skin behind `.l-checkbox`.
+   class is needed (`unstyled` opts out). See the partial for details. *//* Shared checkbox appearance — the visual skin behind `.l-checkbox`.
 
    Colocated with its `checkbox-appearance.styles.ts` wrapper so Shadow-DOM
    elements that render their own native checkbox (e.g. `<l-tree-item>` in
@@ -164,7 +162,6 @@
    `checkbox-appearance.css` partial: that partial is also loaded into Shadow-DOM
    consumers (e.g. `l-tree-item`), which never opted into a hover glow. Mirrors
    the radio and switch hover language (same `--_halo` flip, same ratio token). */
-
 @layer components {
   .l-checkbox,
   :where(l-form-field:not([unstyled])) > input[type='checkbox']:not([role='switch']) {

package/dist/css/elements/select.css

@@ -12,6 +12,73 @@
    - the picker (::picker(select)) and its items mirror the l-dropdown panel
      (--l-color-surface-overlay / --l-color-border-overlay / --l-shadow-md). */
 
+/* The rich-option suffix (`.l-select-item-suffix`) is shared with the
+   l-select / l-combobox shadow roots from select-item-suffix.css. */
+
+@layer components {
+
+/*
+ * Suffix of a rich option (`.l-select-item-suffix`) — a badge, count or
+ * status icon pinned to the inline-end of the row, after `.l-select-item-text`.
+ * One source for every tier, so they cannot drift apart:
+ *   - `@import`ed (and layered) by src/css/elements/select.css for the native
+ *     `select.l-select` picker, where `.l-select option` is the row, and
+ *   - imported `?inline` into the l-select / l-combobox shadow roots, which copy
+ *     each option's markup and cannot reach the global stylesheet; there
+ *     `:host .option-rich` is the row. `:host` never matches in a document, so
+ *     the light-DOM copy cannot reach a consumer's own `.option-rich`.
+ *
+ * A class, not a `slot="suffix"` attribute hook: in a customizable select the
+ * <option> has its own UA shadow root, so a child carrying a `slot` it has no
+ * slot for is not rendered at all. A class keeps one markup for every tier.
+ *
+ * Intentionally UNLAYERED, like button-core.css. Each tier hides the suffix in
+ * its own trigger next to its description rule.
+ */
+
+/* The row's line box as an absolute length — the title's line, since the title
+   inherits the row's font and line-height. Registered so `1lh` resolves on the
+   row and is inherited as a length; unregistered it would resolve on the
+   smaller suffix. A shadow root ignores this rule, so rich-option.ts also
+   registers it from JS. */
+@property --_select-item-line {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+
+:is(.l-select option, :host .option-rich) {
+  --_select-item-line: 1lh;
+}
+
+.l-select-item-suffix {
+  display: inline-flex;
+  /* Never shrinks: the text column gives way first and its title truncates. */
+  flex: 0 0 auto;
+  align-items: center;
+  /* Sits on the title's line rather than the row's middle — like the checkmark
+     and the media — so a wrapping description never moves it: a box exactly one
+     title line tall, pinned to the top, centres its content on that line. Content
+     taller than the line (a badge in a tight row, an avatar) overflows it evenly
+     above and below, into the row's padding, and never moves the title. */
+  align-self: flex-start;
+  block-size: var(--_select-item-line);
+  gap: 0.25rem;
+  margin-inline-start: auto;
+  white-space: nowrap;
+  color: var(--l-color-text-tertiary);
+  font-size: 0.75rem;
+}
+
+/* In a picker row that carries a suffix, the text column is pinned to the top
+   too, so the title shares the suffix's line in a centred row (l-combobox).
+   Scoped to the rows: the trigger's copy of the selected option (where the
+   suffix is hidden) keeps its own centring. */
+:is(.l-select option, :host .option-rich) > .l-select-item-text:has(~ .l-select-item-suffix) {
+  align-self: flex-start;
+}
+}
+
 @layer components {
   .l-select {
     /* Public knobs — mirror l-input so a select sits consistently among the
@@ -111,9 +178,10 @@
       overflow: hidden;
     }
 
-    /* Keep the trigger compact when a rich option is selected: only the title
-       is mirrored into the value, the secondary description is dropped. */
-    & selectedcontent .l-select-item-description {
+    /* Keep the trigger compact when a rich option is selected: only the media
+       and title are mirrored into the value — the secondary description and the
+       suffix (badge, count, status icon) stay in the picker. */
+    & selectedcontent :is(.l-select-item-description, .l-select-item-suffix) {
       display: none;
     }