@godxjp/ui 18.15.3 → 19.0.0

package/dist/styles/motion.css

@@ -50,3 +50,181 @@
     }
   }
 }
+
+/*
+ * AMBIENT MOTION — the `Activity` primitive (gh#313): a continuous, unbounded "something is
+ * happening right now, elsewhere" mark. The LOOP counterpart to `.ui-reveal`'s one-shot entrance,
+ * living in the same file so the library keeps exactly one place where motion is written.
+ *
+ * NOT `.ui-skeleton-block` (content is loading — `aria-busy`), NOT the Button spinner (this action
+ * is in flight). Every interval, offset, size and colour reads a token, so a service retunes the
+ * whole ambient feel from its theme instead of forking a `@keyframes` (cardinal rule #45).
+ *
+ * REDUCED MOTION IS A DESIGNED FRAME, NOT AN ABSENCE. Under `prefers-reduced-motion: reduce` the
+ * loops are dropped and every mark falls back to its BASE rule, which is authored to be a legible
+ * resting state: three solid dots (a static ellipsis — the same "…" convention the animation
+ * spells out), a solid pulse mark, and a bar segment parked at the reading-start of its track so
+ * the bar can never read as "complete". Nothing is hidden, nothing collapses, no box changes size
+ * — so there is no layout shift either way (WCAG 2.2 SC 2.3.3 / 2.2.2).
+ */
+@layer components {
+  .ui-activity {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--activity-gap);
+    font-size: var(--activity-font-size-sm);
+  }
+  .ui-activity[data-size="xs"] {
+    font-size: var(--activity-font-size-xs);
+  }
+  .ui-activity[data-size="md"] {
+    font-size: var(--activity-font-size-md);
+  }
+  .ui-activity[data-size="lg"] {
+    font-size: var(--activity-font-size-lg);
+  }
+
+  /* The mark row. `block-size` reserves the loop's full travel so a dot at the top of its arc is
+   * never clipped and the row never grows mid-cycle. */
+  .ui-activity-mark {
+    display: inline-flex;
+    align-items: flex-end;
+    gap: var(--activity-gap);
+    block-size: calc(var(--activity-mark-size) + var(--activity-mark-offset));
+    color: hsl(var(--activity-color, var(--muted-foreground)));
+  }
+
+  /* Tone → mark ink. Two-attribute selectors (0,2,0) outrank the muted base (0,1,0). `muted` has
+   * no rule of its own: it IS the base, and therefore the one tone `--activity-color` retints. */
+  .ui-activity[data-tone="default"] .ui-activity-mark {
+    color: hsl(var(--foreground));
+  }
+  .ui-activity[data-tone="primary"] .ui-activity-mark {
+    color: hsl(var(--primary));
+  }
+  .ui-activity[data-tone="success"] .ui-activity-mark {
+    color: hsl(var(--success));
+  }
+  .ui-activity[data-tone="warning"] .ui-activity-mark {
+    color: hsl(var(--warning));
+  }
+  .ui-activity[data-tone="destructive"] .ui-activity-mark {
+    color: hsl(var(--destructive));
+  }
+  .ui-activity[data-tone="info"] .ui-activity-mark {
+    color: hsl(var(--info));
+  }
+
+  /* dots — the ellipsis convention. Resting state (= the reduced-motion frame): three solid dots. */
+  .ui-activity-dot {
+    inline-size: var(--activity-mark-size);
+    block-size: var(--activity-mark-size);
+    border-radius: var(--radius-pill);
+    background: currentColor;
+    opacity: 1;
+    animation: ui-activity-bounce var(--activity-interval) var(--ease-standard) infinite;
+  }
+  /* nth-child, not a physical offset: in RTL the flex row lays the dots end→start, so the cascade
+   * follows the reading direction with no `[dir]` rule. */
+  .ui-activity-dot:nth-child(2) {
+    animation-delay: calc(var(--activity-stagger-step) * 1);
+  }
+  .ui-activity-dot:nth-child(3) {
+    animation-delay: calc(var(--activity-stagger-step) * 2);
+  }
+
+  /* pulse — a single breathing mark (live / recording). Opacity only: the reference design keeps
+   * motion LOW, and an opacity loop degrades to a solid mark instead of a resized box. */
+  .ui-activity-pulse {
+    inline-size: var(--activity-pulse-mark-size);
+    block-size: var(--activity-pulse-mark-size);
+    border-radius: var(--radius-pill);
+    background: currentColor;
+    opacity: 1;
+    animation: ui-activity-breathe var(--activity-interval) var(--ease-standard) infinite;
+  }
+
+  /* bar — an indeterminate sweep (syncing). */
+  .ui-activity-bar {
+    position: relative;
+    overflow: hidden;
+    inline-size: var(--activity-bar-width);
+    block-size: var(--activity-bar-height);
+    border-radius: var(--activity-bar-radius);
+    background: hsl(
+      var(--activity-color, var(--muted-foreground)) / var(--activity-bar-track-alpha)
+    );
+  }
+  .ui-activity-bar-segment {
+    position: absolute;
+    inset-block: 0;
+    /* Parked at the reading-start when the animation is dropped: a partial bar, never a full one
+     * (a full track would read as "complete", which is the opposite of indeterminate). */
+    inset-inline-start: 0;
+    inline-size: var(--activity-bar-segment-width);
+    border-radius: inherit;
+    background: currentColor;
+    animation: ui-activity-sweep var(--activity-interval) var(--ease-standard) infinite;
+  }
+
+  /* The label is a real `Text`; it only needs to stop the mark's travel box stretching the row. */
+  .ui-activity-label {
+    min-inline-size: 0;
+  }
+
+  @keyframes ui-activity-bounce {
+    0%,
+    70%,
+    100% {
+      transform: translateY(0);
+      opacity: var(--activity-mark-rest-alpha);
+    }
+    35% {
+      transform: translateY(calc(-1 * var(--activity-mark-offset)));
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-activity-breathe {
+    0%,
+    100% {
+      opacity: var(--activity-mark-rest-alpha);
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes ui-activity-sweep {
+    from {
+      inset-inline-start: calc(-1 * var(--activity-bar-segment-width));
+    }
+    to {
+      inset-inline-start: 100%;
+    }
+  }
+
+  /* Accessibility: no motion → no loop. Every mark falls back to the legible resting state
+   * authored above; the label is visible text either way, so the affordance still says what it
+   * means (WCAG 2.2 SC 2.3.3 Animation from Interactions, SC 2.2.2 Pause/Stop/Hide — an
+   * indefinite loop runs longer than five seconds and the user cannot pause it). */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-activity-dot,
+    .ui-activity-pulse,
+    .ui-activity-bar-segment {
+      animation: none;
+    }
+  }
+
+  /* Forced colours: the OS palette replaces the token ink, so the mark must not depend on it. */
+  @media (forced-colors: active) {
+    .ui-activity-dot,
+    .ui-activity-pulse,
+    .ui-activity-bar-segment {
+      background: CanvasText;
+    }
+    .ui-activity-bar {
+      border: 1px solid CanvasText;
+    }
+  }
+}

package/dist/styles/navigation-layout.css

@@ -42,6 +42,17 @@
     --control-padding-x: var(--app-setting-picker-compact-padding-x);
     --control-font-size: var(--app-setting-picker-compact-font-size);
   }
+  /* Tabs root — the flex box that stacks the strip above its panel (#319). The strip↔panel gap is
+   * a token so a service can retune the tab rhythm to its own grid; `min-inline-size: 0` is NOT a
+   * knob but the flexbox shrink idiom that used to ride along as `min-w-0`: without it the strip's
+   * intrinsic width forces every ancestor wider instead of letting the strip scroll its own
+   * overflow (gh#175). `display:flex` / the vertical column stay on the component — they are
+   * structure, not a service-tunable constant. */
+  [data-slot="tabs"] {
+    min-inline-size: 0;
+    gap: var(--tabs-root-gap);
+  }
+
   [data-slot="tabs-list"] {
     max-inline-size: var(--tabs-list-max-inline-size);
     overflow-x: var(--tabs-list-overflow);
@@ -88,9 +99,19 @@
     }
   }
 
+  /* Pagination chevrons (#319). The `simple` form draws Prev/Next as size="sm" Buttons whose only
+   * content is the glyph, so it must NOT inherit the small-button icon tier — the chevron is the
+   * whole control. Pagination lives in styles/layout.css, but this override has to out-specify
+   * `.ui-button--sm svg` (0,1,1) from styles/control.css, so it is authored here at (0,2,1); a
+   * plain `.ui-pagination svg` rule would lose the cascade and silently shrink both chevrons. */
+  .ui-pagination .ui-button svg {
+    inline-size: var(--pagination-icon-size);
+    block-size: var(--pagination-icon-size);
+  }
+
   .ui-context-menu-content {
-    z-index: 50;
-    min-width: 10rem;
+    z-index: var(--overlay-z-index);
+    min-width: var(--menu-content-min-width);
     overflow: hidden;
     border-radius: var(--radius-md);
     border: 1px solid hsl(var(--border));
@@ -111,14 +132,29 @@
   .ui-menubar-trigger,
   .ui-menubar-sub-trigger,
   .ui-menubar-checkbox-item,
-  .ui-menubar-radio-item {
-    border-radius: var(--radius-sm);
-    padding-inline: var(--space-2);
-    height: 2rem;
+  .ui-menubar-radio-item,
+  .ui-dropdown-menu-item,
+  .ui-dropdown-menu-label,
+  .ui-dropdown-menu-sub-trigger,
+  .ui-dropdown-menu-checkbox-item,
+  .ui-dropdown-menu-radio-item,
+  .ui-dropdown-menu-shortcut,
+  .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(--space-2);
-    font-size: var(--font-size-base);
+    gap: var(--menu-item-space-gap);
+    font-size: var(--menu-item-font-size);
+  }
+
+  /* A row marked inset reserves the indicator column so its label lines up with checked siblings. */
+  .ui-dropdown-menu-item[data-inset="true"],
+  .ui-dropdown-menu-label[data-inset="true"],
+  .ui-dropdown-menu-sub-trigger[data-inset="true"] {
+    padding-inline-start: var(--menu-item-inset-space-inline-start);
   }
 
   .ui-context-menu-item,
@@ -129,6 +165,10 @@
   .ui-menubar-checkbox-item,
   .ui-menubar-radio-item,
   .ui-menubar-sub-trigger,
+  .ui-dropdown-menu-item,
+  .ui-dropdown-menu-checkbox-item,
+  .ui-dropdown-menu-radio-item,
+  .ui-dropdown-menu-sub-trigger,
   .ui-navigation-menu-link {
     cursor: pointer;
     outline: none;
@@ -142,6 +182,8 @@
   .ui-context-menu-sub-trigger:hover,
   .ui-menubar-item:hover,
   .ui-menubar-sub-trigger:hover,
+  .ui-dropdown-menu-item:hover,
+  .ui-dropdown-menu-sub-trigger:hover,
   .ui-navigation-menu-link:hover,
   .ui-navigation-menu-item:hover {
     background: var(--menubar-item-hover-background, hsl(var(--accent)));
@@ -155,6 +197,11 @@
   .ui-menubar-item[data-state="active"],
   .ui-menubar-item[data-state="checked"],
   .ui-menubar-sub-trigger[data-state="open"],
+  .ui-dropdown-menu-item[data-state="open"],
+  .ui-dropdown-menu-item[data-highlighted],
+  .ui-dropdown-menu-checkbox-item[data-highlighted],
+  .ui-dropdown-menu-radio-item[data-highlighted],
+  .ui-dropdown-menu-sub-trigger[data-state="open"],
   .ui-navigation-menu-link[data-highlighted],
   .ui-navigation-menu-item[data-focus-visible] {
     background: var(--menubar-item-hover-background, hsl(var(--accent)));
@@ -162,7 +209,8 @@
   }
 
   .ui-context-menu-item[data-variant="destructive"],
-  .ui-menubar-item[data-variant="destructive"] {
+  .ui-menubar-item[data-variant="destructive"],
+  .ui-dropdown-menu-item[data-variant="destructive"] {
     color: hsl(var(--destructive));
   }
 
@@ -173,21 +221,26 @@
   }
 
   .ui-context-menu-separator,
-  .ui-menubar-separator {
-    margin: var(--space-1) 0;
+  .ui-menubar-separator,
+  .ui-dropdown-menu-separator,
+  .ui-select-separator {
+    margin-block: var(--menu-separator-space-block);
+    margin-inline: var(--menu-separator-space-inline);
     height: 1px;
     background: hsl(var(--border));
   }
 
   .ui-context-menu-label,
-  .ui-menubar-label {
-    min-height: 2rem;
+  .ui-menubar-label,
+  .ui-dropdown-menu-label {
+    min-height: var(--menu-item-height);
     color: hsl(var(--muted-foreground));
     font-weight: var(--font-weight-medium);
   }
 
   .ui-context-menu-shortcut,
-  .ui-menubar-shortcut {
+  .ui-menubar-shortcut,
+  .ui-dropdown-menu-shortcut {
     margin-inline-start: auto;
     text-align: end;
     color: hsl(var(--muted-foreground));
@@ -196,6 +249,7 @@
 
   .ui-context-menu-item-indicator,
   .ui-menubar-item-indicator,
+  .ui-dropdown-menu-item-indicator,
   .ui-navigation-menu-item-indicator {
     display: inline-flex;
     width: 1rem;
@@ -238,10 +292,14 @@
     box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
+  /* Reads --menu-icon-size, the same knob DropdownMenu's sub-trigger chevron already reads
+   * (`.ui-dropdown-menu-sub-trigger-icon`, below). The three menu surfaces share one row rhythm,
+   * so the literal `1rem` here meant setting --menu-icon-size resized the dropdown chevron and
+   * silently left these two behind. Same resolved value, one owner (gh#326). */
   .ui-context-menu-sub-trigger-icon,
   .ui-menubar-sub-trigger-icon {
-    width: 1rem;
-    height: 1rem;
+    width: var(--menu-icon-size);
+    height: var(--menu-icon-size);
     margin-inline-start: auto;
     opacity: 0.75;
   }
@@ -304,8 +362,8 @@
   }
 
   .ui-navigation-menu-trigger-icon {
-    width: 0.9rem;
-    height: 0.9rem;
+    width: var(--navigation-menu-trigger-icon-size);
+    height: var(--navigation-menu-trigger-icon-size);
     margin-inline-start: var(--space-2);
     opacity: 0.7;
   }
@@ -390,10 +448,6 @@
     outline: none;
   }
 
-  button.ui-steps-inline-control:focus-visible {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-  }
-
   /* The step NUMBER carries the emphasis. Both knobs exist because the canonical hosted-identity
    * row marks the step with an accent TINT at normal weight, while the original marked it with
    * bold at the inherited colour — a service picks its own emphasis instead of forking this rule
@@ -433,4 +487,326 @@
     flex: none;
     color: var(--steps-inline-separator-color, hsl(var(--muted-foreground)));
   }
+
+  /* DROPDOWN MENU — the third Radix menu surface. It was the only one still carrying its whole
+   * box as Tailwind literals on the component (#319); it now joins ContextMenu and Menubar on the
+   * shared row rhythm above, and scopes the one value that legitimately differs. */
+  .ui-dropdown-menu-content,
+  .ui-dropdown-menu-sub-content {
+    --menu-content-min-width: var(--dropdown-content-min-width);
+
+    z-index: var(--overlay-z-index);
+    min-width: var(--menu-content-min-width);
+    border-radius: var(--radius-md);
+    border: 1px solid hsl(var(--border));
+    background: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    padding: var(--menu-content-space-inset);
+    box-shadow: var(--shadow-md), var(--shadow-glow);
+  }
+
+  .ui-dropdown-menu-content {
+    max-height: var(--radix-dropdown-menu-content-available-height);
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .ui-dropdown-menu-sub-content {
+    overflow: hidden;
+  }
+
+  /* The checkbox indicator is absolutely placed in the reserved inset column. */
+  .ui-dropdown-menu-indicator-slot {
+    pointer-events: none;
+    position: absolute;
+    inset-inline-start: var(--menu-indicator-inset-inline-start);
+    display: flex;
+    inline-size: var(--menu-indicator-size);
+    block-size: var(--menu-indicator-size);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ui-dropdown-menu-check,
+  .ui-dropdown-menu-sub-trigger-icon {
+    inline-size: var(--menu-icon-size);
+    block-size: var(--menu-icon-size);
+  }
+
+  .ui-dropdown-menu-sub-trigger-icon {
+    margin-inline-start: auto;
+  }
+
+  /* Checkbox and radio rows are inset by construction — they always reserve the marker column. */
+  .ui-dropdown-menu-checkbox-item {
+    position: relative;
+    padding-inline-start: var(--menu-item-inset-space-inline-start);
+    padding-inline-end: var(--menu-item-space-inline);
+  }
+
+  .ui-dropdown-menu-item,
+  .ui-dropdown-menu-radio-item {
+    position: relative;
+  }
+
+  .ui-dropdown-menu-radio-item[data-state="checked"] {
+    background: hsl(var(--primary) / 0.1);
+    color: hsl(var(--primary));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-dropdown-menu-item[data-variant="destructive"][data-highlighted] {
+    background: hsl(var(--destructive) / 0.1);
+    color: hsl(var(--destructive));
+  }
+
+  .ui-dropdown-menu-item[data-disabled],
+  .ui-dropdown-menu-checkbox-item[data-disabled],
+  .ui-dropdown-menu-radio-item[data-disabled] {
+    pointer-events: none;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-dropdown-menu-item svg,
+  .ui-dropdown-menu-sub-trigger svg {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+}
+
+@layer components {
+  /* STEPS — full (non-inline) variant. The inline form keeps its own --steps-inline-* set. */
+  .ui-steps-dot {
+    display: block;
+    inline-size: var(--steps-dot-size);
+    block-size: var(--steps-dot-size);
+    border-radius: var(--radius-pill);
+  }
+
+  .ui-steps-dot[data-status="finish"],
+  .ui-steps-dot[data-status="process"] {
+    background: hsl(var(--primary));
+  }
+
+  .ui-steps-dot[data-status="process"] {
+    box-shadow: 0 0 0 var(--steps-dot-process-ring-width) hsl(var(--primary) / 0.2);
+  }
+
+  .ui-steps-dot[data-status="error"] {
+    background: hsl(var(--destructive));
+  }
+
+  .ui-steps-dot[data-status="wait"] {
+    background: hsl(var(--muted-foreground) / 0.3);
+  }
+
+  .ui-steps-marker {
+    border-radius: var(--radius-pill);
+    border: var(--steps-marker-border-width) solid transparent;
+    font-size: var(--steps-marker-font-size);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-steps-marker[data-status="finish"] {
+    border-color: hsl(var(--primary));
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .ui-steps-marker[data-status="process"] {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+  }
+
+  .ui-steps-marker[data-status="error"] {
+    border-color: hsl(var(--destructive));
+    background: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-steps-marker[data-status="wait"] {
+    border-color: hsl(var(--muted-foreground) / 0.3);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-marker-icon {
+    inline-size: var(--steps-marker-icon-size);
+    block-size: var(--steps-marker-icon-size);
+  }
+
+  .ui-steps-wait-icon {
+    inline-size: var(--steps-wait-icon-size);
+    block-size: var(--steps-wait-icon-size);
+    fill: currentColor;
+  }
+
+  .ui-steps-text {
+    min-inline-size: 0;
+  }
+
+  .ui-steps-item[data-direction="vertical"] .ui-steps-text {
+    padding-block-start: var(--steps-vertical-text-space-block-start);
+    text-align: start;
+  }
+
+  .ui-steps-item[data-direction="horizontal"] .ui-steps-text {
+    margin-block-start: var(--steps-horizontal-text-space-block-start);
+    padding-inline: var(--steps-horizontal-text-space-inline);
+  }
+
+  .ui-steps-item[data-direction="horizontal"][data-title-placement="vertical"] .ui-steps-text {
+    margin-block-start: var(--steps-vertical-text-space-block-start);
+  }
+
+  .ui-steps-title {
+    font-weight: var(--font-weight-medium);
+    font-size: var(--steps-title-font-size);
+  }
+
+  .ui-steps-title[data-compact] {
+    font-size: var(--steps-title-font-size-compact);
+  }
+
+  .ui-steps-title[data-status="process"] {
+    color: hsl(var(--foreground));
+  }
+
+  .ui-steps-title[data-status="wait"] {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-title[data-status="error"] {
+    color: hsl(var(--destructive));
+  }
+
+  .ui-steps-subtitle {
+    font-size: var(--steps-subtitle-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-description {
+    font-size: var(--steps-title-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-description[data-compact] {
+    font-size: var(--steps-title-font-size-compact);
+  }
+
+  .ui-steps-list[data-direction="vertical"] {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .ui-steps-list[data-direction="horizontal"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .ui-steps-control {
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  .ui-steps-control[data-direction="vertical"] {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--steps-vertical-space-gap);
+  }
+
+  .ui-steps-control[data-direction="horizontal"] {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .ui-steps-item {
+    position: relative;
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  .ui-steps-item[data-direction="vertical"] {
+    flex-direction: row;
+    gap: var(--steps-vertical-space-gap);
+    padding-block-end: var(--steps-vertical-space-block-end);
+  }
+
+  .ui-steps-item[data-direction="vertical"]:last-child {
+    padding-block-end: 0;
+  }
+
+  .ui-steps-item[data-direction="horizontal"] {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  /* The connector spans between two markers, inset by the marker radius at each end so it never
+   * runs underneath one. Both ends move together when --steps-connector-inset is retuned. */
+  .ui-steps-item[data-direction="horizontal"][data-connector]::after {
+    content: "";
+    position: absolute;
+    inset-block-start: var(--steps-connector-space-block-start);
+    inset-inline-start: calc(50% + var(--steps-connector-inset));
+    inline-size: calc(100% - var(--steps-connector-inset) * 2);
+    block-size: 1px;
+    background: hsl(var(--border));
+  }
+
+  /* APP SETTING PICKER — icon-only box + per-kind labelled widths (#319). */
+
+  /* Structurally icon-only: square to the density-aware --control-height tap target and drop the
+   * form-input chrome so it sits among the topbar's ghost icon buttons. The open-state and
+   * focus-visible rings from controlTriggerClass are untouched. */
+  .ui-app-setting-picker-icon {
+    inline-size: var(--control-height);
+    justify-content: center;
+    border-color: transparent;
+    background: transparent;
+    padding-inline: 0;
+    box-shadow: none;
+  }
+
+  .ui-app-setting-picker-glyph {
+    inline-size: var(--app-setting-picker-icon-size);
+    block-size: var(--app-setting-picker-icon-size);
+    flex-shrink: 0;
+    opacity: var(--app-setting-picker-icon-rest-alpha);
+  }
+
+  /* Each kind is sized to the longest value it can show — a timezone name is far wider than a
+   * theme name. Below the breakpoint every kind hugs its content instead. */
+  @media (min-width: 40rem) {
+    .ui-app-setting-picker-trigger[data-kind="locale"] {
+      inline-size: var(--app-setting-picker-locale-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="timezone"] {
+      inline-size: var(--app-setting-picker-timezone-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="dateFormat"] {
+      inline-size: var(--app-setting-picker-date-format-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="timeFormat"] {
+      inline-size: var(--app-setting-picker-time-format-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="theme"] {
+      inline-size: var(--app-setting-picker-theme-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="brand"] {
+      inline-size: var(--app-setting-picker-brand-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="density"] {
+      inline-size: var(--app-setting-picker-density-width);
+    }
+
+    .ui-app-setting-picker-trigger[data-kind="fontSize"] {
+      inline-size: var(--app-setting-picker-font-size-width);
+    }
+  }
 }