@brightspace-ui/core 3.2.1 → 3.3.0

package/components/html-block/html-block.js

@@ -231,12 +231,19 @@ class HtmlBlock extends LitElement {
 			'd2l-html-block-compact': this.compact
 		};
 
-		return html`
-			<div class="${classMap(renderContainerClasses)}">
-				${(this._embedsFeatureEnabled() && !this.noDeferredRendering) ? until(this._processEmbeds(), nothing) : nothing}
-			</div>
-			${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
-		`;
+		if (this._embedsFeatureEnabled()) {
+			return html`
+				<div class="${classMap(renderContainerClasses)}">
+					${!this.noDeferredRendering ? until(this._processEmbeds(), nothing) : nothing}
+				</div>
+				${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
+			`;
+		} else {
+			return html`
+				<div class="${classMap(renderContainerClasses)}"></div>
+				${this.noDeferredRendering ? html`<slot @slotchange="${this._handleSlotChange}"></slot>` : ''}
+			`;
+		}
 	}
 
 	async updated(changedProperties) {

package/components/table/README.md

@@ -227,6 +227,7 @@ When tabular data can be sorted, the `<d2l-table-col-sort-button>` can be used t
 |---|---|---|---|
 | `desc` | boolean | Whether sort direction is descending | false |
 | `nosort` | boolean | Column is not currently sorted. Hides the ascending/descending sort icon. | false |
+| `position` | string | Position of the button content. Accepted values are 'start', 'center', and 'end'. | 'start' |
 | `source-type` | string | The type of data in the column. Used to set the title. Accepted values are 'words', 'numbers', and 'dates'. | 'unknown' |
 
 ## Selection

package/components/table/table-col-sort-button.js

@@ -31,6 +31,14 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				reflect: true,
 				type: Boolean
 			},
+			/**
+			 * Position of the button content
+			 * @type {'start'|'center'|'end'}
+			 */
+			position: {
+				reflect: true,
+				type: String
+			},
 			/**
 			 * The type of data in the column. Used to set the title.
 			 *  @type {'words'|'numbers'|'dates'|'unknown'}
@@ -46,11 +54,26 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		return css`
 			:host {
 				--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
+				--d2l-table-col-sort-button-additional-padding-inline-start: 0px; /* stylelint-disable-line length-zero-no-unit */
 				--d2l-table-col-sort-button-width: calc(100% - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 			}
 			:host([nosort]) {
 				--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.6rem + 18px);
 			}
+			:host([nosort][position="center"]) {
+				--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.5 * (0.6rem + 18px) + var(--d2l-table-cell-col-sort-button-size-offset, 4px));
+				--d2l-table-col-sort-button-additional-padding-inline-start: calc(0.5 * (0.6rem + 18px) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
+			}
+			:host([nosort][position="end"]) {
+				--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
+				--d2l-table-col-sort-button-additional-padding-inline-start: calc(0.6rem + 18px);
+			}
+			:host([position="center"]) button {
+				justify-content: center;
+			}
+			:host([position="end"]) button {
+				justify-content: end;
+			}
 			button {
 				align-items: center;
 				background-color: transparent;
@@ -67,6 +90,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				margin-inline: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
 				padding: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 				padding-inline-end: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-end));
+				padding-inline-start: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-start));
 				text-decoration: none;
 				width: var(--d2l-table-col-sort-button-width);
 			}
@@ -94,6 +118,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		super();
 		this.desc = false;
 		this.nosort = false;
+		this.position = 'start';
 		this.sourceType = 'unknown';
 
 		this._describedById = getUniqueId();

package/components/table/table-wrapper.js

@@ -94,6 +94,7 @@ export const tableStyles = css`
 	}
 	d2l-table-col-sort-button:not(:only-child) {
 		--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
+		--d2l-table-col-sort-button-additional-padding-inline-start: 0px; /* stylelint-disable-line length-zero-no-unit */
 	}
 
 	/* TODO: once we only support browsers that support :has the section below can be removed up until @supports */

package/custom-elements.json

@@ -12037,6 +12037,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "position",
+          "description": "Position of the button content",
+          "type": "'start'|'center'|'end'",
+          "default": "\"start\""
+        },
         {
           "name": "source-type",
           "description": "The type of data in the column. Used to set the title.",
@@ -12059,6 +12065,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "Position of the button content",
+          "type": "'start'|'center'|'end'",
+          "default": "\"start\""
+        },
         {
           "name": "sourceType",
           "attribute": "source-type",

package/package.json

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