@ni/nimble-components 35.12.2 → 35.12.4

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.
@@ -392,6 +392,89 @@
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
+ },
395
478
  {
396
479
  "kind": "javascript-module",
397
480
  "path": "src/anchor-step/index.ts",
@@ -576,89 +659,6 @@
576
659
  }
577
660
  ]
578
661
  },
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",
@@ -93,6 +93,30 @@
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.&#xA;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
+
96
120
  ## class: `AnchorStep`
97
121
 
98
122
  ### Superclass
@@ -125,30 +149,6 @@
125
149
 
126
150
  <hr/>
127
151
 
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.&#xA;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
@@ -1,7 +1,7 @@
1
1
  import { css } from '@ni/fast-element';
2
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, smallDelay } from '../theme-provider/design-tokens';
4
+ import { bodyFont, borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFontColor, 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';
@@ -19,9 +19,6 @@ export const styles = css `
19
19
  --ni-private-switch-indicator-size: 24px;
20
20
  --ni-private-switch-indicator-inner-size: 18px;
21
21
  --ni-private-switch-indicator-margin: -2px;
22
- padding-bottom: calc(
23
- ${controlHeight} - var(--ni-private-switch-height)
24
- );
25
22
  }
26
23
 
27
24
  :host([disabled]) {
@@ -46,6 +43,12 @@ export const styles = css `
46
43
  .switch-container {
47
44
  display: flex;
48
45
  align-items: center;
46
+ ${'' /*
47
+ Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.
48
+ See: https://github.com/ni/nimble/issues/3013
49
+ */}
50
+ padding-top: 2px;
51
+ padding-bottom: 6px;
49
52
  }
50
53
 
51
54
  slot[name='unchecked-message']::slotted(*) {
@@ -1 +1 @@
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"]}
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 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 }\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 Reserve space around the 24px control to fill a 32px height until we have a switch 32 design.\n See: https://github.com/ni/nimble/issues/3013\n */}\n padding-top: 2px;\n padding-bottom: 6px;\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"]}
@@ -5,7 +5,10 @@ import { observable } from '@ni/fast-element';
5
5
  */
6
6
  class DocumentElementLang {
7
7
  constructor() {
8
- this.lang = document.documentElement.lang;
8
+ this.lang = typeof document === 'undefined' ? '' : document.documentElement.lang;
9
+ if (typeof document === 'undefined') {
10
+ return;
11
+ }
9
12
  const observer = new MutationObserver(mutations => {
10
13
  for (const mutation of mutations) {
11
14
  if (mutation.type === 'attributes'
@@ -1 +1 @@
1
- {"version":3,"file":"document-element-lang.js","sourceRoot":"","sources":["../../../../src/utilities/models/document-element-lang.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,mBAAmB;IAIrB;QAFO,SAAI,GAAW,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC;QAGhD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC9C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBAC/B,IACI,QAAQ,CAAC,IAAI,KAAK,YAAY;uBAC3B,QAAQ,CAAC,aAAa,KAAK,MAAM,EACtC,CAAC;oBACC,IAAI,CAAC,IAAI,GAAI,QAAQ,CAAC,MAAsB,CAAC,IAAI,CAAC;gBACtD,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACvC,eAAe,EAAE,CAAC,MAAM,CAAC;SAC5B,CAAC,CAAC;IACP,CAAC;CACJ;AAjBU;IADN,UAAU;iDACyC;AAmBxD,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { observable } from '@ni/fast-element';\n\n/**\n * Observable class to subscribe to changes in the page's lang attribute\n */\nclass DocumentElementLang {\n @observable\n public lang: string = document.documentElement.lang;\n\n public constructor() {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes'\n && mutation.attributeName === 'lang'\n ) {\n this.lang = (mutation.target as HTMLElement).lang;\n }\n }\n });\n observer.observe(document.documentElement, {\n attributeFilter: ['lang']\n });\n }\n}\n\nexport const documentElementLang = new DocumentElementLang();\n"]}
1
+ {"version":3,"file":"document-element-lang.js","sourceRoot":"","sources":["../../../../src/utilities/models/document-element-lang.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,mBAAmB;IAIrB;QAFO,SAAI,GAAW,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC;QAGvF,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACX,CAAC;QACD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS,CAAC,EAAE;YAC9C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;gBAC/B,IACI,QAAQ,CAAC,IAAI,KAAK,YAAY;uBAC3B,QAAQ,CAAC,aAAa,KAAK,MAAM,EACtC,CAAC;oBACC,IAAI,CAAC,IAAI,GAAI,QAAQ,CAAC,MAAsB,CAAC,IAAI,CAAC;gBACtD,CAAC;YACL,CAAC;QACL,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACvC,eAAe,EAAE,CAAC,MAAM,CAAC;SAC5B,CAAC,CAAC;IACP,CAAC;CACJ;AApBU;IADN,UAAU;iDACgF;AAsB/F,MAAM,CAAC,MAAM,mBAAmB,GAAG,IAAI,mBAAmB,EAAE,CAAC","sourcesContent":["import { observable } from '@ni/fast-element';\n\n/**\n * Observable class to subscribe to changes in the page's lang attribute\n */\nclass DocumentElementLang {\n @observable\n public lang: string = typeof document === 'undefined' ? '' : document.documentElement.lang;\n\n public constructor() {\n if (typeof document === 'undefined') {\n return;\n }\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes'\n && mutation.attributeName === 'lang'\n ) {\n this.lang = (mutation.target as HTMLElement).lang;\n }\n }\n });\n observer.observe(document.documentElement, {\n attributeFilter: ['lang']\n });\n }\n}\n\nexport const documentElementLang = new DocumentElementLang();\n"]}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "35.12.2",
3
+ "version": "35.12.4",
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 && npm run build:cem",
7
- "build-bundle": "rollup --config",
7
+ "build-bundle": "rollup --config && npm run test-node-smoke-test",
8
8
  "lint": "eslint .",
9
9
  "format": "eslint . --fix",
10
10
  "pack": "npm pack",
@@ -19,6 +19,7 @@
19
19
  "build:cem": "npm run build:cem:config && npm run build:cem:markdown",
20
20
  "build:cem:config": "cem analyze --config ./custom-elements-manifest.config.mjs",
21
21
  "build:cem:markdown": "node build/generate-markdown.mjs",
22
+ "test-node-smoke-test": "node build/node-smoke-test.mjs",
22
23
  "test-chrome-debugger": "karma start karma.conf.cjs --browsers=ChromeDebugging --skip-tags SkipChrome",
23
24
  "test-chrome": "karma start karma.conf.headless.cjs --browsers=ChromeHeadlessOpt --single-run --skip-tags SkipChrome",
24
25
  "test-firefox-debugger": "karma start karma.conf.cjs --browsers=FirefoxDebugging --skip-tags SkipFirefox",
@@ -46,8 +47,8 @@
46
47
  "customElements": "dist/custom-elements.json",
47
48
  "dependencies": {
48
49
  "@ni/fast-colors": "^10.0.0",
49
- "@ni/fast-element": "^10.1.1",
50
- "@ni/fast-foundation": "^10.2.3",
50
+ "@ni/fast-element": "^10.1.2",
51
+ "@ni/fast-foundation": "^10.2.4",
51
52
  "@ni/fast-web-utilities": "^10.0.0",
52
53
  "@ni/nimble-tokens": "^8.18.1",
53
54
  "@ni/unit-format": "^1.0.5",
@@ -1,4 +0,0 @@
1
- /**
2
- * Singleton utility to watch the prefers-reduced-motion media value
3
- */
4
- export declare const prefersReducedMotionMediaQuery: MediaQueryList;
@@ -1,5 +0,0 @@
1
- /**
2
- * Singleton utility to watch the prefers-reduced-motion media value
3
- */
4
- export const prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
5
- //# sourceMappingURL=prefers-reduced-motion.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../../src/utilities/style/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAmB,MAAM,CAAC,UAAU,CAC3E,kCAAkC,CACrC,CAAC","sourcesContent":["/**\n * Singleton utility to watch the prefers-reduced-motion media value\n */\nexport const prefersReducedMotionMediaQuery: MediaQueryList = window.matchMedia(\n '(prefers-reduced-motion: reduce)'\n);\n"]}