@brightspace-ui/core 3.265.0 → 3.266.1

package/components/inputs/input-select-styles.js

@@ -1,5 +1,6 @@
 import './input-styles.js';
 import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
@@ -12,94 +13,104 @@ registerSemanticVariableForSvgImageUrl(
 	</svg>`
 );
 
-export const selectStyles = css`
-	.d2l-input-select {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background-color: var(--d2l-theme-background-color-base);
-		background-image: var(--d2l-input-select-chevron-image);
-		background-origin: border-box;
-		background-position: center var(--d2l-inline-end, right) 17px;
-		background-repeat: no-repeat;
-		background-size: 11px 7px;
-		border: none;
-		border-radius: 0.3rem;
-		box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
-		color: var(--d2l-theme-text-color-static-standard);
-		display: inline-block;
-		font-family: inherit;
-		font-size: 0.8rem;
-		font-weight: 400;
-		height: auto;
-		letter-spacing: 0.02rem;
-		line-height: 1.2rem;
-		margin: 0;
-		max-height: calc(2rem + 2px);
-		outline: 1px solid var(--d2l-theme-border-color-emphasized);
-		outline-offset: -1px;
-		padding-block: calc(0.4rem + 1px);
-		padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
-		vertical-align: middle;
-	}
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export function _generateSelectStyles(selector) {
+	if (!_isValidCssSelector(selector)) return '';
+	const finalSelector = unsafeCSS(selector);
 
-	.d2l-input-select:not([disabled]):hover,
-	.d2l-input-select:not([disabled]):${focusClass} {
-		box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
-		outline: 2px solid var(--d2l-theme-border-color-focus);
-		outline-offset: -2px;
-	}
-	.d2l-input-select[aria-invalid="true"] {
-		background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
-		background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
-		background-repeat: no-repeat, no-repeat;
-		background-size: 11px 7px, 0.8rem 0.8rem;
-	}
-	.d2l-input-select[aria-invalid="true"],
-	.d2l-input-select[aria-invalid="true"]:${focusClass},
-	.d2l-input-select[aria-invalid="true"]:hover {
-		outline-color: var(--d2l-theme-status-color-error);
-	}
-	.d2l-input-select:disabled {
-		opacity: var(--d2l-theme-opacity-disabled-control);
-	}
-
-	@media (prefers-contrast: more) {
-		.d2l-input-select {
-			appearance: auto;
-			background-color: Field;
-			background-image: none;
+	return css`
+		${finalSelector} {
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background-color: var(--d2l-theme-background-color-base);
+			background-image: var(--d2l-input-select-chevron-image);
+			background-origin: border-box;
+			background-position: center var(--d2l-inline-end, right) 17px;
+			background-repeat: no-repeat;
+			background-size: 11px 7px;
 			border: none;
-			border-inline-end: 0.75rem solid transparent;
-			box-shadow: none;
-			color: FieldText;
-			forced-color-adjust: none;
-			height: 2rem;
-			outline: 1px solid ButtonBorder;
-			padding-inline: 0.6rem 16px;
+			border-radius: 0.3rem;
+			box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 1px var(--d2l-theme-shadow-inset-color);
+			color: var(--d2l-theme-text-color-static-standard);
+			display: inline-block;
+			font-family: inherit;
+			font-size: 0.8rem;
+			font-weight: 400;
+			height: auto;
+			letter-spacing: 0.02rem;
+			line-height: 1.2rem;
+			margin: 0;
+			max-height: calc(2rem + 2px);
+			outline: 1px solid var(--d2l-theme-border-color-emphasized);
+			outline-offset: -1px;
+			padding-block: calc(0.4rem + 1px);
+			padding-inline: calc(0.75rem + 1px) calc(2px + 0.8rem + 1px + 11px + 16px + 1px);
+			vertical-align: middle;
 		}
 
-		.d2l-input-select:not([disabled]):${focusClass},
-		.d2l-input-select:not([disabled]):hover {
-			box-shadow: none;
-			outline: 2px solid Highlight;
+		${finalSelector}:not([disabled]):hover,
+		${finalSelector}:not([disabled]):${focusClass} {
+			box-shadow: inset var(--d2l-theme-shadow-inset-offset-x) var(--d2l-theme-shadow-inset-offset-y) var(--d2l-theme-shadow-inset-blur-radius) 2px var(--d2l-theme-shadow-inset-color);
+			outline: 2px solid var(--d2l-theme-border-color-focus);
+			outline-offset: -2px;
 		}
-
-		.d2l-input-select:disabled {
-			outline: 1px solid GrayText;
+		${finalSelector}[aria-invalid="true"] {
+			background-image: var(--d2l-input-select-chevron-image), var(--d2l-input-invalid-image);
+			background-position: center var(--d2l-inline-end, right) 17px, center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
+			background-repeat: no-repeat, no-repeat;
+			background-size: 11px 7px, 0.8rem 0.8rem;
 		}
-
-		.d2l-input-select[aria-invalid="true"] {
-			background-image: var(--d2l-input-invalid-image);
-			background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
-			background-repeat: no-repeat;
-			background-size: 0.8rem 0.8rem;
+		${finalSelector}[aria-invalid="true"],
+		${finalSelector}[aria-invalid="true"]:${focusClass},
+		${finalSelector}[aria-invalid="true"]:hover {
+			outline-color: var(--d2l-theme-status-color-error);
+		}
+		${finalSelector}:disabled {
+			opacity: var(--d2l-theme-opacity-disabled-control);
 		}
 
-		.d2l-input-select[aria-invalid="true"],
-		.d2l-input-select[aria-invalid="true"]:${focusClass},
-		.d2l-input-select[aria-invalid="true"]:hover {
-			outline-color: var(--d2l-theme-status-color-error);
+		@media (prefers-contrast: more) {
+			${finalSelector} {
+				appearance: auto;
+				background-color: Field;
+				background-image: none;
+				border: none;
+				border-inline-end: 0.75rem solid transparent;
+				box-shadow: none;
+				color: FieldText;
+				forced-color-adjust: none;
+				height: 2rem;
+				outline: 1px solid ButtonBorder;
+				padding-inline: 0.6rem 16px;
+			}
+
+			${finalSelector}:not([disabled]):${focusClass},
+			${finalSelector}:not([disabled]):hover {
+				box-shadow: none;
+				outline: 2px solid Highlight;
+			}
+
+			${finalSelector}:disabled {
+				outline: 1px solid GrayText;
+			}
+
+			${finalSelector}[aria-invalid="true"] {
+				background-image: var(--d2l-input-invalid-image);
+				background-position: center var(--d2l-inline-end, right) calc(1px + 11px + 17px);
+				background-repeat: no-repeat;
+				background-size: 0.8rem 0.8rem;
+			}
+
+			${finalSelector}[aria-invalid="true"],
+			${finalSelector}[aria-invalid="true"]:${focusClass},
+			${finalSelector}[aria-invalid="true"]:hover {
+				outline-color: var(--d2l-theme-status-color-error);
+			}
 		}
-	}
-`;
+	`;
+};
+
+export const selectStyles = _generateSelectStyles('.d2l-input-select');

package/components/page/page.js

@@ -206,17 +206,25 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	#renderSideNavPanel() {
 		return html`
-			<nav class="side-nav-panel" ?hidden="${!this._slotVisibility['side-nav']}" aria-label="${this.localize('components.page.side-nav-label')}">
+			<nav
+				class="side-nav-panel"
+				?hidden="${!this._slotVisibility['side-nav']}"
+				aria-label="${this.localize('components.page.side-nav-label')}">
 				<slot name="side-nav" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
 			</nav>
-			${this._slotVisibility['side-nav'] ? html`<div class="divider"></div>` : nothing}
+			${!this._slotVisibility['side-nav'] ? nothing :
+				html`<div class="divider"></div>`}
 		`;
 	}
 
 	#renderSupportingPanel() {
 		return html`
-			${this._slotVisibility['supporting'] ? html`<div class="divider"></div>` : nothing}
-			<aside class="supporting-panel" ?hidden="${!this._slotVisibility['supporting']}">
+			${!this._slotVisibility['supporting'] ? nothing :
+				html`<div class="divider"></div>`}
+			<aside
+				class="supporting-panel"
+				?hidden="${!this._slotVisibility['supporting']}"
+				aria-label="${this.localize('components.page.supporting-panel-label')}">
 				<slot name="supporting" @slotchange="${this.#handleSlotVisibilityChange}"></slot>
 			</aside>
 		`;

package/custom-elements.json

@@ -12295,7 +12295,7 @@
         },
         {
           "name": "styles",
-          "type": "CSSResult[]",
+          "type": "(string | CSSResult)[]",
           "default": "[\"inputLabelStyles\",\"selectStyles\",\"tableStyles\",null]"
         },
         {

package/lang/ar.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.page.header-nav-label": "الرئيسية",
 	"components.page.side-nav-label": "جانبية",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} مادة واحد}

package/lang/ca.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Més accions",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/cy.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Rhagor o Gamau Gweithredu",
 	"components.page.header-nav-label": "Prif",
 	"components.page.side-nav-label": "Ochr",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} eitem}

package/lang/da.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Flere handlinger",
 	"components.page.header-nav-label": "Hoved",
 	"components.page.side-nav-label": "Side",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} element}

package/lang/de.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Weitere Aktionen",
 	"components.page.header-nav-label": "Haupt-",
 	"components.page.side-nav-label": "Seiten-",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Element}

package/lang/en-gb.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "More Actions",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-label": "Side",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/en.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "More Actions",
 	"components.page.header-nav-label": "Main",
 	"components.page.side-nav-label": "Side",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/es-es.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/es.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Más acciones",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} elemento}

package/lang/fr-fr.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Plus d’actions",
 	"components.page.header-nav-label": "Principale",
 	"components.page.side-nav-label": "Côté",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/fr.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Plus d’actions",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-label": "Côté",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} élément}

package/lang/haw.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Nā Hana Hou",
 	"components.page.header-nav-label": "Nui",
 	"components.page.side-nav-label": "ʻaoʻao",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} mea}

package/lang/hi.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "अधिक क्रियाएँ",
 	"components.page.header-nav-label": "मुख्य",
 	"components.page.side-nav-label": "साइड",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} आइटम}

package/lang/ja.js

@@ -149,6 +149,7 @@ export default {
 	"components.overflow-group.moreActions": "その他のアクション",
 	"components.page.header-nav-label": "メイン",
 	"components.page.side-nav-label": "サイド",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個の項目}

package/lang/ko.js

@@ -149,6 +149,7 @@ export default {
 	"components.overflow-group.moreActions": "추가 작업",
 	"components.page.header-nav-label": "메인",
 	"components.page.side-nav-label": "사이드",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {해당 항목 수 {countFormatted}개}

package/lang/mi.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Ētahi atu Hohenga",
 	"components.page.header-nav-label": "Matua",
 	"components.page.side-nav-label": "Taha",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} Tūemi}

package/lang/nl.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Meer acties",
 	"components.page.header-nav-label": "Hoofdgedeelte",
 	"components.page.side-nav-label": "Zij",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/pt.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Mais ações",
 	"components.page.header-nav-label": "Principal",
 	"components.page.side-nav-label": "Lateral",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} item}

package/lang/sv.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Fler åtgärder",
 	"components.page.header-nav-label": "Huvudsida",
 	"components.page.side-nav-label": "Sida",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} objekt}

package/lang/th.js

@@ -150,6 +150,7 @@ export default {
 	"components.overflow-group.moreActions": "การดำเนินการเพิ่มเติม",
 	"components.page.header-nav-label": "หลัก",
 	"components.page.side-nav-label": "ด้านข้าง",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} รายการ}

package/lang/tr.js

@@ -154,6 +154,7 @@ export default {
 	"components.overflow-group.moreActions": "Daha Fazla Eylem",
 	"components.page.header-nav-label": "Ana",
 	"components.page.side-nav-label": "Yan",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			one {{countFormatted} öğe}

package/lang/vi.js

@@ -148,6 +148,7 @@ export default {
 	"components.overflow-group.moreActions": "Thêm các Tác vụ",
 	"components.page.header-nav-label": "Chính",
 	"components.page.side-nav-label": "Bên",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} mục}

package/lang/zh-cn.js

@@ -149,6 +149,7 @@ export default {
 	"components.overflow-group.moreActions": "更多操作",
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-label": "侧面",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 项}

package/lang/zh-tw.js

@@ -150,6 +150,7 @@ export default {
 	"components.overflow-group.moreActions": "其他動作",
 	"components.page.header-nav-label": "主要",
 	"components.page.side-nav-label": "側邊",
+	"components.page.supporting-panel-label": "Supporting",
 	"components.pageable.info":
 		`{count, plural,
 			other {{countFormatted} 個項目}

package/package.json

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