@godxjp/ui 20.0.0 → 20.1.0

package/dist/styles/table-layout.css

@@ -22,7 +22,8 @@
     vertical-align: middle;
     background: var(--table-header-background, hsl(var(--muted)));
     font-size: var(--table-head-font-size);
-    font-weight: var(--font-weight-medium);
+
+    font-weight: var(--table-head-font-weight);
     color: var(--table-header-foreground, hsl(var(--muted-foreground)));
     white-space: nowrap;
   }
@@ -46,6 +47,27 @@
     padding-inline-end: 0;
   }
 
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
+    text-align: start;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="center"] {
+    text-align: center;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="end"] {
+    text-align: end;
+  }
+
+  :is([data-slot="table-head"], [data-slot="table-cell"])[data-wrap] {
+    white-space: normal;
+  }
+
   [data-slot="table-cell"][data-indent] {
     padding-inline-start: calc(
       var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
@@ -241,34 +263,100 @@
 
   .ui-data-table-pin-end {
     position: sticky;
-    inset-inline-end: 0;
+
+    inset-inline-end: calc(var(--table-fixed-offset, 0) * 1px);
     z-index: 2;
     background-color: hsl(var(--background));
     box-shadow: var(--table-pin-shadow);
   }
 
-  th.ui-data-table-pin-end {
+  .ui-data-table-pin-start {
+    position: sticky;
+    inset-inline-start: calc(var(--table-fixed-offset, 0) * 1px);
+    z-index: 2;
+    background-color: hsl(var(--background));
+    box-shadow: var(--table-fixed-shadow-start);
+  }
+
+  th.ui-data-table-pin-end,
+  th.ui-data-table-pin-start {
     background-color: hsl(var(--secondary));
   }
 
+  [dir="rtl"] .ui-data-table-pin-start {
+    box-shadow: var(--table-fixed-shadow-start-rtl);
+  }
+
   [dir="rtl"] .ui-data-table-pin-end {
     box-shadow: 6px 0 6px -5px hsl(var(--foreground) / 0.12);
   }
 
-  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end {
+  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end,
+  .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-start {
     background-image: linear-gradient(
       var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
       var(--table-row-hover-background, hsl(var(--muted) / 0.5))
     );
   }
 
-  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
+  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end,
+  .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-start {
     background-image: linear-gradient(
       var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
       var(--table-row-selected-background, hsl(var(--muted) / 0.3))
     );
   }
 
+  .ui-data-table-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-data-table-surface[data-table-layout="fixed"] [data-slot="table"] {
+    table-layout: fixed;
+  }
+
+  .ui-data-table-scroll[data-scroll-y] {
+    overflow-y: auto;
+    max-block-size: var(--table-scroll-block-size, none);
+  }
+
+  .ui-data-table-scroll[data-scroll-x] :is(.ui-data-table-surface, [data-slot="table"]) {
+    min-inline-size: var(--table-scroll-inline-size, auto);
+  }
+
+  .ui-data-table-expand-column {
+    inline-size: var(--table-expand-column-width);
+  }
+
+  .ui-data-table-expanded-row > [data-slot="table-cell"] {
+    background-color: var(--table-row-expanded-background, hsl(var(--muted) / 0.3));
+  }
+
+  .ui-data-table-summary {
+    background-color: var(--table-summary-background, hsl(var(--muted)));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-data-table-summary > tr > [data-slot="table-cell"] {
+    border-block-start: var(--table-summary-border-width) solid hsl(var(--border));
+  }
+
+  .ui-data-table-filter-trigger[data-filtered] {
+    color: hsl(var(--primary));
+  }
+
+  .ui-data-table-selection-menu {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--table-selection-menu-gap);
+  }
+
+  .ui-data-table-surface .ui-table-bordered {
+    border-width: 0;
+  }
+
   .ui-table-bordered {
     border: 1px solid var(--table-border-color, hsl(var(--border)));
   }
@@ -354,7 +442,8 @@
 
   .ui-data-table-sticky-header {
     position: sticky;
-    inset-block-start: 0;
+
+    inset-block-start: var(--table-sticky-offset, 0);
     z-index: 10;
   }
 

package/dist/styles/text-layout.css

@@ -100,6 +100,11 @@
     min-width: 0;
   }
 
+  [data-slot="text"][data-whitespace="pre-wrap"] {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
   [data-slot="text"][data-clamp] {
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/dist/tokens/base.css

@@ -1,5 +1,6 @@
 
 
+@import "./components/flex.css";
 @import "./foundation.css";
 
 @import "./derived.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);
@@ -122,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);
@@ -46,7 +47,8 @@
 
   --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;
@@ -101,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/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/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.