@brightspace-ui/core 3.271.1 → 3.271.3

package/components/alert/README.md

@@ -58,7 +58,7 @@ Use an inline alert if there is important information a user needs to know while
 * Don't display more than one paragraph of text
 * Avoid overusing them — the more commonly alerts appear, the less effective they will be
 * Don't use them for promotional material or information that is not relevant to the user’s workflow
-* Don’t use them for validation errors – instead, use the [Form](../../components/form) component for a consistent user experience
+* Don’t use them for validation errors – instead, use the [Form](../../components/form-layout-validation/#d2l-form) component for a consistent user experience
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 

package/components/button/floating-buttons.js

@@ -22,10 +22,10 @@ class FloatingButtons extends LoadingCompleteMixin(LitElement) {
 		 * @type {boolean}
 		 */
 		alwaysFloat: { type: Boolean, attribute: 'always-float', reflect: true },
-		_containerMarginLeft: { attribute: false, type: String },
-		_containerMarginRight: { attribute: false, type: String },
+		_containerMarginLeft: { state: true },
+		_containerMarginRight: { state: true },
 		_floating: { type: Boolean, reflect: true },
-		_innerContainerLeft: { attribute: false, type: String }
+		_innerContainerLeft: { state: true }
 	};
 
 	static styles = css`

package/components/demo/demo-snippet.js

@@ -22,7 +22,7 @@ class DemoSnippet extends LitElement {
 		overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
 		_code: { type: String },
 		_fullscreen: { state: true },
-		_hasSkeleton: { type: Boolean, attribute: false },
+		_hasSkeleton: { state: true },
 		_settingsPeek: { state: true },
 		_skeletonOn: { type: Boolean, reflect: false }
 	};

package/components/dialog/dialog.js

@@ -52,7 +52,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		 * The preferred width (unit-less) for the dialog
 		 */
 		width: { type: Number },
-		_hasFooterContent: { type: Boolean, attribute: false }
+		_hasFooterContent: { state: true }
 	};
 
 	static styles = [_generateResetStyles(':host'), dialogStyles, heading3Styles, css`

package/components/filter/filter.js

@@ -88,12 +88,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		 * @type {string}
 		 */
 		text: { type: String },
-		_activeDimensionKey: { type: String, attribute: false },
-		_dimensions: { type: Array, attribute: false },
+		_activeDimensionKey: { state: true },
+		_dimensions: { state: true },
 		_displayKeyboardTooltip: { state: true },
 		_ignoreSlotChanges: { type: Boolean },
-		_minWidth: { type: Number, attribute: false },
-		_totalAppliedCount: { type: Number, attribute: false }
+		_minWidth: { state: true },
+		_totalAppliedCount: { state: true }
 	};
 
 	static styles = [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles, offscreenStyles, css`

package/components/form/form-element-mixin.js

@@ -108,7 +108,7 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		 * @ignore
 		 */
 		childErrors: { type: Object, attribute: false },
-		_errors: { type: Array, attribute: false }
+		_errors: { state: true }
 	};
 
 	constructor() {

package/components/form/form-error-summary.js

@@ -9,7 +9,7 @@ class FormErrorSummary extends LocalizeCoreElement(LitElement) {
 
 	static properties = {
 		errors: { type: Object, attribute: false },
-		_expanded: { type: Boolean, attribute: false },
+		_expanded: { state: true },
 		_hasTopMargin: { type: Boolean, attribute: '_has-top-margin', reflect: true },
 		_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
 	};

package/components/inputs/input-date-time-range-to.js

@@ -32,7 +32,7 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 		 * @type {boolean}
 		 */
 		topMargin: { attribute: 'top-margin', type: Boolean },
-		_blockDisplay: { attribute: false, type: Boolean }
+		_blockDisplay: { state: true }
 	};
 
 	static styles = [super.styles, bodySmallStyles, css`

package/components/inputs/input-text.js

@@ -185,7 +185,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		 */
 		valueAlign: { attribute: 'value-align', type: String },
 		_firstSlotWidth: { type: Number },
-		_hasAfterContent: { type: Boolean, attribute: false },
+		_hasAfterContent: { state: true },
 		_focused: { type: Boolean },
 		_hovered: { type: Boolean },
 		_lastSlotWidth: { type: Number }

package/components/page/page-divider-internal.js

@@ -1,19 +1,20 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatPercent } from '@brightspace-ui/intl';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 
 export const DIVIDER_WIDTH = 4;
-const KEYBOARD_STEP = 20; // TO DO: Confirm
-const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
+export const KEYBOARD_STEP = 20; // TO DO: Confirm
+export const KEYBOARD_STEP_LARGE = 80; // TO DO: Confirm
 
 const clampedSize = (size, min, max) => Math.max(min, Math.min(size, max));
 
 /**
  * Internal divider used by d2l-page to resize its side-nav and supporting panels.
  */
-class PageDivider extends PropertyRequiredMixin(LitElement) {
+class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 	static properties = {
 		/**
@@ -56,16 +57,22 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 			background-color: var(--d2l-color-gypsum);
 			cursor: ew-resize;
 			height: 100%;
-			outline: none;
+			position: relative;
 			width: ${DIVIDER_WIDTH}px;
 		}
 		.divider:hover {
 			background-color: var(--d2l-color-mica);
 		}
-		.divider:focus {
+		.divider:focus-within {
 			background-color: var(--d2l-color-celestine);
 		}
 
+		.slider {
+			outline: none;
+			position: absolute;
+			top: 55px;
+		}
+
 		:host([panel-type="drawer"]) .divider {
 			background-color: var(--d2l-color-celestine);
 			cursor: ns-resize;
@@ -73,10 +80,17 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 			width: 100%;
 		}
 
+		:host([panel-type="drawer"]) .slider {
+			inset-inline-end: 18px;
+			top: auto;
+		}
+
 		/* TO DO: Lots more divider styling to come */
 
 	`;
 
+	static focusElementSelector = '.slider';
+
 	constructor() {
 		super();
 
@@ -95,17 +109,19 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 		}
 
 		return html`
-			<div
-				class="divider"
-				role="slider"
-				tabindex="0"
-				aria-label="${this.label}"
-				aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
-				aria-valuemax="${ifDefined(ariaValues.max)}"
-				aria-valuemin="${ifDefined(ariaValues.min)}"
-				aria-valuenow="${ifDefined(ariaValues.now)}"
-				aria-valuetext="${ifDefined(ariaValues.text)}"
-				@keydown="${this.#handleKeyDown}">
+		    <div class="divider" @pointerdown="${this.#handlePointerDown}">
+				<div
+					class="slider"
+					role="slider"
+					tabindex="0"
+					aria-label="${this.label}"
+					aria-orientation="${this.panelType === 'panel' ? 'horizontal' : 'vertical'}"
+					aria-valuemax="${ifDefined(ariaValues.max)}"
+					aria-valuemin="${ifDefined(ariaValues.min)}"
+					aria-valuenow="${ifDefined(ariaValues.now)}"
+					aria-valuetext="${ifDefined(ariaValues.text)}"
+					@keydown="${this.#handleKeyDown}">
+				</div>
 			</div>
 		`;
 	}
@@ -145,6 +161,11 @@ class PageDivider extends PropertyRequiredMixin(LitElement) {
 		this.#sendResizeEvent(requestedSize);
 	}
 
+	#handlePointerDown(e) {
+		e.preventDefault();
+		this.focus();
+	}
+
 	#sendResizeEvent(requestedSize) {
 		const clampedRequestedSize = clampedSize(requestedSize, this.minSize, this.maxSize);
 		/** @ignore */

package/components/page/page.js

@@ -132,13 +132,18 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		}
 
 		.side-nav-panel,
-		.supporting-panel {
+		.supporting-panel,
+		.divider {
 			max-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));
-			overflow: clip auto;
 			position: sticky;
 			top: var(--d2l-page-header-height, 0);
 		}
 
+		.side-nav-panel,
+		.supporting-panel {
+			overflow: clip auto;
+		}
+
 		.footer:not([hidden]),
 		.floating-buttons-container {
 			display: inline;
@@ -294,6 +299,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 	#renderDivider(panelKey, label, panelPosition) {
 		return html`
 			<d2l-page-divider-internal
+				class="divider"
 				data-panel-key="${panelKey}"
 				label="${label}"
 				current-size="${this._panelState.getSize(panelKey)}"

package/components/selection/selection-observer-mixin.js

@@ -15,7 +15,7 @@ export const SelectionObserverMixin = superclass => class extends superclass {
 		 * @type {object}
 		 */
 		selectionInfo: { type: Object },
-		_provider: { type: Object, attribute: false }
+		_provider: { state: true }
 	};
 
 	constructor() {

package/components/table/README.md

@@ -146,7 +146,7 @@ For the example below:
   class MySortableTableElem extends LitElement {
 
     static properties = {
-      _sortDesc: { attribute: false, type: Boolean }
+      _sortDesc: { state: true }
     };
 
     static styles = tableStyles;

package/custom-elements.json

@@ -692,8 +692,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ alwaysFloat: boolean; _containerMarginLeft: { attribute: boolean; type: StringConstructor; }; _containerMarginRight: { attribute: boolean; type: StringConstructor; }; _floating: { ...; }; _innerContainerLeft: { ...; }; }",
-          "default": "{\"alwaysFloat\":{\"type\":\"Boolean\",\"attribute\":\"always-float\",\"reflect\":true},\"_containerMarginLeft\":{\"attribute\":false,\"type\":\"String\"},\"_containerMarginRight\":{\"attribute\":false,\"type\":\"String\"},\"_floating\":{\"type\":\"Boolean\",\"reflect\":true},\"_innerContainerLeft\":{\"attribute\":false,\"type\":\"String\"}}"
+          "type": "{ alwaysFloat: boolean; _containerMarginLeft: { state: boolean; }; _containerMarginRight: { state: boolean; }; _floating: { type: BooleanConstructor; reflect: boolean; }; _innerContainerLeft: { ...; }; }",
+          "default": "{\"alwaysFloat\":{\"type\":\"Boolean\",\"attribute\":\"always-float\",\"reflect\":true},\"_containerMarginLeft\":{\"state\":true},\"_containerMarginRight\":{\"state\":true},\"_floating\":{\"type\":\"Boolean\",\"reflect\":true},\"_innerContainerLeft\":{\"state\":true}}"
         },
         {
           "name": "styles",
@@ -1242,7 +1242,7 @@
         {
           "name": "properties",
           "type": "{ codeViewHidden: { type: BooleanConstructor; reflect: boolean; attribute: string; }; fullWidth: { type: BooleanConstructor; reflect: boolean; attribute: string; }; ... 6 more ...; _skeletonOn: { ...; }; }",
-          "default": "{\"codeViewHidden\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"code-view-hidden\"},\"fullWidth\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"full-width\"},\"noPadding\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"no-padding\"},\"overflowHidden\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"overflow-hidden\"},\"_code\":{\"type\":\"String\"},\"_fullscreen\":{\"state\":true},\"_hasSkeleton\":{\"type\":\"Boolean\",\"attribute\":false},\"_settingsPeek\":{\"state\":true},\"_skeletonOn\":{\"type\":\"Boolean\",\"reflect\":false}}"
+          "default": "{\"codeViewHidden\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"code-view-hidden\"},\"fullWidth\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"full-width\"},\"noPadding\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"no-padding\"},\"overflowHidden\":{\"type\":\"Boolean\",\"reflect\":true,\"attribute\":\"overflow-hidden\"},\"_code\":{\"type\":\"String\"},\"_fullscreen\":{\"state\":true},\"_hasSkeleton\":{\"state\":true},\"_settingsPeek\":{\"state\":true},\"_skeletonOn\":{\"type\":\"Boolean\",\"reflect\":false}}"
         },
         {
           "name": "styles",
@@ -1573,7 +1573,7 @@
         {
           "name": "properties",
           "type": "{ async: { type: BooleanConstructor; }; critical: { type: BooleanConstructor; }; describeContent: { type: BooleanConstructor; attribute: string; }; fullHeight: { ...; }; titleText: { ...; }; width: { ...; }; _hasFooterContent: { ...; }; }",
-          "default": "{\"async\":{\"type\":\"Boolean\"},\"critical\":{\"type\":\"Boolean\"},\"describeContent\":{\"type\":\"Boolean\",\"attribute\":\"describe-content\"},\"fullHeight\":{\"type\":\"Boolean\",\"attribute\":\"full-height\"},\"titleText\":{\"type\":\"String\",\"attribute\":\"title-text\",\"required\":true},\"width\":{\"type\":\"Number\"},\"_hasFooterContent\":{\"type\":\"Boolean\",\"attribute\":false}}"
+          "default": "{\"async\":{\"type\":\"Boolean\"},\"critical\":{\"type\":\"Boolean\"},\"describeContent\":{\"type\":\"Boolean\",\"attribute\":\"describe-content\"},\"fullHeight\":{\"type\":\"Boolean\",\"attribute\":\"full-height\"},\"titleText\":{\"type\":\"String\",\"attribute\":\"title-text\",\"required\":true},\"width\":{\"type\":\"Number\"},\"_hasFooterContent\":{\"state\":true}}"
         },
         {
           "name": "focusableContentElemPresent",
@@ -2648,8 +2648,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ disabled: boolean; opened: boolean; text: string; _activeDimensionKey: { type: StringConstructor; attribute: boolean; }; _dimensions: { type: ArrayConstructor; attribute: boolean; }; _displayKeyboardTooltip: { ...; }; _ignoreSlotChanges: { ...; }; _minWidth: { ...; }; _totalAppliedCount: { ...; }; }",
-          "default": "{\"disabled\":{\"type\":\"Boolean\",\"reflect\":true},\"opened\":{\"type\":\"Boolean\",\"reflect\":true},\"text\":{\"type\":\"String\"},\"_activeDimensionKey\":{\"type\":\"String\",\"attribute\":false},\"_dimensions\":{\"type\":\"Array\",\"attribute\":false},\"_displayKeyboardTooltip\":{\"state\":true},\"_ignoreSlotChanges\":{\"type\":\"Boolean\"},\"_minWidth\":{\"type\":\"Number\",\"attribute\":false},\"_totalAppliedCount\":{\"type\":\"Number\",\"attribute\":false}}"
+          "type": "{ disabled: boolean; opened: boolean; text: string; _activeDimensionKey: { state: boolean; }; _dimensions: { state: boolean; }; _displayKeyboardTooltip: { state: boolean; }; _ignoreSlotChanges: { ...; }; _minWidth: { ...; }; _totalAppliedCount: { ...; }; }",
+          "default": "{\"disabled\":{\"type\":\"Boolean\",\"reflect\":true},\"opened\":{\"type\":\"Boolean\",\"reflect\":true},\"text\":{\"type\":\"String\"},\"_activeDimensionKey\":{\"state\":true},\"_dimensions\":{\"state\":true},\"_displayKeyboardTooltip\":{\"state\":true},\"_ignoreSlotChanges\":{\"type\":\"Boolean\"},\"_minWidth\":{\"state\":true},\"_totalAppliedCount\":{\"state\":true}}"
         },
         {
           "name": "styles",
@@ -2767,8 +2767,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ _expanded: { type: BooleanConstructor; attribute: boolean; }; }",
-          "default": "{\"_expanded\":{\"type\":\"Boolean\",\"attribute\":false}}"
+          "type": "{ _expanded: { state: boolean; }; }",
+          "default": "{\"_expanded\":{\"state\":true}}"
         },
         {
           "name": "styles",
@@ -2783,8 +2783,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ errors: { type: ObjectConstructor; attribute: boolean; }; _expanded: { type: BooleanConstructor; attribute: boolean; }; _hasTopMargin: { type: BooleanConstructor; attribute: string; reflect: boolean; }; _hasErrors: { ...; }; }",
-          "default": "{\"errors\":{\"type\":\"Object\",\"attribute\":false},\"_expanded\":{\"type\":\"Boolean\",\"attribute\":false},\"_hasTopMargin\":{\"type\":\"Boolean\",\"attribute\":\"_has-top-margin\",\"reflect\":true},\"_hasErrors\":{\"type\":\"Boolean\",\"attribute\":\"_has-errors\",\"reflect\":true}}"
+          "type": "{ errors: { type: ObjectConstructor; attribute: boolean; }; _expanded: { state: boolean; }; _hasTopMargin: { type: BooleanConstructor; attribute: string; reflect: boolean; }; _hasErrors: { ...; }; }",
+          "default": "{\"errors\":{\"type\":\"Object\",\"attribute\":false},\"_expanded\":{\"state\":true},\"_hasTopMargin\":{\"type\":\"Boolean\",\"attribute\":\"_has-top-margin\",\"reflect\":true},\"_hasErrors\":{\"type\":\"Boolean\",\"attribute\":\"_has-errors\",\"reflect\":true}}"
         },
         {
           "name": "styles",
@@ -3384,8 +3384,8 @@
         },
         {
           "name": "properties",
-          "type": "{ blockDisplay: boolean; displayTo: boolean; topMargin: boolean; _blockDisplay: { attribute: boolean; type: BooleanConstructor; }; }",
-          "default": "{\"blockDisplay\":{\"attribute\":\"block-display\",\"type\":\"Boolean\"},\"displayTo\":{\"attribute\":\"display-to\",\"type\":\"Boolean\"},\"topMargin\":{\"attribute\":\"top-margin\",\"type\":\"Boolean\"},\"_blockDisplay\":{\"attribute\":false,\"type\":\"Boolean\"}}"
+          "type": "{ blockDisplay: boolean; displayTo: boolean; topMargin: boolean; _blockDisplay: { state: boolean; }; }",
+          "default": "{\"blockDisplay\":{\"attribute\":\"block-display\",\"type\":\"Boolean\"},\"displayTo\":{\"attribute\":\"display-to\",\"type\":\"Boolean\"},\"topMargin\":{\"attribute\":\"top-margin\",\"type\":\"Boolean\"},\"_blockDisplay\":{\"state\":true}}"
         },
         {
           "name": "skeleton",
@@ -4105,7 +4105,7 @@
         {
           "name": "properties",
           "type": "{ ariaHaspopup: string; ariaInvalid: string; autocomplete: string; autofocus: { type: BooleanConstructor; }; description: string; disabled: boolean; hideInvalidIcon: boolean; ... 26 more ...; _lastSlotWidth: { ...; }; }",
-          "default": "{\"ariaHaspopup\":{\"type\":\"String\",\"attribute\":\"aria-haspopup\"},\"ariaInvalid\":{\"type\":\"String\",\"attribute\":\"aria-invalid\"},\"autocomplete\":{\"type\":\"String\"},\"autofocus\":{\"type\":\"Boolean\"},\"description\":{\"type\":\"String\",\"reflect\":true},\"disabled\":{\"type\":\"Boolean\",\"reflect\":true},\"hideInvalidIcon\":{\"attribute\":\"hide-invalid-icon\",\"type\":\"Boolean\",\"reflect\":true},\"hideInvalidTooltip\":{\"attribute\":\"hide-invalid-tooltip\",\"type\":\"Boolean\",\"reflect\":true},\"inputWidth\":{\"attribute\":\"input-width\",\"type\":\"String\"},\"instructions\":{\"type\":\"String\",\"attribute\":\"instructions\"},\"labelHidden\":{\"type\":\"Boolean\",\"attribute\":\"label-hidden\"},\"max\":{\"type\":\"String\"},\"maxlength\":{\"type\":\"Number\"},\"min\":{\"type\":\"String\"},\"minlength\":{\"type\":\"Number\"},\"pattern\":{\"type\":\"String\"},\"patternFailureText\":{\"type\":\"String\",\"attribute\":\"pattern-failure-text\"},\"placeholder\":{\"type\":\"String\"},\"preventSubmit\":{\"type\":\"Boolean\",\"attribute\":\"prevent-submit\"},\"readonly\":{\"type\":\"Boolean\"},\"required\":{\"type\":\"Boolean\",\"reflect\":true},\"size\":{\"type\":\"Number\"},\"step\":{\"type\":\"Number\"},\"title\":{\"type\":\"String\"},\"type\":{\"type\":\"String\"},\"unit\":{\"type\":\"String\"},\"unitLabel\":{\"attribute\":\"unit-label\",\"required\":{\"dependentProps\":[\"unit\"]},\"type\":\"String\"},\"value\":{\"type\":\"String\"},\"valueAlign\":{\"attribute\":\"value-align\",\"type\":\"String\"},\"_firstSlotWidth\":{\"type\":\"Number\"},\"_hasAfterContent\":{\"type\":\"Boolean\",\"attribute\":false},\"_focused\":{\"type\":\"Boolean\"},\"_hovered\":{\"type\":\"Boolean\"},\"_lastSlotWidth\":{\"type\":\"Number\"}}"
+          "default": "{\"ariaHaspopup\":{\"type\":\"String\",\"attribute\":\"aria-haspopup\"},\"ariaInvalid\":{\"type\":\"String\",\"attribute\":\"aria-invalid\"},\"autocomplete\":{\"type\":\"String\"},\"autofocus\":{\"type\":\"Boolean\"},\"description\":{\"type\":\"String\",\"reflect\":true},\"disabled\":{\"type\":\"Boolean\",\"reflect\":true},\"hideInvalidIcon\":{\"attribute\":\"hide-invalid-icon\",\"type\":\"Boolean\",\"reflect\":true},\"hideInvalidTooltip\":{\"attribute\":\"hide-invalid-tooltip\",\"type\":\"Boolean\",\"reflect\":true},\"inputWidth\":{\"attribute\":\"input-width\",\"type\":\"String\"},\"instructions\":{\"type\":\"String\",\"attribute\":\"instructions\"},\"labelHidden\":{\"type\":\"Boolean\",\"attribute\":\"label-hidden\"},\"max\":{\"type\":\"String\"},\"maxlength\":{\"type\":\"Number\"},\"min\":{\"type\":\"String\"},\"minlength\":{\"type\":\"Number\"},\"pattern\":{\"type\":\"String\"},\"patternFailureText\":{\"type\":\"String\",\"attribute\":\"pattern-failure-text\"},\"placeholder\":{\"type\":\"String\"},\"preventSubmit\":{\"type\":\"Boolean\",\"attribute\":\"prevent-submit\"},\"readonly\":{\"type\":\"Boolean\"},\"required\":{\"type\":\"Boolean\",\"reflect\":true},\"size\":{\"type\":\"Number\"},\"step\":{\"type\":\"Number\"},\"title\":{\"type\":\"String\"},\"type\":{\"type\":\"String\"},\"unit\":{\"type\":\"String\"},\"unitLabel\":{\"attribute\":\"unit-label\",\"required\":{\"dependentProps\":[\"unit\"]},\"type\":\"String\"},\"value\":{\"type\":\"String\"},\"valueAlign\":{\"attribute\":\"value-align\",\"type\":\"String\"},\"_firstSlotWidth\":{\"type\":\"Number\"},\"_hasAfterContent\":{\"state\":true},\"_focused\":{\"type\":\"Boolean\"},\"_hovered\":{\"type\":\"Boolean\"},\"_lastSlotWidth\":{\"type\":\"Number\"}}"
         }
       ],
       "events": [
@@ -6216,7 +6216,12 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\toutline: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t}\\n\\t\\t.divider:focus {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more divider styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more divider styling to come */\\n\\n\\t`\""
+        },
+        {
+          "name": "focusElementSelector",
+          "type": "string",
+          "default": "\".slider\""
         },
         {
           "name": "currentSize",
@@ -6489,7 +6494,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",
@@ -6945,8 +6950,8 @@
         },
         {
           "name": "properties",
-          "type": "{ selectionFor: string; selectionInfo: any; _provider: { type: ObjectConstructor; attribute: boolean; }; }",
-          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"type\":\"Object\",\"attribute\":false}}"
+          "type": "{ selectionFor: string; selectionInfo: any; _provider: { state: boolean; }; }",
+          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"state\":true}}"
         },
         {
           "name": "disabled",
@@ -7184,8 +7189,8 @@
         },
         {
           "name": "properties",
-          "type": "{ selectionFor: string; selectionInfo: any; _provider: { type: ObjectConstructor; attribute: boolean; }; }",
-          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"type\":\"Object\",\"attribute\":false}}"
+          "type": "{ selectionFor: string; selectionInfo: any; _provider: { state: boolean; }; }",
+          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"state\":true}}"
         },
         {
           "name": "selectionInfo"
@@ -7287,8 +7292,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ selectionFor: string; selectionInfo: any; _provider: { type: ObjectConstructor; attribute: boolean; }; }",
-          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"type\":\"Object\",\"attribute\":false}}"
+          "type": "{ selectionFor: string; selectionInfo: any; _provider: { state: boolean; }; }",
+          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"state\":true}}"
         },
         {
           "name": "selectionInfo"
@@ -7306,8 +7311,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ selectionFor: string; selectionInfo: any; _provider: { type: ObjectConstructor; attribute: boolean; }; }",
-          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"type\":\"Object\",\"attribute\":false}}"
+          "type": "{ selectionFor: string; selectionInfo: any; _provider: { state: boolean; }; }",
+          "default": "{\"selectionFor\":{\"type\":\"String\",\"reflect\":true,\"attribute\":\"selection-for\"},\"selectionInfo\":{\"type\":\"Object\"},\"_provider\":{\"state\":true}}"
         },
         {
           "name": "selectionInfo"
@@ -8766,7 +8771,7 @@
         {
           "name": "properties",
           "type": "{ backgroundShading: \"none\" | \"primary\" | \"secondary\"; primaryOverflow: \"default\" | \"hidden\"; resizable: boolean; secondaryFirst: boolean; storageKey: string; widthType: \"normal\" | \"fullscreen\"; ... 7 more ...; _sizeAsPercent: { ...; }; }",
-          "default": "{\"backgroundShading\":{\"type\":\"String\",\"attribute\":\"background-shading\"},\"primaryOverflow\":{\"attribute\":\"primary-overflow\",\"reflect\":true,\"type\":\"String\"},\"resizable\":{\"type\":\"Boolean\",\"reflect\":true},\"secondaryFirst\":{\"type\":\"Boolean\",\"attribute\":\"secondary-first\",\"reflect\":true},\"storageKey\":{\"type\":\"String\",\"attribute\":\"storage-key\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\",\"reflect\":true},\"hasForm\":{\"type\":\"Boolean\",\"attribute\":\"has-form\"},\"_formErrorSummary\":{\"type\":\"Array\"},\"_hasFooter\":{\"type\":\"Boolean\",\"attribute\":false},\"_isCollapsed\":{\"type\":\"Boolean\",\"attribute\":false},\"_isExpanded\":{\"type\":\"Boolean\",\"attribute\":false},\"_isMobile\":{\"type\":\"Boolean\",\"attribute\":false},\"_size\":{\"type\":\"Number\",\"attribute\":false},\"_sizeAsPercent\":{\"state\":true}}"
+          "default": "{\"backgroundShading\":{\"type\":\"String\",\"attribute\":\"background-shading\"},\"primaryOverflow\":{\"attribute\":\"primary-overflow\",\"reflect\":true,\"type\":\"String\"},\"resizable\":{\"type\":\"Boolean\",\"reflect\":true},\"secondaryFirst\":{\"type\":\"Boolean\",\"attribute\":\"secondary-first\",\"reflect\":true},\"storageKey\":{\"type\":\"String\",\"attribute\":\"storage-key\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\",\"reflect\":true},\"hasForm\":{\"type\":\"Boolean\",\"attribute\":\"has-form\"},\"_formErrorSummary\":{\"type\":\"Array\"},\"_hasFooter\":{\"state\":true},\"_isCollapsed\":{\"state\":true},\"_isExpanded\":{\"state\":true},\"_isMobile\":{\"state\":true},\"_size\":{\"state\":true},\"_sizeAsPercent\":{\"state\":true}}"
         },
         {
           "name": "styles",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.271.1",
+  "version": "3.271.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -61,7 +61,6 @@
     "eslint": "^9",
     "eslint-config-brightspace": "^4",
     "eslint-plugin-unicorn": "^65",
-    "glob-all": "^3",
     "messageformat-validator": "^3.0.0-beta",
     "mocha": "^11",
     "rollup": "^4",

package/templates/primary-secondary/primary-secondary.js

@@ -596,11 +596,11 @@ class TemplatePrimarySecondary extends LocalizeCoreElement(LitElement) {
 		 */
 		hasForm: { type: Boolean, attribute: 'has-form' },
 		_formErrorSummary: { type: Array },
-		_hasFooter: { type: Boolean, attribute: false },
-		_isCollapsed: { type: Boolean, attribute: false },
-		_isExpanded: { type: Boolean, attribute: false },
-		_isMobile: { type: Boolean, attribute: false },
-		_size: { type: Number, attribute: false },
+		_hasFooter: { state: true },
+		_isCollapsed: { state: true },
+		_isExpanded: { state: true },
+		_isMobile: { state: true },
+		_size: { state: true },
 		_sizeAsPercent: { state: true }
 	};