bank20baht-ui 0.7.0 → 0.7.2

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/components/primitives/icons.d.ts

@@ -5,7 +5,11 @@ import { TemplateResult } from 'lit';
  * `illustrations.ts`, so both files share one look. Free for commercial use,
  * no attribution required; bundling a curated handful inside a product is
  * allowed, redistributing the library as an icon collection is not — keep
- * this file a short, hand-picked list and never expose it as a picker.
+ * this file a short, hand-picked list and never expose it as a picker. A
+ * handful of app-domain icons (utensils-crossed, car, house, ...) live here
+ * too, for `field.icon` / `FieldOption.icon` cases where a consuming app's
+ * concepts overlap with generic ones — still curated per-entry, not a
+ * mirror of any app's own icon set.
  * Licence: https://koboyo.com/icons/license
  *
  * Unlike `illustrations.ts` (large spot art with its own aspect ratio) these
@@ -15,7 +19,7 @@ import { TemplateResult } from 'lit';
  * GENERATED by scripts/koboyo-icons.ts — edit the ENTRIES list there and run
  * `bun run icons:koboyo-icons`; do not hand-edit the paths.
  */
-export type IconName = 'copy' | 'check' | 'calendar' | 'download' | 'upload' | 'plus' | 'external' | 'close' | 'play' | 'search' | 'sort' | 'chevron-up' | 'chevron-down' | 'chevron-right' | 'more' | 'columns' | 'coin' | 'banknote' | 'bank-building' | 'credit-card' | 'trending-up' | 'trending-down' | 'wallet' | 'piggy-bank' | 'receipt';
+export type IconName = 'copy' | 'check' | 'calendar' | 'download' | 'upload' | 'plus' | 'external' | 'close' | 'play' | 'search' | 'sort' | 'chevron-up' | 'chevron-down' | 'chevron-right' | 'more' | 'columns' | 'coin' | 'banknote' | 'bank-building' | 'credit-card' | 'trending-up' | 'trending-down' | 'wallet' | 'piggy-bank' | 'receipt' | 'utensils-crossed' | 'car' | 'house' | 'celebration-confetti' | 'tag' | 'coffee-cup';
 /** Render a named icon as an inline SVG that inherits `color`. */
 export declare function renderIcon(name: IconName): TemplateResult;
 export declare function isIconName(v: string): v is IconName;

package/dist/components/primitives/icons.js

@@ -1,4 +1,4 @@
-import { svg as c, html as h } from "lit";
+import { svg as c, html as o } from "lit";
 const a = {
   copy: {
     viewBox: "0 0 144 174",
@@ -99,16 +99,40 @@ const a = {
   receipt: {
     viewBox: "0 0 114 179",
     body: c`<path d="M7.5 11.2c-.3 1.3-.7 35.4-.9 75.8s-.6 75.5-.8 78c-.4 6 1.5 6.2 7.6.9l4.7-4.2 4.3 4.2a18 18 0 0 0 5.5 4.1c.7 0 3.5-1.8 6.1-4s5.2-4 5.7-4 2.7 1.8 4.8 4 4.8 4 6 4c1.1 0 4-2 6.5-4.5l4.4-4.4 4.7 4.4c2.7 2.5 5.5 4.5 6.4 4.5.8 0 3.6-1.8 6-4.1l4.5-4.1 4.9 4.1c2.7 2.3 5.4 4.1 6 4.1s1.8-1.1 2.7-2.5c2.1-3.2 3.1-3.1 6.6.2 2.5 2.4 3 2.5 4.3 1.3 1.1-1.2 1.2-2.9.5-8.5-.5-3.9-1-38.1-1.1-76-.1-38-.4-70.4-.8-72-1-4.8-4.2-4.5-10.7 1.1l-5.5 4.7-4.7-4.6C82.6 11.1 79.5 9 78.4 9s-4 2-6.4 4.5a21 21 0 0 1-5.3 4.5c-.4 0-3-2-5.6-4.5S55.5 9 54.6 9s-4.2 2-7.1 4.5L42.2 18l-5-4.5A20 20 0 0 0 30.8 9c-.8 0-3.4 2-5.8 4.5l-4.5 4.6-4.1-4.6c-4.6-5-8.1-5.9-8.9-2.3M42.4 22c1.1 0 4.1-2.1 6.8-4.6l4.8-4.5 2.8 1.9c1.5 1.1 3.8 3.2 5.1 4.6 3.4 3.6 5.6 3.3 11.3-1.9C76 15 78.5 13 78.9 13s2.7 2 5.1 4.5 5.1 4.5 6 4.5c.8 0 3.9-2.1 6.8-4.6 2.9-2.6 5.5-4.5 5.7-4.2s.5 33.9.7 74.9l.3 74.6-2.3-1.5c-2.1-1.4-2.5-1.3-5.2 1.3l-2.9 2.8-4.5-4.1c-2.5-2.3-5-4.2-5.6-4.2s-3.2 2-5.8 4.4l-4.7 4.4-5-4.4a24 24 0 0 0-6-4.4c-.6 0-3.4 2.1-6.2 4.6l-5.3 4.5-4.8-4.5a23 23 0 0 0-6.1-4.6c-.7 0-3.4 2.1-6.1 4.6l-4.9 4.6-4.9-4.6-4.9-4.6-4.8 3.7q-5 3.8-3.9 1.7c.5-1 1-34.3 1.2-75.3l.3-73.4 4.2 4.1c2.4 2.3 4.8 4.2 5.5 4.2.6 0 3.3-2.1 5.8-4.6l4.7-4.6 4.6 4.6c2.6 2.5 5.5 4.6 6.5 4.6"/><path d="M26.5 48.1q-.6 1 .2 2c.5.5 13.4.8 30.9.7 25.8-.3 29.9-.5 29.9-1.8s-4.1-1.5-30.2-1.8c-21.1-.2-30.4.1-30.8.9m.6 17.8C23 68.5 27.8 69 57 69s34-.5 29.9-3.1A271 271 0 0 0 57 65a271 271 0 0 0-29.9.9M26.5 84c-1.6 2.6 1.4 3 22.1 3 20 0 21.5-.1 21.2-1.8-.3-1.5-2.3-1.7-21.5-2-13.6-.1-21.4.1-21.8.8m0 19c-1.4 2.3 1.1 3 10.9 3 7.4 0 10.7-.4 11.5-1.3q1-1.4.4-2a79 79 0 0 0-22.8.3m45.9.1c-1.1 1.8 1.7 2.9 7.3 2.9 6.1 0 8.3-.7 8.3-2.6 0-1.8-14.5-2-15.6-.3m-46 18c-1.3 2.2 1.5 3 9.7 2.7 7-.3 8.4-.6 8.7-2.1s-.6-1.7-8.7-1.7c-5.4 0-9.3.4-9.7 1.1m46.1-.1q-2.2 3.3 8.1 2.8c5.3-.2 6.9-.6 6.9-1.8s-1.6-1.6-7.2-1.8c-4.5-.2-7.4.1-7.8.8"/>`
+  },
+  "utensils-crossed": {
+    viewBox: "0 0 158 156",
+    body: c`<path d="M32.6 8.9c-1.2 1.8.7 4 13.9 16.5C61.2 39.2 64.2 43.5 66 52.3c1 5.1 4.2 10.5 7.5 12.9 3.7 2.7 4.2-1.5.7-5.9a19 19 0 0 1-3.7-8.3c-1.4-9.2-3.9-12.7-19.8-28.2A163 163 0 0 0 34.3 8q-1 0-1.7.9m107.7 2.8c-2.7.5-42.8 38.5-105.5 100-21.7 21.3-22.6 22.7-19.3 29.7a11 11 0 0 0 14.8 5.5 753 753 0 0 0 31.3-30.8l29.1-29.6 2.6 1.8c5.6 3.6 8 2.6 19.5-8.6 21-20.3 27.9-28.2 32.4-37.3 3.7-7.4 4.2-9.5 4.6-16.9.4-8.3.4-8.5-2.6-11.5a13 13 0 0 0-3.9-2.9zm4.8 8.8c1.8 10.3-3.3 21.9-15.9 36C118.2 69 101.2 85 99 85c-.9 0-3.2-1.2-5.1-2.6l-3.4-2.5-31 31.6C32.7 138.8 28.1 143 25.6 143c-3.9 0-6.6-2.6-6.6-6.3 0-2.5 1.6-4.6 8.8-11.7 7.9-7.9 78.5-75.9 102.9-99.3 11.4-10.9 13.4-11.6 14.4-5.2M24.3 17.6c-.4 1.1 3.2 5.4 12.5 14.7 12.5 12.5 13.3 13.1 14.9 11.4 1.7-1.6 1.1-2.4-11.2-14.7-7.1-7.2-13.6-13-14.3-13q-1.2.1-1.9 1.6m-7.2 7.3c-2.4 1.5-.3 4.4 11.8 16.5 8.4 8.4 12.4 11.7 13.5 11.3q1.5-.7 1.6-1.9c0-.7-5.7-7-12.7-14-9.2-9.1-13.2-12.5-14.2-11.9m-8.8 9.7C7.6 36.5 35.6 65.2 41.1 68c1.9 1 6.4 2.4 10 3a26 26 0 0 1 9.7 3.6q5.2 4 5.2-.6c0-2.7-6.2-6.1-14.2-7.6-3.8-.7-8.4-2.2-10.2-3.4A175 175 0 0 1 25 47c-7.3-7.7-13.9-14-14.7-14q-1.2.1-2 1.6"/><path d="M105.1 93.2c-1 1.1 2.8 5.1 19 20.8 18.4 17.8 20.2 19.9 20.2 22.9q0 3.4-2.2 5.3c-5 4-4.5 4.4-37.5-30.5-12.7-13.5-16.1-16.5-17.2-15.6-.8.6-1.4 1.6-1.4 2.1a492 492 0 0 0 22.6 24.9c23.4 24.7 25.5 26.4 31.8 25.2 4.1-.8 8.6-6.6 8.6-11.1a16 16 0 0 0-1.3-5.9A640 640 0 0 0 107.3 92q-1 .1-2.2 1.2"/>`
+  },
+  car: {
+    viewBox: "0 0 203 113",
+    body: c`<path d="M89.6 6C71.2 8.3 59.5 16.2 47 34.5l-4.7 7-9.4 2.2c-11.3 2.7-16.3 5.9-19.8 12.8-2.2 4.2-2.6 6.5-3 16-.3 10.8-.2 11.2 2.4 14.3Q16.9 92 26.8 92c4 0 4.3.2 5.8 4 2.6 6.5 10.6 12 17.4 12s14.8-5.5 17.4-12l1.6-4h66l1.6 4a19 19 0 0 0 26.5 9.5 20 20 0 0 0 8.6-10.6c.5-2.8.8-2.9 6.2-3 12.8-.1 16.6-4.2 15.7-16.7a29 29 0 0 0-9.2-20.1c-3.6-2.9-8-4.9-19.4-8.8l-5.5-1.8-5.5-10.4c-8.8-16.3-16.3-22.8-30.7-26.5-7.6-2-24.5-2.8-33.7-1.6m28.4 4.4c16.6 3 24.9 9.7 33.7 27.3l4.9 9.8 9.7 3.2a81 81 0 0 1 13.8 6c3.7 2.4 3.9 2.8 2.1 3.4-1.2.5-2.8 2-3.8 3.4-1.4 2.2-1.5 3.2-.5 6.5 1.3 4.3 2.7 5.4 8.4 6.4 3.3.6 3.7 1 3.7 3.7 0 1.8-.9 3.9-2.5 5.4-2 2.1-3.4 2.5-8.3 2.5h-6l-.6-3.4a20 20 0 0 0-10.5-13c-11.6-4.6-24.4 1.7-26.7 13.1l-.6 3.2-14.7.3c-8 .2-22.7.2-32.7 0l-18-.3-1.1-4.2c-3.1-11.6-15.7-17.1-27-11.6a16 16 0 0 0-9.6 11.7l-1.2 4.4-6.3-.4c-8-.5-10.3-2.6-11-9.7-.4-4.6-.3-5.1 1.5-5.1 4.5 0 8.5-2.3 9.9-5.6 2.7-6.4 1.5-9.4-4.2-10.3l-3.9-.7 3.2-3.1c3-2.9 10.6-5.8 20.8-8 3.4-.7 4.6-1.8 9.1-8.2C61.7 20 72 12.7 87.5 10.1c7.8-1.3 22.2-1.2 30.5.3M22.4 63.7c-1 4.1-2.3 5.3-5.5 5.3-2.4 0-2.9-.4-2.9-2.4 0-4.5 1-5.6 5.1-5.6 3.8 0 3.9.1 3.3 2.7m164.6.8c.6.8 1.6 3 2 5 .8 3.4.7 3.5-2.4 3.5-4.1 0-5.6-1.6-5.6-5.6 0-4.2 3.5-5.9 6-2.9M61.1 78.6a15.3 15.3 0 0 1-2.5 22.7c-9.8 6.4-23.6-.6-23.6-12.1a15 15 0 0 1 26.1-10.6m103.6-.4c3.1 3.1 3.7 4.5 4 9 .6 7-1.8 11.5-7.7 14.5-5.4 2.8-9.4 2.9-14 .4a15 15 0 0 1-2.8-24.7c3.3-3 4.6-3.4 11.1-3.1 5.1.3 6.2.7 9.4 3.9"/><path d="M83 16.5c-3 .9-7.3 2.7-9.6 4-8.2 4.8-20.6 20.8-19.1 24.7.4 1.3 3.2 1.7 14.9 2.1 7.9.3 17.5.5 21.3.4l7-.2.5 18.4c.4 13.5.8 18.5 1.8 18.9S101 81 101 66.6V48h20.8c21.6 0 23.2-.3 23.2-4.3 0-3.2-7.1-15.6-11.5-20.1-6.2-6.4-11.1-7.8-29.5-8.2-11.8-.3-16.8 0-21 1.1M98 31v13H78q-19.9 0-20-1c0-1.7 7.4-11.2 11.8-15.2 5.6-5 9.4-6.8 17.6-8.3C99.1 17.3 98 16.2 98 31m24-10.3c4 1.1 6.5 2.6 9.1 5.4a56 56 0 0 1 9.9 16.8c0 .8-5.9 1.1-19.5 1.1H102V17.8l7.3.7c3.9.3 9.7 1.3 12.7 2.2M46.6 85.6c-1.9 1.9-2 3.5-.3 5.6q3.3 4 6.7.8c1.1-1.1 2-2.6 2-3.4 0-2-2.8-4.6-5-4.6-1 0-2.6.7-3.4 1.6M51 89q0 .9-1 1a1 1 0 0 1-1-1q.1-1 1-1t1 1m99.5-3.4c-3.4 3.4-.1 8.3 4.7 7.1 3.1-.8 4.1-3.8 2.1-6.6-1.7-2.5-4.6-2.7-6.8-.5M155 89q0 .9-.9 1-1-.1-1.6-1-.4-1 .9-1 1.5 0 1.6 1"/>`
+  },
+  house: {
+    viewBox: "0 0 174 168",
+    body: c`<path d="M116.2 9.2c-1.8 1.8-1.5 12.8.4 14.9q1.5 1.6 1.2 6.7l-.3 5-15.3-12.4C90.5 14 86.1 11 84 11c-2.3 0-5.4 2.3-14.2 10.3L40 48C11.8 73.1 8 76.9 8 80.1c0 3.6 4.4 7.2 8.2 6.7l2.8-.5.2 36.6.3 36.6 66.6.3 66.6.2.6-9.7c.4-5.4.7-22 .7-36.9V86.3l2.6.5c5 .9 10.5-4.8 9-9.5-.3-1-6-6.3-12.6-11.8l-12-10V40.2c0-12.3.3-15.6 1.5-16.8 1.8-1.9 2.1-12.4.3-14.2a70 70 0 0 0-26.6 0m22.8 7.3V21h-19v-9h19zm-36 13.2C149.5 68 160.5 77.4 160.8 79c.2.9-.4 2.3-1.2 3-2 1.6-2.6 1.2-18.2-11.6C96.2 33.1 84.8 24 84 24c-.5 0-7.3 5.7-15.2 12.7-36.9 33-48.5 43.1-50.9 44.7-2.5 1.5-2.8 1.6-4.3.1a7 7 0 0 1-1.6-2c0-.3 21.5-19.8 57.9-52.4A67 67 0 0 1 84.4 16c1.2.1 9.4 6.1 18.6 13.7m33 8.5c0 12.4-.1 13-1.7 11.6l-7-5.8-5.3-4.3V25h14zm-31 7.9 30.8 25.3L149 82.3v73.6H77v-28.2c0-20.7-.3-28.6-1.2-29.5-1.8-1.8-30.2-1.7-31.7.1q-1.1 1.4-1.3 29.3l-.3 27.9H24V82.1l2.9-2.3C28.4 78.5 42 66.6 57 53.2 81.2 31.5 84.4 29 85.9 30.3zm-32.6 82.6-.1 26.6-12.4.1-12.4.1-.3-26.8L47 102h25.5z"/><path d="M95.2 89.2c-1.8 1.8-1.7 36.2.2 37.7.9.8 7 1.1 19.7.9l18.4-.3.3-18.9c.2-14.5-.1-19.1-1-19.8-2.2-1.3-36.2-1-37.6.4M112 99v7H99V92h13zm18 0v7h-14V92h14zm-18 17.5c0 5.7-.2 6.5-1.9 6.5l-6.5.6-4.6.7V110h13zm18-.2c0 3.5-.2 6.6-.4 6.8s-3.4.2-7 .1l-6.6-.4V110h14zm-63.9 11c-1.5 1.5-1.4 4.4.2 4.9 2.1.8 3.7-.3 3.7-2.7 0-2.6-2.2-3.9-3.9-2.2"/>`
+  },
+  "celebration-confetti": {
+    viewBox: "0 0 177 200",
+    body: c`<path d="M109.6 10.9c-2 2.2-1.4 4.1 1.3 4.1 1 0 3.1 1 4.6 2.1 2.2 1.8 2.9 2 3.6.8q.8-1.4.9-2.5c0-.6.9-2.3 2.1-3.8l2-2.6h-3.8q-3.6 0-2.5.8c1.1.8.7 4.2-.5 4.2-1.7 0-4.1-2.3-3.7-3.5.9-2.2-2-1.9-4 .4m57.4 2.7c-1 3.1-1 3.9.4 5.2 1.5 1.5 1.6 1.2 1.6-3.6a18 18 0 0 0-.4-5.2c-.3 0-1 1.6-1.6 3.6m-94.9 9.5c-2.3 1.6-4.1 3.4-4.1 4 0 2.3 4.4 8.9 6 8.9 2 0 9-4.8 9-6.1 0-1.8-4.2-8.8-5.6-9.3-.7-.3-3.1.8-5.3 2.5m6.3 4.2c.9 1.5.7 2.1-.8 3.3q-4.3 3.2-5.2-1.2c-1.1-4.3 3.6-5.9 6-2.1m66.5-3.6-.3 6c-.1 6-2.7 9.5-8.5 11.4-8.1 2.7-10.2 5.4-11.2 14.7-.8 7.8-3.1 10.6-10.1 12.2-6.6 1.6-10.3 5-12.3 11.1-1 2.8-1.5 5.3-1.1 5.6 1.2 1.2 3.3-.7 3.9-3.4q1.4-7.5 10.7-10c8.3-2.3 10.9-5.3 12-13.7 1-8.5 2.7-11 8.8-13 2.7-.9 6.2-3 7.8-4.7 2.6-2.7 2.9-3.7 2.9-9.6q0-6.6-1.2-7t-1.4.4M98.1 38.4c.1 7.7-1.7 10.5-10.2 15.1-8.3 4.6-10.9 8-10.9 14.3 0 4.7 2.6 10.2 4.7 10.2 1.7 0 1.6-1.1-.2-4.6-3.3-6.4-.6-12.8 7.1-16.3q13.3-6.3 13.4-17.5 0-6.6-2.6-6.6c-.9 0-1.3 1.5-1.3 5.4m68.6 16.4c-2.3 2.5-2.1 7.5.2 9.6 1.8 1.6 1.9 1.5 1.9-4.9a32 32 0 0 0-.3-6.5zM48.6 80.2c-2 1.8-5.7 11-15.4 37.8-22.3 61.5-25.5 71.1-24.4 72.2 1 1 40.7-19.5 81.2-42 19-10.5 20-11.3 20-16.5a25 25 0 0 0-2-8.6c-7.3-15.9-30.6-37.6-46.6-43.2-7-2.5-9.7-2.4-12.8.3m20.2 7.1c20.4 11.6 42.9 40.3 37.1 47.3-4.6 5.5-30.7-10.8-44.2-27.7C51.6 94.3 47 82.8 51.8 81.8c3.3-.7 9.8 1.3 17 5.5m-13.4 17.1c10.4 14.4 29.1 29.6 40.9 33.1l4 1.2-14.3 7.8-14.2 7.8-4.7-2.3a74 74 0 0 1-29.2-26.5l-2.3-4.3 4.9-13.4L46.2 92c.9-2.4 1-2.3 2.9 1.9 1.1 2.4 3.9 7.1 6.3 10.5m-13.2 32.8a78 78 0 0 0 21.2 16.5l4.9 2.5-13.8 7.4-13.9 7.4-4.3-2.6a41 41 0 0 1-12.2-11.1c-.8-1.6 1.7-9.5 9.4-30.2q.5-1.7 2.7 2a72 72 0 0 0 6 8.1m-8.4 33.6 3.4 2-11.9 6.5c-6.5 3.6-12 6.4-12.2 6.2s1.5-5.5 3.8-11.8 4.1-12 4.1-12.8c0-.7 2.1.8 4.8 3.3s6.2 5.5 8 6.6m107.2-87c-1.4.9-4.4 3.6-6.6 5.9-3.9 4.1-4.5 4.3-9.9 4.3a25 25 0 0 0-9 1.6c-4.2 2-7.2 6.1-5.6 7.7.9.9 1.7.5 3.4-1.5q4.6-5.4 10-4.4 7.6 1.5 14.5-5.9c4.9-5.4 8.1-6.8 13.9-5.9 3.4.5 4.3.3 4.3-.9 0-3-11-3.7-15-.9m25.1 18.8-2.4 1.7 2.4 2c2.4 1.9 2.4 1.9 2.7-.2.2-1.2.2-2.8 0-3.6-.3-1.4-.6-1.3-2.7.1m-30.6 11.3-4 .6.3 5c.4 6.5 1.5 7.5 7.5 6.6 2.6-.4 5-1 5.3-1.4s.2-2.9-.3-5.9c-.9-5.8-1.3-6.1-8.8-4.9m5.5 6.1c0 2.7-.3 3-3 3s-3-.3-3-3 .3-3 3-3 3 .3 3 3"/>`
+  },
+  tag: {
+    viewBox: "0 0 151 153",
+    body: c`<path d="M85 9c-4.7.3-9.4 1.1-10.5 1.7A1738 1738 0 0 0 9.3 78.2 21 21 0 0 0 9 91.6c.6 1.4 11.5 13.5 24.3 26.7C56.8 142.6 60.9 146 67.5 146c6.8 0 10.5-3.2 41.9-35.7 17-17.6 31.6-33.3 32.5-34.9 1.4-2.5 1.6-7 1.6-30.1 0-26-.1-27.3-2.1-30a30 30 0 0 0-5.4-5.1c-3.2-2.1-4.1-2.2-22.9-2-10.8 0-23.4.4-28.1.8m47.6 5.5c6.1 2.5 6.6 5.4 6.2 32.4-.3 17.6-.7 24.2-1.7 26.1-2.5 4.5-62.5 65.2-65.8 66.6-6.4 2.7-7.7 1.8-33.3-24.2C13.1 90 11.6 88 13.5 81.8c.4-1.2 8.5-10.2 17.9-19.8l30.2-31c7.3-7.5 14-14.2 14.9-15 3.4-2.8 50-4.1 56.1-1.5"/><path d="M107.3 28.6a13 13 0 0 0-6.3 10.6c0 3 3.3 8.4 6.1 9.9 3.2 1.7 9.1 1.5 12.1-.5 1.5-1 3.4-3.3 4.3-5.3 4.6-9.6-6.5-19.7-16.2-14.7M117 34c4 4 1.5 11-4.1 11-2.8 0-6.9-3.9-6.9-6.7 0-2.1 4.6-6.3 7-6.3a7 7 0 0 1 4 2"/>`
+  },
+  "coffee-cup": {
+    viewBox: "0 0 179 138",
+    body: c`<path d="M52 7c-14.8 1.8-30.3 6.7-36.8 11.7-6 4.5-7.2 7.6-7.2 18.4 0 12.3 1.5 27.5 4 41 7.8 41.3 24.3 55.3 63.5 53.6 7.1-.3 15.4-1.2 18.2-2q18-5.1 25.5-18.3c2.6-4.8 3.4-5.4 6.2-5.4 9.7 0 23.6-6.1 31.6-13.9 16.7-16.3 18.7-42.7 4.2-53.8-5.7-4.3-11.1-5.7-19.9-4.9l-7.3.6v-3.8q0-15-33-21.7C92 6.6 62.5 5.8 52 7m43 5.5c15.5 2.3 25.6 6 31.3 11.3 4 3.8 3.3 6.8-2.5 10.6-2.5 1.7-2.8 1.6-7.6-.8-21.7-11-68.2-11.1-89.5-.1A32 32 0 0 1 21 36c-2.1 0-7-5.3-7-7.5 0-6.8 16.6-13.8 39.5-16.8 7.8-1 32.9-.6 41.5.8m5.8 20.4c4.5 1.1 9.7 2.8 11.5 3.8l3.2 1.7-4.5 1.3c-6.9 2.2-32.6 3.6-52 2.9-16.6-.6-31-2.8-31-4.6 0-1.1 11-4.6 18.5-5.9l8.5-1.5c1.4-.3 10.4-.3 20-.1 13.6.2 19.3.8 25.8 2.4M14.5 37c.4.6 2.9 2.2 5.7 3.6 13.6 6.9 43.2 10.8 65.3 8.6 15.8-1.6 29.6-5.1 38.1-9.6l6.6-3.5-.6 9.7a400 400 0 0 1-2.7 23.2c-6.3 44.8-19.1 58.2-55.4 58.2a73 73 0 0 1-30.9-5.4q-13.7-7-21-32.2c-2.9-10-6.4-33-6.8-45.4-.3-7.6.2-9.6 1.7-7.2m140.4 3c8.4 4.2 11.6 11.1 10.9 23.1-1 17-12.9 31-30.7 36.3-3 .9-6.7 1.6-8.1 1.6h-2.7l1.6-5c.9-2.7 2.1-5 2.8-5 3.4 0 12.6-4.5 16.7-8.2 12-10.4 13.8-28 3.5-33.4a17 17 0 0 0-12.3-.4c-2.6.9-2.6.9-2.6-4 0-6.1 1.2-6.9 10.3-7 4.8 0 7.9.6 10.6 2m-6.1 15.7c4.8 5.3 1.9 15.8-6.5 23.4-4.1 3.6-11.9 7.6-12.9 6.6-.2-.1.6-5.2 1.6-11.2a126 126 0 0 0 2.3-19.5l4.2-1.4c4.9-1.8 8.3-1.2 11.3 2.1"/>`
   }
 };
-function m(l) {
-  const { viewBox: o, body: d } = a[l];
-  return h`<svg class="baht-icon" viewBox=${o} fill="currentColor" aria-hidden="true">${d}</svg>`;
+function v(l) {
+  const { viewBox: m, body: h } = a[l];
+  return o`<svg class="baht-icon" viewBox=${m} fill="currentColor" aria-hidden="true">${h}</svg>`;
 }
 function t(l) {
   return Object.prototype.hasOwnProperty.call(a, l);
 }
 export {
   t as isIconName,
-  m as renderIcon
+  v as renderIcon
 };

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

@@ -387,6 +387,21 @@
   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. */
+.baht-option-card--w-1-4 {
+  flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
+}
+.baht-option-card--w-1-2 {
+  flex: 0 0 calc(50% - var(--baht-space-3) / 2);
+}
+.baht-option-card--w-3-4 {
+  flex: 0 0 calc(75% - var(--baht-space-3) / 4);
+}
+.baht-option-card--w-full {
+  flex: 0 0 100%;
+}
 /* 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

@@ -833,6 +833,21 @@
   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. */
+.baht-option-card--w-1-4 {
+  flex: 0 0 calc(25% - var(--baht-space-3) * 3 / 4);
+}
+.baht-option-card--w-1-2 {
+  flex: 0 0 calc(50% - var(--baht-space-3) / 2);
+}
+.baht-option-card--w-3-4 {
+  flex: 0 0 calc(75% - var(--baht-space-3) / 4);
+}
+.baht-option-card--w-full {
+  flex: 0 0 100%;
+}
 /* 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.0",
+  "version": "0.7.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

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