@smwb/ui-solid 0.12.1 → 0.13.0

package/dist/components/inputs/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"names":["Toggle","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","handleChange","event","readOnly","preventDefault","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","helperText","disabled","error","children","_el$","_tmpl$2","_el$3","firstChild","_el$4","_$insert","Show","when","label","_el$2","_tmpl$","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","required","readonly","_$effect","_p$","_v$","cn","labelPlacement","_v$2","class","e","_$className","t"],"mappings":";;;;;;;;;AA0BO,SAASA,EAAOC,GAAiC;AACtD,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAkCC,OAAO;AAAA,EAAA,GAAsCJ,CAAK,GAChH,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,YACA,YACA,YACA,WACA,SACA,MACA,SACA,kBACA,QACA,SACA,cACA,SACA,YACA,KAAK,CACN,GACKO,IAAKC,EAASJ,EAAMG,EAAE,GAEtBE,IAA2DC,CAAAA,MAAU;AACzE,QAAIN,EAAMO,UAAU;AAClBD,MAAAA,EAAME,eAAAA;AACN;AAAA,IACF;AACAR,IAAAA,EAAMS,WAAWH,GAAOA,EAAMI,cAAcC,SAAShB,CAAK;AAAA,EAC5D;AAEA,SAAAiB,EACGC,GAAgB;AAAA,IAAA,IACfC,aAAU;AAAA,aAAEd,EAAMc;AAAAA,IAAU;AAAA,IAAA,IAC5BC,WAAQ;AAAA,aAAEf,EAAMe;AAAAA,IAAQ;AAAA,IAAA,IACxBC,QAAK;AAAA,aAAEhB,EAAMgB;AAAAA,IAAK;AAAA,IAAA,OAAA;AAAA,IAAA,IAAAC,WAAA;AAAA,UAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAAAF,EAAAC;AAAAE,MAAAA,EAAAL,GAAAN,EAIfY,GAAI;AAAA,QAAA,IAACC,OAAI;AAAA,iBAAEzB,EAAM0B;AAAAA,QAAK;AAAA,QAAA,IAAAT,WAAA;AAAA,cAAAU,IAAAC,EAAAA;AAAAC,iBAAAA,EAAAF,GAAA,OACTxB,CAAE,GAAAoB,EAAAI,GAAA,MACX3B,EAAM0B,KAAK,GAAAC;AAAAA,QAAA;AAAA,MAAA,CAAA,GAAAP,CAAA;AAAA,UAAAU,IAqBPC,EAAU/B,EAAMgC,GAAG;AAAC,oBAAAF,KAAA,cAAAG,EAAAH,GAAAR,CAAA,GAAAO,EAAAP,GAAA,MAVrBnB,CAAE,GAAA+B,EAAAZ,GAAAa,EAAA;AAAA,QAAA,IAAA,iBAAA;AAAA,iBAEQnC,EAAMW;AAAAA,QAAO;AAAA,QAAA,IAAA,iBAAA;AAAA,iBACbX,EAAMgB,SAASoB;AAAAA,QAAS;AAAA,QAAA,IAAA,kBAAA;AAAA,iBACvBpC,EAAMqC,YAAYD;AAAAA,QAAS;AAAA,QAAA,IAE1CzB,UAAO;AAAA,iBAAEX,EAAMW;AAAAA,QAAO;AAAA,QAAA,IACtBI,WAAQ;AAAA,iBAAEf,EAAMe;AAAAA,QAAQ;AAAA,QAAA,IACxBuB,WAAQ;AAAA,iBAAEtC,EAAMO;AAAAA,QAAQ;AAAA,QAAA,IACxB8B,WAAQ;AAAA,iBAAErC,EAAMqC;AAAAA,QAAQ;AAAA,MAAA,GAEpBpC,GAAI;AAAA,QAAA,UACEI;AAAAA,MAAAA,CAAY,GAAA,IAAA,EAAA,GAAAkC,EAAAC,CAAAA,MAAA;AAAA,YAAAC,IA1BfC,EAAG,wBAAwB1C,EAAM2C,kBAAkB,8BAA8B3C,EAAM2C,cAAc,EAAE,GAACC,IAO1GF,EAAG,eAAe,oBAAoB1C,EAAMF,IAAI,IAAI,qBAAqBE,EAAMD,KAAK,IAAIC,EAAM6C,OAAO;AAAA,UAC1G,iBAAiB7C,EAAMe;AAAAA,UACvB,iBAAiBf,EAAMO;AAAAA,QAAAA,CACxB;AAACkC,eAAAA,MAAAD,EAAAM,KAAAC,EAAA7B,GAAAsB,EAAAM,IAAAL,CAAA,GAAAG,MAAAJ,EAAAQ,KAAAD,EAAA3B,GAAAoB,EAAAQ,IAAAJ,CAAA,GAAAJ;AAAAA,MAAA,GAAA;AAAA,QAAAM,GAAAV;AAAAA,QAAAY,GAAAZ;AAAAA,MAAAA,CAAA,GAAAlB;AAAAA,IAAA;AAAA,EAAA,CAAA;AAwBZ;"}
+{"version":3,"file":"toggle.js","sources":["../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  /**\n   * Keeps the switch as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"aria-describedby\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a checkbox input: a click on it or on its label, and Space, still\n  // toggle it. Cancel the click; the browser then puts the previous state back.\n  const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (local.readOnly) event.preventDefault();\n  };\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helper.text()}\n      helperTextId={helper.id}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            aria-describedby={helper.describedBy()}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            aria-readonly={local.readOnly || undefined}\n            onChange={handleChange}\n            onClick={handleClick}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"names":["Toggle","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","helper","createHelperText","helperText","describedBy","handleClick","event","callHandler","onClick","readOnly","preventDefault","handleChange","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","text","helperTextId","disabled","error","children","_el$","_tmpl$2","_el$3","firstChild","_el$4","_$insert","Show","when","label","_el$2","_tmpl$","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","undefined","required","readonly","_$effect","_p$","_v$","cn","labelPlacement","_v$2","class","e","_$className","t"],"mappings":"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"}

package/dist/components/inputs/valueSlider/valueSlider.d.ts

@@ -1,6 +1,18 @@
 import { type JSX } from "solid-js";
 import { type SliderProps, type SliderValue } from "../slider";
 export interface ValueSliderProps extends SliderProps {
+    /**
+     * Label text, drawn in the header row beside the readout. It names the slider,
+     * as `Slider`'s label does; each thumb of a range adds its own word: with
+     * `label="Price"` they read "Price minimum" and "Price maximum".
+     */
+    label?: string | undefined;
+    /**
+     * Accessible name of the slider. Replaces the name the header `label` gives
+     * it; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb
+     * of a range adds its own word, as with `label`.
+     */
+    "aria-label"?: string | undefined;
     /**
      * Read-only value readout beside the label. `true` shows the raw value; pass a
      * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.

package/dist/components/inputs/valueSlider/valueSlider.js

@@ -1,58 +1,63 @@
-import { insert as t, createComponent as s, effect as v, setAttribute as f, className as w, template as a, delegateEvents as $ } from "solid-js/web";
+import { insert as l, createComponent as s, setAttribute as v, effect as _, mergeProps as $, className as y, template as o, delegateEvents as R } from "solid-js/web";
 import '../../../assets/styles/less/components/valueSlider/valueSlider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                                 */
-import { splitProps as g, children as R, Show as d } from "solid-js";
-import k from "clsx";
-import { Slider as A } from "../slider/slider.js";
-var y = /* @__PURE__ */ a("<span class=smwb-value-slider__label>"), S = /* @__PURE__ */ a("<span class=smwb-value-slider__readout>"), C = /* @__PURE__ */ a('<button type=button class=smwb-value-slider__reset><svg viewBox="0 0 24 24"width=16 height=16 aria-hidden=true fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"stroke-linecap=round stroke-linejoin=round>'), x = /* @__PURE__ */ a("<div class=smwb-value-slider__header><span class=smwb-value-slider__spacer>"), L = /* @__PURE__ */ a("<div>");
-const M = (o, e) => typeof o == "function" ? o(e) : Array.isArray(e) ? `${e[0]} – ${e[1]}` : e == null ? "" : String(e);
-function V(o) {
-  const [e, u] = g(o, ["readout", "endAdornment", "onReset", "resetLabel", "label", "class"]), c = R(() => e.endAdornment), m = () => e.readout !== void 0 && e.readout !== !1, b = () => e.label != null || m() || c() != null || e.onReset != null;
+import { splitProps as k, children as A, Show as u } from "solid-js";
+import S from "clsx";
+import { createId as C } from "../../../primitives/createId.js";
+import { Slider as P } from "../slider/slider.js";
+var x = /* @__PURE__ */ o("<span class=smwb-value-slider__label>"), B = /* @__PURE__ */ o("<span class=smwb-value-slider__readout>"), I = /* @__PURE__ */ o('<button type=button class=smwb-value-slider__reset><svg viewBox="0 0 24 24"width=16 height=16 aria-hidden=true fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"stroke-linecap=round stroke-linejoin=round>'), L = /* @__PURE__ */ o("<div class=smwb-value-slider__header><span class=smwb-value-slider__spacer>"), M = /* @__PURE__ */ o("<div>");
+const j = (i, e) => typeof i == "function" ? i(e) : Array.isArray(e) ? `${e[0]} – ${e[1]}` : e == null ? "" : String(e);
+function F(i) {
+  const [e, n] = k(i, ["readout", "endAdornment", "onReset", "resetLabel", "label", "class"]), c = A(() => e.endAdornment), m = () => e.readout !== void 0 && e.readout !== !1, f = () => e.label != null || m() || c() != null || e.onReset != null, b = `${C()}-label`, w = () => n["aria-labelledby"] || (e.label && !n["aria-label"] ? b : void 0);
   return (() => {
-    var i = L();
-    return t(i, s(d, {
+    var d = M();
+    return l(d, s(u, {
       get when() {
-        return b();
+        return f();
       },
       get children() {
-        var l = x(), _ = l.firstChild;
-        return t(l, s(d, {
+        var t = L(), g = t.firstChild;
+        return l(t, s(u, {
           get when() {
             return e.label != null;
           },
           get children() {
-            var r = y();
-            return t(r, () => e.label), r;
+            var r = x();
+            return v(r, "id", b), l(r, () => e.label), r;
           }
-        }), _), t(l, s(d, {
+        }), g), l(t, s(u, {
           get when() {
             return m();
           },
           get children() {
-            var r = S();
-            return t(r, () => M(e.readout, u.value)), r;
+            var r = B();
+            return l(r, () => j(e.readout, n.value)), r;
           }
-        }), null), t(l, c, null), t(l, s(d, {
+        }), null), l(t, c, null), l(t, s(u, {
           get when() {
             return e.onReset != null;
           },
           get children() {
-            var r = C();
-            return r.$$click = () => e.onReset?.(), v((n) => {
-              var h = e.resetLabel ?? "Reset", p = u.disabled;
-              return h !== n.e && f(r, "aria-label", n.e = h), p !== n.t && (r.disabled = n.t = p), n;
+            var r = I();
+            return r.$$click = () => e.onReset?.(), _((a) => {
+              var p = e.resetLabel ?? "Reset", h = n.disabled;
+              return p !== a.e && v(r, "aria-label", a.e = p), h !== a.t && (r.disabled = a.t = h), a;
             }, {
               e: void 0,
               t: void 0
             }), r;
           }
-        }), null), l;
+        }), null), t;
       }
-    }), null), t(i, s(A, u), null), v(() => w(i, k("smwb-value-slider", e.class))), i;
+    }), null), l(d, s(P, $(n, {
+      get "aria-labelledby"() {
+        return w();
+      }
+    })), null), _(() => y(d, S("smwb-value-slider", e.class))), d;
   })();
 }
-$(["click"]);
+R(["click"]);
 export {
-  V as ValueSlider
+  F as ValueSlider
 };
 //# sourceMappingURL=valueSlider.js.map

package/dist/components/inputs/valueSlider/valueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","Array","isArray","String","ValueSlider","props","local","sliderProps","splitProps","endAdornment","children","hasReadout","undefined","showHeader","label","onReset","_el$","_tmpl$5","_$insert","_$createComponent","Show","when","_el$2","_tmpl$4","_el$4","firstChild","_el$3","_tmpl$","_el$5","_tmpl$2","_el$6","_tmpl$3","$$click","_$effect","_p$","_v$","resetLabel","_v$2","disabled","e","_$setAttribute","t","Slider","_$className","cn","class","_$delegateEvents"],"mappings":";;;;;;;AAoBA,MAAMA,IAAgBA,CACpBC,GACAC,MAEI,OAAOD,KAAY,aAAmBA,EAAQC,CAAK,IACnDC,MAAMC,QAAQF,CAAK,IAAU,GAAGA,EAAM,CAAC,CAAC,MAAMA,EAAM,CAAC,CAAC,KACnDA,KAAS,OAAO,KAAKG,OAAOH,CAAK;AASnC,SAASI,EAAYC,GAAsC;AAChE,QAAM,CAACC,GAAOC,CAAW,IAAIC,EAAWH,GAAO,CAC7C,WACA,gBACA,WACA,cACA,SACA,OAAO,CACR,GAIKI,IAAeC,EAAS,MAAMJ,EAAMG,YAAY,GAChDE,IAAaA,MAAeL,EAAMP,YAAYa,UAAaN,EAAMP,YAAY,IAC7Ec,IAAaA,MACjBP,EAAMQ,SAAS,QAAQH,OAAgBF,OAAkB,QAAQH,EAAMS,WAAW;AAEpF,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EAEKC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAER,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAAH,WAAA;AAAA,YAAAY,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG;AAAAP,eAAAA,EAAAI,GAAAH,EAEnBC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEf,EAAMQ,SAAS;AAAA,UAAI;AAAA,UAAA,IAAAJ,WAAA;AAAA,gBAAAgB,IAAAC,EAAAA;AAAAT,mBAAAA,EAAAQ,GAAA,MACWpB,EAAMQ,KAAK,GAAAY;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAF,CAAA,GAAAN,EAAAI,GAAAH,EAGpDC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEV,EAAAA;AAAAA,UAAY;AAAA,UAAA,IAAAD,WAAA;AAAA,gBAAAkB,IAAAC,EAAAA;AAAAX,mBAAAA,EAAAU,GAAA,MACoB9B,EAAcQ,EAAMP,SAASQ,EAAYP,KAAK,CAAC,GAAA4B;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAV,EAAAI,GAE1Fb,GAAY,IAAA,GAAAS,EAAAI,GAAAH,EACZC,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEf,EAAMS,WAAW;AAAA,UAAI;AAAA,UAAA,IAAAL,WAAA;AAAA,gBAAAoB,IAAAC,EAAAA;AAAAD,mBAAAA,EAAAE,UAMpB,MAAM1B,EAAMS,UAAAA,GAAWkB,EAAAC,CAAAA,MAAA;AAAA,kBAAAC,IAFpB7B,EAAM8B,cAAc,SAAOC,IAC7B9B,EAAY+B;AAAQH,qBAAAA,MAAAD,EAAAK,KAAAC,EAAAV,GAAA,cAAAI,EAAAK,IAAAJ,CAAA,GAAAE,MAAAH,EAAAO,MAAAX,EAAAQ,WAAAJ,EAAAO,IAAAJ,IAAAH;AAAAA,YAAA,GAAA;AAAA,cAAAK,GAAA3B;AAAAA,cAAA6B,GAAA7B;AAAAA,YAAAA,CAAA,GAAAkB;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAA,IAAA,GAAAR;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAF,GAAAG,EAUrCuB,GAAWnC,CAAW,GAAA,IAAA,GAAA0B,EAAA,MAAAU,EAAA3B,GA1Bb4B,EAAG,qBAAqBtC,EAAMuC,KAAK,CAAC,CAAA,GAAA7B;AAAAA,EAAA,GAAA;AA6BpD;AAE2B8B,EAAA,CAAA,OAAA,CAAA;"}
+{"version":3,"file":"valueSlider.js","sources":["../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\nimport { createId } from \"../../../primitives/createId\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Label text, drawn in the header row beside the readout. It names the slider,\n   * as `Slider`'s label does; each thumb of a range adds its own word: with\n   * `label=\"Price\"` they read \"Price minimum\" and \"Price maximum\".\n   */\n  label?: string | undefined;\n  /**\n   * Accessible name of the slider. Replaces the name the header `label` gives\n   * it; a ValueSlider without a label needs it or `aria-labelledby`. Each thumb\n   * of a range adds its own word, as with `label`.\n   */\n  \"aria-label\"?: string | undefined;\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n  // The header label names the slider through Slider's aria-labelledby, which\n  // goes on its range input (each thumb of a range adds its own word). A\n  // caller's aria-label or aria-labelledby replaces it, as with Slider's label.\n  const labelId = `${createId()}-label`;\n  const labelledBy = (): string | undefined =>\n    sliderProps[\"aria-labelledby\"] || (local.label && !sliderProps[\"aria-label\"] ? labelId : undefined);\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span id={labelId} class=\"smwb-value-slider__label\">\n              {local.label}\n            </span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} aria-labelledby={labelledBy()} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"names":["formatReadout","readout","value","Array","isArray","String","ValueSlider","props","local","sliderProps","splitProps","endAdornment","children","hasReadout","undefined","showHeader","label","onReset","labelId","createId","labelledBy","_el$","_tmpl$5","_$insert","_$createComponent","Show","when","_el$2","_tmpl$4","_el$4","firstChild","_el$3","_tmpl$","_$setAttribute","_el$5","_tmpl$2","_el$6","_tmpl$3","$$click","_$effect","_p$","_v$","resetLabel","_v$2","disabled","e","t","Slider","_$mergeProps","_$className","cn","class","_$delegateEvents"],"mappings":"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"}

package/dist/components/layout/appLayout/appLayout.d.ts

@@ -25,6 +25,8 @@ export interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
     sidebarCollapsedWidth?: number | string;
     /** Keep the header pinned while content scrolls. */
     stickyHeader?: boolean;
+    /** Test id of the root `<div>`; `app-layout` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element;

package/dist/components/layout/appLayout/appLayout.js

@@ -1,36 +1,38 @@
 import { use as L, spread as P, mergeProps as x, insert as t, createComponent as o, setAttribute as c, effect as H, template as s, delegateEvents as I } from "solid-js/web";
 import '../../../assets/styles/less/components/appLayout/appLayout.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { mergeProps as j, splitProps as z, children as u, Show as n } from "solid-js";
-import E from "clsx";
-import { createControllableState as R } from "../../../primitives/createControllableState.js";
-import { createId as V } from "../../../primitives/createId.js";
+import { mergeProps as z, splitProps as E, children as u, Show as p } from "solid-js";
+import R from "clsx";
+import { createControllableState as V } from "../../../primitives/createControllableState.js";
+import { createId as j } from "../../../primitives/createId.js";
 import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
-import { Icon as B } from "../../base/icon/icon.js";
-var D = /* @__PURE__ */ s("<div class=smwb-app-layout__header>"), F = /* @__PURE__ */ s("<div class=smwb-app-layout__collapse>"), G = /* @__PURE__ */ s("<aside class=smwb-app-layout__sidebar>"), J = /* @__PURE__ */ s("<div class=smwb-app-layout__footer>"), K = /* @__PURE__ */ s("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), M = /* @__PURE__ */ s("<button type=button class=smwb-app-layout__collapse-btn>");
+import { mergeStyle as B } from "../../../primitives/mergeStyle.js";
+import { Icon as D } from "../../base/icon/icon.js";
+var F = /* @__PURE__ */ s("<div class=smwb-app-layout__header>"), G = /* @__PURE__ */ s("<div class=smwb-app-layout__collapse>"), J = /* @__PURE__ */ s("<aside class=smwb-app-layout__sidebar>"), K = /* @__PURE__ */ s("<div class=smwb-app-layout__footer>"), M = /* @__PURE__ */ s("<div><div class=smwb-app-layout__body><div class=smwb-app-layout__content>"), N = /* @__PURE__ */ s("<button type=button class=smwb-app-layout__collapse-btn>");
 const S = (i) => typeof i == "number" ? `${i}px` : i;
-function te(i) {
-  const k = j({
+function re(i) {
+  const k = z({
     sidebarWidth: 260,
     defaultSidebarCollapsed: !1,
     collapsible: !1,
     collapseToggleAriaLabel: "Toggle navigation",
     sidebarCollapsedWidth: 72,
     stickyHeader: !0
-  }, i), [e, T] = z(k, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref"]), [d, W] = R({
+  }, i), [e, T] = E(k, ["header", "sidebar", "footer", "sidebarWidth", "sidebarCollapsed", "defaultSidebarCollapsed", "onSidebarCollapsedChange", "collapsible", "collapseToggle", "collapseToggleAriaLabel", "sidebarCollapsedWidth", "stickyHeader", "class", "style", "children", "ref", "data-testid"]), [d, W] = V({
     value: () => e.sidebarCollapsed,
     defaultValue: e.defaultSidebarCollapsed,
     onChange: (a) => e.onSidebarCollapsedChange?.(a)
-  }), g = V(), f = u(() => e.header), h = u(() => e.sidebar), _ = u(() => e.footer), y = u(() => e.collapsible ? e.collapseToggle : void 0), A = () => ({
-    "--smui-app-sidebar-w": d() ? S(e.sidebarCollapsedWidth) : S(e.sidebarWidth),
-    ...typeof e.style == "object" && e.style ? e.style : {}
-  });
+  }), g = j(), f = u(() => e.header), h = u(() => e.sidebar), _ = u(() => e.footer), y = u(() => e.collapsible ? e.collapseToggle : void 0), A = () => B({
+    "--smui-app-sidebar-w": d() ? S(e.sidebarCollapsedWidth) : S(e.sidebarWidth)
+  }, e.style);
   return (() => {
-    var a = K(), b = a.firstChild, m = b.firstChild, v = q(e.ref);
+    var a = M(), b = a.firstChild, m = b.firstChild, v = q(e.ref);
     return typeof v == "function" && L(v, a), P(a, x(T, {
-      "data-testid": "app-layout",
+      get "data-testid"() {
+        return e["data-testid"] ?? "app-layout";
+      },
       get class() {
-        return E("smwb-app-layout", {
+        return R("smwb-app-layout", {
           "smwb-app-layout_sticky-header": e.stickyHeader,
           "smwb-app-layout_collapsed": d()
         }, e.class);
@@ -38,41 +40,41 @@ function te(i) {
       get style() {
         return A();
       }
-    }), !1, !0), t(a, o(n, {
+    }), !1, !0), t(a, o(p, {
       get when() {
         return f();
       },
       get children() {
-        var l = D();
+        var l = F();
         return t(l, f), l;
       }
-    }), b), t(b, o(n, {
+    }), b), t(b, o(p, {
       get when() {
         return h();
       },
       get children() {
-        var l = G();
-        return c(l, "id", g), t(l, o(n, {
+        var l = J();
+        return c(l, "id", g), t(l, o(p, {
           get when() {
             return e.collapsible;
           },
           get children() {
-            var C = F();
-            return t(C, o(n, {
+            var C = G();
+            return t(C, o(p, {
               get when() {
                 return y();
               },
               get fallback() {
                 return (() => {
-                  var r = M();
-                  return r.$$click = () => W(!d()), c(r, "aria-controls", g), t(r, o(B, {
+                  var r = N();
+                  return r.$$click = () => W(!d()), c(r, "aria-controls", g), t(r, o(D, {
                     get name() {
                       return d() ? "chevron_right" : "chevron_left";
                     },
                     size: 20
-                  })), H((p) => {
+                  })), H((n) => {
                     var w = e.collapseToggleAriaLabel, $ = !d();
-                    return w !== p.e && c(r, "aria-label", p.e = w), $ !== p.t && c(r, "aria-expanded", p.t = $), p;
+                    return w !== n.e && c(r, "aria-label", n.e = w), $ !== n.t && c(r, "aria-expanded", n.t = $), n;
                   }, {
                     e: void 0,
                     t: void 0
@@ -86,12 +88,12 @@ function te(i) {
           }
         }), null), t(l, h, null), l;
       }
-    }), m), t(m, () => e.children, null), t(m, o(n, {
+    }), m), t(m, () => e.children, null), t(m, o(p, {
       get when() {
         return _();
       },
       get children() {
-        var l = J();
+        var l = K();
         return t(l, _), l;
       }
     }), null), a;
@@ -99,6 +101,6 @@ function te(i) {
 }
 I(["click"]);
 export {
-  te as AppLayout
+  re as AppLayout
 };
 //# sourceMappingURL=appLayout.js.map

package/dist/components/layout/appLayout/appLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","headerSlot","children","header","sidebarSlot","sidebar","footerSlot","footer","collapseToggleSlot","collapseToggle","undefined","style","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"appLayout.js","sources":["../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  /** Test id of the root `<div>`; `app-layout` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  // The caller's style goes last: its own --smui-app-sidebar-w wins over the width props.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(\n      { \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth) },\n      local.style\n    );\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"app-layout\"}\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"names":["len","v","AppLayout","props","merged","mergeProps","sidebarWidth","defaultSidebarCollapsed","collapsible","collapseToggleAriaLabel","sidebarCollapsedWidth","stickyHeader","local","rest","splitProps","collapsed","setCollapsed","createControllableState","value","sidebarCollapsed","defaultValue","onChange","next","onSidebarCollapsedChange","sidebarId","createId","headerSlot","children","header","sidebarSlot","sidebar","footerSlot","footer","collapseToggleSlot","collapseToggle","undefined","style","mergeStyle","_el$","_tmpl$5","_el$3","firstChild","_el$6","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$","_el$4","_tmpl$3","_$setAttribute","_el$5","_tmpl$2","fallback","_el$8","_tmpl$6","$$click","Icon","name","size","_$effect","_p$","_v$","_v$2","e","t","_el$7","_tmpl$4","_$delegateEvents"],"mappings":"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"}

package/dist/components/layout/divider/divider.d.ts

@@ -14,6 +14,8 @@ export interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {
     thickness?: number | string;
     /** Stretch to fill a flex container along the cross axis. */
     flexItem?: boolean;
+    /** Test id of the root `<div>`; `divider` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Divider(props: ParentProps<DividerProps>): JSX.Element;

package/dist/components/layout/divider/divider.js

@@ -1,11 +1,12 @@
 import { use as v, spread as u, mergeProps as p, insert as s, createComponent as f, template as a } from "solid-js/web";
 import '../../../assets/styles/less/components/divider/divider.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                         */
-import { mergeProps as h, splitProps as g, children as w, Show as b } from "solid-js";
-import y from "clsx";
-import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
-var _ = /* @__PURE__ */ a("<span class=smwb-divider__text>"), $ = /* @__PURE__ */ a("<div>");
-const C = {
+import { mergeProps as g, splitProps as h, children as w, Show as b } from "solid-js";
+import x from "clsx";
+import { mergeRefs as _ } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as y } from "../../../primitives/mergeStyle.js";
+var $ = /* @__PURE__ */ a("<span class=smwb-divider__text>"), C = /* @__PURE__ */ a("<div>");
+const k = {
   default: void 0,
   primary: "var(--smui-primaryColor)",
   secondary: "var(--smui-secondaryColor)",
@@ -14,19 +15,18 @@ const C = {
   warning: "var(--smui-warningColor)",
   info: "var(--smui-infoColor)"
 };
-function j(l) {
-  const d = h({
+function T(l) {
+  const d = g({
     orientation: "horizontal",
     variant: "fullWidth",
     textAlign: "center",
     color: "default"
-  }, l), [r, c] = g(d, ["class", "orientation", "variant", "textAlign", "color", "thickness", "flexItem", "style", "children", "ref"]), i = w(() => r.orientation === "horizontal" ? r.children : void 0), o = () => {
+  }, l), [r, m] = h(d, ["class", "orientation", "variant", "textAlign", "color", "thickness", "flexItem", "style", "children", "ref", "data-testid"]), i = w(() => r.orientation === "horizontal" ? r.children : void 0), o = () => {
     const e = i();
     return e != null && e !== !1;
-  }, m = () => {
-    const e = C[r.color], t = typeof r.thickness == "number" ? `${r.thickness}px` : r.thickness;
-    return {
-      ...typeof r.style == "object" && r.style ? r.style : {},
+  }, c = () => {
+    const e = k[r.color], t = typeof r.thickness == "number" ? `${r.thickness}px` : r.thickness;
+    return y(r.style, {
       ...e ? {
         "border-color": e
       } : {},
@@ -35,38 +35,40 @@ function j(l) {
       } : {
         "border-bottom-width": t
       } : {}
-    };
+    });
   };
   return (() => {
-    var e = $(), t = x(r.ref);
-    return typeof t == "function" && v(t, e), u(e, p(c, {
-      "data-testid": "divider",
+    var e = C(), t = _(r.ref);
+    return typeof t == "function" && v(t, e), u(e, p(m, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "divider";
+      },
       role: "separator",
       get "aria-orientation"() {
         return r.orientation;
       },
       get class() {
-        return y("smwb-divider", `smwb-divider_${r.orientation}`, `smwb-divider_${r.variant}`, {
+        return x("smwb-divider", `smwb-divider_${r.orientation}`, `smwb-divider_${r.variant}`, {
           "smwb-divider_with-text": o(),
           [`smwb-divider_align-${r.textAlign}`]: o(),
           "smwb-divider_flex-item": r.flexItem
         }, r.class);
       },
       get style() {
-        return m();
+        return c();
       }
     }), !1, !0), s(e, f(b, {
       get when() {
         return o();
       },
       get children() {
-        var n = _();
+        var n = $();
         return s(n, i), n;
       }
     })), e;
   })();
 }
 export {
-  j as Divider
+  T as Divider
 };
 //# sourceMappingURL=divider.js.map

package/dist/components/layout/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.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\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the text once, and only where it is drawn (a horizontal divider):\n  // markup passed as children is created anew on every read, and during\n  // hydration a copy the server never rendered has no DOM node.\n  const text = children(() => (local.orientation === \"horizontal\" ? local.children : undefined));\n  const hasText = (): boolean => {\n    const resolved = text();\n    return resolved !== undefined && resolved !== null && (resolved as unknown) !== false;\n  };\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText(),\n        [`smwb-divider_align-${local.textAlign}`]: hasText(),\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText()}>\n        <span class=\"smwb-divider__text\">{text()}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"names":["colorVar","default","undefined","primary","secondary","error","success","warning","info","Divider","props","merged","mergeProps","orientation","variant","textAlign","color","local","rest","splitProps","text","children","hasText","resolved","dividerStyle","c","t","thickness","style","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","flexItem","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$"],"mappings":";;;;;;;AAwBA,MAAMA,IAAqD;AAAA,EACzDC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,MAAM;AACR;AAEO,SAASC,EAAQC,GAA+C;AACrE,QAAMC,IAASC,EACb;AAAA,IACEC,aAAa;AAAA,IACbC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,eACA,WACA,aACA,SACA,aACA,YACA,SACA,YACA,KAAK,CACN,GAKKS,IAAOC,EAAS,MAAOJ,EAAMJ,gBAAgB,eAAeI,EAAMI,WAAWnB,MAAU,GACvFoB,IAAUA,MAAe;AAC7B,UAAMC,IAAWH,EAAAA;AACjB,WAAiCG,KAAa,QAASA,MAAyB;AAAA,EAClF,GAEMC,IAAeA,MAAyB;AAC5C,UAAMC,IAAIzB,EAASiB,EAAMD,KAAK,GACxBU,IAAI,OAAOT,EAAMU,aAAc,WAAW,GAAGV,EAAMU,SAAS,OAAOV,EAAMU;AAC/E,WAAO;AAAA,MACL,GAAI,OAAOV,EAAMW,SAAU,YAAYX,EAAMW,QAAQX,EAAMW,QAAQ,CAAA;AAAA,MACnE,GAAIH,IAAI;AAAA,QAAE,gBAAgBA;AAAAA,MAAAA,IAAM,CAAA;AAAA,MAChC,GAAIC,IAAKT,EAAMJ,gBAAgB,aAAa;AAAA,QAAE,qBAAqBa;AAAAA,MAAAA,IAAM;AAAA,QAAE,uBAAuBA;AAAAA,MAAAA,IAAO,CAAA;AAAA,IAAC;AAAA,EAE9G;AAEA,UAAA,MAAA;AAAA,QAAAG,IAAAC,EAAAA,GAAAC,IAGSC,EAAUf,EAAMgB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBlB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAS,MAChB;AAAA,MAAW,IAAA,qBAAA;AAAA,eACED,EAAMJ;AAAAA,MAAW;AAAA,MAAA,IAAA,QAAA;AAAA,eAC5BwB,EAAG,gBAAgB,gBAAgBpB,EAAMJ,WAAW,IAAI,gBAAgBI,EAAMH,OAAO,IAAI;AAAA,UAC9F,0BAA0BQ,EAAAA;AAAAA,UAC1B,CAAC,sBAAsBL,EAAMF,SAAS,EAAE,GAAGO,EAAAA;AAAAA,UAC3C,0BAA0BL,EAAMqB;AAAAA,QAAAA,GAC/BrB,EAAMsB,KAAK;AAAA,MAAC;AAAA,MAAA,IACfX,QAAK;AAAA,eAAEJ,EAAAA;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAgB,EAAAX,GAAAY,EAEpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAErB,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAD,WAAA;AAAA,YAAAuB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACexB,CAAI,GAAAwB;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAf;AAAAA,EAAA,GAAA;AAI9C;"}
+{"version":3,"file":"divider.js","sources":["../../../../src/components/layout/divider/divider.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 { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  /** Test id of the root `<div>`; `divider` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the text once, and only where it is drawn (a horizontal divider):\n  // markup passed as children is created anew on every read, and during\n  // hydration a copy the server never rendered has no DOM node.\n  const text = children(() => (local.orientation === \"horizontal\" ? local.children : undefined));\n  const hasText = (): boolean => {\n    const resolved = text();\n    return resolved !== undefined && resolved !== null && (resolved as unknown) !== false;\n  };\n\n  const dividerStyle = (): JSX.CSSProperties | string | undefined => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return mergeStyle(local.style, {\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    });\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"divider\"}\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText(),\n        [`smwb-divider_align-${local.textAlign}`]: hasText(),\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText()}>\n        <span class=\"smwb-divider__text\">{text()}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"names":["colorVar","default","undefined","primary","secondary","error","success","warning","info","Divider","props","merged","mergeProps","orientation","variant","textAlign","color","local","rest","splitProps","text","children","hasText","resolved","dividerStyle","c","t","thickness","mergeStyle","style","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","flexItem","class","_$insert","_$createComponent","Show","when","_el$2","_tmpl$"],"mappings":";;;;;;;;AA2BA,MAAMA,IAAqD;AAAA,EACzDC,SAASC;AAAAA,EACTC,SAAS;AAAA,EACTC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,SAAS;AAAA,EACTC,MAAM;AACR;AAEO,SAASC,EAAQC,GAA+C;AACrE,QAAMC,IAASC,EACb;AAAA,IACEC,aAAa;AAAA,IACbC,SAAS;AAAA,IACTC,WAAW;AAAA,IACXC,OAAO;AAAA,EAAA,GAETN,CACF,GACM,CAACO,GAAOC,CAAI,IAAIC,EAAWR,GAAQ,CACvC,SACA,eACA,WACA,aACA,SACA,aACA,YACA,SACA,YACA,OACA,aAAa,CACd,GAKKS,IAAOC,EAAS,MAAOJ,EAAMJ,gBAAgB,eAAeI,EAAMI,WAAWnB,MAAU,GACvFoB,IAAUA,MAAe;AAC7B,UAAMC,IAAWH,EAAAA;AACjB,WAAiCG,KAAa,QAASA,MAAyB;AAAA,EAClF,GAEMC,IAAeA,MAA8C;AACjE,UAAMC,IAAIzB,EAASiB,EAAMD,KAAK,GACxBU,IAAI,OAAOT,EAAMU,aAAc,WAAW,GAAGV,EAAMU,SAAS,OAAOV,EAAMU;AAC/E,WAAOC,EAAWX,EAAMY,OAAO;AAAA,MAC7B,GAAIJ,IAAI;AAAA,QAAE,gBAAgBA;AAAAA,MAAAA,IAAM,CAAA;AAAA,MAChC,GAAIC,IAAKT,EAAMJ,gBAAgB,aAAa;AAAA,QAAE,qBAAqBa;AAAAA,MAAAA,IAAM;AAAA,QAAE,uBAAuBA;AAAAA,MAAAA,IAAO,CAAA;AAAA,IAAC,CAC3G;AAAA,EACH;AAEA,UAAA,MAAA;AAAA,QAAAI,IAAAC,EAAAA,GAAAC,IAGSC,EAAUhB,EAAMiB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBnB,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAEKD,EAAM,aAAa,KAAK;AAAA,MAAS;AAAA,MAAA,MACzC;AAAA,MAAW,IAAA,qBAAA;AAAA,eACEA,EAAMJ;AAAAA,MAAW;AAAA,MAAA,IAAA,QAAA;AAAA,eAC5ByB,EAAG,gBAAgB,gBAAgBrB,EAAMJ,WAAW,IAAI,gBAAgBI,EAAMH,OAAO,IAAI;AAAA,UAC9F,0BAA0BQ,EAAAA;AAAAA,UAC1B,CAAC,sBAAsBL,EAAMF,SAAS,EAAE,GAAGO,EAAAA;AAAAA,UAC3C,0BAA0BL,EAAMsB;AAAAA,QAAAA,GAC/BtB,EAAMuB,KAAK;AAAA,MAAC;AAAA,MAAA,IACfX,QAAK;AAAA,eAAEL,EAAAA;AAAAA,MAAc;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAiB,EAAAX,GAAAY,EAEpBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEtB,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAD,WAAA;AAAA,YAAAwB,IAAAC,EAAAA;AAAAL,eAAAA,EAAAI,GACezB,CAAI,GAAAyB;AAAAA,MAAA;AAAA,IAAA,CAAA,CAAA,GAAAf;AAAAA,EAAA,GAAA;AAI9C;"}

package/dist/components/layout/floatingWindow/floatingWindow.d.ts

@@ -76,6 +76,8 @@ export interface FloatingWindowProps extends Omit<JSX.HTMLAttributes<HTMLDivElem
     /** Accessible label for the collapse toggle while collapsed. */
     expandAriaLabel?: string;
     "aria-label"?: string;
+    /** Test id of the window's root `<div>`; `floating-window` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 /**