bank20baht-ui 0.7.1 → 0.7.3

package/dist/components/primitives/baht-radio.js

@@ -1,16 +1,22 @@
-import { html as t, nothing as r } from "lit";
-import { customElement as p } from "lit/decorators.js";
+import { html as i, nothing as r } from "lit";
+import { customElement as h } from "lit/decorators.js";
 import { live as d } from "lit/directives/live.js";
-import { BahtFieldBase as h } from "../base.js";
+import { BahtFieldBase as p } from "../base.js";
 import { isIconName as b, renderIcon as $ } from "./icons.js";
-var m = Object.getOwnPropertyDescriptor, u = (a, e, c, s) => {
-  for (var i = s > 1 ? void 0 : s ? m(e, c) : e, n = a.length - 1, l; n >= 0; n--)
-    (l = a[n]) && (i = l(i) || i);
-  return i;
+var u = Object.getOwnPropertyDescriptor, m = (a, t, c, s) => {
+  for (var e = s > 1 ? void 0 : s ? u(t, c) : t, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (e = o(e) || e);
+  return e;
 };
-let o = class extends h {
+const v = {
+  "1/4": "baht-option-card--w-1-4",
+  "1/2": "baht-option-card--w-1-2",
+  "3/4": "baht-option-card--w-3-4",
+  full: "baht-option-card--w-full"
+};
+let l = class extends p {
   renderOption(a) {
-    return t`<label class="baht-option">
+    return i`<label class="baht-option">
       <input
         type="radio"
         name=${this.controlId}
@@ -23,7 +29,8 @@ let o = class extends h {
     </label>`;
   }
   renderCardOption(a) {
-    return t`<label class="baht-option baht-option--card">
+    const t = a.width ? ` ${v[a.width]}` : "";
+    return i`<label class="baht-option baht-option--card${t}">
       <span class="baht-option-card-row">
         <input
           type="radio"
@@ -33,15 +40,15 @@ let o = class extends h {
           ?disabled=${this.disabled || this.readonly}
           @change=${() => this.emitInput(a.key)}
         />
-        ${a.icon && b(a.icon) ? t`<span class="baht-option-card-icon">${$(a.icon)}</span>` : r}
+        ${a.icon && b(a.icon) ? i`<span class="baht-option-card-icon">${$(a.icon)}</span>` : r}
         <span class="baht-option-card-title">${a.label}</span>
       </span>
-      ${a.description ? t`<span class="baht-option-card-desc">${a.description}</span>` : r}
+      ${a.description ? i`<span class="baht-option-card-desc">${a.description}</span>` : r}
     </label>`;
   }
   renderControl() {
     const a = this.field.variant === "card";
-    return t`<div
+    return i`<div
       class="baht-control baht-control--radio${a ? " baht-control--radio-card" : ""}"
       role="radiogroup"
       aria-labelledby=${this.field.label ? this.labelId : r}
@@ -50,14 +57,14 @@ let o = class extends h {
       aria-describedby=${this.describedBy}
     >
       ${(this.field.options ?? []).map(
-      (e) => a ? this.renderCardOption(e) : this.renderOption(e)
+      (t) => a ? this.renderCardOption(t) : this.renderOption(t)
     )}
     </div>`;
   }
 };
-o = u([
-  p("baht-radio")
-], o);
+l = m([
+  h("baht-radio")
+], l);
 export {
-  o as BahtRadio
+  l as BahtRadio
 };

package/dist/core/types.d.ts

@@ -10,6 +10,10 @@ export interface FieldOption {
     description?: string;
     /** radio (variant: 'card' only): icon name from the curated set (see icons.ts). */
     icon?: string;
+    /** radio (variant: 'card' only): this option's own share of the row (same
+     * fractions as `FieldDescriptor.width`), instead of the default
+     * auto-wrapping ~200px card. Unset options keep the default. */
+    width?: FieldWidth;
 }
 /** Ordering/equality ops available to the `compare` validator. */
 export type CompareOp = 'eq' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';

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);
@@ -387,6 +393,29 @@
   align-items: center;
   gap: var(--baht-space-2);
 }
+/* `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. `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
    in the tab order and keyboard-focusable (`:focus-visible` above). */

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);
@@ -833,6 +839,29 @@
   align-items: center;
   gap: var(--baht-space-2);
 }
+/* `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. `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
    in the tab order and keyboard-focusable (`:focus-visible` above). */

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.1",
+  "version": "0.7.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

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