@ni/nimble-components 11.0.2 → 11.0.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 +77 -29
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +77 -29
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/select/styles.js +78 -29
  6. package/dist/esm/select/styles.js.map +1 -1
  7. package/package.json +1 -1
package/dist/esm/select/styles.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { applicationBackgroundColor, bodyFont, bodyFontColor, bodyDisabledFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay, smallPadding } from '../theme-provider/design-tokens';
4
+ import { focusVisible } from '../utilities/style/focus';
4
5
  export const styles = css `
5
6
  ${display('inline-flex')}
6
7
 
@@ -10,35 +11,66 @@ export const styles = css `
10
11
  font: ${bodyFont};
11
12
  height: ${controlHeight};
12
13
  position: relative;
14
+ justify-content: center;
13
15
  user-select: none;
14
16
  min-width: 250px;
15
17
  outline: none;
16
18
  vertical-align: top;
19
+ --ni-private-hover-indicator-width: 2px;
20
+ --ni-private-focus-indicator-width: 1px;
21
+ --ni-private-indicator-lines-gap: 1px;
17
22
  }
18
23
 
19
- .listbox {
20
- box-sizing: border-box;
21
- display: inline-flex;
22
- flex-direction: column;
23
- left: 0;
24
- overflow-y: auto;
24
+ :host::before {
25
+ content: '';
25
26
  position: absolute;
26
- width: 100%;
27
- --ni-private-listbox-padding: 4px;
28
- max-height: calc(
29
- var(--ni-private-select-max-height) - 2 *
30
- var(--ni-private-listbox-padding)
27
+ bottom: calc(
28
+ var(--ni-private-hover-indicator-width) +
29
+ var(--ni-private-indicator-lines-gap)
31
30
  );
32
- z-index: 1;
33
- padding: var(--ni-private-listbox-padding);
34
- box-shadow: 0px 3px 3px ${popupBoxShadowColor};
35
- border: 1px solid ${popupBorderColor};
36
- background-color: ${applicationBackgroundColor};
37
- background-clip: padding-box;
31
+ width: 0px;
32
+ height: 0px;
33
+ justify-self: center;
34
+ border-bottom: ${borderHoverColor}
35
+ var(--ni-private-focus-indicator-width) solid;
36
+ transition: width ${smallDelay} ease-in;
38
37
  }
39
38
 
40
- .listbox[hidden] {
41
- display: none;
39
+ @media (prefers-reduced-motion) {
40
+ :host::before {
41
+ transition-duration: 0s;
42
+ }
43
+ }
44
+
45
+ :host(${focusVisible})::before {
46
+ width: 100%;
47
+ }
48
+
49
+ :host::after {
50
+ content: '';
51
+ position: absolute;
52
+ bottom: 0px;
53
+ width: 0px;
54
+ height: 0px;
55
+ justify-self: center;
56
+ border-bottom: ${borderHoverColor}
57
+ var(--ni-private-hover-indicator-width) solid;
58
+ transition: width ${smallDelay} ease-in;
59
+ }
60
+
61
+ @media (prefers-reduced-motion) {
62
+ :host::after {
63
+ transition-duration: 0s;
64
+ }
65
+ }
66
+
67
+ :host(:hover)::after,
68
+ :host(${focusVisible})::after {
69
+ width: 100%;
70
+ }
71
+
72
+ :host([disabled]:hover)::after {
73
+ width: 0px;
42
74
  }
43
75
 
44
76
  .control {
@@ -59,23 +91,40 @@ export const styles = css `
59
91
  }
60
92
 
61
93
  :host(.open:not(:hover)) .control {
62
- border-bottom: ${borderWidth} solid ${borderHoverColor};
63
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
64
- }
65
-
66
- :host(:hover) .control {
67
- border-bottom: 2px solid ${borderHoverColor};
68
- padding-bottom: 0px;
69
- transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
94
+ border-bottom-color: ${borderHoverColor};
70
95
  }
71
96
 
72
97
  :host([disabled]) .control,
73
98
  :host([disabled]) .control:hover {
74
- border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
75
- padding-bottom: 1px;
99
+ border-bottom-color: ${bodyDisabledFontColor};
76
100
  color: ${bodyDisabledFontColor};
77
101
  }
78
102
 
103
+ .listbox {
104
+ box-sizing: border-box;
105
+ display: inline-flex;
106
+ flex-direction: column;
107
+ left: 0;
108
+ overflow-y: auto;
109
+ position: absolute;
110
+ width: 100%;
111
+ --ni-private-listbox-padding: ${smallPadding};
112
+ max-height: calc(
113
+ var(--ni-private-select-max-height) - 2 *
114
+ var(--ni-private-listbox-padding)
115
+ );
116
+ z-index: 1;
117
+ padding: var(--ni-private-listbox-padding);
118
+ box-shadow: 0px 3px 3px ${popupBoxShadowColor};
119
+ border: 1px solid ${popupBorderColor};
120
+ background-color: ${applicationBackgroundColor};
121
+ background-clip: padding-box;
122
+ }
123
+
124
+ .listbox[hidden] {
125
+ display: none;
126
+ }
127
+
79
128
  :host([open][position='above']) .listbox {
80
129
  border-bottom-left-radius: 0;
81
130
  border-bottom-right-radius: 0;
package/dist/esm/select/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;;kCAuBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;yBAe7B,WAAW,UAAU,qBAAqB;;;;;;;;;;;yBAW1C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,qBAAqB;;iBAElD,qBAAqB;;;;;;;;;;;;;;kBAcpB,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACV,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,aAAa;gBACd,QAAQ;kBACN,aAAa;;;;;;;;;;;;;;;;;;;;;;yBAsBN,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;yBAWC,gBAAgB;;4BAEb,UAAU;;;;;;;;;;YAU1B,YAAY;;;;;;;;;;;;;;;yBAeC,WAAW,UAAU,qBAAqB;;;;;;;;;;;+BAWpC,gBAAgB;;;;;+BAKhB,qBAAqB;iBACnC,qBAAqB;;;;;;;;;;;wCAWE,YAAY;;;;;;;kCAOlB,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;;;;;;;kBAmBpC,aAAa;;;;oBAIX,aAAa,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;iBAsBlC,QAAQ;kBACP,QAAQ;gBACV,aAAa;;;;gBAIb,qBAAqB;;;;;;;;;;;;;;;;;;;;;CAqBpC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "11.0.2",
3
+ "version": "11.0.3",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",