@ni/nimble-components 35.2.1 → 35.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/all-components-bundle.js +118 -50
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +106 -41
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/switch/styles.js +101 -36
  6. package/dist/esm/switch/styles.js.map +1 -1
  7. package/package.json +2 -2
package/dist/esm/switch/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { css } from '@ni/fast-element';
2
- import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
2
+ import { Black15, Black75, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
3
3
  import { display } from '../utilities/style/display';
4
- import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
4
+ import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, smallDelay } from '../theme-provider/design-tokens';
5
5
  import { Theme } from '../theme-provider/types';
6
6
  import { hexToRgbaCssColor } from '../utilities/style/colors';
7
7
  import { focusVisible } from '../utilities/style/focus';
@@ -16,7 +16,9 @@ export const styles = css `
16
16
  flex-direction: column;
17
17
  cursor: pointer;
18
18
  --ni-private-switch-height: 24px;
19
- --ni-private-switch-indicator-size: 16px;
19
+ --ni-private-switch-indicator-size: 24px;
20
+ --ni-private-switch-indicator-inner-size: 18px;
21
+ --ni-private-switch-indicator-margin: -2px;
20
22
  padding-bottom: calc(
21
23
  ${controlHeight} - var(--ni-private-switch-height)
22
24
  );
@@ -54,20 +56,36 @@ export const styles = css `
54
56
  display: flex;
55
57
  height: var(--ni-private-switch-height);
56
58
  width: calc(var(--ni-private-switch-height) * 2);
57
- background-color: ${fillHoverColor};
59
+ background-color: var(--ni-private-switch-background-color);
58
60
  border-radius: calc(var(--ni-private-switch-height) / 2);
59
61
  align-items: center;
60
- border: calc(${borderWidth} * 2) solid transparent;
62
+ border: calc(${borderWidth}) solid transparent;
61
63
  }
62
64
 
63
- :host([disabled]) .switch {
64
- background-color: var(--ni-private-switch-background-disabled-color);
65
+ :host([aria-checked='true']) .switch {
66
+ background-color: var(--ni-private-switch-background-selected-color);
67
+ }
68
+
69
+ :host([aria-checked='true']:hover) .switch {
70
+ background-color: var(--ni-private-switch-background-selected-rollover-color);
65
71
  }
66
72
 
67
73
  :host(${focusVisible}) .switch {
68
74
  border-color: ${borderHoverColor};
69
75
  }
70
76
 
77
+ :host(${focusVisible}[aria-checked='true']) .switch {
78
+ background-color: var(--ni-private-switch-background-selected-rollover-color);
79
+ }
80
+
81
+ :host([disabled]) .switch {
82
+ background-color: var(--ni-private-switch-background-disabled-color);
83
+ }
84
+
85
+ :host([disabled]:hover) .switch {
86
+ background-color: var(--ni-private-switch-background-disabled-color);
87
+ }
88
+
71
89
  .checked-indicator-spacer {
72
90
  flex-grow: 0;
73
91
  transition: flex-grow ${smallDelay} ease-in-out;
@@ -85,51 +103,81 @@ export const styles = css `
85
103
  width: var(--ni-private-switch-indicator-size);
86
104
  height: var(--ni-private-switch-indicator-size);
87
105
  border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
88
- margin: calc(
89
- calc(
90
- var(--ni-private-switch-height) - var(
91
- --ni-private-switch-indicator-size
92
- )
93
- ) /
94
- 2
95
- );
106
+ margin: var(--ni-private-switch-indicator-margin);
96
107
  border: ${borderWidth} solid
97
108
  var(--ni-private-switch-indicator-border-color);
98
109
  }
99
110
 
111
+ :host([aria-checked='true']) .checked-indicator {
112
+ border-color: var(--ni-private-switch-indicator-border-selected-color);
113
+ }
114
+
100
115
  :host(:hover) .checked-indicator {
101
116
  border: calc(${borderWidth} * 2) solid ${borderHoverColor};
102
117
  }
103
118
 
119
+ :host(${focusVisible}) .checked-indicator {
120
+ border: calc(${borderWidth} * 2) solid ${borderHoverColor};
121
+ }
122
+
104
123
  :host([disabled]) .checked-indicator {
105
- background-color: var(
106
- --ni-private-switch-indicator-background-disabled-color
107
- );
124
+ background-color: transparent;
108
125
  border: ${borderWidth} solid
109
126
  var(--ni-private-switch-indicator-border-disabled-color);
110
127
  }
111
128
 
112
- :host(${focusVisible}) .checked-indicator {
113
- border: ${borderWidth} solid ${borderHoverColor};
129
+ :host([disabled]:hover) .checked-indicator {
130
+ background-color: transparent;
131
+ border: ${borderWidth} solid
132
+ var(--ni-private-switch-indicator-border-disabled-color);
114
133
  }
115
134
 
116
- .checked-indicator-inner {
117
- width: calc(var(--ni-private-switch-indicator-size) / 2);
118
- height: calc(var(--ni-private-switch-indicator-size) / 2);
119
- border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
120
- background-color: var(--ni-private-switch-indicator-border-color);
135
+ :host([disabled]${focusVisible}) .checked-indicator {
136
+ background-color: transparent;
137
+ border: ${borderWidth} solid
138
+ var(--ni-private-switch-indicator-border-disabled-color);
139
+ }
140
+
141
+ :host([disabled]:active) .checked-indicator-inner {
142
+ background-color: var(
143
+ --ni-private-switch-indicator-border-disabled-color
144
+ );
121
145
  opacity: 0;
122
- transition: opacity ${smallDelay} ease-in-out;
123
146
  }
124
147
 
125
- :host([disabled]) .checked-indicator-inner {
148
+ :host([disabled]${focusVisible}) .checked-indicator-inner {
126
149
  background-color: var(
127
150
  --ni-private-switch-indicator-border-disabled-color
128
151
  );
152
+ opacity: 0;
153
+ }
154
+
155
+ .checked-indicator-inner {
156
+ width: var(--ni-private-switch-indicator-inner-size);
157
+ height: var(--ni-private-switch-indicator-inner-size);
158
+ border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);
159
+ opacity: 0;
129
160
  }
130
161
 
131
162
  :host([aria-checked='true']) .checked-indicator-inner {
163
+ opacity: 0;
164
+ }
165
+
166
+ :host(${focusVisible}) .checked-indicator-inner {
132
167
  opacity: 1;
168
+ background-color: var(--ni-private-switch-indicator-background-color);
169
+ border: 1px solid var(--ni-private-switch-indicator-border-selected-color);
170
+ }
171
+
172
+ :host(:active) .checked-indicator-inner {
173
+ opacity: 1;
174
+ background-color: var(--ni-private-switch-indicator-background-active-color);
175
+ }
176
+
177
+ :host([disabled]) .checked-indicator-inner {
178
+ background-color: var(
179
+ --ni-private-switch-indicator-border-disabled-color
180
+ );
133
181
  }
134
182
 
135
183
  slot[name='checked-message']::slotted(*) {
@@ -144,26 +192,43 @@ export const styles = css `
144
192
  }
145
193
  `.withBehaviors(themeBehavior(Theme.light, css `
146
194
  :host {
195
+ --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};
147
196
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
197
+ --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.6)};
198
+ --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
148
199
  --ni-private-switch-indicator-background-color: ${White};
149
- --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
150
- --ni-private-switch-indicator-border-color: ${Black91};
151
- --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
200
+ --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
201
+ --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(DigitalGreenLight, 0.3)};
202
+
203
+ --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black91, 0.3)};
204
+ --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};
205
+ --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.15)};
206
+
152
207
  }
153
208
  `), themeBehavior(Theme.dark, css `
154
209
  :host {
210
+ --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};
155
211
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
156
- --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
157
- --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.1)};
158
- --ni-private-switch-indicator-border-color: ${Black7};
159
- --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
212
+ --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(PowerGreen, 0.6)};
213
+ --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
214
+ --ni-private-switch-indicator-background-color: ${Black75};
215
+ --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.1)};
216
+ --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(PowerGreen, 0.3)};
217
+ --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(Black15, 0.3)};
218
+ --ni-private-switch-indicator-border-selected-color: ${PowerGreen};
219
+ --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black15, 0.15)};
160
220
  }
161
221
  `), themeBehavior(Theme.color, css `
162
222
  :host {
223
+ --ni-private-switch-background-color: ${hexToRgbaCssColor(White, 0.1)};
163
224
  --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
164
- --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
225
+ --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(White, 0.6)};
226
+ --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(White, 0.3)};
227
+ --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.3)};
165
228
  --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
166
- --ni-private-switch-indicator-border-color: ${White};
229
+ --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(White, 0.3)};
230
+ --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(White, 0.3)};
231
+ --ni-private-switch-indicator-border-selected-color: ${White} ;
167
232
  --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(White, 0.3)};
168
233
  }
169
234
  `));
package/dist/esm/switch/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,QAAQ;iBACP,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;4BAqBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;;;;;;;;;;;;;;;;;;;kBAuBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;;;;;;;;;;;;;CAuBvC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,KAAK;2EACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,OAAO;uEACE,iBAAiB,CACpE,OAAO,EACP,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,OAAO,EACP,IAAI,CACP;kEACiD,iBAAiB,CAC/D,OAAO,EACP,GAAG,CACN;2EAC0D,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;8DAC6C,MAAM;uEACG,iBAAiB,CACpE,MAAM,EACN,GAAG,CACN;;SAER,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;iEAEsD,iBAAiB,CAC9D,KAAK,EACL,IAAI,CACP;kEACiD,iBAAiB,CAC/D,KAAK,EACL,GAAG,CACN;2EAC0D,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;8DAC6C,KAAK;uEACI,iBAAiB,CACpE,KAAK,EACL,GAAG,CACN;;SAER,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black7,\n Black91,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlHeight,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n fillHoverColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 16px;\n padding-bottom: calc(\n ${controlHeight} - var(--ni-private-switch-height)\n );\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='unchecked-message']::slotted(*) {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) * 2);\n background-color: ${fillHoverColor};\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth} * 2) solid transparent;\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: calc(\n calc(\n var(--ni-private-switch-height) - var(\n --ni-private-switch-indicator-size\n )\n ) /\n 2\n );\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: var(\n --ni-private-switch-indicator-background-disabled-color\n );\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: ${borderWidth} solid ${borderHoverColor};\n }\n\n .checked-indicator-inner {\n width: calc(var(--ni-private-switch-indicator-size) / 2);\n height: calc(var(--ni-private-switch-indicator-size) / 2);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 4);\n background-color: var(--ni-private-switch-indicator-border-color);\n opacity: 0;\n transition: opacity ${smallDelay} ease-in-out;\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 1;\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${Black91};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${Black7};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black7,\n 0.3\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-border-color: ${White};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n Black15,\n Black75,\n Black91,\n DigitalGreenLight,\n PowerGreen,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n borderHoverColor,\n borderWidth,\n buttonLabelDisabledFontColor,\n buttonLabelFontColor,\n controlHeight,\n controlLabelDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n outline: none;\n font: ${bodyFont};\n color: ${buttonLabelFontColor};\n flex-direction: column;\n cursor: pointer;\n --ni-private-switch-height: 24px;\n --ni-private-switch-indicator-size: 24px;\n --ni-private-switch-indicator-inner-size: 18px;\n --ni-private-switch-indicator-margin: -2px;\n padding-bottom: calc(\n ${controlHeight} - var(--ni-private-switch-height)\n );\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n }\n\n .label {\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .switch-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='unchecked-message']::slotted(*) {\n margin-inline-end: 8px;\n }\n\n .switch {\n display: flex;\n height: var(--ni-private-switch-height);\n width: calc(var(--ni-private-switch-height) * 2);\n background-color: var(--ni-private-switch-background-color);\n border-radius: calc(var(--ni-private-switch-height) / 2);\n align-items: center;\n border: calc(${borderWidth}) solid transparent;\n }\n\n :host([aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-color);\n }\n\n :host([aria-checked='true']:hover) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host(${focusVisible}) .switch {\n border-color: ${borderHoverColor};\n }\n\n :host(${focusVisible}[aria-checked='true']) .switch {\n background-color: var(--ni-private-switch-background-selected-rollover-color);\n }\n\n :host([disabled]) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n :host([disabled]:hover) .switch {\n background-color: var(--ni-private-switch-background-disabled-color);\n }\n\n .checked-indicator-spacer {\n flex-grow: 0;\n transition: flex-grow ${smallDelay} ease-in-out;\n }\n\n :host([aria-checked='true']) .checked-indicator-spacer {\n flex-grow: 1;\n }\n\n .checked-indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--ni-private-switch-indicator-background-color);\n width: var(--ni-private-switch-indicator-size);\n height: var(--ni-private-switch-indicator-size);\n border-radius: calc(var(--ni-private-switch-indicator-size) / 2);\n margin: var(--ni-private-switch-indicator-margin);\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-color);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n border-color: var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:hover) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host(${focusVisible}) .checked-indicator {\n border: calc(${borderWidth} * 2) solid ${borderHoverColor};\n }\n\n :host([disabled]) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:hover) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]${focusVisible}) .checked-indicator {\n background-color: transparent;\n border: ${borderWidth} solid\n var(--ni-private-switch-indicator-border-disabled-color);\n }\n\n :host([disabled]:active) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n :host([disabled]${focusVisible}) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n opacity: 0;\n }\n\n .checked-indicator-inner {\n width: var(--ni-private-switch-indicator-inner-size);\n height: var(--ni-private-switch-indicator-inner-size);\n border-radius: calc(var(--ni-private-switch-indicator-inner-size) / 2);\n opacity: 0;\n }\n\n :host([aria-checked='true']) .checked-indicator-inner {\n opacity: 0;\n }\n\n :host(${focusVisible}) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-color);\n border: 1px solid var(--ni-private-switch-indicator-border-selected-color);\n }\n\n :host(:active) .checked-indicator-inner {\n opacity: 1;\n background-color: var(--ni-private-switch-indicator-background-active-color);\n }\n\n :host([disabled]) .checked-indicator-inner {\n background-color: var(\n --ni-private-switch-indicator-border-disabled-color\n );\n }\n\n slot[name='checked-message']::slotted(*) {\n margin-inline-start: 8px;\n }\n\n @media (prefers-reduced-motion) {\n .checked-indicator-inner,\n .checked-indicator-spacer {\n transition-duration: 0s;\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black91, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${White};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n DigitalGreenLight,\n 0.3\n)};\n\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black91,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${DigitalGreenLight};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black91,\n 0.15\n )};\n \n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(Black15, 0.1)};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${Black75};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n PowerGreen,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${PowerGreen};\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n Black15,\n 0.15\n )};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n --ni-private-switch-background-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.07\n )};\n --ni-private-switch-background-selected-color: ${hexToRgbaCssColor(\n White,\n 0.6\n )};\n --ni-private-switch-background-selected-rollover-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.1\n )};\n --ni-private-switch-indicator-background-active-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-switch-indicator-border-selected-color: ${White} ;\n --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n }\n `\n )\n);\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "35.2.1",
3
+ "version": "35.2.3",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run build:icons && npm run build:workers && npm run build:components && npm run build:scss",
@@ -45,7 +45,7 @@
45
45
  "@ni/fast-element": "^10.1.0",
46
46
  "@ni/fast-foundation": "^10.1.5",
47
47
  "@ni/fast-web-utilities": "^10.0.0",
48
- "@ni/nimble-tokens": "^8.14.0",
48
+ "@ni/nimble-tokens": "^8.15.0",
49
49
  "@ni/unit-format": "^1.0.2",
50
50
  "@tanstack/table-core": "^8.19.3",
51
51
  "@tanstack/virtual-core": "^3.10.6",