@brightspace-ui/core 3.26.1 → 3.27.0

package/components/alert/README.md

@@ -64,7 +64,7 @@ The `d2l-alert` component can be used to communicate important information relat
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code properties name:d2l-alert autoSize:false  -->
+<!-- docs: demo code properties name:d2l-alert sandboxTitle:'Inline Alert' autoSize:false  -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/alert/alert.js';
@@ -110,7 +110,7 @@ a pop-up at the bottom of the screen that automatically dismisses itself by defa
 <!-- docs: end best practices -->
 
 
-<!-- docs: demo code properties name:d2l-alert-toast autoSize:false -->
+<!-- docs: demo code properties name:d2l-alert-toast sandboxTitle:'Toast Alert' autoSize:false -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/alert/alert-toast.js';

package/components/backdrop/README.md

@@ -4,7 +4,7 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 
 ## Backdrop [d2l-backdrop]
 
-<!-- docs: demo code properties name:d2l-backdrop size:small -->
+<!-- docs: demo code properties name:d2l-backdrop sandboxTitle:'Backdrop' size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/breadcrumbs/README.md

@@ -81,7 +81,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 
 ## Breadcrumbs [d2l-breadcrumbs]
 
-<!-- docs: demo code properties name:d2l-breadcrumbs display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumbs sandboxTitle:'Breadcrumbs' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
@@ -103,7 +103,7 @@ Alternately, add the `compact` attribute to only display the last breadcrumb. Th
 
 ## Breadcrumb (child) [d2l-breadcrumb]
 
-<!-- docs: demo code properties name:d2l-breadcrumb display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumb sandboxTitle:'Breadcrumb' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
@@ -136,7 +136,7 @@ To make your usage of `d2l-breadcrumb` (child) accessible, use the following att
 
 Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
 
-<!-- docs: demo code properties name:d2l-breadcrumb-current-page display:block -->
+<!-- docs: demo code properties name:d2l-breadcrumb-current-page sandboxTitle:'Current Page Breadcrumb' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';

package/components/button/README.md

@@ -34,7 +34,7 @@ A Button is used to communicate and perform an action.
 
 The `d2l-button` element can be used just like the native button element, but also supports the `primary` attribute for denoting the primary button.
 
-<!-- docs: demo code properties name:d2l-button -->
+<!-- docs: demo code properties name:d2l-button sandboxTitle:'Button' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -59,7 +59,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 
 **Note:** It is strongly recommended to use `text` and `icon` as opposed to putting content in the `slot` to ensure that the recommended subtle button style is maintained.
 
-<!-- docs: demo code properties name:d2l-button-subtle -->
+<!-- docs: demo code properties name:d2l-button-subtle sandboxTitle:'Subtle Button' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-subtle.js';
@@ -103,7 +103,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 
 The `d2l-button-icon` element can be used just like the native `button`, for instances where only an icon is displayed.
 
-<!-- docs: demo code properties name:d2l-button-icon -->
+<!-- docs: demo code properties name:d2l-button-icon sandboxTitle:'Icon Button' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-icon.js';
@@ -147,7 +147,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 
 The `d2l-button-add` is for quickly adding new items at a specific location, such as when adding items to a curated list. Since the Add button is meant to be subtle, it should always be used in combination with more obvious methods to add items (like a menu or primary button).
 
-<!-- docs: demo code properties name:d2l-button-add display:block autoSize:false size:xsmall -->
+<!-- docs: demo code properties name:d2l-button-add sandboxTitle:'Add Button' display:block autoSize:false size:xsmall -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-add.js';

package/components/calendar/README.md

@@ -4,7 +4,7 @@ The `d2l-calendar` component can be used to display a responsively sized calenda
 
 ## Calendar [d2l-calendar]
 
-<!-- docs: demo code properties name:d2l-calendar display:block -->
+<!-- docs: demo code properties name:d2l-calendar sandboxTitle:'Calendar' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/calendar/calendar.js';

package/components/card/README.md

@@ -121,7 +121,7 @@ Cards are composed of 3 sections. Each card will have a content section but is n
 
 The `d2l-card` element is a container that provides specific layout using several slots such as `content`, `header`, `footer`, `badge`, and `actions`. It can also be configured as a link for navigation.
 
-<!-- docs: demo code properties name:d2l-card size:large -->
+<!-- docs: demo code properties name:d2l-card sandboxTitle:'Card' size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -183,7 +183,7 @@ See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/
 
 The `d2l-card-content-title` element is a helper for providing layout/style for a title within the `content` slot.
 
-<!-- docs: demo code properties name:d2l-card-content-title size:large -->
+<!-- docs: demo code properties name:d2l-card-content-title sandboxTitle:'Card Content - Title' size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -212,7 +212,7 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
 
 The `d2l-card-content-meta` element is a helper for providing layout/style for a meta data within the `content` slot.
 
-<!-- docs: demo code properties name:d2l-card-content-meta size:large -->
+<!-- docs: demo code properties name:d2l-card-content-meta sandboxTitle:'Card Content - Meta' size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';
@@ -248,7 +248,7 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
 
 The `d2l-card-footer-link` element is an icon link that can be placed in the `footer` slot.
 
-<!-- docs: demo code properties name:d2l-card-footer-link size:large -->
+<!-- docs: demo code properties name:d2l-card-footer-link sandboxTitle:'Card Content - Link' size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/card/card.js';

package/components/collapsible-panel/README.md

@@ -90,7 +90,7 @@ The collapsible panel is a container that can show or hide additional content. I
 
 The `d2l-collapsible-panel` element is a container that provides specific layout slots such as `before`, `header`, `summary`, `actions`, and a default slot for the expanded content.
 
-<!-- docs: demo code properties name:d2l-collapsible-panel -->
+<!-- docs: demo code properties name:d2l-collapsible-panel sandboxTitle:'Collapsible Panel' -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -208,7 +208,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-<!-- docs: demo properties name:d2l-collapsible-panel-summary-item -->
+<!-- docs: demo properties name:d2l-collapsible-panel-summary-item sandboxTitle:'Collapsible Panel - Summary Item' -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -361,7 +361,7 @@ Collapsible panels have two optional slots, `header` and `actions` that can be u
 
 Use the `d2l-collapsible-panel-group` component to automatically handle spacing and layout for multiple panels.
 
-<!-- docs: demo code properties name:d2l-collapsible-panel-group -->
+<!-- docs: demo code properties name:d2l-collapsible-panel-group sandboxTitle:'Collapsible Panel Group' -->
 ```html
 <script type="module">
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';

package/components/count-badge/README.md

@@ -17,7 +17,7 @@ Badges can be used to provide additional contextual information to users in rega
 
 The `d2l-count-badge` element is a web component to display a number count, depending on your use case different styling options are available.
 
-<!-- docs: demo code properties name:d2l-count-badge -->
+<!-- docs: demo code properties name:d2l-count-badge sandboxTitle:'Count Badge' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/count-badge/count-badge.js';
@@ -54,7 +54,7 @@ The `d2l-count-badge` element is a web component to display a number count, depe
 
 The `d2l-count-badge-icon` element is a web component to display a number count, either in a `"notification"` or `"count"` style with an icon.
 
-<!-- docs: demo code properties name:d2l-count-badge-icon -->
+<!-- docs: demo code properties name:d2l-count-badge-icon sandboxTitle:'Count Badge Icon' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';

package/components/dialog/README.md

@@ -44,7 +44,7 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code properties name:d2l-dialog autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog sandboxTitle:'Dialog' autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -155,7 +155,7 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code properties name:d2l-dialog-confirm autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog-confirm sandboxTitle:'Confirmation Dialog' autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
@@ -208,7 +208,7 @@ document.querySelector('#open').addEventListener('click', () => {
 
 The `d2l-dialog-fullscreen` element is a fullscreen variant of the generic `d2l-dialog`. It provides a slot for arbitrary content, and a `footer` slot for workflow buttons. Apply the `data-dialog-action` attribute to workflow buttons to automatically close the dialog with the action value.
 
-<!-- docs: demo code properties name:d2l-dialog-fullscreen autoSize:false display:block size:large -->
+<!-- docs: demo code properties name:d2l-dialog-fullscreen sandboxTitle:'Fullscreen Dialog' autoSize:false display:block size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/dropdown/README.md

@@ -17,7 +17,7 @@ A Dropdown is a button that opens a floating container to offer menu items or ot
 
 `d2l-dropdown` is a generic opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value `d2l-dropdown-opener`.  Wire-up is automatic.
 
-<!-- docs: demo code properties name:d2l-dropdown align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown sandboxTitle:'Dropdown' align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown.js';
@@ -58,7 +58,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 ## Opener: Dropdown Button [d2l-dropdown-button]
 `d2l-dropdown-button` is a `d2l-button` opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo code properties name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-button sandboxTitle:'Dropdown Button' align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -86,7 +86,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 ## Opener: Button Subtle [d2l-dropdown-button-subtle]
 `d2l-dropdown-button-subtle` is a `d2l-button-subtle` opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo code properties name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-button-subtle sandboxTitle:'Dropdown with Subtle Button Opener' align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
@@ -123,7 +123,7 @@ To make your `d2l-dropdown-button-subtle` accessible, use the following properti
 ## Opener: Context Menu [d2l-dropdown-context-menu]
 `d2l-dropdown-context-menu` is a simple/minimal opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo code properties name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-context-menu sandboxTitle:'Dropdown with Context Menu Opener' align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-context-menu.js';
@@ -160,7 +160,7 @@ To make your usage of `d2l-dropdown-context-menu` accessible, use the following
 ## Opener: More [d2l-dropdown-more]
 `d2l-dropdown-more` is a simple/minimal opener for dropdown content (`d2l-dropdown-content`, `d2l-dropdown-menu` or `d2l-dropdown-tabs`).
 
-<!-- docs: demo code properties name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-more sandboxTitle:'Dropdown with More Opener' align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
@@ -197,7 +197,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Container [d2l-dropdown-content]
 `d2l-dropdown-content` is a generic container for dropdown content.  It provides behavior such as sizing,  positioning, and managing focus gain/loss.
 
-<!-- docs: demo code properties name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-content sandboxTitle:'Dropdown Content - Container' align:flex-start autoSize:false autoOpen:true size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -255,7 +255,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Menu [d2l-dropdown-menu]
 `d2l-dropdown-menu` is a container for a [d2l-menu](https://github.com/BrightspaceUI/core/tree/main/components/menu) component. It provides additional support on top of `d2l-dropdown-content` for closing the menu when menu items are selected, resetting to the root of nested menus when reopening and automatic resizing when the menu resizes.
 
-<!-- docs: demo code properties name:d2l-dropdown-menu align:flex-start autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-dropdown-menu sandboxTitle:'Dropdown Content - Menu' align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';
@@ -294,7 +294,7 @@ To make your usage of `d2l-dropdown-more` accessible, use the following property
 ## Content: Tabs [d2l-dropdown-tabs]
 `d2l-dropdown-tabs` is a container for a [d2l-tabs](https://github.com/BrightspaceUI/core/tree/main/components/tabs) component. It provides additional support on top of `d2l-dropdown-content` for automatic resizing when the tab changes.
 
-<!-- docs: demo code properties name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
+<!-- docs: demo code properties name:d2l-dropdown-tabs sandboxTitle:'Dropdown Content - Tab' autoOpen:true autoSize:false align:flex-start size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button.js';

package/components/empty-state/README.md

@@ -49,7 +49,7 @@ Empty state components are used to convey that there is no data available to be
 
 The `d2l-empty-state-simple` component is an empty state component that displays a description. An [empty state action component](#d2l-empty-state-action-button) can be placed inside of the default slot to add an optional action.
 
-<!-- docs: demo code properties name:d2l-empty-state-simple -->
+<!-- docs: demo code properties name:d2l-empty-state-simple sandboxTitle:'Empty State - Simple' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-simple.js';
@@ -64,7 +64,7 @@ The `d2l-empty-state-illustrated` component is an empty state component that dis
 
 The `illustration-name` property can be set to use one of the preset illustrations or a custom SVG illustration can be added in the `illustration` slot. The catalogue of preset empty state illustrations can be found [here](#preset-empty-state-illustrations).
 
-<!-- docs: demo code properties name:d2l-empty-state-illustrated -->
+<!-- docs: demo code properties name:d2l-empty-state-illustrated sandboxTitle:'Empty State - Illustrated' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-illustrated.js';
@@ -90,7 +90,7 @@ To add the button, place a `d2l-empty-state-action-button` component inside of t
 
 The `primary` attribute can be set to render a primary button in place of the default subtle button. Note that the `primary` attribute is only valid when placed within `empty-state-illustrated` components and will have no effect on `empty-state-simple`.
 
-<!-- docs: demo code properties name:d2l-empty-state-action-button -->
+<!-- docs: demo code properties name:d2l-empty-state-action-button sandboxTitle:'Empty State Action - Button' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-action-button.js';
@@ -123,7 +123,7 @@ Use a `d2l-empty-state-action-link` to add a link that provides users with an ea
 
 To add the link, place a `d2l-empty-state-action-link` component inside of the default slot of `empty-state-simple` or `empty-state-illustrated`. Only a single action can be placed within an empty state component.
 
-<!-- docs: demo code properties name:d2l-empty-state-action-link -->
+<!-- docs: demo code properties name:d2l-empty-state-action-link sandboxTitle:'Empty State Action - Link' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/empty-state/empty-state-action-link.js';

package/components/expand-collapse/README.md

@@ -4,7 +4,7 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
 
 ## Expand Collapse Content [d2l-expand-collapse-content]
 
-<!-- docs: demo code properties name:d2l-expand-collapse-content autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-expand-collapse-content sandboxTitle:'Expand Collapse Content' autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/filter/README.md

@@ -33,7 +33,7 @@ Filter components are often used in conjuction with [tables](../../components/ta
 
 The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
 
-<!-- docs: demo code properties name:d2l-filter align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter sandboxTitle:'Filter' align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -164,7 +164,7 @@ The filter will announce changes to filter selections, search results, and when
 
 The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#d2l-filter-dimension-set-value), this will give you a selectable list of filter values.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set sandboxTitle:'Filter Dimension Set' align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -206,7 +206,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable list of filter values.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-value align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-value sandboxTitle:'Filter Dimension Set Value' align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -237,7 +237,7 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable filter value based on the `range` defined on the component, which is to be one of a set of pre-defined range options. Selection triggers the `d2l-filter-change` event, with `start-value` and `end-value` (in UTC) being included in the changes for the `selected` item.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-date-text-value align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-date-text-value sandboxTitle:'Filter Dimension Set Value - Preset Date Range' align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -301,7 +301,7 @@ The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get th
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable filter value which expands to allow the user to select a date range using either the `d2l-input-date-time-range` or `d2l-input-date-range` component (depending on the `type` of the component). Selection triggers the `d2l-filter-change` event, with `start-value` and `end-value` (in UTC) being included in the changes for the `selected` item.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value align:start autoOpen:true autoSize:false size:xlarge -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value sandboxTitle:'Filter Dimension Set Value - Date-Time Range' align:start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -398,7 +398,7 @@ Note that when using multiple filter dimensions, the counts should be updated wh
 
 The `d2l-filter-dimension-set-empty-state` component allows you to customize the empty state components that are rendered in [d2l-filter-dimension-set](#d2l-filter-dimension-set). When placed in the `d2l-filter-dimension-set` empty state slots, it will replace the component's default empty state. This component can be placed in either the `set-empty-state` or the `search-empty-state` slots.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-empty-state align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-empty-state sandboxTitle:'Filter Dimension Set Empty State' align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -434,7 +434,7 @@ The `d2l-filter-dimension-set-empty-state` component allows you to customize the
 
 A tag-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-filter`. It supports hooking up to multiple filters.
 
-<!-- docs: demo code properties name:d2l-filter-tags align:start display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-filter-tags sandboxTitle:'Filter Tags' align:start display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -505,7 +505,7 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
 
 The `d2l-filter-overflow-group` is a container for multiple filters that handles overflow on smaller screens. Overflowing filters are displayed in a single filter.
 
-<!-- docs: demo code properties name:d2l-filter-overflow-group align:start display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-filter-overflow-group sandboxTitle:'Filter Overflow Group' align:start display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';

package/components/focus-trap/README.md

@@ -6,7 +6,7 @@ This component assists with managing user focus within your web application.
 
 The `d2l-focus-trap` is a generic container that will trap user focus from leaving. Focus will cycle to the first or last focusable elements when tabbing forwards or backwards respectively.  It will also capture focus from the document when actively trapping.
 
-<!-- docs: demo code properties name:d2l-focus-trap -->
+<!-- docs: demo code properties name:d2l-focus-trap sandboxTitle:'Focus Trap' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';

package/components/html-block/README.md

@@ -8,7 +8,7 @@ The `d2l-html-block` element is a web component for displaying user-authored HTM
 
 Pass the user-authored HTML into the `html` attribute of the `d2l-html-block` and the component will stamp the content into its local DOM where styles will be applied, and math typeset.
 
-<!-- docs: demo code properties name:d2l-html-block autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-html-block sandboxTitle:'HTML Block' autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/html-block/html-block.js';
@@ -118,4 +118,4 @@ const elem = await fixture(
   html`<d2l-html-block html="..."></d2l-html-block>`,
   { mathjax: { renderLatex: true } }
 );
-```
+```

package/components/link/README.md

@@ -34,7 +34,7 @@ Same size as the standard link, but bolder.
 
 Import and use the `<d2l-link>` web component instead of the native `<a>` element:
 
-<!-- docs: demo code properties name:d2l-link -->
+<!-- docs: demo code properties name:d2l-link sandboxTitle:'Link' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/link/link.js';

package/components/list/README.md

@@ -102,7 +102,7 @@ When using `d2l-list`, the `grid` attribute will enable the table-like keyboard
 
 The `d2l-list` is the container to create a styled list of items using `d2l-list-item` or `d2l-list-item-button`. It provides the appropriate `list` semantics as well as options for displaying separators, breakpoints for responsiveness, etc.
 
-<!-- docs: demo code properties name:d2l-list display:block autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-list sandboxTitle:'List' display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -440,7 +440,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo code properties name:d2l-list-controls display:block autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-list-controls sandboxTitle:'List Controls' display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -492,7 +492,7 @@ The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` s
 
 The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, a navigation link for the primary action, and selection.
 
-<!-- docs: demo code properties name:d2l-list-item autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-list-item sandboxTitle:'List Item' autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/button/button-icon.js';
@@ -554,7 +554,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 
 The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
 
-<!-- docs: demo code properties name:d2l-list-item-button display:block -->
+<!-- docs: demo code properties name:d2l-list-item-button sandboxTitle:'List Item Button' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -640,7 +640,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 
 The `d2l-list-item-content` provides additional consistent layout for primary and secondary text in item content. It may be used with or without the `illustration` and `action` slots mentioned above.
 
-<!-- docs: demo code properties name:d2l-list-item-content display:block -->
+<!-- docs: demo code properties name:d2l-list-item-content sandboxTitle:'List Item Content' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';

package/components/loading-spinner/README.md

@@ -28,7 +28,7 @@ A loading spinner indicates that something is happening and we don't know how lo
 
 ## Loading Spinner [d2l-loading-spinner]
 
-<!-- docs: demo code properties name:d2l-loading-spinner -->
+<!-- docs: demo code properties name:d2l-loading-spinner sandboxTitle:'Loading Spinner' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/loading-spinner/loading-spinner.js';

package/components/menu/README.md

@@ -27,7 +27,7 @@ A basic menu can be defined using `d2l-menu` and a combination of menu items (e.
 
 **Note:** `d2l-menu` renders without an outer border since it's typically used in a context where a containing element defines a border (ex. `d2l-dropdown-menu` or side nav).
 
-<!-- docs: demo code properties name:d2l-menu -->
+<!-- docs: demo code properties name:d2l-menu sandboxTitle:'Menu' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -64,7 +64,7 @@ To make your usage of `d2l-menu` accessible, use the following property:
 
 The `d2l-menu-item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
 
-<!-- docs: demo code properties name:d2l-menu-item -->
+<!-- docs: demo code properties name:d2l-menu-item sandboxTitle:'Menu Item' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -116,7 +116,7 @@ To make your usage of `d2l-menu-item` accessible, use the following property:
 
 This `d2l-menu-item-link` is used for navigating. It gives users the ability to right-click and open in a new tab.
 
-<!-- docs: demo code properties name:d2l-menu-item-link -->
+<!-- docs: demo code properties name:d2l-menu-item-link sandboxTitle:'Menu Item Link' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -156,7 +156,7 @@ To make your usage of `d2l-menu-item-link` accessible, use the following propert
 
 The `d2l-menu-item-checkbox` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Multiple checkboxes can be selected at once.
 
-<!-- docs: demo code properties name:d2l-menu-item-checkbox -->
+<!-- docs: demo code properties name:d2l-menu-item-checkbox sandboxTitle:'Menu Item Checkbox' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -206,7 +206,7 @@ To make your usage of `d2l-menu-item-checkbox` accessible, use the following pro
 
 The `d2l-menu-item-radio` component is used for selection. It can be wired-up to the `d2l-menu-item-change` event. Only one radio item in a given `<d2l-menu>` may be selected at once (i.e., selecting one option will deselect the other selected `d2l-menu-item-radio` item).
 
-<!-- docs: demo code properties name:d2l-menu-item-radio -->
+<!-- docs: demo code properties name:d2l-menu-item-radio sandboxTitle:'Menu Item Radio' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
@@ -256,7 +256,7 @@ To make your usage of `d2l-menu-item-radio` accessible, use the following proper
 
 The `d2l-menu-item-separator` component can be used to semantically separate menu items.
 
-<!-- docs: demo code properties name:d2l-menu-item-separator -->
+<!-- docs: demo code properties name:d2l-menu-item-separator sandboxTitle:'Menu Item Separator' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';

package/components/meter/README.md

@@ -36,7 +36,7 @@ Meters are a visually engaging way to communicate progress or measurements.
 
 Linear meters show a horizontal progress bar.
 
-<!-- docs: demo code properties name:d2l-meter-linear -->
+<!-- docs: demo code properties name:d2l-meter-linear sandboxTitle:'Linear Meter' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-linear.js';
@@ -68,7 +68,7 @@ Linear meters show a horizontal progress bar.
 
 Radial meters appear as a half circle. They have more visual weight than a linear meter and should only be used when the data is central to the user's task.
 
-<!-- docs: demo code properties name:d2l-meter-radial size:medium -->
+<!-- docs: demo code properties name:d2l-meter-radial sandboxTitle:'Radial Meter' size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-radial.js';
@@ -92,7 +92,7 @@ Radial meters appear as a half circle. They have more visual weight than a line
 
 Circle meters display data in a compact circle format, so they're useful when horizontal space is at a premium.
 
-<!-- docs: demo code properties name:d2l-meter-circle -->
+<!-- docs: demo code properties name:d2l-meter-circle sandboxTitle:'Circular Meter' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/meter/meter-circle.js';

package/components/more-less/README.md

@@ -4,7 +4,7 @@ The `d2l-more-less` element can be used to minimize the display of long content,
 
 ## More-Less [d2l-more-less]
 
-<!-- docs: demo code properties name:d2l-more-less -->
+<!-- docs: demo code properties name:d2l-more-less sandboxTitle:'More-Less' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/more-less/more-less.js';

package/components/object-property-list/README.md

@@ -36,7 +36,7 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
 
 An object property list can be defined using `d2l-object-property-list` and a combination of items (e.g., `d2l-object-property-list-item`, `d2l-object-property-list-item-link`).
 
-<!-- docs: demo code properties name:d2l-object-property-list -->
+<!-- docs: demo code properties name:d2l-object-property-list sandboxTitle:'Object Property List' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -79,7 +79,7 @@ The object property list is designed to wrap in an inline manner if the items ar
 
 The `d2l-object-property-list-item` component is the basic type of item for an object property list, displaying text and an optional leading icon.
 
-<!-- docs: demo code properties name:d2l-object-property-list-item -->
+<!-- docs: demo code properties name:d2l-object-property-list-item sandboxTitle:'Object Property List Item' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -105,7 +105,7 @@ The `d2l-object-property-list-item` component is the basic type of item for an o
 
 The `d2l-object-property-list-item-link` component is a link item for the object property list. It displays text as a hyperlink, with an optional leading icon.
 
-<!-- docs: demo code properties name:d2l-object-property-list-item-link -->
+<!-- docs: demo code properties name:d2l-object-property-list-item-link sandboxTitle:'Object Property List Link Item' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
@@ -134,7 +134,7 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 
 Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.
 
-<!-- docs: demo code properties name:d2l-status-indicator -->
+<!-- docs: demo code properties name:d2l-status-indicator sandboxTitle:'Status Indicator' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';

package/components/offscreen/README.md

@@ -6,7 +6,7 @@ Positioning content off-screen is a valuable accessibility technique that allows
 
 Import the `<d2l-offscreen>` web component and place your content within the default slot to position it off-screen. The content will be hidden in the UI but still discoverable by screen reader users.
 
-<!-- docs: demo code properties name:d2l-offscreen -->
+<!-- docs: demo code properties name:d2l-offscreen sandboxTitle:'Offscreen Component' -->
 ```html
 <!-- docs: start hidden content -->
 <style>

package/components/overflow-group/README.md

@@ -30,7 +30,7 @@ The `d2l-overflow-group` element can be used to add responsiveness to a set of b
 ## 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 autoSize:false display:block size:medium -->
+<!-- docs: demo code properties name:d2l-overflow-group sandboxTitle:'Overflow Group' autoSize:false display:block size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/overflow-group/overflow-group.js';

package/components/scroll-wrapper/README.md

@@ -5,7 +5,7 @@ Scroll containers can be used to control how content acts when overflowing its c
 
 The `d2l-scroll-wrapper` element can be used to wrap content which may overflow its horizontal boundaries, providing left/right scroll buttons.
 
-<!-- docs: demo code properties name:d2l-scroll-wrapper -->
+<!-- docs: demo code properties name:d2l-scroll-wrapper sandboxTitle:'Scroll Wrapper' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/scroll-wrapper/scroll-wrapper.js';

package/components/selection/README.md

@@ -12,7 +12,7 @@ The `SelectionMixin` enables the creation of custom selection control components
 
 The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
 
-<!-- docs: demo code properties name:d2l-demo-selection display:block -->
+<!-- docs: demo code properties name:d2l-demo-selection sandboxTitle:'Selection Mixin' display:block -->
 ```html
 <script type="module">
   import { css, html, LitElement } from 'lit';
@@ -107,7 +107,7 @@ Define a custom web component that extends the `SelectionMixin`. The selection c
 
 The `d2l-selection-action` is an optional component that provides a button for actions associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
 
-<!-- docs: demo code properties name:d2l-selection-action -->
+<!-- docs: demo code properties name:d2l-selection-action sandboxTitle:'Selection Action' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -136,7 +136,7 @@ The `d2l-selection-action` is an optional component that provides a button for a
 
 The `d2l-selection-action-dropdown` is an optional component that provides a button opener for dropdown content associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the opener should be non-interactive if nothing is selected.
 
-<!-- docs: demo code properties name:d2l-selection-action-dropdown align:baseline -->
+<!-- docs: demo code properties name:d2l-selection-action-dropdown sandboxTitle:'Selection Action Dropdown' align:baseline -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
@@ -166,7 +166,7 @@ The `d2l-selection-action-dropdown` is an optional component that provides a but
 
 The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the [selection control](#selectionmixin) (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the menu item should be non-interactive if nothing is selected. This component enables the app to define an opener that is enabled regardless of the selection state, while having a menu containing one or more menu items that `requires-selection`.
 
-<!-- docs: demo code properties name:d2l-selection-action-menu-item autoSize:false size:medium align:baseline -->
+<!-- docs: demo code properties name:d2l-selection-action-menu-item sandboxTitle:'Selection Action Menu Item' autoSize:false size:medium align:baseline -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
@@ -208,7 +208,7 @@ If `d2l-selection-input` is placed within a selection control that specifies `se
 
 Note: `d2l-list-item` already provides a selection input for selectable list items.
 
-<!-- docs: demo code properties name:d2l-selection-input display:block -->
+<!-- docs: demo code properties name:d2l-selection-input sandboxTitle:'Selection Input' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-input.js';
@@ -266,7 +266,7 @@ The `d2l-selection-select-all` is an optional component that provides a checkbox
 
 The `d2l-selection-select-all` component may be placed inside the selection control, or in the same DOM scope with the `selection-for` attribute set to the id of that component. In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-select-all` from outside of the selection control component.
 
-<!-- docs: demo code properties name:d2l-selection-select-all display:block -->
+<!-- docs: demo code properties name:d2l-selection-select-all sandboxTitle:'Selection Select All' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -351,7 +351,7 @@ The `d2l-selection-summary` is an optional component that shows a simple count o
 
 The `d2l-selection-summary` component may be placed inside the selection control, or in the same DOM scope with the `selection-for` attribute set to the id of that component. In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-summary` from outside of the selection control component.
 
-<!-- docs: demo code properties name:d2l-selection-summary display:block -->
+<!-- docs: demo code properties name:d2l-selection-summary sandboxTitle:'Selection Summary' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -436,7 +436,7 @@ The `d2l-selection-controls` provides a standardized wrapper to display selectio
 
 When using lists, use the list-specific `d2l-list-controls` instead, which extends this component's behaviour.
 
-<!-- docs: demo code properties name:d2l-selection-controls display:block autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-selection-controls sandboxTitle:'Selection Controls' display:block autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';

package/components/status-indicator/README.md

@@ -58,7 +58,7 @@ Status Indicators are used to communicate the status of an item. They are non-in
 
 ## Status Indicator [d2l-status-indicator]
 
-<!-- docs: demo code properties name:d2l-status-indicator -->
+<!-- docs: demo code properties name:d2l-status-indicator sandboxTitle:'Status Indicator' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';

package/components/switch/README.md

@@ -30,7 +30,7 @@ A switch is used to toggle between two states, on and off, just like a light swi
 ## Switch [d2l-switch]
 The `d2l-switch` element is a generic switch with on/off semantics.
 
-<!-- docs: demo code properties name:d2l-switch autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-switch sandboxTitle:'Switch' autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch.js';
@@ -58,7 +58,7 @@ The d2l-switch-visibility component is a special variant for toggling the visibi
 
 See also [Visibility Switch with Conditions](https://daylight.d2l.dev/components/switch/#visibility-switch-with-conditions).
 
-<!-- docs: demo code properties name:d2l-switch-visibility autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-switch-visibility sandboxTitle:'Visibility Switch' autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/switch/switch-visibility.js';

package/components/table/README.md

@@ -45,7 +45,7 @@ If the viewport is very narrow — for example, on a mobile device — it may be
 
 The `d2l-table-wrapper` element can be combined with table styles to apply default/light styling, row selection styles, overflow scrolling and sticky headers to native `<table>` elements within your Lit components.
 
-<!-- docs: demo code properties name:d2l-table-wrapper display:block -->
+<!-- docs: demo code properties name:d2l-table-wrapper sandboxTitle:'Table Wrapper' display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -244,7 +244,7 @@ Note that the example below hides much of the implementation. See the code in [M
 
 This is a radio menu item to be used within the `d2l-table-col-sort-button` component for a [multi-faceted sort](#multi-faceted-sort-button).
 
-<!-- docs: demo code properties autoSize:false align:start name:d2l-table-col-sort-button-item -->
+<!-- docs: demo code properties autoSize:false align:start name:d2l-table-col-sort-button-item sandboxTitle:'Table Sortable Column Button - Slotted Item' -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/table/table-col-sort-button.js';
@@ -434,7 +434,7 @@ Load-More paging functionality can be implemented in tables by placing a `d2l-pa
 
 The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `controls` slot to provide a selection summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: demo code properties name:d2l-table-controls display:block -->
+<!-- docs: demo code properties name:d2l-table-controls sandboxTitle:'Table Controls' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';

package/components/tabs/README.md

@@ -39,7 +39,7 @@ Tabs are used to present related information in mutually exclusive panels, allow
 
 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.
 
-<!-- docs: demo code properties name:d2l-tabs display:block -->
+<!-- docs: demo code properties name:d2l-tabs sandboxTitle:'Tab' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tabs/tabs.js';
@@ -69,7 +69,7 @@ The `d2l-tabs` element is a web component for tabbed content. It provides the `d
 ## Tab Panels [d2l-tab-panel]
 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.
 
-<!-- docs: demo code properties name:d2l-tab-panel display:block -->
+<!-- docs: demo code properties name:d2l-tab-panel sandboxTitle:'Tab Panels' display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tabs/tabs.js';

package/components/tag-list/README.md

@@ -30,7 +30,7 @@ The `d2l-tag-list` element can take a combination of any type of `d2l-tag-list-i
 
 The corresponding `*-clear` event must be listened to for whatever component (`d2l-tag-list` or `d2l-tag-list-item`) has `clearable` on it and that listener must handle individual `d2l-tag-list-item` deletion as well as potentially focus behavior (see individual event descriptions).
 
-<!-- docs: demo code properties name:d2l-tag-list autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-tag-list sandboxTitle:'Tag List' autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';
@@ -60,7 +60,7 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
 ## Tag List Item [d2l-tag-list-item]
 The `d2l-tag-list-item` provides the appropriate semantics and styling for children within a tag list. Tag List items do not work outside of a Tag List and should not be used on their own.
 
-<!-- docs: demo code properties name:d2l-tag-list-item autoSize:false display:block size:small -->
+<!-- docs: demo code properties name:d2l-tag-list-item sandboxTitle:'Tag List Item' autoSize:false display:block size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tag-list/tag-list.js';

package/components/tooltip/README.md

@@ -74,13 +74,13 @@ The `d2l-tooltip` component is used to display additional information when users
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code properties name:d2l-tooltip autoSize:false size:small -->
+<!-- docs: demo code properties name:d2l-tooltip sandboxTitle:'Tooltip' autoSize:false size:small -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/inputs/input-text.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
-<!-- docs: start hidden content --> 
+<!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
     setTimeout(function() {
@@ -141,7 +141,7 @@ In the following example to constrain the tooltip to the dashed boundary we can
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
-<!-- docs: start hidden content --> 
+<!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
     setTimeout(function() {
@@ -193,12 +193,12 @@ The `d2l-tooltip-help` component is used to display additional information when
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: demo code properties name:d2l-tooltip-help autoSize:false size:medium -->
+<!-- docs: demo code properties name:d2l-tooltip-help sandboxTitle:'Help Tooltip' autoSize:false size:medium -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
 </script>
-<!-- docs: start hidden content --> 
+<!-- docs: start hidden content -->
 <script>
   window.addEventListener('load', function () {
     setTimeout(function() {
@@ -227,10 +227,10 @@ The `d2l-tooltip-help` component is used to display additional information when
 
 ### Using in a Sentence or Paragraph
 
-When placing a help tooltip next to other text as part of a sentence or a paragraph, use `inherit-font-style` to align its style with the adjacent text 
+When placing a help tooltip next to other text as part of a sentence or a paragraph, use `inherit-font-style` to align its style with the adjacent text
 (see the demo example above).
 
-Note that the help tooltip does not support being used *within* a language term, due to challenges with translation.   
-Instead, your opener text will need to be a separate language term appearing before or after the other text and making sense on its own. 
+Note that the help tooltip does not support being used *within* a language term, due to challenges with translation.
+Instead, your opener text will need to be a separate language term appearing before or after the other text and making sense on its own.
 
 See also the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example use case.

package/package.json

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

package/templates/primary-secondary/README.md

@@ -16,7 +16,7 @@ If no nodes are assigned to the `footer` slot, the footer is hidden.
 
 Note: this template automatically includes `<header>`, `<main>`, `<aside>` and `<footer>` elements, so there's no need to include them inside the various slots.
 
-<!-- docs: demo code properties name:d2l-template-primary-secondary autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-template-primary-secondary sandboxTitle:'Templates - Primary-Secondary' autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/templates/primary-secondary/primary-secondary.js';