@viasat/beam-web-components 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (316) hide show
  1. package/Accordion/Accordion.d.ts +56 -0
  2. package/Accordion/Accordion.js +12 -0
  3. package/Accordion/AccordionGroup.context.d.ts +10 -0
  4. package/Accordion/AccordionGroup.context.js +8 -0
  5. package/Accordion/AccordionGroup.d.ts +33 -0
  6. package/Accordion/AccordionGroup.js +79 -0
  7. package/Accordion/index.d.ts +3 -0
  8. package/Accordion/index.js +6 -0
  9. package/Alert/Alert.d.ts +64 -0
  10. package/Alert/Alert.js +300 -0
  11. package/Alert/index.d.ts +2 -0
  12. package/Alert/index.js +4 -0
  13. package/Avatar/Avatar.d.ts +60 -0
  14. package/Avatar/Avatar.js +12 -0
  15. package/Avatar/AvatarGroup.context.d.ts +11 -0
  16. package/Avatar/AvatarGroup.context.js +8 -0
  17. package/Avatar/AvatarGroup.d.ts +43 -0
  18. package/Avatar/AvatarGroup.js +181 -0
  19. package/Avatar/index.d.ts +3 -0
  20. package/Avatar/index.js +6 -0
  21. package/Badge/Badge.d.ts +40 -0
  22. package/Badge/Badge.js +125 -0
  23. package/Badge/index.d.ts +2 -0
  24. package/Badge/index.js +4 -0
  25. package/BadgeDot/BadgeDot.d.ts +38 -0
  26. package/BadgeDot/BadgeDot.js +59 -0
  27. package/BadgeDot/index.d.ts +2 -0
  28. package/BadgeDot/index.js +4 -0
  29. package/Box/Box.d.ts +99 -0
  30. package/Box/Box.js +115 -0
  31. package/Box/index.d.ts +2 -0
  32. package/Box/index.js +4 -0
  33. package/Breadcrumbs/Breadcrumbs.context.d.ts +10 -0
  34. package/Breadcrumbs/Breadcrumbs.context.js +8 -0
  35. package/Breadcrumbs/Breadcrumbs.d.ts +38 -0
  36. package/Breadcrumbs/Breadcrumbs.js +115 -0
  37. package/Breadcrumbs/BreadcrumbsItem.d.ts +39 -0
  38. package/Breadcrumbs/BreadcrumbsItem.js +13 -0
  39. package/Breadcrumbs/index.d.ts +3 -0
  40. package/Breadcrumbs/index.js +6 -0
  41. package/Button/Button.d.ts +73 -0
  42. package/Button/Button.js +125 -0
  43. package/Button/index.d.ts +2 -0
  44. package/Button/index.js +4 -0
  45. package/CloseButton/CloseButton.d.ts +25 -0
  46. package/CloseButton/CloseButton.js +60 -0
  47. package/CloseButton/index.d.ts +2 -0
  48. package/CloseButton/index.js +4 -0
  49. package/Divider/Divider.d.ts +56 -0
  50. package/Divider/Divider.js +111 -0
  51. package/Divider/index.d.ts +2 -0
  52. package/Divider/index.js +4 -0
  53. package/EmptyState/EmptyState.d.ts +36 -0
  54. package/EmptyState/EmptyState.js +56 -0
  55. package/EmptyState/index.d.ts +2 -0
  56. package/EmptyState/index.js +4 -0
  57. package/HelperText/HelperText.d.ts +45 -0
  58. package/HelperText/HelperText.js +11 -0
  59. package/HelperText/index.d.ts +2 -0
  60. package/HelperText/index.js +4 -0
  61. package/Icon/Icon.d.ts +35 -0
  62. package/Icon/Icon.js +62 -0
  63. package/Icon/index.d.ts +2 -0
  64. package/Icon/index.js +4 -0
  65. package/InputChoiceGroup/InputChoiceGroup.context.d.ts +13 -0
  66. package/InputChoiceGroup/InputChoiceGroup.context.js +8 -0
  67. package/InputChoiceGroup/InputChoiceGroup.d.ts +87 -0
  68. package/InputChoiceGroup/InputChoiceGroup.js +205 -0
  69. package/InputChoiceGroup/index.d.ts +2 -0
  70. package/InputChoiceGroup/index.js +4 -0
  71. package/Link/Link.d.ts +48 -0
  72. package/Link/Link.js +77 -0
  73. package/Link/index.d.ts +2 -0
  74. package/Link/index.js +4 -0
  75. package/List/List.context.d.ts +15 -0
  76. package/List/List.context.js +8 -0
  77. package/List/List.d.ts +43 -0
  78. package/List/List.js +101 -0
  79. package/List/ListItem.d.ts +23 -0
  80. package/List/ListItem.js +90 -0
  81. package/List/index.d.ts +3 -0
  82. package/List/index.js +6 -0
  83. package/ProgressBar/ProgressBar.d.ts +52 -0
  84. package/ProgressBar/ProgressBar.js +128 -0
  85. package/ProgressBar/index.d.ts +2 -0
  86. package/ProgressBar/index.js +4 -0
  87. package/README.md +360 -0
  88. package/SegmentedControl/SegmentedControl.context.d.ts +16 -0
  89. package/SegmentedControl/SegmentedControl.context.js +8 -0
  90. package/SegmentedControl/SegmentedControl.d.ts +41 -0
  91. package/SegmentedControl/SegmentedControl.js +103 -0
  92. package/SegmentedControl/SegmentedControlItem.d.ts +54 -0
  93. package/SegmentedControl/SegmentedControlItem.js +284 -0
  94. package/SegmentedControl/SegmentedControlList.d.ts +23 -0
  95. package/SegmentedControl/SegmentedControlList.js +61 -0
  96. package/SegmentedControl/SegmentedControlPanel.d.ts +21 -0
  97. package/SegmentedControl/SegmentedControlPanel.js +43 -0
  98. package/SegmentedControl/index.d.ts +5 -0
  99. package/SegmentedControl/index.js +10 -0
  100. package/Spinner/Spinner.d.ts +50 -0
  101. package/Spinner/Spinner.js +186 -0
  102. package/Spinner/index.d.ts +2 -0
  103. package/Spinner/index.js +4 -0
  104. package/StateLayer/StateLayer.d.ts +17 -0
  105. package/StateLayer/StateLayer.js +6 -0
  106. package/StateLayer/index.d.ts +2 -0
  107. package/StateLayer/index.js +5 -0
  108. package/Text/Text.d.ts +85 -0
  109. package/Text/Text.js +103 -0
  110. package/Text/index.d.ts +2 -0
  111. package/Text/index.js +4 -0
  112. package/Tooltip/Tooltip.d.ts +139 -0
  113. package/Tooltip/Tooltip.js +1827 -0
  114. package/Tooltip/index.d.ts +2 -0
  115. package/Tooltip/index.js +5 -0
  116. package/chunks/Accordion.DYD3XcAx.js +161 -0
  117. package/chunks/Avatar.C2rfzUGP.js +174 -0
  118. package/chunks/BreadcrumbsItem.4ZR6wbMz.js +121 -0
  119. package/chunks/CSSLookup.BdqZ5Li9.js +106 -0
  120. package/chunks/HelperText.CcVVOtA3.js +108 -0
  121. package/chunks/Upload.B9YEyp7b.js +12 -0
  122. package/chunks/WarningOutlined.DPfQnPPj.js +12 -0
  123. package/chunks/classNames.Cq_tbDRp.js +94 -0
  124. package/chunks/constants.jOWREYQE.js +30 -0
  125. package/chunks/delegate.baxDQosr.js +63 -0
  126. package/chunks/dom.C98AFbJh.js +22 -0
  127. package/chunks/fileUpload.module.kN6o64aL.js +4 -0
  128. package/chunks/globals.Bz4SVF2g.js +4 -0
  129. package/chunks/helpers.AwJwaZvv.js +53 -0
  130. package/chunks/list.module.CZRPBLzy.js +4 -0
  131. package/chunks/register-custom-element.DHGKOhmA.js +17 -0
  132. package/chunks/segmentedControl.module.BPXEWodj.js +4 -0
  133. package/chunks/tokens.CTW8Tt94.js +9 -0
  134. package/custom-elements.json +11341 -0
  135. package/local/Accordion/Accordion.js +12 -0
  136. package/local/Accordion/AccordionGroup.context.js +8 -0
  137. package/local/Accordion/AccordionGroup.js +78 -0
  138. package/local/Accordion/index.js +6 -0
  139. package/local/Alert/Alert.js +301 -0
  140. package/local/Alert/index.js +4 -0
  141. package/local/Avatar/Avatar.js +11 -0
  142. package/local/Avatar/AvatarGroup.context.js +8 -0
  143. package/local/Avatar/AvatarGroup.js +180 -0
  144. package/local/Avatar/index.js +6 -0
  145. package/local/Badge/Badge.js +123 -0
  146. package/local/Badge/index.js +4 -0
  147. package/local/BadgeDot/BadgeDot.js +57 -0
  148. package/local/BadgeDot/index.js +4 -0
  149. package/local/Box/Box.js +113 -0
  150. package/local/Box/index.js +4 -0
  151. package/local/Breadcrumbs/Breadcrumbs.context.js +8 -0
  152. package/local/Breadcrumbs/Breadcrumbs.js +113 -0
  153. package/local/Breadcrumbs/BreadcrumbsItem.js +13 -0
  154. package/local/Breadcrumbs/index.js +6 -0
  155. package/local/Button/Button.js +154 -0
  156. package/local/Button/index.js +4 -0
  157. package/local/CloseButton/CloseButton.js +58 -0
  158. package/local/CloseButton/index.js +4 -0
  159. package/local/Divider/Divider.js +111 -0
  160. package/local/Divider/index.js +4 -0
  161. package/local/EmptyState/EmptyState.js +54 -0
  162. package/local/EmptyState/index.js +4 -0
  163. package/local/HelperText/HelperText.js +9 -0
  164. package/local/HelperText/index.js +4 -0
  165. package/local/Icon/Icon.js +60 -0
  166. package/local/Icon/index.js +4 -0
  167. package/local/InputChoiceGroup/InputChoiceGroup.context.js +8 -0
  168. package/local/InputChoiceGroup/InputChoiceGroup.js +205 -0
  169. package/local/InputChoiceGroup/index.js +4 -0
  170. package/local/Link/Link.js +75 -0
  171. package/local/Link/index.js +4 -0
  172. package/local/List/List.context.js +8 -0
  173. package/local/List/List.js +101 -0
  174. package/local/List/ListItem.js +90 -0
  175. package/local/List/index.js +6 -0
  176. package/local/ProgressBar/ProgressBar.js +126 -0
  177. package/local/ProgressBar/index.js +4 -0
  178. package/local/SegmentedControl/SegmentedControl.context.js +8 -0
  179. package/local/SegmentedControl/SegmentedControl.js +103 -0
  180. package/local/SegmentedControl/SegmentedControlItem.js +284 -0
  181. package/local/SegmentedControl/SegmentedControlList.js +59 -0
  182. package/local/SegmentedControl/SegmentedControlPanel.js +41 -0
  183. package/local/SegmentedControl/index.js +10 -0
  184. package/local/Spinner/Spinner.js +185 -0
  185. package/local/Spinner/index.js +4 -0
  186. package/local/StateLayer/StateLayer.js +6 -0
  187. package/local/StateLayer/index.js +5 -0
  188. package/local/Text/Text.js +121 -0
  189. package/local/Text/index.js +4 -0
  190. package/local/Tooltip/Tooltip.js +1826 -0
  191. package/local/Tooltip/index.js +5 -0
  192. package/local/chunks/Accordion.PGU7OILE.js +161 -0
  193. package/local/chunks/Avatar.CvTOzaRT.js +172 -0
  194. package/local/chunks/BreadcrumbsItem.GM6sBp_o.js +121 -0
  195. package/local/chunks/CSSLookup.BdqZ5Li9.js +106 -0
  196. package/local/chunks/Upload.B9YEyp7b.js +12 -0
  197. package/local/chunks/WarningOutlined.DPfQnPPj.js +12 -0
  198. package/local/chunks/base.D76d76ww.js +9 -0
  199. package/local/chunks/classNames.C6fNrXWF.js +106 -0
  200. package/local/chunks/constants.jOWREYQE.js +30 -0
  201. package/local/chunks/consume.Ce9k1-wN.js +47 -0
  202. package/local/chunks/context-request-event.Bl9Vpkzl.js +13 -0
  203. package/local/chunks/create-context.DS1OG3vJ.js +11 -0
  204. package/local/chunks/delegate.baxDQosr.js +63 -0
  205. package/local/chunks/directive.kLG6oqUu.js +27 -0
  206. package/local/chunks/dom.C98AFbJh.js +22 -0
  207. package/local/chunks/fileUpload.module.kN6o64aL.js +4 -0
  208. package/local/chunks/globals.Bz4SVF2g.js +4 -0
  209. package/local/chunks/helpers.BWcXAteC.js +53 -0
  210. package/local/chunks/index.Bz1Jq4c2.js +106 -0
  211. package/local/chunks/list.module.CZRPBLzy.js +4 -0
  212. package/local/chunks/lit-element.CJtt9wj5.js +557 -0
  213. package/local/chunks/provide.i2FlUkOu.js +110 -0
  214. package/local/chunks/query-assigned-elements.Drkgpk9q.js +19 -0
  215. package/local/chunks/query-assigned-nodes.Dgvsf6BR.js +19 -0
  216. package/local/chunks/query.lbpOn5CD.js +20 -0
  217. package/local/chunks/ref.B7e1Hu4F.js +107 -0
  218. package/local/chunks/register-custom-element.vod7zfGv.js +51 -0
  219. package/local/chunks/segmentedControl.module.BPXEWodj.js +4 -0
  220. package/local/chunks/state.CqiuSzAl.js +12 -0
  221. package/local/chunks/tokens.CTW8Tt94.js +9 -0
  222. package/local/chunks/unsafe-html.BzhXEygn.js +27 -0
  223. package/local/chunks/unsafe-svg.HSGf1NCU.js +14 -0
  224. package/local/wip/Checkbox/Checkbox.js +102 -0
  225. package/local/wip/Checkbox/CheckboxGroup/CheckboxGroup.js +27 -0
  226. package/local/wip/Checkbox/index.js +6 -0
  227. package/local/wip/FileUpload/FileUpload.Button.js +75 -0
  228. package/local/wip/FileUpload/FileUpload.Dropzone.js +149 -0
  229. package/local/wip/FileUpload/FileUpload.List.Item.js +201 -0
  230. package/local/wip/FileUpload/FileUpload.List.js +105 -0
  231. package/local/wip/FileUpload/FileUpload.js +452 -0
  232. package/local/wip/FileUpload/FileUploadContext.js +8 -0
  233. package/local/wip/FileUpload/FileUploadListContext.js +8 -0
  234. package/local/wip/FileUpload/index.js +13 -0
  235. package/local/wip/Form/Form.context.js +20 -0
  236. package/local/wip/Form/Form.decorator.js +145 -0
  237. package/local/wip/Form/Form.js +288 -0
  238. package/local/wip/Form/Form.utils.js +8 -0
  239. package/local/wip/Form/index.js +7 -0
  240. package/local/wip/Label/Label.js +86 -0
  241. package/local/wip/Label/index.js +4 -0
  242. package/local/wip/NativeSelect/NativeSelect.js +162 -0
  243. package/local/wip/NativeSelect/index.js +4 -0
  244. package/local/wip/RadioButton/RadioButton.js +123 -0
  245. package/local/wip/RadioButton/RadioButtonGroup/RadioButtonGroup.js +96 -0
  246. package/local/wip/RadioButton/index.js +6 -0
  247. package/local/wip/Switch/Switch.js +153 -0
  248. package/local/wip/Switch/SwitchGroup/SwitchGroup.js +15 -0
  249. package/local/wip/Switch/index.js +6 -0
  250. package/local/wip/TextArea/TextArea.js +192 -0
  251. package/local/wip/TextArea/index.js +4 -0
  252. package/local/wip/TextField/TextField.js +169 -0
  253. package/local/wip/TextField/index.js +4 -0
  254. package/package.json +78 -0
  255. package/vscode.css-custom-data.json +6 -0
  256. package/vscode.html-custom-data.json +2704 -0
  257. package/wip/Checkbox/Checkbox.d.ts +55 -0
  258. package/wip/Checkbox/Checkbox.js +104 -0
  259. package/wip/Checkbox/CheckboxGroup/CheckboxGroup.d.ts +11 -0
  260. package/wip/Checkbox/CheckboxGroup/CheckboxGroup.js +27 -0
  261. package/wip/Checkbox/index.d.ts +3 -0
  262. package/wip/Checkbox/index.js +6 -0
  263. package/wip/FileUpload/FileUpload.Button.d.ts +36 -0
  264. package/wip/FileUpload/FileUpload.Button.js +77 -0
  265. package/wip/FileUpload/FileUpload.Dropzone.d.ts +55 -0
  266. package/wip/FileUpload/FileUpload.Dropzone.js +150 -0
  267. package/wip/FileUpload/FileUpload.List.Item.d.ts +62 -0
  268. package/wip/FileUpload/FileUpload.List.Item.js +203 -0
  269. package/wip/FileUpload/FileUpload.List.d.ts +46 -0
  270. package/wip/FileUpload/FileUpload.List.js +106 -0
  271. package/wip/FileUpload/FileUpload.d.ts +101 -0
  272. package/wip/FileUpload/FileUpload.js +451 -0
  273. package/wip/FileUpload/FileUploadContext.d.ts +5 -0
  274. package/wip/FileUpload/FileUploadContext.js +8 -0
  275. package/wip/FileUpload/FileUploadListContext.d.ts +5 -0
  276. package/wip/FileUpload/FileUploadListContext.js +8 -0
  277. package/wip/FileUpload/index.d.ts +6 -0
  278. package/wip/FileUpload/index.js +13 -0
  279. package/wip/Form/Form.context.d.ts +19 -0
  280. package/wip/Form/Form.context.js +20 -0
  281. package/wip/Form/Form.d.ts +50 -0
  282. package/wip/Form/Form.decorator.d.ts +47 -0
  283. package/wip/Form/Form.decorator.js +144 -0
  284. package/wip/Form/Form.js +288 -0
  285. package/wip/Form/Form.utils.d.ts +2 -0
  286. package/wip/Form/Form.utils.js +8 -0
  287. package/wip/Form/index.d.ts +3 -0
  288. package/wip/Form/index.js +7 -0
  289. package/wip/Label/Label.d.ts +43 -0
  290. package/wip/Label/Label.js +87 -0
  291. package/wip/Label/index.d.ts +2 -0
  292. package/wip/Label/index.js +4 -0
  293. package/wip/NativeSelect/NativeSelect.d.ts +69 -0
  294. package/wip/NativeSelect/NativeSelect.js +163 -0
  295. package/wip/NativeSelect/index.d.ts +2 -0
  296. package/wip/NativeSelect/index.js +4 -0
  297. package/wip/RadioButton/RadioButton.d.ts +56 -0
  298. package/wip/RadioButton/RadioButton.js +125 -0
  299. package/wip/RadioButton/RadioButtonGroup/RadioButtonGroup.d.ts +23 -0
  300. package/wip/RadioButton/RadioButtonGroup/RadioButtonGroup.js +96 -0
  301. package/wip/RadioButton/index.d.ts +3 -0
  302. package/wip/RadioButton/index.js +6 -0
  303. package/wip/Switch/Switch.d.ts +62 -0
  304. package/wip/Switch/Switch.js +155 -0
  305. package/wip/Switch/SwitchGroup/SwitchGroup.d.ts +15 -0
  306. package/wip/Switch/SwitchGroup/SwitchGroup.js +15 -0
  307. package/wip/Switch/index.d.ts +3 -0
  308. package/wip/Switch/index.js +6 -0
  309. package/wip/TextArea/TextArea.d.ts +89 -0
  310. package/wip/TextArea/TextArea.js +193 -0
  311. package/wip/TextArea/index.d.ts +2 -0
  312. package/wip/TextArea/index.js +4 -0
  313. package/wip/TextField/TextField.d.ts +70 -0
  314. package/wip/TextField/TextField.js +169 -0
  315. package/wip/TextField/index.d.ts +2 -0
  316. package/wip/TextField/index.js +4 -0
package/README.md ADDED
@@ -0,0 +1,360 @@
1
+ # 🎨 Beam Web Component
2
+
3
+ Beam web components is a library of web components for the Beam Design System. These components are built using [Lit](https://lit.dev/) (a web components library created by Google) and are designed to be used in any web project. 🌎
4
+
5
+ Our library includes support for various formats and stacks to suit different needs, such as:
6
+
7
+ **Frameworks**
8
+
9
+ - **Vanilla JS support**: Incorporate our components in Vanilla JS projects, providing a versatile and adaptable solution for your project.
10
+ - **Angular support**: Utilize our components in Angular projects, ensuring compatibility with your existing stack.
11
+ <br />
12
+ <br />
13
+
14
+ **Importing**
15
+
16
+ - **Importing from NPM**: Easily import and utilize our package directly from NPM, ensuring a seamless integration into your project.
17
+ - **Importing locally**: Download and use our package locally, providing a flexible and customizable approach for your project.
18
+
19
+ ## 🔖 Table of Contents
20
+
21
+ 1. [⬇️ Installation](#⬇️-installation)
22
+ - [📦 NPM Installation](#-npm)
23
+ - [💻 Local Installation (Without npm)](#-local-installation-without-npm)
24
+ 2. [🧠 VS Code IntelliSense Setup](#-vs-code-intellisense-setup)
25
+ 3. [🛠️ Usage](#usage)
26
+ 4. [📚 Documentation](#documentation)
27
+
28
+ ## ⬇️ Installation
29
+
30
+ ### 📦 NPM
31
+
32
+ The easiest and most straightforward way to install `@viasat/beam-web-components` is via NPM.
33
+
34
+ #### 1. Install the package
35
+
36
+ ```bash
37
+ npm install @viasat/beam-web-components
38
+ ```
39
+
40
+ ```bash
41
+ yarn add @viasat/beam-web-components
42
+ ```
43
+
44
+ ```bash
45
+ pnpm add @viasat/beam-web-components
46
+ ```
47
+
48
+ #### 2. Import and use the components
49
+
50
+ > ℹ️ Import the fonts and tokens at the root of your application and import each component per page to ensure bundlers like webpack and rollup can optimally code split and tree shake the components.
51
+
52
+ ```ts
53
+ // index.js
54
+ import '@viasat/beam-tokens/styles.css';
55
+ import '@viasat/beam-fonts/styles.css';
56
+
57
+ // my-page.js
58
+ import '@viasat/beam-web-components/Alert';
59
+ ```
60
+
61
+ <br >
62
+
63
+ ### 💻 Local Installation (Without npm)
64
+
65
+ For airgapped (no internet access) environments or when you need to vendor the files directly without a package manager, you can use the pre-bundled web components build.
66
+
67
+ > ⚠️ **Note**: This approach is for special scenarios only. If you have npm/artifactory access, use the [NPM installation method](#-npm) instead - it's simpler and handles dependencies automatically.
68
+
69
+ #### 1. Download the bundled package
70
+
71
+ Contact your Beam administrator or download directly from npm registry:
72
+
73
+ ```bash
74
+ npm pack @viasat/beam-web-components
75
+ ```
76
+
77
+ This downloads the package as `beam-web-components-[VERSION].tgz`. The bundled version includes all dependencies (lit, floating-ui, etc.) pre-compiled into the output.
78
+
79
+ #### 2. Extract web-components to your project
80
+
81
+ ```bash
82
+ mkdir -p vendor/@viasat/beam-web-components
83
+ tar -xvf beam-web-components-[VERSION].tgz -C vendor/@viasat/beam-web-components/ --strip-components=1
84
+ ```
85
+
86
+ The bundled components are in the `local/` directory.
87
+
88
+ #### 3. Download and extract tokens and fonts
89
+
90
+ ```bash
91
+ # Download and extract tokens
92
+ npm pack @viasat/beam-tokens
93
+ mkdir -p vendor/@viasat/beam-tokens
94
+ tar -xvf beam-tokens-[VERSION].tgz -C vendor/@viasat/beam-tokens/ --strip-components=1
95
+
96
+ # Download and extract fonts
97
+ npm pack @viasat/beam-fonts
98
+ mkdir -p vendor/@viasat/beam-fonts
99
+ tar -xvf beam-fonts-[VERSION].tgz -C vendor/@viasat/beam-fonts/ --strip-components=1
100
+ ```
101
+
102
+ **Expected Directory Structure:**
103
+
104
+ ```
105
+ vendor/
106
+ └── @viasat/
107
+ ├── beam-web-components/
108
+ │ ├── local/ # Bundled components (use these)
109
+ │ │ ├── Alert/
110
+ │ │ │ └── Alert.js
111
+ │ │ ├── Button/
112
+ │ │ ├── Badge/
113
+ │ │ ├── chunks/ # Shared code chunks
114
+ │ │ └── ...
115
+ │ └── package.json
116
+ ├── tokens/
117
+ │ └── tokens.css # Design tokens CSS
118
+ └── fonts/
119
+ └── styles.css # Font styles
120
+ ```
121
+
122
+ #### 4. Use in your HTML
123
+
124
+ ```html
125
+ <!DOCTYPE html>
126
+ <html lang="en">
127
+ <head>
128
+ <title>My Web Page</title>
129
+ <meta charset="UTF-8" />
130
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
131
+
132
+ <!-- Import Tokens -->
133
+ <link rel="stylesheet" href="vendor/@viasat/beam-tokens/tokens.css" />
134
+
135
+ <!-- Import Fonts -->
136
+ <link rel="stylesheet" href="vendor/@viasat/beam-fonts/styles.css" />
137
+ </head>
138
+ <body>
139
+ <!-- Use the component -->
140
+ <bm-alert body="My alert message" header="Alert Title" dismissible></bm-alert>
141
+
142
+ <!-- Import component from local build (place at end of body) -->
143
+ <script
144
+ type="module"
145
+ src="vendor/@viasat/beam-web-components/local/Alert/Alert.js"
146
+ ></script>
147
+ </body>
148
+ </html>
149
+ ```
150
+
151
+ #### Dependencies
152
+
153
+ The bundled local build includes all JavaScript dependencies pre-compiled:
154
+
155
+ **Bundled Dependencies** (included in the local build):
156
+
157
+ - ✅ `lit` - Web components framework
158
+ - ✅ `@lit/context` - Context API for Lit
159
+ - ✅ `@floating-ui/dom` & `@floating-ui/utils` - Positioning utilities
160
+ - ✅ `clsx` - Class name utility
161
+ - ✅ `@viasat/beam-shared`, `@viasat/beam-styles`, `@viasat/beam-icons` - Beam internal packages
162
+
163
+ **Required Packages** (must be downloaded separately - see step 3):
164
+
165
+ - `@viasat/beam-tokens` - Design tokens (CSS variables)
166
+ - `@viasat/beam-fonts` - Typography assets
167
+
168
+ ## 🧠 VS Code IntelliSense Setup
169
+
170
+ Enable intelligent autocomplete in VS Code for Beam web components, including component names, attributes, and their valid values.
171
+
172
+ ### 1. Configure VS Code Settings
173
+
174
+ Add the custom data files to your workspace settings (`.vscode/settings.json`):
175
+
176
+ **For NPM installations:**
177
+
178
+ ```json
179
+ {
180
+ "html.customData": [
181
+ "node_modules/@viasat/beam-web-components/vscode.html-custom-data.json"
182
+ ],
183
+ "css.customData": [
184
+ "node_modules/@viasat/beam-web-components/vscode.css-custom-data.json"
185
+ ]
186
+ }
187
+ ```
188
+
189
+ **For local/vendored installations:**
190
+
191
+ ```json
192
+ {
193
+ "html.customData": [
194
+ "vendor/@viasat/beam-web-components/vscode.html-custom-data.json"
195
+ ],
196
+ "css.customData": [
197
+ "vendor/@viasat/beam-web-components/vscode.css-custom-data.json"
198
+ ]
199
+ }
200
+ ```
201
+
202
+ ### 2. Reload VS Code
203
+
204
+ Reload your VS Code window to activate IntelliSense:
205
+
206
+ - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
207
+ - Type "Reload Window" and press Enter
208
+
209
+ ### What You Get
210
+
211
+ **Component Autocomplete:**
212
+
213
+ - Type `<bm-` to see all available Beam components
214
+ - See component descriptions while typing
215
+
216
+ **Attribute Suggestions:**
217
+
218
+ - Get autocomplete for all component attributes
219
+ - See valid values for each attribute (e.g., `appearance="infoPrimary | infoSecondary | positive | warning | negative"`)
220
+ - View attribute descriptions and types
221
+
222
+ ### Updating IntelliSense
223
+
224
+ When you upgrade `@viasat/beam-web-components`, the custom data files are automatically updated in `node_modules`. Simply reload VS Code to pick up the latest component definitions:
225
+
226
+ - Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
227
+ - Type "Reload Window" and press Enter
228
+
229
+ ## 🛠️ Usage
230
+
231
+ Explore our component library with live examples and API documentation in our **[Storybook](https://web-components.beam.viasat.com/)**.
232
+
233
+ ### Component Attributes & Properties
234
+
235
+ Web components accept attributes in HTML and properties via JavaScript:
236
+
237
+ ```html
238
+ <!-- Using attributes -->
239
+ <bm-button appearance="primary" size="lg" disabled>Button Text</bm-button>
240
+
241
+ <script type="module">
242
+ import '@viasat/beam-web-components/Button';
243
+
244
+ // Using properties
245
+ const button = document.querySelector('bm-button');
246
+ button.appearance = 'secondary';
247
+ button.disabled = false;
248
+ </script>
249
+ ```
250
+
251
+ ### Component Events
252
+
253
+ Listen for custom events using standard DOM event listeners:
254
+
255
+ ```javascript
256
+ import '@viasat/beam-web-components/Alert';
257
+
258
+ const alert = document.querySelector('bm-alert');
259
+ alert.addEventListener('bm-dismiss', event => {
260
+ console.log('Alert was dismissed');
261
+ });
262
+ ```
263
+
264
+ ### Component Slots
265
+
266
+ Many components support content slots for flexible composition:
267
+
268
+ ```html
269
+ <bm-alert appearance="infoPrimary" dismissible>
270
+ <div slot="header">Custom Alert Header</div>
271
+ <div slot="body">
272
+ <p>This is custom alert content using slots.</p>
273
+ <p>You can add any HTML content here!</p>
274
+ </div>
275
+ </bm-alert>
276
+ ```
277
+
278
+ ### Tree-shaking & Optimization
279
+
280
+ Import only the components you need for optimal bundle size:
281
+
282
+ ```js
283
+ // ✅ Recommended: Import individual components
284
+ import '@viasat/beam-web-components/Alert';
285
+ import '@viasat/beam-web-components/Button';
286
+
287
+ // ⚠️ Avoid: Importing the entire library loads ALL components
288
+ import '@viasat/beam-web-components';
289
+ ```
290
+
291
+ ### Framework Integration
292
+
293
+ #### Angular
294
+
295
+ ```typescript
296
+ // In your component
297
+ import '@viasat/beam-web-components/Button';
298
+
299
+ // In your template
300
+ <bm-button appearance="primary" (click)="handleClick()">
301
+ Angular Button
302
+ </bm-button>
303
+ ```
304
+
305
+ > ℹ️ For advanced Angular integration including wrappers, two-way binding, and best practices, see the [Angular Guide](https://web-components.beam.viasat.com/?path=/docs/concepts-angular--docs).
306
+
307
+ ### Theming
308
+
309
+ Apply themes using CSS classes on your root element:
310
+
311
+ ```html
312
+ <!-- Light theme -->
313
+ <div class="bm-light">
314
+ <bm-button>Light Theme Button</bm-button>
315
+ </div>
316
+
317
+ <!-- Dark theme -->
318
+ <div class="bm-dark">
319
+ <bm-button>Dark Theme Button</bm-button>
320
+ </div>
321
+
322
+ <!-- Accent theme -->
323
+ <div class="bm-light bm-blue">
324
+ <bm-button>Blue Accent Button</bm-button>
325
+ </div>
326
+ ```
327
+
328
+ > ℹ️ For advanced theming documentation and use cases, see the [Theming Guide](https://web-components.beam.viasat.com/?path=/docs/concepts-theming--docs).
329
+
330
+ ### Accessibility
331
+
332
+ All components are built with accessibility in mind:
333
+
334
+ - **ARIA Support** - Proper ARIA labels and roles
335
+ - **Keyboard Navigation** - Full keyboard support
336
+ - **Screen Reader Support** - Semantic markup and announcements
337
+ - **Focus Management** - Proper focus handling and trapping
338
+
339
+ ## Documentation
340
+
341
+ ### Storybook
342
+
343
+ Explore our comprehensive component library with live examples and API documentation:
344
+
345
+ **📖 [Beam Web Components Storybook](https://web-components.beam.viasat.com/)**
346
+
347
+ #### Component API
348
+
349
+ Each component includes:
350
+
351
+ - **Props Documentation** - Complete TypeScript definitions
352
+ - **Usage Examples** - Common patterns and configurations
353
+ - **Accessibility Notes** - ARIA labels, keyboard navigation, screen reader support
354
+ - **Theming Options** - Available variants and customization points
355
+
356
+ ### Additional Resources
357
+
358
+ - **Design Tokens** - [@viasat/beam-tokens](https://www.npmjs.com/package/@viasat/beam-tokens)
359
+ - **Icon Library** - [@viasat/beam-icons](https://www.npmjs.com/package/@viasat/beam-icons)
360
+ - **Typography** - [@viasat/beam-fonts](https://www.npmjs.com/package/@viasat/beam-fonts)
package/SegmentedControl/SegmentedControl.context.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { SegmentedControlSize } from '@viasat/beam-shared/components/SegmentedControl';
2
+ import { BmSegmentedControlItem } from './SegmentedControlItem';
3
+ export interface SegmentedControlContext {
4
+ disabled?: boolean;
5
+ size?: SegmentedControlSize;
6
+ selectedValue?: string;
7
+ initialSelection?: string;
8
+ fluid?: boolean;
9
+ register: (el: BmSegmentedControlItem) => void;
10
+ unregister: (el: BmSegmentedControlItem) => void;
11
+ registeredItems: BmSegmentedControlItem[];
12
+ }
13
+ export declare const segmentedControlContext: {
14
+ __context__: SegmentedControlContext;
15
+ };
16
+ //# sourceMappingURL=SegmentedControl.context.d.ts.map
package/SegmentedControl/SegmentedControl.context.js ADDED
@@ -0,0 +1,8 @@
1
+ import { createContext as o } from "@lit/context";
2
+ import { p as t } from "../chunks/constants.jOWREYQE.js";
3
+ const n = o(
4
+ Symbol(`${t}segmented-control-group-context`)
5
+ );
6
+ export {
7
+ n as segmentedControlContext
8
+ };
package/SegmentedControl/SegmentedControl.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ import { LitElement, PropertyValues } from 'lit';
2
+ import { SegmentedControlContext } from './SegmentedControl.context';
3
+ /**
4
+ * `bm-segmented-control`
5
+ *
6
+ * @fires bm-change - Dispatched when a `SegmentedControlItem` is selected, with the selected value in the `detail` property
7
+ */
8
+ export declare class BmSegmentedControl extends LitElement {
9
+ #private;
10
+ static styles: import('lit').CSSResult;
11
+ /**
12
+ * Specify if all SegmentedControl items are disabled
13
+ * @default false
14
+ */
15
+ disabled?: boolean;
16
+ /**
17
+ * Specify the size of a SegmentedControl
18
+ * @default 'md'
19
+ */
20
+ size?: string;
21
+ /**
22
+ * Specify the value of the initially selected item
23
+ */
24
+ initialSelection?: string;
25
+ /**
26
+ * Specify if the SegmentedControl is fluid with its parent container
27
+ * @default false
28
+ */
29
+ fluid?: boolean;
30
+ segmentedControlContext: SegmentedControlContext;
31
+ constructor();
32
+ firstUpdated(): void;
33
+ willUpdate(changedProperties: PropertyValues): void;
34
+ render(): import('lit-html').TemplateResult<1>;
35
+ }
36
+ declare global {
37
+ interface HTMLElementTagNameMap {
38
+ 'bm-segmented-control': BmSegmentedControl;
39
+ }
40
+ }
41
+ //# sourceMappingURL=SegmentedControl.d.ts.map
package/SegmentedControl/SegmentedControl.js ADDED
@@ -0,0 +1,103 @@
1
+ import { provide as y } from "@lit/context";
2
+ import { unsafeCSS as x, LitElement as b, html as w } from "lit";
3
+ import { property as m, state as E } from "lit/decorators.js";
4
+ import { g as z } from "../chunks/classNames.Cq_tbDRp.js";
5
+ import "../chunks/constants.jOWREYQE.js";
6
+ import { s as B } from "../chunks/segmentedControl.module.BPXEWodj.js";
7
+ import { c as I } from "../chunks/register-custom-element.DHGKOhmA.js";
8
+ import { segmentedControlContext as O } from "./SegmentedControl.context.js";
9
+ import "./SegmentedControlItem.js";
10
+ import "./SegmentedControlList.js";
11
+ import "./SegmentedControlPanel.js";
12
+ var V = Object.defineProperty, A = Object.getOwnPropertyDescriptor, C = (t) => {
13
+ throw TypeError(t);
14
+ }, a = (t, e, i, h) => {
15
+ for (var n = h > 1 ? void 0 : h ? A(e, i) : e, p = t.length - 1, f; p >= 0; p--)
16
+ (f = t[p]) && (n = (h ? f(e, i, n) : f(n)) || n);
17
+ return h && n && V(e, i, n), n;
18
+ }, _ = (t, e, i) => e.has(t) || C("Cannot " + i), c = (t, e, i) => (_(t, e, "read from private field"), e.get(t)), g = (t, e, i) => e.has(t) ? C("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), o = (t, e, i) => (_(t, e, "access private method"), i), l, s, S, u, v, d;
19
+ const { baseClassNamePrefix: M } = z("segmented-control");
20
+ let r = class extends b {
21
+ constructor() {
22
+ super(), g(this, s), g(this, l, /* @__PURE__ */ new Set()), this.segmentedControlContext = {
23
+ disabled: void 0,
24
+ size: void 0,
25
+ selectedValue: void 0,
26
+ initialSelection: void 0,
27
+ fluid: void 0,
28
+ register: (t) => o(this, s, u).call(this, t),
29
+ unregister: (t) => o(this, s, v).call(this, t),
30
+ registeredItems: Array.from(c(this, l))
31
+ }, this.addEventListener("bm-selected", o(this, s, S));
32
+ }
33
+ firstUpdated() {
34
+ o(this, s, d).call(this);
35
+ }
36
+ willUpdate(t) {
37
+ (t.has("disabled") || t.has("size") || t.has("initialSelection") || t.has("fluid")) && o(this, s, d).call(this);
38
+ }
39
+ render() {
40
+ return w`
41
+ <div class=${M}>
42
+ <slot></slot>
43
+ </div>
44
+ `;
45
+ }
46
+ };
47
+ l = /* @__PURE__ */ new WeakMap();
48
+ s = /* @__PURE__ */ new WeakSet();
49
+ S = function(t) {
50
+ const { value: e } = t.detail;
51
+ t.target.focus(), this.segmentedControlContext = {
52
+ ...this.segmentedControlContext,
53
+ selectedValue: e
54
+ }, this.dispatchEvent(
55
+ new CustomEvent("bm-change", {
56
+ detail: { value: e },
57
+ bubbles: !0,
58
+ composed: !0
59
+ })
60
+ );
61
+ };
62
+ u = function(t) {
63
+ c(this, l).add(t), o(this, s, d).call(this);
64
+ };
65
+ v = function(t) {
66
+ c(this, l).delete(t), o(this, s, d).call(this);
67
+ };
68
+ d = function() {
69
+ var t;
70
+ this.segmentedControlContext = {
71
+ disabled: this.disabled || !1,
72
+ size: this.size || "md",
73
+ selectedValue: ((t = this.segmentedControlContext) == null ? void 0 : t.selectedValue) ?? this.initialSelection,
74
+ initialSelection: this.initialSelection,
75
+ fluid: this.fluid || !1,
76
+ register: (e) => o(this, s, u).call(this, e),
77
+ unregister: (e) => o(this, s, v).call(this, e),
78
+ registeredItems: Array.from(c(this, l))
79
+ };
80
+ };
81
+ r.styles = x(B);
82
+ a([
83
+ m({ type: Boolean })
84
+ ], r.prototype, "disabled", 2);
85
+ a([
86
+ m({ type: String })
87
+ ], r.prototype, "size", 2);
88
+ a([
89
+ m({ type: String })
90
+ ], r.prototype, "initialSelection", 2);
91
+ a([
92
+ m({ type: Boolean })
93
+ ], r.prototype, "fluid", 2);
94
+ a([
95
+ y({ context: O }),
96
+ E()
97
+ ], r.prototype, "segmentedControlContext", 2);
98
+ r = a([
99
+ I("bm-segmented-control")
100
+ ], r);
101
+ export {
102
+ r as BmSegmentedControl
103
+ };
package/SegmentedControl/SegmentedControlItem.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ import { LitElement, PropertyValues } from 'lit';
2
+ import { SegmentedControlContext } from './SegmentedControl.context';
3
+ declare const BmSegmentedControlItem_base: import('../../utils/mixins/types').Constructor<import('../../utils/mixins/TooltipHandler').TooltipHandlerInterface> & typeof LitElement;
4
+ /**
5
+ *
6
+ * @fires bm-selected - Dispatched when the item is selected
7
+ *
8
+ * @slot icon - Specify an icon for the item
9
+ * @slot default - Specify the text content of the item
10
+ */
11
+ export declare class BmSegmentedControlItem extends BmSegmentedControlItem_base {
12
+ static styles: import('lit').CSSResult[];
13
+ /**
14
+ * Specify the value of the item
15
+ */
16
+ value: string;
17
+ /**
18
+ * Specify if this item is disabled
19
+ * @default false
20
+ */
21
+ disabled: boolean;
22
+ private isDisabled;
23
+ private hasDefaultSlotContent;
24
+ private getDefaultSlotElement;
25
+ private selected;
26
+ private isContentOverflowing;
27
+ private hasIcon;
28
+ private hasContent;
29
+ segmentedControlContext: SegmentedControlContext | undefined;
30
+ private _contentRef?;
31
+ private _overflowObserver?;
32
+ firstUpdated(): void;
33
+ connectedCallback(): void;
34
+ disconnectedCallback(): void;
35
+ willUpdate(changedProperties: PropertyValues): void;
36
+ shouldShowTooltip(): boolean;
37
+ getTooltipText(): string;
38
+ private handleKeyDown;
39
+ private focusItemWithValue;
40
+ private handleClick;
41
+ private setupOverflowObserver;
42
+ private cleanupOverflowObserver;
43
+ private findNextEnabledItem;
44
+ private dispatchItemSelectedEvent;
45
+ private getClassName;
46
+ render(): import('lit-html').TemplateResult<1>;
47
+ }
48
+ declare global {
49
+ interface HTMLElementTagNameMap {
50
+ 'bm-segmented-control-item': BmSegmentedControlItem;
51
+ }
52
+ }
53
+ export {};
54
+ //# sourceMappingURL=SegmentedControlItem.d.ts.map