@brightspace-ui/core 3.145.0 → 3.146.0

package/components/breadcrumbs/breadcrumbs.js

@@ -1,8 +1,12 @@
 import './breadcrumb.js';
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 /**
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
  * @slot - Breadcrumb items
@@ -21,12 +25,15 @@ class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	static get styles() {
 		return css`
 			:host {
+				${overflowClipEnabled ? css`clip-path: rect(-1em 100% calc(100% + 1em) -1em);` : css``}
 				display: block;
 				font-size: 0.7rem;
 				line-height: 1.05rem;
-				overflow: hidden;
 				position: relative;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					white-space: nowrap;
+				`}
 			}
 			:host([hidden]) {
 				display: none;

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -2,9 +2,13 @@ import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
  */
@@ -38,10 +42,12 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 				line-height: 1.2rem;
 			}
 			p.truncate {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
-				overflow: hidden;
-				overflow-wrap: anywhere;
+				${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					overflow: hidden;
+					overflow-wrap: anywhere;
+				`}
 			}
 		`];
 	}

package/components/filter/filter.js

@@ -23,10 +23,12 @@ import '../tooltip/tooltip.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -38,6 +40,8 @@ const ESCAPE_KEY_CODE = 27;
 const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
 const SET_DIMENSION_ID_PREFIX = 'list-';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 let hasDisplayedKeyboardTooltip = false;
 
 export function resetHasDisplayedKeyboardTooltip() {
@@ -143,26 +147,24 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				flex-grow: 1;
 				padding-right: calc(2rem + 2px);
 				text-align: center;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			:host([dir="rtl"]) .d2l-filter-dimension-header-text {
 				padding-left: calc(2rem + 2px);
 				padding-right: 0;
 			}
 
-			.d2l-filter-dimension-header-text,
-			.d2l-filter-dimension-set-value-text {
-				overflow: hidden;
-			}
-
 			.d2l-filter-dimension-set-value {
 				align-items: center;
 				color: var(--d2l-color-ferrite);
 				display: flex;
 				gap: 0.45rem;
 				line-height: unset;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`overflow: hidden;`}
 			}
 			.d2l-filter-dimension-set-value d2l-icon {
 				flex-shrink: 0;
@@ -176,11 +178,14 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			}
 
 			.d2l-filter-dimension-set-value-text {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
 				hyphens: auto;
-				-webkit-line-clamp: 2;
-				overflow-wrap: anywhere;
+				${overflowClipEnabled ? getOverflowDeclarations({ lines: 2 }) : css`
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					overflow-wrap: anywhere;
+				`}
 			}
 
 			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
@@ -637,8 +642,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						${item.additionalContent ? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}" aria-hidden="true"></d2l-icon>` : nothing}
 					</div>
 					${item.additionalContent ? html`
-						<d2l-expand-collapse-content 
-							?expanded="${item.selected}" 
+						<d2l-expand-collapse-content
+							?expanded="${item.selected}"
 							@d2l-expand-collapse-content-collapse="${this._handleExpandCollapse}"
 							@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}">
 							${item.additionalContent()}

package/components/link/link.js

@@ -3,12 +3,16 @@ import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
 		--d2l-focus-ring-offset: 1px;
@@ -109,10 +113,12 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					display: inherit;
 				}
 				a.truncate {
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					overflow: hidden;
-					overflow-wrap: anywhere;
+					${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
+						-webkit-box-orient: vertical;
+						display: -webkit-box;
+						overflow: hidden;
+						overflow-wrap: anywhere;
+					`}
 				}
 				d2l-icon {
 					color: var(--d2l-color-celestine);

package/components/list/list-item-content.js

@@ -1,6 +1,9 @@
 import '../colors/colors.js';
 import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
+
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
 /**
  * A component for consistent layout of primary and secondary text in a list item.
@@ -33,14 +36,18 @@ class ListItemContent extends LitElement {
 
 			.d2l-list-item-content-text-secondary {
 				color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
-				margin: 0;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`
+					margin: 0;
+					overflow: hidden;
+				`}
 			}
 
 			.d2l-list-item-content-text-supporting-info {
 				color: var(--d2l-color-ferrite);
-				margin: 0;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`
+					margin: 0;
+					overflow: hidden;
+				`}
 			}
 
 			.d2l-list-item-content-text-secondary ::slotted(*),

package/components/more-less/more-less.js

@@ -3,14 +3,17 @@ import { css, html, LitElement } from 'lit';
 import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { overflowHiddenDeclarations } from '../../helpers/overflow.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 400;
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 /**
  * A component used to minimize the display of long content, while providing a way to reveal the full content.
@@ -51,11 +54,18 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				display: block;
+				${overflowClipEnabled ? css`display: flow-root;` : css`display: block;`}
 			}
 
 			.d2l-more-less-content {
-				overflow: hidden;
+				${overflowClipEnabled ? css`
+					display: flow-root;
+					margin: -1em -1em 0;
+					padding: 1em 1em 0;
+					${overflowHiddenDeclarations}
+				` : css`
+					overflow: hidden;
+				`}
 			}
 			.d2l-more-less-transition {
 				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
@@ -228,18 +238,27 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		const target = e.composedPath()[0] || e.target;
 
-		if (isSafari) {
-			target.scrollIntoViewIfNeeded?.();
-			setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
-		}
+		if (overflowClipEnabled) {
+			const em = parseInt(getComputedStyle(this.__content).getPropertyValue('font-size'));
+			const { y: contentY, height: contentHeight } = this.__content.getBoundingClientRect();
+			const { y: targetY, height: targetHeight } = target.getBoundingClientRect();
 
-		if (this.__content.scrollTop) {
-			this.__content.scrollTo({ top: 0, behavior: 'instant' });
-			this.__expand();
-			this.__autoExpanded = true;
-			await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
-			if (target.getRootNode().activeElement === target) {
-				target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+			if (targetY + targetHeight > contentY + contentHeight - em) {
+				this.__expand();
+				this.__autoExpanded = true;
+				await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
+			}
+		} else {
+			if (isSafari) {
+				target.scrollIntoViewIfNeeded?.();
+				setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
+			}
+
+			if (this.__content.scrollTop) {
+				this.__content.scrollTo({ top: 0, behavior: 'instant' });
+				this.__expand();
+				this.__autoExpanded = true;
+				await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
 			}
 		}
 	}

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

@@ -8,6 +8,7 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 
@@ -17,6 +18,9 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
   <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
   <d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
+  <d2l-object-property-list-item-tooltip-help text="Example tooltip help with icon" icon="tier1:grade">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -42,11 +46,15 @@ An object property list can be defined using `d2l-object-property-list` and a co
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
 </script>
 
 <d2l-object-property-list>
   <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
   <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
+  <d2l-object-property-list-item-tooltip-help text="Example link">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -130,6 +138,52 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->
 
+## Help Tooltip Item [d2l-object-property-list-item-tooltip-help]
+
+The `d2l-object-property-list-item-tooltip-help` component is an item for the object property list which is used to also display additional information for users. It displays text as a help tooltip, with an optional leading icon.
+
+<!-- docs: demo code properties name:d2l-object-property-list-item-tooltip-help sandboxTitle:'Object Property List Help Tooltip Item' -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
+</script>
+
+<d2l-object-property-list>
+  <d2l-object-property-list-item-tooltip-help text="Example item">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item with icon" icon="tier1:grade">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item with custom icon">
+	These are extra details
+	<d2l-icon-custom slot="icon">
+		<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
+		<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
+		<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+		</svg>
+	</d2l-icon-custom>
+  </d2l-object-property-list-item-tooltip-help>
+</d2l-object-property-list>
+```
+
+<!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the item |
+| `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+<!-- docs: end hidden content -->
+
 ## Status Slot
 
 Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.

package/components/object-property-list/object-property-list-item-tooltip-help.js

@@ -8,6 +8,7 @@ import { ObjectPropertyListItem } from './object-property-list-item.js';
  * A single object property, to be used within an object-property-list,
  * rendered as a help tooltip and with an optional icon.
  * @slot - Default content placed inside of the tooltip
+ * @slot icon - Optional slot for a custom icon
  */
 class ObjectPropertyListItemTooltipHelp extends FocusMixin(ObjectPropertyListItem) {
 	static get properties() {

package/components/tabs/README.md

@@ -155,7 +155,7 @@ Promise.resolve(tabs.hideTab((tab))).then(() => {
 
 The `TabMixin` can be used to create custom tabs. It is IMPORTANT to call the `dispatchContentChangeEvent` function in `TabMixin` when content changes in the consumer in order to properly trigger calculations. Ensure that there is only one element in any custom tab to focus on, else the focus and keyboard navigation behaviors become confusing for users. Note that the parent `d2l-tabs` element handles `tabindex` focus management, and so consumers should not be rendering focusable elements within custom tabs.
 
-Before creating a custom tab, ensure that the case is not covered by using a standard `d2l-tab` with content in the `before` and/or `after` slot(s). 
+Before creating a custom tab, ensure that the case is not covered by using a standard `d2l-tab` with content in the `before` and/or `after` slot(s).
 
 <!-- docs: demo code sandboxTitle:'TabMixin' display:block-->
 ```html
@@ -170,7 +170,8 @@ Before creating a custom tab, ensure that the case is not covered by using a sta
       const styles = [ css`
         .d2l-tab-custom-content {
           margin: 0.5rem;
-          overflow: hidden;
+          overflow: clip;
+          overflow-clip-margin: 1em;
           padding: 0.1rem;
           white-space: nowrap;
         }
@@ -269,4 +270,4 @@ The `tabs` components were built following [W3C best practices for Tabs](https:/
 - Following recommended keyboard control patterns (with the exception of the "Optional" Home, End, and Delete key patterns)
 - Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7") and adding an `aria-label` to the `tablist`
 - Using `aria-selected` to indicate `tab` selection state
-- Using `aria-labelledby` and `aria-controls` in order to match the `tab` with the `tabpanel` for screen reader users
+- Using `aria-labelledby` and `aria-controls` in order to match the `tab` with the `tabpanel` for screen reader users

package/components/tabs/demo/tab-custom.js

@@ -9,7 +9,8 @@ class TabCustom extends TabMixin(LitElement) {
 			.d2l-tab-custom-content {
 				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
-				overflow: hidden;
+				overflow: clip;
+				overflow-clip-margin: 1em;
 				padding: 0.1rem;
 				white-space: nowrap;
 			}

package/components/tabs/tab-internal.js

@@ -1,9 +1,13 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 const keyCodes = {
 	ENTER: 13,
 	SPACE: 32
@@ -34,10 +38,12 @@ class Tab extends SkeletonMixin(LitElement) {
 			.d2l-tab-text {
 				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
-				overflow: hidden;
 				padding: 0.1rem;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
 				bottom: 0.15rem;

package/components/tabs/tab.js

@@ -1,8 +1,12 @@
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { TabMixin } from './tab-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 const focusRingStyles = getFocusRingStyles(
 	pseudoClass => `:host(:${pseudoClass}) .d2l-tab-text-inner-content`,
 	{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
@@ -51,9 +55,11 @@ class Tab extends TabMixin(LitElement) {
 				color: var(--d2l-color-celestine);
 			}
 			span {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			.d2l-tab-text-skeletize-override {
 				min-width: 50px;

package/components/tabs/tabs.js

@@ -8,6 +8,8 @@ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js'
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -16,6 +18,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
 const scrollButtonWidth = 56;
 
@@ -87,13 +90,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				box-sizing: border-box;
 				flex: auto;
 				margin-left: -3px;
-				overflow: hidden;
-				overflow-x: hidden;
 				padding-left: 3px;
 				position: relative;
 				-webkit-transition: max-width 200ms ease-in;
 				transition: max-width 200ms ease-in;
-				white-space: nowrap;
+				${overflowClipEnabled ? getOverflowDeclarations({ textOverflow: 'clip' }) : css`
+					overflow: hidden;
+					overflow-x: hidden;
+					white-space: nowrap;
+				`}
 			}
 			.d2l-tabs-container-ext {
 				flex: none;
@@ -110,6 +115,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			.d2l-tabs-scroll-next-container {
 				background-color: var(--d2l-tabs-background-color);
 				box-shadow: 0 0 12px 18px var(--d2l-tabs-background-color);
+				${overflowClipEnabled ? css`clip-path: rect(0% 200% 100% -100%);` : css``}
 				display: none;
 				height: 100%;
 				position: absolute;

package/components/tooltip/README.md

@@ -117,6 +117,7 @@ The `d2l-tooltip` component is used to display additional information when users
 | `disable-focus-lock` | Boolean, default: `false` | Disables focus lock so that the tooltip will automatically close when no longer hovered even if it still has focus |
 | `force-show` | Boolean, default: `false` | Force the tooltip to stay open as long as it remains `true` |
 | `for-type` | String, default: `descriptor` | Accessibility type for the tooltip to specify whether it is the primary label for the target or a secondary descriptor. Valid values are: `label` and `descriptor`. |
+| `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 | `show-truncated-only` | Boolean, default: `false` | Only show the tooltip if we detect the target element is truncated |
 | `position` | String | Optionally force the tooltip to open in a certain direction. Valid values are: `top`, `bottom`, `left` and `right`. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left. |
 
@@ -215,6 +216,13 @@ The `d2l-tooltip-help` component is used to display additional information when
 ```
 
 <!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
 ### Properties
 
 | Property | Type | Description |

package/components/tooltip/tooltip-help.js

@@ -12,6 +12,7 @@ import { SlottedIconMixin } from '../icons/slotted-icon-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
+ * @slot icon - Optional slot for a custom icon
  */
 class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))) {
 

package/custom-elements.json

@@ -11295,6 +11295,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },
@@ -14273,6 +14277,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },

package/helpers/overflow.js

@@ -0,0 +1,34 @@
+import { set } from './template-tags.js';
+import { unsafeCSS } from 'lit';
+
+export const overflowHiddenDeclarations = getOverflowDeclarations({});
+export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis' });
+
+export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = true } = {}) {
+	if (!arguments.length) return overflowHiddenDeclarations;
+
+	const declarations = set`
+		min-width: 0; /* clamps width of flex items */
+		overflow-x: clip;
+		${lines
+			? set`
+			display: -webkit-box;
+			overflow-clip-margin: 0.2em;
+			overflow-wrap: anywhere;
+			overflow-y: clip;
+			text-overflow: ${textOverflow || 'ellipsis'};
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: ${lines};`
+			: set`
+			overflow-clip-margin: 1em;
+			${textOverflow
+				? set`
+				overflow-y: visible;
+				text-overflow: ${textOverflow};
+				white-space: nowrap;`
+				:
+				'overflow-y: clip;'}
+		`}
+	`;
+	return lit ? unsafeCSS(declarations) : declarations;
+}

package/package.json

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