@politiet/sheriff-web-components 2.0.0-beta.1 → 2.0.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/frameworks/react.d.ts +1 -1
- package/dist/frameworks/react.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextAreaWrapper.d.ts +2 -2
- package/dist/react-wrappers/SDSTextAreaWrapper.d.ts.map +1 -1
- package/dist/react-wrappers/SDSTextAreaWrapper.js +2 -2
- package/dist/react-wrappers/SDSTextAreaWrapper.js.map +1 -1
- package/dist/react-wrappers/index.d.ts +2 -0
- package/dist/react-wrappers/index.d.ts.map +1 -1
- package/dist/react-wrappers/index.js +2 -0
- package/dist/react-wrappers/index.js.map +1 -1
- package/dist/sds-alert/sds-alert.d.ts +6 -4
- package/dist/sds-alert/sds-alert.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.js +11 -6
- package/dist/sds-alert/sds-alert.js.map +1 -1
- package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
- package/dist/sds-alert/sds-alert.styles.js +56 -69
- package/dist/sds-alert/sds-alert.styles.js.map +1 -1
- package/dist/sds-button/sds-button.d.ts +1 -4
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +3 -14
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
- package/dist/sds-button/sds-button.styles.js +17 -62
- package/dist/sds-button/sds-button.styles.js.map +1 -1
- package/dist/sds-card/sds-card.styles.js +5 -5
- package/dist/sds-card/sds-card.styles.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +1 -0
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.styles.js +35 -26
- package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +4 -0
- package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +10 -1
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +26 -25
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-icon/sds-icon-loader.d.ts +2 -0
- package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon-loader.js +9 -0
- package/dist/sds-icon/sds-icon-loader.js.map +1 -1
- package/dist/sds-icon/sds-icon.system.d.ts +6 -0
- package/dist/sds-icon/sds-icon.system.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.system.js +24 -0
- package/dist/sds-icon/sds-icon.system.js.map +1 -0
- package/dist/sds-loader/sds-loader.d.ts +2 -3
- package/dist/sds-loader/sds-loader.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.js +4 -17
- package/dist/sds-loader/sds-loader.js.map +1 -1
- package/dist/sds-loader/sds-loader.styles.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.styles.js +12 -17
- package/dist/sds-loader/sds-loader.styles.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +3 -1
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.styles.js +24 -20
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +1 -1
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.styles.js +4 -0
- package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js +1 -0
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-switch/sds-switch.styles.js +2 -2
- package/dist/sds-switch/sds-switch.styles.js.map +1 -1
- package/dist/sds-tag/sds-tag.d.ts +1 -4
- package/dist/sds-tag/sds-tag.d.ts.map +1 -1
- package/dist/sds-tag/sds-tag.js +0 -4
- package/dist/sds-tag/sds-tag.js.map +1 -1
- package/dist/sds-tag/sds-tag.styles.d.ts.map +1 -1
- package/dist/sds-tag/sds-tag.styles.js +12 -38
- package/dist/sds-tag/sds-tag.styles.js.map +1 -1
- package/dist/sds-text/sds-text.styles.js +1 -1
- package/dist/sds-text/sds-text.styles.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.js +4 -2
- package/dist/sds-textarea/sds-textarea.js.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
- package/dist/sds-textarea/sds-textarea.styles.js +8 -2
- package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +2 -2
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.styles.js +9 -9
- package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
- package/dist/sheriff-web-components.js +286 -322
- package/package.json +143 -143
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
5
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
4
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
5
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
6
6
|
--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));
|
|
7
7
|
--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));
|
|
8
8
|
--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));
|
|
@@ -10,14 +10,14 @@ export const styles = css `
|
|
|
10
10
|
--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));
|
|
11
11
|
--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));
|
|
12
12
|
--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));
|
|
13
|
-
--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
13
|
+
--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));
|
|
14
14
|
--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));
|
|
15
15
|
--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));
|
|
16
16
|
--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));
|
|
17
17
|
--_sds-button-padding-block: var(--sds-button-padding-block, 0);
|
|
18
18
|
--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));
|
|
19
19
|
--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));
|
|
20
|
-
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-
|
|
20
|
+
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
|
|
21
21
|
|
|
22
22
|
display: inline-block;
|
|
23
23
|
box-sizing: border-box;
|
|
@@ -43,8 +43,8 @@ export const styles = css `
|
|
|
43
43
|
text-align: center;
|
|
44
44
|
|
|
45
45
|
&:hover {
|
|
46
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
47
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
46
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
47
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
&:focus-visible {
|
|
@@ -54,8 +54,8 @@ export const styles = css `
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
&:active {
|
|
57
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
58
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
57
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
58
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&:disabled {
|
|
@@ -70,78 +70,33 @@ export const styles = css `
|
|
|
70
70
|
text-decoration: none;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
:host([color='danger']) {
|
|
74
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-default));
|
|
75
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
|
|
76
|
-
|
|
77
|
-
.sds-button:hover {
|
|
78
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-hover));
|
|
79
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-hover));
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.sds-button:active {
|
|
83
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-action-active));
|
|
84
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-active));
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
73
|
:host([variant='secondary']) {
|
|
89
74
|
--_sds-button-background-color: var(--sds-button-background-color, transparent);
|
|
90
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
91
|
-
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-
|
|
75
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
76
|
+
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
92
77
|
|
|
93
78
|
.sds-button:hover {
|
|
94
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
79
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
|
|
95
80
|
}
|
|
96
81
|
|
|
97
82
|
.sds-button:active {
|
|
98
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
83
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-hover)));
|
|
99
84
|
}
|
|
100
85
|
}
|
|
101
86
|
|
|
102
87
|
:host([variant='tertiary']) {
|
|
103
88
|
--_sds-button-background-color: var(--sds-button-background-color, transparent);
|
|
104
89
|
--_sds-button-border-color: var(--sds-button-border-color, transparent);
|
|
105
|
-
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-
|
|
106
|
-
|
|
107
|
-
.sds-button:hover {
|
|
108
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-hover));
|
|
109
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-hover));
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.sds-button:active {
|
|
113
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-accent-surface-active));
|
|
114
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-accent-surface-active));
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
:host([variant='secondary']):host([color='danger']) {
|
|
119
|
-
--_sds-button-background-color: var(--sds-button-background-color, transparent);
|
|
120
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-alert-danger-action-default));
|
|
121
|
-
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
|
|
122
|
-
|
|
123
|
-
.sds-button:hover {
|
|
124
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-hover));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.sds-button:active {
|
|
128
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-alert-danger-surface-active));
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
:host([variant='tertiary']):host([color='danger']) {
|
|
133
|
-
--_sds-button-background-color: var(--sds-button-background-color, transparent);
|
|
134
|
-
--_sds-button-border-color: var(--sds-button-border-color, transparent);
|
|
135
|
-
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-alert-danger-action-default));
|
|
90
|
+
--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
|
|
136
91
|
|
|
137
92
|
.sds-button:hover {
|
|
138
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
139
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
93
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
|
|
94
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-hover, --sds-color-main-surface-hover));
|
|
140
95
|
}
|
|
141
96
|
|
|
142
97
|
.sds-button:active {
|
|
143
|
-
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-
|
|
144
|
-
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-
|
|
98
|
+
--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
99
|
+
--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
|
|
145
100
|
}
|
|
146
101
|
}
|
|
147
102
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sds-button.styles.js","sourceRoot":"","sources":["../../src/sds-button/sds-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-border-width: var(--sds-button-border-width, var(--sds-border-md));\n\t\t--_sds-button-disabled-opacity: var(--sds-button-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-button-focus-color: var(--sds-button-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-button-focus-inner-color: var(--sds-button-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-button-focus-spacing: var(--sds-button-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-button-font-family: var(--sds-button-font, var(--sds-typography-font-family-roboto));\n\t\t--_sds-button-font-size: var(--sds-button-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t--_sds-button-font-weight: var(--sds-button-font-weight, var(--sds-typography-body-md-strong-desktop-font-weight));\n\t\t--_sds-button-gap: var(--sds-button-gap, var(--sds-spacing-3xs));\n\t\t--_sds-button-line-height: var(--sds-button-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-lg));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-button-radius: var(--sds-button-radius, var(--sds-radius-sm));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-button {\n\t\talign-items: center;\n\t\tbackground-color: var(--_sds-button-background-color);\n\t\tborder-radius: var(--_sds-button-radius);\n\t\tborder: var(--_sds-button-border-width) solid var(--_sds-button-border-color);\n\t\tcolor: var(--_sds-button-text-color);\n\t\tcursor: pointer;\n\t\tdisplay: inline-flex;\n\t\tfont-family: var(--_sds-button-font-family);\n\t\tfont-size: var(--_sds-button-font-size);\n\t\tfont-weight: var(--_sds-button-font-weight);\n\t\tgap: var(--_sds-button-gap);\n\t\tinline-size: 100%;\n\t\tjustify-content: center;\n\t\tline-height: var(--_sds-button-line-height);\n\t\tmin-height: var(--_sds-button-min-height);\n\t\tpadding: var(--_sds-button-padding-block) var(--_sds-button-padding-inline);\n\t\ttext-align: center;\n\n\t\t&:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-button-focus-inner-color);\n\t\t\toutline: 3px solid var(--_sds-button-focus-color);\n\t\t\toutline-offset: 3px;\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));\n\t\t}\n\n\t\t&:disabled {\n\t\t\topacity: var(--_sds-button-disabled-opacity);\n\t\t\tcursor: not-allowed;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-button--as-link {\n\t\tinline-size: auto;\n\t\ttext-decoration: none;\n\t}\n\n\t:host([variant='secondary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-hover)));\n\t\t}\n\t}\n\n\t:host([variant='tertiary']) {\n\t\t--_sds-button-background-color: var(--sds-button-background-color, transparent);\n\t\t--_sds-button-border-color: var(--sds-button-border-color, transparent);\n\t\t--_sds-button-text-color: var(--sds-button-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\n\t\t.sds-button:hover {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-hover, --sds-color-main-surface-hover));\n\t\t}\n\n\t\t.sds-button:active {\n\t\t\t--_sds-button-background-color: var(--sds-button-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t\t--_sds-button-border-color: var(--sds-button-border-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\t}\n\n\t:host([size='medium']), /* Deprecated */\n\t:host([size='md']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-md));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, var(--sds-spacing-4xs));\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-button-min-height: var(--sds-button-height, var(--sds-components-button-sm));\n\t\t--_sds-button-padding-block: var(--sds-button-padding-block, 0);\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, var(--sds-spacing-3xs));\n\t\tfont-size: 0.875rem;\n\t}\n\n\t:host([icon]) {\n\t\t--_sds-button-padding-inline: var(--sds-button-padding-inline, 0);\n\t\tmin-width: var(--_sds-button-min-height);\n\t}\n`;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-
|
|
4
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));
|
|
5
5
|
--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
|
|
6
6
|
--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));
|
|
7
7
|
--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));
|
|
@@ -9,9 +9,9 @@ export const styles = css `
|
|
|
9
9
|
--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));
|
|
10
10
|
--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));
|
|
11
11
|
--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));
|
|
12
|
-
--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-
|
|
12
|
+
--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));
|
|
13
13
|
|
|
14
|
-
--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-
|
|
14
|
+
--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));
|
|
15
15
|
--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
|
|
16
16
|
--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));
|
|
17
17
|
--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
|
|
@@ -42,11 +42,11 @@ export const styles = css `
|
|
|
42
42
|
flex: 1;
|
|
43
43
|
|
|
44
44
|
&:hover {
|
|
45
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-
|
|
45
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
&:active {
|
|
49
|
-
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-
|
|
49
|
+
--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
&:focus-visible {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-
|
|
1
|
+
{"version":3,"file":"sds-card.styles.js","sourceRoot":"","sources":["../../src/sds-card/sds-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));\n\t\t--_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));\n\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));\n\t\t--_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));\n\t\t--_sds-card-font-family: var(--sds-card-font-family, var(--sds-typography-font-family));\n\t\t--_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));\n\n\t\t--_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));\n\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));\n\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));\n\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));\n\n\t\t--_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));\n\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));\n\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));\n\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));\n\n\t\tdisplay: flex;\n\t}\n\n\t.sds-card {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t}\n\n\t.sds-card__link {\n\t\tbackground-color: var(--_sds-card-background-color);\n\t\tborder-radius: var(--_sds-card-border-radius);\n\t\tfont-family: var(--_sds-card-font-family);\n\t\tpadding: var(--_sds-card-padding);\n\t\tgap: var(--_sds-card-gap);\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\ttext-decoration: none;\n\t\talign-items: center;\n\t\tflex: 1;\n\n\t\t&:hover {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-card-focus-inner-color);\n\t\t\toutline: var(--_sds-card-focus-spacing) solid var(--_sds-card-focus-color);\n\t\t\toutline-offset: var(--_sds-card-focus-spacing);\n\t\t}\n\t}\n\n\t.sds-card__icon {\n\t\tcolor: var(--_sds-card-icon-color);\n\t\tmargin-inline-start: auto;\n\t}\n\n\t::slotted(p) {\n\t\tcolor: var(--_sds-card-text-color) !important;\n\t\tdisplay: none !important;\n\t\tfont-size: var(--_sds-card-text-font-size) !important;\n\t\tline-height: var(--_sds-card-text-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t::slotted(h2),\n\t::slotted(h3),\n\t::slotted(h4),\n\t::slotted(h5),\n\t::slotted(h6) {\n\t\tcolor: var(--_sds-card-heading-color) !important;\n\t\tfont-size: var(--_sds-card-heading-font-size) !important;\n\t\tfont-weight: var(--_sds-card-heading-font-weight) !important;\n\t\tline-height: var(--_sds-card-heading-line-height) !important;\n\t\tmargin: 0 !important;\n\t\tmax-width: var(--sds-typography-max-line-width) !important;\n\t\ttext-wrap: pretty !important;\n\t}\n\n\t@media (min-width: 640px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-tablet-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-tablet-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-tablet-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-tablet-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-tablet-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-tablet-line-height));\n\t\t\t--_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-sm));\n\t\t}\n\n\t\t.sds-card__link {\n\t\t\tflex-direction: column;\n\t\t\talign-items: start;\n\t\t}\n\n\t\t.sds-card__icon {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t::slotted(p) {\n\t\t\tdisplay: block !important;\n\t\t}\n\t}\n\n\t@media (min-width: 1024px) {\n\t\t:host {\n\t\t\t--_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-desktop-font-size));\n\t\t\t--_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-desktop-font-weight));\n\t\t\t--_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-desktop-line-height));\n\t\t\t--_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-desktop-font-size));\n\t\t\t--_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t\t--_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-desktop-line-height));\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAClB,IAAI,EAAE,YAAY,CAAQ;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IACH,QAAQ,EAAE,OAAO,CAAS;IAE1E,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,IAAI,IAAI,IAAI,MAAM,CAEjB;IAEQ,MAAM;
|
|
1
|
+
{"version":3,"file":"sds-checkbox.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,YAAY,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,qBACa,WAAY,SAAQ,UAAU;IAE1C,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACC,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,QAAQ,UAAS;IAClB,IAAI,EAAE,YAAY,CAAQ;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IACH,QAAQ,EAAE,OAAO,CAAS;IAE1E,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IAUjB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAQ/D,iBAAiB;IAUjB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAa5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEO,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,IAAI,IAAI,IAAI,MAAM,CAEjB;IAEQ,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}
|
|
@@ -122,6 +122,7 @@ let SDSCheckbox = class SDSCheckbox extends LitElement {
|
|
|
122
122
|
type="checkbox"
|
|
123
123
|
name="${ifDefined(this.name)}"
|
|
124
124
|
value="${ifDefined(this.value)}"
|
|
125
|
+
.checked="${this.checked}"
|
|
125
126
|
?checked="${this.checked}"
|
|
126
127
|
?disabled="${this.disabled}"
|
|
127
128
|
?required="${this.required}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox.styles';\nimport { SDS_SIZES } from '../types';\n\ntype CheckboxSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tsize?: CheckboxSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\t@property({ type: String, reflect: true }) size: CheckboxSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? 'on');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked ? this.value ?? 'on' : null;\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tthis.internals.setFormValue(elem.checked ? elem.value : null);\n\t\tthis._validate();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\tget type(): string {\n\t\treturn 'checkbox';\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label for=\"control\" class=\"sds-checkbox__label\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-checkbox__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox.styles';\nimport { SDS_SIZES } from '../types';\n\ntype CheckboxSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSCheckboxProps {\n\tname?: string;\n\tlabel?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\tdisabled?: boolean;\n\terror?: boolean;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tsize?: CheckboxSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value: string }>) => void;\n\tonFocus?: (event: CustomEvent<{ checked: boolean }>) => void;\n\tonBlur?: (event: CustomEvent<{ checked: boolean }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox')\nexport class SDSCheckbox extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String }) value?: string;\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, reflect: true }) required = false;\n\t@property({ type: String, reflect: true }) size: CheckboxSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._initialChecked = this.checked;\n\t\tthis.internals.role = 'checkbox';\n\n\t\tif (this.checked) {\n\t\t\tthis.internals.setFormValue(this.value ?? 'on');\n\t\t}\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tif (this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tthis._validate();\n\t}\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tif (this.control) {\n\t\t\tthis.control.checked = this._initialChecked;\n\t\t}\n\t\tconst resetValue = this.checked ? this.value ?? 'on' : null;\n\t\tthis.internals.setFormValue(resetValue);\n\t\tthis._validate();\n\t}\n\n\tprivate _validate() {\n\t\tif (this.required && !this.checked) {\n\t\t\tthis.internals.setValidity({ valueMissing: true }, this.control.validationMessage, this.control);\n\t\t} else {\n\t\t\tthis.internals.setValidity({});\n\t\t}\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tthis.internals.setFormValue(elem.checked ? elem.value : null);\n\t\tthis._validate();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t\tif (changedProperties.has('checked')) {\n\t\t\tthis._validate();\n\t\t}\n\t}\n\n\tget type(): string {\n\t\treturn 'checkbox';\n\t}\n\n\toverride render() {\n\t\tconst checkboxClasses = {\n\t\t\t'sds-checkbox': true,\n\t\t\t'sds-checkbox--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-checkbox__input': true,\n\t\t\t'sds-checkbox__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(checkboxClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t.checked=\"${this.checked}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label for=\"control\" class=\"sds-checkbox__label\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-checkbox__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox': SDSCheckbox;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyNlB,CAAC"}
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
|
-
--_sds-checkbox-block-gap: var(--sds-checkbox-
|
|
5
|
-
--_sds-checkbox-inline-gap: var(--sds-checkbox-
|
|
4
|
+
--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));
|
|
5
|
+
--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));
|
|
6
6
|
--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));
|
|
7
7
|
|
|
8
|
-
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-md));
|
|
8
|
+
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));
|
|
9
9
|
--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
|
|
10
|
-
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-
|
|
10
|
+
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));
|
|
11
11
|
--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));
|
|
12
12
|
|
|
13
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, --sds-color-neutral-surface-default);
|
|
13
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));
|
|
14
14
|
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));
|
|
15
15
|
--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));
|
|
16
16
|
--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));
|
|
17
17
|
--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);
|
|
18
|
-
--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-
|
|
18
|
+
--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));
|
|
19
19
|
--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);
|
|
20
|
-
--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-
|
|
20
|
+
--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));
|
|
21
21
|
|
|
22
22
|
--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));
|
|
23
23
|
--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));
|
|
@@ -35,6 +35,7 @@ export const styles = css `
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.sds-checkbox {
|
|
38
|
+
align-items: start;
|
|
38
39
|
display: grid;
|
|
39
40
|
font-family: var(--_sds-checkbox-font-family);
|
|
40
41
|
gap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);
|
|
@@ -55,15 +56,19 @@ export const styles = css `
|
|
|
55
56
|
}
|
|
56
57
|
}
|
|
57
58
|
|
|
59
|
+
.sds-checkbox--error {
|
|
60
|
+
--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));
|
|
61
|
+
}
|
|
62
|
+
|
|
58
63
|
.sds-checkbox__label {
|
|
59
64
|
grid-column: content;
|
|
60
|
-
align-
|
|
65
|
+
align-self: center;
|
|
61
66
|
cursor: pointer;
|
|
62
67
|
color: var(--_sds-checkbox-label-text-color);
|
|
63
68
|
display: inline-flex;
|
|
64
69
|
font-size: var(--_sds-checkbox-label-font-size);
|
|
65
70
|
font-weight: var(--_sds-checkbox-label-font-weight);
|
|
66
|
-
gap: var(--_sds-checkbox-
|
|
71
|
+
gap: var(--_sds-checkbox-inline-gap);
|
|
67
72
|
line-height: var(--_sds-checkbox-label-line-height);
|
|
68
73
|
}
|
|
69
74
|
|
|
@@ -95,8 +100,8 @@ export const styles = css `
|
|
|
95
100
|
}
|
|
96
101
|
|
|
97
102
|
&[checked] {
|
|
98
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-
|
|
99
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-
|
|
103
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));
|
|
104
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));
|
|
100
105
|
|
|
101
106
|
&::after {
|
|
102
107
|
content: '';
|
|
@@ -106,7 +111,7 @@ export const styles = css `
|
|
|
106
111
|
background-color: var(--_sds-checkbox-input-icon-color);
|
|
107
112
|
transform-origin: bottom left;
|
|
108
113
|
clip-path: path(
|
|
109
|
-
'
|
|
114
|
+
'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'
|
|
110
115
|
);
|
|
111
116
|
transform: translate(-2px, -2px);
|
|
112
117
|
}
|
|
@@ -121,21 +126,21 @@ export const styles = css `
|
|
|
121
126
|
}
|
|
122
127
|
|
|
123
128
|
&:hover {
|
|
124
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-
|
|
129
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
|
|
125
130
|
}
|
|
126
131
|
|
|
127
132
|
&:active:not([readonly]) {
|
|
128
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-
|
|
133
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
|
|
129
134
|
}
|
|
130
135
|
|
|
131
136
|
&[checked]:hover {
|
|
132
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-
|
|
133
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-
|
|
137
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));
|
|
138
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
|
|
134
139
|
}
|
|
135
140
|
|
|
136
141
|
&[checked]:active:not([readonly]) {
|
|
137
|
-
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-
|
|
138
|
-
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-
|
|
142
|
+
--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));
|
|
143
|
+
--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
|
|
139
144
|
}
|
|
140
145
|
|
|
141
146
|
&:focus-visible {
|
|
@@ -181,12 +186,14 @@ export const styles = css `
|
|
|
181
186
|
}
|
|
182
187
|
|
|
183
188
|
:host([size='sm']) {
|
|
184
|
-
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-sm));
|
|
185
|
-
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-
|
|
186
|
-
--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-
|
|
189
|
+
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));
|
|
190
|
+
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));
|
|
191
|
+
--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));
|
|
187
192
|
|
|
188
193
|
.sds-checkbox__input:checked::after {
|
|
189
|
-
|
|
194
|
+
clip-path: path(
|
|
195
|
+
'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'
|
|
196
|
+
);
|
|
190
197
|
}
|
|
191
198
|
|
|
192
199
|
.sds-checkbox__label {
|
|
@@ -195,12 +202,14 @@ export const styles = css `
|
|
|
195
202
|
}
|
|
196
203
|
|
|
197
204
|
:host([size='lg']) {
|
|
198
|
-
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-lg));
|
|
199
|
-
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-
|
|
200
|
-
--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-
|
|
205
|
+
--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));
|
|
206
|
+
--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));
|
|
207
|
+
--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));
|
|
201
208
|
|
|
202
209
|
.sds-checkbox__input:checked::after {
|
|
203
|
-
|
|
210
|
+
clip-path: path(
|
|
211
|
+
'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'
|
|
212
|
+
);
|
|
204
213
|
}
|
|
205
214
|
|
|
206
215
|
.sds-checkbox__label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-label-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, --sds-color-neutral-surface-default);\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-radio-check-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-accent-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-label-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-default));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-default));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M13.1678 4.91802C13.5583 4.52749 14.1913 4.52749 14.5819 4.91802C14.9724 5.30854 14.9724 5.94156 14.5819 6.33208L8.20686 12.7071C8.01933 12.8946 7.76501 13 7.49983 13C7.23464 13 6.98032 12.8946 6.79279 12.7071L3.41779 9.33208C3.0273 8.94158 3.02735 8.30855 3.41779 7.91802C3.78391 7.5519 4.36291 7.52931 4.75569 7.84966L4.83186 7.91802L7.49983 10.586L13.1678 4.91802Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-hover));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-hover));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-accent-action-active));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-accent-action-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\ttransform: translate(-3px, -3px);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-radio-check-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\ttransform: translate(-1px, -1px);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"sds-checkbox.styles.js","sourceRoot":"","sources":["../../src/sds-checkbox/sds-checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-checkbox-block-gap: var(--sds-checkbox-block-gap, var(--sds-spacing-4xs));\n\t\t--_sds-checkbox-inline-gap: var(--sds-checkbox-inline-gap, var(--sds-spacing-3xs));\n\t\t--_sds-checkbox-font-family: var(--sds-checkbox-font-family, var(--sds-typography-font-family-roboto));\n\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));\n\n\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));\n\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));\n\t\t--_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));\n\t\t--_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));\n\t\t--_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-width, var(--sds-components-icon-md));\n\t\t--_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);\n\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));\n\n\t\t--_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));\n\t\t--_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));\n\t\t--_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-checkbox-focus-color-outer: var(--sds-checkbox-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-checkbox-focus-color-inner: var(--sds-checkbox-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-checkbox-focus-spacing: var(--sds-checkbox-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-checkbox-focus-radius: var(--sds-checkbox-focus-radius, var(--sds-radius-xs));\n\n\t\t--_sds-checkbox-disabled-opacity: var(--sds-checkbox-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-checkbox {\n\t\talign-items: start;\n\t\tdisplay: grid;\n\t\tfont-family: var(--_sds-checkbox-font-family);\n\t\tgap: var(--_sds-checkbox-block-gap) var(--_sds-checkbox-inline-gap);\n\t\tgrid-template-areas: 'input content';\n\t\tgrid-template-columns: auto 1fr;\n\t\twidth: fit-content;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t\topacity: var(--_sds-checkbox-disabled-opacity);\n\t\t}\n\n\t\t&:has(:focus-visible) {\n\t\t\toutline: var(--_sds-checkbox-focus-spacing) solid var(--_sds-checkbox-focus-color-outer);\n\t\t\toutline-offset: calc(var(--_sds-checkbox-focus-spacing) * 2);\n\t\t\tborder-radius: var(--_sds-checkbox-focus-radius);\n\t\t}\n\t}\n\n\t.sds-checkbox--error {\n\t\t--_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-alert-danger-text-default));\n\t}\n\n\t.sds-checkbox__label {\n\t\tgrid-column: content;\n\t\talign-self: center;\n\t\tcursor: pointer;\n\t\tcolor: var(--_sds-checkbox-label-text-color);\n\t\tdisplay: inline-flex;\n\t\tfont-size: var(--_sds-checkbox-label-font-size);\n\t\tfont-weight: var(--_sds-checkbox-label-font-weight);\n\t\tgap: var(--_sds-checkbox-inline-gap);\n\t\tline-height: var(--_sds-checkbox-label-line-height);\n\t}\n\n\t.sds-checkbox__input {\n\t\tgrid-column: input;\n\t\tgrid-row: 1;\n\t\tappearance: none;\n\t\tbackground-color: var(--_sds-checkbox-input-background-color);\n\t\tcursor: pointer;\n\t\twidth: var(--_sds-checkbox-input-size);\n\t\theight: var(--_sds-checkbox-input-size);\n\t\taspect-ratio: var(--_sds-checkbox-input-aspect-ratio);\n\t\tborder-width: var(--_sds-checkbox-input-border-width);\n\t\tborder-style: var(--_sds-checkbox-input-border-style);\n\t\tborder-color: var(--_sds-checkbox-input-border-color);\n\t\tborder-radius: var(--_sds-checkbox-input-border-radius);\n\t\tmargin: 0;\n\n\t\t&[readonly] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\n\t\t\t& + .sds-checkbox__label {\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&[checked] {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: var(--_sds-checkbox-input-size);\n\t\t\t\theight: var(--_sds-checkbox-input-size);\n\t\t\t\tbackground-color: var(--_sds-checkbox-input-icon-color);\n\t\t\t\ttransform-origin: bottom left;\n\t\t\t\tclip-path: path(\n\t\t\t\t\t'M17.7929 6.79302C18.1834 6.40249 18.8164 6.40249 19.2069 6.79302C19.5974 7.18354 19.5974 7.81656 19.2069 8.20708L10.7069 16.7071C10.5194 16.8946 10.2651 17 9.99989 17C9.7347 17 9.48038 16.8946 9.29286 16.7071L4.79286 12.2071C4.40236 11.8166 4.40241 11.1835 4.79286 10.793C5.18338 10.4025 5.81639 10.4025 6.20692 10.793L9.99989 14.586L17.7929 6.79302Z'\n\t\t\t\t);\n\t\t\t\ttransform: translate(-2px, -2px);\n\t\t\t}\n\n\t\t\t&[readonly] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));\n\t\t\t\t--_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));\n\t\t\t\tcursor: default;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&[checked]:hover {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));\n\t\t}\n\n\t\t&[checked]:active:not([readonly]) {\n\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&.sds-checkbox__input--error {\n\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t\t&[checked] {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-default));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-default));\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&:active:not([readonly]) {\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\n\t\t\t&[checked]:hover {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-hover));\n\t\t\t}\n\n\t\t\t&[checked]:active {\n\t\t\t\t--_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-alert-danger-action-active));\n\t\t\t\t--_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-alert-danger-action-active));\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-checkbox__help-text {\n\t\tgrid-column: content;\n\t\tmargin: 0;\n\t\tcolor: var(--_sds-checkbox-help-text-color);\n\t\tfont-size: var(--_sds-checkbox-help-text-font-size);\n\t\tfont-weight: var(--_sds-checkbox-help-text-font-weight);\n\t\tline-height: var(--_sds-checkbox-help-text-line-height);\n\t\tmax-width: var(--_sds-checkbox-max-line-width);\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-sm));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-sm));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M13.168 4.91815C13.5585 4.52763 14.1915 4.52763 14.582 4.91815C14.9724 5.30869 14.9725 5.94173 14.582 6.33221L8.20703 12.7072C8.01952 12.8947 7.76516 13.0002 7.5 13.0002C7.23484 13.0002 6.98049 12.8947 6.79297 12.7072L3.41797 9.33221C3.02746 8.94171 3.0275 8.30868 3.41797 7.91815C3.80849 7.52763 4.44151 7.52763 4.83203 7.91815L7.5 10.5861L13.168 4.91815Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: 1px;\n\t\t}\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-lg));\n\t\t--_sds-checkbox-input-size: var(--sds-checkbox-input-size, var(--sds-components-icon-lg));\n\n\t\t.sds-checkbox__input:checked::after {\n\t\t\tclip-path: path(\n\t\t\t\t'M23.9592 9.29327C24.3497 8.9028 24.9828 8.90291 25.3733 9.29327C25.7637 9.68381 25.7638 10.3169 25.3733 10.7073L14.0403 22.0403C13.6498 22.4306 13.0167 22.4307 12.6262 22.0403L6.62622 16.0403C6.23592 15.6499 6.23593 15.0168 6.62622 14.6263C7.0167 14.236 7.6498 14.236 8.04028 14.6263L13.3333 19.9193L23.9592 9.29327Z'\n\t\t\t);\n\t\t}\n\n\t\t.sds-checkbox__label {\n\t\t\tmargin-block-start: -1px;\n\t\t}\n\t}\n`;\n"]}
|
|
@@ -82,7 +82,7 @@ let SDSCheckboxGroup = class SDSCheckboxGroup extends LitElement {
|
|
|
82
82
|
<div class="sds-checkbox-group__checkboxes" @change=${this._handleCheckboxChange}>
|
|
83
83
|
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
84
84
|
</div>
|
|
85
|
-
${this.errorMessage ? html `<sds-alert variant="secondary"
|
|
85
|
+
${this.errorMessage ? html `<sds-alert variant="secondary" data-palette="danger"><p slot="message">${this.errorMessage}</p></sds-alert>` : nothing}
|
|
86
86
|
</fieldset>
|
|
87
87
|
`;
|
|
88
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.js","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-checkbox-group.styles';\nimport { SDS_SIZES } from '../types';\nimport { SDSCheckbox } from '../sds-checkbox/sds-checkbox';\n\ntype CheckboxGroupSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\ntype UpdatableCheckboxProps = 'readOnly' | 'disabled' | 'size' | 'error';\n\nimport '../sds-checkbox/sds-checkbox';\nimport '../sds-icon/sds-icon';\nimport '../sds-alert/sds-alert';\n\n// Props Interface\nexport interface SDSCheckboxGroupProps {\n\tlegend?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\treadonly?: boolean;\n\tdisabled?: boolean;\n\tsize?: CheckboxGroupSize;\n\tonChange?: (event: CustomEvent<{ selectedValues: string[] }>) => void;\n}\n\n@guardedCustomElement('sds-checkbox-group')\nexport class SDSCheckboxGroup extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Props\n\t@property({ type: String, reflect: true }) legend?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n\t@property({ type: String, reflect: true }) size: CheckboxGroupSize = 'md';\n\n\t@state() private _selectedValues: string[] = [];\n\t@query('slot') private _slotElement!: HTMLSlotElement;\n\n\tprivate readonly _handleCheckboxChange = (event: CustomEvent): void => {\n\t\tconst checkbox = event.target as HTMLInputElement;\n\t\tconst value = checkbox.value;\n\t\tconst isChecked = checkbox.checked;\n\n\t\tthis._selectedValues = isChecked ? [...this._selectedValues, value] : this._selectedValues.filter((v) => v !== value);\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-update', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\tprivate _handleSlotChange = () => {\n\t\tthis._updateChildProps(['readOnly', 'disabled', 'size', 'error']);\n\t};\n\n\tprivate _updateChildProps(props: UpdatableCheckboxProps[]) {\n\t\tconst checkboxChildren = this._slotElement.assignedElements({ flatten: true }) as HTMLElement[];\n\n\t\tcheckboxChildren.forEach((child) => {\n\t\t\tif (child instanceof SDSCheckbox) {\n\t\t\t\tprops.forEach((prop) => {\n\t\t\t\t\tif (prop === 'error') {\n\t\t\t\t\t\tchild.error = Boolean(this.errorMessage);\n\t\t\t\t\t} else {\n\t\t\t\t\t\t(child as any)[prop] = (this as any)[prop];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}\n\n\toverride updated(changedProps: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProps);\n\n\t\tif (changedProps.has('readonly')) {\n\t\t\tthis._updateChildProps(['readOnly']);\n\t\t}\n\t\tif (changedProps.has('disabled')) {\n\t\t\tthis._updateChildProps(['disabled']);\n\t\t}\n\t\tif (changedProps.has('size')) {\n\t\t\tthis._updateChildProps(['size']);\n\t\t}\n\t\tif (changedProps.has('errorMessage')) {\n\t\t\tthis._updateChildProps(['error']);\n\t\t}\n\t}\n\n\tget value(): {} {\n\t\treturn { selectedValues: this._selectedValues };\n\t}\n\n\toverride render() {\n\t\tconst groupClasses = {\n\t\t\t'sds-checkbox-group': true,\n\t\t\t'sds-checkbox-group--disabled': this.disabled,\n\t\t\t'sds-checkbox-group--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<fieldset class=\"${classMap(groupClasses)}\">\n\t\t\t\t${this.legend\n\t\t\t\t\t? html`<legend class=\"sds-checkbox-group__legend\">${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"md\"></sds-icon>` : nothing}</sds-icon>${this.legend}</legend>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-checkbox-group__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-checkbox-group__checkboxes\" @change=${this._handleCheckboxChange}>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage ? html`<sds-alert variant=\"secondary\" data-palette=\"danger\"><p slot=\"message\">${this.errorMessage}</p></sds-alert>` : nothing}\n\t\t\t</fieldset>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-checkbox-group': SDSCheckboxGroup;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-checkbox-group.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"sds-checkbox-group.styles.d.ts","sourceRoot":"","sources":["../../src/sds-checkbox-group/sds-checkbox-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4FlB,CAAC"}
|