@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.
Files changed (95) hide show
  1. package/dist/components/accordion.js +393 -0
  2. package/dist/components/accordion.js.map +1 -0
  3. package/dist/components/alert.js +213 -0
  4. package/dist/components/alert.js.map +1 -0
  5. package/dist/components/avatar.js +237 -0
  6. package/dist/components/avatar.js.map +1 -0
  7. package/dist/components/badge.js +144 -0
  8. package/dist/components/badge.js.map +1 -0
  9. package/dist/components/breadcrumb.js +481 -0
  10. package/dist/components/breadcrumb.js.map +1 -0
  11. package/dist/components/button.js +192 -0
  12. package/dist/components/button.js.map +1 -0
  13. package/dist/components/card.js +223 -0
  14. package/dist/components/card.js.map +1 -0
  15. package/dist/components/checkbox.js +337 -0
  16. package/dist/components/checkbox.js.map +1 -0
  17. package/dist/components/color-picker.js +1660 -0
  18. package/dist/components/color-picker.js.map +1 -0
  19. package/dist/components/combobox.js +595 -0
  20. package/dist/components/combobox.js.map +1 -0
  21. package/dist/components/date-picker.js +726 -0
  22. package/dist/components/date-picker.js.map +1 -0
  23. package/dist/components/divider.js +214 -0
  24. package/dist/components/divider.js.map +1 -0
  25. package/dist/components/drawer.js +568 -0
  26. package/dist/components/drawer.js.map +1 -0
  27. package/dist/components/dropdown.js +377 -0
  28. package/dist/components/dropdown.js.map +1 -0
  29. package/dist/components/file-upload.js +669 -0
  30. package/dist/components/file-upload.js.map +1 -0
  31. package/dist/components/heading.js +161 -0
  32. package/dist/components/heading.js.map +1 -0
  33. package/dist/components/icon.js +599 -0
  34. package/dist/components/icon.js.map +1 -0
  35. package/dist/components/input.js +363 -0
  36. package/dist/components/input.js.map +1 -0
  37. package/dist/components/link.js +178 -0
  38. package/dist/components/link.js.map +1 -0
  39. package/dist/components/menu.js +331 -0
  40. package/dist/components/menu.js.map +1 -0
  41. package/dist/components/modal.js +317 -0
  42. package/dist/components/modal.js.map +1 -0
  43. package/dist/components/multi-select.js +642 -0
  44. package/dist/components/multi-select.js.map +1 -0
  45. package/dist/components/notification.js +429 -0
  46. package/dist/components/notification.js.map +1 -0
  47. package/dist/components/number-input.js +556 -0
  48. package/dist/components/number-input.js.map +1 -0
  49. package/dist/components/pagination.js +320 -0
  50. package/dist/components/pagination.js.map +1 -0
  51. package/dist/components/popover.js +597 -0
  52. package/dist/components/popover.js.map +1 -0
  53. package/dist/components/progress.js +219 -0
  54. package/dist/components/progress.js.map +1 -0
  55. package/dist/components/radio.js +321 -0
  56. package/dist/components/radio.js.map +1 -0
  57. package/dist/components/select.js +498 -0
  58. package/dist/components/select.js.map +1 -0
  59. package/dist/components/skeleton.js +240 -0
  60. package/dist/components/skeleton.js.map +1 -0
  61. package/dist/components/slider.js +9 -0
  62. package/dist/components/slider.js.map +1 -0
  63. package/dist/components/spinner.js +133 -0
  64. package/dist/components/spinner.js.map +1 -0
  65. package/dist/components/stepper.js +812 -0
  66. package/dist/components/stepper.js.map +1 -0
  67. package/dist/components/switch.js +380 -0
  68. package/dist/components/switch.js.map +1 -0
  69. package/dist/components/table.js +642 -0
  70. package/dist/components/table.js.map +1 -0
  71. package/dist/components/tabs.js +547 -0
  72. package/dist/components/tabs.js.map +1 -0
  73. package/dist/components/tag.js +291 -0
  74. package/dist/components/tag.js.map +1 -0
  75. package/dist/components/text.js +278 -0
  76. package/dist/components/text.js.map +1 -0
  77. package/dist/components/textarea.js +380 -0
  78. package/dist/components/textarea.js.map +1 -0
  79. package/dist/components/time-picker.js +457 -0
  80. package/dist/components/time-picker.js.map +1 -0
  81. package/dist/components/tooltip.js +239 -0
  82. package/dist/components/tooltip.js.map +1 -0
  83. package/dist/components/tree.js +582 -0
  84. package/dist/components/tree.js.map +1 -0
  85. package/dist/index.js +93 -17799
  86. package/dist/index.js.map +1 -1
  87. package/dist/shared/boolean-converter-XDGfS9LC.js +12 -0
  88. package/dist/shared/boolean-converter-XDGfS9LC.js.map +1 -0
  89. package/dist/shared/debounce-BckY30Sf.js +23 -0
  90. package/dist/shared/debounce-BckY30Sf.js.map +1 -0
  91. package/dist/shared/memoize-DlOFy-92.js +16 -0
  92. package/dist/shared/memoize-DlOFy-92.js.map +1 -0
  93. package/dist/shared/slider-BNt5TITl.js +484 -0
  94. package/dist/shared/slider-BNt5TITl.js.map +1 -0
  95. 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":"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"}