@nuralyui/checkbox 0.0.7 → 0.0.9
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/bundle.js +291 -116
- package/checkbox.component.d.ts +3 -2
- package/checkbox.component.js +16 -2
- package/checkbox.component.js.map +1 -1
- package/checkbox.style.d.ts +1 -1
- package/checkbox.style.js +274 -67
- package/checkbox.style.js.map +1 -1
- package/package.json +1 -1
- package/checkbox.style.variables.d.ts +0 -2
- package/checkbox.style.variables.js +0 -38
- package/checkbox.style.variables.js.map +0 -1
package/checkbox.component.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { CheckboxSize } from './checkbox.types.js';
|
|
8
|
-
declare const NrCheckboxElement_base: (new (...args: any[]) => import("./mixins/checkbox-event-mixin.js").CheckboxEventCapable) & (new (...args: any[]) => import("./mixins/checkbox-focus-mixin.js").CheckboxFocusCapable) & (new (...args: any[]) => import("
|
|
8
|
+
declare const NrCheckboxElement_base: (new (...args: any[]) => import("./mixins/checkbox-event-mixin.js").CheckboxEventCapable) & (new (...args: any[]) => import("./mixins/checkbox-focus-mixin.js").CheckboxFocusCapable) & (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
9
9
|
/**
|
|
10
10
|
* Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.
|
|
11
11
|
*
|
|
@@ -27,7 +27,7 @@ declare const NrCheckboxElement_base: (new (...args: any[]) => import("./mixins/
|
|
|
27
27
|
* @slot default - Checkbox label content
|
|
28
28
|
*/
|
|
29
29
|
export declare class NrCheckboxElement extends NrCheckboxElement_base {
|
|
30
|
-
static styles: import("lit").CSSResult
|
|
30
|
+
static styles: import("lit").CSSResult;
|
|
31
31
|
/** Whether the checkbox is checked */
|
|
32
32
|
checked: boolean;
|
|
33
33
|
/** Whether the checkbox is disabled */
|
|
@@ -55,6 +55,7 @@ export declare class NrCheckboxElement extends NrCheckboxElement_base {
|
|
|
55
55
|
connectedCallback(): void;
|
|
56
56
|
updated(changedProperties: Map<string, any>): void;
|
|
57
57
|
private getCommonAttributes;
|
|
58
|
+
private handleLabelClick;
|
|
58
59
|
render(): import("lit").TemplateResult<1>;
|
|
59
60
|
}
|
|
60
61
|
export {};
|
package/checkbox.component.js
CHANGED
|
@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
12
12
|
import { LitElement, html } from 'lit';
|
|
13
13
|
import { customElement, property } from 'lit/decorators.js';
|
|
14
14
|
import { styles } from './checkbox.style.js';
|
|
15
|
-
import { NuralyUIBaseMixin } from '
|
|
15
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
16
16
|
import { CheckboxFocusMixin, CheckboxEventMixin } from './mixins/index.js';
|
|
17
17
|
/**
|
|
18
18
|
* Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.
|
|
@@ -93,6 +93,18 @@ let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(Check
|
|
|
93
93
|
'data-size': this.size
|
|
94
94
|
};
|
|
95
95
|
}
|
|
96
|
+
handleLabelClick(event) {
|
|
97
|
+
// Prevent double-firing when clicking the label
|
|
98
|
+
if (!this.disabled) {
|
|
99
|
+
event.preventDefault();
|
|
100
|
+
this.checked = !this.checked;
|
|
101
|
+
// Fire change event manually since we prevented the default
|
|
102
|
+
this.dispatchEvent(new CustomEvent('nr-change', {
|
|
103
|
+
detail: { checked: this.checked, value: this.value },
|
|
104
|
+
bubbles: true
|
|
105
|
+
}));
|
|
106
|
+
}
|
|
107
|
+
}
|
|
96
108
|
render() {
|
|
97
109
|
var _a, _b, _c;
|
|
98
110
|
const commonAttributes = this.getCommonAttributes();
|
|
@@ -119,7 +131,9 @@ let NrCheckboxElement = class NrCheckboxElement extends CheckboxEventMixin(Check
|
|
|
119
131
|
@mouseenter=${this.handleMouseEnter}
|
|
120
132
|
@mouseleave=${this.handleMouseLeave}
|
|
121
133
|
/>
|
|
122
|
-
<
|
|
134
|
+
<label class="checkbox-label" for=${this.id} @click=${this.handleLabelClick}>
|
|
135
|
+
<slot></slot>
|
|
136
|
+
</label>
|
|
123
137
|
`;
|
|
124
138
|
}
|
|
125
139
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"checkbox.component.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './checkbox.style.js';\nimport { CheckboxSize } from './checkbox.types.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { CheckboxFocusMixin, CheckboxEventMixin } from './mixins/index.js';\n\n/**\n * Versatile checkbox component with support for indeterminate state, theming, and multiple sizes.\n * \n * @example\n * ```html\n * <nr-checkbox>Check me</nr-checkbox>\n * <nr-checkbox checked>Already checked</nr-checkbox>\n * <nr-checkbox indeterminate>Indeterminate state</nr-checkbox>\n * <nr-checkbox size=\"large\" disabled>Large disabled</nr-checkbox>\n * ```\n * \n * @fires nr-change - Dispatched when checkbox state changes\n * @fires nr-focus - Dispatched when checkbox receives focus\n * @fires nr-blur - Dispatched when checkbox loses focus\n * @fires nr-keydown - Dispatched on keydown events\n * @fires nr-mouseenter - Dispatched when mouse enters checkbox\n * @fires nr-mouseleave - Dispatched when mouse leaves checkbox\n * \n * @slot default - Checkbox label content\n */\n\n@customElement('nr-checkbox')\nexport class NrCheckboxElement extends CheckboxEventMixin(\n CheckboxFocusMixin(\n NuralyUIBaseMixin(LitElement)\n )\n) {\n static override styles = styles;\n \n /** Whether the checkbox is checked */\n @property({type: Boolean, reflect: true})\n checked = false;\n\n /** Whether the checkbox is disabled */\n @property({type: Boolean, reflect: true})\n disabled = false;\n\n /** Whether the checkbox is in indeterminate state */\n @property({type: Boolean, reflect: true})\n indeterminate = false;\n\n /** Checkbox size (small, medium, large) */\n @property({reflect: true})\n get size(): CheckboxSize {\n return this._size;\n }\n set size(value: CheckboxSize) {\n const validSizes = [CheckboxSize.Small, CheckboxSize.Medium, CheckboxSize.Large];\n if (validSizes.includes(value)) {\n this._size = value;\n } else {\n console.warn(`Invalid size value: ${value}. Using default size: ${CheckboxSize.Medium}`);\n this._size = CheckboxSize.Medium;\n }\n }\n private _size: CheckboxSize = CheckboxSize.Medium;\n\n /** Form field name */\n @property({type: String})\n name?: string;\n\n /** Form field value */\n @property({type: String})\n value?: string;\n\n /** Whether the checkbox should be focused when mounted */\n @property({type: Boolean})\n autoFocus = false;\n\n /** Checkbox title attribute */\n @property({type: String})\n override title = '';\n\n /** Tab index */\n @property({type: Number})\n override tabIndex = 0;\n\n /** Whether the checkbox is required */\n @property({type: Boolean})\n required = false;\n\n /** Checkbox ID */\n @property({type: String})\n override id = '';\n\n // Focus/blur methods and nativeElement are now provided by CheckboxFocusMixin\n\n override connectedCallback() {\n super.connectedCallback();\n this.validateDependencies();\n \n // Handle autoFocus\n if (this.autoFocus) {\n // Use requestAnimationFrame to ensure the element is fully rendered\n requestAnimationFrame(() => {\n this.focus();\n });\n }\n }\n\n override updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n // Update data-theme attribute on host for CSS theming\n this.setAttribute('data-theme', this.currentTheme);\n }\n\n private getCommonAttributes() {\n return {\n 'data-theme': this.currentTheme,\n 'data-size': this.size\n };\n }\n\n private handleLabelClick(event: Event) {\n // Prevent double-firing when clicking the label\n if (!this.disabled) {\n event.preventDefault();\n this.checked = !this.checked;\n // Fire change event manually since we prevented the default\n this.dispatchEvent(new CustomEvent('nr-change', {\n detail: { checked: this.checked, value: this.value },\n bubbles: true\n }));\n }\n }\n\n override render() {\n const commonAttributes = this.getCommonAttributes();\n \n return html`\n <input \n type=\"checkbox\" \n .checked=${this.checked} \n .disabled=${this.disabled} \n .indeterminate=${this.indeterminate}\n name=${this.name ?? ''}\n value=${this.value ?? ''}\n id=${this.id}\n title=${this.title}\n ?required=${this.required}\n data-theme=\"${commonAttributes['data-theme']}\"\n data-size=\"${commonAttributes['data-size']}\"\n aria-checked=${this.indeterminate ? 'mixed' : (this.checked ? 'true' : 'false')}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n tabindex=${this.disabled ? -1 : (this.tabIndex ?? 0)}\n @change=${this.handleChange} \n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @keydown=${this.handleKeydown}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n />\n <label class=\"checkbox-label\" for=${this.id} @click=${this.handleLabelClick}>\n <slot></slot>\n </label>\n `;\n }\n\n // Event handling methods are now provided by CheckboxEventMixin\n}\n"]}
|
package/checkbox.style.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const styles: import("lit").CSSResult
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
2
2
|
//# sourceMappingURL=checkbox.style.d.ts.map
|
package/checkbox.style.js
CHANGED
|
@@ -1,116 +1,323 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { styleVariables } from './checkbox.style.variables.js';
|
|
3
2
|
const checkBoxStyles = css `
|
|
3
|
+
/* ========================================
|
|
4
|
+
* CHECKBOX CSS VARIABLES - FALLBACK VALUES
|
|
5
|
+
* ========================================
|
|
6
|
+
* These fallback values ensure the component works even without theme files
|
|
7
|
+
*/
|
|
8
|
+
:host {
|
|
9
|
+
/* Base checkbox appearance */
|
|
10
|
+
--nuraly-checkbox-background: var(--nuraly-color-checkbox-background, #ffffff);
|
|
11
|
+
--nuraly-checkbox-text-color: var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));
|
|
12
|
+
--nuraly-checkbox-label-color: var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));
|
|
13
|
+
|
|
14
|
+
/* Checkbox borders and outline */
|
|
15
|
+
--nuraly-checkbox-border: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);
|
|
16
|
+
--nuraly-checkbox-border-radius: var(--nuraly-border-radius-checkbox, 2px);
|
|
17
|
+
--nuraly-checkbox-border-focus: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);
|
|
18
|
+
--nuraly-checkbox-border-hover: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);
|
|
19
|
+
|
|
20
|
+
/* Checked/active states */
|
|
21
|
+
--nuraly-checkbox-checked-background: var(--nuraly-color-checkbox-checked-background, #1890ff);
|
|
22
|
+
--nuraly-checkbox-checked-border: var(--nuraly-color-checkbox-checked-border, #1890ff);
|
|
23
|
+
--nuraly-checkbox-checkmark-color: var(--nuraly-color-checkbox-checkmark, #ffffff);
|
|
24
|
+
--nuraly-checkbox-indeterminate-background: var(--nuraly-color-checkbox-indeterminate-background, #1890ff);
|
|
25
|
+
--nuraly-checkbox-indeterminate-mark-color: var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);
|
|
26
|
+
|
|
27
|
+
/* Disabled states */
|
|
28
|
+
--nuraly-checkbox-disabled-background: var(--nuraly-color-checkbox-disabled-background, #f5f5f5);
|
|
29
|
+
--nuraly-checkbox-disabled-border: var(--nuraly-color-checkbox-disabled-border, #d9d9d9);
|
|
30
|
+
--nuraly-checkbox-disabled-text-color: var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));
|
|
31
|
+
--nuraly-checkbox-disabled-checkmark-color: var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));
|
|
32
|
+
|
|
33
|
+
/* Focus states */
|
|
34
|
+
--nuraly-checkbox-focus-outline: var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));
|
|
35
|
+
|
|
36
|
+
/* Typography */
|
|
37
|
+
--nuraly-checkbox-font-family: var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);
|
|
38
|
+
--nuraly-checkbox-font-size: var(--nuraly-font-size-checkbox, 14px);
|
|
39
|
+
--nuraly-checkbox-font-weight: var(--nuraly-font-weight-checkbox, 400);
|
|
40
|
+
--nuraly-checkbox-line-height: var(--nuraly-line-height-checkbox, 1.5715);
|
|
41
|
+
|
|
42
|
+
/* Sizing */
|
|
43
|
+
--nuraly-checkbox-size-small: var(--nuraly-size-checkbox-small, 14px);
|
|
44
|
+
--nuraly-checkbox-size-medium: var(--nuraly-size-checkbox-medium, 16px);
|
|
45
|
+
--nuraly-checkbox-size-large: var(--nuraly-size-checkbox-large, 18px);
|
|
46
|
+
|
|
47
|
+
/* Spacing */
|
|
48
|
+
--nuraly-checkbox-gap: var(--nuraly-spacing-checkbox-gap, 8px);
|
|
49
|
+
--nuraly-checkbox-padding: var(--nuraly-spacing-checkbox-padding, 4px);
|
|
50
|
+
|
|
51
|
+
/* Animation */
|
|
52
|
+
--nuraly-checkbox-transition: var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));
|
|
53
|
+
|
|
54
|
+
/* ========================================
|
|
55
|
+
* LEGACY COMPATIBILITY VARIABLES
|
|
56
|
+
* ========================================
|
|
57
|
+
* Keep old variable names for backward compatibility
|
|
58
|
+
* These will be deprecated in future versions
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
/* Legacy local variables for backward compatibility */
|
|
62
|
+
--nuraly-checkbox-local-filled-background-color: var(--nuraly-checkbox-checked-background);
|
|
63
|
+
--nuraly-checkbox-local-color: var(--nuraly-checkbox-text-color);
|
|
64
|
+
--nuraly-checkbox-local-empty-background-color: var(--nuraly-checkbox-background);
|
|
65
|
+
--nuraly-checkbox-local-disabled-background-color: var(--nuraly-checkbox-disabled-background);
|
|
66
|
+
--nuraly-checkbox-local-disabled-text-color: var(--nuraly-checkbox-disabled-text-color);
|
|
67
|
+
--nuraly-checkbox-local-empty-border: var(--nuraly-checkbox-border);
|
|
68
|
+
--nuraly-checkbox-local-symbol-color: var(--nuraly-checkbox-checkmark-color);
|
|
69
|
+
--nuraly-checkbox-local-focus-border: var(--nuraly-checkbox-border-focus);
|
|
70
|
+
--nuraly-checkbox-local-focus-outline: var(--nuraly-checkbox-focus-outline);
|
|
71
|
+
--nuraly-checkbox-local-font-family: var(--nuraly-checkbox-font-family);
|
|
72
|
+
--nuraly-checkbox-local-border-radius: var(--nuraly-checkbox-border-radius);
|
|
73
|
+
--nuraly-checkbox-local-gap: var(--nuraly-checkbox-gap);
|
|
74
|
+
|
|
75
|
+
/* Legacy size variables */
|
|
76
|
+
--nuraly-checkbox-local-medium-width: var(--nuraly-checkbox-size-medium);
|
|
77
|
+
--nuraly-checkbox-local-medium-height: var(--nuraly-checkbox-size-medium);
|
|
78
|
+
--nuraly-checkbox-local-small-width: var(--nuraly-checkbox-size-small);
|
|
79
|
+
--nuraly-checkbox-local-small-height: var(--nuraly-checkbox-size-small);
|
|
80
|
+
--nuraly-checkbox-local-large-width: var(--nuraly-checkbox-size-large);
|
|
81
|
+
--nuraly-checkbox-local-large-height: var(--nuraly-checkbox-size-large);
|
|
82
|
+
|
|
83
|
+
/* Legacy checkmark sizing */
|
|
84
|
+
--nuraly-checkbox-local-small-indeterminate-size: calc(var(--nuraly-checkbox-size-small) * 0.7);
|
|
85
|
+
--nuraly-checkbox-local-large-indeterminate-size: calc(var(--nuraly-checkbox-size-large) * 0.7);
|
|
86
|
+
--nuraly-checkbox-local-medium-indeterminate-size: calc(var(--nuraly-checkbox-size-medium) * 0.7);
|
|
87
|
+
|
|
88
|
+
--nuraly-checkbox-local-small-checked-width: calc(var(--nuraly-checkbox-size-small) * 0.14);
|
|
89
|
+
--nuraly-checkbox-local-small-checked-height: calc(var(--nuraly-checkbox-size-small) * 0.5);
|
|
90
|
+
--nuraly-checkbox-local-medium-checked-width: calc(var(--nuraly-checkbox-size-medium) * 0.19);
|
|
91
|
+
--nuraly-checkbox-local-medium-checked-height: calc(var(--nuraly-checkbox-size-medium) * 0.56);
|
|
92
|
+
--nuraly-checkbox-local-large-checked-width: calc(var(--nuraly-checkbox-size-large) * 0.22);
|
|
93
|
+
--nuraly-checkbox-local-large-checked-height: calc(var(--nuraly-checkbox-size-large) * 0.56);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ========================================
|
|
97
|
+
* CHECKBOX COMPONENT STYLES
|
|
98
|
+
* ========================================
|
|
99
|
+
* Modern checkbox component with theme-aware styling
|
|
100
|
+
* Uses CSS custom properties for consistent theming
|
|
101
|
+
*/
|
|
102
|
+
|
|
4
103
|
:host {
|
|
5
104
|
display: flex;
|
|
6
105
|
align-items: center;
|
|
7
106
|
flex-wrap: wrap;
|
|
8
|
-
gap: var(--
|
|
9
|
-
font-family: var(--
|
|
10
|
-
|
|
107
|
+
gap: var(--nuraly-checkbox-gap);
|
|
108
|
+
font-family: var(--nuraly-checkbox-font-family);
|
|
109
|
+
font-size: var(--nuraly-checkbox-font-size);
|
|
110
|
+
font-weight: var(--nuraly-checkbox-font-weight);
|
|
111
|
+
line-height: var(--nuraly-checkbox-line-height);
|
|
112
|
+
color: var(--nuraly-checkbox-text-color);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
transition: var(--nuraly-checkbox-transition);
|
|
11
115
|
}
|
|
12
116
|
|
|
117
|
+
/* ========================================
|
|
118
|
+
* CHECKBOX INPUT ELEMENT STYLES
|
|
119
|
+
* ======================================== */
|
|
120
|
+
|
|
121
|
+
input {
|
|
122
|
+
appearance: none;
|
|
123
|
+
-webkit-appearance: none;
|
|
124
|
+
-moz-appearance: none;
|
|
125
|
+
cursor: pointer;
|
|
126
|
+
position: relative;
|
|
127
|
+
border-radius: var(--nuraly-checkbox-border-radius);
|
|
128
|
+
background-color: var(--nuraly-checkbox-background);
|
|
129
|
+
border: var(--nuraly-checkbox-border);
|
|
130
|
+
transition: var(--nuraly-checkbox-transition);
|
|
131
|
+
margin: 0;
|
|
132
|
+
outline: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* ========================================
|
|
136
|
+
* SIZE VARIATIONS
|
|
137
|
+
* ======================================== */
|
|
138
|
+
|
|
139
|
+
/* Medium size (default) */
|
|
140
|
+
input {
|
|
141
|
+
width: var(--nuraly-checkbox-size-medium);
|
|
142
|
+
height: var(--nuraly-checkbox-size-medium);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
:host([size='small']) input {
|
|
146
|
+
width: var(--nuraly-checkbox-size-small);
|
|
147
|
+
height: var(--nuraly-checkbox-size-small);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:host([size='large']) input {
|
|
151
|
+
width: var(--nuraly-checkbox-size-large);
|
|
152
|
+
height: var(--nuraly-checkbox-size-large);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* ========================================
|
|
156
|
+
* CHECKBOX STATE STYLES
|
|
157
|
+
* ======================================== */
|
|
158
|
+
|
|
159
|
+
/* Empty/unchecked state */
|
|
13
160
|
:host(:not([checked]):not([indeterminate]):not([disabled])) input {
|
|
14
|
-
background-color: var(--
|
|
15
|
-
border: var(--
|
|
161
|
+
background-color: var(--nuraly-checkbox-background);
|
|
162
|
+
border: var(--nuraly-checkbox-border);
|
|
16
163
|
}
|
|
17
164
|
|
|
165
|
+
/* Checked and indeterminate states */
|
|
18
166
|
:host(:not([disabled])[checked]) input,
|
|
19
167
|
:host(:not([disabled])[indeterminate]) input {
|
|
20
|
-
background-color: var(--
|
|
168
|
+
background-color: var(--nuraly-checkbox-checked-background);
|
|
169
|
+
border: 1px solid var(--nuraly-checkbox-checked-border);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Hover states for interactive elements */
|
|
173
|
+
:host(:not([disabled]):hover) input {
|
|
174
|
+
border: var(--nuraly-checkbox-border-hover);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host(:not([disabled]):hover[checked]) input,
|
|
178
|
+
:host(:not([disabled]):hover[indeterminate]) input {
|
|
179
|
+
background-color: var(--nuraly-checkbox-checked-background);
|
|
180
|
+
border: 1px solid var(--nuraly-checkbox-border-hover);
|
|
181
|
+
filter: brightness(1.1);
|
|
21
182
|
}
|
|
183
|
+
|
|
184
|
+
/* Focus states */
|
|
185
|
+
input:focus,
|
|
186
|
+
input:focus-visible {
|
|
187
|
+
border: var(--nuraly-checkbox-border-focus);
|
|
188
|
+
outline: var(--nuraly-checkbox-focus-outline);
|
|
189
|
+
outline-offset: 2px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* ========================================
|
|
193
|
+
* DISABLED STATE
|
|
194
|
+
* ======================================== */
|
|
195
|
+
|
|
22
196
|
:host([disabled]) {
|
|
23
|
-
color: var(--
|
|
197
|
+
color: var(--nuraly-checkbox-disabled-text-color);
|
|
198
|
+
cursor: not-allowed;
|
|
24
199
|
}
|
|
200
|
+
|
|
25
201
|
:host([disabled]) input {
|
|
26
|
-
background-color: var(--
|
|
202
|
+
background-color: var(--nuraly-checkbox-disabled-background);
|
|
203
|
+
border: 1px solid var(--nuraly-checkbox-disabled-border);
|
|
27
204
|
cursor: not-allowed;
|
|
28
205
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
border-radius: var(--hybrid-checkbox-border-radius, var(--hybrid-checkbox-local-border-radius));
|
|
36
|
-
}
|
|
206
|
+
|
|
207
|
+
/* ========================================
|
|
208
|
+
* CHECKMARK AND INDETERMINATE SYMBOLS
|
|
209
|
+
* ======================================== */
|
|
210
|
+
|
|
211
|
+
/* Base symbol styling */
|
|
37
212
|
input:after {
|
|
38
|
-
color: var(--
|
|
213
|
+
color: var(--nuraly-checkbox-checkmark-color);
|
|
39
214
|
position: absolute;
|
|
40
215
|
left: 50%;
|
|
41
216
|
top: 50%;
|
|
42
217
|
transform: translate(-50%, -51%);
|
|
43
|
-
|
|
44
|
-
input:focus {
|
|
45
|
-
border: var(--hybrid-checkbox-focus-border, var(--hybrid-checkbox-local-focus-border));
|
|
46
|
-
outline: var(--hybrid-checkbox-focus-outline, var(--hybrid-checkbox-local-focus-outline));
|
|
47
|
-
}
|
|
48
|
-
:host([size='large']) input {
|
|
49
|
-
width: var(--hybrid-checkbox-large-width, var(--hybrid-checkbox-local-large-width));
|
|
50
|
-
height: var(--hybrid-checkbox-large-height, var(--hybrid-checkbox-local-large-height));
|
|
51
|
-
}
|
|
52
|
-
:host([size='small']) input {
|
|
53
|
-
width: var(--hybrid-checkbox-small-width, var(--hybrid-checkbox-local-small-width));
|
|
54
|
-
height: var(--hybrid-checkbox-small-height, var(--hybrid-checkbox-local-small-height));
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([indeterminate][size='medium']) input:after {
|
|
58
|
-
font-size: var(--hybrid-checkbox-medium-indeterminate-size, var(--hybrid-checkbox-local-medium-indeterminate-size));
|
|
59
|
-
}
|
|
60
|
-
:host([indeterminate][size='large']) input:after {
|
|
61
|
-
font-size: var(--hybrid-checkbox-large-indeterminate-size, var(--hybrid-checkbox-local-large-indeterminate-size));
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
:host([indeterminate][size='small']) input:after {
|
|
65
|
-
font-size: var(--hybrid-checkbox-small-indeterminate-size, var(--hybrid-checkbox-local-small-indeterminate-size));
|
|
218
|
+
transition: var(--nuraly-checkbox-transition);
|
|
66
219
|
}
|
|
67
220
|
|
|
221
|
+
/* Checked state checkmark */
|
|
68
222
|
:host([checked]) input:after {
|
|
69
|
-
border: solid;
|
|
223
|
+
border: solid var(--nuraly-checkbox-checkmark-color);
|
|
70
224
|
border-width: 0 2px 2px 0;
|
|
71
225
|
transform: translate(-50%, -51%) rotate(45deg);
|
|
72
226
|
content: '';
|
|
227
|
+
width: var(--nuraly-checkbox-local-medium-checked-width); /* Default to medium size */
|
|
228
|
+
height: var(--nuraly-checkbox-local-medium-checked-height); /* Default to medium size */
|
|
73
229
|
}
|
|
230
|
+
|
|
231
|
+
/* Checkmark sizing per size variant */
|
|
74
232
|
:host([checked][size='small']) input:after {
|
|
75
|
-
width: var(--
|
|
76
|
-
height: var(--
|
|
77
|
-
}
|
|
78
|
-
:host([checked][size='large']) input:after {
|
|
79
|
-
width: var(--hybrid-checkbox-large-checked-width, var(--hybrid-checkbox-local-large-checked-width));
|
|
80
|
-
height: var(--hybrid-checkbox-large-checked-height, var(--hybrid-checkbox-local-large-checked-height));
|
|
233
|
+
width: var(--nuraly-checkbox-local-small-checked-width);
|
|
234
|
+
height: var(--nuraly-checkbox-local-small-checked-height);
|
|
81
235
|
}
|
|
236
|
+
|
|
82
237
|
:host([checked][size='medium']) input:after {
|
|
83
|
-
width: var(--
|
|
84
|
-
height: var(--
|
|
238
|
+
width: var(--nuraly-checkbox-local-medium-checked-width);
|
|
239
|
+
height: var(--nuraly-checkbox-local-medium-checked-height);
|
|
85
240
|
}
|
|
86
241
|
|
|
242
|
+
:host([checked][size='large']) input:after {
|
|
243
|
+
width: var(--nuraly-checkbox-local-large-checked-width);
|
|
244
|
+
height: var(--nuraly-checkbox-local-large-checked-height);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Indeterminate state symbol */
|
|
87
248
|
:host([indeterminate]:not([checked])) input:after {
|
|
88
249
|
content: '-';
|
|
250
|
+
color: var(--nuraly-checkbox-indeterminate-mark-color);
|
|
251
|
+
font-weight: bold;
|
|
252
|
+
transform: translate(-50%, -51%);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Indeterminate symbol sizing per size variant */
|
|
256
|
+
:host([indeterminate][size='small']) input:after {
|
|
257
|
+
font-size: var(--nuraly-checkbox-local-small-indeterminate-size);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:host([indeterminate][size='medium']) input:after {
|
|
261
|
+
font-size: var(--nuraly-checkbox-local-medium-indeterminate-size);
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
:host([indeterminate][size='large']) input:after {
|
|
265
|
+
font-size: var(--nuraly-checkbox-local-large-indeterminate-size);
|
|
89
266
|
}
|
|
267
|
+
|
|
268
|
+
/* Empty state - no symbol */
|
|
90
269
|
:host(:not([checked]):not([indeterminate])) input:after {
|
|
91
270
|
content: '';
|
|
92
271
|
}
|
|
93
272
|
|
|
94
273
|
/* ========================================
|
|
95
|
-
*
|
|
96
|
-
* ========================================
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
274
|
+
* DISABLED STATE SYMBOLS
|
|
275
|
+
* ======================================== */
|
|
276
|
+
|
|
277
|
+
:host([disabled]) input:after {
|
|
278
|
+
color: var(--nuraly-checkbox-disabled-checkmark-color);
|
|
279
|
+
border-color: var(--nuraly-checkbox-disabled-checkmark-color);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* ========================================
|
|
283
|
+
* LABEL TEXT STYLING
|
|
284
|
+
* ======================================== */
|
|
285
|
+
|
|
286
|
+
.checkbox-label {
|
|
287
|
+
flex: 1;
|
|
288
|
+
cursor: pointer;
|
|
289
|
+
user-select: none;
|
|
290
|
+
transition: var(--nuraly-checkbox-transition);
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
:host([disabled]) .checkbox-label {
|
|
294
|
+
cursor: not-allowed;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* ========================================
|
|
298
|
+
* ACCESSIBILITY IMPROVEMENTS
|
|
299
|
+
* ======================================== */
|
|
300
|
+
|
|
301
|
+
@media (prefers-reduced-motion: reduce) {
|
|
302
|
+
:host,
|
|
303
|
+
input,
|
|
304
|
+
input:after,
|
|
305
|
+
.checkbox-label {
|
|
306
|
+
transition: none;
|
|
307
|
+
}
|
|
109
308
|
}
|
|
110
309
|
|
|
111
|
-
|
|
112
|
-
|
|
310
|
+
/* High contrast mode support */
|
|
311
|
+
@media (prefers-contrast: high) {
|
|
312
|
+
input {
|
|
313
|
+
border-width: 2px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
:host([checked]) input:after,
|
|
317
|
+
:host([indeterminate]) input:after {
|
|
318
|
+
font-weight: 900;
|
|
319
|
+
}
|
|
113
320
|
}
|
|
114
321
|
`;
|
|
115
|
-
export const styles =
|
|
322
|
+
export const styles = checkBoxStyles;
|
|
116
323
|
//# sourceMappingURL=checkbox.style.js.map
|
package/checkbox.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAE7D,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GzB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './checkbox.style.variables.js';\n\nconst checkBoxStyles = css`\n :host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--hybrid-checkbox-gap, var(--hybrid-checkbox-local-gap));\n font-family: var(--hybrid-checkbox-font-family, var(--hybrid-checkbox-local-font-family));\n color: var(--hybrid-checkbox-color, var(--hybrid-checkbox-local-color));\n }\n\n :host(:not([checked]):not([indeterminate]):not([disabled])) input {\n background-color: var(--hybrid-checkbox-empty-background-color, var(--hybrid-checkbox-local-empty-background-color));\n border: var(--hybrid-checkbox-empty-border, var(--hybrid-checkbox-local-empty-border));\n }\n\n :host(:not([disabled])[checked]) input,\n :host(:not([disabled])[indeterminate]) input {\n background-color: var(--hybrid-checkbox-filled-background-color, var(--hybrid-checkbox-local-filled-background-color));\n }\n :host([disabled]) {\n color: var(--hybrid-checkbox-disabled-text-color, var(--hybrid-checkbox-local-disabled-text-color));\n }\n :host([disabled]) input {\n background-color: var(--hybrid-checkbox-disabled-background-color, var(--hybrid-checkbox-local-disabled-background-color));\n cursor: not-allowed;\n }\n input {\n appearance: none;\n width: var(--hybrid-checkbox-medium-width, var(--hybrid-checkbox-local-medium-width));\n height: var(--hybrid-checkbox-medium-height, var(--hybrid-checkbox-local-medium-height));\n cursor: pointer;\n position: relative;\n border-radius: var(--hybrid-checkbox-border-radius, var(--hybrid-checkbox-local-border-radius));\n }\n input:after {\n color: var(--hybrid-checkbox-symbol-color, var(--hybrid-checkbox-local-symbol-color));\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -51%);\n }\n input:focus {\n border: var(--hybrid-checkbox-focus-border, var(--hybrid-checkbox-local-focus-border));\n outline: var(--hybrid-checkbox-focus-outline, var(--hybrid-checkbox-local-focus-outline));\n }\n :host([size='large']) input {\n width: var(--hybrid-checkbox-large-width, var(--hybrid-checkbox-local-large-width));\n height: var(--hybrid-checkbox-large-height, var(--hybrid-checkbox-local-large-height));\n }\n :host([size='small']) input {\n width: var(--hybrid-checkbox-small-width, var(--hybrid-checkbox-local-small-width));\n height: var(--hybrid-checkbox-small-height, var(--hybrid-checkbox-local-small-height));\n }\n\n :host([indeterminate][size='medium']) input:after {\n font-size: var(--hybrid-checkbox-medium-indeterminate-size, var(--hybrid-checkbox-local-medium-indeterminate-size));\n }\n :host([indeterminate][size='large']) input:after {\n font-size: var(--hybrid-checkbox-large-indeterminate-size, var(--hybrid-checkbox-local-large-indeterminate-size));\n }\n\n :host([indeterminate][size='small']) input:after {\n font-size: var(--hybrid-checkbox-small-indeterminate-size, var(--hybrid-checkbox-local-small-indeterminate-size));\n }\n\n :host([checked]) input:after {\n border: solid;\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -51%) rotate(45deg);\n content: '';\n }\n :host([checked][size='small']) input:after {\n width: var(--hybrid-checkbox-small-checked-width, var(--hybrid-checkbox-local-small-checked-width));\n height: var(--hybrid-checkbox-small-checked-height, var(--hybrid-checkbox-local-small-checked-height));\n }\n :host([checked][size='large']) input:after {\n width: var(--hybrid-checkbox-large-checked-width, var(--hybrid-checkbox-local-large-checked-width));\n height: var(--hybrid-checkbox-large-checked-height, var(--hybrid-checkbox-local-large-checked-height));\n }\n :host([checked][size='medium']) input:after {\n width: var(--hybrid-checkbox-medium-checked-width, var(--hybrid-checkbox-local-medium-checked-width));\n height: var(--hybrid-checkbox-medium-checked-height, var(--hybrid-checkbox-local-medium-checked-height));\n }\n\n :host([indeterminate]:not([checked])) input:after {\n content: '-';\n }\n :host(:not([checked]):not([indeterminate])) input:after {\n content: '';\n }\n\n /* ========================================\n * DARK THEME OVERRIDES\n * ========================================\n * Dark theme styles using data-theme attribute on input element\n * These override the light theme defaults when data-theme=\"dark\" is applied\n */\n input[data-theme=\"dark\"] {\n --hybrid-checkbox-local-empty-border: 1px solid #ffffff;\n --hybrid-checkbox-local-empty-background-color: #161616;\n --hybrid-checkbox-local-filled-background-color: #ffffff;\n --hybrid-checkbox-local-symbol-color: #161616;\n --hybrid-checkbox-local-focus-outline: 2px solid #ffffff;\n --hybrid-checkbox-local-focus-border: 2px solid #161616;\n --hybrid-checkbox-local-disabled-background-color: #6f6f6f;\n --hybrid-checkbox-local-disabled-text-color: #6f6f6f;\n }\n\n :host([data-theme=\"dark\"]) {\n --hybrid-checkbox-local-color: #ffffff;\n }\n`;\nexport const styles = [checkBoxStyles, styleVariables];\n"]}
|
|
1
|
+
{"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+TzB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,cAAc,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst checkBoxStyles = css`\n /* ========================================\n * CHECKBOX CSS VARIABLES - FALLBACK VALUES\n * ========================================\n * These fallback values ensure the component works even without theme files\n */\n :host {\n /* Base checkbox appearance */\n --nuraly-checkbox-background: var(--nuraly-color-checkbox-background, #ffffff);\n --nuraly-checkbox-text-color: var(--nuraly-color-checkbox-text, rgba(0, 0, 0, 0.88));\n --nuraly-checkbox-label-color: var(--nuraly-color-checkbox-label, rgba(0, 0, 0, 0.88));\n\n /* Checkbox borders and outline */\n --nuraly-checkbox-border: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border, #d9d9d9);\n --nuraly-checkbox-border-radius: var(--nuraly-border-radius-checkbox, 2px);\n --nuraly-checkbox-border-focus: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-focus, #1890ff);\n --nuraly-checkbox-border-hover: var(--nuraly-border-width-checkbox, 1px) solid var(--nuraly-color-checkbox-border-hover, #40a9ff);\n\n /* Checked/active states */\n --nuraly-checkbox-checked-background: var(--nuraly-color-checkbox-checked-background, #1890ff);\n --nuraly-checkbox-checked-border: var(--nuraly-color-checkbox-checked-border, #1890ff);\n --nuraly-checkbox-checkmark-color: var(--nuraly-color-checkbox-checkmark, #ffffff);\n --nuraly-checkbox-indeterminate-background: var(--nuraly-color-checkbox-indeterminate-background, #1890ff);\n --nuraly-checkbox-indeterminate-mark-color: var(--nuraly-color-checkbox-indeterminate-mark, #ffffff);\n\n /* Disabled states */\n --nuraly-checkbox-disabled-background: var(--nuraly-color-checkbox-disabled-background, #f5f5f5);\n --nuraly-checkbox-disabled-border: var(--nuraly-color-checkbox-disabled-border, #d9d9d9);\n --nuraly-checkbox-disabled-text-color: var(--nuraly-color-checkbox-disabled-text, rgba(0, 0, 0, 0.25));\n --nuraly-checkbox-disabled-checkmark-color: var(--nuraly-color-checkbox-disabled-checkmark, rgba(0, 0, 0, 0.25));\n\n /* Focus states */\n --nuraly-checkbox-focus-outline: var(--nuraly-size-checkbox-focus-outline, 2px) solid var(--nuraly-color-checkbox-focus-outline, rgba(24, 144, 255, 0.2));\n\n /* Typography */\n --nuraly-checkbox-font-family: var(--nuraly-font-family-checkbox, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif);\n --nuraly-checkbox-font-size: var(--nuraly-font-size-checkbox, 14px);\n --nuraly-checkbox-font-weight: var(--nuraly-font-weight-checkbox, 400);\n --nuraly-checkbox-line-height: var(--nuraly-line-height-checkbox, 1.5715);\n\n /* Sizing */\n --nuraly-checkbox-size-small: var(--nuraly-size-checkbox-small, 14px);\n --nuraly-checkbox-size-medium: var(--nuraly-size-checkbox-medium, 16px);\n --nuraly-checkbox-size-large: var(--nuraly-size-checkbox-large, 18px);\n\n /* Spacing */\n --nuraly-checkbox-gap: var(--nuraly-spacing-checkbox-gap, 8px);\n --nuraly-checkbox-padding: var(--nuraly-spacing-checkbox-padding, 4px);\n\n /* Animation */\n --nuraly-checkbox-transition: var(--nuraly-transition-checkbox, all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1));\n\n /* ========================================\n * LEGACY COMPATIBILITY VARIABLES\n * ========================================\n * Keep old variable names for backward compatibility\n * These will be deprecated in future versions\n */\n\n /* Legacy local variables for backward compatibility */\n --nuraly-checkbox-local-filled-background-color: var(--nuraly-checkbox-checked-background);\n --nuraly-checkbox-local-color: var(--nuraly-checkbox-text-color);\n --nuraly-checkbox-local-empty-background-color: var(--nuraly-checkbox-background);\n --nuraly-checkbox-local-disabled-background-color: var(--nuraly-checkbox-disabled-background);\n --nuraly-checkbox-local-disabled-text-color: var(--nuraly-checkbox-disabled-text-color);\n --nuraly-checkbox-local-empty-border: var(--nuraly-checkbox-border);\n --nuraly-checkbox-local-symbol-color: var(--nuraly-checkbox-checkmark-color);\n --nuraly-checkbox-local-focus-border: var(--nuraly-checkbox-border-focus);\n --nuraly-checkbox-local-focus-outline: var(--nuraly-checkbox-focus-outline);\n --nuraly-checkbox-local-font-family: var(--nuraly-checkbox-font-family);\n --nuraly-checkbox-local-border-radius: var(--nuraly-checkbox-border-radius);\n --nuraly-checkbox-local-gap: var(--nuraly-checkbox-gap);\n\n /* Legacy size variables */\n --nuraly-checkbox-local-medium-width: var(--nuraly-checkbox-size-medium);\n --nuraly-checkbox-local-medium-height: var(--nuraly-checkbox-size-medium);\n --nuraly-checkbox-local-small-width: var(--nuraly-checkbox-size-small);\n --nuraly-checkbox-local-small-height: var(--nuraly-checkbox-size-small);\n --nuraly-checkbox-local-large-width: var(--nuraly-checkbox-size-large);\n --nuraly-checkbox-local-large-height: var(--nuraly-checkbox-size-large);\n\n /* Legacy checkmark sizing */\n --nuraly-checkbox-local-small-indeterminate-size: calc(var(--nuraly-checkbox-size-small) * 0.7);\n --nuraly-checkbox-local-large-indeterminate-size: calc(var(--nuraly-checkbox-size-large) * 0.7);\n --nuraly-checkbox-local-medium-indeterminate-size: calc(var(--nuraly-checkbox-size-medium) * 0.7);\n\n --nuraly-checkbox-local-small-checked-width: calc(var(--nuraly-checkbox-size-small) * 0.14);\n --nuraly-checkbox-local-small-checked-height: calc(var(--nuraly-checkbox-size-small) * 0.5);\n --nuraly-checkbox-local-medium-checked-width: calc(var(--nuraly-checkbox-size-medium) * 0.19);\n --nuraly-checkbox-local-medium-checked-height: calc(var(--nuraly-checkbox-size-medium) * 0.56);\n --nuraly-checkbox-local-large-checked-width: calc(var(--nuraly-checkbox-size-large) * 0.22);\n --nuraly-checkbox-local-large-checked-height: calc(var(--nuraly-checkbox-size-large) * 0.56);\n }\n\n /* ========================================\n * CHECKBOX COMPONENT STYLES\n * ========================================\n * Modern checkbox component with theme-aware styling\n * Uses CSS custom properties for consistent theming\n */\n\n :host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--nuraly-checkbox-gap);\n font-family: var(--nuraly-checkbox-font-family);\n font-size: var(--nuraly-checkbox-font-size);\n font-weight: var(--nuraly-checkbox-font-weight);\n line-height: var(--nuraly-checkbox-line-height);\n color: var(--nuraly-checkbox-text-color);\n cursor: pointer;\n transition: var(--nuraly-checkbox-transition);\n }\n\n /* ========================================\n * CHECKBOX INPUT ELEMENT STYLES\n * ======================================== */\n\n input {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n cursor: pointer;\n position: relative;\n border-radius: var(--nuraly-checkbox-border-radius);\n background-color: var(--nuraly-checkbox-background);\n border: var(--nuraly-checkbox-border);\n transition: var(--nuraly-checkbox-transition);\n margin: 0;\n outline: none;\n }\n\n /* ========================================\n * SIZE VARIATIONS\n * ======================================== */\n\n /* Medium size (default) */\n input {\n width: var(--nuraly-checkbox-size-medium);\n height: var(--nuraly-checkbox-size-medium);\n }\n\n :host([size='small']) input {\n width: var(--nuraly-checkbox-size-small);\n height: var(--nuraly-checkbox-size-small);\n }\n\n :host([size='large']) input {\n width: var(--nuraly-checkbox-size-large);\n height: var(--nuraly-checkbox-size-large);\n }\n\n /* ========================================\n * CHECKBOX STATE STYLES\n * ======================================== */\n\n /* Empty/unchecked state */\n :host(:not([checked]):not([indeterminate]):not([disabled])) input {\n background-color: var(--nuraly-checkbox-background);\n border: var(--nuraly-checkbox-border);\n }\n\n /* Checked and indeterminate states */\n :host(:not([disabled])[checked]) input,\n :host(:not([disabled])[indeterminate]) input {\n background-color: var(--nuraly-checkbox-checked-background);\n border: 1px solid var(--nuraly-checkbox-checked-border);\n }\n\n /* Hover states for interactive elements */\n :host(:not([disabled]):hover) input {\n border: var(--nuraly-checkbox-border-hover);\n }\n\n :host(:not([disabled]):hover[checked]) input,\n :host(:not([disabled]):hover[indeterminate]) input {\n background-color: var(--nuraly-checkbox-checked-background);\n border: 1px solid var(--nuraly-checkbox-border-hover);\n filter: brightness(1.1);\n }\n\n /* Focus states */\n input:focus,\n input:focus-visible {\n border: var(--nuraly-checkbox-border-focus);\n outline: var(--nuraly-checkbox-focus-outline);\n outline-offset: 2px;\n }\n\n /* ========================================\n * DISABLED STATE\n * ======================================== */\n\n :host([disabled]) {\n color: var(--nuraly-checkbox-disabled-text-color);\n cursor: not-allowed;\n }\n\n :host([disabled]) input {\n background-color: var(--nuraly-checkbox-disabled-background);\n border: 1px solid var(--nuraly-checkbox-disabled-border);\n cursor: not-allowed;\n }\n\n /* ========================================\n * CHECKMARK AND INDETERMINATE SYMBOLS\n * ======================================== */\n\n /* Base symbol styling */\n input:after {\n color: var(--nuraly-checkbox-checkmark-color);\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -51%);\n transition: var(--nuraly-checkbox-transition);\n }\n\n /* Checked state checkmark */\n :host([checked]) input:after {\n border: solid var(--nuraly-checkbox-checkmark-color);\n border-width: 0 2px 2px 0;\n transform: translate(-50%, -51%) rotate(45deg);\n content: '';\n width: var(--nuraly-checkbox-local-medium-checked-width); /* Default to medium size */\n height: var(--nuraly-checkbox-local-medium-checked-height); /* Default to medium size */\n }\n\n /* Checkmark sizing per size variant */\n :host([checked][size='small']) input:after {\n width: var(--nuraly-checkbox-local-small-checked-width);\n height: var(--nuraly-checkbox-local-small-checked-height);\n }\n\n :host([checked][size='medium']) input:after {\n width: var(--nuraly-checkbox-local-medium-checked-width);\n height: var(--nuraly-checkbox-local-medium-checked-height);\n }\n\n :host([checked][size='large']) input:after {\n width: var(--nuraly-checkbox-local-large-checked-width);\n height: var(--nuraly-checkbox-local-large-checked-height);\n }\n\n /* Indeterminate state symbol */\n :host([indeterminate]:not([checked])) input:after {\n content: '-';\n color: var(--nuraly-checkbox-indeterminate-mark-color);\n font-weight: bold;\n transform: translate(-50%, -51%);\n }\n\n /* Indeterminate symbol sizing per size variant */\n :host([indeterminate][size='small']) input:after {\n font-size: var(--nuraly-checkbox-local-small-indeterminate-size);\n }\n\n :host([indeterminate][size='medium']) input:after {\n font-size: var(--nuraly-checkbox-local-medium-indeterminate-size);\n }\n\n :host([indeterminate][size='large']) input:after {\n font-size: var(--nuraly-checkbox-local-large-indeterminate-size);\n }\n\n /* Empty state - no symbol */\n :host(:not([checked]):not([indeterminate])) input:after {\n content: '';\n }\n\n /* ========================================\n * DISABLED STATE SYMBOLS\n * ======================================== */\n\n :host([disabled]) input:after {\n color: var(--nuraly-checkbox-disabled-checkmark-color);\n border-color: var(--nuraly-checkbox-disabled-checkmark-color);\n }\n\n /* ========================================\n * LABEL TEXT STYLING\n * ======================================== */\n\n .checkbox-label {\n flex: 1;\n cursor: pointer;\n user-select: none;\n transition: var(--nuraly-checkbox-transition);\n }\n\n :host([disabled]) .checkbox-label {\n cursor: not-allowed;\n }\n\n /* ========================================\n * ACCESSIBILITY IMPROVEMENTS\n * ======================================== */\n\n @media (prefers-reduced-motion: reduce) {\n :host,\n input,\n input:after,\n .checkbox-label {\n transition: none;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n input {\n border-width: 2px;\n }\n \n :host([checked]) input:after,\n :host([indeterminate]) input:after {\n font-weight: 900;\n }\n }\n`;\n\nexport const styles = checkBoxStyles;\n"]}
|
package/package.json
CHANGED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
export const styleVariables = css `
|
|
3
|
-
:host {
|
|
4
|
-
/* Light theme defaults (local component properties) */
|
|
5
|
-
--hybrid-checkbox-local-filled-background-color: #161616;
|
|
6
|
-
--hybrid-checkbox-local-color: #000000;
|
|
7
|
-
--hybrid-checkbox-local-empty-background-color: #ffffff;
|
|
8
|
-
--hybrid-checkbox-local-disabled-background-color: #c6c6c6;
|
|
9
|
-
--hybrid-checkbox-local-disabled-text-color: #c6c6c6;
|
|
10
|
-
--hybrid-checkbox-local-empty-border: 1px solid #161616;
|
|
11
|
-
--hybrid-checkbox-local-symbol-color: #ffffff;
|
|
12
|
-
--hybrid-checkbox-local-focus-border: 2px solid #ffffff;
|
|
13
|
-
--hybrid-checkbox-local-focus-outline: 2px solid #0f62fe;
|
|
14
|
-
--hybrid-checkbox-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, SFProLocalRange;
|
|
15
|
-
--hybrid-checkbox-local-border-radius: 1px;
|
|
16
|
-
--hybrid-checkbox-local-gap: 5px;
|
|
17
|
-
|
|
18
|
-
/* Size variables */
|
|
19
|
-
--hybrid-checkbox-local-medium-width: 20px;
|
|
20
|
-
--hybrid-checkbox-local-medium-height: 20px;
|
|
21
|
-
--hybrid-checkbox-local-small-width: 15px;
|
|
22
|
-
--hybrid-checkbox-local-small-height: 15px;
|
|
23
|
-
--hybrid-checkbox-local-large-width: 25px;
|
|
24
|
-
--hybrid-checkbox-local-large-height: 25px;
|
|
25
|
-
|
|
26
|
-
--hybrid-checkbox-local-small-indeterminate-size: 10px;
|
|
27
|
-
--hybrid-checkbox-local-large-indeterminate-size: 18px;
|
|
28
|
-
--hybrid-checkbox-local-medium-indeterminate-size: 13px;
|
|
29
|
-
|
|
30
|
-
--hybrid-checkbox-local-small-checked-width: 2px;
|
|
31
|
-
--hybrid-checkbox-local-small-checked-height: 7px;
|
|
32
|
-
--hybrid-checkbox-local-medium-checked-width: 3px;
|
|
33
|
-
--hybrid-checkbox-local-medium-checked-height: 9px;
|
|
34
|
-
--hybrid-checkbox-local-large-checked-width: 4px;
|
|
35
|
-
--hybrid-checkbox-local-large-checked-height: 10px;
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
38
|
-
//# sourceMappingURL=checkbox.style.variables.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.style.variables.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmChC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* Light theme defaults (local component properties) */\n --hybrid-checkbox-local-filled-background-color: #161616;\n --hybrid-checkbox-local-color: #000000;\n --hybrid-checkbox-local-empty-background-color: #ffffff;\n --hybrid-checkbox-local-disabled-background-color: #c6c6c6;\n --hybrid-checkbox-local-disabled-text-color: #c6c6c6;\n --hybrid-checkbox-local-empty-border: 1px solid #161616;\n --hybrid-checkbox-local-symbol-color: #ffffff;\n --hybrid-checkbox-local-focus-border: 2px solid #ffffff;\n --hybrid-checkbox-local-focus-outline: 2px solid #0f62fe;\n --hybrid-checkbox-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;\n --hybrid-checkbox-local-border-radius: 1px;\n --hybrid-checkbox-local-gap: 5px;\n\n /* Size variables */\n --hybrid-checkbox-local-medium-width: 20px;\n --hybrid-checkbox-local-medium-height: 20px;\n --hybrid-checkbox-local-small-width: 15px;\n --hybrid-checkbox-local-small-height: 15px;\n --hybrid-checkbox-local-large-width: 25px;\n --hybrid-checkbox-local-large-height: 25px;\n\n --hybrid-checkbox-local-small-indeterminate-size: 10px;\n --hybrid-checkbox-local-large-indeterminate-size: 18px;\n --hybrid-checkbox-local-medium-indeterminate-size: 13px;\n\n --hybrid-checkbox-local-small-checked-width: 2px;\n --hybrid-checkbox-local-small-checked-height: 7px;\n --hybrid-checkbox-local-medium-checked-width: 3px;\n --hybrid-checkbox-local-medium-checked-height: 9px;\n --hybrid-checkbox-local-large-checked-width: 4px;\n --hybrid-checkbox-local-large-checked-height: 10px;\n }\n`;\n"]}
|