@ni/nimble-components 20.1.2 → 20.1.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 +187 -92
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +936 -843
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/anchor-tab/index.js +4 -1
- package/dist/esm/anchor-tab/index.js.map +1 -1
- package/dist/esm/anchor-tab/styles.js +101 -2
- package/dist/esm/anchor-tab/styles.js.map +1 -1
- package/dist/esm/anchor-tab/template.js +0 -1
- package/dist/esm/anchor-tab/template.js.map +1 -1
- package/dist/esm/tab/index.js +1 -1
- package/dist/esm/tab/index.js.map +1 -1
- package/dist/esm/{patterns/tab → tab}/styles.js +4 -8
- package/dist/esm/tab/styles.js.map +1 -0
- package/package.json +1 -1
- package/dist/esm/patterns/tab/styles.js.map +0 -1
- /package/dist/esm/{patterns → src}/tab/styles.d.ts +0 -0
- /package/dist/esm/{src/patterns/tab → tab}/styles.d.ts +0 -0
|
@@ -38,7 +38,10 @@ __decorate([
|
|
|
38
38
|
const nimbleAnchorTab = AnchorTab.compose({
|
|
39
39
|
baseName: 'anchor-tab',
|
|
40
40
|
template,
|
|
41
|
-
styles
|
|
41
|
+
styles,
|
|
42
|
+
shadowOptions: {
|
|
43
|
+
delegatesFocus: true
|
|
44
|
+
}
|
|
42
45
|
});
|
|
43
46
|
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
|
|
44
47
|
export const anchorTabTag = DesignSystem.tagFor(AnchorTab);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;;;;WAOG;QAEa,iBAAY,GAAG,OAAO,CAAC;IAC3C,CAAC;CAAA;AAZG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAWxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACE;AAG3C,uFAAuF;AAEvF,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;;;;WAOG;QAEa,iBAAY,GAAG,OAAO,CAAC;IAC3C,CAAC;CAAA;AAZG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAWxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACE;AAG3C,uFAAuF;AAEvF,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
|
|
@@ -1,13 +1,112 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
|
-
import {
|
|
2
|
+
import { display } from '@microsoft/fast-foundation';
|
|
3
|
+
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
+
import { bodyDisabledFontColor, bodyFontColor, borderHoverColor, borderWidth, buttonLabelFont, controlHeight, fillHoverColor, fillHoverSelectedColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
|
|
3
5
|
export const styles = css `
|
|
4
|
-
${
|
|
6
|
+
${display('inline-flex')}
|
|
7
|
+
|
|
8
|
+
:host {
|
|
9
|
+
position: relative;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
font: ${buttonLabelFont};
|
|
12
|
+
height: ${controlHeight};
|
|
13
|
+
color: ${bodyFontColor};
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
--ni-private-active-indicator-width: 2px;
|
|
18
|
+
--ni-private-focus-indicator-width: 1px;
|
|
19
|
+
--ni-private-indicator-lines-gap: 1px;
|
|
20
|
+
--ni-private-focus-indicator-inset-width: 3px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
:host(:hover) {
|
|
24
|
+
background-color: ${fillHoverColor};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(:hover[aria-selected='true']) {
|
|
28
|
+
background-color: ${fillHoverSelectedColor};
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
:host(:active) {
|
|
32
|
+
background: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([disabled]) {
|
|
36
|
+
cursor: default;
|
|
37
|
+
color: ${bodyDisabledFontColor};
|
|
38
|
+
background: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
slot:not([name]) {
|
|
42
|
+
display: block;
|
|
43
|
+
padding: calc(${standardPadding} / 2) ${standardPadding}
|
|
44
|
+
calc(${standardPadding} / 2 - ${borderWidth});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
a::before {
|
|
48
|
+
content: '';
|
|
49
|
+
position: absolute;
|
|
50
|
+
bottom: calc(
|
|
51
|
+
var(--ni-private-active-indicator-width) +
|
|
52
|
+
var(--ni-private-indicator-lines-gap)
|
|
53
|
+
);
|
|
54
|
+
width: 0px;
|
|
55
|
+
height: 0px;
|
|
56
|
+
border-bottom: ${borderHoverColor}
|
|
57
|
+
var(--ni-private-focus-indicator-width) solid;
|
|
58
|
+
transition: width ${smallDelay} ease-in;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@media (prefers-reduced-motion) {
|
|
62
|
+
a::before {
|
|
63
|
+
transition-duration: 0s;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
a${focusVisible}::before {
|
|
68
|
+
width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
|
|
69
|
+
}
|
|
5
70
|
|
|
6
71
|
a {
|
|
72
|
+
display: inline-flex;
|
|
7
73
|
text-decoration: none;
|
|
8
74
|
color: inherit;
|
|
9
75
|
cursor: inherit;
|
|
10
76
|
outline: none;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
a::after {
|
|
82
|
+
content: '';
|
|
83
|
+
position: absolute;
|
|
84
|
+
bottom: 0px;
|
|
85
|
+
width: 0px;
|
|
86
|
+
height: 0px;
|
|
87
|
+
border-bottom: ${borderHoverColor}
|
|
88
|
+
var(--ni-private-active-indicator-width) solid;
|
|
89
|
+
transition: width ${smallDelay} ease-in;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
@media (prefers-reduced-motion) {
|
|
93
|
+
a::after {
|
|
94
|
+
transition-duration: 0s;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
a${focusVisible}::after {
|
|
99
|
+
width: 100%;
|
|
100
|
+
border-bottom-width: var(--ni-private-focus-indicator-width);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host([aria-selected='true']) a::after {
|
|
104
|
+
width: 100%;
|
|
105
|
+
border-bottom-width: var(--ni-private-active-indicator-width);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:host([disabled][aria-selected='true']) a::after {
|
|
109
|
+
border-bottom-color: rgba(${borderHoverColor}, 0.3);
|
|
11
110
|
}
|
|
12
111
|
|
|
13
112
|
[part='start'] {
|
|
@@ -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,MAAM,
|
|
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,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;;;;;;wBAMd,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;;;;;;;;;;;;yBAY9B,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;;;;;;;;;;yBAoBM,gBAAgB;;4BAEb,UAAU;;;;;;;;;OAS/B,YAAY;;;;;;;;;;;oCAWiB,gBAAgB;;;;;;;;;;CAUnD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tab/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAW;2DACe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;wBAElD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tab/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAW;2DACe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;wBAElD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;cAEjB,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;cAEtC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}
|
package/dist/esm/tab/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,IAAI,aAAa,EACpB,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,IAAI,aAAa,EACpB,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,GAAI,SAAQ,aAAa;CAAG;AAEzC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,aAAa;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;AACtE,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, fillHoverSelectedColor, standardPadding, smallDelay, buttonLabelFont } from '
|
|
4
|
-
import { focusVisible } from '
|
|
3
|
+
import { borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillHoverColor, fillHoverSelectedColor, standardPadding, smallDelay, buttonLabelFont } from '../theme-provider/design-tokens';
|
|
4
|
+
import { focusVisible } from '../utilities/style/focus';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('inline-flex')}
|
|
7
7
|
|
|
@@ -28,10 +28,6 @@ export const styles = css `
|
|
|
28
28
|
background-color: ${fillHoverSelectedColor};
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
:host(:focus) {
|
|
32
|
-
outline: none;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
31
|
:host(${focusVisible}) {
|
|
36
32
|
outline: none;
|
|
37
33
|
}
|
|
@@ -68,7 +64,7 @@ export const styles = css `
|
|
|
68
64
|
|
|
69
65
|
@media (prefers-reduced-motion) {
|
|
70
66
|
:host::before {
|
|
71
|
-
transition-duration:
|
|
67
|
+
transition-duration: 0s;
|
|
72
68
|
}
|
|
73
69
|
}
|
|
74
70
|
|
|
@@ -89,7 +85,7 @@ export const styles = css `
|
|
|
89
85
|
|
|
90
86
|
@media (prefers-reduced-motion) {
|
|
91
87
|
:host::after {
|
|
92
|
-
transition-duration:
|
|
88
|
+
transition-duration: 0s;
|
|
93
89
|
}
|
|
94
90
|
}
|
|
95
91
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/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,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;YAGtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;wBAMd,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;;;;;;;;;;;;yBAY9B,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "20.1.
|
|
3
|
+
"version": "20.1.3",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/tab/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,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;gBAKZ,eAAe;kBACb,aAAa;iBACd,aAAa;;;;;;;;;;;4BAWF,cAAc;;;;4BAId,sBAAsB;;;;;;;YAOtC,YAAY;;;;;;;;;;iBAUP,qBAAqB;;;;;;wBAMd,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;;;;;;;;;;;;yBAY9B,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;yBAUC,gBAAgB;;4BAEb,UAAU;;;;;;;;;YAS1B,YAAY;;;;;;;;;;;oCAWY,gBAAgB;;CAEnD,CAAC"}
|
|
File without changes
|
|
File without changes
|