@brightspace-ui/core 3.314.2 → 3.314.4

package/components/demo/demo-snippet.js

@@ -168,9 +168,9 @@ class DemoSnippet extends LitElement {
 
 		// fix script whitespace
 		text = setIndent(text.replace(/\t/g, '  '))
-			.replace(/( *)<script( type="module")?>([^\n]+?)<\/script>/g, '$1<script$2>\n$1  $3\n$1</script>') // convert single line scripts to multi-line
-			.replace(/( *)<\/script>/g, '\n$1</script>')
-			.replace(/<script( type="module")?>/g, '<script$1>\n')
+			.replace(/( *)<script( type="module")?>([^\n]+?)<\/script>/gi, '$1<script$2>\n$1  $3\n$1</script>') // convert single line scripts to multi-line
+			.replace(/( *)<\/script>/gi, '\n$1</script>')
+			.replace(/<script( type="module")?>/gi, '<script$1>\n')
 			.replace(/(\n *)?<script data-demo-hide(.+?)<\/script>/gis, '');
 
 		const startTags = new Set([...text.matchAll(/<[^/](.*?)>/g)].map(m => m[0]));

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

@@ -96,7 +96,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		 * Whether the divider is controlling a left/right panel or a bottom drawer
 		 * @type {'panel'|'drawer'}
 		 */
-		panelType: { type: String, attribute: 'panel-type' }
+		panelType: { type: String, attribute: 'panel-type' },
+		_active: { state: true }
 	};
 
 	static styles = css`
@@ -115,7 +116,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		.divider:hover {
 			background-color: var(--d2l-color-corundum);
 		}
-		.divider:focus-within {
+		.divider:focus-within,
+		.divider.active {
 			background-color: var(--d2l-color-celestine);
 		}
 		:host([panel-position="start"]) .divider.collapsed,
@@ -150,11 +152,13 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			background-color: var(--d2l-color-gypsum);
 			border-color: var(--d2l-color-celestine);
 		}
-		.slider:focus .divider-handle {
+		.slider:focus .divider-handle,
+		.divider.active .divider-handle {
 			background-color: var(--d2l-color-celestine-minus-1);
 			border-color: var(--d2l-color-celestine-minus-1);
 		}
-		.slider:focus .divider-handle .handle-icon {
+		.slider:focus .divider-handle .handle-icon,
+		.divider.active .divider-handle .handle-icon {
 			color: white;
 		}
 
@@ -173,7 +177,8 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		.divider-arrow d2l-icon-custom {
 			color: var(--d2l-color-celestine);
 		}
-		.divider:focus-within .divider-arrow:not([hidden]) {
+		.divider:focus-within .divider-arrow:not([hidden]),
+		.divider.active .divider-arrow:not([hidden]) {
 			display: flex;
 		}
 		.divider-arrow:hover {
@@ -228,11 +233,20 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.minSize = 0;
 		this.panelPosition = 'start';
 		this.panelType = 'panel';
+
+		this._active = false;
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+		this._active = false;
 	}
 
 	render() {
 		const dividerClasses = {
 			divider: true,
+			active: this._active,
 			collapsed: this.currentSize <= this.collapsedSize,
 			maxed: this.currentSize === this.maxSize
 		};
@@ -273,11 +287,27 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('_active')) {
+			if (this._active) {
+				document.addEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+			} else if (changedProperties.get('_active')) {
+				document.removeEventListener('pointerdown', this.#handleDocumentPointerDown, { capture: true });
+			}
+		}
+	}
+
 	#clickedArrow;
 	#clickedHandle = false;
 	#draggedDivider = false;
 	#dragStats;
 
+	#handleDocumentPointerDown = (e) => {
+		if (e.composedPath().includes(this)) return;
+		this._active = false;
+	};
+
 	#handlePointerMove = (e) => {
 		if (!this.#dragStats || e.pointerId !== this.#dragStats.pointerId) return;
 		const delta = this.panelType === 'panel' ? (e.clientX - this.#dragStats.startX) : (e.clientY - this.#dragStats.startY);
@@ -401,6 +431,13 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		const path = e.composedPath();
 		this.#clickedHandle = path.some(el => el.classList?.contains('divider-handle'));
 		this.#clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
+
+		// iOS clears focus on the slider once the tap completes, so we use a
+		// persistent `active` state to keep focus styles applied and the arrows visible.
+		if (e.pointerType === 'touch') {
+			this._active = true;
+		}
+
 		if (this.#clickedArrow) return; // Arrows don't support dragging
 
 		const startSize = this.collapsed ? this.collapsedSize : this.currentSize;

package/custom-elements.json

@@ -13400,7 +13400,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\ttouch-action: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\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\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\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 drawer styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\ttouch-action: none;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within,\\n\\t\\t.divider.active {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.collapsed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-end, e-resize);\\n\\t\\t}\\n\\t\\t:host([panel-position=\\\"start\\\"]) .divider.maxed,\\n\\t\\t:host([panel-position=\\\"end\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: var(--d2l-cursor-resize-inline-start, w-resize);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle,\\n\\t\\t.divider.active .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon,\\n\\t\\t.divider.active .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]),\\n\\t\\t.divider.active .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\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\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.collapsed {\\n\\t\\t\\tcursor: n-resize;\\n\\t\\t}\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider.maxed {\\n\\t\\t\\tcursor: s-resize;\\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 drawer styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",

package/package.json

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