@godxjp/ui 33.18.0 → 33.20.0

package/dist/props/registry.js

@@ -118,7 +118,7 @@ const VOCABULARY_REGISTRY = {
   WidthProp: {
     file: "vocabulary/shared.prop.ts",
     category: "shared",
-    description: "Explicit layout length (number\u2192px | CSS string) \u2014 NOT the SizeProp tier"
+    description: 'Explicit layout length (number\u2192px | CSS length string: 20rem, 50%, calc()/min()/var()) \u2014 NOT the SizeProp tier; "md" is a type error'
   },
   ControlWidthProp: {
     file: "vocabulary/shared.prop.ts",
@@ -2632,7 +2632,14 @@ const COMPONENT_PROP_REGISTRY = {
   DescriptionsProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["ClassNameProp"]
+    vocabulary: [
+      "ClassNameProp",
+      {
+        field: "labelWidth",
+        local: true,
+        reason: "WidthProp CSS lengths plus content for shared intrinsic label tracks; auto preserves the theme width (gh#1441)."
+      }
+    ]
   },
   DescriptionsItemProp: {
     group: "data-display",
@@ -3553,6 +3560,11 @@ const COMPONENT_PROP_REGISTRY = {
       "ChildrenProp",
       "DisabledProp",
       "IconProp",
+      {
+        field: "countTone",
+        local: true,
+        reason: "Counter intent: neutral (shared ToneProp term, as Badge) or accent (existing selected emphasis). Per-item and compound trigger parity, gh#1442."
+      },
       {
         field: "count",
         local: true,

package/dist/props/vocabulary/shared.prop.d.ts

@@ -57,11 +57,21 @@ export type AsChildProp = boolean;
  * would otherwise write at the call site.
  */
 export type FlushProp = boolean;
+/** A CSS length or percentage unit (CSS Values and Units 4 §5–6), as written after a number. */
+type CssLengthUnit = "px" | "rem" | "em" | "%" | "ch" | "ex" | "lh" | "rlh" | "vw" | "vh" | "vi" | "vb" | "vmin" | "vmax" | "svw" | "svh" | "lvw" | "lvh" | "dvw" | "dvh" | "cqw" | "cqh" | "cqi" | "cqb" | "cqmin" | "cqmax" | "cm" | "mm" | "in" | "pt" | "pc";
 /**
  * An explicit layout dimension (NOT the `SizeProp` control-height tier). A `number` is treated as
- * px; a `string` is any CSS length (`"32rem"`, `"90vw"`, `"50%"`).
+ * px; a `string` must be a CSS length the browser can use as written: a number with a unit
+ * (`"32rem"`, `"90vw"`, `"50%"`), an intrinsic keyword (`"auto"`, `"max-content"`,
+ * `"min-content"`, `"fit-content"`) or a math / custom-property expression (`calc()`, `min()`,
+ * `max()`, `clamp()`, `var()`, `fit-content()`).
+ *
+ * A size-tier word (`"sm"`, `"md"`, `"lg"`) is a type error, not a width: the value is written into
+ * CSS as-is, so `controlWidth="md"` was `--form-control-width: md` — invalid at computed-value time,
+ * which drops the cap and lets the control fill its column (gh#1431). A component that offers a
+ * width SCALE names it with its own union (`CenteredShellWidthProp`, `ControlWidthProp`).
  */
-export type WidthProp = number | string;
+export type WidthProp = number | `${number}${CssLengthUnit}` | "auto" | "max-content" | "min-content" | "fit-content" | `calc(${string})` | `min(${string})` | `max(${string})` | `clamp(${string})` | `var(${string})` | `fit-content(${string})`;
 /**
  * How a control sizes on the inline axis: fill its column, hug its label, or sit at a bounded
  * width the theme owns.
@@ -106,3 +116,4 @@ export type NotFoundContentProp = React.ReactNode;
  * lets it size to its content, and a number pins it to that many pixels.
  */
 export type PopupMatchWidthProp = boolean | number;
+export {};

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

@@ -2685,6 +2685,36 @@
 
 @layer godxjp-ui-responsive {
 
+  [data-slot="descriptions"][data-label-width="content"] {
+    grid-template-columns: repeat(
+      var(--descriptions-column-count, 1),
+      fit-content(var(--descriptions-label-max-width)) minmax(0, 1fr)
+    );
+    column-gap: var(--descriptions-label-gap);
+  }
+  [data-slot="descriptions"][data-label-width="content"][data-bordered] {
+    column-gap: 0;
+  }
+  [data-slot="descriptions"][data-label-width="content"] > [data-slot="descriptions-item"] {
+    grid-column: span calc(2 * var(--descriptions-item-span, 1));
+    grid-template-columns: subgrid;
+  }
+  [data-slot="descriptions"][data-label-width="content"]
+    > [data-slot="descriptions-item"][data-span="filled"] {
+    grid-column: 1 / -1;
+  }
+  [data-slot="descriptions"][data-label-width="content"]
+    > [data-slot="descriptions-item"]
+    > [data-slot="descriptions-value"] {
+    grid-column: 2 / -1;
+  }
+  [data-slot="descriptions"][data-label-width="content"]
+    > [data-slot="descriptions-item"]
+    > [data-slot="descriptions-label"] {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
   @media (min-width: 640px) {
     [data-slot="descriptions"][data-columns-responsive] {
       --descriptions-column-count: var(

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.18.0",
+  "version": "33.20.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/navigation-layout.css

@@ -412,6 +412,11 @@
     color: var(--tabs-count-active-color, hsl(var(--primary-foreground)));
   }
 
+  [data-slot="tabs"] [data-slot="tabs-trigger"] .ui-tabs-count[data-count-tone="neutral"] {
+    background: var(--tabs-count-neutral-background, hsl(var(--muted)));
+    color: var(--tabs-count-neutral-color, hsl(var(--muted-foreground)));
+  }
+
   @media (forced-colors: active) {
     [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
       outline: var(--tabs-count-forced-outline-width, var(--stroke-hairline)) solid currentColor;