@ni/nimble-components 21.9.0 → 21.9.1
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 +198 -194
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2098 -2097
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +2 -1
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/switch/styles.js +3 -2
- package/dist/esm/switch/styles.js.map +1 -1
- package/package.json +15 -15
|
@@ -48,7 +48,8 @@ export const styles = css `
|
|
|
48
48
|
margin: 0;
|
|
49
49
|
padding: 0 ${standardPadding};
|
|
50
50
|
position: relative;
|
|
51
|
-
transition:
|
|
51
|
+
transition:
|
|
52
|
+
box-shadow ${smallDelay} ease-in-out,
|
|
52
53
|
border-color ${smallDelay} ease-in-out,
|
|
53
54
|
background-size ${smallDelay} ease-in-out;
|
|
54
55
|
background-size: 100% 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillActivePrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonFillAccentActiveColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n box-sizing: border-box;\n ${\n /*\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n */ ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n box-sizing: border-box;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition: box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n box-sizing: border-box;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: content-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n color: ${buttonLabelDisabledFontColor};\n cursor: default;\n }\n\n :host([disabled]) .control {\n box-shadow: none;\n background-image: none;\n color: rgba(${actionRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([disabled]) slot[name='end']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n background-size: 100% 100%;\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n }\n\n @layer active {\n :host([appearance-variant='primary']) .control:active {\n background-image: linear-gradient(\n ${buttonFillActivePrimaryColor},\n ${buttonFillActivePrimaryColor}\n );\n }\n\n :host([appearance-variant='accent']) .control:active {\n background-image: linear-gradient(\n ${buttonFillAccentActiveColor},\n ${buttonFillAccentActiveColor}\n );\n }\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../../utilities/style/focus';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonLabelDisabledFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding,\n buttonPrimaryFontColor,\n buttonFillPrimaryColor,\n buttonFillActivePrimaryColor,\n buttonFillAccentColor,\n buttonAccentBlockFontColor,\n buttonFillAccentActiveColor,\n buttonBorderAccentOutlineColor,\n buttonAccentOutlineFontColor\n} from '../../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { ButtonAppearance } from './types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n background-color: transparent;\n height: ${controlHeight};\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n border: none;\n box-sizing: border-box;\n ${\n /*\n Not sure why but this is needed to get buttons with icons and buttons\n without icons to align on the same line when the button is inline-flex\n See: https://github.com/ni/nimble/issues/503\n */ ''\n }\n vertical-align: middle;\n }\n\n .control {\n background-color: transparent;\n height: 100%;\n width: 100%;\n border: ${borderWidth} solid transparent;\n box-sizing: border-box;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n cursor: inherit;\n font: inherit;\n outline: none;\n margin: 0;\n padding: 0 ${standardPadding};\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n :host([content-hidden]) .control {\n aspect-ratio: 1 / 1;\n padding: 0px;\n }\n\n .control::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n box-sizing: border-box;\n outline: 0px solid transparent;\n color: transparent;\n background-clip: content-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer hover {\n .control:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n border-color: ${borderHoverColor};\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n }\n\n .control${focusVisible}::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -3px;\n }\n }\n\n @layer active {\n .control:active {\n box-shadow: none;\n background-image: linear-gradient(\n ${fillSelectedColor},\n ${fillSelectedColor}\n );\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n .control:active::before {\n outline: none;\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n color: ${buttonLabelDisabledFontColor};\n cursor: default;\n }\n\n :host([disabled]) .control {\n box-shadow: none;\n background-image: none;\n color: rgba(${actionRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n :host([disabled]) slot[name='end']::slotted(*) {\n opacity: 0.3;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n :host([content-hidden]) [part='end'] {\n display: none;\n }\n }\n`.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n .control {\n border-color: rgba(${actionRgbPartialColor}, 0.3);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.ghost,\n css`\n @layer disabled {\n :host([disabled]) .control {\n border-color: transparent;\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n\n @layer hover {\n .control:hover {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n }\n\n @layer disabled {\n :host([disabled]) .control {\n background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n background-size: 100% 100%;\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n }\n `\n )\n);\n\nexport const buttonAppearanceVariantStyles = css``.withBehaviors(\n appearanceBehavior(\n ButtonAppearance.outline,\n css`\n @layer base {\n :host([appearance-variant='primary']) .control {\n border-color: ${actionRgbPartialColor};\n }\n\n :host([appearance-variant='accent']) .control {\n border-color: ${buttonBorderAccentOutlineColor};\n color: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\n :host([appearance-variant='primary']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='primary']) .control {\n background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n color: ${buttonPrimaryFontColor};\n border-color: ${buttonFillPrimaryColor};\n }\n\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) [part='start'] {\n ${iconColor.cssCustomProperty}: white;\n }\n\n :host([appearance-variant='accent']) .control {\n background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n color: ${buttonAccentBlockFontColor};\n border-color: ${buttonFillAccentColor};\n }\n\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: white;\n }\n }\n\n @layer active {\n :host([appearance-variant='primary']) .control:active {\n background-image: linear-gradient(\n ${buttonFillActivePrimaryColor},\n ${buttonFillActivePrimaryColor}\n );\n }\n\n :host([appearance-variant='accent']) .control:active {\n background-image: linear-gradient(\n ${buttonFillAccentActiveColor},\n ${buttonFillAccentActiveColor}\n );\n }\n }\n `\n )\n);\n"]}
|
|
@@ -89,8 +89,9 @@ export const styles = css `
|
|
|
89
89
|
border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
|
|
90
90
|
margin: calc(
|
|
91
91
|
calc(
|
|
92
|
-
var(--ni-private-switch-height) -
|
|
93
|
-
|
|
92
|
+
var(--ni-private-switch-height) - var(
|
|
93
|
+
--ni-private-switch-indicator-size
|
|
94
|
+
)
|
|
94
95
|
) / 2
|
|
95
96
|
);
|
|
96
97
|
border: ${borderWidth} solid
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,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;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,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;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,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 '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n Black15,\n Black7,\n Black91,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\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 box-sizing: border-box;\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 box-sizing: border-box;\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 ) / 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "21.9.
|
|
3
|
+
"version": "21.9.1",
|
|
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 && npm run build-storybook",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"@ni/eslint-config-javascript": "^4.2.0",
|
|
110
110
|
"@ni/eslint-config-typescript": "^4.2.0",
|
|
111
111
|
"@ni/jasmine-parameterized": "^0.2.2",
|
|
112
|
-
"@rollup/plugin-commonjs": "^
|
|
112
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
|
113
113
|
"@rollup/plugin-json": "^6.0.0",
|
|
114
114
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
115
115
|
"@rollup/plugin-replace": "^5.0.1",
|
|
@@ -122,20 +122,20 @@
|
|
|
122
122
|
"@storybook/addon-links": "^7.6.13",
|
|
123
123
|
"@storybook/addons": "^7.6.13",
|
|
124
124
|
"@storybook/cli": "^7.6.13",
|
|
125
|
-
"@storybook/csf": "0.1.2",
|
|
125
|
+
"@storybook/csf": "^0.1.2",
|
|
126
126
|
"@storybook/html": "^7.6.13",
|
|
127
127
|
"@storybook/html-webpack5": "^7.6.13",
|
|
128
128
|
"@storybook/theming": "^7.6.13",
|
|
129
|
-
"@types/jasmine": "^
|
|
129
|
+
"@types/jasmine": "^5.1.4",
|
|
130
130
|
"@types/webpack-env": "^1.15.2",
|
|
131
131
|
"babel-loader": "^9.1.2",
|
|
132
132
|
"circular-dependency-plugin": "^5.2.0",
|
|
133
133
|
"css-loader": "^6.7.3",
|
|
134
134
|
"dotenv-webpack": "^8.0.1",
|
|
135
|
-
"eslint-plugin-jsdoc": "^
|
|
136
|
-
"eslint-plugin-storybook": "^0.
|
|
135
|
+
"eslint-plugin-jsdoc": "^48.2.0",
|
|
136
|
+
"eslint-plugin-storybook": "^0.8.0",
|
|
137
137
|
"html-webpack-plugin": "^5.3.1",
|
|
138
|
-
"jasmine-core": "^
|
|
138
|
+
"jasmine-core": "^5.1.2",
|
|
139
139
|
"karma": "^6.3.0",
|
|
140
140
|
"karma-chrome-launcher": "^3.1.0",
|
|
141
141
|
"karma-firefox-launcher": "^2.1.0",
|
|
@@ -143,24 +143,24 @@
|
|
|
143
143
|
"karma-jasmine-html-reporter": "^2.0.0",
|
|
144
144
|
"karma-jasmine-spec-tags": "^2.0.0",
|
|
145
145
|
"karma-source-map-support": "^1.4.0",
|
|
146
|
-
"karma-sourcemap-loader": "^0.
|
|
146
|
+
"karma-sourcemap-loader": "^0.4.0",
|
|
147
147
|
"karma-spec-reporter": "^0.0.36",
|
|
148
148
|
"karma-webkit-launcher": "^2.1.0",
|
|
149
149
|
"karma-webpack": "^5.0.0",
|
|
150
150
|
"playwright": "1.40.0",
|
|
151
|
-
"prettier": "^2.
|
|
152
|
-
"prettier-eslint": "^
|
|
153
|
-
"prettier-eslint-cli": "^
|
|
151
|
+
"prettier": "^3.2.5",
|
|
152
|
+
"prettier-eslint": "^16.3.0",
|
|
153
|
+
"prettier-eslint-cli": "^8.0.1",
|
|
154
154
|
"remark-gfm": "^3.0.1",
|
|
155
|
-
"rollup": "^
|
|
156
|
-
"rollup-plugin-polyfill-node": "^0.
|
|
155
|
+
"rollup": "^4.12.0",
|
|
156
|
+
"rollup-plugin-polyfill-node": "^0.13.0",
|
|
157
157
|
"rollup-plugin-sourcemaps": "^0.6.3",
|
|
158
|
-
"source-map-loader": "^
|
|
158
|
+
"source-map-loader": "^5.0.0",
|
|
159
159
|
"storybook": "^7.6.13",
|
|
160
160
|
"ts-loader": "^9.2.5",
|
|
161
161
|
"typescript": "~4.8.2",
|
|
162
162
|
"webpack": "^5.75.0",
|
|
163
163
|
"webpack-cli": "^5.0.1",
|
|
164
|
-
"webpack-dev-middleware": "^
|
|
164
|
+
"webpack-dev-middleware": "^7.0.0"
|
|
165
165
|
}
|
|
166
166
|
}
|