bank20baht-ui 0.7.2 → 0.7.3

package/dist/css/components.css

@@ -367,6 +367,12 @@
   flex-direction: column;
   gap: var(--baht-space-1);
   flex: 1 1 200px;
+  /* An `option.width` fraction (below) counts padding+border in that
+     percentage, like every other sized box in this file — without this,
+     the browser default (content-box) adds padding on top of the
+     flex-basis, inflating the rendered card past its intended share of
+     the row. */
+  box-sizing: border-box;
   border: var(--baht-border-default);
   border-radius: var(--baht-radius-md);
   padding: var(--baht-space-3) var(--baht-space-4);
@@ -389,18 +395,26 @@
 }
 /* `option.width` — same fractions as `field.width`, against the card row's
    own gap (`--baht-space-3`) instead of the form grid's `--baht-field-gap`,
-   overriding the default `flex: 1 1 200px` auto-wrap. */
+   overriding the default `flex: 1 1 200px` auto-wrap. `min-width: 0`
+   overrides the flex item default of `auto` (= its content's min-content
+   width), which otherwise floors the card at its label's natural width and
+   silently defeats a basis smaller than that (e.g. long labels forcing 3
+   per row instead of the requested 4) — the label wraps instead. */
 .baht-option-card--w-1-4 {
   flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
+  min-width: 0;
 }
 .baht-option-card--w-1-2 {
   flex: 0 0 calc(50% - var(--baht-space-3) / 2);
+  min-width: 0;
 }
 .baht-option-card--w-3-4 {
   flex: 0 0 calc(75% - var(--baht-space-3) / 4);
+  min-width: 0;
 }
 .baht-option-card--w-full {
   flex: 0 0 100%;
+  min-width: 0;
 }
 /* Selection reads from the card's own border/wash (above), not a radio
    bullet — visually hidden rather than `display: none` so the input stays

package/dist/tokens.css

@@ -813,6 +813,12 @@
   flex-direction: column;
   gap: var(--baht-space-1);
   flex: 1 1 200px;
+  /* An `option.width` fraction (below) counts padding+border in that
+     percentage, like every other sized box in this file — without this,
+     the browser default (content-box) adds padding on top of the
+     flex-basis, inflating the rendered card past its intended share of
+     the row. */
+  box-sizing: border-box;
   border: var(--baht-border-default);
   border-radius: var(--baht-radius-md);
   padding: var(--baht-space-3) var(--baht-space-4);
@@ -835,18 +841,26 @@
 }
 /* `option.width` — same fractions as `field.width`, against the card row's
    own gap (`--baht-space-3`) instead of the form grid's `--baht-field-gap`,
-   overriding the default `flex: 1 1 200px` auto-wrap. */
+   overriding the default `flex: 1 1 200px` auto-wrap. `min-width: 0`
+   overrides the flex item default of `auto` (= its content's min-content
+   width), which otherwise floors the card at its label's natural width and
+   silently defeats a basis smaller than that (e.g. long labels forcing 3
+   per row instead of the requested 4) — the label wraps instead. */
 .baht-option-card--w-1-4 {
   flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
+  min-width: 0;
 }
 .baht-option-card--w-1-2 {
   flex: 0 0 calc(50% - var(--baht-space-3) / 2);
+  min-width: 0;
 }
 .baht-option-card--w-3-4 {
   flex: 0 0 calc(75% - var(--baht-space-3) / 4);
+  min-width: 0;
 }
 .baht-option-card--w-full {
   flex: 0 0 100%;
+  min-width: 0;
 }
 /* Selection reads from the card's own border/wash (above), not a radio
    bullet — visually hidden rather than `display: none` so the input stays

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",