@tachui/primitives 0.8.5-alpha → 0.8.10-alpha.0

package/dist/{Picker-DKphYduj.js → Picker-CpERkpVp.js}

@@ -1,6 +1,6 @@
-import { withModifiers as T, ComponentWithCSSClasses as q, createSignal as R, useLifecycle as J, createEffect as j, isSignal as l, ColorAsset as A, h as a, text as d, ConcatenatedComponent as $, clonePropsPreservingReactivity as H, resetLifecycleState as N, createComputed as Q } from "@tachui/core";
+import { withModifiers as A, ComponentWithCSSClasses as q, createSignal as R, useLifecycle as J, createEffect as Y, isSignal as l, ColorAsset as E, h as a, text as d, ConcatenatedComponent as P, clonePropsPreservingReactivity as N, resetLifecycleState as U, createComputed as Q } from "@tachui/core";
 import { createComponentInstance as ee } from "@tachui/core/components";
-import { T as U } from "./Text-D0CYYD-Q.js";
+import { T as W } from "./Text-WpP4H9se.js";
 var te = Object.defineProperty, ie = (s, e, t) => e in s ? te(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, y = (s, e, t) => ie(s, typeof e != "symbol" ? e + "" : e, t);
 const se = {
   colors: {
@@ -34,8 +34,8 @@ const se = {
 class z extends q {
   constructor(e, t = se) {
     super(), this.props = e, y(this, "type", "component"), y(this, "id"), y(this, "mounted", !1), y(this, "cleanup", []), y(this, "stateSignal"), y(this, "setState"), y(this, "theme"), this.id = `button-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, this.theme = t;
-    const [i, r] = R("normal");
-    this.stateSignal = i, this.setState = r, this.setupDOMEventListeners();
+    const [i, n] = R("normal");
+    this.stateSignal = i, this.setState = n, this.setupDOMEventListeners();
   }
   /**
    * Set up DOM event listeners for button interactions
@@ -51,12 +51,12 @@ class z extends q {
    * Set up reactive style updates based on state changes
    */
   setupReactiveStyles(e) {
-    const t = j(() => {
+    const t = Y(() => {
       this.stateSignal(), this.isEnabled(), this.isLoading();
-      const { tint: i, backgroundColor: r, foregroundColor: o } = this.props;
-      i && l(i) ? i() : i instanceof A && i.resolve(), r && l(r) ? r() : r instanceof A && r.resolve(), o && l(o) ? o() : o instanceof A && o.resolve();
-      const n = this.getButtonStyles();
-      this.applyStylesToElement(e, n);
+      const { tint: i, backgroundColor: n, foregroundColor: r } = this.props;
+      i && l(i) ? i() : i instanceof E && i.resolve(), n && l(n) ? n() : n instanceof E && n.resolve(), r && l(r) ? r() : r instanceof E && r.resolve();
+      const o = this.getButtonStyles();
+      this.applyStylesToElement(e, o);
     });
     this.cleanup.push(() => {
       t && typeof t.dispose == "function" && t.dispose();
@@ -66,11 +66,11 @@ class z extends q {
    * Apply computed styles to the button element, respecting modifier-applied styles
    */
   applyStylesToElement(e, t) {
-    Object.entries(t).forEach(([i, r]) => {
-      const o = this.camelToKebabCase(i);
-      if (typeof r == "string" || typeof r == "number") {
-        const n = e.style.getPropertyValue(o), c = n && n !== "" && n !== "inherit";
-        process.env.NODE_ENV === "development" && o === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", o), console.log("[Button.applyButtonStyles] currentValue:", n), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", r)), o === "transform" ? e.style.setProperty(o, String(r)) : c ? process.env.NODE_ENV === "development" && o === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", n) : (e.style.setProperty(o, String(r)), process.env.NODE_ENV === "development" && o === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(r)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
+    Object.entries(t).forEach(([i, n]) => {
+      const r = this.camelToKebabCase(i);
+      if (typeof n == "string" || typeof n == "number") {
+        const o = e.style.getPropertyValue(r), c = o && o !== "" && o !== "inherit";
+        process.env.NODE_ENV === "development" && r === "font-family" && (console.log("[Button.applyButtonStyles] Font-family check:"), console.log("[Button.applyButtonStyles] property:", i, "cssProperty:", r), console.log("[Button.applyButtonStyles] currentValue:", o), console.log("[Button.applyButtonStyles] hasModifierValue:", c), console.log("[Button.applyButtonStyles] will set to:", n)), r === "transform" ? e.style.setProperty(r, String(n)) : c ? process.env.NODE_ENV === "development" && r === "font-family" && console.log("[Button.applyButtonStyles] Button SKIPPED font-family (has modifier value):", o) : (e.style.setProperty(r, String(n)), process.env.NODE_ENV === "development" && r === "font-family" && (console.log("[Button.applyButtonStyles] Button SET font-family to:", String(n)), console.log("[Button.applyButtonStyles] Element after set:", e.style.fontFamily)));
       }
     });
   }
@@ -89,7 +89,7 @@ class z extends q {
         return e;
       if (l(e))
         return e();
-      if (e instanceof A)
+      if (e instanceof E)
         return e.resolve();
     }
   }
@@ -138,8 +138,8 @@ class z extends q {
         onClick: this.props.action ? () => {
           try {
             this.props.action?.();
-          } catch (n) {
-            console.error("Button action error:", n);
+          } catch (o) {
+            console.error("Button action error:", o);
           }
         } : void 0,
         // Pass through debug label for debug system
@@ -166,7 +166,7 @@ class z extends q {
    */
   hasColorModifiers() {
     let e = this.modifiers;
-    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((r) => t.properties[r] !== void 0) : !1);
+    return !e && this.modifierBuilder && (e = this.modifierBuilder.modifiers), !e && this.modifiableComponent && (e = this.modifiableComponent.modifiers), !e || !Array.isArray(e) ? !1 : e.some((t) => t.type === "appearance" || t.constructor?.name === "AppearanceModifier" ? t.properties && (t.properties.foregroundColor !== void 0 || t.properties.color !== void 0) : t.properties ? ["foregroundColor", "color", "textColor"].some((n) => t.properties[n] !== void 0) : !1);
   }
   /**
    * Check if the button has typography-related modifiers applied
@@ -191,16 +191,16 @@ class z extends q {
       variant: e,
       size: t,
       role: i = "none",
-      tint: r,
-      backgroundColor: o,
-      foregroundColor: n
-    } = this.props, c = this.stateSignal(), f = this.isLoading(), L = this.isEnabled(), b = this.hasColorModifiers(), Y = this.hasTypographyModifiers(), v = {
+      tint: n,
+      backgroundColor: r,
+      foregroundColor: o
+    } = this.props, c = this.stateSignal(), h = this.isLoading(), T = this.isEnabled(), g = this.hasColorModifiers(), v = this.hasTypographyModifiers(), w = {
       // Only set color property if no modifiers will handle it
       // This prevents conflicts between Button styles and AppearanceModifier
-      ...!b && !n && !e && { color: "inherit" },
+      ...!g && !o && !e && { color: "inherit" },
       // Only set text-related properties if no typography modifiers will handle them
       // This prevents conflicts between Button styles and TypographyModifier
-      ...!Y && {
+      ...!v && {
         fontStyle: "inherit",
         lineHeight: "inherit",
         textTransform: "inherit",
@@ -215,40 +215,40 @@ class z extends q {
       // Let modifiers control: fontFamily, fontSize, fontWeight, letterSpacing, textAlign
     };
     if (t) {
-      const C = this.theme.spacing[t] || this.theme.spacing.medium, Z = this.theme.borderRadius[t] || this.theme.borderRadius.medium, V = this.theme.typography[t] || this.theme.typography.medium, K = {
+      const k = this.theme.spacing[t] || this.theme.spacing.medium, Z = this.theme.borderRadius[t] || this.theme.borderRadius.medium, H = this.theme.typography[t] || this.theme.typography.medium, K = {
         small: "32px",
         medium: "40px",
         large: "48px"
       };
-      v.padding = `${C}px ${C * 2}px`, v.borderRadius = `${Z}px`, v.fontSize = `${V.size}px`, v.fontWeight = V.weight, v.minHeight = K[t];
+      w.padding = `${k}px ${k * 2}px`, w.borderRadius = `${Z}px`, w.fontSize = `${H.size}px`, w.fontWeight = H.weight, w.minHeight = K[t];
     }
-    let h = "transparent", m = "transparent", _ = "1px", w;
-    const X = this.resolveColorValue(r), O = this.resolveColorValue(o), E = this.resolveColorValue(n);
+    let u = "transparent", m = "transparent", _ = "1px", C;
+    const X = this.resolveColorValue(n), O = this.resolveColorValue(r), D = this.resolveColorValue(o);
     if (e) {
-      const C = X || this.theme.colors.primary;
+      const k = X || this.theme.colors.primary;
       switch (e) {
         case "filled":
-          i === "destructive" ? h = this.theme.colors.destructive : i === "cancel" ? h = this.theme.colors.secondary : h = C, w = this.theme.colors.onPrimary;
+          i === "destructive" ? u = this.theme.colors.destructive : i === "cancel" ? u = this.theme.colors.secondary : u = k, C = this.theme.colors.onPrimary;
           break;
         case "outlined":
-          m = i === "destructive" ? this.theme.colors.destructive : C, w = i === "destructive" ? this.theme.colors.destructive : C;
+          m = i === "destructive" ? this.theme.colors.destructive : k, C = i === "destructive" ? this.theme.colors.destructive : k;
           break;
         case "bordered":
-          h = this.theme.colors.background, m = this.theme.colors.border;
+          u = this.theme.colors.background, m = this.theme.colors.border;
           break;
         case "borderedProminent":
-          h = this.theme.colors.surface, m = this.theme.colors.primary, _ = "2px";
+          u = this.theme.colors.surface, m = this.theme.colors.primary, _ = "2px";
           break;
       }
     }
-    O && (h = O), E && (w = E);
-    let F = "1", P = "auto", B, I = "none";
-    L ? f ? (F = "0.6", P = "none") : c === "pressed" ? (h = this.darkenColor(h, 0.1), m = this.darkenColor(m, 0.1), B = "scale(0.95)") : c === "focused" && (I = "0 0 0 3px #007AFF40") : (h = this.theme.colors.disabled, m = this.theme.colors.disabled, w = this.theme.colors.disabled, F = "0.6", P = "none");
+    O && (u = O), D && (C = D);
+    let F = "1", I = "auto", B, V = "none";
+    T ? h ? (F = "0.6", I = "none") : c === "pressed" ? (u = this.darkenColor(u, 0.1), m = this.darkenColor(m, 0.1), B = "scale(0.95)") : c === "focused" && (V = "0 0 0 3px #007AFF40") : (u = this.theme.colors.disabled, m = this.theme.colors.disabled, C = this.theme.colors.disabled, F = "0.6", I = "none");
     const p = {
-      ...v
+      ...w
       // Size-based styles (only if size provided)
     };
-    return e && (p.backgroundColor = h, p.borderColor = m, p.borderWidth = _, w !== void 0 && (p.color = w)), O && (p.backgroundColor = O), E && (p.color = E), p.cursor = L ? "pointer" : "not-allowed", p.opacity = F, p.pointerEvents = P, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = I), p.transition = "all 0.2s ease", p;
+    return e && (p.backgroundColor = u, p.borderColor = m, p.borderWidth = _, C !== void 0 && (p.color = C)), O && (p.backgroundColor = O), D && (p.color = D), p.cursor = T ? "pointer" : "not-allowed", p.opacity = F, p.pointerEvents = I, p.transform = B !== void 0 ? B : "none", this.hasShadowModifier() || (p.boxShadow = V), p.transition = "all 0.2s ease", p;
   }
   /**
    * Handle button press with proper state management
@@ -279,8 +279,8 @@ class z extends q {
   darkenColor(e, t) {
     if (e === "transparent") return e;
     if (e.startsWith("#")) {
-      const i = e.slice(1), r = parseInt(i, 16), o = Math.max(0, Math.floor((r >> 16) * (1 - t))), n = Math.max(0, Math.floor((r >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((r & 255) * (1 - t)));
-      return `#${(o << 16 | n << 8 | c).toString(16).padStart(6, "0")}`;
+      const i = e.slice(1), n = parseInt(i, 16), r = Math.max(0, Math.floor((n >> 16) * (1 - t))), o = Math.max(0, Math.floor((n >> 8 & 255) * (1 - t))), c = Math.max(0, Math.floor((n & 255) * (1 - t)));
+      return `#${(r << 16 | o << 8 | c).toString(16).padStart(6, "0")}`;
     }
     return e;
   }
@@ -291,16 +291,16 @@ class z extends q {
    * Concatenate this button with another concatenatable component
    */
   concat(e) {
-    const t = this.toSegment(), i = e.toSegment(), r = {
-      totalSegments: e instanceof $ ? e.segments.length + 1 : 2,
-      accessibilityRole: e instanceof $ ? this.mergeAccessibilityRoles(
+    const t = this.toSegment(), i = e.toSegment(), n = {
+      totalSegments: e instanceof P ? e.segments.length + 1 : 2,
+      accessibilityRole: e instanceof P ? this.mergeAccessibilityRoles(
         "composite",
         e.metadata.accessibilityRole
       ) : this.determineAccessibilityRole(e),
       semanticStructure: "inline"
       // Buttons are typically inline in concatenation
     };
-    return new $([t, i], r);
+    return new P([t, i], n);
   }
   /**
    * Convert this button to a segment for concatenation
@@ -352,14 +352,14 @@ class z extends q {
     return e.deep ? this.deepClone() : this.shallowClone();
   }
   shallowClone() {
-    const e = H(this.props), t = new z(e, this.theme);
-    return this.syncStateToClone(t), N(t), t;
+    const e = N(this.props), t = new z(e, this.theme);
+    return this.syncStateToClone(t), U(t), t;
   }
   deepClone() {
-    const e = H(this.props, {
+    const e = N(this.props, {
       deep: !0
     }), t = new z(e, this.theme);
-    return this.syncStateToClone(t), N(t), t;
+    return this.syncStateToClone(t), U(t), t;
   }
   syncStateToClone(e) {
     try {
@@ -370,40 +370,40 @@ class z extends q {
     }
   }
 }
-function k(s, e, t = {}) {
+function L(s, e, t = {}) {
   const i = {
     ...t,
     title: s,
     ...e && { action: e }
-  }, r = ee(z, i);
-  return T(r);
+  }, n = ee(z, i);
+  return A(n);
 }
-const be = {
+const ge = {
   /**
    * Filled button (primary)
    */
-  Filled: (s, e, t = {}) => k(s, e, { ...t, variant: "filled" }),
+  Filled: (s, e, t = {}) => L(s, e, { ...t, variant: "filled" }),
   /**
    * Outlined button
    */
-  Outlined: (s, e, t = {}) => k(s, e, { ...t, variant: "outlined" }),
+  Outlined: (s, e, t = {}) => L(s, e, { ...t, variant: "outlined" }),
   /**
    * Plain button (text only)
    */
-  Plain: (s, e, t = {}) => k(s, e, { ...t, variant: "plain" }),
+  Plain: (s, e, t = {}) => L(s, e, { ...t, variant: "plain" }),
   /**
    * Bordered button
    */
-  Bordered: (s, e, t = {}) => k(s, e, { ...t, variant: "bordered" }),
+  Bordered: (s, e, t = {}) => L(s, e, { ...t, variant: "bordered" }),
   /**
    * Destructive button
    */
-  Destructive: (s, e, t = {}) => k(s, e, { ...t, role: "destructive" }),
+  Destructive: (s, e, t = {}) => L(s, e, { ...t, role: "destructive" }),
   /**
    * Cancel button
    */
-  Cancel: (s, e, t = {}) => k(s, e, { ...t, role: "cancel" })
-}, oe = `
+  Cancel: (s, e, t = {}) => L(s, e, { ...t, role: "cancel" })
+}, re = `
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
@@ -411,10 +411,10 @@ const be = {
 `;
 if (typeof document < "u") {
   const s = document.createElement("style");
-  s.textContent = oe, document.head.appendChild(s);
+  s.textContent = re, document.head.appendChild(s);
 }
-var re = Object.defineProperty, ne = (s, e, t) => e in s ? re(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => ne(s, typeof e != "symbol" ? e + "" : e, t);
-class W {
+var ne = Object.defineProperty, oe = (s, e, t) => e in s ? ne(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, M = (s, e, t) => oe(s, typeof e != "symbol" ? e + "" : e, t);
+class G {
   constructor(e) {
     M(this, "type", "component"), M(this, "id"), M(this, "props"), this.props = e, this.id = `enhanced-link-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
@@ -436,8 +436,8 @@ class W {
     return this.resolveValue(this.props.routingMode) || "auto";
   }
   getRel() {
-    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), o = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
-    return e && o ? `${e} ${o}`.trim() : e || o;
+    const e = this.resolveValue(this.props.rel), t = this.getTarget(), i = this.getDestination(), r = this.isExternalURL(i) && t === "_blank" ? "noopener noreferrer" : "";
+    return e && r ? `${e} ${r}`.trim() : e || r;
   }
   getDownload() {
     return this.resolveValue(this.props.download);
@@ -469,8 +469,8 @@ class W {
     if (this.props.onPress)
       try {
         this.props.onPress(e);
-      } catch (o) {
-        console.error("Link onPress error:", o);
+      } catch (r) {
+        console.error("Link onPress error:", r);
       }
     const t = this.getDestination();
     if (this.isSpecialScheme(t) || (e.preventDefault(), this.props.openURLAction && this.props.openURLAction(t) === "handled"))
@@ -479,19 +479,19 @@ class W {
       try {
         if (!await this.props.onBeforeNavigation(t))
           return;
-      } catch (o) {
-        throw console.error("Link onBeforeNavigation error:", o), o;
+      } catch (r) {
+        throw console.error("Link onBeforeNavigation error:", r), r;
       }
-    const i = this.getTarget(), r = this.getRoutingMode();
+    const i = this.getTarget(), n = this.getRoutingMode();
     if (this.shouldUseInternalRouting(t)) {
       if (this.props.onInternalNavigation)
         try {
           if (await this.props.onInternalNavigation(t))
             return;
-        } catch (o) {
-          console.error("Link onInternalNavigation error:", o);
+        } catch (r) {
+          console.error("Link onInternalNavigation error:", r);
         }
-      r === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
+      n === "spa" ? this.handleSPANavigation(t) : i === "_blank" ? window.open(t, i) : window.location.href = t;
     } else
       i === "_blank" || i === "_top" || i === "_parent" ? window.open(t, i) : window.location.href = t;
   }
@@ -507,14 +507,14 @@ class W {
   }
   renderContent() {
     if (this.props.label) {
-      const o = this.props.label().render();
-      return Array.isArray(o) ? o : [o];
+      const r = this.props.label().render();
+      return Array.isArray(r) ? r : [r];
     }
     if (this.props.children)
       return this.renderChildren();
     let e;
     this.props.text ? e = this.props.text : l(this.props.destination) ? e = Q(() => this.getDestination()) : e = this.getDestination();
-    const i = U(e).render();
+    const i = W(e).render();
     return Array.isArray(i) ? i : [i];
   }
   renderChildren() {
@@ -523,7 +523,7 @@ class W {
   }
   renderChild(e) {
     if (typeof e == "string") {
-      const i = U(e).render();
+      const i = W(e).render();
       return Array.isArray(i) ? i : [i];
     } else {
       const t = e.render();
@@ -536,16 +536,16 @@ class W {
       "data-component": "enhanced-link"
     };
     l(this.props.destination) ? i.href = () => this.getDestination() : i.href = this.getDestination(), this.props.target && (l(this.props.target) ? i.target = () => this.getTarget() : i.target = this.getTarget());
-    const r = this.getRel();
-    r && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = r);
-    const o = this.getDownload();
-    o !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : o === !0 ? i.download = !0 : typeof o == "string" && (i.download = o));
-    const n = this.getAccessibilityLabel();
-    n && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = n);
+    const n = this.getRel();
+    n && (l(this.props.rel) || l(this.props.target) ? i.rel = () => this.getRel() : i.rel = n);
+    const r = this.getDownload();
+    r !== void 0 && (l(this.props.download) ? i.download = () => this.getDownload() : r === !0 ? i.download = !0 : typeof r == "string" && (i.download = r));
+    const o = this.getAccessibilityLabel();
+    o && (l(this.props.accessibilityLabel) ? i["aria-label"] = () => this.getAccessibilityLabel() : i["aria-label"] = o);
     const c = this.getAccessibilityHint();
     c && (l(this.props.accessibilityHint) ? i["aria-describedby"] = () => this.getAccessibilityHint() : i["aria-describedby"] = c);
-    const f = this.getAccessibilityRole();
-    return f && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = f), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (b) => this.handleClick(b), i.style = {
+    const h = this.getAccessibilityRole();
+    return h && (l(this.props.accessibilityRole) ? i.role = () => this.getAccessibilityRole() : i.role = h), t && (i["aria-disabled"] = "true", i.tabindex = "-1"), i.onclick = (g) => this.handleClick(g), i.style = {
       textDecoration: "none",
       color: "inherit",
       cursor: t ? "not-allowed" : "pointer",
@@ -554,12 +554,12 @@ class W {
   }
   // Concatenation support
   concat(e) {
-    const t = this.toSegment(), i = e.toSegment(), r = {
+    const t = this.toSegment(), i = e.toSegment(), n = {
       totalSegments: 2,
       accessibilityRole: "composite",
       semanticStructure: "inline"
     };
-    return new $([t, i], r);
+    return new P([t, i], n);
   }
   toSegment() {
     return {
@@ -575,14 +575,14 @@ class W {
 }
 function me(s, e) {
   if (e !== void 0) {
-    const r = {
+    const n = {
       text: s,
       destination: e
-    }, o = new W(r);
-    return T(o);
+    }, r = new G(n);
+    return A(r);
   }
-  const t = s, i = new W(t);
-  return T(i);
+  const t = s, i = new G(t);
+  return A(i);
 }
 const S = {
   /**
@@ -628,10 +628,10 @@ const S = {
    * Create an email link with optional subject and body
    */
   email(s, e, t, i) {
-    let r = `mailto:${s}`;
-    const o = new URLSearchParams();
-    return e && o.append("subject", e), t && o.append("body", t), o.toString() && (r += `?${o.toString()}`), {
-      destination: r,
+    let n = `mailto:${s}`;
+    const r = new URLSearchParams();
+    return e && r.append("subject", e), t && r.append("body", t), r.toString() && (n += `?${r.toString()}`), {
+      destination: n,
       children: i || s,
       accessibilityLabel: `Send email to ${s}`,
       accessibilityHint: "Opens your email app"
@@ -737,13 +737,13 @@ class ce {
   constructor(e) {
     this.props = e, x(this, "type", "component"), x(this, "id"), x(this, "mounted", !1), x(this, "cleanup", []), x(this, "toggleElement", null), x(this, "setIsAnimating"), x(this, "handleToggle", async (i) => {
       if (i.preventDefault(), this.isDisabled()) return;
-      const r = !this.getIsOn();
+      const n = !this.getIsOn();
       this.props.animated !== !1 && (this.setIsAnimating(!0), setTimeout(() => {
         this.setIsAnimating(!1);
-      }, 200)), this.props.onToggle && this.props.onToggle(r);
+      }, 200)), this.props.onToggle && this.props.onToggle(n);
     }), this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
     const [, t] = R(!1);
-    this.setIsAnimating = t, j(() => {
+    this.setIsAnimating = t, Y(() => {
       const i = this.getIsOn();
       this.toggleElement && this.toggleElement.checked !== i && (this.toggleElement.checked = i);
     });
@@ -788,6 +788,21 @@ class ce {
     const { label: e } = this.props;
     return e ? typeof e == "string" ? e : typeof e == "function" || l(e) ? e() : e : null;
   }
+  getInputId() {
+    return `${this.id}-input`;
+  }
+  getLabelId() {
+    return `${this.id}-label`;
+  }
+  getInputAccessibilityProps() {
+    const t = this.resolveLabel() !== null;
+    return {
+      id: this.getInputId(),
+      "aria-label": this.props.accessibilityLabel,
+      "aria-labelledby": this.props.accessibilityLabel || !t ? void 0 : this.getLabelId(),
+      "aria-describedby": this.props.accessibilityHint ? `${this.id}-hint` : void 0
+    };
+  }
   /**
    * Helper to render component content safely
    */
@@ -829,11 +844,11 @@ class ce {
    */
   renderSwitch() {
     const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), {
-      color: r = "#007AFF",
-      offColor: o = "#e2e8f0",
-      thumbColor: n = "#ffffff",
+      color: n = "#007AFF",
+      offColor: r = "#e2e8f0",
+      thumbColor: o = "#ffffff",
       animated: c = !0
-    } = this.props, f = e ? r : o, L = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)";
+    } = this.props, h = e ? n : r, T = e ? `translateX(${parseInt(i.width) - parseInt(i.thumbSize) - 2}px)` : "translateX(2px)", g = this.getInputAccessibilityProps();
     return a(
       "div",
       {
@@ -844,12 +859,13 @@ class ce {
       },
       // Hidden input for form integration
       a("input", {
-        ref: (b) => {
-          this.toggleElement = b, b && !this.mounted && (b.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
-            b.removeEventListener("change", this.handleToggle);
+        ref: (v) => {
+          this.toggleElement = v, v && !this.mounted && (v.addEventListener("change", this.handleToggle), this.cleanup.push(() => {
+            v.removeEventListener("change", this.handleToggle);
           }));
         },
         type: "checkbox",
+        id: g.id,
         checked: e,
         disabled: t,
         style: {
@@ -860,8 +876,9 @@ class ce {
           margin: 0,
           cursor: t ? "not-allowed" : "pointer"
         },
-        "aria-label": this.props.accessibilityLabel,
-        "aria-describedby": this.props.accessibilityHint ? `${this.id}-hint` : void 0
+        "aria-label": g["aria-label"],
+        "aria-labelledby": g["aria-labelledby"],
+        "aria-describedby": g["aria-describedby"]
       }),
       // Switch track
       a(
@@ -870,7 +887,7 @@ class ce {
           style: {
             width: i.width,
             height: i.height,
-            backgroundColor: f,
+            backgroundColor: h,
             borderRadius: i.height,
             position: "relative",
             cursor: t ? "not-allowed" : "pointer",
@@ -878,19 +895,18 @@ class ce {
             transition: c ? "background-color 0.2s ease" : "none",
             border: "1px solid rgba(0,0,0,0.1)",
             boxShadow: "inset 0 1px 2px rgba(0,0,0,0.1)"
-          },
-          onClick: this.handleToggle
+          }
         },
         // Switch thumb
         a("div", {
           style: {
             width: i.thumbSize,
             height: i.thumbSize,
-            backgroundColor: n,
+            backgroundColor: o,
             borderRadius: "50%",
             position: "absolute",
             top: "50%",
-            transform: `translateY(-50%) ${L}`,
+            transform: `translateY(-50%) ${T}`,
             transition: c ? "transform 0.2s ease" : "none",
             boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
             border: "1px solid rgba(0,0,0,0.1)"
@@ -903,7 +919,7 @@ class ce {
    * Render checkbox variant
    */
   renderCheckbox() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF" } = this.props;
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: n = "#007AFF" } = this.props, r = this.getInputAccessibilityProps();
     return a(
       "div",
       {
@@ -920,6 +936,7 @@ class ce {
           }));
         },
         type: "checkbox",
+        id: r.id,
         checked: e,
         disabled: t,
         style: {
@@ -929,7 +946,10 @@ class ce {
           height: "100%",
           margin: 0,
           cursor: t ? "not-allowed" : "pointer"
-        }
+        },
+        "aria-label": r["aria-label"],
+        "aria-labelledby": r["aria-labelledby"],
+        "aria-describedby": r["aria-describedby"]
       }),
       // Checkbox visual
       a(
@@ -938,17 +958,16 @@ class ce {
           style: {
             width: i.thumbSize,
             height: i.thumbSize,
-            border: `2px solid ${e ? r : "#d1d5db"}`,
+            border: `2px solid ${e ? n : "#d1d5db"}`,
             borderRadius: "4px",
-            backgroundColor: e ? r : "#ffffff",
+            backgroundColor: e ? n : "#ffffff",
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
             cursor: t ? "not-allowed" : "pointer",
             opacity: t ? 0.5 : 1,
             transition: "all 0.2s ease"
-          },
-          onClick: this.handleToggle
+          }
         },
         ...e ? [
           // Checkmark
@@ -972,22 +991,22 @@ class ce {
    * Render button variant
    */
   renderButton() {
-    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: r = "#007AFF", offColor: o = "#f3f4f6" } = this.props;
+    const e = this.getIsOn(), t = this.isDisabled(), i = this.getSizeStyles(), { color: n = "#007AFF", offColor: r = "#f3f4f6" } = this.props;
     return a(
       "button",
       {
-        ref: (n) => {
-          n && !this.mounted && (n.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
-            n.removeEventListener("click", this.handleToggle);
+        ref: (o) => {
+          o && !this.mounted && (o.addEventListener("click", this.handleToggle), this.cleanup.push(() => {
+            o.removeEventListener("click", this.handleToggle);
           }));
         },
         type: "button",
         disabled: t,
         style: {
           padding: "8px 16px",
-          backgroundColor: e ? r : o,
+          backgroundColor: e ? n : r,
           color: e ? "#ffffff" : "#374151",
-          border: `1px solid ${e ? r : "#d1d5db"}`,
+          border: `1px solid ${e ? n : "#d1d5db"}`,
           borderRadius: "6px",
           fontSize: i.fontSize,
           fontWeight: "500",
@@ -1019,42 +1038,61 @@ class ce {
   /**
    * Render label content
    */
-  renderLabel() {
-    const e = this.resolveLabel();
-    if (!e) return null;
-    const t = this.getSizeStyles();
+  renderLabel(e = !1) {
+    const t = this.resolveLabel();
+    if (!t) return null;
+    const i = this.getSizeStyles();
     return a(
       "span",
       {
+        id: this.getLabelId(),
         style: {
-          fontSize: t.fontSize,
+          fontSize: i.fontSize,
           color: this.isDisabled() ? "#9ca3af" : "#374151",
           cursor: this.isDisabled() ? "not-allowed" : "pointer"
         },
-        onClick: this.isDisabled() ? void 0 : this.handleToggle
+        onClick: e && !this.isDisabled() ? this.handleToggle : void 0
       },
-      ...typeof e == "string" ? [d(e)] : this.renderComponentContent(e)
+      ...typeof t == "string" ? [d(t)] : this.renderComponentContent(t)
     );
   }
   render() {
     const {
-      labelPosition: e = "trailing",
-      spacing: t = 8,
-      accessibilityHint: i
-    } = this.props, r = this.renderLabel(), o = this.renderToggleControl(), n = e === "leading" && r ? [r, o] : r ? [o, r] : [o];
-    return a(
+      variant: e = "switch",
+      labelPosition: t = "trailing",
+      spacing: i = 8,
+      accessibilityHint: n
+    } = this.props, r = this.renderLabel(e === "button"), o = this.renderToggleControl(), c = t === "leading" && r ? [r, o] : r ? [o, r] : [o], h = e === "button" ? a(
       "div",
       {
         style: {
           display: "flex",
           alignItems: "center",
-          gap: r ? `${t}px` : "0",
+          gap: r ? `${i}px` : "0",
           cursor: this.isDisabled() ? "not-allowed" : "pointer"
-        },
-        "aria-describedby": i ? `${this.id}-hint` : void 0
+        }
       },
-      ...n,
-      ...i ? [
+      ...c
+    ) : a(
+      "label",
+      {
+        for: this.getInputId(),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: r ? `${i}px` : "0",
+          cursor: this.isDisabled() ? "not-allowed" : "pointer"
+        }
+      },
+      ...c
+    );
+    return a(
+      "div",
+      {
+        "aria-describedby": n ? `${this.id}-hint` : void 0
+      },
+      h,
+      ...n ? [
         a(
           "div",
           {
@@ -1067,67 +1105,67 @@ class ce {
               width: "100%"
             }
           },
-          d(i)
+          d(n)
         )
       ] : []
     );
   }
 }
-function g(s, e = {}) {
+function b(s, e = {}) {
   const t = { ...e, isOn: s }, i = new ce(t);
-  return T(i);
+  return A(i);
 }
-function G(s, e, t = {}) {
-  return g(e, { ...t, label: s });
+function j(s, e, t = {}) {
+  return b(e, { ...t, label: s });
 }
 const ye = {
   /**
    * Switch toggle (default)
    */
   Switch(s, e = {}) {
-    return g(s, { ...e, variant: "switch" });
+    return b(s, { ...e, variant: "switch" });
   },
   /**
    * Checkbox toggle
    */
   Checkbox(s, e = {}) {
-    return g(s, { ...e, variant: "checkbox" });
+    return b(s, { ...e, variant: "checkbox" });
   },
   /**
    * Button toggle
    */
   Button(s, e = {}) {
-    return g(s, { ...e, variant: "button" });
+    return b(s, { ...e, variant: "button" });
   },
   /**
    * Small toggle
    */
   Small(s, e = {}) {
-    return g(s, { ...e, size: "small" });
+    return b(s, { ...e, size: "small" });
   },
   /**
    * Large toggle
    */
   Large(s, e = {}) {
-    return g(s, { ...e, size: "large" });
+    return b(s, { ...e, size: "large" });
   },
   /**
    * Custom color toggle
    */
   CustomColor(s, e, t = {}) {
-    return g(s, { ...t, color: e });
+    return b(s, { ...t, color: e });
   },
   /**
    * Toggle with leading label
    */
   WithLeadingLabel(s, e, t = {}) {
-    return g(e, { ...t, label: s, labelPosition: "leading" });
+    return b(e, { ...t, label: s, labelPosition: "leading" });
   },
   /**
    * Toggle with trailing label (default)
    */
   WithTrailingLabel(s, e, t = {}) {
-    return g(e, { ...t, label: s, labelPosition: "trailing" });
+    return b(e, { ...t, label: s, labelPosition: "trailing" });
   }
 }, Se = {
   /**
@@ -1135,7 +1173,7 @@ const ye = {
    */
   createGroup(s, e = {}) {
     return s.map(
-      (t) => G(t.label, t.isOn, {
+      (t) => j(t.label, t.isOn, {
         ...e,
         onToggle: t.onToggle
       })
@@ -1145,12 +1183,12 @@ const ye = {
    * Create exclusive toggle group (radio-like behavior)
    */
   createExclusiveGroup(s, e, t, i = {}) {
-    const r = () => l(e) ? e() : e;
+    const n = () => l(e) ? e() : e;
     return s.map(
-      (o) => G(o.label, r() === o.key, {
+      (r) => j(r.label, n() === r.key, {
         ...i,
-        onToggle: (n) => {
-          n && t && t(o.key);
+        onToggle: (o) => {
+          o && t && t(r.key);
         }
       })
     );
@@ -1187,22 +1225,22 @@ const ye = {
     }
   }
 };
-var de = Object.defineProperty, pe = (s, e, t) => e in s ? de(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, u = (s, e, t) => pe(s, typeof e != "symbol" ? e + "" : e, t);
+var de = Object.defineProperty, pe = (s, e, t) => e in s ? de(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, f = (s, e, t) => pe(s, typeof e != "symbol" ? e + "" : e, t);
 class he {
   constructor(e) {
-    this.props = e, u(this, "type", "component"), u(this, "id"), u(this, "mounted", !1), u(this, "cleanup", []), u(this, "isOpen"), u(this, "setIsOpen"), u(this, "searchTerm"), u(this, "setSearchTerm"), u(this, "handleSelection", (n) => {
-      this.props.onSelectionChange && this.props.onSelectionChange(n), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
-    }), u(this, "toggleOpen", () => {
+    this.props = e, f(this, "type", "component"), f(this, "id"), f(this, "mounted", !1), f(this, "cleanup", []), f(this, "isOpen"), f(this, "setIsOpen"), f(this, "searchTerm"), f(this, "setSearchTerm"), f(this, "handleSelection", (o) => {
+      this.props.onSelectionChange && this.props.onSelectionChange(o), (this.props.variant === "dropdown" || this.props.variant === "menu") && this.setIsOpen(!1), this.setSearchTerm("");
+    }), f(this, "toggleOpen", () => {
       this.isDisabled() || this.setIsOpen(!this.isOpen());
     }), this.id = `picker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const [t, i] = R(!1), [r, o] = R("");
-    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = r, this.setSearchTerm = o, typeof window < "u") {
-      const n = (c) => {
-        const f = document.getElementById(this.id);
-        f && !f.contains(c.target) && this.setIsOpen(!1);
+    const [t, i] = R(!1), [n, r] = R("");
+    if (this.isOpen = t, this.setIsOpen = i, this.searchTerm = n, this.setSearchTerm = r, typeof window < "u") {
+      const o = (c) => {
+        const h = document.getElementById(this.id);
+        h && !h.contains(c.target) && this.setIsOpen(!1);
       };
-      document.addEventListener("click", n), this.cleanup.push(() => {
-        document.removeEventListener("click", n);
+      document.addEventListener("click", o), this.cleanup.push(() => {
+        document.removeEventListener("click", o);
       });
     }
   }
@@ -1273,7 +1311,7 @@ class he {
    * Render dropdown variant
    */
   renderDropdown() {
-    const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), r = this.isOpen();
+    const e = this.getSelectedOption(), t = this.getFilteredOptions(), i = this.getSizeStyles(), n = this.isOpen();
     return a(
       "div",
       {
@@ -1302,7 +1340,7 @@ class he {
             borderRadius: "6px",
             cursor: this.isDisabled() ? "not-allowed" : "pointer",
             opacity: this.isDisabled() ? 0.6 : 1,
-            ...r && {
+            ...n && {
               borderColor: this.props.tint || "#007AFF",
               boxShadow: `0 0 0 1px ${this.props.tint || "#007AFF"}`
             }
@@ -1325,14 +1363,14 @@ class he {
             style: {
               fontSize: "12px",
               color: "#6b7280",
-              transform: r ? "rotate(180deg)" : "rotate(0deg)",
+              transform: n ? "rotate(180deg)" : "rotate(0deg)",
               transition: "transform 0.2s"
             }
           },
           d("▼")
         )
       ),
-      ...r ? [
+      ...n ? [
         a(
           "div",
           {
@@ -1364,9 +1402,9 @@ class he {
                 type: "text",
                 placeholder: "Search options...",
                 value: this.searchTerm(),
-                onInput: (o) => {
-                  const n = o.target;
-                  this.setSearchTerm(n.value);
+                onInput: (r) => {
+                  const o = r.target;
+                  this.setSearchTerm(o.value);
                 },
                 style: {
                   width: "100%",
@@ -1379,21 +1417,21 @@ class he {
             )
           ] : [],
           ...t.map(
-            (o) => a(
+            (r) => a(
               "button",
               {
                 type: "button",
-                key: String(o.value),
-                onClick: () => this.handleSelection(o.value),
-                disabled: o.disabled,
+                key: String(r.value),
+                onClick: () => this.handleSelection(r.value),
+                disabled: r.disabled,
                 style: {
                   width: "100%",
                   padding: "8px 12px",
                   textAlign: "left",
-                  backgroundColor: o.value === this.getSelection() ? "#f3f4f6" : "transparent",
+                  backgroundColor: r.value === this.getSelection() ? "#f3f4f6" : "transparent",
                   border: "none",
-                  cursor: o.disabled ? "not-allowed" : "pointer",
-                  opacity: o.disabled ? 0.5 : 1,
+                  cursor: r.disabled ? "not-allowed" : "pointer",
+                  opacity: r.disabled ? 0.5 : 1,
                   fontSize: "14px",
                   display: "flex",
                   alignItems: "center",
@@ -1403,18 +1441,18 @@ class he {
                   }
                 }
               },
-              ...o.icon ? [
+              ...r.icon ? [
                 a(
                   "span",
                   { style: { fontSize: "16px" } },
-                  d(o.icon)
+                  d(r.icon)
                 )
               ] : [],
               a(
                 "div",
                 {},
-                a("div", {}, d(o.label)),
-                ...o.description ? [
+                a("div", {}, d(r.label)),
+                ...r.description ? [
                   a(
                     "div",
                     {
@@ -1424,7 +1462,7 @@ class he {
                         marginTop: "2px"
                       }
                     },
-                    d(o.description)
+                    d(r.description)
                   )
                 ] : []
               )
@@ -1466,33 +1504,33 @@ class he {
         "aria-label": this.props.accessibilityLabel
       },
       ...e.map(
-        (r, o) => a(
+        (n, r) => a(
           "button",
           {
             type: "button",
-            key: String(r.value),
-            onClick: () => this.handleSelection(r.value),
-            disabled: r.disabled || this.isDisabled(),
+            key: String(n.value),
+            onClick: () => this.handleSelection(n.value),
+            disabled: n.disabled || this.isDisabled(),
             role: "radio",
-            "aria-checked": r.value === t,
+            "aria-checked": n.value === t,
             style: {
               ...i,
               flex: 1,
               border: "none",
               borderRadius: "6px",
-              backgroundColor: r.value === t ? "#ffffff" : "transparent",
-              color: r.value === t ? "#1a1a1a" : "#6b7280",
-              fontWeight: r.value === t ? "600" : "400",
-              cursor: r.disabled || this.isDisabled() ? "not-allowed" : "pointer",
-              opacity: r.disabled || this.isDisabled() ? 0.5 : 1,
-              boxShadow: r.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
+              backgroundColor: n.value === t ? "#ffffff" : "transparent",
+              color: n.value === t ? "#1a1a1a" : "#6b7280",
+              fontWeight: n.value === t ? "600" : "400",
+              cursor: n.disabled || this.isDisabled() ? "not-allowed" : "pointer",
+              opacity: n.disabled || this.isDisabled() ? 0.5 : 1,
+              boxShadow: n.value === t ? "0 1px 2px rgba(0, 0, 0, 0.1)" : "none",
               transition: "all 0.2s",
               margin: "0",
-              ...o === 0 && { marginRight: "1px" },
-              ...o === e.length - 1 && { marginLeft: "1px" }
+              ...r === 0 && { marginRight: "1px" },
+              ...r === e.length - 1 && { marginLeft: "1px" }
             }
           },
-          ...r.icon ? [
+          ...n.icon ? [
             a(
               "span",
               {
@@ -1501,10 +1539,10 @@ class he {
                   fontSize: "14px"
                 }
               },
-              d(r.icon)
+              d(n.icon)
             )
           ] : [],
-          d(r.label)
+          d(n.label)
         )
       )
     );
@@ -1519,10 +1557,10 @@ class he {
       {
         value: String(t),
         onChange: (i) => {
-          const r = i.target, o = e.find(
-            (n) => String(n.value) === r.value
+          const n = i.target, r = e.find(
+            (o) => String(o.value) === n.value
           );
-          o && this.handleSelection(o.value);
+          r && this.handleSelection(r.value);
         },
         disabled: this.isDisabled(),
         style: {
@@ -1553,26 +1591,26 @@ class he {
       variant: e = "dropdown",
       accessibilityLabel: t,
       accessibilityHint: i
-    } = this.props, r = {
+    } = this.props, n = {
       "aria-label": t,
       "aria-describedby": i ? `${this.id}-hint` : void 0
     };
-    let o;
+    let r;
     switch (e) {
       case "segmented":
-        o = this.renderSegmented();
+        r = this.renderSegmented();
         break;
       case "wheel":
-        o = this.renderWheel();
+        r = this.renderWheel();
         break;
       default:
-        o = this.renderDropdown();
+        r = this.renderDropdown();
         break;
     }
     return a(
       "div",
+      n,
       r,
-      o,
       ...i ? [
         a(
           "div",
@@ -1590,9 +1628,9 @@ class he {
     );
   }
 }
-function D(s, e, t = {}) {
-  const i = { ...t, selection: s, options: e }, r = new he(i);
-  return T(r);
+function $(s, e, t = {}) {
+  const i = { ...t, selection: s, options: e }, n = new he(i);
+  return A(n);
 }
 const xe = {
   /**
@@ -1600,28 +1638,28 @@ const xe = {
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic dropdown picker requires flexible type
   Dropdown(s, e, t = {}) {
-    return D(s, e, { ...t, variant: "dropdown" });
+    return $(s, e, { ...t, variant: "dropdown" });
   },
   /**
    * Segmented picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic segmented picker requires flexible type
   Segmented(s, e, t = {}) {
-    return D(s, e, { ...t, variant: "segmented" });
+    return $(s, e, { ...t, variant: "segmented" });
   },
   /**
    * Wheel picker (native select)
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic wheel picker requires flexible type
   Wheel(s, e, t = {}) {
-    return D(s, e, { ...t, variant: "wheel" });
+    return $(s, e, { ...t, variant: "wheel" });
   },
   /**
    * Menu picker
    */
   // biome-ignore lint/suspicious/noExplicitAny: Generic menu picker requires flexible type
   Menu(s, e, t = {}) {
-    return D(s, e, { ...t, variant: "menu" });
+    return $(s, e, { ...t, variant: "menu" });
   }
 }, ve = {
   /**
@@ -1656,18 +1694,18 @@ const xe = {
   }
 };
 export {
-  k as B,
+  L as B,
   z as E,
   me as L,
-  D as P,
-  g as T,
-  be as a,
+  $ as P,
+  b as T,
+  ge as a,
   S as b,
   ce as c,
   se as d,
   ye as e,
   Se as f,
-  G as g,
+  j as g,
   he as h,
   xe as i,
   ve as j