@spectrum-web-components/bundle 1.10.0 → 1.11.0-preview-b6b1becb.20251121200357

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 (2) hide show
  1. package/README.md +56 -14
  2. package/package.json +75 -75
package/README.md CHANGED
@@ -1,37 +1,67 @@
1
- ## Description
1
+ ## Overview
2
2
 
3
- `@spectrum-web-components/bundle` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collectively means that depending on it can leave you with a lot of package updates to manage at any one version change. For a more predictable upgrade process we suggest that you depend upon individual packages directly, but hope you find this bundle productive when initially trying to get into the act of developing with Spectrum Web Components!
3
+ `@spectrum-web-components/bundle` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that it versions all of the Spectrum Web Components packages collectively means that depending on it can leave you with a lot of package updates to manage at any one version change. For a more predictable upgrade process we suggest that you depend upon individual packages directly, but hope you find this bundle productive when initially trying to get into the act of developing with Spectrum Web Components.
4
4
 
5
5
  ### Usage
6
6
 
7
7
  [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bundle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bundle)
8
8
  [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bundle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bundle)
9
9
 
10
- ```
10
+ ```bash
11
11
  yarn add @spectrum-web-components/bundle
12
12
  ```
13
13
 
14
14
  Import the side effectful registrations of the bundled components:
15
15
 
16
- ```
16
+ ```javascript
17
17
  import '@spectrum-web-components/bundle/elements.js';
18
18
  ```
19
19
 
20
20
  When looking to leverage their base classes as a type and/or for extension purposes, do so via something like the following for the `ActionButton` base class:
21
21
 
22
- ```
22
+ ```javascript
23
23
  import { ActionButton } from '@spectrum-web-components/bundle';
24
24
  ```
25
25
 
26
- ### Icons
26
+ ### Anatomy
27
+
28
+ The bundle consists of several key parts:
29
+
30
+ - All Spectrum Web Component elements registrations
31
+ - Base classes for all components available for type checking and extension
32
+ - Namespaced icon exports for UI and workflow icons (e.g., `UIIcons`, `WorkflowIcons`)
33
+
34
+ ### Options
27
35
 
28
- While this bundle directly re-exports the majority of functionality as they would be exported from their own packages, icon packages that export template literals are handled a little different. Due to the large number of exports that they feature, each of these packages are namespaced when included in the bundle.
36
+ #### Component Registration
29
37
 
30
- #### UI
38
+ Import all component registrations at once for rapid prototyping:
31
39
 
32
- `@spectrum-web-components/icons-ui` is renamed to `UIIcons` when leveraging the bundle. This means that you can use workflow icons in your demonstration code by importing them from `@spectrum-web-components/bundle/icons.js` like the following:
40
+ ```javascript
41
+ import '@spectrum-web-components/bundle/elements.js';
42
+ ```
43
+
44
+ This registers all available Spectrum Web Components for use in your application.
33
45
 
46
+ #### Type Imports
47
+
48
+ Import individual component classes for type checking and extension purposes:
49
+
50
+ ```javascript
51
+ import { ActionButton, Button, Tooltip } from '@spectrum-web-components/bundle';
34
52
  ```
53
+
54
+ ### Behaviors
55
+
56
+ #### Icon Handling
57
+
58
+ While this bundle directly re-exports the majority of functionality as they would be exported from their own packages, icon packages that export template literals are handled differently. Due to the large number of exports that they feature, each of these packages is namespaced when included in the bundle.
59
+
60
+ ##### UI Icons
61
+
62
+ `@spectrum-web-components/icons-ui` is renamed to `UIIcons` when leveraging the bundle. This means that you can use UI icons in your code by importing them from `@spectrum-web-components/bundle/icons.js`:
63
+
64
+ ```javascript
35
65
  import { UIIcons } from '@spectrum-web-components/bundle/icons.js';
36
66
 
37
67
  console.log(UIIcons.AsteriskIcon());
@@ -41,16 +71,28 @@ TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: De
41
71
  ***/
42
72
  ```
43
73
 
44
- #### Workflow
74
+ ##### Workflow Icons
45
75
 
46
- `@spectrum-web-components/icons-workflow` is namespaced to `WorkflowIcons` when leveraging the bundle. This means that you can use workflow icons in your demonstration code by importing them from `@spectrum-web-components/bundle/icons.js` like the following:
76
+ `@spectrum-web-components/icons-workflow` is namespaced to `WorkflowIcons` when leveraging the bundle. This means that you can use workflow icons in your code by importing them from `@spectrum-web-components/bundle/icons.js`:
47
77
 
48
- ```
49
- import { IconsWorkflow } from '@spectrum-web-components/bundle/icons.js';
78
+ ```javascript
79
+ import { WorkflowIcons } from '@spectrum-web-components/bundle/icons.js';
50
80
 
51
- console.log(IconsWorkflow.CircleIcon());
81
+ console.log(WorkflowIcons.CircleIcon());
52
82
 
53
83
  /***
54
84
  TemplateResult {strings: Array[1], values: Array[0], type: "html", processor: DefaultTemplateProcessor, constructor: Object}
55
85
  ***/
56
86
  ```
87
+
88
+ #### Version Management
89
+
90
+ The bundle versions all Spectrum Web Components packages collectively. This means:
91
+
92
+ - A single version bump updates all components simultaneously
93
+ - You may receive updates for components you're not actively using
94
+ - For production applications, consider depending on individual packages for more granular control
95
+
96
+ ### Accessibility
97
+
98
+ All components included in the bundle follow WCAG accessibility guidelines. Each component maintains its own accessibility features as documented in their individual package documentation. Refer to the specific component documentation pages for detailed accessibility information.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/bundle",
3
- "version": "1.10.0",
3
+ "version": "1.11.0-preview-b6b1becb.20251121200357",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -66,80 +66,80 @@
66
66
  "css"
67
67
  ],
68
68
  "dependencies": {
69
- "@spectrum-web-components/accordion": "1.10.0",
70
- "@spectrum-web-components/action-bar": "1.10.0",
71
- "@spectrum-web-components/action-button": "1.10.0",
72
- "@spectrum-web-components/action-group": "1.10.0",
73
- "@spectrum-web-components/action-menu": "1.10.0",
74
- "@spectrum-web-components/alert-banner": "1.10.0",
75
- "@spectrum-web-components/asset": "1.10.0",
76
- "@spectrum-web-components/avatar": "1.10.0",
77
- "@spectrum-web-components/badge": "1.10.0",
78
- "@spectrum-web-components/base": "1.10.0",
79
- "@spectrum-web-components/breadcrumbs": "1.10.0",
80
- "@spectrum-web-components/button": "1.10.0",
81
- "@spectrum-web-components/button-group": "1.10.0",
82
- "@spectrum-web-components/card": "1.10.0",
83
- "@spectrum-web-components/checkbox": "1.10.0",
84
- "@spectrum-web-components/clear-button": "1.10.0",
85
- "@spectrum-web-components/close-button": "1.10.0",
86
- "@spectrum-web-components/coachmark": "1.10.0",
87
- "@spectrum-web-components/color-area": "1.10.0",
88
- "@spectrum-web-components/color-field": "1.10.0",
89
- "@spectrum-web-components/color-handle": "1.10.0",
90
- "@spectrum-web-components/color-loupe": "1.10.0",
91
- "@spectrum-web-components/color-slider": "1.10.0",
92
- "@spectrum-web-components/color-wheel": "1.10.0",
93
- "@spectrum-web-components/combobox": "1.10.0",
94
- "@spectrum-web-components/contextual-help": "1.10.0",
95
- "@spectrum-web-components/dialog": "1.10.0",
96
- "@spectrum-web-components/divider": "1.10.0",
97
- "@spectrum-web-components/dropzone": "1.10.0",
98
- "@spectrum-web-components/field-group": "1.10.0",
99
- "@spectrum-web-components/field-label": "1.10.0",
100
- "@spectrum-web-components/grid": "1.10.0",
101
- "@spectrum-web-components/help-text": "1.10.0",
102
- "@spectrum-web-components/icon": "1.10.0",
103
- "@spectrum-web-components/icons": "1.10.0",
104
- "@spectrum-web-components/icons-ui": "1.10.0",
105
- "@spectrum-web-components/icons-workflow": "1.10.0",
106
- "@spectrum-web-components/iconset": "1.10.0",
107
- "@spectrum-web-components/illustrated-message": "1.10.0",
108
- "@spectrum-web-components/infield-button": "1.10.0",
109
- "@spectrum-web-components/link": "1.10.0",
110
- "@spectrum-web-components/menu": "1.10.0",
111
- "@spectrum-web-components/meter": "1.10.0",
112
- "@spectrum-web-components/modal": "1.10.0",
113
- "@spectrum-web-components/number-field": "1.10.0",
114
- "@spectrum-web-components/overlay": "1.10.0",
115
- "@spectrum-web-components/picker": "1.10.0",
116
- "@spectrum-web-components/picker-button": "1.10.0",
117
- "@spectrum-web-components/popover": "1.10.0",
118
- "@spectrum-web-components/progress-bar": "1.10.0",
119
- "@spectrum-web-components/progress-circle": "1.10.0",
120
- "@spectrum-web-components/radio": "1.10.0",
121
- "@spectrum-web-components/reactive-controllers": "1.10.0",
122
- "@spectrum-web-components/search": "1.10.0",
123
- "@spectrum-web-components/shared": "1.10.0",
124
- "@spectrum-web-components/sidenav": "1.10.0",
125
- "@spectrum-web-components/slider": "1.10.0",
126
- "@spectrum-web-components/split-view": "1.10.0",
127
- "@spectrum-web-components/status-light": "1.10.0",
128
- "@spectrum-web-components/styles": "1.10.0",
129
- "@spectrum-web-components/swatch": "1.10.0",
130
- "@spectrum-web-components/switch": "1.10.0",
131
- "@spectrum-web-components/table": "1.10.0",
132
- "@spectrum-web-components/tabs": "1.10.0",
133
- "@spectrum-web-components/tags": "1.10.0",
134
- "@spectrum-web-components/textfield": "1.10.0",
135
- "@spectrum-web-components/theme": "1.10.0",
136
- "@spectrum-web-components/thumbnail": "1.10.0",
137
- "@spectrum-web-components/toast": "1.10.0",
138
- "@spectrum-web-components/tooltip": "1.10.0",
139
- "@spectrum-web-components/top-nav": "1.10.0",
140
- "@spectrum-web-components/tray": "1.10.0",
141
- "@spectrum-web-components/truncated": "1.10.0",
142
- "@spectrum-web-components/underlay": "1.10.0"
69
+ "@spectrum-web-components/accordion": "1.11.0-preview-b6b1becb.20251121200357",
70
+ "@spectrum-web-components/action-bar": "1.11.0-preview-b6b1becb.20251121200357",
71
+ "@spectrum-web-components/action-button": "1.11.0-preview-b6b1becb.20251121200357",
72
+ "@spectrum-web-components/action-group": "1.11.0-preview-b6b1becb.20251121200357",
73
+ "@spectrum-web-components/action-menu": "1.11.0-preview-b6b1becb.20251121200357",
74
+ "@spectrum-web-components/alert-banner": "1.11.0-preview-b6b1becb.20251121200357",
75
+ "@spectrum-web-components/asset": "1.11.0-preview-b6b1becb.20251121200357",
76
+ "@spectrum-web-components/avatar": "1.11.0-preview-b6b1becb.20251121200357",
77
+ "@spectrum-web-components/badge": "1.11.0-preview-b6b1becb.20251121200357",
78
+ "@spectrum-web-components/base": "1.11.0-preview-b6b1becb.20251121200357",
79
+ "@spectrum-web-components/breadcrumbs": "1.11.0-preview-b6b1becb.20251121200357",
80
+ "@spectrum-web-components/button": "1.11.0-preview-b6b1becb.20251121200357",
81
+ "@spectrum-web-components/button-group": "1.11.0-preview-b6b1becb.20251121200357",
82
+ "@spectrum-web-components/card": "1.11.0-preview-b6b1becb.20251121200357",
83
+ "@spectrum-web-components/checkbox": "1.11.0-preview-b6b1becb.20251121200357",
84
+ "@spectrum-web-components/clear-button": "1.11.0-preview-b6b1becb.20251121200357",
85
+ "@spectrum-web-components/close-button": "1.11.0-preview-b6b1becb.20251121200357",
86
+ "@spectrum-web-components/coachmark": "1.11.0-preview-b6b1becb.20251121200357",
87
+ "@spectrum-web-components/color-area": "1.11.0-preview-b6b1becb.20251121200357",
88
+ "@spectrum-web-components/color-field": "1.11.0-preview-b6b1becb.20251121200357",
89
+ "@spectrum-web-components/color-handle": "1.11.0-preview-b6b1becb.20251121200357",
90
+ "@spectrum-web-components/color-loupe": "1.11.0-preview-b6b1becb.20251121200357",
91
+ "@spectrum-web-components/color-slider": "1.11.0-preview-b6b1becb.20251121200357",
92
+ "@spectrum-web-components/color-wheel": "1.11.0-preview-b6b1becb.20251121200357",
93
+ "@spectrum-web-components/combobox": "1.11.0-preview-b6b1becb.20251121200357",
94
+ "@spectrum-web-components/contextual-help": "1.11.0-preview-b6b1becb.20251121200357",
95
+ "@spectrum-web-components/dialog": "1.11.0-preview-b6b1becb.20251121200357",
96
+ "@spectrum-web-components/divider": "1.11.0-preview-b6b1becb.20251121200357",
97
+ "@spectrum-web-components/dropzone": "1.11.0-preview-b6b1becb.20251121200357",
98
+ "@spectrum-web-components/field-group": "1.11.0-preview-b6b1becb.20251121200357",
99
+ "@spectrum-web-components/field-label": "1.11.0-preview-b6b1becb.20251121200357",
100
+ "@spectrum-web-components/grid": "1.11.0-preview-b6b1becb.20251121200357",
101
+ "@spectrum-web-components/help-text": "1.11.0-preview-b6b1becb.20251121200357",
102
+ "@spectrum-web-components/icon": "1.11.0-preview-b6b1becb.20251121200357",
103
+ "@spectrum-web-components/icons": "1.11.0-preview-b6b1becb.20251121200357",
104
+ "@spectrum-web-components/icons-ui": "1.11.0-preview-b6b1becb.20251121200357",
105
+ "@spectrum-web-components/icons-workflow": "1.11.0-preview-b6b1becb.20251121200357",
106
+ "@spectrum-web-components/iconset": "1.11.0-preview-b6b1becb.20251121200357",
107
+ "@spectrum-web-components/illustrated-message": "1.11.0-preview-b6b1becb.20251121200357",
108
+ "@spectrum-web-components/infield-button": "1.11.0-preview-b6b1becb.20251121200357",
109
+ "@spectrum-web-components/link": "1.11.0-preview-b6b1becb.20251121200357",
110
+ "@spectrum-web-components/menu": "1.11.0-preview-b6b1becb.20251121200357",
111
+ "@spectrum-web-components/meter": "1.11.0-preview-b6b1becb.20251121200357",
112
+ "@spectrum-web-components/modal": "1.11.0-preview-b6b1becb.20251121200357",
113
+ "@spectrum-web-components/number-field": "1.11.0-preview-b6b1becb.20251121200357",
114
+ "@spectrum-web-components/overlay": "1.11.0-preview-b6b1becb.20251121200357",
115
+ "@spectrum-web-components/picker": "1.11.0-preview-b6b1becb.20251121200357",
116
+ "@spectrum-web-components/picker-button": "1.11.0-preview-b6b1becb.20251121200357",
117
+ "@spectrum-web-components/popover": "1.11.0-preview-b6b1becb.20251121200357",
118
+ "@spectrum-web-components/progress-bar": "1.11.0-preview-b6b1becb.20251121200357",
119
+ "@spectrum-web-components/progress-circle": "1.11.0-preview-b6b1becb.20251121200357",
120
+ "@spectrum-web-components/radio": "1.11.0-preview-b6b1becb.20251121200357",
121
+ "@spectrum-web-components/reactive-controllers": "1.11.0-preview-b6b1becb.20251121200357",
122
+ "@spectrum-web-components/search": "1.11.0-preview-b6b1becb.20251121200357",
123
+ "@spectrum-web-components/shared": "1.11.0-preview-b6b1becb.20251121200357",
124
+ "@spectrum-web-components/sidenav": "1.11.0-preview-b6b1becb.20251121200357",
125
+ "@spectrum-web-components/slider": "1.11.0-preview-b6b1becb.20251121200357",
126
+ "@spectrum-web-components/split-view": "1.11.0-preview-b6b1becb.20251121200357",
127
+ "@spectrum-web-components/status-light": "1.11.0-preview-b6b1becb.20251121200357",
128
+ "@spectrum-web-components/styles": "1.11.0-preview-b6b1becb.20251121200357",
129
+ "@spectrum-web-components/swatch": "1.11.0-preview-b6b1becb.20251121200357",
130
+ "@spectrum-web-components/switch": "1.11.0-preview-b6b1becb.20251121200357",
131
+ "@spectrum-web-components/table": "1.11.0-preview-b6b1becb.20251121200357",
132
+ "@spectrum-web-components/tabs": "1.11.0-preview-b6b1becb.20251121200357",
133
+ "@spectrum-web-components/tags": "1.11.0-preview-b6b1becb.20251121200357",
134
+ "@spectrum-web-components/textfield": "1.11.0-preview-b6b1becb.20251121200357",
135
+ "@spectrum-web-components/theme": "1.11.0-preview-b6b1becb.20251121200357",
136
+ "@spectrum-web-components/thumbnail": "1.11.0-preview-b6b1becb.20251121200357",
137
+ "@spectrum-web-components/toast": "1.11.0-preview-b6b1becb.20251121200357",
138
+ "@spectrum-web-components/tooltip": "1.11.0-preview-b6b1becb.20251121200357",
139
+ "@spectrum-web-components/top-nav": "1.11.0-preview-b6b1becb.20251121200357",
140
+ "@spectrum-web-components/tray": "1.11.0-preview-b6b1becb.20251121200357",
141
+ "@spectrum-web-components/truncated": "1.11.0-preview-b6b1becb.20251121200357",
142
+ "@spectrum-web-components/underlay": "1.11.0-preview-b6b1becb.20251121200357"
143
143
  },
144
144
  "types": "./src/index.d.ts",
145
145
  "customElements": "custom-elements.json",