@brightspace-ui/core 3.267.0 → 3.267.3

package/components/button/button-move.js

@@ -34,168 +34,164 @@ export const moveActions = Object.freeze({
  */
 class ButtonMove extends ThemeMixin(FocusMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * @ignore
-			 */
-			// eslint-disable-next-line lit/no-native-attributes
-			autofocus: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context
-			 * @type {string}
-			 */
-			description: { type: String },
-			/**
-			 * Disables the down interaction
-			 * @type {boolean}
-			 */
-			disabledDown: { type: Boolean, attribute: 'disabled-down', reflect: true },
-			/**
-			 * Disables the end interaction
-			 * @type {boolean}
-			 */
-			disabledEnd: { type: Boolean, attribute: 'disabled-end', reflect: true },
-			/**
-			 * Disables the home interaction
-			 * @type {boolean}
-			 */
-			disabledHome: { type: Boolean, attribute: 'disabled-home', reflect: true },
-			/**
-			 * Disables the left interaction
-			 * @type {boolean}
-			 */
-			disabledLeft: { type: Boolean, attribute: 'disabled-left', reflect: true },
-			/**
-			 * Disables the right interaction
-			 * @type {boolean}
-			 */
-			disabledRight: { type: Boolean, attribute: 'disabled-right', reflect: true },
-			/**
-			 * Disables the up interaction
-			 * @type {boolean}
-			 */
-			disabledUp: { type: Boolean, attribute: 'disabled-up', reflect: true },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Accessible text for the button
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * Renders the buttons in a side by side orientation
-			 * @type {boolean}
-			 */
-			sideToSide: { type: Boolean, attribute: 'side-to-side', reflect: true }
-		};
-	}
+	static properties = {
+		/**
+		 * @ignore
+		 */
+		// eslint-disable-next-line lit/no-native-attributes
+		autofocus: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * Disables the down interaction
+		 * @type {boolean}
+		 */
+		disabledDown: { type: Boolean, attribute: 'disabled-down', reflect: true },
+		/**
+		 * Disables the end interaction
+		 * @type {boolean}
+		 */
+		disabledEnd: { type: Boolean, attribute: 'disabled-end', reflect: true },
+		/**
+		 * Disables the home interaction
+		 * @type {boolean}
+		 */
+		disabledHome: { type: Boolean, attribute: 'disabled-home', reflect: true },
+		/**
+		 * Disables the left interaction
+		 * @type {boolean}
+		 */
+		disabledLeft: { type: Boolean, attribute: 'disabled-left', reflect: true },
+		/**
+		 * Disables the right interaction
+		 * @type {boolean}
+		 */
+		disabledRight: { type: Boolean, attribute: 'disabled-right', reflect: true },
+		/**
+		 * Disables the up interaction
+		 * @type {boolean}
+		 */
+		disabledUp: { type: Boolean, attribute: 'disabled-up', reflect: true },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true },
+		/**
+		 * Renders the buttons in a side by side orientation
+		 * @type {boolean}
+		 */
+		sideToSide: { type: Boolean, attribute: 'side-to-side', reflect: true }
+	};
 
-	static get styles() {
-		return [ buttonStyles,
-			css`
-				:host {
-					--d2l-button-move-background-color-focus: #ffffff;
-					--d2l-button-move-icon-background-color-hover: var(--d2l-color-mica);
-					--d2l-icon-fill-color: var(--d2l-color-tungsten);
-					display: inline-block;
-					line-height: 0;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				:host([theme="dark"]) {
-					--d2l-button-move-background-color-focus: #000000;
-					--d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-icon-fill-color: var(--d2l-color-sylvite);
-					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
-				}
-				button {
-					background-color: transparent;
-					display: flex;
-					flex-direction: column;
-					gap: 2px;
-					margin: 0;
-					min-height: auto;
-					padding: 0;
-					position: relative;
-					width: 0.9rem;
-				}
-				d2l-icon {
-					border-radius: 0.1rem;
-					height: 0.85rem;
-					width: 0.9rem;
-				}
-				button:focus {
-					background-color: var(--d2l-button-move-background-color-focus);
-				}
-				button:hover > d2l-icon,
-				button:focus > d2l-icon {
-					background-color: var(--d2l-button-move-icon-background-color-hover);
-				}
-				.up-icon {
-					border-top-left-radius: 0.3rem;
-					border-top-right-radius: 0.3rem;
-				}
-				.down-icon {
-					border-bottom-left-radius: 0.3rem;
-					border-bottom-right-radius: 0.3rem;
-				}
-				.layer {
-					display: flex;
-					flex-direction: column;
-					height: calc(1.2rem * 2);
-					inset-inline-start: -0.2rem;
-					position: absolute;
-					top: -0.35rem;
-					width: 1.3rem;
-				}
-				.up-layer,
-				.down-layer {
-					height: 1.2rem;
-					position: relative;
-					width: 1.25rem;
-				}
+	static styles = [ buttonStyles,
+		css`
+			:host {
+				--d2l-button-move-background-color-focus: #ffffff;
+				--d2l-button-move-icon-background-color-hover: var(--d2l-color-mica);
+				--d2l-icon-fill-color: var(--d2l-color-tungsten);
+				display: inline-block;
+				line-height: 0;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([theme="dark"]) {
+				--d2l-button-move-background-color-focus: #000000;
+				--d2l-button-move-icon-background-color-hover: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
+				--d2l-icon-fill-color: var(--d2l-color-sylvite);
+				--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
+			}
+			button {
+				background-color: transparent;
+				display: flex;
+				flex-direction: column;
+				gap: 2px;
+				margin: 0;
+				min-height: auto;
+				padding: 0;
+				position: relative;
+				width: 0.9rem;
+			}
+			d2l-icon {
+				border-radius: 0.1rem;
+				height: 0.85rem;
+				width: 0.9rem;
+			}
+			button:focus {
+				background-color: var(--d2l-button-move-background-color-focus);
+			}
+			button:hover > d2l-icon,
+			button:focus > d2l-icon {
+				background-color: var(--d2l-button-move-icon-background-color-hover);
+			}
+			.up-icon {
+				border-top-left-radius: 0.3rem;
+				border-top-right-radius: 0.3rem;
+			}
+			.down-icon {
+				border-bottom-left-radius: 0.3rem;
+				border-bottom-right-radius: 0.3rem;
+			}
+			.layer {
+				display: flex;
+				flex-direction: column;
+				height: calc(1.2rem * 2);
+				inset-inline-start: -0.2rem;
+				position: absolute;
+				top: -0.35rem;
+				width: 1.3rem;
+			}
+			.up-layer,
+			.down-layer {
+				height: 1.2rem;
+				position: relative;
+				width: 1.25rem;
+			}
 
-				/* Firefox includes a hidden border which messes up button dimensions */
-				button::-moz-focus-inner {
-					border: 0;
-				}
-				button[disabled]:hover > d2l-icon {
-					background-color: transparent;
-				}
-				:host([disabled-up]) .up-icon,
-				:host([disabled-down]) .down-icon {
-					opacity: 0.5;
-				}
-				:host([disabled-up]) .up-layer,
-				:host([disabled-down]) .down-layer {
-					cursor: default;
-				}
+			/* Firefox includes a hidden border which messes up button dimensions */
+			button::-moz-focus-inner {
+				border: 0;
+			}
+			button[disabled]:hover > d2l-icon {
+				background-color: transparent;
+			}
+			:host([disabled-up]) .up-icon,
+			:host([disabled-down]) .down-icon {
+				opacity: 0.5;
+			}
+			:host([disabled-up]) .up-layer,
+			:host([disabled-down]) .down-layer {
+				cursor: default;
+			}
 
-				:host([side-to-side]) button {
-					align-items: center;
-					flex-direction: row;
-					height: 1.2rem;
-					width: calc(calc(1.2rem + 1px) * 2);
-				}
+			:host([side-to-side]) button {
+				align-items: center;
+				flex-direction: row;
+				height: 1.2rem;
+				width: calc(calc(1.2rem + 1px) * 2);
+			}
 
-				:host([side-to-side]) .layer {
-					flex-direction: row;
-					gap: 2px;
-					height: 1.2rem;
-					inset-inline-start: 0;
-					top: 0;
-					width: calc(calc(1.2rem + 1px) * 2);
-				}
+			:host([side-to-side]) .layer {
+				flex-direction: row;
+				gap: 2px;
+				height: 1.2rem;
+				inset-inline-start: 0;
+				top: 0;
+				width: calc(calc(1.2rem + 1px) * 2);
+			}
 
-				:host([side-to-side]) d2l-icon {
-					height: 1.2rem;
-					/* Arrows need to be rotated in opposite direction for RTL */
-					transform: rotate(calc(-90deg * var(--d2l-length-factor)));
-					width: 1.2rem;
-				}
-			`
-		];
-	}
+			:host([side-to-side]) d2l-icon {
+				height: 1.2rem;
+				/* Arrows need to be rotated in opposite direction for RTL */
+				transform: rotate(calc(-90deg * var(--d2l-length-factor)));
+				width: 1.2rem;
+			}
+		`
+	];
 
 	constructor() {
 		super();

package/components/button/button-split-item.js

@@ -8,27 +8,23 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class ButtonSplitItem extends PropertyRequiredMixin(MenuItemMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * REQUIRED: Key of the action
-			 * @type {string}
-			 */
-			key: { type: String, required: true }
-		};
-	}
+	static properties = {
+		/**
+		 * REQUIRED: Key of the action
+		 * @type {string}
+		 */
+		key: { type: String, required: true }
+	};
 
-	static get styles() {
-		return [ menuItemStyles,
-			css`
-				:host {
-					align-items: center;
-					display: flex;
-					padding: 0.75rem 1rem;
-				}
-			`
-		];
-	}
+	static styles = [ menuItemStyles,
+		css`
+			:host {
+				align-items: center;
+				display: flex;
+				padding: 0.75rem 1rem;
+			}
+		`
+	];
 
 	render() {
 		return html`

package/components/button/button-split.js

@@ -16,80 +16,76 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
  */
 class ButtonSplit extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(LitElement))) {
 
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context
-			 * @type {string}
-			 */
-			description: { type: String },
-			/**
-			 * Disables the main action and dropdown opener buttons
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			/**
-			 * Tooltip text when disabled
-			 * @type {string}
-			 */
-			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
-			/**
-			 * REQUIRED: Key of the main action
-			 * @type {string}
-			 */
-			key: { type: String, required: true },
-			/**
-			 * Styles the buttons as a primary buttons
-			 * @type {boolean}
-			 */
-			primary: { type: Boolean, reflect: true },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Accessible text for the main action button
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true, required: true },
-			_focusVisibleElem: { state: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-			.container {
-				display: flex;
-				gap: 2px;
-			}
-			.main-action {
-				--d2l-button-start-end-radius: 0;
-				--d2l-button-end-end-radius: 0;
-			}
-			.d2l-dropdown-opener {
-				--d2l-button-start-start-radius: 0;
-				--d2l-button-end-start-radius: 0;
-				--d2l-button-padding-inline-end: 0.6rem;
-				--d2l-button-padding-inline-start: 0.6rem;
-			}
-			.d2l-dropdown-opener[primary] > d2l-icon {
-				color: #ffffff;
-			}
-			::slotted(:not(d2l-button-split-item)) {
-				display: none;
-			}
-			.main-action-focus-visible .d2l-dropdown-opener {
-				--d2l-button-padding-inline-start: calc(0.6rem - 4px);
-				margin-inline-start: 4px;
-			}
-			.menu-opener-focus-visible .main-action {
-				--d2l-button-padding-inline-end: calc(1.5rem - 4px);
-				margin-inline-end: 4px;
-			}
-		`;
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: A description to be added to the main action button for accessibility when text does not provide enough context
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * Disables the main action and dropdown opener buttons
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		/**
+		 * Tooltip text when disabled
+		 * @type {string}
+		 */
+		disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+		/**
+		 * REQUIRED: Key of the main action
+		 * @type {string}
+		 */
+		key: { type: String, required: true },
+		/**
+		 * Styles the buttons as a primary buttons
+		 * @type {boolean}
+		 */
+		primary: { type: Boolean, reflect: true },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the main action button
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true, required: true },
+		_focusVisibleElem: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+		.container {
+			display: flex;
+			gap: 2px;
+		}
+		.main-action {
+			--d2l-button-start-end-radius: 0;
+			--d2l-button-end-end-radius: 0;
+		}
+		.d2l-dropdown-opener {
+			--d2l-button-start-start-radius: 0;
+			--d2l-button-end-start-radius: 0;
+			--d2l-button-padding-inline-end: 0.6rem;
+			--d2l-button-padding-inline-start: 0.6rem;
+		}
+		.d2l-dropdown-opener[primary] > d2l-icon {
+			color: #ffffff;
+		}
+		::slotted(:not(d2l-button-split-item)) {
+			display: none;
+		}
+		.main-action-focus-visible .d2l-dropdown-opener {
+			--d2l-button-padding-inline-start: calc(0.6rem - 4px);
+			margin-inline-start: 4px;
+		}
+		.menu-opener-focus-visible .main-action {
+			--d2l-button-padding-inline-end: calc(1.5rem - 4px);
+			margin-inline-end: 4px;
+		}
+	`;
 
 	constructor() {
 		super();

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

@@ -7,25 +7,23 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
  * A button component that copies to the clipboard, using the "subtle" button style.
  */
 class ButtonSubtleCopy extends FocusMixin(ButtonCopyMixin(LitElement)) {
-	static get properties() {
-		return {
-			/**
-			 * ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context
-			 * @type {string}
-			 */
-			description: { type: String },
-			/**
-			 * ACCESSIBILITY: REQUIRED: Text for the button
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true },
-			/**
-			 * Whether to render the slimmer version of the button
-			 * @type {boolean}
-			 */
-			slim: { type: Boolean, reflect: true },
-		};
-	}
+	static properties = {
+		/**
+		 * ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context
+		 * @type {string}
+		 */
+		description: { type: String },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Text for the button
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true },
+		/**
+		 * Whether to render the slimmer version of the button
+		 * @type {boolean}
+		 */
+		slim: { type: Boolean, reflect: true },
+	};
 
 	static get focusElementSelector() {
 		return 'd2l-button-subtle';