@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/source/components/feedBack/modal/modal.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/modal/modal.entry.less\";\nimport { type JSX, type ParentProps, Show, createEffect, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  let contentEl: HTMLDivElement | undefined;\n  let overlayEl: HTMLDivElement | undefined;\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({ active: () => local.open && transition.mounted(), container: () => contentEl });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape.\n      if (event.key === \"Escape\" && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={local.closeOnOutsideClick && local.onClose ? () => local.onClose?.() : undefined}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => (contentEl = el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/modal/modal.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/modal/modal.entry.less\";\nimport {\n  type JSX,\n  type ParentProps,\n  Show,\n  createEffect,\n  createSignal,\n  mergeProps,\n  on,\n  onCleanup,\n  splitProps,\n} from \"solid-js\";\nimport { Dynamic, Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { createFocusTrap } from \"../../../primitives/createFocusTrap\";\nimport { isTopOverlayLayer } from \"../../../primitives/overlayLayer\";\nimport { restoreFocus } from \"../../../primitives/restoreFocus\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ModalProps {\n  size?: \"small\" | \"medium\" | \"large\" | \"fullscreen\";\n  closeOnOutsideClick?: boolean;\n  onClose?: () => void;\n  open: boolean;\n  animation?: \"fade\" | \"scale\" | \"drop\";\n  class?: string;\n  backdrop?: \"blured\" | \"dark\" | \"transparent\" | \"darkBlured\";\n  asForm?: boolean;\n  disableAppearAnimation?: boolean;\n  /** ARIA role of the dialog. */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Close the modal when Escape is pressed. */\n  closeOnEsc?: boolean;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst OVERLAY_CLASSNAMES = {\n  appear: \"smwb-modal__overlay-appear\",\n  appearActive: \"smwb-modal__overlay-appear-active\",\n  appearDone: \"smwb-modal__overlay-appear-done\",\n  enter: \"smwb-modal__overlay-enter\",\n  enterActive: \"smwb-modal__overlay-enter-active\",\n  enterDone: \"smwb-modal__overlay-enter-done\",\n  exit: \"smwb-modal__overlay-exit\",\n  exitActive: \"smwb-modal__overlay-exit-active\",\n};\n\n/**\n * Whether `overlay` is the last open Modal overlay; a dialog stacked above it owns Tab. Fading-out\n * ones do not count. Not `isTopOverlayLayer`: menus, select dropdowns and pickers are overlay\n * layers too, and a select dropdown open inside a Modal must not switch the Modal's trap off.\n */\nfunction isTopModal(overlay: Element | null | undefined): boolean {\n  if (!overlay || typeof document === \"undefined\") return true;\n  const open = document.querySelectorAll(\".smwb-modal__overlay:not(.smwb-modal__overlay-exit)\");\n  return open[open.length - 1] === overlay;\n}\n\n/**\n * A modal dialog: portaled to `<body>`, animated, closed by Escape or a backdrop click.\n *\n * While open it traps Tab/Shift+Tab inside the dialog and moves the focus into it (the first tab\n * stop, else the dialog itself), unless a child has already focused itself. On close, and on\n * unmount while open, the focus goes back to the element that had it when the dialog opened —\n * unless the app has moved the focus elsewhere by then.\n * Of stacked dialogs only the topmost one handles Tab.\n */\nfunction ModalBase(props: ParentProps<ModalProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      animation: \"fade\" as const,\n      backdrop: \"dark\" as const,\n      size: \"large\" as const,\n      closeOnOutsideClick: true,\n      asForm: false,\n      disableAppearAnimation: false,\n      role: \"dialog\" as const,\n      closeOnEsc: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"children\",\n    \"onClose\",\n    \"open\",\n    \"class\",\n    \"animation\",\n    \"backdrop\",\n    \"size\",\n    \"closeOnOutsideClick\",\n    \"asForm\",\n    \"disableAppearAnimation\",\n    \"role\",\n    \"closeOnEsc\",\n    \"ref\",\n  ]);\n\n  // A signal, not a plain `let`: the dialog is built by a portal, so on a closed→open transition\n  // the trap's effect runs before the ref below has assigned anything. A plain variable is not\n  // tracked, so the trap bailed on the empty container and never armed itself again — Tab then\n  // walked focus out of an open dialog. Writing a signal re-runs the trap once the node lands.\n  const [contentEl, setContentEl] = createSignal<HTMLDivElement | undefined>();\n  let overlayEl: HTMLDivElement | undefined;\n\n  // Created before the transition and the trap: effects run in creation order, so the opener is read\n  // before the trap's `autoFocus` moves the focus and before a child's `onMount` focuses itself.\n  createEffect(\n    on(\n      () => local.open,\n      (open) => {\n        if (!open) return;\n        // The element focused when the dialog opens gets focus back when it closes or unmounts while open,\n        // unless the app has moved focus out of the dialog by then (see restoreFocus).\n        const opener = contentEl()?.contains(document.activeElement) ? null : document.activeElement;\n        onCleanup(() => restoreFocus(opener, contentEl()));\n      }\n    )\n  );\n\n  const transition = createCssTransition({\n    in: () => local.open,\n    timeout: { appear: 225, enter: 225, exit: 150 },\n    classNames: OVERLAY_CLASSNAMES,\n    appear: !local.disableAppearAnimation,\n  });\n\n  createFocusTrap({\n    active: () => local.open && transition.mounted(),\n    container: contentEl,\n    restoreFocus: false,\n    isTopmost: () => isTopModal(overlayEl),\n  });\n\n  createEffect(() => {\n    if (!local.open || !local.closeOnEsc || !local.onClose) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      // Only the topmost overlay layer reacts to Escape, and not to one handled inside\n      // it, e.g. by a menu closing on it.\n      if (event.key === \"Escape\" && !event.defaultPrevented && isTopOverlayLayer(overlayEl)) local.onClose?.();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n\n  // Always attached and checks the props itself. Solid binds event handlers\n  // once, and the portal builds the overlay in a tracked scope, so choosing the\n  // handler by these props there would rebuild the dialog, content included,\n  // whenever one of them changes.\n  const onOverlayClick = (): void => {\n    if (local.closeOnOutsideClick) local.onClose?.();\n  };\n\n  return (\n    <Show when={transition.mounted()}>\n      <Portal mount={(isServer ? undefined : document.body) as Node}>\n        <div\n          ref={(el) => (overlayEl = el)}\n          data-smwb-overlay-layer\n          class={cn(\"smwb-modal__overlay\", `smwb-${local.backdrop}`, `smwb-${local.size}`, transition.classes())}\n          onClick={onOverlayClick}\n        >\n          <Dynamic\n            component={local.asForm ? \"form\" : \"div\"}\n            {...rest}\n            ref={mergeRefs(local.ref, (el) => setContentEl(el as HTMLDivElement))}\n            class={cn(\"smwb-modal\", `smwb-${local.size}`, `smwb-${local.animation}`, local.class)}\n            onClick={(event: MouseEvent) => event.stopPropagation()}\n            tabindex={-1}\n            role={local.role}\n            aria-modal=\"true\"\n          >\n            {local.children}\n          </Dynamic>\n        </div>\n      </Portal>\n    </Show>\n  );\n}\n\nexport interface ModalSlotProps {\n  class?: string;\n}\n\nexport function Header(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__header\", props.class)}>{props.children}</div>;\n}\n\nexport function Content(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__content\", props.class)}>{props.children}</div>;\n}\n\nexport function Footer(props: ParentProps<ModalSlotProps>): JSX.Element {\n  return <div class={cn(\"smwb-modal__footer\", props.class)}>{props.children}</div>;\n}\n\nexport const Modal = Object.assign(ModalBase, { Footer, Header, Content });\n\nexport default Modal;\n"],"mappings":"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","names":[],"file":"modal.jsx"}

package/dist/source/components/feedBack/skeleton/skeleton.jsx

@@ -4,6 +4,7 @@ import { For, Show, mergeProps, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
 function Skeleton(props) {
   const merged = mergeProps(
@@ -20,7 +21,8 @@ function Skeleton(props) {
     "animationDelay",
     "component",
     "style",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const className = () => cn(
     "smwb-skeleton",
@@ -28,8 +30,7 @@ function Skeleton(props) {
     local.animation === false ? "smwb-skeleton_no-animation" : `smwb-skeleton_${local.animation}`,
     local.class
   );
-  const itemStyle = (index) => ({
-    ...typeof local.style === "object" && local.style ? local.style : {},
+  const itemStyle = (index) => mergeStyle(local.style, {
     width: toCssSize(local.width),
     height: toCssSize(local.height),
     ...local.animationDelay ? { "animation-delay": `${index * local.animationDelay}ms` } : {}
@@ -40,13 +41,19 @@ function Skeleton(props) {
       component={local.component}
       {...rest}
       ref={mergeRefs(local.ref)}
-      data-testid="skeleton"
+      data-testid={local["data-testid"] ?? "skeleton"}
       aria-hidden="true"
       class={className()}
       style={itemStyle(0)}
     />}
   >
-      <span ref={mergeRefs(local.ref)} class="smwb-skeleton__group" aria-hidden="true">
+      <span
+    {...rest}
+    ref={mergeRefs(local.ref)}
+    data-testid={local["data-testid"]}
+    class="smwb-skeleton__group"
+    aria-hidden="true"
+  >
         <For each={Array.from({ length: local.count }, (_, i) => i)}>
           {(index) => <Dynamic
     component={local.component}

package/dist/source/components/feedBack/skeleton/skeleton.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\nimport { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n  ref?: Ref<HTMLElement>;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"text\" as const, animation: \"pulse\" as const, count: 1, component: \"span\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"width\",\n    \"height\",\n    \"animation\",\n    \"count\",\n    \"animationDelay\",\n    \"component\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const className = (): string =>\n    cn(\n      \"smwb-skeleton\",\n      `smwb-skeleton_${local.variant}`,\n      local.animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${local.animation}`,\n      local.class\n    );\n\n  const itemStyle = (index: number): JSX.CSSProperties => ({\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n    width: toCssSize(local.width),\n    height: toCssSize(local.height),\n    ...(local.animationDelay ? { \"animation-delay\": `${index * local.animationDelay}ms` } : {}),\n  });\n\n  return (\n    <Show\n      when={local.count > 1}\n      fallback={\n        <Dynamic\n          component={local.component}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"skeleton\"\n          aria-hidden=\"true\"\n          class={className()}\n          style={itemStyle(0)}\n        />\n      }\n    >\n      <span ref={mergeRefs(local.ref)} class=\"smwb-skeleton__group\" aria-hidden=\"true\">\n        <For each={Array.from({ length: local.count }, (_, i) => i)}>\n          {(index) => (\n            <Dynamic\n              component={local.component}\n              data-testid=\"skeleton\"\n              aria-hidden=\"true\"\n              class={className()}\n              style={itemStyle(index)}\n            />\n          )}\n        </For>\n      </span>\n    </Show>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,MAAM,YAAY,kBAAkB;AAC5D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoBpC,MAAM,YAAY,CAAC,UAAiD,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAExG,SAAS,SAAS,OAAmC;AAC1D,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,QAAiB,WAAW,SAAkB,OAAO,GAAG,WAAW,OAAgB;AAAA,IAC9F;AAAA,EACF;AACA,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,EACF,CAAC;AAED,QAAM,YAAY,MAChB;AAAA,IACE;AAAA,IACA,iBAAiB,MAAM,OAAO;AAAA,IAC9B,MAAM,cAAc,QAAQ,+BAA+B,iBAAiB,MAAM,SAAS;AAAA,IAC3F,MAAM;AAAA,EACR;AAEF,QAAM,YAAY,CAAC,WAAsC;AAAA,IACvD,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACpE,OAAO,UAAU,MAAM,KAAK;AAAA,IAC5B,QAAQ,UAAU,MAAM,MAAM;AAAA,IAC9B,GAAI,MAAM,iBAAiB,EAAE,mBAAmB,GAAG,QAAQ,MAAM,cAAc,KAAK,IAAI,CAAC;AAAA,EAC3F;AAEA,SACE,CAAC;AAAA,IACC,MAAM,MAAM,QAAQ;AAAA,IACpB,UACE,CAAC;AAAA,MACC,WAAW,MAAM;AAAA,UACb;AAAA,MACJ,KAAK,UAAU,MAAM,GAAG;AAAA,MACxB,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU,CAAC;AAAA,IACpB;AAAA,GAEH;AAAA,MACC,CAAC,KAAK,KAAK,UAAU,MAAM,GAAG,GAAG,MAAM,uBAAuB,YAAY,OAAO;AAAA,QAC/E,CAAC,IAAI,MAAM,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG;AAAA,WAC1D,CAAC,UACA,CAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO,UAAU;AAAA,IACjB,OAAO,UAAU,KAAK;AAAA,EACxB,GACA;AAAA,QACJ,EAVC,IAUK;AAAA,MACR,EAZC,KAYM;AAAA,IACT,EA3BC;AA6BL;AAEA,IAAO,mBAAQ;","names":[],"file":"skeleton.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/skeleton/skeleton.entry.less\";\nimport { type JSX, For, Show, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface SkeletonProps extends JSX.HTMLAttributes<HTMLElement> {\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /**\n   * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\n   * other HTML attributes; `class` and `style` go on each placeholder.\n   */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Element of each placeholder. */\n  component?: \"span\" | \"div\";\n  /**\n   * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\n   * marks the group, and each placeholder keeps `skeleton`.\n   */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLElement>;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport function Skeleton(props: SkeletonProps): JSX.Element {\n  const merged = mergeProps(\n    { variant: \"text\" as const, animation: \"pulse\" as const, count: 1, component: \"span\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"width\",\n    \"height\",\n    \"animation\",\n    \"count\",\n    \"animationDelay\",\n    \"component\",\n    \"style\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const className = (): string =>\n    cn(\n      \"smwb-skeleton\",\n      `smwb-skeleton_${local.variant}`,\n      local.animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${local.animation}`,\n      local.class\n    );\n\n  const itemStyle = (index: number): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      width: toCssSize(local.width),\n      height: toCssSize(local.height),\n      ...(local.animationDelay ? { \"animation-delay\": `${index * local.animationDelay}ms` } : {}),\n    });\n\n  return (\n    <Show\n      when={local.count > 1}\n      fallback={\n        <Dynamic\n          component={local.component}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid={local[\"data-testid\"] ?? \"skeleton\"}\n          aria-hidden=\"true\"\n          class={className()}\n          style={itemStyle(0)}\n        />\n      }\n    >\n      <span\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid={local[\"data-testid\"]}\n        class=\"smwb-skeleton__group\"\n        aria-hidden=\"true\"\n      >\n        <For each={Array.from({ length: local.count }, (_, i) => i)}>\n          {(index) => (\n            <Dynamic\n              component={local.component}\n              data-testid=\"skeleton\"\n              aria-hidden=\"true\"\n              class={className()}\n              style={itemStyle(index)}\n            />\n          )}\n        </For>\n      </span>\n    </Show>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,MAAM,YAAY,kBAAkB;AAC5D,SAAS,eAAe;AACxB,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AA4B3B,MAAM,YAAY,CAAC,UAAiD,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAExG,SAAS,SAAS,OAAmC;AAC1D,QAAM,SAAS;AAAA,IACb,EAAE,SAAS,QAAiB,WAAW,SAAkB,OAAO,GAAG,WAAW,OAAgB;AAAA,IAC9F;AAAA,EACF;AACA,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,EACF,CAAC;AAED,QAAM,YAAY,MAChB;AAAA,IACE;AAAA,IACA,iBAAiB,MAAM,OAAO;AAAA,IAC9B,MAAM,cAAc,QAAQ,+BAA+B,iBAAiB,MAAM,SAAS;AAAA,IAC3F,MAAM;AAAA,EACR;AAEF,QAAM,YAAY,CAAC,UACjB,WAAW,MAAM,OAAO;AAAA,IACtB,OAAO,UAAU,MAAM,KAAK;AAAA,IAC5B,QAAQ,UAAU,MAAM,MAAM;AAAA,IAC9B,GAAI,MAAM,iBAAiB,EAAE,mBAAmB,GAAG,QAAQ,MAAM,cAAc,KAAK,IAAI,CAAC;AAAA,EAC3F,CAAC;AAEH,SACE,CAAC;AAAA,IACC,MAAM,MAAM,QAAQ;AAAA,IACpB,UACE,CAAC;AAAA,MACC,WAAW,MAAM;AAAA,UACb;AAAA,MACJ,KAAK,UAAU,MAAM,GAAG;AAAA,MACxB,aAAa,MAAM,aAAa,KAAK;AAAA,MACrC,YAAY;AAAA,MACZ,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU,CAAC;AAAA,IACpB;AAAA,GAEH;AAAA,MACC,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,aAAa,MAAM,aAAa;AAAA,IAChC,MAAM;AAAA,IACN,YAAY;AAAA,GACb;AAAA,QACC,CAAC,IAAI,MAAM,MAAM,KAAK,EAAE,QAAQ,MAAM,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG;AAAA,WAC1D,CAAC,UACA,CAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,OAAO,UAAU;AAAA,IACjB,OAAO,UAAU,KAAK;AAAA,EACxB,GACA;AAAA,QACJ,EAVC,IAUK;AAAA,MACR,EAlBC,KAkBM;AAAA,IACT,EAjCC;AAmCL;AAEA,IAAO,mBAAQ;","names":[],"file":"skeleton.jsx"}

package/dist/source/components/feedBack/snackbar/snackbar.jsx

@@ -66,9 +66,9 @@ function Snackbar(props) {
     ref={mergeRefs(local.ref)}
     class={cn("smwb-snackbar", local.class, `smwb-${local.variant}`, `smwb-${local.position}`, local.transitionClass)}
     onClick={local.onClick}
-    role="alert"
-    aria-live={local.variant === "danger" ? "assertive" : "polite"}
-    aria-atomic="true"
+    role={rest.role ?? "alert"}
+    aria-live={rest["aria-live"] ?? (local.variant === "danger" ? "assertive" : "polite")}
+    aria-atomic={rest["aria-atomic"] ?? "true"}
   >
       <div class="smwb-snackbar__body">{local.message}</div>
       <Show when={local.action != null}>

package/dist/source/components/feedBack/snackbar/snackbar.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/snackbar/snackbar.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/snackbar/snackbar.entry.less\";\nimport {\n  type JSX,\n  type ParentProps,\n  For,\n  Show,\n  createContext,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { Dynamic, Portal } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createSnackbarsPortal } from \"./useSnackbarsPortal\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport const variants = [\"dark\", \"light\", \"danger\", \"success\", \"warning\", \"info\"] as const;\nexport const positions = [\"top\", \"bottom\", \"top-left\", \"top-right\", \"bottom-right\", \"bottom-left\"] as const;\n\nexport type Variants = (typeof variants)[number];\nexport type Position = (typeof positions)[number];\n\nexport interface SnackbarsProviderProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: Variants;\n  position?: Position;\n  autoCloseTime?: number;\n  closeOnClick?: boolean;\n  autoClose?: boolean;\n  component?: string;\n}\n\ninterface Snack {\n  id: string;\n  message: JSX.Element;\n  variant?: Variants | undefined;\n  position?: Position | undefined;\n  autoClose?: boolean | undefined;\n  autoCloseTime?: number | undefined;\n  component?: string | undefined;\n  class?: string | undefined;\n}\n\nexport interface AddSnackbarOptions {\n  key?: string;\n  message: JSX.Element;\n  variant?: Variants | undefined;\n  position?: Position | undefined;\n  autoClose?: boolean | undefined;\n  autoCloseTime?: number | undefined;\n  component?: string | undefined;\n  class?: string;\n}\n\nexport type AddSnackbar = (options: AddSnackbarOptions) => string;\n\nexport interface SnackbarOptions {\n  addSnackbar: AddSnackbar;\n  clearAllSnackbars: () => void;\n  clearFirstSnackbar: () => void;\n  clearLastSnackbar: () => void;\n  clearByIdSnackbar: (id: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarOptions>({\n  addSnackbar: () => \"\",\n  clearAllSnackbars: () => undefined,\n  clearFirstSnackbar: () => undefined,\n  clearLastSnackbar: () => undefined,\n  clearByIdSnackbar: () => undefined,\n});\n\nlet snackCounter = 0;\n\nconst SNACKBAR_CLASSNAMES = {\n  appear: \"smwb-snackbar-enter\",\n  appearActive: \"smwb-snackbar-enter-active\",\n  appearDone: \"smwb-snackbar-enter-done\",\n  enter: \"smwb-snackbar-enter\",\n  enterActive: \"smwb-snackbar-enter-active\",\n  enterDone: \"smwb-snackbar-enter-done\",\n  exitActive: \"smwb-snackbar-exit-active\",\n};\n\nexport interface SnackbarProps extends JSX.HTMLAttributes<HTMLElement> {\n  message?: JSX.Element;\n  variant?: Variants;\n  position?: Position;\n  component?: string;\n  isAutoClose?: boolean;\n  autoCloseTime?: number;\n  onClose?: () => void;\n  /** Optional action node rendered after the message (e.g. an Undo button). */\n  action?: JSX.Element;\n  /** Enter-transition classes for the appear animation. */\n  transitionClass?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Snackbar(props: SnackbarProps): JSX.Element {\n  const merged = mergeProps({ variant: \"dark\" as Variants, position: \"top-right\" as Position, component: \"div\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"message\",\n    \"variant\",\n    \"position\",\n    \"onClick\",\n    \"component\",\n    \"isAutoClose\",\n    \"autoCloseTime\",\n    \"onClose\",\n    \"action\",\n    \"transitionClass\",\n    \"ref\",\n  ]);\n\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  onMount(() => {\n    if (local.onClose && local.isAutoClose && local.autoCloseTime) {\n      timer = setTimeout(() => local.onClose?.(), local.autoCloseTime);\n    }\n  });\n  onCleanup(() => {\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  return (\n    <Dynamic\n      component={local.component ?? \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-snackbar\", local.class, `smwb-${local.variant}`, `smwb-${local.position}`, local.transitionClass)}\n      onClick={local.onClick}\n      role=\"alert\"\n      aria-live={local.variant === \"danger\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n    >\n      <div class=\"smwb-snackbar__body\">{local.message}</div>\n      <Show when={local.action != null}>\n        <div class=\"smwb-snackbar__action\">{local.action}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nfunction AnimatedSnack(props: {\n  snack: Snack;\n  position: Position;\n  variant: Variants;\n  component: string;\n  autoClose: boolean;\n  autoCloseTime: number;\n  onRemove: (id: string) => void;\n  onClose: (id: string) => void;\n}): JSX.Element {\n  const transition = createCssTransition({\n    in: () => true,\n    appear: true,\n    timeout: { appear: 125, enter: 125, exit: 125 },\n    classNames: SNACKBAR_CLASSNAMES,\n  });\n  return (\n    <Snackbar\n      component={props.snack.component ?? props.component}\n      message={props.snack.message}\n      position={props.snack.position ?? props.position}\n      variant={props.snack.variant ?? props.variant}\n      class={props.snack.class}\n      transitionClass={transition.classes()}\n      isAutoClose={props.snack.autoClose ?? props.autoClose}\n      autoCloseTime={props.snack.autoCloseTime ?? props.autoCloseTime}\n      onClick={() => props.onRemove(props.snack.id)}\n      onClose={() => props.onClose(props.snack.id)}\n    />\n  );\n}\n\nexport function SnackbarProvider(props: ParentProps<SnackbarsProviderProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"top-right\" as Position,\n      variant: \"dark\" as Variants,\n      autoClose: true,\n      autoCloseTime: 5000,\n      closeOnClick: true,\n      component: \"div\",\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"position\",\n    \"variant\",\n    \"class\",\n    \"autoClose\",\n    \"autoCloseTime\",\n    \"closeOnClick\",\n    \"onClick\",\n    \"component\",\n    \"children\",\n  ]);\n\n  const [snacks, setSnacks] = createSignal<Snack[]>([]);\n  const portalRoot = createSnackbarsPortal();\n\n  const addSnackbar: AddSnackbar = (options) => {\n    const { key, ...optionRest } = options;\n    const id = key ?? `snack-${++snackCounter}`;\n    const snack: Snack = { id, ...optionRest };\n    setSnacks((prev) => {\n      const index = prev.findIndex((item) => item.id === id);\n      if (index === -1) return [...prev, snack];\n      const next = [...prev];\n      next[index] = snack;\n      return next;\n    });\n    return id;\n  };\n\n  const clearByIdSnackbar = (id: string): void => {\n    setSnacks((prev) => prev.filter((item) => item.id !== id));\n  };\n  const clearAllSnackbars = (): void => {\n    setSnacks([]);\n  };\n  const clearFirstSnackbar = (): void => {\n    setSnacks((prev) => prev.slice(1));\n  };\n  const clearLastSnackbar = (): void => {\n    setSnacks((prev) => prev.slice(0, -1));\n  };\n\n  const onRemove = (id: string): void => {\n    if (local.closeOnClick) clearByIdSnackbar(id);\n  };\n\n  const grouped = (): Array<[Position, Snack[]]> => {\n    const acc = {} as Record<Position, Snack[]>;\n    for (const snack of snacks()) {\n      const pos = snack.position ?? local.position;\n      (acc[pos] = acc[pos] ?? []).push(snack);\n    }\n    return Object.entries(acc) as Array<[Position, Snack[]]>;\n  };\n\n  return (\n    <SnackbarContext.Provider\n      value={{ addSnackbar, clearAllSnackbars, clearFirstSnackbar, clearLastSnackbar, clearByIdSnackbar }}\n    >\n      {local.children}\n      <Show when={portalRoot()}>\n        <Portal mount={portalRoot()!}>\n          <For each={grouped()}>\n            {([pos, list]) => (\n              <div class={cn(\"smwb-snackbars\", `smwb-${pos}`)} data-testid={`snackbars-${pos}`}>\n                <For each={list}>\n                  {(snack) => (\n                    <AnimatedSnack\n                      snack={snack}\n                      position={local.position}\n                      variant={local.variant}\n                      component={local.component}\n                      autoClose={local.autoClose}\n                      autoCloseTime={local.autoCloseTime}\n                      onRemove={onRemove}\n                      onClose={clearByIdSnackbar}\n                    />\n                  )}\n                </For>\n              </div>\n            )}\n          </For>\n        </Portal>\n      </Show>\n    </SnackbarContext.Provider>\n  );\n}\n\nexport function useSnackbar(): SnackbarOptions {\n  return useContext(SnackbarContext);\n}\n\nexport default SnackbarProvider;\n"],"mappings":"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","names":[],"file":"snackbar.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/snackbar/snackbar.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/snackbar/snackbar.entry.less\";\nimport {\n  type JSX,\n  type ParentProps,\n  For,\n  Show,\n  createContext,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  onMount,\n  splitProps,\n  useContext,\n} from \"solid-js\";\nimport { Dynamic, Portal } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createSnackbarsPortal } from \"./useSnackbarsPortal\";\nimport { createCssTransition } from \"../../../primitives/createCssTransition\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport const variants = [\"dark\", \"light\", \"danger\", \"success\", \"warning\", \"info\"] as const;\nexport const positions = [\"top\", \"bottom\", \"top-left\", \"top-right\", \"bottom-right\", \"bottom-left\"] as const;\n\nexport type Variants = (typeof variants)[number];\nexport type Position = (typeof positions)[number];\n\nexport interface SnackbarsProviderProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: Variants;\n  position?: Position;\n  autoCloseTime?: number;\n  closeOnClick?: boolean;\n  autoClose?: boolean;\n  component?: string;\n}\n\ninterface Snack {\n  id: string;\n  message: JSX.Element;\n  variant?: Variants | undefined;\n  position?: Position | undefined;\n  autoClose?: boolean | undefined;\n  autoCloseTime?: number | undefined;\n  component?: string | undefined;\n  class?: string | undefined;\n}\n\nexport interface AddSnackbarOptions {\n  key?: string;\n  message: JSX.Element;\n  variant?: Variants | undefined;\n  position?: Position | undefined;\n  autoClose?: boolean | undefined;\n  autoCloseTime?: number | undefined;\n  component?: string | undefined;\n  class?: string;\n}\n\nexport type AddSnackbar = (options: AddSnackbarOptions) => string;\n\nexport interface SnackbarOptions {\n  addSnackbar: AddSnackbar;\n  clearAllSnackbars: () => void;\n  clearFirstSnackbar: () => void;\n  clearLastSnackbar: () => void;\n  clearByIdSnackbar: (id: string) => void;\n}\n\nconst SnackbarContext = createContext<SnackbarOptions>({\n  addSnackbar: () => \"\",\n  clearAllSnackbars: () => undefined,\n  clearFirstSnackbar: () => undefined,\n  clearLastSnackbar: () => undefined,\n  clearByIdSnackbar: () => undefined,\n});\n\nlet snackCounter = 0;\n\nconst SNACKBAR_CLASSNAMES = {\n  appear: \"smwb-snackbar-enter\",\n  appearActive: \"smwb-snackbar-enter-active\",\n  appearDone: \"smwb-snackbar-enter-done\",\n  enter: \"smwb-snackbar-enter\",\n  enterActive: \"smwb-snackbar-enter-active\",\n  enterDone: \"smwb-snackbar-enter-done\",\n  exitActive: \"smwb-snackbar-exit-active\",\n};\n\nexport interface SnackbarProps extends JSX.HTMLAttributes<HTMLElement> {\n  message?: JSX.Element;\n  variant?: Variants;\n  position?: Position;\n  component?: string;\n  isAutoClose?: boolean;\n  autoCloseTime?: number;\n  onClose?: () => void;\n  /** Optional action node rendered after the message (e.g. an Undo button). */\n  action?: JSX.Element;\n  /** Enter-transition classes for the appear animation. */\n  transitionClass?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Snackbar(props: SnackbarProps): JSX.Element {\n  const merged = mergeProps({ variant: \"dark\" as Variants, position: \"top-right\" as Position, component: \"div\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"message\",\n    \"variant\",\n    \"position\",\n    \"onClick\",\n    \"component\",\n    \"isAutoClose\",\n    \"autoCloseTime\",\n    \"onClose\",\n    \"action\",\n    \"transitionClass\",\n    \"ref\",\n  ]);\n\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  onMount(() => {\n    if (local.onClose && local.isAutoClose && local.autoCloseTime) {\n      timer = setTimeout(() => local.onClose?.(), local.autoCloseTime);\n    }\n  });\n  onCleanup(() => {\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  return (\n    <Dynamic\n      component={local.component ?? \"div\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-snackbar\", local.class, `smwb-${local.variant}`, `smwb-${local.position}`, local.transitionClass)}\n      onClick={local.onClick}\n      // Defaults: the caller's own role, aria-live and aria-atomic win, and an\n      // explicit undefined keeps these.\n      role={rest.role ?? \"alert\"}\n      aria-live={rest[\"aria-live\"] ?? (local.variant === \"danger\" ? \"assertive\" : \"polite\")}\n      aria-atomic={rest[\"aria-atomic\"] ?? \"true\"}\n    >\n      <div class=\"smwb-snackbar__body\">{local.message}</div>\n      <Show when={local.action != null}>\n        <div class=\"smwb-snackbar__action\">{local.action}</div>\n      </Show>\n    </Dynamic>\n  );\n}\n\nfunction AnimatedSnack(props: {\n  snack: Snack;\n  position: Position;\n  variant: Variants;\n  component: string;\n  autoClose: boolean;\n  autoCloseTime: number;\n  onRemove: (id: string) => void;\n  onClose: (id: string) => void;\n}): JSX.Element {\n  const transition = createCssTransition({\n    in: () => true,\n    appear: true,\n    timeout: { appear: 125, enter: 125, exit: 125 },\n    classNames: SNACKBAR_CLASSNAMES,\n  });\n  return (\n    <Snackbar\n      component={props.snack.component ?? props.component}\n      message={props.snack.message}\n      position={props.snack.position ?? props.position}\n      variant={props.snack.variant ?? props.variant}\n      class={props.snack.class}\n      transitionClass={transition.classes()}\n      isAutoClose={props.snack.autoClose ?? props.autoClose}\n      autoCloseTime={props.snack.autoCloseTime ?? props.autoCloseTime}\n      onClick={() => props.onRemove(props.snack.id)}\n      onClose={() => props.onClose(props.snack.id)}\n    />\n  );\n}\n\nexport function SnackbarProvider(props: ParentProps<SnackbarsProviderProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      position: \"top-right\" as Position,\n      variant: \"dark\" as Variants,\n      autoClose: true,\n      autoCloseTime: 5000,\n      closeOnClick: true,\n      component: \"div\",\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"position\",\n    \"variant\",\n    \"class\",\n    \"autoClose\",\n    \"autoCloseTime\",\n    \"closeOnClick\",\n    \"onClick\",\n    \"component\",\n    \"children\",\n  ]);\n\n  const [snacks, setSnacks] = createSignal<Snack[]>([]);\n  const portalRoot = createSnackbarsPortal();\n\n  const addSnackbar: AddSnackbar = (options) => {\n    const { key, ...optionRest } = options;\n    const id = key ?? `snack-${++snackCounter}`;\n    const snack: Snack = { id, ...optionRest };\n    setSnacks((prev) => {\n      const index = prev.findIndex((item) => item.id === id);\n      if (index === -1) return [...prev, snack];\n      const next = [...prev];\n      next[index] = snack;\n      return next;\n    });\n    return id;\n  };\n\n  const clearByIdSnackbar = (id: string): void => {\n    setSnacks((prev) => prev.filter((item) => item.id !== id));\n  };\n  const clearAllSnackbars = (): void => {\n    setSnacks([]);\n  };\n  const clearFirstSnackbar = (): void => {\n    setSnacks((prev) => prev.slice(1));\n  };\n  const clearLastSnackbar = (): void => {\n    setSnacks((prev) => prev.slice(0, -1));\n  };\n\n  const onRemove = (id: string): void => {\n    if (local.closeOnClick) clearByIdSnackbar(id);\n  };\n\n  const grouped = (): Array<[Position, Snack[]]> => {\n    const acc = {} as Record<Position, Snack[]>;\n    for (const snack of snacks()) {\n      const pos = snack.position ?? local.position;\n      (acc[pos] = acc[pos] ?? []).push(snack);\n    }\n    return Object.entries(acc) as Array<[Position, Snack[]]>;\n  };\n\n  return (\n    <SnackbarContext.Provider\n      value={{ addSnackbar, clearAllSnackbars, clearFirstSnackbar, clearLastSnackbar, clearByIdSnackbar }}\n    >\n      {local.children}\n      <Show when={portalRoot()}>\n        <Portal mount={portalRoot()!}>\n          <For each={grouped()}>\n            {([pos, list]) => (\n              <div class={cn(\"smwb-snackbars\", `smwb-${pos}`)} data-testid={`snackbars-${pos}`}>\n                <For each={list}>\n                  {(snack) => (\n                    <AnimatedSnack\n                      snack={snack}\n                      position={local.position}\n                      variant={local.variant}\n                      component={local.component}\n                      autoClose={local.autoClose}\n                      autoCloseTime={local.autoCloseTime}\n                      onRemove={onRemove}\n                      onClose={clearByIdSnackbar}\n                    />\n                  )}\n                </For>\n              </div>\n            )}\n          </For>\n        </Portal>\n      </Show>\n    </SnackbarContext.Provider>\n  );\n}\n\nexport function useSnackbar(): SnackbarOptions {\n  return useContext(SnackbarContext);\n}\n\nexport default SnackbarProvider;\n"],"mappings":"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","names":[],"file":"snackbar.jsx"}

package/dist/source/components/feedBack/tooltip/tooltip.jsx

@@ -1,11 +1,19 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/tooltip/tooltip.entry.less";
-import { Show, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
+import { Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
 import cn from "clsx";
 import { flip, offset as offsetMiddleware, shift } from "@floating-ui/dom";
 import { resolvePlacement } from "../../../utils/floating";
 import { createFloating } from "../../../primitives/createFloating";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { createDismissOnEscape } from "../../../primitives/createDismissOnEscape";
+function hasFocusRing(element) {
+  try {
+    return element.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
 function Tooltip(props) {
   const merged = mergeProps(
     {
@@ -33,6 +41,8 @@ function Tooltip(props) {
   const [clickOpen, setClickOpen] = createSignal(false);
   let openTimer = null;
   let closeTimer = null;
+  let pointerInside = false;
+  let focusInside = false;
   const clearTimers = () => {
     if (openTimer !== null) {
       clearTimeout(openTimer);
@@ -60,6 +70,18 @@ function Tooltip(props) {
     }
     closeTimer = setTimeout(() => setHoverOpen(false), local.closeDelay);
   };
+  createDismissOnEscape(
+    () => local.trigger === "hover" && hoverOpen(),
+    () => {
+      clearTimers();
+      focusInside = false;
+      setHoverOpen(false);
+    }
+  );
+  createDismissOnEscape(
+    () => local.trigger === "click" && clickOpen(),
+    () => setClickOpen(false)
+  );
   const resolved = () => resolvePlacement(local.placement);
   const floating = createFloating({
     placement: () => resolved().placement,
@@ -71,17 +93,42 @@ function Tooltip(props) {
     ]
   });
   const isVisible = () => local.trigger === "manual" ? local.open === true : local.trigger === "click" ? clickOpen() : hoverOpen();
+  const [mounted, setMounted] = createSignal(false);
+  onMount(() => setMounted(true));
+  const onPointerEnter = () => {
+    pointerInside = true;
+    if (local.trigger === "hover") scheduleOpen();
+  };
+  const onPointerLeave = () => {
+    pointerInside = false;
+    if (local.trigger === "hover" && !focusInside) scheduleClose();
+  };
+  const onFocusIn = (event) => {
+    if (!event.currentTarget.contains(event.target)) return;
+    focusInside = hasFocusRing(event.target);
+    if (local.trigger === "hover" && focusInside) scheduleOpen();
+  };
+  const onFocusOut = (event) => {
+    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+    focusInside = false;
+    if (local.trigger === "hover" && !pointerInside) scheduleClose();
+  };
+  const onClick = () => {
+    if (local.trigger === "click") setClickOpen((prev) => !prev);
+  };
   return <div class="smwb-tooltip__wrapper" role="tooltip" ref={mergeRefs(local.ref)}>
       <div
     class="smwb-tooltip__ref"
     ref={floating.setReference}
-    onPointerEnter={local.trigger === "hover" ? scheduleOpen : void 0}
-    onPointerLeave={local.trigger === "hover" ? scheduleClose : void 0}
-    onClick={local.trigger === "click" ? () => setClickOpen((prev) => !prev) : void 0}
+    onPointerEnter={onPointerEnter}
+    onPointerLeave={onPointerLeave}
+    onFocusIn={onFocusIn}
+    onFocusOut={onFocusOut}
+    onClick={onClick}
   >
         {local.children}
       </div>
-      <Show when={isVisible()}>
+      <Show when={mounted() && isVisible()}>
         <div ref={floating.setFloating} class={cn("smwb-tooltip", local.class)} style={floating.floatingStyles()}>
           {local.message}
         </div>

package/dist/source/components/feedBack/tooltip/tooltip.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tooltip/tooltip.entry.less\";\nimport { type JSX, type ParentProps, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { flip, offset as offsetMiddleware, shift } from \"@floating-ui/dom\";\nimport { type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  class?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  message: JSX.Element;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /** hover (default): show on pointer enter; click: toggle; manual: use open only. */\n  trigger?: TooltipTrigger;\n  openDelay?: number;\n  closeDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Tooltip(props: ParentProps<TooltipProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      placement: \"top\" as Placement,\n      offset: { offsetX: 0, offsetY: 0 },\n      trigger: \"hover\" as TooltipTrigger,\n      openDelay: 0,\n      closeDelay: 0,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"placement\",\n    \"offset\",\n    \"message\",\n    \"open\",\n    \"trigger\",\n    \"openDelay\",\n    \"closeDelay\",\n    \"ref\",\n  ]);\n\n  const [hoverOpen, setHoverOpen] = createSignal(false);\n  const [clickOpen, setClickOpen] = createSignal(false);\n  let openTimer: ReturnType<typeof setTimeout> | null = null;\n  let closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  const clearTimers = (): void => {\n    if (openTimer !== null) {\n      clearTimeout(openTimer);\n      openTimer = null;\n    }\n    if (closeTimer !== null) {\n      clearTimeout(closeTimer);\n      closeTimer = null;\n    }\n  };\n  onCleanup(clearTimers);\n\n  const scheduleOpen = (): void => {\n    clearTimers();\n    if (local.openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimer = setTimeout(() => setHoverOpen(true), local.openDelay);\n  };\n  const scheduleClose = (): void => {\n    clearTimers();\n    if (local.closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimer = setTimeout(() => setHoverOpen(false), local.closeDelay);\n  };\n\n  const resolved = () => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => [\n      offsetMiddleware({ mainAxis: local.offset?.offsetY ?? 0, crossAxis: local.offset?.offsetX ?? 0 }),\n      // A fixed placement turns to the other side, and slides along it, when the\n      // viewport has no room for it.\n      ...(resolved().autoMiddleware ? [resolved().autoMiddleware] : [flip(), shift({ padding: 8 })]),\n    ],\n  });\n\n  const isVisible = (): boolean =>\n    local.trigger === \"manual\" ? local.open === true : local.trigger === \"click\" ? clickOpen() : hoverOpen();\n\n  return (\n    <div class=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={mergeRefs(local.ref)}>\n      <div\n        class=\"smwb-tooltip__ref\"\n        ref={floating.setReference}\n        onPointerEnter={local.trigger === \"hover\" ? scheduleOpen : undefined}\n        onPointerLeave={local.trigger === \"hover\" ? scheduleClose : undefined}\n        onClick={local.trigger === \"click\" ? () => setClickOpen((prev) => !prev) : undefined}\n      >\n        {local.children}\n      </div>\n      <Show when={isVisible()}>\n        <div ref={floating.setFloating} class={cn(\"smwb-tooltip\", local.class)} style={floating.floatingStyles()}>\n          {local.message}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Tooltip;\n"],"mappings":"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","names":[],"file":"tooltip.jsx"}
+{"version":3,"sources":["../../../../../src/components/feedBack/tooltip/tooltip.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/tooltip/tooltip.entry.less\";\nimport { type JSX, type ParentProps, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { flip, offset as offsetMiddleware, shift } from \"@floating-ui/dom\";\nimport { type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { createDismissOnEscape } from \"../../../primitives/createDismissOnEscape\";\n\nexport type TooltipTrigger = \"hover\" | \"click\" | \"manual\";\n\nexport interface TooltipProps {\n  class?: string;\n  offset?: {\n    offsetX?: number;\n    offsetY?: number;\n  };\n  /** What the tip says: text or markup. */\n  message: JSX.Element;\n  placement?: Placement;\n  /** Controls tooltip visibility when trigger is manual. */\n  open?: boolean;\n  /**\n   * What shows the tooltip. `hover` (default): the pointer over the target or keyboard focus\n   * in it, until both have left. Keyboard focus is focus with a focus ring (`:focus-visible`),\n   * not the focus a mouse press gives a button. `click`: a click on the target shows or hides\n   * it. `manual`: `open` alone. Escape hides a `hover` or `click` tooltip.\n   */\n  trigger?: TooltipTrigger;\n  /** Milliseconds from the pointer entering the target, or keyboard focus moving into it, until a hover tooltip shows. */\n  openDelay?: number;\n  /** Milliseconds from the pointer and keyboard focus both leaving the target until a hover tooltip hides. */\n  closeDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * Whether focus on `element` draws a focus ring (`:focus-visible`): focus from the keyboard,\n * not the focus a mouse press gives a button. An engine without the selector counts any focus.\n */\nfunction hasFocusRing(element: Element): boolean {\n  try {\n    return element.matches(\":focus-visible\");\n  } catch {\n    return true;\n  }\n}\n\nexport function Tooltip(props: ParentProps<TooltipProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      placement: \"top\" as Placement,\n      offset: { offsetX: 0, offsetY: 0 },\n      trigger: \"hover\" as TooltipTrigger,\n      openDelay: 0,\n      closeDelay: 0,\n    },\n    props\n  );\n  const [local] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"placement\",\n    \"offset\",\n    \"message\",\n    \"open\",\n    \"trigger\",\n    \"openDelay\",\n    \"closeDelay\",\n    \"ref\",\n  ]);\n\n  const [hoverOpen, setHoverOpen] = createSignal(false);\n  const [clickOpen, setClickOpen] = createSignal(false);\n  let openTimer: ReturnType<typeof setTimeout> | null = null;\n  let closeTimer: ReturnType<typeof setTimeout> | null = null;\n  // The pointer over the target and keyboard focus in it each keep a hover tooltip shown.\n  let pointerInside = false;\n  let focusInside = false;\n\n  const clearTimers = (): void => {\n    if (openTimer !== null) {\n      clearTimeout(openTimer);\n      openTimer = null;\n    }\n    if (closeTimer !== null) {\n      clearTimeout(closeTimer);\n      closeTimer = null;\n    }\n  };\n  onCleanup(clearTimers);\n\n  const scheduleOpen = (): void => {\n    clearTimers();\n    if (local.openDelay <= 0) {\n      setHoverOpen(true);\n      return;\n    }\n    openTimer = setTimeout(() => setHoverOpen(true), local.openDelay);\n  };\n  const scheduleClose = (): void => {\n    clearTimers();\n    if (local.closeDelay <= 0) {\n      setHoverOpen(false);\n      return;\n    }\n    closeTimer = setTimeout(() => setHoverOpen(false), local.closeDelay);\n  };\n\n  // Escape hides a tooltip shown on hover or focus wherever focus is (WCAG 1.4.13), and the\n  // window, panel, Modal or Sheet around it stays open until the next press. Focus left in\n  // the target no longer keeps it: the pointer alone shows and hides it until focus moves.\n  createDismissOnEscape(\n    () => local.trigger === \"hover\" && hoverOpen(),\n    () => {\n      clearTimers();\n      focusInside = false;\n      setHoverOpen(false);\n    }\n  );\n  // A click tooltip hides on Escape the same way.\n  createDismissOnEscape(\n    () => local.trigger === \"click\" && clickOpen(),\n    () => setClickOpen(false)\n  );\n\n  const resolved = () => resolvePlacement(local.placement);\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => [\n      offsetMiddleware({ mainAxis: local.offset?.offsetY ?? 0, crossAxis: local.offset?.offsetX ?? 0 }),\n      // A fixed placement turns to the other side, and slides along it, when the\n      // viewport has no room for it.\n      ...(resolved().autoMiddleware ? [resolved().autoMiddleware] : [flip(), shift({ padding: 8 })]),\n    ],\n  });\n\n  const isVisible = (): boolean =>\n    local.trigger === \"manual\" ? local.open === true : local.trigger === \"click\" ? clickOpen() : hoverOpen();\n\n  // The tip mounts in the browser, after hydration, as in React: its place is\n  // measured there, and a tip drawn by the server would cover its trigger.\n  const [mounted, setMounted] = createSignal(false);\n  onMount(() => setMounted(true));\n\n  // Solid binds event handlers once, so they are always attached and check\n  // `trigger` themselves: it can change after the tooltip renders.\n  const onPointerEnter = (): void => {\n    pointerInside = true;\n    if (local.trigger === \"hover\") scheduleOpen();\n  };\n  const onPointerLeave = (): void => {\n    pointerInside = false;\n    if (local.trigger === \"hover\" && !focusInside) scheduleClose();\n  };\n  // focusin/focusout, as Solid's onFocus/onBlur don't bubble from the controls inside. Focus\n  // without a focus ring doesn't count: the focus a mouse press gives a button would keep the\n  // tooltip shown after the pointer leaves.\n  const onFocusIn: JSX.EventHandler<HTMLDivElement, FocusEvent> = (event) => {\n    // Focus in a portal the target renders (a menu, a picker panel) reaches here through the\n    // portal's host, but it is not in the target.\n    if (!event.currentTarget.contains(event.target)) return;\n    focusInside = hasFocusRing(event.target);\n    if (local.trigger === \"hover\" && focusInside) scheduleOpen();\n  };\n  const onFocusOut: JSX.EventHandler<HTMLDivElement, FocusEvent> = (event) => {\n    // Focus moving to another control in the target keeps the tooltip.\n    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;\n    focusInside = false;\n    if (local.trigger === \"hover\" && !pointerInside) scheduleClose();\n  };\n  const onClick = (): void => {\n    if (local.trigger === \"click\") setClickOpen((prev) => !prev);\n  };\n\n  return (\n    <div class=\"smwb-tooltip__wrapper\" role=\"tooltip\" ref={mergeRefs(local.ref)}>\n      <div\n        class=\"smwb-tooltip__ref\"\n        ref={floating.setReference}\n        onPointerEnter={onPointerEnter}\n        onPointerLeave={onPointerLeave}\n        onFocusIn={onFocusIn}\n        onFocusOut={onFocusOut}\n        onClick={onClick}\n      >\n        {local.children}\n      </div>\n      <Show when={mounted() && isVisible()}>\n        <div ref={floating.setFloating} class={cn(\"smwb-tooltip\", local.class)} style={floating.floatingStyles()}>\n          {local.message}\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Tooltip;\n"],"mappings":"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","names":[],"file":"tooltip.jsx"}

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

@@ -6,6 +6,8 @@ import { Ripple } from "../../base/ripple";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 import { useButtonGroup } from "../buttonGroups/buttonGroupContext";
+import { callHandler } from "../../../primitives/callHandler";
+import { resolveLinkRel, resolveLinkTarget } from "../../../utils/linkAttrs";
 function Button(props) {
   const group = useButtonGroup();
   const merged = mergeProps(
@@ -28,17 +30,23 @@ function Button(props) {
     "icon",
     "iconProps",
     "href",
+    "target",
+    "rel",
     "class",
     "disabled",
     "children",
     "fullWidth",
     "rippleCenter",
     "disableRipple",
+    // The button sets this on its root too; its own handler calls the caller's first.
+    "onPointerDown",
     "size",
     "colorTheme",
     "color",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
+  const linkTarget = () => resolveLinkTarget(local.target);
   const color = () => local.color ?? group?.color ?? local.colorTheme;
   const disabled = () => local.disabled ?? group?.disabled;
   const fullWidth = () => local.fullWidth ?? group?.fullWidth;
@@ -56,6 +64,7 @@ function Button(props) {
     }
   );
   const onPointerDown = (event) => {
+    callHandler(local.onPointerDown, event);
     if (!disabled()) {
       rippleActions?.onRipple(event);
     }
@@ -75,7 +84,7 @@ function Button(props) {
   return <Show
     when={local.href}
     fallback={<button
-      data-testid="button"
+      data-testid={local["data-testid"] ?? "button"}
       {...rest}
       ref={mergeRefs(local.ref)}
       class={classes()}
@@ -86,13 +95,13 @@ function Button(props) {
         </button>}
   >
       <a
-    data-testid="button-link"
+    data-testid={local["data-testid"] ?? "button-link"}
     {...rest}
     ref={mergeRefs(local.ref)}
     class={classes()}
     href={local.href}
-    target="_blank"
-    rel="noreferrer"
+    target={linkTarget()}
+    rel={resolveLinkRel(local.rel, linkTarget())}
     onPointerDown={onPointerDown}
   >
         {content()}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/button/button.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n  ]);\n\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid=\"button\"\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid=\"button-link\"\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,cAAqC;AAC9C,SAAS,YAA4B;AACrC,SAAS,iBAA2B;AACpC,SAAS,sBAAsB;AA8BxB,SAAS,OAAO,OAA8C;AACnE,QAAM,QAAQ,eAAe;AAC7B,QAAM,SAAS;AAAA,IACb;AAAA,MACE,IAAI,UAA+C;AACjD,eAAO,OAAO,WAAW;AAAA,MAC3B;AAAA,MACA,IAAI,OAAyC;AAC3C,eAAO,OAAO,QAAQ;AAAA,MACxB;AAAA,MACA,IAAI,aAAqD;AACvD,eAAO,OAAO,cAAc;AAAA,MAC9B;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACA,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,EACF,CAAC;AAED,QAAM,QAAQ,MAAc,MAAM,SAAS,OAAO,SAAS,MAAM;AACjE,QAAM,WAAW,MAA2B,MAAM,YAAY,OAAO;AACrE,QAAM,YAAY,MAA2B,MAAM,aAAa,OAAO;AACvE,MAAI;AAEJ,QAAM,UAAU,MACd;AAAA,IACE;AAAA,IACA,QAAQ,MAAM,OAAO;AAAA,IACrB,QAAQ,MAAM,IAAI;AAAA,IAClB,MAAM,MAAM,YAAY,iBAAiB,qBAAqB,MAAM,CAAC;AAAA,IACrE,SAAS;AAAA,IACT,MAAM;AAAA,IACN;AAAA,MACE,iBAAiB,SAAS;AAAA,MAC1B,mBAAmB,UAAU;AAAA,IAC/B;AAAA,EACF;AAGF,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,CAAC,SAAS,GAAG;AACf,qBAAe,SAAS,KAAK;AAAA,IAC/B;AAAA,EACF;AAIA,QAAM,OAAO,SAAS,MAAM,MAAM,IAAI;AACtC,QAAM,cAAc,MAAmB;AACrC,UAAM,WAAW,KAAK;AACtB,WAAO,OAAO,aAAa,WAAW,CAAC,SAAU,MAAM,aAAa,CAAC,GAAI,MAAM,UAAU,KAAK;AAAA,EAChG;AAEA,QAAM,UAAU,MACd,EAAE;AAAA,MACA,CAAC,KAAK,MAAM,KAAK,IAAI,YAAY,EAAE,EAAlC,KAAyC;AAAA,OACzC,MAAM,QAAQ,MAAM,QAAQ,MAAM,SAAS;AAAA,MAC5C,CAAC,KAAK,MAAM,CAAC,MAAM,eAAe;AAAA,QAChC,CAAC,OAAO,WAAW,CAAC,YAAa,gBAAgB,SAAU,QAAQ,MAAM,cAAc,EAAE;AAAA,MAC3F,EAFC,KAEM;AAAA,IACT;AAGF,SACE,CAAC;AAAA,IACC,MAAM,MAAM;AAAA,IACZ,UACE,CAAC;AAAA,MACC,YAAY;AAAA,UACR;AAAA,MACJ,KAAK,UAAU,MAAM,GAAG;AAAA,MACxB,OAAO,QAAQ;AAAA,MACf,eAAe;AAAA,MACf,UAAU,CAAC,CAAC,SAAS;AAAA,KACtB;AAAA,WACE,QAAQ,EAAE;AAAA,QACb,EATC;AAAA,GAWJ;AAAA,MACC,CAAC;AAAA,IACC,YAAY;AAAA,QACR;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,QAAQ;AAAA,IACf,MAAM,MAAM;AAAA,IACZ,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,eAAe;AAAA,GAChB;AAAA,SACE,QAAQ,EAAE;AAAA,MACb,EAXC,EAWG;AAAA,IACN,EA3BC;AA6BL;AAEA,IAAO,iBAAQ;","names":[],"file":"button.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/button/button.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/button/button.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon, type IconProps } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { useButtonGroup } from \"../buttonGroups/buttonGroupContext\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ButtonProps extends JSX.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {\n  /** Button text. */\n  label?: string;\n  /** Visual style of the button. */\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  /** Button size. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Icon as an element (e.g. <Icon/>) or a string (icon name / url / base64). */\n  icon?: JSX.Element | string;\n  /** Props forwarded to the <Icon/> when `icon` is a string. */\n  iconProps?: Omit<IconProps, \"name\">;\n  /** @deprecated use `color`. Kept for backward compatibility. */\n  colorTheme?: \"primary\";\n  /** Semantic color, resolved through `--smwb-*Color*` tokens. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** When set, the component renders as an <a>. */\n  href?: string;\n  /**\n   * Where a link (with `href`) opens. By default `\"_blank\"`: a new tab. `null` leaves the `target`\n   * attribute out, so the link opens in place, like an internal one; an empty string does the same, and\n   * any other string is used as is.\n   */\n  target?: string | null | undefined;\n  /**\n   * The `rel` of a link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or\n   * window, and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself\n   * if you still want it; an empty string drops the attribute.\n   */\n  rel?: string | undefined;\n  disabled?: boolean;\n  type?: \"button\" | \"submit\" | \"reset\";\n  /** Stretch to the full width of the container. */\n  fullWidth?: boolean;\n  /** Center the ripple effect. */\n  rippleCenter?: boolean;\n  /** Disable the ripple effect. */\n  disableRipple?: boolean;\n  /** Test id of the root; `button`, or `button-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;\n}\n\nexport function Button(props: ParentProps<ButtonProps>): JSX.Element {\n  const group = useButtonGroup();\n  const merged = mergeProps(\n    {\n      get variant(): NonNullable<ButtonProps[\"variant\"]> {\n        return group?.variant ?? \"contained\";\n      },\n      get size(): NonNullable<ButtonProps[\"size\"]> {\n        return group?.size ?? \"medium\";\n      },\n      get colorTheme(): NonNullable<ButtonProps[\"colorTheme\"]> {\n        return group?.colorTheme ?? \"primary\";\n      },\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"variant\",\n    \"icon\",\n    \"iconProps\",\n    \"href\",\n    \"target\",\n    \"rel\",\n    \"class\",\n    \"disabled\",\n    \"children\",\n    \"fullWidth\",\n    \"rippleCenter\",\n    \"disableRipple\",\n    // The button sets this on its root too; its own handler calls the caller's first.\n    \"onPointerDown\",\n    \"size\",\n    \"colorTheme\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const linkTarget = (): string | undefined => resolveLinkTarget(local.target);\n  const color = (): string => local.color ?? group?.color ?? local.colorTheme;\n  const disabled = (): boolean | undefined => local.disabled ?? group?.disabled;\n  const fullWidth = (): boolean | undefined => local.fullWidth ?? group?.fullWidth;\n  let rippleActions: RippleActionsRef | undefined;\n\n  const classes = (): string =>\n    cn(\n      \"smwb-button\",\n      `smwb-${local.variant}`,\n      `smwb-${local.size}`,\n      color() === \"primary\" ? \"smwb-primary\" : `smwb-button_color-${color()}`,\n      group && \"smwb-button-group__grouped\",\n      local.class,\n      {\n        \"smwb-disabled\": disabled(),\n        \"smwb-full-width\": fullWidth(),\n      }\n    );\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown: JSX.EventHandler<HTMLButtonElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!disabled()) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Read the icon once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const iconElement = (): JSX.Element => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? <Icon {...(local.iconProps ?? {})} name={resolved} /> : resolved;\n  };\n\n  const content = (): JSX.Element => (\n    <>\n      <Show when={icon()}>{iconElement()}</Show>\n      {local.label ? local.label : local.children}\n      <Show when={!local.disableRipple}>\n        <Ripple actionRef={(actions) => (rippleActions = actions)} center={local.rippleCenter} />\n      </Show>\n    </>\n  );\n\n  return (\n    <Show\n      when={local.href}\n      fallback={\n        <button\n          data-testid={local[\"data-testid\"] ?? \"button\"}\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          class={classes()}\n          onPointerDown={onPointerDown}\n          disabled={!!disabled()}\n        >\n          {content()}\n        </button>\n      }\n    >\n      <a\n        data-testid={local[\"data-testid\"] ?? \"button-link\"}\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={classes()}\n        href={local.href}\n        target={linkTarget()}\n        rel={resolveLinkRel(local.rel, linkTarget())}\n        onPointerDown={onPointerDown}\n      >\n        {content()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Button;\n"],"mappings":"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","names":[],"file":"button.jsx"}

package/dist/source/components/inputs/buttonGroups/buttonGroup.jsx

@@ -26,7 +26,8 @@ function ButtonGroup(props) {
     "color",
     "fullWidth",
     "disabled",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const value = {
     get variant() {
@@ -59,8 +60,8 @@ function ButtonGroup(props) {
       `smwb-${local.variant}`,
       local.fullWidth && "smwb-full-width"
     )}
-    role="group"
-    data-testid="button-group"
+    role={rest.role ?? "group"}
+    data-testid={local["data-testid"] ?? "button-group"}
   >
         {local.children}
       </div>

package/dist/source/components/inputs/buttonGroups/buttonGroup.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/buttonGroup/buttonGroup.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ButtonGroupContext, type ButtonGroupContextValue } from \"./buttonGroupContext\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ButtonGroup(props: ParentProps<ButtonGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"contained\" as const,\n      size: \"medium\" as const,\n      orientation: \"horizontal\" as const,\n      colorTheme: \"primary\" as const,\n      fullWidth: false,\n      disabled: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"variant\",\n    \"size\",\n    \"orientation\",\n    \"colorTheme\",\n    \"color\",\n    \"fullWidth\",\n    \"disabled\",\n    \"ref\",\n  ]);\n\n  const value: ButtonGroupContextValue = {\n    get variant() {\n      return local.variant;\n    },\n    get size() {\n      return local.size;\n    },\n    get color() {\n      return local.color;\n    },\n    get colorTheme() {\n      return local.colorTheme;\n    },\n    get disabled() {\n      return local.disabled;\n    },\n    get fullWidth() {\n      return local.orientation === \"vertical\" ? true : local.fullWidth;\n    },\n  };\n\n  return (\n    <ButtonGroupContext.Provider value={value}>\n      <div\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-button-group\",\n          local.class,\n          `smwb-${local.orientation}`,\n          `smwb-${local.variant}`,\n          local.fullWidth && \"smwb-full-width\"\n        )}\n        role=\"group\"\n        data-testid=\"button-group\"\n      >\n        {local.children}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n}\n\nexport default ButtonGroup;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,0BAAwD;AAe1D,SAAS,YAAY,OAAmD;AAC7E,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,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,EACF,CAAC;AAED,QAAM,QAAiC;AAAA,IACrC,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,OAAO;AACT,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,aAAa;AACf,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,WAAW;AACb,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,YAAY;AACd,aAAO,MAAM,gBAAgB,aAAa,OAAO,MAAM;AAAA,IACzD;AAAA,EACF;AAEA,SACE,CAAC,mBAAmB,SAAS,OAAO,OAAO;AAAA,MACzC,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,MAAM,WAAW;AAAA,MACzB,QAAQ,MAAM,OAAO;AAAA,MACrB,MAAM,aAAa;AAAA,IACrB;AAAA,IACA,KAAK;AAAA,IACL,YAAY;AAAA,GACb;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EAdC,IAcK;AAAA,IACR,EAhBC,mBAAmB;AAkBxB;AAEA,IAAO,sBAAQ;","names":[],"file":"buttonGroup.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/buttonGroups/buttonGroup.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/buttonGroup/buttonGroup.entry.less\";\nimport { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { ButtonGroupContext, type ButtonGroupContextValue } from \"./buttonGroupContext\";\n\nexport interface ButtonGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  orientation?: \"horizontal\" | \"vertical\";\n  variant?: \"contained\" | \"text\" | \"outlined\";\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  disabled?: boolean;\n  /** @deprecated use `color`. */\n  colorTheme?: \"primary\";\n  /** Semantic color propagated to child buttons. */\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Test id of the root `<div>`; `button-group` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function ButtonGroup(props: ParentProps<ButtonGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      variant: \"contained\" as const,\n      size: \"medium\" as const,\n      orientation: \"horizontal\" as const,\n      colorTheme: \"primary\" as const,\n      fullWidth: false,\n      disabled: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"variant\",\n    \"size\",\n    \"orientation\",\n    \"colorTheme\",\n    \"color\",\n    \"fullWidth\",\n    \"disabled\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const value: ButtonGroupContextValue = {\n    get variant() {\n      return local.variant;\n    },\n    get size() {\n      return local.size;\n    },\n    get color() {\n      return local.color;\n    },\n    get colorTheme() {\n      return local.colorTheme;\n    },\n    get disabled() {\n      return local.disabled;\n    },\n    get fullWidth() {\n      return local.orientation === \"vertical\" ? true : local.fullWidth;\n    },\n  };\n\n  return (\n    <ButtonGroupContext.Provider value={value}>\n      <div\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        class={cn(\n          \"smwb-button-group\",\n          local.class,\n          `smwb-${local.orientation}`,\n          `smwb-${local.variant}`,\n          local.fullWidth && \"smwb-full-width\"\n        )}\n        // A default: the caller's own wins, and an explicit undefined keeps it.\n        role={rest.role ?? \"group\"}\n        data-testid={local[\"data-testid\"] ?? \"button-group\"}\n      >\n        {local.children}\n      </div>\n    </ButtonGroupContext.Provider>\n  );\n}\n\nexport default ButtonGroup;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAqC,YAAY,kBAAkB;AACnE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,0BAAwD;AAiB1D,SAAS,YAAY,OAAmD;AAC7E,QAAM,SAAS;AAAA,IACb;AAAA,MACE,SAAS;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,EACF;AACA,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,EACF,CAAC;AAED,QAAM,QAAiC;AAAA,IACrC,IAAI,UAAU;AACZ,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,OAAO;AACT,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,QAAQ;AACV,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,aAAa;AACf,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,WAAW;AACb,aAAO,MAAM;AAAA,IACf;AAAA,IACA,IAAI,YAAY;AACd,aAAO,MAAM,gBAAgB,aAAa,OAAO,MAAM;AAAA,IACzD;AAAA,EACF;AAEA,SACE,CAAC,mBAAmB,SAAS,OAAO,OAAO;AAAA,MACzC,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,QAAQ,MAAM,WAAW;AAAA,MACzB,QAAQ,MAAM,OAAO;AAAA,MACrB,MAAM,aAAa;AAAA,IACrB;AAAA,IAEA,MAAM,KAAK,QAAQ;AAAA,IACnB,aAAa,MAAM,aAAa,KAAK;AAAA,GACtC;AAAA,SACE,MAAM,SAAS;AAAA,MAClB,EAfC,IAeK;AAAA,IACR,EAjBC,mBAAmB;AAmBxB;AAEA,IAAO,sBAAQ;","names":[],"file":"buttonGroup.jsx"}

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

@@ -1,17 +1,26 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/checkbox/checkbox.entry.less";
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, createEffect, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Icon } from "../../base/icon";
 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 Checkbox(props) {
-  const merged = mergeProps({ size: "medium", color: "primary" }, props);
+  let input;
+  const merged = mergeProps(
+    { size: "medium", color: "primary" },
+    props,
+    // The input's ref: the caller's, and ours for the indeterminate property.
+    { ref: mergeRefs(props.ref, (el) => input = el) }
+  );
   const [local, args] = splitProps(merged, [
     "label",
     "disabled",
     "readOnly",
+    "onClick",
     "required",
     "name",
     "id",
@@ -22,18 +31,29 @@ function Checkbox(props) {
     "onChange",
     "helperText",
     "error",
+    "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) => {
+    event.currentTarget.indeterminate = Boolean(local.indeterminate);
     if (local.readOnly) {
-      event.preventDefault();
       return;
     }
     local.onChange?.(event, event.currentTarget.checked, props);
   };
+  createEffect(() => {
+    const indeterminate = Boolean(local.indeterminate);
+    if (input) input.indeterminate = indeterminate;
+  });
   return <TextFieldWrapper
-    helperText={local.helperText}
+    helperText={helper.text()}
+    helperTextId={helper.id}
     disabled={local.disabled}
     error={local.error}
     class="smwb-text-field-checkbox"
@@ -62,9 +82,12 @@ function Checkbox(props) {
     required={local.required}
     aria-invalid={local.error || void 0}
     aria-required={local.required || void 0}
+    aria-describedby={helper.describedBy()}
     ref={mergeRefs(local.ref)}
     {...args}
+    aria-readonly={local.readOnly || void 0}
     onChange={handleChange}
+    onClick={handleClick}
   />
         <span class={cn("smwb-checkbox__btn", { "smwb-indeterminate": local.indeterminate })}>
           <Show