@ni/nimble-components 1.0.0-beta.92 → 1.0.0

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.
Files changed (260) hide show
  1. package/README.md +63 -3
  2. package/dist/esm/button/index.d.ts +16 -0
  3. package/dist/esm/button/index.js +22 -0
  4. package/dist/esm/button/index.js.map +1 -1
  5. package/dist/esm/button/styles.js +19 -9
  6. package/dist/esm/button/styles.js.map +1 -1
  7. package/dist/esm/button/types.d.ts +3 -0
  8. package/dist/esm/button/types.js +0 -4
  9. package/dist/esm/button/types.js.map +1 -1
  10. package/dist/esm/checkbox/index.d.ts +11 -1
  11. package/dist/esm/checkbox/index.js +8 -2
  12. package/dist/esm/checkbox/index.js.map +1 -1
  13. package/dist/esm/checkbox/styles.js +4 -4
  14. package/dist/esm/checkbox/styles.js.map +1 -1
  15. package/dist/esm/drawer/index.d.ts +7 -3
  16. package/dist/esm/drawer/index.js +8 -9
  17. package/dist/esm/drawer/index.js.map +1 -1
  18. package/dist/esm/drawer/styles.js +8 -7
  19. package/dist/esm/drawer/styles.js.map +1 -1
  20. package/dist/esm/drawer/types.d.ts +2 -0
  21. package/dist/esm/drawer/types.js.map +1 -1
  22. package/dist/esm/icon-base/styles.js +6 -6
  23. package/dist/esm/icon-base/styles.js.map +1 -1
  24. package/dist/esm/icon-base/template.js +1 -1
  25. package/dist/esm/icon-base/types.d.ts +11 -0
  26. package/dist/esm/icon-base/types.js +12 -0
  27. package/dist/esm/icon-base/types.js.map +1 -0
  28. package/dist/esm/icons/access-control.d.ts +5 -0
  29. package/dist/esm/icons/access-control.js.map +1 -1
  30. package/dist/esm/icons/admin.d.ts +5 -0
  31. package/dist/esm/icons/admin.js.map +1 -1
  32. package/dist/esm/icons/administration.d.ts +5 -0
  33. package/dist/esm/icons/administration.js.map +1 -1
  34. package/dist/esm/icons/all-icons.d.ts +11 -0
  35. package/dist/esm/icons/all-icons.js +11 -0
  36. package/dist/esm/icons/all-icons.js.map +1 -1
  37. package/dist/esm/icons/check.d.ts +5 -0
  38. package/dist/esm/icons/check.js.map +1 -1
  39. package/dist/esm/icons/custom-applications.d.ts +5 -0
  40. package/dist/esm/icons/custom-applications.js.map +1 -1
  41. package/dist/esm/icons/custom-status.d.ts +12 -0
  42. package/dist/esm/icons/custom-status.js +12 -0
  43. package/dist/esm/icons/custom-status.js.map +1 -0
  44. package/dist/esm/icons/delete.d.ts +5 -0
  45. package/dist/esm/icons/delete.js.map +1 -1
  46. package/dist/esm/icons/done.d.ts +12 -0
  47. package/dist/esm/icons/done.js +12 -0
  48. package/dist/esm/icons/done.js.map +1 -0
  49. package/dist/esm/icons/fail.d.ts +12 -0
  50. package/dist/esm/icons/fail.js +12 -0
  51. package/dist/esm/icons/fail.js.map +1 -0
  52. package/dist/esm/icons/login.d.ts +5 -0
  53. package/dist/esm/icons/login.js.map +1 -1
  54. package/dist/esm/icons/logout.d.ts +5 -0
  55. package/dist/esm/icons/logout.js.map +1 -1
  56. package/dist/esm/icons/looping.d.ts +12 -0
  57. package/dist/esm/icons/looping.js +12 -0
  58. package/dist/esm/icons/looping.js.map +1 -0
  59. package/dist/esm/icons/managed-systems.d.ts +5 -0
  60. package/dist/esm/icons/managed-systems.js.map +1 -1
  61. package/dist/esm/icons/measurement-data-analysis.d.ts +5 -0
  62. package/dist/esm/icons/measurement-data-analysis.js.map +1 -1
  63. package/dist/esm/icons/running.d.ts +12 -0
  64. package/dist/esm/icons/running.js +12 -0
  65. package/dist/esm/icons/running.js.map +1 -0
  66. package/dist/esm/icons/settings.d.ts +5 -0
  67. package/dist/esm/icons/settings.js.map +1 -1
  68. package/dist/esm/icons/skipped.d.ts +12 -0
  69. package/dist/esm/icons/skipped.js +12 -0
  70. package/dist/esm/icons/skipped.js.map +1 -0
  71. package/dist/esm/icons/status.d.ts +12 -0
  72. package/dist/esm/icons/status.js +12 -0
  73. package/dist/esm/icons/status.js.map +1 -0
  74. package/dist/esm/icons/succeeded.d.ts +12 -0
  75. package/dist/esm/icons/succeeded.js +12 -0
  76. package/dist/esm/icons/succeeded.js.map +1 -0
  77. package/dist/esm/icons/terminated.d.ts +12 -0
  78. package/dist/esm/icons/terminated.js +12 -0
  79. package/dist/esm/icons/terminated.js.map +1 -0
  80. package/dist/esm/icons/test-insights.d.ts +5 -0
  81. package/dist/esm/icons/test-insights.js.map +1 -1
  82. package/dist/esm/icons/timed-out.d.ts +12 -0
  83. package/dist/esm/icons/timed-out.js +12 -0
  84. package/dist/esm/icons/timed-out.js.map +1 -0
  85. package/dist/esm/icons/utilities.d.ts +5 -0
  86. package/dist/esm/icons/utilities.js.map +1 -1
  87. package/dist/esm/icons/waiting.d.ts +12 -0
  88. package/dist/esm/icons/waiting.js +12 -0
  89. package/dist/esm/icons/waiting.js.map +1 -0
  90. package/dist/esm/listbox-option/index.d.ts +5 -0
  91. package/dist/esm/listbox-option/index.js +2 -0
  92. package/dist/esm/listbox-option/index.js.map +1 -1
  93. package/dist/esm/menu/index.d.ts +8 -1
  94. package/dist/esm/menu/index.js +5 -2
  95. package/dist/esm/menu/index.js.map +1 -1
  96. package/dist/esm/menu-item/index.d.ts +9 -12
  97. package/dist/esm/menu-item/index.js +5 -2
  98. package/dist/esm/menu-item/index.js.map +1 -1
  99. package/dist/esm/nimble-components/src/button/behaviors.d.ts +12 -0
  100. package/dist/esm/nimble-components/src/button/index.d.ts +33 -0
  101. package/dist/esm/nimble-components/src/button/styles.d.ts +1 -0
  102. package/dist/esm/nimble-components/src/button/types.d.ts +12 -0
  103. package/dist/esm/nimble-components/src/checkbox/index.d.ts +12 -0
  104. package/dist/esm/nimble-components/src/checkbox/styles.d.ts +1 -0
  105. package/dist/esm/nimble-components/src/drawer/animations.d.ts +14 -0
  106. package/dist/esm/nimble-components/src/drawer/index.d.ts +43 -0
  107. package/dist/esm/nimble-components/src/drawer/styles.d.ts +1 -0
  108. package/dist/esm/nimble-components/src/drawer/types.d.ts +12 -0
  109. package/dist/esm/nimble-components/src/icon-base/index.d.ts +12 -0
  110. package/dist/esm/nimble-components/src/icon-base/styles.d.ts +1 -0
  111. package/dist/esm/nimble-components/src/icon-base/template.d.ts +2 -0
  112. package/dist/esm/nimble-components/src/icon-base/types.d.ts +11 -0
  113. package/dist/esm/nimble-components/src/icons/access-control.d.ts +12 -0
  114. package/dist/esm/nimble-components/src/icons/admin.d.ts +12 -0
  115. package/dist/esm/nimble-components/src/icons/administration.d.ts +12 -0
  116. package/dist/esm/nimble-components/src/icons/all-icons.d.ts +24 -0
  117. package/dist/esm/nimble-components/src/icons/check.d.ts +12 -0
  118. package/dist/esm/nimble-components/src/icons/custom-applications.d.ts +12 -0
  119. package/dist/esm/nimble-components/src/icons/custom-status.d.ts +12 -0
  120. package/dist/esm/nimble-components/src/icons/delete.d.ts +12 -0
  121. package/dist/esm/nimble-components/src/icons/done.d.ts +12 -0
  122. package/dist/esm/nimble-components/src/icons/fail.d.ts +12 -0
  123. package/dist/esm/nimble-components/src/icons/login.d.ts +12 -0
  124. package/dist/esm/nimble-components/src/icons/logout.d.ts +12 -0
  125. package/dist/esm/nimble-components/src/icons/looping.d.ts +12 -0
  126. package/dist/esm/nimble-components/src/icons/managed-systems.d.ts +12 -0
  127. package/dist/esm/nimble-components/src/icons/measurement-data-analysis.d.ts +12 -0
  128. package/dist/esm/nimble-components/src/icons/running.d.ts +12 -0
  129. package/dist/esm/nimble-components/src/icons/settings.d.ts +12 -0
  130. package/dist/esm/nimble-components/src/icons/skipped.d.ts +12 -0
  131. package/dist/esm/nimble-components/src/icons/status.d.ts +12 -0
  132. package/dist/esm/nimble-components/src/icons/succeeded.d.ts +12 -0
  133. package/dist/esm/nimble-components/src/icons/terminated.d.ts +12 -0
  134. package/dist/esm/nimble-components/src/icons/test-insights.d.ts +12 -0
  135. package/dist/esm/nimble-components/src/icons/timed-out.d.ts +12 -0
  136. package/dist/esm/nimble-components/src/icons/utilities.d.ts +12 -0
  137. package/dist/esm/nimble-components/src/icons/waiting.d.ts +12 -0
  138. package/dist/esm/nimble-components/src/listbox-option/index.d.ts +15 -0
  139. package/dist/esm/nimble-components/src/listbox-option/styles.d.ts +1 -0
  140. package/dist/esm/nimble-components/src/menu/index.d.ts +12 -0
  141. package/dist/esm/nimble-components/src/menu/styles.d.ts +1 -0
  142. package/dist/esm/nimble-components/src/menu-item/index.d.ts +12 -0
  143. package/dist/esm/nimble-components/src/menu-item/styles.d.ts +1 -0
  144. package/dist/esm/nimble-components/src/number-field/index.d.ts +12 -0
  145. package/dist/esm/nimble-components/src/number-field/styles.d.ts +1 -0
  146. package/dist/esm/nimble-components/src/select/index.d.ts +16 -0
  147. package/dist/esm/nimble-components/src/select/styles.d.ts +1 -0
  148. package/dist/esm/nimble-components/src/tab/index.d.ts +12 -0
  149. package/dist/esm/nimble-components/src/tab/styles.d.ts +1 -0
  150. package/dist/esm/nimble-components/src/tab-panel/index.d.ts +12 -0
  151. package/dist/esm/nimble-components/src/tab-panel/styles.d.ts +1 -0
  152. package/dist/esm/nimble-components/src/tabs/index.d.ts +12 -0
  153. package/dist/esm/nimble-components/src/tabs/styles.d.ts +1 -0
  154. package/dist/esm/nimble-components/src/tabs-toolbar/index.d.ts +12 -0
  155. package/dist/esm/nimble-components/src/tabs-toolbar/styles.d.ts +1 -0
  156. package/dist/esm/nimble-components/src/tabs-toolbar/template.d.ts +1 -0
  157. package/dist/esm/nimble-components/src/testing/async-helpers.d.ts +10 -0
  158. package/dist/esm/nimble-components/src/text-field/index.d.ts +12 -0
  159. package/dist/esm/nimble-components/src/text-field/styles.d.ts +1 -0
  160. package/dist/esm/nimble-components/src/text-field/types.d.ts +3 -0
  161. package/dist/esm/nimble-components/src/theme-provider/design-token-comments.d.ts +6 -0
  162. package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +11 -0
  163. package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +42 -0
  164. package/dist/esm/nimble-components/src/theme-provider/index.d.ts +22 -0
  165. package/dist/esm/nimble-components/src/theme-provider/styles.d.ts +1 -0
  166. package/dist/esm/nimble-components/src/theme-provider/template.d.ts +2 -0
  167. package/dist/esm/{theme-provider/themes.d.ts → nimble-components/src/theme-provider/types.d.ts} +2 -1
  168. package/dist/esm/nimble-components/src/tree-item/index.d.ts +34 -0
  169. package/dist/esm/nimble-components/src/tree-item/styles.d.ts +3 -0
  170. package/dist/esm/nimble-components/src/tree-view/index.d.ts +22 -0
  171. package/dist/esm/nimble-components/src/tree-view/styles.d.ts +1 -0
  172. package/dist/esm/nimble-components/src/tree-view/types.d.ts +7 -0
  173. package/dist/esm/nimble-components/src/utilities/style/direction.d.ts +34 -0
  174. package/dist/esm/nimble-components/src/utilities/style/focus.d.ts +11 -0
  175. package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts +4 -0
  176. package/dist/esm/nimble-components/src/utilities/style/theme.d.ts +44 -0
  177. package/dist/esm/number-field/index.d.ts +8 -2
  178. package/dist/esm/number-field/index.js +8 -1
  179. package/dist/esm/number-field/index.js.map +1 -1
  180. package/dist/esm/number-field/styles.js +3 -3
  181. package/dist/esm/number-field/styles.js.map +1 -1
  182. package/dist/esm/select/index.d.ts +6 -2
  183. package/dist/esm/select/index.js +9 -5
  184. package/dist/esm/select/index.js.map +1 -1
  185. package/dist/esm/tab/index.d.ts +11 -1
  186. package/dist/esm/tab/index.js +8 -1
  187. package/dist/esm/tab/index.js.map +1 -1
  188. package/dist/esm/tab-panel/index.d.ts +11 -1
  189. package/dist/esm/tab-panel/index.js +8 -1
  190. package/dist/esm/tab-panel/index.js.map +1 -1
  191. package/dist/esm/tabs/index.d.ts +11 -1
  192. package/dist/esm/tabs/index.js +8 -1
  193. package/dist/esm/tabs/index.js.map +1 -1
  194. package/dist/esm/tabs-toolbar/index.d.ts +7 -1
  195. package/dist/esm/tabs-toolbar/index.js +1 -1
  196. package/dist/esm/tabs-toolbar/index.js.map +1 -1
  197. package/dist/esm/tabs-toolbar/styles.js +3 -2
  198. package/dist/esm/tabs-toolbar/styles.js.map +1 -1
  199. package/dist/esm/testing/async-helpers.d.ts +10 -0
  200. package/dist/esm/testing/async-helpers.js +12 -0
  201. package/dist/esm/testing/async-helpers.js.map +1 -0
  202. package/dist/esm/text-field/index.d.ts +8 -2
  203. package/dist/esm/text-field/index.js +8 -1
  204. package/dist/esm/text-field/index.js.map +1 -1
  205. package/dist/esm/text-field/styles.js +20 -8
  206. package/dist/esm/text-field/styles.js.map +1 -1
  207. package/dist/esm/text-field/types.d.ts +3 -0
  208. package/dist/esm/text-field/types.js +3 -0
  209. package/dist/esm/text-field/types.js.map +1 -0
  210. package/dist/esm/theme-provider/design-token-comments.d.ts +6 -0
  211. package/dist/esm/theme-provider/design-token-comments.js +45 -0
  212. package/dist/esm/theme-provider/design-token-comments.js.map +1 -0
  213. package/dist/esm/theme-provider/design-token-names.d.ts +11 -0
  214. package/dist/esm/theme-provider/design-token-names.js +51 -0
  215. package/dist/esm/theme-provider/design-token-names.js.map +1 -0
  216. package/dist/esm/theme-provider/design-tokens.d.ts +4 -10
  217. package/dist/esm/theme-provider/design-tokens.js +94 -109
  218. package/dist/esm/theme-provider/design-tokens.js.map +1 -1
  219. package/dist/esm/theme-provider/index.d.ts +18 -6
  220. package/dist/esm/theme-provider/index.js +51 -26
  221. package/dist/esm/theme-provider/index.js.map +1 -1
  222. package/dist/esm/theme-provider/styles.d.ts +1 -0
  223. package/dist/esm/theme-provider/styles.js +7 -0
  224. package/dist/esm/theme-provider/styles.js.map +1 -0
  225. package/dist/esm/theme-provider/template.d.ts +2 -2
  226. package/dist/esm/theme-provider/template.js.map +1 -1
  227. package/dist/esm/theme-provider/types.d.ts +7 -0
  228. package/dist/esm/theme-provider/types.js +8 -0
  229. package/dist/esm/theme-provider/types.js.map +1 -0
  230. package/dist/esm/tree-item/index.d.ts +7 -1
  231. package/dist/esm/tree-item/index.js +13 -12
  232. package/dist/esm/tree-item/index.js.map +1 -1
  233. package/dist/esm/tree-item/styles.js +9 -7
  234. package/dist/esm/tree-item/styles.js.map +1 -1
  235. package/dist/esm/tree-view/index.d.ts +9 -3
  236. package/dist/esm/tree-view/index.js +4 -3
  237. package/dist/esm/tree-view/index.js.map +1 -1
  238. package/dist/esm/tree-view/types.d.ts +2 -1
  239. package/dist/esm/tree-view/types.js +5 -5
  240. package/dist/esm/tree-view/types.js.map +1 -1
  241. package/dist/esm/utilities/style/direction.d.ts +34 -0
  242. package/dist/esm/utilities/style/direction.js +78 -0
  243. package/dist/esm/utilities/style/direction.js.map +1 -0
  244. package/dist/esm/utilities/style/focus.js +1 -1
  245. package/dist/esm/utilities/style/focus.js.map +1 -1
  246. package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +4 -0
  247. package/dist/esm/utilities/style/prefers-reduced-motion.js +5 -0
  248. package/dist/esm/utilities/style/prefers-reduced-motion.js.map +1 -0
  249. package/dist/esm/utilities/style/theme.d.ts +44 -0
  250. package/dist/esm/utilities/style/theme.js +116 -0
  251. package/dist/esm/utilities/style/theme.js.map +1 -0
  252. package/dist/fonts.scss +3 -0
  253. package/dist/tokens-internal.scss +255 -0
  254. package/dist/tokens.scss +132 -0
  255. package/package.json +26 -17
  256. package/dist/esm/testing/dom-next-update.d.ts +0 -4
  257. package/dist/esm/testing/dom-next-update.js +0 -6
  258. package/dist/esm/testing/dom-next-update.js.map +0 -1
  259. package/dist/esm/theme-provider/themes.js +0 -8
  260. package/dist/esm/theme-provider/themes.js.map +0 -1
package/README.md CHANGED
@@ -10,11 +10,71 @@ NI-styled web components for web applications.
10
10
 
11
11
  ## Getting Started
12
12
 
13
+ ### Framework Support
14
+
13
15
  If you are using one of the following frameworks see associated wrapper documentation:
14
16
 
15
- 1. Angular: See the [nimble-angular](../../angular-workspace/projects/ni/nimble-angular) documentation.
16
- 2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](../nimble-blazor) documentation.
17
+ 1. Angular: See the [nimble-angular](/angular-workspace/projects/ni/nimble-angular) documentation.
18
+ 2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation.
19
+
20
+ ### Using `nimble-components` in a Webpack Application
21
+
22
+ If you have an existing application that incorporates a module bundler like [Webpack](https://webpack.js.org/) but doesn't include one of the above frameworks, you can use `@ni/nimble-components` directly. Exact instructions will depend on your application, but here are some common steps:
23
+
24
+ 1. Install the package from [the public NPM registry](https://www.npmjs.com/package/@ni/nimble-components) by running `npm install @ni/nimble-components`.
25
+ 2. Import the component you want to use from the file you want to use it in. For example: `import '@ni/nimble-components/dist/esm/icons/succeeded';`
26
+ 3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-succeeded-icon></nimble-succeeded-icon>`.
27
+ 4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
28
+
29
+ ## Theming
30
+
31
+ This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
32
+
33
+ The theming system is built on a set of design tokens that define different properties such as fonts, colors, etc. The Nimble components are configured to use these theme-aware design tokens. An application should use the same theme-aware design tokens for parts outside of the components.
34
+
35
+ The theming system is composed of:
36
+
37
+ 1. Theme-aware design tokens that are used in your stylesheets.
38
+ 2. A `<nimble-theme-provider>` component that is added around your page contents and is configured for a theme.
39
+
40
+ ### Using the Theming System
41
+
42
+ 1. Include the `<nimble-theme-provider>` element on your page and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components. It will typically be at the root of the application:
43
+
44
+ ```html
45
+ <body>
46
+ <nimble-theme-provider theme="light">
47
+ <!-- everything else -->
48
+ </nimble-theme-provider>
49
+ </body>
50
+ ```
51
+
52
+ 2. Include one import in your styles for the Nimble fonts. Nimble recommends using SCSS for capabilities such as build-time property checking.
53
+
54
+ ```scss
55
+ @import '~@ni/nimble-components/dist/fonts';
56
+ ```
57
+
58
+ 3. As needed, add Nimble components as descendants of the theme provider and they will inherit the theme.
59
+
60
+ 4. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
61
+
62
+ ```scss
63
+ @import '~@ni/nimble-components/dist/tokens';
64
+
65
+ .my-element {
66
+ font-family: $ni-nimble-font-family;
67
+ }
68
+ ```
69
+
70
+ ## Customizing
71
+
72
+ The goal of the Nimble design system is to provide a consistent style for applications. If you find that Nimble does not expose colors, fonts, sizes, etc. that you need in an application get in touch with the Nimble squad.
73
+
74
+ ## Accessibility
75
+
76
+ For accessibility information related to nimble components, see [ACCESSIBILITY.md](docs/ACCESSIBILITY.md).
17
77
 
18
78
  ## Contributing
19
79
 
20
- Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) to modify this library.
80
+ Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.
package/dist/esm/button/index.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { Button as FoundationButton } from '@microsoft/fast-foundation';
2
2
  import { ButtonAppearance } from './types';
3
3
  export type { Button };
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'nimble-button': Button;
7
+ }
8
+ }
4
9
  /**
5
10
  * A nimble-styled HTML button
6
11
  */
@@ -13,5 +18,16 @@ declare class Button extends FoundationButton {
13
18
  * HTML Attribute: appearance
14
19
  */
15
20
  appearance: ButtonAppearance;
21
+ /**
22
+ * Specify as 'true' to hide the text content of the button. The button will
23
+ * become square, and the text content will be used as the label of the button
24
+ * for accessibility purposes.
25
+ *
26
+ * @public
27
+ * @remarks
28
+ * HTML Attribute: content-hidden
29
+ */
30
+ contentHidden: boolean;
31
+ private readonly contentId;
16
32
  connectedCallback(): void;
17
33
  }
package/dist/esm/button/index.js CHANGED
@@ -7,16 +7,36 @@ import { ButtonAppearance } from './types';
7
7
  * A nimble-styled HTML button
8
8
  */
9
9
  class Button extends FoundationButton {
10
+ constructor() {
11
+ super(...arguments);
12
+ /**
13
+ * Specify as 'true' to hide the text content of the button. The button will
14
+ * become square, and the text content will be used as the label of the button
15
+ * for accessibility purposes.
16
+ *
17
+ * @public
18
+ * @remarks
19
+ * HTML Attribute: content-hidden
20
+ */
21
+ this.contentHidden = false;
22
+ this.contentId = 'nimble-button-content';
23
+ }
10
24
  connectedCallback() {
11
25
  super.connectedCallback();
12
26
  if (!this.appearance) {
13
27
  this.appearance = ButtonAppearance.Outline;
14
28
  }
29
+ const content = this.control.querySelector('.content');
30
+ content.id = this.contentId;
31
+ this.control.setAttribute('aria-labelledby', this.contentId);
15
32
  }
16
33
  }
17
34
  __decorate([
18
35
  attr
19
36
  ], Button.prototype, "appearance", void 0);
37
+ __decorate([
38
+ attr({ attribute: 'content-hidden', mode: 'boolean' })
39
+ ], Button.prototype, "contentHidden", void 0);
20
40
  /**
21
41
  * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
22
42
  * Implements {@link @microsoft/fast-foundation#buttonTemplate}
@@ -28,6 +48,8 @@ __decorate([
28
48
  */
29
49
  const nimbleButton = Button.compose({
30
50
  baseName: 'button',
51
+ baseClass: FoundationButton,
52
+ // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
31
53
  template,
32
54
  styles,
33
55
  shadowOptions: {
package/dist/esm/button/index.js.map CHANGED
@@ -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;AAI3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAW1B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;IACL,CAAC;CACJ;AARG;IADC,IAAI;0CAC+B;AAUxC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,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
+ {"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;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;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"}
package/dist/esm/button/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { focusVisible } from '../utilities/style/focus';
4
- import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, smallDelay, standardPadding } from '../theme-provider/design-tokens';
4
+ import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
5
5
  import { appearanceBehavior } from './behaviors';
6
6
  import { ButtonAppearance } from './types';
7
7
  export const styles = css `
@@ -21,6 +21,7 @@ export const styles = css `
21
21
  /*
22
22
  Not sure why but this is needed to get buttons with icons and buttons
23
23
  without icons to align on the same line when the button is inline-flex
24
+ See: https://github.com/microsoft/fast/issues/5414
24
25
  */ ''}
25
26
  vertical-align: middle;
26
27
  }
@@ -52,6 +53,11 @@ export const styles = css `
52
53
  transition: box-shadow ${smallDelay};
53
54
  }
54
55
 
56
+ :host([content-hidden]) .control {
57
+ width: ${controlHeight};
58
+ padding: 0px;
59
+ }
60
+
55
61
  @media (prefers-reduced-motion) {
56
62
  .control {
57
63
  transition-duration: 0s;
@@ -83,12 +89,16 @@ export const styles = css `
83
89
  display: contents;
84
90
  }
85
91
 
92
+ :host([content-hidden]) .content {
93
+ display: none;
94
+ }
95
+
86
96
  [part='start'] {
87
97
  display: contents;
88
98
  }
89
99
 
90
100
  slot[name='start']::slotted(*) {
91
- --icon-color: ${buttonContentFontColor};
101
+ ${iconColor.cssCustomProperty}: ${buttonContentFontColor};
92
102
  }
93
103
 
94
104
  :host([disabled]) slot[name='start']::slotted(*) {
@@ -103,7 +113,7 @@ export const styles = css `
103
113
  .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
104
114
  .control {
105
115
  background-color: transparent;
106
- border-color: rgba(${actionColorRgb}, 0.5);
116
+ border-color: rgba(${actionColorRgbPartial}, 0.5);
107
117
  }
108
118
 
109
119
  .control:hover {
@@ -123,7 +133,7 @@ export const styles = css `
123
133
 
124
134
  .control[disabled] {
125
135
  background-color: transparent;
126
- border-color: rgba(${borderColorRgb}, 0.2);
136
+ border-color: rgba(${borderColorRgbPartial}, 0.2);
127
137
  }
128
138
  `), appearanceBehavior(ButtonAppearance.Ghost, css `
129
139
  .control {
@@ -152,17 +162,17 @@ export const styles = css `
152
162
  }
153
163
  `), appearanceBehavior(ButtonAppearance.Block, css `
154
164
  .control {
155
- background-color: rgba(${borderColorRgb}, 0.1);
165
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
156
166
  border-color: transparent;
157
167
  }
158
168
 
159
169
  .control:hover {
160
- background-color: rgba(${borderColorRgb}, 0.1);
170
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
161
171
  border-color: ${borderColorHover};
162
172
  }
163
173
 
164
174
  .control${focusVisible} {
165
- background-color: rgba(${borderColorRgb}, 0.1);
175
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
166
176
  border-color: ${borderColorHover};
167
177
  }
168
178
 
@@ -172,8 +182,8 @@ export const styles = css `
172
182
  }
173
183
 
174
184
  .control[disabled] {
175
- background-color: rgba(${borderColorRgb}, 0.1);
176
- border-color: rgba(${borderColorRgb}, 0.1);
185
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
186
+ border-color: rgba(${borderColorRgbPartial}, 0.1);
177
187
  }
178
188
  `));
179
189
  //# sourceMappingURL=styles.js.map
package/dist/esm/button/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/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,0BAA0B,CAAC;AACxD,OAAO,EACH,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;EAGE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;;;;;;;kCAUT,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;wBAuBhC,sBAAsB;;;;;;;;;;CAU7C;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,cAAc;;;;;oCAKnB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,cAAc;;;;;6CAKd,cAAc;oCACvB,gBAAgB;;;0BAG1B,YAAY;6CACO,cAAc;oCACvB,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,cAAc;yCAClB,cAAc;;aAE1C,CACJ,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/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,0BAA0B,CAAC;AACxD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,qBAAqB;yCACzB,qBAAqB;;aAEjD,CACJ,CACJ,CAAC"}
package/dist/esm/button/types.d.ts CHANGED
@@ -2,8 +2,11 @@
2
2
  * Types of button appearance.
3
3
  * @public
4
4
  */
5
+ import type { Button } from '@microsoft/fast-foundation';
5
6
  export declare enum ButtonAppearance {
6
7
  Outline = "outline",
7
8
  Ghost = "ghost",
8
9
  Block = "block"
9
10
  }
11
+ export declare type ButtonAppearanceAttribute = `${ButtonAppearance}`;
12
+ export declare type ButtonType = Button['type'];
package/dist/esm/button/types.js CHANGED
@@ -1,7 +1,3 @@
1
- /**
2
- * Types of button appearance.
3
- * @public
4
- */
5
1
  export var ButtonAppearance;
6
2
  (function (ButtonAppearance) {
7
3
  ButtonAppearance["Outline"] = "outline";
package/dist/esm/button/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/button/types.ts"],"names":[],"mappings":"AAMA,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
package/dist/esm/checkbox/index.d.ts CHANGED
@@ -1,2 +1,12 @@
1
1
  import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
2
- export { FoundationCheckbox as Checkbox };
2
+ export type { Checkbox };
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ 'nimble-checkbox': Checkbox;
6
+ }
7
+ }
8
+ /**
9
+ * A nimble-styled checkbox control.
10
+ */
11
+ declare class Checkbox extends FoundationCheckbox {
12
+ }
package/dist/esm/checkbox/index.js CHANGED
@@ -1,9 +1,15 @@
1
1
  import { DesignSystem, Checkbox as FoundationCheckbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
2
2
  import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
3
3
  import { styles } from './styles';
4
- export { FoundationCheckbox as Checkbox };
5
- const nimbleCheckbox = FoundationCheckbox.compose({
4
+ /**
5
+ * A nimble-styled checkbox control.
6
+ */
7
+ class Checkbox extends FoundationCheckbox {
8
+ }
9
+ const nimbleCheckbox = Checkbox.compose({
6
10
  baseName: 'checkbox',
11
+ baseClass: FoundationCheckbox,
12
+ // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
7
13
  template,
8
14
  styles,
9
15
  checkedIndicator: controlsCheckboxCheck16X16.data
package/dist/esm/checkbox/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAElG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,kBAAkB,IAAI,QAAQ,EAAE,CAAC;AAE1C,MAAM,cAAc,GAAG,kBAAkB,CAAC,OAAO,CAAkB;IAC/D,QAAQ,EAAE,UAAU;IACpB,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,0BAA0B,CAAC,IAAI;CACpD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAE9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAC;AAClG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,QAAS,SAAQ,kBAAkB;CAAG;AAE5C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,0BAA0B,CAAC,IAAI;CACpD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
package/dist/esm/checkbox/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
3
  import { focusVisible } from '../utilities/style/focus';
4
- import { borderColor, borderColorHover, borderColorRgb, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
4
+ import { borderColor, borderColorHover, borderColorRgbPartial, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
5
5
  export const styles = css `
6
6
  ${display('inline-flex')}
7
7
 
@@ -42,8 +42,8 @@ export const styles = css `
42
42
  }
43
43
 
44
44
  :host([disabled]) .control {
45
- background-color: rgba(${borderColorRgb}, 0.1);
46
- border-color: rgba(${borderColorRgb}, 0.2);
45
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
46
+ border-color: rgba(${borderColorRgbPartial}, 0.2);
47
47
  }
48
48
 
49
49
  :host(:not([disabled]):not(:active):hover) .control {
@@ -86,7 +86,7 @@ export const styles = css `
86
86
  }
87
87
 
88
88
  :host([disabled]) slot[name='checked-indicator'] path {
89
- fill: rgba(${borderColorRgb}, 0.3);
89
+ fill: rgba(${borderColorRgbPartial}, 0.3);
90
90
  }
91
91
  `;
92
92
  //# sourceMappingURL=styles.js.map
package/dist/esm/checkbox/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,cAAc;6BAClB,cAAc;;;;wBAInB,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,cAAc;;CAElC,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}
package/dist/esm/drawer/index.d.ts CHANGED
@@ -1,11 +1,17 @@
1
1
  import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
2
2
  import { DrawerLocation, DrawerState } from './types';
3
+ export type { Drawer };
4
+ declare global {
5
+ interface HTMLElementTagNameMap {
6
+ 'nimble-drawer': Drawer;
7
+ }
8
+ }
3
9
  /**
4
10
  * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
5
11
  * which animates to be visible with a slide-in / slide-out animation.
6
12
  * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
7
13
  */
8
- export declare class Drawer extends FoundationDialog {
14
+ declare class Drawer extends FoundationDialog {
9
15
  location: DrawerLocation;
10
16
  state: DrawerState;
11
17
  /**
@@ -19,7 +25,6 @@ export declare class Drawer extends FoundationDialog {
19
25
  private animationDurationMilliseconds;
20
26
  private animationGroup?;
21
27
  private animationsEnabledChangedHandler?;
22
- private prefersReducedMotionMediaQuery?;
23
28
  private propertyChangeSubscriber?;
24
29
  connectedCallback(): void;
25
30
  disconnectedCallback(): void;
@@ -36,4 +41,3 @@ export declare class Drawer extends FoundationDialog {
36
41
  private animateOpenClose;
37
42
  private cancelCurrentAnimation;
38
43
  }
39
- export declare const nimbleDrawer: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Drawer>;
package/dist/esm/drawer/index.js CHANGED
@@ -3,6 +3,7 @@ import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
3
3
  import { attr, Observable } from '@microsoft/fast-element';
4
4
  import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
5
5
  import { drawerAnimationDurationMs } from '../theme-provider/design-tokens';
6
+ import { prefersReducedMotionMediaQuery } from '../utilities/style/prefers-reduced-motion';
6
7
  import { animationConfig } from './animations';
7
8
  import { styles } from './styles';
8
9
  import { DrawerLocation, DrawerState } from './types';
@@ -12,7 +13,7 @@ const animationDurationWhenDisabledMilliseconds = 0.001;
12
13
  * which animates to be visible with a slide-in / slide-out animation.
13
14
  * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
14
15
  */
15
- export class Drawer extends FoundationDialog {
16
+ class Drawer extends FoundationDialog {
16
17
  constructor() {
17
18
  super(...arguments);
18
19
  this.location = DrawerLocation.Left;
@@ -31,10 +32,9 @@ export class Drawer extends FoundationDialog {
31
32
  // change focus if it's true before connectedCallback
32
33
  this.trapFocus = false;
33
34
  super.connectedCallback();
34
- this.prefersReducedMotionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
35
35
  this.updateAnimationDuration();
36
36
  this.animationsEnabledChangedHandler = () => this.updateAnimationDuration();
37
- this.prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
37
+ prefersReducedMotionMediaQuery.addEventListener('change', this.animationsEnabledChangedHandler);
38
38
  this.onStateChanged();
39
39
  const notifier = Observable.getNotifier(this);
40
40
  const subscriber = {
@@ -52,10 +52,8 @@ export class Drawer extends FoundationDialog {
52
52
  this.propertyChangeNotifier = undefined;
53
53
  this.propertyChangeSubscriber = undefined;
54
54
  }
55
- if (this.prefersReducedMotionMediaQuery
56
- && this.animationsEnabledChangedHandler) {
57
- this.prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
58
- this.prefersReducedMotionMediaQuery = undefined;
55
+ if (this.animationsEnabledChangedHandler) {
56
+ prefersReducedMotionMediaQuery.removeEventListener('change', this.animationsEnabledChangedHandler);
59
57
  this.animationsEnabledChangedHandler = undefined;
60
58
  }
61
59
  }
@@ -124,7 +122,7 @@ export class Drawer extends FoundationDialog {
124
122
  }
125
123
  }
126
124
  updateAnimationDuration() {
127
- const disableAnimations = this.prefersReducedMotionMediaQuery?.matches;
125
+ const disableAnimations = prefersReducedMotionMediaQuery.matches;
128
126
  this.animationDurationMilliseconds = disableAnimations
129
127
  ? animationDurationWhenDisabledMilliseconds
130
128
  : drawerAnimationDurationMs.getValueFor(this);
@@ -181,8 +179,9 @@ __decorate([
181
179
  __decorate([
182
180
  attr({ attribute: 'prevent-dismiss', mode: 'boolean' })
183
181
  ], Drawer.prototype, "preventDismiss", void 0);
184
- export const nimbleDrawer = Drawer.compose({
182
+ const nimbleDrawer = Drawer.compose({
185
183
  baseName: 'drawer',
184
+ // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
186
185
  template,
187
186
  styles
188
187
  });
package/dist/esm/drawer/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
package/dist/esm/drawer/styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, fontFamily, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
3
+ import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor, standardPadding } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('block')}
6
6
 
@@ -45,6 +45,7 @@ export const styles = css `
45
45
  display: flex;
46
46
  }
47
47
 
48
+ ${ /* Note: overlay is only present in the DOM when modal=true */''}
48
49
  .overlay {
49
50
  position: fixed;
50
51
  inset: 0px;
@@ -56,15 +57,14 @@ export const styles = css `
56
57
  position: relative;
57
58
  top: 0px;
58
59
  bottom: 0px;
59
- width: fit-content;
60
- height: 100%;
61
60
  display: grid;
62
61
  grid-template-rows: max-content auto max-content;
63
62
  flex-direction: column;
64
63
  box-sizing: border-box;
65
64
  border-radius: 0px;
66
65
  border-width: 0px;
67
- width: var(--drawer-width);
66
+ width: ${drawerWidth};
67
+ height: 100%;
68
68
  background-color: ${applicationBackgroundColor};
69
69
  }
70
70
 
@@ -94,21 +94,22 @@ export const styles = css `
94
94
  */ ''}
95
95
 
96
96
  ::slotted(header) {
97
- padding: var(--standard-padding);
97
+ padding: ${standardPadding};
98
98
  font-family: ${drawerHeaderFontFamily};
99
99
  font-size: ${drawerHeaderFontSize};
100
100
  }
101
101
 
102
102
  ::slotted(section) {
103
- padding: var(--standard-padding);
103
+ padding: ${standardPadding};
104
104
  grid-row: 2;
105
105
  overflow-y: auto;
106
106
  }
107
107
 
108
108
  ::slotted(footer) {
109
- padding: var(--standard-padding);
109
+ padding: ${standardPadding};
110
110
  display: flex;
111
111
  justify-content: flex-end;
112
+ grid-row: 3;
112
113
  border-top: ${borderWidth} solid ${popupBorderColor};
113
114
  }
114
115
  `;
package/dist/esm/drawer/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAmCX,gBAAgB;;;;;;;;;;;;;;;;;4BAiBV,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;;uBAImB,sBAAsB;qBACxB,oBAAoB;;;;;;;;;;;;;sBAanB,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;uBACX,sBAAsB;qBACxB,oBAAoB;;;;mBAItB,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
package/dist/esm/drawer/types.d.ts CHANGED
@@ -2,9 +2,11 @@ export declare enum DrawerLocation {
2
2
  Left = "left",
3
3
  Right = "right"
4
4
  }
5
+ export declare type DrawerLocationAttribute = `${DrawerLocation}`;
5
6
  export declare enum DrawerState {
6
7
  Opening = "opening",
7
8
  Opened = "opened",
8
9
  Closing = "closing",
9
10
  Closed = "closed"
10
11
  }
12
+ export declare type DrawerStateAttribute = `${DrawerState}`;
package/dist/esm/drawer/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAED,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/drawer/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAGX;AAHD,WAAY,cAAc;IACtB,+BAAa,CAAA;IACb,iCAAe,CAAA;AACnB,CAAC,EAHW,cAAc,KAAd,cAAc,QAGzB;AAGD,MAAM,CAAN,IAAY,WAKX;AALD,WAAY,WAAW;IACnB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;IACjB,kCAAmB,CAAA;IACnB,gCAAiB,CAAA;AACrB,CAAC,EALW,WAAW,KAAX,WAAW,QAKtB"}
package/dist/esm/icon-base/styles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { contentFontColor, iconSize, warningColor, failColor, passColor } from '../theme-provider/design-tokens';
3
+ import { contentFontColor, iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-flex')}
6
6
 
@@ -9,7 +9,7 @@ export const styles = css `
9
9
  user-select: none;
10
10
  width: ${iconSize};
11
11
  height: ${iconSize};
12
- --icon-color: ${contentFontColor};
12
+ ${iconColor.cssCustomProperty}: ${contentFontColor};
13
13
  }
14
14
 
15
15
  .icon {
@@ -18,19 +18,19 @@ export const styles = css `
18
18
  }
19
19
 
20
20
  :host(.fail) {
21
- --icon-color: ${failColor};
21
+ ${iconColor.cssCustomProperty}: ${failColor};
22
22
  }
23
23
 
24
24
  :host(.warning) {
25
- --icon-color: ${warningColor};
25
+ ${iconColor.cssCustomProperty}: ${warningColor};
26
26
  }
27
27
 
28
28
  :host(.pass) {
29
- --icon-color: ${passColor};
29
+ ${iconColor.cssCustomProperty}: ${passColor};
30
30
  }
31
31
 
32
32
  .icon svg {
33
- fill: var(--icon-color);
33
+ fill: ${iconColor};
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  }
package/dist/esm/icon-base/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/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,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;wBACF,gBAAgB;;;;;;;;;wBAShB,SAAS;;;;wBAIT,YAAY;;;;wBAIZ,SAAS;;;;;;;;CAQhC,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/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,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;UAChB,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;;;;;;UAShD,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}
package/dist/esm/icon-base/template.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { html } from '@microsoft/fast-element';
2
2
  export const template = html `
3
- <template slot="start">
3
+ <template>
4
4
  <div class="icon" :innerHTML=${x => x.icon.data}></div>
5
5
  </template
6
6
  `;