crayon-design-system-ui 0.0.2 → 0.0.4
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/README.md +1 -1
- package/dist/angular/index.js +1 -1
- package/dist/assets/{attributes-o88QCNuy.js → attributes-D-TnEoSs.js} +1 -1
- package/dist/assets/{custom-element-CN6vLcFC.js → custom-element-BNCemaCE.js} +1 -1
- package/dist/assets/{each-DkX3FjFL.js → each-C4IlkX_B.js} +1 -1
- package/dist/assets/{if-DdiIl-sg.js → if-BVwKToaK.js} +1 -1
- package/dist/assets/{index-client-CiUbrQq_.js → index-client-BDYmxQqF.js} +1 -1
- package/dist/assets/{lifecycle-BK5NY8qp.js → lifecycle-8krACzSO.js} +2 -2
- package/dist/assets/{props-DbUVX42-.js → props-CFmog5h1.js} +1 -1
- package/dist/assets/{slot-CRFQJtYY.js → slot-DvkFfIlK.js} +1 -1
- package/dist/assets/{this-DllEouAd.js → this-BafLbyG5.js} +1 -1
- package/dist/components/accordion/Accordion.js +2 -2
- package/dist/components/accordion/Accordion.svelte +10 -10
- package/dist/components/accordion-item/AccordionItem.js +1 -1
- package/dist/components/accordion-item/AccordionItem.svelte +10 -10
- package/dist/components/avatar/Avatar.js +2 -2
- package/dist/components/avatar/Avatar.svelte +14 -14
- package/dist/components/button/Button.js +26 -12
- package/dist/components/button/Button.svelte +89 -30
- package/dist/components/button/Button.svelte.d.ts +2 -0
- package/dist/components/card/Card.js +10 -10
- package/dist/components/card/Card.svelte +51 -51
- package/dist/components/checkbox/Checkbox.js +7 -7
- package/dist/components/checkbox/Checkbox.svelte +22 -22
- package/dist/components/form/Form.js +1 -1
- package/dist/components/form-select/FormSelect.js +15 -15
- package/dist/components/form-select/FormSelect.svelte +35 -35
- package/dist/components/form-select/FormSelectOption.js +1 -1
- package/dist/components/input/Input.js +13 -13
- package/dist/components/input/Input.svelte +43 -43
- package/dist/components/label/Label.js +1 -1
- package/dist/components/label/Label.svelte +9 -9
- package/dist/components/radio/Radio.js +5 -5
- package/dist/components/radio/Radio.svelte +13 -13
- package/dist/components/textarea/Textarea.js +2 -2
- package/dist/components/textarea/Textarea.svelte +23 -23
- package/dist/tokens.css +162 -158
- package/dist-browser/assets/Accordion-4FnaG9Y5.js +3 -0
- package/dist-browser/assets/AccordionItem-MWAfy7EJ.js +1 -0
- package/dist-browser/assets/Avatar-Cr-67Tpk.js +2 -0
- package/dist-browser/assets/Button-Plyyjo0D.js +47 -0
- package/dist-browser/assets/Card-CUlg_7ny.js +27 -0
- package/dist-browser/assets/Checkbox-Bt7fzawE.js +21 -0
- package/dist-browser/assets/{Form-BZFKnk3f.js → Form-CxYboW1j.js} +1 -1
- package/dist-browser/assets/FormSelect-savXS0S1.js +18 -0
- package/dist-browser/assets/{FormSelectOption-DhOxPDjS.js → FormSelectOption-BEHQwEkg.js} +1 -1
- package/dist-browser/assets/Input-DTmtSwFl.js +22 -0
- package/dist-browser/assets/Label-Dk_VP__P.js +1 -0
- package/dist-browser/assets/Radio-B0hST10q.js +14 -0
- package/dist-browser/assets/Textarea-DDTph5tQ.js +3 -0
- package/dist-browser/assets/{attributes-BN21YWvK.js → attributes-BB78Zt3j.js} +1 -1
- package/dist-browser/assets/{custom-element-vZIc-tZM.js → custom-element-CXejdDHX.js} +1 -1
- package/dist-browser/assets/{each-CDVyljdy.js → each-DNRJ3yhh.js} +1 -1
- package/dist-browser/assets/{if-B3xMWYuB.js → if-B4dDWEPO.js} +1 -1
- package/dist-browser/assets/{index-client-BMTknfvN.js → index-client-D3Q8Zdf-.js} +1 -1
- package/dist-browser/assets/{lifecycle-BSCLFPkh.js → lifecycle-DybWhkay.js} +2 -2
- package/dist-browser/assets/{props-DClXGNhw.js → props-FXCOeMRa.js} +1 -1
- package/dist-browser/assets/{slot-Btw_EhJQ.js → slot-BMp_Pzk-.js} +1 -1
- package/dist-browser/assets/{this-CobEtPHm.js → this-CHrKM9Ea.js} +1 -1
- package/dist-browser/bundle.js +2 -2
- package/dist-browser/tokens.css +162 -158
- package/package.json +10 -6
- package/dist-browser/assets/Accordion-CwOMoX3u.js +0 -3
- package/dist-browser/assets/AccordionItem-CuTFqdt6.js +0 -1
- package/dist-browser/assets/Avatar-Ct0ZUf_m.js +0 -2
- package/dist-browser/assets/Button-BvYyhPrn.js +0 -33
- package/dist-browser/assets/Card-DM0rPY9s.js +0 -27
- package/dist-browser/assets/Checkbox-DK1LWC1i.js +0 -21
- package/dist-browser/assets/FormSelect-CBTpNNrh.js +0 -18
- package/dist-browser/assets/Input-DZZF_45U.js +0 -22
- package/dist-browser/assets/Label-BX3_KNGn.js +0 -1
- package/dist-browser/assets/Radio-Bwape_rC.js +0 -14
- package/dist-browser/assets/Textarea-BYsLYgK4.js +0 -3
|
@@ -8,6 +8,7 @@ export let disabled = false;
|
|
|
8
8
|
export let loading = false;
|
|
9
9
|
export let color = void 0;
|
|
10
10
|
export let type = "button";
|
|
11
|
+
export let floating = false;
|
|
11
12
|
export let backgroundColor = void 0;
|
|
12
13
|
export let fontSize = void 0;
|
|
13
14
|
export let borderRadius = void 0;
|
|
@@ -16,8 +17,8 @@ export let fontWeight = void 0;
|
|
|
16
17
|
export let padding = void 0;
|
|
17
18
|
export let extraClass = "";
|
|
18
19
|
$: styleParts = [
|
|
19
|
-
color != null && `--
|
|
20
|
-
backgroundColor != null && `--
|
|
20
|
+
color != null && `--crayon-button-bg:${color}`,
|
|
21
|
+
backgroundColor != null && `--crayon-button-custom-bg:${backgroundColor}`,
|
|
21
22
|
fontSize != null && `font-size:${fontSize}`,
|
|
22
23
|
borderRadius != null && `border-radius:${borderRadius}`,
|
|
23
24
|
borderWidth != null && `border-width:${borderWidth}`,
|
|
@@ -25,7 +26,7 @@ $: styleParts = [
|
|
|
25
26
|
padding != null && `padding:${padding}`
|
|
26
27
|
].filter(Boolean);
|
|
27
28
|
$: buttonStyle = styleParts.length > 0 ? styleParts.join("; ") : void 0;
|
|
28
|
-
$: buttonClass = `btn-inner ${variant} ${size} shape-${shape} ${extraClass}`.trim();
|
|
29
|
+
$: buttonClass = `btn-inner ${variant} ${size} shape-${shape} ${floating ? "is-floating" : ""} ${extraClass}`.trim();
|
|
29
30
|
function handleClick(event) {
|
|
30
31
|
if (disabled || loading) {
|
|
31
32
|
event.preventDefault();
|
|
@@ -45,6 +46,24 @@ function handleClick(event) {
|
|
|
45
46
|
<span class="spinner"></span>
|
|
46
47
|
{/if}
|
|
47
48
|
<span class="btn-content">
|
|
49
|
+
{#if floating}
|
|
50
|
+
<span class="btn-icon">
|
|
51
|
+
<slot name="icon">
|
|
52
|
+
<svg
|
|
53
|
+
class="btn-icon-svg"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
aria-hidden="true"
|
|
56
|
+
focusable="false"
|
|
57
|
+
>
|
|
58
|
+
<circle cx="12" cy="12" r="12" fill="currentColor" opacity="0.12" />
|
|
59
|
+
<path
|
|
60
|
+
d="M12 6.75c.414 0 .75.336.75.75v3.75H16.5a.75.75 0 1 1 0 1.5H12.75V16.5a.75.75 0 1 1-1.5 0v-3.75H7.5a.75.75 0 1 1 0-1.5h3.75V7.5c0-.414.336-.75.75-.75Z"
|
|
61
|
+
fill="currentColor"
|
|
62
|
+
/>
|
|
63
|
+
</svg>
|
|
64
|
+
</slot>
|
|
65
|
+
</span>
|
|
66
|
+
{/if}
|
|
48
67
|
<slot />
|
|
49
68
|
</span>
|
|
50
69
|
</button>
|
|
@@ -56,7 +75,7 @@ function handleClick(event) {
|
|
|
56
75
|
|
|
57
76
|
.btn-inner {
|
|
58
77
|
border: none;
|
|
59
|
-
border-radius: var(--
|
|
78
|
+
border-radius: var(--crayon-radius-md, 10px);
|
|
60
79
|
cursor: pointer;
|
|
61
80
|
font-weight: 500;
|
|
62
81
|
transition: all 0.2s ease;
|
|
@@ -72,6 +91,22 @@ function handleClick(event) {
|
|
|
72
91
|
gap: 0.5rem;
|
|
73
92
|
}
|
|
74
93
|
|
|
94
|
+
.btn-icon {
|
|
95
|
+
display: inline-flex;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.btn-icon-svg {
|
|
101
|
+
width: 22px;
|
|
102
|
+
margin-right: 8px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
::slotted(img[slot="icon"]) {
|
|
106
|
+
width: 22px;
|
|
107
|
+
margin-right: 8px;
|
|
108
|
+
}
|
|
109
|
+
|
|
75
110
|
/* Shape: pill (full rounded) for icon + text */
|
|
76
111
|
.shape-pill {
|
|
77
112
|
border-radius: 999px;
|
|
@@ -141,88 +176,112 @@ function handleClick(event) {
|
|
|
141
176
|
gap: 0.5rem;
|
|
142
177
|
}
|
|
143
178
|
|
|
144
|
-
/*
|
|
179
|
+
/* Floating: fixed bottom-right, pill border-radius; position overridable via --crayon-button-floating-* */
|
|
180
|
+
.btn-inner.is-floating {
|
|
181
|
+
position: fixed;
|
|
182
|
+
right: var(--crayon-button-floating-right, 40px);
|
|
183
|
+
bottom: var(--crayon-button-floating-bottom, 20px);
|
|
184
|
+
border-radius: var(--crayon-button-floating-radius, 999px);
|
|
185
|
+
padding-left: 22px;
|
|
186
|
+
padding-right: 26px;
|
|
187
|
+
box-shadow: 0px 6px 7px -6px #40474bff;
|
|
188
|
+
box-shadow: var(
|
|
189
|
+
--crayon-button-floating-shadow,
|
|
190
|
+
0px 6px 7px -6px #40474bff
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Variants — respect --crayon-button-custom-bg when set via backgroundColor prop */
|
|
145
195
|
.primary {
|
|
146
|
-
background: var(--
|
|
147
|
-
color: var(--
|
|
196
|
+
background: var(--crayon-button-custom-bg, var(--crayon-primary, #474bff));
|
|
197
|
+
color: var(--crayon-button-bg, #fefeff);
|
|
148
198
|
}
|
|
149
199
|
|
|
150
200
|
.primary:hover {
|
|
151
|
-
background: var(
|
|
201
|
+
background: var(
|
|
202
|
+
--crayon-button-custom-bg-hover,
|
|
203
|
+
var(--crayon-primary-hover, #2b2399)
|
|
204
|
+
);
|
|
152
205
|
color: #fefeff;
|
|
153
206
|
}
|
|
154
207
|
|
|
155
208
|
.secondary {
|
|
156
|
-
background: var(
|
|
209
|
+
background: var(
|
|
210
|
+
--crayon-button-custom-bg,
|
|
211
|
+
var(--crayon-secondary, #222121)
|
|
212
|
+
);
|
|
157
213
|
color: #fefeff;
|
|
158
214
|
}
|
|
159
215
|
|
|
160
216
|
.secondary:hover {
|
|
161
|
-
background: var(
|
|
217
|
+
background: var(
|
|
218
|
+
--crayon-button-custom-bg-hover,
|
|
219
|
+
var(--crayon-secondary-hover, #616061)
|
|
220
|
+
);
|
|
162
221
|
color: #fefeff;
|
|
163
222
|
}
|
|
164
223
|
|
|
165
224
|
.outline {
|
|
166
|
-
background: var(--
|
|
167
|
-
border: 1px solid var(--
|
|
225
|
+
background: var(--crayon-outline, transparent);
|
|
226
|
+
border: 1px solid var(--crayon-outline, #222121);
|
|
168
227
|
color: #616061;
|
|
169
228
|
}
|
|
170
229
|
|
|
171
230
|
.outline:hover {
|
|
172
|
-
background: var(--
|
|
173
|
-
border: 1px solid var(--
|
|
231
|
+
background: var(--crayon-outline-hover, transparent);
|
|
232
|
+
border: 1px solid var(--crayon-outline, #222121);
|
|
174
233
|
color: #222121;
|
|
175
234
|
}
|
|
176
235
|
|
|
177
236
|
.danger {
|
|
178
|
-
background: var(--
|
|
237
|
+
background: var(--crayon-button-custom-bg, var(--crayon-danger, #e03e52));
|
|
179
238
|
color: #fefeff;
|
|
180
239
|
}
|
|
181
240
|
|
|
182
241
|
.danger:hover {
|
|
183
242
|
background: var(
|
|
184
|
-
--
|
|
185
|
-
var(--
|
|
243
|
+
--crayon-button-custom-bg-hover,
|
|
244
|
+
var(--crayon-danger-hover, #c23445)
|
|
186
245
|
);
|
|
187
246
|
color: #fefeff;
|
|
188
247
|
}
|
|
189
248
|
|
|
190
249
|
.success {
|
|
191
|
-
background: var(--
|
|
250
|
+
background: var(--crayon-button-custom-bg, var(--crayon-success, #2cc84d));
|
|
192
251
|
color: #fefeff;
|
|
193
252
|
}
|
|
194
253
|
|
|
195
254
|
.success:hover {
|
|
196
255
|
background: var(
|
|
197
|
-
--
|
|
198
|
-
var(--
|
|
256
|
+
--crayon-button-custom-bg-hover,
|
|
257
|
+
var(--crayon-success-hover, #2cc84d)
|
|
199
258
|
);
|
|
200
259
|
color: #fefeff;
|
|
201
260
|
}
|
|
202
261
|
|
|
203
262
|
.white {
|
|
204
|
-
background: var(--
|
|
205
|
-
color: var(--
|
|
206
|
-
border: 1px solid var(--
|
|
263
|
+
background: var(--crayon-button-custom-bg, var(--crayon-white, #ffffff));
|
|
264
|
+
color: var(--crayon-text-on-light, #222121);
|
|
265
|
+
border: 1px solid var(--crayon-border-light, #e0e0e0);
|
|
207
266
|
}
|
|
208
267
|
|
|
209
268
|
.white:hover {
|
|
210
269
|
background: var(
|
|
211
|
-
--
|
|
212
|
-
var(--
|
|
270
|
+
--crayon-button-custom-bg-hover,
|
|
271
|
+
var(--crayon-white-hover, #f5f5f5)
|
|
213
272
|
);
|
|
214
|
-
color: var(--
|
|
215
|
-
border-color: var(--
|
|
273
|
+
color: var(--crayon-text-on-light, #222121);
|
|
274
|
+
border-color: var(--crayon-border-light-hover, #c0c0c0);
|
|
216
275
|
}
|
|
217
276
|
|
|
218
277
|
.ghost {
|
|
219
278
|
background: transparent;
|
|
220
|
-
color: var(--
|
|
279
|
+
color: var(--crayon-ghost-text, #616061);
|
|
221
280
|
}
|
|
222
281
|
|
|
223
282
|
.ghost:hover {
|
|
224
|
-
background: var(--
|
|
225
|
-
color: var(--
|
|
283
|
+
background: var(--crayon-ghost-hover, rgba(0, 0, 0, 0.06));
|
|
284
|
+
color: var(--crayon-ghost-text-hover, #222121);
|
|
226
285
|
}
|
|
227
286
|
|
|
228
287
|
.btn-inner:disabled {
|
|
@@ -8,6 +8,7 @@ declare const __propDef: {
|
|
|
8
8
|
loading?: boolean;
|
|
9
9
|
color?: string | undefined;
|
|
10
10
|
type?: "button" | "submit" | "reset";
|
|
11
|
+
/** When true, positions the button fixed at bottom-right (overridable via CSS). Applies pill border-radius. */ floating?: boolean;
|
|
11
12
|
/** Override background (and text contrast) for variant; e.g. "#10b981" */ backgroundColor?: string | undefined;
|
|
12
13
|
/** Override font size; e.g. "16px", "1rem" */ fontSize?: string | undefined;
|
|
13
14
|
/** Override border radius; e.g. "8px", "999px" */ borderRadius?: string | undefined;
|
|
@@ -20,6 +21,7 @@ declare const __propDef: {
|
|
|
20
21
|
[evt: string]: CustomEvent<any>;
|
|
21
22
|
};
|
|
22
23
|
slots: {
|
|
24
|
+
icon: {};
|
|
23
25
|
default: {};
|
|
24
26
|
};
|
|
25
27
|
};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import{c as G,p as J,g as
|
|
2
|
-
var(--
|
|
1
|
+
import{c as G,p as J,g as e,l as K,d as x,a as P,e as m,t as Q,i as W,j as X,s as a,m as t,k as Y,b as d,n as _,r as c}from"../../assets/custom-element-BNCemaCE.js";import{o as Z}from"../../assets/index-client-BDYmxQqF.js";import{s as i}from"../../assets/slot-DvkFfIlK.js";import{a as $,i as rr,s as l,c as or}from"../../assets/lifecycle-8krACzSO.js";import{b as er}from"../../assets/this-BafLbyG5.js";import{p as k}from"../../assets/props-CFmog5h1.js";var ar=Y('<div><div><!></div> <div><!></div> <div class="card-body svelte-18poi8p"><!></div> <div><!></div> <div><!></div></div>');const tr={hash:"svelte-18poi8p",code:`.card-root.svelte-18poi8p {position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size:var(--crayon-card-font-size, 14px);line-height:1.5;color:var(--crayon-card-color, #212529);background-color:var(--crayon-card-bg, #fff);border:var(--crayon-card-border-width, 1px) solid\r
|
|
2
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:var(--crayon-card-border-radius, 8px);box-shadow:var(--crayon-card-box-shadow, none);}\r
|
|
3
3
|
\r
|
|
4
|
-
/* Variants: default uses CSS vars above; others set bg + border + color */.card-root.variant-primary.svelte-18poi8p {background-color:var(--
|
|
4
|
+
/* Variants: default uses CSS vars above; others set bg + border + color */.card-root.variant-primary.svelte-18poi8p {background-color:var(--crayon-card-primary-bg, #0d6efd);border-color:var(--crayon-card-primary-border, #0d6efd);color:var(--crayon-card-primary-color, #fff);}.card-root.variant-secondary.svelte-18poi8p {background-color:var(--crayon-card-secondary-bg, #6c757d);border-color:var(--crayon-card-secondary-border, #6c757d);color:var(--crayon-card-secondary-color, #fff);}.card-root.variant-success.svelte-18poi8p {background-color:var(--crayon-card-success-bg, #198754);border-color:var(--crayon-card-success-border, #198754);color:var(--crayon-card-success-color, #fff);}.card-root.variant-danger.svelte-18poi8p {background-color:var(--crayon-card-danger-bg, #dc3545);border-color:var(--crayon-card-danger-border, #dc3545);color:var(--crayon-card-danger-color, #fff);}.card-root.variant-warning.svelte-18poi8p {background-color:var(--crayon-card-warning-bg, #ffc107);border-color:var(--crayon-card-warning-border, #ffc107);color:var(--crayon-card-warning-color, #000);}.card-root.variant-info.svelte-18poi8p {background-color:var(--crayon-card-info-bg, #0dcaf0);border-color:var(--crayon-card-info-border, #0dcaf0);color:var(--crayon-card-info-color, #000);}.card-root.variant-light.svelte-18poi8p {background-color:var(--crayon-card-light-bg, #f8f9fa);border-color:var(--crayon-card-light-border, #e9ecef);color:var(--crayon-card-light-color, #212529);}.card-root.variant-dark.svelte-18poi8p {background-color:var(--crayon-card-dark-bg, #212529);border-color:var(--crayon-card-dark-border, #212529);color:var(--crayon-card-dark-color, #fff);}\r
|
|
5
5
|
\r
|
|
6
|
-
/* Text alignment */.card-root.text-start.svelte-18poi8p {text-align:start;}.card-root.text-center.svelte-18poi8p {text-align:center;}.card-root.text-end.svelte-18poi8p {text-align:end;}.card-header.svelte-18poi8p {padding:var(--
|
|
7
|
-
var(--
|
|
6
|
+
/* Text alignment */.card-root.text-start.svelte-18poi8p {text-align:start;}.card-root.text-center.svelte-18poi8p {text-align:center;}.card-root.text-end.svelte-18poi8p {text-align:end;}.card-header.svelte-18poi8p {padding:var(--crayon-card-header-padding-y, 0.5rem) var(--crayon-card-header-padding-x, 1rem);margin-bottom:0;background-color:var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));border-bottom:var(--crayon-card-border-width, 1px) solid\r
|
|
7
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:calc(var(--crayon-card-border-radius, 8px) - 1px) calc(var(--crayon-card-border-radius, 8px) - 1px) 0 0;}.card-root.variant-default.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));}.card-root.variant-primary.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
8
8
|
.card-root.variant-secondary.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
9
9
|
.card-root.variant-success.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
10
10
|
.card-root.variant-danger.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
11
11
|
.card-root.variant-warning.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
12
12
|
.card-root.variant-info.svelte-18poi8p .card-header:where(.svelte-18poi8p),\r
|
|
13
|
-
.card-root.variant-dark.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-bottom-color:rgba(255, 255, 255, 0.2);}.card-header.svelte-18poi8p:not(.has-content) {display:none;}.card-body.svelte-18poi8p {flex:1 1 auto;padding:var(--
|
|
13
|
+
.card-root.variant-dark.svelte-18poi8p .card-header:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-bottom-color:rgba(255, 255, 255, 0.2);}.card-header.svelte-18poi8p:not(.has-content) {display:none;}.card-body.svelte-18poi8p {flex:1 1 auto;padding:var(--crayon-card-body-padding-y, 1rem) var(--crayon-card-body-padding-x, 1rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h1),\r
|
|
14
14
|
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h2),\r
|
|
15
15
|
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h3),\r
|
|
16
16
|
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h4),\r
|
|
17
17
|
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h5),\r
|
|
18
|
-
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h6) {margin-top:0;margin-bottom:var(--
|
|
19
|
-
var(--
|
|
20
|
-
calc(var(--
|
|
18
|
+
.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(h6) {margin-top:0;margin-bottom:var(--crayon-card-title-margin-bottom, 0.5rem);font-size:var(--crayon-card-title-font-size, 1.25rem);font-weight:500;line-height:1.2;}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p) {margin-top:0;margin-bottom:var(--crayon-card-text-margin-bottom, 0.5rem);}.card-body.svelte-18poi8p :where(.svelte-18poi8p)::slotted(p:last-child) {margin-bottom:0;}.card-footer.svelte-18poi8p {padding:var(--crayon-card-footer-padding-y, 0.5rem) var(--crayon-card-footer-padding-x, 1rem);background-color:var(--crayon-card-footer-bg, rgba(0, 0, 0, 0.03));border-top:var(--crayon-card-border-width, 1px) solid\r
|
|
19
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));border-radius:0 0 calc(var(--crayon-card-border-radius, 8px) - 1px)\r
|
|
20
|
+
calc(var(--crayon-card-border-radius, 8px) - 1px);}.card-root.variant-primary.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
21
21
|
.card-root.variant-secondary.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
22
22
|
.card-root.variant-success.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
23
23
|
.card-root.variant-danger.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
24
24
|
.card-root.variant-warning.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
25
25
|
.card-root.variant-info.svelte-18poi8p .card-footer:where(.svelte-18poi8p),\r
|
|
26
26
|
.card-root.variant-dark.svelte-18poi8p .card-footer:where(.svelte-18poi8p) {background-color:rgba(0, 0, 0, 0.2);border-top-color:rgba(255, 255, 255, 0.2);}.card-footer.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.svelte-18poi8p:not(.has-content),\r
|
|
27
|
-
.card-img-bottom-wrapper.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-top-left-radius:var(--
|
|
27
|
+
.card-img-bottom-wrapper.svelte-18poi8p:not(.has-content) {display:none;}.card-img-top-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-top-left-radius:var(--crayon-card-border-radius, 8px);border-top-right-radius:var(--crayon-card-border-radius, 8px);}.card-img-top-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}.card-img-bottom-wrapper.has-content.svelte-18poi8p {overflow:hidden;border-bottom-left-radius:var(--crayon-card-border-radius, 8px);border-bottom-right-radius:var(--crayon-card-border-radius, 8px);}.card-img-bottom-wrapper.has-content.svelte-18poi8p :where(.svelte-18poi8p)::slotted(img) {display:block;width:100%;height:auto;object-fit:cover;}`};function dr(S,o){J(o,!1),$(S,tr);const C=t();let p=k(o,"variant",12,"default"),v=k(o,"textAlign",12,"start"),b=k(o,"extraClass",12,""),n=t(),N=t(!1),A=t(!1),I=t(!1),q=t(!1);function z(){if(!e(n))return;const r=e(n).getRootNode();if(!r)return;const T=r.querySelector('slot[name="header"]'),f=r.querySelector('slot[name="footer"]'),U=r.querySelector('slot[name="image-top"]'),D=r.querySelector('slot[name="image-bottom"]');a(N,(T?.assignedNodes().length??0)>0),a(A,(f?.assignedNodes().length??0)>0),a(I,(U?.assignedNodes().length??0)>0),a(q,(D?.assignedNodes().length??0)>0)}Z(()=>{z();const r=new MutationObserver(z),f=e(n)?.getRootNode()?.host;return f&&r.observe(f,{childList:!0,subtree:!0}),()=>r.disconnect()}),K(()=>(x(p()),x(v()),x(b())),()=>{a(C,`card-root variant-${p()} text-${v()} ${b()}`.trim())}),P();var E={get variant(){return p()},set variant(r){p(r),_()},get textAlign(){return v()},set textAlign(r){v(r),_()},get extraClass(){return b()},set extraClass(r){b(r),_()}};rr();var s=ar(),g=d(s);let j;var H=d(g);i(H,o,"image-top",{},null),c(g);var h=m(g,2);let B;var R=d(h);i(R,o,"header",{},null),c(h);var u=m(h,2),V=d(u);i(V,o,"default",{},null),c(u);var y=m(u,2);let F;var L=d(y);i(L,o,"footer",{},null),c(y);var w=m(y,2);let M;var O=d(w);return i(O,o,"image-bottom",{},null),c(w),c(s),er(s,r=>a(n,r),()=>e(n)),Q(()=>{l(s,1,or(e(C)),"svelte-18poi8p"),j=l(g,1,"card-img-top-wrapper svelte-18poi8p",null,j,{"has-content":e(I)}),B=l(h,1,"card-header svelte-18poi8p",null,B,{"has-content":e(N)}),F=l(y,1,"card-footer svelte-18poi8p",null,F,{"has-content":e(A)}),M=l(w,1,"card-img-bottom-wrapper svelte-18poi8p",null,M,{"has-content":e(q)})}),W(S,s),X(E)}const __Default = (G(dr,{variant:{},textAlign:{},extraClass:{}},["image-top","header","default","footer","image-bottom"],[],{mode:"open"}));
|
|
28
28
|
customElements.define("ui-card", __Default);
|
|
29
29
|
export default __Default;
|
|
@@ -60,63 +60,63 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
60
60
|
min-width: 0;
|
|
61
61
|
word-wrap: break-word;
|
|
62
62
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
63
|
-
font-size: var(--
|
|
63
|
+
font-size: var(--crayon-card-font-size, 14px);
|
|
64
64
|
line-height: 1.5;
|
|
65
|
-
color: var(--
|
|
66
|
-
background-color: var(--
|
|
67
|
-
border: var(--
|
|
68
|
-
var(--
|
|
69
|
-
border-radius: var(--
|
|
70
|
-
box-shadow: var(--
|
|
65
|
+
color: var(--crayon-card-color, #212529);
|
|
66
|
+
background-color: var(--crayon-card-bg, #fff);
|
|
67
|
+
border: var(--crayon-card-border-width, 1px) solid
|
|
68
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));
|
|
69
|
+
border-radius: var(--crayon-card-border-radius, 8px);
|
|
70
|
+
box-shadow: var(--crayon-card-box-shadow, none);
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
/* Variants: default uses CSS vars above; others set bg + border + color */
|
|
74
74
|
.card-root.variant-primary {
|
|
75
|
-
background-color: var(--
|
|
76
|
-
border-color: var(--
|
|
77
|
-
color: var(--
|
|
75
|
+
background-color: var(--crayon-card-primary-bg, #0d6efd);
|
|
76
|
+
border-color: var(--crayon-card-primary-border, #0d6efd);
|
|
77
|
+
color: var(--crayon-card-primary-color, #fff);
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.card-root.variant-secondary {
|
|
81
|
-
background-color: var(--
|
|
82
|
-
border-color: var(--
|
|
83
|
-
color: var(--
|
|
81
|
+
background-color: var(--crayon-card-secondary-bg, #6c757d);
|
|
82
|
+
border-color: var(--crayon-card-secondary-border, #6c757d);
|
|
83
|
+
color: var(--crayon-card-secondary-color, #fff);
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.card-root.variant-success {
|
|
87
|
-
background-color: var(--
|
|
88
|
-
border-color: var(--
|
|
89
|
-
color: var(--
|
|
87
|
+
background-color: var(--crayon-card-success-bg, #198754);
|
|
88
|
+
border-color: var(--crayon-card-success-border, #198754);
|
|
89
|
+
color: var(--crayon-card-success-color, #fff);
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.card-root.variant-danger {
|
|
93
|
-
background-color: var(--
|
|
94
|
-
border-color: var(--
|
|
95
|
-
color: var(--
|
|
93
|
+
background-color: var(--crayon-card-danger-bg, #dc3545);
|
|
94
|
+
border-color: var(--crayon-card-danger-border, #dc3545);
|
|
95
|
+
color: var(--crayon-card-danger-color, #fff);
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
.card-root.variant-warning {
|
|
99
|
-
background-color: var(--
|
|
100
|
-
border-color: var(--
|
|
101
|
-
color: var(--
|
|
99
|
+
background-color: var(--crayon-card-warning-bg, #ffc107);
|
|
100
|
+
border-color: var(--crayon-card-warning-border, #ffc107);
|
|
101
|
+
color: var(--crayon-card-warning-color, #000);
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.card-root.variant-info {
|
|
105
|
-
background-color: var(--
|
|
106
|
-
border-color: var(--
|
|
107
|
-
color: var(--
|
|
105
|
+
background-color: var(--crayon-card-info-bg, #0dcaf0);
|
|
106
|
+
border-color: var(--crayon-card-info-border, #0dcaf0);
|
|
107
|
+
color: var(--crayon-card-info-color, #000);
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
.card-root.variant-light {
|
|
111
|
-
background-color: var(--
|
|
112
|
-
border-color: var(--
|
|
113
|
-
color: var(--
|
|
111
|
+
background-color: var(--crayon-card-light-bg, #f8f9fa);
|
|
112
|
+
border-color: var(--crayon-card-light-border, #e9ecef);
|
|
113
|
+
color: var(--crayon-card-light-color, #212529);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.card-root.variant-dark {
|
|
117
|
-
background-color: var(--
|
|
118
|
-
border-color: var(--
|
|
119
|
-
color: var(--
|
|
117
|
+
background-color: var(--crayon-card-dark-bg, #212529);
|
|
118
|
+
border-color: var(--crayon-card-dark-border, #212529);
|
|
119
|
+
color: var(--crayon-card-dark-color, #fff);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
/* Text alignment */
|
|
@@ -133,16 +133,16 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
.card-header {
|
|
136
|
-
padding: var(--
|
|
136
|
+
padding: var(--crayon-card-header-padding-y, 0.5rem) var(--crayon-card-header-padding-x, 1rem);
|
|
137
137
|
margin-bottom: 0;
|
|
138
|
-
background-color: var(--
|
|
139
|
-
border-bottom: var(--
|
|
140
|
-
var(--
|
|
141
|
-
border-radius: calc(var(--
|
|
138
|
+
background-color: var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));
|
|
139
|
+
border-bottom: var(--crayon-card-border-width, 1px) solid
|
|
140
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));
|
|
141
|
+
border-radius: calc(var(--crayon-card-border-radius, 8px) - 1px) calc(var(--crayon-card-border-radius, 8px) - 1px) 0 0;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.card-root.variant-default .card-header {
|
|
145
|
-
background-color: var(--
|
|
145
|
+
background-color: var(--crayon-card-header-bg, rgba(0, 0, 0, 0.03));
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
.card-root.variant-primary .card-header,
|
|
@@ -162,7 +162,7 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
162
162
|
|
|
163
163
|
.card-body {
|
|
164
164
|
flex: 1 1 auto;
|
|
165
|
-
padding: var(--
|
|
165
|
+
padding: var(--crayon-card-body-padding-y, 1rem) var(--crayon-card-body-padding-x, 1rem);
|
|
166
166
|
}
|
|
167
167
|
|
|
168
168
|
.card-body ::slotted(h1),
|
|
@@ -172,15 +172,15 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
172
172
|
.card-body ::slotted(h5),
|
|
173
173
|
.card-body ::slotted(h6) {
|
|
174
174
|
margin-top: 0;
|
|
175
|
-
margin-bottom: var(--
|
|
176
|
-
font-size: var(--
|
|
175
|
+
margin-bottom: var(--crayon-card-title-margin-bottom, 0.5rem);
|
|
176
|
+
font-size: var(--crayon-card-title-font-size, 1.25rem);
|
|
177
177
|
font-weight: 500;
|
|
178
178
|
line-height: 1.2;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
.card-body ::slotted(p) {
|
|
182
182
|
margin-top: 0;
|
|
183
|
-
margin-bottom: var(--
|
|
183
|
+
margin-bottom: var(--crayon-card-text-margin-bottom, 0.5rem);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
186
|
.card-body ::slotted(p:last-child) {
|
|
@@ -188,12 +188,12 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
.card-footer {
|
|
191
|
-
padding: var(--
|
|
192
|
-
background-color: var(--
|
|
193
|
-
border-top: var(--
|
|
194
|
-
var(--
|
|
195
|
-
border-radius: 0 0 calc(var(--
|
|
196
|
-
calc(var(--
|
|
191
|
+
padding: var(--crayon-card-footer-padding-y, 0.5rem) var(--crayon-card-footer-padding-x, 1rem);
|
|
192
|
+
background-color: var(--crayon-card-footer-bg, rgba(0, 0, 0, 0.03));
|
|
193
|
+
border-top: var(--crayon-card-border-width, 1px) solid
|
|
194
|
+
var(--crayon-card-border-color, rgba(0, 0, 0, 0.125));
|
|
195
|
+
border-radius: 0 0 calc(var(--crayon-card-border-radius, 8px) - 1px)
|
|
196
|
+
calc(var(--crayon-card-border-radius, 8px) - 1px);
|
|
197
197
|
}
|
|
198
198
|
|
|
199
199
|
.card-root.variant-primary .card-footer,
|
|
@@ -218,8 +218,8 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
218
218
|
|
|
219
219
|
.card-img-top-wrapper.has-content {
|
|
220
220
|
overflow: hidden;
|
|
221
|
-
border-top-left-radius: var(--
|
|
222
|
-
border-top-right-radius: var(--
|
|
221
|
+
border-top-left-radius: var(--crayon-card-border-radius, 8px);
|
|
222
|
+
border-top-right-radius: var(--crayon-card-border-radius, 8px);
|
|
223
223
|
}
|
|
224
224
|
|
|
225
225
|
.card-img-top-wrapper.has-content ::slotted(img) {
|
|
@@ -231,8 +231,8 @@ $: rootClass = `card-root variant-${variant} text-${textAlign} ${extraClass}`.tr
|
|
|
231
231
|
|
|
232
232
|
.card-img-bottom-wrapper.has-content {
|
|
233
233
|
overflow: hidden;
|
|
234
|
-
border-bottom-left-radius: var(--
|
|
235
|
-
border-bottom-right-radius: var(--
|
|
234
|
+
border-bottom-left-radius: var(--crayon-card-border-radius, 8px);
|
|
235
|
+
border-bottom-right-radius: var(--crayon-card-border-radius, 8px);
|
|
236
236
|
}
|
|
237
237
|
|
|
238
238
|
.card-img-bottom-wrapper.has-content ::slotted(img) {
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import{c as q,p as G,l as
|
|
1
|
+
import{c as q,p as G,l as f,d as C,a as N,e as O,t as P,f as U,i as A,j as J,g as r,G as K,k as Q,b as D,n as a,m as u,s as x,y as T,r as S}from"../../assets/custom-element-BNCemaCE.js";import{o as V}from"../../assets/index-client-BDYmxQqF.js";import{s as W}from"../../assets/slot-DvkFfIlK.js";import{a as X,i as Y,s as Z}from"../../assets/lifecycle-8krACzSO.js";import{r as $,s as m,a as ee,d as re}from"../../assets/attributes-D-TnEoSs.js";import{b as oe}from"../../assets/this-BafLbyG5.js";import{p as t}from"../../assets/props-CFmog5h1.js";var ce=Q('<label><span class="checkbox-control svelte-wckrr7"><input type="checkbox" class="svelte-wckrr7"/> <span class="checkbox-box svelte-wckrr7" aria-hidden="true"></span></span> <span class="checkbox-label svelte-wckrr7"><!></span></label>');const ae={hash:"svelte-wckrr7",code:`.checkbox-root.svelte-wckrr7 {display:inline-flex;align-items:center;gap:0.5rem;font-family:system-ui,\r
|
|
2
2
|
-apple-system,\r
|
|
3
3
|
BlinkMacSystemFont,\r
|
|
4
4
|
"Segoe UI",\r
|
|
5
|
-
sans-serif;font-size:14px;line-height:1.3;color:var(--
|
|
6
|
-
/* Prevent vertical shift when state or focus changes */min-height:var(--
|
|
7
|
-
/* Fixed size so layout doesn’t shift when checkmark appears or on focus */width:var(--
|
|
5
|
+
sans-serif;font-size:14px;line-height:1.3;color:var(--crayon-checkbox-label-color, #111827);cursor:pointer;\r
|
|
6
|
+
/* Prevent vertical shift when state or focus changes */min-height:var(--crayon-checkbox-size, 22px);}.checkbox-control.svelte-wckrr7 {position:relative;display:inline-flex;align-items:center;justify-content:center;\r
|
|
7
|
+
/* Fixed size so layout doesn’t shift when checkmark appears or on focus */width:var(--crayon-checkbox-size, 22px);height:var(--crayon-checkbox-size, 22px);flex-shrink:0;}.checkbox-control.svelte-wckrr7 input:where(.svelte-wckrr7) {position:absolute;inset:0;margin:0;padding:0;opacity:0;cursor:inherit;outline:none;}.checkbox-box.svelte-wckrr7 {width:var(--crayon-checkbox-size, 22px);height:var(--crayon-checkbox-size, 22px);min-width:var(--crayon-checkbox-size, 22px);min-height:var(--crayon-checkbox-size, 22px);flex-shrink:0;border-radius:var(--crayon-checkbox-radius, 4px);border:2px solid var(--crayon-checkbox-border-color, #111111);background-color:var(--crayon-checkbox-bg, transparent);box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:background-color 0.15s ease,\r
|
|
8
8
|
border-color 0.15s ease,\r
|
|
9
9
|
box-shadow 0.15s ease;}\r
|
|
10
10
|
\r
|
|
11
11
|
/* Out of flow so checkmark/indeterminate never affect layout */.checkbox-box.svelte-wckrr7::before {content:"";position:absolute;inset:0;margin:auto;opacity:0;transition:opacity 0.1s ease,\r
|
|
12
12
|
transform 0.1s ease;}\r
|
|
13
13
|
\r
|
|
14
|
-
/* Checked: solid purple square with checkmark */.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--
|
|
14
|
+
/* Checked: solid purple square with checkmark */.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));border-color:var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));}.checkbox-root.is-checked.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:26%;height:50%;border-right:3px solid var(--crayon-checkbox-check-color, #ffffff);border-bottom:3px solid var(--crayon-checkbox-check-color, #ffffff);transform:rotate(45deg) translate(-8%, -8%);transform-origin:center center;opacity:1;}\r
|
|
15
15
|
\r
|
|
16
|
-
/* Indeterminate: solid purple with dash */.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--
|
|
16
|
+
/* Indeterminate: solid purple with dash */.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {background-color:var(--crayon-checkbox-checked-bg, var(--crayon-primary, #474bff));border-color:var(--crayon-checkbox-checked-border, var(--crayon-primary, #474bff));}.checkbox-root.is-indeterminate.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7)::before {width:70%;height:0;border-bottom:3px solid var(--crayon-checkbox-check-color, #ffffff);opacity:1;transform:none;}\r
|
|
17
17
|
\r
|
|
18
18
|
/* Hover + focus ring */.checkbox-root.svelte-wckrr7:not(.is-disabled)\r
|
|
19
19
|
.checkbox-control:where(.svelte-wckrr7)\r
|
|
20
20
|
input:where(.svelte-wckrr7):focus-visible\r
|
|
21
|
-
+ .checkbox-box:where(.svelte-wckrr7) {box-shadow:0 0 0 3px var(--
|
|
21
|
+
+ .checkbox-box:where(.svelte-wckrr7) {box-shadow:0 0 0 3px var(--crayon-checkbox-focus-ring, rgba(71, 75, 255, 0.45));}.checkbox-root.is-disabled.svelte-wckrr7 {cursor:not-allowed;color:var(--crayon-checkbox-label-disabled, #9ca3af);}.checkbox-root.is-disabled.svelte-wckrr7 .checkbox-box:where(.svelte-wckrr7) {border-color:var(--crayon-checkbox-border-disabled, #bdbdbc);background-color:var(--crayon-checkbox-bg-disabled, #e5e7eb);}.checkbox-label.svelte-wckrr7:empty {display:none;}`};function te(E,o){G(o,!1),X(E,ae);const d=u(),v=u(),s=u();let i=t(o,"checked",12,!1),h=t(o,"disabled",12,!1),l=t(o,"indeterminate",12,!1),p=t(o,"name",12,void 0),y=t(o,"value",12,void 0),g=t(o,"ariaLabel",12,void 0),w=t(o,"ariaDescribedby",12,void 0),_=t(o,"onchange",12,void 0);function z(e){return typeof e=="boolean"?e:e==null?!1:String(e).toLowerCase()==="true"}let b=u();function F(e){const n=e.getRootNode();return n instanceof ShadowRoot?n.host:null}function L(){r(b)&&K(b,r(b).indeterminate=r(s))}V(L);function H(e){const n=e.target;i(n.checked),r(s)&&(l(!1),L());const I={checked:n.checked,indeterminate:!1};_()?.(I),F(n)?.dispatchEvent(new CustomEvent("change",{detail:I,bubbles:!0}))}f(()=>C(i()),()=>{x(d,z(i()))}),f(()=>C(h()),()=>{x(v,z(h()))}),f(()=>C(l()),()=>{x(s,z(l()))}),f(()=>{},()=>{L()}),N();var M={get checked(){return i()},set checked(e){i(e),a()},get disabled(){return h()},set disabled(e){h(e),a()},get indeterminate(){return l()},set indeterminate(e){l(e),a()},get name(){return p()},set name(e){p(e),a()},get value(){return y()},set value(e){y(e),a()},get ariaLabel(){return g()},set ariaLabel(e){g(e),a()},get ariaDescribedby(){return w()},set ariaDescribedby(e){w(e),a()},get onchange(){return _()},set onchange(e){_(e),a()}};Y();var k=ce(),B=D(k),c=D(B);$(c),oe(c,e=>x(b,e),()=>r(b)),T(2),S(B);var j=O(B,2),R=D(j);return W(R,o,"default",{},null),S(j),S(k),P(()=>{Z(k,1,`checkbox-root ${r(d)?"is-checked":""} ${r(s)?"is-indeterminate":""} ${r(v)?"is-disabled":""}`,"svelte-wckrr7"),m(c,"name",p()),ee(c,y()),re(c,r(d)),c.disabled=r(v),m(c,"aria-label",g()),m(c,"aria-describedby",w()),m(c,"aria-checked",r(s)?"mixed":r(d)?"true":"false")}),U("change",c,H),A(E,k),J(M)}const __Default = (q(te,{checked:{},disabled:{},indeterminate:{},name:{},value:{},ariaLabel:{},ariaDescribedby:{},onchange:{}},["default"],[],{mode:"open"}));
|
|
22
22
|
customElements.define("ui-checkbox", __Default);
|
|
23
23
|
export default __Default;
|