@brightspace-ui/core 3.102.4 → 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 (7) hide show
  1. package/components/tabs/README.md +184 -37
  2. package/components/tabs/tab-mixin.js +19 -40
  3. package/components/tabs/tab-panel-mixin.js +5 -5
  4. package/components/tabs/tab.js +2 -1
  5. package/components/tabs/tabs.js +4 -2
  6. package/custom-elements.json +32 -44
  7. 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/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 }
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
 
package/custom-elements.json CHANGED
@@ -12833,21 +12833,12 @@
12833
12833
  "name": "d2l-tab-custom",
12834
12834
  "path": "./components/tabs/demo/tab-custom.js",
12835
12835
  "attributes": [
12836
- {
12837
- "name": "role",
12838
- "type": "string",
12839
- "default": "\"tab\""
12840
- },
12841
12836
  {
12842
12837
  "name": "selected",
12838
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
12843
12839
  "type": "boolean",
12844
12840
  "default": "false"
12845
12841
  },
12846
- {
12847
- "name": "tabindex",
12848
- "type": "number",
12849
- "default": "-1"
12850
- },
12851
12842
  {
12852
12843
  "name": "skeleton",
12853
12844
  "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
@@ -12857,19 +12848,18 @@
12857
12848
  "properties": [
12858
12849
  {
12859
12850
  "name": "role",
12860
- "attribute": "role",
12861
12851
  "type": "string",
12862
12852
  "default": "\"tab\""
12863
12853
  },
12864
12854
  {
12865
12855
  "name": "selected",
12866
12856
  "attribute": "selected",
12857
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
12867
12858
  "type": "boolean",
12868
12859
  "default": "false"
12869
12860
  },
12870
12861
  {
12871
12862
  "name": "tabIndex",
12872
- "attribute": "tabindex",
12873
12863
  "type": "number",
12874
12864
  "default": "-1"
12875
12865
  },
@@ -12882,13 +12872,11 @@
12882
12872
  ],
12883
12873
  "events": [
12884
12874
  {
12885
- "name": "d2l-tab-selected"
12875
+ "name": "d2l-tab-selected",
12876
+ "description": "Dispatched when a tab is selected"
12886
12877
  },
12887
12878
  {
12888
12879
  "name": "d2l-tab-content-change"
12889
- },
12890
- {
12891
- "name": "d2l-tab-resize"
12892
12880
  }
12893
12881
  ]
12894
12882
  },
@@ -12968,12 +12956,12 @@
12968
12956
  "attributes": [
12969
12957
  {
12970
12958
  "name": "labelled-by",
12971
- "description": "Id of the tab that labels this panel",
12959
+ "description": "REQUIRED: Id of the tab that labels this panel",
12972
12960
  "type": "string"
12973
12961
  },
12974
12962
  {
12975
12963
  "name": "text",
12976
- "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.",
12977
12965
  "type": "string"
12978
12966
  },
12979
12967
  {
@@ -12984,7 +12972,7 @@
12984
12972
  },
12985
12973
  {
12986
12974
  "name": "selected",
12987
- "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.",
12988
12976
  "type": "boolean",
12989
12977
  "default": "false"
12990
12978
  }
@@ -12993,13 +12981,13 @@
12993
12981
  {
12994
12982
  "name": "labelledBy",
12995
12983
  "attribute": "labelled-by",
12996
- "description": "Id of the tab that labels this panel",
12984
+ "description": "REQUIRED: Id of the tab that labels this panel",
12997
12985
  "type": "string"
12998
12986
  },
12999
12987
  {
13000
12988
  "name": "text",
13001
12989
  "attribute": "text",
13002
- "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.",
13003
12991
  "type": "string"
13004
12992
  },
13005
12993
  {
@@ -13012,7 +13000,7 @@
13012
13000
  {
13013
13001
  "name": "selected",
13014
13002
  "attribute": "selected",
13015
- "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.",
13016
13004
  "type": "boolean",
13017
13005
  "default": "false"
13018
13006
  }
@@ -13020,11 +13008,11 @@
13020
13008
  "events": [
13021
13009
  {
13022
13010
  "name": "d2l-tab-panel-selected",
13023
- "description": "Dispatched when a tab is selected"
13011
+ "description": "DEPRECATED: Dispatched when a tab is selected"
13024
13012
  },
13025
13013
  {
13026
13014
  "name": "d2l-tab-panel-text-changed",
13027
- "description": "Dispatched when the text attribute is changed"
13015
+ "description": "DEPRECATED: Dispatched when the text attribute is changed"
13028
13016
  }
13029
13017
  ],
13030
13018
  "slots": [
@@ -13040,52 +13028,46 @@
13040
13028
  "attributes": [
13041
13029
  {
13042
13030
  "name": "text",
13043
- "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",
13044
13032
  "type": "string"
13045
13033
  },
13046
- {
13047
- "name": "role",
13048
- "type": "string",
13049
- "default": "\"tab\""
13050
- },
13051
13034
  {
13052
13035
  "name": "selected",
13036
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
13053
13037
  "type": "boolean",
13054
13038
  "default": "false"
13055
13039
  },
13056
- {
13057
- "name": "tabindex",
13058
- "type": "number",
13059
- "default": "-1"
13060
- },
13061
13040
  {
13062
13041
  "name": "skeleton",
13063
13042
  "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
13064
13043
  "type": "boolean"
13044
+ },
13045
+ {
13046
+ "name": "id",
13047
+ "description": "REQUIRED: Unique identifier for the tab"
13065
13048
  }
13066
13049
  ],
13067
13050
  "properties": [
13068
13051
  {
13069
13052
  "name": "text",
13070
13053
  "attribute": "text",
13071
- "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",
13072
13055
  "type": "string"
13073
13056
  },
13074
13057
  {
13075
13058
  "name": "role",
13076
- "attribute": "role",
13077
13059
  "type": "string",
13078
13060
  "default": "\"tab\""
13079
13061
  },
13080
13062
  {
13081
13063
  "name": "selected",
13082
13064
  "attribute": "selected",
13065
+ "description": "Use to select the tab. Only one tab can be selected at a time.",
13083
13066
  "type": "boolean",
13084
13067
  "default": "false"
13085
13068
  },
13086
13069
  {
13087
13070
  "name": "tabIndex",
13088
- "attribute": "tabindex",
13089
13071
  "type": "number",
13090
13072
  "default": "-1"
13091
13073
  },
@@ -13102,17 +13084,15 @@
13102
13084
  "description": "Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs."
13103
13085
  },
13104
13086
  {
13105
- "name": "d2l-tab-selected"
13106
- },
13107
- {
13108
- "name": "d2l-tab-resize"
13087
+ "name": "d2l-tab-selected",
13088
+ "description": "Dispatched when a tab is selected"
13109
13089
  }
13110
13090
  ]
13111
13091
  },
13112
13092
  {
13113
13093
  "name": "d2l-tabs",
13114
13094
  "path": "./components/tabs/tabs.js",
13115
- "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.",
13116
13096
  "attributes": [
13117
13097
  {
13118
13098
  "name": "text",
@@ -13165,11 +13145,19 @@
13165
13145
  "slots": [
13166
13146
  {
13167
13147
  "name": "",
13168
- "description": "Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
13148
+ "description": "DEPRECATED: Contains the tab panels (e.g., \"d2l-tab-panel\" components)"
13169
13149
  },
13170
13150
  {
13171
13151
  "name": "ext",
13172
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)"
13173
13161
  }
13174
13162
  ]
13175
13163
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.102.4",
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",