@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.
@@ -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;CACT,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
+ {"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 { styles as tabStyles } from '../patterns/tab/styles';
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
- ${tabStyles}
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,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,SAAS;;;;;;;;;;;;;;;;CAgBd,CAAC"}
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"}
@@ -11,7 +11,6 @@ export const template = (context, definition) => html `
11
11
  rel="${x => x.rel}"
12
12
  target="${x => x.target}"
13
13
  type="${x => x.type}"
14
- tabindex="-1"
15
14
  >
16
15
  ${startSlotTemplate(context, definition)}
17
16
  <slot></slot>
@@ -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;;;cAGjB,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;cAEtC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}
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"}
@@ -1,5 +1,5 @@
1
1
  import { DesignSystem, Tab as FoundationTab, tabTemplate as template } from '@microsoft/fast-foundation';
2
- import { styles } from '../patterns/tab/styles';
2
+ import { styles } from './styles';
3
3
  /**
4
4
  * A nimble-styled HTML tab
5
5
  */
@@ -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,wBAAwB,CAAC;AAQhD;;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
+ {"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 '../../theme-provider/design-tokens';
4
- import { focusVisible } from '../../utilities/style/focus';
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: 0.01s;
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: 0.01s;
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.2",
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