@luzmo/lucero 0.0.26 → 0.0.29
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/components/accordion/index.cjs +4 -4
- package/components/accordion/index.js +4 -4
- package/components/action-bar/index.cjs +1 -1
- package/components/action-bar/index.js +6 -6
- package/components/action-button/index.cjs +2 -2
- package/components/action-button/index.js +5 -5
- package/components/action-group/index.cjs +1 -1
- package/components/action-group/index.js +1 -1
- package/components/{action-group-DngGfcr_.js → action-group-DBImibFn.js} +2 -2
- package/components/{action-group-hy1HZxOi.cjs → action-group-DJGMcRHb.cjs} +1 -1
- package/components/action-menu/index.cjs +2 -2
- package/components/action-menu/index.js +6 -6
- package/components/{async-directive-B0s_zDWg.cjs → async-directive-BX1T1e1_.cjs} +1 -1
- package/components/{async-directive-C0KryStG.js → async-directive-BfcqVjDp.js} +1 -1
- package/components/avatar/index.cjs +3 -3
- package/components/avatar/index.js +10 -10
- package/components/base-CBCg3yyw.cjs +40 -0
- package/components/{base-DroC2Znx.js → base-WsynuqaS.js} +54 -51
- package/components/button/index.cjs +1 -1
- package/components/button/index.js +6 -6
- package/components/{button-base-BRZtaOk8.js → button-base-DbkDzb71.js} +4 -4
- package/components/{button-base-CJc7kjJK.cjs → button-base-XgPLmwP-.cjs} +1 -1
- package/components/button-group/index.cjs +1 -1
- package/components/button-group/index.js +2 -2
- package/components/calendar/index.cjs +1 -1
- package/components/calendar/index.js +1 -1
- package/components/checkbox/index.cjs +1 -1
- package/components/checkbox/index.js +4 -4
- package/components/{checkbox-mixin-CcPwhZst.cjs → checkbox-mixin-BDN0dBtS.cjs} +1 -1
- package/components/{checkbox-mixin-DbcpHFBw.js → checkbox-mixin-Do7EgtpQ.js} +2 -2
- package/components/{class-map-DuvNig0r.cjs → class-map-Di1D_rCm.cjs} +1 -1
- package/components/{class-map-CjcRhurN.js → class-map-NbVXqBU0.js} +1 -1
- package/components/{clear-button-Nwq4REOv.js → clear-button-DoeRUWQ3.js} +16 -16
- package/components/clear-button-Qi1pMA5S.cjs +18 -0
- package/components/close-button-BFMBEw3q.cjs +18 -0
- package/components/{close-button-9l1TxW7Y.cjs → close-button-BWXdHSx3.js} +34 -1
- package/components/color-area/index.cjs +1 -1
- package/components/color-area/index.js +3 -3
- package/components/color-field/index.cjs +1 -1
- package/components/color-field/index.js +2 -2
- package/components/color-handle/index.cjs +1 -1
- package/components/color-handle/index.js +2 -2
- package/components/color-loupe/index.cjs +1 -1
- package/components/color-loupe/index.js +1 -1
- package/components/{color-loupe-Ck2IRn4K.cjs → color-loupe-CaA_Lfkk.cjs} +1 -1
- package/components/{color-loupe-B0mH9Jyx.js → color-loupe-CmMsXbjT.js} +1 -1
- package/components/color-menu/index.cjs +4 -4
- package/components/color-menu/index.js +4 -4
- package/components/color-picker/index.cjs +1 -1
- package/components/color-picker/index.js +3 -3
- package/components/color-slider/index.cjs +1 -1
- package/components/color-slider/index.js +5 -5
- package/components/date-time-picker/index.cjs +3 -3
- package/components/date-time-picker/index.js +10 -10
- package/components/directive-helpers-Cm6gitnu.js +62 -0
- package/components/{directive-helpers-OG6wWKJt.js → directive-helpers-DyIRTWwA.cjs} +2 -8
- package/components/divider/index.cjs +1 -1
- package/components/divider/index.js +5 -5
- package/components/{divider.module-CXMNveQc.cjs → divider.module-DDvBo9zo.cjs} +1 -1
- package/components/{divider.module-DwOuLGU3.js → divider.module-DoQWQEIJ.js} +1 -1
- package/components/field-group/index.cjs +1 -1
- package/components/field-group/index.js +1 -1
- package/components/{field-group-ClxYbp6Z.js → field-group-DXfBWrkO.js} +2 -2
- package/components/{field-group-CIach2C_.cjs → field-group-DkGst3r5.cjs} +1 -1
- package/components/field-label/index.cjs +1 -1
- package/components/field-label/index.js +1 -1
- package/components/{field-label-BaOJ2i-l.js → field-label-CZ2zzChK.js} +2 -2
- package/components/{field-label-CkZCXvyb.cjs → field-label-mO1AkUgR.cjs} +1 -1
- package/components/flow-D-0MTYCm.js +527 -0
- package/components/flow-DM3dNAKs.cjs +30 -0
- package/components/{focusable-Dy9nRVST.js → focusable-BxtpnzWp.js} +1 -1
- package/components/{focusable-BW4I5ppi.cjs → focusable-EbipgXRh.cjs} +1 -1
- package/components/icon/index.cjs +1 -1
- package/components/icon/index.js +3 -3
- package/components/{if-defined-D7nbLM5n.cjs → if-defined-C9YGdo33.cjs} +1 -1
- package/components/{if-defined-CUCu7LSf.js → if-defined-DOaE2coe.js} +1 -1
- package/components/{index-C6wHQ74z.js → index-A-yOTB_d.js} +20 -20
- package/components/index-BLWuwZXx.cjs +113 -0
- package/components/index.cjs +1 -1
- package/components/index.js +132 -127
- package/components/infield-button/index.cjs +1 -1
- package/components/infield-button/index.js +3 -3
- package/components/label/index.cjs +1 -1
- package/components/label/index.js +1 -1
- package/components/{like-anchor-CkIPVvtI.js → like-anchor-Bvn_vLQ8.js} +2 -2
- package/components/{like-anchor-s-5FEzRQ.cjs → like-anchor-sod1C1fR.cjs} +1 -1
- package/components/luzmo-icons-DbwDQtuO.js +229 -0
- package/components/luzmo-icons-DletXGWU.cjs +29 -0
- package/components/{manage-help-text-DGwDhPtP.cjs → manage-help-text-DhgARkZX.cjs} +1 -1
- package/components/{manage-help-text-BzyCpgqN.js → manage-help-text-syYnjKGL.js} +2 -2
- package/components/menu/index.cjs +8 -8
- package/components/menu/index.js +19 -19
- package/components/multi-language-field/index.cjs +1 -1
- package/components/multi-language-field/index.js +3 -3
- package/components/number-field/index.cjs +3 -3
- package/components/number-field/index.js +10 -10
- package/components/{observe-slot-text-BMloiRX5.js → observe-slot-text-BPfIQQtz.js} +1 -1
- package/components/{observe-slot-text-BzdHQBH3.cjs → observe-slot-text-Ceb7SvYT.cjs} +1 -1
- package/components/options/index.cjs +104 -0
- package/components/options/index.d.ts +13 -0
- package/components/options/index.js +1172 -0
- package/components/options/option.d.ts +70 -0
- package/components/options/options-divider.d.ts +14 -0
- package/components/options/options.d.ts +85 -0
- package/components/overlay/index.cjs +4 -4
- package/components/overlay/index.js +8 -8
- package/components/{overlay-D4oZnKKd.js → overlay-BBNyvs8F.js} +4 -4
- package/components/{overlay-DAVu8dy8.cjs → overlay-o0tLxsk-.cjs} +1 -1
- package/components/{pending-state-xRhujC3J.js → pending-state-C5OtdXCm.js} +2 -2
- package/components/{pending-state-CkibRs0D.cjs → pending-state-gs6IxYtB.cjs} +1 -1
- package/components/picker/index.cjs +1 -1
- package/components/picker/index.js +2 -2
- package/components/picker/picker.d.ts +2 -2
- package/components/picker-CM3kN655.js +461 -0
- package/components/picker-C__p3kzA.cjs +123 -0
- package/components/picker-button/index.cjs +2 -2
- package/components/picker-button/index.js +6 -6
- package/components/popover/index.cjs +1 -1
- package/components/popover/index.js +1 -1
- package/components/{popover-Cx4MhaoE.js → popover-DjX0aAnY.js} +2 -2
- package/components/{popover-DBQ1YYW6.cjs → popover-KFfO0IYL.cjs} +1 -1
- package/components/progress-circle/index.cjs +1 -1
- package/components/progress-circle/index.js +1 -1
- package/components/{progress-circle-BGubjTvj.cjs → progress-circle-B12-2Gww.cjs} +1 -1
- package/components/{progress-circle-B25wyiBi.js → progress-circle-CWGsfHnp.js} +3 -3
- package/components/radio/index.cjs +1 -1
- package/components/radio/index.js +3 -3
- package/components/search/index.cjs +4 -4
- package/components/search/index.js +5 -5
- package/components/select/index.cjs +156 -0
- package/components/select/index.d.ts +7 -0
- package/components/select/index.js +580 -0
- package/components/{multi-picker/multi-picker.d.ts → select/select.d.ts} +83 -59
- package/components/{sized-mixin-CDhX3fJn.cjs → sized-mixin-CPxE5C96.cjs} +1 -1
- package/components/{sized-mixin-Y_QuYtjJ.js → sized-mixin-D4ACoVUr.js} +1 -1
- package/components/slider/index.cjs +1 -1
- package/components/slider/index.js +2 -2
- package/components/{state-Bq6oXknJ.cjs → state-D8JEtYqe.cjs} +1 -1
- package/components/{state-BF7jO1DT.js → state-Deh-vKYE.js} +1 -1
- package/components/strategies-Bc3hG-HA.js +195 -0
- package/components/strategies-DGwsR7Xf.cjs +18 -0
- package/components/{streaming-listener-Cm6s-WvF.cjs → streaming-listener-B00MvALi.cjs} +1 -1
- package/components/{streaming-listener-Dxbr_Jiv.js → streaming-listener-CP-JE6Fa.js} +2 -2
- package/components/{style-map-Cp3I-AN3.cjs → style-map-CeilmSgs.cjs} +1 -1
- package/components/{style-map-DqptyE0A.js → style-map-IgqIKvlE.js} +1 -1
- package/components/swatch/index.cjs +2 -2
- package/components/swatch/index.js +11 -11
- package/components/switch/index.cjs +1 -1
- package/components/switch/index.js +4 -4
- package/components/tabs/index.cjs +5 -5
- package/components/tabs/index.js +10 -10
- package/components/tags/index.cjs +1 -1
- package/components/tags/index.js +3 -3
- package/components/text-field/index.cjs +2 -2
- package/components/text-field/index.js +8 -8
- package/components/{text-field-DWC0tpq4.js → text-field-BIADXoLC.js} +11 -11
- package/components/{text-field-CThL0T_y.cjs → text-field-D5d_Gt0t.cjs} +5 -5
- package/components/toast/index.cjs +4 -4
- package/components/toast/index.js +5 -5
- package/components/tooltip/index.cjs +1 -1
- package/components/tooltip/index.js +3 -3
- package/components/unit-input/index.cjs +3 -3
- package/components/unit-input/index.js +4 -4
- package/components/utils.cjs +1 -1
- package/components/utils.js +4 -4
- package/custom-elements.json +1 -1
- package/index.d.ts +2 -1
- package/package.json +11 -6
- package/{components/picker → utils/button-interaction-controllers}/interaction-controller.d.ts +6 -5
- package/{components/picker → utils/button-interaction-controllers}/mobile-controller.d.ts +2 -2
- package/components/base-CTSOJw6c.cjs +0 -40
- package/components/clear-button-BkQsOIoW.cjs +0 -18
- package/components/close-button-7ut4xT4f.js +0 -51
- package/components/directive-helpers-BQRjDUVe.cjs +0 -22
- package/components/index-CbaDCtQl.cjs +0 -113
- package/components/multi-picker/index.cjs +0 -127
- package/components/multi-picker/index.d.ts +0 -7
- package/components/multi-picker/index.js +0 -502
- package/components/picker-D0wr8mRN.js +0 -460
- package/components/picker-PMfW3n8Z.cjs +0 -123
- package/components/strategies-CzfvQU_H.js +0 -192
- package/components/strategies-D_cIzAJE.cjs +0 -18
- /package/{components/picker → utils/button-interaction-controllers}/desktop-controller.d.ts +0 -0
- /package/{components/picker → utils/button-interaction-controllers}/strategies.d.ts +0 -0
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
import { f as h } from "./platform-BM-uMWpX.js";
|
|
19
|
+
const u = "(max-width: 743px) and (hover: none) and (pointer: coarse)";
|
|
20
|
+
class g {
|
|
21
|
+
constructor(t, e) {
|
|
22
|
+
this.key = Symbol("match-media-key"), this.matches = !1, this.host = t, this.host.addController(this), this.media = window.matchMedia(e), this.matches = this.media.matches, this.onChange = this.onChange.bind(this), t.addController(this);
|
|
23
|
+
}
|
|
24
|
+
hostConnected() {
|
|
25
|
+
var t;
|
|
26
|
+
(t = this.media) == null || t.addEventListener("change", this.onChange);
|
|
27
|
+
}
|
|
28
|
+
hostDisconnected() {
|
|
29
|
+
var t;
|
|
30
|
+
(t = this.media) == null || t.removeEventListener("change", this.onChange);
|
|
31
|
+
}
|
|
32
|
+
onChange(t) {
|
|
33
|
+
this.matches !== t.matches && (this.matches = t.matches, this.host.requestUpdate(this.key, !this.matches));
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
var r = /* @__PURE__ */ ((o) => (o[o.desktop = 0] = "desktop", o[o.mobile = 1] = "mobile", o))(r || {});
|
|
37
|
+
class l {
|
|
38
|
+
constructor(t, e) {
|
|
39
|
+
this.target = t, this.host = e, this.preventNextToggle = "no", this.pointerdownState = !1, this.enterKeydownOn = null, this._open = !1, this.target = t, this.host = e, this.host.addController(this), this.init();
|
|
40
|
+
}
|
|
41
|
+
get activelyOpening() {
|
|
42
|
+
return !1;
|
|
43
|
+
}
|
|
44
|
+
get open() {
|
|
45
|
+
return this._open;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Set `open`
|
|
49
|
+
*/
|
|
50
|
+
set open(t) {
|
|
51
|
+
if (this._open !== t) {
|
|
52
|
+
if (this._open = t, this.overlay) {
|
|
53
|
+
this.host.open = t;
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
customElements.whenDefined("luzmo-overlay").then(async () => {
|
|
57
|
+
const { LuzmoOverlay: e } = await import("./overlay/index.js");
|
|
58
|
+
this.overlay = new e(), this.host.open = !0, this.host.requestUpdate();
|
|
59
|
+
}), import("./overlay/index.js");
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
get overlay() {
|
|
63
|
+
return this._overlay;
|
|
64
|
+
}
|
|
65
|
+
set overlay(t) {
|
|
66
|
+
t && this.overlay !== t && (this._overlay = t, this.initOverlay());
|
|
67
|
+
}
|
|
68
|
+
releaseDescription() {
|
|
69
|
+
}
|
|
70
|
+
handleBeforetoggle(t) {
|
|
71
|
+
var e, s;
|
|
72
|
+
t.composedPath()[0] === t.target && (t.newState === "closed" && (this.preventNextToggle === "no" ? this.open = !1 : this.pointerdownState || (e = this.overlay) == null || e.manuallyKeepOpen()), this.open || (this.host.optionsMenu.updateSelectedItemIndex(), // pickers can have submenus, selects can not
|
|
73
|
+
typeof ((s = this.host.optionsMenu) == null ? void 0 : s.closeDescendentOverlays) == "function" && this.host.optionsMenu.closeDescendentOverlays()));
|
|
74
|
+
}
|
|
75
|
+
initOverlay() {
|
|
76
|
+
this.overlay && (this.overlay.addEventListener("beforetoggle", (t) => {
|
|
77
|
+
this.handleBeforetoggle(
|
|
78
|
+
t
|
|
79
|
+
);
|
|
80
|
+
}), this.overlay.type = this.host.isMobile.matches ? "modal" : "auto", this.overlay.triggerElement = this.host, this.overlay.placement = this.host.isMobile.matches ? void 0 : this.host.placement, this.overlay.receivesFocus = "true", this.overlay.willPreventClose = this.preventNextToggle !== "no" && this.open, this.overlay.addEventListener(
|
|
81
|
+
"slottable-request",
|
|
82
|
+
this.host.handleSlottableRequest
|
|
83
|
+
));
|
|
84
|
+
}
|
|
85
|
+
handlePointerdown(t) {
|
|
86
|
+
}
|
|
87
|
+
handleButtonFocus(t) {
|
|
88
|
+
this.preventNextToggle === "maybe" && t.relatedTarget === this.host.optionsMenu && (this.preventNextToggle = "yes");
|
|
89
|
+
}
|
|
90
|
+
handleActivate(t) {
|
|
91
|
+
}
|
|
92
|
+
/* c8 ignore next 3 */
|
|
93
|
+
init() {
|
|
94
|
+
}
|
|
95
|
+
abort() {
|
|
96
|
+
var t;
|
|
97
|
+
this.releaseDescription(), (t = this.abortController) == null || t.abort();
|
|
98
|
+
}
|
|
99
|
+
hostConnected() {
|
|
100
|
+
this.init();
|
|
101
|
+
}
|
|
102
|
+
hostDisconnected() {
|
|
103
|
+
var t;
|
|
104
|
+
(t = this.abortController) == null || t.abort();
|
|
105
|
+
}
|
|
106
|
+
hostUpdated() {
|
|
107
|
+
this.overlay && this.host.dependencyManager.loaded && this.host.open !== this.overlay.open && (this.overlay.willPreventClose = this.preventNextToggle !== "no", this.overlay.open = this.host.open);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
class c extends l {
|
|
111
|
+
constructor() {
|
|
112
|
+
super(...arguments), this.type = r.desktop;
|
|
113
|
+
}
|
|
114
|
+
handlePointerdown(t) {
|
|
115
|
+
if (t.target.closest(".clear-icon") || t.button !== 0 || t.pointerType === "touch")
|
|
116
|
+
return;
|
|
117
|
+
this.pointerdownState = this.open, this.preventNextToggle = "maybe";
|
|
118
|
+
let a = 0;
|
|
119
|
+
const n = () => {
|
|
120
|
+
cancelAnimationFrame(a), a = requestAnimationFrame(() => {
|
|
121
|
+
document.removeEventListener("pointerup", n), document.removeEventListener("pointercancel", n), this.target.removeEventListener("click", n), requestAnimationFrame(() => {
|
|
122
|
+
this.preventNextToggle = "no";
|
|
123
|
+
});
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
document.addEventListener("pointerup", n), document.addEventListener("pointercancel", n), this.target.addEventListener("click", n), this.handleActivate();
|
|
127
|
+
}
|
|
128
|
+
handleActivate(t) {
|
|
129
|
+
this.enterKeydownOn && this.enterKeydownOn !== this.target || this.preventNextToggle !== "yes" && ((t == null ? void 0 : t.type) === "click" && this.open !== this.pointerdownState || this.host.toggle());
|
|
130
|
+
}
|
|
131
|
+
init() {
|
|
132
|
+
var e;
|
|
133
|
+
(e = this.abortController) == null || e.abort(), this.abortController = new AbortController();
|
|
134
|
+
const { signal: t } = this.abortController;
|
|
135
|
+
this.target.addEventListener(
|
|
136
|
+
"click",
|
|
137
|
+
(s) => this.handleActivate(s),
|
|
138
|
+
{
|
|
139
|
+
signal: t
|
|
140
|
+
}
|
|
141
|
+
), this.target.addEventListener(
|
|
142
|
+
"pointerdown",
|
|
143
|
+
(s) => this.handlePointerdown(s),
|
|
144
|
+
{ signal: t }
|
|
145
|
+
), this.target.addEventListener(
|
|
146
|
+
"focus",
|
|
147
|
+
(s) => this.handleButtonFocus(s),
|
|
148
|
+
{
|
|
149
|
+
signal: t
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
const i = "remove-focus-ring-safari-hack";
|
|
155
|
+
class d extends l {
|
|
156
|
+
constructor() {
|
|
157
|
+
super(...arguments), this.type = r.mobile;
|
|
158
|
+
}
|
|
159
|
+
handleClick(t) {
|
|
160
|
+
t.target.closest(".clear-button") && (this.preventNextToggle === "no" && (this.open = !this.open), this.preventNextToggle = "no");
|
|
161
|
+
}
|
|
162
|
+
handlePointerdown(t) {
|
|
163
|
+
t.target.closest(".clear-button") && (this.preventNextToggle = this.open ? "yes" : "no", h() && this.target.classList.add(i));
|
|
164
|
+
}
|
|
165
|
+
handleFocusOut() {
|
|
166
|
+
this.host.open || h() && this.target.classList.contains(i) && this.target.classList.remove(i);
|
|
167
|
+
}
|
|
168
|
+
init() {
|
|
169
|
+
var e;
|
|
170
|
+
(e = this.abortController) == null || e.abort(), this.abortController = new AbortController();
|
|
171
|
+
const { signal: t } = this.abortController;
|
|
172
|
+
this.target.addEventListener(
|
|
173
|
+
"click",
|
|
174
|
+
(s) => this.handleClick(s),
|
|
175
|
+
{
|
|
176
|
+
signal: t
|
|
177
|
+
}
|
|
178
|
+
), this.target.addEventListener(
|
|
179
|
+
"pointerdown",
|
|
180
|
+
(s) => this.handlePointerdown(s),
|
|
181
|
+
{ signal: t }
|
|
182
|
+
), this.target.addEventListener("focusout", () => this.handleFocusOut(), {
|
|
183
|
+
signal: t
|
|
184
|
+
});
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
const v = {
|
|
188
|
+
desktop: c,
|
|
189
|
+
mobile: d
|
|
190
|
+
};
|
|
191
|
+
export {
|
|
192
|
+
u as I,
|
|
193
|
+
g as M,
|
|
194
|
+
v as s
|
|
195
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*! * Lucero - The design system for Luzmo.
|
|
2
|
+
*
|
|
3
|
+
* Copyright © 2025 Luzmo
|
|
4
|
+
* All rights reserved.
|
|
5
|
+
* Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
|
|
6
|
+
* This license allows users with a current active Luzmo account to use Lucero.
|
|
7
|
+
* This license terminates automatically if a user no longer has an active Luzmo account.
|
|
8
|
+
* Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
|
|
9
|
+
*
|
|
10
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
11
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
12
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
13
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
14
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
15
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
|
+
* SOFTWARE.
|
|
17
|
+
* */
|
|
18
|
+
"use strict";const h=require("./platform-BiXhwqk3.cjs"),c="(max-width: 743px) and (hover: none) and (pointer: coarse)";class d{constructor(t,e){this.key=Symbol("match-media-key"),this.matches=!1,this.host=t,this.host.addController(this),this.media=window.matchMedia(e),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),t.addController(this)}hostConnected(){var t;(t=this.media)==null||t.addEventListener("change",this.onChange)}hostDisconnected(){var t;(t=this.media)==null||t.removeEventListener("change",this.onChange)}onChange(t){this.matches!==t.matches&&(this.matches=t.matches,this.host.requestUpdate(this.key,!this.matches))}}var r=(o=>(o[o.desktop=0]="desktop",o[o.mobile=1]="mobile",o))(r||{});class l{constructor(t,e){this.target=t,this.host=e,this.preventNextToggle="no",this.pointerdownState=!1,this.enterKeydownOn=null,this._open=!1,this.target=t,this.host=e,this.host.addController(this),this.init()}get activelyOpening(){return!1}get open(){return this._open}set open(t){if(this._open!==t){if(this._open=t,this.overlay){this.host.open=t;return}customElements.whenDefined("luzmo-overlay").then(async()=>{const{LuzmoOverlay:e}=await Promise.resolve().then(()=>require("./overlay/index.cjs"));this.overlay=new e,this.host.open=!0,this.host.requestUpdate()}),Promise.resolve().then(()=>require("./overlay/index.cjs"))}}get overlay(){return this._overlay}set overlay(t){t&&this.overlay!==t&&(this._overlay=t,this.initOverlay())}releaseDescription(){}handleBeforetoggle(t){var e,s;t.composedPath()[0]===t.target&&(t.newState==="closed"&&(this.preventNextToggle==="no"?this.open=!1:this.pointerdownState||(e=this.overlay)==null||e.manuallyKeepOpen()),this.open||(this.host.optionsMenu.updateSelectedItemIndex(),typeof((s=this.host.optionsMenu)==null?void 0:s.closeDescendentOverlays)=="function"&&this.host.optionsMenu.closeDescendentOverlays()))}initOverlay(){this.overlay&&(this.overlay.addEventListener("beforetoggle",t=>{this.handleBeforetoggle(t)}),this.overlay.type=this.host.isMobile.matches?"modal":"auto",this.overlay.triggerElement=this.host,this.overlay.placement=this.host.isMobile.matches?void 0:this.host.placement,this.overlay.receivesFocus="true",this.overlay.willPreventClose=this.preventNextToggle!=="no"&&this.open,this.overlay.addEventListener("slottable-request",this.host.handleSlottableRequest))}handlePointerdown(t){}handleButtonFocus(t){this.preventNextToggle==="maybe"&&t.relatedTarget===this.host.optionsMenu&&(this.preventNextToggle="yes")}handleActivate(t){}init(){}abort(){var t;this.releaseDescription(),(t=this.abortController)==null||t.abort()}hostConnected(){this.init()}hostDisconnected(){var t;(t=this.abortController)==null||t.abort()}hostUpdated(){this.overlay&&this.host.dependencyManager.loaded&&this.host.open!==this.overlay.open&&(this.overlay.willPreventClose=this.preventNextToggle!=="no",this.overlay.open=this.host.open)}}class u extends l{constructor(){super(...arguments),this.type=r.desktop}handlePointerdown(t){if(t.target.closest(".clear-icon")||t.button!==0||t.pointerType==="touch")return;this.pointerdownState=this.open,this.preventNextToggle="maybe";let a=0;const n=()=>{cancelAnimationFrame(a),a=requestAnimationFrame(()=>{document.removeEventListener("pointerup",n),document.removeEventListener("pointercancel",n),this.target.removeEventListener("click",n),requestAnimationFrame(()=>{this.preventNextToggle="no"})})};document.addEventListener("pointerup",n),document.addEventListener("pointercancel",n),this.target.addEventListener("click",n),this.handleActivate()}handleActivate(t){this.enterKeydownOn&&this.enterKeydownOn!==this.target||this.preventNextToggle!=="yes"&&((t==null?void 0:t.type)==="click"&&this.open!==this.pointerdownState||this.host.toggle())}init(){var e;(e=this.abortController)==null||e.abort(),this.abortController=new AbortController;const{signal:t}=this.abortController;this.target.addEventListener("click",s=>this.handleActivate(s),{signal:t}),this.target.addEventListener("pointerdown",s=>this.handlePointerdown(s),{signal:t}),this.target.addEventListener("focus",s=>this.handleButtonFocus(s),{signal:t})}}const i="remove-focus-ring-safari-hack";class g extends l{constructor(){super(...arguments),this.type=r.mobile}handleClick(t){t.target.closest(".clear-button")&&(this.preventNextToggle==="no"&&(this.open=!this.open),this.preventNextToggle="no")}handlePointerdown(t){t.target.closest(".clear-button")&&(this.preventNextToggle=this.open?"yes":"no",h.isWebKit()&&this.target.classList.add(i))}handleFocusOut(){this.host.open||h.isWebKit()&&this.target.classList.contains(i)&&this.target.classList.remove(i)}init(){var e;(e=this.abortController)==null||e.abort(),this.abortController=new AbortController;const{signal:t}=this.abortController;this.target.addEventListener("click",s=>this.handleClick(s),{signal:t}),this.target.addEventListener("pointerdown",s=>this.handlePointerdown(s),{signal:t}),this.target.addEventListener("focusout",()=>this.handleFocusOut(),{signal:t})}}const p={desktop:u,mobile:g};exports.IS_MOBILE=c;exports.MatchMediaController=d;exports.strategies=p;
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";const a=require("./base-
|
|
18
|
+
"use strict";const a=require("./base-CBCg3yyw.cjs"),d=require("./async-directive-BX1T1e1_.cjs"),m=require("./directive-C7oCP5Bh.cjs"),s=["",()=>{}];class l extends d.f{constructor(){super(...arguments),this.start=s,this.streamInside=s,this.end=s,this.streamOutside=s,this.state="off",this.handleStart=e=>{this.clearStream(),this.callHandler(this.start[1],e),!e.defaultPrevented&&(this.removeListeners(),this.addListeners("on"))},this.handleInside=e=>{this.handleStream(this.streamInside[1],e)},this.handleEnd=e=>{this.clearStream(),this.callHandler(this.end[1],e),this.removeListeners(),this.addListeners("off")},this.handleOutside=e=>{this.handleStream(this.streamOutside[1],e)}}render(e){return a.E}update(e,[{start:t,end:i,streamInside:n=s,streamOutside:h=s}]){var r;this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=((r=e.options)==null?void 0:r.host)||this.element,this.start=t,this.end=i,this.streamInside=n,this.streamOutside=h,this.addListeners()}addListeners(e){this.state=e||this.state,this.state==="off"?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state==="on"&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||(this.callHandler(e,t),this.stream=requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(i=>{this.element.addEventListener(i,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(i=>{this.element.removeEventListener(i,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners()}reconnected(){this.addListeners()}}const o=m.e(l);exports.streamingListener=o;
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { E as a } from "./base-
|
|
19
|
-
import { f as d } from "./async-directive-
|
|
18
|
+
import { E as a } from "./base-WsynuqaS.js";
|
|
19
|
+
import { f as d } from "./async-directive-BfcqVjDp.js";
|
|
20
20
|
import { e as m } from "./directive-oAbCiebi.js";
|
|
21
21
|
const s = ["", () => {
|
|
22
22
|
}];
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";const u=require("./base-
|
|
18
|
+
"use strict";const u=require("./base-CBCg3yyw.cjs"),o=require("./directive-C7oCP5Bh.cjs");/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2018 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { T as l } from "./base-
|
|
18
|
+
import { T as l } from "./base-WsynuqaS.js";
|
|
19
19
|
import { e as u, i as c, t as d } from "./directive-oAbCiebi.js";
|
|
20
20
|
/**
|
|
21
21
|
* @license
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../luzmo-icons-DletXGWU.cjs"),r=require("../base-CBCg3yyw.cjs"),w=require("../if-defined-C9YGdo33.cjs"),b=require("../when-CDZyJPvd.cjs"),g=require("../focusable-EbipgXRh.cjs"),p=require("../sized-mixin-CPxE5C96.cjs"),v=require("../mutation-controller-DkOMCW-c.cjs"),m=require("../query-assigned-elements-DsKsfk7G.cjs"),z=require("../roving-tabindex-By_fCy_e.cjs"),x='@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-negative-color);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';var y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,c=(h,e,t,o)=>{for(var s=o>1?void 0:o?k(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&y(e,t,s),s};class l extends p.SizedMixin(g.Focusable,{validSizes:["xxs","xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.color="",this.label="",this.mixedValue=!1,this.nothing=!1,this.role="button",this.selected=!1,this.readonly=!1,this.renderDisabled=()=>r.x`
|
|
19
19
|
<svg
|
|
20
20
|
xmlns="http://www.w3.org/2000/svg"
|
|
21
21
|
class="disabled-icon"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
fill="var(--swatch-disabled-icon-stroke-color)"
|
|
33
33
|
/>
|
|
34
34
|
</svg>
|
|
35
|
-
`,this.renderMixedValue=()=>u.
|
|
35
|
+
`,this.renderMixedValue=()=>u.O2(u.$)}static get styles(){return[r.r(x)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.readonly||(this.selected=e??!this.selected)}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return r.x`
|
|
36
36
|
<div
|
|
37
37
|
class="opacity-checkerboard fill"
|
|
38
38
|
style=${w.o(this.color?`--picked-color: ${this.color}`:void 0)}
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import {
|
|
19
|
-
import { x as u, r as
|
|
20
|
-
import { o as x } from "../if-defined-
|
|
18
|
+
import { O as z, $ as v } from "../luzmo-icons-DbwDQtuO.js";
|
|
19
|
+
import { x as u, r as p, n as l, a as w } from "../base-WsynuqaS.js";
|
|
20
|
+
import { o as x } from "../if-defined-DOaE2coe.js";
|
|
21
21
|
import { n as b } from "../when-CDK1Tt5Y.js";
|
|
22
|
-
import { F as y } from "../focusable-
|
|
23
|
-
import { S as
|
|
22
|
+
import { F as y } from "../focusable-BxtpnzWp.js";
|
|
23
|
+
import { S as m } from "../sized-mixin-D4ACoVUr.js";
|
|
24
24
|
import { s as k } from "../mutation-controller-DH7YOCyj.js";
|
|
25
25
|
import { o as S } from "../query-assigned-elements-DjfhL1cl.js";
|
|
26
26
|
import { R as C } from "../roving-tabindex-DOg4z6ZU.js";
|
|
@@ -37,7 +37,7 @@ var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (c, e, o
|
|
|
37
37
|
(i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
|
|
38
38
|
return r && t && E(e, o, t), t;
|
|
39
39
|
};
|
|
40
|
-
class a extends
|
|
40
|
+
class a extends m(y, {
|
|
41
41
|
validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
|
|
42
42
|
noDefaultSize: !0
|
|
43
43
|
}) {
|
|
@@ -62,7 +62,7 @@ class a extends p(y, {
|
|
|
62
62
|
`, this.renderMixedValue = () => z(v);
|
|
63
63
|
}
|
|
64
64
|
static get styles() {
|
|
65
|
-
return [
|
|
65
|
+
return [p(A)];
|
|
66
66
|
}
|
|
67
67
|
get value() {
|
|
68
68
|
return this._value || this.color || this.label;
|
|
@@ -177,12 +177,12 @@ n([
|
|
|
177
177
|
l()
|
|
178
178
|
], a.prototype, "value", 1);
|
|
179
179
|
const D = ":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";
|
|
180
|
-
var L = Object.defineProperty,
|
|
181
|
-
for (var t = r > 1 ? void 0 : r ?
|
|
180
|
+
var L = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, h = (c, e, o, r) => {
|
|
181
|
+
for (var t = r > 1 ? void 0 : r ? $(e, o) : e, s = c.length - 1, i; s >= 0; s--)
|
|
182
182
|
(i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
|
|
183
183
|
return r && t && L(e, o, t), t;
|
|
184
184
|
};
|
|
185
|
-
class d extends
|
|
185
|
+
class d extends m(w, {
|
|
186
186
|
validSizes: ["xs", "s", "m", "l"],
|
|
187
187
|
noDefaultSize: !0
|
|
188
188
|
}) {
|
|
@@ -214,7 +214,7 @@ class d extends p(w, {
|
|
|
214
214
|
});
|
|
215
215
|
}
|
|
216
216
|
static get styles() {
|
|
217
|
-
return [
|
|
217
|
+
return [p(D)];
|
|
218
218
|
}
|
|
219
219
|
get selected() {
|
|
220
220
|
return this._selected;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base-CTSOJw6c.cjs"),d=require("../sized-mixin-CDhX3fJn.cjs"),n=require("../focusable-BW4I5ppi.cjs"),u=require("../checkbox-mixin-CcPwhZst.cjs");class w extends u.checkboxMixin(n.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var b=Object.defineProperty,h=(t,o,l,v)=>{for(var r=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=a(o,l,r)||r);return r&&b(o,l,r),r};class e extends d.SizedMixin(w){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[c.r(s)]:[c.r(s)]}render(){return c.x`
|
|
18
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../base-CBCg3yyw.cjs"),d=require("../sized-mixin-CPxE5C96.cjs"),n=require("../focusable-EbipgXRh.cjs"),u=require("../checkbox-mixin-BDN0dBtS.cjs");class w extends u.checkboxMixin(n.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var( --luzmo-focus-indicator-width, var(--luzmo-indicator-width) );min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-selected-color);--switch-handle-border-color-hover: var(--luzmo-selected-color-hover);--switch-handle-border-color-down: var(--luzmo-selected-color-down);--switch-handle-border-color-focus: var(--luzmo-selected-color-focus);--switch-handle-border-color-selected-default: var( --luzmo-selected-color-hover );--switch-handle-border-color-selected-hover: var(--luzmo-selected-color-down);--switch-handle-border-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-handle-border-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-selected-color-hard);--switch-label-color-hover: var(--luzmo-selected-color-hard-hover);--switch-label-color-down: var(--luzmo-selected-color-hard-down);--switch-label-color-focus: var(--luzmo-selected-color-hard-focus);--switch-label-color-disabled: var(--luzmo-disabled-color);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-disabled-color);--switch-background-color-selected-default: var(--luzmo-selected-color-hover);--switch-background-color-selected-hover: var(--luzmo-selected-color-down);--switch-background-color-selected-down: var( --luzmo-selected-color-hard-down );--switch-background-color-selected-focus: var(--luzmo-selected-color-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-disabled-color);--switch-spacing-top-to-control: calc( (var(--switch-min-height) - var(--switch-control-height)) / 2 )}:host([disabled]){--switch-label-color-default: var(--luzmo-disabled-color)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var b=Object.defineProperty,h=(t,o,l,v)=>{for(var r=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=a(o,l,r)||r);return r&&b(o,l,r),r};class e extends d.SizedMixin(w){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[c.r(s)]:[c.r(s)]}render(){return c.x`
|
|
19
19
|
${super.render()}
|
|
20
20
|
<span id="switch"></span>
|
|
21
21
|
<label id="label" for="input"><slot></slot></label>
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
16
16
|
* SOFTWARE.
|
|
17
17
|
* */
|
|
18
|
-
import { r as a, x as u, n as h } from "../base-
|
|
19
|
-
import { S as b } from "../sized-mixin-
|
|
20
|
-
import { F as w } from "../focusable-
|
|
21
|
-
import { c as m } from "../checkbox-mixin-
|
|
18
|
+
import { r as a, x as u, n as h } from "../base-WsynuqaS.js";
|
|
19
|
+
import { S as b } from "../sized-mixin-D4ACoVUr.js";
|
|
20
|
+
import { F as w } from "../focusable-BxtpnzWp.js";
|
|
21
|
+
import { c as m } from "../checkbox-mixin-Do7EgtpQ.js";
|
|
22
22
|
const n = () => {
|
|
23
23
|
if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
|
|
24
24
|
const o = document.createElement("style");
|