bank20baht-ui 0.6.0 → 0.7.0

package/dist/components/base.d.ts

@@ -92,6 +92,12 @@ export declare abstract class BahtFieldBase extends BahtElement {
     /** Emit the user's edit upward (composed so it crosses any boundary). */
     protected emitInput(value: unknown): void;
     protected abstract renderControl(): TemplateResult;
+    /** True when `field.icon` names a real icon — gates both the icon markup
+     * and the control's icon-padding class, so a typo/removed name never
+     * leaves the control indented for a glyph that isn't there. */
+    protected get hasFieldIcon(): boolean;
+    /** Leading icon for text/currency/textarea/dropdown controls (spec: field.icon). */
+    protected renderFieldIcon(): TemplateResult | typeof nothing;
     protected renderLabel(): TemplateResult | typeof nothing;
     /** Required asterisk, or the "(optional)" marker when the form asks for it. */
     protected renderLabelMark(): TemplateResult | typeof nothing;

package/dist/components/base.js

@@ -1,36 +1,37 @@
-import { nothing as a, html as h, LitElement as b, ReactiveElement as y } from "lit";
-import { property as o } from "lit/decorators.js";
-import { t as m } from "../core/i18n.js";
-var v = Object.defineProperty, l = (i, t, e, s) => {
+import { nothing as o, html as a, LitElement as y, ReactiveElement as m } from "lit";
+import { property as l } from "lit/decorators.js";
+import { t as v } from "../core/i18n.js";
+import { isIconName as c, renderIcon as C } from "./primitives/icons.js";
+var I = Object.defineProperty, d = (i, e, t, s) => {
   for (var r = void 0, u = i.length - 1, p; u >= 0; u--)
-    (p = i[u]) && (r = p(t, e, r) || r);
-  return r && v(t, e, r), r;
+    (p = i[u]) && (r = p(e, t, r) || r);
+  return r && I(e, t, r), r;
 };
-function c() {
+function f() {
   return typeof document < "u" && typeof document.querySelector == "function";
 }
-const C = Symbol.for("bahtui.ssrStash");
-function T(i) {
-  if (i[C]) return !0;
-  const t = i.firstChild;
-  return (t == null ? void 0 : t.nodeType) === 8 && t.data.startsWith("lit-part");
+const T = Symbol.for("bahtui.ssrStash");
+function $(i) {
+  if (i[T]) return !0;
+  const e = i.firstChild;
+  return (e == null ? void 0 : e.nodeType) === 8 && e.data.startsWith("lit-part");
 }
-function k(i) {
-  let t = i.firstChild;
-  if (!t || t.nodeType !== 8 || !t.data.startsWith("lit-part")) return;
-  let e = 0;
-  for (; t; ) {
-    const s = t.nextSibling;
-    if (t.nodeType === 8) {
-      const r = t.data;
-      r.startsWith("lit-part") ? e += 1 : r.startsWith("/lit-part") && (e -= 1);
+function g(i) {
+  let e = i.firstChild;
+  if (!e || e.nodeType !== 8 || !e.data.startsWith("lit-part")) return;
+  let t = 0;
+  for (; e; ) {
+    const s = e.nextSibling;
+    if (e.nodeType === 8) {
+      const r = e.data;
+      r.startsWith("lit-part") ? t += 1 : r.startsWith("/lit-part") && (t -= 1);
     }
-    if (t.remove(), e === 0) break;
-    t = s;
+    if (e.remove(), t === 0) break;
+    e = s;
   }
 }
-let f = 0;
-class $ extends b {
+let b = 0;
+class k extends y {
   constructor() {
     super(...arguments), this.uid = 0;
   }
@@ -48,43 +49,43 @@ class $ extends b {
   static get observedAttributes() {
     return [...super.observedAttributes, "defer-hydration"];
   }
-  attributeChangedCallback(t, e, s) {
-    if (t === "defer-hydration") {
+  attributeChangedCallback(e, t, s) {
+    if (e === "defer-hydration") {
       s === null && this.isConnected && super.connectedCallback();
       return;
     }
-    super.attributeChangedCallback(t, e, s);
+    super.attributeChangedCallback(e, t, s);
   }
   connectedCallback() {
     this.hasAttribute("defer-hydration") || super.connectedCallback();
   }
-  update(t) {
-    const e = !this.hasUpdated, s = globalThis.bahtHydrate, r = e && c() && T(this);
+  update(e) {
+    const t = !this.hasUpdated, s = globalThis.bahtHydrate, r = t && f() && $(this);
     if (r)
       if (s) {
         const u = this.render();
-        this.renderOptions.isConnected = this.isConnected, y.prototype.update.call(this, t), s(u, this, this.renderOptions);
+        this.renderOptions.isConnected = this.isConnected, m.prototype.update.call(this, e), s(u, this, this.renderOptions);
       } else
-        k(this), super.update(t);
+        g(this), super.update(e);
     else
-      e && c() && this.uid === 0 && (this.uid = ++f), super.update(t);
-    r && this.uid === 0 && (this.uid = ++f, this.requestUpdate());
+      t && f() && this.uid === 0 && (this.uid = ++b), super.update(e);
+    r && this.uid === 0 && (this.uid = ++b, this.requestUpdate());
   }
   /** Dispatch a bubbling, composed CustomEvent — crosses any light/shadow DOM boundary. */
-  emit(t, e) {
-    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  emit(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
   }
 }
-function O(i, t) {
-  let e = t;
-  for (; e.parentNode && e.parentNode !== i; ) e = e.parentNode;
+function E(i, e) {
+  let t = e;
+  for (; t.parentNode && t.parentNode !== i; ) t = t.parentNode;
   const s = Array.from(i.childNodes).filter(
-    (r) => r !== e && r.nodeType !== Node.COMMENT_NODE
+    (r) => r !== t && r.nodeType !== Node.COMMENT_NODE
   );
-  s.length > 0 && t.append(...s);
+  s.length > 0 && e.append(...s);
 }
-var d;
-const n = (d = class extends $ {
+var h;
+const n = (h = class extends k {
   constructor() {
     super(...arguments), this.value = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.showOptional = !1, this.error = null, this.typed = null, this.onFocusOut = () => this.flushTyped();
   }
@@ -94,21 +95,21 @@ const n = (d = class extends $ {
   disconnectedCallback() {
     this.removeEventListener("focusout", this.onFocusOut), this.flushTyped(), super.disconnectedCallback();
   }
-  willUpdate(t) {
-    var e;
-    super.willUpdate(t), t.has("value") && ((e = this.typed) != null && e.emitted) && (this.typed = null);
+  willUpdate(e) {
+    var t;
+    super.willUpdate(e), e.has("value") && ((t = this.typed) != null && t.emitted) && (this.typed = null);
   }
   get effectiveDebounce() {
-    return this.debounce ?? d.defaultDebounce;
+    return this.debounce ?? h.defaultDebounce;
   }
   /** A typed edit: emitted after `debounce` ms of quiet (or at once when 0). */
-  emitTyped(t) {
-    const e = this.effectiveDebounce;
-    if (clearTimeout(this.typedTimer), e <= 0) {
-      this.typed = null, this.emitInput(t);
+  emitTyped(e) {
+    const t = this.effectiveDebounce;
+    if (clearTimeout(this.typedTimer), t <= 0) {
+      this.typed = null, this.emitInput(e);
       return;
     }
-    this.typed = { value: t, emitted: !1 }, this.typedTimer = setTimeout(() => this.flushTyped(), e);
+    this.typed = { value: e, emitted: !1 }, this.typedTimer = setTimeout(() => this.flushTyped(), t);
   }
   /** Hand a pending typed edit to the host now (blur, disconnect, host reads). Idempotent. */
   flushTyped() {
@@ -119,21 +120,33 @@ const n = (d = class extends $ {
     return this.typed ? this.typed.value : this.value;
   }
   /** Emit the user's edit upward (composed so it crosses any boundary). */
-  emitInput(t) {
-    this.emit("baht-input", { key: this.field.key, value: t });
+  emitInput(e) {
+    this.emit("baht-input", { key: this.field.key, value: e });
+  }
+  /** True when `field.icon` names a real icon — gates both the icon markup
+   * and the control's icon-padding class, so a typo/removed name never
+   * leaves the control indented for a glyph that isn't there. */
+  get hasFieldIcon() {
+    const e = this.field.icon;
+    return e != null && c(e);
+  }
+  /** Leading icon for text/currency/textarea/dropdown controls (spec: field.icon). */
+  renderFieldIcon() {
+    const e = this.field.icon;
+    return e == null || !c(e) ? o : a`<span class="baht-field-icon" aria-hidden="true">${C(e)}</span>`;
   }
   renderLabel() {
-    return this.field.label ? h`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
+    return this.field.label ? a`<label class="baht-label" id=${this.labelId} for=${this.controlId}>
       ${this.field.label}${this.renderLabelMark()}
-    </label>` : a;
+    </label>` : o;
   }
   /** Required asterisk, or the "(optional)" marker when the form asks for it. */
   renderLabelMark() {
-    return this.required ? h`<span class="baht-required-mark" aria-hidden="true">*</span>` : this.showOptional ? h`<span class="baht-optional">${m("optional")}</span>` : a;
+    return this.required ? a`<span class="baht-required-mark" aria-hidden="true">*</span>` : this.showOptional ? a`<span class="baht-optional">${v("optional")}</span>` : o;
   }
   get controlId() {
-    var t;
-    return `baht-${((t = this.field) == null ? void 0 : t.key) ?? ""}-${this.uid}`;
+    var e;
+    return `baht-${((e = this.field) == null ? void 0 : e.key) ?? ""}-${this.uid}`;
   }
   get labelId() {
     return `${this.controlId}-label`;
@@ -146,54 +159,54 @@ const n = (d = class extends $ {
   }
   /** id list for the control's aria-describedby: error first, then help. */
   get describedBy() {
-    const t = [this.error ? this.errorId : "", this.field.help ? this.helpId : ""].filter(
+    const e = [this.error ? this.errorId : "", this.field.help ? this.helpId : ""].filter(
       Boolean
     );
-    return t.length > 0 ? t.join(" ") : a;
+    return e.length > 0 ? e.join(" ") : o;
   }
   /** 'true' while the field is in error, else absent (styles hook on [aria-invalid]). */
   get invalid() {
-    return this.error ? "true" : a;
+    return this.error ? "true" : o;
   }
   render() {
-    return this.field ? h`
+    return this.field ? a`
       ${this.renderLabel()}
       ${this.renderControl()}
-      ${this.field.help ? h`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : a}
-      ${this.error ? h`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : a}
-    ` : a;
+      ${this.field.help ? a`<div class="baht-help" id=${this.helpId}>${this.field.help}</div>` : o}
+      ${this.error ? a`<div class="baht-error" id=${this.errorId} role="alert">${this.error}</div>` : o}
+    ` : o;
   }
-}, d.defaultDebounce = 150, d);
-l([
-  o({ attribute: !1 })
+}, h.defaultDebounce = 150, h);
+d([
+  l({ attribute: !1 })
 ], n.prototype, "field");
-l([
-  o({ attribute: !1 })
+d([
+  l({ attribute: !1 })
 ], n.prototype, "value");
-l([
-  o({ type: Boolean })
+d([
+  l({ type: Boolean })
 ], n.prototype, "disabled");
-l([
-  o({ type: Boolean })
+d([
+  l({ type: Boolean })
 ], n.prototype, "readonly");
-l([
-  o({ type: Boolean })
+d([
+  l({ type: Boolean })
 ], n.prototype, "required");
-l([
-  o({ type: Boolean, attribute: "show-optional" })
+d([
+  l({ type: Boolean, attribute: "show-optional" })
 ], n.prototype, "showOptional");
-l([
-  o({ attribute: !1 })
+d([
+  l({ attribute: !1 })
 ], n.prototype, "error");
-l([
-  o({ type: Number })
+d([
+  l({ type: Number })
 ], n.prototype, "debounce");
-let S = n;
+let N = n;
 export {
-  $ as BahtElement,
-  S as BahtFieldBase,
-  C as SSR_STASH,
-  O as adoptLightChildren,
-  c as hasDom,
-  T as hasSsrMarkup
+  k as BahtElement,
+  N as BahtFieldBase,
+  T as SSR_STASH,
+  E as adoptLightChildren,
+  f as hasDom,
+  $ as hasSsrMarkup
 };

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

@@ -1,14 +1,14 @@
-import { html as a } from "lit";
+import { html as u } from "lit";
 import { state as d, customElement as f } from "lit/decorators.js";
-import { ifDefined as p } from "lit/directives/if-defined.js";
-import { live as m } from "lit/directives/live.js";
-import { BahtFieldBase as h } from "../base.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (r, e, i, n) => {
-  for (var t = n > 1 ? void 0 : n ? b(e, i) : e, o = r.length - 1, s; o >= 0; o--)
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { live as p } from "lit/directives/live.js";
+import { BahtFieldBase as m } from "../base.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, e, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? y(e, i) : e, o = r.length - 1, s; o >= 0; o--)
     (s = r[o]) && (t = (n ? s(e, i, t) : s(t)) || t);
-  return n && t && y(e, i, t), t;
+  return n && t && b(e, i, t), t;
 };
-function u(r) {
+function a(r) {
   const e = r.replace(/,/g, "").trim();
   if (e === "" || e === "-") return null;
   const i = Number(e);
@@ -17,40 +17,43 @@ function u(r) {
 function $(r) {
   return r.toLocaleString("en-US", { maximumFractionDigits: 2 });
 }
-let l = class extends h {
+let l = class extends m {
   constructor() {
     super(...arguments), this.focused = !1;
   }
   displayFor(r) {
     if (r == null || r === "") return "";
-    const e = typeof r == "number" ? r : u(String(r));
+    const e = typeof r == "number" ? r : a(String(r));
     return e == null ? String(r) : this.focused ? String(e) : $(e);
   }
   renderControl() {
-    return a`<input
-      class="baht-control baht-control--currency"
-      id=${this.controlId}
-      type="text"
-      inputmode="decimal"
-      autocomplete="off"
-      .value=${m(this.displayFor(this.shownValue))}
-      placeholder=${p(this.field.placeholder)}
-      ?disabled=${this.disabled}
-      ?readonly=${this.readonly}
-      ?required=${this.required}
-      aria-invalid=${this.invalid}
-      aria-describedby=${this.describedBy}
-      @focus=${() => {
+    return u`<span class="baht-field-icon-wrap">
+      ${this.renderFieldIcon()}
+      <input
+        class="baht-control baht-control--currency${this.hasFieldIcon ? " baht-control--has-icon" : ""}"
+        id=${this.controlId}
+        type="text"
+        inputmode="decimal"
+        autocomplete="off"
+        .value=${p(this.displayFor(this.shownValue))}
+        placeholder=${h(this.field.placeholder)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        @focus=${() => {
       this.focused = !0;
     }}
-      @blur=${() => {
+        @blur=${() => {
       this.focused = !1;
     }}
-      @input=${(r) => {
+        @input=${(r) => {
       const e = r.target.value;
-      this.emitTyped(e === "" ? null : u(e));
+      this.emitTyped(e === "" ? null : a(e));
     }}
-    />`;
+      />
+    </span>`;
   }
 };
 c([

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

@@ -1,34 +1,37 @@
-import { html as h } from "lit";
-import { customElement as n } from "lit/decorators.js";
+import { html as d } from "lit";
+import { customElement as h } from "lit/decorators.js";
 import { ifDefined as r } from "lit/directives/if-defined.js";
 import { live as p } from "lit/directives/live.js";
-import { BahtFieldBase as m } from "../base.js";
-var u = Object.getOwnPropertyDescriptor, c = (e, l, d, a) => {
-  for (var t = a > 1 ? void 0 : a ? u(l, d) : l, i = e.length - 1, s; i >= 0; i--)
+import { BahtFieldBase as c } from "../base.js";
+var m = Object.getOwnPropertyDescriptor, u = (e, l, n, a) => {
+  for (var t = a > 1 ? void 0 : a ? m(l, n) : l, i = e.length - 1, s; i >= 0; i--)
     (s = e[i]) && (t = s(t) || t);
   return t;
 };
-let o = class extends m {
+let o = class extends c {
   renderControl() {
-    return h`<input
-      class="baht-control baht-control--text"
-      id=${this.controlId}
-      type=${this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text"}
-      .value=${p(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${r(this.field.placeholder)}
-      maxlength=${r(this.field.max_length)}
-      autocomplete=${r(this.field.autocomplete)}
-      ?disabled=${this.disabled}
-      ?readonly=${this.readonly}
-      ?required=${this.required}
-      aria-invalid=${this.invalid}
-      aria-describedby=${this.describedBy}
-      @input=${(e) => this.emitTyped(e.target.value)}
-    />`;
+    return d`<span class="baht-field-icon-wrap">
+      ${this.renderFieldIcon()}
+      <input
+        class="baht-control baht-control--text${this.hasFieldIcon ? " baht-control--has-icon" : ""}"
+        id=${this.controlId}
+        type=${this.field.type === "email" ? "email" : this.field.type === "password" ? "password" : "text"}
+        .value=${p(this.shownValue == null ? "" : String(this.shownValue))}
+        placeholder=${r(this.field.placeholder)}
+        maxlength=${r(this.field.max_length)}
+        autocomplete=${r(this.field.autocomplete)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        @input=${(e) => this.emitTyped(e.target.value)}
+      />
+    </span>`;
   }
 };
-o = c([
-  n("baht-input")
+o = u([
+  h("baht-input")
 ], o);
 export {
   o as BahtInput

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

@@ -137,6 +137,7 @@ let n = class extends f {
         @click=${() => this.toggle()}
         @keydown=${(s) => this.onKeydown(s)}
       >
+        ${this.renderFieldIcon()}
         <span class="baht-select-value">${t[e].label}</span>
         <span class="baht-select-chevron" aria-hidden="true">${m("chevron-down")}</span>
       </button>

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

@@ -1,34 +1,37 @@
-import { html as h } from "lit";
-import { customElement as n } from "lit/decorators.js";
+import { html as n } from "lit";
+import { customElement as d } from "lit/decorators.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
-import { live as m } from "lit/directives/live.js";
-import { BahtFieldBase as p } from "../base.js";
-var c = Object.getOwnPropertyDescriptor, u = (e, i, d, l) => {
-  for (var t = l > 1 ? void 0 : l ? c(i, d) : i, r = e.length - 1, o; r >= 0; r--)
+import { live as c } from "lit/directives/live.js";
+import { BahtFieldBase as m } from "../base.js";
+var p = Object.getOwnPropertyDescriptor, f = (e, i, h, l) => {
+  for (var t = l > 1 ? void 0 : l ? p(i, h) : i, r = e.length - 1, o; r >= 0; r--)
     (o = e[r]) && (t = o(t) || t);
   return t;
 };
-let s = class extends p {
+let s = class extends m {
   renderControl() {
-    return h`<textarea
-      class="baht-control baht-control--textarea"
-      id=${this.controlId}
-      .value=${m(this.shownValue == null ? "" : String(this.shownValue))}
-      placeholder=${a(this.field.placeholder)}
-      maxlength=${a(this.field.max_length)}
-      rows=${this.field.rows ?? 3}
-      autocomplete=${a(this.field.autocomplete)}
-      ?disabled=${this.disabled}
-      ?readonly=${this.readonly}
-      ?required=${this.required}
-      aria-invalid=${this.invalid}
-      aria-describedby=${this.describedBy}
-      @input=${(e) => this.emitTyped(e.target.value)}
-    ></textarea>`;
+    return n`<span class="baht-field-icon-wrap">
+      ${this.renderFieldIcon()}
+      <textarea
+        class="baht-control baht-control--textarea${this.hasFieldIcon ? " baht-control--has-icon" : ""}"
+        id=${this.controlId}
+        .value=${c(this.shownValue == null ? "" : String(this.shownValue))}
+        placeholder=${a(this.field.placeholder)}
+        maxlength=${a(this.field.max_length)}
+        rows=${this.field.rows ?? 3}
+        autocomplete=${a(this.field.autocomplete)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        aria-invalid=${this.invalid}
+        aria-describedby=${this.describedBy}
+        @input=${(e) => this.emitTyped(e.target.value)}
+      ></textarea>
+    </span>`;
   }
 };
-s = u([
-  n("baht-textarea")
+s = f([
+  d("baht-textarea")
 ], s);
 export {
   s as BahtTextarea

package/dist/core/types.d.ts

@@ -34,6 +34,12 @@ export interface FieldDescriptor {
     key: string;
     label?: string;
     placeholder?: string;
+    /**
+     * Leading icon inside the control (text/email/password/currency/textarea)
+     * or before the value (dropdown) — icon name from the curated set (see
+     * icons.ts). Unrecognized names render no icon (no layout shift).
+     */
+    icon?: string;
     help?: string;
     autocomplete?: string;
     width?: FieldWidth;

package/dist/css/components.css

@@ -154,6 +154,41 @@
   font-variant-numeric: tabular-nums;
 }
 
+/* ---------- field.icon — leading glyph inside text/currency/textarea/
+   dropdown controls (spec: FieldDescriptor.icon). Bare `.baht-field-icon`
+   is a flex child (used as-is inside <baht-select>'s trigger row); wrapped
+   in `.baht-field-icon-wrap` it's absolutely positioned over the control,
+   which gets `.baht-control--has-icon` for the extra left padding. ---------- */
+.baht-field-icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--baht-color-text-muted);
+}
+.baht-field-icon .baht-icon {
+  height: 1rem;
+}
+.baht-field-icon-wrap {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.baht-field-icon-wrap .baht-field-icon {
+  position: absolute;
+  left: var(--baht-control-padding-x);
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.baht-field-icon-wrap .baht-control--has-icon {
+  padding-left: calc(var(--baht-control-padding-x) * 2 + 1rem);
+}
+/* textarea is multi-line — pin the icon to the first line instead of
+   vertically centering it over the whole box. */
+.baht-field-icon-wrap:has(.baht-control--textarea) .baht-field-icon {
+  top: 10px; /* matches .baht-control's own vertical padding */
+  transform: none;
+}
+
 /* ---------- <baht-datepicker> input — trailing calendar glyph ---------- */
 .baht-datepicker-field {
   display: block;
@@ -343,16 +378,28 @@
   border-color: var(--baht-color-primary);
   background: var(--baht-color-primary-wash);
 }
+.baht-option--card:has(input:focus-visible) {
+  outline: var(--baht-focus-ring);
+  outline-offset: 2px;
+}
 .baht-option-card-row {
   display: flex;
   align-items: center;
   gap: var(--baht-space-2);
 }
+/* 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). */
 .baht-option--card input[type='radio'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  margin: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .baht-option-card-icon {
   display: inline-flex;
@@ -371,8 +418,6 @@
   color: var(--baht-color-text);
 }
 .baht-option-card-desc {
-  /* aligns under the title: radio width + row gap */
-  margin-left: calc(16px + var(--baht-space-2));
   font-size: var(--baht-text-sm);
   color: var(--baht-color-text-muted);
 }