@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/dataDisplay/chip/chip.js

@@ -1,21 +1,23 @@
-import { createComponent as n, use as w, spread as v, mergeProps as _, insert as l, memo as P, template as i, addEventListener as C, effect as y, setAttribute as L, delegateEvents as z } from "solid-js/web";
+import { createComponent as o, use as p, spread as f, mergeProps as b, insert as r, memo as g, template as i, effect as P, setAttribute as A, delegateEvents as E } from "solid-js/web";
 import '../../../assets/styles/less/components/chip/chip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as A, splitProps as R, children as $, Show as c } from "solid-js";
-import I from "clsx";
-import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
-import { callHandler as E } from "../../../primitives/callHandler.js";
-import { Ripple as M } from "../../base/ripple/ripple.js";
-import { Icon as x } from "../../base/icon/icon.js";
-var H = /* @__PURE__ */ i("<span class=smwb-chip__icon>"), K = /* @__PURE__ */ i("<span class=smwb-chip__label>"), S = /* @__PURE__ */ i("<button type=button class=smwb-chip__delete-icon>"), j = /* @__PURE__ */ i("<a>"), q = /* @__PURE__ */ i("<span>");
-function B(d) {
-  const a = $(() => d.icon);
-  return n(c, {
+import { mergeProps as H, splitProps as O, children as K, Show as c } from "solid-js";
+import S from "clsx";
+import { mergeRefs as I } from "../../../primitives/mergeRefs.js";
+import { callHandler as w } from "../../../primitives/callHandler.js";
+import { isOwnClick as j } from "../../../utils/ownClick.js";
+import { splitControlProps as q } from "../../../utils/controlProps.js";
+import { Ripple as B } from "../../base/ripple/ripple.js";
+import { Icon as F } from "../../base/icon/icon.js";
+var G = /* @__PURE__ */ i("<span class=smwb-chip__icon>"), J = /* @__PURE__ */ i("<span class=smwb-chip__label>"), N = /* @__PURE__ */ i("<button type=button class=smwb-chip__delete-icon>"), Q = /* @__PURE__ */ i("<a>"), T = /* @__PURE__ */ i("<span><span>");
+function U(d) {
+  const a = K(() => d.icon);
+  return o(c, {
     get when() {
       return a();
     },
     get fallback() {
-      return n(x, {
+      return o(F, {
         name: "cancel",
         size: 18,
         fill: 1
@@ -26,109 +28,148 @@ function B(d) {
     }
   });
 }
-function W(d) {
-  const a = A({
+function ie(d) {
+  const a = H({
     target: "_blank",
     variant: "filled",
     size: "medium",
     color: "default",
     disabled: !1,
     deleteAriaLabel: "Remove"
-  }, d), [t, u] = R(a, ["label", "class", "deleteIcon", "icon", "onDelete", "onDeleteMouseDown", "asLink", "href", "target", "selected", "variant", "size", "color", "disabled", "onClick", "deleteAriaLabel", "ref"]), m = $(() => t.icon);
-  let p;
-  const f = (e) => {
-    t.disabled || p?.onRipple(e);
-  }, D = (e) => {
-    E(t.onDeleteMouseDown, e), e.stopPropagation();
-  }, b = () => I("smwb-chip", `smwb-${t.variant}`, `smwb-chip_size-${t.size}`, t.color !== "default" && `smwb-chip_color-${t.color}`, t.class, {
+  }, d), [t, h] = O(a, [
+    "label",
+    "labelId",
+    "class",
+    "deleteIcon",
+    "icon",
+    "onDelete",
+    "onDeleteMouseDown",
+    "asLink",
+    "href",
+    "target",
+    "selected",
+    "variant",
+    "size",
+    "color",
+    "disabled",
+    "onClick",
+    // The chip sets these on its root too; its own handlers call the caller's first.
+    "onKeyDown",
+    "onPointerDown",
+    "deleteAriaLabel",
+    "ref",
+    "data-testid"
+  ]), k = K(() => t.icon);
+  let D;
+  const _ = (e) => {
+    w(t.onPointerDown, e), t.disabled || D?.onRipple(e);
+  }, L = (e) => {
+    t.onDelete?.(e);
+  }, z = (e) => {
+    w(t.onDeleteMouseDown, e), e.stopPropagation();
+  }, $ = () => S("smwb-chip", `smwb-${t.variant}`, `smwb-chip_size-${t.size}`, t.color !== "default" && `smwb-chip_color-${t.color}`, t.class, {
     "smwb-disabled": t.disabled,
     "smwb-selected": t.selected
-  }), s = () => !!t.onClick && !t.disabled, g = () => [n(c, {
+  }), u = () => !!t.onClick && !t.disabled, [v, R] = q(h, () => !!t.onClick);
+  let m;
+  const x = (e) => {
+    w(t.onKeyDown, e), !(!u() || e.target !== m) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t.onClick?.());
+  }, M = (e) => {
+    j(e, m ?? null) && t.onClick?.();
+  }, C = () => [o(c, {
     get when() {
-      return m();
+      return k();
     },
     get children() {
-      var e = H();
-      return l(e, m), e;
+      var e = G();
+      return r(e, k), e;
     }
   }), (() => {
-    var e = K();
-    return l(e, () => t.label), e;
-  })(), n(c, {
+    var e = J();
+    return r(e, () => t.label), P(() => A(e, "id", t.labelId)), e;
+  })()], y = () => [o(c, {
     get when() {
       return t.onDelete;
     },
     get children() {
-      var e = S();
-      return e.$$mousedown = D, C(e, "click", t.onDelete, !0), l(e, n(B, {
+      var e = N();
+      return e.$$mousedown = z, e.$$click = L, r(e, o(U, {
         get icon() {
           return t.deleteIcon;
         }
-      })), y((r) => {
-        var o = t.deleteAriaLabel, h = t.disabled;
-        return o !== r.e && L(e, "aria-label", r.e = o), h !== r.t && (e.disabled = r.t = h), r;
+      })), P((n) => {
+        var l = t.deleteAriaLabel, s = t.disabled;
+        return l !== n.e && A(e, "aria-label", n.e = l), s !== n.t && (e.disabled = n.t = s), n;
       }, {
         e: void 0,
         t: void 0
       }), e;
     }
-  }), n(M, {
-    actionRef: (e) => p = e
+  }), o(B, {
+    actionRef: (e) => D = e
   })];
-  return n(c, {
+  return o(c, {
     get when() {
-      return P(() => !!t.asLink)() && t.href;
+      return g(() => !!t.asLink)() && t.href;
     },
     get fallback() {
       return (() => {
-        var e = q(), r = k(t.ref);
-        return typeof r == "function" && w(r, e), v(e, _(u, {
-          "data-testid": "chip",
-          get class() {
-            return b();
-          },
-          get role() {
-            return s() ? "button" : void 0;
+        var e = T(), n = e.firstChild, l = I(t.ref);
+        return typeof l == "function" && p(l, e), f(e, b(R, {
+          get "data-testid"() {
+            return t["data-testid"] ?? "chip";
           },
-          get tabindex() {
-            return s() ? 0 : void 0;
+          get class() {
+            return $();
           },
           get "aria-disabled"() {
-            return t.disabled || void 0;
+            return g(() => !t.onClick)() && t.disabled || void 0;
           },
           get onClick() {
-            return s() ? () => t.onClick?.() : void 0;
+            return u() ? M : void 0;
           },
-          get onKeyDown() {
-            return s() ? (o) => {
-              (o.key === "Enter" || o.key === " ") && (o.preventDefault(), t.onClick?.());
-            } : void 0;
+          onKeyDown: x,
+          onPointerDown: _
+        }), !1, !0), p((s) => m = s, n), f(n, b(v, {
+          class: "smwb-chip__content",
+          get role() {
+            return t.onClick ? "button" : void 0;
           },
-          onPointerDown: f
-        }), !1, !0), l(e, g), e;
+          get tabindex() {
+            return v.tabindex ?? (u() ? 0 : void 0);
+          },
+          get "aria-disabled"() {
+            return g(() => !!t.onClick)() && t.disabled || void 0;
+          }
+        }), !1, !0), r(n, C), r(e, y, null), e;
       })();
     },
     get children() {
-      var e = j(), r = k(t.ref);
-      return typeof r == "function" && w(r, e), v(e, _(u, {
-        "data-testid": "chip-link",
+      var e = Q(), n = I(t.ref);
+      return typeof n == "function" && p(n, e), f(e, b(h, {
+        get "data-testid"() {
+          return t["data-testid"] ?? "chip-link";
+        },
         get class() {
-          return b();
+          return $();
         },
         get href() {
           return t.href;
         },
-        onPointerDown: f,
+        get onKeyDown() {
+          return t.onKeyDown;
+        },
+        onPointerDown: _,
         get target() {
           return t.target;
         },
         rel: "noreferrer"
-      }), !1, !0), l(e, g), e;
+      }), !1, !0), r(e, C, null), r(e, y, null), e;
     }
   });
 }
-z(["click", "mousedown"]);
+E(["click", "mousedown"]);
 export {
-  W as Chip
+  ie as Chip
 };
 //# sourceMappingURL=chip.js.map

package/dist/components/dataDisplay/chip/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\n/**\n * The delete control's icon: a custom one or the default. It is read here, only\n * when the control renders — markup created and not rendered has no server node\n * to hydrate against either.\n */\nfunction DeleteIcon(props: { icon: JSX.Element }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show when={icon()} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    \"deleteAriaLabel\",\n    \"ref\",\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 the <Show> test has no server DOM\n  // node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown = (event: PointerEvent): void => {\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n\n  const inner = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span class=\"smwb-chip__label\">{local.label}</span>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={local.onDelete}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <DeleteIcon icon={local.deleteIcon} />\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...rest}\n          ref={mergeRefs(local.ref)}\n          data-testid=\"chip\"\n          class={classes()}\n          role={clickable() ? \"button\" : undefined}\n          tabindex={clickable() ? 0 : undefined}\n          aria-disabled={local.disabled || undefined}\n          onClick={clickable() ? () => local.onClick?.() : undefined}\n          onKeyDown={\n            clickable()\n              ? (event) => {\n                  if (event.key === \"Enter\" || event.key === \" \") {\n                    event.preventDefault();\n                    local.onClick?.();\n                  }\n                }\n              : undefined\n          }\n          onPointerDown={onPointerDown}\n        >\n          {inner()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid=\"chip-link\"\n        class={classes()}\n        href={local.href}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {inner()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"names":["DeleteIcon","props","icon","children","_$createComponent","Show","when","fallback","Icon","name","size","fill","Chip","merged","mergeProps","target","variant","color","disabled","deleteAriaLabel","local","rest","splitProps","rippleActions","onPointerDown","event","onRipple","onDeleteMouseDown","callHandler","stopPropagation","classes","cn","class","selected","clickable","onClick","inner","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","label","onDelete","_el$3","_tmpl$3","$$mousedown","_$addEventListener","deleteIcon","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","undefined","Ripple","actionRef","actions","_$memo","asLink","href","_el$5","_tmpl$5","_ref$2","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","tabindex","onKeyDown","key","preventDefault","_el$4","_tmpl$4","_ref$","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Ripple, type RippleActionsRef } from \"../../base/ripple\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends JSX.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  /**\n   * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,\n   * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabindex`, `onFocus`,\n   * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which\n   * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.\n   */\n  class?: string | undefined;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  /**\n   * Shows a delete button in the chip and runs when it is pressed: a click, or\n   * Enter / Space while the button has focus. In a clickable chip it sits\n   * beside the chip's button, not inside it, and pressing it does not run the\n   * chip's `onClick`.\n   */\n  onDelete?: (event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => void;\n  icon?: JSX.Element;\n  deleteIcon?: JSX.Element;\n  label: string;\n  /**\n   * Makes the chip clickable: its icon and label become a button, named by\n   * them, with a focus ring around the whole chip. The delete button is not\n   * part of that button but its sibling, so it keeps its own name.\n   *\n   * Runs on a click on the chip and on Enter / Space while the chip's button\n   * has focus, but not on a click or key on the delete button.\n   */\n  onClick?: () => void;\n  onDeleteMouseDown?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;\n  /**\n   * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is\n   * disabled too. With `onClick` the chip is still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  asLink?: boolean;\n  href?: string;\n  /** Open the link in a new tab (asLink only). */\n  target?: string;\n  selected?: boolean;\n  /**\n   * Id of the label's element, for another element to take the chip's text as\n   * its name (`aria-labelledby`) without the delete button's name.\n   */\n  labelId?: string | undefined;\n  /** Accessible label for the delete control. */\n  deleteAriaLabel?: string;\n  /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement | HTMLAnchorElement>;\n}\n\n/**\n * The delete control's icon: a custom one or the default. It is read here, only\n * when the control renders — markup created and not rendered has no server node\n * to hydrate against either.\n */\nfunction DeleteIcon(props: { icon: JSX.Element }): JSX.Element {\n  const icon = children(() => props.icon);\n  return (\n    <Show when={icon()} fallback={<Icon name=\"cancel\" size={18} fill={1} />}>\n      {icon()}\n    </Show>\n  );\n}\n\nexport function Chip(props: ChipProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      target: \"_blank\",\n      variant: \"filled\" as const,\n      size: \"medium\" as const,\n      color: \"default\" as ChipColor,\n      disabled: false,\n      deleteAriaLabel: \"Remove\",\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"labelId\",\n    \"class\",\n    \"deleteIcon\",\n    \"icon\",\n    \"onDelete\",\n    \"onDeleteMouseDown\",\n    \"asLink\",\n    \"href\",\n    \"target\",\n    \"selected\",\n    \"variant\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"onClick\",\n    // The chip sets these on its root too; its own handlers call the caller's first.\n    \"onKeyDown\",\n    \"onPointerDown\",\n    \"deleteAriaLabel\",\n    \"ref\",\n    \"data-testid\",\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 the <Show> test has no server DOM\n  // node to adopt (\"Unable to find DOM nodes for hydration key\").\n  const icon = children(() => local.icon);\n\n  let rippleActions: RippleActionsRef | undefined;\n\n  const onPointerDown: JSX.EventHandler<HTMLSpanElement | HTMLAnchorElement, PointerEvent> = (event) => {\n    callHandler(local.onPointerDown, event);\n    if (!local.disabled) {\n      rippleActions?.onRipple(event);\n    }\n  };\n\n  // Reads onDelete on each click. Solid binds event handlers once, and <Show>\n  // builds the button in a tracked scope, so binding onDelete itself there\n  // would rebuild the button for each new onDelete.\n  const onDeleteClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    local.onDelete?.(event);\n  };\n\n  const onDeleteMouseDown: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {\n    callHandler(local.onDeleteMouseDown, event);\n    event.stopPropagation();\n  };\n\n  const classes = (): string =>\n    cn(\n      \"smwb-chip\",\n      `smwb-${local.variant}`,\n      `smwb-chip_size-${local.size}`,\n      local.color !== \"default\" && `smwb-chip_color-${local.color}`,\n      local.class,\n      { \"smwb-disabled\": local.disabled, \"smwb-selected\": local.selected }\n    );\n\n  const clickable = (): boolean => !!local.onClick && !local.disabled;\n  // With onClick the chip's content is its button, and what the chip is to the\n  // keyboard and to assistive tech goes there. Without it the chip is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the delete button too.\n  const [control, box] = splitControlProps(rest, () => !!local.onClick);\n  let content: HTMLSpanElement | undefined;\n\n  // Keys pressed on the delete button bubble up here too; only the keys of the\n  // chip's button activate it.\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!clickable() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      local.onClick?.();\n    }\n  };\n\n  // A click on the chip's button, or on its padding, activates the chip: not\n  // one on the delete button, nor one in a Portal rendered inside, which Solid\n  // delivers here too.\n  const onChipClick: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) local.onClick?.();\n  };\n\n  // The chip's own content: its button when it is clickable.\n  const iconAndLabel = (): JSX.Element => (\n    <>\n      <Show when={icon()}>\n        <span class=\"smwb-chip__icon\">{icon()}</span>\n      </Show>\n      <span id={local.labelId} class=\"smwb-chip__label\">\n        {local.label}\n      </span>\n    </>\n  );\n  // After the content: in a clickable chip, beside its button, not in it.\n  const trailing = (): JSX.Element => (\n    <>\n      <Show when={local.onDelete}>\n        <button\n          type=\"button\"\n          class=\"smwb-chip__delete-icon\"\n          aria-label={local.deleteAriaLabel}\n          disabled={local.disabled}\n          onClick={onDeleteClick}\n          onMouseDown={onDeleteMouseDown}\n        >\n          <DeleteIcon icon={local.deleteIcon} />\n        </button>\n      </Show>\n      <Ripple actionRef={(actions) => (rippleActions = actions)} />\n    </>\n  );\n\n  return (\n    <Show\n      when={local.asLink && local.href}\n      fallback={\n        <span\n          {...box}\n          ref={mergeRefs(local.ref)}\n          data-testid={local[\"data-testid\"] ?? \"chip\"}\n          class={classes()}\n          // A disabled chip says so where the caller's ARIA attributes are: on\n          // its button with onClick, on the root without. Where it sets none\n          // (undefined), the caller's stay.\n          aria-disabled={(!local.onClick && local.disabled) || undefined}\n          onClick={clickable() ? onChipClick : undefined}\n          onKeyDown={onKeyDown}\n          onPointerDown={onPointerDown}\n        >\n          <span\n            {...control}\n            ref={(el) => (content = el)}\n            class=\"smwb-chip__content\"\n            // With onClick the content is the chip's button, and a disabled chip\n            // says so: these win over the caller's, and where the chip sets none\n            // (undefined), the caller's stay. Its tabindex is a default: the\n            // caller's wins, e.g. for roving focus.\n            role={local.onClick ? \"button\" : undefined}\n            tabindex={control.tabindex ?? (clickable() ? 0 : undefined)}\n            aria-disabled={(!!local.onClick && local.disabled) || undefined}\n          >\n            {iconAndLabel()}\n          </span>\n          {/* Beside the button, not in it: the delete button keeps its name and input. */}\n          {trailing()}\n        </span>\n      }\n    >\n      <a\n        {...rest}\n        ref={mergeRefs(local.ref)}\n        data-testid={local[\"data-testid\"] ?? \"chip-link\"}\n        class={classes()}\n        href={local.href}\n        onKeyDown={local.onKeyDown}\n        onPointerDown={onPointerDown}\n        target={local.target}\n        rel=\"noreferrer\"\n      >\n        {iconAndLabel()}\n        {trailing()}\n      </a>\n    </Show>\n  );\n}\n\nexport default Chip;\n"],"names":["DeleteIcon","props","icon","children","_$createComponent","Show","when","fallback","Icon","name","size","fill","Chip","merged","mergeProps","target","variant","color","disabled","deleteAriaLabel","local","rest","splitProps","rippleActions","onPointerDown","event","callHandler","onRipple","onDeleteClick","onDelete","onDeleteMouseDown","stopPropagation","classes","cn","class","selected","clickable","onClick","control","box","splitControlProps","content","onKeyDown","key","preventDefault","onChipClick","isOwnClick","iconAndLabel","_el$","_tmpl$","_$insert","_el$2","_tmpl$2","label","_$effect","_$setAttribute","labelId","trailing","_el$3","_tmpl$3","$$mousedown","$$click","deleteIcon","_p$","_v$","_v$2","e","t","undefined","Ripple","actionRef","actions","_$memo","asLink","href","_el$5","_tmpl$5","_el$6","firstChild","_ref$2","mergeRefs","ref","_$use","_$spread","_$mergeProps","el","role","tabindex","_el$4","_tmpl$4","_ref$","_$delegateEvents"],"mappings":"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"}

package/dist/components/dataDisplay/chipGroup/chipGroup.js

@@ -1,57 +1,62 @@
-import { spread as d, mergeProps as o, insert as g, createComponent as n, template as f } from "solid-js/web";
+import { spread as d, mergeProps as n, insert as g, createComponent as i, template as f } from "solid-js/web";
 import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
 import { mergeProps as v, splitProps as h, For as b } from "solid-js";
 import C from "clsx";
 import { Chip as z } from "../chip/chip.js";
 var P = /* @__PURE__ */ f("<div>");
-function w(i) {
-  const a = v({
+function w(a) {
+  const u = v({
     size: "medium",
     color: "primary"
-  }, i), [e, c] = h(a, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), l = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], s = (t) => l().includes(t), u = (t) => {
+  }, a), [e, l] = h(u, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), s = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], o = (t) => s().includes(t), c = (t) => {
     if (e.multiple) {
-      const r = l(), m = r.includes(t) ? r.filter((p) => p !== t) : [...r, t];
+      const r = s(), m = r.includes(t) ? r.filter((p) => p !== t) : [...r, t];
       e.onChange?.(m);
     } else
       e.onChange?.(t);
   };
-  return (() => {
-    var t = P();
-    return d(t, o(c, {
-      role: "group",
-      get class() {
-        return C("smwb-chip-group", e.class);
-      }
-    }), !1, !0), g(t, n(b, {
-      get each() {
-        return e.options;
-      },
-      children: (r) => n(z, o({
-        get label() {
-          return r.label;
+  return (
+    // role="group" is a default: the caller's own wins, and an explicit undefined keeps it.
+    (() => {
+      var t = P();
+      return d(t, n(l, {
+        get role() {
+          return l.role ?? "group";
         },
-        get size() {
-          return e.size;
+        get class() {
+          return C("smwb-chip-group", e.class);
+        }
+      }), !1, !0), g(t, i(b, {
+        get each() {
+          return e.options;
         },
-        get color() {
-          return e.color;
-        },
-        get selected() {
-          return s(r.value);
-        },
-        get variant() {
-          return s(r.value) ? "filled" : "outlined";
-        },
-        get disabled() {
-          return !!(e.disabled || r.disabled);
-        },
-        onClick: () => u(r.value)
-      }, () => r.icon ? {
-        icon: r.icon
-      } : {}))
-    })), t;
-  })();
+        children: (r) => i(z, n({
+          get label() {
+            return r.label;
+          },
+          get size() {
+            return e.size;
+          },
+          get color() {
+            return e.color;
+          },
+          get selected() {
+            return o(r.value);
+          },
+          get variant() {
+            return o(r.value) ? "filled" : "outlined";
+          },
+          get disabled() {
+            return !!(e.disabled || r.disabled);
+          },
+          onClick: () => c(r.value)
+        }, () => r.icon ? {
+          icon: r.icon
+        } : {}))
+      })), t;
+    })()
+  );
 }
 export {
   w as ChipGroup

package/dist/components/dataDisplay/chipGroup/chipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;;;AA+BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}
+{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    // role=\"group\" is a default: the caller's own wins, and an explicit undefined keeps it.\n    <div {...rest} role={rest.role ?? \"group\"} class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","role","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;;;AA+BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA;AAAA;AAAA,KACE,MAAA;AAAA,UAAAY,IAAAC,EAAAA;AAAAC,aAAAA,EAAAF,GAAAG,EACSlB,GAAI;AAAA,QAAA,IAAEmB,OAAI;AAAA,iBAAEnB,EAAKmB,QAAQ;AAAA,QAAO;AAAA,QAAA,IAAA,QAAA;AAAA,iBAASC,EAAG,mBAAmBrB,EAAMsB,KAAK;AAAA,QAAC;AAAA,MAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAP,GAAAQ,EACjFC,GAAG;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAE1B,EAAM2B;AAAAA,QAAO;AAAA,QAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIX,EAAA;AAAA,UAAA,IACHY,QAAK;AAAA,mBAAEF,EAAOE;AAAAA,UAAK;AAAA,UAAA,IACnBjC,OAAI;AAAA,mBAAEE,EAAMF;AAAAA,UAAI;AAAA,UAAA,IAChBC,QAAK;AAAA,mBAAEC,EAAMD;AAAAA,UAAK;AAAA,UAAA,IAClBiC,WAAQ;AAAA,mBAAEzB,EAAWsB,EAAOzB,KAAK;AAAA,UAAC;AAAA,UAAA,IAClC6B,UAAO;AAAA,mBAAE1B,EAAWsB,EAAOzB,KAAK,IAAI,WAAW;AAAA,UAAU;AAAA,UAAA,IACzD8B,WAAQ;AAAA,mBAAE,CAAC,EAAElC,EAAMkC,YAAYL,EAAOK;AAAAA,UAAS;AAAA,UAC/CC,SAASA,MAAM1B,EAAOoB,EAAOzB,KAAK;AAAA,QAAA,GAAC,MAC9ByB,EAAOO,OAAO;AAAA,UAAEA,MAAMP,EAAOO;AAAAA,QAAAA,IAAS,EAAE,CAAA;AAAA,MAAA,CAEhD,CAAA,GAAApB;AAAAA,IAAA,GAAA;AAAA;AAIT;"}

package/dist/components/dataDisplay/dagView/dagLayout.d.ts

@@ -0,0 +1,74 @@
+/** Which way the layers run: left to right, or top to bottom. */
+export type DagDirection = "LR" | "TB";
+export interface DagLayoutInputNode {
+    id: string;
+    width: number;
+    height: number;
+}
+export interface DagLayoutInputEdge {
+    /** `source->target` unless given. */
+    id?: string | undefined;
+    source: string;
+    target: string;
+}
+export interface DagLayoutInput {
+    nodes: readonly DagLayoutInputNode[];
+    edges: readonly DagLayoutInputEdge[];
+    /** "LR" by default. */
+    direction?: DagDirection | undefined;
+    /** The space between layers; 64 by default. */
+    rankGap?: number | undefined;
+    /** The space between nodes in a layer, and twice it between disconnected parts; 24 by default. */
+    nodeGap?: number | undefined;
+    /** Ordering sweeps (down and up count as one each); 8 by default. */
+    sweeps?: number | undefined;
+    /** Told what was dropped from the input: unknown ids, self-loops, duplicates. */
+    warn?: ((message: string) => void) | undefined;
+}
+export interface DagPoint {
+    x: number;
+    y: number;
+}
+export interface DagLayoutNode {
+    id: string;
+    /** The left edge. */
+    x: number;
+    /** The top edge. */
+    y: number;
+    width: number;
+    height: number;
+    /** The node's layer, 0 for the first. */
+    layer: number;
+    /** The node's place in its layer, 0 for the first (dummies included). */
+    order: number;
+}
+export interface DagLayoutEdge {
+    id: string;
+    source: string;
+    target: string;
+    /** From the source's side to the target's side, through the layers between. */
+    points: DagPoint[];
+    /** The edge closes a cycle and was drawn against the layer direction. */
+    reversed: boolean;
+}
+export interface DagLayoutResult {
+    /** Every node drawn, in input order. */
+    nodes: Map<string, DagLayoutNode>;
+    /** Every edge drawn, in input order. */
+    edges: DagLayoutEdge[];
+    width: number;
+    height: number;
+}
+/** The id an edge is drawn and highlighted by. */
+export declare const dagEdgeId: (edge: DagLayoutInputEdge) => string;
+/**
+ * Lays out a directed graph in layers. Never throws: unknown ids, self-loops
+ * and duplicates are dropped (and reported through `warn`), and the edges that
+ * close a cycle are drawn against the layer direction, marked `reversed`.
+ */
+export declare function dagLayout(input: DagLayoutInput): DagLayoutResult;
+/**
+ * An SVG path through an edge's points: a smooth S-curve between layers, a
+ * straight line through the layers it skips.
+ */
+export declare function dagEdgePath(points: readonly DagPoint[], direction?: DagDirection): string;