@krollins/blueprint 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.js +393 -0
- package/dist/components/accordion.js.map +1 -0
- package/dist/components/alert.js +213 -0
- package/dist/components/alert.js.map +1 -0
- package/dist/components/avatar.js +237 -0
- package/dist/components/avatar.js.map +1 -0
- package/dist/components/badge.js +144 -0
- package/dist/components/badge.js.map +1 -0
- package/dist/components/breadcrumb.js +481 -0
- package/dist/components/breadcrumb.js.map +1 -0
- package/dist/components/button.js +192 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/card.js +223 -0
- package/dist/components/card.js.map +1 -0
- package/dist/components/checkbox.js +337 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/color-picker.js +1660 -0
- package/dist/components/color-picker.js.map +1 -0
- package/dist/components/combobox.js +595 -0
- package/dist/components/combobox.js.map +1 -0
- package/dist/components/date-picker.js +726 -0
- package/dist/components/date-picker.js.map +1 -0
- package/dist/components/divider.js +214 -0
- package/dist/components/divider.js.map +1 -0
- package/dist/components/drawer.js +568 -0
- package/dist/components/drawer.js.map +1 -0
- package/dist/components/dropdown.js +377 -0
- package/dist/components/dropdown.js.map +1 -0
- package/dist/components/file-upload.js +669 -0
- package/dist/components/file-upload.js.map +1 -0
- package/dist/components/heading.js +161 -0
- package/dist/components/heading.js.map +1 -0
- package/dist/components/icon.js +599 -0
- package/dist/components/icon.js.map +1 -0
- package/dist/components/input.js +363 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/link.js +178 -0
- package/dist/components/link.js.map +1 -0
- package/dist/components/menu.js +331 -0
- package/dist/components/menu.js.map +1 -0
- package/dist/components/modal.js +317 -0
- package/dist/components/modal.js.map +1 -0
- package/dist/components/multi-select.js +642 -0
- package/dist/components/multi-select.js.map +1 -0
- package/dist/components/notification.js +429 -0
- package/dist/components/notification.js.map +1 -0
- package/dist/components/number-input.js +556 -0
- package/dist/components/number-input.js.map +1 -0
- package/dist/components/pagination.js +320 -0
- package/dist/components/pagination.js.map +1 -0
- package/dist/components/popover.js +597 -0
- package/dist/components/popover.js.map +1 -0
- package/dist/components/progress.js +219 -0
- package/dist/components/progress.js.map +1 -0
- package/dist/components/radio.js +321 -0
- package/dist/components/radio.js.map +1 -0
- package/dist/components/select.js +498 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/skeleton.js +240 -0
- package/dist/components/skeleton.js.map +1 -0
- package/dist/components/slider.js +9 -0
- package/dist/components/slider.js.map +1 -0
- package/dist/components/spinner.js +133 -0
- package/dist/components/spinner.js.map +1 -0
- package/dist/components/stepper.js +812 -0
- package/dist/components/stepper.js.map +1 -0
- package/dist/components/switch.js +380 -0
- package/dist/components/switch.js.map +1 -0
- package/dist/components/table.js +642 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.js +547 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/tag.js +291 -0
- package/dist/components/tag.js.map +1 -0
- package/dist/components/text.js +278 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/textarea.js +380 -0
- package/dist/components/textarea.js.map +1 -0
- package/dist/components/time-picker.js +457 -0
- package/dist/components/time-picker.js.map +1 -0
- package/dist/components/tooltip.js +239 -0
- package/dist/components/tooltip.js.map +1 -0
- package/dist/components/tree.js +582 -0
- package/dist/components/tree.js.map +1 -0
- package/dist/index.js +93 -17799
- package/dist/index.js.map +1 -1
- package/dist/shared/boolean-converter-XDGfS9LC.js +12 -0
- package/dist/shared/boolean-converter-XDGfS9LC.js.map +1 -0
- package/dist/shared/debounce-BckY30Sf.js +23 -0
- package/dist/shared/debounce-BckY30Sf.js.map +1 -0
- package/dist/shared/memoize-DlOFy-92.js +16 -0
- package/dist/shared/memoize-DlOFy-92.js.map +1 -0
- package/dist/shared/slider-BNt5TITl.js +484 -0
- package/dist/shared/slider-BNt5TITl.js.map +1 -0
- package/package.json +49 -3
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
import { css as p, LitElement as d, html as l } from "lit";
|
|
2
|
+
import { query as k, property as r, state as u, customElement as m } from "lit/decorators.js";
|
|
3
|
+
import { ifDefined as x } from "lit/directives/if-defined.js";
|
|
4
|
+
import { live as b } from "lit/directives/live.js";
|
|
5
|
+
const v = p`
|
|
6
|
+
/* Base styles */
|
|
7
|
+
:host {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.checkbox {
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
gap: var(--bp-spacing-sm);
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
font-family: var(--bp-font-family);
|
|
17
|
+
font-size: var(--bp-font-size-base);
|
|
18
|
+
color: var(--bp-color-text);
|
|
19
|
+
user-select: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.checkbox__input {
|
|
23
|
+
position: absolute;
|
|
24
|
+
opacity: 0;
|
|
25
|
+
width: 0;
|
|
26
|
+
height: 0;
|
|
27
|
+
margin: 0;
|
|
28
|
+
padding: 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.checkbox__checkmark {
|
|
32
|
+
position: relative;
|
|
33
|
+
display: inline-flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
border: var(--bp-border-width) solid var(--bp-color-border-strong);
|
|
38
|
+
border-radius: var(--bp-border-radius-sm);
|
|
39
|
+
background-color: var(--bp-color-surface);
|
|
40
|
+
transition: all var(--bp-transition-fast);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.checkbox__checkmark svg {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
color: var(--bp-color-text-inverse);
|
|
47
|
+
opacity: 0;
|
|
48
|
+
transform: scale(0);
|
|
49
|
+
transition:
|
|
50
|
+
opacity var(--bp-duration-fast) var(--bp-ease-out),
|
|
51
|
+
transform var(--bp-duration-fast) var(--bp-ease-bounce);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.checkbox__label {
|
|
55
|
+
line-height: var(--bp-line-height-normal);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Sizes */
|
|
59
|
+
.checkbox--sm .checkbox__checkmark {
|
|
60
|
+
width: var(--bp-spacing-4);
|
|
61
|
+
height: var(--bp-spacing-4);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.checkbox--sm .checkbox__label {
|
|
65
|
+
font-size: var(--bp-font-size-sm);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.checkbox--md .checkbox__checkmark {
|
|
69
|
+
width: var(--bp-spacing-5);
|
|
70
|
+
height: var(--bp-spacing-5);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.checkbox--md .checkbox__label {
|
|
74
|
+
font-size: var(--bp-font-size-base);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.checkbox--lg .checkbox__checkmark {
|
|
78
|
+
width: var(--bp-spacing-6);
|
|
79
|
+
height: var(--bp-spacing-6);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.checkbox--lg .checkbox__label {
|
|
83
|
+
font-size: var(--bp-font-size-lg);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* States - Checked */
|
|
87
|
+
.checkbox--checked .checkbox__checkmark {
|
|
88
|
+
background-color: var(--bp-color-primary);
|
|
89
|
+
border-color: var(--bp-color-primary);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.checkbox--checked .checkbox__checkmark svg {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
transform: scale(1);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* States - Indeterminate */
|
|
98
|
+
.checkbox--indeterminate .checkbox__checkmark {
|
|
99
|
+
background-color: var(--bp-color-primary);
|
|
100
|
+
border-color: var(--bp-color-primary);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.checkbox--indeterminate .checkbox__checkmark svg {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
transform: scale(1);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* States - Hover */
|
|
109
|
+
.checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(
|
|
110
|
+
.checkbox--indeterminate
|
|
111
|
+
)
|
|
112
|
+
.checkbox__checkmark {
|
|
113
|
+
border-color: var(--bp-color-primary);
|
|
114
|
+
background-color: color-mix(
|
|
115
|
+
in srgb,
|
|
116
|
+
var(--bp-color-primary) 8%,
|
|
117
|
+
transparent
|
|
118
|
+
);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,
|
|
122
|
+
.checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {
|
|
123
|
+
background-color: var(--bp-color-primary-hover);
|
|
124
|
+
border-color: var(--bp-color-primary-hover);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* States - Active */
|
|
128
|
+
.checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {
|
|
129
|
+
transform: scale(0.95);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* States - Focused */
|
|
133
|
+
.checkbox--focused .checkbox__checkmark {
|
|
134
|
+
outline: var(--bp-focus-width) solid var(--bp-color-focus);
|
|
135
|
+
outline-offset: var(--bp-focus-offset);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* States - Disabled */
|
|
139
|
+
.checkbox--disabled {
|
|
140
|
+
cursor: not-allowed;
|
|
141
|
+
opacity: 0.5;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* States - Error */
|
|
145
|
+
.checkbox--error .checkbox__checkmark {
|
|
146
|
+
border-color: var(--bp-color-error);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.checkbox--error.checkbox--checked .checkbox__checkmark,
|
|
150
|
+
.checkbox--error.checkbox--indeterminate .checkbox__checkmark {
|
|
151
|
+
background-color: var(--bp-color-error);
|
|
152
|
+
border-color: var(--bp-color-error);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* Touch target size: ensure 44x44px minimum on touch devices */
|
|
156
|
+
@media (pointer: coarse) {
|
|
157
|
+
.checkbox {
|
|
158
|
+
min-height: 44px;
|
|
159
|
+
padding: var(--bp-spacing-xs) 0;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.checkbox__checkmark {
|
|
163
|
+
position: relative;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
/* Expand touch target with pseudo-element */
|
|
167
|
+
.checkbox__checkmark::before {
|
|
168
|
+
content: '';
|
|
169
|
+
position: absolute;
|
|
170
|
+
top: 50%;
|
|
171
|
+
left: 50%;
|
|
172
|
+
transform: translate(-50%, -50%);
|
|
173
|
+
width: 44px;
|
|
174
|
+
height: 44px;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
`;
|
|
178
|
+
var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (t, a, s, i) => {
|
|
179
|
+
for (var o = i > 1 ? void 0 : i ? _(a, s) : a, h = t.length - 1, n; h >= 0; h--)
|
|
180
|
+
(n = t[h]) && (o = (i ? n(a, s, o) : n(o)) || o);
|
|
181
|
+
return i && o && f(a, s, o), o;
|
|
182
|
+
};
|
|
183
|
+
let e = class extends d {
|
|
184
|
+
constructor() {
|
|
185
|
+
super(), this.hasFocus = !1, this.internals = null, this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.size = "md", this.error = !1, typeof this.attachInternals == "function" && (this.internals = this.attachInternals());
|
|
186
|
+
}
|
|
187
|
+
connectedCallback() {
|
|
188
|
+
super.connectedCallback(), this.updateFormValue();
|
|
189
|
+
}
|
|
190
|
+
updated(t) {
|
|
191
|
+
t.has("checked") && (this.updateFormValue(), this.input && (this.input.checked = this.checked)), t.has("indeterminate") && this.input && (this.input.indeterminate = this.indeterminate);
|
|
192
|
+
}
|
|
193
|
+
updateFormValue() {
|
|
194
|
+
const t = this.checked ? this.value : null;
|
|
195
|
+
this.internals?.setFormValue(t);
|
|
196
|
+
}
|
|
197
|
+
handleChange(t) {
|
|
198
|
+
const a = t.target;
|
|
199
|
+
this.checked = a.checked, this.indeterminate = !1, this.dispatchEvent(
|
|
200
|
+
new CustomEvent("bp-change", {
|
|
201
|
+
detail: { checked: this.checked },
|
|
202
|
+
bubbles: !0,
|
|
203
|
+
composed: !0
|
|
204
|
+
})
|
|
205
|
+
);
|
|
206
|
+
}
|
|
207
|
+
handleFocus() {
|
|
208
|
+
this.hasFocus = !0, this.dispatchEvent(
|
|
209
|
+
new CustomEvent("bp-focus", {
|
|
210
|
+
bubbles: !0,
|
|
211
|
+
composed: !0
|
|
212
|
+
})
|
|
213
|
+
);
|
|
214
|
+
}
|
|
215
|
+
handleBlur() {
|
|
216
|
+
this.hasFocus = !1, this.dispatchEvent(
|
|
217
|
+
new CustomEvent("bp-blur", {
|
|
218
|
+
bubbles: !0,
|
|
219
|
+
composed: !0
|
|
220
|
+
})
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
/**
|
|
224
|
+
* Sets focus on the checkbox.
|
|
225
|
+
*/
|
|
226
|
+
// eslint-disable-next-line no-undef
|
|
227
|
+
focus(t) {
|
|
228
|
+
this.input?.focus(t);
|
|
229
|
+
}
|
|
230
|
+
/**
|
|
231
|
+
* Removes focus from the checkbox.
|
|
232
|
+
*/
|
|
233
|
+
blur() {
|
|
234
|
+
this.input?.blur();
|
|
235
|
+
}
|
|
236
|
+
render() {
|
|
237
|
+
const t = [
|
|
238
|
+
"checkbox",
|
|
239
|
+
`checkbox--${this.size}`,
|
|
240
|
+
this.checked ? "checkbox--checked" : "",
|
|
241
|
+
this.indeterminate ? "checkbox--indeterminate" : "",
|
|
242
|
+
this.disabled ? "checkbox--disabled" : "",
|
|
243
|
+
this.error ? "checkbox--error" : "",
|
|
244
|
+
this.hasFocus ? "checkbox--focused" : ""
|
|
245
|
+
].filter(Boolean).join(" ");
|
|
246
|
+
return l`
|
|
247
|
+
<label part="checkbox" class="${t}">
|
|
248
|
+
<input
|
|
249
|
+
part="input"
|
|
250
|
+
type="checkbox"
|
|
251
|
+
class="checkbox__input"
|
|
252
|
+
.checked=${b(this.checked)}
|
|
253
|
+
.indeterminate=${b(this.indeterminate)}
|
|
254
|
+
?disabled=${this.disabled}
|
|
255
|
+
?required=${this.required}
|
|
256
|
+
name=${x(this.name || void 0)}
|
|
257
|
+
value=${this.value}
|
|
258
|
+
aria-checked=${this.indeterminate ? "mixed" : this.checked}
|
|
259
|
+
@change=${this.handleChange}
|
|
260
|
+
@focus=${this.handleFocus}
|
|
261
|
+
@blur=${this.handleBlur}
|
|
262
|
+
/>
|
|
263
|
+
<span part="checkmark" class="checkbox__checkmark">
|
|
264
|
+
${this.indeterminate ? l`<svg
|
|
265
|
+
viewBox="0 0 16 16"
|
|
266
|
+
fill="none"
|
|
267
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
268
|
+
>
|
|
269
|
+
<line
|
|
270
|
+
x1="4"
|
|
271
|
+
y1="8"
|
|
272
|
+
x2="12"
|
|
273
|
+
y2="8"
|
|
274
|
+
stroke="currentColor"
|
|
275
|
+
stroke-width="2"
|
|
276
|
+
stroke-linecap="round"
|
|
277
|
+
/>
|
|
278
|
+
</svg>` : l`<svg
|
|
279
|
+
viewBox="0 0 16 16"
|
|
280
|
+
fill="none"
|
|
281
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
282
|
+
>
|
|
283
|
+
<path
|
|
284
|
+
d="M13 4L6 11L3 8"
|
|
285
|
+
stroke="currentColor"
|
|
286
|
+
stroke-width="2"
|
|
287
|
+
stroke-linecap="round"
|
|
288
|
+
stroke-linejoin="round"
|
|
289
|
+
/>
|
|
290
|
+
</svg>`}
|
|
291
|
+
</span>
|
|
292
|
+
<span part="label" class="checkbox__label">
|
|
293
|
+
<slot></slot>
|
|
294
|
+
</span>
|
|
295
|
+
</label>
|
|
296
|
+
`;
|
|
297
|
+
}
|
|
298
|
+
};
|
|
299
|
+
e.styles = [v];
|
|
300
|
+
e.formAssociated = !0;
|
|
301
|
+
c([
|
|
302
|
+
k('input[type="checkbox"]')
|
|
303
|
+
], e.prototype, "input", 2);
|
|
304
|
+
c([
|
|
305
|
+
r({ type: Boolean, reflect: !0 })
|
|
306
|
+
], e.prototype, "checked", 2);
|
|
307
|
+
c([
|
|
308
|
+
r({ type: Boolean, reflect: !0 })
|
|
309
|
+
], e.prototype, "indeterminate", 2);
|
|
310
|
+
c([
|
|
311
|
+
r({ type: Boolean, reflect: !0 })
|
|
312
|
+
], e.prototype, "disabled", 2);
|
|
313
|
+
c([
|
|
314
|
+
r({ type: Boolean, reflect: !0 })
|
|
315
|
+
], e.prototype, "required", 2);
|
|
316
|
+
c([
|
|
317
|
+
r({ type: String, reflect: !0 })
|
|
318
|
+
], e.prototype, "name", 2);
|
|
319
|
+
c([
|
|
320
|
+
r({ type: String })
|
|
321
|
+
], e.prototype, "value", 2);
|
|
322
|
+
c([
|
|
323
|
+
r({ type: String, reflect: !0 })
|
|
324
|
+
], e.prototype, "size", 2);
|
|
325
|
+
c([
|
|
326
|
+
r({ type: Boolean, reflect: !0 })
|
|
327
|
+
], e.prototype, "error", 2);
|
|
328
|
+
c([
|
|
329
|
+
u()
|
|
330
|
+
], e.prototype, "hasFocus", 2);
|
|
331
|
+
e = c([
|
|
332
|
+
m("bp-checkbox")
|
|
333
|
+
], e);
|
|
334
|
+
export {
|
|
335
|
+
e as BpCheckbox
|
|
336
|
+
};
|
|
337
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.js","sources":["../../source/components/checkbox/checkbox.style.ts","../../source/components/checkbox/checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const checkboxStyles = css`\n /* Base styles */\n :host {\n display: inline-block;\n }\n\n .checkbox {\n display: inline-flex;\n align-items: center;\n gap: var(--bp-spacing-sm);\n cursor: pointer;\n font-family: var(--bp-font-family);\n font-size: var(--bp-font-size-base);\n color: var(--bp-color-text);\n user-select: none;\n }\n\n .checkbox__input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n margin: 0;\n padding: 0;\n }\n\n .checkbox__checkmark {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: var(--bp-border-width) solid var(--bp-color-border-strong);\n border-radius: var(--bp-border-radius-sm);\n background-color: var(--bp-color-surface);\n transition: all var(--bp-transition-fast);\n }\n\n .checkbox__checkmark svg {\n width: 100%;\n height: 100%;\n color: var(--bp-color-text-inverse);\n opacity: 0;\n transform: scale(0);\n transition:\n opacity var(--bp-duration-fast) var(--bp-ease-out),\n transform var(--bp-duration-fast) var(--bp-ease-bounce);\n }\n\n .checkbox__label {\n line-height: var(--bp-line-height-normal);\n }\n\n /* Sizes */\n .checkbox--sm .checkbox__checkmark {\n width: var(--bp-spacing-4);\n height: var(--bp-spacing-4);\n }\n\n .checkbox--sm .checkbox__label {\n font-size: var(--bp-font-size-sm);\n }\n\n .checkbox--md .checkbox__checkmark {\n width: var(--bp-spacing-5);\n height: var(--bp-spacing-5);\n }\n\n .checkbox--md .checkbox__label {\n font-size: var(--bp-font-size-base);\n }\n\n .checkbox--lg .checkbox__checkmark {\n width: var(--bp-spacing-6);\n height: var(--bp-spacing-6);\n }\n\n .checkbox--lg .checkbox__label {\n font-size: var(--bp-font-size-lg);\n }\n\n /* States - Checked */\n .checkbox--checked .checkbox__checkmark {\n background-color: var(--bp-color-primary);\n border-color: var(--bp-color-primary);\n }\n\n .checkbox--checked .checkbox__checkmark svg {\n opacity: 1;\n transform: scale(1);\n }\n\n /* States - Indeterminate */\n .checkbox--indeterminate .checkbox__checkmark {\n background-color: var(--bp-color-primary);\n border-color: var(--bp-color-primary);\n }\n\n .checkbox--indeterminate .checkbox__checkmark svg {\n opacity: 1;\n transform: scale(1);\n }\n\n /* States - Hover */\n .checkbox:hover:not(.checkbox--disabled):not(.checkbox--checked):not(\n .checkbox--indeterminate\n )\n .checkbox__checkmark {\n border-color: var(--bp-color-primary);\n background-color: color-mix(\n in srgb,\n var(--bp-color-primary) 8%,\n transparent\n );\n }\n\n .checkbox--checked:hover:not(.checkbox--disabled) .checkbox__checkmark,\n .checkbox--indeterminate:hover:not(.checkbox--disabled) .checkbox__checkmark {\n background-color: var(--bp-color-primary-hover);\n border-color: var(--bp-color-primary-hover);\n }\n\n /* States - Active */\n .checkbox:active:not(.checkbox--disabled) .checkbox__checkmark {\n transform: scale(0.95);\n }\n\n /* States - Focused */\n .checkbox--focused .checkbox__checkmark {\n outline: var(--bp-focus-width) solid var(--bp-color-focus);\n outline-offset: var(--bp-focus-offset);\n }\n\n /* States - Disabled */\n .checkbox--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* States - Error */\n .checkbox--error .checkbox__checkmark {\n border-color: var(--bp-color-error);\n }\n\n .checkbox--error.checkbox--checked .checkbox__checkmark,\n .checkbox--error.checkbox--indeterminate .checkbox__checkmark {\n background-color: var(--bp-color-error);\n border-color: var(--bp-color-error);\n }\n\n /* Touch target size: ensure 44x44px minimum on touch devices */\n @media (pointer: coarse) {\n .checkbox {\n min-height: 44px;\n padding: var(--bp-spacing-xs) 0;\n }\n\n .checkbox__checkmark {\n position: relative;\n }\n\n /* Expand touch target with pseudo-element */\n .checkbox__checkmark::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 44px;\n height: 44px;\n }\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { checkboxStyles } from './checkbox.style.js';\n\nexport type CheckboxSize = 'sm' | 'md' | 'lg';\n\n/**\n * A form checkbox input with label support and multiple states.\n *\n * @element bp-checkbox\n *\n * @property {boolean} checked - Whether the checkbox is checked\n * @property {boolean} indeterminate - Indeterminate state (partial selection)\n * @property {boolean} disabled - Whether the checkbox is disabled\n * @property {boolean} required - Whether the checkbox is required\n * @property {string} name - The name for form submission\n * @property {string} value - The value for form submission\n * @property {CheckboxSize} size - The size of the checkbox\n * @property {boolean} error - Whether the checkbox has an error state\n *\n * @slot - The checkbox label text\n *\n * @fires bp-change - Fired when the checked state changes\n * @fires bp-focus - Fired when the checkbox receives focus\n * @fires bp-blur - Fired when the checkbox loses focus\n *\n * @csspart checkbox - The checkbox container\n * @csspart input - The native checkbox input element\n * @csspart checkmark - The visual checkmark indicator\n * @csspart label - The label text container\n */\n@customElement('bp-checkbox')\nexport class BpCheckbox extends LitElement {\n @query('input[type=\"checkbox\"]') declare input: HTMLInputElement;\n\n /**\n * Whether the checkbox is checked.\n */\n @property({ type: Boolean, reflect: true }) declare checked: boolean;\n\n /**\n * Whether the checkbox is in an indeterminate state.\n * This is a visual-only state for \"partially checked\" appearance.\n */\n @property({ type: Boolean, reflect: true }) declare indeterminate: boolean;\n\n /**\n * Whether the checkbox is disabled.\n */\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n\n /**\n * Whether the checkbox is required.\n */\n @property({ type: Boolean, reflect: true }) declare required: boolean;\n\n /**\n * The name of the checkbox for form submission.\n */\n @property({ type: String, reflect: true }) declare name: string;\n\n /**\n * The value of the checkbox for form submission.\n */\n @property({ type: String }) declare value: string;\n\n /**\n * The size of the checkbox.\n */\n @property({ type: String, reflect: true }) declare size: CheckboxSize;\n\n /**\n * Whether the checkbox has an error state.\n */\n @property({ type: Boolean, reflect: true }) declare error: boolean;\n\n @state() private hasFocus = false;\n\n static styles = [checkboxStyles];\n\n static formAssociated = true;\n // eslint-disable-next-line no-undef\n private internals: ElementInternals | null = null;\n\n constructor() {\n super();\n this.checked = false;\n this.indeterminate = false;\n this.disabled = false;\n this.required = false;\n this.name = '';\n this.value = 'on';\n this.size = 'md';\n this.error = false;\n\n // attachInternals may not be available in all environments (e.g., test)\n if (typeof this.attachInternals === 'function') {\n this.internals = this.attachInternals();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.updateFormValue();\n }\n\n updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('checked')) {\n this.updateFormValue();\n if (this.input) {\n this.input.checked = this.checked;\n }\n }\n\n if (changedProperties.has('indeterminate') && this.input) {\n this.input.indeterminate = this.indeterminate;\n }\n }\n\n private updateFormValue() {\n const value = this.checked ? this.value : null;\n this.internals?.setFormValue(value);\n }\n\n private handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.checked = target.checked;\n this.indeterminate = false;\n\n this.dispatchEvent(\n new CustomEvent('bp-change', {\n detail: { checked: this.checked },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleFocus() {\n this.hasFocus = true;\n this.dispatchEvent(\n new CustomEvent('bp-focus', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private handleBlur() {\n this.hasFocus = false;\n this.dispatchEvent(\n new CustomEvent('bp-blur', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Sets focus on the checkbox.\n */\n // eslint-disable-next-line no-undef\n focus(options?: FocusOptions) {\n this.input?.focus(options);\n }\n\n /**\n * Removes focus from the checkbox.\n */\n blur() {\n this.input?.blur();\n }\n\n render() {\n const classes = [\n 'checkbox',\n `checkbox--${this.size}`,\n this.checked ? 'checkbox--checked' : '',\n this.indeterminate ? 'checkbox--indeterminate' : '',\n this.disabled ? 'checkbox--disabled' : '',\n this.error ? 'checkbox--error' : '',\n this.hasFocus ? 'checkbox--focused' : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n return html`\n <label part=\"checkbox\" class=\"${classes}\">\n <input\n part=\"input\"\n type=\"checkbox\"\n class=\"checkbox__input\"\n .checked=${live(this.checked)}\n .indeterminate=${live(this.indeterminate)}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name || undefined)}\n value=${this.value}\n aria-checked=${this.indeterminate ? 'mixed' : this.checked}\n @change=${this.handleChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n />\n <span part=\"checkmark\" class=\"checkbox__checkmark\">\n ${this.indeterminate\n ? html`<svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n x1=\"4\"\n y1=\"8\"\n x2=\"12\"\n y2=\"8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n />\n </svg>`\n : html`<svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13 4L6 11L3 8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>`}\n </span>\n <span part=\"label\" class=\"checkbox__label\">\n <slot></slot>\n </span>\n </label>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'bp-checkbox': BpCheckbox;\n }\n}\n"],"names":["checkboxStyles","css","BpCheckbox","LitElement","changedProperties","value","event","target","options","classes","html","live","ifDefined","__decorateClass","query","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACgCvB,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAoDzC,cAAc;AACZ,UAAA,GATO,KAAQ,WAAW,IAM5B,KAAQ,YAAqC,MAI3C,KAAK,UAAU,IACf,KAAK,gBAAgB,IACrB,KAAK,WAAW,IAChB,KAAK,WAAW,IAChB,KAAK,OAAO,IACZ,KAAK,QAAQ,MACb,KAAK,OAAO,MACZ,KAAK,QAAQ,IAGT,OAAO,KAAK,mBAAoB,eAClC,KAAK,YAAY,KAAK,gBAAA;AAAA,EAE1B;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA,GACN,KAAK,gBAAA;AAAA,EACP;AAAA,EAEA,QAAQC,GAAyC;AAC/C,IAAIA,EAAkB,IAAI,SAAS,MACjC,KAAK,gBAAA,GACD,KAAK,UACP,KAAK,MAAM,UAAU,KAAK,WAI1BA,EAAkB,IAAI,eAAe,KAAK,KAAK,UACjD,KAAK,MAAM,gBAAgB,KAAK;AAAA,EAEpC;AAAA,EAEQ,kBAAkB;AACxB,UAAMC,IAAQ,KAAK,UAAU,KAAK,QAAQ;AAC1C,SAAK,WAAW,aAAaA,CAAK;AAAA,EACpC;AAAA,EAEQ,aAAaC,GAAc;AACjC,UAAMC,IAASD,EAAM;AACrB,SAAK,UAAUC,EAAO,SACtB,KAAK,gBAAgB,IAErB,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,cAAc;AACpB,SAAK,WAAW,IAChB,KAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,aAAa;AACnB,SAAK,WAAW,IAChB,KAAK;AAAA,MACH,IAAI,YAAY,WAAW;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAMC,GAAwB;AAC5B,SAAK,OAAO,MAAMA,CAAO;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,SAAK,OAAO,KAAA;AAAA,EACd;AAAA,EAEA,SAAS;AACP,UAAMC,IAAU;AAAA,MACd;AAAA,MACA,aAAa,KAAK,IAAI;AAAA,MACtB,KAAK,UAAU,sBAAsB;AAAA,MACrC,KAAK,gBAAgB,4BAA4B;AAAA,MACjD,KAAK,WAAW,uBAAuB;AAAA,MACvC,KAAK,QAAQ,oBAAoB;AAAA,MACjC,KAAK,WAAW,sBAAsB;AAAA,IAAA,EAErC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WAAOC;AAAA,sCAC2BD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKxBE,EAAK,KAAK,OAAO,CAAC;AAAA,2BACZA,EAAK,KAAK,aAAa,CAAC;AAAA,sBAC7B,KAAK,QAAQ;AAAA,sBACb,KAAK,QAAQ;AAAA,iBAClBC,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,kBAChC,KAAK,KAAK;AAAA,yBACH,KAAK,gBAAgB,UAAU,KAAK,OAAO;AAAA,oBAChD,KAAK,YAAY;AAAA,mBAClB,KAAK,WAAW;AAAA,kBACjB,KAAK,UAAU;AAAA;AAAA;AAAA,YAGrB,KAAK,gBACHF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAeAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAYO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnB;AACF;AAhNaR,EA8CJ,SAAS,CAACF,CAAc;AA9CpBE,EAgDJ,iBAAiB;AA/CiBW,EAAA;AAAA,EAAxCC,EAAM,wBAAwB;AAAA,GADpBZ,EAC8B,WAAA,SAAA,CAAA;AAKWW,EAAA;AAAA,EAAnDE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAN/Bb,EAMyC,WAAA,WAAA,CAAA;AAMAW,EAAA;AAAA,EAAnDE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/Bb,EAYyC,WAAA,iBAAA,CAAA;AAKAW,EAAA;AAAA,EAAnDE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjB/Bb,EAiByC,WAAA,YAAA,CAAA;AAKAW,EAAA;AAAA,EAAnDE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAsByC,WAAA,YAAA,CAAA;AAKDW,EAAA;AAAA,EAAlDE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3B9Bb,EA2BwC,WAAA,QAAA,CAAA;AAKfW,EAAA;AAAA,EAAnCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfb,EAgCyB,WAAA,SAAA,CAAA;AAKeW,EAAA;AAAA,EAAlDE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArC9Bb,EAqCwC,WAAA,QAAA,CAAA;AAKCW,EAAA;AAAA,EAAnDE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1C/Bb,EA0CyC,WAAA,SAAA,CAAA;AAEnCW,EAAA;AAAA,EAAhBG,EAAA;AAAM,GA5CId,EA4CM,WAAA,YAAA,CAAA;AA5CNA,IAANW,EAAA;AAAA,EADNI,EAAc,aAAa;AAAA,GACff,CAAA;"}
|