@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/headless/components/dataDisplay/card/card.js

@@ -1,58 +1,71 @@
-import { use as v, spread as g, mergeProps as _, memo as b, insert as n, createComponent as d, template as l } from "solid-js/web";
-import { mergeProps as w, splitProps as h, children as $, Show as s } from "solid-js";
-import k from "clsx";
-import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
-import { callHandler as c } from "../../../primitives/callHandler.js";
-var C = /* @__PURE__ */ l("<div class=smwb-card__title>"), D = /* @__PURE__ */ l("<div class=smwb-card__footer>"), K = /* @__PURE__ */ l("<div>");
-function S(m) {
-  const u = w({
+import { use as f, spread as u, mergeProps as p, memo as b, insert as o, createComponent as g, template as d } from "solid-js/web";
+import { mergeProps as y, splitProps as D, children as P, Show as _ } from "solid-js";
+import x from "clsx";
+import { mergeRefs as K } from "../../../primitives/mergeRefs.js";
+import { callHandler as a } from "../../../primitives/callHandler.js";
+import { isOwnClick as E } from "../../../utils/ownClick.js";
+import { splitControlProps as H } from "../../../utils/controlProps.js";
+var O = /* @__PURE__ */ d("<div class=smwb-card__title>"), R = /* @__PURE__ */ d("<div class=smwb-card__footer>"), S = /* @__PURE__ */ d("<div><div>");
+function I(v) {
+  const C = y({
     variant: "elevated"
-  }, m), [e, f] = h(u, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref"]), a = $(() => e.footer), t = () => !!e.onClick && !e.disabled, p = (r) => {
-    c(e.onKeyDown, r), t() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), c(e.onClick, r));
+  }, v), [e, w] = D(C, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref", "data-testid"]), s = P(() => e.footer), n = () => !!e.onClick && !e.disabled, [c, k] = H(w, () => !!e.onClick);
+  let l;
+  const h = (r) => {
+    a(e.onKeyDown, r), !(!n() || r.target !== l) && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), a(e.onClick, r));
+  }, $ = (r) => {
+    E(r, l ?? null) && a(e.onClick, r);
   };
   return (() => {
-    var r = K(), i = y(e.ref);
-    return typeof i == "function" && v(i, r), g(r, _(f, {
-      "data-testid": "card",
+    var r = S(), i = r.firstChild, m = K(e.ref);
+    return typeof m == "function" && f(m, r), u(r, p(k, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "card";
+      },
       get class() {
-        return k("smwb-card", `smwb-card_${e.variant}`, e.class, {
+        return x("smwb-card", `smwb-card_${e.variant}`, e.class, {
           card_disabled: e.disabled,
-          "smwb-card_interactive": t()
+          "smwb-card_interactive": n()
         });
       },
+      get "aria-disabled"() {
+        return b(() => !e.onClick)() && e.disabled || void 0;
+      },
+      get onClick() {
+        return n() ? $ : void 0;
+      },
+      onKeyDown: h
+    }), !1, !0), f((t) => l = t, i), u(i, p(c, {
+      class: "smwb-card__content",
       get role() {
-        return t() ? "button" : void 0;
+        return e.onClick ? "button" : void 0;
       },
       get tabindex() {
-        return t() ? 0 : void 0;
+        return c.tabindex ?? (n() ? 0 : void 0);
       },
       get "aria-disabled"() {
-        return e.disabled || void 0;
-      },
-      get onClick() {
-        return b(() => !!t())() ? e.onClick : void 0;
-      },
-      onKeyDown: p
-    }), !1, !0), n(r, d(s, {
+        return b(() => !!e.onClick)() && e.disabled || void 0;
+      }
+    }), !1, !0), o(i, g(_, {
       get when() {
         return e.title;
       },
       get children() {
-        var o = C();
-        return n(o, () => e.title), o;
+        var t = O();
+        return o(t, () => e.title), t;
       }
-    }), null), n(r, () => e.children, null), n(r, d(s, {
+    }), null), o(i, () => e.children, null), o(r, g(_, {
       get when() {
-        return a();
+        return s();
       },
       get children() {
-        var o = D();
-        return n(o, a), o;
+        var t = R();
+        return o(t, s), t;
       }
     }), null), r;
   })();
 }
 export {
-  S as Card
+  I as Card
 };
 //# sourceMappingURL=card.js.map

package/dist/headless/components/dataDisplay/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","handleKeyDown","event","callHandler","onKeyDown","key","preventDefault","_el$","_tmpl$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","role","undefined","tabindex","_$memo","_$insert","_$createComponent","Show","when","title","_el$2","_tmpl$","_el$3","_tmpl$2"],"mappings":";;;;;;AAcO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAAuBH,CAAK,GAC3D,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,WACA,YACA,YACA,SACA,UACA,WACA,aACA,KAAK,CACN,GAIKM,IAASC,EAAS,MAAMJ,EAAMG,MAAM,GACpCE,IAAcA,MAAe,CAAC,CAACL,EAAMM,WAAW,CAACN,EAAMO,UAEvDC,IAAkEC,CAAAA,MAAU;AAChFC,IAAAA,EAAYV,EAAMW,WAAWF,CAAK,GAC9BJ,QAAkBI,EAAMG,QAAQ,WAAWH,EAAMG,QAAQ,SAC3DH,EAAMI,eAAAA,GACNH,EAAYV,EAAMM,SAASG,CAAmF;AAAA,EAElH;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA,GAAAC,IAGSC,EAAUjB,EAAMkB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBpB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,IAAA,QAAA;AAAA,eACXqB,EAAG,aAAa,aAAatB,EAAMD,OAAO,IAAIC,EAAMuB,OAAO;AAAA,UAChEC,eAAexB,EAAMO;AAAAA,UACrB,yBAAyBF,EAAAA;AAAAA,QAAY,CACtC;AAAA,MAAC;AAAA,MAAA,IACFoB,OAAI;AAAA,eAAEpB,EAAAA,IAAgB,WAAWqB;AAAAA,MAAS;AAAA,MAAA,IAC1CC,WAAQ;AAAA,eAAEtB,EAAAA,IAAgB,IAAIqB;AAAAA,MAAS;AAAA,MAAA,IAAA,kBAAA;AAAA,eACxB1B,EAAMO,YAAYmB;AAAAA,MAAS;AAAA,MAAA,IAC1CpB,UAAO;AAAA,eAAEsB,EAAA,MAAA,CAAA,CAAAvB,GAAa,MAAGL,EAAMM,UAAUoB;AAAAA,MAAS;AAAA,MAAA,WACvClB;AAAAA,IAAAA,CAAa,GAAA,IAAA,EAAA,GAAAqB,EAAAf,GAAAgB,EAEvBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhC,EAAMiC;AAAAA,MAAK;AAAA,MAAA,IAAA7B,WAAA;AAAA,YAAA8B,IAAAC,EAAAA;AAAAN,eAAAA,EAAAK,GAAA,MACUlC,EAAMiC,KAAK,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAL,EAAAf,GAAA,MAE3Cd,EAAMI,UAAQ,IAAA,GAAAyB,EAAAf,GAAAgB,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE7B,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAgC,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GACcjC,CAAM,GAAAiC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAtB;AAAAA,EAAA,GAAA;AAI9C;"}
+{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  class?: string | undefined;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: JSX.Element;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, () => !!local.onClick);\n  let content: HTMLDivElement | undefined;\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!interactive() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a Portal rendered inside (Solid delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) callHandler(local.onClick, event);\n  };\n\n  return (\n    <div\n      {...box}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"card\"}\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without. Where it sets none\n      // (undefined), the caller's stay.\n      aria-disabled={(!local.onClick && local.disabled) || undefined}\n      onClick={interactive() ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none\n        // (undefined), the caller's stay. Its tabindex is a default: the\n        // caller's wins, e.g. for roving focus.\n        role={local.onClick ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-disabled={(!!local.onClick && local.disabled) || undefined}\n      >\n        <Show when={local.title}>\n          <div class=\"smwb-card__title\">{local.title}</div>\n        </Show>\n        {local.children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","control","box","splitControlProps","content","handleKeyDown","event","callHandler","onKeyDown","target","key","preventDefault","handleClick","isOwnClick","_el$","_tmpl$3","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","_$memo","undefined","el","role","tabindex","_$insert","_$createComponent","Show","when","title","_el$3","_tmpl$","_el$4","_tmpl$2"],"mappings":"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"}

package/dist/headless/components/dataDisplay/carousel/carousel.js

@@ -1,14 +1,14 @@
-import { addEventListener as k, use as Y, insert as g, createComponent as v, effect as I, setAttribute as V, style as oe, className as D, setStyleProperty as L, template as P, delegateEvents as Fe } from "solid-js/web";
-import { mergeProps as Me, splitProps as ze, children as De, createSignal as b, createUniqueId as Le, createEffect as A, createMemo as le, onCleanup as ae, Show as y, For as W } from "solid-js";
-import p from "clsx";
-import { toCssLength as K, toCssNumber as Ae, dragPrevent as ie, getSlideStyle as Ne, getStartSlide as He, getSlidesToShow as Re, clamp as Oe, getSlideIndexForMultipleParts as ce, coordX as q, coordY as ue, getSlideWidth as Ye, isMouseEvent as de, isTouchEvent as Ve } from "./utils.js";
-import { mergeRefs as We } from "../../../primitives/mergeRefs.js";
-import { Icon as T } from "../../base/icon/icon.js";
-import { Modal as Ke } from "../../feedBack/modal/modal.js";
-var fe = /* @__PURE__ */ P("<div>"), qe = /* @__PURE__ */ P("<div class=smwb-carousel__fullscreen-content><div class=smwb-carousel__fullscreen-stage><div class=smwb-carousel__fullscreen-track>"), Be = /* @__PURE__ */ P("<div data-testid=carousel role=region aria-roledescription=carousel><div class=smwb-carousel__inner><div class=smwb-carousel__track><div class=smwb-carousel__layer>"), Ge = /* @__PURE__ */ P("<div class=smwb-carousel__slide><div>"), Ue = /* @__PURE__ */ P("<div class=smwb-carousel__fullscreen-slide>");
-const me = 8, je = 0.4, B = () => typeof performance < "u" ? performance.now() : Date.now();
-function nt(he) {
-  const ve = Me({
+import { use as Y, insert as g, createComponent as v, addEventListener as ne, effect as I, setAttribute as O, style as oe, className as z, setStyleProperty as D, template as L, delegateEvents as ze } from "solid-js/web";
+import { mergeProps as De, splitProps as Fe, children as Ae, createSignal as b, createUniqueId as Ne, createEffect as F, createMemo as le, onCleanup as ae, Show as y, For as V } from "solid-js";
+import x from "clsx";
+import { toCssLength as W, toCssNumber as He, dragPrevent as ie, getSlideStyle as Re, getStartSlide as Ye, getSlidesToShow as Oe, clamp as Ve, getSlideIndexForMultipleParts as ce, coordX as K, coordY as ue, getSlideWidth as We, isMouseEvent as de, isTouchEvent as Ke } from "./utils.js";
+import { mergeRefs as qe } from "../../../primitives/mergeRefs.js";
+import { Icon as k } from "../../base/icon/icon.js";
+import { Modal as Be } from "../../feedBack/modal/modal.js";
+var fe = /* @__PURE__ */ L("<div>"), Ge = /* @__PURE__ */ L("<div class=smwb-carousel__fullscreen-content><div class=smwb-carousel__fullscreen-stage><div class=smwb-carousel__fullscreen-track>"), Ue = /* @__PURE__ */ L("<div data-testid=carousel role=region aria-roledescription=carousel><div class=smwb-carousel__inner><div class=smwb-carousel__track><div class=smwb-carousel__layer>"), je = /* @__PURE__ */ L("<div class=smwb-carousel__slide><div>"), Je = /* @__PURE__ */ L("<div class=smwb-carousel__fullscreen-slide>");
+const me = 8, Qe = 0.4, q = () => typeof performance < "u" ? performance.now() : Date.now();
+function lt(he) {
+  const ve = De({
     slidesToShow: 3,
     startSlide: 0,
     showNavigation: !0,
@@ -18,8 +18,8 @@ function nt(he) {
     autoplayInterval: 4e3,
     pauseOnHover: !0,
     enableFullscreen: !1
-  }, he), [s] = ze(ve, ["slidesToShow", "startSlide", "children", "class", "showNavigation", "showArrows", "arrowsSize", "navigationClassName", "onSlideChange", "navigationDotRenderer", "aria-label", "autoplay", "autoplayInterval", "pauseOnHover", "cellHeight", "aspectRatio", "gap", "maxWidth", "enableFullscreen", "ref"]), ge = De(() => s.children), N = () => ge.toArray(), o = () => N().length, d = () => Re(s.slidesToShow, o()), G = () => He(s.startSlide, o()), U = () => !!s.showArrows && o() > 1, F = () => Math.max(0, o() - d()), [w, j] = b(G()), [H, R] = b(void 0), [we, J] = b(!1), [_e, Q] = b(0), [be, Z] = b(!1), [x, M] = b(null), [pe, ee] = b(0), [xe, te] = b(!1);
-  let z, _;
+  }, he), [s] = Fe(ve, ["slidesToShow", "startSlide", "children", "class", "showNavigation", "showArrows", "arrowsSize", "navigationClassName", "onSlideChange", "navigationDotRenderer", "aria-label", "autoplay", "autoplayInterval", "pauseOnHover", "cellHeight", "aspectRatio", "gap", "maxWidth", "enableFullscreen", "ref"]), ge = Ae(() => s.children), A = () => ge.toArray(), o = () => A().length, d = () => Oe(s.slidesToShow, o()), B = () => Ye(s.startSlide, o()), G = () => !!s.showArrows && o() > 1, M = () => Math.max(0, o() - d()), [w, U] = b(B()), [N, H] = b(void 0), [we, j] = b(!1), [_e, J] = b(0), [be, Q] = b(!1), [p, T] = b(null), [xe, Z] = b(0), [pe, ee] = b(!1);
+  let P, _;
   const i = {
     isPressed: !1,
     startX: 0,
@@ -30,39 +30,39 @@ function nt(he) {
     dragged: !1
   };
   let S = null;
-  const Se = Le();
-  A(() => {
-    d(), R(!1);
-  }), A(() => {
-    const e = G();
-    j(e), s.onSlideChange?.(e), H() !== void 0 && R(!0);
+  const Se = Ne();
+  F(() => {
+    d(), H(!1);
+  }), F(() => {
+    const e = B();
+    U(e), s.onSlideChange?.(e), N() !== void 0 && H(!0);
   });
   const $ = (e) => {
-    const t = Oe(e, 0, F());
-    j(t), R(!0), s.onSlideChange?.(t);
+    const t = Ve(e, 0, M());
+    U(t), H(!0), s.onSlideChange?.(t);
   }, $e = (e) => {
-    _ && (_.removeEventListener(e ? "mousemove" : "touchmove", re), _.removeEventListener(e ? "mouseup" : "touchend", C), e && _.removeEventListener("mouseleave", C));
-  }, re = (e) => {
-    if (!z || !i.isPressed) return;
-    if (Ve(e) && e.touches.length > 1) {
+    _ && (_.removeEventListener(e ? "mousemove" : "touchmove", te), _.removeEventListener(e ? "mouseup" : "touchend", C), e && _.removeEventListener("mouseleave", C));
+  }, te = (e) => {
+    if (!P || !i.isPressed) return;
+    if (Ke(e) && e.touches.length > 1) {
       C(e);
       return;
     }
-    const t = q(e), a = ue(e), c = t - i.startX, u = a - i.startY;
+    const t = K(e), a = ue(e), c = t - i.startX, u = a - i.startY;
     if (i.axis === null) {
       if (Math.abs(c) < me && Math.abs(u) < me) return;
       if (i.axis = Math.abs(c) >= Math.abs(u) ? "x" : "y", i.dragged = !0, i.axis === "y") {
         C(e);
         return;
       }
-      o() > 1 && Z(!0);
+      o() > 1 && Q(!0);
     }
     if (i.axis === "x") {
       if (e.preventDefault(), e.stopPropagation(), o() > 1) {
-        const r = w() <= 0, n = w() >= F(), l = r && c > 0 || n && c < 0 ? c * 0.35 : c;
-        Q(l);
+        const r = w() <= 0, n = w() >= M(), l = r && c > 0 || n && c < 0 ? c * 0.35 : c;
+        J(l);
       }
-      i.lastX = t, i.lastT = B();
+      i.lastX = t, i.lastT = q();
     }
   }, C = (e) => {
     if (!i.isPressed) return;
@@ -75,24 +75,28 @@ function nt(he) {
       lastX: r,
       lastT: n
     } = i;
-    if (i.isPressed = !1, Z(!1), a === "x" && c && o() > 1 && z) {
-      const l = q(e), m = l - u, f = z.offsetWidth / d(), h = n ? (l - r) / Math.max(1, B() - n) : 0;
+    if (i.isPressed = !1, Q(!1), a === "x" && c && o() > 1 && P) {
+      const l = K(e), m = l - u, f = P.offsetWidth / d(), h = n ? (l - r) / Math.max(1, q() - n) : 0;
       let X = f > 0 ? Math.round(-m / f) : 0;
-      X === 0 && Math.abs(h) > je && (X = h < 0 ? 1 : -1), $(w() + X);
+      X === 0 && Math.abs(h) > Qe && (X = h < 0 ? 1 : -1), $(w() + X);
     }
-    Q(0);
-  }, se = (e) => {
+    J(0);
+  }, re = (e) => {
     if (!_) return;
     const t = de(e);
-    t && e.button !== 0 || (e.stopPropagation(), i.isPressed = !0, i.startX = q(e), i.startY = ue(e), i.lastX = i.startX, i.lastT = B(), i.axis = null, i.dragged = !1, _.addEventListener(t ? "mousemove" : "touchmove", re, {
+    t && e.button !== 0 || (e.stopPropagation(), i.isPressed = !0, i.startX = K(e), i.startY = ue(e), i.lastX = i.startX, i.lastT = q(), i.axis = null, i.dragged = !1, _.addEventListener(t ? "mousemove" : "touchmove", te, {
       passive: !1
     }), _.addEventListener(t ? "mouseup" : "touchend", C), t && _.addEventListener("mouseleave", C));
-  }, Ce = (e) => {
-    i.dragged || s.enableFullscreen && M(e);
-  }, O = (e) => {
+  }, Ce = () => {
+    s.pauseOnHover && j(!0);
+  }, Ie = () => {
+    j(!1);
+  }, ye = (e) => {
+    i.dragged || s.enableFullscreen && T(e);
+  }, R = (e) => {
     const t = d() === 1, a = t ? o() : Math.ceil(o() / d()), c = w() + d(), u = o() - d() <= w(), n = (ce(c, d(), o(), u) + e + a) % a;
     return t ? n : n * d();
-  }, Ie = () => {
+  }, Ee = () => {
     const e = o() - d() <= w(), t = d() === 1, a = t ? o() : Math.ceil(o() / d()), c = [];
     for (let u = 0; u < a; u++) {
       let r = u, n = w();
@@ -107,56 +111,56 @@ function nt(he) {
       });
     }
     return c;
-  }, ye = () => {
-    const e = w() > F() ? F() : w();
-    return Ye(d()) * e;
-  }, Ee = le(() => {
-    const e = {}, t = K(s.cellHeight), a = Ae(s.aspectRatio), c = K(s.gap), u = K(s.maxWidth);
+  }, Xe = () => {
+    const e = w() > M() ? M() : w();
+    return We(d()) * e;
+  }, ke = le(() => {
+    const e = {}, t = W(s.cellHeight), a = He(s.aspectRatio), c = W(s.gap), u = W(s.maxWidth);
     return t && (e["--smwb-carousel-cell-height"] = t), a && (e["--smwb-carousel-aspect-ratio"] = a), c && (e["--smwb-carousel-gap"] = c), u && (e["--smwb-carousel-max-width"] = u), e;
   }), E = (e) => {
-    const t = x();
-    t !== null && M((t + e + o()) % o());
-  }, Xe = le(() => N().map((e) => typeof Node < "u" && e instanceof Node ? e.cloneNode(!0) : e == null ? "" : String(e)));
-  A(() => {
-    if (!s.autoplay || o() <= 1 || s.pauseOnHover && we() || x() !== null)
+    const t = p();
+    t !== null && T((t + e + o()) % o());
+  }, Le = le(() => A().map((e) => typeof Node < "u" && e instanceof Node ? e.cloneNode(!0) : e == null ? "" : String(e)));
+  F(() => {
+    if (!s.autoplay || o() <= 1 || s.pauseOnHover && we() || p() !== null)
       return;
-    const e = window.setInterval(() => $(O(1)), s.autoplayInterval);
+    const e = window.setInterval(() => $(R(1)), s.autoplayInterval);
     ae(() => window.clearInterval(e));
-  }), A(() => {
-    if (x() === null || o() <= 1) return;
+  }), F(() => {
+    if (p() === null || o() <= 1) return;
     const e = (t) => {
       t.key === "ArrowLeft" ? E(-1) : t.key === "ArrowRight" && E(1);
     };
     document.addEventListener("keydown", e), ae(() => document.removeEventListener("keydown", e));
   });
-  const ke = (e) => {
+  const Me = (e) => {
     S = e.touches[0]?.clientX ?? null;
   }, Te = (e) => {
     if (S === null || o() <= 1) return;
     const t = (e.touches[0]?.clientX ?? S) - S;
-    te(!0), ee(t);
+    ee(!0), Z(t);
   }, Pe = (e) => {
     const t = S;
-    if (S = null, te(!1), ee(0), t === null || o() <= 1) return;
+    if (S = null, ee(!1), Z(0), t === null || o() <= 1) return;
     const a = (e.changedTouches[0]?.clientX ?? t) - t;
     Math.abs(a) > 40 && E(a < 0 ? 1 : -1);
   };
   return (() => {
-    var e = Be(), t = e.firstChild, a = t.firstChild, c = a.firstChild;
-    k(e, "mouseleave", s.pauseOnHover ? () => J(!1) : void 0), k(e, "mouseenter", s.pauseOnHover ? () => J(!0) : void 0);
-    var u = We(s.ref);
-    return typeof u == "function" && Y(u, e), Y((r) => z = r, t), g(t, v(y, {
+    var e = Ue(), t = e.firstChild, a = t.firstChild, c = a.firstChild;
+    e.addEventListener("mouseleave", Ie), e.addEventListener("mouseenter", Ce);
+    var u = qe(s.ref);
+    return typeof u == "function" && Y(u, e), Y((r) => P = r, t), g(t, v(y, {
       get when() {
-        return U();
+        return G();
       },
       get children() {
-        return v(T, {
+        return v(k, {
           name: "chevron_left",
           get size() {
             return s.arrowsSize;
           },
           get class() {
-            return p("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
+            return x("smwb-carousel__arrow", "smwb-carousel__arrow_prev");
           },
           get style() {
             return {
@@ -164,18 +168,18 @@ function nt(he) {
               left: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => $(O(-1))
+          onClick: () => $(R(-1))
         });
       }
-    }), a), k(a, "dragend", ie), k(a, "dragstart", ie), a.$$touchstart = se, a.$$mousedown = se, Y((r) => _ = r, a), g(c, v(W, {
+    }), a), ne(a, "dragend", ie), ne(a, "dragstart", ie), a.$$touchstart = re, a.$$mousedown = re, Y((r) => _ = r, a), g(c, v(V, {
       get each() {
-        return N();
+        return A();
       },
       children: (r, n) => (() => {
-        var l = Ge(), m = l.firstChild;
-        return k(m, "click", s.enableFullscreen ? () => Ce(n()) : void 0, !0), g(m, r), I((f) => {
-          var h = `${Se}${n()}`, X = Ne(d()), ne = p("smwb-carousel__slide-inner", s.enableFullscreen && "smwb-carousel__slide-inner_clickable");
-          return h !== f.e && V(l, "id", f.e = h), f.t = oe(l, X, f.t), ne !== f.a && D(m, f.a = ne), f;
+        var l = je(), m = l.firstChild;
+        return m.$$click = () => ye(n()), g(m, r), I((f) => {
+          var h = `${Se}${n()}`, X = Re(d()), se = x("smwb-carousel__slide-inner", s.enableFullscreen && "smwb-carousel__slide-inner_clickable");
+          return h !== f.e && O(l, "id", f.e = h), f.t = oe(l, X, f.t), se !== f.a && z(m, f.a = se), f;
         }, {
           e: void 0,
           t: void 0,
@@ -184,16 +188,16 @@ function nt(he) {
       })()
     })), g(t, v(y, {
       get when() {
-        return U();
+        return G();
       },
       get children() {
-        return v(T, {
+        return v(k, {
           name: "chevron_right",
           get size() {
             return s.arrowsSize;
           },
           get class() {
-            return p("smwb-carousel__arrow", "smwb-carousel__arrow_next");
+            return x("smwb-carousel__arrow", "smwb-carousel__arrow_next");
           },
           get style() {
             return {
@@ -201,7 +205,7 @@ function nt(he) {
               right: `${-s.arrowsSize / 2}px`
             };
           },
-          onClick: () => $(O(1))
+          onClick: () => $(R(1))
         });
       }
     }), null), g(e, v(y, {
@@ -210,76 +214,76 @@ function nt(he) {
       },
       get children() {
         var r = fe();
-        return g(r, v(W, {
+        return g(r, v(V, {
           get each() {
-            return Ie();
+            return Ee();
           },
           children: (n) => s.navigationDotRenderer ? s.navigationDotRenderer(n.index, n.isActive, (l) => $(l)) : (() => {
             var l = fe();
-            return l.$$click = () => $(n.nextIndex), I(() => D(l, p("smwb-carousel__navigation__dot", n.isActive && "current"))), l;
+            return l.$$click = () => $(n.nextIndex), I(() => z(l, x("smwb-carousel__navigation__dot", n.isActive && "current"))), l;
           })()
-        })), I(() => D(r, p("smwb-carousel__navigation", s.navigationClassName))), r;
+        })), I(() => z(r, x("smwb-carousel__navigation", s.navigationClassName))), r;
       }
     }), null), g(e, v(y, {
       get when() {
         return s.enableFullscreen;
       },
       get children() {
-        return v(Ke, {
+        return v(Be, {
           get open() {
-            return x() !== null;
+            return p() !== null;
           },
           size: "fullscreen",
           backdrop: "darkBlured",
           class: "smwb-carousel__fullscreen",
-          onClose: () => M(null),
+          onClose: () => T(null),
           "aria-label": "Image viewer",
           get children() {
-            var r = qe(), n = r.firstChild, l = n.firstChild;
+            var r = Ge(), n = r.firstChild, l = n.firstChild;
             return g(r, v(y, {
               get when() {
                 return o() > 1;
               },
               get children() {
-                return v(T, {
+                return v(k, {
                   name: "chevron_left",
                   size: 40,
                   get class() {
-                    return p("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev");
+                    return x("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_prev");
                   },
                   onClick: () => E(-1)
                 });
               }
-            }), n), n.$$touchend = Pe, n.$$touchmove = Te, n.$$touchstart = ke, g(l, v(W, {
+            }), n), n.$$touchend = Pe, n.$$touchmove = Te, n.$$touchstart = Me, g(l, v(V, {
               get each() {
-                return Xe();
+                return Le();
               },
               children: (m, f) => (() => {
-                var h = Ue();
-                return g(h, m), I(() => V(h, "aria-hidden", f() !== x())), h;
+                var h = Je();
+                return g(h, m), I(() => O(h, "aria-hidden", f() !== p())), h;
               })()
             })), g(r, v(y, {
               get when() {
                 return o() > 1;
               },
               get children() {
-                return v(T, {
+                return v(k, {
                   name: "chevron_right",
                   size: 40,
                   get class() {
-                    return p("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next");
+                    return x("smwb-carousel__fullscreen-arrow", "smwb-carousel__fullscreen-arrow_next");
                   },
                   onClick: () => E(1)
                 });
               }
-            }), null), g(r, v(T, {
+            }), null), g(r, v(k, {
               name: "close",
               size: 32,
               class: "smwb-carousel__fullscreen-close",
-              onClick: () => M(null)
+              onClick: () => T(null)
             }), null), I((m) => {
-              var f = `translateX(calc(-${(x() ?? 0) * 100}% + ${pe()}px))`, h = xe() ? "none" : "transform 350ms cubic-bezier(.22, .61, .36, 1)";
-              return f !== m.e && L(l, "transform", m.e = f), h !== m.t && L(l, "transition", m.t = h), m;
+              var f = `translateX(calc(-${(p() ?? 0) * 100}% + ${xe()}px))`, h = pe() ? "none" : "transform 350ms cubic-bezier(.22, .61, .36, 1)";
+              return f !== m.e && D(l, "transform", m.e = f), h !== m.t && D(l, "transition", m.t = h), m;
             }, {
               e: void 0,
               t: void 0
@@ -288,8 +292,8 @@ function nt(he) {
         });
       }
     }), null), I((r) => {
-      var n = p("smwb-carousel", s.class), l = s["aria-label"], m = Ee(), f = `translateX(calc(-${ye()}% + ${_e()}px))`, h = be() || H() === void 0 ? "none" : H() ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none";
-      return n !== r.e && D(e, r.e = n), l !== r.t && V(e, "aria-label", r.t = l), r.a = oe(e, m, r.a), f !== r.o && L(c, "transform", r.o = f), h !== r.i && L(c, "transition", r.i = h), r;
+      var n = x("smwb-carousel", s.class), l = s["aria-label"], m = ke(), f = `translateX(calc(-${Xe()}% + ${_e()}px))`, h = be() || N() === void 0 ? "none" : N() ? "transform 500ms cubic-bezier(.1, 0, .25, 1)" : "none";
+      return n !== r.e && z(e, r.e = n), l !== r.t && O(e, "aria-label", r.t = l), r.a = oe(e, m, r.a), f !== r.o && D(c, "transform", r.o = f), h !== r.i && D(c, "transition", r.i = h), r;
     }, {
       e: void 0,
       t: void 0,
@@ -299,8 +303,8 @@ function nt(he) {
     }), e;
   })();
 }
-Fe(["mousedown", "touchstart", "touchmove", "touchend", "click"]);
+ze(["mousedown", "touchstart", "touchmove", "touchend", "click"]);
 export {
-  nt as Carousel
+  lt as Carousel
 };
 //# sourceMappingURL=carousel.js.map