lightning-base-components 1.26.4-alpha → 1.27.5-alpha

package/src/lightning/ariaObserver/{ariaObserver.js → ariaObserver.ts}

@@ -1,9 +1,4 @@
-/*
- * Copyright (c) 2025, Salesforce, Inc.,
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
-import { guid, isNativeComponent, isCSR } from 'lightning/utilsPrivate';
+import { guid, isNativeComponent } from 'lightning/utilsPrivate';
 
 import {
     setAriaActiveDescendant,
@@ -13,8 +8,11 @@ import {
     setAriaDetails,
     setAriaErrorMessage,
 } from './polyfill.js';
-
-const SUPPORTED_ATTRIBUTES_ARRAY = [
+import { LightningElement } from 'lwc';
+const SUPPORTED_ATTRIBUTES_ARRAY: [
+    string,
+    { ariaReflection: string; polyfill: (...args: unknown[]) => void },
+][] = [
     [
         'aria-controls',
         {
@@ -58,24 +56,21 @@ const SUPPORTED_ATTRIBUTES_ARRAY = [
         },
     ],
 ];
-
 /*
-    Aria Reflection is used if supported by browser.
-    If Aria Reflection is not available, fallback to polyfill
-    Aria Reflection: https://wicg.github.io/aom/aria-reflection-explainer.html
-    Polyfill: https://git.soma.salesforce.com/lwc/aria-element-reflection
+Aria Reflection is used if supported by browser.
+If Aria Reflection is not available, fallback to polyfill
+Aria Reflection: https://wicg.github.io/aom/aria-reflection-explainer.html
+Polyfill: https://git.soma.salesforce.com/lwc/aria-element-reflection
 */
 const SUPPORTED_ATTRIBUTES_MAP = new Map(SUPPORTED_ATTRIBUTES_ARRAY);
-
 // Sniff for ARIA element reflection
-let BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION;
-if (isCSR) {
+let BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION: boolean;
+if (!import.meta.env.SSR) {
     BROWSER_SUPPORTS_ARIA_ELEMENT_REFLECTION = [
         ...SUPPORTED_ATTRIBUTES_MAP.values(),
     ].every(({ ariaReflection }) => ariaReflection in Element.prototype);
 }
-
-function extractElements(root, ids) {
+function extractElements(root: Element, ids: string): Element[] {
     if (typeof ids !== 'string' || ids === '') {
         return [];
     }
@@ -85,13 +80,30 @@ function extractElements(root, ids) {
         .map((id) => root.querySelector(`[id*="${id}"]`))
         .filter((el) => !!el);
 }
-
-function splitIds(ids) {
+function splitIds(ids: string): string[] {
     return ids ? (ids + '').trim().split(/\s+/) : [];
 }
-
+interface LiveId {
+    refs: string;
+    selector: string;
+    callbacks: ((...args: unknown[]) => void)[];
+    elements?: Element[];
+    ids?: string;
+}
 export default class AriaObserver {
-    constructor(component) {
+    component: LightningElement;
+    template: InstanceType<typeof LightningElement>['template'];
+    isNativeShadow: boolean;
+    state: Record<string, any>;
+    liveIds: Record<string, any>;
+    guid: string;
+    placeholderContainer: null;
+    ariaReflectionMap: Map<Element, Element>;
+    nodeMap: Map<Element, Element>;
+    _root: Element;
+    mo?: MutationObserver;
+
+    constructor(component: LightningElement) {
         this.component = component;
         this.template = component.template;
         this.isNativeShadow = isNativeComponent(component);
@@ -102,14 +114,16 @@ export default class AriaObserver {
         this.ariaReflectionMap = new Map();
         this.nodeMap = new Map();
     }
-
-    connectLiveIdRef(refs, callback) {
+    connectLiveIdRef(
+        refs: string,
+        callback: (...args: unknown[]) => void
+    ): void {
         const selector = (refs + '')
             .trim()
             .split(/\s+/)
             .map((ref) => `[id*="${ref}"]`)
             .join(',');
-        let liveId;
+        let liveId: LiveId;
         if (this.liveIds[refs]) {
             this.liveIds[refs].callbacks.push(callback);
         } else {
@@ -117,14 +131,13 @@ export default class AriaObserver {
             this.liveIds[refs] = liveId;
         }
     }
-
     /**
      * Connects the internal element and the external reference. It takes an options object with the following keys:
      * @param {String} attribute The name of the aria attribute. Supported values: `aria-labelledby`, `aria-describedby`, `aria-activedescendant` and `aria-controls`.
      * @param {String} targetSelector The selector to the internal element where the aria attribute should be attached.
      * @param {HTMLElement} targetNode The element where the aria attribute should be attached. If not provided, the `targetSelector` is used.
-     * @param {String|Array[String]} relatedNodeIds ID(s) of the external element(s) to which the `targetNode` will be related. Passed as a space separated string `id1 id2 id3`. Combined with `relatedNodes` if both are present.
-     * @param {Array[HTMLElement]} relatedNodes an Array of HTMLElement element(s) to which the `targetNode` will be related. Combined with `relatedNodeIds` if both are present.
+     * @param {String | Array<String>} relatedNodeIds ID(s) of the external element(s) to which the `targetNode` will be related. Passed as a space separated string `id1 id2 id3`. Combined with `relatedNodes` if both are present.
+     * @param {Array<HTMLElement>} relatedNodes an Array of HTMLElement element(s) to which the `targetNode` will be related. Combined with `relatedNodeIds` if both are present.
      */
     connect({
         attribute,
@@ -132,25 +145,27 @@ export default class AriaObserver {
         targetNode,
         relatedNodeIds,
         relatedNodes,
-    }) {
+    }: {
+        attribute: string;
+        targetSelector?: string;
+        targetNode?: HTMLElement;
+        relatedNodeIds?: string | string[];
+        relatedNodes?: HTMLElement | HTMLElement[];
+    }): void {
         this.state[attribute] = this.state[attribute] || {};
-        const attrState = this.state[attribute];
-
+        const attrState = this.state[attribute] as any;
         attrState.targetNode = targetNode;
         attrState.targetSelector = targetSelector;
         attrState.relatedNodes = (
             !Array.isArray(relatedNodes) ? [relatedNodes] : relatedNodes
-        ).filter(Boolean);
-
+        ).filter(Boolean) as HTMLElement[];
         attrState.relatedNodeIds = Array.isArray(relatedNodeIds)
             ? relatedNodeIds.join(' ')
             : relatedNodeIds;
-
         if (this.component.isConnected) {
             this.privateUpdate(attribute);
         }
     }
-
     /**
      * Connects the MutationObserver when in native shadow mode and connects the
      * appropriate aria attributes to the correct elements
@@ -158,65 +173,56 @@ export default class AriaObserver {
      * (like lightning-primitive-input-simple) is in native shadow mode and the parent
      * (lightning-input) that was passed on AriaObserver instantiation is not.
      */
-    sync(isNativeShadow) {
+    sync(isNativeShadow?: boolean): void {
         if (isNativeShadow != null) {
             this.isNativeShadow = isNativeShadow;
         }
-
         if (!this.component.isConnected) {
             throw new Error(
                 `Invalid sync invocation. It can only be invoked during renderedCallback().`
             );
         }
-
         if (!this.root) {
             this.root =
                 this.template && this.template.host
-                    ? this.template.host.getRootNode()
+                    ? (this.template.host.getRootNode() as Element)
                     : null;
         }
-
         this.privateUpdateLiveIds();
-
         for (const attrName in this.state) {
             if (Object.prototype.hasOwnProperty.call(this.state, attrName)) {
                 this.privateUpdate(attrName);
             }
         }
     }
-
-    get privateIsMoRequired() {
+    get privateIsMoRequired(): boolean {
         return this.isNativeShadow || Object.keys(this.liveIds).length !== 0;
     }
-
-    get root() {
+    get root(): Element {
         return this._root;
     }
-
     /**
      * Sets the specified root element and observes it. The root element should contain
      * Observes the root element. The root element should contain
      * the related node elements. By default, this is the template host's root node, but can be
      * overridden where required.
      */
-    set root(root) {
+    set root(root: Element) {
         this._root = root;
         if (this._root && this.privateIsMoRequired) {
             this.privateCreateMutationObserver();
         }
     }
-
-    privateUpdate(attrName) {
+    private privateUpdate(attrName: string): void {
         const {
             targetSelector,
-            targetNode = this.template.querySelector(targetSelector),
+            targetNode = this.template.querySelector(targetSelector) as Element,
             relatedNodeIds,
             relatedNodes,
-        } = this.state[attrName];
+        } = this.state[attrName] as any;
         if (!targetNode) {
             return; // nothing to update
         }
-
         const attribute = SUPPORTED_ATTRIBUTES_MAP.get(attrName);
         if (!attribute) {
             throw new Error(
@@ -225,7 +231,6 @@ export default class AriaObserver {
                 )}`
             );
         }
-
         if (this.isNativeShadow) {
             const allRelatedNodes = [
                 ...relatedNodes,
@@ -240,7 +245,7 @@ export default class AriaObserver {
             }
             // check related nodes for nested references and ensure
             // the div with reflected nodes is updated accordingly
-            const rootNode = targetNode.getRootNode();
+            const rootNode = targetNode.getRootNode() as Element;
             for (let i = 0; i < allRelatedNodes.length; i++) {
                 this.privateAddNestedReferences(rootNode, allRelatedNodes[i]);
             }
@@ -249,7 +254,6 @@ export default class AriaObserver {
                 ...splitIds(relatedNodeIds),
                 ...relatedNodes.map((n) => n.id),
             ].join(' ');
-
             if (attributeValue) {
                 targetNode.setAttribute(attrName, attributeValue);
             } else {
@@ -257,8 +261,10 @@ export default class AriaObserver {
             }
         }
     }
-
-    privateExtractCorrectElements(selector = '', elements) {
+    privateExtractCorrectElements(
+        selector = '',
+        elements: Element[]
+    ): Element[] {
         // Example: 'foo' + '-1'
         const selectors = selector.split(/\s/g);
         const matchSelectors = `(${selectors.join('|')})`;
@@ -267,13 +273,12 @@ export default class AriaObserver {
             return regex.test(element.id);
         });
     }
-
     /**
      * Observes the root element. The root element should contain
      * the related node elements. By default, this is the template host's root node, but can be
      * overridden where required.
      */
-    privateCreateMutationObserver() {
+    privateCreateMutationObserver(): void {
         this.disconnect();
         this.mo = new MutationObserver(() => {
             if (!this.component.isConnected) {
@@ -287,36 +292,32 @@ export default class AriaObserver {
             subtree: true,
         });
     }
-
-    privateExtractIds(elements) {
+    privateExtractIds(elements: Element[]): string {
         return elements
             .map((el) => {
                 return el.getAttribute('id');
             })
             .join(' ');
     }
-
-    privateUpdateLiveIds() {
+    privateUpdateLiveIds(): void {
         const root =
             this.template && this.template.host
-                ? this.template.host.getRootNode()
+                ? (this.template.host.getRootNode() as Element)
                 : null;
-
         // if not connected do nothing
         if (!root) {
             return;
         }
         for (const liveId in this.liveIds) {
             if (Object.prototype.hasOwnProperty.call(this.liveIds, liveId)) {
-                const thisId = this.liveIds[liveId];
+                const thisId = this.liveIds[liveId] as any;
                 if (!thisId.elements || !thisId.elements.length) {
                     const splitRefIds = splitIds(liveId);
                     try {
                         // element refs are cached
-                        const refElements = [
-                            ...root.querySelectorAll(thisId.selector),
-                        ];
-
+                        const refElements = Array.from(
+                            root.querySelectorAll(thisId.selector)
+                        );
                         thisId.elements = refElements.sort((a, b) => {
                             const idA = a
                                 .getAttribute('id')
@@ -324,7 +325,6 @@ export default class AriaObserver {
                             const idB = b
                                 .getAttribute('id')
                                 ?.replace(/-[0-9]+$/g, '');
-
                             return (
                                 splitRefIds.indexOf(idA) -
                                 splitRefIds.indexOf(idB)
@@ -332,8 +332,9 @@ export default class AriaObserver {
                         });
                     } catch (error) {
                         if (error instanceof DOMException) {
+                            // eslint-disable-next-line no-console
                             console.warn(
-                                `lightning/ariaObserver could not find elements to connect live IDs due to an invalid id selector.\n\n${error}`
+                                `lightning/ariaObserver could not find elements to connect live IDs due to an invalid id selector.\n\n${error.message}`
                             );
                         }
                         return;
@@ -344,7 +345,6 @@ export default class AriaObserver {
                     thisId.elements
                 );
                 const newIds = this.privateExtractIds(newThisId);
-
                 // only fire callback if the value changed and the root node has been rendered
                 if (newIds.length && newIds !== thisId.ids) {
                     // thisId.callback(newIds);
@@ -356,7 +356,6 @@ export default class AriaObserver {
             }
         }
     }
-
     /**
      * Check nodes being reflected to see if there are any nested references
      * then finds the mirrored node and reflects it accordingly.
@@ -365,7 +364,7 @@ export default class AriaObserver {
      * @param {Node} rootNode - the root node where the mirrored nodes are attached
      * @param {Node} relatedNode - the node to check for nested references
      */
-    privateAddNestedReferences(rootNode, relatedNode) {
+    privateAddNestedReferences(rootNode: Element, relatedNode: Element): void {
         for (let i = 0; i < SUPPORTED_ATTRIBUTES_ARRAY.length; i++) {
             const [attrName, { polyfill }] = SUPPORTED_ATTRIBUTES_ARRAY[i];
             const attrValue = relatedNode.getAttribute(attrName);
@@ -399,7 +398,7 @@ export default class AriaObserver {
         }
     }
 
-    disconnect() {
+    disconnect(): void {
         // MutationObservers must be disconnected manually when using @lwc/synthetic-shadow
         // https://lwc.dev/guide/composition#:~:text=memory%20leak
         if (this.mo) {

package/src/lightning/ariaObserver/polyfill.d.ts

@@ -0,0 +1,19 @@
+declare function setAriaActiveDescendant(...args: unknown[]): void;
+declare function setAriaControls(...args: unknown[]): void;
+declare function setAriaDescribedBy(...args: unknown[]): void;
+declare function setAriaDetails(...args: unknown[]): void;
+declare function setAriaErrorMessage(...args: unknown[]): void;
+declare function setAriaFlowTo(...args: unknown[]): void;
+declare function setAriaLabelledBy(...args: unknown[]): void;
+declare function setAriaOwns(...args: unknown[]): void;
+
+export {
+    setAriaActiveDescendant,
+    setAriaControls,
+    setAriaDescribedBy,
+    setAriaDetails,
+    setAriaErrorMessage,
+    setAriaFlowTo,
+    setAriaLabelledBy,
+    setAriaOwns
+}; 

package/src/lightning/ariaObserver/polyfill.js

@@ -3,6 +3,8 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
+/* eslint @eslint-community/eslint-comments/no-use: off */
+/* eslint-disable */
 // borrowed from bootstrap
 const screenReaderOnlyStyles = `
   position: absolute;

package/src/lightning/avatar/__docs__/avatar.md

@@ -78,8 +78,8 @@ is available in your org.
 
 Use the `variant` attribute with one of these values to apply styling.
 
--   `square` is the default variant, displaying a rectangle avatar with rounded corners
--   `circle` displays a round avatar
+- `square` is the default variant, displaying a rectangle avatar with rounded corners
+- `circle` displays a round avatar
 
 This example creates a round avatar.
 

package/src/lightning/avatar/avatar.css

@@ -1 +1 @@
-@import './avatar.lbc.native.css';
+@import './avatar.lbc.native.css';

package/src/lightning/avatar/avatar.slds.css

@@ -1,98 +1,97 @@
 
-
-  :host([data-render-mode="shadow"]) .slds-assistive-text {
-    position: absolute !important;
-    margin: -1px !important;
-    border: 0 !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    text-transform: none !important;
-    white-space: nowrap !important;
-  }
-
-  :host([data-render-mode="shadow"]) [part='avatar'] {
-    width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
-    height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
-    overflow: hidden;
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
-    line-height: var(--slds-g-font-lineheight-1);
-    font-size: var(--slds-g-font-scale-neg-1);
-    color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
-  }
-
-  :host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
-    width: var(--slds-g-sizing-6);
-    height: var(--slds-g-sizing-6);
-    font-size: var(--slds-g-font-scale-neg-4);
-    --slds-c-icon-sizing: var(--slds-g-sizing-6);
-  }
-
-  :host([data-render-mode="shadow"][size='small']) [part='avatar'] {
-    width: var(--slds-g-sizing-7);
-    height: var(--slds-g-sizing-7);
-    font-size: var(--slds-g-font-scale-neg-4);
-    --slds-c-icon-sizing: var(--slds-g-sizing-7);
-  }
-
-  :host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
-    width: var(--slds-g-sizing-9);
-    height: var(--slds-g-sizing-9);
-    font-size: var(--slds-g-font-scale-neg-1);
-    --slds-c-icon-sizing: var(--slds-g-sizing-9);
-  }
-
-  :host([data-render-mode="shadow"][size='large']) [part='avatar'] {
-    width: var(--slds-g-sizing-10);
-    height: var(--slds-g-sizing-10);
-    font-size: var(--slds-g-font-scale-1);
-    line-height: var(--slds-g-font-lineheight-2);
-    --slds-c-icon-sizing: var(--slds-g-sizing-10);
-  }
-
-  :host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
-    border-radius: calc(var(--slds-g-radius-border-circle) / 2);
-  }
-
-  :host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
-    border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
-  }
-
-  :host([data-render-mode="shadow"]) lightning-icon {
-    display: flex;
-    justify-content: center;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials {
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    margin: auto;
-    color: var(--slds-c-avatar-initials-text-color);
-    height: 100%;
-    text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
-    background-color: var(--slds-g-color-accent-container-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
-    color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
-  }
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
-    cursor: default;
-    text-decoration: none;
-  }
-
-  /* inverse is not currently supported by LBC */
-
-  :host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
-    --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
-
-    background-color: var(--slds-g-color-neutral-base-95);
-    text-shadow: none;
-  }
+:host([data-render-mode="shadow"]) .slds-assistive-text {
+  position: absolute !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  width: 1px !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  text-transform: none !important;
+  white-space: nowrap !important;
+}
+
+:host([data-render-mode="shadow"]) [part='avatar'] {
+  width: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+  height: var(--slds-c-avatar-sizing, var(--slds-g-sizing-9));
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: var(--slds-c-avatar-radius-border, var(--slds-g-radius-border-2));
+  line-height: var(--slds-g-font-lineheight-1);
+  font-size: var(--slds-g-font-scale-neg-1);
+  color: var(--slds-c-avatar-text-color, var(--slds-g-color-on-accent-1));
+}
+
+:host([data-render-mode="shadow"][size='x-small']) [part='avatar'] {
+  width: var(--slds-g-sizing-6);
+  height: var(--slds-g-sizing-6);
+  font-size: var(--slds-g-font-scale-neg-4);
+  --slds-c-icon-sizing: var(--slds-g-sizing-6);
+}
+
+:host([data-render-mode="shadow"][size='small']) [part='avatar'] {
+  width: var(--slds-g-sizing-7);
+  height: var(--slds-g-sizing-7);
+  font-size: var(--slds-g-font-scale-neg-4);
+  --slds-c-icon-sizing: var(--slds-g-sizing-7);
+}
+
+:host([data-render-mode="shadow"][size='medium']) [part='avatar'] {
+  width: var(--slds-g-sizing-9);
+  height: var(--slds-g-sizing-9);
+  font-size: var(--slds-g-font-scale-neg-1);
+  --slds-c-icon-sizing: var(--slds-g-sizing-9);
+}
+
+:host([data-render-mode="shadow"][size='large']) [part='avatar'] {
+  width: var(--slds-g-sizing-10);
+  height: var(--slds-g-sizing-10);
+  font-size: var(--slds-g-font-scale-1);
+  line-height: var(--slds-g-font-lineheight-2);
+  --slds-c-icon-sizing: var(--slds-g-sizing-10);
+}
+
+:host([data-render-mode="shadow"][variant='circle']) [part='avatar'] {
+  border-radius: calc(var(--slds-g-radius-border-circle) / 2);
+}
+
+:host([data-render-mode="shadow"].slds-avatar_empty) [part='avatar'] {
+  border: var(--slds-g-sizing-border-1) dashed var(--slds-g-color-neutral-base-90);
+}
+
+:host([data-render-mode="shadow"]) lightning-icon {
+  display: flex;
+  justify-content: center;
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  margin: auto;
+  color: var(--slds-c-avatar-initials-text-color);
+  height: 100%;
+  text-shadow: 0 0 1px rgba(0, 0, 0, 80%);
+  background-color: var(--slds-g-color-accent-container-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials:hover {
+  color: var(--slds-c-avatar-initials-text-color-hover, var(--slds-g-color-neutral-base-100));
+}
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials[title] {
+  cursor: default;
+  text-decoration: none;
+}
+
+/* inverse is not currently supported by LBC */
+
+:host([data-render-mode="shadow"]) .slds-avatar__initials_inverse {
+  --slds-c-avatar-text-color: var(--slds-c-avatar-inverse-text-color, var(--slds-g-color-neutral-base-30));
+
+  background-color: var(--slds-g-color-neutral-base-95);
+  text-shadow: none;
+}