@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.123

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 (287) hide show
  1. package/README.md +42 -4
  2. package/dist/esm/button/behaviors.js.map +1 -1
  3. package/dist/esm/button/index.d.ts +10 -0
  4. package/dist/esm/button/index.js +19 -10
  5. package/dist/esm/button/index.js.map +1 -1
  6. package/dist/esm/button/styles.js +125 -49
  7. package/dist/esm/button/styles.js.map +1 -1
  8. package/dist/esm/button/types.d.ts +3 -0
  9. package/dist/esm/button/types.js +0 -4
  10. package/dist/esm/button/types.js.map +1 -1
  11. package/dist/esm/checkbox/index.d.ts +12 -0
  12. package/dist/esm/checkbox/index.js +18 -0
  13. package/dist/esm/checkbox/index.js.map +1 -0
  14. package/dist/esm/checkbox/styles.d.ts +1 -0
  15. package/dist/esm/checkbox/styles.js +92 -0
  16. package/dist/esm/checkbox/styles.js.map +1 -0
  17. package/dist/esm/drawer/animations.d.ts +14 -0
  18. package/dist/esm/drawer/animations.js +52 -0
  19. package/dist/esm/drawer/animations.js.map +1 -0
  20. package/dist/esm/drawer/index.d.ts +43 -0
  21. package/dist/esm/drawer/index.js +189 -0
  22. package/dist/esm/drawer/index.js.map +1 -0
  23. package/dist/esm/drawer/styles.d.ts +1 -0
  24. package/dist/esm/drawer/styles.js +116 -0
  25. package/dist/esm/drawer/styles.js.map +1 -0
  26. package/dist/esm/drawer/types.d.ts +12 -0
  27. package/dist/esm/drawer/types.js +13 -0
  28. package/dist/esm/drawer/types.js.map +1 -0
  29. package/dist/esm/icon-base/index.d.ts +12 -0
  30. package/dist/esm/icon-base/index.js +22 -0
  31. package/dist/esm/icon-base/index.js.map +1 -0
  32. package/dist/esm/icon-base/styles.d.ts +1 -0
  33. package/dist/esm/icon-base/styles.js +38 -0
  34. package/dist/esm/icon-base/styles.js.map +1 -0
  35. package/dist/esm/icon-base/template.d.ts +2 -0
  36. package/dist/esm/icon-base/template.js +7 -0
  37. package/dist/esm/icon-base/template.js.map +1 -0
  38. package/dist/esm/icon-base/types.d.ts +11 -0
  39. package/dist/esm/icon-base/types.js +8 -0
  40. package/dist/esm/icon-base/types.js.map +1 -0
  41. package/dist/esm/icons/access-control.d.ts +12 -0
  42. package/dist/esm/icons/access-control.js +12 -0
  43. package/dist/esm/icons/access-control.js.map +1 -0
  44. package/dist/esm/icons/admin.d.ts +12 -0
  45. package/dist/esm/icons/admin.js +12 -0
  46. package/dist/esm/icons/admin.js.map +1 -0
  47. package/dist/esm/icons/administration.d.ts +12 -0
  48. package/dist/esm/icons/administration.js +12 -0
  49. package/dist/esm/icons/administration.js.map +1 -0
  50. package/dist/esm/icons/all-icons.d.ts +15 -0
  51. package/dist/esm/icons/all-icons.js +16 -0
  52. package/dist/esm/icons/all-icons.js.map +1 -0
  53. package/dist/esm/icons/check.d.ts +12 -0
  54. package/dist/esm/icons/check.js +12 -0
  55. package/dist/esm/icons/check.js.map +1 -0
  56. package/dist/esm/icons/custom-applications.d.ts +12 -0
  57. package/dist/esm/icons/custom-applications.js +12 -0
  58. package/dist/esm/icons/custom-applications.js.map +1 -0
  59. package/dist/esm/icons/delete.d.ts +12 -0
  60. package/dist/esm/icons/delete.js +12 -0
  61. package/dist/esm/icons/delete.js.map +1 -0
  62. package/dist/esm/icons/fail.d.ts +12 -0
  63. package/dist/esm/icons/fail.js +12 -0
  64. package/dist/esm/icons/fail.js.map +1 -0
  65. package/dist/esm/icons/login.d.ts +12 -0
  66. package/dist/esm/icons/login.js +12 -0
  67. package/dist/esm/icons/login.js.map +1 -0
  68. package/dist/esm/icons/logout.d.ts +12 -0
  69. package/dist/esm/icons/logout.js +12 -0
  70. package/dist/esm/icons/logout.js.map +1 -0
  71. package/dist/esm/icons/managed-systems.d.ts +12 -0
  72. package/dist/esm/icons/managed-systems.js +12 -0
  73. package/dist/esm/icons/managed-systems.js.map +1 -0
  74. package/dist/esm/icons/measurement-data-analysis.d.ts +12 -0
  75. package/dist/esm/icons/measurement-data-analysis.js +12 -0
  76. package/dist/esm/icons/measurement-data-analysis.js.map +1 -0
  77. package/dist/esm/icons/settings.d.ts +12 -0
  78. package/dist/esm/icons/settings.js +12 -0
  79. package/dist/esm/icons/settings.js.map +1 -0
  80. package/dist/esm/icons/succeeded.d.ts +12 -0
  81. package/dist/esm/icons/succeeded.js +12 -0
  82. package/dist/esm/icons/succeeded.js.map +1 -0
  83. package/dist/esm/icons/test-insights.d.ts +12 -0
  84. package/dist/esm/icons/test-insights.js +12 -0
  85. package/dist/esm/icons/test-insights.js.map +1 -0
  86. package/dist/esm/icons/utilities.d.ts +12 -0
  87. package/dist/esm/icons/utilities.js +12 -0
  88. package/dist/esm/icons/utilities.js.map +1 -0
  89. package/dist/esm/listbox-option/index.d.ts +15 -0
  90. package/dist/esm/listbox-option/index.js +31 -0
  91. package/dist/esm/listbox-option/index.js.map +1 -0
  92. package/dist/esm/listbox-option/styles.d.ts +1 -0
  93. package/dist/esm/listbox-option/styles.js +60 -0
  94. package/dist/esm/listbox-option/styles.js.map +1 -0
  95. package/dist/esm/menu/index.d.ts +12 -0
  96. package/dist/esm/menu/index.js +25 -0
  97. package/dist/esm/menu/index.js.map +1 -0
  98. package/dist/esm/menu/styles.d.ts +1 -0
  99. package/dist/esm/menu/styles.js +40 -0
  100. package/dist/esm/menu/styles.js.map +1 -0
  101. package/dist/esm/menu-item/index.d.ts +12 -0
  102. package/dist/esm/menu-item/index.js +25 -0
  103. package/dist/esm/menu-item/index.js.map +1 -0
  104. package/dist/esm/menu-item/styles.d.ts +1 -0
  105. package/dist/esm/menu-item/styles.js +64 -0
  106. package/dist/esm/menu-item/styles.js.map +1 -0
  107. package/dist/esm/nimble-components/src/button/behaviors.d.ts +12 -0
  108. package/dist/esm/nimble-components/src/button/index.d.ts +24 -0
  109. package/dist/esm/nimble-components/src/button/styles.d.ts +1 -0
  110. package/dist/esm/nimble-components/src/button/types.d.ts +12 -0
  111. package/dist/esm/nimble-components/src/checkbox/index.d.ts +12 -0
  112. package/dist/esm/nimble-components/src/checkbox/styles.d.ts +1 -0
  113. package/dist/esm/nimble-components/src/drawer/animations.d.ts +14 -0
  114. package/dist/esm/nimble-components/src/drawer/index.d.ts +43 -0
  115. package/dist/esm/nimble-components/src/drawer/styles.d.ts +1 -0
  116. package/dist/esm/nimble-components/src/drawer/types.d.ts +12 -0
  117. package/dist/esm/nimble-components/src/icon-base/index.d.ts +12 -0
  118. package/dist/esm/nimble-components/src/icon-base/styles.d.ts +1 -0
  119. package/dist/esm/nimble-components/src/icon-base/template.d.ts +2 -0
  120. package/dist/esm/nimble-components/src/icon-base/types.d.ts +11 -0
  121. package/dist/esm/nimble-components/src/icons/access-control.d.ts +12 -0
  122. package/dist/esm/nimble-components/src/icons/admin.d.ts +12 -0
  123. package/dist/esm/nimble-components/src/icons/administration.d.ts +12 -0
  124. package/dist/esm/nimble-components/src/icons/all-icons.d.ts +15 -0
  125. package/dist/esm/nimble-components/src/icons/check.d.ts +12 -0
  126. package/dist/esm/nimble-components/src/icons/custom-applications.d.ts +12 -0
  127. package/dist/esm/nimble-components/src/icons/delete.d.ts +12 -0
  128. package/dist/esm/nimble-components/src/icons/fail.d.ts +12 -0
  129. package/dist/esm/nimble-components/src/icons/login.d.ts +12 -0
  130. package/dist/esm/nimble-components/src/icons/logout.d.ts +12 -0
  131. package/dist/esm/nimble-components/src/icons/managed-systems.d.ts +12 -0
  132. package/dist/esm/nimble-components/src/icons/measurement-data-analysis.d.ts +12 -0
  133. package/dist/esm/nimble-components/src/icons/settings.d.ts +12 -0
  134. package/dist/esm/nimble-components/src/icons/succeeded.d.ts +12 -0
  135. package/dist/esm/nimble-components/src/icons/test-insights.d.ts +12 -0
  136. package/dist/esm/nimble-components/src/icons/utilities.d.ts +12 -0
  137. package/dist/esm/nimble-components/src/listbox-option/index.d.ts +15 -0
  138. package/dist/esm/nimble-components/src/listbox-option/styles.d.ts +1 -0
  139. package/dist/esm/nimble-components/src/menu/index.d.ts +12 -0
  140. package/dist/esm/nimble-components/src/menu/styles.d.ts +1 -0
  141. package/dist/esm/nimble-components/src/menu-item/index.d.ts +12 -0
  142. package/dist/esm/nimble-components/src/menu-item/styles.d.ts +1 -0
  143. package/dist/esm/nimble-components/src/number-field/index.d.ts +12 -0
  144. package/dist/esm/nimble-components/src/number-field/styles.d.ts +1 -0
  145. package/dist/esm/nimble-components/src/select/index.d.ts +16 -0
  146. package/dist/esm/nimble-components/src/select/styles.d.ts +1 -0
  147. package/dist/esm/nimble-components/src/tab/index.d.ts +12 -0
  148. package/dist/esm/nimble-components/src/tab/styles.d.ts +1 -0
  149. package/dist/esm/nimble-components/src/tab-panel/index.d.ts +12 -0
  150. package/dist/esm/nimble-components/src/tab-panel/styles.d.ts +1 -0
  151. package/dist/esm/nimble-components/src/tabs/index.d.ts +12 -0
  152. package/dist/esm/nimble-components/src/tabs/styles.d.ts +1 -0
  153. package/dist/esm/nimble-components/src/tabs-toolbar/index.d.ts +12 -0
  154. package/dist/esm/nimble-components/src/tabs-toolbar/styles.d.ts +1 -0
  155. package/dist/esm/nimble-components/src/tabs-toolbar/template.d.ts +1 -0
  156. package/dist/esm/nimble-components/src/testing/async-helpers.d.ts +10 -0
  157. package/dist/esm/nimble-components/src/text-field/index.d.ts +12 -0
  158. package/dist/esm/nimble-components/src/text-field/styles.d.ts +1 -0
  159. package/dist/esm/nimble-components/src/text-field/types.d.ts +3 -0
  160. package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +48 -0
  161. package/dist/esm/nimble-components/src/theme-provider/index.d.ts +17 -0
  162. package/dist/esm/nimble-components/src/theme-provider/styles.d.ts +1 -0
  163. package/dist/esm/nimble-components/src/theme-provider/template.d.ts +2 -0
  164. package/dist/esm/nimble-components/src/theme-provider/types.d.ts +7 -0
  165. package/dist/esm/nimble-components/src/tree-item/index.d.ts +34 -0
  166. package/dist/esm/nimble-components/src/tree-item/styles.d.ts +3 -0
  167. package/dist/esm/nimble-components/src/tree-view/index.d.ts +22 -0
  168. package/dist/esm/nimble-components/src/tree-view/styles.d.ts +1 -0
  169. package/dist/esm/nimble-components/src/tree-view/types.d.ts +7 -0
  170. package/dist/esm/nimble-components/src/utilities/style/focus.d.ts +11 -0
  171. package/dist/esm/nimble-components/src/utilities/style/prefers-reduced-motion.d.ts +8 -0
  172. package/dist/esm/number-field/index.d.ts +12 -1
  173. package/dist/esm/number-field/index.js +11 -8
  174. package/dist/esm/number-field/index.js.map +1 -1
  175. package/dist/esm/number-field/styles.js +114 -87
  176. package/dist/esm/number-field/styles.js.map +1 -1
  177. package/dist/esm/select/index.d.ts +16 -0
  178. package/dist/esm/select/index.js +50 -0
  179. package/dist/esm/select/index.js.map +1 -0
  180. package/dist/esm/select/styles.d.ts +1 -0
  181. package/dist/esm/select/styles.js +141 -0
  182. package/dist/esm/select/styles.js.map +1 -0
  183. package/dist/esm/tab/index.d.ts +12 -0
  184. package/dist/esm/tab/index.js +16 -0
  185. package/dist/esm/tab/index.js.map +1 -0
  186. package/dist/esm/tab/styles.d.ts +1 -0
  187. package/dist/esm/tab/styles.js +53 -0
  188. package/dist/esm/tab/styles.js.map +1 -0
  189. package/dist/esm/tab-panel/index.d.ts +12 -0
  190. package/dist/esm/tab-panel/index.js +16 -0
  191. package/dist/esm/tab-panel/index.js.map +1 -0
  192. package/dist/esm/tab-panel/styles.d.ts +1 -0
  193. package/dist/esm/tab-panel/styles.js +15 -0
  194. package/dist/esm/tab-panel/styles.js.map +1 -0
  195. package/dist/esm/tabs/index.d.ts +12 -0
  196. package/dist/esm/tabs/index.js +16 -0
  197. package/dist/esm/tabs/index.js.map +1 -0
  198. package/dist/esm/tabs/styles.d.ts +1 -0
  199. package/dist/esm/tabs/styles.js +43 -0
  200. package/dist/esm/tabs/styles.js.map +1 -0
  201. package/dist/esm/tabs-toolbar/index.d.ts +12 -0
  202. package/dist/esm/tabs-toolbar/index.js +15 -0
  203. package/dist/esm/tabs-toolbar/index.js.map +1 -0
  204. package/dist/esm/tabs-toolbar/styles.d.ts +1 -0
  205. package/dist/esm/tabs-toolbar/styles.js +23 -0
  206. package/dist/esm/tabs-toolbar/styles.js.map +1 -0
  207. package/dist/esm/tabs-toolbar/template.d.ts +1 -0
  208. package/dist/esm/tabs-toolbar/template.js +8 -0
  209. package/dist/esm/tabs-toolbar/template.js.map +1 -0
  210. package/dist/esm/testing/async-helpers.d.ts +10 -0
  211. package/dist/esm/testing/async-helpers.js +12 -0
  212. package/dist/esm/testing/async-helpers.js.map +1 -0
  213. package/dist/esm/text-field/index.d.ts +12 -1
  214. package/dist/esm/text-field/index.js +11 -2
  215. package/dist/esm/text-field/index.js.map +1 -1
  216. package/dist/esm/text-field/styles.js +139 -63
  217. package/dist/esm/text-field/styles.js.map +1 -1
  218. package/dist/esm/text-field/types.d.ts +3 -0
  219. package/dist/esm/text-field/types.js +3 -0
  220. package/dist/esm/text-field/types.js.map +1 -0
  221. package/dist/esm/theme-provider/design-tokens.d.ts +34 -3
  222. package/dist/esm/theme-provider/design-tokens.js +128 -15
  223. package/dist/esm/theme-provider/design-tokens.js.map +1 -1
  224. package/dist/esm/theme-provider/index.d.ts +17 -1
  225. package/dist/esm/theme-provider/index.js +18 -32
  226. package/dist/esm/theme-provider/index.js.map +1 -1
  227. package/dist/esm/theme-provider/styles.d.ts +1 -0
  228. package/dist/esm/theme-provider/styles.js +7 -0
  229. package/dist/esm/theme-provider/styles.js.map +1 -0
  230. package/dist/esm/theme-provider/template.d.ts +2 -0
  231. package/dist/esm/theme-provider/template.js +3 -0
  232. package/dist/esm/theme-provider/template.js.map +1 -0
  233. package/dist/esm/theme-provider/types.d.ts +7 -0
  234. package/dist/esm/theme-provider/types.js +8 -0
  235. package/dist/esm/theme-provider/types.js.map +1 -0
  236. package/dist/esm/tree-item/index.d.ts +34 -0
  237. package/dist/esm/tree-item/index.js +117 -0
  238. package/dist/esm/tree-item/index.js.map +1 -0
  239. package/dist/esm/tree-item/styles.d.ts +3 -0
  240. package/dist/esm/tree-item/styles.js +195 -0
  241. package/dist/esm/tree-item/styles.js.map +1 -0
  242. package/dist/esm/tree-view/index.d.ts +22 -0
  243. package/dist/esm/tree-view/index.js +35 -0
  244. package/dist/esm/tree-view/index.js.map +1 -0
  245. package/dist/esm/tree-view/styles.d.ts +1 -0
  246. package/dist/esm/tree-view/styles.js +17 -0
  247. package/dist/esm/tree-view/styles.js.map +1 -0
  248. package/dist/esm/tree-view/types.d.ts +7 -0
  249. package/dist/esm/tree-view/types.js +8 -0
  250. package/dist/esm/tree-view/types.js.map +1 -0
  251. package/dist/esm/utilities/style/focus.d.ts +11 -0
  252. package/dist/esm/utilities/style/focus.js +14 -0
  253. package/dist/esm/utilities/style/focus.js.map +1 -0
  254. package/dist/esm/utilities/style/prefers-reduced-motion.d.ts +8 -0
  255. package/dist/esm/utilities/style/prefers-reduced-motion.js +11 -0
  256. package/dist/esm/utilities/style/prefers-reduced-motion.js.map +1 -0
  257. package/package.json +41 -28
  258. package/dist/esm/button/tests/button.spec.d.ts +0 -1
  259. package/dist/esm/button/tests/button.spec.js +0 -39
  260. package/dist/esm/button/tests/button.spec.js.map +0 -1
  261. package/dist/esm/button/tests/button.stories.d.ts +0 -81
  262. package/dist/esm/button/tests/button.stories.js +0 -59
  263. package/dist/esm/button/tests/button.stories.js.map +0 -1
  264. package/dist/esm/number-field/tests/number-field.stories.d.ts +0 -33
  265. package/dist/esm/number-field/tests/number-field.stories.js +0 -26
  266. package/dist/esm/number-field/tests/number-field.stories.js.map +0 -1
  267. package/dist/esm/shared/icon-font.d.ts +0 -3
  268. package/dist/esm/shared/icon-font.js +0 -6
  269. package/dist/esm/shared/icon-font.js.map +0 -1
  270. package/dist/esm/stories/icons.stories.d.ts +0 -14
  271. package/dist/esm/stories/icons.stories.js +0 -52
  272. package/dist/esm/stories/icons.stories.js.map +0 -1
  273. package/dist/esm/tests/utilities/fixture.d.ts +0 -89
  274. package/dist/esm/tests/utilities/fixture.js +0 -90
  275. package/dist/esm/tests/utilities/fixture.js.map +0 -1
  276. package/dist/esm/tests/utilities/fixture.spec.d.ts +0 -1
  277. package/dist/esm/tests/utilities/fixture.spec.js +0 -73
  278. package/dist/esm/tests/utilities/fixture.spec.js.map +0 -1
  279. package/dist/esm/tests/utilities/setup.d.ts +0 -2
  280. package/dist/esm/tests/utilities/setup.js +0 -7
  281. package/dist/esm/tests/utilities/setup.js.map +0 -1
  282. package/dist/esm/text-field/tests/text-field.stories.d.ts +0 -42
  283. package/dist/esm/text-field/tests/text-field.stories.js +0 -30
  284. package/dist/esm/text-field/tests/text-field.stories.js.map +0 -1
  285. package/dist/esm/theme-provider/themes.d.ts +0 -5
  286. package/dist/esm/theme-provider/themes.js +0 -7
  287. package/dist/esm/theme-provider/themes.js.map +0 -1
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <div align="center">
2
- <p align="center"><b>ni | nimble | components</b></p>
2
+ <p><b>ni | nimble | components</b></p>
3
3
  </div>
4
4
 
5
5
  # Nimble Components
@@ -10,11 +10,49 @@ 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. All built in components are styled in several themes. An application can also read the tokens underlying the themes to style other parts of the application or modify the tokens underlying the themes to customize the appearance beyond what Nimble offers.
32
+
33
+ The theming system is composed of:
34
+
35
+ 1. theme-aware [design tokens](/packages/nimble-components/src/theme-provider/design-tokens.ts) which map base tokens from `nimble-tokens` to CSS variables and TypeScript constants that style parts of controls.
36
+ 2. a [theme provider component](/packages/nimble-components/src/theme-provider/index.ts) which organizes the higher level tokens into themes.
37
+
38
+ ### Using the Theming System
39
+
40
+ 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:
41
+
42
+ ```html
43
+ <body>
44
+ <nimble-theme-provider theme="light">
45
+ <!-- everything else -->
46
+ </nimble-theme-provider>
47
+ </body>
48
+ ```
49
+
50
+ 2. _Optional_ Add other Nimble components as descendants of the theme provider and they will inherit the theme.
51
+ 3. _Optional_ Style non-Nimble components using the values which the theme provider defines for tokens.
52
+ - Tokens are exposed as CSS custom properties and as TypeScript constants using the [FAST Design Token](https://www.fast.design/docs/design-systems/design-tokens) implementation.
53
+ - These tokens are not yet documented but you can see their names in [`design-tokens.ts`](/packages/nimble-components/src/theme-provider/design-tokens.ts).
54
+ 4. _Optional_ Customize the theme for all or part of your application. Approaches for doing this are an area of active research; please reach out to the Nimble team to discuss your use case.
17
55
 
18
56
  ## Contributing
19
57
 
20
- Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) to modify this library.
58
+ Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.
package/dist/esm/button/behaviors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"behaviors.js","sourceRoot":"","sources":["../../../src/button/behaviors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAuB,EAAE,MAAqB;IAC7E,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
1
+ {"version":3,"file":"behaviors.js","sourceRoot":"","sources":["../../../src/button/behaviors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
package/dist/esm/button/index.d.ts CHANGED
@@ -1,6 +1,14 @@
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
+ }
9
+ /**
10
+ * A nimble-styled HTML button
11
+ */
4
12
  declare class Button extends FoundationButton {
5
13
  /**
6
14
  * The appearance the button should have.
@@ -11,4 +19,6 @@ declare class Button extends FoundationButton {
11
19
  */
12
20
  appearance: ButtonAppearance;
13
21
  connectedCallback(): void;
22
+ defaultSlottedContentChanged(): void;
23
+ private checkForEmptyText;
14
24
  }
package/dist/esm/button/index.js CHANGED
@@ -3,21 +3,28 @@ import { attr } from '@microsoft/fast-element';
3
3
  import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
4
4
  import { styles } from './styles';
5
5
  import { ButtonAppearance } from './types';
6
+ /**
7
+ * A nimble-styled HTML button
8
+ */
6
9
  class Button extends FoundationButton {
7
- /**
8
- * The appearance the button should have.
9
- *
10
- * @public
11
- * @remarks
12
- * HTML Attribute: appearance
13
- */
14
- appearance;
15
10
  connectedCallback() {
16
11
  super.connectedCallback();
17
12
  if (!this.appearance) {
18
13
  this.appearance = ButtonAppearance.Outline;
19
14
  }
20
15
  }
16
+ defaultSlottedContentChanged() {
17
+ this.checkForEmptyText();
18
+ }
19
+ checkForEmptyText() {
20
+ const hasTextContent = this.defaultSlottedContent.some(x => (x.textContent ?? '').trim().length !== 0);
21
+ if (hasTextContent) {
22
+ this.control.classList.remove('empty-text');
23
+ }
24
+ else {
25
+ this.control.classList.add('empty-text');
26
+ }
27
+ }
21
28
  }
22
29
  __decorate([
23
30
  attr
@@ -33,11 +40,13 @@ __decorate([
33
40
  */
34
41
  const nimbleButton = Button.compose({
35
42
  baseName: 'button',
43
+ baseClass: FoundationButton,
44
+ // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
36
45
  template,
37
46
  styles,
38
47
  shadowOptions: {
39
- delegatesFocus: true,
40
- },
48
+ delegatesFocus: true
49
+ }
41
50
  });
42
51
  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
43
52
  //# sourceMappingURL=index.js.map
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,EAAE,MAAM,IAAI,gBAAgB,EAAE,cAAc,IAAI,QAAQ,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAClH,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAI3C,MAAM,MAAO,SAAQ,gBAAgB;IACjC;;;;;;OAMG;IAEI,UAAU,CAAmB;IAE7B,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,CAAC;IAChC,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;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;IAEM,4BAA4B;QAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEO,iBAAiB;QACrB,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAClD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,CACjD,CAAC;QACF,IAAI,cAAc,EAAE;YAChB,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;SAC/C;aAAM;YACH,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;SAC5C;IACL,CAAC;CACJ;AAvBG;IADC,IAAI;0CACgC;AAyBzC;;;;;;;;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,107 +1,183 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { borderColorRgb, borderColorHover, controlHeight, standardPadding, fontFamily, fontColor, fillColorSelected, contentFontSize, fontColorDisabled } from '../theme-provider/design-tokens';
2
+ import { display } from '@microsoft/fast-foundation';
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';
3
5
  import { appearanceBehavior } from './behaviors';
4
6
  import { ButtonAppearance } from './types';
5
7
  export const styles = css `
8
+ ${display('inline-flex')}
9
+
6
10
  :host {
7
- display: inline-block;
8
11
  background-color: transparent;
9
12
  height: ${controlHeight};
10
- color: ${fontColor};
13
+ color: ${buttonContentFontColor};
11
14
  font-family: ${fontFamily};
12
15
  font-size: ${contentFontSize};
13
16
  cursor: pointer;
14
- text-align: center;
15
17
  outline: none;
16
- }
17
-
18
- :host(:hover),
19
- :host(:focus-within) {
20
- box-shadow: 0px 0px 0px 1px ${borderColorHover} inset;
21
- }
22
-
23
- :host(:focus-within:not(:active)) {
24
- outline: 1px solid ${borderColorHover};
25
- outline-offset: -4px;
26
- }
27
-
28
- :host(:active) {
29
- background-color: ${fillColorSelected};
30
- box-shadow: none;
18
+ border: none;
19
+ box-sizing: border-box;
20
+ ${
21
+ /*
22
+ Not sure why but this is needed to get buttons with icons and buttons
23
+ without icons to align on the same line when the button is inline-flex
24
+ */ ''}
25
+ vertical-align: middle;
31
26
  }
32
27
 
33
28
  :host([disabled]) {
34
- color: ${fontColorDisabled};
35
- background-color: transparent;
36
- box-shadow: none;
29
+ color: ${contentFontColorDisabled};
37
30
  cursor: default;
38
31
  }
39
32
 
40
33
  .control {
41
34
  background-color: transparent;
42
35
  height: inherit;
43
- border: 0px solid transparent;
36
+ width: inherit;
37
+ border: ${borderWidth} solid transparent;
38
+ box-sizing: border-box;
44
39
  color: inherit;
45
40
  border-radius: inherit;
46
41
  fill: inherit;
42
+ display: inline-flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ gap: 4px;
47
46
  cursor: inherit;
48
47
  font-family: inherit;
49
48
  font-size: inherit;
50
- line-height: inherit;
51
49
  outline: none;
50
+ margin: 0;
52
51
  padding: 0 ${standardPadding};
53
- }`.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
54
- :host {
55
- border: 1px solid rgba(${borderColorRgb}, 0.3);
52
+ transition: box-shadow ${smallDelay};
53
+ }
54
+
55
+ .control.empty-text {
56
+ width: ${controlHeight};
57
+ padding: 0px;
58
+ }
59
+
60
+ @media (prefers-reduced-motion) {
61
+ .control {
62
+ transition-duration: 0s;
63
+ }
64
+ }
65
+
66
+ .control:hover {
67
+ box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
68
+ outline: none;
69
+ }
70
+
71
+ .control${focusVisible} {
72
+ box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
73
+ outline: ${borderWidth} solid ${borderColorHover};
74
+ outline-offset: -4px;
75
+ }
76
+
77
+ .control:active {
78
+ box-shadow: none;
79
+ outline: none;
80
+ }
81
+
82
+ .control[disabled] {
83
+ box-shadow: none;
84
+ outline: none;
85
+ }
86
+
87
+ .content {
88
+ display: contents;
89
+ }
90
+
91
+ [part='start'] {
92
+ display: contents;
93
+ }
94
+
95
+ slot[name='start']::slotted(*) {
96
+ --icon-color: ${buttonContentFontColor};
97
+ }
98
+
99
+ :host([disabled]) slot[name='start']::slotted(*) {
100
+ opacity: 0.6;
101
+ }
102
+
103
+ [part='end'] {
104
+ display: none;
105
+ }
106
+ `
107
+ // prettier-ignore
108
+ .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
109
+ .control {
110
+ background-color: transparent;
111
+ border-color: rgba(${actionColorRgb}, 0.5);
112
+ }
113
+
114
+ .control:hover {
115
+ background-color: transparent;
116
+ border-color: ${borderColorHover};
56
117
  }
57
118
 
58
- :host(:hover),
59
- :host(:focus-within) {
60
- border: 1px solid ${borderColorHover};
119
+ .control${focusVisible} {
120
+ background-color: transparent;
121
+ border-color: ${borderColorHover};
61
122
  }
62
123
 
63
- :host(:active) {
124
+ .control:active {
125
+ background-color: ${fillColorSelected};
64
126
  border-color: transparent;
65
127
  }
66
128
 
67
- :host([disabled]) {
129
+ .control[disabled] {
130
+ background-color: transparent;
68
131
  border-color: rgba(${borderColorRgb}, 0.2);
69
132
  }
70
133
  `), appearanceBehavior(ButtonAppearance.Ghost, css `
71
- :host {
72
- border: 1px solid transparent;
134
+ .control {
135
+ background-color: transparent;
136
+ border-color: transparent;
73
137
  }
74
138
 
75
- :host(:hover),
76
- :host(:focus-within) {
77
- border: 1px solid ${borderColorHover};
139
+ .control:hover {
140
+ background-color: transparent;
141
+ border-color: ${borderColorHover};
78
142
  }
79
143
 
80
- :host(:active),
81
- :host([disabled]) {
144
+ .control${focusVisible} {
145
+ background-color: transparent;
146
+ border-color: ${borderColorHover};
147
+ }
148
+
149
+ .control:active {
150
+ background-color: ${fillColorSelected};
151
+ border-color: transparent;
152
+ }
153
+
154
+ .control[disabled] {
155
+ background-color: transparent;
82
156
  border-color: transparent;
83
157
  }
84
158
  `), appearanceBehavior(ButtonAppearance.Block, css `
85
- :host {
86
- border: 1px solid transparent;
159
+ .control {
160
+ background-color: rgba(${borderColorRgb}, 0.1);
161
+ border-color: transparent;
87
162
  }
88
163
 
89
- :host(:not(:active)),
90
- :host([disabled]) {
164
+ .control:hover {
91
165
  background-color: rgba(${borderColorRgb}, 0.1);
166
+ border-color: ${borderColorHover};
92
167
  }
93
168
 
94
- :host(:hover),
95
- :host(:focus-within) {
96
- border: 1px solid ${borderColorHover};
169
+ .control${focusVisible} {
170
+ background-color: rgba(${borderColorRgb}, 0.1);
171
+ border-color: ${borderColorHover};
97
172
  }
98
173
 
99
- :host(:active) {
174
+ .control:active {
175
+ background-color: ${fillColorSelected};
100
176
  border-color: transparent;
101
177
  }
102
178
 
103
- :host([disabled]) {
104
- /* This opacity adds to the existing 10% background opacity. */
179
+ .control[disabled] {
180
+ background-color: rgba(${borderColorRgb}, 0.1);
105
181
  border-color: rgba(${borderColorRgb}, 0.1);
106
182
  }
107
183
  `));
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,EACH,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,iBAAiB,EACpB,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;;;;kBAIP,aAAa;iBACd,SAAS;uBACH,UAAU;qBACZ,eAAe;;;;;;;;sCAQE,gBAAgB;;;;6BAIzB,gBAAgB;;;;;4BAKjB,iBAAiB;;;;;iBAK5B,iBAAiB;;;;;;;;;;;;;;;;;;qBAkBb,eAAe;MAC9B,CAAC,aAAa,CACZ,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;6CAE8B,cAAc;;;;;wCAKnB,gBAAgB;;;;;;;;yCAQf,cAAc;;aAE1C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;wCAOyB,gBAAgB;;;;;;;aAO3C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;6CAO8B,cAAc;;;;;wCAKnB,gBAAgB;;;;;;;;;yCASf,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,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;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,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"}
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';
6
+ export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
5
7
  export declare enum ButtonAppearance {
6
8
  Outline = "outline",
7
9
  Ghost = "ghost",
8
10
  Block = "block"
9
11
  }
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":"AAOA,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 ADDED
@@ -0,0 +1,12 @@
1
+ import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
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 ADDED
@@ -0,0 +1,18 @@
1
+ import { DesignSystem, Checkbox as FoundationCheckbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
2
+ import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
3
+ import { styles } from './styles';
4
+ /**
5
+ * A nimble-styled checkbox control.
6
+ */
7
+ class Checkbox extends FoundationCheckbox {
8
+ }
9
+ const nimbleCheckbox = Checkbox.compose({
10
+ baseName: 'checkbox',
11
+ baseClass: FoundationCheckbox,
12
+ // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
13
+ template,
14
+ styles,
15
+ checkedIndicator: controlsCheckboxCheck16X16.data
16
+ });
17
+ DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
18
+ //# sourceMappingURL=index.js.map
package/dist/esm/checkbox/index.js.map ADDED
@@ -0,0 +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;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.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const styles: import("@microsoft/fast-element").ElementStyles;
package/dist/esm/checkbox/styles.js ADDED
@@ -0,0 +1,92 @@
1
+ import { css } from '@microsoft/fast-element';
2
+ import { display } from '@microsoft/fast-foundation';
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';
5
+ export const styles = css `
6
+ ${display('inline-flex')}
7
+
8
+ :host {
9
+ align-items: center;
10
+ cursor: pointer;
11
+ outline: none;
12
+ user-select: none;
13
+ }
14
+
15
+ :host([disabled]) {
16
+ cursor: default;
17
+ }
18
+
19
+ .control {
20
+ width: calc(${controlHeight} / 2);
21
+ height: calc(${controlHeight} / 2);
22
+ box-sizing: border-box;
23
+ flex-shrink: 0;
24
+ border: ${borderWidth} solid ${borderColor};
25
+ padding: 2px;
26
+ display: inline-flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ transition: box-shadow ${smallDelay};
30
+ ${
31
+ /*
32
+ * Firefox includes the line height in the outline height calculation (not sure if intended or accidental).
33
+ * Set it to 0 to ensure the outline is just as high as the control.
34
+ */ ''}
35
+ line-height: 0;
36
+ }
37
+
38
+ @media (prefers-reduced-motion) {
39
+ .control {
40
+ transition-duration: 0s;
41
+ }
42
+ }
43
+
44
+ :host([disabled]) .control {
45
+ background-color: rgba(${borderColorRgb}, 0.1);
46
+ border-color: rgba(${borderColorRgb}, 0.2);
47
+ }
48
+
49
+ :host(:not([disabled]):not(:active):hover) .control {
50
+ border-color: ${borderColorHover};
51
+ box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
52
+ }
53
+
54
+ :host(${focusVisible}) .control {
55
+ border-color: ${borderColorHover};
56
+ outline: 2px solid ${borderColorHover};
57
+ outline-offset: 2px;
58
+ }
59
+
60
+ .label {
61
+ font-family: ${fontFamily};
62
+ font-size: ${contentFontSize};
63
+ color: ${contentFontColor};
64
+ line-height: ${labelHeight};
65
+ padding-left: 1ch;
66
+ cursor: inherit;
67
+ }
68
+
69
+ :host([disabled]) .label {
70
+ color: ${contentFontColorDisabled};
71
+ }
72
+
73
+ slot[name='checked-indicator'] svg {
74
+ height: ${iconSize};
75
+ width: ${iconSize};
76
+ overflow: visible;
77
+ }
78
+
79
+ slot[name='checked-indicator'] path {
80
+ fill: ${borderColor};
81
+ opacity: 0;
82
+ }
83
+
84
+ :host([aria-checked='true']) slot[name='checked-indicator'] path {
85
+ opacity: 1;
86
+ }
87
+
88
+ :host([disabled]) slot[name='checked-indicator'] path {
89
+ fill: rgba(${borderColorRgb}, 0.3);
90
+ }
91
+ `;
92
+ //# sourceMappingURL=styles.js.map
package/dist/esm/checkbox/styles.js.map ADDED
@@ -0,0 +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"}
package/dist/esm/drawer/animations.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export declare const animationConfig: {
2
+ slideLeftKeyframes: Keyframe[];
3
+ slideRightKeyframes: Keyframe[];
4
+ fadeOverlayKeyframes: Keyframe[];
5
+ slideInOptions: {
6
+ duration: number;
7
+ easing: string;
8
+ };
9
+ slideOutOptions: {
10
+ duration: number;
11
+ easing: string;
12
+ direction: string;
13
+ };
14
+ };
package/dist/esm/drawer/animations.js ADDED
@@ -0,0 +1,52 @@
1
+ const slideLeftKeyframes = [
2
+ {
3
+ transform: 'translateX(-100%)',
4
+ visibility: 'hidden',
5
+ offset: 0
6
+ },
7
+ {
8
+ transform: 'translateX(-100%)',
9
+ visibility: 'visible',
10
+ offset: 0.01
11
+ },
12
+ {
13
+ transform: 'translateX(0%)',
14
+ visibility: 'visible',
15
+ offset: 1
16
+ }
17
+ ];
18
+ const slideRightKeyframes = [
19
+ {
20
+ transform: 'translateX(100%)',
21
+ visibility: 'hidden',
22
+ offset: 0
23
+ },
24
+ {
25
+ transform: 'translateX(100%)',
26
+ visibility: 'visible',
27
+ offset: 0.01
28
+ },
29
+ {
30
+ transform: 'translateX(0%)',
31
+ visibility: 'visible',
32
+ offset: 1
33
+ }
34
+ ];
35
+ const fadeOverlayKeyframes = [{ opacity: 0 }, { opacity: 1 }];
36
+ const slideInOptions = {
37
+ duration: 1,
38
+ easing: 'ease-out'
39
+ };
40
+ const slideOutOptions = {
41
+ duration: 1,
42
+ easing: 'ease-in',
43
+ direction: 'reverse'
44
+ };
45
+ export const animationConfig = {
46
+ slideLeftKeyframes,
47
+ slideRightKeyframes,
48
+ fadeOverlayKeyframes,
49
+ slideInOptions,
50
+ slideOutOptions
51
+ };
52
+ //# sourceMappingURL=animations.js.map
package/dist/esm/drawer/animations.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../src/drawer/animations.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAe;IACnC;QACI,SAAS,EAAE,mBAAmB;QAC9B,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACZ;IACD;QACI,SAAS,EAAE,mBAAmB;QAC9B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,IAAI;KACf;IACD;QACI,SAAS,EAAE,gBAAgB;QAC3B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,CAAC;KACZ;CACJ,CAAC;AAEF,MAAM,mBAAmB,GAAe;IACpC;QACI,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,QAAQ;QACpB,MAAM,EAAE,CAAC;KACZ;IACD;QACI,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,IAAI;KACf;IACD;QACI,SAAS,EAAE,gBAAgB;QAC3B,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,CAAC;KACZ;CACJ,CAAC;AAEF,MAAM,oBAAoB,GAAe,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;AAE1E,MAAM,cAAc,GAAG;IACnB,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,eAAe,GAAG;IACpB,QAAQ,EAAE,CAAC;IACX,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,SAAS;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,kBAAkB;IAClB,mBAAmB;IACnB,oBAAoB;IACpB,cAAc;IACd,eAAe;CAClB,CAAC"}