@brightspace-ui/core 2.26.3 → 2.28.0

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
 

package/components/menu/README.md

@@ -27,10 +27,6 @@ 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: start hidden content -->
-![Menu](./screenshots/menu.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-menu -->
 ```html
 <script type="module">
@@ -68,10 +64,6 @@ 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: start hidden content -->
-![Menu Items](./screenshots/menu-items.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-menu-item -->
 ```html
 <script type="module">
@@ -160,10 +152,6 @@ 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: start hidden content -->
-![Checkbox Menu](./screenshots/checkbox-menu.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-menu-item-checkbox -->
 ```html
 <script type="module">
@@ -210,10 +198,6 @@ 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: start hidden content -->
-![Radio Menu](./screenshots/radio-menu.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-menu-item-radio -->
 ```html
 <script type="module">
@@ -279,10 +263,6 @@ The `d2l-menu-item-separator` component can be used to semantically separate men
 
 Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`.  For nested menus, a `label` attribute is automatically applied using the text attribute of the `d2l-menu-item` that contains it - no need to duplicate this value.  A "return" menu item will be added to the top of the nested menu by default.
 
-<!-- docs: start hidden content -->
-![Nested Menu](./screenshots/nested-menu.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo code -->
 ```html
 <script type="module">

package/components/meter/README.md

@@ -36,12 +36,6 @@ Meters are a visually engaging way to communicate progress or measurements.
 
 Linear meters show a horizontal progress bar.
 
-<!-- docs: start hidden content -->
-![Linear meter with no progress](./screenshots/d2l-meter-linear-no-progress.png?raw=true)
-![Linear meter with some progress](./screenshots/d2l-meter-linear-has-progress.png?raw=true)
-![Linear meter completed](./screenshots/d2l-meter-linear-completed.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-meter-linear -->
 ```html
 <script type="module">
@@ -67,13 +61,6 @@ 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: start hidden content -->
-![Radial meter with no progress](./screenshots/d2l-meter-radial-no-progress.png?raw=true)
-![Radial meter with some progress](./screenshots/d2l-meter-radial-has-progress.png?raw=true)
-![Radial meter completed](./screenshots/d2l-meter-radial-completed.png?raw=true)
-![Radial meter with text](./screenshots/d2l-meter-radial-with-text.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-meter-radial size:medium -->
 ```html
 <script type="module">
@@ -98,12 +85,6 @@ 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: start hidden content -->
-![Circle meter with no progress](./screenshots/d2l-meter-circle-no-progress.png?raw=true)
-![Circle meter with no progress](./screenshots/d2l-meter-circle-has-progress.png?raw=true)
-![Circle meter with no progress](./screenshots/d2l-meter-circle-completed.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-meter-circle -->
 ```html
 <script type="module">

package/components/overflow-group/README.md

@@ -30,10 +30,6 @@ 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: start hidden content -->
-![Overflow Group](./screenshots/overflow-group.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-overflow-group autoSize:false display:block size:medium -->
 ```html
 <script type="module">

package/components/scroll-wrapper/README.md

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

package/components/selection/README.md

@@ -2,12 +2,6 @@
 
 The selection components (`d2l-selection-action`, `d2l-selection-input`, `d2l-selection-select-all`, `d2l-selection-summary`, `d2l-selection-action`) are low-level components that provide the ability to create selection interfaces with select-all and bulk-action behaviours.
 
-<!-- docs: start hidden content -->
-![Selection](./screenshots/selection-multiple.png?raw=true)
-
-![Selection](./screenshots/selection-single.png?raw=true)
-<!-- docs: end hidden content -->
-
 ## Use Case
 
 The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be defined to enable the use of these selection controls in different semantic contexts or radically different layouts. See [SelectionMixin](#selectionmixin).

package/components/skeleton/README.md

@@ -2,8 +2,6 @@
 
 Skeletons provide a low fidelity representation of an application before it has finished loading, improving the user's perception of performance.
 
-![skeleton overview](./screenshots/overview.png?raw=true)
-
 ## Skeleton-Aware Components
 
 Components which are skeleton-aware extend the `SkeletonMixin` (more on that below). These components can be skeletized by setting the `skeleton` boolean attribute/property.
@@ -14,8 +12,6 @@ For example, this causes a text input to be skeletized:
 <d2l-input-text label="Name" skeleton></d2l-input-text>
 ```
 
-![skeleton text input](./screenshots/text-input.png?raw=true)
-
 In a typical scenario, many skeleton-aware components would have their `skeleton` attributes bound to a single property on the host component, making it easy to toggle them all together:
 
 ```html
@@ -93,8 +89,6 @@ class MyElement extends SkeletonMixin(LitElement) {
 
 You can also apply a skeleton to a native element you are using as a container using the `d2l-skeletize-container` CSS class. Instead of blocking out the whole box, this will skeletonize the text and the border and allow you to individually skeletonize the components/elements inside as you wish.
 
-![skeleton container](./screenshots/container.png?raw=true)
-
 ```javascript
 render() {
   return html`
@@ -111,11 +105,7 @@ render() {
 
 Paragraphs of text that may span multiple lines are a special case for skeletons. The `d2l-skeletize` CSS class would turn the entire paragraph block into a skeleton box, which isn't quite what we want. Also, often we're showing a skeleton because we don't yet know how much data we'll have.
 
-Ideally, we'd like to show several lines of skeletized text, like this:
-
-![skeleton text input](./screenshots/paragraph.png?raw=true)
-
-To accomplish this, three special CSS classes exist to provide skeletons that span 2, 3 or 5 lines: `d2l-skeletize-paragraph-2`, `d2l-skeletize-paragraph-3` and `d2l-skeletize-paragraph-5` respectively.
+Ideally, we'd like to show several lines of skeletized text. To accomplish this, three special CSS classes exist to provide skeletons that span 2, 3 or 5 lines: `d2l-skeletize-paragraph-2`, `d2l-skeletize-paragraph-3` and `d2l-skeletize-paragraph-5` respectively.
 
 Apply one of these classes plus any additional (optional) typography styles for your paragraph:
 

package/components/status-indicator/README.md

@@ -1,10 +1,6 @@
 # Status Indicators
 Status Indicators are used to communicate the status of an item. They are non-interactive and assert prominence on state.
 
-<!-- docs: start hidden content -->
-![screenshot of status-indicator component](./screenshots/default-indicator.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo display:block -->
 ```html
 <script type="module">

package/components/switch/README.md

@@ -28,9 +28,6 @@ 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: start hidden content -->
-![Switch](./screenshots/switch.png?raw=true)
-<!-- docs: end hidden content -->
 
 <!-- docs: demo live name:d2l-switch autoSize:false size:small -->
 ```html
@@ -66,10 +63,6 @@ To make your usage of `d2l-switch` accessible, use the following property:
 
 The `d2l-switch-visibility` element is a variant of the generic switch configured with special icons and default text for toggling "visibility".
 
-<!-- docs: start hidden content -->
-![Visibility Switch](./screenshots/switch-visibility.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-switch-visibility autoSize:false size:small -->
 ```html
 <script type="module">

package/components/table/README.md

@@ -2,10 +2,6 @@
 
 Tables are used to display tabular data in rows and columns. They can allow users to select rows and sort by columns.
 
-<!-- docs: start hidden content -->
-![table with default style](./screenshots/default.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo display:block -->
 ```html
 <script type="module">
@@ -124,8 +120,6 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
 
 For a table style with fewer borders and tighter padding, there's the `light` type:
 
-![table with light style](./screenshots/light.png?raw=true)
-
 ```html
 <d2l-table-wrapper type="light">
   <table class="d2l-table">...</table>
@@ -136,8 +130,6 @@ For a table style with fewer borders and tighter padding, there's the `light` ty
 
 For long tables, the header row can be made to "stick" in place as the user scrolls.
 
-![table with sticky headers](./screenshots/sticky.gif?raw=true)
-
 ```html
 <d2l-table-wrapper sticky-headers>
   <table class="d2l-table">...</table>
@@ -149,10 +141,6 @@ For long tables, the header row can be made to "stick" in place as the user scro
 
 When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used to provide an interactive sort button as well as arrows to indicate the ascending/descending sort direction.
 
-<!-- docs: start hidden content -->
-![table with sorting](./screenshots/sorting.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo -->
 ```html
 <script type="module">
@@ -250,10 +238,6 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 
 If your table supports row selection, apply the `selected` attribute to `<tr>` row elements which are actively selected.
 
-<!-- docs: start hidden content -->
-![table with selection](./screenshots/selection.gif?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo -->
 ```html
 <script type="module">

package/components/tabs/README.md

@@ -39,10 +39,6 @@ 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: start hidden content -->
-![Tabs](./screenshots/tabs.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-tabs display:block -->
 ```html
 <script type="module">
@@ -73,10 +69,6 @@ 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: start hidden content -->
-![Tabs](./screenshots/tabs.png?raw=true)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-tab-panel display:block -->
 ```html
 <script type="module">

package/components/tooltip/README.md

@@ -2,10 +2,6 @@
 
 Tooltips display additional information when users focus or hover on a point of interest.
 
-<!-- docs: start hidden content -->
-![screenshot of an error tooltip](./screenshots/tooltip-error.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo autoSize:false size:small -->
 ```html
 <script type="module">
@@ -119,10 +115,6 @@ This can be done with the `boundary` attribute that allows any of the tooltip's
 
 In the following example to constrain the tooltip to the dashed boundary we can set the top boundary to `50`, the bottom boundary to `10`, the left boundary to `100`, and the right boundary to `0`.
 
-<!-- docs: start hidden content -->
-![screenshot of a tooltip with custom boundaries](./screenshots/tooltip-boundary.png)
-<!-- docs: end hidden content -->
-
 <!-- docs: demo code -->
 ```html
 <script type="module">

package/components/typography/README.md

@@ -8,32 +8,22 @@ Importing `typography` will add the font-faces and prebuilt CSS classes to the d
 
 "Standard Body" can be used to apply base font properties, but will also respond to viewport width changes.
 
-![Standard Body](./screenshots/body-standard.png?raw=true)
-
 ### Compact Body
 
 Compact body is a smaller version of the standard body style, for use in areas that prefer to be conservative with the amount of real estate used by text.  It is **not** recommended for blocks of readable text, particularly in paragraph form. Rather, it is best employed for brief informative text or calls to action.
 
-![Compact Body](./screenshots/body-compact.png?raw=true)
-
 ### Small Body
 
 Never used by itself; always in support of another piece of content on the page. Used for inline assistive text in forms, and for specifying metadata or properties of an existing piece of content.
 
-![Small Body](./screenshots/body-small.png?raw=true)
-
 ### Label Text
 
 Used for labels. Its font size/line spacing is relative to the root font and responds to viewport width changes.
 
-![Label](./screenshots/labels.png?raw=true)
-
 ### Headings
 
 There are four available heading styles. These are typically be applied to the `h1`, `h2`, `h3` and `h4` HTML elements, though it's not a requirement.
 
-![Headings](./screenshots/headings.png?raw=true)
-
 ## Usage
 
 ### App

package/components/typography/demo/typography.html

@@ -53,6 +53,12 @@
 				<label class="d2l-label-text">Fancy Shmancy Label</label>
 			</d2l-demo-snippet>
 
+			<h2>Blockquote</h2>
+
+			<d2l-demo-snippet>
+				<blockquote class="d2l-blockquote">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</blockquote>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

package/components/typography/styles.js

@@ -1,3 +1,4 @@
+import '../colors/colors.js';
 import { css } from 'lit';
 
 export const bodyStandardStyles = css`
@@ -223,3 +224,40 @@ export const labelStyles = css`
 		top: 0.15rem;
 	}
 `;
+
+export const blockquoteStyles = css`
+	.d2l-blockquote {
+		color: var(--d2l-color-tungsten);
+		font-size: 0.8rem;
+		font-weight: 400;
+		line-height: 1.4rem;
+		margin: 0;
+		margin-right: 1.2rem;
+		padding: 0;
+		padding-left: 1.2rem;
+		padding-top: 0.5rem;
+		position: relative;
+	}
+	.d2l-blockquote::before {
+		content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik02IDIyLjY2N0E0LjY2NyA0LjY2NyAwIDAgMCAxMC42NjcgMThjMC0xLjIyNy0uNTU5LTIuNS0xLjMzNC0zLjMzM0M4LjQ4MSAxMy43NSA3LjM1IDEzLjMzMyA2IDEzLjMzM2MtLjQxMSAwIDEuMzMzLTYuNjY2IDMtOSAxLjY2Ny0yLjMzMyAxLjMzMy0zIC4zMzMtM0M4IDEuMzMzIDUuMjUzIDQuNTg2IDQgNy4yNTUgMS43NzMgMTIgMS4zMzMgMTUuMzkyIDEuMzMzIDE4QTQuNjY3IDQuNjY3IDAgMCAwIDYgMjIuNjY3em0xMiAwQTQuNjY3IDQuNjY3IDAgMCAwIDIyLjY2NyAxOGMwLTEuMjI3LS41NTktMi41LTEuMzM0LTMuMzMzLS44NTItLjkxNy0xLjk4My0xLjMzNC0zLjMzMy0xLjMzNC0uNDExIDAgMS4zMzMtNi42NjYgMy05IDEuNjY3LTIuMzMzIDEuMzMzLTMgLjMzMy0zLTEuMzMzIDAtNC4wOCAzLjI1My01LjMzMyA1LjkyMkMxMy43NzMgMTIgMTMuMzMzIDE1LjM5MiAxMy4zMzMgMThBNC42NjcgNC42NjcgMCAwIDAgMTggMjIuNjY3eiIgZmlsbD0iI0QzRDlFMyIgbWFzaz0idXJsKCNiKSIvPjwvZz48L3N2Zz4=");
+		left: 0;
+		position: absolute;
+		top: 0;
+	}
+	:host([dir="rtl"]) .d2l-blockquote {
+		margin-left: 1.2rem;
+		margin-right: 0;
+		padding-left: 0;
+		padding-right: 1.2rem;
+	}
+	:host([dir="rtl"]) .d2l-blockquote::before {
+		left: initial;
+		right: 0;
+		transform: scaleX(-1);
+	}
+	@media (max-width: 615px) {
+		.d2l-blockquote {
+			line-height: 1.2rem;
+		}
+	}
+`;

package/components/typography/typography.js

@@ -112,6 +112,41 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 			margin: 1.5rem 0 1.5rem 0;
 		}
 
+		.d2l-typography .d2l-blockquote {
+			color: var(--d2l-color-tungsten);
+			font-size: 0.8rem;
+			font-weight: 400;
+			line-height: 1.4rem;
+			margin: 0;
+			margin-right: 1.2rem;
+			padding: 0;
+			padding-left: 1.2rem;
+			padding-top: 0.5rem;
+			position: relative;
+		}
+
+		.d2l-typography .d2l-blockquote::before {
+			position: absolute;
+			content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik02IDIyLjY2N0E0LjY2NyA0LjY2NyAwIDAgMCAxMC42NjcgMThjMC0xLjIyNy0uNTU5LTIuNS0xLjMzNC0zLjMzM0M4LjQ4MSAxMy43NSA3LjM1IDEzLjMzMyA2IDEzLjMzM2MtLjQxMSAwIDEuMzMzLTYuNjY2IDMtOSAxLjY2Ny0yLjMzMyAxLjMzMy0zIC4zMzMtM0M4IDEuMzMzIDUuMjUzIDQuNTg2IDQgNy4yNTUgMS43NzMgMTIgMS4zMzMgMTUuMzkyIDEuMzMzIDE4QTQuNjY3IDQuNjY3IDAgMCAwIDYgMjIuNjY3em0xMiAwQTQuNjY3IDQuNjY3IDAgMCAwIDIyLjY2NyAxOGMwLTEuMjI3LS41NTktMi41LTEuMzM0LTMuMzMzLS44NTItLjkxNy0xLjk4My0xLjMzNC0zLjMzMy0xLjMzNC0uNDExIDAgMS4zMzMtNi42NjYgMy05IDEuNjY3LTIuMzMzIDEuMzMzLTMgLjMzMy0zLTEuMzMzIDAtNC4wOCAzLjI1My01LjMzMyA1LjkyMkMxMy43NzMgMTIgMTMuMzMzIDE1LjM5MiAxMy4zMzMgMThBNC42NjcgNC42NjcgMCAwIDAgMTggMjIuNjY3eiIgZmlsbD0iI0QzRDlFMyIgbWFzaz0idXJsKCNiKSIvPjwvZz48L3N2Zz4=");
+			top: 0;
+			left: 0;
+		}
+
+		[dir="rtl"] .d2l-typography .d2l-blockquote,
+		.d2l-typography .d2l-blockquote[dir="rtl"] {
+			margin-left: 1.2rem;
+			margin-right: 0;
+			padding-left: 0;
+			padding-right: 1.2rem;
+		}
+
+		[dir="rtl"] .d2l-typography .d2l-blockquote::before,
+		.d2l-typography .d2l-blockquote[dir="rtl"]::before {
+			left: initial;
+			right: 0;
+			transform: scaleX(-1);
+		}
+
 		@media (max-width: 615px) {
 
 			.d2l-typography .d2l-body-standard {
@@ -140,6 +175,10 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 				line-height: 1.2rem;
 			}
 
+			.d2l-typography .d2l-blockquote {
+				line-height: 1.2rem;
+			}
+
 		}
 	`;
 	document.head.appendChild(style);

package/directives/animate/README.md

@@ -2,9 +2,7 @@
 
 These directives can be used to animate the showing or hiding of elements in your application.
 
-The animation will slide the element in (or out) of its final position, while transitioning its height and opacity:
-
-![animation](./screenshots/show-hide.gif?raw=true)
+The animation will slide the element in (or out) of its final position, while transitioning its height and opacity.
 
 ## Using the directives
 
@@ -51,5 +49,3 @@ html`<some-elem .animate="${show({ skip: true })}"></some-elem>`;
 When hiding an element, it's possible that the user's focus was inside that element. The act of hiding it would lose the user's focus point.
 
 If this scenario is detected, focus will automatically be moved to the next focusable element after the element being hidden.
-
-![focus](./screenshots/focus.gif?raw=true)