@ulu/frontend-vue 0.1.1-beta.7 → 0.1.1-beta.8

package/dist/{breakpoints-CgRM_Raf.js → breakpoints-D4qCPIvM.js}

@@ -1,4 +1,4 @@
-import { l as o, r as h, a as p, g as v } from "./index-WvoUVf2D.js";
+import { l as o, r as h, a as p, g as v } from "./index-DygmGRgT.js";
 const k = {
   iconClassClose: "css-icon css-icon--close",
   iconClassDragX: "css-icon css-icon--drag-x",

package/dist/frontend-vue.css

@@ -1 +1 @@
-.toast-animation-move,.toast-animation-enter-active,.toast-animation-leave-active{transition:all .3s ease}.toast-animation-enter-from,.toast-animation-leave-to{opacity:0;transform:translate(30px)}.toast-animation-leave-active{position:absolute;width:100%}.facets-dropdown-filters{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.facets-dropdown-filters__group{display:flex;gap:.5rem;align-items:center}.facets-header-layout__header{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}.facets-results__list{list-style:none;padding:0}.facets-fade-enter-active,.facets-fade-leave-active{transition:opacity .25s ease}.facets-fade-enter-from,.facets-fade-leave-to{opacity:0}.facets-sidebar-layout__body{display:grid;grid-template-columns:250px 1fr;gap:2rem}.facets-sidebar-layout--filters-hidden .facets-sidebar-layout__body{grid-template-columns:1fr}.scroll-anchors__rail{border-left:3px solid rgb(220,220,220);padding-left:1rem}.scroll-anchors__indicator{position:absolute;top:0;left:0;width:3px;background-color:#000}.scroll-anchors__indicator--can-transition{transition-property:height,transform;transition-timing-function:ease-in-out;transition-duration:.25s}
+.toast-animation-move,.toast-animation-enter-active,.toast-animation-leave-active{transition:all .3s ease}.toast-animation-enter-from,.toast-animation-leave-to{opacity:0;transform:translate(30px)}.toast-animation-leave-active{position:absolute;width:100%}.facets-dropdown-filters{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.facets-dropdown-filters__group{display:flex;gap:.5rem;align-items:center}.facets-header-layout__header{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}.facets-results__list{list-style:none;padding:0}.facets-fade-enter-active,.facets-fade-leave-active{transition:opacity .25s ease}.facets-fade-enter-from,.facets-fade-leave-to{opacity:0}.facets-sidebar__body{display:grid;grid-template-columns:250px 1fr;gap:2rem}.facets-sidebar--filters-hidden .facets-sidebar__body{grid-template-columns:1fr}.scroll-anchors__rail{border-left:3px solid rgb(220,220,220);padding-left:1rem}.scroll-anchors__indicator{position:absolute;top:0;left:0;width:3px;background-color:#000}.scroll-anchors__indicator--can-transition{transition-property:height,transform;transition-timing-function:ease-in-out;transition-duration:.25s}

package/dist/frontend-vue.js

@@ -1,4 +1,4 @@
-import { _ as l, N as e, s as u, a1 as U, t, u as o, Q as i, v as r, w as n, x as c, y as S, h as d, W as F, O as p, z as b, j as m, X as k, Y as T, A as g, a5 as P, a6 as h, a7 as w, a8 as y, ad as A, a9 as L, aa as v, ab as M, ac as x, H as B, I as C, J as R, K as f, L as D, B as I, am as N, C as E, D as j, R as q, S as G, U as V, T as z, k as H, Z as O, $ as W, a2 as J, a3 as K, a0 as Q, ae as X, af as Y, ag as Z, ah as _, M as $, G as aa, ai as sa, aj as la, ak as ea, al as ua, V as Ua, an as ta, ao as oa, E as ia, m as ra, n as na, o as ca, p as Sa, q as da, ap as Fa, aq as pa, ar as ba, F as ma, P as ka, f as Ta, b as ga, d as Pa, c as ha, e as wa, aw as ya, ay as Aa, a4 as La, as as va, at as Ma, ax as xa, av as Ba, au as Ca, i as Ra } from "./index-WvoUVf2D.js";
+import { _ as l, N as e, s as u, a1 as U, t, u as o, Q as i, v as r, w as n, x as c, y as S, h as d, W as F, O as p, z as b, j as m, X as k, Y as T, A as g, a5 as P, a6 as h, a7 as w, a8 as y, ad as A, a9 as L, aa as v, ab as M, ac as x, H as B, I as C, J as R, K as f, L as D, B as I, am as N, C as E, D as j, R as q, S as G, U as V, T as z, k as H, Z as O, $ as W, a2 as J, a3 as K, a0 as Q, ae as X, af as Y, ag as Z, ah as _, M as $, G as aa, ai as sa, aj as la, ak as ea, al as ua, V as Ua, an as ta, ao as oa, E as ia, m as ra, n as na, o as ca, p as Sa, q as da, ap as Fa, aq as pa, ar as ba, F as ma, P as ka, f as Ta, b as ga, d as Pa, c as ha, e as wa, aw as ya, ay as Aa, a4 as La, as as va, at as Ma, ax as xa, av as Ba, au as Ca, i as Ra } from "./index-DygmGRgT.js";
 export {
   l as UluAccordion,
   e as UluAdaptiveLayout,

package/dist/{index-WvoUVf2D.js → index-DygmGRgT.js}

@@ -1,4 +1,4 @@
-import { reactive as qt, ref as I, computed as w, resolveDirective as Gn, createElementBlock as d, openBlock as u, Fragment as E, withDirectives as Oe, createElementVNode as h, unref as A, normalizeClass as m, renderSlot as g, createTextVNode as $, toDisplayString as b, withKeys as Zn, normalizeStyle as H, createCommentVNode as p, nextTick as Qn, toRef as Ws, createBlock as _, Teleport as dt, resolveDynamicComponent as V, mergeProps as le, inject as ft, watchEffect as ht, defineAsyncComponent as Xs, markRaw as xe, toRefs as Ys, toValue as ot, resolveComponent as N, withModifiers as qs, createVNode as z, useSlots as Ks, renderList as x, TransitionGroup as Jn, withCtx as S, onMounted as mt, onBeforeUnmount as es, watch as We, isRef as Gs, hasInjectionContext as Zs, getCurrentInstance as Qs, onDeactivated as Js, onActivated as eo, onUnmounted as ts, normalizeProps as ee, guardReactiveProps as te, vModelText as to, vShow as Mt, createSlots as Ae } from "vue";
+import { reactive as qt, ref as I, computed as w, resolveDirective as Gn, createElementBlock as d, openBlock as u, Fragment as E, withDirectives as Oe, createElementVNode as h, unref as A, normalizeClass as m, renderSlot as g, createTextVNode as $, toDisplayString as p, withKeys as Zn, normalizeStyle as H, createCommentVNode as b, nextTick as Qn, toRef as Ws, createBlock as _, Teleport as dt, resolveDynamicComponent as V, mergeProps as le, inject as ft, watchEffect as ht, defineAsyncComponent as Xs, markRaw as xe, toRefs as Ys, toValue as ot, resolveComponent as N, withModifiers as qs, createVNode as z, useSlots as Ks, renderList as x, TransitionGroup as Jn, withCtx as S, onMounted as mt, onBeforeUnmount as es, watch as We, isRef as Gs, hasInjectionContext as Zs, getCurrentInstance as Qs, onDeactivated as Js, onActivated as eo, onUnmounted as ts, normalizeProps as ee, guardReactiveProps as te, vModelText as to, vShow as Mt, createSlots as Ae } from "vue";
 import { inline as ns, offset as ss, flip as os, shift as is, arrow as rs, useFloating as ls, autoUpdate as as } from "@floating-ui/vue";
 import { useRoute as cs, useRouter as no, RouterLink as gt } from "vue-router";
 import { Tab as so, TabGroup as oo, TabList as io, TabPanel as ro, TabPanels as lo } from "@headlessui/vue";
@@ -351,7 +351,7 @@ const po = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], b
             toggle: Me,
             close: de
           }, () => [
-            $(b(e.triggerText), 1)
+            $(p(e.triggerText), 1)
           ])
         ], 10, po)), [
           [ke, e.tooltip ? e.tooltip : null]
@@ -383,7 +383,7 @@ const po = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], b
           ]),
           W.$slots.footer ? (u(), d("span", wo, [
             g(W.$slots, "footer", { close: de })
-          ])) : p("", !0),
+          ])) : b("", !0),
           A(r).arrow ? (u(), d("span", {
             key: 1,
             class: "popover__arrow",
@@ -391,7 +391,7 @@ const po = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], b
             ref: f,
             style: H(Je.value),
             "data-ulu-popover-arrow": ""
-          }, null, 4)) : p("", !0)
+          }, null, 4)) : b("", !0)
         ], 46, bo)
       ], 64);
     };
@@ -441,14 +441,14 @@ const po = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], b
         key: 0,
         class: "popover__inner",
         innerHTML: e.config.content
-      }, null, 8, ko)) : (u(), d("span", $o, b(e.config.content), 1)),
+      }, null, 8, ko)) : (u(), d("span", $o, p(e.config.content), 1)),
       e.config.arrow ? (u(), d("span", {
         key: 2,
         class: "popover__arrow",
         ref_key: "contentArrow",
         ref: s,
         style: H(y.value)
-      }, null, 4)) : p("", !0)
+      }, null, 4)) : b("", !0)
     ], 14, So));
   }
 }, To = {
@@ -460,7 +460,7 @@ const po = ["id", "disabled", "aria-expanded", "aria-controls", "aria-label"], b
       A(Kt) ? (u(), _(Co, {
         key: 0,
         config: A(Gt)
-      }, null, 8, ["config"])) : p("", !0)
+      }, null, 8, ["config"])) : b("", !0)
     ], 8, ["to"]));
   }
 };
@@ -519,7 +519,7 @@ function Oo(e, n, t, s, o, i) {
     "onUpdate:modelValue": n[0] || (n[0] = (r) => o.open = r),
     onVnodeMounted: i.modalMounted,
     onVnodeUnmounted: i.modalUnmounted
-  }), null, 16, ["modelValue", "onVnodeMounted", "onVnodeUnmounted"])) : p("", !0);
+  }), null, 16, ["modelValue", "onVnodeMounted", "onVnodeUnmounted"])) : b("", !0);
 }
 const xo = /* @__PURE__ */ R(Ao, [["render", Oo]]);
 function Ro() {
@@ -586,7 +586,7 @@ const D = {
       key: 2,
       class: m([k.value, j.value]),
       "aria-hidden": "true"
-    }, null, 2)) : p("", !0);
+    }, null, 2)) : b("", !0);
   }
 };
 function Ut(e) {
@@ -1208,8 +1208,8 @@ function Do(e, n, t, s, o, i) {
               key: 0,
               class: "modal__title-icon",
               icon: t.titleIcon
-            }, null, 8, ["icon"])) : p("", !0),
-            h("span", Ho, b(t.title), 1)
+            }, null, 8, ["icon"])) : b("", !0),
+            h("span", Ho, p(t.title), 1)
           ])
         ], 10, Fo),
         h("button", {
@@ -1225,7 +1225,7 @@ function Do(e, n, t, s, o, i) {
             }, null, 8, ["icon"])
           ])
         ])
-      ], 2)) : p("", !0),
+      ], 2)) : b("", !0),
       h("div", {
         class: m(["modal__body", t.classes.body])
       }, [
@@ -1236,7 +1236,7 @@ function Do(e, n, t, s, o, i) {
         class: m(["site-modal__footer", t.classes.footer])
       }, [
         g(e.$slots, "footer", { close: i.close })
-      ], 2)) : p("", !0),
+      ], 2)) : b("", !0),
       s.resizerEnabled ? (u(), d("button", No, [
         g(e.$slots, "resizerIcon", {}, () => [
           z(r, {
@@ -1244,7 +1244,7 @@ function Do(e, n, t, s, o, i) {
             icon: t.resizerIcon || s.resizerIconType
           }, null, 8, ["icon"])
         ])
-      ], 512)) : p("", !0)
+      ], 512)) : b("", !0)
     ], 46, Vo)
   ], 8, ["to", "disabled"]);
 }
@@ -1363,9 +1363,9 @@ function Go(e, n, t, s, o, i) {
         t.toast.icon ? (u(), _(r, {
           key: 0,
           icon: t.toast.icon
-        }, null, 8, ["icon"])) : p("", !0)
+        }, null, 8, ["icon"])) : b("", !0)
       ])
-    ], 2)) : p("", !0),
+    ], 2)) : b("", !0),
     h("div", {
       class: m(["toast__content", t.classes.content])
     }, [
@@ -1376,16 +1376,16 @@ function Go(e, n, t, s, o, i) {
         }, [
           h("strong", {
             class: m(["toast__title", t.classes.title])
-          }, b(t.toast.title), 3),
+          }, p(t.toast.title), 3),
           t.toast.date ? (u(), d("span", {
             key: 0,
             class: m(["toast__date", t.classes.date])
-          }, b(t.toast.date), 3)) : p("", !0)
-        ], 2)) : p("", !0),
+          }, p(t.toast.date), 3)) : b("", !0)
+        ], 2)) : b("", !0),
         t.toast.description ? (u(), d("div", {
           key: 1,
           class: m(["toast__body", t.classes.body])
-        }, b(t.toast.description), 3)) : p("", !0)
+        }, p(t.toast.description), 3)) : b("", !0)
       ])
     ], 2),
     t.toast.actions?.length ? (u(), d("div", {
@@ -1396,8 +1396,8 @@ function Go(e, n, t, s, o, i) {
         key: a,
         class: m(["toast__action", t.classes.action]),
         onClick: (c) => i.handleAction(c, l)
-      }, b(l.label), 11, Ko))), 128))
-    ], 2)) : p("", !0),
+      }, p(l.label), 11, Ko))), 128))
+    ], 2)) : b("", !0),
     h("button", {
       class: m(["toast__close", t.classes.closeButton]),
       onClick: n[0] || (n[0] = (...l) => t.toast.close && t.toast.close(...l))
@@ -1541,7 +1541,7 @@ function ni(e) {
     await new Promise((f) => {
       document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => f()) : f();
     });
-    const r = await import("./breakpoints-CgRM_Raf.js"), { BreakpointManager: l } = r, a = xe(new l(n.plugin));
+    const r = await import("./breakpoints-D4qCPIvM.js"), { BreakpointManager: l } = r, a = xe(new l(n.plugin));
     t.value = xe(a);
     const c = () => {
       s.value = a.active, o.value = a.resizeDirection;
@@ -2058,7 +2058,7 @@ const pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
           isOpen: c.value,
           toggle: k
         }, () => [
-          $(b(e.triggerText), 1)
+          $(p(e.triggerText), 1)
         ])
       ], 10, bi),
       c.value ? (u(), d("div", {
@@ -2077,7 +2077,7 @@ const pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
             toggle: k
           })
         ], 2)
-      ], 10, _i)) : p("", !0)
+      ], 10, _i)) : b("", !0)
     ], 34));
   }
 }, Gf = {
@@ -2155,7 +2155,7 @@ const pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         }, () => [
           (u(), _(V(e.triggerTextElement), null, {
             default: S(() => [
-              $(b(e.triggerText), 1)
+              $(p(e.triggerText), 1)
             ]),
             _: 1
           }))
@@ -2225,9 +2225,9 @@ const pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
         key: 0,
         icon: e.icon,
         spaced: ""
-      }, null, 8, ["icon"])) : p("", !0),
+      }, null, 8, ["icon"])) : b("", !0),
       g(s.$slots, "default", {}, () => [
-        h("span", null, b(e.text), 1)
+        h("span", null, p(e.text), 1)
       ])
     ], 2));
   }
@@ -2319,14 +2319,14 @@ function Si(e, n, t, s, o, i) {
               key: 0,
               icon: f.icon,
               class: m([t.classes.linkIcon, f?.classes?.linkIcon])
-            }, null, 8, ["icon", "class"])) : p("", !0),
+            }, null, 8, ["icon", "class"])) : b("", !0),
             h("span", {
               class: m([t.classes.linkText, f?.classes?.linkText])
-            }, b(f.title), 3),
+            }, p(f.title), 3),
             f.tag ? (u(), _(l, le({
               key: 1,
               ref_for: !0
-            }, f.tag), null, 16)) : p("", !0)
+            }, f.tag), null, 16)) : b("", !0)
           ])
         ]),
         _: 2
@@ -2338,9 +2338,9 @@ function Si(e, n, t, s, o, i) {
         iconOnly: t.iconOnly,
         classes: t.classes,
         items: f.children
-      }, null, 8, ["iconOnly", "classes", "items"])) : p("", !0)
+      }, null, 8, ["iconOnly", "classes", "items"])) : b("", !0)
     ], 2))), 128))
-  ], 2)) : p("", !0);
+  ], 2)) : b("", !0);
 }
 const _s = /* @__PURE__ */ R(wi, [["render", Si]]), ki = {
   __name: "UluMenuStack",
@@ -2428,7 +2428,7 @@ const _s = /* @__PURE__ */ R(wi, [["render", Si]]), ki = {
     return (n, t) => (u(), _(vt, { classes: e.popoverClasses }, {
       trigger: S(({ isOpen: s }) => [
         g(n.$slots, "trigger", { isOpen: s }, () => [
-          h("span", null, b(e.triggerText), 1),
+          h("span", null, p(e.triggerText), 1),
           z(D, {
             class: "button__icon",
             icon: "type:dropdownExpand",
@@ -2762,7 +2762,7 @@ const Vi = { class: "layout-flex-baseline" }, Fi = { class: "type-word-break" },
           ])
         ]),
         _: 3
-      })) : p("", !0)
+      })) : b("", !0)
     ]));
   }
 }, th = {
@@ -2962,17 +2962,17 @@ function Di(e, n, t, s, o, i) {
         key: 0,
         icon: t.icon,
         class: "button__icon"
-      }, null, 8, ["icon"])) : p("", !0),
+      }, null, 8, ["icon"])) : b("", !0),
       (e.$slots.default || t.text) && !t.iconOnly ? (u(), d("span", Ni, [
         g(e.$slots, "default", {}, () => [
-          $(b(t.text), 1)
+          $(p(t.text), 1)
         ])
-      ])) : p("", !0),
+      ])) : b("", !0),
       t.icon && !t.iconBefore && !t.iconOnly ? (u(), _(r, {
         key: 2,
         icon: t.icon,
         class: "button__icon"
-      }, null, 8, ["icon"])) : p("", !0),
+      }, null, 8, ["icon"])) : b("", !0),
       g(e.$slots, "after")
     ]),
     _: 3
@@ -3041,18 +3041,18 @@ function Gi(e, n, t, s, o, i) {
       h("div", qi, [
         h("div", null, [
           g(e.$slots, "title", {}, () => [
-            h("strong", null, b(t.title), 1)
+            h("strong", null, p(t.title), 1)
           ])
         ]),
         h("div", null, [
           g(e.$slots, "description", {}, () => [
-            $(b(t.description), 1)
+            $(p(t.description), 1)
           ])
         ])
       ]),
       e.$slots.action ? (u(), d("div", Ki, [
         g(e.$slots, "action")
-      ])) : p("", !0)
+      ])) : b("", !0)
     ])
   ], 2);
 }
@@ -3117,8 +3117,8 @@ const rh = /* @__PURE__ */ R(Xi, [["render", Gi]]), Zi = ["aria-hidden"], Qi = {
           e.text ? (u(), d("span", {
             key: 0,
             "aria-hidden": e.alt ? "true" : null
-          }, b(e.text), 9, Zi)) : g(o.$slots, "default", { key: 1 }),
-          e.alt ? (u(), d("span", Qi, b(e.alt), 1)) : p("", !0)
+          }, p(e.text), 9, Zi)) : g(o.$slots, "default", { key: 1 }),
+          e.alt ? (u(), d("span", Qi, p(e.alt), 1)) : b("", !0)
         ], 2)
       ]),
       _: 3
@@ -3231,22 +3231,22 @@ function sr(e, n, t, s, o, i) {
       }, {
         default: S(() => [
           g(e.$slots, "title", {}, () => [
-            $(b(t.title), 1)
+            $(p(t.title), 1)
           ])
         ]),
         _: 3
-      })) : p("", !0),
+      })) : b("", !0),
       e.$slots.default || t.body ? (u(), d("span", nr, [
         g(e.$slots, "default", {}, () => [
-          $(b(t.body), 1)
+          $(p(t.body), 1)
         ])
-      ])) : p("", !0),
+      ])) : b("", !0),
       t.icon ? (u(), _(r, {
         key: 2,
         icon: t.icon,
         class: "button-verbose__icon",
         "aria-hidden": "true"
-      }, null, 8, ["icon"])) : p("", !0)
+      }, null, 8, ["icon"])) : b("", !0)
     ]),
     _: 3
   }, 16, ["class"]);
@@ -3461,7 +3461,7 @@ function hr(e, n, t, s, o, i) {
               }, {
                 default: S(() => [
                   g(e.$slots, "title", {}, () => [
-                    $(b(t.title), 1)
+                    $(p(t.title), 1)
                   ])
                 ]),
                 _: 3
@@ -3473,10 +3473,10 @@ function hr(e, n, t, s, o, i) {
                 ref: "link"
               }, [
                 g(e.$slots, "title", {}, () => [
-                  $(b(t.title), 1)
+                  $(p(t.title), 1)
                 ])
               ], 8, cr)) : g(e.$slots, "title", { key: 2 }, () => [
-                $(b(t.title), 1)
+                $(p(t.title), 1)
               ])
             ]),
             _: 3
@@ -3485,7 +3485,7 @@ function hr(e, n, t, s, o, i) {
         ]),
         e.$slots.aside ? (u(), d("div", ur, [
           g(e.$slots, "aside")
-        ])) : p("", !0)
+        ])) : b("", !0)
       ]),
       e.$slots.image || t.imageSrc ? (u(), d("div", {
         key: 0,
@@ -3500,10 +3500,10 @@ function hr(e, n, t, s, o, i) {
             alt: t.imageAlt
           }, null, 8, dr)
         ])
-      ], 2)) : p("", !0),
+      ], 2)) : b("", !0),
       e.$slots.footer ? (u(), d("div", fr, [
         g(e.$slots, "footer")
-      ])) : p("", !0)
+      ])) : b("", !0)
     ]),
     _: 3
   }, 40, ["onMousedown", "onMouseup", "class", "style", "target", "to", "href", "data-ulu-proxy-click-init"]);
@@ -3539,7 +3539,7 @@ const uh = /* @__PURE__ */ R(rr, [["render", hr]]), dh = {
             item: s,
             index: o
           }, () => [
-            $(b(s.term), 1)
+            $(p(s.term), 1)
           ])
         ], 2),
         h("dd", {
@@ -3549,7 +3549,7 @@ const uh = /* @__PURE__ */ R(rr, [["render", hr]]), dh = {
             item: s,
             index: o
           }, () => [
-            $(b(s.description), 1)
+            $(p(s.description), 1)
           ])
         ], 2)
       ], 2))), 128))
@@ -3586,7 +3586,7 @@ const uh = /* @__PURE__ */ R(rr, [["render", hr]]), dh = {
     }, [
       h("span", gr, [
         g(n.$slots, "default", {}, () => [
-          $(b(e.text), 1)
+          $(p(e.text), 1)
         ])
       ]),
       z(D, {
@@ -3671,7 +3671,7 @@ const uh = /* @__PURE__ */ R(rr, [["render", hr]]), dh = {
             item: i,
             index: r
           }, () => [
-            $(b(i), 1)
+            $(p(i), 1)
           ])
         ], 2))), 128))
       ]),
@@ -3748,7 +3748,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
         key: 0,
         id: i.value,
         class: "hidden-visually"
-      }, b(e.legend), 9, wr)) : p("", !0),
+      }, p(e.legend), 9, wr)) : b("", !0),
       h("ul", Sr, [
         (u(!0), d(E, null, x(e.options, (v) => (u(), d("li", {
           class: "menu-stack__item",
@@ -3767,7 +3767,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
               for: l(v)
             }, [
               g(f.$slots, "default", { option: v }, () => [
-                $(b(v?.label || v?.title || v?.text), 1)
+                $(p(v?.label || v?.title || v?.text), 1)
               ])
             ], 8, Cr)
           ])
@@ -3816,8 +3816,8 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
           icon: e.icon
         }, null, 8, ["icon"]),
         h("span", Ar, [
-          $(b(e.file.name) + " ", 1),
-          e.noFileSize ? p("", !0) : (u(), _(bs, {
+          $(p(e.file.name) + " ", 1),
+          e.noFileSize ? b("", !0) : (u(), _(bs, {
             key: 0,
             text: s.value,
             small: "",
@@ -3868,7 +3868,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
         for: A(o)
       }, [
         g(r.$slots, "label", {}, () => [
-          $(b(e.label), 1)
+          $(p(e.label), 1)
         ])
       ], 10, xr),
       h("input", le({
@@ -3901,7 +3901,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
       e.error || e.warning ? (u(), _(D, {
         key: 0,
         icon: `type:${e.error ? "error" : "warning"}`
-      }, null, 8, ["icon"])) : p("", !0),
+      }, null, 8, ["icon"])) : b("", !0),
       g(n.$slots, "default")
     ], 2));
   }
@@ -3937,7 +3937,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
         for: A(t)
       }, [
         g(s.$slots, "default", {}, () => [
-          $(b(e.label), 1)
+          $(p(e.label), 1)
         ])
       ], 10, jr),
       h("select", {
@@ -3952,7 +3952,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
         (u(!0), d(E, null, x(e.options, (i, r) => (u(), d("option", {
           key: r,
           value: i.value
-        }, b(i.text), 9, zr))), 128))
+        }, p(i.text), 9, zr))), 128))
       ], 40, Ir)
     ]));
   }
@@ -3984,7 +3984,7 @@ const mh = /* @__PURE__ */ R(vr, [["render", pr]]), br = { class: "spoke-spinner
         for: A(t)
       }, [
         g(s.$slots, "default", {}, () => [
-          $(b(e.label), 1)
+          $(p(e.label), 1)
         ])
       ], 10, Ur),
       h("input", {
@@ -4134,9 +4134,9 @@ function qr(e, n, t, s, o, i) {
             key: 0,
             class: m(t.classes.icon),
             icon: t.icon
-          }, null, 8, ["class", "icon"])) : p("", !0),
+          }, null, 8, ["class", "icon"])) : b("", !0),
           g(e.$slots, "default", {}, () => [
-            $(b(t.title), 1)
+            $(p(t.title), 1)
           ])
         ]),
         _: 3
@@ -4144,7 +4144,7 @@ function qr(e, n, t, s, o, i) {
     ], 2),
     e.$slots.end ? (u(), d("div", Yr, [
       g(e.$slots, "end")
-    ])) : p("", !0)
+    ])) : b("", !0)
   ], 2);
 }
 const $h = /* @__PURE__ */ R(Xr, [["render", qr]]), Kr = {
@@ -4201,7 +4201,7 @@ function Gr(e, n, t, s, o, i) {
           class: m(a.current)
         }, [
           g(e.$slots, "default", { item: a }, () => [
-            $(b(a.title), 1)
+            $(p(a.title), 1)
           ])
         ], 2)) : (u(), _(r, {
           key: 0,
@@ -4211,7 +4211,7 @@ function Gr(e, n, t, s, o, i) {
         }, {
           default: S(() => [
             g(e.$slots, "default", { item: a }, () => [
-              $(b(a.title), 1)
+              $(p(a.title), 1)
             ])
           ]),
           _: 2
@@ -4221,10 +4221,10 @@ function Gr(e, n, t, s, o, i) {
             class: m(t.classes.separator),
             icon: t.separatorIcon || "type:pathSeparator"
           }, null, 8, ["class", "icon"])
-        ]) : p("", !0)
+        ]) : b("", !0)
       ], 2))), 128))
     ], 2)
-  ], 2)) : p("", !0);
+  ], 2)) : b("", !0);
 }
 const Ch = /* @__PURE__ */ R(Kr, [["render", Gr]]), Zr = {
   name: "UluNavStrip",
@@ -4296,10 +4296,10 @@ const Ah = /* @__PURE__ */ R(Jr, [["render", tl]]), nl = {
 function sl(e, n, t, s, o, i) {
   return t.text != null ? (u(), _(V(t.element), { key: 0 }, {
     default: S(() => [
-      $(b(t.text), 1)
+      $(p(t.text), 1)
     ]),
     _: 1
-  })) : p("", !0);
+  })) : b("", !0);
 }
 const Oh = /* @__PURE__ */ R(nl, [["render", sl]]), ol = {}, il = { style: { display: "none" } };
 function rl(e, n) {
@@ -4433,7 +4433,7 @@ function gl(e, n, t, s, o, i) {
     tabindex: "-1",
     class: "hidden-visually",
     ref: "el"
-  }, b(i.title), 513)) : p("", !0);
+  }, p(i.title), 513)) : b("", !0);
 }
 const Ih = /* @__PURE__ */ R(ml, [["render", gl]]), vl = {
   name: "AnimateNumber",
@@ -4463,7 +4463,7 @@ const Ih = /* @__PURE__ */ R(ml, [["render", gl]]), vl = {
 function yl(e, n, t, s, o, i) {
   return u(), d("span", null, [
     g(e.$slots, "default", { currentValue: o.currentValue }, () => [
-      $(b(o.currentValue), 1)
+      $(p(o.currentValue), 1)
     ])
   ]);
 }
@@ -4586,21 +4586,21 @@ const zh = /* @__PURE__ */ R(vl, [["render", yl]]), pl = {
         }, {
           default: S(() => [
             g(r.$slots, "label", {}, () => [
-              $(b(e.label), 1)
+              $(p(e.label), 1)
             ])
           ]),
           _: 3
-        }, 8, ["class"])) : p("", !0),
+        }, 8, ["class"])) : b("", !0),
         e.amountInHeader ? (u(), d("div", bl, [
           l[0] || (l[0] = h("strong", { class: "hidden-visually" }, "Amount:", -1)),
           g(r.$slots, "valueAmount", { value: e.amount }, () => [
-            $(b(e.formatValue(e.amount, "amount")), 1)
+            $(p(e.formatValue(e.amount, "amount")), 1)
           ])
-        ])) : p("", !0),
+        ])) : b("", !0),
         r.$slots.icon ? (u(), d("div", _l, [
           g(r.$slots, "icon")
-        ])) : p("", !0)
-      ])) : p("", !0),
+        ])) : b("", !0)
+      ])) : b("", !0),
       h("div", wl, [
         h("div", {
           class: "progress-bar__bar",
@@ -4610,28 +4610,28 @@ const zh = /* @__PURE__ */ R(vl, [["render", yl]]), pl = {
           key: 0,
           class: "progress-bar__bar--deficit",
           style: H({ width: o.value })
-        }, null, 4)) : p("", !0)
+        }, null, 4)) : b("", !0)
       ]),
       !e.noValues && !e.amountInHeader && !e.loader && !e.indeterminate ? (u(), d("div", Sl, [
         h("div", kl, [
           l[1] || (l[1] = h("strong", { class: "hidden-visually" }, "Amount:", -1)),
           g(r.$slots, "valueAmount", { value: e.amount }, () => [
-            $(b(e.formatValue(e.amount, "amount")), 1)
+            $(p(e.formatValue(e.amount, "amount")), 1)
           ])
         ]),
         e.deficit > 0 ? (u(), d("div", $l, [
           l[2] || (l[2] = h("strong", { class: "hidden-visually" }, "Deficit: ", -1)),
           g(r.$slots, "valueDeficit", { value: e.deficit }, () => [
-            $("-" + b(e.formatValue(e.deficit, "deficit")), 1)
+            $("-" + p(e.formatValue(e.deficit, "deficit")), 1)
           ])
-        ])) : p("", !0),
+        ])) : b("", !0),
         h("div", Cl, [
           l[3] || (l[3] = h("strong", { class: "hidden-visually" }, "Total:", -1)),
           g(r.$slots, "valueTotal", { value: e.total }, () => [
-            $(b(e.formatValue(e.total, "total")), 1)
+            $(p(e.formatValue(e.total, "total")), 1)
           ])
         ])
-      ])) : p("", !0)
+      ])) : b("", !0)
     ], 2));
   }
 }, Tl = { class: "hidden-visually" }, Al = { class: "progress-circle__chart" }, Ol = {
@@ -4741,7 +4741,7 @@ const zh = /* @__PURE__ */ R(vl, [["render", yl]]), pl = {
     }), (a, c) => (u(), d("div", {
       class: m(l.value)
     }, [
-      h("strong", Tl, b(e.label), 1),
+      h("strong", Tl, p(e.label), 1),
       h("div", Al, [
         (u(), d("svg", Ol, [
           c[0] || (c[0] = h("circle", {
@@ -4767,15 +4767,15 @@ const zh = /* @__PURE__ */ R(vl, [["render", yl]]), pl = {
         ])),
         !r.value && !e.noValue ? (u(), d("strong", xl, [
           g(a.$slots, "value", { value: e.percentage }, () => [
-            $(b(e.formatValue(e.percentage)), 1)
+            $(p(e.formatValue(e.percentage)), 1)
           ])
-        ])) : p("", !0)
+        ])) : b("", !0)
       ]),
       r.value && !e.noValue ? (u(), d("strong", Rl, [
         g(a.$slots, "value", { value: e.percentage }, () => [
-          $(b(e.formatValue(e.percentage)), 1)
+          $(p(e.formatValue(e.percentage)), 1)
         ])
-      ])) : p("", !0)
+      ])) : b("", !0)
     ], 2));
   }
 };
@@ -5016,8 +5016,8 @@ const Il = { key: 0 }, Tn = {
       "onUpdate:modelValue": i
     }, {
       default: S(({ option: a }) => [
-        $(b(a.label) + " ", 1),
-        a.count !== void 0 ? (u(), d("span", Il, "(" + b(a.count) + ")", 1)) : p("", !0)
+        $(p(a.label) + " ", 1),
+        a.count !== void 0 ? (u(), d("span", Il, "(" + p(a.count) + ")", 1)) : b("", !0)
       ]),
       _: 1
     }, 8, ["legend", "type", "options", "model-value"]));
@@ -5066,7 +5066,7 @@ const Il = { key: 0 }, Tn = {
             group: r,
             isOpen: l
           }, () => [
-            $(b(r.name), 1)
+            $(p(r.name), 1)
           ])
         ]),
         default: S(() => [
@@ -5086,7 +5086,7 @@ const Il = { key: 0 }, Tn = {
             transitionHeight: !0
           }, {
             trigger: S(({ isOpen: l }) => [
-              $(b(l ? "View Less" : "Show More"), 1)
+              $(p(l ? "View Less" : "Show More"), 1)
             ]),
             default: S(() => [
               z(Tn, {
@@ -5099,7 +5099,7 @@ const Il = { key: 0 }, Tn = {
               }, null, 8, ["children", "groupUid", "groupName", "type", "model-value"])
             ]),
             _: 2
-          }, 1032, ["class"])) : p("", !0)
+          }, 1032, ["class"])) : b("", !0)
         ]),
         _: 2
       }, 1032, ["classes", "startOpen"]))), 128))
@@ -5181,8 +5181,8 @@ const Il = { key: 0 }, Tn = {
               label: i(c)
             }, () => [
               h("span", null, [
-                $(b(c.name) + ": ", 1),
-                h("strong", null, b(i(c)), 1)
+                $(p(c.name) + ": ", 1),
+                h("strong", null, p(i(c)), 1)
               ])
             ]),
             z(D, {
@@ -5235,18 +5235,18 @@ const Il = { key: 0 }, Tn = {
         h("label", {
           for: `facet-dropdown-${r.uid}`,
           class: "facets-dropdown-filters__label"
-        }, b(r.name), 9, Ul),
+        }, p(r.name), 9, Ul),
         h("select", {
           id: `facet-dropdown-${r.uid}`,
           class: "facets-dropdown-filters__select",
           onChange: (l) => s(r, l)
         }, [
-          h("option", Pl, "All " + b(r.name) + "s", 1),
+          h("option", Pl, "All " + p(r.name) + "s", 1),
           (u(!0), d(E, null, x(r.children, (l) => (u(), d("option", {
             key: l.uid,
             value: l.uid,
             selected: l.selected
-          }, b(l.label), 9, Ll))), 128))
+          }, p(l.label), 9, Ll))), 128))
         ], 40, Bl)
       ]))), 128))
     ]));
@@ -5356,27 +5356,44 @@ const Il = { key: 0 }, Tn = {
       ])
     ]));
   }
-}, Yl = { class: "facets-sidebar-layout__header" }, ql = { class: "facets-sidebar-layout__mobile-controls" }, Kl = { class: "facets-sidebar-layout__body" }, Gl = { class: "facets-sidebar-layout__main" }, Dh = {
+}, Yl = { class: "facets-sidebar__header" }, ql = { class: "facets-sidebar__mobile-controls" }, Kl = { class: "facets-sidebar__body" }, Gl = { class: "facets-sidebar__main" }, Dh = {
   __name: "UluFacetsSidebarLayout",
+  props: {
+    mobileButtonText: {
+      type: String,
+      default: "Filters & Sort"
+    },
+    /**
+     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * The 'icon' key is also available for the icon span.
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        mobileButton: "button"
+      })
+    }
+  },
   setup(e) {
     const n = I(!1), t = ft("uluIsMobile"), s = I(null), o = I(null), i = w(() => t.value ? o.value : s.value);
     return (r, l) => (u(), d("div", {
-      class: m(["facets-sidebar-layout", { "facets-sidebar-layout--filters-hidden": A(t) }])
+      class: m(["facets-sidebar", { "facets-sidebar--filters-hidden": A(t) }])
     }, [
       h("div", Yl, [
         g(r.$slots, "header")
       ]),
       Oe(h("div", ql, [
         h("button", {
-          class: "button",
+          class: m(e.classes.mobileButton),
           onClick: l[0] || (l[0] = (a) => n.value = !0)
-        }, "Filters & Sort")
+        }, p(e.mobileButtonText), 3)
       ], 512), [
         [Mt, A(t)]
       ]),
       h("div", Kl, [
         Oe(h("div", {
-          class: "facets-sidebar-layout__sidebar",
+          class: "facets-sidebar__sidebar",
           ref_key: "desktopTarget",
           ref: s
         }, null, 512), [
@@ -5396,19 +5413,19 @@ const Il = { key: 0 }, Tn = {
       }, {
         default: S(() => [
           h("div", {
-            class: "facets-sidebar-layout__sidebar",
+            class: "facets-sidebar__sidebar",
             ref_key: "mobileTarget",
             ref: o
           }, null, 512)
         ]),
         _: 1
-      }, 8, ["modelValue"])) : p("", !0),
+      }, 8, ["modelValue"])) : b("", !0),
       i.value ? (u(), _(dt, {
         key: 1,
         to: i.value
       }, [
         g(r.$slots, "sidebar")
-      ], 8, ["to"])) : p("", !0)
+      ], 8, ["to"])) : b("", !0)
     ], 2));
   }
 }, Zl = ["for"], Ql = ["value", "id"], Jl = ["value"], Wh = {
@@ -5451,7 +5468,7 @@ const Il = { key: 0 }, Tn = {
         (u(!0), d(E, null, x(e.sortTypes, (l, a) => (u(), d("option", {
           value: a,
           key: a
-        }, b(l.text), 9, Jl))), 128))
+        }, p(l.text), 9, Jl))), 128))
       ], 42, Ql)
     ], 2));
   }
@@ -5592,12 +5609,12 @@ function ia(e, n, t, s, o, i) {
           h("a", {
             class: m({ "is-active": r.active }),
             href: `#${r.titleId}`
-          }, b(r.title), 11, oa)
+          }, p(r.title), 11, oa)
         ], 2))), 128))
       ])
     ]),
     _: 1
-  })) : p("", !0);
+  })) : b("", !0);
 }
 const Yh = /* @__PURE__ */ R(sa, [["render", ia]]);
 function As(e) {
@@ -5671,7 +5688,7 @@ function ca(e, n, t, s, o, i) {
             ref_for: !0,
             ref: (a) => i.addLinkRef(l, a),
             href: `#${r.titleId}`
-          }, b(r.title), 11, aa)
+          }, p(r.title), 11, aa)
         ], 2))), 128))
       ]),
       h("div", {
@@ -5687,7 +5704,7 @@ function ca(e, n, t, s, o, i) {
       }, null, 6)
     ]),
     _: 1
-  })) : p("", !0);
+  })) : b("", !0);
 }
 const qh = /* @__PURE__ */ R(ra, [["render", ca]]), ua = {
   name: "ScrollAnchorsSection",
@@ -5744,7 +5761,7 @@ function da(e, n, t, s, o, i) {
       id: o.titleId
     }, {
       default: S(() => [
-        $(b(t.title), 1)
+        $(p(t.title), 1)
       ]),
       _: 1
     }, 8, ["class", "id"])),
@@ -6101,7 +6118,7 @@ function xa(e, n, t, s, o, i) {
         ])
       ])
     ], 512),
-    t.noNav ? p("", !0) : (u(), d("ul", Ta, [
+    t.noNav ? b("", !0) : (u(), d("ul", Ta, [
       (u(!0), d(E, null, x(o.slides, (l, a) => (u(), d("li", {
         class: m(["slideshow__nav-item", { "is-active": l.active }]),
         ref_for: !0,
@@ -6119,7 +6136,7 @@ function xa(e, n, t, s, o, i) {
             index: a,
             active: l.active
           }, () => [
-            h("span", Oa, "Item " + b(a + 1), 1)
+            h("span", Oa, "Item " + p(a + 1), 1)
           ])
         ], 10, Aa)
       ], 2))), 128))
@@ -6180,7 +6197,7 @@ function Ma(e, n, t, s, o, i) {
             $(" Select ", -1)
           ])]),
           _: 1
-        })) : p("", !0)
+        })) : b("", !0)
       ])
     ]),
     nav: S(({ index: a }) => [
@@ -6262,7 +6279,7 @@ function Fa(e, n, t, s, o, i) {
           key: 1,
           innerHTML: t.value({ row: r, column: a, rowIndex: l, isActual: t.isActual, foot: t.foot })
         }, null, 8, Va)) : (u(), d(E, { key: 2 }, [
-          $(b(t.value({ row: r, column: a, rowIndex: l, isActual: t.isActual, foot: t.foot })), 1)
+          $(p(t.value({ row: r, column: a, rowIndex: l, isActual: t.isActual, foot: t.foot })), 1)
         ], 64))
       ]),
       _: 2
@@ -6365,7 +6382,7 @@ function ec(e, n, t, s, o, i) {
     class: m(t.resolveClasses(t.classes.table, { isActual: t.isActual })),
     "aria-hidden": t.isActual ? "false" : "true"
   }, [
-    t.caption ? (u(), d("caption", Wa, b(t.caption), 1)) : p("", !0),
+    t.caption ? (u(), d("caption", Wa, p(t.caption), 1)) : b("", !0),
     h("thead", null, [
       (u(!0), d(E, null, x(t.headerRows, (l, a) => (u(), d("tr", {
         key: `hr-${a}`,
@@ -6418,7 +6435,7 @@ function ec(e, n, t, s, o, i) {
                 key: 1,
                 innerHTML: t.getColumnTitle({ column: c, index: f, isActual: t.isActual })
               }, null, 8, qa)) : (u(), d(E, { key: 2 }, [
-                $(b(t.getColumnTitle({ column: c, index: f, isActual: t.isActual })), 1)
+                $(p(t.getColumnTitle({ column: c, index: f, isActual: t.isActual })), 1)
               ], 64)),
               h("span", Ka, [
                 h("span", Ga, [
@@ -6439,7 +6456,7 @@ function ec(e, n, t, s, o, i) {
               key: 1,
               innerHTML: t.getColumnTitle({ column: c, index: f, isActual: t.isActual })
             }, null, 8, Za)) : (u(), d(E, { key: 2 }, [
-              $(b(t.getColumnTitle({ column: c, index: f, isActual: t.isActual })), 1)
+              $(p(t.getColumnTitle({ column: c, index: f, isActual: t.isActual })), 1)
             ], 64))
           ], 64))
         ], 14, Ya))), 128))
@@ -6464,7 +6481,7 @@ function ec(e, n, t, s, o, i) {
           ])
         }))
       ]), 1032, ["rows", "rowColumns", "optionalAttr", "resolveClasses", "getCellHeaders", "isActual", "columnWidth", "classes", "value"])
-    ])) : p("", !0),
+    ])) : b("", !0),
     t.footerRows ? (u(), d("tfoot", Ja, [
       z(r, {
         rows: t.footerRows,
@@ -6485,7 +6502,7 @@ function ec(e, n, t, s, o, i) {
           ])
         }))
       ]), 1032, ["rows", "rowColumns", "optionalAttr", "resolveClasses", "getCellHeaders", "isActual", "columnWidth", "classes", "value"])
-    ])) : p("", !0)
+    ])) : b("", !0)
   ], 10, Da);
 }
 const tc = /* @__PURE__ */ R(Na, [["render", ec]]);
@@ -7469,7 +7486,7 @@ function Pf(e, n, t, s, o, i) {
             g(e.$slots, a, ee(te(c)))
           ])
         }))
-      ]), 1032, ["classes", "caption", "resolveClasses", "getColumnTitle", "idPrefix", "headerRows", "style", "onColumnSorted"])) : p("", !0)
+      ]), 1032, ["classes", "caption", "resolveClasses", "getColumnTitle", "idPrefix", "headerRows", "style", "onColumnSorted"])) : b("", !0)
     ]),
     h("div", If, [
       Oe(h("div", {
@@ -7569,7 +7586,7 @@ function Pf(e, n, t, s, o, i) {
           g(e.$slots, a, ee(te(c)))
         ])
       }))
-    ]), 1032, ["classes", "resolveClasses", "caption", "headerRows", "columnWidth", "rows", "footerRows", "rowColumns", "idPrefix", "getRowValue", "getColumnTitle", "style", "onColumnSorted"])) : p("", !0)
+    ]), 1032, ["classes", "resolveClasses", "caption", "headerRows", "columnWidth", "rows", "footerRows", "rowColumns", "idPrefix", "getRowValue", "getColumnTitle", "style", "onColumnSorted"])) : b("", !0)
   ], 2);
 }
 const nm = /* @__PURE__ */ R(xf, [["render", Pf]]), sm = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

package/lib/components/systems/facets/UluFacetsSidebarLayout.vue

@@ -1,21 +1,23 @@
 <template>
   <div 
-    class="facets-sidebar-layout" 
-    :class="{ 'facets-sidebar-layout--filters-hidden' : isMobile }"
+    class="facets-sidebar" 
+    :class="{ 'facets-sidebar--filters-hidden' : isMobile }"
   >
-    <div class="facets-sidebar-layout__header">
+    <div class="facets-sidebar__header">
       <slot name="header"></slot>
     </div>
 
-    <div v-show="isMobile" class="facets-sidebar-layout__mobile-controls">
-      <button class="button" @click="showMobileFilters = true">Filters & Sort</button>
+    <div v-show="isMobile" class="facets-sidebar__mobile-controls">
+      <button :class="classes.mobileButton" @click="showMobileFilters = true">
+        {{ mobileButtonText }}
+      </button>
     </div>
 
-    <div class="facets-sidebar-layout__body">
+    <div class="facets-sidebar__body">
       <!-- Desktop container for the sidebar -->
-      <div v-show="!isMobile" class="facets-sidebar-layout__sidebar" ref="desktopTarget"></div>
+      <div v-show="!isMobile" class="facets-sidebar__sidebar" ref="desktopTarget"></div>
       
-      <div class="facets-sidebar-layout__main">
+      <div class="facets-sidebar__main">
         <slot name="main"></slot>
       </div>
     </div>
@@ -28,7 +30,7 @@
       allowResize
     >
       <!-- Mobile container for the sidebar -->
-      <div class="facets-sidebar-layout__sidebar" ref="mobileTarget"></div>
+      <div class="facets-sidebar__sidebar" ref="mobileTarget"></div>
     </UluModal>
 
     <teleport :to="teleportTarget" v-if="teleportTarget">
@@ -41,6 +43,24 @@
   import { ref, inject, computed } from 'vue';
   import UluModal from '../../collapsible/UluModal.vue';
 
+  defineProps({
+    mobileButtonText: {
+      type: String,
+      default: "Filters & Sort"
+    },
+    /**
+     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * The 'icon' key is also available for the icon span.
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        mobileButton: 'button'
+      })
+    }
+  })
+
   const showMobileFilters = ref(false);
   const isMobile = inject("uluIsMobile");
 
@@ -57,13 +77,13 @@
 </script>
 
 <style lang="scss">
-  .facets-sidebar-layout__body {
+  .facets-sidebar__body {
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 2rem;
   }
-  .facets-sidebar-layout--filters-hidden {
-    .facets-sidebar-layout__body {
+  .facets-sidebar--filters-hidden {
+    .facets-sidebar__body {
       grid-template-columns: 1fr;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.7",
+  "version": "0.1.1-beta.8",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [

package/types/components/systems/facets/UluFacetsSidebarLayout.vue.d.ts

@@ -3,7 +3,11 @@ export default _default;
 type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $props: Partial<typeof __VLS_props>;
+    classes: Record<string, any>;
+    mobileButtonText: string;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     header?: ((props: {}) => any) | undefined;
 } & {
@@ -11,4 +15,8 @@ type __VLS_Slots = {
 } & {
     sidebar?: ((props: {}) => any) | undefined;
 };
+declare const __VLS_props: {
+    readonly classes: Record<string, any>;
+    readonly mobileButtonText: string;
+};
 //# sourceMappingURL=UluFacetsSidebarLayout.vue.d.ts.map

package/types/components/systems/facets/UluFacetsSidebarLayout.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsSidebarLayout.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsSidebarLayout.vue"],"names":[],"mappings":"wBAqOqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AAJzB,6SACG"}
+{"version":3,"file":"UluFacetsSidebarLayout.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsSidebarLayout.vue"],"names":[],"mappings":"wBAqRqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;2OAE3C;;;;;;;;AAtLD;;;EAgBE"}