@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/feedBack/emptyState/emptyState.js

@@ -5,7 +5,7 @@ import { mergeProps as b, splitProps as z, children as m, Show as a } from "soli
 import P from "clsx";
 import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
 import { Icon as I } from "../../base/icon/icon.js";
-var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div data-testid=empty-state>");
+var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div>");
 const x = {
   block: {
     medium: 32,
@@ -17,26 +17,30 @@ const x = {
   }
 }, o = (n) => n != null && n !== !1 && n !== "" && !(Array.isArray(n) && n.length === 0);
 function F(n) {
-  const g = b({
+  const _ = b({
     variant: "block",
     size: "medium"
-  }, n), [e, f] = z(g, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]), c = m(() => e.icon), p = m(() => e.title), d = m(() => e.children), u = m(() => e.actions), h = () => {
+  }, n), [t, f] = z(_, ["class", "title", "icon", "actions", "variant", "size", "children", "ref", "data-testid"]), c = m(() => t.icon), p = m(() => t.title), d = m(() => t.children), u = m(() => t.actions), h = () => {
     const r = c();
     return typeof r == "string" ? r : void 0;
   };
   return (() => {
-    var r = N(), _ = k(e.ref);
-    return typeof _ == "function" && v(_, r), w(r, y(f, {
+    var r = N(), g = k(t.ref);
+    return typeof g == "function" && v(g, r), w(r, y({
+      get "data-testid"() {
+        return t["data-testid"] ?? "empty-state";
+      }
+    }, f, {
       get class() {
-        return P("smwb-empty-state", `smwb-empty-state_${e.variant}`, `smwb-empty-state_${e.size}`, e.class);
+        return P("smwb-empty-state", `smwb-empty-state_${t.variant}`, `smwb-empty-state_${t.size}`, t.class);
       }
     }), !1, !0), s(r, i(a, {
       get when() {
         return o(c());
       },
       get children() {
-        var t = S();
-        return s(t, i(a, {
+        var e = S();
+        return s(e, i(a, {
           get when() {
             return h();
           },
@@ -48,34 +52,34 @@ function F(n) {
               return $();
             },
             get size() {
-              return x[e.variant][e.size];
+              return x[t.variant][t.size];
             }
           })
-        })), t;
+        })), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(p());
       },
       get children() {
-        var t = A();
-        return s(t, p), t;
+        var e = A();
+        return s(e, p), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(d());
       },
       get children() {
-        var t = C();
-        return s(t, d), t;
+        var e = C();
+        return s(e, d), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(u());
       },
       get children() {
-        var t = E();
-        return s(t, u), t;
+        var e = E();
+        return s(e, u), e;
       }
     }), null), r;
   })();

package/dist/components/feedBack/emptyState/emptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"emptyState.js","sources":["../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\"class\", \"title\", \"icon\", \"actions\", \"variant\", \"size\", \"children\", \"ref\"]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid=\"empty-state\"\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","block","medium","small","inline","present","value","Array","isArray","length","EmptyState","props","merged","mergeProps","variant","size","local","rest","splitProps","icon","children","title","message","actions","iconName","resolved","undefined","_el$","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","fallback","name","Icon","_el$3","_tmpl$2","_el$4","_tmpl$3","_el$5","_tmpl$4"],"mappings":"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"}
+{"version":3,"file":"emptyState.js","sources":["../../../../src/components/feedBack/emptyState/emptyState.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** What is empty, e.g. \"No works yet\". */\n  title?: JSX.Element;\n  /** An icon name, or an icon element. Decorative: the title and the message say it all. */\n  icon?: JSX.Element | string;\n  /** What the reader can do about it: buttons or links. */\n  actions?: JSX.Element;\n  /**\n   * `block` (default): centred, for an empty page, panel or card.\n   * `inline`: a muted line of text, for a list, a table or a column that came\n   * out empty; an action follows the last word.\n   */\n  variant?: \"block\" | \"inline\";\n  /** `small`: tighter, for a narrow column or a card. */\n  size?: \"small\" | \"medium\";\n  /** Test id of the root `<div>`; `empty-state` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst ICON_SIZE = { block: { medium: 32, small: 24 }, inline: { medium: 18, small: 16 } } as const;\n\nconst present = (value: unknown): boolean =>\n  value !== undefined &&\n  value !== null &&\n  value !== false &&\n  value !== \"\" &&\n  !(Array.isArray(value) && value.length === 0);\n\n/**\n * What a list, a table or a panel shows when it has nothing: an icon, a title,\n * the message (the children) and actions.\n */\nexport function EmptyState(props: ParentProps<EmptyStateProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"block\" as const, size: \"medium\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"title\",\n    \"icon\",\n    \"actions\",\n    \"variant\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration the copy made for a <Show> test has no server DOM node.\n  const icon = children(() => local.icon);\n  const title = children(() => local.title);\n  const message = children(() => local.children);\n  const actions = children(() => local.actions);\n  const iconName = (): string | undefined => {\n    const resolved = icon();\n    return typeof resolved === \"string\" ? resolved : undefined;\n  };\n\n  return (\n    <div\n      data-testid={local[\"data-testid\"] ?? \"empty-state\"}\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-empty-state\", `smwb-empty-state_${local.variant}`, `smwb-empty-state_${local.size}`, local.class)}\n    >\n      <Show when={present(icon())}>\n        <span class=\"smwb-empty-state__icon\" aria-hidden=\"true\">\n          <Show when={iconName()} fallback={icon()}>\n            {(name) => <Icon name={name()} size={ICON_SIZE[local.variant][local.size]} />}\n          </Show>\n        </span>\n      </Show>\n      <Show when={present(title())}>\n        <div class=\"smwb-empty-state__title\">{title()}</div>\n      </Show>\n      <Show when={present(message())}>\n        <div class=\"smwb-empty-state__description\">{message()}</div>\n      </Show>\n      <Show when={present(actions())}>\n        <div class=\"smwb-empty-state__actions\">{actions()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default EmptyState;\n"],"names":["ICON_SIZE","block","medium","small","inline","present","value","Array","isArray","length","EmptyState","props","merged","mergeProps","variant","size","local","rest","splitProps","icon","children","title","message","actions","iconName","resolved","undefined","_el$","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","fallback","name","Icon","_el$3","_tmpl$2","_el$4","_tmpl$3","_el$5","_tmpl$4"],"mappings":"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"}

package/dist/components/feedBack/message/message.d.ts

@@ -10,6 +10,8 @@ export interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {
     severity?: MessageSeverity;
     /** Accessible label for the close button. */
     closeAriaLabel?: string;
+    /** Test id of the root `<div>`; `message` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function MessageContainer(props: ParentProps<MessageProps>): JSX.Element;

package/dist/components/feedBack/message/message.js

@@ -1,39 +1,43 @@
-import { use as p, spread as g, mergeProps as u, insert as a, createComponent as m, effect as f, setAttribute as v, template as n, delegateEvents as d } from "solid-js/web";
+import { use as p, spread as g, mergeProps as u, insert as a, createComponent as c, effect as d, setAttribute as v, template as i, delegateEvents as f } from "solid-js/web";
 import '../../../assets/styles/less/components/message/message.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
 import { mergeProps as b, splitProps as _, Show as $ } from "solid-js";
 import h from "clsx";
 import { mergeRefs as w } from "../../../primitives/mergeRefs.js";
 import { Icon as y } from "../../base/icon/icon.js";
-var C = /* @__PURE__ */ n("<button class=smwb-message__close-btn type=button>"), A = /* @__PURE__ */ n("<div>"), P = /* @__PURE__ */ n("<div class=smwb-message__header>");
+var C = /* @__PURE__ */ i("<button class=smwb-message__close-btn type=button>"), A = /* @__PURE__ */ i("<div>"), P = /* @__PURE__ */ i("<div class=smwb-message__header>");
 function L(o) {
   const t = b({
     variant: "filled",
     closeAriaLabel: "Close"
-  }, o), [e, c] = _(t, ["class", "children", "type", "severity", "variant", "onClose", "closeAriaLabel", "ref"]), l = () => e.severity ?? e.type;
+  }, o), [e, l] = _(t, ["class", "children", "type", "severity", "variant", "onClose", "closeAriaLabel", "ref", "data-testid"]), n = () => e.severity ?? e.type;
   return (() => {
-    var r = A(), i = w(e.ref);
-    return typeof i == "function" && p(i, r), g(r, u(c, {
-      "data-testid": "message",
-      role: "alert",
+    var r = A(), m = w(e.ref);
+    return typeof m == "function" && p(m, r), g(r, u(l, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "message";
+      },
+      get role() {
+        return l.role ?? "alert";
+      },
       get "aria-live"() {
-        return l() === "error" ? "assertive" : "polite";
+        return l["aria-live"] ?? (n() === "error" ? "assertive" : "polite");
       },
       get class() {
         return h("smwb-message", `smwb-message_${e.variant}`, e.class, {
-          [`smwb-message_${l()}`]: !!l()
+          [`smwb-message_${n()}`]: !!n()
         });
       }
-    }), !1, !0), a(r, () => e.children, null), a(r, m($, {
+    }), !1, !0), a(r, () => e.children, null), a(r, c($, {
       get when() {
         return e.onClose;
       },
       get children() {
         var s = C();
-        return s.$$click = () => e.onClose?.(), a(s, m(y, {
+        return s.$$click = () => e.onClose?.(), a(s, c(y, {
           name: "close",
           weight: 1e3
-        })), f(() => v(s, "aria-label", e.closeAriaLabel)), s;
+        })), d(() => v(s, "aria-label", e.closeAriaLabel)), s;
       }
     }), null), r;
   })();
@@ -47,7 +51,7 @@ function k(o) {
 const I = Object.assign(L, {
   Header: k
 });
-d(["click"]);
+f(["click"]);
 export {
   I as Message,
   L as MessageContainer

package/dist/components/feedBack/message/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid=\"message\"\n      role=\"alert\"\n      aria-live={resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\"}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;;;AAqBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,KAAK,CACN,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IASSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EAPrBZ,GAAI;AAAA,MAAA,eACI;AAAA,MAAS,MAChB;AAAA,MAAO,IAAA,cAAA;AAAA,eACDE,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAQ;AAAA,MAAA,IAAA,QAAA;AAAA,eAC3DW,EAAG,gBAAgB,gBAAgBd,EAAMF,OAAO,IAAIE,EAAMe,OAAO;AAAA,UACtE,CAAC,gBAAgBZ,EAAAA,CAAkB,EAAE,GAAGa,EAAQb;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAc,EAAAX,GAAA,MAGDN,EAAMkB,UAAQ,IAAA,GAAAD,EAAAX,GAAAa,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAMsB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAMzB,EAAMsB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBvB,EAAMD,cAAc,CAAA,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAjB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAASyB,EAAOpC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAqC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CrC,EAAMuB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO1C,GAAkB;AAAA,EAAEqC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"message.js","sources":["../../../../src/components/feedBack/message/message.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type MessageSeverity = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface MessageProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"outlined\" | \"filled\" | \"left-accent\";\n  onClose?: () => void;\n  /** @deprecated use `severity`. */\n  type?: MessageSeverity;\n  /** Semantic severity of the message. */\n  severity?: MessageSeverity;\n  /** Accessible label for the close button. */\n  closeAriaLabel?: string;\n  /** Test id of the root `<div>`; `message` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MessageContainer(props: ParentProps<MessageProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"filled\" as const, closeAriaLabel: \"Close\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"children\",\n    \"type\",\n    \"severity\",\n    \"variant\",\n    \"onClose\",\n    \"closeAriaLabel\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolvedSeverity = (): MessageSeverity | undefined => local.severity ?? local.type;\n\n  return (\n    <div\n      {...rest}\n      data-testid={local[\"data-testid\"] ?? \"message\"}\n      // Defaults: the caller's own role and aria-live win, and an explicit\n      // undefined keeps these.\n      role={rest.role ?? \"alert\"}\n      aria-live={rest[\"aria-live\"] ?? (resolvedSeverity() === \"error\" ? \"assertive\" : \"polite\")}\n      class={cn(\"smwb-message\", `smwb-message_${local.variant}`, local.class, {\n        [`smwb-message_${resolvedSeverity()}`]: Boolean(resolvedSeverity()),\n      })}\n      ref={mergeRefs(local.ref)}\n    >\n      {local.children}\n      <Show when={local.onClose}>\n        <button\n          class=\"smwb-message__close-btn\"\n          onClick={() => local.onClose?.()}\n          aria-label={local.closeAriaLabel}\n          type=\"button\"\n        >\n          <Icon name=\"close\" weight={1000} />\n        </button>\n      </Show>\n    </div>\n  );\n}\n\nfunction Header(props: ParentProps): JSX.Element {\n  return <div class=\"smwb-message__header\">{props.children}</div>;\n}\n\nexport const Message = Object.assign(MessageContainer, { Header });\n\nexport default Message;\n"],"names":["MessageContainer","props","merged","mergeProps","variant","closeAriaLabel","local","rest","splitProps","resolvedSeverity","severity","type","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","cn","class","Boolean","_$insert","children","_$createComponent","Show","when","onClose","_el$2","_tmpl$","$$click","Icon","name","weight","_$effect","_$setAttribute","Header","_el$3","_tmpl$3","Message","Object","assign","_$delegateEvents"],"mappings":";;;;;;;;AAuBO,SAASA,EAAiBC,GAA+C;AAC9E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAAmBC,gBAAgB;AAAA,EAAA,GAAWJ,CAAK,GAClF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,SACA,YACA,QACA,YACA,WACA,WACA,kBACA,OACA,aAAa,CACd,GAEKO,IAAmBA,MAAmCH,EAAMI,YAAYJ,EAAMK;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAWSC,EAAUT,EAAMU,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EATrBZ,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eACKD,EAAM,aAAa,KAAK;AAAA,MAAS;AAAA,MAAA,IAG9Cc,OAAI;AAAA,eAAEb,EAAKa,QAAQ;AAAA,MAAO;AAAA,MAAA,IAAA,cAAA;AAAA,eACfb,EAAK,WAAW,MAAME,EAAAA,MAAuB,UAAU,cAAc;AAAA,MAAS;AAAA,MAAA,IAAA,QAAA;AAAA,eAClFY,EAAG,gBAAgB,gBAAgBf,EAAMF,OAAO,IAAIE,EAAMgB,OAAO;AAAA,UACtE,CAAC,gBAAgBb,EAAAA,CAAkB,EAAE,GAAGc,EAAQd;QAAkB,CACnE;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAe,EAAAZ,GAAA,MAGDN,EAAMmB,UAAQ,IAAA,GAAAD,EAAAZ,GAAAc,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,EAAMuB;AAAAA,MAAO;AAAA,MAAA,IAAAJ,WAAA;AAAA,YAAAK,IAAAC,EAAAA;AAAAD,eAAAA,EAAAE,UAGZ,MAAM1B,EAAMuB,UAAAA,GAAWL,EAAAM,GAAAJ,EAI/BO,GAAI;AAAA,UAACC,MAAI;AAAA,UAASC,QAAQ;AAAA,QAAA,CAAI,CAAA,GAAAC,QAAAC,EAAAP,GAAA,cAHnBxB,EAAMD,cAAc,CAAA,GAAAyB;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAlB;AAAAA,EAAA,GAAA;AAQ1C;AAEA,SAAS0B,EAAOrC,GAAiC;AAC/C,UAAA,MAAA;AAAA,QAAAsC,IAAAC,EAAAA;AAAAhB,WAAAA,EAAAe,GAAA,MAA0CtC,EAAMwB,QAAQ,GAAAc;AAAAA,EAAA,GAAA;AAC1D;AAEO,MAAME,IAAUC,OAAOC,OAAO3C,GAAkB;AAAA,EAAEsC,QAAAA;AAAO,CAAC;AAE1CM,EAAA,CAAA,OAAA,CAAA;"}

package/dist/components/feedBack/modal/modal.d.ts

@@ -19,6 +19,15 @@ export interface ModalProps {
     "aria-describedby"?: string;
     ref?: Ref<HTMLDivElement>;
 }
+/**
+ * A modal dialog: portaled to `<body>`, animated, closed by Escape or a backdrop click.
+ *
+ * While open it traps Tab/Shift+Tab inside the dialog and moves the focus into it (the first tab
+ * stop, else the dialog itself), unless a child has already focused itself. On close, and on
+ * unmount while open, the focus goes back to the element that had it when the dialog opened —
+ * unless the app has moved the focus elsewhere by then.
+ * Of stacked dialogs only the topmost one handles Tab.
+ */
 declare function ModalBase(props: ParentProps<ModalProps>): JSX.Element;
 export interface ModalSlotProps {
     class?: string;

package/dist/components/feedBack/modal/modal.js

@@ -1,14 +1,15 @@
-import { createComponent as c, Portal as w, addEventListener as y, use as g, insert as s, Dynamic as C, mergeProps as k, effect as l, className as i, isServer as E, template as _, delegateEvents as A } from "solid-js/web";
+import { createComponent as p, Portal as E, use as k, insert as s, Dynamic as $, mergeProps as A, effect as l, className as i, isServer as O, template as b, delegateEvents as h } from "solid-js/web";
 import '../../../assets/styles/less/components/modal/modal.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                     */
-import { mergeProps as O, splitProps as $, createEffect as h, onCleanup as x, Show as L } from "solid-js";
-import n from "clsx";
-import { createCssTransition as P } from "../../../primitives/createCssTransition.js";
-import { createFocusTrap as F } from "../../../primitives/createFocusTrap.js";
-import { isTopOverlayLayer as S } from "../../../primitives/overlayLayer.js";
-import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
-var D = /* @__PURE__ */ _("<div data-smwb-overlay-layer>"), d = /* @__PURE__ */ _("<div>");
-const M = {
+import { mergeProps as x, splitProps as F, createSignal as P, createEffect as v, on as S, onCleanup as _, Show as L } from "solid-js";
+import a from "clsx";
+import { createCssTransition as T } from "../../../primitives/createCssTransition.js";
+import { createFocusTrap as z } from "../../../primitives/createFocusTrap.js";
+import { isTopOverlayLayer as D } from "../../../primitives/overlayLayer.js";
+import { restoreFocus as M } from "../../../primitives/restoreFocus.js";
+import { mergeRefs as N } from "../../../primitives/mergeRefs.js";
+var R = /* @__PURE__ */ b("<div data-smwb-overlay-layer>"), u = /* @__PURE__ */ b("<div>");
+const j = {
   appear: "smwb-modal__overlay-appear",
   appearActive: "smwb-modal__overlay-appear-active",
   appearDone: "smwb-modal__overlay-appear-done",
@@ -18,8 +19,13 @@ const M = {
   exit: "smwb-modal__overlay-exit",
   exitActive: "smwb-modal__overlay-exit-active"
 };
-function N(o) {
-  const r = O({
+function q(r) {
+  if (!r || typeof document > "u") return !0;
+  const o = document.querySelectorAll(".smwb-modal__overlay:not(.smwb-modal__overlay-exit)");
+  return o[o.length - 1] === r;
+}
+function B(r) {
+  const o = x({
     animation: "fade",
     backdrop: "dark",
     size: "large",
@@ -28,51 +34,63 @@ function N(o) {
     disableAppearAnimation: !1,
     role: "dialog",
     closeOnEsc: !0
-  }, o), [e, f] = $(r, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]);
-  let p, u;
-  const m = P({
+  }, r), [e, w] = F(o, ["children", "onClose", "open", "class", "animation", "backdrop", "size", "closeOnOutsideClick", "asForm", "disableAppearAnimation", "role", "closeOnEsc", "ref"]), [m, y] = P();
+  let c;
+  v(S(() => e.open, (t) => {
+    if (!t) return;
+    const n = m()?.contains(document.activeElement) ? null : document.activeElement;
+    _(() => M(n, m()));
+  }));
+  const d = T({
     in: () => e.open,
     timeout: {
       appear: 225,
       enter: 225,
       exit: 150
     },
-    classNames: M,
+    classNames: j,
     appear: !e.disableAppearAnimation
   });
-  return F({
-    active: () => e.open && m.mounted(),
-    container: () => p
-  }), h(() => {
+  z({
+    active: () => e.open && d.mounted(),
+    container: m,
+    restoreFocus: !1,
+    isTopmost: () => q(c)
+  }), v(() => {
     if (!e.open || !e.closeOnEsc || !e.onClose) return;
-    const t = (a) => {
-      a.key === "Escape" && S(u) && e.onClose?.();
+    const t = (n) => {
+      n.key === "Escape" && !n.defaultPrevented && D(c) && e.onClose?.();
     };
-    document.addEventListener("keydown", t), x(() => document.removeEventListener("keydown", t));
-  }), c(L, {
+    document.addEventListener("keydown", t), _(() => document.removeEventListener("keydown", t));
+  });
+  const g = () => {
+    e.closeOnOutsideClick && e.onClose?.();
+  };
+  return p(L, {
     get when() {
-      return m.mounted();
+      return d.mounted();
     },
     get children() {
-      return c(w, {
+      return p(E, {
         get mount() {
-          return E ? void 0 : document.body;
+          return O ? void 0 : document.body;
         },
         get children() {
-          var t = D();
-          return y(t, "click", e.closeOnOutsideClick && e.onClose ? () => e.onClose?.() : void 0, !0), g((a) => u = a, t), s(t, c(C, k({
+          var t = R();
+          return t.$$click = g, k((n) => c = n, t), s(t, p($, A({
             get component() {
               return e.asForm ? "form" : "div";
             }
-          }, f, {
-            ref(a) {
-              var v = z(e.ref, (b) => p = b);
-              typeof v == "function" && v(a);
+          }, w, {
+            ref(n) {
+              var f = N(e.ref, (C) => y(C));
+              typeof f == "function" && f(n);
             },
             get class() {
-              return n("smwb-modal", `smwb-${e.size}`, `smwb-${e.animation}`, e.class);
+              return a("smwb-modal", `smwb-${e.size}`, `smwb-${e.animation}`, e.class);
             },
-            onClick: (a) => a.stopPropagation(),
+            onClick: (n) => n.stopPropagation(),
+            tabindex: -1,
             get role() {
               return e.role;
             },
@@ -80,40 +98,40 @@ function N(o) {
             get children() {
               return e.children;
             }
-          }))), l(() => i(t, n("smwb-modal__overlay", `smwb-${e.backdrop}`, `smwb-${e.size}`, m.classes()))), t;
+          }))), l(() => i(t, a("smwb-modal__overlay", `smwb-${e.backdrop}`, `smwb-${e.size}`, d.classes()))), t;
         }
       });
     }
   });
 }
-function T(o) {
+function H(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__header", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__header", r.class))), o;
   })();
 }
-function R(o) {
+function K(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__content", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__content", r.class))), o;
   })();
 }
-function j(o) {
+function V(r) {
   return (() => {
-    var r = d();
-    return s(r, () => o.children), l(() => i(r, n("smwb-modal__footer", o.class))), r;
+    var o = u();
+    return s(o, () => r.children), l(() => i(o, a("smwb-modal__footer", r.class))), o;
   })();
 }
-const Q = Object.assign(N, {
-  Footer: j,
-  Header: T,
-  Content: R
+const oe = Object.assign(B, {
+  Footer: V,
+  Header: H,
+  Content: K
 });
-A(["click"]);
+h(["click"]);
 export {
-  R as Content,
-  j as Footer,
-  T as Header,
-  Q as Modal
+  K as Content,
+  V as Footer,
+  H as Header,
+  oe as Modal
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/feedBack/modal/modal.js.map

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

package/dist/components/feedBack/skeleton/skeleton.d.ts

@@ -9,12 +9,20 @@ export interface SkeletonProps extends JSX.HTMLAttributes<HTMLElement> {
     height?: number | string;
     /** Shimmer animation; pass false to disable. */
     animation?: "pulse" | "wave" | false;
-    /** Render N stacked placeholders. */
+    /**
+     * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the
+     * other HTML attributes; `class` and `style` go on each placeholder.
+     */
     count?: number;
     /** Stagger consecutive items by N ms (with `count`). */
     animationDelay?: number;
-    /** Root element. */
+    /** Element of each placeholder. */
     component?: "span" | "div";
+    /**
+     * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it
+     * marks the group, and each placeholder keeps `skeleton`.
+     */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLElement>;
 }
 export declare function Skeleton(props: SkeletonProps): JSX.Element;