@ni/nimble-components 7.1.0 → 7.2.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/esm/button/index.d.ts +0 -2
- package/dist/esm/button/index.js +0 -7
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/nimble-components/src/button/index.d.ts +0 -2
- package/dist/esm/nimble-components/src/toggle-button/template.d.ts +3 -1
- package/dist/esm/patterns/button/styles.js +26 -5
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/toggle-button/index.js +2 -1
- package/dist/esm/toggle-button/index.js.map +1 -1
- package/dist/esm/toggle-button/template.d.ts +3 -1
- package/dist/esm/toggle-button/template.js +5 -6
- package/dist/esm/toggle-button/template.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/button/index.js
CHANGED
|
@@ -27,13 +27,6 @@ class Button extends FoundationButton {
|
|
|
27
27
|
* HTML Attribute: content-hidden
|
|
28
28
|
*/
|
|
29
29
|
this.contentHidden = false;
|
|
30
|
-
this.contentId = 'nimble-button-content';
|
|
31
|
-
}
|
|
32
|
-
connectedCallback() {
|
|
33
|
-
super.connectedCallback();
|
|
34
|
-
const content = this.control.querySelector('.content');
|
|
35
|
-
content.id = this.contentId;
|
|
36
|
-
this.control.setAttribute('aria-labelledby', this.contentId);
|
|
37
30
|
}
|
|
38
31
|
}
|
|
39
32
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAbG;IADC,IAAI;0CAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,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,YAAY,EAAE,CAAC,CAAC"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, ButtonOptions } from '@microsoft/fast-foundation';
|
|
1
3
|
import type { ToggleButton } from '.';
|
|
2
|
-
export declare const template:
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<ToggleButton>, ButtonOptions>;
|
|
@@ -88,14 +88,26 @@ export const styles = css `
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
:host([content-hidden]) .content {
|
|
91
|
-
|
|
91
|
+
${
|
|
92
|
+
/**
|
|
93
|
+
* Hide content visually while keeping it screen reader-accessible.
|
|
94
|
+
* Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
|
|
95
|
+
* See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
|
|
96
|
+
*/
|
|
97
|
+
''}
|
|
98
|
+
display: inline-block;
|
|
99
|
+
height: 1px;
|
|
100
|
+
width: 1px;
|
|
101
|
+
position: absolute;
|
|
102
|
+
margin: -1px;
|
|
103
|
+
clip: rect(1px, 1px, 1px, 1px);
|
|
104
|
+
clip-path: inset(50%);
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
padding: 0;
|
|
92
107
|
}
|
|
93
108
|
|
|
94
109
|
[part='start'] {
|
|
95
110
|
display: contents;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
slot[name='start']::slotted(*) {
|
|
99
111
|
${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
|
|
100
112
|
}
|
|
101
113
|
|
|
@@ -104,6 +116,11 @@ export const styles = css `
|
|
|
104
116
|
}
|
|
105
117
|
|
|
106
118
|
[part='end'] {
|
|
119
|
+
display: contents;
|
|
120
|
+
${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host([content-hidden]) [part='end'] {
|
|
107
124
|
display: none;
|
|
108
125
|
}
|
|
109
126
|
`
|
|
@@ -165,7 +182,7 @@ export const styles = css `
|
|
|
165
182
|
}
|
|
166
183
|
|
|
167
184
|
.control:hover {
|
|
168
|
-
background-color:
|
|
185
|
+
background-color: transparent;
|
|
169
186
|
border-color: ${borderHoverColor};
|
|
170
187
|
}
|
|
171
188
|
|
|
@@ -174,6 +191,10 @@ export const styles = css `
|
|
|
174
191
|
border-color: ${borderHoverColor};
|
|
175
192
|
}
|
|
176
193
|
|
|
194
|
+
.control${focusVisible}:hover {
|
|
195
|
+
background-color: transparent;
|
|
196
|
+
}
|
|
197
|
+
|
|
177
198
|
.control:active {
|
|
178
199
|
background-color: ${fillSelectedColor};
|
|
179
200
|
border-color: ${fillSelectedColor};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/button/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;UAmB9C;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;;UAcE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;UASpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;CAM7D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;;oCAM9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;;;;;wCAKE,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
|
|
3
|
+
import { applyMixins, DesignSystem, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { template } from './template';
|
|
6
6
|
import { ButtonAppearance } from '../patterns/button/types';
|
|
@@ -36,6 +36,7 @@ __decorate([
|
|
|
36
36
|
__decorate([
|
|
37
37
|
attr({ attribute: 'content-hidden', mode: 'boolean' })
|
|
38
38
|
], ToggleButton.prototype, "contentHidden", void 0);
|
|
39
|
+
applyMixins(ToggleButton, StartEnd);
|
|
39
40
|
const nimbleToggleButton = ToggleButton.compose({
|
|
40
41
|
baseName: 'toggle-button',
|
|
41
42
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEpC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,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,kBAAkB,EAAE,CAAC,CAAC"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
+
import { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, ButtonOptions } from '@microsoft/fast-foundation';
|
|
1
3
|
import type { ToggleButton } from '.';
|
|
2
|
-
export declare const template:
|
|
4
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<ToggleButton>, ButtonOptions>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { html, ref } from '@microsoft/fast-element';
|
|
2
|
-
|
|
2
|
+
import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
export const template = (context, definition) => html `
|
|
3
4
|
<div
|
|
4
5
|
role="button"
|
|
5
6
|
part="control"
|
|
6
7
|
aria-pressed="${(x) => x.checked}"
|
|
7
8
|
aria-disabled="${(x) => x.disabled}"
|
|
8
9
|
aria-readonly="${(x) => x.readOnly}"
|
|
9
|
-
aria-labelledby="nimble-toggle-button-content"
|
|
10
10
|
tabindex="${(x) => (x.disabled ? null : 0)}"
|
|
11
11
|
@keypress="${(x, c) => x.keypressHandler(c.event)}"
|
|
12
12
|
@click="${(x, c) => x.clickHandler(c.event)}"
|
|
@@ -14,12 +14,11 @@ export const template = html `
|
|
|
14
14
|
?disabled="${x => x.disabled}"
|
|
15
15
|
${ref('control')}
|
|
16
16
|
>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</span>
|
|
20
|
-
<span class="content" part="content" id="nimble-toggle-button-content">
|
|
17
|
+
${startSlotTemplate(context, definition)}
|
|
18
|
+
<span class="content" part="content">
|
|
21
19
|
<slot></slot>
|
|
22
20
|
</span>
|
|
21
|
+
${endSlotTemplate(context, definition)}
|
|
23
22
|
</div>
|
|
24
23
|
`;
|
|
25
24
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,eAAe,EACf,iBAAiB,EAGpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAc;;;;wBAIvB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;UAEd,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;UAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "7.1
|
|
3
|
+
"version": "7.2.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 build-components && npm run generate-scss && npm run build-storybook",
|