@brightspace-ui/core 3.102.3 → 3.103.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 (9) hide show
  1. package/components/tabs/README.md +184 -37
  2. package/components/tabs/demo/tab-custom.js +38 -0
  3. package/components/tabs/demo/tabs.html +174 -66
  4. package/components/tabs/tab-mixin.js +19 -40
  5. package/components/tabs/tab-panel-mixin.js +5 -5
  6. package/components/tabs/tab.js +3 -2
  7. package/components/tabs/tabs.js +4 -4
  8. package/custom-elements.json +79 -28
  9. package/package.json +1 -1
package/components/tabs/README.md CHANGED
@@ -1,22 +1,29 @@
1
-
2
1
  # Tabs
3
2
  Tabs are used to present related information in mutually exclusive panels, allowing users to view just one panel at a time.
4
3
 
5
4
  <!-- docs: demo display:block -->
6
5
  ```html
7
6
  <script type="module">
7
+ import '@brightspace-ui/core/components/tabs/tab.js';
8
8
  import '@brightspace-ui/core/components/tabs/tabs.js';
9
9
  import '@brightspace-ui/core/components/tabs/tab-panel.js';
10
10
  </script>
11
11
 
12
- <d2l-tabs>
13
- <d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
14
- <d2l-tab-panel text="Biology" selected>Tab content for Biology</d2l-tab-panel>
15
- <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
16
- <d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
17
- <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
18
- <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
19
- <d2l-tab-panel text="Community">Tab content for Community</d2l-tab-panel>
12
+ <d2l-tabs text="Courses">
13
+ <d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
14
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
15
+ <d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
16
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
17
+ <d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
18
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
19
+ <d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
20
+ <d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
21
+ <d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
22
+ <d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
23
+ <d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
24
+ <d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
25
+ <d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
26
+ <d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
20
27
  </d2l-tabs>
21
28
  ```
22
29
 
@@ -37,77 +44,217 @@ Tabs are used to present related information in mutually exclusive panels, allow
37
44
 
38
45
  ## Tabs [d2l-tabs]
39
46
 
40
- The `d2l-tabs` element is a web component for tabbed content. It provides the `d2l-tab-panel` component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
47
+ The `d2l-tabs` element is a web component for tabbed content, providing layout and responsive scrolling behaviour. The `d2l-tab` element is a simple tab handle that renders text, and is matched with a `d2l-tab-panel` element to contain the corresponding content. They are paired using an `id` on the tab handle and corresponding `labelled-by` on the `d2l-tab-panel`.
41
48
 
42
49
  <!-- docs: demo code properties name:d2l-tabs sandboxTitle:'Tab' display:block -->
43
50
  ```html
44
51
  <script type="module">
52
+ import '@brightspace-ui/core/components/tabs/tab.js';
45
53
  import '@brightspace-ui/core/components/tabs/tabs.js';
46
54
  import '@brightspace-ui/core/components/tabs/tab-panel.js';
55
+ import '@brightspace-ui/core/components/button/button-icon.js';
47
56
  </script>
48
57
 
49
- <d2l-tabs>
50
- <d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
51
- <d2l-tab-panel selected text="Biology" >Tab content for Biology</d2l-tab-panel>
52
- <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
53
- <d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
54
- <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
55
- <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
56
- <d2l-tab-panel text="Community">Tab content for Community</d2l-tab-panel>
58
+ <d2l-tabs text="Course">
59
+ <d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
60
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
61
+ <d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
62
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
63
+ <d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
64
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
65
+ <d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
66
+ <d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
67
+ <d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
68
+ <d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
69
+ <d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
70
+ <d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
71
+ <d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
72
+ <d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
73
+ <d2l-button-icon slot="ext" icon="tier1:gear" text="Settings"></d2l-button-icon>
57
74
  </d2l-tabs>
58
75
  ```
59
76
 
60
77
  <!-- docs: start hidden content -->
61
- ### Tabs Properties
78
+ ### Properties
62
79
 
63
80
  | Property | Type | Description |
64
81
  |--|--|--|
82
+ | `text` | String, required | ACCESSIBILITY: Accessible text for the tablist |
65
83
  | `max-to-show` | Number | Used to limit the max-width/number of tabs to initially display |
66
84
 
67
85
  <!-- docs: end hidden content -->
68
86
 
69
87
  ## Tab [d2l-tab]
70
88
 
71
- Coming soon! This is currently in development and not quite ready for usage.
89
+ An element that displays the corresponding tab panel when selected.
90
+
91
+ <!-- docs: demo code properties name:d2l-tab sandboxTitle:'Tab' display:block -->
92
+ ```html
93
+ <script type="module">
94
+ import '@brightspace-ui/core/components/tabs/tab.js';
95
+ import '@brightspace-ui/core/components/tabs/tabs.js';
96
+ import '@brightspace-ui/core/components/tabs/tab-panel.js';
97
+ </script>
98
+
99
+ <d2l-tabs text="Courses">
100
+ <d2l-tab id="all" text="All" slot="tabs" selected></d2l-tab>
101
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
102
+ <d2l-tab id="biology" text="Biology" slot="tabs"></d2l-tab>
103
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
104
+ <d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
105
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
106
+ <d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
107
+ <d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
108
+ <d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
109
+ <d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
110
+ <d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
111
+ <d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
112
+ <d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
113
+ <d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
114
+ </d2l-tabs>
115
+ ```
116
+
117
+ <!-- docs: start hidden content -->
118
+ ### Properties
119
+ | Property | Type | Description |
120
+ |--|--|--|
121
+ | `id` | String, required | Unique identifier for the tab |
122
+ | `text` | String, required | The text used for the tab and for labelling the corresponding panel |
123
+ | `selected` | Boolean | Use to select the tab |
124
+
125
+ ### Events
126
+ - `d2l-tab-content-change`: Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent `d2l-tabs`.
127
+ - `d2l-tab-selected`: Dispatched when a tab is selected
128
+ <!-- docs: end hidden content -->
129
+
130
+ ### Removing a Tab
131
+
132
+ A `tab` can be removed from the DOM using any regular method (e.g., `removeChild`). In order for the removal animation to be shown, the `hideTab` helper method in `d2l-tabs` must be used. An example of this is shown below, which waits for the promise in `hideTab` to resolve and then removes the tab and panel from the DOM. Ensure that when a `tab` is removed, the corresponding panel is also removed.
133
+
134
+ ```
135
+ const tabs = this.shadowRoot.querySelector('d2l-tabs');
136
+ const tab = tabs.querySelector('d2l-tab');
137
+ Promise.resolve(tabs.hideTab((tab))).then(() => {
138
+ const panel = tabs.querySelector(`d2l-tab-panel[labelled-by="${tab.id}"]`);
139
+ if (panel) tabs.removeChild(panel);
140
+ tabs.removeChild(tab);
141
+ });
142
+ ```
143
+
144
+ ### Custom Tabs
145
+
146
+ The `TabMixin` can be used to create custom tabs. It is IMPORTANT to call the `dispatchContentChangeEvent` function in `TabMixin` when content changes in the consumer in order to properly trigger calculations. Ensure that there is only one element in any custom tab to focus on, else the focus and keyboard navigation behaviors become confusing for users. Note that the parent `d2l-tabs` element handles `tabindex` focus management, and so consumers should not be rendering focusable elements within custom tabs.
147
+
148
+ <!-- docs: demo code sandboxTitle:'TabMixin' display:block -->
149
+ ```html
150
+ <script type="module">
151
+ import { css, html, LitElement, unsafeCSS } from 'lit';
152
+ import { getFocusPseudoClass } from '@brightspace-ui/core/helpers/focus.js';
153
+ import { TabMixin } from '@brightspace-ui/core/components/tabs/tab-mixin.js';
154
+
155
+ class TabCustom extends TabMixin(LitElement) {
156
+
157
+ static get styles() {
158
+ const styles = [ css`
159
+ .d2l-tab-custom-content {
160
+ margin: 0.5rem;
161
+ overflow: hidden;
162
+ padding: 0.1rem;
163
+ white-space: nowrap;
164
+ }
165
+ :host(:first-child) .d2l-tab-custom-content {
166
+ margin-inline-start: 0;
167
+ }
168
+ :host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-custom-content {
169
+ border-radius: 0.3rem;
170
+ color: var(--d2l-color-celestine);
171
+ outline: 2px solid var(--d2l-color-celestine);
172
+ }
173
+ `];
174
+
175
+ super.styles && styles.unshift(super.styles);
176
+ return styles;
177
+ }
178
+
179
+ renderContent() {
180
+ return html`
181
+ <div class="d2l-tab-custom-content">
182
+ <slot @slotchange="${this.#handleSlotchange}"></slot>
183
+ </div>
184
+ `;
185
+ }
186
+
187
+ #handleSlotchange() {
188
+ this.dispatchContentChangeEvent();
189
+ }
190
+ }
191
+
192
+ customElements.define('d2l-tab-custom', TabCustom);
193
+ </script>
194
+ <script type="module">
195
+ import '@brightspace-ui/core/components/tabs/tabs.js';
196
+ import '@brightspace-ui/core/components/tabs/tab-panel.js';
197
+ import '@brightspace-ui/core/components/count-badge/count-badge.js';
198
+ </script>
199
+
200
+ <d2l-tabs text="Courses">
201
+ <d2l-tab-custom id="all" slot="tabs"><div style="color: purple;">All</div></d2l-tab-custom>
202
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
203
+ <d2l-tab-custom id="biology" slot="tabs" selected>
204
+ Biology <d2l-count-badge number="100" size="small" text="100 new notifications" type="notification"></d2l-count-badge>
205
+ </d2l-tab-custom>
206
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
207
+ <d2l-tab-custom id="chemistry" slot="tabs">Chemistry</d2l-tab-custom>
208
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
209
+ </d2l-tabs>
210
+ ```
72
211
 
73
212
  ## Tab Panels [d2l-tab-panel]
74
- Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Tab panels can contain text, form controls, rich media, or just about anything else. There is an optional “slot” available for related controls such as a Settings button.
213
+ Selecting a tab in the tab bar causes the related tab panel to be displayed. Tab panels can contain text, form controls, rich media, or just about anything else. There is an optional “slot” available for related controls such as a Settings button.
75
214
 
76
215
  <!-- docs: demo code properties name:d2l-tab-panel sandboxTitle:'Tab Panels' display:block -->
77
216
  ```html
78
217
  <script type="module">
218
+ import '@brightspace-ui/core/components/tabs/tab.js';
79
219
  import '@brightspace-ui/core/components/tabs/tabs.js';
80
220
  import '@brightspace-ui/core/components/tabs/tab-panel.js';
81
- import '@brightspace-ui/core/components/button/button-icon.js';
82
221
  </script>
83
222
 
84
- <d2l-tabs>
85
- <d2l-tab-panel selected text="All">Tab content for All</d2l-tab-panel>
86
- <d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
87
- <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
88
- <d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
89
- <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
90
- <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
91
- <d2l-tab-panel text="Community">Tab content for Community</d2l-tab-panel>
92
- <d2l-button-icon slot="ext" icon="tier1:gear" text="Settings"></d2l-button-icon>
223
+ <d2l-tabs text="Courses">
224
+ <d2l-tab id="all" text="All" slot="tabs" selected></d2l-tab>
225
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
226
+ <d2l-tab id="biology" text="Biology" slot="tabs"></d2l-tab>
227
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
228
+ <d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
229
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
230
+ <d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
231
+ <d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
232
+ <d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
233
+ <d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
234
+ <d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
235
+ <d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
236
+ <d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
237
+ <d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
93
238
  </d2l-tabs>
94
239
  ```
95
240
 
96
241
  <!-- docs: start hidden content -->
97
- ### Tab Panel Properties
242
+ ### Properties
98
243
  | Property | Type | Description |
99
244
  |--|--|--|
100
- | `text` | String, required | The text used for the tab, as well as labelling the panel |
245
+ | `labelled-by` | String, required | Id of the tab that labels this panel |
101
246
  | `no-padding` | Boolean | Used to opt out of default padding/whitespace around the panel |
102
- | `selected` | Boolean | Used to select the tab |
247
+ | `text` | String | DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation. |
248
+ | `selected` | Boolean | DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation. |
103
249
 
104
250
  ### Events
105
- - `d2l-tab-panel-selected`: dispatched when a tab is selected
251
+ - `d2l-tab-panel-selected`: DEPRECATED: Dispatched when a tab is selected
106
252
  <!-- docs: end hidden content -->
107
253
 
108
254
  ## Accessibility
109
255
 
110
256
  The `tabs` components were built following [W3C best practices for Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) with Manual Activation. Important features include:
111
257
  - Following recommended keyboard control patterns (with the exception of the "Optional" Home, End, and Delete key patterns)
112
- - Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7")
113
- - Using `aria-selected` to indicate `tab` selection state
258
+ - Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7") and adding an `aria-label` to the `tablist`
259
+ - Using `aria-selected` to indicate `tab` selection state
260
+ - Using `aria-labelledby` and `aria-controls` in order to match the `tab` with the `tabpanel` for screen reader users
package/components/tabs/demo/tab-custom.js ADDED
@@ -0,0 +1,38 @@
1
+ import { css, html, LitElement, unsafeCSS } from 'lit';
2
+ import { getFocusPseudoClass } from '../../../helpers/focus.js';
3
+ import { TabMixin } from '../tab-mixin.js';
4
+
5
+ class TabCustom extends TabMixin(LitElement) {
6
+
7
+ static get styles() {
8
+ const styles = [ css`
9
+ .d2l-tab-custom-content {
10
+ margin: 0.5rem;
11
+ overflow: hidden;
12
+ padding: 0.1rem;
13
+ white-space: nowrap;
14
+ }
15
+ :host(:first-child) .d2l-tab-custom-content {
16
+ margin-inline-start: 0;
17
+ }
18
+ :host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-custom-content {
19
+ border-radius: 0.3rem;
20
+ color: var(--d2l-color-celestine);
21
+ outline: 2px solid var(--d2l-color-celestine);
22
+ }
23
+ `];
24
+
25
+ super.styles && styles.unshift(super.styles);
26
+ return styles;
27
+ }
28
+
29
+ renderContent() {
30
+ return html`
31
+ <div class="d2l-tab-custom-content">
32
+ <slot></slot>
33
+ </div>
34
+ `;
35
+ }
36
+ }
37
+
38
+ customElements.define('d2l-tab-custom', TabCustom);
package/components/tabs/demo/tabs.html CHANGED
@@ -7,6 +7,7 @@
7
7
  <script type="module">
8
8
  import '../../demo/demo-page.js';
9
9
  import '../../button/button-subtle.js';
10
+ import '../../count-badge/count-badge.js';
10
11
  import '../../dropdown/dropdown-button-subtle.js';
11
12
  import '../../dropdown/dropdown-menu.js';
12
13
  import '../../menu/menu.js';
@@ -14,6 +15,7 @@
14
15
  import '../tab.js';
15
16
  import '../tabs.js';
16
17
  import '../tab-panel.js';
18
+ import './tab-custom.js';
17
19
  </script>
18
20
  </head>
19
21
  <body unresolved>
@@ -22,22 +24,6 @@
22
24
 
23
25
  <h2>Tabs</h2>
24
26
 
25
- <d2l-demo-snippet>
26
- <template>
27
- <d2l-tabs>
28
- <d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
29
- <d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
30
- <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
31
- <d2l-tab-panel text="Earth &amp; Planetary Sciences">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
32
- <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
33
- <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
34
- </d2l-tabs>
35
- </template>
36
- </d2l-demo-snippet>
37
-
38
- <h2>Tabs (new structure)</h2>
39
- <div>This format is still a WIP. Please do not use yet.</div>
40
-
41
27
  <d2l-demo-snippet>
42
28
  <template>
43
29
  <d2l-tabs text="Courses">
@@ -69,56 +55,19 @@
69
55
  </template>
70
56
  </d2l-demo-snippet>
71
57
 
72
- <h3>Tabs (with slot)</h3>
58
+ <h2>Tabs (with custom tab)</h2>
73
59
 
74
- <div style="margin-bottom: 30px;">
75
- <d2l-button-subtle id="add-old" text="Add"></d2l-button-subtle>
76
- <d2l-button-subtle id="add-selected-old" text="Add Selected"></d2l-button-subtle>
77
- <d2l-button-subtle id="remove-old" text="Remove"></d2l-button-subtle>
78
- <d2l-button-subtle id="remove-multiple-old" text="Remove Multiple"></d2l-button-subtle>
79
- </div>
80
- <script>
81
- let newPanelIdOld = 0;
82
- const addPanelOld = (selected, tabs) => {
83
- newPanelIdOld += 1;
84
- const panel = document.createElement('d2l-tab-panel');
85
- panel.selected = selected;
86
- panel.text = `New Panel ${newPanelIdOld}`;
87
- panel.textContent = `Content for new panel ${newPanelIdOld}`;
88
- const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
89
- if (panels.length < 2) tabs.appendChild(panel);
90
- else tabs.insertBefore(panel, panels[1]);
91
- };
92
- const removePanelOld = (tabs) => {
93
- const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
94
- if (panels.length === 0) return;
95
- if (panels.length === 1) tabs.removeChild(panels[0]);
96
- else tabs.removeChild(panels[1]);
97
- };
98
- const removePanelsOld = (tabs) => {
99
- const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
100
- if (panels.length === 0) return;
101
- if (panels.length === 1) tabs.removeChild(panels[0]);
102
- else {
103
- tabs.removeChild(panels[1]);
104
- tabs.removeChild(panels[0]);
105
- }
106
- };
107
-
108
- document.querySelector('#add-old').addEventListener('click', () => addPanelOld(false, document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
109
- document.querySelector('#add-selected-old').addEventListener('click', () => addPanelOld(true, document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
110
- document.querySelector('#remove-old').addEventListener('click', () => removePanelOld(document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
111
- document.querySelector('#remove-multiple-old').addEventListener('click', () => removePanelsOld(document.querySelector('#withSlotOld').querySelector('d2l-tabs')));
112
- </script>
113
-
114
- <d2l-demo-snippet id="withSlotOld">
60
+ <d2l-demo-snippet>
115
61
  <template>
116
- <d2l-tabs>
117
- <d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
118
- <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
119
- <d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
120
- <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
121
- <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
62
+ <d2l-tabs text="Courses">
63
+ <d2l-tab-custom id="all" slot="tabs"><div style="color: purple;">All</div></d2l-tab-custom>
64
+ <d2l-tab-custom id="biology" slot="tabs" selected>
65
+ Biology <d2l-count-badge number="100" size="small" text="100 new notifications" type="notification"></d2l-count-badge>
66
+ </d2l-tab-custom>
67
+ <d2l-tab-custom id="chemistry" slot="tabs">Chemistry</d2l-tab-custom>
68
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
69
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
70
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
122
71
  <d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
123
72
  <d2l-dropdown-menu>
124
73
  <d2l-menu label="Astronomy">
@@ -135,7 +84,7 @@
135
84
  </template>
136
85
  </d2l-demo-snippet>
137
86
 
138
- <h3>Tabs (with slot, new structure)</h3>
87
+ <h3>Tabs (with slot)</h3>
139
88
 
140
89
  <div style="margin-bottom: 30px;">
141
90
  <d2l-button-subtle id="add" text="Add"></d2l-button-subtle>
@@ -238,6 +187,165 @@
238
187
 
239
188
  <h3>Tabs (responsive)</h3>
240
189
 
190
+ <d2l-demo-snippet>
191
+ <template>
192
+ <div style="max-width: 500px;">
193
+ <d2l-tabs text="Many Miscellaneous Tabs">
194
+ <d2l-tab id="s18" text="S18" slot="tabs"></d2l-tab>
195
+ <d2l-tab-panel labelled-by="s18" slot="panels">Tab content for S18</d2l-tab-panel>
196
+ <d2l-tab id="w18" text="W18" slot="tabs"></d2l-tab>
197
+ <d2l-tab-panel labelled-by="w18" slot="panels">Tab content for W18</d2l-tab-panel>
198
+ <d2l-tab id="f17" text="F17" slot="tabs"></d2l-tab>
199
+ <d2l-tab-panel labelled-by="f17" slot="panels">Tab content for F17</d2l-tab-panel>
200
+ <d2l-tab id="s17" text="S17" slot="tabs"></d2l-tab>
201
+ <d2l-tab-panel labelled-by="s17" slot="panels">Tab content for S17</d2l-tab-panel>
202
+ <d2l-tab id="w17" text="W17" slot="tabs"></d2l-tab>
203
+ <d2l-tab-panel labelled-by="w17" slot="panels">Tab content for W17</d2l-tab-panel>
204
+ <d2l-tab id="f16" text="F16" slot="tabs"></d2l-tab>
205
+ <d2l-tab-panel labelled-by="f16" slot="panels">Tab content for F16</d2l-tab-panel>
206
+ <d2l-tab id="s16" text="S16" slot="tabs"></d2l-tab>
207
+ <d2l-tab-panel labelled-by="s16" slot="panels">Tab content for S16</d2l-tab-panel>
208
+ <d2l-tab id="w16" text="W16" slot="tabs"></d2l-tab>
209
+ <d2l-tab-panel labelled-by="w16" slot="panels">Tab content for W16</d2l-tab-panel>
210
+ <d2l-tab id="f15" text="F15" slot="tabs"></d2l-tab>
211
+ <d2l-tab-panel labelled-by="f15" slot="panels">Tab content for F15</d2l-tab-panel>
212
+ <d2l-tab id="s15" text="S15" slot="tabs"></d2l-tab>
213
+ <d2l-tab-panel labelled-by="s15" slot="panels">Tab content for S15</d2l-tab-panel>
214
+ <d2l-tab id="w15" text="W15" slot="tabs"></d2l-tab>
215
+ <d2l-tab-panel labelled-by="w15" slot="panels">Tab content for W15</d2l-tab-panel>
216
+ <d2l-tab id="f14" text="F14" slot="tabs"></d2l-tab>
217
+ <d2l-tab-panel labelled-by="f14" slot="panels">Tab content for F14</d2l-tab-panel>
218
+ <d2l-tab id="s14" text="S14" slot="tabs"></d2l-tab>
219
+ <d2l-tab-panel labelled-by="s14" slot="panels">Tab content for S14</d2l-tab-panel>
220
+ <d2l-tab id="w14" text="W14" slot="tabs"></d2l-tab>
221
+ <d2l-tab-panel labelled-by="w14" slot="panels">Tab content for W14</d2l-tab-panel>
222
+ <d2l-tab id="f13" text="F13" slot="tabs"></d2l-tab>
223
+ <d2l-tab-panel labelled-by="f13" slot="panels">Tab content for F13</d2l-tab-panel>
224
+ <d2l-tab id="s13" text="S13" slot="tabs"></d2l-tab>
225
+ <d2l-tab-panel labelled-by="s13" slot="panels">Tab content for S13</d2l-tab-panel>
226
+ <d2l-tab id="w13" text="W13" slot="tabs"></d2l-tab>
227
+ <d2l-tab-panel labelled-by="w13" slot="panels">Tab content for W13</d2l-tab-panel>
228
+ <d2l-tab id="f12" text="F12" slot="tabs"></d2l-tab>
229
+ <d2l-tab-panel labelled-by="f12" slot="panels">Tab content for F12</d2l-tab-panel>
230
+ <d2l-tab id="s12" text="S12" slot="tabs"></d2l-tab>
231
+ <d2l-tab-panel labelled-by="s12" slot="panels">Tab content for S12</d2l-tab-panel>
232
+ <d2l-tab id="w12" text="W12" slot="tabs"></d2l-tab>
233
+ <d2l-tab-panel labelled-by="w12" slot="panels">Tab content for W12</d2l-tab-panel>
234
+ <d2l-tab id="f11" text="F11" slot="tabs"></d2l-tab>
235
+ <d2l-tab-panel labelled-by="f11" slot="panels">Tab content for F11</d2l-tab-panel>
236
+ <d2l-tab id="s11" text="S11" slot="tabs"></d2l-tab>
237
+ <d2l-tab-panel labelled-by="s11" slot="panels">Tab content for S11</d2l-tab-panel>
238
+ </d2l-tabs>
239
+ </div>
240
+ </template>
241
+ </d2l-demo-snippet>
242
+
243
+ <h3>Tabs (max-to-show)</h3>
244
+
245
+ <d2l-demo-snippet>
246
+ <template>
247
+ <d2l-tabs max-to-show="3" text="Courses">
248
+ <d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
249
+ <d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
250
+ <d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
251
+ <d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>
252
+ <d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
253
+ <d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
254
+ <d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs"></d2l-tab>
255
+ <d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
256
+ <d2l-tab id="physics" text="Physics" slot="tabs"></d2l-tab>
257
+ <d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
258
+ <d2l-tab id="math" text="Math" slot="tabs"></d2l-tab>
259
+ <d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
260
+ <d2l-tab id="community" text="Community" slot="tabs"></d2l-tab>
261
+ <d2l-tab-panel labelled-by="community" slot="panels">Tab content for Community</d2l-tab-panel>
262
+ </d2l-tabs>
263
+ </template>
264
+ </d2l-demo-snippet>
265
+
266
+ <h2>Tabs (deprecated structure)</h2>
267
+
268
+ <d2l-demo-snippet>
269
+ <template>
270
+ <d2l-tabs>
271
+ <d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
272
+ <d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
273
+ <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
274
+ <d2l-tab-panel text="Earth &amp; Planetary Sciences">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
275
+ <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
276
+ <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
277
+ </d2l-tabs>
278
+ </template>
279
+ </d2l-demo-snippet>
280
+
281
+ <h3>Tabs (deprecated; with slot)</h3>
282
+
283
+ <div style="margin-bottom: 30px;">
284
+ <d2l-button-subtle id="add-deprecated" text="Add"></d2l-button-subtle>
285
+ <d2l-button-subtle id="add-selected-deprecated" text="Add Selected"></d2l-button-subtle>
286
+ <d2l-button-subtle id="remove-deprecated" text="Remove"></d2l-button-subtle>
287
+ <d2l-button-subtle id="remove-multiple-deprecated" text="Remove Multiple"></d2l-button-subtle>
288
+ </div>
289
+ <script>
290
+ let newPanelIdDeprecated = 0;
291
+ const addPanelDeprecated = (selected, tabs) => {
292
+ newPanelIdDeprecated += 1;
293
+ const panel = document.createElement('d2l-tab-panel');
294
+ panel.selected = selected;
295
+ panel.text = `New Panel ${newPanelIdDeprecated}`;
296
+ panel.textContent = `Content for new panel ${newPanelIdDeprecated}`;
297
+ const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
298
+ if (panels.length < 2) tabs.appendChild(panel);
299
+ else tabs.insertBefore(panel, panels[1]);
300
+ };
301
+ const removePanelDeprecated = (tabs) => {
302
+ const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
303
+ if (panels.length === 0) return;
304
+ if (panels.length === 1) tabs.removeChild(panels[0]);
305
+ else tabs.removeChild(panels[1]);
306
+ };
307
+ const removePanelsDeprecated = (tabs) => {
308
+ const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
309
+ if (panels.length === 0) return;
310
+ if (panels.length === 1) tabs.removeChild(panels[0]);
311
+ else {
312
+ tabs.removeChild(panels[1]);
313
+ tabs.removeChild(panels[0]);
314
+ }
315
+ };
316
+
317
+ document.querySelector('#add-deprecated').addEventListener('click', () => addPanelDeprecated(false, document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
318
+ document.querySelector('#add-selected-deprecated').addEventListener('click', () => addPanelDeprecated(true, document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
319
+ document.querySelector('#remove-deprecated').addEventListener('click', () => removePanelDeprecated(document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
320
+ document.querySelector('#remove-multiple-deprecated').addEventListener('click', () => removePanelsDeprecated(document.querySelector('#withSlotDeprecated').querySelector('d2l-tabs')));
321
+ </script>
322
+
323
+ <d2l-demo-snippet id="withSlotDeprecated">
324
+ <template>
325
+ <d2l-tabs>
326
+ <d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
327
+ <d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
328
+ <d2l-tab-panel text="Earth Sciences">Tab content for Earth Sciences</d2l-tab-panel>
329
+ <d2l-tab-panel text="Physics">Tab content for Physics</d2l-tab-panel>
330
+ <d2l-tab-panel text="Math">Tab content for Math</d2l-tab-panel>
331
+ <d2l-dropdown-button-subtle slot="ext" text="Explore Topics">
332
+ <d2l-dropdown-menu>
333
+ <d2l-menu label="Astronomy">
334
+ <d2l-menu-item text="Introduction"></d2l-menu-item>
335
+ <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
336
+ <d2l-menu-item text="The Solar System"></d2l-menu-item>
337
+ <d2l-menu-item text="Stars &amp; Galaxies"></d2l-menu-item>
338
+ <d2l-menu-item text="The Night Sky"></d2l-menu-item>
339
+ <d2l-menu-item text="The Universe"></d2l-menu-item>
340
+ </d2l-menu>
341
+ </d2l-dropdown-menu>
342
+ </d2l-dropdown-button-subtle>
343
+ </d2l-tabs>
344
+ </template>
345
+ </d2l-demo-snippet>
346
+
347
+ <h3>Tabs (deprecated; responsive)</h3>
348
+
241
349
  <d2l-demo-snippet>
242
350
  <template>
243
351
  <div style="max-width: 500px;">
@@ -269,7 +377,7 @@
269
377
  </template>
270
378
  </d2l-demo-snippet>
271
379
 
272
- <h3>Tabs (max-to-show)</h3>
380
+ <h3>Tabs (deprecated; max-to-show)</h3>
273
381
 
274
382
  <d2l-demo-snippet>
275
383
  <template>
package/components/tabs/tab-mixin.js CHANGED
@@ -11,9 +11,19 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
11
11
 
12
12
  static get properties() {
13
13
  return {
14
+ /**
15
+ * Use to select the tab. Only one tab can be selected at a time.
16
+ * @type {boolean}
17
+ */
14
18
  selected: { type: Boolean, reflect: true },
19
+ /**
20
+ * @ignore
21
+ */
15
22
  // eslint-disable-next-line lit/no-native-attributes
16
23
  role: { type: String, reflect: true },
24
+ /**
25
+ * @ignore
26
+ */
17
27
  tabIndex: { type: Number, reflect: true, attribute: 'tabindex' }
18
28
  };
19
29
  }
@@ -80,26 +90,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
80
90
  this.tabIndex = -1;
81
91
  }
82
92
 
83
- connectedCallback() {
84
- super.connectedCallback();
85
- this.#addEventHandlers();
93
+ firstUpdated(changedProperties) {
94
+ super.firstUpdated(changedProperties);
86
95
 
87
- if (!this.#resizeObserver) {
88
- this.#resizeObserver = new ResizeObserver(() => {
89
- this.#handleResize();
90
- });
91
- this.#resizeObserver.observe(this);
92
- }
93
- }
94
-
95
- disconnectedCallback() {
96
- super.disconnectedCallback();
97
- this.#removeEventHandlers();
98
-
99
- if (this.#resizeObserver) {
100
- this.#resizeObserver.disconnect();
101
- this.#resizeObserver = null;
102
- }
96
+ this.addEventListener('click', this.#handleClick);
97
+ this.addEventListener('keydown', this.#handleKeydown);
98
+ this.addEventListener('keyup', this.#handleKeyup);
103
99
  }
104
100
 
105
101
  render() {
@@ -115,6 +111,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
115
111
  if (changedProperties.has('selected')) {
116
112
  this.ariaSelected = `${this.selected}`;
117
113
  if (this.selected) {
114
+ /** Dispatched when a tab is selected */
118
115
  this.dispatchEvent(new CustomEvent(
119
116
  'd2l-tab-selected', { bubbles: true, composed: true }
120
117
  ));
@@ -137,39 +134,21 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
137
134
  return html`<div>Default Tab Content</div>`;
138
135
  }
139
136
 
140
- #resizeObserver;
141
-
142
- #handleClick = () => {
137
+ #handleClick() {
143
138
  this.selected = true;
144
139
  };
145
140
 
146
- #handleKeydown = e => {
141
+ #handleKeydown(e) {
147
142
  if (e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER) {
148
143
  e.stopPropagation();
149
144
  e.preventDefault();
150
145
  }
151
146
  };
152
147
 
153
- #handleKeyup = e => {
148
+ #handleKeyup(e) {
154
149
  if (e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER) {
155
150
  this.#handleClick();
156
151
  }
157
152
  };
158
153
 
159
- #addEventHandlers() {
160
- this.addEventListener('click', this.#handleClick);
161
- this.addEventListener('keydown', this.#handleKeydown);
162
- this.addEventListener('keyup', this.#handleKeyup);
163
- }
164
-
165
- #handleResize() {
166
- this.dispatchEvent(new CustomEvent('d2l-tab-resize'));
167
- }
168
-
169
- #removeEventHandlers() {
170
- this.removeEventListener('click', this.#handleClick);
171
- this.removeEventListener('keydown', this.#handleKeydown);
172
- this.removeEventListener('keyup', this.#handleKeyup);
173
- }
174
-
175
154
  };
package/components/tabs/tab-panel-mixin.js CHANGED
@@ -6,7 +6,7 @@ export const TabPanelMixin = superclass => class extends superclass {
6
6
  static get properties() {
7
7
  return {
8
8
  /**
9
- * Id of the tab that labels this panel
9
+ * REQUIRED: Id of the tab that labels this panel
10
10
  * @type {string}
11
11
  */
12
12
  labelledBy: { type: String, attribute: 'labelled-by', reflect: true },
@@ -21,12 +21,12 @@ export const TabPanelMixin = superclass => class extends superclass {
21
21
  // eslint-disable-next-line lit/no-native-attributes
22
22
  role: { type: String, reflect: true },
23
23
  /**
24
- * Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.
24
+ * DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.
25
25
  * @type {boolean}
26
26
  */
27
27
  selected: { type: Boolean, reflect: true },
28
28
  /**
29
- * ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
29
+ * DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.
30
30
  * @type {string}
31
31
  */
32
32
  text: { type: String }
@@ -71,7 +71,7 @@ export const TabPanelMixin = superclass => class extends superclass {
71
71
  } else if (prop === 'selected') {
72
72
  if (this.selected) {
73
73
  requestAnimationFrame(() => {
74
- /** Dispatched when a tab is selected */
74
+ /** DEPRECATED: Dispatched when a tab is selected */
75
75
  this.dispatchEvent(new CustomEvent(
76
76
  'd2l-tab-panel-selected', { bubbles: true, composed: true }
77
77
  ));
@@ -79,7 +79,7 @@ export const TabPanelMixin = superclass => class extends superclass {
79
79
  }
80
80
  } else if (prop === 'text') {
81
81
  this.setAttribute('aria-label', this.text);
82
- /** Dispatched when the text attribute is changed */
82
+ /** DEPRECATED: Dispatched when the text attribute is changed */
83
83
  this.dispatchEvent(new CustomEvent(
84
84
  'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
85
85
  ));
package/components/tabs/tab.js CHANGED
@@ -4,6 +4,7 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
4
4
  import { TabMixin } from './tab-mixin.js';
5
5
 
6
6
  /**
7
+ * @attr id - REQUIRED: Unique identifier for the tab
7
8
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
8
9
  */
9
10
  class Tab extends TabMixin(LitElement) {
@@ -11,7 +12,7 @@ class Tab extends TabMixin(LitElement) {
11
12
  static get properties() {
12
13
  return {
13
14
  /**
14
- * ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.
15
+ * ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel
15
16
  * @type {string}
16
17
  */
17
18
  text: { type: String }
@@ -28,8 +29,8 @@ class Tab extends TabMixin(LitElement) {
28
29
  }
29
30
  :host(:${unsafeCSS(getFocusPseudoClass())}) .d2l-tab-text {
30
31
  border-radius: 0.3rem;
31
- box-shadow: 0 0 0 2px var(--d2l-color-celestine);
32
32
  color: var(--d2l-color-celestine);
33
+ outline: 2px solid var(--d2l-color-celestine);
33
34
  }
34
35
  .d2l-tab-text-skeletize-override {
35
36
  min-width: 50px;
package/components/tabs/tabs.js CHANGED
@@ -25,9 +25,11 @@ function getOffsetLeft(tab, tabRect) {
25
25
  }
26
26
 
27
27
  /**
28
- * A component for tabbed content. It supports the "d2l-tab-panel" component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.
29
- * @slot - Contains the tab panels (e.g., "d2l-tab-panel" components)
28
+ * A component for tabbed content. It supports the "d2l-tab" component and "TabMixin" consumers for tabs, the "d2l-tab-panel" component for the tab content, renders tabs responsively, and provides virtual scrolling for large tab lists.
29
+ * @slot - DEPRECATED: Contains the tab panels (e.g., "d2l-tab-panel" components)
30
30
  * @slot ext - Additional content (e.g., a button) positioned at right
31
+ * @slot tabs - Contains the tabs (e.g., "d2l-tab" components or custom components that use `TabMixin`)
32
+ * @slot panels - Contains the tab panels (e.g., "d2l-tab-panel" components)
31
33
  */
32
34
  class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))) {
33
35
 
@@ -1212,8 +1214,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
1212
1214
  }
1213
1215
 
1214
1216
  async #updateSelectedTab(selectedTab) {
1215
- selectedTab.tabIndex = 0;
1216
-
1217
1217
  await this.updateComplete;
1218
1218
 
1219
1219
  selectedTab.selected = true;
package/custom-elements.json CHANGED
@@ -12829,6 +12829,57 @@
12829
12829
  }
12830
12830
  ]
12831
12831
  },
12832
+ {
12833
+ "name": "d2l-tab-custom",
12834
+ "path": "./components/tabs/demo/tab-custom.js",
12835
+ "attributes": [
12836
+ {
12837
+ "name": "selected",
12838
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
12839
+ "type": "boolean",
12840
+ "default": "false"
12841
+ },
12842
+ {
12843
+ "name": "skeleton",
12844
+ "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
12845
+ "type": "boolean"
12846
+ }
12847
+ ],
12848
+ "properties": [
12849
+ {
12850
+ "name": "role",
12851
+ "type": "string",
12852
+ "default": "\"tab\""
12853
+ },
12854
+ {
12855
+ "name": "selected",
12856
+ "attribute": "selected",
12857
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
12858
+ "type": "boolean",
12859
+ "default": "false"
12860
+ },
12861
+ {
12862
+ "name": "tabIndex",
12863
+ "type": "number",
12864
+ "default": "-1"
12865
+ },
12866
+ {
12867
+ "name": "skeleton",
12868
+ "attribute": "skeleton",
12869
+ "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
12870
+ "type": "boolean"
12871
+ }
12872
+ ],
12873
+ "events": [
12874
+ {
12875
+ "name": "d2l-tab-selected",
12876
+ "description": "Dispatched when a tab is selected"
12877
+ },
12878
+ {
12879
+ "name": "d2l-tab-content-change"
12880
+ }
12881
+ ]
12882
+ },
12832
12883
  {
12833
12884
  "name": "d2l-tab-internal",
12834
12885
  "path": "./components/tabs/tab-internal.js",
@@ -12905,12 +12956,12 @@
12905
12956
  "attributes": [
12906
12957
  {
12907
12958
  "name": "labelled-by",
12908
- "description": "Id of the tab that labels this panel",
12959
+ "description": "REQUIRED: Id of the tab that labels this panel",
12909
12960
  "type": "string"
12910
12961
  },
12911
12962
  {
12912
12963
  "name": "text",
12913
- "description": "ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
12964
+ "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
12914
12965
  "type": "string"
12915
12966
  },
12916
12967
  {
@@ -12921,7 +12972,7 @@
12921
12972
  },
12922
12973
  {
12923
12974
  "name": "selected",
12924
- "description": "Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.",
12975
+ "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.",
12925
12976
  "type": "boolean",
12926
12977
  "default": "false"
12927
12978
  }
@@ -12930,13 +12981,13 @@
12930
12981
  {
12931
12982
  "name": "labelledBy",
12932
12983
  "attribute": "labelled-by",
12933
- "description": "Id of the tab that labels this panel",
12984
+ "description": "REQUIRED: Id of the tab that labels this panel",
12934
12985
  "type": "string"
12935
12986
  },
12936
12987
  {
12937
12988
  "name": "text",
12938
12989
  "attribute": "text",
12939
- "description": "ACCESSIBILITY: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
12990
+ "description": "DEPRECATED: The text used for the tab, as well as labelling the panel. Required if not using d2l-tab/d2l-tab-panel implementation.",
12940
12991
  "type": "string"
12941
12992
  },
12942
12993
  {
@@ -12949,7 +13000,7 @@
12949
13000
  {
12950
13001
  "name": "selected",
12951
13002
  "attribute": "selected",
12952
- "description": "Use to select the tab. Do not set if using the d2l-tab/d2l-tab-panel implementation.",
13003
+ "description": "DEPRECATED: Use to select the tab. Do NOT set if using the d2l-tab/d2l-tab-panel implementation.",
12953
13004
  "type": "boolean",
12954
13005
  "default": "false"
12955
13006
  }
@@ -12957,11 +13008,11 @@
12957
13008
  "events": [
12958
13009
  {
12959
13010
  "name": "d2l-tab-panel-selected",
12960
- "description": "Dispatched when a tab is selected"
13011
+ "description": "DEPRECATED: Dispatched when a tab is selected"
12961
13012
  },
12962
13013
  {
12963
13014
  "name": "d2l-tab-panel-text-changed",
12964
- "description": "Dispatched when the text attribute is changed"
13015
+ "description": "DEPRECATED: Dispatched when the text attribute is changed"
12965
13016
  }
12966
13017
  ],
12967
13018
  "slots": [
@@ -12977,52 +13028,46 @@
12977
13028
  "attributes": [
12978
13029
  {
12979
13030
  "name": "text",
12980
- "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.",
13031
+ "description": "ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel",
12981
13032
  "type": "string"
12982
13033
  },
12983
- {
12984
- "name": "role",
12985
- "type": "string",
12986
- "default": "\"tab\""
12987
- },
12988
13034
  {
12989
13035
  "name": "selected",
13036
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
12990
13037
  "type": "boolean",
12991
13038
  "default": "false"
12992
13039
  },
12993
- {
12994
- "name": "tabindex",
12995
- "type": "number",
12996
- "default": "-1"
12997
- },
12998
13040
  {
12999
13041
  "name": "skeleton",
13000
13042
  "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
13001
13043
  "type": "boolean"
13044
+ },
13045
+ {
13046
+ "name": "id",
13047
+ "description": "REQUIRED: Unique identifier for the tab"
13002
13048
  }
13003
13049
  ],
13004
13050
  "properties": [
13005
13051
  {
13006
13052
  "name": "text",
13007
13053
  "attribute": "text",
13008
- "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel.",
13054
+ "description": "ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel",
13009
13055
  "type": "string"
13010
13056
  },
13011
13057
  {
13012
13058
  "name": "role",
13013
- "attribute": "role",
13014
13059
  "type": "string",
13015
13060
  "default": "\"tab\""
13016
13061
  },
13017
13062
  {
13018
13063
  "name": "selected",
13019
13064
  "attribute": "selected",
13065
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
13020
13066
  "type": "boolean",
13021
13067
  "default": "false"
13022
13068
  },
13023
13069
  {
13024
13070
  "name": "tabIndex",
13025
- "attribute": "tabindex",
13026
13071
  "type": "number",
13027
13072
  "default": "-1"
13028
13073
  },
@@ -13039,17 +13084,15 @@
13039
13084
  "description": "Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs."
13040
13085
  },
13041
13086
  {
13042
- "name": "d2l-tab-selected"
13043
- },
13044
- {
13045
- "name": "d2l-tab-resize"
13087
+ "name": "d2l-tab-selected",
13088
+ "description": "Dispatched when a tab is selected"
13046
13089
  }
13047
13090
  ]
13048
13091
  },
13049
13092
  {
13050
13093
  "name": "d2l-tabs",
13051
13094
  "path": "./components/tabs/tabs.js",
13052
- "description": "A component for tabbed content. It supports the \"d2l-tab-panel\" component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.",
13095
+ "description": "A component for tabbed content. It supports the \"d2l-tab\" component and \"TabMixin\" consumers for tabs, the \"d2l-tab-panel\" component for the tab content, renders tabs responsively, and provides virtual scrolling for large tab lists.",
13053
13096
  "attributes": [
13054
13097
  {
13055
13098
  "name": "text",
@@ -13102,11 +13145,19 @@
13102
13145
  "slots": [
13103
13146
  {
13104
13147
  "name": "",
13105
- "description": "Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
13148
+ "description": "DEPRECATED: Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
13106
13149
  },
13107
13150
  {
13108
13151
  "name": "ext",
13109
13152
  "description": "Additional content (e.g., a button) positioned at right"
13153
+ },
13154
+ {
13155
+ "name": "tabs",
13156
+ "description": "Contains the tabs (e.g., \"d2l-tab\" components or custom components that use `TabMixin`)"
13157
+ },
13158
+ {
13159
+ "name": "panels",
13160
+ "description": "Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
13110
13161
  }
13111
13162
  ]
13112
13163
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.102.3",
3
+ "version": "3.103.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",