@brightspace-ui/core 3.267.1 → 3.268.0

package/components/button/button-add.js

@@ -19,138 +19,134 @@ const MODE = {
  * A component for quickly adding items to a specific locaiton.
  */
 class ButtonAdd extends PropertyRequiredMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
-	static get properties() {
-		return {
-			/**
-			 * Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).
-			 * @type {'icon'|'icon-and-text'|'icon-when-interacted'}
-			 */
-			mode: { type: String, reflect: true },
-			/**
-			 * ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
-			 * @type {string}
-			 */
-			text: { type: String, required: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				--d2l-button-add-animation-delay: 0ms;
-				--d2l-button-add-animation-duration: 200ms;
-				--d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
-				--d2l-button-add-line-color: var(--d2l-color-mica);
-				--d2l-button-add-line-height: 1px;
-				--d2l-button-add-hover-focus-line-height: 2px;
-			}
-			:host([mode="icon-when-interacted"]) {
-				--d2l-button-add-animation-delay: 50ms;
-			}
-			button {
-				align-items: center;
-				background-color: transparent;
-				border: 0;
-				box-shadow: none;
-				cursor: pointer;
-				display: flex;
-				font-family: inherit;
-				height: 11px;
-				justify-content: center;
-				margin: 6.5px 0; /* (d2l-button-add-icon-text height - line height) / 2 */
-				outline: none;
-				padding: 0;
-				position: relative;
-				user-select: none;
-				white-space: nowrap;
-				width: 100%;
-				z-index: 1; /* needed for button-add to have expected hover behaviour in list (hover from below, tooltip position) */
-			}
-			:host([mode="icon-and-text"]) button {
-				margin: calc((1.5rem - 11px) / 2) 0; /* (d2l-button-add-icon-text height - line height) / 2 */
-			}
-
-			.line {
-				background: var(--d2l-button-add-line-color);
-				height: var(--d2l-button-add-line-height);
-				margin: 5px 0;
-				width: 100%;
-			}
-
+	static properties = {
+		/**
+		 * Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).
+		 * @type {'icon'|'icon-and-text'|'icon-when-interacted'}
+		 */
+		mode: { type: String, reflect: true },
+		/**
+		 * ACCESSIBILITY: The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
+		 * @type {string}
+		 */
+		text: { type: String, required: true }
+	};
+
+	static styles = css`
+		:host {
+			--d2l-button-add-animation-delay: 0ms;
+			--d2l-button-add-animation-duration: 200ms;
+			--d2l-button-add-hover-focus-color: var(--d2l-color-celestine-minus-1);
+			--d2l-button-add-line-color: var(--d2l-color-mica);
+			--d2l-button-add-line-height: 1px;
+			--d2l-button-add-hover-focus-line-height: 2px;
+		}
+		:host([mode="icon-when-interacted"]) {
+			--d2l-button-add-animation-delay: 50ms;
+		}
+		button {
+			align-items: center;
+			background-color: transparent;
+			border: 0;
+			box-shadow: none;
+			cursor: pointer;
+			display: flex;
+			font-family: inherit;
+			height: 11px;
+			justify-content: center;
+			margin: 6.5px 0; /* (d2l-button-add-icon-text height - line height) / 2 */
+			outline: none;
+			padding: 0;
+			position: relative;
+			user-select: none;
+			white-space: nowrap;
+			width: 100%;
+			z-index: 1; /* needed for button-add to have expected hover behaviour in list (hover from below, tooltip position) */
+		}
+		:host([mode="icon-and-text"]) button {
+			margin: calc((1.5rem - 11px) / 2) 0; /* (d2l-button-add-icon-text height - line height) / 2 */
+		}
+
+		.line {
+			background: var(--d2l-button-add-line-color);
+			height: var(--d2l-button-add-line-height);
+			margin: 5px 0;
+			width: 100%;
+		}
+
+		button:hover .line,
+		button:focus .line {
+			background: var(--d2l-button-add-hover-focus-color);
+			height: var(--d2l-button-add-hover-focus-line-height);
+		}
+		button:hover d2l-button-add-icon-text,
+		button:focus d2l-button-add-icon-text {
+			--d2l-button-add-icon-text-color: var(--d2l-button-add-hover-focus-color);
+		}
+		:host([mode="icon-when-interacted"]) button:hover .line {
+			transition-delay: var(--d2l-button-add-animation-delay);
+		}
+
+		:host([mode="icon-when-interacted"]) button:not(:focus):not(:hover) d2l-button-add-icon-text {
+			position: absolute;
+		}
+		:host([mode="icon-when-interacted"]) button:hover d2l-button-add-icon-text,
+		:host([mode="icon-when-interacted"]) button:focus d2l-button-add-icon-text {
+			animation: position-change-animation var(--d2l-button-add-animation-delay); /* add delay in changing position to avoid flash of missing icon space */
+		}
+		@keyframes position-change-animation {
+			0% { position: absolute; }
+			100% { position: static; }
+		}
+		${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
+		:host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
+		:host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
+			border-radius: 0.2rem;
+			padding: 0.15rem;
+		}
+
+		@media (prefers-reduced-motion: no-preference) {
 			button:hover .line,
 			button:focus .line {
-				background: var(--d2l-button-add-hover-focus-color);
-				height: var(--d2l-button-add-hover-focus-line-height);
-			}
-			button:hover d2l-button-add-icon-text,
-			button:focus d2l-button-add-icon-text {
-				--d2l-button-add-icon-text-color: var(--d2l-button-add-hover-focus-color);
-			}
-			:host([mode="icon-when-interacted"]) button:hover .line {
-				transition-delay: var(--d2l-button-add-animation-delay);
-			}
-
-			:host([mode="icon-when-interacted"]) button:not(:focus):not(:hover) d2l-button-add-icon-text {
-				position: absolute;
+				animation: line-start-animation var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay) 1 forwards;
+				transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
 			}
-			:host([mode="icon-when-interacted"]) button:hover d2l-button-add-icon-text,
-			:host([mode="icon-when-interacted"]) button:focus d2l-button-add-icon-text {
-				animation: position-change-animation var(--d2l-button-add-animation-delay); /* add delay in changing position to avoid flash of missing icon space */
+			button:hover .line-end,
+			button:focus .line-end {
+				animation-name: line-end-animation;
 			}
-			@keyframes position-change-animation {
-				0% { position: absolute; }
-				100% { position: static; }
-			}
-			${getFocusRingStyles(pseudoClass => `button:${pseudoClass} d2l-button-add-icon-text`, { extraStyles: css`background-color: white; border-radius: 0.3rem;` })}
-			:host([mode="icon-when-interacted"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text,
-			:host([mode="icon"]) button:${unsafeCSS(getFocusPseudoClass())} d2l-button-add-icon-text {
-				border-radius: 0.2rem;
-				padding: 0.15rem;
-			}
-
-			@media (prefers-reduced-motion: no-preference) {
-				button:hover .line,
-				button:focus .line {
-					animation: line-start-animation var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay) 1 forwards;
-					transition: all var(--d2l-button-add-animation-duration) ease-in var(--d2l-button-add-animation-delay);
-				}
-				button:hover .line-end,
-				button:focus .line-end {
-					animation-name: line-end-animation;
-				}
 
-				@keyframes line-start-animation {
-					0% {
-						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%;
-						opacity: 10%;
-					}
-					100% {
-						background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%; /* safari */
-						background-position: var(--d2l-inline-end, right);
-					}
+			@keyframes line-start-animation {
+				0% {
+					background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%;
+					opacity: 10%;
 				}
-				@keyframes line-end-animation {
-					0% {
-						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%;
-						opacity: 10%;
-					}
-					100% {
-						background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%; /* safari */
-						background-position: var(--d2l-inline-start, left);
-					}
+				100% {
+					background: linear-gradient(to var(--d2l-inline-end, right), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-start, left) center / 113%; /* safari */
+					background-position: var(--d2l-inline-end, right);
 				}
 			}
-			@media (prefers-contrast: more) {
-				.line {
-					background-color: ButtonBorder;
+			@keyframes line-end-animation {
+				0% {
+					background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%;
+					opacity: 10%;
 				}
-				button:hover .line,
-				button:focus .line {
-					background-color: Highlight !important;
+				100% {
+					background: linear-gradient(to var(--d2l-inline-start, left), var(--d2l-button-add-line-color) 0%, var(--d2l-button-add-line-color) 11%, var(--d2l-button-add-hover-focus-color) 11%) var(--d2l-inline-end, right) center / 113%; /* safari */
+					background-position: var(--d2l-inline-start, left);
 				}
 			}
-		`;
-	}
+		}
+		@media (prefers-contrast: more) {
+			.line {
+				background-color: ButtonBorder;
+			}
+			button:hover .line,
+			button:focus .line {
+				background-color: Highlight !important;
+			}
+		}
+	`;
 
 	constructor() {
 		super();
@@ -194,49 +190,45 @@ customElements.define('d2l-button-add', ButtonAdd);
  * @ignore
  */
 class ButtonAddIconText extends VisibleOnAncestorMixin(LitElement) {
-	static get properties() {
-		return {
-			text: { type: String }
-		};
-	}
-
-	static get styles() {
-		return [visibleOnAncestorStyles, css`
-			:host {
-				--d2l-focus-ring-offset: 0;
-				--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
-				--d2l-button-add-icon-text-color: var(--d2l-color-galena);
-				align-items: center;
-				display: flex;
-				stroke: var(--d2l-button-add-icon-text-color);
-				stroke-width: 2;
-			}
-			:host([visible-on-ancestor]),
-			:host([text]) {
-				--d2l-button-add-icon-text-color: var(--d2l-color-celestine);
-			}
-			:host([text]) {
-				color: var(--d2l-button-add-icon-text-color);
-				height: 1.5rem;
-				padding: 0 0.3rem;
-			}
-
-			:host([text]) svg {
-				padding-inline-end: 0.2rem;
-			}
-			:host(:not([text])) svg {
-				margin: -0.15rem; /** hover/click target */
-				padding: 0.15rem; /** hover/click target */
-			}
-
-			span {
-				font-size: 0.7rem;
-				font-weight: 700;
-				letter-spacing: 0.2px;
-				line-height: 1rem;
-			}`
-		];
-	}
+	static properties = {
+		text: { type: String }
+	};
+
+	static styles = [visibleOnAncestorStyles, css`
+		:host {
+			--d2l-focus-ring-offset: 0;
+			--d2l-focus-ring-color: var(--d2l-button-add-hover-focus-color);
+			--d2l-button-add-icon-text-color: var(--d2l-color-galena);
+			align-items: center;
+			display: flex;
+			stroke: var(--d2l-button-add-icon-text-color);
+			stroke-width: 2;
+		}
+		:host([visible-on-ancestor]),
+		:host([text]) {
+			--d2l-button-add-icon-text-color: var(--d2l-color-celestine);
+		}
+		:host([text]) {
+			color: var(--d2l-button-add-icon-text-color);
+			height: 1.5rem;
+			padding: 0 0.3rem;
+		}
+
+		:host([text]) svg {
+			padding-inline-end: 0.2rem;
+		}
+		:host(:not([text])) svg {
+			margin: -0.15rem; /** hover/click target */
+			padding: 0.15rem; /** hover/click target */
+		}
+
+		span {
+			font-size: 0.7rem;
+			font-weight: 700;
+			letter-spacing: 0.2px;
+			line-height: 1rem;
+		}`
+	];
 
 	render() {
 		return html`

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

@@ -4,17 +4,15 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 export const ButtonCopyMixin = (superclass) => class extends LocalizeCoreElement(superclass) {
 
-	static get properties() {
-		return {
-			/**
-			 * Disables the button
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
-			_recentCopySuccessful: { state: true },
-			_toastState: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Disables the button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean, reflect: true },
+		_recentCopySuccessful: { state: true },
+		_toastState: { state: true }
+	};
 
 	constructor() {
 		super();

package/components/button/button-copy.js

@@ -8,26 +8,22 @@ import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
  */
 class ButtonCopy extends FocusMixin(ButtonCopyMixin(LitElement)) {
 
-	static get properties() {
-		return {
-			/**
-			 * Description of the content being copied to clipboard
-			 * @type {string}
-			 */
-			text: { type: String },
-		};
-	}
+	static properties = {
+		/**
+		 * Description of the content being copied to clipboard
+		 * @type {string}
+		 */
+		text: { type: String },
+	};
 
-	static get styles() {
-		return css`
-			:host {
-				display: inline-block;
-			}
-			:host([hidden]) {
-				display: none;
-			}
-		`;
-	}
+	static styles = css`
+		:host {
+			display: inline-block;
+		}
+		:host([hidden]) {
+			display: none;
+		}
+	`;
 
 	static get focusElementSelector() {
 		return 'd2l-button-icon';

package/components/button/button-icon.js

@@ -17,122 +17,118 @@ import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
  */
 class ButtonIcon extends SlottedIconMixin(PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(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 },
-
-			/**
-			 * 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' },
-
-			/**
-			 * ACCESSIBILITY: REQUIRED: Accessible text for the button
-			 * @type {string}
-			 */
-			text: { type: String, reflect: true, required: true },
-
-			/**
-			 * Indicates to display translucent (e.g., on rich backgrounds)
-			 * @type {boolean}
-			 */
-			translucent: { type: Boolean, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return [super.styles, buttonStyles, visibleOnAncestorStyles,
-			css`
-				:host {
-					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-tertiary-default);
-					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-tertiary-hover);
-					--d2l-button-icon-border-radius-default: 0.3rem;
-					--d2l-button-icon-min-height-default: calc(2rem + 2px);
-					--d2l-button-icon-min-width-default: calc(2rem + 2px);
-					--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
-					display: inline-block;
-					line-height: 0;
-				}
-				:host([hidden]) {
-					display: none;
-				}
-				:host([translucent]) {
-					--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-translucent-default);
-					--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-translucent-hover);
-					--d2l-focus-ring-color: var(--d2l-theme-icon-color-inverted);
-					--d2l-focus-ring-offset: -4px;
-					--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-inverted);
-					--d2l-button-icon-fill-color-hover: var(--d2l-theme-icon-color-inverted);
-				}
-				:host([theme="dark"]) {
-					--d2l-button-icon-background-color-default: transparent;
-					--d2l-button-icon-background-color-hover-default: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
-					--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
-					--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
-					--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
-				}
-
-				button {
-					background-color: var(--d2l-button-icon-background-color, var(--d2l-button-icon-background-color-default));
-					border-color: transparent;
-					border-radius: var(--d2l-button-icon-border-radius, var(--d2l-button-icon-border-radius-default));
-					font-family: inherit;
-					min-height: var(--d2l-button-icon-min-height, var(--d2l-button-icon-min-height-default));
-					min-width: var(--d2l-button-icon-min-width, var(--d2l-button-icon-min-width-default));
-					padding: 0;
-					position: relative;
-				}
-
-				:host([h-align="text"]) button {
-					inset-inline-start: 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 */
-				button::-moz-focus-inner {
-					border: 0;
-				}
-
-				button:hover:not([disabled]),
-				button:focus:not([disabled]),
-				:host([active]) button:not([disabled]) {
-					--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-theme-icon-color-standard));
-					background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
-				}
-
-				d2l-icon,
-				slot[name="icon"]::slotted(d2l-icon-custom) {
-					color: var(--d2l-button-icon-fill-color, var(--d2l-theme-icon-color-standard));
-				}
-
+	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 },
+
+		/**
+		 * 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' },
+
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, reflect: true, required: true },
+
+		/**
+		 * Indicates to display translucent (e.g., on rich backgrounds)
+		 * @type {boolean}
+		 */
+		translucent: { type: Boolean, reflect: true }
+	};
+
+	static styles = [super.styles, buttonStyles, visibleOnAncestorStyles,
+		css`
+			:host {
+				--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-tertiary-default);
+				--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-tertiary-hover);
+				--d2l-button-icon-border-radius-default: 0.3rem;
+				--d2l-button-icon-min-height-default: calc(2rem + 2px);
+				--d2l-button-icon-min-width-default: calc(2rem + 2px);
+				--d2l-button-icon-h-align: calc(((2rem + 2px - 0.9rem) / 2) * -1);
+				display: inline-block;
+				line-height: 0;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host([translucent]) {
+				--d2l-button-icon-background-color-default: var(--d2l-theme-background-color-interactive-translucent-default);
+				--d2l-button-icon-background-color-hover-default: var(--d2l-theme-background-color-interactive-translucent-hover);
+				--d2l-focus-ring-color: var(--d2l-theme-icon-color-inverted);
+				--d2l-focus-ring-offset: -4px;
+				--d2l-button-icon-fill-color: var(--d2l-theme-icon-color-inverted);
+				--d2l-button-icon-fill-color-hover: var(--d2l-theme-icon-color-inverted);
+			}
+			:host([theme="dark"]) {
+				--d2l-button-icon-background-color-default: transparent;
+				--d2l-button-icon-background-color-hover-default: rgba(51, 53, 54, 0.9); /* tungsten @70% @90% */
+				--d2l-button-icon-fill-color: var(--d2l-color-sylvite);
+				--d2l-button-icon-fill-color-hover: var(--d2l-color-sylvite);
+				--d2l-focus-ring-color: var(--d2l-color-celestine-plus-1);
+			}
+
+			button {
+				background-color: var(--d2l-button-icon-background-color, var(--d2l-button-icon-background-color-default));
+				border-color: transparent;
+				border-radius: var(--d2l-button-icon-border-radius, var(--d2l-button-icon-border-radius-default));
+				font-family: inherit;
+				min-height: var(--d2l-button-icon-min-height, var(--d2l-button-icon-min-height-default));
+				min-width: var(--d2l-button-icon-min-width, var(--d2l-button-icon-min-width-default));
+				padding: 0;
+				position: relative;
+			}
+
+			:host([h-align="text"]) button {
+				inset-inline-start: 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 */
+			button::-moz-focus-inner {
+				border: 0;
+			}
+
+			button:hover:not([disabled]),
+			button:focus:not([disabled]),
+			:host([active]) button:not([disabled]) {
+				--d2l-button-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-theme-icon-color-standard));
+				background-color: var(--d2l-button-icon-background-color-hover, var(--d2l-button-icon-background-color-hover-default));
+			}
+
+			d2l-icon,
+			slot[name="icon"]::slotted(d2l-icon-custom) {
+				color: var(--d2l-button-icon-fill-color, var(--d2l-theme-icon-color-standard));
+			}
+
+			:host([translucent]) button {
+				transition-duration: 0.2s, 0.2s;
+				transition-property: background-color, box-shadow;
+			}
+			:host([translucent][visible-on-ancestor]) button {
+				transition-duration: 0.4s, 0.4s;
+			}
+
+			:host([disabled]) button {
+				cursor: default;
+				opacity: var(--d2l-theme-opacity-disabled-control);
+			}
+
+			@media (prefers-reduced-motion: reduce) {
 				:host([translucent]) button {
-					transition-duration: 0.2s, 0.2s;
-					transition-property: background-color, box-shadow;
+					transition: none;
 				}
-				:host([translucent][visible-on-ancestor]) button {
-					transition-duration: 0.4s, 0.4s;
-				}
-
-				:host([disabled]) button {
-					cursor: default;
-					opacity: var(--d2l-theme-opacity-disabled-control);
-				}
-
-				@media (prefers-reduced-motion: reduce) {
-					:host([translucent]) button {
-						transition: none;
-					}
-				}
-			`
-		];
-	}
+			}
+		`
+	];
 
 	constructor() {
 		super();