@ni/nimble-components 28.0.2 → 28.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.
- package/dist/all-components-bundle.js +5 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4 -0
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/select/styles.js +5 -1
- package/dist/esm/select/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
3
|
import { styles as dropdownStyles } from '../patterns/dropdown/styles';
|
|
4
4
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
5
|
-
import { borderRgbPartialColor, borderWidth, controlHeight, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
5
|
+
import { borderRgbPartialColor, borderWidth, controlHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
6
6
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
7
7
|
import { DropdownAppearance } from './types';
|
|
8
8
|
import { focusVisible } from '../utilities/style/focus';
|
|
@@ -111,6 +111,10 @@ export const styles = css `
|
|
|
111
111
|
background-color: transparent;
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
+
::slotted([role='option']:hover) {
|
|
115
|
+
background-color: ${fillHoverColor};
|
|
116
|
+
}
|
|
117
|
+
|
|
114
118
|
::slotted([role='option'][active-option]) {
|
|
115
119
|
background-color: ${fillSelectedColor};
|
|
116
120
|
}
|
|
@@ -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,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmCnB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n fillHoverSelectedColor,\n fillSelectedColor,\n mediumPadding,\n placeholderFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n\n ${\n /* We are using flex `order` to define the visual ordering of the selected value,\n error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n\n .selected-value.placeholder {\n color: ${placeholderFontColor};\n }\n\n .selected-value {\n order: 1;\n }\n\n [part='indicator'] {\n order: 3;\n }\n\n .error-icon {\n order: 2;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .listbox {\n overflow-x: clip;\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n .listbox.above {\n flex-flow: column-reverse;\n }\n\n .filter-field {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: ${controlHeight};\n background: transparent;\n }\n\n .filter-field::before {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field.above::before {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-field::after {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field:not(.above)::after {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-icon {\n padding-left: ${smallPadding};\n }\n\n .filter-input {\n background: transparent;\n border: none;\n color: inherit;\n font: inherit;\n height: var(--ni-nimble-control-height);\n padding: 0 ${smallPadding} 0 ${mediumPadding};\n width: 100%;\n }\n\n .filter-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .filter-input${focusVisible} {\n outline: 0px;\n }\n\n .scrollable-region {\n overflow: auto;\n }\n\n ::slotted([role='option']) {\n background-color: transparent;\n }\n\n ::slotted([role='option'][active-option]) {\n background-color: ${fillSelectedColor};\n }\n\n ::slotted([role='option'][active-option]:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .filter-field,\n .no-results-label {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
|
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,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAmCnB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;;;;;;;;;qBASf,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n mediumPadding,\n placeholderFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n\n ${\n /* We are using flex `order` to define the visual ordering of the selected value,\n error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n\n .selected-value.placeholder {\n color: ${placeholderFontColor};\n }\n\n .selected-value {\n order: 1;\n }\n\n [part='indicator'] {\n order: 3;\n }\n\n .error-icon {\n order: 2;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .listbox {\n overflow-x: clip;\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n .listbox.above {\n flex-flow: column-reverse;\n }\n\n .filter-field {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: ${controlHeight};\n background: transparent;\n }\n\n .filter-field::before {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field.above::before {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-field::after {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field:not(.above)::after {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-icon {\n padding-left: ${smallPadding};\n }\n\n .filter-input {\n background: transparent;\n border: none;\n color: inherit;\n font: inherit;\n height: var(--ni-nimble-control-height);\n padding: 0 ${smallPadding} 0 ${mediumPadding};\n width: 100%;\n }\n\n .filter-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .filter-input${focusVisible} {\n outline: 0px;\n }\n\n .scrollable-region {\n overflow: auto;\n }\n\n ::slotted([role='option']) {\n background-color: transparent;\n }\n\n ::slotted([role='option']:hover) {\n background-color: ${fillHoverColor};\n }\n\n ::slotted([role='option'][active-option]) {\n background-color: ${fillSelectedColor};\n }\n\n ::slotted([role='option'][active-option]:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .filter-field,\n .no-results-label {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "28.0.
|
|
3
|
+
"version": "28.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 generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
|