@ni/nimble-components 29.7.3 → 29.7.5
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 +73 -63
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +71 -61
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/breadcrumb/styles.js +6 -16
- package/dist/esm/breadcrumb/styles.js.map +1 -1
- package/dist/esm/breadcrumb-item/styles.js +68 -48
- package/dist/esm/breadcrumb-item/styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,31 +1,21 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import { bodyEmphasizedFont,
|
|
3
|
+
import { bodyEmphasizedFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-block')}
|
|
6
6
|
|
|
7
|
-
:host {
|
|
8
|
-
font: ${linkFont};
|
|
9
|
-
--ni-private-breadcrumb-link-font-color: ${linkFontColor};
|
|
10
|
-
--ni-private-breadcrumb-link-active-font-color: ${linkActiveFontColor};
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([appearance='prominent']) {
|
|
14
|
-
--ni-private-breadcrumb-link-font-color: ${linkProminentFontColor};
|
|
15
|
-
--ni-private-breadcrumb-link-active-font-color: ${linkActiveProminentFontColor};
|
|
16
|
-
}
|
|
17
|
-
|
|
18
7
|
.list {
|
|
19
8
|
display: flex;
|
|
20
9
|
flex-wrap: wrap;
|
|
21
10
|
}
|
|
22
11
|
|
|
23
|
-
::slotted(
|
|
24
|
-
|
|
12
|
+
::slotted(:last-child) {
|
|
13
|
+
font: ${bodyEmphasizedFont};
|
|
14
|
+
color: ${linkFontColor};
|
|
25
15
|
}
|
|
26
16
|
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
:host([appearance='prominent']) ::slotted(:last-child) {
|
|
18
|
+
color: ${linkProminentFontColor};
|
|
29
19
|
}
|
|
30
20
|
`;
|
|
31
21
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;;;;;gBAQb,kBAAkB;iBACjB,aAAa;;;;iBAIb,sBAAsB;;CAEtC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n bodyEmphasizedFont,\n linkFontColor,\n linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-block')}\n\n .list {\n display: flex;\n flex-wrap: wrap;\n }\n\n ::slotted(:last-child) {\n font: ${bodyEmphasizedFont};\n color: ${linkFontColor};\n }\n\n :host([appearance='prominent']) ::slotted(:last-child) {\n color: ${linkProminentFontColor};\n }\n`;\n"]}
|
|
@@ -1,72 +1,92 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import {
|
|
3
|
+
import { borderHoverColor, controlHeight, iconSize, linkActiveFontColor, linkDisabledFontColor, linkFont, linkFontColor, mediumPadding, placeholderFontColor } from '../theme-provider/design-tokens';
|
|
4
4
|
import { focusVisible } from '../utilities/style/focus';
|
|
5
5
|
export const styles = css `
|
|
6
|
-
|
|
6
|
+
@layer base, hover, focusVisible, active, disabled;
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
padding-left: calc(4px - ${borderWidth});
|
|
8
|
+
@layer base {
|
|
9
|
+
${display('inline-flex')}
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
:host {
|
|
12
|
+
height: ${controlHeight};
|
|
13
|
+
|
|
14
|
+
${
|
|
13
15
|
/* When href removed the .control element is also removed
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
so this becomes the fallback color for the slot */ ''}
|
|
17
|
+
color: ${linkDisabledFontColor};
|
|
18
|
+
font: ${linkFont};
|
|
19
|
+
}
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
.listitem {
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
}
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
text-decoration: none;
|
|
32
|
-
}
|
|
26
|
+
.control {
|
|
27
|
+
color: ${linkFontColor};
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
text-decoration: none;
|
|
32
|
+
}
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
[part='start'] {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
outline-offset: 1px;
|
|
42
|
-
}
|
|
38
|
+
.content {
|
|
39
|
+
pointer-events: none;
|
|
40
|
+
}
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
[part='end'] {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.separator {
|
|
47
|
+
padding-left: ${mediumPadding};
|
|
48
|
+
padding-right: ${mediumPadding};
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
slot[name='separator'] {
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
48
55
|
|
|
49
|
-
|
|
50
|
-
|
|
56
|
+
slot[name='separator'] svg {
|
|
57
|
+
width: ${iconSize};
|
|
58
|
+
height: ${iconSize};
|
|
59
|
+
fill: ${placeholderFontColor};
|
|
60
|
+
}
|
|
51
61
|
}
|
|
52
62
|
|
|
53
|
-
|
|
54
|
-
|
|
63
|
+
@layer hover {
|
|
64
|
+
.control:any-link:hover {
|
|
65
|
+
text-decoration: underline;
|
|
66
|
+
}
|
|
55
67
|
}
|
|
56
68
|
|
|
57
|
-
|
|
58
|
-
|
|
69
|
+
@layer focusVisible {
|
|
70
|
+
.control${focusVisible} {
|
|
71
|
+
outline: none;
|
|
72
|
+
box-shadow: inset 0px -1px;
|
|
73
|
+
text-decoration: underline;
|
|
74
|
+
color: ${borderHoverColor};
|
|
75
|
+
}
|
|
59
76
|
}
|
|
60
77
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
78
|
+
@layer active {
|
|
79
|
+
.control:active {
|
|
80
|
+
color: ${linkActiveFontColor};
|
|
81
|
+
text-decoration: underline;
|
|
82
|
+
box-shadow: none;
|
|
83
|
+
}
|
|
64
84
|
}
|
|
65
85
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
86
|
+
@layer disabled {
|
|
87
|
+
.control:not(:any-link) {
|
|
88
|
+
color: ${linkDisabledFontColor};
|
|
89
|
+
}
|
|
70
90
|
}
|
|
71
91
|
`;
|
|
72
92
|
//# sourceMappingURL=styles.js.map
|
|
@@ -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,
|
|
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,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,aAAa,CAAC;;;sBAGV,aAAa;;cAErB;AACE;kDACkD,CAAC,EACvD;qBACS,qBAAqB;oBACtB,QAAQ;;;;;;;;;qBASP,aAAa;;;;;;;;;;;;;;;;;;;;4BAoBN,aAAa;6BACZ,aAAa;;;;;;;;;qBASrB,QAAQ;sBACP,QAAQ;oBACV,oBAAoB;;;;;;;;;;;kBAWtB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;;;qBAQnB,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderHoverColor,\n controlHeight,\n iconSize,\n linkActiveFontColor,\n linkDisabledFontColor,\n linkFont,\n linkFontColor,\n mediumPadding,\n placeholderFontColor\n} from '../theme-provider/design-tokens';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled;\n\n @layer base {\n ${display('inline-flex')}\n\n :host {\n height: ${controlHeight};\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: ${linkDisabledFontColor};\n font: ${linkFont};\n }\n\n .listitem {\n display: flex;\n align-items: center;\n }\n\n .control {\n color: ${linkFontColor};\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\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 .separator {\n padding-left: ${mediumPadding};\n padding-right: ${mediumPadding};\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\n @layer hover {\n .control:any-link:hover {\n text-decoration: underline;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n outline: none;\n box-shadow: inset 0px -1px;\n text-decoration: underline;\n color: ${borderHoverColor};\n }\n }\n\n @layer active {\n .control:active {\n color: ${linkActiveFontColor};\n text-decoration: underline;\n box-shadow: none;\n }\n }\n\n @layer disabled {\n .control:not(:any-link) {\n color: ${linkDisabledFontColor};\n }\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "29.7.
|
|
3
|
+
"version": "29.7.5",
|
|
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",
|
|
@@ -67,8 +67,8 @@
|
|
|
67
67
|
"@microsoft/fast-foundation": "^2.49.6",
|
|
68
68
|
"@microsoft/fast-web-utilities": "^6.0.0",
|
|
69
69
|
"@ni/nimble-tokens": "^6.15.0",
|
|
70
|
-
"@tanstack/table-core": "^8.
|
|
71
|
-
"@tanstack/virtual-core": "^3.
|
|
70
|
+
"@tanstack/table-core": "^8.19.2",
|
|
71
|
+
"@tanstack/virtual-core": "^3.8.1",
|
|
72
72
|
"@tiptap/core": "^2.2.2",
|
|
73
73
|
"@tiptap/extension-bold": "^2.2.2",
|
|
74
74
|
"@tiptap/extension-bullet-list": "^2.2.2",
|