@godxjp/ui 19.1.0 → 19.2.0

package/dist/styles/logo-layout.css

@@ -1,10 +1,4 @@
-/*
- * LOGO — the product brand-mark box (a glyph on the primary fill). Replaces the hand-rolled
- * `<span aria-hidden className="grid size-7 place-items-center rounded-md bg-primary …">g</span>`
- * repeated across app shells and topbars (issue #116): size/radius/font-size are tokens (rule #45),
- * colours read the primary role directly, and the type comes from a semantic class (not utilities
- * on a bare span, rule #46).
- */
+
 @layer components {
   .ui-logo {
     display: inline-grid;
@@ -39,31 +33,11 @@
     font-size: var(--logo-font-size-lg);
   }
 
-  /* Identity fills — the IDENTITY role --brand (canonical GoDX emerald), NOT the --success STATUS
-   * green: `tone="success"` names the semantic slot, not the status role, and a badge/progress
-   * green must never drag the product mark with it (gh#250). Role defaults live HERE (call site),
-   * not on :root, so a scoped `.dark` / `[data-tenant]` override of --brand re-resolves
-   * (docs/TOKENS.md · role-mirror knobs).
-   *
-   * The INK is --logo-identity-foreground, NOT --brand-foreground: this branch sets caller-supplied
-   * TEXT on the fill, so WCAG 2.2 SC 1.4.3 applies at 4.5:1 (14px bold is not "large text"), while
-   * --brand-foreground is the artwork KNOCKOUT colour that tracks --background and only owes 3:1 as
-   * non-text (SC 1.4.11). Knockout white on the emerald measured 3.67:1 — an AA failure on every
-   * boxed `tone="success"` glyph. See src/tokens/components/logo.css. */
   .ui-logo[data-tone="success"] {
     background: hsl(var(--logo-success-background, var(--brand)));
     color: hsl(var(--logo-success-foreground, var(--logo-identity-foreground)));
   }
 
-  /* The identity mark honours `size` like every other Logo branch. The godx box has its OWN tier
-   * scale (--logo-godx-size-*) because the artwork is a horizontal capsule in a square viewBox and
-   * needs ~+0.25rem over the filled glyph box to read at the same weight — but a public `size` prop
-   * that renders identically at xs and lg is a silent no-op, and the lockup already scaled its
-   * wordmark per tier, so a frozen mark broke the mark↔wordmark proportion at `size="lg"`.
-   * These are `[data-mark][data-size]` (0,3,0) so they beat BOTH `.ui-logo[data-size]` and the
-   * `[data-mark="godx"]` base regardless of source order — the ordering bug that hid `size` here.
-   * --logo-godx-size stays the documented PIN: unset by default, and set once by a service theme it
-   * wins at every tier (call-site default, docs/TOKENS.md). */
   .ui-logo[data-mark="godx"] {
     width: var(--logo-godx-size, var(--logo-godx-size-md));
     height: var(--logo-godx-size, var(--logo-godx-size-md));
@@ -93,13 +67,6 @@
     height: 100%;
   }
 
-  /*
-   * LOCKUP — `<Logo wordmark="…" />`: the mark plus the readable product name as ONE element, so a
-   * shell header / auth brand bar never hand-rolls `inline-flex items-center gap-2` around a Logo
-   * and a `<Text>` (rule #46). Every knob is a token (rule #45); the wordmark colour defaults to
-   * the IDENTITY role and never reads --primary, so re-theming the action colour cannot recolour
-   * the brand — no consumer page CSS is required for the logo colour (gh#214).
-   */
   .ui-logo-lockup {
     display: inline-flex;
     align-items: center;
@@ -128,7 +95,6 @@
     font-size: var(--logo-wordmark-font-size-lg);
   }
 
-  /* Canonical GoDX wordmark — the --brand IDENTITY role, independent of --primary AND of --success. */
   .ui-logo-lockup[data-mark="godx"] .ui-logo-wordmark,
   .ui-logo-lockup[data-tone="success"] .ui-logo-wordmark {
     color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--brand))));

package/dist/styles/motion.css

@@ -1,10 +1,4 @@
-/*
- * MOTION — entrance/reveal animation for the `Reveal` primitive.
- * Reads the DS motion tokens (--duration-slow / --ease-emphasized / --reveal-distance) instead of
- * a hand-rolled @keyframes, and staggers via the --reveal-stagger-step ladder. Under
- * prefers-reduced-motion the animation is dropped: content renders in its final, fully-visible
- * position with no transform and no layout shift.
- */
+
 
 @layer components {
   .ui-reveal {
@@ -42,7 +36,6 @@
     }
   }
 
-  /* Accessibility: no motion → no animation, content stays visible (WCAG 2.3.3 / 2.2.2). */
   @media (prefers-reduced-motion: reduce) {
     .ui-reveal,
     .ui-reveal[data-reveal-delay] {
@@ -51,22 +44,6 @@
   }
 }
 
-/*
- * 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;
@@ -84,8 +61,6 @@
     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;
@@ -94,8 +69,6 @@
     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));
   }
@@ -115,7 +88,6 @@
     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);
@@ -124,8 +96,7 @@
     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);
   }
@@ -133,8 +104,6 @@
     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);
@@ -144,7 +113,6 @@
     animation: ui-activity-breathe var(--activity-interval) var(--ease-standard) infinite;
   }
 
-  /* bar — an indeterminate sweep (syncing). */
   .ui-activity-bar {
     position: relative;
     overflow: hidden;
@@ -158,8 +126,7 @@
   .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;
@@ -167,7 +134,6 @@
     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;
   }
@@ -204,10 +170,6 @@
     }
   }
 
-  /* 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,
@@ -216,7 +178,6 @@
     }
   }
 
-  /* 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,

package/dist/styles/navigation-layout.css

@@ -30,24 +30,12 @@
     text-decoration: underline;
   }
 
-  /*
-   * AppSettingPicker `compact` (gh#217) — a small, content-hugging LABELLED trigger for auth /
-   * legal footers: it keeps the icon, the readable value and the real control chrome (so it is
-   * obviously a switcher), but re-tiers the box to --control-height-sm and drops the picker's owned
-   * per-kind width. Every value is a token; the height comes from the official control tier, never
-   * a literal or an ad-hoc calc.
-   */
   .ui-app-setting-picker-compact {
     --control-height: var(--app-setting-picker-compact-control-height);
     --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);
@@ -60,11 +48,6 @@
     scrollbar-width: thin;
   }
 
-  /* Tabs `line` — the ACTIVE decoration is a token-owned bar and nothing else (gh#248). It is
-   * deliberately painted here (not as an `after:*` utility) so it stays independent of the
-   * `:focus-visible` ring utilities: "selected" and "keyboard-focused" are two different states and
-   * must remain visually distinct (WCAG 2.4.7). Logical insets keep the vertical rail on the
-   * inline-END edge under dir="rtl" too. */
   [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
     content: "";
     position: absolute;
@@ -99,11 +82,6 @@
     }
   }
 
-  /* 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);
@@ -138,9 +116,7 @@
   .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 {
+  .ui-dropdown-menu-shortcut {
     border-radius: var(--menu-item-radius);
     padding-inline: var(--menu-item-space-inline);
     height: var(--menu-item-height);
@@ -150,7 +126,6 @@
     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"] {
@@ -292,10 +267,6 @@
     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: var(--menu-icon-size);
@@ -448,10 +419,6 @@
     outline: none;
   }
 
-  /* 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
-   * (rule #45). Defaults are the original bold + inherited colour, so nothing moves. */
   .ui-steps-inline-index {
     flex: none;
     font-variant-numeric: tabular-nums;
@@ -488,9 +455,6 @@
     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);
@@ -515,7 +479,6 @@
     overflow: hidden;
   }
 
-  /* The checkbox indicator is absolutely placed in the reserved inset column. */
   .ui-dropdown-menu-indicator-slot {
     pointer-events: none;
     position: absolute;
@@ -537,7 +500,6 @@
     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);
@@ -575,7 +537,7 @@
 }
 
 @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);
@@ -741,8 +703,6 @@
     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;
@@ -753,11 +713,6 @@
     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;
@@ -774,8 +729,6 @@
     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);