@brightspace-ui/core 3.76.0 → 3.76.2

package/components/dropdown/dropdown-content-mixin.js

@@ -1134,7 +1134,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			}
 		}
 		if (this.openedAbove) {
-			position.bottom = window.innerHeight - targetRect.top + 8;
+			position.bottom = window.innerHeight - targetRect.top + this._verticalOffset - 8;
 		} else {
 			position.top = targetRect.top + targetRect.height + this._verticalOffset - 7;
 		}

package/components/inputs/docs/input-search.md

@@ -10,7 +10,7 @@ Search inputs allow users to input text, execute a search, and clear results. A
 <d2l-input-search
   label="Search"
   value="Apples"
-  placeholder="Search for fruit">
+  placeholder="Search">
 </d2l-input-search>
 ```
 

package/components/popover/popover-mixin.js

@@ -469,7 +469,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		}
 
 		if (this._location === 'block-start') {
-			position.bottom = window.innerHeight - openerRect.top + 8;
+			position.bottom = window.innerHeight - openerRect.top + this._offset - 8;
 		} else {
 			position.top = openerRect.top + openerRect.height + this._offset - 7;
 		}

package/components/tabs/tab-mixin.js

@@ -0,0 +1,157 @@
+import '../colors/colors.js';
+import { css, html } from 'lit';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+
+const keyCodes = {
+	ENTER: 13,
+	SPACE: 32
+};
+
+export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
+
+	static get properties() {
+		return {
+			selected: { type: Boolean, reflect: true },
+		};
+	}
+
+	static get styles() {
+		const styles = [ css`
+			:host {
+				box-sizing: border-box;
+				display: inline-block;
+				max-width: 200px;
+				outline: none;
+				position: relative;
+				vertical-align: middle;
+			}
+			.d2l-tab-selected-indicator {
+				border-top: 4px solid var(--d2l-color-celestine);
+				border-top-left-radius: 4px;
+				border-top-right-radius: 4px;
+				bottom: 0;
+				display: none;
+				margin: 1px 0.6rem 0 0.6rem;
+				position: absolute;
+				transition: box-shadow 0.2s;
+				width: calc(100% - 1.2rem);
+			}
+			:host(:first-child) .d2l-tab-selected-indicator {
+				margin-inline-end: 0.6rem;
+				margin-inline-start: 0;
+				width: calc(100% - 0.6rem);
+			}
+			:host([aria-selected="true"]:focus) {
+				text-decoration: none;
+			}
+			:host(:hover) {
+				color: var(--d2l-color-celestine);
+				cursor: pointer;
+			}
+			:host([aria-selected="true"]:hover) {
+				color: inherit;
+				cursor: default;
+			}
+			:host([aria-selected="true"]) .d2l-tab-selected-indicator {
+				display: block;
+			}
+		`];
+
+		super.styles && styles.unshift(super.styles);
+		return styles;
+	}
+
+	constructor() {
+		super();
+		this.ariaSelected = false;
+		this.role = 'tab';
+		this.selected = false;
+		this.tabIndex = -1;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.#addEventHandlers();
+
+		if (!this.#resizeObserver) {
+			this.#resizeObserver = new ResizeObserver(() => {
+				this.#handleResize();
+			});
+			this.#resizeObserver.observe(this);
+		}
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#removeEventHandlers();
+
+		if (this.#resizeObserver) {
+			this.#resizeObserver.disconnect();
+			this.#resizeObserver = null;
+		}
+	}
+
+	render() {
+		return html`
+			<div class="d2l-skeletize">
+				${this.renderContent()}
+			</div>
+			<div class="d2l-tab-selected-indicator d2l-skeletize-container"></div>
+		`;
+	}
+
+	update(changedProperties) {
+		super.update(changedProperties);
+		changedProperties.forEach((oldVal, prop) => {
+			if (prop === 'selected') {
+				this.ariaSelected = this.selected;
+				if (this.selected === 'true') {
+					this.dispatchEvent(new CustomEvent(
+						'd2l-tab-selected', { bubbles: true, composed: true }
+					));
+				}
+			}
+		});
+	}
+
+	renderContent() {
+		console.warn('Subclasses to implement/override renderContent');
+		return html`<div>Default Tab Content</div>`;
+	}
+
+	#resizeObserver;
+
+	#handleClick = () => {
+		this.selected = true;
+	};
+
+	#handleKeydown = e => {
+		if (e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	};
+
+	#handleKeyup = e => {
+		if (e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER) {
+			this.#handleClick();
+		}
+	};
+
+	#addEventHandlers() {
+		this.addEventListener('click', this.#handleClick);
+		this.addEventListener('keydown', this.#handleKeydown);
+		this.addEventListener('keyup', this.#handleKeyup);
+	}
+
+	#handleResize() {
+		this.dispatchEvent(new CustomEvent('d2l-tab-resize'));
+	}
+
+	#removeEventHandlers() {
+		this.removeEventListener('click', this.#handleClick);
+		this.removeEventListener('keydown', this.#handleKeydown);
+		this.removeEventListener('keyup', this.#handleKeyup);
+	}
+
+};

package/components/tabs/tab-panel-mixin.js

@@ -5,6 +5,11 @@ export const TabPanelMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {
+			/**
+			 * Id of the tab that labels this panel
+			 * @type {string}
+			 */
+			labelledBy: { type: String },
 			/**
 			 * Opt out of default padding/whitespace around the panel
 			 * @type {boolean}
@@ -61,7 +66,9 @@ export const TabPanelMixin = superclass => class extends superclass {
 		super.updated(changedProperties);
 
 		changedProperties.forEach((oldVal, prop) => {
-			if (prop === 'selected') {
+			if (prop === 'labelledBy') {
+				this.setAttribute('aria-labelledby', this.labelledBy);
+			} else if (prop === 'selected') {
 				if (this.selected) {
 					requestAnimationFrame(() => {
 						/** Dispatched when a tab is selected */

package/components/tabs/tab.js

@@ -0,0 +1,46 @@
+import { css, html, LitElement, unsafeCSS } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { TabMixin } from './tab-mixin.js';
+
+class Tab extends TabMixin(LitElement) {
+
+	static get styles() {
+		const styles = [ css`
+			.d2l-tab-text {
+				margin: 0.5rem;
+				overflow: hidden;
+				padding: 0.1rem;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			:host(:first-child) .d2l-tab-text {
+				margin-inline-end: 0.6rem;
+				margin-inline-start: 0;
+			}
+			:host(:${unsafeCSS(getFocusPseudoClass())}) > .d2l-tab-text {
+				border-radius: 0.3rem;
+				box-shadow: 0 0 0 2px var(--d2l-color-celestine);
+				color: var(--d2l-color-celestine);
+			}
+		`];
+
+		super.styles && styles.unshift(super.styles);
+		return styles;
+	}
+
+	renderContent() {
+		const contentClasses = {
+			'd2l-tab-handler': true,
+			'd2l-tab-text': true,
+		};
+
+		return html`
+			<div class="${classMap(contentClasses)}">
+				<slot></slot>
+			</div>
+		`;
+	}
+}
+
+customElements.define('d2l-tab-wip', Tab);

package/custom-elements.json

@@ -12740,6 +12740,11 @@
       "path": "./components/tabs/tab-panel.js",
       "description": "A component for tab panel content.",
       "attributes": [
+        {
+          "name": "labelledBy",
+          "description": "Id of the tab that labels this panel",
+          "type": "string"
+        },
         {
           "name": "text",
           "description": "ACCESSIBILITY: REQUIRED: The text used for the tab, as well as labelling the panel",
@@ -12759,6 +12764,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "labelledBy",
+          "attribute": "labelledBy",
+          "description": "Id of the tab that labels this panel",
+          "type": "string"
+        },
         {
           "name": "text",
           "attribute": "text",
@@ -12797,6 +12808,59 @@
         }
       ]
     },
+    {
+      "name": "d2l-tab-wip",
+      "path": "./components/tabs/tab.js",
+      "attributes": [
+        {
+          "name": "selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "ariaSelected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "default": "\"tab\""
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "tabIndex",
+          "type": "number",
+          "default": "-1"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-tab-selected"
+        },
+        {
+          "name": "d2l-tab-resize"
+        }
+      ]
+    },
     {
       "name": "d2l-tabs",
       "path": "./components/tabs/tabs.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.76.0",
+  "version": "3.76.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -48,7 +48,7 @@
     "@brightspace-ui/stylelint-config": "^1",
     "@brightspace-ui/testing": "^1",
     "@rollup/plugin-dynamic-import-vars": "^2",
-    "@rollup/plugin-node-resolve": "^15",
+    "@rollup/plugin-node-resolve": "^16",
     "@rollup/plugin-replace": "^6",
     "@web/dev-server": "^0.4",
     "chalk": "^5",