@godxjp/ui 19.1.0 → 19.2.0

package/dist/styles/control.css

@@ -1,6 +1,4 @@
-/*
- * CONTROLS — height, padding, font size follow active density tokens.
- */
+
 
 @layer components {
   .ui-toggle {
@@ -70,6 +68,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
     gap: var(--control-gap);
     white-space: nowrap;
     border-radius: var(--control-radius);
@@ -102,8 +101,7 @@
   .ui-button--default {
     background: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
-    /* Brand glow layers on top of the resting shadow; --shadow-glow is invisible by default
-     * (quiet) so a service opts the CTA halo in by setting the token alone. */
+
     box-shadow: var(--shadow-sm), var(--shadow-glow);
   }
 
@@ -117,10 +115,6 @@
     box-shadow: var(--shadow-sm);
   }
 
-  /* SOLID hover/active tokens, never `--destructive / 0.9`: an alpha fill composites with whatever
-   * surface sits behind the button (a lighter Card/AlertDialog vs the page), so the effective colour
-   * — and its contrast with the label — drifts per context and can dip below AA (gh#199). The solid
-   * --destructive-hover/active are tuned to clear 4.5:1 on every surface. */
   .ui-button--destructive:hover {
     background: hsl(var(--destructive-hover));
   }
@@ -129,9 +123,6 @@
     background: hsl(var(--destructive-active));
   }
 
-  /* Outline + ghost set their text colour EXPLICITLY (read --foreground) — never rely on inherited
-   * body colour. Inheriting breaks in a scoped dark region (e.g. an on-navy hero): the body's
-   * computed dark colour would carry in and the label goes near-invisible on the dark fill. */
   .ui-button--outline {
     border: 1px solid hsl(var(--input));
     background: hsl(var(--background));
@@ -183,11 +174,6 @@
     height: var(--control-icon-size-sm);
   }
 
-  /* A Badge nested in a Button is a compact count/indicator chip, not a free-standing status
-   * chip. A full-height badge grows to the button's inner edges, so its border and (tighter)
-   * corner radius collide with the button's rounded border — it looks like the badge "cuts"
-   * the button outline. Drop its own vertical padding and pin the line box + radius so it
-   * always sits cleanly inside the button at every control height. */
   .ui-button [data-slot="badge"] {
     padding-block: 0;
     line-height: var(--line-height-tight);
@@ -206,18 +192,12 @@
     padding: 0;
   }
 
-  /* Icon-only sizes must be square at the SAME height as their text-size counterpart, so an
-   * icon button can sit flush beside a labelled one (split buttons, toolbars). Derive them from
-   * the density tokens — never from a hand-written offset off the base --control-height, which
-   * is how icon-sm drifted a step down to the xs height (issue #133). */
   .ui-button--icon-xs {
     width: var(--control-height-xs);
     height: var(--control-height-xs);
     padding: 0;
   }
 
-  /* Rule #24: compact visual tiers never shrink the actual coarse-pointer hit target below 44px.
-   * The glyph remains 12px; only the interactive square expands. */
   @media (pointer: coarse) {
     .ui-button--icon-xs {
       width: var(--control-height-default);
@@ -257,25 +237,17 @@
     box-shadow: var(--control-shadow);
   }
 
-  /* TEXTAREA AUTO-GROW (gh#310) — the box grows with its content, bounded in TEXT ROWS.
-   *
-   * TECHNIQUE: the replicated-content grid. The wrapper is a one-cell grid; a hidden `::after`
-   * carrying the same text in the same typography occupies that cell and SIZES the row, and the
-   * textarea (a grid item, `align-self: stretch` by default) fills whatever the row became. The
-   * JS side therefore only ever WRITES one attribute — it never reads `scrollHeight`, never sets
-   * `style.height`, and so never forces a synchronous reflow per keystroke, and never touches
-   * `scrollTop` (which is what makes typing in the middle of a long value jump).
-   *
-   * Both bounds live on the PSEUDO-ELEMENT rather than on the textarea, deliberately: a
-   * pseudo-element is out of reach of Tailwind utilities, so `variant="ghost"`'s `min-h-0`
-   * (@layer utilities, which beats anything here in @layer components) cannot silently defeat
-   * the floor the way it would if the bounds sat on the control itself. */
+  .ui-control:disabled,
+  .ui-control[data-disabled],
+  .ui-control-multiline:disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
   .ui-textarea-autogrow {
     position: relative;
     display: grid;
-    /* `minmax(0, 1fr)`, never the default `auto`: an auto column is sized by the replica's
-     * MAX-CONTENT, so a single unbroken 2,000-character token would widen the column — and with
-     * it the control — to 18,000px instead of wrapping. Measured, not assumed. */
+
     grid-template-columns: minmax(0, 1fr);
     inline-size: 100%;
   }
@@ -288,13 +260,10 @@
   .ui-textarea-autogrow::after {
     content: attr(data-autogrow-value) " ";
     visibility: hidden;
-    /* Explicit, not inherited from preflight: the replica's bounds are BORDER-box measures, and a
-     * content-box replica overshoots every height by the box inset. */
+
     box-sizing: border-box;
     margin: 0;
-    /* `pre-wrap` + `break-word` is the UA treatment of a textarea's own text: newlines are kept,
-     * an unbroken 2,000-character token wraps instead of widening the box. The trailing " " is
-     * what keeps a value ending in a newline one row taller, exactly as the control renders it. */
+
     white-space: pre-wrap;
     overflow-wrap: break-word;
     font-size: var(--control-font-size);
@@ -302,8 +271,7 @@
     padding-block: var(--control-multiline-padding-block);
     padding-inline: var(--control-padding-x);
     border: var(--control-border-width) solid transparent;
-    /* The floor never undercuts the control tier, so a resting one-row composer still lines up
-     * with the Input / Button on its row; above it the box counts in rows. */
+
     min-block-size: max(
       var(--control-height),
       calc(
@@ -319,7 +287,6 @@
     );
   }
 
-  /* The ghost variant draws no border, so the row maths must not add one back. */
   .ui-textarea-autogrow--ghost {
     --textarea-autogrow-box-inset: calc(var(--control-multiline-padding-block) * 2);
   }
@@ -329,10 +296,9 @@
   }
 
   .ui-textarea-autogrow > .ui-control-multiline {
-    /* The mirror owns the floor; the control must be free to stretch down to it. */
+
     min-block-size: 0;
-    /* Growth is the box's job, not a drag handle's, and past the ceiling the control scrolls
-     * itself rather than pushing the page. */
+
     resize: none;
     overflow-y: auto;
     line-height: var(--textarea-autogrow-line-height, var(--line-height-normal));
@@ -354,9 +320,7 @@
   .ui-choice-group[data-orientation="horizontal"] {
     display: flex;
     flex-wrap: wrap;
-    /* Occupy the control height and centre the row so a horizontal radio/checkbox
-     * group lines up with sibling inputs in a horizontal FormField (its options
-     * are only ~icon-height tall, which otherwise sat above the field label). */
+
     align-items: center;
     min-height: var(--control-height);
     column-gap: var(--choice-group-gap-x);
@@ -391,28 +355,6 @@
     font-size: var(--choice-description-font-size);
   }
 
-  /* Label primitive (#319). Its box and type were Tailwind literals on label.tsx
-   * (`flex items-center gap-2 text-sm leading-none select-none`), so a service theme could not
-   * retune the label type ramp or the label→addon gap without forking the component.
-   *
-   * SOURCE ORDER IS LOAD-BEARING — this rule MUST stay AFTER `.ui-choice-label` above.
-   * `Field` renders `<Label className="ui-choice-label">`, so that element carries both classes at
-   * equal specificity (0,1,0) in the same layer and the LATER rule wins. Today the `text-sm`
-   * utility out-ranks `.ui-choice-label`'s `font-size: var(--font-size-base)` outright (utilities
-   * are layered after components); putting `.ui-label` EARLIER would hand every checkbox/radio
-   * label back to `.ui-choice-label` and silently change its type. `font-weight` is deliberately
-   * NOT declared here for the same reason: `.ui-choice-label` sets `--font-weight-normal` and
-   * Label's `font-medium` utility beats it today, so `font-medium` stays a utility.
-   *
-   * The disabled states stay utilities too (`peer-disabled:` / `group-data-[disabled=true]:`):
-   * a state must out-rank the resting rule, which in Tailwind v4 means the utilities layer. So
-   * does `line-height` — the `leading-none` it replaces existed precisely to beat the companion
-   * line-height that every `text-*` utility carries, and only a utility can still do that when a
-   * consumer passes their own `text-lg`. Its value is --control-label-line-height all the same.
-   *
-   * Not a regression for the auth shell: the canonical field-label override in shell-layout.css is
-   * INTENTIONALLY UNLAYERED (gh#263) and unlayered author CSS still beats every layer, so it keeps
-   * winning over these declarations exactly as it won over the utilities. */
   .ui-label {
     display: flex;
     align-items: center;
@@ -439,10 +381,6 @@
     border-radius: var(--radius-pill);
   }
 
-  /* `:disabled` only matches form elements, so a purely visual checkbox rendered as a <span>
-   * (Cascader's CheckboxVisual, Transfer's row marks) never picked this up and had to repeat
-   * `cursor-not-allowed opacity-50` on the component instead (#319). Matching [data-disabled]
-   * too lets those share the one rule. The alpha is the system token, not a literal 0.5. */
   .ui-checkbox:disabled,
   .ui-radio:disabled,
   .ui-slider-thumb:disabled,
@@ -477,6 +415,16 @@
     fill: currentColor;
   }
 
+  .ui-switch[aria-invalid="true"] {
+    --tw-ring-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+  }
+
+  .ui-tag-input[aria-invalid="true"],
+  .ui-tag-input:has([aria-invalid="true"]) {
+    border-color: hsl(var(--destructive));
+  }
+
   .ui-switch {
     display: inline-flex;
     width: var(--switch-width);
@@ -790,331 +738,323 @@
   }
 }
 
-/* PasswordInput */
-.ui-password-input {
-  position: relative;
-  display: block;
-}
-.ui-password-input-field {
-  padding-inline-end: 2.5rem;
-}
-.ui-password-input-toggle {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.5rem;
-  color: hsl(var(--muted-foreground));
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-}
-.ui-password-input-toggle:hover {
-  color: hsl(var(--foreground));
-}
-.ui-password-input-toggle svg {
-  width: 1rem;
-  height: 1rem;
-}
+@layer components {
+  .ui-password-input {
+    position: relative;
+    display: block;
+  }
+  .ui-password-input-field {
+    padding-inline-end: 2.5rem;
+  }
+  .ui-password-input-toggle {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    color: hsl(var(--muted-foreground));
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+  .ui-password-input-toggle:hover {
+    color: hsl(var(--foreground));
+  }
+  .ui-password-input-toggle svg {
+    width: 1rem;
+    height: 1rem;
+  }
 
-/* InputOTP */
-.ui-otp-container {
-  display: flex;
-  align-items: center;
-  justify-content: var(--otp-container-align, flex-start);
-  gap: var(--space-2);
-}
-/* `align` on InputOTP lands on the hidden <input> (input-otp owns the container element), so the
- * container reads it through :has() — the same mechanism this file already uses for the invalid
- * and disabled states. Specificity puts the per-instance prop above the theme token. */
-.ui-otp-container:has(.ui-otp-input[data-align="center"]) {
-  justify-content: center;
-}
-.ui-otp-container:has(.ui-otp-input[data-align="end"]) {
-  justify-content: flex-end;
-}
-.ui-otp-input:disabled {
-  cursor: not-allowed;
-}
-.ui-otp-group {
-  display: flex;
-  align-items: center;
-}
-.ui-otp-slot {
-  position: relative;
-  display: flex;
-  width: var(--otp-slot-inline-size, var(--otp-slot-size, var(--control-height)));
-  height: var(--otp-slot-block-size, var(--otp-slot-size, var(--control-height)));
-  align-items: center;
-  justify-content: center;
-  font-size: var(--font-size-base);
-  border: 1px solid hsl(var(--border));
-  border-inline-start-width: 0;
-  background: hsl(var(--background));
-  transition: box-shadow 0.15s ease;
-}
-.ui-otp-group .ui-otp-slot:first-child {
-  border-inline-start-width: 1px;
-  border-start-start-radius: var(--radius-md);
-  border-end-start-radius: var(--radius-md);
-}
-.ui-otp-group .ui-otp-slot:last-child {
-  border-start-end-radius: var(--radius-md);
-  border-end-end-radius: var(--radius-md);
-}
-.ui-otp-group[data-appearance="grouped"] {
-  overflow: hidden;
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius-md);
-  background: hsl(var(--background));
-}
-.ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-}
-.ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
-  box-shadow: none;
-}
-.ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-  border-color: hsl(var(--focus-ring-color, var(--ring)));
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-}
-.ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-group[data-appearance="grouped"] {
-  border-color: hsl(var(--destructive));
-}
-.ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
+  .ui-otp-container {
+    display: flex;
+    align-items: center;
+    justify-content: var(--otp-container-align, flex-start);
+    gap: var(--space-2);
+  }
+
+  .ui-otp-container:has(.ui-otp-input[data-align="center"]) {
+    justify-content: center;
+  }
+  .ui-otp-container:has(.ui-otp-input[data-align="end"]) {
+    justify-content: flex-end;
+  }
+  .ui-otp-input:disabled {
+    cursor: not-allowed;
+  }
+  .ui-otp-group {
+    display: flex;
+    align-items: center;
+  }
+  .ui-otp-slot {
+    position: relative;
+    display: flex;
+    width: var(--otp-slot-inline-size, var(--otp-slot-size, var(--control-height)));
+    height: var(--otp-slot-block-size, var(--otp-slot-size, var(--control-height)));
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-base);
+    border: var(--control-border-width) solid hsl(var(--border));
+    border-inline-start-width: 0;
+    background: hsl(var(--background));
+    transition: box-shadow 0.15s ease;
+  }
+  .ui-otp-group .ui-otp-slot:first-child {
+    border-inline-start-width: var(--control-border-width);
+    border-start-start-radius: var(--radius-md);
+    border-end-start-radius: var(--radius-md);
+  }
+  .ui-otp-group .ui-otp-slot:last-child {
+    border-start-end-radius: var(--radius-md);
+    border-end-end-radius: var(--radius-md);
+  }
+  .ui-otp-group[data-appearance="grouped"] {
+    overflow: hidden;
+    border: var(--control-border-width) solid hsl(var(--border));
+    border-radius: var(--radius-md);
+    background: hsl(var(--background));
+  }
+  .ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+  .ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
+    box-shadow: none;
+  }
   .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-}
-.ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
-  background: hsl(var(--muted));
-}
-.ui-otp-slot[data-active="true"] {
-  z-index: 1;
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-}
-.ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
-  border-color: hsl(var(--destructive));
-}
-.ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot[data-active="true"] {
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
-}
-.ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
-  cursor: not-allowed;
-  background: hsl(var(--muted));
-  color: hsl(var(--muted-foreground));
-}
-.ui-otp-caret-wrapper {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ui-otp-caret {
-  width: var(--otp-caret-inline-size);
-  height: var(--otp-caret-block-size);
-  background: hsl(var(--foreground));
-  animation: ui-otp-blink 1s step-end infinite;
-}
-@keyframes ui-otp-blink {
-  50% {
-    opacity: 0;
+    border-color: hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+    box-shadow: 0 0 0 var(--focus-ring-width)
+      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+  }
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
+    .ui-otp-group[data-appearance="grouped"] {
+    border-color: hsl(var(--destructive));
+  }
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
+    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+  }
+  .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
+    background: hsl(var(--muted));
+  }
+  .ui-otp-slot[data-active="true"] {
+    z-index: 1;
+    box-shadow: 0 0 0 var(--focus-ring-width)
+      hsl(var(--focus-ring-color, var(--ring)) / var(--focus-ring-opacity, 1));
+  }
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
+    border-color: hsl(var(--destructive));
+  }
+  .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot[data-active="true"] {
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+  }
+  .ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-slot {
+    cursor: not-allowed;
+    background: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+  }
+  .ui-otp-caret-wrapper {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .ui-otp-caret {
+    width: var(--otp-caret-inline-size);
+    height: var(--otp-caret-block-size);
+    background: hsl(var(--foreground));
+    animation: ui-otp-blink 1s step-end infinite;
+  }
+  @keyframes ui-otp-blink {
+    50% {
+      opacity: 0;
+    }
+  }
+  .ui-otp-separator-icon {
+    width: var(--otp-separator-icon-size);
+    height: var(--otp-separator-icon-size);
+    color: hsl(var(--muted-foreground));
   }
-}
-.ui-otp-separator-icon {
-  width: var(--otp-separator-icon-size);
-  height: var(--otp-separator-icon-size);
-  color: hsl(var(--muted-foreground));
-}
 
-/* Rating */
-.ui-rating {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  /* A 10-star scale needs ~276px of hit area; a 320px viewport offers ~212 inside a card. Without
-   * wrapping, the last stars are painted outside the surface with nothing to scroll them into
-   * view, so they can be neither seen nor clicked (WCAG 2.1.1 / 2.4.7). Wrapping keeps every star
-   * reachable and is a no-op wherever the row already fits. */
-  flex-wrap: wrap;
-}
-.ui-rating-star {
-  /* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-  color: hsl(var(--muted-foreground) / 0.45);
-  line-height: 0;
-}
-.ui-rating-star:disabled {
-  cursor: default;
-}
-.ui-rating-star svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-.ui-rating-star-filled {
-  color: hsl(var(--warning));
-}
-.ui-rating-star-filled svg {
-  fill: currentColor;
-}
-.ui-rating-star:focus-visible {
-  border-radius: var(--radius-sm);
-}
+  .ui-rating {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
 
-/* TagInput */
-.ui-tag-input {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: var(--control-height);
-  padding: var(--space-1) var(--space-2);
-  border: 1px solid hsl(var(--input));
-  border-radius: var(--radius-md);
-  background: hsl(var(--background));
-}
-.ui-tag-input:focus-within {
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-  border-color: hsl(var(--focus-ring-color, var(--ring)));
-}
-.ui-tag-input-disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-/* The chip list is its own flex row: a real `gap` separates peer chips on the
-   8px step (distinct concepts, not a tight group) instead of relying on
-   collapsed inline whitespace, and flex drops the inter-element whitespace. */
-.ui-tag-input-list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-2);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.ui-tag-input-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1);
-  font-size: var(--tag-input-chip-font-size);
-  padding: 0.0625rem var(--space-2);
-  border-radius: var(--radius-sm);
-  background: hsl(var(--secondary));
-  color: hsl(var(--secondary-foreground));
-}
-.ui-tag-input-remove {
-  /* ≥24px hit area (WCAG 2.5.8) around the 12px glyph; negative inline margin keeps the chip tight */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.5rem;
-  min-height: 1.5rem;
-  margin-inline-end: -0.25rem;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-  color: inherit;
-  opacity: 0.7;
-}
-.ui-tag-input-remove:hover {
-  opacity: 1;
-}
-.ui-tag-input-remove svg {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-.ui-tag-input-field {
-  flex: 1;
-  min-width: 6rem;
-  border: 0;
-  outline: none;
-  background: transparent;
-  font-size: var(--font-size-base);
-  color: inherit;
-}
+    flex-wrap: wrap;
+  }
+  .ui-rating-star {
 
-/* NumberInput — spinbutton: composed Input + leading/trailing affix + stepper Buttons.
-   `data-size` remaps the --control-height tier so the inner .ui-control field tracks it. */
-.ui-number-input {
-  position: relative;
-  display: inline-flex;
-  align-items: stretch;
-  inline-size: 100%;
-}
-.ui-number-input[data-size="xs"] {
-  --control-height: var(--control-height-xs);
-}
-.ui-number-input[data-size="sm"] {
-  --control-height: var(--control-height-sm);
-}
-.ui-number-input[data-size="lg"] {
-  --control-height: var(--control-height-lg);
-}
-/* Reserve room on the trailing edge for the stacked steppers (logical inline-end). */
-.ui-number-input-field {
-  inline-size: 100%;
-  text-align: end;
-  padding-inline-end: calc(var(--control-height) + var(--space-2));
-}
-/* A leading/trailing decorative affix (¥, %) — overlays inside the field. */
-.ui-number-input-affix {
-  position: absolute;
-  inset-block: 0;
-  display: inline-flex;
-  align-items: center;
-  color: hsl(var(--muted-foreground));
-  font-size: var(--font-size-base);
-  pointer-events: none;
-}
-.ui-number-input-affix:first-of-type {
-  inset-inline-start: var(--control-padding-x);
-}
-/* With a leading affix, pad the field's inline-start so digits don't sit under it. */
-.ui-number-input:has(.ui-number-input-affix:first-of-type) .ui-number-input-field {
-  padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
-}
-.ui-number-input-affix:last-of-type {
-  inset-inline-end: calc(var(--control-height) + var(--space-2));
-}
-.ui-number-input-steppers {
-  position: absolute;
-  inset-inline-end: var(--space-1);
-  inset-block: 0;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.0625rem;
-  pointer-events: none;
-}
-.ui-number-input-step {
-  pointer-events: auto;
-  block-size: calc(var(--control-height) / 2 - 0.1875rem);
-  min-block-size: 0;
-  inline-size: 1.5rem;
-}
-.ui-number-input-step svg {
-  inline-size: 0.75rem;
-  block-size: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    color: hsl(var(--muted-foreground) / 0.45);
+    line-height: 0;
+  }
+  .ui-rating-star:disabled {
+    cursor: default;
+  }
+  .ui-rating-star svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .ui-rating-star-filled {
+    color: hsl(var(--warning));
+  }
+  .ui-rating-star-filled svg {
+    fill: currentColor;
+  }
+  .ui-rating-star:focus-visible {
+    border-radius: var(--radius-sm);
+  }
+
+  .ui-tag-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: var(--control-height);
+    padding: var(--space-1) var(--control-padding-x);
+    border: var(--control-border-width) solid hsl(var(--input));
+    border-radius: var(--control-radius);
+    background: hsl(var(--background));
+    box-shadow: var(--control-shadow);
+  }
+  .ui-tag-input-disabled {
+    opacity: var(--disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  .ui-tag-input-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .ui-tag-input-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--tag-input-chip-font-size);
+    padding: 0.0625rem var(--space-2);
+    border-radius: var(--radius-sm);
+    background: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+  }
+  .ui-tag-input-remove {
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    margin-inline-end: -0.25rem;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+  }
+  .ui-tag-input-remove:hover {
+    opacity: 1;
+  }
+  .ui-tag-input-remove svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .ui-tag-input-field {
+    flex: 1;
+    min-width: 6rem;
+    block-size: calc(var(--control-height) - var(--space-1) * 2 - var(--control-border-width) * 2);
+    border: 0;
+    outline: none;
+    background: transparent;
+    font-size: var(--control-font-size);
+    color: inherit;
+  }
+
+  .ui-number-input {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    inline-size: 100%;
+  }
+  .ui-number-input[data-size="xs"] {
+    --control-height: var(--control-height-xs);
+  }
+  .ui-input[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+
+  .ui-number-input[data-size="sm"] {
+    --control-height: var(--control-height-sm);
+  }
+  .ui-number-input[data-size="lg"] {
+    --control-height: var(--control-height-lg);
+  }
+
+  .ui-number-input-field {
+    inline-size: 100%;
+    text-align: end;
+    padding-inline-end: calc(var(--control-height) + var(--space-2));
+  }
+
+  .ui-number-input-affix {
+    position: absolute;
+    inset-block: 0;
+    display: inline-flex;
+    align-items: center;
+    color: hsl(var(--muted-foreground));
+    font-size: var(--font-size-base);
+    pointer-events: none;
+  }
+  .ui-number-input-affix:first-of-type {
+    inset-inline-start: var(--control-padding-x);
+  }
+
+  .ui-number-input:has(.ui-number-input-affix:first-of-type) .ui-number-input-field {
+    padding-inline-start: calc(var(--control-padding-x) + 1.25rem);
+  }
+  .ui-number-input-affix:last-of-type {
+    inset-inline-end: calc(var(--control-height) + var(--space-2));
+  }
+  .ui-number-input-steppers {
+    position: absolute;
+    inset-inline-end: var(--space-1);
+    inset-block: 0;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.0625rem;
+    pointer-events: none;
+  }
+  .ui-number-input-step {
+    pointer-events: auto;
+    block-size: calc(var(--control-height) / 2 - 0.1875rem);
+    min-block-size: 0;
+    inline-size: 1.5rem;
+  }
+  .ui-number-input-step svg {
+    inline-size: 0.75rem;
+    block-size: 0.75rem;
+  }
 }
 
 @layer components {
-  /* SELECT-FAMILY TRAILING AFFIX — the clear ✕ / chevron overlay parked at a trigger's inline
-   * end. Select, SearchSelect and TagInput each repeated the same literal stack (#319); these
-   * are the one shared set of knobs. */
+
   .ui-control-affix {
     position: absolute;
     inset-block: 0;
@@ -1146,7 +1086,6 @@
     flex-shrink: 0;
   }
 
-  /* The chevron is decorative and never interactive, so it keeps the resting weight. */
   .ui-control-affix-indicator {
     opacity: var(--control-affix-rest-alpha);
   }
@@ -1155,7 +1094,6 @@
     padding-inline-end: var(--control-trigger-space-inline-end);
   }
 
-  /* SEARCH-SELECT — Popover + Command combobox. */
   .ui-search-select-panel {
     display: flex;
     flex-direction: column;
@@ -1180,16 +1118,12 @@
     border-block-end: 1px solid hsl(var(--border));
   }
 
-  /* The search field is the panel's own header, so it drops the standalone input chrome. */
   .ui-search-select-search-input {
     border: 0;
     border-radius: 0;
     box-shadow: none;
   }
 
-  /* The panel itself is the focused surface, so the inner search field suppresses its own RING
-   * (this replaces a `focus-visible:ring-0` utility). It must NOT suppress the outline as well —
-   * that would leave keyboard users with no focus affordance at all inside the panel. */
   .ui-search-select-search-input:focus-visible {
     box-shadow: none;
   }
@@ -1202,8 +1136,6 @@
     padding: var(--search-select-list-space-inset);
   }
 
-  /* The consumer's renderOption output — it must be able to truncate inside the row, which is
-   * what min-inline-size:0 buys in a flex child. */
   .ui-search-select-option-slot {
     min-inline-size: 0;
     flex: 1 1 0%;
@@ -1253,7 +1185,6 @@
     block-size: var(--search-select-spinner-size);
   }
 
-  /* Empty / error occupy the panel alone, so they get a taller centred block. */
   .ui-search-select-placeholder {
     padding-inline: var(--search-select-status-space-inline);
     padding-block: var(--search-select-placeholder-space-block);
@@ -1274,7 +1205,7 @@
 }
 
 @layer components {
-  /* CASCADER — column browser (desktop) + flat search list (query mode). */
+
   .ui-cascader-columns {
     display: flex;
     max-block-size: var(--cascader-columns-max-height);
@@ -1307,7 +1238,6 @@
     flex-shrink: 0;
   }
 
-  /* The chevron marks "has children"; it is decorative, so it keeps the resting weight. */
   .ui-cascader-option-chevron {
     inline-size: var(--cascader-option-icon-size);
     block-size: var(--cascader-option-icon-size);
@@ -1336,7 +1266,6 @@
     color: hsl(var(--muted-foreground));
   }
 
-  /* Flat search result row — denser than a column row (no chevron to balance). */
   .ui-cascader-result {
     display: flex;
     inline-size: 100%;
@@ -1355,19 +1284,15 @@
     flex-shrink: 0;
   }
 
-  /* Reserve the check column even when unselected so labels do not jump on select. */
   .ui-cascader-result-icon[data-selected="false"] {
     opacity: 0;
   }
 
-  /* Cascader parks a SMALLER affix closer to the edge than SearchSelect does. Same shared knobs,
-   * component-scoped values — the vocabulary is shared, the calibration is not. */
   .ui-cascader-affix {
     --control-affix-inset-inline-end: var(--space-3);
     --control-affix-action-size: var(--control-affix-icon-size);
   }
 
-  /* Disabled option rows keep pointer-events off and take the one system alpha. */
   .ui-cascader-option[data-disabled],
   .ui-cascader-trigger[data-disabled] {
     pointer-events: none;
@@ -1376,9 +1301,7 @@
 }
 
 @layer components {
-  /* SELECT — the Radix listbox popup. Its row rhythm, separator and label come from the shared
-   * menu rules in navigation-layout.css (the same surface ContextMenu/Menubar/DropdownMenu use);
-   * only what is genuinely Select's own lives here (#319). */
+
   .ui-select-content {
     position: relative;
     z-index: var(--overlay-z-index);
@@ -1396,8 +1319,28 @@
     padding: var(--menu-content-space-inset);
   }
 
-  /* A listbox row has no leading icon column, so it takes a slightly wider inline inset to read
-   * level with a menu row that does. */
+  .ui-select-item,
+  .ui-select-label {
+    border-radius: var(--menu-item-radius);
+    padding-inline: var(--menu-item-space-inline);
+    height: var(--menu-item-height);
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-space-gap);
+    font-size: var(--menu-item-font-size);
+  }
+
+  .ui-select-item,
+  .ui-select-label {
+    border-radius: var(--menu-item-radius);
+    padding-inline: var(--menu-item-space-inline);
+    height: var(--menu-item-height);
+    display: flex;
+    align-items: center;
+    gap: var(--menu-item-space-gap);
+    font-size: var(--menu-item-font-size);
+  }
+
   .ui-select-item {
     position: relative;
     inline-size: 100%;
@@ -1453,7 +1396,7 @@
 }
 
 @layer components {
-  /* TIME PICKER — hour/minute/second scroll columns + an inline affix pair. */
+
   .ui-time-picker-panel {
     inline-size: var(--time-picker-panel-width);
   }
@@ -1523,9 +1466,6 @@
     padding: 0;
   }
 
-  /* Two affix controls (clear + clock), so a wider reserved end than the single-affix triggers. */
-  /* A popover whose content owns its own padding (a Calendar, a month grid) — the panel just
-   * hugs it. Shared by the date/time pickers. */
   .ui-control-panel-flush {
     inline-size: auto;
     padding: 0;
@@ -1541,8 +1481,6 @@
     gap: var(--time-picker-affix-space-gap);
   }
 
-  /* Sits INSIDE the field rather than overlaying it, so it rests a touch heavier than the
-   * overlay affix Select/SearchSelect use. Shared by Input and TimePicker. */
   .ui-control-inline-affix-action {
     display: inline-flex;
     inline-size: var(--control-inline-affix-size);
@@ -1566,7 +1504,6 @@
     block-size: var(--control-inline-affix-icon-size);
   }
 
-  /* The browser-owned file button, restyled to read as a control inside the control. */
   .ui-input::file-selector-button {
     display: inline-flex;
     block-size: var(--input-file-button-height);
@@ -1577,8 +1514,6 @@
     font-weight: var(--font-weight-medium);
   }
 
-  /* A field in a flex row must be allowed to shrink below its content, or a long value pushes
-   * the row wider instead of the text truncating. */
   .ui-input {
     min-inline-size: 0;
   }
@@ -1589,7 +1524,6 @@
     opacity: var(--disabled-opacity);
   }
 
-  /* INPUT affix slots — leading/trailing controls parked inside the field box. */
   .ui-input-affix-wrapper {
     position: relative;
     display: inline-flex;
@@ -1615,16 +1549,12 @@
     inset-inline-end: var(--control-inline-affix-inset-inline);
   }
 
-  /* A textarea has no single line to centre an affix on, so its clear control parks at the
-   * top-end corner. Everything else — box, radius, resting alpha, hover — is the shared
-   * inside-field affix it borrows from Input. */
   .ui-textarea-clear {
     position: absolute;
     inset-block-start: var(--textarea-clear-inset-block-start);
     inset-inline-end: var(--control-inline-affix-inset-inline);
   }
 
-  /* The field reserves room on whichever side carries an affix, so its text never runs under. */
   .ui-input--leading-affix {
     padding-inline-start: var(--control-inline-affix-space-inline-end);
   }
@@ -1635,7 +1565,7 @@
 }
 
 @layer components {
-  /* TREE SELECT — a Select whose panel holds a tree. */
+
   .ui-tree-select-popover {
     inline-size: var(--radix-popover-trigger-width);
     padding: 0;
@@ -1656,8 +1586,6 @@
     color: hsl(var(--muted-foreground));
   }
 
-  /* Indent is base + depth × step, driven by `--tree-select-depth` on the row. It used to be a
-   * magic expression inline in JSX, so no theme could reach it. */
   .ui-tree-select-row {
     display: flex;
     align-items: center;
@@ -1719,8 +1647,6 @@
     gap: var(--tree-select-label-space-gap);
   }
 
-  /* Its clear control is vertically centred against the whole field rather than laid out in a
-   * flex overlay, so it keeps its own rule — but reads the shared affix knobs. */
   .ui-tree-select-clear {
     position: absolute;
     inset-inline-end: var(--space-3);
@@ -1741,15 +1667,13 @@
     opacity: 1;
   }
 
-  /* Reserves room for a clear control that sits further in than the standard overlay affix. */
   .ui-tree-select-trigger-affixed {
     padding-inline-end: var(--space-10);
   }
 }
 
 @layer components {
-  /* CALENDAR — react-day-picker frame. The day/weekday cells keep sizing from --control-height
-   * (a system tier decision); everything around them is now a knob. */
+
   .ui-calendar {
     position: relative;
     inline-size: fit-content;
@@ -1847,8 +1771,6 @@
     z-index: 20;
   }
 
-  /* Scoped to the calendar root so it out-ranks `.ui-button--default-size`, which is declared
-   * later in this file and would otherwise re-apply its block padding to a day cell. */
   .ui-calendar .ui-calendar-day-button {
     inline-size: var(--control-height);
     block-size: var(--control-height);
@@ -1865,10 +1787,24 @@
     color: hsl(var(--muted-foreground));
     opacity: var(--disabled-opacity);
   }
+
+  .ui-calendar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--calendar-footer-space-gap);
+    margin-block-start: var(--calendar-footer-space-block-start);
+    padding-block-start: var(--calendar-footer-space-block-start);
+    border-block-start: var(--calendar-footer-border-width) solid hsl(var(--border));
+  }
+
+  .ui-calendar-footer-today {
+    margin-inline-end: auto;
+  }
 }
 
 @layer components {
-  /* TRANSFER — two-pane list mover. */
+
   .ui-transfer {
     display: flex;
     flex-wrap: wrap;
@@ -1936,8 +1872,6 @@
     font-size: var(--transfer-row-font-size);
   }
 
-  /* Top-aligned against a two-line row, so it takes a hair of optical offset to sit level with
-   * the first line's cap height rather than its box. */
   .ui-transfer-row-check {
     margin-block-start: var(--transfer-row-check-space-block-start);
   }
@@ -1965,8 +1899,7 @@
 }
 
 @layer components {
-  /* MONTH PICKER — the year-nav + 3-column month grid shared by MonthPicker and
-   * MonthRangePicker. One rule set for both; they used to hold identical copies. */
+
   .ui-control-composite-field {
     display: flex;
     inline-size: 100%;
@@ -1974,7 +1907,7 @@
     align-items: center;
     gap: var(--control-composite-field-space-gap);
     border-radius: var(--control-radius);
-    border: 1px solid hsl(var(--input));
+    border-color: hsl(var(--input));
     background: hsl(var(--background));
     outline: none;
     transition:
@@ -2045,8 +1978,7 @@
   .ui-month-picker-grid {
     margin-block-start: var(--month-picker-grid-space-block-start);
     display: grid;
-    /* 3 columns × 4 rows is the month grid's shape, not a service knob — 12 months only read
-     * as a calendar year in this arrangement. */
+
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--month-picker-grid-space-gap);
   }
@@ -2056,7 +1988,6 @@
     font-weight: var(--font-weight-normal);
   }
 
-  /* BUTTON size-xs + icon-adjacent padding + the count pill (#319). */
   .ui-button--xs {
     height: var(--button-xs-height);
     gap: var(--button-xs-space-gap);
@@ -2069,7 +2000,6 @@
     padding-block: var(--button-space-block);
   }
 
-  /* An icon-only child needs less inline room than a label, or the glyph floats in a wide box. */
   .ui-button--default-size:has(> svg),
   .ui-button--md:has(> svg) {
     padding-inline: var(--button-icon-space-inline-md);
@@ -2087,11 +2017,6 @@
     padding-inline: var(--button-icon-space-inline-xs);
   }
 
-  /* COUNT PILL (gh#320). Opaque role fills, not a translucent tint over the button's surface: a
-   * tint takes its contrast from whatever is behind it, and five variant×theme×hover combinations
-   * measured below WCAG 1.4.3's 4.5:1 for small text. The measurements and the share-vs-split
-   * reasoning live in tokens/components/control.css beside the knobs. Same treatment gh#312
-   * validated on Toggle. */
   .ui-button-count {
     display: inline-flex;
     min-inline-size: var(--button-count-min-width);
@@ -2106,9 +2031,6 @@
     font-variant-numeric: tabular-nums;
   }
 
-  /* Each filled variant wears its OWN label pair, swapped. That makes the pill exactly as legible
-   * as the label it sits beside — it cannot be less legible under any theme that keeps the button
-   * itself readable, which a fixed colour could not promise. */
   .ui-button--default .ui-button-count {
     background: var(--button-count-default-background, hsl(var(--primary-foreground)));
     color: var(--button-count-default-color, hsl(var(--primary)));