@ni/nimble-components 22.0.0 → 22.0.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 +32 -1
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +31 -0
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/anchor/styles.js +4 -0
- package/dist/esm/anchor/styles.js.map +1 -1
- package/dist/esm/anchor-button/styles.js +12 -0
- package/dist/esm/anchor-button/styles.js.map +1 -1
- package/dist/esm/anchor-menu-item/styles.js +5 -0
- package/dist/esm/anchor-menu-item/styles.js.map +1 -1
- package/dist/esm/anchor-tab/styles.js +1 -0
- package/dist/esm/anchor-tab/styles.js.map +1 -1
- package/dist/esm/anchor-tree-item/styles.js +5 -0
- package/dist/esm/anchor-tree-item/styles.js.map +1 -1
- package/dist/esm/breadcrumb-item/styles.js +4 -0
- package/dist/esm/breadcrumb-item/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,2BAA2B,EAC3B,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,8BAA8B,EAC9B,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,QAAQ,CAAC;;;;gBAIP,QAAQ;;;;;;;;;;;;iBAYP,aAAa;;;;cAIhB,YAAY;;;qCAGW,aAAa;;;;iBAIjC,mBAAmB;;;;cAItB,YAAY;qCACW,mBAAmB;;;;iBAIvC,qBAAqB;;;;;iBAKrB,2BAA2B;;;;;;;;;;;wCAWJ,YAAY;;;;;;;;;iBASnC,sBAAsB;;;;iBAItB,4BAA4B;;;8CAGC,YAAY;qCACrB,sBAAsB;;;8CAGb,YAAY;qCACrB,4BAA4B;;;;iBAIhD,8BAA8B
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,2BAA2B,EAC3B,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,8BAA8B,EAC9B,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,QAAQ,CAAC;;;;gBAIP,QAAQ;;;;;;;;;;;;iBAYP,aAAa;;;;cAIhB,YAAY;;;qCAGW,aAAa;;;;iBAIjC,mBAAmB;;;;cAItB,YAAY;qCACW,mBAAmB;;;;iBAIvC,qBAAqB;;;;;iBAKrB,2BAA2B;;;;;;;;;;;wCAWJ,YAAY;;;;;;;;;iBASnC,sBAAsB;;;;iBAItB,4BAA4B;;;8CAGC,YAAY;qCACrB,sBAAsB;;;8CAGb,YAAY;qCACrB,4BAA4B;;;;iBAIhD,8BAA8B;;;;;;;;;;CAU9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n linkActiveDisabledFontColor,\n linkActiveFontColor,\n linkActiveProminentFontColor,\n linkDisabledFontColor,\n linkFont,\n linkFontColor,\n linkProminentDisabledFontColor,\n linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline')}\n\n :host {\n box-sizing: border-box;\n font: ${linkFont};\n }\n\n .top-container {\n display: contents;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n color: ${linkFontColor};\n text-decoration: underline;\n }\n\n .control${focusVisible} {\n display: inline;\n outline: none;\n box-shadow: inset 0px -1px ${linkFontColor};\n }\n\n .control:active {\n color: ${linkActiveFontColor};\n text-decoration: underline;\n }\n\n .control${focusVisible}:active {\n box-shadow: inset 0px -1px ${linkActiveFontColor};\n }\n\n .control:not(:any-link) {\n color: ${linkDisabledFontColor};\n text-decoration: none;\n }\n\n .control:not(:any-link):active {\n color: ${linkActiveDisabledFontColor};\n }\n\n :host([underline-hidden]) .control {\n text-decoration: none;\n }\n\n :host([underline-hidden]) .control:hover {\n text-decoration: underline;\n }\n\n :host([underline-hidden]) .control${focusVisible} {\n text-decoration: underline;\n }\n\n :host([underline-hidden]) .control:not(:any-link) {\n text-decoration: none;\n }\n\n :host([appearance='prominent']) .control {\n color: ${linkProminentFontColor};\n }\n\n :host([appearance='prominent']) .control:active {\n color: ${linkActiveProminentFontColor};\n }\n\n :host([appearance='prominent']) .control${focusVisible} {\n box-shadow: inset 0px -1px ${linkProminentFontColor};\n }\n\n :host([appearance='prominent']) .control${focusVisible}:active {\n box-shadow: inset 0px -1px ${linkActiveProminentFontColor};\n }\n\n :host([appearance='prominent']) .control:not(:any-link) {\n color: ${linkProminentDisabledFontColor};\n }\n\n .content {\n pointer-events: none;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
|
@@ -7,5 +7,17 @@ export const styles = css `
|
|
|
7
7
|
.control {
|
|
8
8
|
text-decoration: none;
|
|
9
9
|
}
|
|
10
|
+
|
|
11
|
+
[part='start'] {
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.content {
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
[part='end'] {
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
}
|
|
10
22
|
`;
|
|
11
23
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,6BAA6B,EAC7B,MAAM,IAAI,YAAY,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;MACZ,6BAA6B
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,6BAA6B,EAC7B,MAAM,IAAI,YAAY,EACzB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,YAAY;MACZ,6BAA6B;;;;;;;;;;;;;;;;;CAiBlC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n buttonAppearanceVariantStyles,\n styles as buttonStyles\n} from '../patterns/button/styles';\n\nexport const styles = css`\n ${buttonStyles}\n ${buttonAppearanceVariantStyles}\n\n .control {\n text-decoration: none;\n }\n\n [part='start'] {\n pointer-events: none;\n }\n\n .content {\n pointer-events: none;\n }\n\n [part='end'] {\n pointer-events: none;\n }\n`;\n"]}
|
|
@@ -57,6 +57,7 @@ export const styles = css `
|
|
|
57
57
|
|
|
58
58
|
[part='start'] {
|
|
59
59
|
display: contents;
|
|
60
|
+
pointer-events: none;
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
slot[name='start']::slotted(*) {
|
|
@@ -69,6 +70,10 @@ export const styles = css `
|
|
|
69
70
|
grid-column: 1;
|
|
70
71
|
}
|
|
71
72
|
|
|
73
|
+
.content {
|
|
74
|
+
pointer-events: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
72
77
|
:host(.indent-1) .content {
|
|
73
78
|
grid-column: 2;
|
|
74
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;6BAIK,gBAAgB;;;;;sBAKvB,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;iBAQb,qBAAqB;;;;;;iCAML,QAAQ
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;6BAIK,gBAAgB;;;;;sBAKvB,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;iBAQb,qBAAqB;;;;;;iCAML,QAAQ;;;;;;;;;UAS/B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;;;;;CAkBzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n bodyDisabledFontColor,\n bodyFont,\n bodyFontColor,\n borderHoverColor,\n controlHeight,\n fillHoverColor,\n fillSelectedColor,\n iconColor,\n iconSize\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('grid')}\n\n :host {\n font: ${bodyFont};\n }\n\n :host(:focus-within:not(:active)) {\n outline: 2px solid ${borderHoverColor};\n outline-offset: -2px;\n }\n\n :host(:hover) {\n background: ${fillHoverColor};\n }\n\n :host(:active) {\n background: ${fillSelectedColor};\n }\n\n :host([disabled]) {\n background: transparent;\n }\n\n a {\n display: grid;\n contain: layout;\n overflow: visible;\n box-sizing: border-box;\n height: ${controlHeight};\n grid-template-columns: 1fr;\n column-gap: 8px;\n grid-template-rows: 1fr;\n justify-items: start;\n align-items: center;\n margin: 0 0;\n white-space: nowrap;\n color: ${bodyFontColor};\n fill: currentcolor;\n cursor: pointer;\n text-decoration: none;\n outline: none;\n }\n\n :host([disabled]) a {\n color: ${bodyDisabledFontColor};\n fill: currentcolor;\n cursor: default;\n }\n\n :host(.indent-1) a {\n grid-template-columns: ${iconSize} 1fr;\n }\n\n [part='start'] {\n display: contents;\n pointer-events: none;\n }\n\n slot[name='start']::slotted(*) {\n ${iconColor.cssCustomProperty}: currentcolor;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n :host(.indent-1) [part='start'] {\n grid-column: 1;\n }\n\n .content {\n pointer-events: none;\n }\n\n :host(.indent-1) .content {\n grid-column: 2;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,eAAe,EACf,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,UAAU,EACV,aAAa,EACb,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;;;iBASjC,qBAAqB;;;;;;;mBAOnB,aAAa,IAAI,eAAe;mBAChC,aAAa,MAAM,WAAW;;;;;;;;;;;;yBAYxB,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n bodyDisabledFontColor,\n bodyFontColor,\n borderHoverColor,\n borderWidth,\n buttonLabelFont,\n controlHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n smallDelay,\n mediumPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n position: relative;\n box-sizing: border-box;\n font: ${buttonLabelFont};\n height: ${controlHeight};\n color: ${bodyFontColor};\n align-items: center;\n justify-content: center;\n cursor: pointer;\n --ni-private-active-indicator-width: 2px;\n --ni-private-focus-indicator-width: 1px;\n --ni-private-indicator-lines-gap: 1px;\n --ni-private-focus-indicator-inset-width: 3px;\n }\n\n :host(:hover) {\n background-color: ${fillHoverColor};\n }\n\n :host(:hover[aria-current]) {\n background-color: ${fillHoverSelectedColor};\n }\n\n :host(:active) {\n background: none;\n }\n\n :host([disabled]) {\n cursor: default;\n color: ${bodyDisabledFontColor};\n background: none;\n }\n\n slot:not([name]) {\n pointer-events: none;\n display: block;\n padding: ${mediumPadding} ${standardPadding}\n calc(${mediumPadding} - ${borderWidth});\n }\n\n a::before {\n content: '';\n position: absolute;\n bottom: calc(\n var(--ni-private-active-indicator-width) +\n var(--ni-private-indicator-lines-gap)\n );\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-focus-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n a::before {\n transition-duration: 0s;\n }\n }\n\n a${focusVisible}::before {\n width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));\n }\n\n a {\n display: inline-flex;\n text-decoration: none;\n color: inherit;\n cursor: inherit;\n outline: none;\n align-items: center;\n justify-content: center;\n }\n\n a::after {\n content: '';\n position: absolute;\n bottom: 0px;\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-active-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n a::after {\n transition-duration: 0s;\n }\n }\n\n a${focusVisible}::after {\n width: 100%;\n border-bottom-width: var(--ni-private-focus-indicator-width);\n }\n\n :host([aria-current]) a::after {\n width: 100%;\n border-bottom-width: var(--ni-private-active-indicator-width);\n }\n\n :host([disabled][aria-current]) a::after {\n border-bottom-color: rgba(${borderHoverColor}, 0.3);\n }\n\n [part='start'] {\n display: none;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
|
@@ -84,6 +84,7 @@ export const styles = css `
|
|
|
84
84
|
/* this rule keeps children without an icon text aligned with parents */ ''}
|
|
85
85
|
[part="start"] {
|
|
86
86
|
width: ${iconSize};
|
|
87
|
+
pointer-events: none;
|
|
87
88
|
}
|
|
88
89
|
|
|
89
90
|
${ /* the start class is applied when the corresponding slot is filled */''}
|
|
@@ -99,6 +100,10 @@ export const styles = css `
|
|
|
99
100
|
height: ${iconSize};
|
|
100
101
|
}
|
|
101
102
|
|
|
103
|
+
.content {
|
|
104
|
+
pointer-events: none;
|
|
105
|
+
}
|
|
106
|
+
|
|
102
107
|
[part='end'] {
|
|
103
108
|
display: none;
|
|
104
109
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;;cAUxB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;uBAQjC,QAAQ;;;;;sBAKT,cAAc;;;;;;;;sBAQd,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;MAGjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;;;;;;;cAUxB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;uBAQjC,QAAQ;;;;;sBAKT,cAAc;;;;;;;;sBAQd,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;MAGjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;;MAInB,CAAA,sEAAuE,EAAE;;;+BAGhD,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;;;;;CAUzB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFontFamily,\n bodyFontWeight,\n bodyFontColor,\n borderHoverColor,\n borderWidth,\n iconSize,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n bodyFontSize,\n bodyDisabledFontColor,\n iconColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('block')}\n\n :host {\n ${\n /* don't set font-size here or else it overrides what we set on .items */ ''\n }\n font-family: ${bodyFontFamily};\n font-weight: ${bodyFontWeight};\n contain: content;\n position: relative;\n outline: none;\n color: ${bodyFontColor};\n cursor: pointer;\n --ni-private-tree-item-nested-width: 0;\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n cursor: default;\n }\n\n .control {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n\n .control${focusVisible} {\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -2px;\n }\n\n .positioning-region {\n display: flex;\n position: relative;\n box-sizing: border-box;\n height: calc(${iconSize} * 2);\n width: 100%;\n }\n\n .positioning-region:hover {\n background: ${fillHoverColor};\n }\n\n :host([disabled]) .positioning-region:hover {\n background: transparent;\n }\n\n :host([selected]) .positioning-region {\n background: ${fillSelectedColor};\n }\n\n :host([selected]) .positioning-region:hover {\n background: ${fillHoverSelectedColor};\n }\n\n .positioning-region::before {\n content: '';\n display: block;\n width: var(--ni-private-tree-item-nested-width);\n flex-shrink: 0;\n }\n\n .content-region {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n width: 100%;\n padding-left: 10px;\n font: inherit;\n font-size: ${bodyFontSize};\n ${userSelectNone}\n position: relative;\n margin-inline-start: ${iconSize};\n }\n\n ${\n /* this rule keeps children without an icon text aligned with parents */ ''\n }\n [part=\"start\"] {\n width: ${iconSize};\n pointer-events: none;\n }\n\n ${/* the start class is applied when the corresponding slot is filled */ ''}\n .start {\n display: flex;\n margin-inline-start: ${iconSize};\n margin-inline-end: ${iconSize};\n }\n\n slot[name='start']::slotted(*) {\n ${iconColor.cssCustomProperty}: currentcolor;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .content {\n pointer-events: none;\n }\n\n [part='end'] {\n display: none;\n }\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;mCAEI,WAAW;;UAEpC;AACE;mDACmD,CAAC,EACxD;iBACS,aAAa;gBACd,QAAQ;;;;;;;;;;;;;kBAaN,WAAW;oCACO,WAAW;;;;;;;;cAQjC,YAAY;kBACR,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;mCAEI,WAAW;;UAEpC;AACE;mDACmD,CAAC,EACxD;iBACS,aAAa;gBACd,QAAQ;;;;;;;;;;;;;kBAaN,WAAW;oCACO,WAAW;;;;;;;;cAQjC,YAAY;kBACR,WAAW,UAAU,gBAAgB;6BAC1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2B5B,QAAQ;kBACP,QAAQ;gBACV,oBAAoB;;CAEnC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFontColor,\n borderHoverColor,\n borderWidth,\n controlHeight,\n iconSize,\n linkFont,\n placeholderFontColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n height: ${controlHeight};\n box-sizing: border-box;\n padding-left: calc(4px - ${borderWidth});\n\n ${\n /* When href removed the .control element is also removed\n so this becomes the fallback color for the slot */ ''\n }\n color: ${bodyFontColor};\n font: ${linkFont};\n }\n\n .listitem {\n display: flex;\n align-items: center;\n }\n\n .control {\n color: var(--ni-private-breadcrumb-link-font-color);\n display: flex;\n align-items: center;\n justify-content: center;\n border: ${borderWidth} solid transparent;\n padding-right: calc(4px - ${borderWidth});\n text-decoration: none;\n }\n\n .control:hover {\n text-decoration: underline;\n }\n\n .control${focusVisible} {\n border: ${borderWidth} solid ${borderHoverColor};\n outline: 2px solid ${borderHoverColor};\n outline-offset: 1px;\n }\n\n .control:active {\n color: var(--ni-private-breadcrumb-link-active-font-color);\n text-decoration: underline;\n }\n\n [part='start'] {\n display: none;\n }\n\n .content {\n pointer-events: none;\n }\n\n [part='end'] {\n display: none;\n }\n\n slot[name='separator'] {\n display: flex;\n align-items: center;\n }\n\n slot[name='separator'] svg {\n width: ${iconSize};\n height: ${iconSize};\n fill: ${placeholderFontColor};\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "22.0.
|
|
3
|
+
"version": "22.0.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",
|