@brightspace-ui/core 2.24.2 → 2.26.1

package/components/menu/README.md

@@ -283,43 +283,30 @@ Nested menus can be defined by placing a `d2l-menu` inside a `d2l-menu-item`.  F
 ![Nested Menu](./screenshots/nested-menu.png?raw=true)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo -->
+<!-- docs: demo code -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/menu/menu.js';
   import '@brightspace-ui/core/components/menu/menu-item.js';
-  import '@brightspace-ui/core/components/menu/menu-item-separator.js';
 </script>
 
 <d2l-menu label="Astronomy">
-  <d2l-menu-item text="Introduction"></d2l-menu-item>
-  <d2l-menu-item-separator></d2l-menu-item-separator>
-  <d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
   <d2l-menu-item text="The Solar System">
     <d2l-menu>
-      <d2l-menu-item text="Formation"></d2l-menu-item>
-      <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
+      <d2l-menu-item text="The Sun"></d2l-menu-item>
       <d2l-menu-item text="The Planets">
         <d2l-menu>
           <d2l-menu-item text="Mercury"></d2l-menu-item>
           <d2l-menu-item text="Venus"></d2l-menu-item>
           <d2l-menu-item text="Earth"></d2l-menu-item>
-          <d2l-menu-item text="Mars"></d2l-menu-item>
-          <d2l-menu-item text="..."></d2l-menu-item>
         </d2l-menu>
       </d2l-menu-item>
-      <d2l-menu-item text="The Sun"></d2l-menu-item>
-      <d2l-menu-item text="Asteroids"></d2l-menu-item>
       <d2l-menu-item text="Comets"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>
   <d2l-menu-item text="Stars &amp; Galaxies">
     <d2l-menu>
-      <d2l-menu-item text="What is a Star?"></d2l-menu-item>
       <d2l-menu-item text="Lifecycle of a Star"></d2l-menu-item>
-      <d2l-menu-item text="Binaries &amp; Multiples"></d2l-menu-item>
-      <d2l-menu-item text="Star Clusters"></d2l-menu-item>
-      <d2l-menu-item text="Star Death"></d2l-menu-item>
       <d2l-menu-item text="Galaxies"></d2l-menu-item>
     </d2l-menu>
   </d2l-menu-item>

package/components/selection/README.md

@@ -8,9 +8,15 @@ The selection components (`d2l-selection-action`, `d2l-selection-input`, `d2l-se
 ![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).
+
 ## SelectionMixin
 
-The selection components below work with a component that extends the `SelectionMixin`, which acts like a controller for the checkboxes, radios, actions, etc. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`.  The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
+The `SelectionMixin` enables the creation of custom selection control components. The selection components below work with a component that extends the `SelectionMixin` which acts like a controller for the checkboxes, radios, actions and other selection components. The selection components below must be contained within a component that extends the `SelectionMixin`. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`.  The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
+
+The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
 
 <!-- docs: demo live name:d2l-demo-selection display:block -->
 ```html
@@ -18,7 +24,7 @@ The selection components below work with a component that extends the `Selection
   import { css, html, LitElement } from 'lit';
   import { SelectionMixin } from '@brightspace-ui/core/components/selection/selection-mixin.js';
 
-  class CustomSelection extends SelectionMixin(LitElement) {
+  class DemoSelection extends SelectionMixin(LitElement) {
     static get styles() {
       return css`
         :host {
@@ -32,7 +38,7 @@ The selection components below work with a component that extends the `Selection
       `;
     }
   }
-  customElements.define('d2l-demo-selection', CustomSelection);
+  customElements.define('d2l-demo-selection', DemoSelection);
 </script>
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -90,8 +96,6 @@ The selection components below work with a component that extends the `Selection
 </d2l-demo-selection>
 ```
 
-The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be easily defined to enable the use of these selection controls in different semantic contexts or radically different layouts. The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
-
 <!-- docs: start hidden content -->
 ### Properties
 
@@ -103,7 +107,7 @@ The `d2l-list` already extends `SelectionMixin` and should always be used for li
 
 ### Usage
 
-The selection components can then be used within the custom selection component as shown above, or the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
+Define a custom web component that extends the `SelectionMixin`. The selection components can then be used within the custom selection component as shown above, or the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
 
 ```html
 <div>
@@ -111,17 +115,17 @@ The selection components can then be used within the custom selection component
   <d2l-selection-action selection-for="custom" text="Settings" icon="tier1:gear"></d2l-selection-action>
   <d2l-selection-summary selection-for="custom"></d2l-selection-summary>
 </div>
-<d2l-custom-selection id="custom">
+<d2l-demo-selection id="custom">
   <ul>
     <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
     <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
   </ul>
-</d2l-custom-selection>
+</d2l-demo-selection>
 ```
 
 ## Selection Action [d2l-selection-action]
 
-The `d2l-selection-action` is an optional component that provides a button for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
+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 live name:d2l-selection-action -->
 ```html
@@ -150,21 +154,19 @@ The `d2l-selection-action` is an optional component that provides a button for a
 
 ## Selection Action Dropdown [d2l-selection-action-dropdown]
 
-The `d2l-selection-action-dropdown` is an optional component that provides a button opener for dropdown content associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the opener should be non-interactive if nothing is selected.
+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 live name:d2l-selection-action-dropdown autoSize:false size:medium align:baseline -->
+<!-- docs: demo live name:d2l-selection-action-dropdown align:baseline -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
   import '@brightspace-ui/core/components/menu/menu.js';
-  import '@brightspace-ui/core/components/menu/menu-item.js';
   import '@brightspace-ui/core/components/selection/selection-action-dropdown.js';
 </script>
 <d2l-selection-action-dropdown text="Actions" requires-selection>
   <d2l-dropdown-menu>
     <d2l-menu label="Actions">
-      <d2l-menu-item text="Action 1"></d2l-menu-item>
-      <d2l-menu-item text="Action 2"></d2l-menu-item>
+      <!-- This is where you add instances of <d2l-selection-action-menu-item>. -->
     </d2l-menu>
   </d2l-dropdown-menu>
 </d2l-selection-action-dropdown>
@@ -182,7 +184,7 @@ The `d2l-selection-action-dropdown` is an optional component that provides a but
 
 ## Selection Action Menu Item [d2l-selection-action-menu-item]
 
-The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (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`.
+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 live name:d2l-selection-action-menu-item autoSize:false size:medium align:baseline -->
 ```html
@@ -220,7 +222,11 @@ The `d2l-selection-action-menu-item` is an optional component that is a menu ite
 
 ## Selection Input [d2l-selection-input]
 
-The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! Note: `d2l-list-item` already provides a selection input for selectable list items. If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.
+The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! This component must be placed _within_ the [selection control](#selectionmixin).
+
+If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.
+
+Note: `d2l-list-item` already provides a selection input for selectable list items.
 
 <!-- docs: demo live name:d2l-selection-input display:block -->
 ```html
@@ -247,6 +253,7 @@ The `d2l-selection-input` is a required component in selection controls - withou
   <ul>
     <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
     <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+    <li><d2l-selection-input key="mat" label="Math"></d2l-selection-input>Math</li>
   </ul>
 </d2l-demo-selection>
 ```
@@ -274,9 +281,9 @@ Either `label` or `labelled-by` is **required**.
 
 ## Select All [d2l-selection-select-all]
 
-The `d2l-selection-select-all` is an optional component that provides a checkbox for bulk selecting the selectable elements within the selection control. Its state will also be automatically updated when the state of the selectable elements change.
+The `d2l-selection-select-all` is an optional component that provides a checkbox for bulk selecting the selectable elements within the [selection control](#selectionmixin). Its state will also be automatically updated when the state of the selectable elements change.
 
-In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-select-all` for `d2l-select-input` outside of the custom selection element.
+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 live name:d2l-selection-select-all display:block -->
 ```html
@@ -288,6 +295,13 @@ In the example below, setting `selection-for` to `other-list` demonstrates the a
 </script>
 <!-- docs: start hidden content -->
 <style>
+  .container {
+    justify-content: center;
+  }
+  #other-list {
+    padding-top: 2.1rem;
+    margin-left: 5rem;
+  }
   ul {
     margin: 0;
     padding: 0;
@@ -304,27 +318,41 @@ In the example below, setting `selection-for` to `other-list` demonstrates the a
   d2l-selection-input {
     margin-right: 10px;
   }
-  #other-list {
-    padding-top: 1rem;
+  @media only screen and (max-width: 350px) {
+    body {
+      overflow-y: scroll;
+    }
+    .container {
+      align-items: flex-start;
+      flex-direction: column;
+      margin-right: 15px;
+    }
+    #other-list {
+      margin-left: 0;   
+    }
   }
 </style>
 <!-- docs: end hidden content -->
-<d2l-demo-selection>
-  <div>
-    <d2l-selection-select-all></d2l-selection-select-all>
-    <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
-  </div>
-  <ul>
-    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
-    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
-  </ul>
-</d2l-demo-selection>
-<d2l-demo-selection id="other-list">
-  <ul>
-    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
-    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
-  </ul>
-</d2l-demo-selection>
+<div class="container">
+  <d2l-demo-selection>
+    <div>
+      <d2l-selection-select-all></d2l-selection-select-all>
+      <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+    </div>
+    <ul>
+      <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+      <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+      <li><d2l-selection-input key="mat" label="Math" disabled></d2l-selection-input>Math</li>
+    </ul>
+  </d2l-demo-selection>
+  <d2l-demo-selection id="other-list">
+    <ul>
+      <li><d2l-selection-input key="ear" label="Earth"></d2l-selection-input>Earth</li>
+      <li><d2l-selection-input key="mar" label="Mars"></d2l-selection-input>Mars</li>
+      <li><d2l-selection-input key="jup" label="Jupiter"></d2l-selection-input>Jupiter</li>
+    </ul>
+  </d2l-demo-selection>
+</div>
 ```
 
 <!-- docs: start hidden content -->
@@ -338,9 +366,9 @@ In the example below, setting `selection-for` to `other-list` demonstrates the a
 
 ## Selection Summary [d2l-selection-summary]
 
-The `d2l-selection-summary` is an optional component that shows a simple count of the selected items within the selection control.
+The `d2l-selection-summary` is an optional component that shows a simple count of the selected items within the [selection control](#selectionmixin).
 
-In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-summary` for `d2l-select-input` outside of the custom selection element.
+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 live name:d2l-selection-summary display:block -->
 ```html
@@ -351,6 +379,14 @@ In the example below, setting `selection-for` to `other-list` demonstrates the a
 </script>
 <!-- docs: start hidden content -->
 <style>
+  .container {
+    display: flex;
+    justify-content: center;
+  }
+  #other-list {
+    padding-top: 1rem;
+    margin-left: 5rem;
+  }
   ul {
     margin: 0;
     padding: 0;
@@ -367,27 +403,40 @@ In the example below, setting `selection-for` to `other-list` demonstrates the a
   d2l-selection-input {
     margin-right: 10px;
   }
-  #other-list {
-    padding-top: 1rem;
+  @media only screen and (max-width: 350px) {
+    body {
+      overflow-y: scroll;
+    }
+    .container {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+    #other-list {
+      margin-left: 0;
+    }
   }
 </style>
 <!-- docs: end hidden content -->
-<d2l-demo-selection>
-  <div>
-    <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
-    <d2l-selection-summary></d2l-selection-summary>
-  </div>
-  <ul>
-    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
-    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
-  </ul>
-</d2l-demo-selection>
-<d2l-demo-selection id="other-list">
-  <ul>
-    <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
-    <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
-  </ul>
-</d2l-demo-selection>
+<div class="container">
+  <d2l-demo-selection>
+    <div>
+      <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
+      <d2l-selection-summary></d2l-selection-summary>
+    </div>
+    <ul>
+      <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>Geography</li>
+      <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
+      <li><d2l-selection-input key="mat" label="Math" disabled></d2l-selection-input>Math</li>
+    </ul>
+  </d2l-demo-selection>
+  <d2l-demo-selection id="other-list">
+    <ul>
+      <li><d2l-selection-input key="ear" label="Earth"></d2l-selection-input>Earth</li>
+        <li><d2l-selection-input key="mar" label="Mars"></d2l-selection-input>Mars</li>
+        <li><d2l-selection-input key="jup" label="Jupiter"></d2l-selection-input>Jupiter</li>
+    </ul>
+  </d2l-demo-selection>
+</div>
 ```
 
 <!-- docs: start hidden content -->

package/components/tooltip/README.md

@@ -25,22 +25,6 @@ Tooltips display additional information when users focus or hover on a point of
 </d2l-tooltip>
 ```
 
-## Best Practices
-
-<!-- docs: start best practices -->
-<!-- docs: start dos -->
-* Use to show error messages during form validation
-* Use to give the name or purpose of an icon button
-* Use to provide the “full text” for a truncated value in a tight datagrid or list
-<!-- docs: end dos -->
-
-<!-- docs: start donts -->
-* Don’t use tooltips for long paragraphs of text
-* Don’t use tooltips to repeat text that is already shown
-* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
-<!-- docs: end donts -->
-<!-- docs: end best practices -->
-
 ## Accessibility
 
 **Interactive Target Elements:**
@@ -67,6 +51,22 @@ If you are unable to add a semantically aligned ARIA role or attach the tooltip
 
 The `d2l-tooltip` component is used to display additional information when users focus or hover on a point of interest.
 
+## Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use to show error messages during form validation
+* Use to give the name or purpose of an icon button
+* Use to provide the “full text” for a truncated value in a tight datagrid or list
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t use tooltips for long paragraphs of text
+* Don’t use tooltips to repeat text that is already shown
+* Don’t allow a tooltip to cover something important (the “hover and cover” anti-pattern)
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
 <!-- docs: demo live name:d2l-tooltip autoSize:false size:small -->
 ```html
 <script type="module">
@@ -151,3 +151,54 @@ In the following example to constrain the tooltip to the dashed boundary we can
   </d2l-tooltip>
 </div>
 ```
+
+## Help Tooltip [d2l-tooltip-help]
+
+The `d2l-tooltip-help` component is used to display additional information when users focus or hover over some text.
+
+### Best Practices
+
+<!-- docs: start best practices -->
+<!-- docs: start dos -->
+* Use a helpful label that provides value on its own
+* The contents of the tooltip should elaborate on the label
+* Keep help text short and concise (full sentences are not necessary)
+* Use a help tooltip when there are space limitations, such as in a table, list, or narrow sidebar
+<!-- docs: end dos -->
+
+<!-- docs: start donts -->
+* Don’t overuse help tooltips (users end up hunting for information and even experts feel obligated to check their contents)
+* Don't use help tooltips when you are able to use inline help text instead
+<!-- docs: end donts -->
+<!-- docs: end best practices -->
+
+<!-- docs: demo live name:d2l-tooltip-help autoSize:false size:small -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/tooltip/tooltip-help.js';
+</script>
+
+<p class="d2l-body-compact">
+  This is some sample text.
+  <d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+</p>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text for the Help Tooltip opener |
+| `inherit-font-style` | Boolean, default: `false` | Allows the opener text to inherit font properties such as size and color |
+<!-- docs: end hidden content -->
+
+### 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 
+(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. 
+
+See also the [Visibility Switch](https://daylight.d2l.dev/components/switch/#d2l-switch-visibility) for an example use case.

package/components/tooltip/demo/tooltip.html

@@ -11,8 +11,17 @@
 		import '../../demo/demo-page.js';
 		import '../../inputs/input-text.js';
 		import '../tooltip.js';
+		import '../tooltip-help.js';
 	</script>
 	<style>
+		p {
+			padding-top: 1rem;
+		}
+
+		p:nth-child(3) {
+			padding-top: 0;
+		}
+
 		.boundary {
 			background-color: var(--d2l-color-citrine);
 			box-sizing: border-box;
@@ -150,6 +159,21 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Help Tooltip</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-tooltip-help text="Helpful label">Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				<p class="d2l-body-small">
+					This is some sample text.
+					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				</p>
+				<p class="d2l-body-compact">
+					This is some sample text.
+					<d2l-tooltip-help text="Helpful label" inherit-font-style>Contents should elaborate on the label (be short and concise)</d2l-tooltip-help>
+				</p>
+			</template>
+		</d2l-demo-snippet>
+
 	</d2l-demo-page>
 
 </body>

package/components/tooltip/tooltip-help.js

@@ -0,0 +1,101 @@
+import '../colors/colors.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { bodySmallStyles } from '../typography/styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+
+/**
+ * A component used to display additional information when users focus or hover over some text.
+ * @slot - Default content placed inside of the tooltip
+ */
+class HelpTooltip extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * Allows this component to inherit certain font properties
+			 * @type {boolean}
+			 */
+			inheritFontStyle: { type: Boolean, attribute: 'inherit-font-style' },
+			/**
+			 * REQUIRED: Text that will render as the Help Tooltip opener
+			 * @type {string}
+			 */
+			text: { type: String }
+		};
+	}
+
+	static get styles() {
+		return [bodySmallStyles, css`
+			:host {
+				display: inline;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			#d2l-tooltip-help-text {
+				background: none;
+				border: none;
+				padding: 0;
+				text-decoration-color: var(--d2l-color-galena);
+				text-decoration-line: underline;
+				text-decoration-style: dashed;
+				text-decoration-thickness: 1px;
+				text-underline-offset: 0.1rem;
+			}
+			#d2l-tooltip-help-text:focus {
+				outline-style: none;
+			}
+			#d2l-tooltip-help-text.focus-visible {
+				border-radius: 0.05rem;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: 0.05rem;
+				text-underline-offset: 0.1rem;
+			}
+			:host([inherit-font-style]) #d2l-tooltip-help-text {
+				color: inherit;
+				font-size: inherit;
+				font-weight: inherit;
+				letter-spacing: inherit;
+				line-height: inherit;
+				margin: inherit;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+
+		this.inheritFontStyle = false;
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		if (!this.text || this.text.length === 0) {
+			console.warn('Help Tooltip component requires text.');
+		}
+	}
+
+	render() {
+		const classes = {
+			'd2l-body-small': !this.inheritFontStyle
+		};
+		return html`
+			<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
+				${this.text}
+			</button>
+			<d2l-tooltip for="d2l-tooltip-help-text" delay=0 offset=13>
+				<slot></slot>
+			</d2l-tooltip>
+		`;
+	}
+
+}
+customElements.define('d2l-tooltip-help', HelpTooltip);

package/components/tooltip/tooltip.js

@@ -144,7 +144,7 @@ class Tooltip extends RtlMixin(LitElement) {
 			 */
 			forType: { type: String, attribute: 'for-type' },
 			/**
-			 * Adjust the size of the gap between the tooltip and its target
+			 * Adjust the size of the gap between the tooltip and its target (px)
 			 * @type {number}
 			 */
 			offset: { type: Number }, /* tooltipOffset */
@@ -340,6 +340,17 @@ class Tooltip extends RtlMixin(LitElement) {
 				animation: d2l-tooltip-right-animation 200ms ease;
 			}
 
+			::slotted(ul),
+			::slotted(ol) {
+				padding-left: 1rem;
+			}
+
+			:host([dir="rtl"]) ::slotted(ul),
+			:host([dir="rtl"]) ::slotted(ol) {
+				padding-left: 0;
+				padding-right: 1rem;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				:host([_open-dir="bottom"]) .d2l-tooltip-container,
 				:host([_open-dir="top"]) .d2l-tooltip-container,

package/custom-elements.json

@@ -10008,6 +10008,45 @@
         }
       ]
     },
+    {
+      "name": "d2l-tooltip-help",
+      "path": "./components/tooltip/tooltip-help.js",
+      "description": "A component used to display additional information when users focus or hover over some text.",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text that will render as the Help Tooltip opener",
+          "type": "string"
+        },
+        {
+          "name": "inherit-font-style",
+          "description": "Allows this component to inherit certain font properties",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text that will render as the Help Tooltip opener",
+          "type": "string"
+        },
+        {
+          "name": "inheritFontStyle",
+          "attribute": "inherit-font-style",
+          "description": "Allows this component to inherit certain font properties",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Default content placed inside of the tooltip"
+        }
+      ]
+    },
     {
       "name": "d2l-tooltip",
       "path": "./components/tooltip/tooltip.js",
@@ -10066,7 +10105,7 @@
         },
         {
           "name": "offset",
-          "description": "Adjust the size of the gap between the tooltip and its target",
+          "description": "Adjust the size of the gap between the tooltip and its target (px)",
           "type": "number"
         },
         {
@@ -10149,7 +10188,7 @@
         {
           "name": "offset",
           "attribute": "offset",
-          "description": "Adjust the size of the gap between the tooltip and its target",
+          "description": "Adjust the size of the gap between the tooltip and its target (px)",
           "type": "number"
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.24.2",
+  "version": "2.26.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -44,7 +44,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/eslint-parser": "^7",
-    "@brightspace-ui/stylelint-config": "^0.4",
+    "@brightspace-ui/stylelint-config": "^0.5",
     "@open-wc/testing": "^3",
     "@web/dev-server": "^0.1",
     "@web/test-runner": "^0.13",