@brightspace-ui/core 3.95.0 → 3.96.0

package/components/button/README.md

@@ -76,7 +76,7 @@ The `d2l-button-subtle` element can be used just like the native `button`, but f
 | `description` | String | A description to be added to the `button` for accessibility for additional context |
 | `disabled` | Boolean | Disables the button |
 | `disabledTooltip` | String | Tooltip text when disabled |
-| `h-align` | String | Possible values are undefined (default) or `text`. If `text`, aligns the button content to the leading edge of text. |
+| `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
 | `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 | `icon-right` | Boolean | Render the icon on the right of the button |
 <!-- docs: end hidden content -->
@@ -121,7 +121,7 @@ The `d2l-button-icon` element can be used just like the native `button`, for ins
 | `text` | String, required | Accessible text for the button |
 | `disabled` | Boolean | Disables the button |
 | `disabledTooltip` | String | Tooltip text when disabled |
-| `h-align` | String | Possible values are undefined (default) or `text`. If `text`, aligns the button content to the leading edge of text. |
+| `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
 | `translucent` | Boolean | Indicates to display translucent (ex. on rich backgrounds) |
 <!-- docs: end hidden content -->
 

package/components/button/button-icon.js

@@ -9,14 +9,13 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 /**
  * A button component that can be used just like the native button for instances where only an icon is displayed.
  * @slot icon - Optional slot for a custom icon
  */
-class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(LitElement))))) {
+class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -27,8 +26,8 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 			description: { type: String },
 
 			/**
-			 * Aligns the leading edge of text if value is set to "text"
-			 * @type {'text'|''}
+			 * Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+			 * @type {'text'|'text-end'|''}
 			 */
 			hAlign: { type: String, reflect: true, attribute: 'h-align' },
 
@@ -103,11 +102,10 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 				}
 
 				:host([h-align="text"]) button {
-					left: var(--d2l-button-icon-h-align);
+					inset-inline-start: var(--d2l-button-icon-h-align);
 				}
-				:host([dir="rtl"][h-align="text"]) button {
-					left: 0;
-					right: var(--d2l-button-icon-h-align);
+				:host([h-align="text-end"]) button {
+					inset-inline-end: var(--d2l-button-icon-h-align);
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */

package/components/button/button-subtle.js

@@ -24,8 +24,8 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 			description: { type: String },
 
 			/**
-			 * Aligns the leading edge of text if value is set to "text"
-			 * @type {'text'|''}
+			 * Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+			 * @type {'text'|'text-end'|''}
 			 */
 			hAlign: { type: String, reflect: true, attribute: 'h-align' },
 
@@ -101,6 +101,9 @@ class ButtonSubtle extends ButtonMixin(LitElement) {
 				:host([h-align="text"]) button {
 					inset-inline-start: calc(var(--d2l-button-subtle-padding-inline-start) * -1);
 				}
+				:host([h-align="text-end"]) button {
+					inset-inline-end: calc(var(--d2l-button-subtle-padding-inline-end) * -1);
+				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */
 				button::-moz-focus-inner {

package/components/button/demo/button-icon.html

@@ -102,9 +102,16 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
-					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
-					<d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-icon>
+					<div style="border: 1px dashed #999999; text-align: start;">
+						<d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
+						<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+						<d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-icon>
+					</div>
+					<div style="border: 1px dashed #999999; text-align: end;">
+						<d2l-button-icon icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-icon>
+						<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+						<d2l-button-icon icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-icon>
+					</div>
 				</template>
 			</d2l-demo-snippet>
 

package/components/button/demo/button-subtle.html

@@ -62,15 +62,28 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
-					<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
-					<d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
-					<br>
-					<d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
-					<br>
-					<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
-					<br>
-					<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+					<div style="border: 1px dashed #999999; text-align: start;">
+						<d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
+						<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+						<d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text"></d2l-button-subtle>
+					</div>
+					<div style="border: 1px dashed #999999; text-align: end;">
+						<d2l-button-subtle icon="tier1:gear" text="Button Edge Aligned (default)"></d2l-button-subtle>
+						<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
+						<d2l-button-subtle icon="tier1:gear" text="Button Content Aligned" h-align="text-end"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle slim icon="tier1:gear" text="Slim Button Content Aligned" h-align="text-end"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle icon="tier1:chevron-down" text="Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
+						<br>
+						<d2l-button-subtle slim icon="tier1:chevron-down" text="Slim Subtle Button" icon-right h-align="text-end"></d2l-button-subtle>
+					</div>
 				</template>
 			</d2l-demo-snippet>
 

package/components/dropdown/README.md

@@ -109,7 +109,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
 | `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
-| `h-align` | String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text |
+| `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text |
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/dropdown/dropdown-button-subtle.js

@@ -19,8 +19,8 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 			description: { type: String },
 
 			/**
-			* Aligns the leading edge of text if value is set to "text"
-			* @type {'text'|''}
+			* Aligns the leading edge of text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+			* @type {'text'|'text-end'|''}
 			*/
 			hAlign: { type: String, reflect: true, attribute: 'h-align' },
 

package/components/more-less/README.md

@@ -21,7 +21,7 @@ The `d2l-more-less` element can be used to minimize the display of long content,
 | Property | Type | Description |
 |---|---|---|
 | `expanded` | Boolean | Specifies the expanded/collapsed state of the content |
-| `h-align` | String | A value of `text` aligns the leading edge of text |
+| `h-align` | String | Possible values are undefined (default), `text` or `text-end`. If `text` or `text-end`, aligns the button content to the leading (or trailing) edge of text. |
 | `height` | String, default: `'4em'` | Maximum height of the content when in "less" mode. The `d2l-more-less` element itself will take up additional vertical space for the fading effect as well as the more/less button itself. |
 | `inactive` | Boolean | Whether the component is active or inactive |
 <!-- docs: end hidden content -->

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

@@ -27,8 +27,8 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			expanded: { type: Boolean, reflect: true },
 
 			/**
-			 * The h-align property of the more-less button
-			 * @type {'text'|''}
+			 * Aligns the leading edge of more/less button text if value is set to "text" for left-aligned layouts, the trailing edge of text if value is set to "text-end" for right-aligned layouts
+			 * @type {'text'|'text-end'|''}
 			 */
 			hAlign: { type: String, attribute: 'h-align' },
 

package/components/overflow-group/overflow-group.js

@@ -13,7 +13,6 @@ import '../menu/menu-item-link.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OVERFLOW_MINI_CLASS, OverflowGroupMixin } from './overflow-group-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const OPENER_STYLE = {
 	DEFAULT: 'default',
@@ -58,7 +57,7 @@ function createMenuItemSeparator() {
  * @attr {'default'|'icon'} [opener-type="default"] - Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text
  * @attr {boolean} auto-show - Use predefined classes on slot elements to set min and max buttons to show
 */
-class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
+class OverflowGroup extends OverflowGroupMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -87,15 +86,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 			::slotted(span),
 			::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
 			::slotted(d2l-dropdown-button) {
-				margin-right: 0.6rem;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-button),
-			:host([dir="rtl"]) ::slotted(d2l-link),
-			:host([dir="rtl"]) ::slotted(span),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-button) {
-				margin-left: 0.6rem;
-				margin-right: 0;
+				margin-inline-end: 0.6rem;
 			}
 			::slotted(d2l-button-subtle),
 			::slotted(d2l-button-icon),
@@ -104,17 +95,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 			::slotted(d2l-dropdown-context-menu),
 			::slotted(d2l-selection-action),
 			::slotted(d2l-selection-action-dropdown) {
-				margin-right: 0.2rem;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-button-subtle),
-			:host([dir="rtl"]) ::slotted(d2l-button-icon),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-button-subtle),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-more),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-context-menu),
-			:host([dir="rtl"]) ::slotted(d2l-selection-action),
-			:host([dir="rtl"]) ::slotted(d2l-selection-action-dropdown) {
-				margin-left: 0.2rem;
-				margin-right: 0;
+				margin-inline-end: 0.2rem;
 			}
 		`];
 	}

package/components/selection/selection-controls.js

@@ -8,7 +8,6 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PageableSubscriberMixin } from '../paging/pageable-subscriber-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
@@ -16,7 +15,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
+export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(LocalizeCoreElement(LitElement))) {
 
 	static get properties() {
 		return {
@@ -95,27 +94,16 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 				flex: none;
 			}
 			d2l-selection-select-all + d2l-selection-summary {
-				margin-left: 0.9rem;
-			}
-			:host([dir="rtl"]) d2l-selection-select-all + d2l-selection-summary {
-				margin-left: 0;
-				margin-right: 0.9rem;
+				margin-inline-start: 0.9rem;
 			}
 			d2l-selection-select-all-pages {
 				flex: none;
-				margin-left: 0.45rem;
-			}
-			:host([dir="rtl"]) d2l-selection-select-all-pages {
-				margin-left: 0;
-				margin-right: 0.45rem;
+				margin-inline-start: 0.45rem;
 			}
 			.d2l-selection-controls-actions {
 				--d2l-overflow-group-justify-content: flex-end;
 				flex: auto;
-				text-align: right;
-			}
-			:host([dir="rtl"]) .d2l-selection-controls-actions {
-				text-align: left;
+				text-align: end;
 			}
 			.d2l-sticky-edge {
 				left: 0;

package/components/table/demo/table-test.js

@@ -162,9 +162,11 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 		`;
 	}
 
-	_handlePagerLoadMore(e) {
+	async _handlePagerLoadMore(e) {
+		const pageSize = e.target.pageSize;
+		await new Promise(resolve => setTimeout(resolve, 1000));
 		const startIndex = this._data.length + 1;
-		for (let i = 0; i < e.target.pageSize; i++) {
+		for (let i = 0; i < pageSize; i++) {
 			this._data.push({ name: `City ${startIndex + i}, Country ${startIndex + i}`, data: { 'city': `City ${startIndex + i}`, 'country': `Country ${startIndex + i}`, 'population': 26320000, 'size': 6340, 'elevation': 4, 'latitude': 3, 'longitude': 3 }, selected: false });
 		}
 		this.requestUpdate();

package/custom-elements.json

@@ -407,8 +407,8 @@
         },
         {
           "name": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "icon",
@@ -448,8 +448,8 @@
         {
           "name": "hAlign",
           "attribute": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "icon",
@@ -616,8 +616,8 @@
         },
         {
           "name": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "icon",
@@ -663,8 +663,8 @@
         {
           "name": "hAlign",
           "attribute": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "icon",
@@ -2366,8 +2366,8 @@
         },
         {
           "name": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "text",
@@ -2403,8 +2403,8 @@
         {
           "name": "hAlign",
           "attribute": "h-align",
-          "description": "Aligns the leading edge of text if value is set to \"text\"",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "text",
@@ -10210,8 +10210,8 @@
       "attributes": [
         {
           "name": "h-align",
-          "description": "The h-align property of the more-less button",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of more/less button text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "expanded",
@@ -10236,8 +10236,8 @@
         {
           "name": "hAlign",
           "attribute": "h-align",
-          "description": "The h-align property of the more-less button",
-          "type": "'text'|''"
+          "description": "Aligns the leading edge of more/less button text if value is set to \"text\" for left-aligned layouts, the trailing edge of text if value is set to \"text-end\" for right-aligned layouts",
+          "type": "'text'|'text-end'|''"
         },
         {
           "name": "expanded",

package/package.json

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