@ni/nimble-components 35.12.1 → 35.12.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.
- package/dist/all-components-bundle.js +211 -21
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +160 -23
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +83 -83
- package/dist/custom-elements.md +24 -24
- package/dist/esm/patterns/step/styles.js +150 -16
- package/dist/esm/patterns/step/styles.js.map +1 -1
- package/dist/esm/utilities/models/document-element-lang.js +4 -1
- package/dist/esm/utilities/models/document-element-lang.js.map +1 -1
- package/package.json +5 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +0 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.js +0 -5
- package/dist/esm/utilities/style/prefers-reduced-motion.js.map +0 -1
|
@@ -392,89 +392,6 @@
|
|
|
392
392
|
}
|
|
393
393
|
]
|
|
394
394
|
},
|
|
395
|
-
{
|
|
396
|
-
"kind": "javascript-module",
|
|
397
|
-
"path": "src/anchor-tab/index.ts",
|
|
398
|
-
"declarations": [
|
|
399
|
-
{
|
|
400
|
-
"kind": "class",
|
|
401
|
-
"description": "A nimble-styled link tab",
|
|
402
|
-
"name": "AnchorTab",
|
|
403
|
-
"members": [
|
|
404
|
-
{
|
|
405
|
-
"kind": "field",
|
|
406
|
-
"name": "disabled",
|
|
407
|
-
"type": {
|
|
408
|
-
"text": "boolean"
|
|
409
|
-
},
|
|
410
|
-
"privacy": "public",
|
|
411
|
-
"default": "false",
|
|
412
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
413
|
-
},
|
|
414
|
-
{
|
|
415
|
-
"kind": "field",
|
|
416
|
-
"name": "ariaSelected",
|
|
417
|
-
"type": {
|
|
418
|
-
"text": "string"
|
|
419
|
-
},
|
|
420
|
-
"privacy": "public",
|
|
421
|
-
"default": "'false'",
|
|
422
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
423
|
-
}
|
|
424
|
-
],
|
|
425
|
-
"attributes": [
|
|
426
|
-
{
|
|
427
|
-
"name": "disabled",
|
|
428
|
-
"type": {
|
|
429
|
-
"text": "boolean"
|
|
430
|
-
},
|
|
431
|
-
"default": "false",
|
|
432
|
-
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
433
|
-
"fieldName": "disabled"
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
"name": "aria-selected",
|
|
437
|
-
"type": {
|
|
438
|
-
"text": "string"
|
|
439
|
-
},
|
|
440
|
-
"default": "'false'",
|
|
441
|
-
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
442
|
-
"fieldName": "ariaSelected"
|
|
443
|
-
}
|
|
444
|
-
],
|
|
445
|
-
"superclass": {
|
|
446
|
-
"name": "AnchorBase",
|
|
447
|
-
"module": "/src/anchor-base"
|
|
448
|
-
}
|
|
449
|
-
},
|
|
450
|
-
{
|
|
451
|
-
"kind": "variable",
|
|
452
|
-
"name": "anchorTabTag",
|
|
453
|
-
"type": {
|
|
454
|
-
"text": "string"
|
|
455
|
-
},
|
|
456
|
-
"default": "'nimble-anchor-tab'"
|
|
457
|
-
}
|
|
458
|
-
],
|
|
459
|
-
"exports": [
|
|
460
|
-
{
|
|
461
|
-
"kind": "js",
|
|
462
|
-
"name": "AnchorTab",
|
|
463
|
-
"declaration": {
|
|
464
|
-
"name": "AnchorTab",
|
|
465
|
-
"module": "src/anchor-tab/index.ts"
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
{
|
|
469
|
-
"kind": "js",
|
|
470
|
-
"name": "anchorTabTag",
|
|
471
|
-
"declaration": {
|
|
472
|
-
"name": "anchorTabTag",
|
|
473
|
-
"module": "src/anchor-tab/index.ts"
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
]
|
|
477
|
-
},
|
|
478
395
|
{
|
|
479
396
|
"kind": "javascript-module",
|
|
480
397
|
"path": "src/anchor-step/index.ts",
|
|
@@ -659,6 +576,89 @@
|
|
|
659
576
|
}
|
|
660
577
|
]
|
|
661
578
|
},
|
|
579
|
+
{
|
|
580
|
+
"kind": "javascript-module",
|
|
581
|
+
"path": "src/anchor-tab/index.ts",
|
|
582
|
+
"declarations": [
|
|
583
|
+
{
|
|
584
|
+
"kind": "class",
|
|
585
|
+
"description": "A nimble-styled link tab",
|
|
586
|
+
"name": "AnchorTab",
|
|
587
|
+
"members": [
|
|
588
|
+
{
|
|
589
|
+
"kind": "field",
|
|
590
|
+
"name": "disabled",
|
|
591
|
+
"type": {
|
|
592
|
+
"text": "boolean"
|
|
593
|
+
},
|
|
594
|
+
"privacy": "public",
|
|
595
|
+
"default": "false",
|
|
596
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
|
|
597
|
+
},
|
|
598
|
+
{
|
|
599
|
+
"kind": "field",
|
|
600
|
+
"name": "ariaSelected",
|
|
601
|
+
"type": {
|
|
602
|
+
"text": "string"
|
|
603
|
+
},
|
|
604
|
+
"privacy": "public",
|
|
605
|
+
"default": "'false'",
|
|
606
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
|
|
607
|
+
}
|
|
608
|
+
],
|
|
609
|
+
"attributes": [
|
|
610
|
+
{
|
|
611
|
+
"name": "disabled",
|
|
612
|
+
"type": {
|
|
613
|
+
"text": "boolean"
|
|
614
|
+
},
|
|
615
|
+
"default": "false",
|
|
616
|
+
"description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
|
|
617
|
+
"fieldName": "disabled"
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "aria-selected",
|
|
621
|
+
"type": {
|
|
622
|
+
"text": "string"
|
|
623
|
+
},
|
|
624
|
+
"default": "'false'",
|
|
625
|
+
"description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
|
|
626
|
+
"fieldName": "ariaSelected"
|
|
627
|
+
}
|
|
628
|
+
],
|
|
629
|
+
"superclass": {
|
|
630
|
+
"name": "AnchorBase",
|
|
631
|
+
"module": "/src/anchor-base"
|
|
632
|
+
}
|
|
633
|
+
},
|
|
634
|
+
{
|
|
635
|
+
"kind": "variable",
|
|
636
|
+
"name": "anchorTabTag",
|
|
637
|
+
"type": {
|
|
638
|
+
"text": "string"
|
|
639
|
+
},
|
|
640
|
+
"default": "'nimble-anchor-tab'"
|
|
641
|
+
}
|
|
642
|
+
],
|
|
643
|
+
"exports": [
|
|
644
|
+
{
|
|
645
|
+
"kind": "js",
|
|
646
|
+
"name": "AnchorTab",
|
|
647
|
+
"declaration": {
|
|
648
|
+
"name": "AnchorTab",
|
|
649
|
+
"module": "src/anchor-tab/index.ts"
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"kind": "js",
|
|
654
|
+
"name": "anchorTabTag",
|
|
655
|
+
"declaration": {
|
|
656
|
+
"name": "anchorTabTag",
|
|
657
|
+
"module": "src/anchor-tab/index.ts"
|
|
658
|
+
}
|
|
659
|
+
}
|
|
660
|
+
]
|
|
661
|
+
},
|
|
662
662
|
{
|
|
663
663
|
"kind": "javascript-module",
|
|
664
664
|
"path": "src/anchor-tabs/index.ts",
|
package/dist/custom-elements.md
CHANGED
|
@@ -93,30 +93,6 @@
|
|
|
93
93
|
|
|
94
94
|
<hr/>
|
|
95
95
|
|
|
96
|
-
## class: `AnchorTab`
|
|
97
|
-
|
|
98
|
-
### Superclass
|
|
99
|
-
|
|
100
|
-
| Name | Module | Package |
|
|
101
|
-
| ------------ | ---------------- | ------- |
|
|
102
|
-
| `AnchorBase` | /src/anchor-base | |
|
|
103
|
-
|
|
104
|
-
### Fields
|
|
105
|
-
|
|
106
|
-
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
107
|
-
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
108
|
-
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
109
|
-
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
110
|
-
|
|
111
|
-
### Attributes
|
|
112
|
-
|
|
113
|
-
| Name | Field | Inherited From |
|
|
114
|
-
| --------------- | ------------ | -------------- |
|
|
115
|
-
| `disabled` | disabled | |
|
|
116
|
-
| `aria-selected` | ariaSelected | |
|
|
117
|
-
|
|
118
|
-
<hr/>
|
|
119
|
-
|
|
120
96
|
## class: `AnchorStep`
|
|
121
97
|
|
|
122
98
|
### Superclass
|
|
@@ -149,6 +125,30 @@
|
|
|
149
125
|
|
|
150
126
|
<hr/>
|
|
151
127
|
|
|
128
|
+
## class: `AnchorTab`
|
|
129
|
+
|
|
130
|
+
### Superclass
|
|
131
|
+
|
|
132
|
+
| Name | Module | Package |
|
|
133
|
+
| ------------ | ---------------- | ------- |
|
|
134
|
+
| `AnchorBase` | /src/anchor-base | |
|
|
135
|
+
|
|
136
|
+
### Fields
|
|
137
|
+
|
|
138
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
139
|
+
| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
|
|
140
|
+
| `disabled` | public | `boolean` | `false` | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. | |
|
|
141
|
+
| `ariaSelected` | public | `string` | `'false'` | Indicates the current "selected" state of various widgets.
https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected | |
|
|
142
|
+
|
|
143
|
+
### Attributes
|
|
144
|
+
|
|
145
|
+
| Name | Field | Inherited From |
|
|
146
|
+
| --------------- | ------------ | -------------- |
|
|
147
|
+
| `disabled` | disabled | |
|
|
148
|
+
| `aria-selected` | ariaSelected | |
|
|
149
|
+
|
|
150
|
+
<hr/>
|
|
151
|
+
|
|
152
152
|
## class: `AnchorTabs`
|
|
153
153
|
|
|
154
154
|
### Superclass
|
|
@@ -137,18 +137,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
137
137
|
}
|
|
138
138
|
|
|
139
139
|
:host([severity="error"]) .control {
|
|
140
|
-
--ni-private-step-icon-color:
|
|
140
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
141
141
|
--ni-private-step-icon-border-color: ${failColor};
|
|
142
|
-
--ni-private-step-icon-background-color:
|
|
143
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
142
|
+
--ni-private-step-icon-background-color: ${failColor};
|
|
143
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
144
144
|
--ni-private-step-line-color: ${failColor};
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
:host([severity="warning"]) .control {
|
|
148
|
-
--ni-private-step-icon-color:
|
|
148
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
149
149
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
150
|
-
--ni-private-step-icon-background-color:
|
|
151
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
150
|
+
--ni-private-step-icon-background-color: ${warningColor};
|
|
151
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
152
152
|
--ni-private-step-line-color: ${warningColor};
|
|
153
153
|
}
|
|
154
154
|
|
|
@@ -169,6 +169,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
169
169
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
+
:host([selected][severity="error"]) .control {
|
|
173
|
+
--ni-private-step-icon-color: ${failColor};
|
|
174
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
175
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
176
|
+
--ni-private-step-line-color: ${failColor};
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
:host([selected][severity="warning"]) .control {
|
|
180
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
181
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
182
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
183
|
+
--ni-private-step-line-color: ${warningColor};
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([selected][severity="success"]) .control {
|
|
187
|
+
--ni-private-step-icon-color: ${passColor};
|
|
188
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
189
|
+
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
190
|
+
--ni-private-step-line-color: ${passColor};
|
|
191
|
+
}
|
|
192
|
+
|
|
172
193
|
.icon-background {
|
|
173
194
|
grid-area: icon;
|
|
174
195
|
display: inline-block;
|
|
@@ -237,7 +258,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
237
258
|
display: none;
|
|
238
259
|
}
|
|
239
260
|
|
|
240
|
-
:host([selected]) .step-indicator,
|
|
241
261
|
:host([disabled]) .step-indicator {
|
|
242
262
|
display: contents;
|
|
243
263
|
}
|
|
@@ -252,7 +272,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
252
272
|
display: contents;
|
|
253
273
|
}
|
|
254
274
|
|
|
255
|
-
:host([selected]) .icon-severity,
|
|
256
275
|
:host([disabled]) .icon-severity {
|
|
257
276
|
display: none;
|
|
258
277
|
}
|
|
@@ -343,14 +362,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
343
362
|
}
|
|
344
363
|
|
|
345
364
|
:host([severity="error"]) .control:hover {
|
|
365
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
346
366
|
--ni-private-step-icon-border-color: ${failColor};
|
|
347
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
367
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
348
368
|
--ni-private-step-line-color: ${failColor};
|
|
349
369
|
}
|
|
350
370
|
|
|
351
371
|
:host([severity="warning"]) .control:hover {
|
|
372
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
352
373
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
353
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
374
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
354
375
|
--ni-private-step-line-color: ${warningColor};
|
|
355
376
|
}
|
|
356
377
|
|
|
@@ -362,12 +383,37 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
362
383
|
}
|
|
363
384
|
|
|
364
385
|
:host([selected]) .control:hover {
|
|
365
|
-
--ni-private-step-icon-color: ${
|
|
386
|
+
--ni-private-step-icon-color: ${borderHoverColor};
|
|
366
387
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
367
|
-
--ni-private-step-icon-
|
|
388
|
+
--ni-private-step-icon-border-width: 3px;
|
|
389
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
368
390
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
369
391
|
}
|
|
370
392
|
|
|
393
|
+
:host([selected][severity="error"]) .control:hover {
|
|
394
|
+
--ni-private-step-icon-color: ${failColor};
|
|
395
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
396
|
+
--ni-private-step-icon-border-width: 3px;
|
|
397
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
398
|
+
--ni-private-step-line-color: ${failColor};
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
:host([selected][severity="warning"]) .control:hover {
|
|
402
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
403
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
404
|
+
--ni-private-step-icon-border-width: 3px;
|
|
405
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
406
|
+
--ni-private-step-line-color: ${warningColor};
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
:host([selected][severity="success"]) .control:hover {
|
|
410
|
+
--ni-private-step-icon-color: ${passColor};
|
|
411
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
412
|
+
--ni-private-step-icon-border-width: 3px;
|
|
413
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
414
|
+
--ni-private-step-line-color: ${passColor};
|
|
415
|
+
}
|
|
416
|
+
|
|
371
417
|
:host([readonly]) .control:hover {
|
|
372
418
|
--ni-private-step-icon-color: revert-layer;
|
|
373
419
|
--ni-private-step-icon-border-color: revert-layer;
|
|
@@ -376,6 +422,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
376
422
|
--ni-private-step-line-color: revert-layer;
|
|
377
423
|
}
|
|
378
424
|
|
|
425
|
+
:host([selected][readonly]) .control:hover {
|
|
426
|
+
--ni-private-step-icon-color: revert-layer;
|
|
427
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
428
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
429
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
430
|
+
--ni-private-step-line-color: revert-layer;
|
|
431
|
+
}
|
|
432
|
+
|
|
379
433
|
.control:hover .line {
|
|
380
434
|
transform: scale(1, 2);
|
|
381
435
|
}
|
|
@@ -399,16 +453,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
399
453
|
}
|
|
400
454
|
|
|
401
455
|
:host([severity="error"]) .control${focusVisible} {
|
|
456
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
402
457
|
--ni-private-step-icon-border-color: ${failColor};
|
|
403
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
404
|
-
--ni-private-step-icon-outline-inset-color:
|
|
458
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
459
|
+
--ni-private-step-icon-outline-inset-color: transparent;
|
|
405
460
|
--ni-private-step-line-color: ${failColor};
|
|
406
461
|
}
|
|
407
462
|
|
|
408
463
|
:host([severity="warning"]) .control${focusVisible} {
|
|
464
|
+
--ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
|
|
409
465
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
410
|
-
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-
|
|
411
|
-
--ni-private-step-icon-outline-inset-color:
|
|
466
|
+
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
467
|
+
--ni-private-step-icon-outline-inset-color: transparent;
|
|
412
468
|
--ni-private-step-line-color: ${warningColor};
|
|
413
469
|
}
|
|
414
470
|
|
|
@@ -428,6 +484,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
428
484
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
429
485
|
}
|
|
430
486
|
|
|
487
|
+
:host([selected][severity="error"]) .control${focusVisible} {
|
|
488
|
+
--ni-private-step-icon-color: ${failColor};
|
|
489
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
490
|
+
--ni-private-step-icon-outline-inset-color: ${failColor};
|
|
491
|
+
--ni-private-step-line-color: ${failColor};
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
:host([selected][severity="warning"]) .control${focusVisible} {
|
|
495
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
496
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
497
|
+
--ni-private-step-icon-outline-inset-color: ${warningColor};
|
|
498
|
+
--ni-private-step-line-color: ${warningColor};
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
:host([selected][severity="success"]) .control${focusVisible} {
|
|
502
|
+
--ni-private-step-icon-color: ${passColor};
|
|
503
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
504
|
+
--ni-private-step-icon-outline-inset-color: ${passColor};
|
|
505
|
+
--ni-private-step-line-color: ${passColor};
|
|
506
|
+
}
|
|
507
|
+
|
|
431
508
|
.control${focusVisible} .icon::before {
|
|
432
509
|
outline-width: ${borderWidth};
|
|
433
510
|
${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
|
|
@@ -453,12 +530,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
453
530
|
}
|
|
454
531
|
|
|
455
532
|
:host([severity="error"]) .control:active {
|
|
533
|
+
--ni-private-step-icon-color: ${failColor};
|
|
456
534
|
--ni-private-step-icon-border-color: ${failColor};
|
|
457
535
|
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
458
536
|
--ni-private-step-line-color: ${failColor};
|
|
459
537
|
}
|
|
460
538
|
|
|
461
539
|
:host([severity="warning"]) .control:active {
|
|
540
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
462
541
|
--ni-private-step-icon-border-color: ${warningColor};
|
|
463
542
|
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
464
543
|
--ni-private-step-line-color: ${warningColor};
|
|
@@ -478,6 +557,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
478
557
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
479
558
|
}
|
|
480
559
|
|
|
560
|
+
:host([selected][severity="error"]) .control:active {
|
|
561
|
+
--ni-private-step-icon-color: ${failColor};
|
|
562
|
+
--ni-private-step-icon-border-color: ${failColor};
|
|
563
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
564
|
+
--ni-private-step-line-color: ${failColor};
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
:host([selected][severity="warning"]) .control:active {
|
|
568
|
+
--ni-private-step-icon-color: ${warningColor};
|
|
569
|
+
--ni-private-step-icon-border-color: ${warningColor};
|
|
570
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
571
|
+
--ni-private-step-line-color: ${warningColor};
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
:host([selected][severity="success"]) .control:active {
|
|
575
|
+
--ni-private-step-icon-color: ${buttonLabelFontColor};
|
|
576
|
+
--ni-private-step-icon-border-color: ${passColor};
|
|
577
|
+
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
578
|
+
--ni-private-step-line-color: ${passColor};
|
|
579
|
+
}
|
|
580
|
+
|
|
481
581
|
:host([readonly]) .control:active {
|
|
482
582
|
--ni-private-step-icon-color: revert-layer;
|
|
483
583
|
--ni-private-step-icon-border-color: revert-layer;
|
|
@@ -487,6 +587,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
487
587
|
--ni-private-step-line-color: revert-layer;
|
|
488
588
|
}
|
|
489
589
|
|
|
590
|
+
:host([selected][readonly]) .control:active {
|
|
591
|
+
--ni-private-step-icon-color: revert-layer;
|
|
592
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
593
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
594
|
+
--ni-private-step-icon-background-color: revert-layer;
|
|
595
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
596
|
+
--ni-private-step-line-color: revert-layer;
|
|
597
|
+
}
|
|
598
|
+
|
|
490
599
|
.control:active .icon::before {
|
|
491
600
|
outline-width: 0px;
|
|
492
601
|
outline-offset: -1px;
|
|
@@ -553,9 +662,34 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
553
662
|
--ni-private-step-icon-inverse-color: ${Black15};
|
|
554
663
|
}
|
|
555
664
|
|
|
665
|
+
:host([severity="error"]) .control {
|
|
666
|
+
--ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);
|
|
667
|
+
--ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
:host([severity="warning"]) .control {
|
|
671
|
+
--ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);
|
|
672
|
+
--ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
|
|
673
|
+
}
|
|
674
|
+
|
|
556
675
|
:host([severity="success"]) .control {
|
|
676
|
+
--ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);
|
|
557
677
|
--ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
|
|
558
678
|
}
|
|
559
679
|
}
|
|
680
|
+
|
|
681
|
+
@layer focusVisible {
|
|
682
|
+
:host([severity="error"]) .control${focusVisible} {
|
|
683
|
+
--ni-private-step-icon-outline-inset-color: ${failColor};
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
:host([severity="warning"]) .control${focusVisible} {
|
|
687
|
+
--ni-private-step-icon-outline-inset-color: ${warningColor};
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
:host([severity="success"]) .control${focusVisible} {
|
|
691
|
+
--ni-private-step-icon-outline-inset-color: ${passColor};
|
|
692
|
+
}
|
|
693
|
+
}
|
|
560
694
|
`));
|
|
561
695
|
//# sourceMappingURL=styles.js.map
|