npm - @ni/nimble-components - Versions diffs - 32.2.2 → 32.2.3 - Mend

@ni/nimble-components 32.2.2 → 32.2.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

package/dist/all-components-bundle.js +1 -0
package/dist/all-components-bundle.js.map +1 -1
package/dist/all-components-bundle.min.js +1 -0
package/dist/all-components-bundle.min.js.map +1 -1
package/dist/esm/patterns/button/styles.js +1 -0
package/dist/esm/patterns/button/styles.js.map +1 -1
package/package.json +1 -1

package/dist/esm/patterns/button/styles.js CHANGED Viewed

@@ -17,6 +17,7 @@ export const styles = css `
             color: ${buttonLabelFontColor};
             font: ${buttonLabelFont};
             cursor: pointer;
+            white-space: nowrap;
             outline: none;
             border: none;
             ${

package/dist/esm/patterns/button/styles.js.map CHANGED Viewed

	@@ -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 '../../utilities/style/display';\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 buttonFillAccentColor,\n buttonAccentBlockFontColor,\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, checked, 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 ${\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 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 outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='start']::slotted() {\n flex-shrink: 0;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='end']::slotted() {\n flex-shrink: 0;\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 color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\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 .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\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 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 :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\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='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='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\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 '../../utilities/style/display';\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 buttonFillAccentColor,\n buttonAccentBlockFontColor,\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, checked, 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 white-space: nowrap;\n outline: none;\n border: none;\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 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 outline: 0px solid transparent;\n color: transparent;\n background-clip: border-box;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .content {\n display: contents;\n }\n\n [part='start'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='start']::slotted() {\n flex-shrink: 0;\n }\n\n :host([content-hidden]) .content {\n ${accessiblyHidden}\n }\n\n [part='end'] {\n display: contents;\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n\n slot[name='end']::slotted() {\n flex-shrink: 0;\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 color: ${buttonLabelFontColor};\n border-color: ${borderHoverColor};\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 .control:active [part='start'],\n .control:active [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n cursor: default;\n }\n\n :host([disabled]) .control {\n color: ${buttonLabelDisabledFontColor};\n box-shadow: none;\n background-image: none;\n background-size: 100% 100%;\n }\n\n :host([disabled]) .control::before {\n box-shadow: none;\n }\n\n :host([disabled]) slot[name='start']::slotted(),\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 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 :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer active {\n :host([appearance-variant='accent']) .control:active {\n color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance-variant='accent'])\n .control:active\n [part='start'],\n :host([appearance-variant='accent'])\n .control:active\n [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonAccentOutlineFontColor};\n }\n }\n `\n ),\n appearanceBehavior(\n ButtonAppearance.block,\n css`\n @layer base {\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='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='primary']) [part='start'],\n :host([appearance-variant='primary']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n\n :host([appearance-variant='accent']) [part='start'],\n :host([appearance-variant='accent']) [part='end'] {\n ${iconColor.cssCustomProperty}: ${buttonPrimaryFontColor};\n }\n }\n `\n )\n);\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "32.2.2",
+  "version": "32.2.3",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",