@ni/nimble-components 35.12.1 → 35.12.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 +211 -21
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +160 -23
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +83 -83
- package/dist/custom-elements.md +24 -24
- package/dist/esm/patterns/step/styles.js +150 -16
- package/dist/esm/patterns/step/styles.js.map +1 -1
- package/dist/esm/utilities/models/document-element-lang.js +4 -1
- package/dist/esm/utilities/models/document-element-lang.js.map +1 -1
- package/package.json +5 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +0 -4
- package/dist/esm/utilities/style/prefers-reduced-motion.js +0 -5
- package/dist/esm/utilities/style/prefers-reduced-motion.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n buttonLabelFont,\n buttonLabelFontColor,\n smallPadding,\n bodyFont,\n errorTextFont,\n controlSlimHeight,\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n fillSelectedColor,\n passColor,\n failColor,\n warningColor,\n buttonLabelDisabledFontColor,\n iconColor,\n standardPadding,\n controlHeight,\n errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/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 ${severityStyles}\n :host {\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n white-space: nowrap;\n outline: none;\n border: none;\n }\n\n ${'' /* Container wrapper for severity text to position against */}\n .container {\n display: inline-flex;\n width: 100%;\n height: 100%;\n position: relative;\n list-style: none;\n --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n }\n\n .control {\n display: inline-grid;\n height: 100%;\n width: 100%;\n grid-template-areas:\n \"icon top-spacer top-spacer\"\n \"icon title line\"\n \"icon subtitle subtitle\";\n grid-template-columns:\n ${controlHeight} ${'' /* Icon width */}\n min-content ${'' /* Show the full title and subtitle */}\n 1fr; ${'' /* Line is only fr unit so fills remaining space */}\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n column-gap: 4px;\n\n align-items: start;\n margin: 0;\n padding: 0;\n color: inherit;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n --ni-private-step-icon-background-full-size: scale(1,1);\n ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}\n --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);\n --ni-private-step-icon-background-none-size: scale(0,0);\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .container.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n .container.vertical .control {\n ${''/*\n Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n 1----------------2\n | title |\n | subtitle |\n | 4-------------3\n | | severity-text\n | |\n 6--5\n */}\n clip-path: polygon(\n 0% 0%,\n 100% 0%,\n 100% var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) 100%,\n 0% 100%\n );\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\"\n \"line subtitle\"\n \"line .\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n min-content\n 1fr;\n }\n\n .container.vertical.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([selected]) .control {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n .icon-background {\n grid-area: icon;\n display: inline-block;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n background-color: var(--ni-private-step-icon-background-color);\n transform: var(--ni-private-step-icon-background-size);\n border: none;\n border-radius: 100%;\n transition:\n transform ${smallDelay} ease-in-out;\n }\n\n .icon {\n grid-area: icon;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n font: ${buttonLabelFont};\n color: var(--ni-private-step-icon-color);\n ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n border: none;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out;\n }\n\n .icon::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline-color: var(--ni-private-step-icon-outline-inset-color);\n outline-style: solid;\n outline-width: 0px;\n ${'' /* outline-offset should always be <=-1 to always render inset */}\n outline-offset: -1px;\n border: none;\n border-radius: 100%;\n color: transparent;\n transition:\n outline-color ${smallDelay} ease-in-out,\n outline-width ${smallDelay} ease-in-out,\n outline-offset ${smallDelay} ease-in-out;\n }\n\n .current-label {\n ${accessiblyHidden}\n }\n\n .step-indicator {\n display: contents;\n }\n\n :host([severity=\"error\"]) .step-indicator,\n :host([severity=\"warning\"]) .step-indicator,\n :host([severity=\"success\"]) .step-indicator {\n display: none;\n }\n\n :host([selected]) .step-indicator,\n :host([disabled]) .step-indicator {\n display: contents;\n }\n\n .icon-severity {\n display: none;\n }\n\n :host([severity=\"error\"]) .icon-severity,\n :host([severity=\"warning\"]) .icon-severity,\n :host([severity=\"success\"]) .icon-severity {\n display: contents;\n }\n\n :host([selected]) .icon-severity,\n :host([disabled]) .icon-severity {\n display: none;\n }\n\n .top-spacer {\n grid-area: top-spacer;\n height: ${smallPadding};\n }\n\n .title {\n grid-area: title;\n min-width: min-content;\n height: ${controlSlimHeight};\n display: inline-block;\n align-content: center;\n font: ${bodyFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [part='start'] {\n display: none;\n }\n\n [part='end'] {\n display: none;\n }\n\n .line {\n grid-area: line;\n align-self: center;\n justify-self: center;\n display: inline-block;\n width: 100%;\n min-width: ${standardPadding};\n height: 1px;\n min-height: 1px;\n transform: scale(1, 1);\n background: var(--ni-private-step-line-color);\n background-clip: content-box;\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .container.last .line {\n display: none;\n }\n\n .container.vertical .line {\n width: 1px;\n min-width: 1px;\n height: 100%;\n min-height: ${standardPadding};\n padding-top: ${smallPadding};\n }\n\n .subtitle {\n grid-area: subtitle;\n display: inline-block;\n min-width: min-content;\n height: ${errorTextFontLineHeight};\n align-content: center;\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .severity-text {\n left: 0px;\n top: var(--ni-private-step-content-height);\n }\n\n .container.vertical .severity-text {\n width: calc(100% - var(--ni-private-step-content-offset));\n left: var(--ni-private-step-content-offset);\n }\n }\n\n @layer hover {\n .control:hover {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:hover {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:hover {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:hover .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control:hover .line {\n transform: scale(2, 1);\n }\n\n :host([readonly]) .container .control:hover .line {\n transform: revert-layer;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${failColor};\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control${focusVisible} {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}\n outline-offset: -4px;\n }\n\n .control${focusVisible} .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control${focusVisible} .line {\n transform: scale(2, 1);\n }\n }\n\n @layer active {\n .control:active {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: ${fillSelectedColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:active {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:active {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: -1px;\n }\n\n :host([readonly]) .control:active .icon::before {\n outline-width: revert-layer;\n outline-offset: revert-layer;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n\n :host([readonly]) .control:active .line {\n transform: revert-layer;\n }\n }\n\n @layer disabled {\n :host([readonly]) .control {\n cursor: default;\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .line {\n transform: scale(1, 1);\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${White};\n }\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black91};\n }\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black15};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n }\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n buttonLabelFont,\n buttonLabelFontColor,\n smallPadding,\n bodyFont,\n errorTextFont,\n controlSlimHeight,\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n fillSelectedColor,\n passColor,\n failColor,\n warningColor,\n buttonLabelDisabledFontColor,\n iconColor,\n standardPadding,\n controlHeight,\n errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/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 ${severityStyles}\n :host {\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n white-space: nowrap;\n outline: none;\n border: none;\n }\n\n ${'' /* Container wrapper for severity text to position against */}\n .container {\n display: inline-flex;\n width: 100%;\n height: 100%;\n position: relative;\n list-style: none;\n --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n }\n\n .control {\n display: inline-grid;\n height: 100%;\n width: 100%;\n grid-template-areas:\n \"icon top-spacer top-spacer\"\n \"icon title line\"\n \"icon subtitle subtitle\";\n grid-template-columns:\n ${controlHeight} ${'' /* Icon width */}\n min-content ${'' /* Show the full title and subtitle */}\n 1fr; ${'' /* Line is only fr unit so fills remaining space */}\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n column-gap: 4px;\n\n align-items: start;\n margin: 0;\n padding: 0;\n color: inherit;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n --ni-private-step-icon-background-full-size: scale(1,1);\n ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}\n --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);\n --ni-private-step-icon-background-none-size: scale(0,0);\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .container.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n .container.vertical .control {\n ${''/*\n Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n 1----------------2\n | title |\n | subtitle |\n | 4-------------3\n | | severity-text\n | |\n 6--5\n */}\n clip-path: polygon(\n 0% 0%,\n 100% 0%,\n 100% var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) 100%,\n 0% 100%\n );\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\"\n \"line subtitle\"\n \"line .\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n min-content\n 1fr;\n }\n\n .container.vertical.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([selected]) .control {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n .icon-background {\n grid-area: icon;\n display: inline-block;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n background-color: var(--ni-private-step-icon-background-color);\n transform: var(--ni-private-step-icon-background-size);\n border: none;\n border-radius: 100%;\n transition:\n transform ${smallDelay} ease-in-out;\n }\n\n .icon {\n grid-area: icon;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n font: ${buttonLabelFont};\n color: var(--ni-private-step-icon-color);\n ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n border: none;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out;\n }\n\n .icon::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline-color: var(--ni-private-step-icon-outline-inset-color);\n outline-style: solid;\n outline-width: 0px;\n ${'' /* outline-offset should always be <=-1 to always render inset */}\n outline-offset: -1px;\n border: none;\n border-radius: 100%;\n color: transparent;\n transition:\n outline-color ${smallDelay} ease-in-out,\n outline-width ${smallDelay} ease-in-out,\n outline-offset ${smallDelay} ease-in-out;\n }\n\n .current-label {\n ${accessiblyHidden}\n }\n\n .step-indicator {\n display: contents;\n }\n\n :host([severity=\"error\"]) .step-indicator,\n :host([severity=\"warning\"]) .step-indicator,\n :host([severity=\"success\"]) .step-indicator {\n display: none;\n }\n\n :host([disabled]) .step-indicator {\n display: contents;\n }\n\n .icon-severity {\n display: none;\n }\n\n :host([severity=\"error\"]) .icon-severity,\n :host([severity=\"warning\"]) .icon-severity,\n :host([severity=\"success\"]) .icon-severity {\n display: contents;\n }\n\n :host([disabled]) .icon-severity {\n display: none;\n }\n\n .top-spacer {\n grid-area: top-spacer;\n height: ${smallPadding};\n }\n\n .title {\n grid-area: title;\n min-width: min-content;\n height: ${controlSlimHeight};\n display: inline-block;\n align-content: center;\n font: ${bodyFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [part='start'] {\n display: none;\n }\n\n [part='end'] {\n display: none;\n }\n\n .line {\n grid-area: line;\n align-self: center;\n justify-self: center;\n display: inline-block;\n width: 100%;\n min-width: ${standardPadding};\n height: 1px;\n min-height: 1px;\n transform: scale(1, 1);\n background: var(--ni-private-step-line-color);\n background-clip: content-box;\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .container.last .line {\n display: none;\n }\n\n .container.vertical .line {\n width: 1px;\n min-width: 1px;\n height: 100%;\n min-height: ${standardPadding};\n padding-top: ${smallPadding};\n }\n\n .subtitle {\n grid-area: subtitle;\n display: inline-block;\n min-width: min-content;\n height: ${errorTextFontLineHeight};\n align-content: center;\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .severity-text {\n left: 0px;\n top: var(--ni-private-step-content-height);\n }\n\n .container.vertical .severity-text {\n width: calc(100% - var(--ni-private-step-content-offset));\n left: var(--ni-private-step-content-offset);\n }\n }\n\n @layer hover {\n .control:hover {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:hover {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control:hover {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n :host([selected][readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:hover .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control:hover .line {\n transform: scale(2, 1);\n }\n\n :host([readonly]) .container .control:hover .line {\n transform: revert-layer;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control${focusVisible} {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-outline-inset-color: ${failColor};\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-outline-inset-color: ${passColor};\n --ni-private-step-line-color: ${passColor};\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}\n outline-offset: -4px;\n }\n\n .control${focusVisible} .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control${focusVisible} .line {\n transform: scale(2, 1);\n }\n }\n\n @layer active {\n .control:active {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: ${fillSelectedColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:active {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:active {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control:active {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control:active {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n :host([selected][readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: -1px;\n }\n\n :host([readonly]) .control:active .icon::before {\n outline-width: revert-layer;\n outline-offset: revert-layer;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n\n :host([readonly]) .control:active .line {\n transform: revert-layer;\n }\n }\n\n @layer disabled {\n :host([readonly]) .control {\n cursor: default;\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .line {\n transform: scale(1, 1);\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${White};\n }\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black91};\n }\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black15};\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n }\n }\n\n @layer focusVisible {\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${passColor};\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;
|
|
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.
|
|
3
|
+
"version": "35.12.3",
|
|
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.
|
|
50
|
-
"@ni/fast-foundation": "^10.2.
|
|
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 +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"]}
|