@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -2,14 +2,23 @@ import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/textField/textField.entry.less";
 import { children, createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
 import cn from "clsx";
+import { callHandler } from "../../../primitives/callHandler";
 import { isFilled } from "./utils";
 import { TextFieldWrapper } from "./textFieldWrapper";
+import { createHelperText } from "../../../primitives/createHelperText";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { createId } from "../../../primitives/createId";
+function splitWrapperAttributes(props) {
+  const keys = Object.keys(props).filter((key) => key === "style" || key.startsWith("data-"));
+  const [wrapper, other] = splitProps(props, keys);
+  return [wrapper, other];
+}
 function TextField(props) {
   const merged = mergeProps({ variant: "outlined", size: "medium", type: "text" }, props);
   const [local, rest] = splitProps(merged, [
     "label",
     "helperText",
+    "aria-describedby",
     "variant",
     "size",
     "required",
@@ -20,6 +29,8 @@ function TextField(props) {
     "onChange",
     "onFocus",
     "onBlur",
+    // The field sets this on its input too; its own handler calls the caller's first.
+    "onInput",
     "error",
     "name",
     "type",
@@ -34,9 +45,12 @@ function TextField(props) {
     "inputmode",
     "ref"
   ]);
+  const [wrapperAttributes, inputAttributes] = splitWrapperAttributes(rest);
+  const generatedId = createId();
+  const inputId = () => local.id ?? generatedId;
   const [isFocused, setIsFocused] = createSignal(false);
   const [isFilledState, setIsFilledState] = createSignal(false);
-  const isControlled = local.value != null;
+  const isControlled = () => local.value != null;
   let inputEl;
   const checkDirty = (obj) => {
     const filled = isFilled(obj);
@@ -56,14 +70,15 @@ function TextField(props) {
     setIsFocused(true);
   };
   const onBlur = (event) => {
-    if (!isControlled) {
+    if (!isControlled()) {
       checkDirty({ value: event.currentTarget.value });
     }
     local.onBlur?.(event, props);
     setIsFocused(false);
   };
   const onInput = (event) => {
-    if (!isControlled) {
+    callHandler(local.onInput, event);
+    if (!isControlled()) {
       checkDirty({ value: event.currentTarget.value });
     }
     local.onChange?.(event, props);
@@ -81,12 +96,32 @@ function TextField(props) {
   });
   onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));
   createEffect(() => {
-    if (isControlled) {
+    if (isControlled()) {
       checkDirty({ value: local.value });
     }
   });
+  const readValues = () => ({
+    controlled: isControlled(),
+    value: local.value,
+    defaultValue: local.defaultValue ?? ""
+  });
+  const atStart = readValues();
+  const initialValue = atStart.controlled ? atStart.value : atStart.defaultValue;
+  createEffect((prev) => {
+    const next = readValues();
+    if (inputEl && next.controlled && next.value !== prev.value) {
+      inputEl.value = String(next.value);
+    } else if (inputEl && !next.controlled && !prev.controlled && next.defaultValue !== prev.defaultValue) {
+      inputEl.value = next.defaultValue;
+    }
+    return next;
+  }, atStart);
   const startAdornment = children(() => local.startAdornment);
   const endAdornment = children(() => local.endAdornment);
+  const helper = createHelperText(() => local.helperText, {
+    inline: () => local.inline,
+    describedBy: () => local["aria-describedby"]
+  });
   const inputClasses = () => cn(
     "smwb-text-field__input",
     (!local.label || local.inline) && "smwb-text-field__input--show-placeholder",
@@ -96,7 +131,8 @@ function TextField(props) {
   );
   return <TextFieldWrapper
     label={local.label}
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     variant={local.variant}
     disabled={local.disabled}
     class={cn(local.class, local.size !== "medium" && `smwb-text-field_size-${local.size}`)}
@@ -104,15 +140,16 @@ function TextField(props) {
     fullWidth={local.fullWidth}
     isFilledState={isFilledState()}
     isFocused={isFocused()}
-    for={local.id}
+    for={inputId()}
     shrink={Boolean(startAdornment())}
     onHolderMouseDown={onHolderMouseDown}
     startAdornment={startAdornment()}
     endAdornment={endAdornment()}
     inline={local.inline}
+    {...wrapperAttributes}
   >
       <input
-    {...rest}
+    {...inputAttributes}
     type={local.type}
     name={local.name}
     readonly={local.readOnly}
@@ -121,15 +158,16 @@ function TextField(props) {
     aria-required={local.required || void 0}
     placeholder={local.placeholder}
     disabled={local.disabled}
-    value={isControlled ? local.value : local.defaultValue ?? ""}
+    value={initialValue}
     class={inputClasses()}
     ref={mergeRefs(local.ref, (el) => inputEl = el)}
     onInput={onInput}
     onFocus={onFocus}
     onBlur={onBlur}
-    id={local.id}
+    id={inputId()}
     autocomplete={local.autocomplete}
     inputmode={local.inputmode}
+    aria-describedby={helper.describedBy()}
   />
     </TextFieldWrapper>;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/textField/textField.entry.less\";\nimport { type JSX, children, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      startAdornment() && \"smwb-text-field__input--adornment-start\",\n      endAdornment() && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(startAdornment())}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={startAdornment()}\n      endAdornment={endAdornment()}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"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","names":[],"file":"textField.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/textField/textField.entry.less\";\nimport { type JSX, children, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { createId } from \"../../../primitives/createId\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  /** Visible label; it points to the `<input>`, so it also names the field. Not drawn for an `inline` field. */\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  /**\n   * Class name(s) for the root wrapper `<div>`. `style` and `data-*` attributes go to the wrapper too (a `data-testid`\n   * replaces its default `text-field`); every other HTML attribute (`aria-*`, `autofocus`, `maxlength`, event handlers)\n   * goes to the `<input>`.\n   */\n  class?: string | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  /** Id of the `<input>`; the label points to it. Generated when not given. */\n  id?: string | undefined;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\ntype WrapperAttributes = Pick<JSX.HTMLAttributes<HTMLDivElement>, \"style\"> & Record<`data-${string}`, unknown>;\n\n// The props that decide the text of the input, read together.\ntype InputValues = { controlled: boolean; value: TextFieldProps[\"value\"]; defaultValue: string };\n\n// Splits off `style` and the `data-*` attributes, which go to the wrapper. Only\n// keys the caller gave are picked (a `style` key even when undefined would print\n// `style=\"\"` on the server); they are picked once, as splitProps picks them, and\n// their values stay reactive.\nfunction splitWrapperAttributes<T extends object>(props: T): [WrapperAttributes, T] {\n  const keys = Object.keys(props).filter((key) => key === \"style\" || key.startsWith(\"data-\")) as (keyof T)[];\n  const [wrapper, other] = splitProps(props, keys);\n  return [wrapper as WrapperAttributes, other as T];\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"aria-describedby\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    // The field sets this on its input too; its own handler calls the caller's first.\n    \"onInput\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n  // `class`, `style` and `data-*` go to the wrapper; every other attribute\n  // (aria-*, autofocus, maxlength, event handlers) belongs to the <input>.\n  const [wrapperAttributes, inputAttributes] = splitWrapperAttributes(rest);\n\n  // Without an id the label would point at nothing and leave the input unnamed.\n  // Generated once; a caller's id, which may come and go, takes precedence.\n  const generatedId = createId();\n  const inputId = (): string => local.id ?? generatedId;\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // Controlled while the caller passes a value (`null` counts as none, as in\n  // React DOM), checked on every change: a value passed after mount takes over.\n  const isControlled = (): boolean => local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled()) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    callHandler(local.onInput as JSX.EventHandlerUnion<HTMLInputElement, InputEvent> | undefined, event);\n    if (!isControlled()) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled()) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  // The input starts with the caller's value or `defaultValue`; later changes\n  // are written here as React DOM writes them. A caller's value is written when\n  // it changes, so also when it takes over, over whatever was typed meanwhile;\n  // when the caller stops passing one, the text stays. Uncontrolled, a changed\n  // `defaultValue` replaces the text. (A `value` binding compares with the text\n  // it wrote last: it would wipe the text a caller leaves, and skip a value that\n  // takes over when it equals that text.)\n  const readValues = (): InputValues => ({\n    controlled: isControlled(),\n    value: local.value,\n    defaultValue: local.defaultValue ?? \"\",\n  });\n  const atStart = readValues();\n  const initialValue = atStart.controlled ? atStart.value : atStart.defaultValue;\n  createEffect((prev: InputValues) => {\n    const next = readValues();\n    if (inputEl && next.controlled && next.value !== prev.value) {\n      inputEl.value = String(next.value);\n    } else if (inputEl && !next.controlled && !prev.controlled && next.defaultValue !== prev.defaultValue) {\n      inputEl.value = next.defaultValue;\n    }\n    return next;\n  }, atStart);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  const helper = createHelperText(() => local.helperText, {\n    inline: () => local.inline,\n    describedBy: () => local[\"aria-describedby\"],\n  });\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      startAdornment() && \"smwb-text-field__input--adornment-start\",\n      endAdornment() && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={helper.text()}\n      helperTextId={helper.id}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={inputId()}\n      shrink={Boolean(startAdornment())}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={startAdornment()}\n      endAdornment={endAdornment()}\n      inline={local.inline}\n      {...wrapperAttributes}\n    >\n      <input\n        {...inputAttributes}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={initialValue}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={inputId()}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n        aria-describedby={helper.describedBy()}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,UAAU,cAAc,cAAc,YAAY,SAAS,kBAAkB;AAChG,OAAO,QAAQ;AACf,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,iBAA2B;AACpC,SAAS,gBAAgB;AA8CzB,SAAS,uBAAyC,OAAkC;AAClF,QAAM,OAAO,OAAO,KAAK,KAAK,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,IAAI,WAAW,OAAO,CAAC;AAC1F,QAAM,CAAC,SAAS,KAAK,IAAI,WAAW,OAAO,IAAI;AAC/C,SAAO,CAAC,SAA8B,KAAU;AAClD;AAEO,SAAS,UAAU,OAAoC;AAC5D,QAAM,SAAS,WAAW,EAAE,SAAS,YAAqB,MAAM,UAAmB,MAAM,OAAO,GAAG,KAAK;AACxG,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;AAAA,IAEA;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;AAGD,QAAM,CAAC,mBAAmB,eAAe,IAAI,uBAAuB,IAAI;AAIxE,QAAM,cAAc,SAAS;AAC7B,QAAM,UAAU,MAAc,MAAM,MAAM;AAE1C,QAAM,CAAC,WAAW,YAAY,IAAI,aAAa,KAAK;AACpD,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAa,KAAK;AAI5D,QAAM,eAAe,MAAe,MAAM,SAAS;AACnD,MAAI;AAEJ,QAAM,aAAa,CAAC,QAA8C;AAChE,UAAM,SAAS,SAAS,GAAG;AAC3B,qBAAiB,CAAC,SAAU,SAAS,SAAS,OAAO,MAAO;AAAA,EAC9D;AAEA,QAAM,UAAU,CAAC,UAA4F;AAC3G,QAAI,MAAM,UAAU;AAClB,YAAM,gBAAgB;AACtB;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACtB,QAAI,OAAO,YAAY,YAAY;AACjC,MAAC,QAAsC,KAAK;AAAA,IAC9C,WAAW,MAAM,QAAQ,OAAO,GAAG;AACjC,MAAC,QAAQ,CAAC,EAA+C,QAAQ,CAAC,GAAG,KAAK;AAAA,IAC5E;AACA,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,SAAyD,CAAC,UAAU;AACxE,QAAI,CAAC,aAAa,GAAG;AACnB,iBAAW,EAAE,OAAO,MAAM,cAAc,MAAM,CAAC;AAAA,IACjD;AACA,UAAM,SAAS,OAAmB,KAAK;AACvC,iBAAa,KAAK;AAAA,EACpB;AAEA,QAAM,UAA0D,CAAC,UAAU;AACzE,gBAAY,MAAM,SAA4E,KAAK;AACnG,QAAI,CAAC,aAAa,GAAG;AACnB,iBAAW,EAAE,OAAO,MAAM,cAAc,MAAM,CAAC;AAAA,IACjD;AACA,UAAM,WAAW,OAAmB,KAAK;AAAA,EAC3C;AAEA,QAAM,oBAAkE,CAAC,UAAU;AACjF,QAAI,WAAW,MAAM,kBAAkB,MAAM,QAAQ;AACnD,YAAM,eAAe;AACrB,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF;AAEA,eAAa,MAAM;AACjB,QAAI,MAAM,YAAY,UAAU,GAAG;AACjC,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,CAAC;AAED,UAAQ,MAAM,WAAW,UAAU,EAAE,OAAO,QAAQ,MAAM,IAAI,IAAI,CAAC;AAEnE,eAAa,MAAM;AACjB,QAAI,aAAa,GAAG;AAClB,iBAAW,EAAE,OAAO,MAAM,MAAM,CAAC;AAAA,IACnC;AAAA,EACF,CAAC;AASD,QAAM,aAAa,OAAoB;AAAA,IACrC,YAAY,aAAa;AAAA,IACzB,OAAO,MAAM;AAAA,IACb,cAAc,MAAM,gBAAgB;AAAA,EACtC;AACA,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAQ,aAAa,QAAQ,QAAQ,QAAQ;AAClE,eAAa,CAAC,SAAsB;AAClC,UAAM,OAAO,WAAW;AACxB,QAAI,WAAW,KAAK,cAAc,KAAK,UAAU,KAAK,OAAO;AAC3D,cAAQ,QAAQ,OAAO,KAAK,KAAK;AAAA,IACnC,WAAW,WAAW,CAAC,KAAK,cAAc,CAAC,KAAK,cAAc,KAAK,iBAAiB,KAAK,cAAc;AACrG,cAAQ,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO;AAAA,EACT,GAAG,OAAO;AAIV,QAAM,iBAAiB,SAAS,MAAM,MAAM,cAAc;AAC1D,QAAM,eAAe,SAAS,MAAM,MAAM,YAAY;AACtD,QAAM,SAAS,iBAAiB,MAAM,MAAM,YAAY;AAAA,IACtD,QAAQ,MAAM,MAAM;AAAA,IACpB,aAAa,MAAM,MAAM,kBAAkB;AAAA,EAC7C,CAAC;AAED,QAAM,eAAe,MACnB;AAAA,IACE;AAAA,KACC,CAAC,MAAM,SAAS,MAAM,WAAW;AAAA,IAClC,eAAe,KAAK;AAAA,IACpB,aAAa,KAAK;AAAA,IAClB,MAAM,UAAU;AAAA,EAClB;AAEF,SACE,CAAC;AAAA,IACC,OAAO,MAAM;AAAA,IACb,YAAY,OAAO,KAAK;AAAA,IACxB,cAAc,OAAO;AAAA,IACrB,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,OAAO,GAAG,MAAM,OAAO,MAAM,SAAS,YAAY,wBAAwB,MAAM,IAAI,EAAE;AAAA,IACtF,OAAO,MAAM;AAAA,IACb,WAAW,MAAM;AAAA,IACjB,eAAe,cAAc;AAAA,IAC7B,WAAW,UAAU;AAAA,IACrB,KAAK,QAAQ;AAAA,IACb,QAAQ,QAAQ,eAAe,CAAC;AAAA,IAChC,mBAAmB;AAAA,IACnB,gBAAgB,eAAe;AAAA,IAC/B,cAAc,aAAa;AAAA,IAC3B,QAAQ,MAAM;AAAA,QACV;AAAA,GACL;AAAA,MACC,CAAC;AAAA,QACK;AAAA,IACJ,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM;AAAA,IACZ,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,aAAa,MAAM;AAAA,IACnB,UAAU,MAAM;AAAA,IAChB,OAAO;AAAA,IACP,OAAO,aAAa;AAAA,IACpB,KAAK,UAAU,MAAM,KAAK,CAAC,OAAQ,UAAU,EAAG;AAAA,IAChD,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,IAAI,QAAQ;AAAA,IACZ,cAAc,MAAM;AAAA,IACpB,WAAW,MAAM;AAAA,IACjB,kBAAkB,OAAO,YAAY;AAAA,EACvC,EAAE;AAAA,IACJ,EAxCC;AA0CL;AAEA,IAAO,oBAAQ;","names":[],"file":"textField.jsx"}

package/dist/source/components/inputs/textField/textFieldWrapper.jsx

@@ -1,10 +1,13 @@
 import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TextFieldAdornment } from "./textFieldAdornment";
+import { hasHelperText } from "../../../primitives/createHelperText";
+import { callHandler } from "../../../primitives/callHandler";
 function TextFieldWrapper(props) {
   const [local, rest] = splitProps(props, [
     "label",
     "helperText",
+    "helperTextId",
     "variant",
     "disabled",
     "class",
@@ -13,19 +16,24 @@ function TextFieldWrapper(props) {
     "isFilledState",
     "isFocused",
     "for",
+    "labelId",
     "shrink",
     "children",
     "onHolderMouseDown",
     "startAdornment",
     "endAdornment",
-    "inline"
+    "inline",
+    "data-testid"
   ]);
   const helper = children(() => local.inline ? void 0 : local.helperText);
   const startAdornment = children(() => local.startAdornment);
   const endAdornment = children(() => local.endAdornment);
-  const helperText = () => helper() ?? "\xA0";
+  const helperText = () => helper() === void 0 ? "\xA0" : helper();
   const isFilledVariant = () => local.variant === "filled";
   const isNotchedActive = () => !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);
+  const onHolderMouseDown = (event) => {
+    callHandler(local.onHolderMouseDown, event);
+  };
   return <div
     {...rest}
     class={cn(local.class, "smwb-text-field", {
@@ -36,17 +44,18 @@ function TextFieldWrapper(props) {
       "smwb-text-field--disabled": local.disabled,
       "smwb-text-field--full-width": local.fullWidth
     })}
-    data-testid="text-field"
+    data-testid={local["data-testid"] ?? "text-field"}
   >
       <Show when={!local.inline && local.label}>
         <label
+    id={local.labelId}
     class={cn("smwb-text-field__label", { "smwb-text-field__label--shrink": isNotchedActive() })}
-    for={local.for || ""}
+    for={local.for}
   >
           {local.label}
         </label>
       </Show>
-      <div class="smwb-text-field__input-holder" onMouseDown={local.onHolderMouseDown}>
+      <div class="smwb-text-field__input-holder" onMouseDown={onHolderMouseDown}>
         <Show when={startAdornment()}>
           <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position="start">
             {startAdornment()}
@@ -73,7 +82,12 @@ function TextFieldWrapper(props) {
       </div>
       <Show when={!local.inline && helperText()}>
         <p class="smwb-text-field__helper-line">
-          <span class="smwb-text-field__helper-text">{helperText()}</span>
+          <span
+    class="smwb-text-field__helper-text"
+    id={hasHelperText(helper(), local.inline) ? local.helperTextId : void 0}
+  >
+            {helperText()}
+          </span>
         </p>
       </Show>
     </div>;

package/dist/source/components/inputs/textField/textFieldWrapper.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  const helperText = (): JSX.Element => helper() ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"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","names":[],"file":"textFieldWrapper.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport { hasHelperText } from \"../../../primitives/createHelperText\";\nimport type { TextFieldVariant } from \"./types\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  /**\n   * Id of the helper text, for the control's `aria-describedby`. Only shown helper text takes it: not the blank line\n   * drawn without helper text, and an inline field shows none.\n   */\n  helperTextId?: string | undefined;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  /** Id of the control the label names. Without it, the label names nothing. */\n  for?: string | undefined;\n  /**\n   * Id of the `<label>`. A control that `for` cannot label (one that is not a\n   * form element, such as SelectField's `role=\"button\"`) points\n   * `aria-labelledby` at it.\n   */\n  labelId?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  /** Test id of the root `<div>`; `text-field` unless given. */\n  \"data-testid\"?: string | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"helperTextId\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"labelId\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  // Without helper text a blank line holds its place; `null` draws no line.\n  const helperText = (): JSX.Element => (helper() === undefined ? \" \" : helper());\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  // Reads the prop on each press: Solid binds event handlers once.\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onHolderMouseDown, event);\n  };\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid={local[\"data-testid\"] ?? \"text-field\"}\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          id={local.labelId}\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span\n            class=\"smwb-text-field__helper-text\"\n            id={hasHelperText(helper(), local.inline) ? local.helperTextId : undefined}\n          >\n            {helperText()}\n          </span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"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","names":[],"file":"textFieldWrapper.jsx"}

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

@@ -4,6 +4,7 @@ import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-j
 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 { TimePickerInput } from "./timePickerInput";
 import { TimePickerColumns } from "./timePickerColumns";
@@ -56,6 +57,18 @@ function TimePicker(props) {
     if (raf !== void 0) cancelAnimationFrame(raf);
     if (timer !== void 0) clearTimeout(timer);
   });
+  createEffect(() => {
+    if (!shouldOpen()) return;
+    const onKeyDown = (event) => {
+      const panel = clockEl;
+      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 onToggle = () => {
     if (!local.disabled) setIsOpen((prev) => !prev);
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/timePicker/timePicker.entry.less\";\nimport { type JSX, Show, createEffect, 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 { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => 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(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\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 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 (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\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        disableClock={local.disableClock}\n        format={local.format}\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) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"mappings":"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","names":[],"file":"timePicker.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/timePicker/timePicker.entry.less\";\nimport { type JSX, Show, createEffect, 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 { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => 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(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\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 = clockEl;\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 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 (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\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        disableClock={local.disableClock}\n        format={local.format}\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) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"mappings":"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","names":[],"file":"timePicker.jsx"}

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

@@ -3,13 +3,16 @@ import "@smwb/ui-styles/less/components/toggle/toggle.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 Toggle(props) {
   const merged = mergeProps({ size: "medium", color: "primary" }, props);
   const [local, args] = splitProps(merged, [
     "disabled",
     "readOnly",
+    "onClick",
     "required",
     "checked",
     "class",
@@ -21,18 +24,24 @@ function Toggle(props) {
     "helperText",
     "error",
     "onChange",
+    "aria-describedby",
     "ref"
   ]);
   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;
     }
     local.onChange?.(event, event.currentTarget.checked, props);
   };
   return <TextFieldWrapper
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     disabled={local.disabled}
     error={local.error}
     class="smwb-text-field-checkbox"
@@ -56,6 +65,7 @@ function Toggle(props) {
     aria-checked={local.checked}
     aria-invalid={local.error || void 0}
     aria-required={local.required || void 0}
+    aria-describedby={helper.describedBy()}
     role="switch"
     checked={local.checked}
     disabled={local.disabled}
@@ -63,7 +73,9 @@ function Toggle(props) {
     required={local.required}
     ref={mergeRefs(local.ref)}
     {...args}
+    aria-readonly={local.readOnly || void 0}
     onChange={handleChange}
+    onClick={handleClick}
   />
           <span class="smwb-toggle__track" />
           <span class="smwb-toggle__thumb" />

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/toggle/toggle.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 ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\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      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAoB7B,SAAS,OAAO,OAAiC;AACtD,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,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,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC,KAAK,OAAO,GAAG,wBAAwB,MAAM,kBAAkB,8BAA8B,MAAM,cAAc,EAAE,GAAG;AAAA,QACrH,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,MAAM,KAAK,IAAI,MAAM,qBAAqB;AAAA,aACxC,MAAM,MAAM;AAAA,UACf,EAFC,MAEO;AAAA,QACV,EAJC,KAIM;AAAA,QACP,CAAC;AAAA,IACC,OAAO,GAAG,eAAe,oBAAoB,MAAM,IAAI,IAAI,qBAAqB,MAAM,KAAK,IAAI,MAAM,OAAO;AAAA,MAC1G,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,UACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,cAAc,MAAM;AAAA,IACpB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,KAAK;AAAA,IACL,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,UACnC,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,QACrC,EAxBC,MAwBO;AAAA,MACV,EA/BC,KA+BM;AAAA,IACT,EAtCC;AAwCL;AAEA,IAAO,iBAAQ;","names":[],"file":"toggle.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/toggle/toggle.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 ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  /**\n   * Keeps the switch 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  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\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    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, 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      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            aria-describedby={helper.describedBy()}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            aria-readonly={local.readOnly || undefined}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\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;AAwBrB,SAAS,OAAO,OAAiC;AACtD,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;AAIxG,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,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;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,KAAK,OAAO,GAAG,wBAAwB,MAAM,kBAAkB,8BAA8B,MAAM,cAAc,EAAE,GAAG;AAAA,QACrH,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,MAAM,KAAK,IAAI,MAAM,qBAAqB;AAAA,aACxC,MAAM,MAAM;AAAA,UACf,EAFC,MAEO;AAAA,QACV,EAJC,KAIM;AAAA,QACP,CAAC;AAAA,IACC,OAAO,GAAG,eAAe,oBAAoB,MAAM,IAAI,IAAI,qBAAqB,MAAM,KAAK,IAAI,MAAM,OAAO;AAAA,MAC1G,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,UACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,cAAc,MAAM;AAAA,IACpB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,kBAAkB,OAAO,YAAY;AAAA,IACrC,KAAK;AAAA,IACL,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,eAAe,MAAM,YAAY;AAAA,IACjC,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE;AAAA,UACF,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,UACnC,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,QACrC,EA3BC,MA2BO;AAAA,MACV,EAlCC,KAkCM;AAAA,IACT,EA1CC;AA4CL;AAEA,IAAO,iBAAQ;","names":[],"file":"toggle.jsx"}

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

@@ -3,6 +3,7 @@ import "@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less";
 import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { Slider } from "../slider";
+import { createId } from "../../../primitives/createId";
 const formatReadout = (readout, value) => {
   if (typeof readout === "function") return readout(value);
   if (Array.isArray(value)) return `${value[0]} \u2013 ${value[1]}`;
@@ -20,11 +21,15 @@ function ValueSlider(props) {
   const endAdornment = children(() => local.endAdornment);
   const hasReadout = () => local.readout !== void 0 && local.readout !== false;
   const showHeader = () => local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;
+  const labelId = `${createId()}-label`;
+  const labelledBy = () => sliderProps["aria-labelledby"] || (local.label && !sliderProps["aria-label"] ? labelId : void 0);
   return <div class={cn("smwb-value-slider", local.class)}>
       <Show when={showHeader()}>
         <div class="smwb-value-slider__header">
           <Show when={local.label != null}>
-            <span class="smwb-value-slider__label">{local.label}</span>
+            <span id={labelId} class="smwb-value-slider__label">
+              {local.label}
+            </span>
           </Show>
           <span class="smwb-value-slider__spacer" />
           <Show when={hasReadout()}>
@@ -46,7 +51,7 @@ function ValueSlider(props) {
           </Show>
         </div>
       </Show>
-      <Slider {...sliderProps} />
+      <Slider {...sliderProps} aria-labelledby={labelledBy()} />
     </div>;
 }
 var valueSlider_default = ValueSlider;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less\";\nimport { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\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 endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,kBAAkB;AACrD,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,eAAe,SAAS,MAAM,MAAM,YAAY;AACtD,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,aAAa,KAAK,QAAQ,MAAM,WAAW;AAEpF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,aAAa,EAAE;AAAA,UAChB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less\";\nimport { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\nimport { createId } from \"../../../primitives/createId\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Label text, drawn in the header row beside the readout. It names the slider,\n   * as `Slider`'s label does; each thumb of a range adds its own word: with\n   * `label=\"Price\"` they read \"Price minimum\" and \"Price maximum\".\n   */\n  label?: string | undefined;\n  /**\n   * Accessible name of the slider. Replaces the name the header `label` gives\n   * it; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb\n   * of a range adds its own word, as with `label`.\n   */\n  \"aria-label\"?: string | undefined;\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\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 endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n  // The header label names the slider through Slider's aria-labelledby, which\n  // goes on its range input (each thumb of a range adds its own word). A\n  // caller's aria-label or aria-labelledby replaces it, as with Slider's label.\n  const labelId = `${createId()}-label`;\n  const labelledBy = (): string | undefined =>\n    sliderProps[\"aria-labelledby\"] || (local.label && !sliderProps[\"aria-label\"] ? labelId : undefined);\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span id={labelId} class=\"smwb-value-slider__label\">\n              {local.label}\n            </span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} aria-labelledby={labelledBy()} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,kBAAkB;AACrD,OAAO,QAAQ;AACf,SAAS,cAAkD;AAC3D,SAAS,gBAAgB;AA4BzB,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,eAAe,SAAS,MAAM,MAAM,YAAY;AACtD,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,aAAa,KAAK,QAAQ,MAAM,WAAW;AAIpF,QAAM,UAAU,GAAG,SAAS,CAAC;AAC7B,QAAM,aAAa,MACjB,YAAY,iBAAiB,MAAM,MAAM,SAAS,CAAC,YAAY,YAAY,IAAI,UAAU;AAE3F,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,IAAI,SAAS,MAAM,2BAA2B;AAAA,eACjD,MAAM,MAAM;AAAA,YACf,EAFC,KAEM;AAAA,UACT,EAJC,KAIM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,aAAa,EAAE;AAAA,UAChB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAxBC,IAwBK;AAAA,MACR,EA1BC,KA0BM;AAAA,MACP,CAAC,WAAW,aAAa,iBAAiB,WAAW,GAAG,EAAE;AAAA,IAC5D,EA7BC;AA+BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}

package/dist/source/components/layout/appLayout/appLayout.jsx

@@ -6,6 +6,7 @@ import { Icon } from "../../base/icon";
 import { createControllableState } from "../../../primitives/createControllableState";
 import { createId } from "../../../primitives/createId";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const len = (v) => typeof v === "number" ? `${v}px` : v;
 function AppLayout(props) {
   const merged = mergeProps(
@@ -35,7 +36,8 @@ function AppLayout(props) {
     "class",
     "style",
     "children",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const [collapsed, setCollapsed] = createControllableState({
     value: () => local.sidebarCollapsed,
@@ -47,14 +49,14 @@ function AppLayout(props) {
   const sidebarSlot = children(() => local.sidebar);
   const footerSlot = children(() => local.footer);
   const collapseToggleSlot = children(() => local.collapsible ? local.collapseToggle : void 0);
-  const style = () => ({
-    "--smui-app-sidebar-w": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),
-    ...typeof local.style === "object" && local.style ? local.style : {}
-  });
+  const style = () => mergeStyle(
+    { "--smui-app-sidebar-w": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth) },
+    local.style
+  );
   return <div
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="app-layout"
+    data-testid={local["data-testid"] ?? "app-layout"}
     class={cn(
       "smwb-app-layout",
       { "smwb-app-layout_sticky-header": local.stickyHeader, "smwb-app-layout_collapsed": collapsed() },