@smwb/ui-react 2.7.0 → 2.8.0

package/dist/components/dataDisplay/chip/chip.d.ts

@@ -1,24 +1,55 @@
 import React from "react";
 export type ChipColor = "default" | "primary" | "secondary" | "error" | "success" | "warning" | "info";
 export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {
+    /**
+     * Class name(s) for the chip's root, a `<span>` (an `<a>` with `asLink`). `style`, `id`, `data-*`, `aria-hidden`,
+     * `ref` and event handlers go to the root too. In a clickable chip (`onClick`), `role`, `tabIndex`, `onFocus`,
+     * `onBlur` and the other `aria-*` attributes go to its button, `.smwb-chip__content` (the icon and the label), which
+     * is also the element to focus. Otherwise they stay on the root, which holds the delete button too.
+     */
     className?: string;
     variant?: "filled" | "outlined";
     size?: "small" | "medium";
     color?: ChipColor;
+    /**
+     * Shows a delete button in the chip and runs when it is pressed: a click, or
+     * Enter / Space while the button has focus. In a clickable chip it sits
+     * beside the chip's button, not inside it, and pressing it does not run the
+     * chip's `onClick`.
+     */
     onDelete?: (event: React.SyntheticEvent) => void;
     icon?: React.ReactNode;
     deleteIcon?: React.ReactNode;
     label: string;
+    /**
+     * Makes the chip clickable: its icon and label become a button, named by
+     * them, with a focus ring around the whole chip. The delete button is not
+     * part of that button but its sibling, so it keeps its own name.
+     *
+     * Runs on a click on the chip and on Enter / Space while the chip's button
+     * has focus, but not on a click or key on the delete button.
+     */
     onClick?: () => void;
     onDeleteMouseDown?: React.MouseEventHandler;
+    /**
+     * Disables the chip: it is dimmed, takes no pointer input and says `aria-disabled`, and its delete button is
+     * disabled too. With `onClick` the chip is still a button, out of the tab order.
+     */
     disabled?: boolean;
     asLink?: boolean;
     href?: string;
     /** Open the link in a new tab (asLink only). */
     target?: string;
     selected?: boolean;
+    /**
+     * Id of the label's element, for another element to take the chip's text as
+     * its name (`aria-labelledby`) without the delete button's name.
+     */
+    labelId?: string;
     /** Accessible label for the delete control. */
     deleteAriaLabel?: string;
+    /** Test id of the root; `chip`, or `chip-link` for a link, unless given. */
+    "data-testid"?: string;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement | HTMLAnchorElement>>;
 export default Chip;

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

@@ -1,100 +1,127 @@
-import { jsx as t, jsxs as E, Fragment as F } from "react/jsx-runtime";
+import { jsxs as l, jsx as a, Fragment as L } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/chip/chip.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import v from "react";
-import I from "clsx";
+import u from "react";
+import Z from "clsx";
 import { Ripple as K } from "../../base/ripple/ripple.js";
-import { Icon as q } from "../../base/icon/icon.js";
-const U = v.forwardRef(function({
-  label: N,
-  className: x,
-  deleteIcon: l,
-  icon: m,
-  onDelete: r,
-  onMouseDown: n,
-  onDeleteMouseDown: c,
-  asLink: y,
-  href: o,
-  target: $ = "_blank",
-  selected: g,
-  variant: j = "filled",
-  size: z = "medium",
-  color: p = "default",
-  disabled: i = !1,
-  onClick: a,
-  deleteAriaLabel: B = "Remove",
-  ...d
-}, f) {
-  const b = v.useRef(null), h = (e) => {
-    n == null || n(e);
-  }, u = (e) => {
-    var R;
-    i || (R = b.current) == null || R.onRipple(e);
-  }, k = (e) => {
-    c == null || c(e), e.stopPropagation();
-  }, w = I(
+import { Icon as M } from "../../base/icon/icon.js";
+import { isOwnClick as k } from "../../../utils/ownClick.js";
+import { splitControlProps as C } from "../../../utils/controlProps.js";
+const li = u.forwardRef(function({
+  label: O,
+  labelId: q,
+  className: v,
+  deleteIcon: d,
+  icon: o,
+  onDelete: _,
+  onMouseDown: m,
+  // The chip sets these on its root too; its own handlers call the caller's first.
+  onKeyDown: r,
+  onPointerDown: e,
+  onDeleteMouseDown: n,
+  asLink: G,
+  href: R,
+  target: H = "_blank",
+  selected: J,
+  variant: Q = "filled",
+  size: S = "medium",
+  color: x = "default",
+  disabled: c = !1,
+  onClick: s,
+  deleteAriaLabel: U = "Remove",
+  "data-testid": t,
+  ...f
+}, N) {
+  var B, E;
+  const w = u.useRef(null), b = u.useRef(null), g = (i) => {
+    m == null || m(i);
+  }, $ = (i) => {
+    var F;
+    e == null || e(i), c || (F = w.current) == null || F.onRipple(i);
+  }, V = (i) => {
+    n == null || n(i), i.stopPropagation();
+  }, j = Z(
     "smwb-chip",
-    `smwb-${j}`,
-    `smwb-chip_size-${z}`,
-    p !== "default" && `smwb-chip_color-${p}`,
-    x,
-    { "smwb-disabled": i, "smwb-selected": g }
-  ), _ = /* @__PURE__ */ E(F, { children: [
-    m && /* @__PURE__ */ t("span", { className: "smwb-chip__icon", children: m }),
-    /* @__PURE__ */ t("span", { className: "smwb-chip__label", children: N }),
-    !!r && /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        className: "smwb-chip__delete-icon",
-        "aria-label": B,
-        disabled: i,
-        onClick: r,
-        onMouseDown: k,
-        children: l || /* @__PURE__ */ t(q, { name: "cancel", size: 18, fill: 1 })
-      }
-    ),
-    /* @__PURE__ */ t(K, { actionRef: b })
+    `smwb-${Q}`,
+    `smwb-chip_size-${S}`,
+    x !== "default" && `smwb-chip_color-${x}`,
+    v,
+    { "smwb-disabled": c, "smwb-selected": J }
+  ), W = !!_ && /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: "smwb-chip__delete-icon",
+      "aria-label": U,
+      disabled: c,
+      onClick: _,
+      onMouseDown: V,
+      children: d || /* @__PURE__ */ a(M, { name: "cancel", size: 18, fill: 1 })
+    }
+  ), z = /* @__PURE__ */ l(L, { children: [
+    o && /* @__PURE__ */ a("span", { className: "smwb-chip__icon", children: o }),
+    /* @__PURE__ */ a("span", { id: q, className: "smwb-chip__label", children: O })
+  ] }), y = /* @__PURE__ */ l(L, { children: [
+    W,
+    /* @__PURE__ */ a(K, { actionRef: w })
   ] });
-  if (y && o)
-    return /* @__PURE__ */ t(
+  if (G && R)
+    return /* @__PURE__ */ l(
       "a",
       {
-        ref: f,
-        "data-testid": "chip-link",
-        className: w,
-        href: o,
-        onMouseDown: h,
-        onPointerDown: u,
-        target: $,
-        rel: "noreferrer",
-        ...d,
-        children: _
+        ref: N,
+        "data-testid": t != null ? t : "chip-link",
+        className: j,
+        href: R,
+        onMouseDown: g,
+        onPointerDown: $,
+        target: H,
+        ...f,
+        rel: (B = f.rel) != null ? B : "noreferrer",
+        onKeyDown: r,
+        children: [
+          z,
+          y
+        ]
       }
     );
-  const s = !!a && !i;
-  return /* @__PURE__ */ t(
+  const p = !!s && !c, [h, A] = C(f, !!s), X = (i) => {
+    r == null || r(i), !(!p || i.target !== b.current) && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s == null || s());
+  }, Y = (i) => {
+    k(i, b.current) && (s == null || s(i));
+  };
+  return /* @__PURE__ */ l(
     "span",
     {
-      ref: f,
-      "data-testid": "chip",
-      className: w,
-      role: s ? "button" : void 0,
-      tabIndex: s ? 0 : void 0,
-      "aria-disabled": i || void 0,
-      onClick: s ? a : void 0,
-      onKeyDown: s ? (e) => {
-        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a == null || a());
-      } : void 0,
-      onMouseDown: h,
-      onPointerDown: u,
-      ...d,
-      children: _
+      ref: N,
+      "data-testid": t != null ? t : "chip",
+      className: j,
+      ...A,
+      "aria-disabled": s ? void 0 : c || A["aria-disabled"],
+      onClick: p ? Y : void 0,
+      onKeyDown: X,
+      onMouseDown: g,
+      onPointerDown: $,
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            ...h,
+            ref: b,
+            className: "smwb-chip__content",
+            role: s ? "button" : void 0,
+            tabIndex: (E = h.tabIndex) != null ? E : p ? 0 : void 0,
+            "aria-disabled": s ? c || h["aria-disabled"] : void 0,
+            children: z
+          }
+        ),
+        y
+      ]
     }
   );
 });
 export {
-  U as Chip,
-  U as default
+  li as Chip,
+  li as default
 };
 //# 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 React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\n\nexport type ChipColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement | HTMLAnchorElement> {\n  className?: string;\n  variant?: \"filled\" | \"outlined\";\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  onDelete?: (event: React.SyntheticEvent) => void;\n  icon?: React.ReactNode;\n  deleteIcon?: React.ReactNode;\n  label: string;\n  onClick?: () => void;\n  onDeleteMouseDown?: React.MouseEventHandler;\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}\n\nexport const Chip = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, ChipProps>(function Chip(\n  {\n    label,\n    className,\n    deleteIcon,\n    icon,\n    onDelete,\n    onMouseDown: onMouseDownProp,\n    onDeleteMouseDown: onDeleteMouseDownProp,\n    asLink,\n    href,\n    target = \"_blank\",\n    selected,\n    variant = \"filled\",\n    size = \"medium\",\n    color = \"default\",\n    disabled = false,\n    onClick,\n    deleteAriaLabel = \"Remove\",\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown = (event: React.MouseEvent) => {\n    onDeleteMouseDownProp?.(event);\n    event.stopPropagation();\n  };\n\n  const classes = cn(\n    \"smwb-chip\",\n    `smwb-${variant}`,\n    `smwb-chip_size-${size}`,\n    color !== \"default\" && `smwb-chip_color-${color}`,\n    className,\n    { \"smwb-disabled\": disabled, \"smwb-selected\": selected }\n  );\n\n  const deleteBtn = !!onDelete && (\n    <button\n      type=\"button\"\n      className=\"smwb-chip__delete-icon\"\n      aria-label={deleteAriaLabel}\n      disabled={disabled}\n      onClick={onDelete}\n      onMouseDown={onDeleteMouseDown}\n    >\n      {deleteIcon ? deleteIcon : <Icon name=\"cancel\" size={18} fill={1} />}\n    </button>\n  );\n\n  const inner = (\n    <>\n      {icon && <span className=\"smwb-chip__icon\">{icon}</span>}\n      <span className=\"smwb-chip__label\">{label}</span>\n      {deleteBtn}\n      <Ripple actionRef={rippleRef} />\n    </>\n  );\n\n  if (asLink && href) {\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        data-testid=\"chip-link\"\n        className={classes}\n        href={href}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        target={target}\n        rel=\"noreferrer\"\n        {...rest}\n      >\n        {inner}\n      </a>\n    );\n  }\n\n  const clickable = !!onClick && !disabled;\n\n  return (\n    <span\n      ref={ref}\n      data-testid=\"chip\"\n      className={classes}\n      role={clickable ? \"button\" : undefined}\n      tabIndex={clickable ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={\n        clickable\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.();\n              }\n            }\n          : undefined\n      }\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n      {...rest}\n    >\n      {inner}\n    </span>\n  );\n});\n\nexport default Chip;\n"],"names":["Chip","React","label","className","deleteIcon","icon","onDelete","onMouseDownProp","onDeleteMouseDownProp","asLink","href","target","selected","variant","size","color","disabled","onClick","deleteAriaLabel","rest","ref","rippleRef","onMouseDown","event","onPointerDown","_a","onDeleteMouseDown","classes","cn","inner","jsxs","Fragment","jsx","Icon","Ripple","clickable"],"mappings":";;;;;;;AA8BO,MAAMA,IAAOC,EAAM,WAA2D,SACnF;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAaC;AAAA,EACb,mBAAmBC;AAAA,EACnB,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAYpB,EAAM,OAAyB,IAAI,GAE/CqB,IAAc,CAACC,MAAiE;AACpF,IAAAhB,KAAA,QAAAA,EAAkBgB;AAAA,EACpB,GAGMC,IAAgB,CAACD,MAAmE;;AACxF,IAAKP,MACHS,IAAAJ,EAAU,YAAV,QAAAI,EAAmB,SAASF;AAAA,EAEhC,GAEMG,IAAoB,CAACH,MAA4B;AACrD,IAAAf,KAAA,QAAAA,EAAwBe,IACxBA,EAAM,gBAAA;AAAA,EACR,GAEMI,IAAUC;AAAA,IACd;AAAA,IACA,QAAQf,CAAO;AAAA,IACf,kBAAkBC,CAAI;AAAA,IACtBC,MAAU,aAAa,mBAAmBA,CAAK;AAAA,IAC/CZ;AAAA,IACA,EAAE,iBAAiBa,GAAU,iBAAiBJ,EAAA;AAAA,EAAS,GAgBnDiB,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAA1B,KAAQ,gBAAA2B,EAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA3B,GAAK;AAAA,IACjD,gBAAA2B,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA9B,GAAM;AAAA,IAhB5B,CAAC,CAACI,KAClB,gBAAA0B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAYd;AAAA,QACZ,UAAAF;AAAA,QACA,SAASV;AAAA,QACT,aAAaoB;AAAA,QAEZ,UAAAtB,KAA0B,gBAAA4B,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,MAAM,EAAA,CAAG;AAAA,MAAA;AAAA,IAAA;AAAA,IASlE,gBAAAD,EAACE,GAAA,EAAO,WAAWb,EAAA,CAAW;AAAA,EAAA,GAChC;AAGF,MAAIZ,KAAUC;AACZ,WACE,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,eAAY;AAAA,QACZ,WAAWO;AAAA,QACX,MAAAjB;AAAA,QACA,aAAAY;AAAA,QACA,eAAAE;AAAA,QACA,QAAAb;AAAA,QACA,KAAI;AAAA,QACH,GAAGQ;AAAA,QAEH,UAAAU;AAAA,MAAA;AAAA,IAAA;AAKP,QAAMM,IAAY,CAAC,CAAClB,KAAW,CAACD;AAEhC,SACE,gBAAAgB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,eAAY;AAAA,MACZ,WAAWO;AAAA,MACX,MAAMQ,IAAY,WAAW;AAAA,MAC7B,UAAUA,IAAY,IAAI;AAAA,MAC1B,iBAAenB,KAAY;AAAA,MAC3B,SAASmB,IAAYlB,IAAU;AAAA,MAC/B,WACEkB,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFlB,KAAA,QAAAA;AAAA,MAEJ,IACA;AAAA,MAEN,aAAAK;AAAA,MACA,eAAAE;AAAA,MACC,GAAGL;AAAA,MAEH,UAAAU;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"chip.js","sources":["../../../../src/components/dataDisplay/chip/chip.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Ripple, RippleActionsRef } from \"../../base/ripple/ripple\";\nimport Icon from \"../../base/icon/icon\";\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 React.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  className?: string;\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: React.SyntheticEvent) => void;\n  icon?: React.ReactNode;\n  deleteIcon?: React.ReactNode;\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?: React.MouseEventHandler;\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;\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;\n}\n\nexport const Chip = React.forwardRef<HTMLSpanElement | HTMLAnchorElement, ChipProps>(function Chip(\n  {\n    label,\n    labelId,\n    className,\n    deleteIcon,\n    icon,\n    onDelete,\n    onMouseDown: onMouseDownProp,\n    // The chip sets these on its root too; its own handlers call the caller's first.\n    onKeyDown: onKeyDownProp,\n    onPointerDown: onPointerDownProp,\n    onDeleteMouseDown: onDeleteMouseDownProp,\n    asLink,\n    href,\n    target = \"_blank\",\n    selected,\n    variant = \"filled\",\n    size = \"medium\",\n    color = \"default\",\n    disabled = false,\n    onClick,\n    deleteAriaLabel = \"Remove\",\n    \"data-testid\": dataTestId,\n    ...rest\n  },\n  ref\n) {\n  const rippleRef = React.useRef<RippleActionsRef>(null);\n  const contentRef = React.useRef<HTMLSpanElement | null>(null);\n\n  const onMouseDown = (event: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onMouseDownProp?.(event);\n  };\n\n  // Ripple on pointerdown so it fires for touch and pen, not just mouse.\n  const onPointerDown = (event: React.PointerEvent<HTMLSpanElement | HTMLAnchorElement>) => {\n    onPointerDownProp?.(event);\n    if (!disabled) {\n      rippleRef.current?.onRipple(event);\n    }\n  };\n\n  const onDeleteMouseDown = (event: React.MouseEvent) => {\n    onDeleteMouseDownProp?.(event);\n    event.stopPropagation();\n  };\n\n  const classes = cn(\n    \"smwb-chip\",\n    `smwb-${variant}`,\n    `smwb-chip_size-${size}`,\n    color !== \"default\" && `smwb-chip_color-${color}`,\n    className,\n    { \"smwb-disabled\": disabled, \"smwb-selected\": selected }\n  );\n\n  const deleteBtn = !!onDelete && (\n    <button\n      type=\"button\"\n      className=\"smwb-chip__delete-icon\"\n      aria-label={deleteAriaLabel}\n      disabled={disabled}\n      onClick={onDelete}\n      onMouseDown={onDeleteMouseDown}\n    >\n      {deleteIcon ? deleteIcon : <Icon name=\"cancel\" size={18} fill={1} />}\n    </button>\n  );\n\n  // The chip's own content: its button when it is clickable.\n  const iconAndLabel = (\n    <>\n      {icon && <span className=\"smwb-chip__icon\">{icon}</span>}\n      <span id={labelId} className=\"smwb-chip__label\">\n        {label}\n      </span>\n    </>\n  );\n  // After the content: in a clickable chip, beside its button, not in it.\n  const trailing = (\n    <>\n      {deleteBtn}\n      <Ripple actionRef={rippleRef} />\n    </>\n  );\n\n  if (asLink && href) {\n    return (\n      <a\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        data-testid={dataTestId ?? \"chip-link\"}\n        className={classes}\n        href={href}\n        onMouseDown={onMouseDown}\n        onPointerDown={onPointerDown}\n        target={target}\n        {...rest}\n        // A default: the caller's rel wins, and an explicit undefined keeps it.\n        rel={rest.rel ?? \"noreferrer\"}\n        onKeyDown={onKeyDownProp}\n      >\n        {iconAndLabel}\n        {trailing}\n      </a>\n    );\n  }\n\n  const clickable = !!onClick && !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, !!onClick);\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 = (event: React.KeyboardEvent<HTMLSpanElement>) => {\n    onKeyDownProp?.(event);\n    if (!clickable || event.target !== contentRef.current) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      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 React\n  // delivers here too. The click goes along to onClick, as it always has,\n  // though its type takes none.\n  const onChipClick = (event: React.MouseEvent<HTMLSpanElement>) => {\n    if (isOwnClick(event, contentRef.current)) {\n      (onClick as React.MouseEventHandler<HTMLSpanElement> | undefined)?.(event);\n    }\n  };\n\n  return (\n    <span\n      ref={ref}\n      data-testid={dataTestId ?? \"chip\"}\n      className={classes}\n      {...box}\n      // A disabled chip says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without.\n      aria-disabled={onClick ? undefined : disabled || box[\"aria-disabled\"]}\n      onClick={clickable ? onChipClick : undefined}\n      onKeyDown={onKeyDown}\n      onMouseDown={onMouseDown}\n      onPointerDown={onPointerDown}\n    >\n      <span\n        {...control}\n        ref={contentRef}\n        className=\"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        // the caller's stay. Its tabIndex is a default: the caller's wins, e.g.\n        // for roving focus.\n        role={onClick ? \"button\" : undefined}\n        tabIndex={control.tabIndex ?? (clickable ? 0 : undefined)}\n        aria-disabled={onClick ? disabled || control[\"aria-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\nexport default Chip;\n"],"names":["Chip","React","label","labelId","className","deleteIcon","icon","onDelete","onMouseDownProp","onKeyDownProp","onPointerDownProp","onDeleteMouseDownProp","asLink","href","target","selected","variant","size","color","disabled","onClick","deleteAriaLabel","dataTestId","rest","ref","rippleRef","contentRef","onMouseDown","event","onPointerDown","_a","onDeleteMouseDown","classes","cn","deleteBtn","jsx","Icon","iconAndLabel","jsxs","Fragment","trailing","Ripple","clickable","control","box","splitControlProps","onKeyDown","onChipClick","isOwnClick","_b"],"mappings":"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"}

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

@@ -1,43 +1,47 @@
 import { jsx as t } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/chipGroup/chipGroup.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import A from "clsx";
-import { Chip as j } from "../chip/chip.js";
-function V({
-  options: u,
+import j from "clsx";
+import { Chip as k } from "../chip/chip.js";
+function q({
+  options: m,
   value: e,
-  multiple: d,
+  multiple: f,
   onChange: l,
-  size: m = "medium",
-  color: f = "primary",
-  disabled: a,
-  className: b,
-  ...p
+  size: a = "medium",
+  color: b = "primary",
+  disabled: p,
+  className: v,
+  ...i
 }) {
-  const c = () => e == null ? [] : Array.isArray(e) ? e : [e], i = (r) => c().includes(r), v = (r) => {
-    if (d) {
-      const s = c(), x = s.includes(r) ? s.filter((y) => y !== r) : [...s, r];
-      l == null || l(x);
+  var d;
+  const s = () => e == null ? [] : Array.isArray(e) ? e : [e], u = (r) => s().includes(r), x = (r) => {
+    if (f) {
+      const c = s(), y = c.includes(r) ? c.filter((A) => A !== r) : [...c, r];
+      l == null || l(y);
     } else
       l == null || l(r);
   };
-  return /* @__PURE__ */ t("div", { ...p, role: "group", className: A("smwb-chip-group", b), children: u.map((r) => /* @__PURE__ */ t(
-    j,
-    {
-      label: r.label,
-      icon: r.icon,
-      size: m,
-      color: f,
-      selected: i(r.value),
-      variant: i(r.value) ? "filled" : "outlined",
-      disabled: !!(a || r.disabled),
-      onClick: () => v(r.value)
-    },
-    r.value
-  )) });
+  return (
+    // role="group" is a default: the caller's own wins, and an explicit undefined keeps it.
+    /* @__PURE__ */ t("div", { ...i, role: (d = i.role) != null ? d : "group", className: j("smwb-chip-group", v), children: m.map((r) => /* @__PURE__ */ t(
+      k,
+      {
+        label: r.label,
+        icon: r.icon,
+        size: a,
+        color: b,
+        selected: u(r.value),
+        variant: u(r.value) ? "filled" : "outlined",
+        disabled: !!(p || r.disabled),
+        onClick: () => x(r.value)
+      },
+      r.value
+    )) })
+  );
 }
 export {
-  V as ChipGroup,
-  V as default
+  q as ChipGroup,
+  q as default
 };
 //# sourceMappingURL=chipGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.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`) apps re-hand-roll for\n * 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({\n  options,\n  value,\n  multiple,\n  onChange,\n  size = \"medium\",\n  color = \"primary\",\n  disabled,\n  className,\n  ...rest\n}: ChipGroupProps): React.ReactElement {\n  const selectedValues = (): string[] => {\n    if (value == null) return [];\n    return Array.isArray(value) ? value : [value];\n  };\n  const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n  const toggle = (option: string): void => {\n    if (multiple) {\n      const current = selectedValues();\n      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n      onChange?.(next);\n    } else {\n      onChange?.(option);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" className={cn(\"smwb-chip-group\", className)}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          label={option.label}\n          icon={option.icon}\n          size={size}\n          color={color}\n          selected={isSelected(option.value)}\n          variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n          disabled={!!(disabled || option.disabled)}\n          onClick={() => toggle(option.value)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","jsx","cn","Chip"],"mappings":";;;;;AA+BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA,SACE,gBAAAK,EAAC,OAAA,EAAK,GAAGR,GAAM,MAAK,SAAQ,WAAWS,EAAG,mBAAmBV,CAAS,GACnE,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAK;AAAA,IAACE;AAAA,IAAA;AAAA,MAEC,OAAOP,EAAO;AAAA,MACd,MAAMA,EAAO;AAAA,MACb,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,MACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,MAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,MAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,IAAA;AAAA,IAR7BA,EAAO;AAAA,EAAA,CAUf,GACH;AAEJ;"}
+{"version":3,"file":"chipGroup.js","sources":["../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<React.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`) apps re-hand-roll for\n * 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({\n  options,\n  value,\n  multiple,\n  onChange,\n  size = \"medium\",\n  color = \"primary\",\n  disabled,\n  className,\n  ...rest\n}: ChipGroupProps): React.ReactElement {\n  const selectedValues = (): string[] => {\n    if (value == null) return [];\n    return Array.isArray(value) ? value : [value];\n  };\n  const isSelected = (option: string): boolean => selectedValues().includes(option);\n\n  const toggle = (option: string): void => {\n    if (multiple) {\n      const current = selectedValues();\n      const next = current.includes(option) ? current.filter((v) => v !== option) : [...current, option];\n      onChange?.(next);\n    } else {\n      onChange?.(option);\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\"} className={cn(\"smwb-chip-group\", className)}>\n      {options.map((option) => (\n        <Chip\n          key={option.value}\n          label={option.label}\n          icon={option.icon}\n          size={size}\n          color={color}\n          selected={isSelected(option.value)}\n          variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n          disabled={!!(disabled || option.disabled)}\n          onClick={() => toggle(option.value)}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","options","value","multiple","onChange","size","color","disabled","className","rest","selectedValues","isSelected","option","toggle","current","next","v","_a","cn","jsx","Chip"],"mappings":";;;;;AA+BO,SAASA,EAAU;AAAA,EACxB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuC;;AACrC,QAAMC,IAAiB,MACjBR,KAAS,OAAa,CAAA,IACnB,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK,GAExCS,IAAa,CAACC,MAA4BF,EAAA,EAAiB,SAASE,CAAM,GAE1EC,IAAS,CAACD,MAAyB;AACvC,QAAIT,GAAU;AACZ,YAAMW,IAAUJ,EAAA,GACVK,IAAOD,EAAQ,SAASF,CAAM,IAAIE,EAAQ,OAAO,CAACE,MAAMA,MAAMJ,CAAM,IAAI,CAAC,GAAGE,GAASF,CAAM;AACjG,MAAAR,KAAA,QAAAA,EAAWW;AAAA,IACb;AACE,MAAAX,KAAA,QAAAA,EAAWQ;AAAA,EAEf;AAEA;AAAA;AAAA,sBAEG,OAAA,EAAK,GAAGH,GAAM,OAAMQ,IAAAR,EAAK,SAAL,OAAAQ,IAAa,SAAS,WAAWC,EAAG,mBAAmBV,CAAS,GAClF,UAAAP,EAAQ,IAAI,CAACW,MACZ,gBAAAO;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,OAAOR,EAAO;AAAA,QACd,MAAMA,EAAO;AAAA,QACb,MAAAP;AAAA,QACA,OAAAC;AAAA,QACA,UAAUK,EAAWC,EAAO,KAAK;AAAA,QACjC,SAASD,EAAWC,EAAO,KAAK,IAAI,WAAW;AAAA,QAC/C,UAAU,CAAC,EAAEL,KAAYK,EAAO;AAAA,QAChC,SAAS,MAAMC,EAAOD,EAAO,KAAK;AAAA,MAAA;AAAA,MAR7BA,EAAO;AAAA,IAAA,CAUf,EAAA,CACH;AAAA;AAEJ;"}

package/dist/components/dataDisplay/descriptionList/descriptionList.d.ts

@@ -6,15 +6,23 @@ export interface DescriptionListEntry {
     key?: React.Key;
 }
 /**
- * `auto`: the term beside its description while the list's container is at
- * least 420px wide, above it when narrower (a container query). `row` and
- * `stacked` fix one layout.
+ * `auto`: the term beside its description while the list is at least 420px
+ * wide, above it when narrower (a container query on the list itself). `row`
+ * and `stacked` fix one layout.
  */
 export type DescriptionListLayout = "auto" | "row" | "stacked";
 export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     className?: string;
     /** The pairs as data; `DescriptionItem` children work too, and come after them. */
     items?: DescriptionListEntry[];
+    /**
+     * "auto" (default): each term beside its value while the list is at least
+     * 420px wide, above it when narrower — the list's own width decides. So its
+     * content does not widen it: where the parent takes its width from its
+     * content (a flex item that does not grow, a popover, a table cell) the list
+     * has no width; give it one there, or use "row" / "stacked", which fix one
+     * layout and take their width from their content.
+     */
     layout?: DescriptionListLayout;
     /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */
     termWidth?: number | string;

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

@@ -1 +1 @@
-{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list's container is at\n * least 420px wide, above it when narrower (a container query). `row` and\n * `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;;;AAqCO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}
+{"version":3,"file":"descriptionList.js","sources":["../../../../src/components/dataDisplay/descriptionList/descriptionList.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface DescriptionListEntry {\n  term: ReactNode;\n  description: ReactNode;\n  /** React key; the index is used without it. */\n  key?: React.Key;\n}\n\n/**\n * `auto`: the term beside its description while the list is at least 420px\n * wide, above it when narrower (a container query on the list itself). `row`\n * and `stacked` fix one layout.\n */\nexport type DescriptionListLayout = \"auto\" | \"row\" | \"stacked\";\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  className?: string;\n  /** The pairs as data; `DescriptionItem` children work too, and come after them. */\n  items?: DescriptionListEntry[];\n  /**\n   * \"auto\" (default): each term beside its value while the list is at least\n   * 420px wide, above it when narrower — the list's own width decides. So its\n   * content does not widen it: where the parent takes its width from its\n   * content (a flex item that does not grow, a popover, a table cell) the list\n   * has no width; give it one there, or use \"row\" / \"stacked\", which fix one\n   * layout and take their width from their content.\n   */\n  layout?: DescriptionListLayout;\n  /** Width of the term column in the row layout: px or any CSS track size. 30% of the list, at least 6rem, by default. */\n  termWidth?: number | string;\n  /** Tighter spacing, for side panels. */\n  dense?: boolean;\n}\n\nexport interface DescriptionItemProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /** The field's name. */\n  term: ReactNode;\n}\n\n/** One pair: the term and, as children, its description. */\nexport const DescriptionItem = React.forwardRef<HTMLDivElement, PropsWithChildren<DescriptionItemProps>>(\n  function DescriptionItem({ className, term, children, ...rest }, ref) {\n    return (\n      <div {...rest} ref={ref} className={cn(\"smwb-description-list__item\", className)}>\n        <dt className=\"smwb-description-list__term\">{term}</dt>\n        <dd className=\"smwb-description-list__details\">{children}</dd>\n      </div>\n    );\n  }\n);\n\n/** Field–value pairs (a `<dl>`): side by side, stacking on a narrow container. */\nexport const DescriptionList = React.forwardRef<HTMLDListElement, PropsWithChildren<DescriptionListProps>>(\n  function DescriptionList({ className, style, items, layout = \"auto\", termWidth, dense, children, ...rest }, ref) {\n    const width = typeof termWidth === \"number\" ? `${termWidth}px` : termWidth;\n    return (\n      <dl\n        {...rest}\n        ref={ref}\n        className={cn(\n          \"smwb-description-list\",\n          `smwb-description-list_${layout}`,\n          { \"smwb-description-list_dense\": dense },\n          className\n        )}\n        style={width === undefined ? style : ({ ...style, \"--smwb-description-term\": width } as CSSProperties)}\n      >\n        {items?.map((item, index) => (\n          <DescriptionItem key={item.key ?? index} term={item.term}>\n            {item.description}\n          </DescriptionItem>\n        ))}\n        {children}\n      </dl>\n    );\n  }\n);\n\nexport default DescriptionList;\n"],"names":["DescriptionItem","React","className","term","children","rest","ref","jsxs","cn","jsx","DescriptionList","style","items","layout","termWidth","dense","width","item","index","_a"],"mappings":";;;;;AA6CO,MAAMA,IAAkBC,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAAC,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACpE,WACE,gBAAAC,EAAC,SAAK,GAAGF,GAAM,KAAAC,GAAU,WAAWE,EAAG,+BAA+BN,CAAS,GAC7E,UAAA;AAAA,MAAA,gBAAAO,EAAC,MAAA,EAAG,WAAU,+BAA+B,UAAAN,GAAK;AAAA,MAClD,gBAAAM,EAAC,MAAA,EAAG,WAAU,kCAAkC,UAAAL,EAAA,CAAS;AAAA,IAAA,GAC3D;AAAA,EAEJ;AACF,GAGaM,IAAkBT,EAAM;AAAA,EACnC,SAAyB,EAAE,WAAAC,GAAW,OAAAS,GAAO,OAAAC,GAAO,QAAAC,IAAS,QAAQ,WAAAC,GAAW,OAAAC,GAAO,UAAAX,GAAU,GAAGC,EAAA,GAAQC,GAAK;AAC/G,UAAMU,IAAQ,OAAOF,KAAc,WAAW,GAAGA,CAAS,OAAOA;AACjE,WACE,gBAAAP;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGF;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE;AAAA,UACT;AAAA,UACA,yBAAyBK,CAAM;AAAA,UAC/B,EAAE,+BAA+BE,EAAA;AAAA,UACjCb;AAAA,QAAA;AAAA,QAEF,OAAOc,MAAU,SAAYL,IAAS,EAAE,GAAGA,GAAO,2BAA2BK,EAAA;AAAA,QAE5E,UAAA;AAAA,UAAAJ,KAAA,gBAAAA,EAAO,IAAI,CAACK,GAAMC,MAAA;;qCAChBlB,GAAA,EAAwC,MAAMiB,EAAK,MACjD,UAAAA,EAAK,YAAA,IADcE,IAAAF,EAAK,QAAL,OAAAE,IAAYD,CAElC;AAAA;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;"}