@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/source/components/inputs/datePicker/datePickerActionLabel.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerActionLabel.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface ActionLabelProps {\n  label: string;\n  onLeftIconClick?: (() => void) | undefined;\n  onRightIconClick?: (() => void) | undefined;\n  onLabelClick?: (() => void) | undefined;\n  disabled?: boolean | undefined;\n  active?: boolean | undefined;\n  hiddenSwitches?: boolean | undefined;\n  dataToggleId?: string | undefined;\n}\n\nexport function DatePickerActionLabel(props: ActionLabelProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"onLeftIconClick\",\n    \"onRightIconClick\",\n    \"onLabelClick\",\n    \"disabled\",\n    \"active\",\n    \"hiddenSwitches\",\n    \"dataToggleId\",\n  ]);\n\n  const switchClasses = (): string =>\n    cn(\"smwb-date-picker__switch\", {\n      \"smwb-date-picker__switch--hidden\": local.hiddenSwitches,\n    });\n\n  return (\n    <div class=\"smwb-date-picker__action\">\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onLeftIconClick}>\n          <Icon name=\"keyboard_arrow_left\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n      <div\n        class={cn(\"smwb-date-picker__action-label\", {\n          \"smwb-date-picker__action-label--disabled\": local.disabled,\n          \"smwb-date-picker__action-label--active\": local.active,\n        })}\n        data-testid={local.dataToggleId}\n        onClick={local.disabled ? undefined : local.onLabelClick}\n      >\n        <span class=\"smwb-date-picker__action-text\">{local.label}</span>\n        <Icon name=\"arrow_drop_down\" weight={500} size={20} />\n      </div>\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onRightIconClick}>\n          <Icon name=\"keyboard_arrow_right\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default DatePickerActionLabel;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AACf,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAad,SAAS,sBAAsB,OAAsC;AAC1E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,GAAG,4BAA4B;AAAA,IAC7B,oCAAoC,MAAM;AAAA,EAC5C,CAAC;AAEH,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,iBAAiB;AAAA,UAC9F,CAAC,KAAK,KAAK,sBAAsB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC5D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,MACN,CAAC;AAAA,IACC,OAAO,GAAG,kCAAkC;AAAA,MAC1C,4CAA4C,MAAM;AAAA,MAClD,0CAA0C,MAAM;AAAA,IAClD,CAAC;AAAA,IACD,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM,WAAW,SAAY,MAAM;AAAA,GAC7C;AAAA,QACC,CAAC,KAAK,MAAM,iCAAiC,MAAM,MAAM,EAAxD,KAA+D;AAAA,QAChE,CAAC,KAAK,KAAK,kBAAkB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,MACxD,EAVC,IAUK;AAAA,MACN,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,kBAAkB;AAAA,UAC/F,CAAC,KAAK,KAAK,uBAAuB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC7D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,IACR,EAtBC;AAwBL;AAEA,IAAO,gCAAQ;","names":[],"file":"datePickerActionLabel.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerActionLabel.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport { Icon } from \"../../base/icon\";\n\nexport interface ActionLabelProps {\n  label: string;\n  onLeftIconClick?: (() => void) | undefined;\n  onRightIconClick?: (() => void) | undefined;\n  onLabelClick?: (() => void) | undefined;\n  disabled?: boolean | undefined;\n  active?: boolean | undefined;\n  hiddenSwitches?: boolean | undefined;\n  dataToggleId?: string | undefined;\n}\n\nexport function DatePickerActionLabel(props: ActionLabelProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"label\",\n    \"onLeftIconClick\",\n    \"onRightIconClick\",\n    \"onLabelClick\",\n    \"disabled\",\n    \"active\",\n    \"hiddenSwitches\",\n    \"dataToggleId\",\n  ]);\n\n  const switchClasses = (): string =>\n    cn(\"smwb-date-picker__switch\", {\n      \"smwb-date-picker__switch--hidden\": local.hiddenSwitches,\n    });\n\n  // Solid binds event handlers once, so the label's handler is always attached\n  // and checks `disabled` itself: the header disables one label while the other\n  // one's view is open. (The icon buttons spread their props, which follow.)\n  const onLabelClick = (): void => {\n    if (!local.disabled) local.onLabelClick?.();\n  };\n\n  return (\n    <div class=\"smwb-date-picker__action\">\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onLeftIconClick}>\n          <Icon name=\"keyboard_arrow_left\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n      <div\n        class={cn(\"smwb-date-picker__action-label\", {\n          \"smwb-date-picker__action-label--disabled\": local.disabled,\n          \"smwb-date-picker__action-label--active\": local.active,\n        })}\n        data-testid={local.dataToggleId}\n        onClick={onLabelClick}\n      >\n        <span class=\"smwb-date-picker__action-text\">{local.label}</span>\n        <Icon name=\"arrow_drop_down\" weight={500} size={20} />\n      </div>\n      <div class={switchClasses()}>\n        <DatePickerIconButton size=\"small\" onClick={local.disabled ? undefined : local.onRightIconClick}>\n          <Icon name=\"keyboard_arrow_right\" weight={500} size={24} />\n        </DatePickerIconButton>\n      </div>\n    </div>\n  );\n}\n\nexport default DatePickerActionLabel;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AACf,SAAS,4BAA4B;AACrC,SAAS,YAAY;AAad,SAAS,sBAAsB,OAAsC;AAC1E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB,MACpB,GAAG,4BAA4B;AAAA,IAC7B,oCAAoC,MAAM;AAAA,EAC5C,CAAC;AAKH,QAAM,eAAe,MAAY;AAC/B,QAAI,CAAC,MAAM,SAAU,OAAM,eAAe;AAAA,EAC5C;AAEA,SACE,CAAC,IAAI,MAAM,2BAA2B;AAAA,MACpC,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,iBAAiB;AAAA,UAC9F,CAAC,KAAK,KAAK,sBAAsB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC5D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,MACN,CAAC;AAAA,IACC,OAAO,GAAG,kCAAkC;AAAA,MAC1C,4CAA4C,MAAM;AAAA,MAClD,0CAA0C,MAAM;AAAA,IAClD,CAAC;AAAA,IACD,aAAa,MAAM;AAAA,IACnB,SAAS;AAAA,GACV;AAAA,QACC,CAAC,KAAK,MAAM,iCAAiC,MAAM,MAAM,EAAxD,KAA+D;AAAA,QAChE,CAAC,KAAK,KAAK,kBAAkB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,MACxD,EAVC,IAUK;AAAA,MACN,CAAC,IAAI,OAAO,cAAc,GAAG;AAAA,QAC3B,CAAC,qBAAqB,KAAK,QAAQ,SAAS,MAAM,WAAW,SAAY,MAAM,kBAAkB;AAAA,UAC/F,CAAC,KAAK,KAAK,uBAAuB,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,QAC7D,EAFC,qBAEsB;AAAA,MACzB,EAJC,IAIK;AAAA,IACR,EAtBC;AAwBL;AAEA,IAAO,gCAAQ;","names":[],"file":"datePickerActionLabel.jsx"}

package/dist/source/components/inputs/datePicker/datePickerDay.jsx

@@ -1,8 +1,10 @@
-import { Show, splitProps } from "solid-js";
+import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
+import { callHandler } from "../../../primitives/callHandler";
 function DatePickerDay(props) {
-  const [local, rest] = splitProps(props, [
+  const merged = mergeProps({ type: "button" }, props);
+  const [local, rest] = splitProps(merged, [
     "class",
     "children",
     "onChange",
@@ -12,13 +14,18 @@ function DatePickerDay(props) {
     "outside",
     "disabled",
     "inRange",
-    "day"
+    "day",
+    // The day sets these on its root too; its own handlers call the caller's first.
+    "onPointerDown",
+    "onClick"
   ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
-  const onClick = () => {
+  const onClick = (event) => {
+    callHandler(local.onClick, event);
     if (!local.disabled) local.onChange?.(void 0, local.day);
   };
   const classes = () => cn("smwb-date-picker__day", local.class, {
@@ -29,14 +36,7 @@ function DatePickerDay(props) {
     "smwb-date-picker__day--in-range": !local.disabled && local.inRange
   });
   return <Show when={!local.hidden} fallback={<span class="smwb-date-picker__day-hidden" />}>
-      <button
-    {...rest}
-    class={classes()}
-    type="button"
-    onPointerDown={onPointerDown}
-    onClick={onClick}
-    disabled={local.disabled}
-  >
+      <button {...rest} class={classes()} onPointerDown={onPointerDown} onClick={onClick} disabled={local.disabled}>
         {local.children}
         <Show when={!local.disabled}>
           <Ripple actionRef={(actions) => rippleActions = actions} center />

package/dist/source/components/inputs/datePicker/datePickerDay.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerDay.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\n\nexport interface DatePickerDayProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  active?: boolean | undefined;\n  current?: boolean | undefined;\n  hidden?: boolean | undefined;\n  outside?: boolean | undefined;\n  disabled?: boolean | undefined;\n  inRange?: boolean | undefined;\n  day: Date;\n  onChange?: ((event?: Event, date?: Date) => void) | undefined;\n}\n\nexport function DatePickerDay(props: ParentProps<DatePickerDayProps>): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"active\",\n    \"current\",\n    \"hidden\",\n    \"outside\",\n    \"disabled\",\n    \"inRange\",\n    \"day\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const onClick = (): void => {\n    if (!local.disabled) local.onChange?.(undefined, local.day);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-date-picker__day\", local.class, {\n      \"smwb-date-picker__day--active\": !local.disabled && local.active,\n      \"smwb-date-picker__day--current\": local.current && !local.active,\n      \"smwb-date-picker__day--outside\": !local.disabled && local.outside,\n      \"smwb-date-picker__day--disabled\": local.disabled,\n      \"smwb-date-picker__day--in-range\": !local.disabled && local.inRange,\n    });\n\n  return (\n    <Show when={!local.hidden} fallback={<span class=\"smwb-date-picker__day-hidden\" />}>\n      <button\n        {...rest}\n        class={classes()}\n        type=\"button\"\n        onPointerDown={onPointerDown}\n        onClick={onClick}\n        disabled={local.disabled}\n      >\n        {local.children}\n        <Show when={!local.disabled}>\n          <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n        </Show>\n      </button>\n    </Show>\n  );\n}\n\nexport default DatePickerDay;\n"],"mappings":"AAAA,SAAqC,MAAM,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,cAAqC;AAavC,SAAS,cAAc,OAAqD;AACjF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAAU,MAAY;AAC1B,QAAI,CAAC,MAAM,SAAU,OAAM,WAAW,QAAW,MAAM,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU,MACd,GAAG,yBAAyB,MAAM,OAAO;AAAA,IACvC,iCAAiC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC1D,kCAAkC,MAAM,WAAW,CAAC,MAAM;AAAA,IAC1D,kCAAkC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC3D,mCAAmC,MAAM;AAAA,IACzC,mCAAmC,CAAC,MAAM,YAAY,MAAM;AAAA,EAC9D,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,UAAU,CAAC,KAAK,MAAM,+BAA+B,IAAI;AAAA,MAClF,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,QAAQ;AAAA,IACf,KAAK;AAAA,IACL,eAAe;AAAA,IACf,SAAS;AAAA,IACT,UAAU,MAAM;AAAA,GACjB;AAAA,SACE,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,UAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,QACtE,EAFC,KAEM;AAAA,MACT,EAZC,OAYQ;AAAA,IACX,EAdC;AAgBL;AAEA,IAAO,wBAAQ;","names":[],"file":"datePickerDay.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerDay.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface DatePickerDayProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  active?: boolean | undefined;\n  current?: boolean | undefined;\n  hidden?: boolean | undefined;\n  outside?: boolean | undefined;\n  disabled?: boolean | undefined;\n  inRange?: boolean | undefined;\n  day: Date;\n  onChange?: ((event?: Event, date?: Date) => void) | undefined;\n}\n\nexport function DatePickerDay(props: ParentProps<DatePickerDayProps>): JSX.Element {\n  // `type` is a default: the caller's wins.\n  const merged = mergeProps({ type: \"button\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"onChange\",\n    \"active\",\n    \"current\",\n    \"hidden\",\n    \"outside\",\n    \"disabled\",\n    \"inRange\",\n    \"day\",\n    // The day sets these on its root too; its own handlers call the caller's first.\n    \"onPointerDown\",\n    \"onClick\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  const onClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (!local.disabled) local.onChange?.(undefined, local.day);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-date-picker__day\", local.class, {\n      \"smwb-date-picker__day--active\": !local.disabled && local.active,\n      \"smwb-date-picker__day--current\": local.current && !local.active,\n      \"smwb-date-picker__day--outside\": !local.disabled && local.outside,\n      \"smwb-date-picker__day--disabled\": local.disabled,\n      \"smwb-date-picker__day--in-range\": !local.disabled && local.inRange,\n    });\n\n  return (\n    <Show when={!local.hidden} fallback={<span class=\"smwb-date-picker__day-hidden\" />}>\n      <button {...rest} class={classes()} onPointerDown={onPointerDown} onClick={onClick} disabled={local.disabled}>\n        {local.children}\n        <Show when={!local.disabled}>\n          <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n        </Show>\n      </button>\n    </Show>\n  );\n}\n\nexport default DatePickerDay;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,mBAAmB;AAarB,SAAS,cAAc,OAAqD;AAEjF,QAAM,SAAS,WAAW,EAAE,MAAM,SAAkB,GAAG,KAAK;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,QAAM,UAA2D,CAAC,UAAU;AAC1E,gBAAY,MAAM,SAAS,KAAK;AAChC,QAAI,CAAC,MAAM,SAAU,OAAM,WAAW,QAAW,MAAM,GAAG;AAAA,EAC5D;AAEA,QAAM,UAAU,MACd,GAAG,yBAAyB,MAAM,OAAO;AAAA,IACvC,iCAAiC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC1D,kCAAkC,MAAM,WAAW,CAAC,MAAM;AAAA,IAC1D,kCAAkC,CAAC,MAAM,YAAY,MAAM;AAAA,IAC3D,mCAAmC,MAAM;AAAA,IACzC,mCAAmC,CAAC,MAAM,YAAY,MAAM;AAAA,EAC9D,CAAC;AAEH,SACE,CAAC,KAAK,MAAM,CAAC,MAAM,QAAQ,UAAU,CAAC,KAAK,MAAM,+BAA+B,IAAI;AAAA,MAClF,CAAC,WAAW,MAAM,OAAO,QAAQ,GAAG,eAAe,eAAe,SAAS,SAAS,UAAU,MAAM,UAAU;AAAA,SAC3G,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,UAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,QACtE,EAFC,KAEM;AAAA,MACT,EALC,OAKQ;AAAA,IACX,EAPC;AASL;AAEA,IAAO,wBAAQ;","names":[],"file":"datePickerDay.jsx"}

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx

@@ -2,18 +2,28 @@ import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function DatePickerIconButton(props) {
-  const merged = mergeProps({ size: "medium" }, props);
-  const [local, rest] = splitProps(merged, ["class", "children", "disabled", "size", "edge", "ref"]);
+  const merged = mergeProps({ size: "medium", type: "button" }, props);
+  const [local, rest] = splitProps(merged, [
+    "class",
+    "children",
+    "disabled",
+    "size",
+    "edge",
+    "ref",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!local.disabled) rippleActions?.onRipple(event);
   };
   return <button
     {...rest}
     ref={mergeRefs(local.ref)}
     onPointerDown={onPointerDown}
-    type="button"
     class={cn("smwb-date-picker__icon-button", local.class, {
       "smwb-date-picker__icon-button--small": local.size === "small",
       "smwb-date-picker__icon-button--edge-start": local.edge === "start",

package/dist/source/components/inputs/datePicker/datePickerIconButton.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DataPickerIconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  size?: \"medium\" | \"small\";\n  edge?: \"start\" | \"end\";\n  ref?: Ref<HTMLButtonElement>;\n};\n\nexport function DatePickerIconButton(props: ParentProps<DataPickerIconButtonProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"children\", \"disabled\", \"size\", \"edge\", \"ref\"]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      onPointerDown={onPointerDown}\n      type=\"button\"\n      class={cn(\"smwb-date-picker__icon-button\", local.class, {\n        \"smwb-date-picker__icon-button--small\": local.size === \"small\",\n        \"smwb-date-picker__icon-button--edge-start\": local.edge === \"start\",\n        \"smwb-date-picker__icon-button--edge-end\": local.edge === \"end\",\n        \"smwb-date-picker__icon-button--disabled\": local.disabled,\n      })}\n      disabled={local.disabled}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default DatePickerIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAQ7B,SAAS,qBAAqB,OAA4D;AAC/F,QAAM,SAAS,WAAW,EAAE,MAAM,SAAkB,GAAG,KAAK;AAC5D,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,SAAS,YAAY,YAAY,QAAQ,QAAQ,KAAK,CAAC;AACjG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe;AAAA,IACf,KAAK;AAAA,IACL,OAAO,GAAG,iCAAiC,MAAM,OAAO;AAAA,MACtD,wCAAwC,MAAM,SAAS;AAAA,MACvD,6CAA6C,MAAM,SAAS;AAAA,MAC5D,2CAA2C,MAAM,SAAS;AAAA,MAC1D,2CAA2C,MAAM;AAAA,IACnD,CAAC;AAAA,IACD,UAAU,MAAM;AAAA,GACjB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAjBC;AAmBL;AAEA,IAAO,+BAAQ;","names":[],"file":"datePickerIconButton.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/datePicker/datePickerIconButton.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type DataPickerIconButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {\n  size?: \"medium\" | \"small\";\n  edge?: \"start\" | \"end\";\n  ref?: Ref<HTMLButtonElement>;\n};\n\nexport function DatePickerIconButton(props: ParentProps<DataPickerIconButtonProps>): JSX.Element {\n  // `type` is a default: the caller's wins.\n  const merged = mergeProps({ size: \"medium\" as const, type: \"button\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"disabled\",\n    \"size\",\n    \"edge\",\n    \"ref\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n  ]);\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      onPointerDown={onPointerDown}\n      class={cn(\"smwb-date-picker__icon-button\", local.class, {\n        \"smwb-date-picker__icon-button--small\": local.size === \"small\",\n        \"smwb-date-picker__icon-button--edge-start\": local.edge === \"start\",\n        \"smwb-date-picker__icon-button--edge-end\": local.edge === \"end\",\n        \"smwb-date-picker__icon-button--disabled\": local.disabled,\n      })}\n      disabled={local.disabled}\n    >\n      {local.children}\n      <Show when={!local.disabled}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center />\n      </Show>\n    </button>\n  );\n}\n\nexport default DatePickerIconButton;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAQrB,SAAS,qBAAqB,OAA4D;AAE/F,QAAM,SAAS,WAAW,EAAE,MAAM,UAAmB,MAAM,SAAkB,GAAG,KAAK;AACrF,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,CAAC;AACD,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,QAAI,CAAC,MAAM,SAAU,gBAAe,SAAS,KAAK;AAAA,EACpD;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,eAAe;AAAA,IACf,OAAO,GAAG,iCAAiC,MAAM,OAAO;AAAA,MACtD,wCAAwC,MAAM,SAAS;AAAA,MACvD,6CAA6C,MAAM,SAAS;AAAA,MAC5D,2CAA2C,MAAM,SAAS;AAAA,MAC1D,2CAA2C,MAAM;AAAA,IACnD,CAAC;AAAA,IACD,UAAU,MAAM;AAAA,GACjB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU;AAAA,QAC3B,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,OAAO,EAAE;AAAA,MACtE,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,+BAAQ;","names":[],"file":"datePickerIconButton.jsx"}

package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx

@@ -2,6 +2,7 @@ import { Show, createEffect, createMemo, createSignal, onCleanup, splitProps } f
 import { Portal, isServer } from "solid-js/web";
 import { buildFloatingMiddleware, resolvePlacement } from "../../../utils/floating";
 import { createFloating } from "../../../primitives/createFloating";
+import { isTopOverlayLayer } from "../../../primitives/overlayLayer";
 import { ClickAwayListener } from "../../clickAwayListener";
 import { DataPickerHeader } from "../datePicker/dataPickerHeader";
 import { DataPickerDays } from "../datePicker/dataPickerDays";
@@ -121,6 +122,18 @@ function DateTimePicker(props) {
     if (raf !== void 0) cancelAnimationFrame(raf);
     if (timer !== void 0) clearTimeout(timer);
   });
+  createEffect(() => {
+    if (!shouldOpen()) return;
+    const onKeyDown = (event) => {
+      const panel = popupEl;
+      if (event.key !== "Escape" || !panel || !isTopOverlayLayer(panel)) return;
+      setIsOpen(false);
+      const active = document.activeElement;
+      if (!active || active === document.body || panel.contains(active)) anchorEl?.focus();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    onCleanup(() => document.removeEventListener("keydown", onKeyDown));
+  });
   const view = () => {
     switch (openView()) {
       case OpenView.months:

package/dist/source/components/inputs/dateTimePicker/dateTimePicker.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport type { TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { type WeekStart, getMonths, getYears, isValidDate, setMonth, setYear } from \"../datePicker/dateUtils\";\nimport { OpenView } from \"../datePicker/openView\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DateTimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  minDate?: Date | undefined;\n  maxDate?: Date | undefined;\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  locale?: string | undefined;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string | undefined;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DateTimePicker(props: DateTimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"showDaysOutsideMonth\",\n    \"disablePast\",\n    \"disableFuture\",\n    \"weekStartsOn\",\n    \"placement\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarAriaLabel\",\n    \"minDate\",\n    \"maxDate\",\n    \"isDateDisabled\",\n    \"locale\",\n    \"format\",\n    \"timeFormat\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(\n    isValidDate(initialValue) || isValidTimeDate(initialValue) ? initialValue : new Date()\n  );\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let popupEl: HTMLElement | undefined;\n\n  const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidDate(v) || isValidTimeDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (next: Date): void => {\n    setViewValue(next);\n  };\n\n  const onMonthLabelClick = (): void => {\n    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n  };\n\n  const onYearLabelClick = (): void => {\n    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n  };\n\n  const onMonthChange = (month: number): void => {\n    setViewValue(setMonth(viewValue(), month));\n    setOpenView(OpenView.days);\n  };\n\n  const onYearChange = (year: number): void => {\n    setViewValue(setYear(viewValue(), year));\n    setOpenView(OpenView.days);\n  };\n\n  const emitChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  const onDateChange = (_event?: Event, date?: Date): void => {\n    if (!date) return;\n    const v = value();\n    const timeSource = isValidTimeDate(v) ? v : viewValue();\n    emitChange(mergeDate(date, timeSource));\n  };\n\n  const onTimeChange = (timeDate: Date): void => {\n    const v = value();\n    const dateSource = isValidDate(v) ? v : viewValue();\n    emitChange(mergeTime(dateSource, timeDate));\n  };\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (popupEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const resolvedTimeFormat = (): string => {\n    if (local.timeFormat) return local.timeFormat;\n    if (local.format?.includes(\"HH:mm:ss\")) return \"HH:mm:ss\";\n    return DEFAULT_TIME_FORMAT;\n  };\n\n  const months = createMemo(() => getMonths(local.locale));\n  const years = getYears(new Date().getFullYear(), 100);\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const view = (): JSX.Element => {\n    switch (openView()) {\n      case OpenView.months:\n        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n      case OpenView.years:\n        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n      default:\n        return (\n          <DataPickerDays\n            viewValue={viewValue()}\n            value={value()}\n            showDaysOutsideMonth={local.showDaysOutsideMonth}\n            onChange={onDateChange}\n            disablePast={local.disablePast}\n            disableFuture={local.disableFuture}\n            weekStartsOn={weekStartsOn()}\n            minDate={local.minDate}\n            maxDate={local.maxDate}\n            isDateDisabled={local.isDateDisabled}\n            locale={local.locale}\n          />\n        );\n    }\n  };\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableCalendar={local.disableCalendar}\n        format={local.format}\n        calendarIcon={local.calendarIcon}\n        {...rest}\n      />\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (popupEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-date-time-picker\"\n              style={{\n                ...floating.floatingStyles(),\n                transition: `opacity ${FADE_MS}ms ease-in-out`,\n                opacity: shown() ? 1 : 0,\n              }}\n              data-testid=\"date-time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date and time\"}\n            >\n              <div class=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n                <DataPickerHeader\n                  viewValue={viewValue()}\n                  locale={local.locale}\n                  openView={openView()}\n                  onChange={onViewValueChange}\n                  onMonthLabelClick={onMonthLabelClick}\n                  onYearLabelClick={onYearLabelClick}\n                />\n                <div class=\"smwb-date-time-picker__content\">\n                  <div class=\"smwb-date-picker__body smwb-date-time-picker__body\">{view()}</div>\n                  <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />\n                </div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DateTimePicker;\n"],"mappings":"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","names":[],"file":"dateTimePicker.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/dateTimePicker/dateTimePicker.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport type { TextFieldProps } from \"../textField\";\nimport { DataPickerHeader } from \"../datePicker/dataPickerHeader\";\nimport { DataPickerDays } from \"../datePicker/dataPickerDays\";\nimport { DatePickerList } from \"../datePicker/datePickerList\";\nimport { type WeekStart, getMonths, getYears, isValidDate, setMonth, setYear } from \"../datePicker/dateUtils\";\nimport { OpenView } from \"../datePicker/openView\";\nimport { TimePickerColumns } from \"../timePicker/timePickerColumns\";\nimport { DEFAULT_TIME_FORMAT, isValidTimeDate, mergeDate, mergeTime } from \"../timePicker/timeUtils\";\nimport { DateTimePickerInput } from \"./dateTimePickerInput\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface DateTimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  showDaysOutsideMonth?: boolean | undefined;\n  disablePast?: boolean | undefined;\n  disableFuture?: boolean | undefined;\n  minDate?: Date | undefined;\n  maxDate?: Date | undefined;\n  isDateDisabled?: ((day: Date) => boolean) | undefined;\n  weekStartsOn?: WeekStart | undefined;\n  locale?: string | undefined;\n  /** Input format with tokens dd, MM, yyyy, HH, mm, ss, e.g. \"dd/MM/yyyy HH:mm\". */\n  format?: string | undefined;\n  /** Time portion format when using the clock columns. Defaults to \"HH:mm\". */\n  timeFormat?: string | undefined;\n  placement?: Placement | undefined;\n  disableCalendar?: boolean | undefined;\n  label?: string | undefined;\n  calendarAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  calendarIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: DateTimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function DateTimePicker(props: DateTimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"showDaysOutsideMonth\",\n    \"disablePast\",\n    \"disableFuture\",\n    \"weekStartsOn\",\n    \"placement\",\n    \"disabled\",\n    \"disableCalendar\",\n    \"calendarAriaLabel\",\n    \"minDate\",\n    \"maxDate\",\n    \"isDateDisabled\",\n    \"locale\",\n    \"format\",\n    \"timeFormat\",\n    \"calendarIcon\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n\n  const initialValue = value();\n  const [viewValue, setViewValue] = createSignal<Date>(\n    isValidDate(initialValue) || isValidTimeDate(initialValue) ? initialValue : new Date()\n  );\n  const [openView, setOpenView] = createSignal<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let popupEl: HTMLElement | undefined;\n\n  const resolved = (): ReturnType<typeof resolvePlacement> => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidDate(v) || isValidTimeDate(v) ? v : new Date());\n  });\n\n  const weekStartsOn = (): WeekStart => local.weekStartsOn ?? 1;\n\n  const onViewValueChange = (next: Date): void => {\n    setViewValue(next);\n  };\n\n  const onMonthLabelClick = (): void => {\n    setOpenView(openView() === OpenView.months ? OpenView.days : OpenView.months);\n  };\n\n  const onYearLabelClick = (): void => {\n    setOpenView(openView() === OpenView.years ? OpenView.days : OpenView.years);\n  };\n\n  const onMonthChange = (month: number): void => {\n    setViewValue(setMonth(viewValue(), month));\n    setOpenView(OpenView.days);\n  };\n\n  const onYearChange = (year: number): void => {\n    setViewValue(setYear(viewValue(), year));\n    setOpenView(OpenView.days);\n  };\n\n  const emitChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  const onDateChange = (_event?: Event, date?: Date): void => {\n    if (!date) return;\n    const v = value();\n    const timeSource = isValidTimeDate(v) ? v : viewValue();\n    emitChange(mergeDate(date, timeSource));\n  };\n\n  const onTimeChange = (timeDate: Date): void => {\n    const v = value();\n    const dateSource = isValidDate(v) ? v : viewValue();\n    emitChange(mergeTime(dateSource, timeDate));\n  };\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (popupEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const resolvedTimeFormat = (): string => {\n    if (local.timeFormat) return local.timeFormat;\n    if (local.format?.includes(\"HH:mm:ss\")) return \"HH:mm:ss\";\n    return DEFAULT_TIME_FORMAT;\n  };\n\n  const months = createMemo(() => getMonths(local.locale));\n  const years = getYears(new Date().getFullYear(), 100);\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableCalendar;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  // Escape closes the panel while it is the topmost overlay layer, so the next one\n  // reaches a Modal or Sheet around the picker. Focus left in the panel (or on\n  // <body> after a click there) goes back to the input rather than being lost.\n  createEffect(() => {\n    if (!shouldOpen()) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      const panel = popupEl;\n      if (event.key !== \"Escape\" || !panel || !isTopOverlayLayer(panel)) return;\n      setIsOpen(false);\n      const active = document.activeElement;\n      if (!active || active === document.body || panel.contains(active)) anchorEl?.focus();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  const view = (): JSX.Element => {\n    switch (openView()) {\n      case OpenView.months:\n        return <DatePickerList value={viewValue().getMonth()} items={months()} onChange={onMonthChange} />;\n      case OpenView.years:\n        return <DatePickerList value={viewValue().getFullYear()} items={years} onChange={onYearChange} />;\n      default:\n        return (\n          <DataPickerDays\n            viewValue={viewValue()}\n            value={value()}\n            showDaysOutsideMonth={local.showDaysOutsideMonth}\n            onChange={onDateChange}\n            disablePast={local.disablePast}\n            disableFuture={local.disableFuture}\n            weekStartsOn={weekStartsOn()}\n            minDate={local.minDate}\n            maxDate={local.maxDate}\n            isDateDisabled={local.isDateDisabled}\n            locale={local.locale}\n          />\n        );\n    }\n  };\n\n  return (\n    <>\n      <DateTimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableCalendar={local.disableCalendar}\n        format={local.format}\n        calendarIcon={local.calendarIcon}\n        {...rest}\n      />\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (popupEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-date-time-picker\"\n              style={{\n                ...floating.floatingStyles(),\n                transition: `opacity ${FADE_MS}ms ease-in-out`,\n                opacity: shown() ? 1 : 0,\n              }}\n              data-testid=\"date-time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.calendarAriaLabel ?? \"Choose date and time\"}\n            >\n              <div class=\"smwb-date-picker__inner smwb-date-time-picker__inner\">\n                <DataPickerHeader\n                  viewValue={viewValue()}\n                  locale={local.locale}\n                  openView={openView()}\n                  onChange={onViewValueChange}\n                  onMonthLabelClick={onMonthLabelClick}\n                  onYearLabelClick={onYearLabelClick}\n                />\n                <div class=\"smwb-date-time-picker__content\">\n                  <div class=\"smwb-date-picker__body smwb-date-time-picker__body\">{view()}</div>\n                  <TimePickerColumns value={viewValue()} format={resolvedTimeFormat()} onChange={onTimeChange} />\n                </div>\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default DateTimePicker;\n"],"mappings":"AAAA,SAAmB,MAAM,cAAc,YAAY,cAAc,WAAW,kBAAkB;AAC9F,SAAS,QAAQ,gBAAgB;AACjC,SAAS,yBAAyC,wBAAwB;AAC1E,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAyB,WAAW,UAAU,aAAa,UAAU,eAAe;AACpF,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,SAAS,qBAAqB,iBAAiB,WAAW,iBAAiB;AAC3E,SAAS,2BAA2B;AACpC,SAAS,iBAA2B;AA2BpC,MAAM,UAAU;AAET,SAAS,eAAe,OAAyC;AACtE,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,MAAyB,MAAM,UAAU,SAAY,SAAY,IAAI,KAAK,MAAM,KAAK;AAEnG,QAAM,eAAe,MAAM;AAC3B,QAAM,CAAC,WAAW,YAAY,IAAI;AAAA,IAChC,YAAY,YAAY,KAAK,gBAAgB,YAAY,IAAI,eAAe,oBAAI,KAAK;AAAA,EACvF;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,aAAuB,SAAS,IAAI;AACpE,QAAM,CAAC,QAAQ,SAAS,IAAI,aAAa,KAAK;AAE9C,MAAI;AACJ,MAAI;AAEJ,QAAM,WAAW,MAA2C,iBAAiB,MAAM,aAAa,cAAc;AAC9G,QAAM,WAAW,eAAe;AAAA,IAC9B,WAAW,MAAM,SAAS,EAAE;AAAA,IAC5B,YAAY,MAAM,wBAAwB,SAAS,CAAC;AAAA,EACtD,CAAC;AAED,eAAa,MAAM;AACjB,QAAI,MAAM,SAAU;AACpB,UAAM,IAAI,MAAM;AAChB,iBAAa,YAAY,CAAC,KAAK,gBAAgB,CAAC,IAAI,IAAI,oBAAI,KAAK,CAAC;AAAA,EACpE,CAAC;AAED,QAAM,eAAe,MAAiB,MAAM,gBAAgB;AAE5D,QAAM,oBAAoB,CAAC,SAAqB;AAC9C,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,oBAAoB,MAAY;AACpC,gBAAY,SAAS,MAAM,SAAS,SAAS,SAAS,OAAO,SAAS,MAAM;AAAA,EAC9E;AAEA,QAAM,mBAAmB,MAAY;AACnC,gBAAY,SAAS,MAAM,SAAS,QAAQ,SAAS,OAAO,SAAS,KAAK;AAAA,EAC5E;AAEA,QAAM,gBAAgB,CAAC,UAAwB;AAC7C,iBAAa,SAAS,UAAU,GAAG,KAAK,CAAC;AACzC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,SAAuB;AAC3C,iBAAa,QAAQ,UAAU,GAAG,IAAI,CAAC;AACvC,gBAAY,SAAS,IAAI;AAAA,EAC3B;AAEA,QAAM,aAAa,CAAC,SAAqB;AACvC,iBAAa,IAAI;AACjB,UAAM,WAAW,QAAW,MAAM,KAAK;AAAA,EACzC;AAEA,QAAM,eAAe,CAAC,QAAgB,SAAsB;AAC1D,QAAI,CAAC,KAAM;AACX,UAAM,IAAI,MAAM;AAChB,UAAM,aAAa,gBAAgB,CAAC,IAAI,IAAI,UAAU;AACtD,eAAW,UAAU,MAAM,UAAU,CAAC;AAAA,EACxC;AAEA,QAAM,eAAe,CAAC,aAAyB;AAC7C,UAAM,IAAI,MAAM;AAChB,UAAM,aAAa,YAAY,CAAC,IAAI,IAAI,UAAU;AAClD,eAAW,UAAU,YAAY,QAAQ,CAAC;AAAA,EAC5C;AAEA,QAAM,WAAW,MAAY;AAC3B,QAAI,CAAC,MAAM,SAAU,WAAU,CAAC,SAAS,CAAC,IAAI;AAAA,EAChD;AAEA,QAAM,cAAc,CAAC,UAAyC;AAC5D,UAAM,SAAS,MAAM;AACrB,QAAI,SAAS,SAAS,MAAM,KAAK,UAAU,SAAS,MAAM,EAAG;AAC7D,cAAU,KAAK;AAAA,EACjB;AAEA,QAAM,qBAAqB,MAAc;AACvC,QAAI,MAAM,WAAY,QAAO,MAAM;AACnC,QAAI,MAAM,QAAQ,SAAS,UAAU,EAAG,QAAO;AAC/C,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,WAAW,MAAM,UAAU,MAAM,MAAM,CAAC;AACvD,QAAM,QAAQ,UAAS,oBAAI,KAAK,GAAE,YAAY,GAAG,GAAG;AAEpD,QAAM,aAAa,MAAe,OAAO,KAAK,CAAC,MAAM,YAAY,CAAC,MAAM;AACxE,QAAM,CAAC,SAAS,UAAU,IAAI,aAAa,WAAW,CAAC;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,aAAa,KAAK;AAC5C,MAAI;AACJ,MAAI;AAEJ,eAAa,MAAM;AACjB,QAAI,WAAW,GAAG;AAChB,UAAI,UAAU,OAAW,cAAa,KAAK;AAC3C,iBAAW,IAAI;AACf,YAAM,sBAAsB,MAAM,SAAS,IAAI,CAAC;AAAA,IAClD,OAAO;AACL,eAAS,KAAK;AACd,UAAI,QAAQ,EAAG,SAAQ,WAAW,MAAM,WAAW,KAAK,GAAG,OAAO;AAAA,IACpE;AAAA,EACF,CAAC;AACD,YAAU,MAAM;AACd,QAAI,QAAQ,OAAW,sBAAqB,GAAG;AAC/C,QAAI,UAAU,OAAW,cAAa,KAAK;AAAA,EAC7C,CAAC;AAKD,eAAa,MAAM;AACjB,QAAI,CAAC,WAAW,EAAG;AACnB,UAAM,YAAY,CAAC,UAA+B;AAChD,YAAM,QAAQ;AACd,UAAI,MAAM,QAAQ,YAAY,CAAC,SAAS,CAAC,kBAAkB,KAAK,EAAG;AACnE,gBAAU,KAAK;AACf,YAAM,SAAS,SAAS;AACxB,UAAI,CAAC,UAAU,WAAW,SAAS,QAAQ,MAAM,SAAS,MAAM,EAAG,WAAU,MAAM;AAAA,IACrF;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,cAAU,MAAM,SAAS,oBAAoB,WAAW,SAAS,CAAC;AAAA,EACpE,CAAC;AAED,QAAM,OAAO,MAAmB;AAC9B,YAAQ,SAAS,GAAG;AAAA,MAClB,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,SAAS,GAAG,OAAO,OAAO,GAAG,UAAU,eAAe;AAAA,MAClG,KAAK,SAAS;AACZ,eAAO,CAAC,eAAe,OAAO,UAAU,EAAE,YAAY,GAAG,OAAO,OAAO,UAAU,cAAc;AAAA,MACjG;AACE,eACE,CAAC;AAAA,UACC,WAAW,UAAU;AAAA,UACrB,OAAO,MAAM;AAAA,UACb,sBAAsB,MAAM;AAAA,UAC5B,UAAU;AAAA,UACV,aAAa,MAAM;AAAA,UACnB,eAAe,MAAM;AAAA,UACrB,cAAc,aAAa;AAAA,UAC3B,SAAS,MAAM;AAAA,UACf,SAAS,MAAM;AAAA,UACf,gBAAgB,MAAM;AAAA,UACtB,QAAQ,MAAM;AAAA,QAChB;AAAA,IAEN;AAAA,EACF;AAEA,SACE,EAAE;AAAA,MACA,CAAC;AAAA,IACC,KAAK,UAAU,MAAM,KAAK,SAAS,cAAc,CAAC,OAAQ,WAAW,EAAkB;AAAA,IACvF,OAAO,MAAM;AAAA,IACb,UAAU,MAAM;AAAA,IAChB,QAAQ,MAAM;AAAA,IACd,UAAU;AAAA,IACV,UAAU,MAAM;AAAA,IAChB,iBAAiB,MAAM;AAAA,IACvB,QAAQ,MAAM;AAAA,IACd,cAAc,MAAM;AAAA,QAChB;AAAA,EACN,EAAE;AAAA,MACF,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,OAAO,OAAQ,WAAW,SAAY,SAAS,MAAe;AAAA,UAC7D,CAAC,kBAAkB,aAAa,aAAa;AAAA,YAC3C,CAAC;AAAA,IACC,KAAK,UAAU,SAAS,aAAa,CAAC,OAAQ,UAAU,EAAkB;AAAA,IAC1E,MAAM;AAAA,IACN,OAAO;AAAA,MACL,GAAG,SAAS,eAAe;AAAA,MAC3B,YAAY,WAAW,OAAO;AAAA,MAC9B,SAAS,MAAM,IAAI,IAAI;AAAA,IACzB;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,WAAW;AAAA,IACX,YAAY,MAAM,qBAAqB;AAAA,GACxC;AAAA,cACC,CAAC,IAAI,MAAM,uDAAuD;AAAA,gBAChE,CAAC;AAAA,IACC,WAAW,UAAU;AAAA,IACrB,QAAQ,MAAM;AAAA,IACd,UAAU,SAAS;AAAA,IACnB,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,EACpB,EAAE;AAAA,gBACF,CAAC,IAAI,MAAM,iCAAiC;AAAA,kBAC1C,CAAC,IAAI,MAAM,sDAAsD,KAAK,EAAE,EAAvE,IAA6E;AAAA,kBAC9E,CAAC,kBAAkB,OAAO,UAAU,GAAG,QAAQ,mBAAmB,GAAG,UAAU,cAAc,EAAE;AAAA,gBACjG,EAHC,IAGK;AAAA,cACR,EAbC,IAaK;AAAA,YACR,EA5BC,IA4BK;AAAA,UACR,EA9BC,kBA8BmB;AAAA,QACtB,EAhCC,OAgCQ;AAAA,MACX,EAlCC,KAkCM;AAAA,IACT;AAEJ;AAEA,IAAO,yBAAQ;","names":[],"file":"dateTimePicker.jsx"}

package/dist/source/components/inputs/floatingButton/floatingButton.jsx

@@ -4,14 +4,25 @@ import { mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Ripple } from "../../base/ripple";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function FloatingButton(props) {
   const merged = mergeProps(
     { variant: "default", size: "medium", color: "primary", type: "button" },
     props
   );
-  const [local, rest] = splitProps(merged, ["children", "class", "variant", "size", "color", "ref"]);
+  const [local, rest] = splitProps(merged, [
+    "children",
+    "class",
+    "variant",
+    "size",
+    "color",
+    "ref",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown"
+  ]);
   let rippleActions;
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     rippleActions?.onRipple(event);
   };
   return <button

package/dist/source/components/inputs/floatingButton/floatingButton.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function FloatingButton(props: ParentProps<FloatingButtonProps>): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"default\" as const, size: \"medium\" as const, color: \"primary\" as FloatingButtonColor, type: \"button\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\"children\", \"class\", \"variant\", \"size\", \"color\", \"ref\"]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-fab\", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </button>\n  );\n}\n\nexport default FloatingButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AAY7B,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,WAAoB,MAAM,UAAmB,OAAO,WAAkC,MAAM,SAAkB;AAAA,IACzH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ,CAAC,YAAY,SAAS,WAAW,QAAQ,SAAS,KAAK,CAAC;AAEjG,MAAI;AAEJ,QAAM,gBAAgB,CAAC,UAA8B;AACnD,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,QAAQ,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI,IAAI,kBAAkB,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,IACjH,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EARC;AAUL;AAEA,IAAO,yBAAQ;","names":[],"file":"floatingButton.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/floatingButton/floatingButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/floatingButton/floatingButton.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type FloatingButtonColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface FloatingButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"extended\" | \"default\";\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Semantic color. Resolves through the shared `--smui-*Color*` tokens. */\n  color?: FloatingButtonColor;\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function FloatingButton(props: ParentProps<FloatingButtonProps>): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"default\" as const, size: \"medium\" as const, color: \"primary\" as FloatingButtonColor, type: \"button\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"class\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"ref\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n  ]);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    rippleActions?.onRipple(event);\n  };\n\n  return (\n    <button\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-fab\", `smwb-${local.variant}`, `smwb-${local.size}`, `smwb-fab_color-${local.color}`, local.class)}\n      onPointerDown={onPointerDown}\n    >\n      {local.children}\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </button>\n  );\n}\n\nexport default FloatingButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAYrB,SAAS,eAAe,OAAsD;AACnF,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,WAAoB,MAAM,UAAmB,OAAO,WAAkC,MAAM,SAAkB;AAAA,IACzH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,CAAC;AAED,MAAI;AAEJ,QAAM,gBAAmE,CAAC,UAAU;AAClF,gBAAY,MAAM,eAAe,KAAK;AACtC,mBAAe,SAAS,KAAK;AAAA,EAC/B;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,YAAY,QAAQ,MAAM,OAAO,IAAI,QAAQ,MAAM,IAAI,IAAI,kBAAkB,MAAM,KAAK,IAAI,MAAM,KAAK;AAAA,IACjH,eAAe;AAAA,GAChB;AAAA,OACE,MAAM,SAAS;AAAA,MAChB,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,EAAE;AAAA,IAC/D,EARC;AAUL;AAEA,IAAO,yBAAQ;","names":[],"file":"floatingButton.jsx"}

package/dist/source/components/inputs/radioButton/radioButton.jsx

@@ -3,14 +3,17 @@ import "@smwb/ui-styles/less/components/radioButton/radioButton.entry.less";
 import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { TextFieldWrapper } from "../textField/textFieldWrapper";
+import { createHelperText } from "../../../primitives/createHelperText";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { callHandler } from "../../../primitives/callHandler";
 function RadioButton(props) {
   const merged = mergeProps({ size: "medium", color: "primary" }, props);
   const [local, args] = splitProps(merged, [
     "label",
     "disabled",
     "readOnly",
+    "onClick",
     "required",
     "name",
     "id",
@@ -20,19 +23,26 @@ function RadioButton(props) {
     "error",
     "onChange",
     "class",
-    "ref"
+    "aria-describedby",
+    "ref",
+    "data-testid"
   ]);
   const id = createId(local.id);
+  const helper = createHelperText(() => local.helperText, { describedBy: () => local["aria-describedby"] });
+  const handleClick = (event) => {
+    callHandler(local.onClick, event);
+    if (local.readOnly) event.preventDefault();
+  };
   const handleChange = (event) => {
     if (local.readOnly) {
-      event.preventDefault();
       return;
     }
     const value = props.value !== void 0 ? props.value : event.currentTarget.checked;
     local.onChange?.(event, value, props);
   };
   return <TextFieldWrapper
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     disabled={local.disabled}
     error={local.error}
     class="smwb-text-field-checkbox"
@@ -53,12 +63,14 @@ function RadioButton(props) {
     required={local.required}
     aria-invalid={local.error || void 0}
     aria-required={local.required || void 0}
+    aria-describedby={helper.describedBy()}
     class={cn("smwb-radio__input", local.class)}
     type="radio"
-    data-testid="radio"
+    data-testid={local["data-testid"] ?? "radio"}
     ref={mergeRefs(local.ref)}
     {...args}
     onChange={handleChange}
+    onClick={handleClick}
   />
           <span class={cn("smwb-radio__btn", { "smwb-disabled": local.disabled })} />
           <span class={cn("smwb-radio__bg", { "smwb-disabled": local.disabled })} />

package/dist/source/components/inputs/radioButton/radioButton.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/radioButton/radioButton.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps 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  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: JSX.Element;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: SelectionChangeEvent,\n    value: string | number | string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): 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    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"class\",\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    const value = props.value !== undefined ? (props.value as string | number | string[]) : event.currentTarget.checked;\n    local.onChange?.(event, value, 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(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n          \"smwb-disabled\": local.disabled,\n          \"smwb-readonly\": local.readOnly,\n        })}\n      >\n        <span class=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={local.name}\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            class={cn(\"smwb-radio__input\", local.class)}\n            type=\"radio\"\n            data-testid=\"radio\"\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n          <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-radio__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default RadioButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAwB7B,SAAS,YAAY,OAAsC;AAChE,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,UAAU,SAAa,MAAM,QAAuC,MAAM,cAAc;AAC5G,UAAM,WAAW,OAAO,OAAO,KAAK;AAAA,EACtC;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,cAAc,mBAAmB,MAAM,IAAI,IAAI,oBAAoB,MAAM,KAAK,IAAI;AAAA,MAC1F,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,sBAAsB;AAAA,UAChC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,OAAO,GAAG,qBAAqB,MAAM,KAAK;AAAA,IAC1C,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,UAC3E,CAAC,KAAK,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,QAC5E,EAlBC,KAkBM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,qBAAqB,MAAM,MAAM,EAA5C,KAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,MACT,EA7BC,MA6BO;AAAA,IACV,EApCC;AAsCL;AAEA,IAAO,sBAAQ;","names":[],"file":"radioButton.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/radioButton/radioButton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/radioButton/radioButton.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\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\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface RadioButtonProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the radio as it is: clicks on it or its label, Space and the arrow keys of its group do not check it, and\n   * `onChange` is not called. It stays focusable.\n   *\n   * The input does not tell assistive technology it is read-only: ARIA has no read-only state for a single radio,\n   * only for its group. Put `role=\"radiogroup\"`, a name and `aria-readonly=\"true\"` on the element around the radios.\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  checked?: boolean;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  helperText?: JSX.Element;\n  error?: boolean;\n  /** Unified handler: `(event, value, data)` where `value` is the radio's value (or checked state). */\n  onChange?: (\n    event: SelectionChangeEvent,\n    value: string | number | string[] | boolean | undefined,\n    data: RadioButtonProps\n  ) => void;\n  /** Test id of the `<input>`; `radio` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function RadioButton(props: RadioButtonProps): 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    \"onClick\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"class\",\n    \"aria-describedby\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a radio input: a click on it or on its label, Space, and the arrow\n  // keys in its group still check it. Cancel the click; the browser then puts the previous state\n  // back and re-checks the radio that was checked before.\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    if (local.readOnly) {\n      return;\n    }\n    const value = props.value !== undefined ? (props.value as string | number | string[]) : event.currentTarget.checked;\n    local.onChange?.(event, value, props);\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(\"smwb-radio\", `smwb-radio_size-${local.size}`, `smwb-radio_color-${local.color}`, {\n          \"smwb-disabled\": local.disabled,\n          \"smwb-readonly\": local.readOnly,\n        })}\n      >\n        <span class=\"smwb-radio__wrapper\">\n          <input\n            id={id}\n            name={local.name}\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            class={cn(\"smwb-radio__input\", local.class)}\n            type=\"radio\"\n            data-testid={local[\"data-testid\"] ?? \"radio\"}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span class={cn(\"smwb-radio__btn\", { \"smwb-disabled\": local.disabled })} />\n          <span class={cn(\"smwb-radio__bg\", { \"smwb-disabled\": local.disabled })} />\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-radio__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default RadioButton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AACpC,SAAS,mBAAmB;AAiCrB,SAAS,YAAY,OAAsC;AAChE,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAC5B,QAAM,SAAS,iBAAiB,MAAM,MAAM,YAAY,EAAE,aAAa,MAAM,MAAM,kBAAkB,EAAE,CAAC;AAKxG,QAAM,cAA8D,CAAC,UAAU;AAC7E,gBAAY,MAAM,SAAS,KAAK;AAChC,QAAI,MAAM,SAAU,OAAM,eAAe;AAAA,EAC3C;AAEA,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,UAAU,SAAa,MAAM,QAAuC,MAAM,cAAc;AAC5G,UAAM,WAAW,OAAO,OAAO,KAAK;AAAA,EACtC;AAEA,SACE,CAAC;AAAA,IACC,YAAY,OAAO,KAAK;AAAA,IACxB,cAAc,OAAO;AAAA,IACrB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,OAAO,GAAG,cAAc,mBAAmB,MAAM,IAAI,IAAI,oBAAoB,MAAM,KAAK,IAAI;AAAA,MAC1F,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,QACC,CAAC,KAAK,MAAM,sBAAsB;AAAA,UAChC,CAAC;AAAA,IACC,IAAI;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,kBAAkB,OAAO,YAAY;AAAA,IACrC,OAAO,GAAG,qBAAqB,MAAM,KAAK;AAAA,IAC1C,KAAK;AAAA,IACL,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE;AAAA,UACF,CAAC,KAAK,OAAO,GAAG,mBAAmB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,UAC3E,CAAC,KAAK,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,MAAM,SAAS,CAAC,GAAG,EAAE;AAAA,QAC5E,EApBC,KAoBM;AAAA,QACP,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,KAAK,MAAM,qBAAqB,MAAM,MAAM,EAA5C,KAAmD;AAAA,QACtD,EAFC,KAEM;AAAA,MACT,EA/BC,MA+BO;AAAA,IACV,EAvCC;AAyCL;AAEA,IAAO,sBAAQ;","names":[],"file":"radioButton.jsx"}

package/dist/source/components/inputs/rating/rating.jsx

@@ -1,9 +1,10 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/rating/rating.entry.less";
-import { For, Show, children, createSignal, mergeProps, splitProps } from "solid-js";
+import { For, Show, createSignal, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
+import { createHelperText, hasHelperText } from "../../../primitives/createHelperText";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Rating(props) {
   const merged = mergeProps(
@@ -34,10 +35,12 @@ function Rating(props) {
     "error",
     "helperText",
     "id",
+    "aria-label",
+    "aria-describedby",
     "onChange",
     "ref"
   ]);
-  const helperText = children(() => local.helperText);
+  const helper = createHelperText(() => local.helperText, { describedBy: () => local["aria-describedby"] });
   const [current, setCurrent] = createControllableState({
     value: () => local.value,
     defaultValue: local.defaultValue,
@@ -77,45 +80,71 @@ function Rating(props) {
       commit(local.max);
     }
   };
+  const onStarMouseMove = (event, starIndex) => {
+    if (!interactive()) return;
+    setHover(local.precision === 0.5 ? valueFromEvent(event, starIndex) : starIndex + 1);
+  };
   const filledIcon = () => local.icon ?? <Icon name="star" fill={1} size={local.size} />;
   const blankIcon = () => local.emptyIcon ?? <Icon name="star" size={local.size} />;
+  const valueText = () => `${current()} of ${local.max}`;
+  const label = () => {
+    const rated = local["aria-label"];
+    if (!local.readOnly) return rated || "Rating";
+    return rated ? `${rated} ${valueText()}` : valueText();
+  };
   return <span
-    ref={mergeRefs(local.ref)}
-    id={local.id}
     class={cn(
       "smwb-rating",
       { "smwb-rating_readonly": local.readOnly, "smwb-rating_disabled": local.disabled, "smwb-rating_error": local.error },
       local.color !== "primary" && `smwb-rating_color-${local.color}`,
       local.class
     )}
+  >
+      <span
+    ref={mergeRefs(local.ref)}
+    id={local.id}
+    class="smwb-rating__control"
     data-testid="rating"
-    role="img"
-    aria-label={`${current()} of ${local.max}`}
+    role={local.readOnly ? "img" : "slider"}
+    aria-label={label()}
+    aria-valuemin={local.readOnly ? void 0 : 0}
+    aria-valuemax={local.readOnly ? void 0 : local.max}
+    aria-valuenow={local.readOnly ? void 0 : current()}
+    aria-valuetext={local.readOnly ? void 0 : valueText()}
+    aria-disabled={!local.readOnly && local.disabled ? true : void 0}
+    aria-describedby={helper.describedBy()}
     tabindex={interactive() ? 0 : void 0}
-    onKeyDown={interactive() ? handleKeyDown : void 0}
+    onKeyDown={handleKeyDown}
   >
-      <For each={Array.from({ length: local.max }, (_, index) => index)}>
-        {(index) => {
+        <For each={Array.from({ length: local.max }, (_, index) => index)}>
+          {(index) => {
     const fillRatio = () => Math.max(0, Math.min(1, display() - index));
     return <span
       class="smwb-rating__item"
-      style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? "pointer" : "default" }}
+      style={{
+        width: `${local.size}px`,
+        height: `${local.size}px`,
+        cursor: interactive() ? "pointer" : "default"
+      }}
       onClick={(event) => handleSelect(event, index)}
-      onMouseMove={interactive() ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1) : void 0}
-      onMouseLeave={interactive() ? () => setHover(null) : void 0}
+      onMouseMove={(event) => onStarMouseMove(event, index)}
+      onMouseLeave={() => setHover(null)}
     >
-              <span class="smwb-rating__icon smwb-rating__icon_empty">{blankIcon()}</span>
-              <span class="smwb-rating__icon smwb-rating__icon_filled" style={{ width: `${fillRatio() * 100}%` }}>
-                {filledIcon()}
-              </span>
-            </span>;
+                <span class="smwb-rating__icon smwb-rating__icon_empty">{blankIcon()}</span>
+                <span class="smwb-rating__icon smwb-rating__icon_filled" style={{ width: `${fillRatio() * 100}%` }}>
+                  {filledIcon()}
+                </span>
+              </span>;
   }}
-      </For>
+        </For>
+      </span>
       <Show when={local.name}>
         <input type="hidden" name={local.name} value={current()} />
       </Show>
-      <Show when={helperText() != null && helperText() !== false}>
-        <span class={cn("smwb-rating__helper", local.error && "smwb-rating__helper_error")}>{helperText()}</span>
+      <Show when={hasHelperText(helper.text())}>
+        <span id={helper.id} class={cn("smwb-rating__helper", local.error && "smwb-rating__helper_error")}>
+          {helper.text()}
+        </span>
       </Show>
     </span>;
 }

package/dist/source/components/inputs/rating/rating.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/rating/rating.entry.less\";\nimport { type JSX, For, Show, children, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  class?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon. */\n  icon?: JSX.Element;\n  /** Empty icon. */\n  emptyIcon?: JSX.Element;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: JSX.Element;\n  id?: string;\n  onChange?: (value: number) => void;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      defaultValue: 0,\n      max: 5,\n      precision: 1 as 1 | 0.5,\n      readOnly: false,\n      disabled: false,\n      size: 28,\n      color: \"primary\" as RatingColor,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"max\",\n    \"precision\",\n    \"readOnly\",\n    \"disabled\",\n    \"size\",\n    \"icon\",\n    \"emptyIcon\",\n    \"name\",\n    \"color\",\n    \"error\",\n    \"helperText\",\n    \"id\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const helperText = children(() => local.helperText);\n\n  const [current, setCurrent] = createControllableState<number>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (next) => local.onChange?.(next),\n  });\n  const [hover, setHover] = createSignal<number | null>(null);\n\n  const display = (): number => hover() ?? current();\n  const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n  const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n    if (local.precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setCurrent(valueFromEvent(event, starIndex));\n  };\n\n  const commit = (next: number): void => {\n    setCurrent(Math.max(0, Math.min(local.max, next)));\n  };\n\n  const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!interactive()) return;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current() + local.precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current() - local.precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(local.max);\n    }\n  };\n\n  const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n  const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n  return (\n    <span\n      ref={mergeRefs(local.ref)}\n      id={local.id}\n      class={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n        local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n        local.class\n      )}\n      data-testid=\"rating\"\n      role=\"img\"\n      aria-label={`${current()} of ${local.max}`}\n      tabindex={interactive() ? 0 : undefined}\n      onKeyDown={interactive() ? handleKeyDown : undefined}\n    >\n      <For each={Array.from({ length: local.max }, (_, index) => index)}>\n        {(index) => {\n          const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n          return (\n            <span\n              class=\"smwb-rating__item\"\n              style={{ width: `${local.size}px`, height: `${local.size}px`, cursor: interactive() ? \"pointer\" : \"default\" }}\n              onClick={(event) => handleSelect(event, index)}\n              onMouseMove={\n                interactive()\n                  ? (event) => setHover(local.precision === 0.5 ? valueFromEvent(event, index) : index + 1)\n                  : undefined\n              }\n              onMouseLeave={interactive() ? () => setHover(null) : undefined}\n            >\n              <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n              <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() * 100}%` }}>\n                {filledIcon()}\n              </span>\n            </span>\n          );\n        }}\n      </For>\n      <Show when={local.name}>\n        <input type=\"hidden\" name={local.name} value={current()} />\n      </Show>\n      <Show when={helperText() != null && (helperText() as unknown) !== false}>\n        <span class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>{helperText()}</span>\n      </Show>\n    </span>\n  );\n}\n\nexport default Rating;\n"],"mappings":"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","names":[],"file":"rating.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/rating/rating.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/rating/rating.entry.less\";\nimport { type JSX, For, Show, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createHelperText, hasHelperText } from \"../../../primitives/createHelperText\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type RatingColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface RatingProps {\n  class?: string;\n  /** Controlled value. */\n  value?: number;\n  /** Uncontrolled initial value. */\n  defaultValue?: number;\n  /** Number of icons. */\n  max?: number;\n  /** Smallest selectable increment: 1 (whole) or 0.5 (half). */\n  precision?: 1 | 0.5;\n  readOnly?: boolean;\n  disabled?: boolean;\n  size?: number;\n  /** Filled icon. */\n  icon?: JSX.Element;\n  /** Empty icon. */\n  emptyIcon?: JSX.Element;\n  name?: string;\n  /** Color of the filled icons. */\n  color?: RatingColor;\n  /** Renders the control in an error state. */\n  error?: boolean;\n  /** Supporting text shown below the control. */\n  helperText?: JSX.Element;\n  /** Id of the control: the slider, or the image of a read-only rating. */\n  id?: string;\n  /**\n   * What is rated: the accessible name of the slider, \"Rating\" by default. A read-only rating is an image named by\n   * its value (\"3 of 5\"), after this label.\n   */\n  \"aria-label\"?: string;\n  /** Ids of more elements that describe the control, after its helper text. */\n  \"aria-describedby\"?: string;\n  onChange?: (value: number) => void;\n  /** The control: the slider, or the image of a read-only rating. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Rating(props: RatingProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      defaultValue: 0,\n      max: 5,\n      precision: 1 as 1 | 0.5,\n      readOnly: false,\n      disabled: false,\n      size: 28,\n      color: \"primary\" as RatingColor,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"max\",\n    \"precision\",\n    \"readOnly\",\n    \"disabled\",\n    \"size\",\n    \"icon\",\n    \"emptyIcon\",\n    \"name\",\n    \"color\",\n    \"error\",\n    \"helperText\",\n    \"id\",\n    \"aria-label\",\n    \"aria-describedby\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  // Reads the helper text once: markup passed as a prop is created anew on\n  // every read, and during hydration a copy the server never rendered has no DOM\n  // node. The rating draws any helper text it is given, so the read creates\n  // nothing that is not drawn.\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  const [current, setCurrent] = createControllableState<number>({\n    value: () => local.value,\n    defaultValue: local.defaultValue,\n    onChange: (next) => local.onChange?.(next),\n  });\n  const [hover, setHover] = createSignal<number | null>(null);\n\n  const display = (): number => hover() ?? current();\n  const interactive = (): boolean => !local.readOnly && !local.disabled;\n\n  const valueFromEvent = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): number => {\n    if (local.precision === 1) {\n      return starIndex + 1;\n    }\n    const { left, width } = event.currentTarget.getBoundingClientRect();\n    const isLeftHalf = event.clientX - left < width / 2;\n    return starIndex + (isLeftHalf ? 0.5 : 1);\n  };\n\n  const handleSelect = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setCurrent(valueFromEvent(event, starIndex));\n  };\n\n  const commit = (next: number): void => {\n    setCurrent(Math.max(0, Math.min(local.max, next)));\n  };\n\n  const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!interactive()) return;\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") {\n      event.preventDefault();\n      commit(current() + local.precision);\n    } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      commit(current() - local.precision);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n      commit(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n      commit(local.max);\n    }\n  };\n\n  // Solid binds event handlers once, so they are always attached and check\n  // `interactive()` themselves (handleKeyDown too): a rating can turn read-only,\n  // or back, after it renders. Leaving always clears the preview, so a rating\n  // that turns read-only while hovered does not keep it.\n  const onStarMouseMove = (event: MouseEvent & { currentTarget: HTMLSpanElement }, starIndex: number): void => {\n    if (!interactive()) return;\n    setHover(local.precision === 0.5 ? valueFromEvent(event, starIndex) : starIndex + 1);\n  };\n\n  const filledIcon = (): JSX.Element => local.icon ?? <Icon name=\"star\" fill={1} size={local.size} />;\n  const blankIcon = (): JSX.Element => local.emptyIcon ?? <Icon name=\"star\" size={local.size} />;\n\n  const valueText = (): string => `${current()} of ${local.max}`;\n  // The slider is named by what is rated. An image has no value, so its name\n  // carries the value too.\n  const label = (): string => {\n    const rated = local[\"aria-label\"];\n    if (!local.readOnly) return rated || \"Rating\";\n    return rated ? `${rated} ${valueText()}` : valueText();\n  };\n\n  // The control is a slider, or an image named by its value when the rating is\n  // read-only. The helper text stays outside it: the children of a slider or an\n  // image are presentational, so assistive technology would never read it.\n  return (\n    <span\n      class={cn(\n        \"smwb-rating\",\n        { \"smwb-rating_readonly\": local.readOnly, \"smwb-rating_disabled\": local.disabled, \"smwb-rating_error\": local.error },\n        local.color !== \"primary\" && `smwb-rating_color-${local.color}`,\n        local.class\n      )}\n    >\n      <span\n        ref={mergeRefs(local.ref)}\n        id={local.id}\n        class=\"smwb-rating__control\"\n        data-testid=\"rating\"\n        role={local.readOnly ? \"img\" : \"slider\"}\n        aria-label={label()}\n        aria-valuemin={local.readOnly ? undefined : 0}\n        aria-valuemax={local.readOnly ? undefined : local.max}\n        aria-valuenow={local.readOnly ? undefined : current()}\n        aria-valuetext={local.readOnly ? undefined : valueText()}\n        aria-disabled={!local.readOnly && local.disabled ? true : undefined}\n        aria-describedby={helper.describedBy()}\n        tabindex={interactive() ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n      >\n        <For each={Array.from({ length: local.max }, (_, index) => index)}>\n          {(index) => {\n            const fillRatio = (): number => Math.max(0, Math.min(1, display() - index));\n            return (\n              <span\n                class=\"smwb-rating__item\"\n                style={{\n                  width: `${local.size}px`,\n                  height: `${local.size}px`,\n                  cursor: interactive() ? \"pointer\" : \"default\",\n                }}\n                onClick={(event) => handleSelect(event, index)}\n                onMouseMove={(event) => onStarMouseMove(event, index)}\n                onMouseLeave={() => setHover(null)}\n              >\n                <span class=\"smwb-rating__icon smwb-rating__icon_empty\">{blankIcon()}</span>\n                <span class=\"smwb-rating__icon smwb-rating__icon_filled\" style={{ width: `${fillRatio() * 100}%` }}>\n                  {filledIcon()}\n                </span>\n              </span>\n            );\n          }}\n        </For>\n      </span>\n      <Show when={local.name}>\n        <input type=\"hidden\" name={local.name} value={current()} />\n      </Show>\n      <Show when={hasHelperText(helper.text())}>\n        <span id={helper.id} class={cn(\"smwb-rating__helper\", local.error && \"smwb-rating__helper_error\")}>\n          {helper.text()}\n        </span>\n      </Show>\n    </span>\n  );\n}\n\nexport default Rating;\n"],"mappings":"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","names":[],"file":"rating.jsx"}