@godxjp/ui 12.1.0 → 13.1.0

package/dist/styles/control.css

@@ -177,7 +177,6 @@
     padding: 0;
   }
 
-
   .ui-control {
     height: var(--control-height);
     padding-left: var(--control-padding-x);
@@ -255,7 +254,7 @@
   }
 
   .ui-radio {
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
   }
 
   .ui-checkbox:focus-visible,
@@ -305,7 +304,7 @@
     cursor: pointer;
     align-items: center;
     border: 2px solid transparent;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     box-shadow: var(--shadow-sm);
     transition-property: color, background-color, border-color, box-shadow;
     transition-duration: 150ms;
@@ -324,7 +323,7 @@
     display: block;
     width: var(--switch-thumb-size);
     height: var(--switch-thumb-size);
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--background));
     box-shadow: var(--shadow-lg);
     transition: transform 150ms;
@@ -349,7 +348,7 @@
     width: 100%;
     flex-grow: 1;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--primary) / 0.2);
   }
 
@@ -364,7 +363,7 @@
     width: var(--slider-thumb-size);
     height: var(--slider-thumb-size);
     border: 1px solid hsl(var(--primary) / 0.5);
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--background));
     box-shadow: var(--shadow-sm);
     transition:
@@ -615,7 +614,7 @@
   height: var(--control-height);
   align-items: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   border: 1px solid hsl(var(--border));
   border-inline-start-width: 0;
   background: hsl(var(--background));
@@ -732,7 +731,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  font-size: 0.8125rem;
+  font-size: var(--font-size-xs);
   padding: 0.0625rem var(--space-2);
   border-radius: var(--radius-sm);
   background: hsl(var(--secondary));
@@ -766,6 +765,6 @@
   border: 0;
   outline: none;
   background: transparent;
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   color: inherit;
 }

package/dist/styles/data-display-layout.css

@@ -8,7 +8,7 @@
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--muted));
     color: hsl(var(--muted-foreground));
     font-size: var(--font-size-sm);
@@ -39,7 +39,7 @@
   .ui-progress-track {
     height: 0.5rem;
     overflow: hidden;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--secondary));
   }
 
@@ -149,7 +149,7 @@
     width: 1.5rem;
     height: 1.5rem;
     place-items: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--success));
     color: hsl(var(--success-foreground));
   }
@@ -239,7 +239,7 @@
 }
 .ui-accordion-content {
   overflow: hidden;
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
 }
 .ui-accordion-content-inner {
   padding-bottom: var(--space-4);
@@ -286,7 +286,7 @@
   width: 2rem;
   height: 2rem;
   place-items: center;
-  border-radius: 9999px;
+  border-radius: var(--radius-pill);
   background: hsl(var(--background));
   border: 1px solid hsl(var(--border));
   color: hsl(var(--foreground));
@@ -313,6 +313,51 @@
   height: 1rem;
 }
 
+/* Dot indicators — horizontal, centered row of round dots; the active one fills + widens. */
+.ui-carousel-dots {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding-top: var(--space-4);
+}
+
+.ui-carousel-dot {
+  width: var(--space-2);
+  height: var(--space-2);
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+  background: hsl(var(--border));
+  transition:
+    width 150ms ease,
+    background-color 150ms ease;
+}
+
+.ui-carousel-dot:hover {
+  background: hsl(var(--muted-foreground));
+}
+
+.ui-carousel-dot[data-active] {
+  width: var(--space-5);
+  background: hsl(var(--primary));
+}
+
+.ui-carousel-dot:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+/* Vertical orientation — stack the dots into a column beside the track. */
+.ui-carousel[data-orientation="vertical"] .ui-carousel-dots {
+  flex-direction: column;
+}
+
+.ui-carousel[data-orientation="vertical"] .ui-carousel-dot[data-active] {
+  width: var(--space-2);
+  height: var(--space-5);
+}
+
 /* Vertical orientation (opts.axis === "y") — flips the track and the arrow positions. */
 .ui-carousel[data-orientation="vertical"] .ui-carousel-content {
   flex-direction: column;

package/dist/styles/density.css

@@ -15,6 +15,8 @@
     --switch-thumb-size: var(--switch-thumb-size-compact);
     --switch-thumb-translate: var(--switch-thumb-translate-compact);
     --table-cell-padding-y: var(--space-1);
+    /* Tighter overlay/card chrome at compact density (12px vertical). */
+    --space-chrome-y: var(--space-3);
   }
 
   .ui-density-default {
@@ -39,5 +41,7 @@
     --switch-thumb-size: var(--switch-thumb-size-comfortable);
     --switch-thumb-translate: var(--switch-thumb-translate-comfortable);
     --table-cell-padding-y: var(--space-2);
+    /* Roomier overlay/card chrome at comfortable density (24px vertical). */
+    --space-chrome-y: var(--space-6);
   }
 }

package/dist/styles/dialog-layout.css

@@ -3,6 +3,14 @@
  */
 
 @layer components {
+  /* Sheet (side-panel, Radix Dialog) chrome padding — defaults to the shared global chrome tokens.
+   * A service overrides --space-chrome-* once (whole system) or --sheet-pad-* for the Sheet only.
+   * (Lives here because Sheet is Dialog-based and dialog-layout.css is in the main bundle.) */
+  [data-slot="sheet-content"] {
+    --sheet-pad-x: var(--space-chrome-x);
+    --sheet-pad-y: var(--space-chrome-y);
+  }
+
   .ui-dialog-overlay {
     position: fixed;
     inset: 0;
@@ -23,6 +31,8 @@
     border: 1px solid hsl(var(--border));
     background-color: hsl(var(--background));
     padding: var(--dialog-space-inset);
+    /* clip so the full-bleed header/footer bands round with the dialog corners (Ant Modal). */
+    overflow: hidden;
     box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   }
 
@@ -32,23 +42,41 @@
     }
   }
 
+  /* Ring-safe scrollable body for a tall dialog. Full-bleed inset (matches the dialog padding) so a
+   * full-width control's 3px focus ring never clips against the scroll container's computed
+   * overflow-x; padding-block keeps the ring visible at the scroll edges. Mirrors SheetBody. */
+  [data-slot="dialog-body"] {
+    min-height: 0;
+    max-height: min(60vh, 32rem);
+    overflow-y: auto;
+    margin-inline: calc(-1 * var(--dialog-space-x));
+    padding-inline: var(--dialog-space-x);
+    padding-block: var(--space-1);
+    scroll-padding-block: var(--space-1);
+  }
+
+  /* Header = full-bleed band with a bottom border + the shared chrome padding — MIRRORS the footer so
+   * the two are symmetric pinned bars (same as Sheet/Drawer). */
   [data-slot="dialog-header"] {
     display: flex;
     flex-direction: column;
     gap: var(--space-stack-xs);
-    text-align: center;
-  }
-
-  @media (min-width: 640px) {
-    [data-slot="dialog-header"] {
-      text-align: left;
-    }
+    text-align: start;
+    margin-inline: calc(-1 * var(--dialog-space-x));
+    margin-block-start: calc(-1 * var(--dialog-space-y));
+    padding: var(--dialog-space-y) var(--dialog-space-x);
+    border-bottom: 1px solid hsl(var(--border));
   }
 
+  /* Footer = full-bleed band with a top border + the same chrome padding (mirror of the header). */
   [data-slot="dialog-footer"] {
     display: flex;
     flex-direction: column-reverse;
     gap: var(--space-inline-sm);
+    margin-inline: calc(-1 * var(--dialog-space-x));
+    margin-block-end: calc(-1 * var(--dialog-space-y));
+    padding: var(--dialog-space-y) var(--dialog-space-x);
+    border-top: 1px solid hsl(var(--border));
   }
 
   @media (min-width: 640px) {

package/dist/styles/form-layout.css

@@ -0,0 +1,161 @@
+/*
+ * FORM — Ant-style layout. Vertical by default (label above control, LEFT-aligned). Horizontal lays
+ * the label beside the control from the `collapseBelow` breakpoint UP (mobile-first): below it the
+ * field collapses back to vertical. `--form-label-width` / `--form-control-width` come from the Form
+ * (or a per-field override). RTL-safe: logical inline axis throughout.
+ *
+ * IMPORTANT: label alignment (justify/text-align: end) applies ONLY in horizontal/inline mode — never
+ * to a vertical field (a right-aligned label above a full-width control is wrong, gh feedback).
+ */
+
+@layer components {
+  .ui-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  /* Vertical (default + collapsed state): label stacked above the control column, LEFT-aligned.
+   * Gap = the shared --field-label-gap so FormField matches Descriptions and every label-above stack. */
+  .ui-form-field {
+    display: grid;
+    gap: var(--field-label-gap);
+  }
+
+  .ui-form-field-label {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .ui-form-field-control {
+    display: grid;
+    gap: var(--space-stack-xs); /* 4px between control and helper/error */
+    min-width: 0;
+    /* Cap the control width when a controlWidth is set; otherwise fill the column. */
+    max-inline-size: var(--form-control-width, none);
+  }
+
+  /* ── Horizontal — label beside control. Each block is scoped to [data-layout=horizontal|inline]
+   * so it NEVER affects a vertical field. Applies from the collapse breakpoint up (mobile-first). */
+
+  /* collapseBelow=false → always horizontal (all widths). */
+  .ui-form-field[data-collapse-below="false"]:is(
+      [data-layout="horizontal"],
+      [data-layout="inline"]
+    ) {
+    grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
+    align-items: start;
+    column-gap: var(--space-4);
+    row-gap: var(--space-stack-xs);
+  }
+  .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
+    > .ui-form-field-label {
+    min-block-size: var(--control-height);
+  }
+  .ui-form-field[data-collapse-below="false"][data-label-align="end"]:is(
+      [data-layout="horizontal"],
+      [data-layout="inline"]
+    )
+    > .ui-form-field-label {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  @media (min-width: 640px) {
+    .ui-form-field[data-collapse-below="sm"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      ) {
+      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
+      align-items: start;
+      column-gap: var(--space-4);
+      row-gap: var(--space-stack-xs);
+    }
+    .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
+      > .ui-form-field-label {
+      min-block-size: var(--control-height);
+    }
+    .ui-form-field[data-collapse-below="sm"][data-label-align="end"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      )
+      > .ui-form-field-label {
+      justify-content: flex-end;
+      text-align: end;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .ui-form-field[data-collapse-below="md"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      ) {
+      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
+      align-items: start;
+      column-gap: var(--space-4);
+      row-gap: var(--space-stack-xs);
+    }
+    .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
+      > .ui-form-field-label {
+      min-block-size: var(--control-height);
+    }
+    .ui-form-field[data-collapse-below="md"][data-label-align="end"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      )
+      > .ui-form-field-label {
+      justify-content: flex-end;
+      text-align: end;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .ui-form-field[data-collapse-below="lg"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      ) {
+      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
+      align-items: start;
+      column-gap: var(--space-4);
+      row-gap: var(--space-stack-xs);
+    }
+    .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
+      > .ui-form-field-label {
+      min-block-size: var(--control-height);
+    }
+    .ui-form-field[data-collapse-below="lg"][data-label-align="end"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      )
+      > .ui-form-field-label {
+      justify-content: flex-end;
+      text-align: end;
+    }
+  }
+
+  @media (min-width: 1280px) {
+    .ui-form-field[data-collapse-below="xl"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      ) {
+      grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
+      align-items: start;
+      column-gap: var(--space-4);
+      row-gap: var(--space-stack-xs);
+    }
+    .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
+      > .ui-form-field-label {
+      min-block-size: var(--control-height);
+    }
+    .ui-form-field[data-collapse-below="xl"][data-label-align="end"]:is(
+        [data-layout="horizontal"],
+        [data-layout="inline"]
+      )
+      > .ui-form-field-label {
+      justify-content: flex-end;
+      text-align: end;
+    }
+  }
+}

package/dist/styles/index.css

@@ -16,6 +16,13 @@
 @source inline(
   "{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
 );
+/* Extended text hierarchy + interaction-ramp utilities (library may not reference them directly). */
+@source inline("{text,bg,border}-{foreground-tertiary,foreground-disabled,link,brand}");
+@source inline("bg-{primary,secondary,destructive}-{hover,active}");
+/* Force the extended radius steps so Tailwind emits --radius-xs/-xl/-2xl to :root (consumers read
+ * `var(--radius-2xl)` directly; without a generated utility Tailwind drops the unused var). */
+@source inline("rounded-{xs,xl,2xl}");
+@source inline("text-2xs");
 @source "../**/*.{tsx,ts}";
 @import "../tokens/base.css";
 @import "./density.css";
@@ -29,6 +36,7 @@
 @import "./badge-layout.css";
 @import "./data-display-layout.css";
 @import "./data-entry-layout.css";
+@import "./form-layout.css";
 @import "./navigation-layout.css";
 
 @theme {
@@ -65,9 +73,28 @@
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
   --color-chart-6: var(--chart-6);
+  /* Golden-ratio radius scale — every step derives from --radius × (--radius-ratio = φ)ⁿ, so
+   * overriding --radius alone rescales the whole scale proportionally (≈ 1.4/2.3/3.7/6/9.7/15.7px). */
+  --radius-xs: calc(
+    var(--radius) / var(--radius-ratio) / var(--radius-ratio) / var(--radius-ratio)
+  );
+  --radius-sm: calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio));
+  --radius-md: calc(var(--radius) / var(--radius-ratio));
   --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-xl: calc(var(--radius) * var(--radius-ratio));
+  --radius-2xl: calc(var(--radius) * var(--radius-ratio) * var(--radius-ratio));
+  /* Extended text-hierarchy roles (tertiary / disabled / link / brand) → text-* / bg-* utilities. */
+  --color-foreground-tertiary: hsl(var(--text-tertiary));
+  --color-foreground-disabled: hsl(var(--text-disabled));
+  --color-link: hsl(var(--text-link));
+  --color-brand: hsl(var(--text-brand));
+  /* Interaction ramp (hover / active) → bg-primary-hover etc. */
+  --color-primary-hover: hsl(var(--primary-hover));
+  --color-primary-active: hsl(var(--primary-active));
+  --color-secondary-hover: hsl(var(--secondary-hover));
+  --color-secondary-active: hsl(var(--secondary-active));
+  --color-destructive-hover: hsl(var(--destructive-hover));
+  --color-destructive-active: hsl(var(--destructive-active));
   /* Wire Tailwind's font-sans/mono (and preflight) to the design-system fonts. */
   --font-sans: var(--font-family-sans);
   --font-mono: var(--font-family-mono);
@@ -86,6 +113,7 @@
   --color-wa-sumi: var(--wa-sumi);
   --color-wa-nezu: var(--wa-nezu);
   /* Wire Tailwind text-* utilities to runtime typography tokens (fontSize toolbar). */
+  --text-2xs: var(--font-size-2xs);
   --text-xs: var(--font-size-xs);
   --text-sm: var(--font-size-sm);
   --text-base: var(--font-size-base);
@@ -103,7 +131,7 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     font-family: var(--font-family-sans);
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-base);
     line-height: var(--line-height-body);
     font-feature-settings:
       "cv02",

package/dist/styles/layout.css

@@ -451,7 +451,7 @@
     justify-content: center;
     width: 3rem;
     height: 3rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background-color: hsl(var(--muted));
   }
 }

package/dist/styles/navigation-layout.css

@@ -127,7 +127,7 @@
   .ui-menubar-dot {
     width: 0.5rem;
     height: 0.5rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: currentColor;
   }
 

package/dist/styles/shell-layout.css

@@ -173,7 +173,7 @@
 
   .sb-product-tenant {
     overflow: hidden;
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     font-weight: 700;
     letter-spacing: 0.08em;
     line-height: 1.2;
@@ -203,7 +203,7 @@
   .sb-section-label {
     padding: 0 var(--space-2) var(--space-1);
     color: hsl(var(--muted-foreground));
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     font-weight: 700;
     letter-spacing: 0.08em;
     line-height: 1.2;
@@ -270,12 +270,12 @@
     min-width: 1.125rem;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--secondary));
     color: hsl(var(--muted-foreground));
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     font-weight: var(--font-weight-medium);
-    line-height: 1.125rem;
+    line-height: 1.2;
     padding-inline: 0.375rem;
   }
 
@@ -319,7 +319,7 @@
     width: 4px;
     height: 4px;
     flex: 0 0 auto;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: currentColor;
     opacity: 0.4;
   }
@@ -397,7 +397,7 @@
     flex: 0 0 auto;
     align-items: center;
     justify-content: center;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--secondary));
     color: hsl(var(--muted-foreground));
     font-size: 11px;
@@ -410,7 +410,7 @@
     bottom: -1px;
     width: 0.5625rem;
     height: 0.5625rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     border: 1.5px solid hsl(var(--card));
     background: hsl(var(--success));
   }
@@ -433,7 +433,7 @@
   .sb-user-role {
     overflow: hidden;
     color: hsl(var(--muted-foreground));
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     line-height: 1.3;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -515,7 +515,7 @@
     place-items: center;
     border-radius: calc(var(--radius) - 2px);
     color: white;
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     font-weight: 700;
   }
 
@@ -570,7 +570,7 @@
     background: hsl(var(--secondary));
     color: hsl(var(--muted-foreground));
     font-family: var(--font-family-mono);
-    font-size: 10px;
+    font-size: var(--font-size-2xs);
     line-height: 1.2;
   }
 
@@ -610,7 +610,7 @@
     right: 0.35rem;
     width: 0.375rem;
     height: 0.375rem;
-    border-radius: 9999px;
+    border-radius: var(--radius-pill);
     background: hsl(var(--attention));
   }
 

package/dist/tokens/components/card.css

@@ -19,7 +19,7 @@
   --stat-card-label-font-size: var(--font-size-xs);
   --stat-card-label-font-weight: var(--font-weight-medium);
   --stat-card-label-letter-spacing: 0.04em;
-  --stat-card-value-font-size: 1.625rem;
+  --stat-card-value-font-size: var(--font-size-2xl);
   --stat-card-value-line-height: 1.1;
   --stat-card-value-font-weight: var(--font-weight-semibold);
   --stat-card-hint-font-size: var(--font-size-xs);

package/dist/tokens/components/feedback.css

@@ -1,13 +1,21 @@
 /* Feedback primitive tokens: dialog, alert, empty state. */
 
 :root {
-  --dialog-space-inset: var(--space-5);
+  /* Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the
+   * whole system, or --dialog-space-x/-y for dialogs only). */
+  --dialog-space-x: var(--space-chrome-x);
+  --dialog-space-y: var(--space-chrome-y);
+  --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
   --alert-space-inset: var(--space-section-active);
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);
   --alert-dismiss-space-offset: var(--space-3);
+  /* Soft (subtle) semantic tint ratios — themeable so a service can hit its exact spec
+   * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
+  --alert-bg-alpha: 0.05;
+  --alert-border-alpha: 0.3;
   --empty-state-space-y: var(--space-10);
   --empty-state-space-x: var(--space-6);
   --skeleton-row-gap: var(--space-stack-sm);