@brightspace-ui/core 2.26.2 → 2.27.1

package/components/alert/README.md

@@ -63,10 +63,6 @@ The `d2l-alert` component can be used to communicate important information relat
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: start hidden content -->
-![screenshot of a basic alert](./screenshots/alert.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-alert autoSize:false  -->
 ```html
 <script type="module">

package/components/breadcrumbs/README.md

@@ -2,10 +2,6 @@
 
 Breadcrumbs are a way-finding tool that helps users understand where they are within an application, while also offering an easy way to navigate "up" to higher level pages.
 
-<!-- docs: start hidden content -->
-![screenshot of d2l-breadcrumbs component](./screenshots/basic.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo display:block -->
 ```html
 <script type="module">
@@ -53,10 +49,6 @@ This works well for mobile or other touch devices but not as well for mouse or k
 
 ### Limited Width
 
-<!-- docs: start hidden content -->
-![screenshot of d2l-breadcrumbs component limited width](./screenshots/limited-width.png)
-<!-- docs: end hidden content -->
-
 Set a `max-width` to constrain breadcrumbs to a particular width:
 
 <!-- docs: demo code display:block -->
@@ -72,10 +64,6 @@ Set a `max-width` to constrain breadcrumbs to a particular width:
 
 ### Compact Mode
 
-<!-- docs: start hidden content -->
-![screenshot of d2l-breadcrumbs component in compact mode](./screenshots/compact.png)
-<!-- docs: end hidden content -->
-
 Alternately, add the `compact` attribute to only display the last breadcrumb. The `d2l-breadcrumb-current-page` will be hidden:
 
 <!-- docs: demo code display:block -->

package/components/button/README.md

@@ -34,10 +34,6 @@ 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: start hidden content -->
-![Button](./screenshots/button.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-button -->
 ```html
 <script type="module">
@@ -73,10 +69,6 @@ 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: start hidden content -->
-![Subtle Button](./screenshots/button-subtle.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-button-subtle -->
 ```html
 <script type="module">
@@ -113,10 +105,6 @@ To make your `d2l-button-subtle` accessible, use the following properties when a
 
 The `d2l-button-icon` element can be used just like the native `button`, for instances where only an icon is displayed.
 
-<!-- docs: start hidden content -->
-![Icon Button](./screenshots/button-icon.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-button-icon -->
 ```html
 <script type="module">

package/components/button/floating-buttons.md

@@ -25,10 +25,6 @@ Floating workflow buttons behavior can be added by using the `<d2l-floating-butt
 </d2l-floating-buttons>
 ```
 
-<!-- docs: start hidden content -->
-![Floating Buttons](./screenshots/floating-buttons.png?raw=true)
-<!-- docs: end hidden content -->
-
 ## Floating Buttons [d2l-floating-buttons]
 
 <!-- docs: demo live name:d2l-floating-buttons autoSize:false display:block size:medium -->

package/components/calendar/README.md

@@ -2,10 +2,6 @@
 
 The `d2l-calendar` component can be used to display a responsively sized calendar that allows for date selection. It indicates the currently selected date if `selected-value` is specified, or if the user selects a date.
 
-<!-- docs: start hidden content -->
-![Calendar](./screenshots/calendar.png?raw=true)
-<!-- docs: end hidden content -->
-
 ## Calendar [d2l-calendar]
 
 <!-- docs: demo live name:d2l-calendar display:block -->

package/components/card/README.md

@@ -107,10 +107,6 @@ 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: start hidden content -->
-![Card](./screenshots/card.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-card size:large -->
 ```html
 <script type="module">

package/components/colors/README.md

@@ -12,18 +12,6 @@ Run the demo page to see the full palette. See [colors.js](colors.js) for the va
 </script>
 ```
 
-## Basic Greys
-
-![Basic Grey Colors](./screenshots/basic-greys.png?raw=true)
-
-## Primary Accent
-
-![Primary Accent Colors](./screenshots/primary-accents.png?raw=true)
-
-## Feedback
-
-![Feedback Colors](./screenshots/feedback.png?raw=true)
-
 ## Future Enhancements
 
 Looking for an enhancement not listed here? Create a GitHub issue!

package/components/count-badge/README.md

@@ -17,11 +17,6 @@ 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: start hidden content -->
-![Notification Badge](./screenshots/count-badge-notification-small.png?raw=true) -->
-![Count Badge](./screenshots/count-badge-count-large.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-count-badge -->
 ```html
 <script type="module">
@@ -59,10 +54,6 @@ 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: start hidden content -->
-![Count Badge with icon](./screenshots/count-badge-icon.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-count-badge-icon -->
 ```html
 <script type="module">

package/components/dialog/README.md

@@ -43,10 +43,6 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: start hidden content -->
-![Dialog](./screenshots/dialog.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dialog autoSize:false display:block size:large -->
 ```html
 <script type="module">
@@ -157,10 +153,6 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-<!-- docs: start hidden content -->
-![Confirmation Dialog](./screenshots/dialog-confirm.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dialog-confirm autoSize:false display:block size:large -->
 ```html
 <script type="module">
@@ -214,10 +206,6 @@ 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: start hidden content -->
-![Fullscreen Dialog](./screenshots/dialog-fullscreen.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dialog-fullscreen autoSize:false display:block size:large -->
 ```html
 <script type="module">

package/components/dropdown/README.md

@@ -58,10 +58,6 @@ 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: start hidden content -->
-![screenshot the basic dropdown-button opener](./screenshots/dropdown-button.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-button align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -90,10 +86,6 @@ 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: start hidden content -->
-![screenshot the basic dropdown-button-subtle opener](./screenshots/dropdown-button-subtle.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-button-subtle align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -131,10 +123,6 @@ 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: start hidden content -->
-![screenshot the basic dropdown-context-menu opener](./screenshots/dropdown-context-menu.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-context-menu align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -172,10 +160,6 @@ 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: start hidden content -->
-![screenshot the basic dropdown-more opener](./screenshots/dropdown-more.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-more align:flex-start autoOpen:true autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -213,11 +197,6 @@ 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: start hidden content -->
-![screenshot the basic dropdown-content](./screenshots/dropdown-content.png)
-![screenshot the dropdown-content with mobile-tray="right"](./screenshots/dropdown-content-mobile-tray.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-content align:flex-start autoSize:false autoOpen:true size:medium -->
 ```html
 <script type="module">
@@ -276,10 +255,6 @@ 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](../menu/README.md) 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: start hidden content -->
-![screenshot the basic dropdown-menu](./screenshots/dropdown-menu.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-menu align:flex-start autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -319,10 +294,6 @@ 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/tabs) component. It provides additional support on top of `d2l-dropdown-content` for automatic resizing when the tab changes.
 
-<!-- docs: start hidden content -->
-![screenshot the basic dropdown-tabs](./screenshots/dropdown-tabs.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-dropdown-tabs autoOpen:true autoSize:false align:flex-start size:large -->
 ```html
 <script type="module">

package/components/expand-collapse/README.md

@@ -4,10 +4,6 @@
 
 The `d2l-expand-collapse-content` element can be used to create expandable and collapsible content. This component only provides the logic to expand and collapse the content; controlling when and how it expands or collapses is the responsibility of the user.
 
-<!-- docs: start hidden content -->
-![Expand Collapse Content](./screenshots/expand-collapse-content.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-expand-collapse-content autoSize:false display:block size:small -->
 ```html
 <script type="module">
@@ -48,10 +44,6 @@ To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expan
 
 The `d2l-more-less` element can be used to minimize the display of long content, while providing a way to reveal the full content.
 
-<!-- docs: start hidden content -->
-![More-Less](./screenshots/more-less.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-more-less -->
 ```html
 <script type="module">

package/components/filter/README.md

@@ -2,11 +2,6 @@
 
 Filter components are often used in conjuction with [tables](../../components/table) and allow users to select a subset of the presented data based on a set of parameters. Filter dimensions provide methods for entering parameters for a wide range of data types.
 
-<!-- docs: start hidden content -->
-Filter with multiple dimensions:
-![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
@@ -71,11 +66,6 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 ### Single Vs Multi Dimensional
 A filter can be a single dimension (like picking from a list of courses) or offer multiple dimensions (filter by role, or department, or something else). Single-dimension filters can be used side-by-side to promote filters that are more commonly used, while tucking less-used filters into a multi-dimensional filter.
 
-<!-- docs: start hidden content -->
-Filter with a single dimension:
-![Filters with single dimension](./screenshots/filter.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo code align:start autoSize:false size:large -->
 ```html
 <script type="module">
@@ -173,11 +163,6 @@ 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](#filter-dimension%3A-set-value-%5Bd2l-filter-dimension-set-value%5D), this will give you a selectable list of filter values.
 
-<!-- docs: start hidden content -->
-Set dimension on mobile:
-![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-filter-dimension-set align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">

package/components/form/docs/form-element-nesting.md

@@ -145,8 +145,6 @@ get validationMessage() {
 
 **5. Prevent tooltip overlap:**
 
-![screenshot of a two validation tooltips overlapping](../screenshots/nesting-tooltip-conflict.png)
-
 Now that we have the validation logic for the parent and nested custom form elements, we need to make sure their validation tooltips don't overlap. To do this we will hide the tooltip using the `childErrors` `Map` which will tell us if any of the nested form elements are currently displaying validation errors.
 
 ```javascript
@@ -165,8 +163,6 @@ render() {
 
 **6: Adding invalid styling for the nested custom form elements:**
 
-![screenshot of a component that is invalid but looks valid](../screenshots/nesting-invalid-styling.png)
-
 Now that the tooltips no longer overlap, we want to ensure the nested `input-text` elements look invalid even if only the parent is actually invalid. To do this, we will use the `forceInvalid` property to force the nested elements to look invalid when the parent is invalid.
 
 ```javascript

package/components/form/docs/form.md

@@ -1,9 +1,5 @@
 # Form Components
 
-<!-- docs: start hidden content -->
-![screenshot of a form-native with a text input and select input](../screenshots/form-native.gif)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo -->
 ```html
 <script type="module">

package/components/inputs/README.md

@@ -18,8 +18,6 @@ Groups of inputs (like checkboxes or radios) should be wrapped in a `<fieldset>`
 
 ### Visible labels using the `<label>` element
 
-![example screenshot of input label](./screenshots/label.png?raw=true)
-
 Import the label styles and `RtlMixin` and include them in your component:
 
 ```javascript
@@ -55,8 +53,6 @@ Alternately, associate the `<label>` with the input using the `for` and `id` att
 
 For required inputs, add the `d2l-input-label-required` CSS class to the label to get a visual indicator. Don't forget to add `aria-required="true"` to the input so that assistive technology is aware as well.
 
-![example screenshot of required input](./screenshots/label-required.png?raw=true)
-
 ```html
 <label for="myInput" class="d2l-input-label d2l-input-label-required">City</label>
 <select id="myInput" aria-required="true">...</select>

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

@@ -2,10 +2,6 @@
 
 Checkboxes are used in forms to toggle an option or preference.
 
-<!-- docs: start hidden content -->
-![example screenshot of checkbox input](../screenshots/checkbox.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo -->
 ```html
 <script type="module">
@@ -35,10 +31,6 @@ 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: start hidden content -->
-![example screenshot of checkbox input](../screenshots/checkbox.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-checkbox display:block -->
 ```html
 <script type="module">

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

@@ -31,10 +31,6 @@ 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: start hidden content -->
-![example screenshot of date input](../screenshots/date.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-date align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
@@ -81,10 +77,6 @@ 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: start hidden content -->
-![example screenshot of date range input](../screenshots/date-range.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-date-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
@@ -137,10 +129,6 @@ 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: start hidden content -->
-![example screenshot of time input](../screenshots/time.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-time align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
@@ -187,10 +175,6 @@ 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: start hidden content -->
-![example screenshot of time range input](../screenshots/time-range.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-time-range align:flex-start autoSize:false size:large -->
 ```html
 <script type="module">
@@ -239,10 +223,6 @@ 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: start hidden content -->
-![example screenshot of date input](../screenshots/date-time.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-date-time align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">
@@ -290,10 +270,6 @@ 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: start hidden content -->
-![example screenshot of date-time range input](../screenshots/date-time-range.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-date-time-range align:flex-start autoSize:false size:xlarge -->
 ```html
 <script type="module">

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

@@ -21,10 +21,6 @@ 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: start hidden content -->
-![example screenshot of number input](../screenshots/number.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-number -->
 ```html
 <script type="module">
@@ -103,10 +99,6 @@ 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: start hidden content -->
-![example screenshot of number input](../screenshots/percent.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-percent -->
 ```html
 <script type="module">

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

@@ -2,10 +2,6 @@
 
 Radio Buttons are used in forms to offer a single choice among mutually exclusive options.
 
-<!-- docs: start hidden content -->
-![example screenshot of radio inputs](../screenshots/radio.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo display:block -->
 ```html
 <script type="module">

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

@@ -2,10 +2,6 @@
 
 Search inputs allow users to input text, execute a search, and clear results. A search input may be used in conjunction with filters, sort, and/or auto-complete.
 
-<!-- docs: start hidden content -->
-![example screenshot of search input](../screenshots/search.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo -->
 ```html
 <script type="module">

package/components/inputs/docs/input-select-styles.md

@@ -50,10 +50,6 @@ Toggling progressive disclosure is OK
 
 Native `<select>` elements can be styled by importing `input-select-styles.js` into your LitElement and applying the `d2l-input-select` CSS class.
 
-<!-- docs: start hidden content -->
-![example screenshot of select inputs](../screenshots/select.gif?raw=true)
-<!-- docs: end hidden content -->
-
 Note: in order for RTL to function correctly, make sure your component uses the `RtlMixin`.
 
 <!-- docs: demo live name:d2l-test-input-select -->

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

@@ -49,10 +49,6 @@ 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: start hidden content -->
-![example screenshot of text input](../screenshots/text.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-text -->
 ```html
 <script type="module">
@@ -172,10 +168,6 @@ 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: start hidden content -->
-![example screenshot of text input](../screenshots/textarea.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-input-textarea -->
 ```html
 <script type="module">
@@ -258,10 +250,6 @@ To make your usage of `d2l-input-textarea` accessible, use the following propert
 
 Native `<textarea>` elements can be styled by importing `input-styles.js` into your LitElement and applying the `d2l-input` CSS class.
 
-<!-- docs: start hidden content -->
-![example screenshot of textarea inputs](../screenshots/textarea-styles.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo code -->
 ```html
 <script type="module">

package/components/link/README.md

@@ -21,19 +21,13 @@ The following link styles are available:
 
 This is the standard link style, used in most cases.
 
-![example screenshot of standard link](./screenshots/standard.png?raw=true)
-
 ### Small
 
 Similarly styled to the standard link, but slightly smaller and more compact.
 
-![example screenshot of small link](./screenshots/small.png?raw=true)
-
 ### Main
 
 Same size as the standard link, but bolder.
-
-![example screenshot of main link](./screenshots/main.png?raw=true)
 <!-- docs: end hidden content -->
 
 ## Link [d2l-link]

package/components/list/README.md

@@ -102,10 +102,6 @@ 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, etc.
 
-<!-- docs: start hidden content -->
-![List](./screenshots/list.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-list autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -201,10 +197,6 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 
 The `d2l-list` supports drag & drop.
 
-<!-- docs: start hidden content -->
-![List](./screenshots/drag-and-drop.gif?raw=true)
-<!-- docs: end hidden content -->
-
 The `d2l-list` is simply a rendering component, so there is some light work involved in hooking up this behaviour. In order for items to be draggable, they must have their `draggable` and `key` attributes set. Optionally, the `drop-nested` attribute can be applied to items to indicate whether other items can be dropped as nested children on the item.
 
 Reordering and re-rendering is the consuming component's responsibility. For a simple flat list, listen for the `d2l-list-item-position-change` event and call the `reorder` helper method. Alternatively, or for more complex lists such as those with nested lists, listen for the `d2l-list-items-move` event on the root list and update the consumer data using the provided source and target event detail.
@@ -272,10 +264,6 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
 
-<!-- docs: start hidden content -->
-![List](./screenshots/list-selection.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-list-header autoSize:false size:medium -->
 ```html
 <script type="module">
@@ -320,10 +308,6 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 The `d2l-list-item` provides the appropriate `listitem` semantics for children within a list. It also provides some basic layout, breakpoints for responsiveness, a navigation link for the primary action, and selection.
 
-<!-- docs: start hidden content -->
-![List](./screenshots/list-item.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-list-item autoSize:false size:small -->
 ```html
 <script type="module">
@@ -400,10 +384,6 @@ 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: start hidden content -->
-![List](./screenshots/list-item.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-list-item-button -->
 ```html
 <script type="module">
@@ -487,10 +467,6 @@ 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: start hidden content -->
-![List](./screenshots/list-item-content.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-list-item-content -->
 ```html
 <script type="module">

package/components/loading-spinner/README.md

@@ -10,9 +10,6 @@ A loading spinner indicates that something is happening and we don't know how lo
 
 <d2l-loading-spinner></d2l-loading-spinner>
 ```
-<!-- docs: start hidden content -->
-![Loading Spinner](./screenshots/loading-spinner.gif?raw=true)
-<!-- docs: end hidden content -->
 
 ## Best Practices