@smwb/ui-react 2.7.0 → 2.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"kanban.js","sources":["../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"kanban\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={{ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties}\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn({ className, style, title, count, accent, empty, footer, children, ...rest }, ref) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid=\"kanban-column\"\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={{ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid=\"kanban-card\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;;;AAsCA,MAAMA,IAAY,CAACC,MACjB,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEvCC,IAAU,CAACD,MACQA,KAAU,QAAQA,MAAU,MAASA,MAAU,MAAQA,MAAU,IAG7EE,IAASC,EAAM,WAA2D,SACrF,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,GAAGC,EAAA,GAC9CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeP,CAAS;AAAA,MACtC,OAAO,EAAE,GAAGC,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAErE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAeT,EAAM;AAAA,EAChC,SAAsB,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,QAAAC,GAAQ,UAAAV,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACvG,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWjB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,mBAAiBH;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBP,CAAS;AAAA,QAC9C,OAAO,EAAE,GAAGC,GAAO,wBAAwBU,EAAA;AAAA,QAE3C,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,6BAA4B,IAAIQ,GAC5C,UAAAL,GACH;AAAA,YACwBC,KAAU,yBAAQ,QAAA,EAAK,WAAU,sBAAsB,UAAAA,EAAA,CAAM,IAAU;AAAA,UAAA,GACjG;AAAA,UACCM,IACC,gBAAAV,EAAC,MAAA,EAAG,WAAU,sBAAqB,MAAK,QACrC,UAAAH,GACH,IACEN,EAAQe,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHT,EAAQgB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAanB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAjB,GAAU,GAAGC,EAAA,GAC9DC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGb;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKnB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOmB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAvB,EAAQY,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHT,EAAQM,CAAQ,IAAI,gBAAAG,EAAC,SAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}
+{"version":3,"file":"kanban.js","sources":["../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, \"data-testid\": dataTestId = \"kanban\", ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={\n        columnWidth === undefined\n          ? style\n          : ({ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties)\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn(\n    {\n      className,\n      style,\n      title,\n      count,\n      accent,\n      empty,\n      footer,\n      children,\n      \"data-testid\": dataTestId = \"kanban-column\",\n      ...rest\n    },\n    ref\n  ) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid={dataTestId}\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={accent === undefined ? style : ({ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties)}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, \"data-testid\": dataTestId = \"kanban-card\", ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","dataTestId","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;;;AA4CA,MAAMA,IAAY,CAACC,MACjB,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEvCC,IAAU,CAACD,MACQA,KAAU,QAAQA,MAAU,MAASA,MAAU,MAAQA,MAAU,IAG7EE,IAASC,EAAM,WAA2D,SACrF,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,eAAeC,IAAa,UAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaH;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeR,CAAS;AAAA,MACtC,OACEE,MAAgB,SACZD,IACC,EAAE,GAAGA,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAGrE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYM,IAAeV,EAAM;AAAA,EAChC,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAS;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAX;AAAA,IACA,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWlB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAad;AAAA,QACb,MAAK;AAAA,QACL,mBAAiBW;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBR,CAAS;AAAA,QAC9C,OAAOY,MAAW,SAAYX,IAAS,EAAE,GAAGA,GAAO,wBAAwBW,EAAA;AAAA,QAE3E,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,6BAA4B,IAAIQ,GAC5C,UAAAL,GACH;AAAA,YACwBC,KAAU,yBAAQ,QAAA,EAAK,WAAU,sBAAsB,UAAAA,EAAA,CAAM,IAAU;AAAA,UAAA,GACjG;AAAA,UACCM,IACC,gBAAAV,EAAC,MAAA,EAAG,WAAU,sBAAqB,MAAK,QACrC,UAAAJ,GACH,IACEN,EAAQgB,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHV,EAAQiB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAapB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAS,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAlB,GAAU,eAAeC,IAAa,eAAe,GAAGC,EAAA,GACzGC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAad;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKpB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOoB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAxB,EAAQa,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHV,EAAQM,CAAQ,IAAI,gBAAAI,EAAC,SAAI,WAAU,0BAA0B,UAAAJ,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}

package/dist/components/dataDisplay/kbd/index.d.ts

@@ -0,0 +1,4 @@
+export { Kbd, default } from "./kbd";
+export { detectKbdPlatform, kbdKeyLabel } from "./kbdKeys";
+export type { KbdProps } from "./kbd";
+export type { KbdPlatform, KbdKeyLabel } from "./kbdKeys";

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

@@ -0,0 +1,40 @@
+import React, { type HTMLAttributes } from "react";
+import { type KbdPlatform } from "./kbdKeys";
+export interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    className?: string;
+    /**
+     * The keys of the shortcut in order, e.g. `["Mod", "K"]` or `["Shift", "Enter"]`. `Mod` is the
+     * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,
+     * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the
+     * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,
+     * Esc, Tab, Backspace and Del, whatever their case. `" "` and `Space` are the Space key, `+` and
+     * `Plus` the plus key.
+     * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given
+     * (a single letter in upper case).
+     */
+    keys: string[];
+    /**
+     * The platform whose keys are drawn. Without it the browser's own is used: `other` on the
+     * server and in the first client render (so that hydration matches), `mac` right after on a Mac.
+     * Set it for a fixed look, in stories and in tests.
+     */
+    platform?: KbdPlatform;
+    /**
+     * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols
+     * stand side by side; `""` draws none. It is for the eye only; assistive technology reads `label`.
+     */
+    separator?: string;
+    /**
+     * What assistive technology reads instead of the key caps. By default the key names, joined
+     * with `+` on `other` ("Ctrl+K") and with a space on `mac` ("Command K").
+     */
+    label?: string;
+    /** Test id of the root `<kbd>`; `kbd` unless given. */
+    "data-testid"?: string;
+}
+/**
+ * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and
+ * every cap are `<kbd>`; assistive technology reads one text ("Ctrl+K", "Command K") and skips the caps.
+ */
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
+export default Kbd;

package/dist/components/dataDisplay/kbd/kbd.js

@@ -0,0 +1,27 @@
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/kbd/kbd.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                 */
+import f, { useState as _ } from "react";
+import l from "clsx";
+import { useSafeLayoutEffect as K } from "../../../hooks/useSafeLayoutEffect.js";
+import { kbdKeyLabel as x, detectKbdPlatform as N } from "./kbdKeys.js";
+function j(t) {
+  const [s, n] = _("other");
+  return K(() => {
+    t === void 0 && n(N());
+  }, [t]), t != null ? t : s;
+}
+const D = f.forwardRef(function({ className: s, keys: n, platform: u, separator: m, label: c, "data-testid": k = "kbd", ...h }, p) {
+  const d = j(u), o = n.map((e) => x(e, d)), r = m != null ? m : d === "mac" ? "" : "+", w = c != null ? c : o.map((e) => e.name).join(d === "mac" ? " " : "+");
+  return /* @__PURE__ */ b("kbd", { ...h, ref: p, "data-testid": k, "data-platform": d, className: l("smwb-kbd", s), children: [
+    /* @__PURE__ */ a("span", { className: "smwb-kbd__text", children: w }),
+    o.map((e, i) => /* @__PURE__ */ b(f.Fragment, { children: [
+      i > 0 && r !== "" ? /* @__PURE__ */ a("span", { className: "smwb-kbd__separator", "aria-hidden": "true", children: r }) : null,
+      /* @__PURE__ */ a("kbd", { className: "smwb-kbd__key", "aria-hidden": "true", children: e.text })
+    ] }, i))
+  ] });
+});
+export {
+  D as Kbd
+};
+//# sourceMappingURL=kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","sources":["../../../../src/components/dataDisplay/kbd/kbd.tsx"],"sourcesContent":["import React, { type HTMLAttributes, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { detectKbdPlatform, kbdKeyLabel, type KbdPlatform } from \"./kbdKeys\";\n\nexport interface KbdProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  className?: string;\n  /**\n   * The keys of the shortcut in order, e.g. `[\"Mod\", \"K\"]` or `[\"Shift\", \"Enter\"]`. `Mod` is the\n   * Command key on macOS and Ctrl elsewhere. On macOS, `Shift`, `Alt`/`Option`, `Ctrl`/`Control`,\n   * `Meta`/`Cmd`/`Command`, `Enter`, `Escape`, `Tab`, `Backspace` and `Delete` are drawn as the\n   * symbols of the Mac keyboard; elsewhere the same names are drawn as Ctrl, Alt, Shift, Meta, Enter,\n   * Esc, Tab, Backspace and Del, whatever their case. `\" \"` and `Space` are the Space key, `+` and\n   * `Plus` the plus key.\n   * Arrow names (`ArrowUp` or `Up`, …) are arrows everywhere; any other key is drawn as given\n   * (a single letter in upper case).\n   */\n  keys: string[];\n  /**\n   * The platform whose keys are drawn. Without it the browser's own is used: `other` on the\n   * server and in the first client render (so that hydration matches), `mac` right after on a Mac.\n   * Set it for a fixed look, in stories and in tests.\n   */\n  platform?: KbdPlatform;\n  /**\n   * Drawn between the key caps. By default `+` on `other` and nothing on `mac`, where the symbols\n   * stand side by side; `\"\"` draws none. It is for the eye only; assistive technology reads `label`.\n   */\n  separator?: string;\n  /**\n   * What assistive technology reads instead of the key caps. By default the key names, joined\n   * with `+` on `other` (\"Ctrl+K\") and with a space on `mac` (\"Command K\").\n   */\n  label?: string;\n  /** Test id of the root `<kbd>`; `kbd` unless given. */\n  \"data-testid\"?: string;\n}\n\n/** The platform asked for, or the browser's: `other` until the client has mounted. */\nfunction useKbdPlatform(platform: KbdPlatform | undefined): KbdPlatform {\n  const [detected, setDetected] = useState<KbdPlatform>(\"other\");\n  useSafeLayoutEffect(() => {\n    if (platform === undefined) {\n      setDetected(detectKbdPlatform());\n    }\n  }, [platform]);\n  return platform ?? detected;\n}\n\n/**\n * A keyboard shortcut as key caps, for a tooltip, a menu item or a command palette. The root and\n * every cap are `<kbd>`; assistive technology reads one text (\"Ctrl+K\", \"Command K\") and skips the caps.\n */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { className, keys, platform: platformProp, separator, label, \"data-testid\": dataTestId = \"kbd\", ...rest },\n  ref\n) {\n  const platform = useKbdPlatform(platformProp);\n  const labels = keys.map((key) => kbdKeyLabel(key, platform));\n  const between = separator ?? (platform === \"mac\" ? \"\" : \"+\");\n  const spoken = label ?? labels.map((item) => item.name).join(platform === \"mac\" ? \" \" : \"+\");\n\n  return (\n    <kbd {...rest} ref={ref} data-testid={dataTestId} data-platform={platform} className={cn(\"smwb-kbd\", className)}>\n      <span className=\"smwb-kbd__text\">{spoken}</span>\n      {labels.map((item, index) => (\n        <React.Fragment key={index}>\n          {index > 0 && between !== \"\" ? (\n            <span className=\"smwb-kbd__separator\" aria-hidden=\"true\">\n              {between}\n            </span>\n          ) : null}\n          <kbd className=\"smwb-kbd__key\" aria-hidden=\"true\">\n            {item.text}\n          </kbd>\n        </React.Fragment>\n      ))}\n    </kbd>\n  );\n});\n\nexport default Kbd;\n"],"names":["useKbdPlatform","platform","detected","setDetected","useState","useSafeLayoutEffect","detectKbdPlatform","Kbd","React","className","keys","platformProp","separator","label","dataTestId","rest","ref","labels","key","kbdKeyLabel","between","spoken","item","jsxs","cn","jsx","index"],"mappings":";;;;;;;AAyCA,SAASA,EAAeC,GAAgD;AACtE,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAsB,OAAO;AAC7D,SAAAC,EAAoB,MAAM;AACxB,IAAIJ,MAAa,UACfE,EAAYG,GAAmB;AAAA,EAEnC,GAAG,CAACL,CAAQ,CAAC,GACNA,KAAA,OAAAA,IAAYC;AACrB;AAMO,MAAMK,IAAMC,EAAM,WAAkC,SACzD,EAAE,WAAAC,GAAW,MAAAC,GAAM,UAAUC,GAAc,WAAAC,GAAW,OAAAC,GAAO,eAAeC,IAAa,OAAO,GAAGC,EAAA,GACnGC,GACA;AACA,QAAMf,IAAWD,EAAeW,CAAY,GACtCM,IAASP,EAAK,IAAI,CAACQ,MAAQC,EAAYD,GAAKjB,CAAQ,CAAC,GACrDmB,IAAUR,KAAA,OAAAA,IAAcX,MAAa,QAAQ,KAAK,KAClDoB,IAASR,KAAA,OAAAA,IAASI,EAAO,IAAI,CAACK,MAASA,EAAK,IAAI,EAAE,KAAKrB,MAAa,QAAQ,MAAM,GAAG;AAE3F,SACE,gBAAAsB,EAAC,OAAA,EAAK,GAAGR,GAAM,KAAAC,GAAU,eAAaF,GAAY,iBAAeb,GAAU,WAAWuB,EAAG,YAAYf,CAAS,GAC5G,UAAA;AAAA,IAAA,gBAAAgB,EAAC,QAAA,EAAK,WAAU,kBAAkB,UAAAJ,GAAO;AAAA,IACxCJ,EAAO,IAAI,CAACK,GAAMI,MACjB,gBAAAH,EAACf,EAAM,UAAN,EACE,UAAA;AAAA,MAAAkB,IAAQ,KAAKN,MAAY,KACxB,gBAAAK,EAAC,QAAA,EAAK,WAAU,uBAAsB,eAAY,QAC/C,UAAAL,EAAA,CACH,IACE;AAAA,wBACH,OAAA,EAAI,WAAU,iBAAgB,eAAY,QACxC,YAAK,KAAA,CACR;AAAA,IAAA,EAAA,GARmBM,CASrB,CACD;AAAA,EAAA,GACH;AAEJ,CAAC;"}

package/dist/components/dataDisplay/kbd/kbdKeys.d.ts

@@ -0,0 +1,18 @@
+export type KbdPlatform = "mac" | "other";
+/** How one key is drawn, and how it is read out. */
+export interface KbdKeyLabel {
+    /** What is drawn on the key cap. */
+    text: string;
+    /** What assistive technology reads. */
+    name: string;
+}
+/**
+ * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself
+ * so), `other` everywhere else and without a `navigator` (on the server).
+ */
+export declare function detectKbdPlatform(): KbdPlatform;
+/**
+ * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the
+ * tables above for the rest. A single letter is drawn in upper case; any other key as given.
+ */
+export declare function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel;

package/dist/components/dataDisplay/kbd/kbdKeys.js

@@ -0,0 +1,72 @@
+const n = (e, a) => ({ text: e, name: a }), s = {
+  up: n("↑", "Up arrow"),
+  arrowup: n("↑", "Up arrow"),
+  down: n("↓", "Down arrow"),
+  arrowdown: n("↓", "Down arrow"),
+  left: n("←", "Left arrow"),
+  arrowleft: n("←", "Left arrow"),
+  right: n("→", "Right arrow"),
+  arrowright: n("→", "Right arrow"),
+  // `KeyboardEvent.key` is " " for the space bar, and a bare "+" would read "Ctrl++".
+  " ": { text: "Space", name: "Space" },
+  space: { text: "Space", name: "Space" },
+  spacebar: { text: "Space", name: "Space" },
+  "+": { text: "+", name: "Plus" },
+  plus: { text: "+", name: "Plus" }
+}, r = { text: "⌘", name: "Command" }, d = {
+  mod: r,
+  meta: r,
+  cmd: r,
+  command: r,
+  shift: { text: "⇧", name: "Shift" },
+  alt: { text: "⌥", name: "Option" },
+  option: { text: "⌥", name: "Option" },
+  ctrl: { text: "⌃", name: "Control" },
+  control: { text: "⌃", name: "Control" },
+  enter: { text: "↩", name: "Return" },
+  return: { text: "↩", name: "Return" },
+  escape: { text: "⎋", name: "Escape" },
+  esc: { text: "⎋", name: "Escape" },
+  tab: { text: "⇥", name: "Tab" },
+  backspace: { text: "⌫", name: "Delete" },
+  delete: { text: "⌦", name: "Forward delete" },
+  del: { text: "⌦", name: "Forward delete" }
+}, o = { text: "Meta", name: "Meta" }, t = (e, a = e) => ({ text: e, name: a }), i = {
+  mod: t("Ctrl"),
+  ctrl: t("Ctrl"),
+  control: t("Ctrl"),
+  alt: t("Alt"),
+  option: t("Alt"),
+  shift: t("Shift"),
+  meta: o,
+  cmd: o,
+  command: o,
+  enter: t("Enter"),
+  return: t("Enter"),
+  escape: t("Esc", "Escape"),
+  esc: t("Esc", "Escape"),
+  tab: t("Tab"),
+  backspace: t("Backspace"),
+  delete: t("Del", "Delete"),
+  del: t("Del", "Delete")
+};
+function w() {
+  var a;
+  if (typeof navigator == "undefined")
+    return "other";
+  const e = (a = navigator.userAgentData) == null ? void 0 : a.platform;
+  return /mac|iphone|ipad|ipod/i.test(e || navigator.platform || "") ? "mac" : "other";
+}
+function x(e, a) {
+  var p;
+  const c = e.trim().toLowerCase() || e, m = (p = (a === "mac" ? d : i)[c]) != null ? p : s[c];
+  if (m)
+    return m;
+  const l = e.length === 1 ? e.toUpperCase() : e;
+  return { text: l, name: l };
+}
+export {
+  w as detectKbdPlatform,
+  x as kbdKeyLabel
+};
+//# sourceMappingURL=kbdKeys.js.map

package/dist/components/dataDisplay/kbd/kbdKeys.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbdKeys.js","sources":["../../../../src/components/dataDisplay/kbd/kbdKeys.ts"],"sourcesContent":["export type KbdPlatform = \"mac\" | \"other\";\n\n/** How one key is drawn, and how it is read out. */\nexport interface KbdKeyLabel {\n  /** What is drawn on the key cap. */\n  text: string;\n  /** What assistive technology reads. */\n  name: string;\n}\n\nconst arrow = (text: string, name: string): KbdKeyLabel => ({ text, name });\n\n// Names, in lower case, the same on every platform.\nconst COMMON: Record<string, KbdKeyLabel> = {\n  up: arrow(\"↑\", \"Up arrow\"),\n  arrowup: arrow(\"↑\", \"Up arrow\"),\n  down: arrow(\"↓\", \"Down arrow\"),\n  arrowdown: arrow(\"↓\", \"Down arrow\"),\n  left: arrow(\"←\", \"Left arrow\"),\n  arrowleft: arrow(\"←\", \"Left arrow\"),\n  right: arrow(\"→\", \"Right arrow\"),\n  arrowright: arrow(\"→\", \"Right arrow\"),\n  // `KeyboardEvent.key` is \" \" for the space bar, and a bare \"+\" would read \"Ctrl++\".\n  \" \": { text: \"Space\", name: \"Space\" },\n  space: { text: \"Space\", name: \"Space\" },\n  spacebar: { text: \"Space\", name: \"Space\" },\n  \"+\": { text: \"+\", name: \"Plus\" },\n  plus: { text: \"+\", name: \"Plus\" },\n};\n\nconst COMMAND: KbdKeyLabel = { text: \"⌘\", name: \"Command\" };\n\n// On macOS the modifiers and the editing keys are drawn as the symbols the Mac\n// keyboard and its menus use.\nconst MAC: Record<string, KbdKeyLabel> = {\n  mod: COMMAND,\n  meta: COMMAND,\n  cmd: COMMAND,\n  command: COMMAND,\n  shift: { text: \"⇧\", name: \"Shift\" },\n  alt: { text: \"⌥\", name: \"Option\" },\n  option: { text: \"⌥\", name: \"Option\" },\n  ctrl: { text: \"⌃\", name: \"Control\" },\n  control: { text: \"⌃\", name: \"Control\" },\n  enter: { text: \"↩\", name: \"Return\" },\n  return: { text: \"↩\", name: \"Return\" },\n  escape: { text: \"⎋\", name: \"Escape\" },\n  esc: { text: \"⎋\", name: \"Escape\" },\n  tab: { text: \"⇥\", name: \"Tab\" },\n  backspace: { text: \"⌫\", name: \"Delete\" },\n  delete: { text: \"⌦\", name: \"Forward delete\" },\n  del: { text: \"⌦\", name: \"Forward delete\" },\n};\n\n// Elsewhere the same names are written in their usual capitalisation, so one `keys` array\n// looks alike on every platform. `Meta`, `Cmd` and `Command` have no key of their own here\n// and are drawn as `Meta`.\nconst META: KbdKeyLabel = { text: \"Meta\", name: \"Meta\" };\nconst named = (text: string, name = text): KbdKeyLabel => ({ text, name });\nconst OTHER: Record<string, KbdKeyLabel> = {\n  mod: named(\"Ctrl\"),\n  ctrl: named(\"Ctrl\"),\n  control: named(\"Ctrl\"),\n  alt: named(\"Alt\"),\n  option: named(\"Alt\"),\n  shift: named(\"Shift\"),\n  meta: META,\n  cmd: META,\n  command: META,\n  enter: named(\"Enter\"),\n  return: named(\"Enter\"),\n  escape: named(\"Esc\", \"Escape\"),\n  esc: named(\"Esc\", \"Escape\"),\n  tab: named(\"Tab\"),\n  backspace: named(\"Backspace\"),\n  delete: named(\"Del\", \"Delete\"),\n  del: named(\"Del\", \"Delete\"),\n};\n\n/**\n * The platform of the running browser: `mac` for macOS (and iPadOS, which reports itself\n * so), `other` everywhere else and without a `navigator` (on the server).\n */\nexport function detectKbdPlatform(): KbdPlatform {\n  if (typeof navigator === \"undefined\") {\n    return \"other\";\n  }\n  const hinted = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform;\n  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || \"\") ? \"mac\" : \"other\";\n}\n\n/**\n * The cap and the spoken name of a key. `Mod` is Command on `mac` and Ctrl on `other`; see the\n * tables above for the rest. A single letter is drawn in upper case; any other key as given.\n */\nexport function kbdKeyLabel(key: string, platform: KbdPlatform): KbdKeyLabel {\n  const lower = key.trim().toLowerCase() || key; // a lone \" \" is the space bar\n  const known = (platform === \"mac\" ? MAC : OTHER)[lower] ?? COMMON[lower];\n  if (known) {\n    return known;\n  }\n  const text = key.length === 1 ? key.toUpperCase() : key;\n  return { text, name: text };\n}\n"],"names":["arrow","text","name","COMMON","COMMAND","MAC","META","named","OTHER","detectKbdPlatform","_a","hinted","kbdKeyLabel","key","platform","lower","known"],"mappings":"AAUA,MAAMA,IAAQ,CAACC,GAAcC,OAA+B,EAAE,MAAAD,GAAM,MAAAC,EAAA,IAG9DC,IAAsC;AAAA,EAC1C,IAAIH,EAAM,KAAK,UAAU;AAAA,EACzB,SAASA,EAAM,KAAK,UAAU;AAAA,EAC9B,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,MAAMA,EAAM,KAAK,YAAY;AAAA,EAC7B,WAAWA,EAAM,KAAK,YAAY;AAAA,EAClC,OAAOA,EAAM,KAAK,aAAa;AAAA,EAC/B,YAAYA,EAAM,KAAK,aAAa;AAAA;AAAA,EAEpC,KAAK,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EAC9B,UAAU,EAAE,MAAM,SAAS,MAAM,QAAA;AAAA,EACjC,KAAK,EAAE,MAAM,KAAK,MAAM,OAAA;AAAA,EACxB,MAAM,EAAE,MAAM,KAAK,MAAM,OAAA;AAC3B,GAEMI,IAAuB,EAAE,MAAM,KAAK,MAAM,UAAA,GAI1CC,IAAmC;AAAA,EACvC,KAAKD;AAAA,EACL,MAAMA;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAO,EAAE,MAAM,KAAK,MAAM,QAAA;AAAA,EAC1B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,MAAM,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EACzB,SAAS,EAAE,MAAM,KAAK,MAAM,UAAA;AAAA,EAC5B,OAAO,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC1B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,QAAQ,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EACxB,KAAK,EAAE,MAAM,KAAK,MAAM,MAAA;AAAA,EACxB,WAAW,EAAE,MAAM,KAAK,MAAM,SAAA;AAAA,EAC9B,QAAQ,EAAE,MAAM,KAAK,MAAM,iBAAA;AAAA,EAC3B,KAAK,EAAE,MAAM,KAAK,MAAM,iBAAA;AAC1B,GAKME,IAAoB,EAAE,MAAM,QAAQ,MAAM,OAAA,GAC1CC,IAAQ,CAACN,GAAcC,IAAOD,OAAuB,EAAE,MAAAA,GAAM,MAAAC,MAC7DM,IAAqC;AAAA,EACzC,KAAKD,EAAM,MAAM;AAAA,EACjB,MAAMA,EAAM,MAAM;AAAA,EAClB,SAASA,EAAM,MAAM;AAAA,EACrB,KAAKA,EAAM,KAAK;AAAA,EAChB,QAAQA,EAAM,KAAK;AAAA,EACnB,OAAOA,EAAM,OAAO;AAAA,EACpB,MAAMD;AAAA,EACN,KAAKA;AAAA,EACL,SAASA;AAAA,EACT,OAAOC,EAAM,OAAO;AAAA,EACpB,QAAQA,EAAM,OAAO;AAAA,EACrB,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAAA,EAC1B,KAAKA,EAAM,KAAK;AAAA,EAChB,WAAWA,EAAM,WAAW;AAAA,EAC5B,QAAQA,EAAM,OAAO,QAAQ;AAAA,EAC7B,KAAKA,EAAM,OAAO,QAAQ;AAC5B;AAMO,SAASE,IAAiC;AAzEjD,MAAAC;AA0EE,MAAI,OAAO,aAAc;AACvB,WAAO;AAET,QAAMC,KAAUD,IAAA,UAAoE,kBAApE,gBAAAA,EAAmF;AACnG,SAAO,wBAAwB,KAAKC,KAAU,UAAU,YAAY,EAAE,IAAI,QAAQ;AACpF;AAMO,SAASC,EAAYC,GAAaC,GAAoC;AArF7E,MAAAJ;AAsFE,QAAMK,IAAQF,EAAI,KAAA,EAAO,iBAAiBA,GACpCG,KAASN,KAAAI,MAAa,QAAQT,IAAMG,GAAOO,CAAK,MAAvC,OAAAL,IAA4CP,EAAOY,CAAK;AACvE,MAAIC;AACF,WAAOA;AAET,QAAMf,IAAOY,EAAI,WAAW,IAAIA,EAAI,gBAAgBA;AACpD,SAAO,EAAE,MAAAZ,GAAM,MAAMA,EAAA;AACvB;"}

package/dist/components/dataDisplay/lazyImage/lazyImage.js

@@ -1,45 +1,46 @@
-import { jsxs as z, jsx as u } from "react/jsx-runtime";
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
-import N from "clsx";
-import { useForkRef as j } from "../../../hooks/useForkRef.js";
-const B = _(function({ src: c, alt: t, fallback: m, lazy: e = !0, aspectRatio: a, className: g, onError: n, ...p }, b) {
-  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(b, f);
-  F(() => {
-    if (!e || i) return;
-    const s = f.current;
+import { forwardRef as x, useState as p, useRef as F, useEffect as N } from "react";
+import j from "clsx";
+import { useForkRef as k } from "../../../hooks/useForkRef.js";
+const C = x(function({ src: a, alt: n, fallback: m, lazy: e = !0, aspectRatio: l, className: b, onError: i, ...t }, y) {
+  var d;
+  const [w, v] = p(!1), [r, f] = p(!e), u = F(null), I = k(y, u);
+  N(() => {
+    if (!e || r) return;
+    const s = u.current;
     if (!s) return;
     if (typeof IntersectionObserver == "undefined") {
-      l(!0);
+      f(!0);
       return;
     }
-    const o = new IntersectionObserver((R) => {
-      R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
+    const c = new IntersectionObserver((h) => {
+      h.some((z) => z.isIntersecting) && (f(!0), c.disconnect());
     });
-    return o.observe(s), () => o.disconnect();
-  }, [e, i]);
-  const r = y || !c, I = (s) => {
-    v(!0), n == null || n(s);
+    return c.observe(s), () => c.disconnect();
+  }, [e, r]);
+  const o = w || !a, R = (s) => {
+    v(!0), i == null || i(s);
   };
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ _(
     "span",
     {
-      className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
-      style: a != null ? { aspectRatio: String(a) } : void 0,
+      className: j("smwb-lazy-image", b, { "smwb-lazy-image--empty": o }),
+      style: l != null ? { aspectRatio: String(l) } : void 0,
       children: [
-        r && m ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
-        r ? null : /* @__PURE__ */ u(
+        o && m ? /* @__PURE__ */ g("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
+        o ? null : /* @__PURE__ */ g(
           "img",
           {
-            ...p,
-            ref: w,
+            ...t,
+            ref: I,
             className: "smwb-lazy-image__img",
-            src: i ? c : void 0,
-            alt: t != null ? t : "",
-            loading: e ? "lazy" : void 0,
-            decoding: "async",
-            onError: I
+            src: r ? a : void 0,
+            alt: n != null ? n : "",
+            loading: e ? "lazy" : t.loading,
+            decoding: (d = t.decoding) != null ? d : "async",
+            onError: R
           }
         )
       ]
@@ -47,7 +48,7 @@ const B = _(function({ src: c, alt: t, fallback: m, lazy: e = !0, aspectRatio: a
   );
 });
 export {
-  B as LazyImage,
-  B as default
+  C as LazyImage,
+  C as default
 };
 //# sourceMappingURL=lazyImage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          loading={lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;;;AA0BO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          // `lazy` wins over the caller's loading; without it, the caller's stays.\n          // decoding=\"async\" is a default: the caller's wins, and an explicit\n          // undefined keeps it.\n          loading={lazy ? \"lazy\" : rest.loading}\n          decoding={rest.decoding ?? \"async\"}\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx","_a"],"mappings":";;;;;;AA0BO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAcE,OAbF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YAIZ,SAASE,IAAO,SAASI,EAAK;AAAA,YAC9B,WAAUsB,IAAAtB,EAAK,aAAL,OAAAsB,IAAiB;AAAA,YAC3B,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -5,6 +5,8 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Section subheader rendered before the items. */
     subheader?: ReactNode;
+    /** Test id of the root `<ul>`; `list` unless given. */
+    "data-testid"?: string;
 }
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/list/list.js

@@ -1,26 +1,27 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as d } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/list/list.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { forwardRef as a } from "react";
-import n from "clsx";
-const b = a(function({ className: t, dense: i, subheader: s, children: r, ...l }, m) {
-  return /* @__PURE__ */ o(
+import { forwardRef as n } from "react";
+import c from "clsx";
+const _ = n(function({ className: l, dense: r, subheader: t, children: e, "data-testid": m = "list", ...s }, o) {
+  var i;
+  return /* @__PURE__ */ a(
     "ul",
     {
-      ref: m,
-      "data-testid": "list",
-      role: "list",
-      className: n("smwb-list", { "smwb-list_dense": i }, t),
-      ...l,
+      ref: o,
+      "data-testid": m,
+      className: c("smwb-list", { "smwb-list_dense": r }, l),
+      ...s,
+      role: (i = s.role) != null ? i : "list",
       children: [
-        s ? /* @__PURE__ */ e("li", { className: "smwb-list__subheader", children: s }) : null,
-        r
+        t ? /* @__PURE__ */ d("li", { className: "smwb-list__subheader", children: t }) : null,
+        e
       ]
     }
   );
 });
 export {
-  b as List,
-  b as default
+  _ as List,
+  _ as default
 };
 //# sourceMappingURL=list.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid=\"list\"\n      role=\"list\"\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;;AAaO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAWE,EAAG,aAAa,EAAE,mBAAmBN,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF,IAAY,gBAAAM,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, \"data-testid\": dataTestId = \"list\", ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={props.role ?? \"list\"}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","dataTestId","props","ref","jsxs","cn","_a","jsx"],"mappings":";;;;;AAeO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,eAAeC,IAAa,QAAQ,GAAGC,EAAA,GAChFC,GACA;;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAaF;AAAA,MACb,WAAWI,EAAG,aAAa,EAAE,mBAAmBP,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGK;AAAA,MAEJ,OAAMI,IAAAJ,EAAM,SAAN,OAAAI,IAAc;AAAA,MAEnB,UAAA;AAAA,QAAAP,IAAY,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/list/listItem.d.ts

@@ -2,13 +2,47 @@ import React from "react";
 export interface ListItemProps {
     disabled?: boolean;
     className?: string;
+    /**
+     * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page
+     * with `aria-current="page"`, because `aria-selected` is not a state a list item can have; on another row it
+     * stays `aria-selected`.
+     */
     selected?: boolean;
     /** Compact row. */
     dense?: boolean;
     /** Render a bottom divider. */
     divider?: boolean;
     startAdornment?: React.ReactNode;
+    /**
+     * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control
+     * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.
+     */
     endAdornment?: React.ReactNode;
+    /**
+     * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be
+     * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control
+     * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the
+     * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,
+     * Alt, or a button other than the main one) to the browser, as a router's `Link` does.
+     */
+    href?: string;
+    /**
+     * Where the link (with `href`) opens. By default `"_blank"`: a new tab, as for `Button`. Pass `null` for an
+     * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other
+     * string is used as is.
+     */
+    target?: string | null;
+    /**
+     * The `rel` of the link (with `href`). By default `"noreferrer"` for a link that opens another tab or window,
+     * and none for one that opens in place. Your own value replaces the default, so add `noreferrer` yourself
+     * if you still want it; an empty string drops the attribute.
+     */
+    rel?: string;
+    /**
+     * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the
+     * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its
+     * own, the link is.
+     */
     onClick?: React.MouseEventHandler<HTMLLIElement>;
 }
 export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & {

package/dist/components/dataDisplay/list/listItem.js

@@ -1,37 +1,60 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import c from "clsx";
-const N = b(function({ className: r, children: _, disabled: s, selected: m, dense: d, divider: n, startAdornment: l, endAdornment: o, onClick: t }, w) {
-  const a = !!t && !s;
-  return /* @__PURE__ */ f(
+import { jsx as n, jsxs as a, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as R, useRef as y } from "react";
+import I from "clsx";
+import { resolveLinkRel as j, resolveLinkTarget as D } from "../../../utils/linkAttrs.js";
+const A = R(function({ className: p, children: b, disabled: i, selected: r, dense: h, divider: u, startAdornment: g, endAdornment: k, href: m, target: N, rel: x, onClick: t }, L) {
+  const s = !!m, l = !!t && !i && !s, _ = D(N), o = y(null), d = /* @__PURE__ */ n("span", { className: "smwb-list__item__start", children: g }), c = /* @__PURE__ */ n("span", { className: "smwb-list__item__main", children: b }), f = /* @__PURE__ */ n("span", { className: "smwb-list__item__end", children: k });
+  return /* @__PURE__ */ n(
     "li",
     {
-      ref: w,
+      ref: L,
       role: "listitem",
-      tabIndex: a ? 0 : void 0,
-      "aria-disabled": s || void 0,
-      "aria-selected": m || void 0,
-      onClick: s ? void 0 : t,
-      onKeyDown: a ? (e) => {
+      tabIndex: l ? 0 : void 0,
+      "aria-disabled": i || void 0,
+      "aria-selected": !s && r || void 0,
+      onClick: i || !t ? void 0 : s ? (e) => {
+        var v;
+        (v = o.current) != null && v.contains(e.target) && t(e);
+      } : t,
+      onKeyDown: l ? (e) => {
         (e.key === "Enter" || e.key === " ") && (e.preventDefault(), t == null || t(e));
       } : void 0,
-      className: c("smwb-list__item", r, {
-        "smwb-disabled": s,
-        "smwb-selected": m,
-        "smwb-list__item_dense": d,
-        "smwb-list__item_divider": n
+      className: I("smwb-list__item", p, {
+        "smwb-disabled": i,
+        "smwb-selected": r,
+        "smwb-list__item_link": s,
+        "smwb-list__item_dense": h,
+        "smwb-list__item_divider": u
       }),
       "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__start", children: l }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__main", children: _ }),
-        /* @__PURE__ */ i("span", { className: "smwb-list__item__end", children: o })
-      ]
+      children: s ? /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ a(
+          "a",
+          {
+            ref: o,
+            className: "smwb-list__item__link",
+            "data-testid": "list-item-link",
+            "aria-current": r ? "page" : void 0,
+            href: i ? void 0 : m,
+            target: _,
+            rel: j(x, _),
+            children: [
+              d,
+              c
+            ]
+          }
+        ),
+        f
+      ] }) : /* @__PURE__ */ a(w, { children: [
+        d,
+        c,
+        f
+      ] })
     }
   );
 });
 export {
-  N as ListItem,
-  N as default
+  A as ListItem,
+  A as default
 };
 //# sourceMappingURL=listItem.js.map

package/dist/components/dataDisplay/list/listItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  endAdornment?: React.ReactNode;\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, onClick },\n  ref\n) {\n  const interactive = !!onClick && !disabled;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={selected || undefined}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      <span className=\"smwb-list__item__start\">{startAdornment}</span>\n      <span className=\"smwb-list__item__main\">{children}</span>\n      <span className=\"smwb-list__item__end\">{endAdornment}</span>\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","onClick","ref","interactive","jsxs","cn","jsx"],"mappings":";;;AAgBO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,SAAAC,EAAA,GACzFC,GACA;AACA,QAAMC,IAAc,CAAC,CAACF,KAAW,CAACN;AAElC,SACE,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,UAAUC,IAAc,IAAI;AAAA,MAC5B,iBAAeR,KAAY;AAAA,MAC3B,iBAAeC,KAAY;AAAA,MAC3B,SAASD,IAAW,SAAYM;AAAA,MAChC,WACEE,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFF,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWI,EAAG,mBAAmBZ,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,yBAAyBC;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAP,GAAe;AAAA,QACzD,gBAAAO,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAZ,EAAA,CAAS;AAAA,QAClD,gBAAAY,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAN,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3D,CAAC;"}
+{"version":3,"file":"listItem.js","sources":["../../../../src/components/dataDisplay/list/listItem.tsx"],"sourcesContent":["import React, { forwardRef, PropsWithChildren, useRef } from \"react\";\nimport cn from \"clsx\";\nimport { resolveLinkRel, resolveLinkTarget } from \"../../../utils/linkAttrs\";\n\nexport interface ListItemProps {\n  disabled?: boolean;\n  className?: string;\n  /**\n   * Paints the row as the current one. On a link row (with `href`) it also marks the link as the current page\n   * with `aria-current=\"page\"`, because `aria-selected` is not a state a list item can have; on another row it\n   * stays `aria-selected`.\n   */\n  selected?: boolean;\n  /** Compact row. */\n  dense?: boolean;\n  /** Render a bottom divider. */\n  divider?: boolean;\n  startAdornment?: React.ReactNode;\n  /**\n   * Trailing content. On a link row (with `href`) it sits beside the link, not inside it, so it can hold a control\n   * (a pin button, a toggle) without nesting it in the `<a>`; a click on it does not reach `onClick`.\n   */\n  endAdornment?: React.ReactNode;\n  /**\n   * Makes the row a link: the `startAdornment` and the children sit in an `<a href>` that fills the row, so it can be\n   * focused with Tab, opened with middle click or copied. Keep the `startAdornment` non-interactive; a control\n   * belongs in the `endAdornment`. A disabled row has no `href`. A router takes the\n   * plain click in `onClick` with `event.preventDefault()`, and leaves a modified one (Ctrl, Meta, Shift,\n   * Alt, or a button other than the main one) to the browser, as a router's `Link` does.\n   */\n  href?: string;\n  /**\n   * Where the link (with `href`) opens. By default `\"_blank\"`: a new tab, as for `Button`. Pass `null` for an\n   * internal link: the `target` attribute is left out and the link opens in place. An empty string does the same; any other\n   * string is used as is.\n   */\n  target?: string | null;\n  /**\n   * The `rel` of the link (with `href`). By default `\"noreferrer\"` for a link that opens another tab or window,\n   * 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;\n  /**\n   * Click handler of the row. With an `href` it runs for a click on the link (not on the `endAdornment`), before the\n   * browser follows it, so `event.preventDefault()` cancels the navigation; the row then is not a Tab stop of its\n   * own, the link is.\n   */\n  onClick?: React.MouseEventHandler<HTMLLIElement>;\n}\n\nexport const ListItem = forwardRef<HTMLLIElement, PropsWithChildren<ListItemProps>>(function ListItem(\n  { className, children, disabled, selected, dense, divider, startAdornment, endAdornment, href, target, rel, onClick },\n  ref\n) {\n  const link = !!href;\n  // A link row is focused through its anchor, which Enter follows by itself.\n  const interactive = !!onClick && !disabled && !link;\n  const linkTarget = resolveLinkTarget(target);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const start = <span className=\"smwb-list__item__start\">{startAdornment}</span>;\n  const main = <span className=\"smwb-list__item__main\">{children}</span>;\n  const end = <span className=\"smwb-list__item__end\">{endAdornment}</span>;\n  const handleClick: React.MouseEventHandler<HTMLLIElement> | undefined =\n    disabled || !onClick\n      ? undefined\n      : link\n        ? (e) => {\n            // The end adornment is beside the link, and its own clicks are not the row's.\n            if (linkRef.current?.contains(e.target as Node)) onClick(e);\n          }\n        : onClick;\n\n  return (\n    <li\n      ref={ref}\n      role=\"listitem\"\n      tabIndex={interactive ? 0 : undefined}\n      aria-disabled={disabled || undefined}\n      aria-selected={(!link && selected) || undefined}\n      onClick={handleClick}\n      onKeyDown={\n        interactive\n          ? (e) => {\n              if (e.key === \"Enter\" || e.key === \" \") {\n                e.preventDefault();\n                onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>);\n              }\n            }\n          : undefined\n      }\n      className={cn(\"smwb-list__item\", className, {\n        \"smwb-disabled\": disabled,\n        \"smwb-selected\": selected,\n        \"smwb-list__item_link\": link,\n        \"smwb-list__item_dense\": dense,\n        \"smwb-list__item_divider\": divider,\n      })}\n      data-testid=\"list-item\"\n    >\n      {link ? (\n        <>\n          <a\n            ref={linkRef}\n            className=\"smwb-list__item__link\"\n            data-testid=\"list-item-link\"\n            aria-current={selected ? \"page\" : undefined}\n            // A disabled link has no href, so it is no link to follow or to focus.\n            href={disabled ? undefined : href}\n            target={linkTarget}\n            rel={resolveLinkRel(rel, linkTarget)}\n          >\n            {start}\n            {main}\n          </a>\n          {end}\n        </>\n      ) : (\n        <>\n          {start}\n          {main}\n          {end}\n        </>\n      )}\n    </li>\n  );\n});\n\nexport default ListItem;\n"],"names":["ListItem","forwardRef","className","children","disabled","selected","dense","divider","startAdornment","endAdornment","href","target","rel","onClick","ref","link","interactive","linkTarget","resolveLinkTarget","linkRef","useRef","start","jsx","main","end","_a","cn","jsxs","Fragment","resolveLinkRel"],"mappings":";;;;AAmDO,MAAMA,IAAWC,EAA4D,SAClF,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,SAAAC,GAAS,gBAAAC,GAAgB,cAAAC,GAAc,MAAAC,GAAM,QAAAC,GAAQ,KAAAC,GAAK,SAAAC,EAAA,GAC5GC,GACA;AACA,QAAMC,IAAO,CAAC,CAACL,GAETM,IAAc,CAAC,CAACH,KAAW,CAACT,KAAY,CAACW,GACzCE,IAAaC,EAAkBP,CAAM,GACrCQ,IAAUC,EAA0B,IAAI,GACxCC,IAAQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAd,GAAe,GACjEe,IAAO,gBAAAD,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAAnB,GAAS,GACzDqB,IAAM,gBAAAF,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAAb,GAAa;AAWjE,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAR;AAAA,MACA,MAAK;AAAA,MACL,UAAUE,IAAc,IAAI;AAAA,MAC5B,iBAAeZ,KAAY;AAAA,MAC3B,iBAAgB,CAACW,KAAQV,KAAa;AAAA,MACtC,SAhBFD,KAAY,CAACS,IACT,SACAE,IACE,CAAC,MAAM;;AAEL,SAAIU,IAAAN,EAAQ,YAAR,QAAAM,EAAiB,SAAS,EAAE,aAAyB,CAAC;AAAA,MAC5D,IACAZ;AAAA,MAUJ,WACEG,IACI,CAAC,MAAM;AACL,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACFH,KAAA,QAAAA,EAAU;AAAA,MAEd,IACA;AAAA,MAEN,WAAWa,EAAG,mBAAmBxB,GAAW;AAAA,QAC1C,iBAAiBE;AAAA,QACjB,iBAAiBC;AAAA,QACjB,wBAAwBU;AAAA,QACxB,yBAAyBT;AAAA,QACzB,2BAA2BC;AAAA,MAAA,CAC5B;AAAA,MACD,eAAY;AAAA,MAEX,cACC,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKR;AAAA,YACL,WAAU;AAAA,YACV,eAAY;AAAA,YACZ,gBAAcd,IAAW,SAAS;AAAA,YAElC,MAAMD,IAAW,SAAYM;AAAA,YAC7B,QAAQO;AAAA,YACR,KAAKY,EAAejB,GAAKK,CAAU;AAAA,YAElC,UAAA;AAAA,cAAAI;AAAA,cACAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,MAAA,EAAA,CACH,IAEA,gBAAAG,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAP;AAAA,QACAE;AAAA,QACAC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

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

@@ -25,6 +25,8 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "role">
     color?: MeterColor;
     /** The bar only; the text stays available to assistive technology. */
     hideText?: boolean;
+    /** Test id of the root `<div>`; `meter` unless given. */
+    "data-testid"?: string;
 }
 /** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */
 export declare function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor;