@nuralyui/checkbox 0.0.10 → 0.0.11

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 (2) hide show
  1. package/bundle.js +347 -2
  2. package/package.json +1 -1
package/bundle.js CHANGED
@@ -1,7 +1,352 @@
1
- import{css as e,LitElement as r,html as c}from"lit";import{property as a,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const n=e`:host{--nuraly-checkbox-background:var(--nuraly-color-checkbox-background, #ffffff);--nuraly-checkbox-text-color:var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));--nuraly-checkbox-label-color:var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));--nuraly-checkbox-border:var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);--nuraly-checkbox-border-radius:var(--nuraly-border-radius-checkbox, 2px);--nuraly-checkbox-border-focus:var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);--nuraly-checkbox-border-hover:var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);--nuraly-checkbox-checked-background:var(--nuraly-color-checkbox-checked-background, #1890ff);--nuraly-checkbox-checked-border:var(--nuraly-color-checkbox-checked-border, #1890ff);--nuraly-checkbox-checkmark-color:var(--nuraly-color-checkbox-checkmark, #ffffff);--nuraly-checkbox-indeterminate-background:var(--nuraly-color-checkbox-indeterminate-background, #1890ff);--nuraly-checkbox-indeterminate-mark-color:var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);--nuraly-checkbox-disabled-background:var(--nuraly-color-checkbox-disabled-background, #f5f5f5);--nuraly-checkbox-disabled-border:var(--nuraly-color-checkbox-disabled-border, #d9d9d9);--nuraly-checkbox-disabled-text-color:var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));--nuraly-checkbox-disabled-checkmark-color:var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));--nuraly-checkbox-focus-outline:var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));--nuraly-checkbox-font-family:var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);--nuraly-checkbox-font-size:var(--nuraly-font-size-checkbox, 14px);--nuraly-checkbox-font-weight:var(--nuraly-font-weight-checkbox, 400);--nuraly-checkbox-line-height:var(--nuraly-line-height-checkbox, 1.5715);--nuraly-checkbox-size-small:var(--nuraly-size-checkbox-small, 14px);--nuraly-checkbox-size-medium:var(--nuraly-size-checkbox-medium, 16px);--nuraly-checkbox-size-large:var(--nuraly-size-checkbox-large, 18px);--nuraly-checkbox-gap:var(--nuraly-spacing-checkbox-gap, 8px);--nuraly-checkbox-padding:var(--nuraly-spacing-checkbox-padding, 4px);--nuraly-checkbox-transition:var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));--nuraly-checkbox-local-filled-background-color:var(--nuraly-checkbox-checked-background);--nuraly-checkbox-local-color:var(--nuraly-checkbox-text-color);--nuraly-checkbox-local-empty-background-color:var(--nuraly-checkbox-background);--nuraly-checkbox-local-disabled-background-color:var(--nuraly-checkbox-disabled-background);--nuraly-checkbox-local-disabled-text-color:var(--nuraly-checkbox-disabled-text-color);--nuraly-checkbox-local-empty-border:var(--nuraly-checkbox-border);--nuraly-checkbox-local-symbol-color:var(--nuraly-checkbox-checkmark-color);--nuraly-checkbox-local-focus-border:var(--nuraly-checkbox-border-focus);--nuraly-checkbox-local-focus-outline:var(--nuraly-checkbox-focus-outline);--nuraly-checkbox-local-font-family:var(--nuraly-checkbox-font-family);--nuraly-checkbox-local-border-radius:var(--nuraly-checkbox-border-radius);--nuraly-checkbox-local-gap:var(--nuraly-checkbox-gap);--nuraly-checkbox-local-medium-width:var(--nuraly-checkbox-size-medium);--nuraly-checkbox-local-medium-height:var(--nuraly-checkbox-size-medium);--nuraly-checkbox-local-small-width:var(--nuraly-checkbox-size-small);--nuraly-checkbox-local-small-height:var(--nuraly-checkbox-size-small);--nuraly-checkbox-local-large-width:var(--nuraly-checkbox-size-large);--nuraly-checkbox-local-large-height:var(--nuraly-checkbox-size-large);--nuraly-checkbox-local-small-indeterminate-size:calc(var(--nuraly-checkbox-size-small) * 0.7);--nuraly-checkbox-local-large-indeterminate-size:calc(var(--nuraly-checkbox-size-large) * 0.7);--nuraly-checkbox-local-medium-indeterminate-size:calc(var(--nuraly-checkbox-size-medium) * 0.7);--nuraly-checkbox-local-small-checked-width:calc(var(--nuraly-checkbox-size-small) * 0.14);--nuraly-checkbox-local-small-checked-height:calc(var(--nuraly-checkbox-size-small) * 0.5);--nuraly-checkbox-local-medium-checked-width:calc(var(--nuraly-checkbox-size-medium) * 0.19);--nuraly-checkbox-local-medium-checked-height:calc(var(--nuraly-checkbox-size-medium) * 0.56);--nuraly-checkbox-local-large-checked-width:calc(var(--nuraly-checkbox-size-large) * 0.22);--nuraly-checkbox-local-large-checked-height:calc(var(--nuraly-checkbox-size-large) * 0.56)}:host{display:flex;align-items:center;flex-wrap:wrap;gap:var(--nuraly-checkbox-gap);font-family:var(--nuraly-checkbox-font-family);font-size:var(--nuraly-checkbox-font-size);font-weight:var(--nuraly-checkbox-font-weight);line-height:var(--nuraly-checkbox-line-height);color:var(--nuraly-checkbox-text-color);cursor:pointer;transition:var(--nuraly-checkbox-transition)}input{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;position:relative;border-radius:var(--nuraly-checkbox-border-radius);background-color:var(--nuraly-checkbox-background);border:var(--nuraly-checkbox-border);transition:var(--nuraly-checkbox-transition);margin:0;outline:0}input{width:var(--nuraly-checkbox-size-medium);height:var(--nuraly-checkbox-size-medium)}:host([size=small]) input{width:var(--nuraly-checkbox-size-small);height:var(--nuraly-checkbox-size-small)}:host([size=large]) input{width:var(--nuraly-checkbox-size-large);height:var(--nuraly-checkbox-size-large)}:host(:not([checked]):not([indeterminate]):not([disabled])) input{background-color:var(--nuraly-checkbox-background);border:var(--nuraly-checkbox-border)}:host(:not([disabled])[checked]) input,:host(:not([disabled])[indeterminate]) input{background-color:var(--nuraly-checkbox-checked-background);border:1px solid var(--nuraly-checkbox-checked-border)}:host(:not([disabled]):hover) input{border:var(--nuraly-checkbox-border-hover)}:host(:not([disabled]):hover[checked]) input,:host(:not([disabled]):hover[indeterminate]) input{background-color:var(--nuraly-checkbox-checked-background);border:1px solid var(--nuraly-checkbox-border-hover);filter:brightness(1.1)}input:focus,input:focus-visible{border:var(--nuraly-checkbox-border-focus);outline:var(--nuraly-checkbox-focus-outline);outline-offset:2px}:host([disabled]){color:var(--nuraly-checkbox-disabled-text-color);cursor:not-allowed}:host([disabled]) input{background-color:var(--nuraly-checkbox-disabled-background);border:1px solid var(--nuraly-checkbox-disabled-border);cursor:not-allowed}input:after{color:var(--nuraly-checkbox-checkmark-color);position:absolute;left:50%;top:50%;transform:translate(-50%,-51%);transition:var(--nuraly-checkbox-transition)}:host([checked]) input:after{border:solid var(--nuraly-checkbox-checkmark-color);border-width:0 2px 2px 0;transform:translate(-50%,-51%) rotate(45deg);content:'';width:var(--nuraly-checkbox-local-medium-checked-width);height:var(--nuraly-checkbox-local-medium-checked-height)}:host([checked][size=small]) input:after{width:var(--nuraly-checkbox-local-small-checked-width);height:var(--nuraly-checkbox-local-small-checked-height)}:host([checked][size=medium]) input:after{width:var(--nuraly-checkbox-local-medium-checked-width);height:var(--nuraly-checkbox-local-medium-checked-height)}:host([checked][size=large]) input:after{width:var(--nuraly-checkbox-local-large-checked-width);height:var(--nuraly-checkbox-local-large-checked-height)}:host([indeterminate]:not([checked])) input:after{content:'-';color:var(--nuraly-checkbox-indeterminate-mark-color);font-weight:700;transform:translate(-50%,-51%)}:host([indeterminate][size=small]) input:after{font-size:var(--nuraly-checkbox-local-small-indeterminate-size)}:host([indeterminate][size=medium]) input:after{font-size:var(--nuraly-checkbox-local-medium-indeterminate-size)}:host([indeterminate][size=large]) input:after{font-size:var(--nuraly-checkbox-local-large-indeterminate-size)}:host(:not([checked]):not([indeterminate])) input:after{content:''}:host([disabled]) input:after{color:var(--nuraly-checkbox-disabled-checkmark-color);border-color:var(--nuraly-checkbox-disabled-checkmark-color)}.checkbox-label{flex:1;cursor:pointer;user-select:none;transition:var(--nuraly-checkbox-transition)}:host([disabled]) .checkbox-label{cursor:not-allowed}@media (prefers-reduced-motion:reduce){.checkbox-label,:host,input,input:after{transition:none}}@media (prefers-contrast:high){input{border-width:2px}:host([checked]) input:after,:host([indeterminate]) input:after{font-weight:900}}`,i=e=>class extends e{get checkboxElement(){var e;const r=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]');if(!r)throw new Error("CheckboxFocusMixin requires a checkbox input element");return r}focus(e={}){const r=this.checkboxElement;r&&r.focus({preventScroll:e.preventScroll})}blur(){const e=this.checkboxElement;e&&e.blur()}isFocused(){const e=this.checkboxElement;return!!e&&document.activeElement===e}get nativeElement(){var e;return(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]'))||null}},t=e=>class extends e{handleChange(e){var r;const c=e.target.checked,a=this.name,o=this.value;this.indeterminate&&(this.indeterminate=!1),this.checked=c,null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-change",{checked:c,value:o,name:a,indeterminate:!1})}handleFocus(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-focus",{originalEvent:e})}handleBlur(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-blur",{originalEvent:e})}handleKeydown(e){var r,c,a;if(null===(r=this.isActivationKey)||void 0===r?void 0:r.call(this,e)){e.preventDefault();const r=null===(c=this.shadowRoot)||void 0===c?void 0:c.querySelector('input[type="checkbox"]'),a=this.disabled;r&&!a&&r.click()}null===(a=this.dispatchCustomEvent)||void 0===a||a.call(this,"nr-keydown",{key:e.key,code:e.code,originalEvent:e})}handleMouseEnter(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseenter",{originalEvent:e})}handleMouseLeave(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseleave",{originalEvent:e})}};
1
+ import{css as e,LitElement as r,html as a}from"lit";import{property as c,customElement as o}from"lit/decorators.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const t=e`
2
+ /* ========================================
3
+ * CHECKBOX CSS VARIABLES - FALLBACK VALUES
4
+ * ========================================
5
+ * These fallback values ensure the component works even without theme files
6
+ */
7
+ :host {
8
+ /* Base checkbox appearance */
9
+ --nuraly-checkbox-background: var(--nuraly-color-checkbox-background, #ffffff);
10
+ --nuraly-checkbox-text-color: var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));
11
+ --nuraly-checkbox-label-color: var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));
12
+
13
+ /* Checkbox borders and outline */
14
+ --nuraly-checkbox-border: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);
15
+ --nuraly-checkbox-border-radius: var(--nuraly-border-radius-checkbox, 2px);
16
+ --nuraly-checkbox-border-focus: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);
17
+ --nuraly-checkbox-border-hover: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);
18
+
19
+ /* Checked/active states */
20
+ --nuraly-checkbox-checked-background: var(--nuraly-color-checkbox-checked-background, #1890ff);
21
+ --nuraly-checkbox-checked-border: var(--nuraly-color-checkbox-checked-border, #1890ff);
22
+ --nuraly-checkbox-checkmark-color: var(--nuraly-color-checkbox-checkmark, #ffffff);
23
+ --nuraly-checkbox-indeterminate-background: var(--nuraly-color-checkbox-indeterminate-background, #1890ff);
24
+ --nuraly-checkbox-indeterminate-mark-color: var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);
25
+
26
+ /* Disabled states */
27
+ --nuraly-checkbox-disabled-background: var(--nuraly-color-checkbox-disabled-background, #f5f5f5);
28
+ --nuraly-checkbox-disabled-border: var(--nuraly-color-checkbox-disabled-border, #d9d9d9);
29
+ --nuraly-checkbox-disabled-text-color: var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));
30
+ --nuraly-checkbox-disabled-checkmark-color: var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));
31
+
32
+ /* Focus states */
33
+ --nuraly-checkbox-focus-outline: var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));
34
+
35
+ /* Typography */
36
+ --nuraly-checkbox-font-family: var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
37
+ --nuraly-checkbox-font-size: var(--nuraly-font-size-checkbox, 14px);
38
+ --nuraly-checkbox-font-weight: var(--nuraly-font-weight-checkbox, 400);
39
+ --nuraly-checkbox-line-height: var(--nuraly-line-height-checkbox, 1.5715);
40
+
41
+ /* Sizing */
42
+ --nuraly-checkbox-size-small: var(--nuraly-size-checkbox-small, 14px);
43
+ --nuraly-checkbox-size-medium: var(--nuraly-size-checkbox-medium, 16px);
44
+ --nuraly-checkbox-size-large: var(--nuraly-size-checkbox-large, 18px);
45
+
46
+ /* Spacing */
47
+ --nuraly-checkbox-gap: var(--nuraly-spacing-checkbox-gap, 8px);
48
+ --nuraly-checkbox-padding: var(--nuraly-spacing-checkbox-padding, 4px);
49
+
50
+ /* Animation */
51
+ --nuraly-checkbox-transition: var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));
52
+
53
+ /* ========================================
54
+ * LEGACY COMPATIBILITY VARIABLES
55
+ * ========================================
56
+ * Keep old variable names for backward compatibility
57
+ * These will be deprecated in future versions
58
+ */
59
+
60
+ /* Legacy local variables for backward compatibility */
61
+ --nuraly-checkbox-local-filled-background-color: var(--nuraly-checkbox-checked-background);
62
+ --nuraly-checkbox-local-color: var(--nuraly-checkbox-text-color);
63
+ --nuraly-checkbox-local-empty-background-color: var(--nuraly-checkbox-background);
64
+ --nuraly-checkbox-local-disabled-background-color: var(--nuraly-checkbox-disabled-background);
65
+ --nuraly-checkbox-local-disabled-text-color: var(--nuraly-checkbox-disabled-text-color);
66
+ --nuraly-checkbox-local-empty-border: var(--nuraly-checkbox-border);
67
+ --nuraly-checkbox-local-symbol-color: var(--nuraly-checkbox-checkmark-color);
68
+ --nuraly-checkbox-local-focus-border: var(--nuraly-checkbox-border-focus);
69
+ --nuraly-checkbox-local-focus-outline: var(--nuraly-checkbox-focus-outline);
70
+ --nuraly-checkbox-local-font-family: var(--nuraly-checkbox-font-family);
71
+ --nuraly-checkbox-local-border-radius: var(--nuraly-checkbox-border-radius);
72
+ --nuraly-checkbox-local-gap: var(--nuraly-checkbox-gap);
73
+
74
+ /* Legacy size variables */
75
+ --nuraly-checkbox-local-medium-width: var(--nuraly-checkbox-size-medium);
76
+ --nuraly-checkbox-local-medium-height: var(--nuraly-checkbox-size-medium);
77
+ --nuraly-checkbox-local-small-width: var(--nuraly-checkbox-size-small);
78
+ --nuraly-checkbox-local-small-height: var(--nuraly-checkbox-size-small);
79
+ --nuraly-checkbox-local-large-width: var(--nuraly-checkbox-size-large);
80
+ --nuraly-checkbox-local-large-height: var(--nuraly-checkbox-size-large);
81
+
82
+ /* Legacy checkmark sizing */
83
+ --nuraly-checkbox-local-small-indeterminate-size: calc(var(--nuraly-checkbox-size-small) * 0.7);
84
+ --nuraly-checkbox-local-large-indeterminate-size: calc(var(--nuraly-checkbox-size-large) * 0.7);
85
+ --nuraly-checkbox-local-medium-indeterminate-size: calc(var(--nuraly-checkbox-size-medium) * 0.7);
86
+
87
+ --nuraly-checkbox-local-small-checked-width: calc(var(--nuraly-checkbox-size-small) * 0.14);
88
+ --nuraly-checkbox-local-small-checked-height: calc(var(--nuraly-checkbox-size-small) * 0.5);
89
+ --nuraly-checkbox-local-medium-checked-width: calc(var(--nuraly-checkbox-size-medium) * 0.19);
90
+ --nuraly-checkbox-local-medium-checked-height: calc(var(--nuraly-checkbox-size-medium) * 0.56);
91
+ --nuraly-checkbox-local-large-checked-width: calc(var(--nuraly-checkbox-size-large) * 0.22);
92
+ --nuraly-checkbox-local-large-checked-height: calc(var(--nuraly-checkbox-size-large) * 0.56);
93
+ }
94
+
95
+ /* ========================================
96
+ * CHECKBOX COMPONENT STYLES
97
+ * ========================================
98
+ * Modern checkbox component with theme-aware styling
99
+ * Uses CSS custom properties for consistent theming
100
+ */
101
+
102
+ :host {
103
+ display: flex;
104
+ align-items: center;
105
+ flex-wrap: wrap;
106
+ gap: var(--nuraly-checkbox-gap);
107
+ font-family: var(--nuraly-checkbox-font-family);
108
+ font-size: var(--nuraly-checkbox-font-size);
109
+ font-weight: var(--nuraly-checkbox-font-weight);
110
+ line-height: var(--nuraly-checkbox-line-height);
111
+ color: var(--nuraly-checkbox-text-color);
112
+ cursor: pointer;
113
+ transition: var(--nuraly-checkbox-transition);
114
+ }
115
+
116
+ /* ========================================
117
+ * CHECKBOX INPUT ELEMENT STYLES
118
+ * ======================================== */
119
+
120
+ input {
121
+ appearance: none;
122
+ -webkit-appearance: none;
123
+ -moz-appearance: none;
124
+ cursor: pointer;
125
+ position: relative;
126
+ border-radius: var(--nuraly-checkbox-border-radius);
127
+ background-color: var(--nuraly-checkbox-background);
128
+ border: var(--nuraly-checkbox-border);
129
+ transition: var(--nuraly-checkbox-transition);
130
+ margin: 0;
131
+ outline: none;
132
+ }
133
+
134
+ /* ========================================
135
+ * SIZE VARIATIONS
136
+ * ======================================== */
137
+
138
+ /* Medium size (default) */
139
+ input {
140
+ width: var(--nuraly-checkbox-size-medium);
141
+ height: var(--nuraly-checkbox-size-medium);
142
+ }
143
+
144
+ :host([size='small']) input {
145
+ width: var(--nuraly-checkbox-size-small);
146
+ height: var(--nuraly-checkbox-size-small);
147
+ }
148
+
149
+ :host([size='large']) input {
150
+ width: var(--nuraly-checkbox-size-large);
151
+ height: var(--nuraly-checkbox-size-large);
152
+ }
153
+
154
+ /* ========================================
155
+ * CHECKBOX STATE STYLES
156
+ * ======================================== */
157
+
158
+ /* Empty/unchecked state */
159
+ :host(:not([checked]):not([indeterminate]):not([disabled])) input {
160
+ background-color: var(--nuraly-checkbox-background);
161
+ border: var(--nuraly-checkbox-border);
162
+ }
163
+
164
+ /* Checked and indeterminate states */
165
+ :host(:not([disabled])[checked]) input,
166
+ :host(:not([disabled])[indeterminate]) input {
167
+ background-color: var(--nuraly-checkbox-checked-background);
168
+ border: 1px solid var(--nuraly-checkbox-checked-border);
169
+ }
170
+
171
+ /* Hover states for interactive elements */
172
+ :host(:not([disabled]):hover) input {
173
+ border: var(--nuraly-checkbox-border-hover);
174
+ }
175
+
176
+ :host(:not([disabled]):hover[checked]) input,
177
+ :host(:not([disabled]):hover[indeterminate]) input {
178
+ background-color: var(--nuraly-checkbox-checked-background);
179
+ border: 1px solid var(--nuraly-checkbox-border-hover);
180
+ filter: brightness(1.1);
181
+ }
182
+
183
+ /* Focus states */
184
+ input:focus,
185
+ input:focus-visible {
186
+ border: var(--nuraly-checkbox-border-focus);
187
+ outline: var(--nuraly-checkbox-focus-outline);
188
+ outline-offset: 2px;
189
+ }
190
+
191
+ /* ========================================
192
+ * DISABLED STATE
193
+ * ======================================== */
194
+
195
+ :host([disabled]) {
196
+ color: var(--nuraly-checkbox-disabled-text-color);
197
+ cursor: not-allowed;
198
+ }
199
+
200
+ :host([disabled]) input {
201
+ background-color: var(--nuraly-checkbox-disabled-background);
202
+ border: 1px solid var(--nuraly-checkbox-disabled-border);
203
+ cursor: not-allowed;
204
+ }
205
+
206
+ /* ========================================
207
+ * CHECKMARK AND INDETERMINATE SYMBOLS
208
+ * ======================================== */
209
+
210
+ /* Base symbol styling */
211
+ input:after {
212
+ color: var(--nuraly-checkbox-checkmark-color);
213
+ position: absolute;
214
+ left: 50%;
215
+ top: 50%;
216
+ transform: translate(-50%, -51%);
217
+ transition: var(--nuraly-checkbox-transition);
218
+ }
219
+
220
+ /* Checked state checkmark */
221
+ :host([checked]) input:after {
222
+ border: solid var(--nuraly-checkbox-checkmark-color);
223
+ border-width: 0 2px 2px 0;
224
+ transform: translate(-50%, -51%) rotate(45deg);
225
+ content: '';
226
+ width: var(--nuraly-checkbox-local-medium-checked-width); /* Default to medium size */
227
+ height: var(--nuraly-checkbox-local-medium-checked-height); /* Default to medium size */
228
+ }
229
+
230
+ /* Checkmark sizing per size variant */
231
+ :host([checked][size='small']) input:after {
232
+ width: var(--nuraly-checkbox-local-small-checked-width);
233
+ height: var(--nuraly-checkbox-local-small-checked-height);
234
+ }
235
+
236
+ :host([checked][size='medium']) input:after {
237
+ width: var(--nuraly-checkbox-local-medium-checked-width);
238
+ height: var(--nuraly-checkbox-local-medium-checked-height);
239
+ }
240
+
241
+ :host([checked][size='large']) input:after {
242
+ width: var(--nuraly-checkbox-local-large-checked-width);
243
+ height: var(--nuraly-checkbox-local-large-checked-height);
244
+ }
245
+
246
+ /* Indeterminate state symbol */
247
+ :host([indeterminate]:not([checked])) input:after {
248
+ content: '-';
249
+ color: var(--nuraly-checkbox-indeterminate-mark-color);
250
+ font-weight: bold;
251
+ transform: translate(-50%, -51%);
252
+ }
253
+
254
+ /* Indeterminate symbol sizing per size variant */
255
+ :host([indeterminate][size='small']) input:after {
256
+ font-size: var(--nuraly-checkbox-local-small-indeterminate-size);
257
+ }
258
+
259
+ :host([indeterminate][size='medium']) input:after {
260
+ font-size: var(--nuraly-checkbox-local-medium-indeterminate-size);
261
+ }
262
+
263
+ :host([indeterminate][size='large']) input:after {
264
+ font-size: var(--nuraly-checkbox-local-large-indeterminate-size);
265
+ }
266
+
267
+ /* Empty state - no symbol */
268
+ :host(:not([checked]):not([indeterminate])) input:after {
269
+ content: '';
270
+ }
271
+
272
+ /* ========================================
273
+ * DISABLED STATE SYMBOLS
274
+ * ======================================== */
275
+
276
+ :host([disabled]) input:after {
277
+ color: var(--nuraly-checkbox-disabled-checkmark-color);
278
+ border-color: var(--nuraly-checkbox-disabled-checkmark-color);
279
+ }
280
+
281
+ /* ========================================
282
+ * LABEL TEXT STYLING
283
+ * ======================================== */
284
+
285
+ .checkbox-label {
286
+ flex: 1;
287
+ cursor: pointer;
288
+ user-select: none;
289
+ transition: var(--nuraly-checkbox-transition);
290
+ }
291
+
292
+ :host([disabled]) .checkbox-label {
293
+ cursor: not-allowed;
294
+ }
295
+
296
+ /* ========================================
297
+ * ACCESSIBILITY IMPROVEMENTS
298
+ * ======================================== */
299
+
300
+ @media (prefers-reduced-motion: reduce) {
301
+ :host,
302
+ input,
303
+ input:after,
304
+ .checkbox-label {
305
+ transition: none;
306
+ }
307
+ }
308
+
309
+ /* High contrast mode support */
310
+ @media (prefers-contrast: high) {
311
+ input {
312
+ border-width: 2px;
313
+ }
314
+
315
+ :host([checked]) input:after,
316
+ :host([indeterminate]) input:after {
317
+ font-weight: 900;
318
+ }
319
+ }
320
+ `,i=e=>class extends e{get checkboxElement(){var e;const r=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]');if(!r)throw new Error("CheckboxFocusMixin requires a checkbox input element");return r}focus(e={}){const r=this.checkboxElement;r&&r.focus({preventScroll:e.preventScroll})}blur(){const e=this.checkboxElement;e&&e.blur()}isFocused(){const e=this.checkboxElement;return!!e&&document.activeElement===e}get nativeElement(){var e;return(null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('input[type="checkbox"]'))||null}},n=e=>class extends e{handleChange(e){var r;const a=e.target.checked,c=this.name,o=this.value;this.indeterminate&&(this.indeterminate=!1),this.checked=a,null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-change",{checked:a,value:o,name:c,indeterminate:!1})}handleFocus(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-focus",{originalEvent:e})}handleBlur(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-blur",{originalEvent:e})}handleKeydown(e){var r,a,c;if(null===(r=this.isActivationKey)||void 0===r?void 0:r.call(this,e)){e.preventDefault();const r=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector('input[type="checkbox"]'),c=this.disabled;r&&!c&&r.click()}null===(c=this.dispatchCustomEvent)||void 0===c||c.call(this,"nr-keydown",{key:e.key,code:e.code,originalEvent:e})}handleMouseEnter(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseenter",{originalEvent:e})}handleMouseLeave(e){var r;null===(r=this.dispatchCustomEvent)||void 0===r||r.call(this,"nr-mouseleave",{originalEvent:e})}};
2
321
  /**
3
322
  * @license
4
323
  * Copyright 2023 Nuraly, Laabidi Aymen
5
324
  * SPDX-License-Identifier: MIT
6
325
  */
7
- var h=function(e,r,c,a){for(var o,l=arguments.length,n=l<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,c):a,i=e.length-1;i>=0;i--)(o=e[i])&&(n=(l<3?o(n):l>3?o(r,c,n):o(r,c))||n);return l>3&&n&&Object.defineProperty(r,c,n),n};let u=class extends(t(i(l(r)))){constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.indeterminate=!1,this._size="medium",this.autoFocus=!1,this.title="",this.tabIndex=0,this.required=!1,this.id=""}get size(){return this._size}set size(e){["small","medium","large"].includes(e)?this._size=e:(console.warn(`Invalid size value: ${e}. Using default size: medium`),this._size="medium")}connectedCallback(){super.connectedCallback(),this.validateDependencies(),this.autoFocus&&requestAnimationFrame((()=>{this.focus()}))}updated(e){super.updated(e),this.setAttribute("data-theme",this.currentTheme)}getCommonAttributes(){return{"data-theme":this.currentTheme,"data-size":this.size}}handleLabelClick(e){this.disabled||(e.preventDefault(),this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-change",{detail:{checked:this.checked,value:this.value},bubbles:!0})))}render(){var e,r,a;const o=this.getCommonAttributes();return c`<input type="checkbox" .checked="${this.checked}" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" name="${null!==(e=this.name)&&void 0!==e?e:""}" value="${null!==(r=this.value)&&void 0!==r?r:""}" id="${this.id}" title="${this.title}" ?required="${this.required}" data-theme="${o["data-theme"]}" data-size="${o["data-size"]}" aria-checked="${this.indeterminate?"mixed":this.checked?"true":"false"}" aria-disabled="${this.disabled?"true":"false"}" tabindex="${this.disabled?-1:null!==(a=this.tabIndex)&&void 0!==a?a:0}" @change="${this.handleChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @keydown="${this.handleKeydown}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}"> <label class="checkbox-label" for="${this.id}" @click="${this.handleLabelClick}"><slot></slot></label>`}};u.styles=n,h([a({type:Boolean,reflect:!0})],u.prototype,"checked",void 0),h([a({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),h([a({type:Boolean,reflect:!0})],u.prototype,"indeterminate",void 0),h([a({reflect:!0})],u.prototype,"size",null),h([a({type:String})],u.prototype,"name",void 0),h([a({type:String})],u.prototype,"value",void 0),h([a({type:Boolean})],u.prototype,"autoFocus",void 0),h([a({type:String})],u.prototype,"title",void 0),h([a({type:Number})],u.prototype,"tabIndex",void 0),h([a({type:Boolean})],u.prototype,"required",void 0),h([a({type:String})],u.prototype,"id",void 0),u=h([o("nr-checkbox")],u);export{u as NrCheckboxElement};
326
+ var h=function(e,r,a,c){for(var o,l=arguments.length,t=l<3?r:null===c?c=Object.getOwnPropertyDescriptor(r,a):c,i=e.length-1;i>=0;i--)(o=e[i])&&(t=(l<3?o(t):l>3?o(r,a,t):o(r,a))||t);return l>3&&t&&Object.defineProperty(r,a,t),t};let s=class extends(n(i(l(r)))){constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.indeterminate=!1,this._size="medium",this.autoFocus=!1,this.title="",this.tabIndex=0,this.required=!1,this.id=""}get size(){return this._size}set size(e){["small","medium","large"].includes(e)?this._size=e:(console.warn(`Invalid size value: ${e}. Using default size: medium`),this._size="medium")}connectedCallback(){super.connectedCallback(),this.validateDependencies(),this.autoFocus&&requestAnimationFrame((()=>{this.focus()}))}updated(e){super.updated(e),this.setAttribute("data-theme",this.currentTheme)}getCommonAttributes(){return{"data-theme":this.currentTheme,"data-size":this.size}}handleLabelClick(e){this.disabled||(e.preventDefault(),this.checked=!this.checked,this.dispatchEvent(new CustomEvent("nr-change",{detail:{checked:this.checked,value:this.value},bubbles:!0})))}render(){var e,r,c;const o=this.getCommonAttributes();return a`
327
+ <input
328
+ type="checkbox"
329
+ .checked=${this.checked}
330
+ .disabled=${this.disabled}
331
+ .indeterminate=${this.indeterminate}
332
+ name=${null!==(e=this.name)&&void 0!==e?e:""}
333
+ value=${null!==(r=this.value)&&void 0!==r?r:""}
334
+ id=${this.id}
335
+ title=${this.title}
336
+ ?required=${this.required}
337
+ data-theme="${o["data-theme"]}"
338
+ data-size="${o["data-size"]}"
339
+ aria-checked=${this.indeterminate?"mixed":this.checked?"true":"false"}
340
+ aria-disabled=${this.disabled?"true":"false"}
341
+ tabindex=${this.disabled?-1:null!==(c=this.tabIndex)&&void 0!==c?c:0}
342
+ @change=${this.handleChange}
343
+ @focus=${this.handleFocus}
344
+ @blur=${this.handleBlur}
345
+ @keydown=${this.handleKeydown}
346
+ @mouseenter=${this.handleMouseEnter}
347
+ @mouseleave=${this.handleMouseLeave}
348
+ />
349
+ <label class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
350
+ <slot></slot>
351
+ </label>
352
+ `}};s.styles=t,h([c({type:Boolean,reflect:!0})],s.prototype,"checked",void 0),h([c({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),h([c({type:Boolean,reflect:!0})],s.prototype,"indeterminate",void 0),h([c({reflect:!0})],s.prototype,"size",null),h([c({type:String})],s.prototype,"name",void 0),h([c({type:String})],s.prototype,"value",void 0),h([c({type:Boolean})],s.prototype,"autoFocus",void 0),h([c({type:String})],s.prototype,"title",void 0),h([c({type:Number})],s.prototype,"tabIndex",void 0),h([c({type:Boolean})],s.prototype,"required",void 0),h([c({type:String})],s.prototype,"id",void 0),s=h([o("nr-checkbox")],s);export{s as NrCheckboxElement};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuralyui/checkbox",
3
- "version": "0.0.10",
3
+ "version": "0.0.11",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",