@brightspace-ui/core 3.28.6 → 3.29.0

package/components/button/README.md

@@ -170,7 +170,7 @@ Floating workflow buttons `<d2l-floating-buttons>` cause buttons to float or 'do
 
 The best time to use floating workflow buttons is when users need immediate access to the buttons without scrolling. An example is a long or complex form page where it's common for users to make frequent isolated edits rather than sequentially completing the form.
 
-<!-- docs: demo code properties name:d2l-floating-buttons autoSize:false display:block size:xlarge -->
+<!-- docs: demo code properties name:d2l-floating-buttons sandboxTitle:'Floating Buttons' autoSize:false display:block size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/floating-buttons.js';

package/components/form/docs/form.md

@@ -50,7 +50,7 @@ It differs from the native HTML `form` element in 4 ways:
 
 If you're looking to emulate native form element submission, `d2l-form-native` may be more appropriate.
 
-<!-- docs: demo code properties name:d2l-form autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-form sandboxTitle:'Form' autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/form/form.js';
@@ -184,7 +184,7 @@ It differs from the native HTML `form` element in 2 ways:
 
 If you're looking to submit form data via your own API calls or nest multiple forms within each other, `d2l-form` may be more appropriate.
 
-<!-- docs: demo code properties name:d2l-form-native autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-form-native sandboxTitle:'Native Form' autoSize:false display:block size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/form/form-native.js';

package/components/inputs/docs/input-checkbox.md

@@ -31,7 +31,7 @@ Checkboxes are used in forms to toggle an option or preference.
 
 The `<d2l-input-checkbox>` element can be used to get a checkbox and optional visible label.
 
-<!-- docs: demo code properties name:d2l-input-checkbox display:block -->
+<!-- docs: demo code properties name:d2l-input-checkbox sandboxTitle:'Checkbox Input' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-checkbox.js';

package/components/inputs/docs/input-color.md

@@ -16,7 +16,7 @@ Color inputs allow users to select a color from a palette and perform color cont
 
 The `<d2l-input-color>` will open a dialog to allow the user to select a color from a palette.
 
-<!-- docs: demo code properties name:d2l-input-color -->
+<!-- docs: demo code properties name:d2l-input-color sandboxTitle:'Color Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-color.js';

package/components/inputs/docs/input-date-time.md

@@ -31,7 +31,7 @@ Use the `<d2l-input-date>` component when users need to choose a single date. It
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date sandboxTitle:'Date Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date.js';
@@ -81,7 +81,7 @@ Use the `<d2l-input-date-range>` component when users need to enter two dates i
 
 Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-MM-DD`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-range sandboxTitle:'Date Range Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-range.js';
@@ -137,7 +137,7 @@ Use the `<d2l-input-time>` component when users need to enter a time, without a
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-time align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time sandboxTitle:'Time Input' align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time.js';
@@ -187,7 +187,7 @@ Use the `<d2l-input-time-range>` component when users need to enter two times in
 
 Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and should be [localized to the user's timezone](#timezone) (if applicable).
 
-<!-- docs: demo code properties name:d2l-input-time-range align:flex-start autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-input-time-range sandboxTitle:'Time Range Input' align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-time-range.js';
@@ -239,7 +239,7 @@ Use the `<d2l-input-date-time>` component when users need to enter a single dat
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo code properties name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time sandboxTitle:'Date-Time Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time.js';
@@ -290,7 +290,7 @@ Use the `<d2l-input-date-time-range>` component when users need to enter two d
 
 Note: All `*value` properties should be in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time (i.e., do NOT localize to the user's timezone).
 
-<!-- docs: demo code properties name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-input-date-time-range sandboxTitle:'Date-Time Range Input' align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-date-time-range.js';

package/components/inputs/docs/input-numeric.md

@@ -21,7 +21,7 @@ Numeric inputs allow users to input numbers. These include the more generic `d2l
 
 The `<d2l-input-number>` element is similar to `<d2l-input-text>`, except it's intended for inputting numbers only.
 
-<!-- docs: demo code properties name:d2l-input-number -->
+<!-- docs: demo code properties name:d2l-input-number sandboxTitle:'Number Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-number.js';
@@ -101,7 +101,7 @@ To accept only integer numbers, set `max-fraction-digits` to zero:
 
 The `<d2l-input-percent>` element is similar to `<d2l-input-number>`, except it provides a "%" symbol beside the number.
 
-<!-- docs: demo code properties name:d2l-input-percent -->
+<!-- docs: demo code properties name:d2l-input-percent sandboxTitle:'Percent Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-percent.js';

package/components/inputs/docs/input-search.md

@@ -35,7 +35,7 @@ Search inputs allow users to input text, execute a search, and clear results. A
 
 For text searches use `<d2l-input-search>`, which wraps the native `<input type="search">` element.
 
-<!-- docs: demo code properties name:d2l-input-search -->
+<!-- docs: demo code properties name:d2l-input-search sandboxTitle:'Search Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-search.js';

package/components/inputs/docs/input-text.md

@@ -49,7 +49,7 @@ Therefore in text inputs, placeholder text is a light colour (Mica), which fails
 
 The `<d2l-input-text>` element is a simple wrapper around the native `<input type="text">` tag. It's intended primarily for inputting generic text, email addresses and URLs.
 
-<!-- docs: demo code properties name:d2l-input-text -->
+<!-- docs: demo code properties name:d2l-input-text sandboxTitle:'Text Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
@@ -168,7 +168,7 @@ As an alternative to using the `<d2l-input-text>` custom element, you can style
 
 The `<d2l-input-textarea>` is a wrapper around the native `<textarea>` element that provides auto-grow and validation behaviours. It's intended for inputting unformatted multi-line text.
 
-<!-- docs: demo code properties name:d2l-input-textarea -->
+<!-- docs: demo code properties name:d2l-input-textarea sandboxTitle:'Textarea Input' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-textarea.js';

package/components/loading-spinner/README.md

@@ -2,7 +2,7 @@
 
 A loading spinner indicates that something is happening and we don't know how long it will take.
 
-<!-- docs: demo name:d2l-loading-spinner -->
+<!-- docs: demo name:d2l-loading-spinner sandboxTitle:'Loading Spinner' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';

package/components/meter/meter-circle.js

@@ -36,7 +36,7 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
 		}
 		.d2l-meter-circle-text {
 			fill: var(--d2l-color-ferrite);
-			font-size: 0.6rem;
+			font-size: 0.55rem;
 		}
 		:host([foreground-light]) .d2l-meter-circle-text {
 			fill: white;

package/components/overflow-group/README.md

@@ -1,7 +1,7 @@
 # Overflow Groups
-The `d2l-overflow-group` element can be used to add responsiveness to a set of buttons, links or menus. The `OverflowGroupMixin` allows for using the chomping logic without having to use those specific element types.
+An Overflow Group adds responsive behaviour to a group of buttons, links, or menus.
 
-<!-- docs: demo autoSize:false display:block size:medium -->
+<!-- docs: demo autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/overflow-group/overflow-group.js';
@@ -26,11 +26,27 @@ The `d2l-overflow-group` element can be used to add responsiveness to a set of b
 	<d2l-button>Delete</d2l-button>
 </d2l-overflow-group>
 ```
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use when grouping 3 or more adjacent actions
+* Consider whether visible actions can be reduced
+* Use `max-to-show` to set an upper limit on how many actions are displayed before overflowing; this can prevent users from feeling overwhelmed with top-level choices
+* Use the `subtle` `opener-style` if the actions are [Subtle Buttons](../../components/button#d2l-button-subtle)
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Avoid using `min-to-show` unless users are heavily impacted when the first 1 or 2 actions overflow into the More Actions menu
+* Don't use the `icon` `opener-type` unless it's for page-level actions in the top right corner of the page, or if space is severely limited
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
 
 ## Overflow Group [d2l-overflow-group]
+
 Items added to this container element will no longer wrap onto a second line when the container becomes too small, but will be added to a dropdown menu with configurable styling.
 
-<!-- docs: demo code properties name:d2l-overflow-group sandboxTitle:'Overflow Group' autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-overflow-group sandboxTitle:'Overflow Group' autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/overflow-group/overflow-group.js';
@@ -108,3 +124,9 @@ getOverflowContainer(overflowItems, mini) {
   else return html`<d2l-dropdown-button text="Overflow Menu"><d2l-dropdown-menu>${overflowItems}</d2l-dropdown-menu></d2l-dropdown-button>`;
 }
 ```
+
+## Accessibility
+
+Navigation and focus order are impacted when items overflow the viewport; they are physically moved into the More Actions menu. Since this effect is not limited to visual presentation, it affects both screen reader users and sighted users equally.
+
+The accessibility and keyboard interaction of the More Actions menu aligns with [W3C's best practices for menus](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) — see [Menu](../menu) for more information.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.28.6",
+  "version": "3.29.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",