@fluentui/web-components 2.5.10 → 3.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (447) hide show
  1. package/CHANGELOG.json +16 -32
  2. package/CHANGELOG.md +6 -15
  3. package/dist/dts/index-rollup.d.ts +0 -7
  4. package/dist/dts/index.d.ts +1 -49
  5. package/dist/dts/theme/design-tokens.d.ts +379 -0
  6. package/dist/dts/theme/index.d.ts +2 -0
  7. package/dist/dts/theme/set-theme.d.ts +6 -0
  8. package/dist/dts/{anchored-region/anchored-region.stories.d.ts → theme/theme.stories.d.ts} +1 -2
  9. package/dist/esm/index-rollup.js +0 -11
  10. package/dist/esm/index.js +1 -49
  11. package/dist/esm/theme/design-tokens.js +381 -0
  12. package/dist/esm/theme/index.js +2 -0
  13. package/dist/esm/theme/set-theme.js +11 -0
  14. package/dist/esm/theme/theme.stories.js +21 -0
  15. package/dist/fluent-web-components.api.json +6 -19807
  16. package/dist/web-components.d.ts +1 -2980
  17. package/dist/web-components.js +2 -21988
  18. package/dist/web-components.min.js +1 -254
  19. package/docs/api-report.md +1 -1723
  20. package/package.json +13 -5
  21. package/public/theme-switch.ts +13 -0
  22. package/dist/dts/_docs/design-system/color-explorer/app.d.ts +0 -25
  23. package/dist/dts/_docs/design-system/color-explorer/colors.d.ts +0 -13
  24. package/dist/dts/_docs/design-system/color-explorer/component-types.d.ts +0 -6
  25. package/dist/dts/_docs/design-system/color-explorer/components/color-block.d.ts +0 -10
  26. package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.d.ts +0 -190
  27. package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.form-associated.d.ts +0 -15
  28. package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.styles.d.ts +0 -3
  29. package/dist/dts/_docs/design-system/color-explorer/components/color-picker/color-picker.template.d.ts +0 -8
  30. package/dist/dts/_docs/design-system/color-explorer/components/color-picker/index.d.ts +0 -9
  31. package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.d.ts +0 -8
  32. package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.styles.d.ts +0 -1
  33. package/dist/dts/_docs/design-system/color-explorer/components/control-pane/control-pane.template.d.ts +0 -2
  34. package/dist/dts/_docs/design-system/color-explorer/components/control-pane/index.d.ts +0 -6
  35. package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.d.ts +0 -5
  36. package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.styles.d.ts +0 -1
  37. package/dist/dts/_docs/design-system/color-explorer/components/gradient/gradient.template.d.ts +0 -2
  38. package/dist/dts/_docs/design-system/color-explorer/components/gradient/index.d.ts +0 -6
  39. package/dist/dts/_docs/design-system/color-explorer/components/layer-background/index.d.ts +0 -21
  40. package/dist/dts/_docs/design-system/color-explorer/components/sample-app/index.d.ts +0 -6
  41. package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.d.ts +0 -3
  42. package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.styles.d.ts +0 -1
  43. package/dist/dts/_docs/design-system/color-explorer/components/sample-app/sample-app.template.d.ts +0 -1
  44. package/dist/dts/_docs/design-system/color-explorer/components/sample-page/index.d.ts +0 -6
  45. package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.d.ts +0 -3
  46. package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.styles.d.ts +0 -1
  47. package/dist/dts/_docs/design-system/color-explorer/components/sample-page/sample-page.template.d.ts +0 -1
  48. package/dist/dts/_docs/design-system/color-explorer/components/swatch.d.ts +0 -30
  49. package/dist/dts/_docs/design-system/color-explorer/custom-elements.d.ts +0 -7
  50. package/dist/dts/_docs/design-system/color-explorer/index.d.ts +0 -2
  51. package/dist/dts/accordion/accordion-item/accordion-item.styles.d.ts +0 -3
  52. package/dist/dts/accordion/accordion-item/index.d.ts +0 -17
  53. package/dist/dts/accordion/accordion.stories.d.ts +0 -15
  54. package/dist/dts/accordion/accordion.styles.d.ts +0 -3
  55. package/dist/dts/accordion/index.d.ts +0 -22
  56. package/dist/dts/anchor/anchor.stories.d.ts +0 -14
  57. package/dist/dts/anchor/anchor.styles.d.ts +0 -3
  58. package/dist/dts/anchor/index.d.ts +0 -49
  59. package/dist/dts/anchored-region/anchored-region.styles.d.ts +0 -3
  60. package/dist/dts/anchored-region/index.d.ts +0 -21
  61. package/dist/dts/badge/badge.stories.d.ts +0 -14
  62. package/dist/dts/badge/badge.styles.d.ts +0 -3
  63. package/dist/dts/badge/index.d.ts +0 -29
  64. package/dist/dts/breadcrumb/breadcrumb.stories.d.ts +0 -15
  65. package/dist/dts/breadcrumb/breadcrumb.styles.d.ts +0 -3
  66. package/dist/dts/breadcrumb/index.d.ts +0 -21
  67. package/dist/dts/breadcrumb-item/breadcrumb-item.stories.d.ts +0 -15
  68. package/dist/dts/breadcrumb-item/breadcrumb-item.styles.d.ts +0 -3
  69. package/dist/dts/breadcrumb-item/index.d.ts +0 -21
  70. package/dist/dts/button/button.stories.d.ts +0 -21
  71. package/dist/dts/button/button.styles.d.ts +0 -3
  72. package/dist/dts/button/index.d.ts +0 -48
  73. package/dist/dts/calendar/calendar.stories.d.ts +0 -86
  74. package/dist/dts/calendar/calendar.styles.d.ts +0 -7
  75. package/dist/dts/calendar/index.d.ts +0 -18
  76. package/dist/dts/card/card.stories.d.ts +0 -15
  77. package/dist/dts/card/card.styles.d.ts +0 -3
  78. package/dist/dts/card/index.d.ts +0 -46
  79. package/dist/dts/checkbox/checkbox.stories.d.ts +0 -28
  80. package/dist/dts/checkbox/checkbox.styles.d.ts +0 -3
  81. package/dist/dts/checkbox/index.d.ts +0 -16
  82. package/dist/dts/color/palette.d.ts +0 -73
  83. package/dist/dts/color/recipe.d.ts +0 -20
  84. package/dist/dts/color/recipes/contrast-and-delta-swatch-set.d.ts +0 -11
  85. package/dist/dts/color/recipes/contrast-swatch.d.ts +0 -12
  86. package/dist/dts/color/recipes/delta-swatch-set.d.ts +0 -36
  87. package/dist/dts/color/recipes/delta-swatch.d.ts +0 -12
  88. package/dist/dts/color/recipes/focus-stroke.d.ts +0 -10
  89. package/dist/dts/color/recipes/foreground-on-accent.d.ts +0 -11
  90. package/dist/dts/color/recipes/gradient-shadow-stroke.d.ts +0 -7
  91. package/dist/dts/color/recipes/gradient-swatch.d.ts +0 -36
  92. package/dist/dts/color/recipes/neutral-layer-1.d.ts +0 -10
  93. package/dist/dts/color/recipes/neutral-layer-2.d.ts +0 -6
  94. package/dist/dts/color/recipes/neutral-layer-3.d.ts +0 -6
  95. package/dist/dts/color/recipes/neutral-layer-4.d.ts +0 -6
  96. package/dist/dts/color/recipes/neutral-layer-floating.d.ts +0 -6
  97. package/dist/dts/color/recipes/underline-stroke.d.ts +0 -7
  98. package/dist/dts/color/swatch.d.ts +0 -31
  99. package/dist/dts/color/utilities/base-layer-luminance.d.ts +0 -11
  100. package/dist/dts/color/utilities/binary-search.d.ts +0 -4
  101. package/dist/dts/color/utilities/color-constants.d.ts +0 -14
  102. package/dist/dts/color/utilities/direction-by-is-dark.d.ts +0 -5
  103. package/dist/dts/color/utilities/is-dark.d.ts +0 -9
  104. package/dist/dts/color/utilities/relative-luminance.d.ts +0 -13
  105. package/dist/dts/combobox/combobox.stories.d.ts +0 -36
  106. package/dist/dts/combobox/combobox.styles.d.ts +0 -3
  107. package/dist/dts/combobox/index.d.ts +0 -43
  108. package/dist/dts/component-definitions.d.ts +0 -43
  109. package/dist/dts/custom-elements.d.ts +0 -103
  110. package/dist/dts/data-grid/data-grid-cell.styles.d.ts +0 -3
  111. package/dist/dts/data-grid/data-grid-row.styles.d.ts +0 -3
  112. package/dist/dts/data-grid/data-grid.stories.d.ts +0 -15
  113. package/dist/dts/data-grid/data-grid.styles.d.ts +0 -3
  114. package/dist/dts/data-grid/index.d.ts +0 -45
  115. package/dist/dts/design-system-provider/index.d.ts +0 -582
  116. package/dist/dts/design-tokens.d.ts +0 -519
  117. package/dist/dts/dialog/dialog.stories.d.ts +0 -25
  118. package/dist/dts/dialog/dialog.styles.d.ts +0 -3
  119. package/dist/dts/dialog/index.d.ts +0 -21
  120. package/dist/dts/divider/divider.stories.d.ts +0 -6
  121. package/dist/dts/divider/divider.styles.d.ts +0 -3
  122. package/dist/dts/divider/index.d.ts +0 -21
  123. package/dist/dts/flipper/flipper.stories.d.ts +0 -17
  124. package/dist/dts/flipper/flipper.styles.d.ts +0 -3
  125. package/dist/dts/flipper/index.d.ts +0 -21
  126. package/dist/dts/fluent-design-system.d.ts +0 -9
  127. package/dist/dts/horizontal-scroll/horizontal-scroll.stories.d.ts +0 -15
  128. package/dist/dts/horizontal-scroll/horizontal-scroll.styles.d.ts +0 -12
  129. package/dist/dts/horizontal-scroll/index.d.ts +0 -25
  130. package/dist/dts/listbox/index.d.ts +0 -19
  131. package/dist/dts/listbox/listbox.stories.d.ts +0 -6
  132. package/dist/dts/listbox/listbox.styles.d.ts +0 -3
  133. package/dist/dts/listbox-option/index.d.ts +0 -17
  134. package/dist/dts/listbox-option/listbox-option.stories.d.ts +0 -23
  135. package/dist/dts/listbox-option/listbox-option.styles.d.ts +0 -3
  136. package/dist/dts/menu/index.d.ts +0 -26
  137. package/dist/dts/menu/menu.stories.d.ts +0 -6
  138. package/dist/dts/menu/menu.styles.d.ts +0 -3
  139. package/dist/dts/menu-item/index.d.ts +0 -21
  140. package/dist/dts/menu-item/menu-item.stories.d.ts +0 -18
  141. package/dist/dts/menu-item/menu-item.styles.d.ts +0 -3
  142. package/dist/dts/number-field/index.d.ts +0 -41
  143. package/dist/dts/number-field/number-field.stories.d.ts +0 -71
  144. package/dist/dts/number-field/number-field.styles.d.ts +0 -3
  145. package/dist/dts/progress/index.d.ts +0 -2
  146. package/dist/dts/progress/progress/index.d.ts +0 -22
  147. package/dist/dts/progress/progress/progress.stories.d.ts +0 -15
  148. package/dist/dts/progress/progress/progress.styles.d.ts +0 -3
  149. package/dist/dts/progress/progress-ring/index.d.ts +0 -22
  150. package/dist/dts/progress/progress-ring/progress-ring.stories.d.ts +0 -15
  151. package/dist/dts/progress/progress-ring/progress-ring.styles.d.ts +0 -3
  152. package/dist/dts/radio/index.d.ts +0 -21
  153. package/dist/dts/radio/radio.stories.d.ts +0 -23
  154. package/dist/dts/radio/radio.styles.d.ts +0 -3
  155. package/dist/dts/radio-group/index.d.ts +0 -21
  156. package/dist/dts/radio-group/radio-group.stories.d.ts +0 -18
  157. package/dist/dts/radio-group/radio-group.styles.d.ts +0 -3
  158. package/dist/dts/search/index.d.ts +0 -38
  159. package/dist/dts/search/search.stories.d.ts +0 -75
  160. package/dist/dts/search/search.styles.d.ts +0 -3
  161. package/dist/dts/search/search.template.d.ts +0 -6
  162. package/dist/dts/select/index.d.ts +0 -44
  163. package/dist/dts/select/select.stories.d.ts +0 -28
  164. package/dist/dts/select/select.styles.d.ts +0 -13
  165. package/dist/dts/skeleton/index.d.ts +0 -21
  166. package/dist/dts/skeleton/skeleton.stories.d.ts +0 -20
  167. package/dist/dts/skeleton/skeleton.styles.d.ts +0 -3
  168. package/dist/dts/slider/index.d.ts +0 -21
  169. package/dist/dts/slider/slider.stories.d.ts +0 -14
  170. package/dist/dts/slider/slider.styles.d.ts +0 -3
  171. package/dist/dts/slider-label/index.d.ts +0 -21
  172. package/dist/dts/slider-label/slider-label.stories.d.ts +0 -23
  173. package/dist/dts/slider-label/slider-label.styles.d.ts +0 -3
  174. package/dist/dts/styles/direction.d.ts +0 -34
  175. package/dist/dts/styles/elevation.d.ts +0 -64
  176. package/dist/dts/styles/focus.d.ts +0 -13
  177. package/dist/dts/styles/index.d.ts +0 -5
  178. package/dist/dts/styles/patterns/button.styles.d.ts +0 -31
  179. package/dist/dts/styles/patterns/index.d.ts +0 -3
  180. package/dist/dts/styles/patterns/input.styles.d.ts +0 -30
  181. package/dist/dts/styles/patterns/type-ramp.d.ts +0 -18
  182. package/dist/dts/styles/size.d.ts +0 -7
  183. package/dist/dts/switch/index.d.ts +0 -21
  184. package/dist/dts/switch/switch.stories.d.ts +0 -18
  185. package/dist/dts/switch/switch.styles.d.ts +0 -3
  186. package/dist/dts/tabs/index.d.ts +0 -23
  187. package/dist/dts/tabs/tab/index.d.ts +0 -21
  188. package/dist/dts/tabs/tab/tab.styles.d.ts +0 -3
  189. package/dist/dts/tabs/tab-panel/index.d.ts +0 -21
  190. package/dist/dts/tabs/tab-panel/tab-panel.styles.d.ts +0 -3
  191. package/dist/dts/tabs/tabs.stories.d.ts +0 -19
  192. package/dist/dts/tabs/tabs.styles.d.ts +0 -3
  193. package/dist/dts/text-area/index.d.ts +0 -45
  194. package/dist/dts/text-area/text-area.stories.d.ts +0 -41
  195. package/dist/dts/text-area/text-area.styles.d.ts +0 -3
  196. package/dist/dts/text-field/index.d.ts +0 -45
  197. package/dist/dts/text-field/text-field.stories.d.ts +0 -81
  198. package/dist/dts/text-field/text-field.styles.d.ts +0 -3
  199. package/dist/dts/toolbar/index.d.ts +0 -17
  200. package/dist/dts/toolbar/toolbar.stories.d.ts +0 -9
  201. package/dist/dts/toolbar/toolbar.styles.d.ts +0 -3
  202. package/dist/dts/tooltip/index.d.ts +0 -21
  203. package/dist/dts/tooltip/tooltip.stories.d.ts +0 -14
  204. package/dist/dts/tooltip/tooltip.styles.d.ts +0 -3
  205. package/dist/dts/tree-item/index.d.ts +0 -22
  206. package/dist/dts/tree-item/tree-item.stories.d.ts +0 -18
  207. package/dist/dts/tree-item/tree-item.styles.d.ts +0 -4
  208. package/dist/dts/tree-view/index.d.ts +0 -22
  209. package/dist/dts/tree-view/tree-view.stories.d.ts +0 -13
  210. package/dist/dts/tree-view/tree-view.styles.d.ts +0 -3
  211. package/dist/dts/utilities/behaviors.d.ts +0 -12
  212. package/dist/dts/utilities/type-ramp.d.ts +0 -12
  213. package/dist/esm/_docs/design-system/color-explorer/app.js +0 -247
  214. package/dist/esm/_docs/design-system/color-explorer/colors.js +0 -24
  215. package/dist/esm/_docs/design-system/color-explorer/component-types.js +0 -7
  216. package/dist/esm/_docs/design-system/color-explorer/components/color-block.js +0 -408
  217. package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.form-associated.js +0 -16
  218. package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.js +0 -297
  219. package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.styles.js +0 -124
  220. package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.template.js +0 -130
  221. package/dist/esm/_docs/design-system/color-explorer/components/color-picker/index.js +0 -15
  222. package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.js +0 -24
  223. package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.styles.js +0 -19
  224. package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.template.js +0 -52
  225. package/dist/esm/_docs/design-system/color-explorer/components/control-pane/index.js +0 -18
  226. package/dist/esm/_docs/design-system/color-explorer/components/gradient/gradient.js +0 -11
  227. package/dist/esm/_docs/design-system/color-explorer/components/gradient/gradient.styles.js +0 -31
  228. package/dist/esm/_docs/design-system/color-explorer/components/gradient/gradient.template.js +0 -21
  229. package/dist/esm/_docs/design-system/color-explorer/components/gradient/index.js +0 -18
  230. package/dist/esm/_docs/design-system/color-explorer/components/layer-background/index.js +0 -70
  231. package/dist/esm/_docs/design-system/color-explorer/components/sample-app/index.js +0 -18
  232. package/dist/esm/_docs/design-system/color-explorer/components/sample-app/sample-app.js +0 -3
  233. package/dist/esm/_docs/design-system/color-explorer/components/sample-app/sample-app.styles.js +0 -166
  234. package/dist/esm/_docs/design-system/color-explorer/components/sample-app/sample-app.template.js +0 -97
  235. package/dist/esm/_docs/design-system/color-explorer/components/sample-page/index.js +0 -18
  236. package/dist/esm/_docs/design-system/color-explorer/components/sample-page/sample-page.js +0 -3
  237. package/dist/esm/_docs/design-system/color-explorer/components/sample-page/sample-page.styles.js +0 -130
  238. package/dist/esm/_docs/design-system/color-explorer/components/sample-page/sample-page.template.js +0 -82
  239. package/dist/esm/_docs/design-system/color-explorer/components/swatch.js +0 -163
  240. package/dist/esm/_docs/design-system/color-explorer/custom-elements.js +0 -3
  241. package/dist/esm/_docs/design-system/color-explorer/index.js +0 -14
  242. package/dist/esm/accordion/accordion-item/accordion-item.styles.js +0 -154
  243. package/dist/esm/accordion/accordion-item/accordion-item.vscode.definition.json +0 -67
  244. package/dist/esm/accordion/accordion-item/index.js +0 -32
  245. package/dist/esm/accordion/accordion.stories.js +0 -66
  246. package/dist/esm/accordion/accordion.styles.js +0 -13
  247. package/dist/esm/accordion/accordion.vscode.definition.json +0 -35
  248. package/dist/esm/accordion/index.js +0 -27
  249. package/dist/esm/anchor/anchor.stories.js +0 -34
  250. package/dist/esm/anchor/anchor.styles.js +0 -5
  251. package/dist/esm/anchor/anchor.vscode.definition.json +0 -138
  252. package/dist/esm/anchor/index.js +0 -67
  253. package/dist/esm/anchored-region/anchored-region.stories.js +0 -133
  254. package/dist/esm/anchored-region/anchored-region.styles.js +0 -7
  255. package/dist/esm/anchored-region/anchored-region.vscode.definition.json +0 -140
  256. package/dist/esm/anchored-region/index.js +0 -26
  257. package/dist/esm/badge/badge.stories.js +0 -27
  258. package/dist/esm/badge/badge.styles.js +0 -40
  259. package/dist/esm/badge/badge.vscode.definition.json +0 -60
  260. package/dist/esm/badge/index.js +0 -45
  261. package/dist/esm/breadcrumb/breadcrumb.stories.js +0 -20
  262. package/dist/esm/breadcrumb/breadcrumb.styles.js +0 -13
  263. package/dist/esm/breadcrumb/breadcrumb.vscode.definition.json +0 -18
  264. package/dist/esm/breadcrumb/index.js +0 -26
  265. package/dist/esm/breadcrumb-item/breadcrumb-item.stories.js +0 -16
  266. package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js +0 -96
  267. package/dist/esm/breadcrumb-item/breadcrumb-item.vscode.definition.json +0 -50
  268. package/dist/esm/breadcrumb-item/index.js +0 -34
  269. package/dist/esm/button/button.stories.js +0 -40
  270. package/dist/esm/button/button.styles.js +0 -24
  271. package/dist/esm/button/button.vscode.definition.json +0 -158
  272. package/dist/esm/button/index.js +0 -67
  273. package/dist/esm/calendar/calendar.stories.js +0 -115
  274. package/dist/esm/calendar/calendar.styles.js +0 -132
  275. package/dist/esm/calendar/index.js +0 -31
  276. package/dist/esm/card/card.stories.js +0 -30
  277. package/dist/esm/card/card.styles.js +0 -28
  278. package/dist/esm/card/card.vscode.definition.json +0 -33
  279. package/dist/esm/card/index.js +0 -79
  280. package/dist/esm/checkbox/checkbox.stories.js +0 -43
  281. package/dist/esm/checkbox/checkbox.styles.js +0 -161
  282. package/dist/esm/checkbox/checkbox.vscode.definition.json +0 -69
  283. package/dist/esm/checkbox/index.js +0 -31
  284. package/dist/esm/color/palette.js +0 -250
  285. package/dist/esm/color/recipe.js +0 -1
  286. package/dist/esm/color/recipes/contrast-and-delta-swatch-set.js +0 -28
  287. package/dist/esm/color/recipes/contrast-swatch.js +0 -12
  288. package/dist/esm/color/recipes/delta-swatch-set.js +0 -53
  289. package/dist/esm/color/recipes/delta-swatch.js +0 -13
  290. package/dist/esm/color/recipes/focus-stroke.js +0 -14
  291. package/dist/esm/color/recipes/foreground-on-accent.js +0 -21
  292. package/dist/esm/color/recipes/gradient-shadow-stroke.js +0 -54
  293. package/dist/esm/color/recipes/gradient-swatch.js +0 -36
  294. package/dist/esm/color/recipes/neutral-layer-1.js +0 -13
  295. package/dist/esm/color/recipes/neutral-layer-2.js +0 -7
  296. package/dist/esm/color/recipes/neutral-layer-3.js +0 -7
  297. package/dist/esm/color/recipes/neutral-layer-4.js +0 -7
  298. package/dist/esm/color/recipes/neutral-layer-floating.js +0 -7
  299. package/dist/esm/color/recipes/underline-stroke.js +0 -31
  300. package/dist/esm/color/swatch.js +0 -53
  301. package/dist/esm/color/utilities/base-layer-luminance.js +0 -14
  302. package/dist/esm/color/utilities/binary-search.js +0 -15
  303. package/dist/esm/color/utilities/color-constants.js +0 -19
  304. package/dist/esm/color/utilities/direction-by-is-dark.js +0 -7
  305. package/dist/esm/color/utilities/is-dark.js +0 -17
  306. package/dist/esm/color/utilities/relative-luminance.js +0 -8
  307. package/dist/esm/combobox/combobox.stories.js +0 -84
  308. package/dist/esm/combobox/combobox.styles.js +0 -40
  309. package/dist/esm/combobox/combobox.vscode.definition.json +0 -121
  310. package/dist/esm/combobox/index.js +0 -63
  311. package/dist/esm/component-definitions.js +0 -84
  312. package/dist/esm/custom-elements.js +0 -102
  313. package/dist/esm/data-grid/data-grid-cell.styles.js +0 -36
  314. package/dist/esm/data-grid/data-grid-cell.vscode.definition.json +0 -34
  315. package/dist/esm/data-grid/data-grid-row.styles.js +0 -24
  316. package/dist/esm/data-grid/data-grid-row.vscode.definition.json +0 -34
  317. package/dist/esm/data-grid/data-grid.stories.js +0 -381
  318. package/dist/esm/data-grid/data-grid.styles.js +0 -8
  319. package/dist/esm/data-grid/data-grid.vscode.definition.json +0 -34
  320. package/dist/esm/data-grid/index.js +0 -60
  321. package/dist/esm/design-system-provider/design-system-provider.vscode.definition.json +0 -510
  322. package/dist/esm/design-system-provider/index.js +0 -518
  323. package/dist/esm/design-tokens.js +0 -685
  324. package/dist/esm/dialog/dialog.stories.js +0 -36
  325. package/dist/esm/dialog/dialog.styles.js +0 -47
  326. package/dist/esm/dialog/dialog.vscode.definition.json +0 -67
  327. package/dist/esm/dialog/index.js +0 -26
  328. package/dist/esm/divider/divider.stories.js +0 -17
  329. package/dist/esm/divider/divider.styles.js +0 -11
  330. package/dist/esm/divider/divider.vscode.definition.json +0 -29
  331. package/dist/esm/divider/index.js +0 -26
  332. package/dist/esm/flipper/flipper.stories.js +0 -31
  333. package/dist/esm/flipper/flipper.styles.js +0 -84
  334. package/dist/esm/flipper/flipper.vscode.definition.json +0 -56
  335. package/dist/esm/flipper/index.js +0 -36
  336. package/dist/esm/fluent-design-system.js +0 -11
  337. package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js +0 -81
  338. package/dist/esm/horizontal-scroll/horizontal-scroll.styles.js +0 -138
  339. package/dist/esm/horizontal-scroll/horizontal-scroll.vscode.definition.json +0 -85
  340. package/dist/esm/horizontal-scroll/index.js +0 -47
  341. package/dist/esm/listbox/index.js +0 -24
  342. package/dist/esm/listbox/listbox.stories.js +0 -29
  343. package/dist/esm/listbox/listbox.styles.js +0 -21
  344. package/dist/esm/listbox/listbox.vscode.definition.json +0 -40
  345. package/dist/esm/listbox-option/index.js +0 -22
  346. package/dist/esm/listbox-option/listbox-option.stories.js +0 -38
  347. package/dist/esm/listbox-option/listbox-option.styles.js +0 -133
  348. package/dist/esm/listbox-option/listbox-option.vscode.definition.json +0 -45
  349. package/dist/esm/menu/index.js +0 -36
  350. package/dist/esm/menu/menu.stories.js +0 -56
  351. package/dist/esm/menu/menu.styles.js +0 -42
  352. package/dist/esm/menu/menu.vscode.definition.json +0 -18
  353. package/dist/esm/menu-item/index.js +0 -41
  354. package/dist/esm/menu-item/menu-item.stories.js +0 -34
  355. package/dist/esm/menu-item/menu-item.styles.js +0 -265
  356. package/dist/esm/menu-item/menu-item.vscode.definition.json +0 -82
  357. package/dist/esm/number-field/index.js +0 -57
  358. package/dist/esm/number-field/number-field.stories.js +0 -83
  359. package/dist/esm/number-field/number-field.styles.js +0 -71
  360. package/dist/esm/number-field/number-field.vscode.definition.json +0 -167
  361. package/dist/esm/progress/index.js +0 -2
  362. package/dist/esm/progress/progress/index.js +0 -33
  363. package/dist/esm/progress/progress/progress.stories.js +0 -59
  364. package/dist/esm/progress/progress/progress.styles.js +0 -119
  365. package/dist/esm/progress/progress/progress.vscode.definition.json +0 -56
  366. package/dist/esm/progress/progress-ring/index.js +0 -45
  367. package/dist/esm/progress/progress-ring/progress-ring.stories.js +0 -59
  368. package/dist/esm/progress/progress-ring/progress-ring.styles.js +0 -79
  369. package/dist/esm/progress/progress-ring/progress-ring.vscode.definition.json +0 -56
  370. package/dist/esm/radio/index.js +0 -31
  371. package/dist/esm/radio/radio.stories.js +0 -41
  372. package/dist/esm/radio/radio.styles.js +0 -152
  373. package/dist/esm/radio/radio.vscode.definition.json +0 -63
  374. package/dist/esm/radio-group/index.js +0 -26
  375. package/dist/esm/radio-group/radio-group.stories.js +0 -42
  376. package/dist/esm/radio-group/radio-group.styles.js +0 -21
  377. package/dist/esm/radio-group/radio-group.vscode.definition.json +0 -64
  378. package/dist/esm/search/index.js +0 -52
  379. package/dist/esm/search/search.stories.js +0 -83
  380. package/dist/esm/search/search.styles.js +0 -104
  381. package/dist/esm/search/search.template.js +0 -82
  382. package/dist/esm/search/search.vscode.definition.json +0 -145
  383. package/dist/esm/select/index.js +0 -61
  384. package/dist/esm/select/select.stories.js +0 -53
  385. package/dist/esm/select/select.styles.js +0 -139
  386. package/dist/esm/select/select.vscode.definition.json +0 -79
  387. package/dist/esm/skeleton/index.js +0 -26
  388. package/dist/esm/skeleton/skeleton.stories.js +0 -37
  389. package/dist/esm/skeleton/skeleton.styles.js +0 -77
  390. package/dist/esm/skeleton/skeleton.vscode.definition.json +0 -49
  391. package/dist/esm/slider/index.js +0 -29
  392. package/dist/esm/slider/slider.stories.js +0 -40
  393. package/dist/esm/slider/slider.styles.js +0 -162
  394. package/dist/esm/slider/slider.vscode.definition.json +0 -101
  395. package/dist/esm/slider-label/index.js +0 -26
  396. package/dist/esm/slider-label/slider-label.stories.js +0 -40
  397. package/dist/esm/slider-label/slider-label.styles.js +0 -77
  398. package/dist/esm/slider-label/slider-label.vscode.definition.json +0 -43
  399. package/dist/esm/styles/direction.js +0 -73
  400. package/dist/esm/styles/elevation.js +0 -74
  401. package/dist/esm/styles/focus.js +0 -21
  402. package/dist/esm/styles/index.js +0 -5
  403. package/dist/esm/styles/patterns/button.styles.js +0 -427
  404. package/dist/esm/styles/patterns/index.js +0 -3
  405. package/dist/esm/styles/patterns/input.styles.js +0 -227
  406. package/dist/esm/styles/patterns/type-ramp.js +0 -74
  407. package/dist/esm/styles/size.js +0 -9
  408. package/dist/esm/switch/index.js +0 -31
  409. package/dist/esm/switch/switch.stories.js +0 -42
  410. package/dist/esm/switch/switch.styles.js +0 -213
  411. package/dist/esm/switch/switch.vscode.definition.json +0 -68
  412. package/dist/esm/tabs/index.js +0 -28
  413. package/dist/esm/tabs/tab/index.js +0 -26
  414. package/dist/esm/tabs/tab/tab.styles.js +0 -75
  415. package/dist/esm/tabs/tab/tab.vscode.definition.json +0 -17
  416. package/dist/esm/tabs/tab-panel/index.js +0 -26
  417. package/dist/esm/tabs/tab-panel/tab-panel.styles.js +0 -11
  418. package/dist/esm/tabs/tab-panel/tab-panel.vscode.definition.json +0 -17
  419. package/dist/esm/tabs/tabs.stories.js +0 -105
  420. package/dist/esm/tabs/tabs.styles.js +0 -98
  421. package/dist/esm/tabs/tabs.vscode.definition.json +0 -50
  422. package/dist/esm/text-area/index.js +0 -56
  423. package/dist/esm/text-area/text-area.stories.js +0 -56
  424. package/dist/esm/text-area/text-area.styles.js +0 -39
  425. package/dist/esm/text-area/text-area.vscode.definition.json +0 -141
  426. package/dist/esm/text-field/index.js +0 -56
  427. package/dist/esm/text-field/text-field.stories.js +0 -88
  428. package/dist/esm/text-field/text-field.styles.js +0 -48
  429. package/dist/esm/text-field/text-field.vscode.definition.json +0 -150
  430. package/dist/esm/toolbar/index.js +0 -23
  431. package/dist/esm/toolbar/toolbar.stories.js +0 -9
  432. package/dist/esm/toolbar/toolbar.styles.js +0 -73
  433. package/dist/esm/tooltip/index.js +0 -31
  434. package/dist/esm/tooltip/tooltip.stories.js +0 -34
  435. package/dist/esm/tooltip/tooltip.styles.js +0 -107
  436. package/dist/esm/tooltip/tooltip.vscode.definition.json +0 -56
  437. package/dist/esm/tree-item/index.js +0 -32
  438. package/dist/esm/tree-item/tree-item.stories.js +0 -34
  439. package/dist/esm/tree-item/tree-item.styles.js +0 -227
  440. package/dist/esm/tree-item/tree-item.vscode.definition.json +0 -63
  441. package/dist/esm/tree-view/index.js +0 -27
  442. package/dist/esm/tree-view/tree-view.stories.js +0 -99
  443. package/dist/esm/tree-view/tree-view.styles.js +0 -14
  444. package/dist/esm/tree-view/tree-view.vscode.definition.json +0 -26
  445. package/dist/esm/utilities/behaviors.js +0 -13
  446. package/dist/esm/utilities/type-ramp.js +0 -12
  447. package/public/switches.ts +0 -24
@@ -1,31 +0,0 @@
1
- import { directionByIsDark } from '../utilities/direction-by-is-dark';
2
- import { GradientSwatchRGB } from './gradient-swatch';
3
- /**
4
- * @internal
5
- */
6
- export function underlineStroke(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, shadowDelta, width) {
7
- const referenceIndex = palette.closestIndexOf(reference);
8
- const direction = directionByIsDark(reference);
9
- const restIndex = referenceIndex + direction * restDelta;
10
- const hoverIndex = restIndex + direction * (hoverDelta - restDelta);
11
- const activeIndex = restIndex + direction * (activeDelta - restDelta);
12
- const focusIndex = restIndex + direction * (focusDelta - restDelta);
13
- const midPosition = `calc(100% - ${width})`;
14
- function gradientHelper(index, applyShadow) {
15
- const color = palette.get(index);
16
- if (applyShadow) {
17
- const underlineColor = palette.get(index + direction * shadowDelta);
18
- const g = `linear-gradient(${color.toColorString()} ${midPosition}, ${underlineColor.toColorString()} ${midPosition}, ${underlineColor.toColorString()})`;
19
- return GradientSwatchRGB.fromObject(color, g);
20
- }
21
- else {
22
- return color;
23
- }
24
- }
25
- return {
26
- rest: gradientHelper(restIndex, true),
27
- hover: gradientHelper(hoverIndex, true),
28
- active: gradientHelper(activeIndex, false),
29
- focus: gradientHelper(focusIndex, true),
30
- };
31
- }
@@ -1,53 +0,0 @@
1
- import { ColorRGBA64, rgbToRelativeLuminance } from '@microsoft/fast-colors';
2
- import { contrast } from './utilities/relative-luminance';
3
- /** @public */
4
- export const SwatchRGB = Object.freeze({
5
- create(r, g, b) {
6
- return new SwatchRGBImpl(r, g, b);
7
- },
8
- from(obj) {
9
- return new SwatchRGBImpl(obj.r, obj.g, obj.b);
10
- },
11
- });
12
- /**
13
- * Runtime test for an objects conformance with the SwatchRGB interface.
14
- * @internal
15
- */
16
- export function isSwatchRGB(value) {
17
- const test = {
18
- r: 0,
19
- g: 0,
20
- b: 0,
21
- toColorString: () => '',
22
- contrast: () => 0,
23
- relativeLuminance: 0,
24
- };
25
- for (const key in test) {
26
- if (typeof test[key] !== typeof value[key]) {
27
- return false;
28
- }
29
- }
30
- return true;
31
- }
32
- /**
33
- * An RGB implementation of {@link Swatch}
34
- * @internal
35
- */
36
- class SwatchRGBImpl extends ColorRGBA64 {
37
- /**
38
- *
39
- * @param red - Red channel expressed as a number between 0 and 1
40
- * @param green - Green channel expressed as a number between 0 and 1
41
- * @param blue - Blue channel expressed as a number between 0 and 1
42
- */
43
- constructor(red, green, blue) {
44
- super(red, green, blue, 1);
45
- this.toColorString = this.toStringHexRGB;
46
- this.contrast = contrast.bind(null, this);
47
- this.createCSS = this.toColorString;
48
- this.relativeLuminance = rgbToRelativeLuminance(this);
49
- }
50
- static fromObject(obj) {
51
- return new SwatchRGBImpl(obj.r, obj.g, obj.b);
52
- }
53
- }
@@ -1,14 +0,0 @@
1
- import { SwatchRGB } from '../swatch';
2
- export function baseLayerLuminanceSwatch(luminance) {
3
- return SwatchRGB.create(luminance, luminance, luminance);
4
- }
5
- /**
6
- * Recommended values for light and dark mode for {@link @fluentui/web-components#baseLayerLuminance}.
7
- *
8
- * @public
9
- */
10
- export var StandardLuminance;
11
- (function (StandardLuminance) {
12
- StandardLuminance[StandardLuminance["LightMode"] = 0.98] = "LightMode";
13
- StandardLuminance[StandardLuminance["DarkMode"] = 0.15] = "DarkMode";
14
- })(StandardLuminance || (StandardLuminance = {}));
@@ -1,15 +0,0 @@
1
- /**
2
- * @internal
3
- */
4
- export function binarySearch(valuesToSearch, searchCondition, startIndex = 0, endIndex = valuesToSearch.length - 1) {
5
- if (endIndex === startIndex) {
6
- return valuesToSearch[startIndex];
7
- }
8
- const middleIndex = Math.floor((endIndex - startIndex) / 2) + startIndex;
9
- // Check to see if this passes on the item in the center of the array
10
- // if it does check the previous values
11
- return searchCondition(valuesToSearch[middleIndex])
12
- ? binarySearch(valuesToSearch, searchCondition, startIndex, middleIndex)
13
- : binarySearch(valuesToSearch, searchCondition, middleIndex + 1, // exclude this index because it failed the search condition
14
- endIndex);
15
- }
@@ -1,19 +0,0 @@
1
- import { parseColorHexRGB } from '@microsoft/fast-colors';
2
- import { SwatchRGB } from '../swatch';
3
- /**
4
- * @internal
5
- */
6
- export const white = SwatchRGB.create(1, 1, 1);
7
- /**
8
- * @internal
9
- */
10
- export const black = SwatchRGB.create(0, 0, 0);
11
- /**
12
- * @internal
13
- */
14
- export const middleGrey = SwatchRGB.create(0.5, 0.5, 0.5);
15
- /**
16
- * @internal
17
- */
18
- const base = parseColorHexRGB('#0078D4');
19
- export const accentBase = SwatchRGB.create(base.r, base.g, base.b);
@@ -1,7 +0,0 @@
1
- import { isDark } from './is-dark';
2
- /**
3
- * @internal
4
- */
5
- export function directionByIsDark(color) {
6
- return isDark(color) ? -1 : 1;
7
- }
@@ -1,17 +0,0 @@
1
- /*
2
- * A color is in "dark" if there is more contrast between #000000 and a reference
3
- * color than #FFFFFF and the reference color. That threshold can be expressed as a relative luminance
4
- * using the contrast formula as (1 + 0.5) / (R + 0.05) === (R + 0.05) / (0 + 0.05),
5
- * which reduces to the following, where 'R' is the relative luminance of the reference color
6
- */
7
- const target = (-0.1 + Math.sqrt(0.21)) / 2;
8
- /**
9
- * Determines if a color should be considered Dark Mode
10
- * @param color - The color to check to mode of
11
- * @returns boolean
12
- *
13
- * @internal
14
- */
15
- export function isDark(color) {
16
- return color.relativeLuminance <= target;
17
- }
@@ -1,8 +0,0 @@
1
- /**
2
- * @internal
3
- */
4
- export function contrast(a, b) {
5
- const L1 = a.relativeLuminance > b.relativeLuminance ? a : b;
6
- const L2 = a.relativeLuminance > b.relativeLuminance ? b : a;
7
- return (L1.relativeLuminance + 0.05) / (L2.relativeLuminance + 0.05);
8
- }
@@ -1,84 +0,0 @@
1
- import { fluentCombobox } from './index';
2
- export default {
3
- title: 'Components/Combobox',
4
- component: fluentCombobox,
5
- argTypes: {
6
- appearance: {
7
- options: ['filled', 'outline'],
8
- control: { type: 'radio' },
9
- },
10
- disabled: {
11
- control: { type: 'boolean' },
12
- },
13
- autocomplete: {
14
- options: ['inline', 'list', 'none', 'both'],
15
- control: { type: 'radio' },
16
- },
17
- position: {
18
- options: ['above', 'below'],
19
- control: { type: 'radio' },
20
- },
21
- required: {
22
- control: { type: 'boolean' },
23
- },
24
- },
25
- };
26
- const ComboboxTemplate = ({ appearance, disabled, autocomplete, position, required }) => `
27
- <style>
28
- div.docs-story>div:first-child {
29
- height: 32em !important;
30
- }
31
- </style>
32
- <fluent-combobox
33
- ${appearance ? `appearance="${appearance}"` : ''}
34
- ${disabled ? 'disabled' : ''}
35
- ${autocomplete ? `autocomplete="${autocomplete}"` : ''}
36
- ${required ? 'required' : ''}
37
- ${position ? `position="${position}"` : ''}
38
- style="margin-bottom: 500px;"
39
- >
40
- <fluent-option>Please Please Me</fluent-option>
41
- <fluent-option>With The Beatles</fluent-option>
42
- <fluent-option>A Hard Day's Night</fluent-option>
43
- <fluent-option>Beatles for Sale</fluent-option>
44
- <fluent-option>Help!</fluent-option>
45
- <fluent-option>Rubber Soul</fluent-option>
46
- <fluent-option>Revolver</fluent-option>
47
- <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
48
- <fluent-option>Magical Mystery Tour</fluent-option>
49
- <fluent-option>The Beatles</fluent-option>
50
- <fluent-option>Yellow Submarine</fluent-option>
51
- <fluent-option>Abbey Road</fluent-option>
52
- <fluent-option>Let It Be</fluent-option>
53
- </fluent-combobox>
54
- `;
55
- export const Combobox = ComboboxTemplate.bind({});
56
- Combobox.args = {
57
- value: 'Christopher Eccleston',
58
- appearance: 'outline',
59
- disabled: false,
60
- };
61
- const example = `
62
- <fluent-combobox>
63
- <fluent-option>Please Please Me</fluent-option>
64
- <fluent-option>With The Beatles</fluent-option>
65
- <fluent-option>A Hard Day's Night</fluent-option>
66
- <fluent-option>Beatles for Sale</fluent-option>
67
- <fluent-option>Help!</fluent-option>
68
- <fluent-option>Rubber Soul</fluent-option>
69
- <fluent-option>Revolver</fluent-option>
70
- <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
71
- <fluent-option>Magical Mystery Tour</fluent-option>
72
- <fluent-option>The Beatles</fluent-option>
73
- <fluent-option>Yellow Submarine</fluent-option>
74
- <fluent-option>Abbey Road</fluent-option>
75
- <fluent-option>Let It Be</fluent-option>
76
- </fluent-combobox>
77
- `;
78
- Combobox.parameters = {
79
- docs: {
80
- source: {
81
- code: example,
82
- },
83
- },
84
- };
@@ -1,40 +0,0 @@
1
- import { css } from '@microsoft/fast-element';
2
- import { disabledCursor, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
3
- import { baseSelectStyles } from '../select/select.styles';
4
- import { appearanceBehavior } from '../utilities/behaviors';
5
- import { strokeWidth } from '../design-tokens';
6
- import { typeRampBase } from '../styles/patterns/type-ramp';
7
- import { inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles } from '../styles';
8
- const logicalControlSelector = '.control';
9
- const interactivitySelector = ':not([disabled]):not([open])';
10
- export const comboboxStyles = (context, definition) => css `
11
- ${baseSelectStyles(context, definition)}
12
-
13
- ${inputStateStyles(context, definition, logicalControlSelector)}
14
-
15
- :host(:empty) .listbox {
16
- display: none;
17
- }
18
-
19
- :host([disabled]) *,
20
- :host([disabled]) {
21
- cursor: ${disabledCursor};
22
- user-select: none;
23
- }
24
-
25
- :host(:active) .selected-value {
26
- user-select: none;
27
- }
28
-
29
- .selected-value {
30
- -webkit-appearance: none;
31
- background: transparent;
32
- border: none;
33
- color: inherit;
34
- ${typeRampBase}
35
- height: calc(100% - ${strokeWidth} * 1px));
36
- margin: auto 0;
37
- width: 100%;
38
- outline: none;
39
- }
40
- `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector, interactivitySelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector, interactivitySelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector, interactivitySelector)));
@@ -1,121 +0,0 @@
1
- {
2
- "version": 1.1,
3
- "tags": [
4
- {
5
- "name": "fluent-combobox",
6
- "title": "Combobox",
7
- "description": "The Fluent UI combobox element",
8
- "attributes": [
9
- {
10
- "name": "appearance",
11
- "title": "Appearance",
12
- "description": "The combobox's visual treatment",
13
- "type": "string",
14
- "values": [
15
- {
16
- "name": "filled"
17
- },
18
- {
19
- "name": "outline"
20
- }
21
- ],
22
- "default": "outline",
23
- "required": false
24
- },
25
- {
26
- "name": "autocomplete",
27
- "title": "Autocomplete",
28
- "description": "Sets the autocomplete method to use when the combobox receives user input",
29
- "default": "",
30
- "type": "string",
31
- "values": [
32
- {
33
- "name": "inline"
34
- },
35
- {
36
- "name": "list"
37
- },
38
- {
39
- "name": "both"
40
- },
41
- {
42
- "name": "none"
43
- }
44
- ]
45
- },
46
- {
47
- "name": "disabled",
48
- "title": "Disabled",
49
- "description": "Sets the disabled state of the combobox",
50
- "type": "boolean",
51
- "default": false,
52
- "required": false
53
- },
54
- {
55
- "name": "name",
56
- "title": "Name",
57
- "description": "This element's value will be surfaced during form submission under the provided name",
58
- "type": "string",
59
- "default": "",
60
- "required": false
61
- },
62
- {
63
- "name": "position",
64
- "title": "Position",
65
- "description": "Controls the placement of the combobox dropdown",
66
- "required": false,
67
- "type": "string",
68
- "values": [
69
- {
70
- "name": "above"
71
- },
72
- {
73
- "name": "below"
74
- }
75
- ]
76
- },
77
- {
78
- "name": "placeholder",
79
- "title": "Placeholder",
80
- "description": "Sets the placeholder value of the combobox to provide a hint to the user",
81
- "required": false,
82
- "type": "string"
83
- },
84
- {
85
- "name": "value",
86
- "title": "Value",
87
- "description": "The initial value of the combobox",
88
- "required": false,
89
- "type": "string"
90
- }
91
- ],
92
- "slots": [
93
- {
94
- "name": "",
95
- "title": "Default slot",
96
- "description": "Supports fluent-option, option elements, or elements with a role of option"
97
- },
98
- {
99
- "name": "control",
100
- "title": "Input Control slot",
101
- "description": "Slot to replace the contents of the control container"
102
- },
103
- {
104
- "name": "indicator",
105
- "title": "Indicator slot",
106
- "description": "Slot to provide a custom icon to represent the visual indicator"
107
- },
108
- {
109
- "name": "start",
110
- "title": "Start slot",
111
- "description": "Contents of the start slot are positioned before the contents of the control container"
112
- },
113
- {
114
- "name": "end",
115
- "title": "End slot",
116
- "description": "Contents of the end slot are positioned after the contents of the control container"
117
- }
118
- ]
119
- }
120
- ]
121
- }
@@ -1,63 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { attr } from '@microsoft/fast-element';
3
- import { Combobox as FoundationCombobox, comboboxTemplate as template, } from '@microsoft/fast-foundation';
4
- import { fillColor, neutralLayerFloating } from '../design-tokens';
5
- import { comboboxStyles as styles } from './combobox.styles';
6
- /**
7
- * The Fluent combobox class
8
- * @internal
9
- */
10
- export class Combobox extends FoundationCombobox {
11
- /**
12
- * @internal
13
- */
14
- appearanceChanged(oldValue, newValue) {
15
- if (oldValue !== newValue) {
16
- this.classList.add(newValue);
17
- this.classList.remove(oldValue);
18
- }
19
- }
20
- /**
21
- * @internal
22
- */
23
- connectedCallback() {
24
- super.connectedCallback();
25
- if (!this.appearance) {
26
- this.appearance = 'outline';
27
- }
28
- if (this.listbox) {
29
- fillColor.setValueFor(this.listbox, neutralLayerFloating);
30
- }
31
- }
32
- }
33
- __decorate([
34
- attr({ mode: 'fromView' })
35
- ], Combobox.prototype, "appearance", void 0);
36
- /**
37
- * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox},
38
- * {@link @microsoft/fast-foundation#comboboxTemplate}
39
- *
40
- * @public
41
- * @remarks
42
- * HTML Element: \<fluent-combobox\>
43
- *
44
- */
45
- export const fluentCombobox = Combobox.compose({
46
- baseName: 'combobox',
47
- baseClass: FoundationCombobox,
48
- shadowOptions: {
49
- delegatesFocus: true,
50
- },
51
- template,
52
- styles,
53
- indicator: `
54
- <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
55
- <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
56
- </svg>
57
- `,
58
- });
59
- /**
60
- * Styles for combobox
61
- * @public
62
- */
63
- export const comboboxStyles = styles;
@@ -1,84 +0,0 @@
1
- import fluentAccordionItemDefinition from './accordion/accordion-item/accordion-item.vscode.definition.json';
2
- export { fluentAccordionItemDefinition };
3
- import fluentAccordionDefinition from './accordion/accordion.vscode.definition.json';
4
- export { fluentAccordionDefinition };
5
- import fluentAnchorDefinition from './anchor/anchor.vscode.definition.json';
6
- export { fluentAnchorDefinition };
7
- import fluentAnchoredRegionDefinition from './anchored-region/anchored-region.vscode.definition.json';
8
- export { fluentAnchoredRegionDefinition };
9
- import fluentBadgeDefinition from './badge/badge.vscode.definition.json';
10
- export { fluentBadgeDefinition };
11
- import fluentBreadcrumbDefinition from './breadcrumb/breadcrumb.vscode.definition.json';
12
- export { fluentBreadcrumbDefinition };
13
- import fluentBreadcrumbItemDefinition from './breadcrumb-item/breadcrumb-item.vscode.definition.json';
14
- export { fluentBreadcrumbItemDefinition };
15
- import fluentButtonDefinition from './button/button.vscode.definition.json';
16
- export { fluentButtonDefinition };
17
- import fluentCardDefinition from './card/card.vscode.definition.json';
18
- export { fluentCardDefinition };
19
- import fluentCheckboxDefinition from './checkbox/checkbox.vscode.definition.json';
20
- export { fluentCheckboxDefinition };
21
- import fluentComboboxDefinition from './combobox/combobox.vscode.definition.json';
22
- export { fluentComboboxDefinition };
23
- import fluentDataGridDefinition from './data-grid/data-grid.vscode.definition.json';
24
- export { fluentDataGridDefinition };
25
- import fluentDataGridCellDefinition from './data-grid/data-grid-cell.vscode.definition.json';
26
- export { fluentDataGridCellDefinition };
27
- import fluentDataGridRowDefinition from './data-grid/data-grid-row.vscode.definition.json';
28
- export { fluentDataGridRowDefinition };
29
- import fluentDesignSystemProviderDefinition from './design-system-provider/design-system-provider.vscode.definition.json';
30
- export { fluentDesignSystemProviderDefinition };
31
- import fluentDialogDefinition from './dialog/dialog.vscode.definition.json';
32
- export { fluentDialogDefinition };
33
- import fluentDividerDefinition from './divider/divider.vscode.definition.json';
34
- export { fluentDividerDefinition };
35
- import fluentFlipperDefinition from './flipper/flipper.vscode.definition.json';
36
- export { fluentFlipperDefinition };
37
- import fluentHorizontalScrollDefinition from './horizontal-scroll/horizontal-scroll.vscode.definition.json';
38
- export { fluentHorizontalScrollDefinition };
39
- import fluentListboxDefinition from './listbox/listbox.vscode.definition.json';
40
- export { fluentListboxDefinition };
41
- import fluentListboxOptionDefinition from './listbox-option/listbox-option.vscode.definition.json';
42
- export { fluentListboxOptionDefinition };
43
- import fluentMenuDefinition from './menu/menu.vscode.definition.json';
44
- export { fluentMenuDefinition };
45
- import fluentMenuItemDefinition from './menu-item/menu-item.vscode.definition.json';
46
- export { fluentMenuItemDefinition };
47
- import fluentNumberFieldDefinition from './number-field/number-field.vscode.definition.json';
48
- export { fluentNumberFieldDefinition };
49
- import fluentProgressRingDefinition from './progress/progress-ring/progress-ring.vscode.definition.json';
50
- export { fluentProgressRingDefinition };
51
- import fluentProgressDefinition from './progress/progress/progress.vscode.definition.json';
52
- export { fluentProgressDefinition };
53
- import fluentRadioDefinition from './radio/radio.vscode.definition.json';
54
- export { fluentRadioDefinition };
55
- import fluentRadioGroupDefinition from './radio-group/radio-group.vscode.definition.json';
56
- export { fluentRadioGroupDefinition };
57
- import fluentSearchDefinition from './search/search.vscode.definition.json';
58
- export { fluentSearchDefinition };
59
- import fluentSelectDefinition from './select/select.vscode.definition.json';
60
- export { fluentSelectDefinition };
61
- import fluentSkeletonDefinition from './skeleton/skeleton.vscode.definition.json';
62
- export { fluentSkeletonDefinition };
63
- import fluentSliderDefinition from './slider/slider.vscode.definition.json';
64
- export { fluentSliderDefinition };
65
- import fluentSliderLabelDefinition from './slider-label/slider-label.vscode.definition.json';
66
- export { fluentSliderLabelDefinition };
67
- import fluentSwitchDefinition from './switch/switch.vscode.definition.json';
68
- export { fluentSwitchDefinition };
69
- import fluentTabPanelDefinition from './tabs/tab-panel/tab-panel.vscode.definition.json';
70
- export { fluentTabPanelDefinition };
71
- import fluentTabDefinition from './tabs/tab/tab.vscode.definition.json';
72
- export { fluentTabDefinition };
73
- import fluentTabsDefinition from './tabs/tabs.vscode.definition.json';
74
- export { fluentTabsDefinition };
75
- import fluentTextAreaDefinition from './text-area/text-area.vscode.definition.json';
76
- export { fluentTextAreaDefinition };
77
- import fluentTextFieldDefinition from './text-field/text-field.vscode.definition.json';
78
- export { fluentTextFieldDefinition };
79
- import fluentTooltipDefinition from './tooltip/tooltip.vscode.definition.json';
80
- export { fluentTooltipDefinition };
81
- import fluentTreeItemDefinition from './tree-item/tree-item.vscode.definition.json';
82
- export { fluentTreeItemDefinition };
83
- import fluentTreeViewDefinition from './tree-view/tree-view.vscode.definition.json';
84
- export { fluentTreeViewDefinition };
@@ -1,102 +0,0 @@
1
- import { fluentAccordion, fluentAccordionItem } from './accordion/index';
2
- import { fluentAnchor } from './anchor/index';
3
- import { fluentAnchoredRegion } from './anchored-region/index';
4
- import { fluentBadge } from './badge/index';
5
- import { fluentBreadcrumb } from './breadcrumb/index';
6
- import { fluentBreadcrumbItem } from './breadcrumb-item/index';
7
- import { fluentButton } from './button/index';
8
- import { fluentCalendar } from './calendar/index';
9
- import { fluentCard } from './card/index';
10
- import { fluentCheckbox } from './checkbox/index';
11
- import { fluentCombobox } from './combobox/index';
12
- import { fluentDataGrid, fluentDataGridCell, fluentDataGridRow } from './data-grid/index';
13
- import { fluentDesignSystemProvider } from './design-system-provider/index';
14
- import { fluentDialog } from './dialog/index';
15
- import { fluentDivider } from './divider/index';
16
- import { fluentFlipper } from './flipper/index';
17
- import { fluentHorizontalScroll } from './horizontal-scroll/index';
18
- import { fluentListbox } from './listbox/index';
19
- import { fluentOption } from './listbox-option/index';
20
- import { fluentMenu } from './menu/index';
21
- import { fluentMenuItem } from './menu-item/index';
22
- import { fluentNumberField } from './number-field/index';
23
- import { fluentProgress, fluentProgressRing } from './progress/index';
24
- import { fluentRadio } from './radio/index';
25
- import { fluentRadioGroup } from './radio-group/index';
26
- import { fluentSearch } from './search/index';
27
- import { fluentSelect } from './select/index';
28
- import { fluentSkeleton } from './skeleton/index';
29
- import { fluentSlider } from './slider/index';
30
- import { fluentSliderLabel } from './slider-label/index';
31
- import { fluentSwitch } from './switch/index';
32
- import { fluentTab, fluentTabPanel, fluentTabs } from './tabs/index';
33
- import { fluentTextArea } from './text-area/index';
34
- import { fluentTextField } from './text-field/index';
35
- import { fluentToolbar } from './toolbar/index';
36
- import { fluentTooltip } from './tooltip/index';
37
- import { fluentTreeView } from './tree-view/index';
38
- import { fluentTreeItem } from './tree-item/index';
39
- export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
40
- /**
41
- * All Fluent UI Web Components
42
- * @public
43
- */
44
- export const allComponents = {
45
- fluentAccordion,
46
- fluentAccordionItem,
47
- fluentAnchor,
48
- fluentAnchoredRegion,
49
- fluentBadge,
50
- fluentBreadcrumb,
51
- fluentBreadcrumbItem,
52
- fluentButton,
53
- fluentCalendar,
54
- fluentCard,
55
- fluentCheckbox,
56
- fluentCombobox,
57
- fluentDataGrid,
58
- fluentDataGridCell,
59
- fluentDataGridRow,
60
- fluentDesignSystemProvider,
61
- fluentDialog,
62
- fluentDivider,
63
- fluentFlipper,
64
- fluentHorizontalScroll,
65
- fluentListbox,
66
- fluentOption,
67
- fluentMenu,
68
- fluentMenuItem,
69
- fluentNumberField,
70
- fluentProgress,
71
- fluentProgressRing,
72
- fluentRadio,
73
- fluentRadioGroup,
74
- fluentSearch,
75
- fluentSelect,
76
- fluentSkeleton,
77
- fluentSlider,
78
- fluentSliderLabel,
79
- fluentSwitch,
80
- fluentTabs,
81
- fluentTab,
82
- fluentTabPanel,
83
- fluentTextArea,
84
- fluentTextField,
85
- fluentToolbar,
86
- fluentTooltip,
87
- fluentTreeView,
88
- fluentTreeItem,
89
- register(container, ...rest) {
90
- if (!container) {
91
- // preserve backward compatibility with code that loops through
92
- // the values of this object and calls them as funcs with no args
93
- return;
94
- }
95
- for (const key in this) {
96
- if (key === 'register') {
97
- continue;
98
- }
99
- this[key]().register(container, ...rest);
100
- }
101
- },
102
- };