@godxjp/ui 19.6.0 → 20.1.0

package/dist/tokens/base.css

@@ -1,8 +1,9 @@
 
 
+@import "./components/flex.css";
 @import "./foundation.css";
 
-@import "./antd.generated.css";
+@import "./derived.css";
 @import "./semantic/layout.css";
 @import "./axes.css";
 @import "./components/control.css";

package/dist/tokens/components/badge.css

@@ -5,6 +5,7 @@
   --badge-space-x: var(--space-2);
   --badge-space-y: var(--space-1);
 
+  --badge-radius: var(--radius-md);
   --badge-font-size: var(--font-size-xs);
 
   --badge-line-height: calc(1 / 0.75);

package/dist/tokens/components/chart.css

@@ -28,3 +28,9 @@
 
   --chart-trend-footer-gap: var(--space-2);
 }
+
+:root {
+  --chart-category-axis-gap: var(--space-2);
+
+  --chart-category-axis-max-fraction: 0.4;
+}

package/dist/tokens/components/control.css

@@ -28,6 +28,50 @@
   --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
 
+  --control-status-warning-border-color: var(--warning);
+  --control-status-warning-glow-color: var(--warning);
+  --control-status-warning-glow-alpha: var(--control-outline-error-alpha);
+
+  --control-variant-filled-background: var(--muted);
+  --control-variant-filled-hover-background: var(--accent);
+
+  --control-count-font-size: var(--font-size-sm);
+  --control-count-color: var(--muted-foreground);
+  --control-count-exceeded-color: var(--text-error);
+  --control-count-space-inline: var(--space-1);
+  --textarea-count-inset-block-end: var(--space-1);
+  --textarea-count-inset-inline-end: var(--space-2);
+
+  --input-addon-background: var(--muted);
+  --input-addon-color: var(--muted-foreground);
+  --input-addon-padding-inline: var(--control-padding-x);
+
+  --switch-content-font-size: var(--font-size-xs);
+  --switch-content-space-inline: var(--space-1);
+  --switch-spinner-size: calc(var(--switch-thumb-size) - var(--space-1));
+
+  --slider-mark-font-size: var(--font-size-xs);
+  --slider-mark-color: var(--muted-foreground);
+  --slider-mark-space-block-start: var(--space-2);
+  --slider-dot-size: var(--slider-track-height);
+  --slider-dot-background: var(--background);
+  --slider-dot-border-color: var(--border);
+  --slider-dot-active-border-color: var(--primary);
+  --slider-tooltip-background: var(--popover);
+  --slider-tooltip-color: var(--popover-foreground);
+  --slider-tooltip-font-size: var(--font-size-xs);
+  --slider-tooltip-radius: var(--radius-sm);
+  --slider-tooltip-padding-inline: var(--space-2);
+  --slider-tooltip-offset-block: var(--space-2);
+
+  --choice-button-background: var(--background);
+  --choice-button-color: var(--foreground);
+  --choice-button-border-color: var(--input);
+  --choice-button-selected-color: var(--primary);
+  --choice-button-selected-border-color: var(--primary);
+  --choice-button-solid-background: var(--primary);
+  --choice-button-solid-color: var(--primary-foreground);
+
   --toggle-focus-ring-width: var(--stroke-lg);
   --toggle-focus-ring-alpha: 1;
 
@@ -76,6 +120,8 @@
 
   --switch-unchecked-background: initial;
 
+  --switch-content-unchecked-foreground: initial;
+
   --color-picker-input-width: 6.5rem;
 
   --command-list-max-height: min(300px, 50vh);
@@ -83,6 +129,8 @@
   --command-group-padding: var(--space-1);
   --command-item-padding-y: var(--space-2);
   --command-item-padding-x: var(--space-2);
+
+  --command-item-gap: var(--control-gap);
   --command-palette-width: 35rem;
   --command-palette-inset-top: calc(var(--space-6) * 4);
   --command-palette-viewport-inset: var(--space-3);
@@ -140,14 +188,14 @@
     (var(--control-multiline-padding-block) + var(--control-border-width)) * 2
   );
 
-  --control-inline-affix-pair-space-inline-end: 3.5rem;
-
   --control-composite-field-space-gap: var(--space-2);
 
   --input-file-button-height: var(--band-height-sm);
   --input-file-button-font-size: var(--font-size-sm);
 
   --search-select-panel-max-width: 32rem;
+
+  --search-select-panel-inline-size: auto;
   --search-select-panel-viewport-inset: var(--space-6);
   --search-select-list-space-inset: var(--space-1);
   --search-select-footer-space-inset: var(--space-1);
@@ -178,6 +226,10 @@
   --cascader-empty-space-block: var(--space-6);
 
   --select-content-max-height: 24rem;
+
+  --select-content-inline-size: auto;
+
+  --select-empty-space-block: var(--search-select-placeholder-space-block);
   --select-scroll-button-space-block: var(--space-1);
 
   --select-item-space-inline: 0.625rem;
@@ -194,6 +246,7 @@
   --time-picker-option-radius: var(--radius-md);
   --time-picker-option-font-size: var(--font-size-sm);
   --time-picker-footer-space-inset: var(--space-2);
+  --time-picker-footer-space-gap: var(--space-2);
 
   --time-picker-affix-space-gap: var(--control-inline-affix-space-gap);
 
@@ -261,6 +314,8 @@
   --month-picker-separator-icon-size: var(--icon-size-sm);
 
   --button-xs-height: var(--control-height-xs);
+
+  --button-bare-target-size: var(--control-height-xs);
   --button-xs-space-inline: var(--space-2);
   --button-xs-space-gap: var(--space-1);
   --button-xs-font-size: var(--font-size-xs);
@@ -295,6 +350,21 @@
   --control-label-space-gap: 0.5rem;
 
   --control-label-disabled-alpha: 0.7;
+
+  --control-surface-border-color: hsl(var(--input));
+  --control-surface-background: hsl(var(--background));
+
+  --control-filled-border-color: transparent;
+  --control-filled-background: hsl(var(--muted));
+  --control-filled-shadow: none;
+
+  --control-borderless-border-color: transparent;
+  --control-borderless-background: transparent;
+  --control-borderless-shadow: none;
+
+  --control-status-error-border-color: hsl(var(--destructive));
+  --control-status-warning-border-color: hsl(var(--text-warning));
+  --control-status-warning-outline-color: var(--warning);
 }
 
 @media (pointer: coarse) {
@@ -303,3 +373,10 @@
     --control-height-default: var(--band-height-xl);
   }
 }
+
+:root {
+  --textarea-padding-block-start: initial;
+  --textarea-padding-block-end: initial;
+  --textarea-padding-inline-start: initial;
+  --textarea-padding-inline-end: initial;
+}

package/dist/tokens/components/data-display.css

@@ -31,6 +31,7 @@
   --prose-code-space-inline: var(--space-1);
   --prose-code-radius: var(--radius-sm);
   --prose-image-radius: var(--radius-md);
+  --tree-item-indent-width: var(--space-5);
   --tree-item-title-font-size: var(--font-size-xs);
   --tree-item-description-font-size: var(--font-size-xs);
   --timeline-note-font-size: var(--font-size-xs);
@@ -64,6 +65,17 @@
   --progress-track-background: initial;
   --progress-fill-background: initial;
 
+  --progress-breakdown-block-size: 1.375rem;
+  --progress-breakdown-radius: var(--radius);
+
+  --legend-gap: 0.875rem;
+  --legend-item-gap: 0.3125rem;
+  --legend-swatch-size: 0.625rem;
+  --legend-swatch-radius: 0.125rem;
+  --legend-font-size: var(--font-size-xs);
+
+  --legend-color: initial;
+
   --timeline-dot-done-background: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;
@@ -111,3 +123,11 @@
 
   --permission-matrix-min-width: 48rem;
 }
+
+:root {
+  --range-timeline-label-width: var(--app-shell-sidebar-width);
+  --range-timeline-unit-width: calc(var(--control-height-sm) * 2);
+  --range-timeline-row-height: var(--control-height-lg);
+  --range-timeline-bar-height: var(--control-height-sm);
+  --range-timeline-border-color: var(--border);
+}

package/dist/tokens/components/descriptions.css

@@ -13,4 +13,15 @@
   --descriptions-value-font-size: var(--font-size-sm);
 
   --descriptions-value-line-height: calc(1.25 / 0.875);
+
+  --descriptions-row-border: none;
+  --descriptions-row-min-height: auto;
+
+  --descriptions-border-width: var(--stroke-hairline);
+  --descriptions-border-radius: var(--radius-md);
+
+  --descriptions-cell-padding-y: var(--space-2);
+  --descriptions-cell-padding-x: var(--space-3);
+
+  --descriptions-label-background: initial;
 }

package/dist/tokens/components/flex.css

@@ -0,0 +1,8 @@
+
+:root {
+  --flex-surface-background: initial;
+  --flex-surface-warning-alpha: 0.04;
+  --flex-surface-radius: initial;
+  --flex-actions-offset-block: initial;
+  --flex-actions-offset-inline: initial;
+}

package/dist/tokens/components/navigation.css

@@ -10,6 +10,12 @@
   --pagination-total-font-size: var(--font-size-sm);
 
   --pagination-icon-size: var(--control-icon-size);
+
+  --pagination-control-height-sm: var(--band-height-sm);
+
+  --pagination-jumper-gap: var(--space-inline-xs);
+  --pagination-jumper-width: 4rem;
+  --pagination-jumper-font-size: var(--pagination-total-font-size);
   --filter-bar-gap: var(--space-3);
   --filter-bar-padding-y: var(--space-2);
   --filter-label-font-size: var(--font-size-xs);
@@ -29,6 +35,8 @@
   --app-setting-picker-compact-gap: var(--space-1);
   --app-setting-picker-compact-font-size: var(--font-size-xs);
   --breadcrumb-font-size: var(--font-size-xs);
+
+  --breadcrumb-menu-trigger-gap: var(--space-inline-xs);
   --menubar-shortcut-font-size: var(--font-size-xs);
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
@@ -47,6 +55,34 @@
   --tabs-trigger-line-padding-x: 1rem;
   --tabs-trigger-line-padding-y: 0.5rem;
 
+  --tabs-trigger-height-sm: var(--band-height-sm);
+  --tabs-trigger-height-md: var(--band-height-md);
+  --tabs-trigger-height-lg: var(--band-height-lg);
+  --tabs-trigger-font-size-sm: var(--font-size-xs);
+  --tabs-trigger-font-size-md: var(--font-size-base);
+  --tabs-trigger-font-size-lg: var(--font-size-lg);
+  --tabs-trigger-padding-x-sm: var(--space-2);
+  --tabs-trigger-padding-x-md: var(--space-3);
+  --tabs-trigger-padding-x-lg: var(--space-4);
+
+  --tabs-card-list-radius: 0px;
+  --tabs-card-list-space-inset: 0px;
+  --tabs-card-list-space-gap: var(--space-1);
+  --tabs-card-radius: var(--radius-md);
+  --tabs-card-rail-border-width: var(--stroke-hairline);
+  --tabs-card-background: initial;
+
+  --tabs-bar-gap: var(--space-2);
+  --tabs-extra-gap: var(--space-2);
+  --tabs-add-size: var(--band-height-md);
+  --tabs-add-radius: var(--radius-md);
+  --tabs-add-icon-size: var(--control-icon-size);
+  --tabs-trigger-icon-size: var(--control-icon-size);
+  --tabs-tab-remove-size: var(--band-height-xs);
+  --tabs-tab-remove-radius: var(--radius-sm);
+  --tabs-tab-remove-icon-size: var(--icon-size-xs);
+  --tabs-tab-remove-space-inline-end: var(--space-1);
+
   --menubar-item-hover-background: initial;
   --menubar-item-hover-foreground: initial;
 
@@ -75,6 +111,14 @@
   --menu-content-min-width: 10rem;
 
   --dropdown-content-min-width: 8rem;
+
+  --menu-content-width-sm: 12rem;
+  --menu-content-width-md: 16rem;
+  --menu-content-width-lg: 20rem;
+
+  --dropdown-arrow-width: var(--space-3);
+  --dropdown-arrow-height: var(--space-inline-xs);
+  --dropdown-arrow-background: initial;
   --menu-separator-space-block: var(--space-1);
   --menu-separator-space-inline: calc(var(--space-1) * -1);
 
@@ -99,6 +143,15 @@
   --steps-connector-inset: 1.25rem;
   --steps-connector-space-block-start: var(--space-4);
 
+  --steps-nav-space-gap: var(--space-2);
+  --steps-nav-space-inline: var(--space-4);
+  --steps-nav-space-block: var(--space-3);
+  --steps-nav-radius: var(--radius-md);
+  --steps-nav-separator-size: var(--control-icon-size-sm);
+
+  --steps-progress-ring-width: var(--stroke-md);
+  --steps-progress-track-color: initial;
+
   --app-setting-picker-locale-width: 10rem;
   --app-setting-picker-timezone-width: 14rem;
   --app-setting-picker-date-format-width: 11rem;
@@ -109,6 +162,8 @@
   --app-setting-picker-font-size-width: 9rem;
 
   --app-setting-picker-width-breakpoint: 40rem;
+  --app-setting-picker-bar-border-width: 0;
+  --app-setting-picker-bar-shadow: none;
   --app-setting-picker-icon-size: var(--icon-size-md);
   --app-setting-picker-icon-rest-alpha: 0.7;
 }

package/dist/tokens/components/shell.css

@@ -1,6 +1,7 @@
 
 
 :root {
+  --responsive-grid-column-width: 20rem;
   --sidebar-section-label-font-size: var(--font-size-2xs);
   --sidebar-product-tenant-font-size: var(--font-size-2xs);
   --sidebar-badge-font-size: var(--font-size-2xs);
@@ -42,9 +43,12 @@
   --app-shell-bar-gap: var(--space-3);
 
   --app-shell-sidebar-width: 16rem;
-  --app-shell-rail-width: 4rem;
+  --app-shell-sidebar-collapsed-width: 4rem;
+
+  --app-shell-nav-rail-width: 3.5rem;
   --app-shell-page-max-width: 80rem;
-  --app-shell-main-background: hsl(var(--muted) / 0.4);
+
+  --app-shell-main-background: initial;
   --app-shell-mobile-nav-width: 22.5rem;
 
   --app-shell-mobile-nav-background: initial;
@@ -99,14 +103,60 @@
   --topbar-item-hover-color: var(--accent-foreground);
   --topbar-item-active-background: var(--secondary);
 
+  --topbar-item-badge-offset-block: var(--space-1);
+  --topbar-item-badge-offset-inline: var(--space-1);
+  --topbar-item-badge-size: 1rem;
+  --topbar-item-badge-padding-inline: var(--space-1);
+  --topbar-item-badge-font-size: var(--font-size-2xs);
+  --topbar-item-badge-background: initial;
+  --topbar-item-badge-foreground: initial;
+  --topbar-item-badge-destructive-background: initial;
+  --topbar-item-badge-destructive-foreground: initial;
+
   --topbar-item-focus-ring-offset: calc(-1 * var(--focus-ring-width));
   --org-switcher-trigger-height: var(--band-height-xl);
   --org-switcher-trigger-padding-x: var(--space-2);
-  --org-switcher-avatar-size: 1.75rem;
+
+  --org-switcher-avatar-size: var(--control-height-sm);
+
+  --org-switcher-sheet-inset: var(--space-3);
+
+  --org-switcher-list-inset: var(--org-switcher-sheet-inset);
+
+  --org-switcher-list-offset: 0px;
+
+  --org-switcher-dialog-width: 26rem;
+
+  --org-switcher-search-space-block: var(--space-3);
   --org-switcher-menu-width: 16rem;
   --org-switcher-sheet-max-height: 75dvh;
   --org-switcher-state-min-height: 8rem;
 
+  --app-launcher-panel-width: 20rem;
+  --app-launcher-panel-max-height: 26rem;
+  --app-launcher-panel-gap: var(--space-3);
+  --app-launcher-sheet-max-height: 75dvh;
+  --app-launcher-grid-gap: var(--space-1);
+  --app-launcher-tile-gap: var(--space-1);
+  --app-launcher-tile-padding: var(--space-2);
+
+  --app-launcher-tile-min-height: var(--control-height-comfortable);
+  --app-launcher-tile-radius: var(--radius);
+  --app-launcher-tile-color: var(--foreground);
+  --app-launcher-tile-hover-background: var(--accent);
+  --app-launcher-tile-hover-color: var(--accent-foreground);
+
+  --app-launcher-tile-current-background: initial;
+  --app-launcher-mark-size: 2.5rem;
+  --app-launcher-mark-radius: var(--radius);
+  --app-launcher-mark-background: var(--secondary);
+  --app-launcher-mark-foreground: var(--secondary-foreground);
+  --app-launcher-mark-font-size: var(--font-size-sm);
+  --app-launcher-name-font-size: var(--font-size-2xs);
+  --app-launcher-group-label-font-size: var(--font-size-2xs);
+  --app-launcher-group-label-color: var(--muted-foreground);
+  --app-launcher-state-min-height: 8rem;
+
   --sidebar-item-active-color: initial;
   --sidebar-item-active-tint: initial;
 

package/dist/tokens/components/table.css

@@ -17,11 +17,25 @@
   --table-surface-min-inline-size: 640px;
   --table-head-font-size: var(--font-size-xs);
 
+  --table-head-font-weight: var(--font-weight-medium);
+
   --table-header-background: initial;
   --table-header-foreground: initial;
 
   --table-pin-shadow: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
 
+  --table-fixed-shadow-start: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
+  --table-fixed-shadow-start-rtl: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
+
+  --table-expand-column-width: 2.5rem;
+
+  --table-summary-background: initial;
+  --table-summary-border-width: var(--stroke-hairline);
+
+  --table-row-expanded-background: initial;
+
+  --table-selection-menu-gap: var(--space-1);
+
   --table-row-striped-background: initial;
   --table-row-hover-background: initial;
   --table-row-selected-background: initial;

package/dist/tokens/foundation.css

@@ -273,6 +273,8 @@
   --space-inline-sm: var(--space-2);
   --space-inline-md: var(--space-3);
   --space-inline-lg: var(--space-4);
+
+  --space-inline-xl: var(--space-6);
   --space-chrome-x: var(--space-6);
   --space-chrome-y: var(--space-4);
   --space-chrome-gap: var(--space-2);

package/dist/tokens/semantic/layout.css

@@ -18,6 +18,8 @@
   --overlay-z-index: 50;
 
   --master-detail-rail-compact: 18.75rem;
+  --master-detail-rail-narrow: 12rem;
+  --master-detail-rail-wide: 24rem;
   --master-detail-rail-standard: 20rem;
   --master-detail-gap: var(--space-stack-md);
 
@@ -37,6 +39,8 @@
 
   --overlay-background: rgb(0 0 0 / 0.5);
 
+  --surface-recessed: hsl(var(--muted) / 0.4);
+
   --page-footer-pad-block-end: var(--space-stack-md);
   --page-header-divider: none;
 
@@ -80,6 +84,11 @@
   --field-label-gap: var(--space-2);
 }
 
+.dark,
+:root[data-theme="dark"] {
+  --surface-recessed: hsl(var(--background));
+}
+
 :root {
   --admin-collection-control-height: var(--control-height-default);
   --admin-collection-section-gap: var(--space-stack-md);

package/docs/COMPONENTS.md

@@ -48,9 +48,13 @@ All UI is **mobile-first**: base layout targets ~320–428px viewport; `sm` (640
 
 Default `direction="row"`; use `direction="col"` for vertical rhythm.
 
-| Component | Prop       | Key props                                                               |
-| --------- | ---------- | ----------------------------------------------------------------------- |
-| `Flex`    | `FlexProp` | `direction: "row" \| "col"`, `gap: GapProp`, `align`, `justify`, `wrap` |
+| Component | Prop       | Key props                                                                                            |
+| --------- | ---------- | ---------------------------------------------------------------------------------------------------- |
+| `Flex`    | `FlexProp` | `direction: "row" \| "col"`, `gap: GapProp`, `gapRaw`, `pad`, `padRaw`, `fill`, `width`, `align`, `justify`, `wrap` |
+
+`fill` / `width` are the `fixed | elastic | fixed` row: `width` pins a column (number = px, and
+leaves `data-width-raw` on the DOM so the measurement stays countable), `fill` takes what is left
+and sets `min-inline-size: 0` so a truncating child ellipses instead of widening the row.
 
 ---
 
@@ -92,6 +96,8 @@ Default `direction="row"`; use `direction="col"` for vertical rhythm.
 | `Descriptions` | `DescriptionsProp` | `items[]`                                |
 | `Badge`        | `BadgeProp`        | `status`, `tone: ToneProp`               |
 | `Badge`        | `BadgeProp`        | shadcn badge variants                    |
+| `Progress`     | `ProgressProp`     | `value` (meter) \| `segments` (breakdown) |
+| `Legend`       | `LegendProp`       | `items[]` — the key for a tone           |
 | `Popover`      | Radix primitives   | floating content panel                   |
 | `ScrollArea`   | Radix primitives   | scrollable regions                       |
 | `Collapsible`  | Radix primitives   | expand/collapse sections                 |

package/docs/CONSUMER-RULES.md

@@ -12,3 +12,16 @@ Read this once; the audit enforces it. Everything else in `docs/` is for contrib
 8. Sizes come from props (`size`, `width`, `columns`), never `w-[240px]` / `max-h-[420px]`.
 9. Logical directions (`ms-`, `me-`, `start-`, `end-`) when a utility is unavoidable; never `ml-` / `left-`.
 10. Run `node node_modules/@godxjp/ui/scripts/ui-audit.mjs <dir>` before every review; then `visual-audit.mjs <url>` on the running app. Zero errors is the bar.
+
+**Opting a deliberate exception out.** Name the rule; the block form also has to say why.
+
+```tsx
+// ui-audit-disable-line no-physical-direction
+// ui-audit-disable-next-line no-physical-direction
+
+// ui-audit-disable-begin no-utility-spacing — vendor widget ships its own grid, gh#123
+const legacyClasses = ["gap-3", "p-2"];
+// ui-audit-disable-end no-utility-spacing
+```
+
+A block with no reason (or under 12 characters of it) is ignored and the finding stands; an unclosed block runs to the end of the file. The class-shaped rules (`gap-*`, `bg-red-500`, `w-[37px]`, `pr-*`, `dark:*`) only read class expressions — a `className`/`class` attribute, a class-named binding (`baseClass`, `statusStyles`, `badgeVariants`) or a `cn()`/`clsx()`/`cva()` call — so product copy or an i18n value that happens to spell a utility is never a finding.