@forgebuild/hotal-ui 0.23.136 → 0.23.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/hotal-ui.js +19 -19
- package/package.json +1 -1
package/dist/hotal-ui.js
CHANGED
|
@@ -14955,13 +14955,13 @@ function L_(e, t) {
|
|
|
14955
14955
|
F(a);
|
|
14956
14956
|
var s = V(a, 2), c = B(s), l = V(c, 2);
|
|
14957
14957
|
F(s), F(i);
|
|
14958
|
-
var u = V(i, 2);
|
|
14959
|
-
Wa(
|
|
14958
|
+
var u = V(i, 2), d = B(u);
|
|
14959
|
+
Wa(d, 20, () => U(S), (e) => e, (e, t) => {
|
|
14960
14960
|
var n = iv(), r = B(n, !0);
|
|
14961
14961
|
F(n), H(() => q(r, t)), K(e, n);
|
|
14962
|
-
}), F(
|
|
14963
|
-
var
|
|
14964
|
-
Wa(
|
|
14962
|
+
}), F(d);
|
|
14963
|
+
var f = V(d, 2);
|
|
14964
|
+
Wa(f, 21, () => U(ce), (e) => e.iso, (e, t) => {
|
|
14965
14965
|
let n = /* @__PURE__ */ I(() => me(U(t).iso)), r = /* @__PURE__ */ I(() => U(t).inMonth && !U(t).isPast && U(n) > 0);
|
|
14966
14966
|
var i = ov();
|
|
14967
14967
|
let a;
|
|
@@ -14979,17 +14979,17 @@ function L_(e, t) {
|
|
|
14979
14979
|
"sbw-cal-cell-selected": U(ue) === U(t).iso
|
|
14980
14980
|
}), i.disabled = !U(r), q(s, U(t).dayNumber);
|
|
14981
14981
|
}), W("click", i, () => be(U(t))), K(e, i);
|
|
14982
|
-
}), F(
|
|
14983
|
-
var
|
|
14982
|
+
}), F(f), F(u);
|
|
14983
|
+
var p = V(u, 2), m = B(p), h = (e) => {
|
|
14984
14984
|
var t = $_(), n = B(t, !0);
|
|
14985
14985
|
F(t), H(() => q(n, U(b).pickDayHint)), K(e, t);
|
|
14986
|
-
},
|
|
14986
|
+
}, g = (e) => {
|
|
14987
14987
|
var t = $_(), n = B(t, !0);
|
|
14988
14988
|
F(t), H(() => q(n, U(b).loadingServices)), K(e, t);
|
|
14989
|
-
},
|
|
14989
|
+
}, _ = (e) => {
|
|
14990
14990
|
var t = $_(), n = B(t, !0);
|
|
14991
14991
|
F(t), H(() => q(n, U(b).noSlotsForDay)), K(e, t);
|
|
14992
|
-
},
|
|
14992
|
+
}, v = (e) => {
|
|
14993
14993
|
var t = lv();
|
|
14994
14994
|
Wa(t, 21, () => [
|
|
14995
14995
|
["morning", U(b).morningLabel],
|
|
@@ -15016,12 +15016,12 @@ function L_(e, t) {
|
|
|
15016
15016
|
}), K(e, o);
|
|
15017
15017
|
}), F(t), K(e, t);
|
|
15018
15018
|
};
|
|
15019
|
-
J(
|
|
15020
|
-
U(ue) ? U(oe) ? e(
|
|
15021
|
-
}), F(
|
|
15022
|
-
var
|
|
15023
|
-
n(
|
|
15024
|
-
q(o, `${U(x)[U(te)] ?? ""} ${U(ee) ?? ""}`), c.disabled = !U(le), X(c, "aria-label", U(b).previousMonth), X(l, "aria-label", U(b).nextMonth), X(
|
|
15019
|
+
J(m, (e) => {
|
|
15020
|
+
U(ue) ? U(oe) ? e(g, 1) : U(de).length ? e(v, -1) : e(_, 2) : e(h);
|
|
15021
|
+
}), F(p), F(r);
|
|
15022
|
+
var y = V(r, 2);
|
|
15023
|
+
n(y, () => !0), F(t), H(() => {
|
|
15024
|
+
q(o, `${U(x)[U(te)] ?? ""} ${U(ee) ?? ""}`), c.disabled = !U(le), X(c, "aria-label", U(b).previousMonth), X(l, "aria-label", U(b).nextMonth), X(f, "aria-busy", U(oe));
|
|
15025
15025
|
}), W("click", c, ve), W("click", l, ye), K(e, t);
|
|
15026
15026
|
}, qe = (e) => {
|
|
15027
15027
|
var t = dv(), r = B(t), i = B(r), a = B(i), o = B(a), s = B(o, !0);
|
|
@@ -15055,9 +15055,9 @@ function L_(e, t) {
|
|
|
15055
15055
|
}), F(Le), K(e, Le), Ct(Ie);
|
|
15056
15056
|
}
|
|
15057
15057
|
var R_, z_, B_, V_, H_, U_, W_, G_, K_, q_, J_, Y_, X_, Z_, Q_, $_, ev, tv, nv, rv, iv, av, ov, sv, cv, lv, uv, dv, fv, pv, mv, hv = o((() => {
|
|
15058
|
-
f(), zs(), Ll(), F_(), R_ = /* @__PURE__ */ G("<strong class=\"svelte-1dxdgqu\"> </strong>"), z_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"svelte-1dxdgqu\"> </span></div>"), B_ = /* @__PURE__ */ G("<span class=\"sbw-time-flash svelte-1dxdgqu\"> </span>"), V_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub sbw-summary-row-datetime svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div>"), H_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"sbw-summary-row-bookedat-value svelte-1dxdgqu\"> </span></div>"), U_ = /* @__PURE__ */ G("<div class=\"sbw-summary-total svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <strong class=\"svelte-1dxdgqu\"> </strong></div>"), W_ = /* @__PURE__ */ G("<button type=\"button\" class=\"sbw-continue svelte-1dxdgqu\"> </button> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), G_ = /* @__PURE__ */ G("<span class=\"sbw-spinner svelte-1dxdgqu\"></span>"), K_ = /* @__PURE__ */ G("<p class=\"sbw-error-text svelte-1dxdgqu\"> </p>"), q_ = /* @__PURE__ */ G("<button type=\"submit\" class=\"sbw-submit svelte-1dxdgqu\"><!> <span class=\"svelte-1dxdgqu\"> </span></button> <!> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), J_ = /* @__PURE__ */ G("<aside class=\"sbw-summary svelte-1dxdgqu\"><div class=\"sbw-summary-row svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div> <!> <!> <!> <!> <!></aside>"), Y_ = /* @__PURE__ */ G("<img class=\"sbw-logo svelte-1dxdgqu\" alt=\"\"/>"), X_ = /* @__PURE__ */ G("<h2 class=\"sbw-heading svelte-1dxdgqu\"> </h2> <div class=\"sbw-rule svelte-1dxdgqu\"></div>", 1), Z_ = /* @__PURE__ */ G("<p class=\"sbw-tagline svelte-1dxdgqu\"> </p>"), Q_ = /* @__PURE__ */ G("<p class=\"sbw-description svelte-1dxdgqu\"> </p>"), $_ = /* @__PURE__ */ G("<p class=\"sbw-hint svelte-1dxdgqu\"> </p>"), ev = /* @__PURE__ */ G("<span class=\"sbw-service-price svelte-1dxdgqu\"> </span>"), tv = /* @__PURE__ */ G("<li class=\"svelte-1dxdgqu\"><button type=\"button\" class=\"sbw-service-item svelte-1dxdgqu\"><span class=\"sbw-service-name svelte-1dxdgqu\"> </span> <!></button></li>"), nv = /* @__PURE__ */ G("<ul class=\"sbw-service-list svelte-1dxdgqu\" role=\"list\"></ul>"), rv = /* @__PURE__ */ G("<div class=\"sbw-body svelte-1dxdgqu\"><h3 class=\"sbw-step-title svelte-1dxdgqu\"> </h3> <!></div>"), iv = /* @__PURE__ */ G("<span class=\"svelte-1dxdgqu\"> </span>"), av = /* @__PURE__ */ G("<span></span>"), ov = /* @__PURE__ */ G("<button type=\"button\"><span class=\"svelte-1dxdgqu\"> </span> <!></button>"), sv = /* @__PURE__ */ G("<button type=\"button\"> </button>"), cv = /* @__PURE__ */ G("<div class=\"sbw-slot-group svelte-1dxdgqu\"><p class=\"sbw-slot-group-label svelte-1dxdgqu\"> </p> <div class=\"sbw-slot-buttons svelte-1dxdgqu\"></div></div>"), lv = /* @__PURE__ */ G("<div class=\"sbw-slot-groups svelte-1dxdgqu\"></div>"), uv = /* @__PURE__ */ G("<div class=\"sbw-body sbw-datetime svelte-1dxdgqu\"><div class=\"sbw-calendar-col svelte-1dxdgqu\"><div class=\"sbw-cal-header svelte-1dxdgqu\"><p class=\"sbw-cal-month svelte-1dxdgqu\"> </p> <div class=\"sbw-cal-nav svelte-1dxdgqu\"><button type=\"button\" class=\"svelte-1dxdgqu\">‹</button> <button type=\"button\" class=\"svelte-1dxdgqu\">›</button></div></div> <div class=\"sbw-cal-weekdays svelte-1dxdgqu\"></div> <div class=\"sbw-cal-grid svelte-1dxdgqu\"></div> <div class=\"sbw-slots svelte-1dxdgqu\"><!></div></div> <!></div>"), dv = /* @__PURE__ */ G("<form class=\"sbw-body sbw-datetime sbw-details svelte-1dxdgqu\"><div class=\"sbw-details-fields svelte-1dxdgqu\"><div class=\"sbw-grid svelte-1dxdgqu\"><label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"text\" required=\"\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"email\" required=\"\" pattern=\"[^\\s@]+@[^\\s@]+\\.[^\\s@]+\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"tel\" class=\"svelte-1dxdgqu\"/></label></div> <label class=\"sbw-field sbw-notes-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <textarea rows=\"3\" class=\"svelte-1dxdgqu\"></textarea></label></div> <!></form>"), fv = /* @__PURE__ */ G("<div class=\"sbw-success svelte-1dxdgqu\"><div class=\"sbw-success-icon svelte-1dxdgqu\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" class=\"svelte-1dxdgqu\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1dxdgqu\"></path></svg></div> <p class=\"svelte-1dxdgqu\"> </p> <!></div>"), pv = /* @__PURE__ */ G("<section class=\"sbw-root svelte-1dxdgqu\"><div class=\"sbw-intro svelte-1dxdgqu\"><!> <!> <!> <!></div> <!></section>"), mv = {
|
|
15058
|
+
f(), zs(), Ll(), F_(), R_ = /* @__PURE__ */ G("<strong class=\"svelte-1dxdgqu\"> </strong>"), z_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"svelte-1dxdgqu\"> </span></div>"), B_ = /* @__PURE__ */ G("<span class=\"sbw-time-flash svelte-1dxdgqu\"> </span>"), V_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub sbw-summary-row-datetime svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div>"), H_ = /* @__PURE__ */ G("<div class=\"sbw-summary-row sbw-summary-row-sub svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <span class=\"sbw-summary-row-bookedat-value svelte-1dxdgqu\"> </span></div>"), U_ = /* @__PURE__ */ G("<div class=\"sbw-summary-total svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <strong class=\"svelte-1dxdgqu\"> </strong></div>"), W_ = /* @__PURE__ */ G("<button type=\"button\" class=\"sbw-continue svelte-1dxdgqu\"> </button> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), G_ = /* @__PURE__ */ G("<span class=\"sbw-spinner svelte-1dxdgqu\"></span>"), K_ = /* @__PURE__ */ G("<p class=\"sbw-error-text svelte-1dxdgqu\"> </p>"), q_ = /* @__PURE__ */ G("<button type=\"submit\" class=\"sbw-submit svelte-1dxdgqu\"><!> <span class=\"svelte-1dxdgqu\"> </span></button> <!> <button type=\"button\" class=\"sbw-back sbw-back-service svelte-1dxdgqu\"> </button>", 1), J_ = /* @__PURE__ */ G("<aside class=\"sbw-summary svelte-1dxdgqu\"><div class=\"sbw-summary-row svelte-1dxdgqu\"><span class=\"svelte-1dxdgqu\"> </span> <!></div> <!> <!> <!> <!> <!></aside>"), Y_ = /* @__PURE__ */ G("<img class=\"sbw-logo svelte-1dxdgqu\" alt=\"\"/>"), X_ = /* @__PURE__ */ G("<h2 class=\"sbw-heading svelte-1dxdgqu\"> </h2> <div class=\"sbw-rule svelte-1dxdgqu\"></div>", 1), Z_ = /* @__PURE__ */ G("<p class=\"sbw-tagline svelte-1dxdgqu\"> </p>"), Q_ = /* @__PURE__ */ G("<p class=\"sbw-description svelte-1dxdgqu\"> </p>"), $_ = /* @__PURE__ */ G("<p class=\"sbw-hint svelte-1dxdgqu\"> </p>"), ev = /* @__PURE__ */ G("<span class=\"sbw-service-price svelte-1dxdgqu\"> </span>"), tv = /* @__PURE__ */ G("<li class=\"svelte-1dxdgqu\"><button type=\"button\" class=\"sbw-service-item svelte-1dxdgqu\"><span class=\"sbw-service-name svelte-1dxdgqu\"> </span> <!></button></li>"), nv = /* @__PURE__ */ G("<ul class=\"sbw-service-list svelte-1dxdgqu\" role=\"list\"></ul>"), rv = /* @__PURE__ */ G("<div class=\"sbw-body svelte-1dxdgqu\"><h3 class=\"sbw-step-title svelte-1dxdgqu\"> </h3> <!></div>"), iv = /* @__PURE__ */ G("<span class=\"svelte-1dxdgqu\"> </span>"), av = /* @__PURE__ */ G("<span></span>"), ov = /* @__PURE__ */ G("<button type=\"button\"><span class=\"svelte-1dxdgqu\"> </span> <!></button>"), sv = /* @__PURE__ */ G("<button type=\"button\"> </button>"), cv = /* @__PURE__ */ G("<div class=\"sbw-slot-group svelte-1dxdgqu\"><p class=\"sbw-slot-group-label svelte-1dxdgqu\"> </p> <div class=\"sbw-slot-buttons svelte-1dxdgqu\"></div></div>"), lv = /* @__PURE__ */ G("<div class=\"sbw-slot-groups svelte-1dxdgqu\"></div>"), uv = /* @__PURE__ */ G("<div class=\"sbw-body sbw-datetime svelte-1dxdgqu\"><div class=\"sbw-calendar-col svelte-1dxdgqu\"><div class=\"sbw-cal-header svelte-1dxdgqu\"><p class=\"sbw-cal-month svelte-1dxdgqu\"> </p> <div class=\"sbw-cal-nav svelte-1dxdgqu\"><button type=\"button\" class=\"svelte-1dxdgqu\">‹</button> <button type=\"button\" class=\"svelte-1dxdgqu\">›</button></div></div> <div class=\"sbw-cal-body svelte-1dxdgqu\"><div class=\"sbw-cal-weekdays svelte-1dxdgqu\"></div> <div class=\"sbw-cal-grid svelte-1dxdgqu\"></div></div> <div class=\"sbw-slots svelte-1dxdgqu\"><!></div></div> <!></div>"), dv = /* @__PURE__ */ G("<form class=\"sbw-body sbw-datetime sbw-details svelte-1dxdgqu\"><div class=\"sbw-details-fields svelte-1dxdgqu\"><div class=\"sbw-grid svelte-1dxdgqu\"><label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"text\" required=\"\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"email\" required=\"\" pattern=\"[^\\s@]+@[^\\s@]+\\.[^\\s@]+\" class=\"svelte-1dxdgqu\"/></label> <label class=\"sbw-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <input type=\"tel\" class=\"svelte-1dxdgqu\"/></label></div> <label class=\"sbw-field sbw-notes-field svelte-1dxdgqu\"><span class=\"sbw-label svelte-1dxdgqu\"> </span> <textarea rows=\"3\" class=\"svelte-1dxdgqu\"></textarea></label></div> <!></form>"), fv = /* @__PURE__ */ G("<div class=\"sbw-success svelte-1dxdgqu\"><div class=\"sbw-success-icon svelte-1dxdgqu\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" class=\"svelte-1dxdgqu\"><path d=\"M5 13l4 4L19 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1dxdgqu\"></path></svg></div> <p class=\"svelte-1dxdgqu\"> </p> <!></div>"), pv = /* @__PURE__ */ G("<section class=\"sbw-root svelte-1dxdgqu\"><div class=\"sbw-intro svelte-1dxdgqu\"><!> <!> <!> <!></div> <!></section>"), mv = {
|
|
15059
15059
|
hash: "svelte-1dxdgqu",
|
|
15060
|
-
code: ".sbw-root.svelte-1dxdgqu {display:block;font-family:inherit;color:var(--sbw-text-color, #1a1a1a);background:var(--sbw-bg, #faf6ec);padding:var(--sbw-padding, 4rem 1.5rem);}.sbw-intro.svelte-1dxdgqu {max-width:var(--sbw-intro-max-width, 36rem);margin:0 auto;text-align:center;}.sbw-logo.svelte-1dxdgqu {height:var(--sbw-logo-height, 2.5rem);width:auto;margin:0 auto 1.5rem;display:block;}.sbw-heading.svelte-1dxdgqu {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @media (min-width: 640px) {.sbw-heading.svelte-1dxdgqu {font-size:2.5rem;}\n }.sbw-rule.svelte-1dxdgqu {width:4rem;height:1px;margin:1rem auto 0;background:var(--sbw-rule-color, rgba(196, 158, 90, 0.5));}.sbw-tagline.svelte-1dxdgqu {margin:1.5rem 0 0;font-style:italic;font-size:1.125rem;}.sbw-description.svelte-1dxdgqu {margin:1rem 0 0;font-size:1rem;line-height:1.6;}\n /* Matches .sbw-heading/.sbw-description above so a host that slots its\n own heading/description (instead of the heading/description attributes)\n gets the same look for free -- targeted by the slot attribute, not a\n class, so it works no matter what element or class the host uses. */::slotted([slot='heading']) {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @media (min-width: 640px) {::slotted([slot='heading']) {font-size:2.5rem;}\n }::slotted([slot='description']) {margin:1rem 0 0;font-size:1rem;line-height:1.6;}.sbw-body.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;}.sbw-step-title.svelte-1dxdgqu {margin:0 0 1.25rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;opacity:0.6;}.sbw-hint.svelte-1dxdgqu {margin:0;font-size:0.875rem;opacity:0.6;}\n\n /* --- Service list --- */.sbw-service-list.svelte-1dxdgqu {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}.sbw-service-item.svelte-1dxdgqu {width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.9rem 1.1rem;font:inherit;font-size:0.9375rem;color:inherit;cursor:pointer;text-align:left;transition:border-color 150ms ease, background-color 150ms ease, transform 150ms ease;}.sbw-service-item.svelte-1dxdgqu:hover {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-service-hover-bg, rgba(0, 0, 0, 0.03));color:var(--sbw-service-hover-color, inherit);transform:translateX(2px);}.sbw-service-price.svelte-1dxdgqu {font-weight:600;color:var(--sbw-accent-color, #c49e5a);}.sbw-service-item.svelte-1dxdgqu:hover .sbw-service-price:where(.svelte-1dxdgqu) {color:var(--sbw-service-hover-price-color, var(--sbw-accent-color, #c49e5a));}\n\n /* --- Datetime step: two-column layout, single column under 800px --- */.sbw-datetime.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:2rem;max-width:var(--sbw-datetime-max-width, 52rem);}\n @media (min-width: 800px) {.sbw-datetime.svelte-1dxdgqu {grid-template-columns:1fr 16rem;align-items:start;}\n }.sbw-cal-header.svelte-1dxdgqu {display:flex;align-items:center;justify-content:space-between;}.sbw-cal-month.svelte-1dxdgqu {margin:0;font-size:1rem;font-weight:600;}.sbw-cal-nav.svelte-1dxdgqu {display:flex;gap:0.25rem;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {position:relative;z-index:0;display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:none;color:var(--sbw-text-color, #1a1a1a);font-size:1.375rem;cursor:pointer;transition:border-color 150ms ease, color 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 100ms ease;}\n /* A fill growing from the button's centre (clip-path), not a flat\n colour cross-fade -- matches this library's other circular nav\n control (VenueCarousel's prev/next). Separate hook from\n --sbw-cal-hover-bg (the day-cell hover fill) on purpose: a consumer\n whose day-cell text needs that fill to stay same-color-as-background\n invisible (see mens-cave-barbers) still wants these nav buttons --\n icon glyphs, not text that could vanish -- to invert fully on hover.\n Falls back to the day-cell variable, then the original hardcoded\n tint, so existing consumers see no change. */.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu)::before {content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sbw-cal-nav-hover-bg, var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent)));clip-path:circle(0% at 50% 50%);transition:clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled) {border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-cal-nav-hover-color, var(--sbw-text-color, #1a1a1a));}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled)::before {clip-path:circle(150% at 50% 50%);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):active:not(:disabled) {transform:scale(0.9);transition-duration:50ms;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):disabled {cursor:default;opacity:0.3;}.sbw-cal-weekdays.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);margin-top:1rem;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;opacity:0.4;}.sbw-cal-grid.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;margin-top:0.25rem;}.sbw-cal-cell.svelte-1dxdgqu {height:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid transparent;border-radius:8px;background:none;font:inherit;font-size:0.875rem;color:inherit;cursor:pointer;}\n /* Excludes .sbw-cal-cell-selected: this selector out-ranks the selected\n rule below (two pseudo-classes vs. one plain class), and without the\n exclusion hovering the selected day replaced its solid accent fill\n with this dimmer tint, reading as deselected while the mouse was over\n it. Same fix as AvailabilityCalendar.svelte's .ac-edge exclusion. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) {background:var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent));color:var(--sbw-cal-hover-color, inherit);}.sbw-cal-cell.svelte-1dxdgqu:disabled {cursor:default;}.sbw-cal-cell-off.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {opacity:0.2;}.sbw-cal-cell.svelte-1dxdgqu:disabled:not(.sbw-cal-cell-off) span:where(.svelte-1dxdgqu):first-child {opacity:0.3;}.sbw-cal-cell-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell-selected.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {color:var(--sbw-accent-contrast, #fff);}.sbw-dot.svelte-1dxdgqu {width:4px;height:4px;border-radius:9999px;background:var(--sbw-accent-color, #c49e5a);}.sbw-dot-1.svelte-1dxdgqu {opacity:0.35;}.sbw-dot-2.svelte-1dxdgqu {opacity:0.65;}.sbw-dot-3.svelte-1dxdgqu {opacity:1;width:5px;height:5px;}\n /* Keeps the availability dot visible against --sbw-cal-hover-color's own\n fill -- without this it stayed --sbw-accent-color, which on a theme\n where hover flips to a dark fill with accent-colored TEXT (rather\n than the default light tint) would otherwise put an accent dot on an\n accent-colored background. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-cal-hover-color, var(--sbw-accent-color, #c49e5a));}.sbw-cal-cell-selected.svelte-1dxdgqu .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-accent-contrast, #fff);opacity:1;}.sbw-slots.svelte-1dxdgqu {margin-top:1.5rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));padding-top:1.25rem;}\n /* One column, not auto-fit -- auto-fit let Morning/Afternoon/Evening\n sit side-by-side whenever the container was wide (e.g. the\n dashboard's full-width reschedule sheet), each cramped into a\n narrow track instead of the slot-buttons grid using the full\n width. Stacking the groups keeps each one's own 2-column button\n grid legible regardless of how wide the widget is rendered. */.sbw-slot-groups.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:1.25rem;}.sbw-slot-group-label.svelte-1dxdgqu {margin:0 0 0.5rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--sbw-slot-label-color, inherit);opacity:var(--sbw-slot-label-opacity, 0.5);}.sbw-slot-buttons.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(2, 1fr);gap:0.4rem;}.sbw-slot-btn.svelte-1dxdgqu {border-radius:9999px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.5rem 0.9rem;font:inherit;font-size:0.8125rem;color:inherit;cursor:pointer;transition:border-color 150ms ease, background-color 150ms ease, color 150ms ease;}\n /* Excludes .sbw-slot-btn-selected for the same reason as .sbw-cal-cell's\n own hover exclusion above: this selector's two classes + :hover\n otherwise out-ranks that one plain class and hovering the already-\n selected slot would replace its solid accent fill with this one. */.sbw-slot-btn.svelte-1dxdgqu:hover:not(.sbw-slot-btn-selected) {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-slot-hover-bg, var(--sbw-input-bg, #fff));color:var(--sbw-slot-hover-color, inherit);}.sbw-slot-btn-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-accent-contrast, #fff);\n /* Replays whenever this class lands on a *different* button (auto-pick\n or a manual re-pick), since that's a fresh application of the\n animation property -- makes the pick noticeable instead of a silent\n state change several buttons over from where the visitor is looking. */\n animation: svelte-1dxdgqu-sbw-slot-pop 0.3s ease;}\n @keyframes svelte-1dxdgqu-sbw-slot-pop {\n 0% { transform: scale(0.92); }\n 60% { transform: scale(1.04); }\n 100% { transform: scale(1); }\n }\n /* Flashes gold then settles, so a silently auto-picked time in the summary\n panel (easy to miss, off to the side) draws the eye same as the pop\n above does for the slot button itself. */.sbw-time-flash.svelte-1dxdgqu {\n animation: svelte-1dxdgqu-sbw-time-flash 0.6s ease;}\n @keyframes svelte-1dxdgqu-sbw-time-flash {\n 0% { color: var(--sbw-accent-color, #c49e5a); }\n 100% { color: inherit; }\n }\n\n /* --- Summary panel --- */.sbw-summary.svelte-1dxdgqu {border-radius:4px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:1.25rem;}\n @media (min-width: 800px) {.sbw-summary.svelte-1dxdgqu {position:sticky;top:var(--sbw-summary-sticky-top, 1rem);}\n }.sbw-summary-row.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;font-size:0.9375rem;font-weight:600;}.sbw-summary-row-sub.svelte-1dxdgqu {margin-top:0.5rem;font-size:0.8125rem;font-weight:400;opacity:0.65;}\n /* Date and time are one fact, not a label/value pair -- keep them\n next to each other instead of the row's default space-between,\n which stretched them to opposite edges. Also the one -sub row that's\n actually the point of the summary (which slot you're about to book),\n so it overrides -sub's dimmed/thin defaults back up to fully legible\n instead of reading as fine print like the optional staff row above it. */.sbw-summary-row-datetime.svelte-1dxdgqu {justify-content:flex-start;gap:0.375rem;font-size:var(--sbw-summary-datetime-size, 0.875rem);font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}\n /* The post-booking \"Booked\" row's own timestamp value -- same\n reasoning and same variables as .sbw-summary-row-datetime above (it's\n the confirmed date/time, the actual point of this receipt-like row,\n not a footnote), just scoped to the value span rather than the whole\n row since this row keeps its label/value layout (space-between),\n unlike the label-less date+time row above. */.sbw-summary-row-bookedat-value.svelte-1dxdgqu {font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}.sbw-summary-total.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));font-size:0.9375rem;}.sbw-summary-total.svelte-1dxdgqu strong:where(.svelte-1dxdgqu) {font-size:1.125rem;color:var(--sbw-accent-color, #c49e5a);}.sbw-continue.svelte-1dxdgqu {width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-continue.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-continue.svelte-1dxdgqu:disabled {cursor:default;opacity:0.4;}\n\n /* --- Details step --- */.sbw-back.svelte-1dxdgqu {display:inline-block;margin-bottom:1.5rem;border:none;background:none;padding:0;font:inherit;color:inherit;font-size:0.8125rem;opacity:var(--sbw-back-opacity, 0.6);cursor:pointer;}.sbw-back.svelte-1dxdgqu:hover {opacity:var(--sbw-back-hover-opacity, 1);}.sbw-back-service.svelte-1dxdgqu {display:block;width:100%;margin-top:0.75rem;text-align:center;}.sbw-grid.svelte-1dxdgqu {display:grid;gap:1.25rem;}\n @media (min-width: 640px) {.sbw-grid.svelte-1dxdgqu {grid-template-columns:1fr 1fr;}\n }.sbw-field.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.5rem;}.sbw-label.svelte-1dxdgqu {font-size:0.75rem;font-weight:300;text-transform:uppercase;letter-spacing:0.05em;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu),\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu) {border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.75rem 1rem;font-size:0.875rem;font-family:inherit;color:inherit;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):focus {outline:none;border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu)::placeholder,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu)::placeholder {color:var(--sbw-placeholder-color, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 45%, transparent));}\n /* Browser autofill (matched saved Name/Email data) paints its own\n background on these inputs via a UA style strong enough that plain\n `background` can't win -- box-shadow can, so this fakes the field's\n normal look with an opaque inset fill instead. --sbw-input-autofill-bg\n falls back to --sbw-input-bg, which is enough for most themes (an\n opaque light input already matches when autofilled); only a theme\n whose --sbw-input-bg is itself transparent (mens-cave-barbers: fields\n defined by their border, not a fill, over a solid page background)\n needs to set this separately to that real opaque colour, or the\n browser's own fill shows through unmasked. The absurd transition delay\n is the standard defeat for Chrome's own internal autofill-background\n transition, which otherwise animates its colour in after this applies. */.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:focus {-webkit-text-fill-color:var(--sbw-text-color, #1a1a1a);-webkit-box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;transition:background-color 600000s ease-in-out 0s;}.sbw-notes-field.svelte-1dxdgqu {margin-top:1.25rem;}.sbw-submit.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-submit.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-submit.svelte-1dxdgqu:disabled {cursor:default;opacity:0.6;}.sbw-spinner.svelte-1dxdgqu {height:1rem;width:1rem;border-radius:9999px;border:2px solid color-mix(in oklab, var(--sbw-accent-contrast, #fff) 30%, transparent);border-top-color:var(--sbw-accent-contrast, #fff);\n animation: svelte-1dxdgqu-sbw-spin 0.7s linear infinite;}\n @keyframes svelte-1dxdgqu-sbw-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {.sbw-spinner.svelte-1dxdgqu {\n animation: none;}.sbw-slot-btn-selected.svelte-1dxdgqu,\n .sbw-time-flash.svelte-1dxdgqu {\n animation: none;}\n }.sbw-error-text.svelte-1dxdgqu {margin:0.75rem 0 0;font-size:0.8125rem;color:var(--sbw-danger-color, #dc2626);}\n\n /* --- Success --- */.sbw-success.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;text-align:center;}.sbw-success-icon.svelte-1dxdgqu {display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:9999px;background:var(--sbw-success-bg, #c49e5a);color:#fff;}.sbw-success-icon.svelte-1dxdgqu svg:where(.svelte-1dxdgqu) {width:1.5rem;height:1.5rem;}.sbw-success.svelte-1dxdgqu .sbw-summary:where(.svelte-1dxdgqu) {margin-top:2rem;text-align:left;}.sbw-success.svelte-1dxdgqu p:where(.svelte-1dxdgqu) {margin:0;font-size:1.125rem;}"
|
|
15060
|
+
code: ".sbw-root.svelte-1dxdgqu {display:block;font-family:inherit;color:var(--sbw-text-color, #1a1a1a);background:var(--sbw-bg, #faf6ec);padding:var(--sbw-padding, 4rem 1.5rem);}.sbw-intro.svelte-1dxdgqu {max-width:var(--sbw-intro-max-width, 36rem);margin:0 auto;text-align:center;}.sbw-logo.svelte-1dxdgqu {height:var(--sbw-logo-height, 2.5rem);width:auto;margin:0 auto 1.5rem;display:block;}.sbw-heading.svelte-1dxdgqu {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @media (min-width: 640px) {.sbw-heading.svelte-1dxdgqu {font-size:2.5rem;}\n }.sbw-rule.svelte-1dxdgqu {width:4rem;height:1px;margin:1rem auto 0;background:var(--sbw-rule-color, rgba(196, 158, 90, 0.5));}.sbw-tagline.svelte-1dxdgqu {margin:1.5rem 0 0;font-style:italic;font-size:1.125rem;}.sbw-description.svelte-1dxdgqu {margin:1rem 0 0;font-size:1rem;line-height:1.6;}\n /* Matches .sbw-heading/.sbw-description above so a host that slots its\n own heading/description (instead of the heading/description attributes)\n gets the same look for free -- targeted by the slot attribute, not a\n class, so it works no matter what element or class the host uses. */::slotted([slot='heading']) {margin:0;font-size:2rem;font-family:var(--sbw-heading-font-family, inherit);}\n @media (min-width: 640px) {::slotted([slot='heading']) {font-size:2.5rem;}\n }::slotted([slot='description']) {margin:1rem 0 0;font-size:1rem;line-height:1.6;}.sbw-body.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;}.sbw-step-title.svelte-1dxdgqu {margin:0 0 1.25rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;opacity:0.6;}.sbw-hint.svelte-1dxdgqu {margin:0;font-size:0.875rem;opacity:0.6;}\n\n /* --- Service list --- */.sbw-service-list.svelte-1dxdgqu {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}.sbw-service-item.svelte-1dxdgqu {width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.9rem 1.1rem;font:inherit;font-size:0.9375rem;color:inherit;cursor:pointer;text-align:left;transition:border-color 150ms ease, background-color 150ms ease, transform 150ms ease;}.sbw-service-item.svelte-1dxdgqu:hover {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-service-hover-bg, rgba(0, 0, 0, 0.03));color:var(--sbw-service-hover-color, inherit);transform:translateX(2px);}.sbw-service-price.svelte-1dxdgqu {font-weight:600;color:var(--sbw-accent-color, #c49e5a);}.sbw-service-item.svelte-1dxdgqu:hover .sbw-service-price:where(.svelte-1dxdgqu) {color:var(--sbw-service-hover-price-color, var(--sbw-accent-color, #c49e5a));}\n\n /* --- Datetime step: two-column layout, single column under 800px --- */.sbw-datetime.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:2rem;max-width:var(--sbw-datetime-max-width, 52rem);}\n @media (min-width: 800px) {.sbw-datetime.svelte-1dxdgqu {grid-template-columns:1fr 16rem;align-items:start;}\n }\n /* Calendar and slots side by side (not stacked) once there's room for\n both plus the 16rem summary column -- a plain calendar-then-slots\n stack read as a long, sparse list. .sbw-cal-body wraps the weekday\n labels + day grid into one grid item (rather than giving them each\n their own template row) so its height is independent of how tall\n .sbw-slots is -- with each in its own row instead, a long slots\n list (a busy day can have 20+ times) inflated the *shared* row\n tracks and pushed the day grid visually away from its own weekday\n header. Slots gets the flexible remaining column so extra width\n goes into more time-chip columns instead of unused space; the\n calendar keeps a fixed, normally-proportioned width instead of\n stretching into dead space between its date columns. */\n @media (min-width: 700px) {.sbw-calendar-col.svelte-1dxdgqu {display:grid;grid-template-columns:20rem minmax(14rem, 1fr);grid-template-areas:'header header'\n 'body slots';column-gap:2rem;align-items:start;}.sbw-cal-header.svelte-1dxdgqu {grid-area:header;}.sbw-cal-body.svelte-1dxdgqu {grid-area:body;}.sbw-slots.svelte-1dxdgqu {grid-area:slots;margin-top:0;border-top:none;padding-top:0;}\n }.sbw-cal-header.svelte-1dxdgqu {display:flex;align-items:center;justify-content:space-between;}.sbw-cal-month.svelte-1dxdgqu {margin:0;font-size:1rem;font-weight:600;}.sbw-cal-nav.svelte-1dxdgqu {display:flex;gap:0.25rem;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu) {position:relative;z-index:0;display:flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:9999px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:none;color:var(--sbw-text-color, #1a1a1a);font-size:1.375rem;cursor:pointer;transition:border-color 150ms ease, color 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 100ms ease;}\n /* A fill growing from the button's centre (clip-path), not a flat\n colour cross-fade -- matches this library's other circular nav\n control (VenueCarousel's prev/next). Separate hook from\n --sbw-cal-hover-bg (the day-cell hover fill) on purpose: a consumer\n whose day-cell text needs that fill to stay same-color-as-background\n invisible (see mens-cave-barbers) still wants these nav buttons --\n icon glyphs, not text that could vanish -- to invert fully on hover.\n Falls back to the day-cell variable, then the original hardcoded\n tint, so existing consumers see no change. */.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu)::before {content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--sbw-cal-nav-hover-bg, var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent)));clip-path:circle(0% at 50% 50%);transition:clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled) {border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-cal-nav-hover-color, var(--sbw-text-color, #1a1a1a));}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):hover:not(:disabled)::before {clip-path:circle(150% at 50% 50%);}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):active:not(:disabled) {transform:scale(0.9);transition-duration:50ms;}.sbw-cal-nav.svelte-1dxdgqu button:where(.svelte-1dxdgqu):disabled {cursor:default;opacity:0.3;}.sbw-cal-weekdays.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);margin-top:1rem;text-align:center;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;opacity:0.4;}.sbw-cal-grid.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(7, 1fr);gap:2px;margin-top:0.25rem;}.sbw-cal-cell.svelte-1dxdgqu {height:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid transparent;border-radius:8px;background:none;font:inherit;font-size:0.875rem;color:inherit;cursor:pointer;}\n /* Excludes .sbw-cal-cell-selected: this selector out-ranks the selected\n rule below (two pseudo-classes vs. one plain class), and without the\n exclusion hovering the selected day replaced its solid accent fill\n with this dimmer tint, reading as deselected while the mouse was over\n it. Same fix as AvailabilityCalendar.svelte's .ac-edge exclusion. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) {background:var(--sbw-cal-hover-bg, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 6%, transparent));color:var(--sbw-cal-hover-color, inherit);}.sbw-cal-cell.svelte-1dxdgqu:disabled {cursor:default;}.sbw-cal-cell-off.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {opacity:0.2;}.sbw-cal-cell.svelte-1dxdgqu:disabled:not(.sbw-cal-cell-off) span:where(.svelte-1dxdgqu):first-child {opacity:0.3;}.sbw-cal-cell-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);}.sbw-cal-cell-selected.svelte-1dxdgqu span:where(.svelte-1dxdgqu) {color:var(--sbw-accent-contrast, #fff);}.sbw-dot.svelte-1dxdgqu {width:4px;height:4px;border-radius:9999px;background:var(--sbw-accent-color, #c49e5a);}.sbw-dot-1.svelte-1dxdgqu {opacity:0.35;}.sbw-dot-2.svelte-1dxdgqu {opacity:0.65;}.sbw-dot-3.svelte-1dxdgqu {opacity:1;width:5px;height:5px;}\n /* Keeps the availability dot visible against --sbw-cal-hover-color's own\n fill -- without this it stayed --sbw-accent-color, which on a theme\n where hover flips to a dark fill with accent-colored TEXT (rather\n than the default light tint) would otherwise put an accent dot on an\n accent-colored background. */.sbw-cal-cell.svelte-1dxdgqu:hover:not(:disabled):not(.sbw-cal-cell-selected) .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-cal-hover-color, var(--sbw-accent-color, #c49e5a));}.sbw-cal-cell-selected.svelte-1dxdgqu .sbw-dot:where(.svelte-1dxdgqu) {background:var(--sbw-accent-contrast, #fff);opacity:1;}.sbw-slots.svelte-1dxdgqu {margin-top:1.5rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));padding-top:1.25rem;}\n /* One column, not auto-fit -- auto-fit let Morning/Afternoon/Evening\n sit side-by-side whenever the container was wide (e.g. the\n dashboard's full-width reschedule sheet), each cramped into a\n narrow track instead of the slot-buttons grid using the full\n width. Stacking the groups keeps each one's own 2-column button\n grid legible regardless of how wide the widget is rendered. */.sbw-slot-groups.svelte-1dxdgqu {display:grid;grid-template-columns:1fr;gap:1.25rem;}.sbw-slot-group-label.svelte-1dxdgqu {margin:0 0 0.5rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--sbw-slot-label-color, inherit);opacity:var(--sbw-slot-label-opacity, 0.5);}\n /* auto-fit: use as many columns as the (now flexible-width) slots\n area actually has room for, instead of a fixed count that either\n stretches into giant pills on a wide column or wastes space on a\n narrow one. */.sbw-slot-buttons.svelte-1dxdgqu {display:grid;grid-template-columns:repeat(auto-fit, minmax(5.5rem, 1fr));gap:0.4rem;}.sbw-slot-btn.svelte-1dxdgqu {border-radius:9999px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.35));background:var(--sbw-input-bg, #fff);box-shadow:0 1px 2px rgba(0, 0, 0, 0.06);padding:0.5rem 0.9rem;font:inherit;font-size:0.8125rem;color:inherit;cursor:pointer;transition:border-color 150ms ease, background-color 150ms ease, color 150ms ease;}\n /* Excludes .sbw-slot-btn-selected for the same reason as .sbw-cal-cell's\n own hover exclusion above: this selector's two classes + :hover\n otherwise out-ranks that one plain class and hovering the already-\n selected slot would replace its solid accent fill with this one. */.sbw-slot-btn.svelte-1dxdgqu:hover:not(.sbw-slot-btn-selected) {border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);background:var(--sbw-slot-hover-bg, var(--sbw-input-bg, #fff));color:var(--sbw-slot-hover-color, inherit);}.sbw-slot-btn-selected.svelte-1dxdgqu {background:var(--sbw-accent-color, #c49e5a);border-color:var(--sbw-accent-color, #c49e5a);color:var(--sbw-accent-contrast, #fff);\n /* Replays whenever this class lands on a *different* button (auto-pick\n or a manual re-pick), since that's a fresh application of the\n animation property -- makes the pick noticeable instead of a silent\n state change several buttons over from where the visitor is looking. */\n animation: svelte-1dxdgqu-sbw-slot-pop 0.3s ease;}\n @keyframes svelte-1dxdgqu-sbw-slot-pop {\n 0% { transform: scale(0.92); }\n 60% { transform: scale(1.04); }\n 100% { transform: scale(1); }\n }\n /* Flashes gold then settles, so a silently auto-picked time in the summary\n panel (easy to miss, off to the side) draws the eye same as the pop\n above does for the slot button itself. */.sbw-time-flash.svelte-1dxdgqu {\n animation: svelte-1dxdgqu-sbw-time-flash 0.6s ease;}\n @keyframes svelte-1dxdgqu-sbw-time-flash {\n 0% { color: var(--sbw-accent-color, #c49e5a); }\n 100% { color: inherit; }\n }\n\n /* --- Summary panel --- */.sbw-summary.svelte-1dxdgqu {border-radius:4px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:1.25rem;}\n @media (min-width: 800px) {.sbw-summary.svelte-1dxdgqu {position:sticky;top:var(--sbw-summary-sticky-top, 1rem);}\n }.sbw-summary-row.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;font-size:0.9375rem;font-weight:600;}.sbw-summary-row-sub.svelte-1dxdgqu {margin-top:0.5rem;font-size:0.8125rem;font-weight:400;opacity:0.65;}\n /* Date and time are one fact, not a label/value pair -- keep them\n next to each other instead of the row's default space-between,\n which stretched them to opposite edges. Also the one -sub row that's\n actually the point of the summary (which slot you're about to book),\n so it overrides -sub's dimmed/thin defaults back up to fully legible\n instead of reading as fine print like the optional staff row above it. */.sbw-summary-row-datetime.svelte-1dxdgqu {justify-content:flex-start;gap:0.375rem;font-size:var(--sbw-summary-datetime-size, 0.875rem);font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}\n /* The post-booking \"Booked\" row's own timestamp value -- same\n reasoning and same variables as .sbw-summary-row-datetime above (it's\n the confirmed date/time, the actual point of this receipt-like row,\n not a footnote), just scoped to the value span rather than the whole\n row since this row keeps its label/value layout (space-between),\n unlike the label-less date+time row above. */.sbw-summary-row-bookedat-value.svelte-1dxdgqu {font-weight:var(--sbw-summary-datetime-weight, 700);color:var(--sbw-summary-datetime-color, inherit);opacity:var(--sbw-summary-datetime-opacity, 1);}.sbw-summary-total.svelte-1dxdgqu {display:flex;align-items:baseline;justify-content:space-between;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));font-size:0.9375rem;}.sbw-summary-total.svelte-1dxdgqu strong:where(.svelte-1dxdgqu) {font-size:1.125rem;color:var(--sbw-accent-color, #c49e5a);}.sbw-continue.svelte-1dxdgqu {width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-continue.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-continue.svelte-1dxdgqu:disabled {cursor:default;opacity:0.4;}\n\n /* --- Details step --- */.sbw-back.svelte-1dxdgqu {display:inline-block;margin-bottom:1.5rem;border:none;background:none;padding:0;font:inherit;color:inherit;font-size:0.8125rem;opacity:var(--sbw-back-opacity, 0.6);cursor:pointer;}.sbw-back.svelte-1dxdgqu:hover {opacity:var(--sbw-back-hover-opacity, 1);}.sbw-back-service.svelte-1dxdgqu {display:block;width:100%;margin-top:0.75rem;text-align:center;}.sbw-grid.svelte-1dxdgqu {display:grid;gap:1.25rem;}\n @media (min-width: 640px) {.sbw-grid.svelte-1dxdgqu {grid-template-columns:1fr 1fr;}\n }.sbw-field.svelte-1dxdgqu {display:flex;flex-direction:column;gap:0.5rem;}.sbw-label.svelte-1dxdgqu {font-size:0.75rem;font-weight:300;text-transform:uppercase;letter-spacing:0.05em;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu),\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu) {border-radius:2px;border:1px solid var(--sbw-border-color, rgba(0, 0, 0, 0.15));background:var(--sbw-input-bg, #fff);padding:0.75rem 1rem;font-size:0.875rem;font-family:inherit;color:inherit;}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):focus {outline:none;border-color:color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 40%, transparent);}.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu)::placeholder,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu)::placeholder {color:var(--sbw-placeholder-color, color-mix(in oklab, var(--sbw-text-color, #1a1a1a) 45%, transparent));}\n /* Browser autofill (matched saved Name/Email data) paints its own\n background on these inputs via a UA style strong enough that plain\n `background` can't win -- box-shadow can, so this fakes the field's\n normal look with an opaque inset fill instead. --sbw-input-autofill-bg\n falls back to --sbw-input-bg, which is enough for most themes (an\n opaque light input already matches when autofilled); only a theme\n whose --sbw-input-bg is itself transparent (mens-cave-barbers: fields\n defined by their border, not a fill, over a solid page background)\n needs to set this separately to that real opaque colour, or the\n browser's own fill shows through unmasked. The absurd transition delay\n is the standard defeat for Chrome's own internal autofill-background\n transition, which otherwise animates its colour in after this applies. */.sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:hover,\n .sbw-field.svelte-1dxdgqu input:where(.svelte-1dxdgqu):-webkit-autofill:focus,\n .sbw-field.svelte-1dxdgqu textarea:where(.svelte-1dxdgqu):-webkit-autofill:focus {-webkit-text-fill-color:var(--sbw-text-color, #1a1a1a);-webkit-box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;box-shadow:0 0 0 1000px var(--sbw-input-autofill-bg, var(--sbw-input-bg, #fff)) inset;transition:background-color 600000s ease-in-out 0s;}.sbw-notes-field.svelte-1dxdgqu {margin-top:1.25rem;}.sbw-submit.svelte-1dxdgqu {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;margin-top:1.25rem;cursor:pointer;border:none;border-radius:2px;background:var(--sbw-accent-bg, #1a1a1a);color:var(--sbw-accent-contrast, #fff);padding:0.8rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:background-color 150ms ease;}.sbw-submit.svelte-1dxdgqu:hover:not(:disabled) {background:var(--sbw-accent-hover-bg, #333);}.sbw-submit.svelte-1dxdgqu:disabled {cursor:default;opacity:0.6;}.sbw-spinner.svelte-1dxdgqu {height:1rem;width:1rem;border-radius:9999px;border:2px solid color-mix(in oklab, var(--sbw-accent-contrast, #fff) 30%, transparent);border-top-color:var(--sbw-accent-contrast, #fff);\n animation: svelte-1dxdgqu-sbw-spin 0.7s linear infinite;}\n @keyframes svelte-1dxdgqu-sbw-spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {.sbw-spinner.svelte-1dxdgqu {\n animation: none;}.sbw-slot-btn-selected.svelte-1dxdgqu,\n .sbw-time-flash.svelte-1dxdgqu {\n animation: none;}\n }.sbw-error-text.svelte-1dxdgqu {margin:0.75rem 0 0;font-size:0.8125rem;color:var(--sbw-danger-color, #dc2626);}\n\n /* --- Success --- */.sbw-success.svelte-1dxdgqu {max-width:var(--sbw-form-max-width, 40rem);margin:3rem auto 0;text-align:center;}.sbw-success-icon.svelte-1dxdgqu {display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin:0 auto 1rem;border-radius:9999px;background:var(--sbw-success-bg, #c49e5a);color:#fff;}.sbw-success-icon.svelte-1dxdgqu svg:where(.svelte-1dxdgqu) {width:1.5rem;height:1.5rem;}.sbw-success.svelte-1dxdgqu .sbw-summary:where(.svelte-1dxdgqu) {margin-top:2rem;text-align:left;}.sbw-success.svelte-1dxdgqu p:where(.svelte-1dxdgqu) {margin:0;font-size:1.125rem;}"
|
|
15061
15061
|
}, Pi(["click"]), customElements.define("spa-booking-widget", Fs(L_, {
|
|
15062
15062
|
heading: {
|
|
15063
15063
|
attribute: "heading",
|
|
@@ -16881,7 +16881,7 @@ function Ny(e, t) {
|
|
|
16881
16881
|
var Py, Fy, Iy, Ly, Ry, zy, By, Vy, Hy, Uy, Wy, Gy, Ky, qy, Jy, Yy, Xy, Zy, Qy, $y, eb = o((() => {
|
|
16882
16882
|
f(), zs(), Jh(), Py = /* @__PURE__ */ G("<span><svg class=\"lsbf-live-icon svelte-wxeez\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" width=\"20\" height=\"20\" fill=\"currentColor\"><path d=\"M198-278q-57-57-87.5-129.5T80-560q0-80 30.5-152.5T198-842l48 48q-47 47-72.5 107.5T148-560q0 66 25.5 126.5T246-326l-48 48Zm92-92q-38-38-58-87t-20-103q0-54 20-103t58-87l48 48q-29 29-43.5 65.5T280-560q0 40 14.5 76.5T338-418l-48 48Zm150 250v-348q-27-12-43.5-37T380-560q0-42 29-71t71-29q42 0 71 29t29 71q0 30-16.5 55T520-468v348h-80Zm230-250-48-48q29-29 43.5-65.5T680-560q0-40-14.5-76.5T622-702l48-48q38 38 58 87t20 103q0 54-20 103t-58 87Zm92 92-48-48q47-47 72.5-107.5T812-560q0-66-25.5-126.5T714-794l48-48q57 57 87.5 129.5T880-560q0 80-30.5 152.5T762-278Z\" class=\"svelte-wxeez\"></path></svg></span> <span class=\"lsbf-visually-hidden svelte-wxeez\"> </span>", 1), Fy = /* @__PURE__ */ G("<div><!></div>"), Iy = /* @__PURE__ */ G("<div class=\"lsbf-header svelte-wxeez\"><h2 class=\"lsbf-heading svelte-wxeez\"><svg class=\"lsbf-heading-icon svelte-wxeez\" aria-hidden=\"true\" viewBox=\"0 -960 960 960\" width=\"20\" height=\"20\" fill=\"currentColor\"><path d=\"M782-114 481-415 364-298q11 17 13.5 33t2.5 35q0 64-43 107T230-80q-64 0-107-43T80-230q0-64 43-107t107-43q18 0 35.5 5t36.5 15l116-116-118-118q-17 8-34.5 11t-35.5 3q-64 0-107-43T80-730q0-64 43-107t107-43q64 0 107 43t43 107q0 19-2.5 36T367-662l514 514v34h-99ZM599-527l-66-66 249-249h99v33L599-527ZM294-666q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Zm202.5 203.5Q502-468 502-476t-5.5-13.5Q491-495 483-495t-13.5 5.5Q464-484 464-476t5.5 13.5Q475-457 483-457t13.5-5.5ZM294-166q26-26 26-64t-26-64q-26-26-64-26t-64 26q-26 26-26 64t26 64q26 26 64 26t64-26Z\" class=\"svelte-wxeez\"></path></svg> </h2> <!></div>"), Ly = /* @__PURE__ */ G("<li class=\"lsbf-item lsbf-skeleton-item svelte-wxeez\"><span class=\"lsbf-item-accent svelte-wxeez\" aria-hidden=\"true\"></span> <div class=\"lsbf-item-main svelte-wxeez\"><div class=\"lsbf-item-top svelte-wxeez\"><span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-name svelte-wxeez\"></span> <span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-received svelte-wxeez\"></span></div> <span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-sub svelte-wxeez\"></span> <span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-status svelte-wxeez\"></span> <div class=\"lsbf-item-body svelte-wxeez\"><div class=\"lsbf-item-duration svelte-wxeez\"><span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-stat svelte-wxeez\"></span> <span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-stat-label svelte-wxeez\"></span></div> <span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-meta svelte-wxeez\"></span></div> <div class=\"lsbf-item-contact svelte-wxeez\"><span class=\"lsbf-skeleton-bar lsbf-skeleton-bar-contact svelte-wxeez\"></span></div></div></li>"), Ry = /* @__PURE__ */ G("<ul class=\"lsbf-list svelte-wxeez\" aria-hidden=\"true\"></ul>"), zy = /* @__PURE__ */ G("<p class=\"lsbf-empty svelte-wxeez\"> </p>"), By = /* @__PURE__ */ G("<span class=\"lsbf-item-status svelte-wxeez\"> </span>"), Vy = /* @__PURE__ */ G("<button type=\"button\" class=\"lsbf-item-status lsbf-item-status-btn svelte-wxeez\" aria-haspopup=\"dialog\"> </button>"), Hy = /* @__PURE__ */ G("<span class=\"lsbf-item-total svelte-wxeez\"> </span>"), Uy = /* @__PURE__ */ G("<a class=\"svelte-wxeez\"> </a>"), Wy = /* @__PURE__ */ G("<span class=\"svelte-wxeez\"> </span>"), Gy = /* @__PURE__ */ G("<div class=\"lsbf-item-contact svelte-wxeez\"><!> <!></div>"), Ky = /* @__PURE__ */ G("<li class=\"lsbf-item svelte-wxeez\"><span class=\"lsbf-item-accent svelte-wxeez\" aria-hidden=\"true\"></span> <div class=\"lsbf-item-main svelte-wxeez\"><div class=\"lsbf-item-top svelte-wxeez\"><span class=\"lsbf-item-name svelte-wxeez\"> </span> <span class=\"lsbf-item-received svelte-wxeez\"> </span></div> <span class=\"lsbf-item-treatment svelte-wxeez\"><!> <!> <!> <button type=\"button\" class=\"lsbf-item-datetime-btn svelte-wxeez\"> </button></span> <!> <div class=\"lsbf-item-body svelte-wxeez\"><div class=\"lsbf-item-duration svelte-wxeez\"><span class=\"lsbf-item-duration-number svelte-wxeez\"> </span> <span class=\"lsbf-item-duration-label svelte-wxeez\">min</span></div> <!></div> <!></div></li>"), qy = /* @__PURE__ */ G("<p class=\"lsbf-loading-more svelte-wxeez\" aria-live=\"polite\">Loading more…</p>"), Jy = /* @__PURE__ */ G("<div class=\"lsbf-sentinel svelte-wxeez\" aria-hidden=\"true\"></div>"), Yy = /* @__PURE__ */ G("<ul class=\"lsbf-list svelte-wxeez\"></ul> <!> <!>", 1), Xy = /* @__PURE__ */ G("<div class=\"lsbf-cancel-popover svelte-wxeez\" role=\"dialog\" aria-label=\"Cancel booking\"><p class=\"lsbf-cancel-popover-text svelte-wxeez\"> </p> <div class=\"lsbf-cancel-popover-actions svelte-wxeez\"><button type=\"button\" class=\"lsbf-cancel-popover-dismiss svelte-wxeez\">Keep</button> <button type=\"button\" class=\"lsbf-cancel-popover-confirm svelte-wxeez\">Cancel booking</button></div></div>"), Zy = /* @__PURE__ */ G("<spa-booking-widget></spa-booking-widget>", 2), Qy = /* @__PURE__ */ G("<section class=\"lsbf-root svelte-wxeez\"><!> <!> <!> <dialog aria-label=\"Change date and time\"><div class=\"lsbf-sheet-inner svelte-wxeez\"><div class=\"lsbf-sheet-header svelte-wxeez\"><h3 class=\"lsbf-sheet-title svelte-wxeez\">Change date & time</h3> <button type=\"button\" class=\"lsbf-sheet-close svelte-wxeez\" aria-label=\"Close\">✕</button></div> <div class=\"lsbf-sheet-body svelte-wxeez\"><!></div></div></dialog></section>"), $y = {
|
|
16883
16883
|
hash: "svelte-wxeez",
|
|
16884
|
-
code: ".lsbf-root.svelte-wxeez {position:relative;display:block;font-family:inherit;color:var(--lsbf-text-color, #1a1a1a);}.lsbf-header.svelte-wxeez {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;}.lsbf-heading.svelte-wxeez {display:flex;align-items:center;gap:0.5rem;margin:0;font-family:var(--lsbf-heading-font-family, inherit);font-size:var(--lsbf-heading-font-size, 1.125rem);font-weight:var(--lsbf-heading-font-weight, 700);}.lsbf-heading-icon.svelte-wxeez {flex-shrink:0;color:var(--lsbf-heading-icon-color, currentColor);opacity:0.8;}.lsbf-status.svelte-wxeez {display:flex;justify-content:flex-end;align-items:center;gap:0.375rem;margin-bottom:1rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--lsbf-live-color, #1a7d3a);}.lsbf-header.svelte-wxeez .lsbf-status:where(.svelte-wxeez) {margin-bottom:0;}.lsbf-status-error.svelte-wxeez {color:var(--lsbf-error-color, #b3261e);}.lsbf-live-icon-wrap.svelte-wxeez {position:relative;display:inline-flex;flex-shrink:0;}.lsbf-live-icon-wrap.svelte-wxeez::before {content:'';position:absolute;inset:0;border-radius:9999px;background:currentColor;opacity:0;\r\n animation: svelte-wxeez-lsbf-pulse 1.8s ease-out infinite;}\r\n @media (prefers-reduced-motion: reduce) {.lsbf-live-icon-wrap.svelte-wxeez::before {\r\n animation: none;}\r\n }.lsbf-live-icon-wrap-connecting.svelte-wxeez {opacity:0.55;}.lsbf-live-icon-wrap-connecting.svelte-wxeez::before {\r\n animation: none;}.lsbf-live-icon.svelte-wxeez {position:relative;display:block;}.lsbf-visually-hidden.svelte-wxeez {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\r\n @keyframes svelte-wxeez-lsbf-pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 0.6;\r\n }\r\n 100% {\r\n transform: scale(2.5);\r\n opacity: 0;\r\n }\r\n }.lsbf-empty.svelte-wxeez {opacity:0.6;font-size:0.875rem;}.lsbf-loading-more.svelte-wxeez {opacity:0.6;font-size:0.8125rem;text-align:center;margin:0.75rem 0 0;}.lsbf-list.svelte-wxeez {display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none;}.lsbf-item.svelte-wxeez {position:relative;display:flex;align-items:flex-start;gap:0.75rem;border:1px solid transparent;border-radius:12px;padding:0.875rem 1rem 0.875rem 1.75rem;background:var(--lsbf-item-bg, #fff);overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;}.lsbf-item.svelte-wxeez:hover {border-color:var(--lsbf-item-hover-border, rgba(0, 0, 0, 0.25));box-shadow:var(--lsbf-item-hover-shadow, 0 4px 16px rgba(0, 0, 0, 0.08));transform:translateY(-1px);cursor:pointer;}.lsbf-item-accent.svelte-wxeez {position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--lsbf-accent, currentColor);}.lsbf-item-main.svelte-wxeez {flex:1;min-width:0;display:flex;flex-direction:column;gap:0.25rem;}.lsbf-item-top.svelte-wxeez {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;}.lsbf-item-name.svelte-wxeez {font-weight:700;}.lsbf-item-treatment.svelte-wxeez {font-size:0.8125rem;}.lsbf-item-datetime-btn.svelte-wxeez {border:none;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}.lsbf-item-datetime-btn.svelte-wxeez:focus-visible {outline:2px solid var(--lsbf-accent, currentColor);outline-offset:2px;border-radius:2px;}.lsbf-item-status.svelte-wxeez {font-size:0.75rem;font-weight:700;color:var(--lsbf-accent, currentColor);}.lsbf-item-status-btn.svelte-wxeez {align-self:flex-start;border:none;background:transparent;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}.lsbf-item-status-btn.svelte-wxeez:focus-visible {outline:2px solid var(--lsbf-accent, currentColor);outline-offset:2px;border-radius:2px;}.lsbf-item-received.svelte-wxeez {font-size:0.6875rem;white-space:nowrap;flex-shrink:0;opacity:0.55;}.lsbf-item-body.svelte-wxeez {display:flex;align-items:center;gap:0.875rem;margin-top:0.25rem;}.lsbf-item-duration.svelte-wxeez {display:flex;align-items:baseline;gap:0.25rem;flex-shrink:0;padding-right:0.875rem;border-right:1px solid var(--lsbf-border-color, rgba(0, 0, 0, 0.1));}.lsbf-item-duration-number.svelte-wxeez {font-size:1.75rem;font-weight:800;line-height:1;}.lsbf-item-duration-label.svelte-wxeez {font-size:0.8125rem;font-weight:600;}.lsbf-item-total.svelte-wxeez {margin-left:auto;font-size:1.75rem;font-weight:800;line-height:1;}.lsbf-cancel-popover.svelte-wxeez {position:absolute;z-index:20;width:13rem;padding:0.75rem;border-radius:10px;background:var(--lsbf-popover-bg, #1a1a1a);color:var(--lsbf-popover-text, #fff);box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);}.lsbf-cancel-popover-text.svelte-wxeez {margin:0 0 0.625rem;font-size:0.8125rem;line-height:1.4;}.lsbf-cancel-popover-actions.svelte-wxeez {display:flex;justify-content:flex-end;gap:0.5rem;}.lsbf-cancel-popover-dismiss.svelte-wxeez,\r\n .lsbf-cancel-popover-confirm.svelte-wxeez {border:none;border-radius:6px;padding:0.375rem 0.625rem;font:inherit;font-size:0.75rem;font-weight:600;cursor:pointer;}.lsbf-cancel-popover-dismiss.svelte-wxeez {background:color-mix(in srgb, currentColor 12%, transparent);color:inherit;}.lsbf-cancel-popover-confirm.svelte-wxeez {background:var(--lsbf-status-cancelled-text, #ef4444);color:#fff;}.lsbf-item-contact.svelte-wxeez {display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;font-size:0.8125rem;margin-top:0.375rem;}.lsbf-item-contact.svelte-wxeez a:where(.svelte-wxeez) {color:inherit;}.lsbf-sentinel.svelte-wxeez {height:1px;}.lsbf-skeleton-item.svelte-wxeez {pointer-events:none;}.lsbf-skeleton-item.svelte-wxeez .lsbf-item-accent:where(.svelte-wxeez) {opacity:0.15;}.lsbf-skeleton-bar.svelte-wxeez {display:inline-block;height:0.75rem;border-radius:3px;background:var(--lsbf-skeleton-color, color-mix(in srgb, currentColor 8%, transparent));}.lsbf-skeleton-bar-name.svelte-wxeez {width:8.5rem;}.lsbf-skeleton-bar-sub.svelte-wxeez {width:6rem;height:0.625rem;}.lsbf-skeleton-bar-status.svelte-wxeez {width:4.5rem;}.lsbf-skeleton-bar-received.svelte-wxeez {width:5.5rem;height:0.5625rem;}.lsbf-skeleton-bar-meta.svelte-wxeez {width:5rem;}.lsbf-skeleton-bar-contact.svelte-wxeez {width:55%;}.lsbf-sheet.svelte-wxeez {position:fixed;inset:auto 0 0 0;margin:0;width:100vw;max-width:100vw;max-height:none;border:none;border-radius:16px 16px 0 0;padding:0;box-shadow:0 -8px 32px rgba(0, 0, 0, 0.3);opacity:0;transform:translateY(100%);transition:opacity 0.25s ease, transform 0.25s ease;}.lsbf-sheet.svelte-wxeez::backdrop {background:rgba(0, 0, 0, 0.5);}.lsbf-sheet-visible.svelte-wxeez {opacity:1;transform:translateY(0);}.lsbf-sheet-inner.svelte-wxeez {display:flex;flex-direction:column;max-height:88vh;border-radius:16px 16px 0 0;background:var(--lsbf-sheet-bg, #fff);color:var(--lsbf-sheet-text-color, #1a1a1a);}.lsbf-sheet-header.svelte-wxeez {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--lsbf-border-color, rgba(0, 0, 0, 0.1));flex-shrink:0;}.lsbf-sheet-title.svelte-wxeez {margin:0;font-size:1rem;font-weight:700;}.lsbf-sheet-close.svelte-wxeez {border:none;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0.25rem;border-radius:6px;}.lsbf-sheet-close.svelte-wxeez:hover,\r\n .lsbf-sheet-close.svelte-wxeez:focus-visible {background:color-mix(in srgb, currentColor 10%, transparent);}.lsbf-sheet-body.svelte-wxeez {overflow-y:auto;padding:1.5rem 2rem 2rem;}\r\n /* The widget caps its own inner content via these custom properties --\r\n
|
|
16884
|
+
code: ".lsbf-root.svelte-wxeez {position:relative;display:block;font-family:inherit;color:var(--lsbf-text-color, #1a1a1a);}.lsbf-header.svelte-wxeez {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;}.lsbf-heading.svelte-wxeez {display:flex;align-items:center;gap:0.5rem;margin:0;font-family:var(--lsbf-heading-font-family, inherit);font-size:var(--lsbf-heading-font-size, 1.125rem);font-weight:var(--lsbf-heading-font-weight, 700);}.lsbf-heading-icon.svelte-wxeez {flex-shrink:0;color:var(--lsbf-heading-icon-color, currentColor);opacity:0.8;}.lsbf-status.svelte-wxeez {display:flex;justify-content:flex-end;align-items:center;gap:0.375rem;margin-bottom:1rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--lsbf-live-color, #1a7d3a);}.lsbf-header.svelte-wxeez .lsbf-status:where(.svelte-wxeez) {margin-bottom:0;}.lsbf-status-error.svelte-wxeez {color:var(--lsbf-error-color, #b3261e);}.lsbf-live-icon-wrap.svelte-wxeez {position:relative;display:inline-flex;flex-shrink:0;}.lsbf-live-icon-wrap.svelte-wxeez::before {content:'';position:absolute;inset:0;border-radius:9999px;background:currentColor;opacity:0;\r\n animation: svelte-wxeez-lsbf-pulse 1.8s ease-out infinite;}\r\n @media (prefers-reduced-motion: reduce) {.lsbf-live-icon-wrap.svelte-wxeez::before {\r\n animation: none;}\r\n }.lsbf-live-icon-wrap-connecting.svelte-wxeez {opacity:0.55;}.lsbf-live-icon-wrap-connecting.svelte-wxeez::before {\r\n animation: none;}.lsbf-live-icon.svelte-wxeez {position:relative;display:block;}.lsbf-visually-hidden.svelte-wxeez {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}\r\n @keyframes svelte-wxeez-lsbf-pulse {\r\n 0% {\r\n transform: scale(1);\r\n opacity: 0.6;\r\n }\r\n 100% {\r\n transform: scale(2.5);\r\n opacity: 0;\r\n }\r\n }.lsbf-empty.svelte-wxeez {opacity:0.6;font-size:0.875rem;}.lsbf-loading-more.svelte-wxeez {opacity:0.6;font-size:0.8125rem;text-align:center;margin:0.75rem 0 0;}.lsbf-list.svelte-wxeez {display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none;}.lsbf-item.svelte-wxeez {position:relative;display:flex;align-items:flex-start;gap:0.75rem;border:1px solid transparent;border-radius:12px;padding:0.875rem 1rem 0.875rem 1.75rem;background:var(--lsbf-item-bg, #fff);overflow:hidden;transition:border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;}.lsbf-item.svelte-wxeez:hover {border-color:var(--lsbf-item-hover-border, rgba(0, 0, 0, 0.25));box-shadow:var(--lsbf-item-hover-shadow, 0 4px 16px rgba(0, 0, 0, 0.08));transform:translateY(-1px);cursor:pointer;}.lsbf-item-accent.svelte-wxeez {position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--lsbf-accent, currentColor);}.lsbf-item-main.svelte-wxeez {flex:1;min-width:0;display:flex;flex-direction:column;gap:0.25rem;}.lsbf-item-top.svelte-wxeez {display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;}.lsbf-item-name.svelte-wxeez {font-weight:700;}.lsbf-item-treatment.svelte-wxeez {font-size:0.8125rem;}.lsbf-item-datetime-btn.svelte-wxeez {border:none;background:transparent;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}.lsbf-item-datetime-btn.svelte-wxeez:focus-visible {outline:2px solid var(--lsbf-accent, currentColor);outline-offset:2px;border-radius:2px;}.lsbf-item-status.svelte-wxeez {font-size:0.75rem;font-weight:700;color:var(--lsbf-accent, currentColor);}.lsbf-item-status-btn.svelte-wxeez {align-self:flex-start;border:none;background:transparent;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}.lsbf-item-status-btn.svelte-wxeez:focus-visible {outline:2px solid var(--lsbf-accent, currentColor);outline-offset:2px;border-radius:2px;}.lsbf-item-received.svelte-wxeez {font-size:0.6875rem;white-space:nowrap;flex-shrink:0;opacity:0.55;}.lsbf-item-body.svelte-wxeez {display:flex;align-items:center;gap:0.875rem;margin-top:0.25rem;}.lsbf-item-duration.svelte-wxeez {display:flex;align-items:baseline;gap:0.25rem;flex-shrink:0;padding-right:0.875rem;border-right:1px solid var(--lsbf-border-color, rgba(0, 0, 0, 0.1));}.lsbf-item-duration-number.svelte-wxeez {font-size:1.75rem;font-weight:800;line-height:1;}.lsbf-item-duration-label.svelte-wxeez {font-size:0.8125rem;font-weight:600;}.lsbf-item-total.svelte-wxeez {margin-left:auto;font-size:1.75rem;font-weight:800;line-height:1;}.lsbf-cancel-popover.svelte-wxeez {position:absolute;z-index:20;width:13rem;padding:0.75rem;border-radius:10px;background:var(--lsbf-popover-bg, #1a1a1a);color:var(--lsbf-popover-text, #fff);box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);}.lsbf-cancel-popover-text.svelte-wxeez {margin:0 0 0.625rem;font-size:0.8125rem;line-height:1.4;}.lsbf-cancel-popover-actions.svelte-wxeez {display:flex;justify-content:flex-end;gap:0.5rem;}.lsbf-cancel-popover-dismiss.svelte-wxeez,\r\n .lsbf-cancel-popover-confirm.svelte-wxeez {border:none;border-radius:6px;padding:0.375rem 0.625rem;font:inherit;font-size:0.75rem;font-weight:600;cursor:pointer;}.lsbf-cancel-popover-dismiss.svelte-wxeez {background:color-mix(in srgb, currentColor 12%, transparent);color:inherit;}.lsbf-cancel-popover-confirm.svelte-wxeez {background:var(--lsbf-status-cancelled-text, #ef4444);color:#fff;}.lsbf-item-contact.svelte-wxeez {display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;font-size:0.8125rem;margin-top:0.375rem;}.lsbf-item-contact.svelte-wxeez a:where(.svelte-wxeez) {color:inherit;}.lsbf-sentinel.svelte-wxeez {height:1px;}.lsbf-skeleton-item.svelte-wxeez {pointer-events:none;}.lsbf-skeleton-item.svelte-wxeez .lsbf-item-accent:where(.svelte-wxeez) {opacity:0.15;}.lsbf-skeleton-bar.svelte-wxeez {display:inline-block;height:0.75rem;border-radius:3px;background:var(--lsbf-skeleton-color, color-mix(in srgb, currentColor 8%, transparent));}.lsbf-skeleton-bar-name.svelte-wxeez {width:8.5rem;}.lsbf-skeleton-bar-sub.svelte-wxeez {width:6rem;height:0.625rem;}.lsbf-skeleton-bar-status.svelte-wxeez {width:4.5rem;}.lsbf-skeleton-bar-received.svelte-wxeez {width:5.5rem;height:0.5625rem;}.lsbf-skeleton-bar-meta.svelte-wxeez {width:5rem;}.lsbf-skeleton-bar-contact.svelte-wxeez {width:55%;}.lsbf-sheet.svelte-wxeez {position:fixed;inset:auto 0 0 0;margin:0;width:100vw;max-width:100vw;max-height:none;border:none;border-radius:16px 16px 0 0;padding:0;box-shadow:0 -8px 32px rgba(0, 0, 0, 0.3);opacity:0;transform:translateY(100%);transition:opacity 0.25s ease, transform 0.25s ease;}.lsbf-sheet.svelte-wxeez::backdrop {background:rgba(0, 0, 0, 0.5);}.lsbf-sheet-visible.svelte-wxeez {opacity:1;transform:translateY(0);}.lsbf-sheet-inner.svelte-wxeez {display:flex;flex-direction:column;max-height:88vh;border-radius:16px 16px 0 0;background:var(--lsbf-sheet-bg, #fff);color:var(--lsbf-sheet-text-color, #1a1a1a);}.lsbf-sheet-header.svelte-wxeez {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-bottom:1px solid var(--lsbf-border-color, rgba(0, 0, 0, 0.1));flex-shrink:0;}.lsbf-sheet-title.svelte-wxeez {margin:0;font-size:1rem;font-weight:700;}.lsbf-sheet-close.svelte-wxeez {border:none;background:transparent;color:inherit;font-size:1rem;line-height:1;cursor:pointer;padding:0.25rem;border-radius:6px;}.lsbf-sheet-close.svelte-wxeez:hover,\r\n .lsbf-sheet-close.svelte-wxeez:focus-visible {background:color-mix(in srgb, currentColor 10%, transparent);}.lsbf-sheet-body.svelte-wxeez {overflow-y:auto;padding:1.5rem 2rem 2rem;}\r\n /* The widget caps its own inner content via these custom properties --\r\n the service-list and details-form steps are widened to use the\r\n sheet's full width rather than sitting narrow and centered inside\r\n it, but the datetime step keeps a real (just larger-than-default)\r\n cap: at the sheet's full viewport width, an uncapped calendar grid\r\n and slot-groups column stretch into mostly dead space between date\r\n numbers and time chips instead of the widget's own margin:auto\r\n centering it with sane cell sizes. Colors/gradient match the same\r\n brand tokens the dashboard's own dark theme uses (--bg-rgb/--text-rgb\r\n are the same 05040f/f0eeff pair the public booking widget themes\r\n with) instead of the widget's light default, which clashed with the\r\n rest of this dark dashboard. */.lsbf-sheet-body.svelte-wxeez spa-booking-widget:where(.svelte-wxeez) {--sbw-intro-max-width: 100%;--sbw-form-max-width: 100%;--sbw-datetime-max-width: 76rem;--sbw-bg: rgb(var(--bg-rgb, 5, 4, 15));--sbw-text-color: var(--lsbf-sheet-text-color, #f0eeff);--sbw-border-color: rgba(255, 255, 255, 0.08);--sbw-input-bg: rgba(255, 255, 255, 0.04);--sbw-cal-hover-bg: rgba(255, 255, 255, 0.06);--sbw-service-hover-bg: rgba(255, 255, 255, 0.04);--sbw-accent-color: rgb(155, 93, 229);--sbw-accent-contrast: #fff;--sbw-accent-bg: linear-gradient(167deg, rgb(79, 142, 247) 0%, rgb(155, 93, 229) 33%, rgb(247, 37, 133) 66%, rgb(255, 149, 0) 100%);--sbw-accent-hover-bg: linear-gradient(167deg, rgb(120, 168, 250) 0%, rgb(175, 123, 239) 33%, rgb(249, 80, 161) 66%, rgb(255, 178, 64) 100%);--sbw-success-bg: linear-gradient(167deg, rgb(79, 142, 247) 0%, rgb(155, 93, 229) 33%, rgb(247, 37, 133) 66%, rgb(255, 149, 0) 100%);--sbw-danger-color: rgb(247, 37, 133);--sbw-heading-font-family: 'Unbounded', sans-serif;}"
|
|
16885
16885
|
}, Pi(["click"]), customElements.define("live-spa-bookings-feed", Fs(Ny, {
|
|
16886
16886
|
heading: {
|
|
16887
16887
|
attribute: "heading",
|