@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/headless/components/inputs/button/button.js

@@ -1,13 +1,14 @@
-import { createComponent as n, use as b, spread as g, mergeProps as i, insert as h, template as _, memo as w } from "solid-js/web";
-import { mergeProps as z, splitProps as T, children as W, Show as s } from "solid-js";
-import k from "clsx";
-import { mergeRefs as v } from "../../../primitives/mergeRefs.js";
-import { useButtonGroup as C } from "../buttonGroups/buttonGroupContext.js";
-import { Ripple as D } from "../../base/ripple/ripple.js";
-import { Icon as B } from "../../base/icon/icon.js";
-var x = /* @__PURE__ */ _("<a data-testid=button-link>"), A = /* @__PURE__ */ _("<button data-testid=button>");
-function H($) {
-  const t = C(), P = z({
+import { createComponent as n, use as b, spread as g, mergeProps as l, insert as h, template as _, memo as w } from "solid-js/web";
+import { mergeProps as D, splitProps as z, children as T, Show as s } from "solid-js";
+import W from "clsx";
+import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
+import { useButtonGroup as k } from "../buttonGroups/buttonGroupContext.js";
+import { callHandler as C } from "../../../primitives/callHandler.js";
+import { Ripple as B } from "../../base/ripple/ripple.js";
+import { Icon as x } from "../../base/icon/icon.js";
+var A = /* @__PURE__ */ _("<a>"), E = /* @__PURE__ */ _("<button>");
+function K($) {
+  const t = k(), v = D({
     get variant() {
       return t?.variant ?? "contained";
     },
@@ -17,16 +18,35 @@ function H($) {
     get colorTheme() {
       return t?.colorTheme ?? "primary";
     }
-  }, $), [e, a] = T(P, ["label", "variant", "icon", "iconProps", "href", "class", "disabled", "children", "fullWidth", "rippleCenter", "disableRipple", "size", "colorTheme", "color", "ref"]), c = () => e.color ?? t?.color ?? e.colorTheme, l = () => e.disabled ?? t?.disabled, y = () => e.fullWidth ?? t?.fullWidth;
+  }, $), [e, a] = z(v, [
+    "label",
+    "variant",
+    "icon",
+    "iconProps",
+    "href",
+    "class",
+    "disabled",
+    "children",
+    "fullWidth",
+    "rippleCenter",
+    "disableRipple",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown",
+    "size",
+    "colorTheme",
+    "color",
+    "ref",
+    "data-testid"
+  ]), c = () => e.color ?? t?.color ?? e.colorTheme, i = () => e.disabled ?? t?.disabled, y = () => e.fullWidth ?? t?.fullWidth;
   let m;
-  const p = () => k("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, c() === "primary" ? "smwb-primary" : `smwb-button_color-${c()}`, t && "smwb-button-group__grouped", e.class, {
-    "smwb-disabled": l(),
+  const p = () => W("smwb-button", `smwb-${e.variant}`, `smwb-${e.size}`, c() === "primary" ? "smwb-primary" : `smwb-button_color-${c()}`, t && "smwb-button-group__grouped", e.class, {
+    "smwb-disabled": i(),
     "smwb-full-width": y()
   }), u = (r) => {
-    l() || m?.onRipple(r);
-  }, d = W(() => e.icon), R = () => {
+    C(e.onPointerDown, r), i() || m?.onRipple(r);
+  }, d = T(() => e.icon), R = () => {
     const r = d();
-    return typeof r == "string" ? n(B, i(() => e.iconProps ?? {}, {
+    return typeof r == "string" ? n(x, l(() => e.iconProps ?? {}, {
       name: r
     })) : r;
   }, f = () => [n(s, {
@@ -41,7 +61,7 @@ function H($) {
       return !e.disableRipple;
     },
     get children() {
-      return n(D, {
+      return n(B, {
         actionRef: (r) => m = r,
         get center() {
           return e.rippleCenter;
@@ -55,21 +75,29 @@ function H($) {
     },
     get fallback() {
       return (() => {
-        var r = A(), o = v(e.ref);
-        return typeof o == "function" && b(o, r), g(r, i(a, {
+        var r = E(), o = P(e.ref);
+        return typeof o == "function" && b(o, r), g(r, l({
+          get "data-testid"() {
+            return e["data-testid"] ?? "button";
+          }
+        }, a, {
           get class() {
             return p();
           },
           onPointerDown: u,
           get disabled() {
-            return !!l();
+            return !!i();
           }
         }), !1, !0), h(r, f), r;
       })();
     },
     get children() {
-      var r = x(), o = v(e.ref);
-      return typeof o == "function" && b(o, r), g(r, i(a, {
+      var r = A(), o = P(e.ref);
+      return typeof o == "function" && b(o, r), g(r, l({
+        get "data-testid"() {
+          return e["data-testid"] ?? "button-link";
+        }
+      }, a, {
         get class() {
           return p();
         },
@@ -84,6 +112,6 @@ function H($) {
   });
 }
 export {
-  H as Button
+  K as Button
 };
 //# sourceMappingURL=button.js.map

package/dist/headless/components/inputs/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n  ]);\n\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid=\"button\"\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid=\"button-link\"\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","color","disabled","fullWidth","rippleActions","classes","cn","class","onPointerDown","event","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"names":["Button","props","group","useButtonGroup","merged","mergeProps","variant","size","colorTheme","local","rest","splitProps","color","disabled","fullWidth","rippleActions","classes","cn","class","onPointerDown","event","callHandler","onRipple","icon","children","iconElement","resolved","_$createComponent","Icon","_$mergeProps","iconProps","name","content","Show","when","_$memo","label","disableRipple","Ripple","actionRef","actions","center","rippleCenter","href","fallback","_el$2","_tmpl$2","_ref$2","mergeRefs","ref","_$use","_$spread","_$insert","_el$","_tmpl$","_ref$"],"mappings":"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"}

package/dist/headless/components/inputs/buttonGroups/buttonGroup.js

@@ -1,48 +1,52 @@
-import { createComponent as a, use as s, spread as u, mergeProps as m, insert as d, template as c } from "solid-js/web";
+import { createComponent as l, use as s, spread as u, mergeProps as d, insert as m, template as c } from "solid-js/web";
 import { mergeProps as p, splitProps as f } from "solid-js";
 import g from "clsx";
 import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
 import { ButtonGroupContext as v } from "./buttonGroupContext.js";
 var b = /* @__PURE__ */ c("<div>");
-function T(o) {
-  const i = p({
+function T(i) {
+  const n = p({
     variant: "contained",
     size: "medium",
     orientation: "horizontal",
     colorTheme: "primary",
     fullWidth: !1,
     disabled: !1
-  }, o), [r, n] = f(i, ["class", "children", "variant", "size", "orientation", "colorTheme", "color", "fullWidth", "disabled", "ref"]), l = {
+  }, i), [e, t] = f(n, ["class", "children", "variant", "size", "orientation", "colorTheme", "color", "fullWidth", "disabled", "ref", "data-testid"]), a = {
     get variant() {
-      return r.variant;
+      return e.variant;
     },
     get size() {
-      return r.size;
+      return e.size;
     },
     get color() {
-      return r.color;
+      return e.color;
     },
     get colorTheme() {
-      return r.colorTheme;
+      return e.colorTheme;
     },
     get disabled() {
-      return r.disabled;
+      return e.disabled;
     },
     get fullWidth() {
-      return r.orientation === "vertical" ? !0 : r.fullWidth;
+      return e.orientation === "vertical" ? !0 : e.fullWidth;
     }
   };
-  return a(v.Provider, {
-    value: l,
+  return l(v.Provider, {
+    value: a,
     get children() {
-      var e = b(), t = h(r.ref);
-      return typeof t == "function" && s(t, e), u(e, m(n, {
+      var r = b(), o = h(e.ref);
+      return typeof o == "function" && s(o, r), u(r, d(t, {
         get class() {
-          return g("smwb-button-group", r.class, `smwb-${r.orientation}`, `smwb-${r.variant}`, r.fullWidth && "smwb-full-width");
+          return g("smwb-button-group", e.class, `smwb-${e.orientation}`, `smwb-${e.variant}`, e.fullWidth && "smwb-full-width");
         },
-        role: "group",
-        "data-testid": "button-group"
-      }), !1, !0), d(e, () => r.children), e;
+        get role() {
+          return t.role ?? "group";
+        },
+        get "data-testid"() {
+          return e["data-testid"] ?? "button-group";
+        }
+      }), !1, !0), m(r, () => e.children), r;
     }
   });
 }

package/dist/headless/components/inputs/buttonGroups/buttonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonGroup.js","sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ButtonGroupContext, type ButtonGroupContextValue } from \"./buttonGroupContext\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ButtonGroup(props: ParentProps<ButtonGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"contained\" as const,\n      size: \"medium\" as const,\n      orientation: \"horizontal\" as const,\n      colorTheme: \"primary\" as const,\n      fullWidth: false,\n      disabled: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"variant\",\n    \"size\",\n    \"orientation\",\n    \"colorTheme\",\n    \"color\",\n    \"fullWidth\",\n    \"disabled\",\n    \"ref\",\n  ]);\n\n  const value: ButtonGroupContextValue = {\n    get variant() {\n      return local.variant;\n    },\n    get size() {\n      return local.size;\n    },\n    get color() {\n      return local.color;\n    },\n    get colorTheme() {\n      return local.colorTheme;\n    },\n    get disabled() {\n      return local.disabled;\n    },\n    get fullWidth() {\n      return local.orientation === \"vertical\" ? true : local.fullWidth;\n    },\n  };\n\n  return (\n    <ButtonGroupContext.Provider value={value}>\n      <div\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-button-group\",\n          local.class,\n          `smwb-${local.orientation}`,\n          `smwb-${local.variant}`,\n          local.fullWidth && \"smwb-full-width\"\n        )}\n        role=\"group\"\n        data-testid=\"button-group\"\n      >\n        {local.children}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n}\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","props","merged","mergeProps","variant","size","orientation","colorTheme","fullWidth","disabled","local","rest","splitProps","value","color","_$createComponent","ButtonGroupContext","Provider","children","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert"],"mappings":";;;;;;AAkBO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IACEC,SAAS;AAAA,IACTC,MAAM;AAAA,IACNC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,UAAU;AAAA,EAAA,GAEZR,CACF,GACM,CAACS,GAAOC,CAAI,IAAIC,EAAWV,GAAQ,CACvC,SACA,YACA,WACA,QACA,eACA,cACA,SACA,aACA,YACA,KAAK,CACN,GAEKW,IAAiC;AAAA,IACrC,IAAIT,UAAU;AACZ,aAAOM,EAAMN;AAAAA,IACf;AAAA,IACA,IAAIC,OAAO;AACT,aAAOK,EAAML;AAAAA,IACf;AAAA,IACA,IAAIS,QAAQ;AACV,aAAOJ,EAAMI;AAAAA,IACf;AAAA,IACA,IAAIP,aAAa;AACf,aAAOG,EAAMH;AAAAA,IACf;AAAA,IACA,IAAIE,WAAW;AACb,aAAOC,EAAMD;AAAAA,IACf;AAAA,IACA,IAAID,YAAY;AACd,aAAOE,EAAMJ,gBAAgB,aAAa,KAAOI,EAAMF;AAAAA,IACzD;AAAA,EAAA;AAGF,SAAAO,EACGC,EAAmBC,UAAQ;AAAA,IAACJ,OAAAA;AAAAA,IAAY,IAAAK,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAGhCC,EAAUZ,EAAMa,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBf,GAAI;AAAA,QAAA,IAAA,QAAA;AAAA,iBAEDgB,EACL,qBACAjB,EAAMkB,OACN,QAAQlB,EAAMJ,WAAW,IACzB,QAAQI,EAAMN,OAAO,IACrBM,EAAMF,aAAa,iBACrB;AAAA,QAAC;AAAA,QAAA,MACI;AAAA,QAAO,eACA;AAAA,MAAA,CAAc,GAAA,IAAA,EAAA,GAAAqB,EAAAV,GAAA,MAEzBT,EAAMQ,QAAQ,GAAAC;AAAAA,IAAA;AAAA,EAAA,CAAA;AAIvB;"}
+{"version":3,"file":"buttonGroup.js","sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ButtonGroupContext, type ButtonGroupContextValue } from \"./buttonGroupContext\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Test id of the root `<div>`; `button-group` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ButtonGroup(props: ParentProps<ButtonGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"contained\" as const,\n      size: \"medium\" as const,\n      orientation: \"horizontal\" as const,\n      colorTheme: \"primary\" as const,\n      fullWidth: false,\n      disabled: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"variant\",\n    \"size\",\n    \"orientation\",\n    \"colorTheme\",\n    \"color\",\n    \"fullWidth\",\n    \"disabled\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const value: ButtonGroupContextValue = {\n    get variant() {\n      return local.variant;\n    },\n    get size() {\n      return local.size;\n    },\n    get color() {\n      return local.color;\n    },\n    get colorTheme() {\n      return local.colorTheme;\n    },\n    get disabled() {\n      return local.disabled;\n    },\n    get fullWidth() {\n      return local.orientation === \"vertical\" ? true : local.fullWidth;\n    },\n  };\n\n  return (\n    <ButtonGroupContext.Provider value={value}>\n      <div\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-button-group\",\n          local.class,\n          `smwb-${local.orientation}`,\n          `smwb-${local.variant}`,\n          local.fullWidth && \"smwb-full-width\"\n        )}\n        // A default: the caller's own wins, and an explicit undefined keeps it.\n        role={rest.role ?? \"group\"}\n        data-testid={local[\"data-testid\"] ?? \"button-group\"}\n      >\n        {local.children}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n}\n\nexport default ButtonGroup;\n"],"names":["ButtonGroup","props","merged","mergeProps","variant","size","orientation","colorTheme","fullWidth","disabled","local","rest","splitProps","value","color","_$createComponent","ButtonGroupContext","Provider","children","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","role","_$insert"],"mappings":";;;;;;AAoBO,SAASA,EAAYC,GAAmD;AAC7E,QAAMC,IAASC,EACb;AAAA,IACEC,SAAS;AAAA,IACTC,MAAM;AAAA,IACNC,aAAa;AAAA,IACbC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,UAAU;AAAA,EAAA,GAEZR,CACF,GACM,CAACS,GAAOC,CAAI,IAAIC,EAAWV,GAAQ,CACvC,SACA,YACA,WACA,QACA,eACA,cACA,SACA,aACA,YACA,OACA,aAAa,CACd,GAEKW,IAAiC;AAAA,IACrC,IAAIT,UAAU;AACZ,aAAOM,EAAMN;AAAAA,IACf;AAAA,IACA,IAAIC,OAAO;AACT,aAAOK,EAAML;AAAAA,IACf;AAAA,IACA,IAAIS,QAAQ;AACV,aAAOJ,EAAMI;AAAAA,IACf;AAAA,IACA,IAAIP,aAAa;AACf,aAAOG,EAAMH;AAAAA,IACf;AAAA,IACA,IAAIE,WAAW;AACb,aAAOC,EAAMD;AAAAA,IACf;AAAA,IACA,IAAID,YAAY;AACd,aAAOE,EAAMJ,gBAAgB,aAAa,KAAOI,EAAMF;AAAAA,IACzD;AAAA,EAAA;AAGF,SAAAO,EACGC,EAAmBC,UAAQ;AAAA,IAACJ,OAAAA;AAAAA,IAAY,IAAAK,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAGhCC,EAAUZ,EAAMa,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBf,GAAI;AAAA,QAAA,IAAA,QAAA;AAAA,iBAEDgB,EACL,qBACAjB,EAAMkB,OACN,QAAQlB,EAAMJ,WAAW,IACzB,QAAQI,EAAMN,OAAO,IACrBM,EAAMF,aAAa,iBACrB;AAAA,QAAC;AAAA,QAAA,IAEDqB,OAAI;AAAA,iBAAElB,EAAKkB,QAAQ;AAAA,QAAO;AAAA,QAAA,IAAA,gBAAA;AAAA,iBACbnB,EAAM,aAAa,KAAK;AAAA,QAAc;AAAA,MAAA,CAAA,GAAA,IAAA,EAAA,GAAAoB,EAAAX,GAAA,MAElDT,EAAMQ,QAAQ,GAAAC;AAAAA,IAAA;AAAA,EAAA,CAAA;AAIvB;"}

package/dist/headless/components/inputs/checkbox/checkbox.js

@@ -1,25 +1,41 @@
-import { createComponent as n, setAttribute as b, use as k, spread as v, mergeProps as y, insert as a, effect as $, className as u, template as f } from "solid-js/web";
-import { mergeProps as C, splitProps as z, Show as h } from "solid-js";
-import g from "clsx";
-import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
-import { createId as T } from "../../../primitives/createId.js";
-import { mergeRefs as O } from "../../../primitives/mergeRefs.js";
-import { Icon as p } from "../../base/icon/icon.js";
-var P = /* @__PURE__ */ f("<span class=smwb-checkbox__label>"), I = /* @__PURE__ */ f("<label><input type=checkbox class=smwb-checkbox__input><span>");
-function j(o) {
-  const w = C({
-    size: "medium",
-    color: "primary"
-  }, o), [e, _] = z(w, ["label", "disabled", "readOnly", "required", "name", "id", "indeterminate", "class", "size", "color", "onChange", "helperText", "error", "ref"]), l = T(e.id), x = (r) => {
-    if (e.readOnly) {
-      r.preventDefault();
-      return;
+import { createComponent as n, setAttribute as g, use as T, spread as $, mergeProps as z, insert as d, effect as O, className as h, template as _ } from "solid-js/web";
+import { mergeProps as q, splitProps as B, createEffect as P, Show as f } from "solid-js";
+import p from "clsx";
+import { TextFieldWrapper as I } from "../textField/textFieldWrapper.js";
+import { createHelperText as H } from "../../../primitives/createHelperText.js";
+import { createId as S } from "../../../primitives/createId.js";
+import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
+import { callHandler as A } from "../../../primitives/callHandler.js";
+import { Icon as w } from "../../base/icon/icon.js";
+var D = /* @__PURE__ */ _("<span class=smwb-checkbox__label>"), E = /* @__PURE__ */ _("<label><input type=checkbox class=smwb-checkbox__input><span>");
+function M(a) {
+  let l;
+  const k = q(
+    {
+      size: "medium",
+      color: "primary"
+    },
+    a,
+    // The input's ref: the caller's, and ours for the indeterminate property.
+    {
+      ref: x(a.ref, (r) => l = r)
     }
-    e.onChange?.(r, r.currentTarget.checked, o);
+  ), [e, y] = B(k, ["label", "disabled", "readOnly", "onClick", "required", "name", "id", "indeterminate", "class", "size", "color", "onChange", "helperText", "error", "aria-describedby", "ref"]), c = S(e.id), o = H(() => e.helperText, {
+    describedBy: () => e["aria-describedby"]
+  }), v = (r) => {
+    A(e.onClick, r), e.readOnly && r.preventDefault();
+  }, C = (r) => {
+    r.currentTarget.indeterminate = !!e.indeterminate, !e.readOnly && e.onChange?.(r, r.currentTarget.checked, a);
   };
-  return n(q, {
+  return P(() => {
+    const r = !!e.indeterminate;
+    l && (l.indeterminate = r);
+  }), n(I, {
     get helperText() {
-      return e.helperText;
+      return o.text();
+    },
+    get helperTextId() {
+      return o.id;
     },
     get disabled() {
       return e.disabled;
@@ -29,10 +45,10 @@ function j(o) {
     },
     class: "smwb-text-field-checkbox",
     get children() {
-      var r = I(), i = r.firstChild, s = i.nextSibling;
-      b(r, "for", l);
-      var c = O(e.ref);
-      return typeof c == "function" && k(c, i), b(i, "id", l), v(i, y({
+      var r = E(), i = r.firstChild, s = i.nextSibling;
+      g(r, "for", c);
+      var m = x(e.ref);
+      return typeof m == "function" && T(m, i), g(i, "id", c), $(i, z({
         get name() {
           return e.name;
         },
@@ -50,15 +66,22 @@ function j(o) {
         },
         get "aria-required"() {
           return e.required || void 0;
+        },
+        get "aria-describedby"() {
+          return o.describedBy();
         }
-      }, _, {
-        onChange: x
-      }), !1, !1), a(s, n(h, {
+      }, y, {
+        get "aria-readonly"() {
+          return e.readOnly || void 0;
+        },
+        onChange: C,
+        onClick: v
+      }), !1, !1), d(s, n(f, {
         get when() {
           return e.indeterminate;
         },
         get fallback() {
-          return n(p, {
+          return n(w, {
             name: "check",
             size: 17,
             class: "smwb-checkbox__icon",
@@ -66,30 +89,30 @@ function j(o) {
           });
         },
         get children() {
-          return n(p, {
+          return n(w, {
             name: "remove",
             size: 18,
             class: "smwb-checkbox__icon",
             weight: 700
           });
         }
-      })), a(r, n(h, {
+      })), d(r, n(f, {
         get when() {
           return e.label;
         },
         get children() {
-          var t = P();
-          return a(t, () => e.label), t;
+          var t = D();
+          return d(t, () => e.label), t;
         }
-      }), null), $((t) => {
-        var d = g("smwb-checkbox__wrapper", `smwb-checkbox_size-${e.size}`, `smwb-checkbox_color-${e.color}`, e.class, {
+      }), null), O((t) => {
+        var b = p("smwb-checkbox__wrapper", `smwb-checkbox_size-${e.size}`, `smwb-checkbox_color-${e.color}`, e.class, {
           "smwb-disabled": e.disabled,
           "smwb-readonly": e.readOnly,
           "smwb-indeterminate": e.indeterminate
-        }), m = g("smwb-checkbox__btn", {
+        }), u = p("smwb-checkbox__btn", {
           "smwb-indeterminate": e.indeterminate
         });
-        return d !== t.e && u(r, t.e = d), m !== t.t && u(s, t.t = m), t;
+        return b !== t.e && h(r, t.e = b), u !== t.t && h(s, t.t = u), t;
       }, {
         e: void 0,
         t: void 0
@@ -98,6 +121,6 @@ function j(o) {
   });
 }
 export {
-  j as Checkbox
+  M as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/headless/components/inputs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type SelectionChangeEvent = Event & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  indeterminate?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: CheckboxProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"indeterminate\",\n    \"class\",\n    \"size\",\n    \"color\",\n    \"onChange\",\n    \"helperText\",\n    \"error\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${local.size}`,\n          `smwb-checkbox_color-${local.color}`,\n          local.class,\n          {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n            \"smwb-indeterminate\": local.indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={local.name}\n          class=\"smwb-checkbox__input\"\n          disabled={local.disabled}\n          readonly={local.readOnly}\n          required={local.required}\n          aria-invalid={local.error || undefined}\n          aria-required={local.required || undefined}\n          ref={mergeRefs(local.ref)}\n          {...args}\n          onChange={handleChange}\n        />\n        <span class={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": local.indeterminate })}>\n          <Show\n            when={local.indeterminate}\n            fallback={<Icon name=\"check\" size={17} class=\"smwb-checkbox__icon\" weight={700} />}\n          >\n            <Icon name=\"remove\" size={18} class=\"smwb-checkbox__icon\" weight={700} />\n          </Show>\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-checkbox__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Checkbox;\n"],"names":["Checkbox","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","handleChange","event","readOnly","preventDefault","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","helperText","disabled","error","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","name","readonly","required","undefined","_$insert","Show","when","indeterminate","fallback","Icon","weight","label","_el$4","_tmpl$","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type SelectionChangeEvent = Event & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface CheckboxProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the checkbox as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  /**\n   * Shows the checkbox as partly checked, as for a \"select all\" over a partial selection: drawn with a dash and\n   * announced as \"mixed\" by screen readers, whatever `checked` is. A click does not clear it: the click toggles\n   * `checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns\n   * false.\n   */\n  indeterminate?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: CheckboxProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n  let input: HTMLInputElement | undefined;\n  const merged = mergeProps(\n    { size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor },\n    props,\n    // The input's ref: the caller's, and ours for the indeterminate property.\n    { ref: mergeRefs<HTMLInputElement>(props.ref, (el) => (input = el)) }\n  );\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"indeterminate\",\n    \"class\",\n    \"size\",\n    \"color\",\n    \"onChange\",\n    \"helperText\",\n    \"error\",\n    \"aria-describedby\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a checkbox input: a click on it or on its label, and Space, still\n  // toggle it. Cancel the click; the browser then puts the previous state back.\n  const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (local.readOnly) event.preventDefault();\n  };\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    // A click clears the input's indeterminate property; the prop still decides it.\n    event.currentTarget.indeterminate = Boolean(local.indeterminate);\n    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  // `indeterminate` is a DOM property with no attribute, so no markup carries it:\n  // set it on the input, after hydration too, and whenever the prop changes.\n  createEffect(() => {\n    const indeterminate = Boolean(local.indeterminate);\n    if (input) input.indeterminate = indeterminate;\n  });\n\n  return (\n    <TextFieldWrapper\n      helperText={helper.text()}\n      helperTextId={helper.id}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${local.size}`,\n          `smwb-checkbox_color-${local.color}`,\n          local.class,\n          {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n            \"smwb-indeterminate\": local.indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={local.name}\n          class=\"smwb-checkbox__input\"\n          disabled={local.disabled}\n          readonly={local.readOnly}\n          required={local.required}\n          aria-invalid={local.error || undefined}\n          aria-required={local.required || undefined}\n          aria-describedby={helper.describedBy()}\n          ref={mergeRefs(local.ref)}\n          {...args}\n          aria-readonly={local.readOnly || undefined}\n          onChange={handleChange}\n          onClick={handleClick}\n        />\n        <span class={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": local.indeterminate })}>\n          <Show\n            when={local.indeterminate}\n            fallback={<Icon name=\"check\" size={17} class=\"smwb-checkbox__icon\" weight={700} />}\n          >\n            <Icon name=\"remove\" size={18} class=\"smwb-checkbox__icon\" weight={700} />\n          </Show>\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-checkbox__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Checkbox;\n"],"names":["Checkbox","props","input","merged","mergeProps","size","color","ref","mergeRefs","el","local","args","splitProps","id","createId","helper","createHelperText","helperText","describedBy","handleClick","event","callHandler","onClick","readOnly","preventDefault","handleChange","currentTarget","indeterminate","Boolean","onChange","checked","createEffect","_$createComponent","TextFieldWrapper","text","helperTextId","disabled","error","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$setAttribute","_ref$","_$use","_$spread","_$mergeProps","name","readonly","required","undefined","_$insert","Show","when","fallback","Icon","weight","label","_el$4","_tmpl$","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t"],"mappings":"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"}