@carbon/ibm-products-web-components 0.9.0-rc.0 → 0.10.0-rc.0

package/es/components/user-avatar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './user-avatar';

package/es/components/user-avatar/index.js

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './user-avatar.js';
+//# sourceMappingURL=index.js.map

package/es/components/user-avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/es/components/user-avatar/user-avatar.d.ts

@@ -0,0 +1,374 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/tooltip/index.js';
+declare const CDSUseravatar_base: {
+    new (...args: any[]): {
+        _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        inert: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        attachInternals(): ElementInternals;
+        click(): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        readonly attributes: NamedNodeMap;
+        readonly classList: DOMTokenList;
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        id: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        readonly part: DOMTokenList;
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, text: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestPointerLock(): void;
+        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        textContent: string | null;
+        appendChild<T_1 extends Node>(node: T_1): T_1;
+        cloneNode(deep?: boolean | undefined): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T_2 extends Node>(node: T_2, child: Node | null): T_2;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T_3 extends Node>(child: T_3): T_3;
+        replaceChild<T_4 extends Node>(node: Node, child: T_4): T_4;
+        readonly ATTRIBUTE_NODE: number;
+        readonly CDATA_SECTION_NODE: number;
+        readonly COMMENT_NODE: number;
+        readonly DOCUMENT_FRAGMENT_NODE: number;
+        readonly DOCUMENT_NODE: number;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+        readonly DOCUMENT_POSITION_CONTAINS: number;
+        readonly DOCUMENT_POSITION_DISCONNECTED: number;
+        readonly DOCUMENT_POSITION_FOLLOWING: number;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+        readonly DOCUMENT_POSITION_PRECEDING: number;
+        readonly DOCUMENT_TYPE_NODE: number;
+        readonly ELEMENT_NODE: number;
+        readonly ENTITY_NODE: number;
+        readonly ENTITY_REFERENCE_NODE: number;
+        readonly NOTATION_NODE: number;
+        readonly PROCESSING_INSTRUCTION_NODE: number;
+        readonly TEXT_NODE: number;
+        dispatchEvent(event: Event): boolean;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColIndexText: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaInvalid: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowIndexText: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
+        role: string | null;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+        after(...nodes: (string | Node)[]): void;
+        before(...nodes: (string | Node)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (string | Node)[]): void;
+        innerHTML: string;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (string | Node)[]): void;
+        prepend(...nodes: (string | Node)[]): void;
+        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+        replaceChildren(...nodes: (string | Node)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        readonly style: CSSStyleDeclaration;
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string | undefined;
+        tabIndex: number;
+        blur(): void;
+        focus(options?: FocusOptions | undefined): void;
+    };
+    _hostListeners: {
+        [listenerName: string]: {
+            [type: string]: {
+                options?: boolean | AddEventListenerOptions | undefined;
+            };
+        };
+    };
+} & typeof LitElement;
+declare class CDSUseravatar extends CDSUseravatar_base {
+    /**
+     * Specify the text of the tooltip.
+     * Can be string
+     */
+    tooltipText: any;
+    /**
+     * Specify the alignment of the tooltip.
+     */
+    tooltipAlignment: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+     */
+    name: any;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon: any;
+    /**
+     * Set the size of the avatar circle
+     */
+    size: any;
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: any;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: any;
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor: string;
+    /**
+     * Set theme in which the component will be rendered.
+     */
+    theme: any;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSUseravatar;

package/es/components/user-avatar/user-avatar.js

@@ -0,0 +1,149 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix, carbonPrefix } from '../../globals/settings.js';
+import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
+import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import styles from './user-avatar.scss.js';
+import '@carbon/web-components/es/components/tooltip/index.js';
+import User from '@carbon/web-components/es/icons/user/16';
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Useravatar.
+ *
+ * @element c4p-user-avatar
+ * */
+const blockClass = `${prefix}--user-avatar`;
+const iconSize = {
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+};
+let CDSUseravatar = class CDSUseravatar extends HostListenerMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify the alignment of the tooltip.
+         */
+        this.tooltipAlignment = 'bottom';
+        /**
+         * Provide the background color need to be set for UserAvatar.
+         */
+        this.backgroundColor = 'order-1-cyan';
+    }
+    render() {
+        const getItem = () => {
+            var _a;
+            const iconProps = { size: iconSize[this.size] };
+            if (this.image) {
+                const imageClasses = classMap({
+                    [`${blockClass}__photo`]: true,
+                    [`${blockClass}__photo--${this.size}`]: this.size,
+                });
+                return html ` <img
+          alt="${this.imageDescription}"
+          src="${this.image}"
+          class="${imageClasses}"
+        />`;
+            }
+            if (this.renderIcon) {
+                return html `${this.renderIcon({
+                    width: `${iconProps.size}`,
+                    height: `${iconProps.size}`,
+                })}`;
+            }
+            if (this.name) {
+                const parts = ((_a = this.name) === null || _a === undefined ? undefined : _a.split(' ')) || [];
+                const firstChar = parts[0].charAt(0).toUpperCase();
+                const secondChar = parts[0].charAt(1).toUpperCase();
+                if (parts.length === 1) {
+                    return firstChar + secondChar;
+                }
+                const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
+                const initials = [firstChar];
+                if (lastChar) {
+                    initials.push(lastChar);
+                }
+                return ''.concat(...initials);
+            }
+            return html `${User({
+                slot: 'icon',
+                width: `${iconProps.size}`,
+                height: `${iconProps.size}`,
+            })} `;
+        };
+        const { tooltipText, tooltipAlignment, size, backgroundColor, theme } = this;
+        const classes = classMap({
+            [`${blockClass}`]: true,
+            [`${blockClass}--${size}`]: size,
+            [`${blockClass}--${backgroundColor}`]: backgroundColor,
+            [`${blockClass}--${theme}`]: theme,
+        });
+        const Avatar = () => html `<div class="${classes}">${getItem()}</div>`;
+        if (tooltipText) {
+            return html `<cds-tooltip
+        align=${tooltipAlignment}
+        aria-label=${tooltipText}
+        class=${`${blockClass}__tooltip ${carbonPrefix}--icon-tooltip`}
+      >
+        ${Avatar()}
+        <cds-tooltip-content id="content"> ${tooltipText} </cds-tooltip-content>
+      </cds-tooltip>`;
+        }
+        else {
+            return html ` ${Avatar()}`;
+        }
+    }
+};
+CDSUseravatar.styles = styles;
+__decorate([
+    property({ reflect: true, attribute: 'tooltip-text' })
+], CDSUseravatar.prototype, "tooltipText", undefined);
+__decorate([
+    property({ reflect: true, attribute: 'tooltip-alignment' })
+], CDSUseravatar.prototype, "tooltipAlignment", undefined);
+__decorate([
+    property({ reflect: true })
+], CDSUseravatar.prototype, "name", undefined);
+__decorate([
+    property()
+], CDSUseravatar.prototype, "renderIcon", undefined);
+__decorate([
+    property({ reflect: true })
+], CDSUseravatar.prototype, "size", undefined);
+__decorate([
+    property({ reflect: true })
+], CDSUseravatar.prototype, "image", undefined);
+__decorate([
+    property({ reflect: true, attribute: 'image-description' })
+], CDSUseravatar.prototype, "imageDescription", undefined);
+__decorate([
+    property({ reflect: true, attribute: 'background-color' })
+], CDSUseravatar.prototype, "backgroundColor", undefined);
+__decorate([
+    property({ reflect: true })
+], CDSUseravatar.prototype, "theme", undefined);
+CDSUseravatar = __decorate([
+    carbonElement(`${prefix}-user-avatar`)
+], CDSUseravatar);
+var CDSUseravatar$1 = CDSUseravatar;
+
+export { CDSUseravatar$1 as default };
+//# sourceMappingURL=user-avatar.js.map

package/es/components/user-avatar/user-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-avatar.js","sources":["../../../src/components/user-avatar/user-avatar.ts"],"sourcesContent":[null],"names":["customElement"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;AAOG;AAYH;;;;AAIK;AAEL,MAAM,UAAU,GAAG,CAAG,EAAA,MAAM,eAAe;AAE3C,MAAM,QAAQ,GAAG;AACf,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;AACN,IAAA,EAAE,EAAE,EAAE;CACP;AAGD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,iBAAiB,CAAC,UAAU,CAAC,CAAA;AAAzD,IAAA,WAAA,GAAA;;AAQE;;AAEG;QAEH,IAAgB,CAAA,gBAAA,GAAG,QAAQ;AA+B3B;;AAEG;QAEH,IAAe,CAAA,eAAA,GAAG,cAAc;;IAQhC,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,MAAK;;AACnB,YAAA,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AAC/C,YAAA,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC5B,oBAAA,CAAC,CAAG,EAAA,UAAU,CAAS,OAAA,CAAA,GAAG,IAAI;oBAC9B,CAAC,CAAA,EAAG,UAAU,CAAA,SAAA,EAAY,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI,CAAC,IAAI;AAClD,iBAAA,CAAC;AACF,gBAAA,OAAO,IAAI,CAAA,CAAA;AACF,eAAA,EAAA,IAAI,CAAC,gBAAgB,CAAA;AACrB,eAAA,EAAA,IAAI,CAAC,KAAK,CAAA;mBACR,YAAY,CAAA;WACpB;;AAEL,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,gBAAA,OAAO,IAAI,CAAA,CAAA,EAAG,IAAI,CAAC,UAAU,CAAC;AAC5B,oBAAA,KAAK,EAAE,CAAA,EAAG,SAAS,CAAC,IAAI,CAAE,CAAA;AAC1B,oBAAA,MAAM,EAAE,CAAA,EAAG,SAAS,CAAC,IAAI,CAAE,CAAA;AAC5B,iBAAA,CAAC,EAAE;;AAEN,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,MAAM,KAAK,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE;AACzC,gBAAA,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAClD,gBAAA,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AACnD,gBAAA,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;oBACtB,OAAO,SAAS,GAAG,UAAU;;AAE/B,gBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAChE,gBAAA,MAAM,QAAQ,GAAG,CAAC,SAAS,CAAC;gBAC5B,IAAI,QAAQ,EAAE;AACZ,oBAAA,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAGzB,gBAAA,OAAO,EAAE,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC;;AAE/B,YAAA,OAAO,IAAI,CAAA,CAAG,EAAA,IAAI,CAAC;AACjB,gBAAA,IAAI,EAAE,MAAM;AACZ,gBAAA,KAAK,EAAE,CAAA,EAAG,SAAS,CAAC,IAAI,CAAE,CAAA;AAC1B,gBAAA,MAAM,EAAE,CAAA,EAAG,SAAS,CAAC,IAAI,CAAE,CAAA;AAC5B,aAAA,CAAC,GAAG;AACP,SAAC;AAED,QAAA,MAAM,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,GACnE,IAAI;QACN,MAAM,OAAO,GAAG,QAAQ,CAAC;AACvB,YAAA,CAAC,CAAG,EAAA,UAAU,CAAE,CAAA,GAAG,IAAI;AACvB,YAAA,CAAC,GAAG,UAAU,CAAA,EAAA,EAAK,IAAI,CAAE,CAAA,GAAG,IAAI;AAChC,YAAA,CAAC,GAAG,UAAU,CAAA,EAAA,EAAK,eAAe,CAAE,CAAA,GAAG,eAAe;AACtD,YAAA,CAAC,GAAG,UAAU,CAAA,EAAA,EAAK,KAAK,CAAE,CAAA,GAAG,KAAK;AACnC,SAAA,CAAC;AAEF,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAA,CAAA,YAAA,EAAe,OAAO,CAAA,EAAA,EAAK,OAAO,EAAE,QAAQ;QAErE,IAAI,WAAW,EAAE;AACf,YAAA,OAAO,IAAI,CAAA,CAAA;gBACD,gBAAgB;qBACX,WAAW;gBAChB,CAAG,EAAA,UAAU,CAAa,UAAA,EAAA,YAAY,CAAgB,cAAA,CAAA;;AAE5D,QAAA,EAAA,MAAM,EAAE;6CAC2B,WAAW,CAAA;qBACnC;;aACV;AACL,YAAA,OAAO,IAAI,CAAA,CAAA,CAAA,EAAI,MAAM,EAAE,EAAE;;;;AAItB,aAAM,CAAA,MAAA,GAAG,MAAH;AApHb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE;AAC1C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,aAAA,EAAA,SAAA,CAAA;AAMZ,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE;AAC/B,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,SAAA,CAAA;AAM5B,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACtB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,SAAA,CAAA;AAML,UAAA,CAAA;AADC,IAAA,QAAQ;AACE,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,YAAA,EAAA,SAAA,CAAA;AAMX,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACtB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,SAAA,CAAA;AAML,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACrB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,SAAA,CAAA;AAKN,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,EAAE;AAC1C,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,SAAA,CAAA;AAMjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE;AACzB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,SAAA,CAAA;AAMjC,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACrB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,SAAA,CAAA;AArDF,aAAa,GAAA,UAAA,CAAA;AADlB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,YAAA,CAAc;AAChC,CAAA,EAAA,aAAa,CA2HlB;AACD,sBAAe,aAAa;;;;"}

package/es/components/user-avatar/user-avatar.scss.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var styles = css(["a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font:inherit;font-feature-settings:\"liga\" 1;font-size:100%;margin:0;padding:0;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:none}table{border-collapse:collapse;border-spacing:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:100%}body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-heading-06-font-size,2.625rem);font-weight:var(--cds-heading-06-font-weight,300);letter-spacing:var(--cds-heading-06-letter-spacing,0);line-height:var(--cds-heading-06-line-height,1.199)}h2{font-size:var(--cds-heading-05-font-size,2rem);font-weight:var(--cds-heading-05-font-weight,400);letter-spacing:var(--cds-heading-05-letter-spacing,0);line-height:var(--cds-heading-05-line-height,1.25)}h3{font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}h4{font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}h5{font-size:var(--cds-heading-02-font-size,1rem);font-weight:var(--cds-heading-02-font-weight,600);letter-spacing:var(--cds-heading-02-letter-spacing,0);line-height:var(--cds-heading-02-line-height,1.5)}h6{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);line-height:var(--cds-heading-01-line-height,1.42857)}p{font-size:var(--cds-body-02-font-size,1rem);font-weight:var(--cds-body-02-font-weight,400);letter-spacing:var(--cds-body-02-letter-spacing,0);line-height:var(--cds-body-02-line-height,1.5)}a{color:var(--cds-link-primary,#0062fe)}em{font-style:italic}.cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.c4p--user-avatar,:host(c4p-user-avatar){align-items:center;block-size:4rem;border:.5px solid transparent;border-radius:100%;color:var(--cds-text-inverse,#fff);display:flex;inline-size:4rem;justify-content:center;outline:none;outline-offset:3px;position:relative}.c4p--user-avatar svg,:host(c4p-user-avatar) svg{color:var(--cds-icon-inverse,#fff)}.c4p--user-avatar__tooltip:focus-within .c4p--user-avatar,.c4p--user-avatar__tooltip:focus-within :host(c4p-user-avatar){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--g10 .c4p--user-avatar--order-1-cyan,.cds--white .c4p--user-avatar--order-1-cyan,:root .c4p--user-avatar--order-1-cyan{background-color:#0072c3}.cds--g10 .c4p--user-avatar--order-2-gray,.cds--white .c4p--user-avatar--order-2-gray,:root .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}.cds--g10 .c4p--user-avatar--order-3-green,.cds--white .c4p--user-avatar--order-3-green,:root .c4p--user-avatar--order-3-green{background-color:#198038}.cds--g10 .c4p--user-avatar--order-4-magenta,.cds--white .c4p--user-avatar--order-4-magenta,:root .c4p--user-avatar--order-4-magenta{background-color:#d02670}.cds--g10 .c4p--user-avatar--order-5-purple,.cds--white .c4p--user-avatar--order-5-purple,:root .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}.cds--g10 .c4p--user-avatar--order-6-teal,.cds--white .c4p--user-avatar--order-6-teal,:root .c4p--user-avatar--order-6-teal{background-color:#007d79}.cds--g10 .c4p--user-avatar--order-7-cyan,.cds--white .c4p--user-avatar--order-7-cyan,:root .c4p--user-avatar--order-7-cyan{background-color:#003a6d}.cds--g10 .c4p--user-avatar--order-8-gray,.cds--white .c4p--user-avatar--order-8-gray,:root .c4p--user-avatar--order-8-gray{background-color:#393939}.cds--g10 .c4p--user-avatar--order-9-green,.cds--white .c4p--user-avatar--order-9-green,:root .c4p--user-avatar--order-9-green{background-color:#044317}.cds--g10 .c4p--user-avatar--order-10-magenta,.cds--white .c4p--user-avatar--order-10-magenta,:root .c4p--user-avatar--order-10-magenta{background-color:#740937}.cds--g10 .c4p--user-avatar--order-11-purple,.cds--white .c4p--user-avatar--order-11-purple,:root .c4p--user-avatar--order-11-purple{background-color:#491d8b}.cds--g10 .c4p--user-avatar--order-12-teal,.cds--white .c4p--user-avatar--order-12-teal,:root .c4p--user-avatar--order-12-teal{background-color:#004144}.cds--g100 .c4p--user-avatar--order-1-cyan,.cds--g90 .c4p--user-avatar--order-1-cyan{background-color:#1192e8}.cds--g100 .c4p--user-avatar--order-2-gray,.cds--g90 .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}.cds--g100 .c4p--user-avatar--order-3-green,.cds--g90 .c4p--user-avatar--order-3-green{background-color:#24a148}.cds--g100 .c4p--user-avatar--order-4-magenta,.cds--g90 .c4p--user-avatar--order-4-magenta{background-color:#ee5396}.cds--g100 .c4p--user-avatar--order-5-purple,.cds--g90 .c4p--user-avatar--order-5-purple{background-color:#a56eff}.cds--g100 .c4p--user-avatar--order-6-teal,.cds--g90 .c4p--user-avatar--order-6-teal{background-color:#009d9a}.cds--g100 .c4p--user-avatar--order-7-cyan,.cds--g90 .c4p--user-avatar--order-7-cyan{background-color:#82cfff}.cds--g100 .c4p--user-avatar--order-8-gray,.cds--g90 .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}.cds--g100 .c4p--user-avatar--order-9-green,.cds--g90 .c4p--user-avatar--order-9-green{background-color:#6fdc8c}.cds--g100 .c4p--user-avatar--order-10-magenta,.cds--g90 .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}.cds--g100 .c4p--user-avatar--order-11-purple,.cds--g90 .c4p--user-avatar--order-11-purple{background-color:#d4bbff}.cds--g100 .c4p--user-avatar--order-12-teal,.cds--g90 .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}.c4p--user-avatar--xl{block-size:4rem;font-size:var(--cds-heading-04-font-size,1.75rem);font-weight:var(--cds-heading-04-font-weight,400);inline-size:4rem;letter-spacing:var(--cds-heading-04-letter-spacing,0);line-height:var(--cds-heading-04-line-height,1.28572)}.c4p--user-avatar--lg{block-size:3rem;font-size:var(--cds-heading-03-font-size,1.25rem);font-weight:var(--cds-heading-03-font-weight,400);inline-size:3rem;letter-spacing:var(--cds-heading-03-letter-spacing,0);line-height:var(--cds-heading-03-line-height,1.4)}.c4p--user-avatar--md{block-size:2rem;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:2rem;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.c4p--user-avatar--sm{block-size:1.5rem;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);inline-size:1.5rem;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.c4p--user-avatar__photo{border-radius:100%;-o-object-fit:contain;object-fit:contain}.c4p--user-avatar__photo--xl{block-size:4rem;border-radius:100%;inline-size:4rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--lg{block-size:3rem;border-radius:100%;inline-size:3rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--md{block-size:2rem;border-radius:100%;inline-size:2rem;-o-object-fit:fill;object-fit:fill}.c4p--user-avatar__photo--sm{block-size:1.5rem;border-radius:100%;inline-size:1.5rem;-o-object-fit:fill;object-fit:fill}:host(c4p-user-avatar) .c4p--user-avatar--order-1-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-1-cyan{background-color:#0072c3}:host(c4p-user-avatar) .c4p--user-avatar--order-2-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-2-gray{background-color:#6f6f6f}:host(c4p-user-avatar) .c4p--user-avatar--order-3-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-3-green{background-color:#198038}:host(c4p-user-avatar) .c4p--user-avatar--order-4-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-4-magenta{background-color:#d02670}:host(c4p-user-avatar) .c4p--user-avatar--order-5-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-5-purple{background-color:#8a3ffc}:host(c4p-user-avatar) .c4p--user-avatar--order-6-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-6-teal{background-color:#007d79}:host(c4p-user-avatar) .c4p--user-avatar--order-7-cyan,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-7-cyan{background-color:#003a6d}:host(c4p-user-avatar) .c4p--user-avatar--order-8-gray,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-8-gray{background-color:#393939}:host(c4p-user-avatar) .c4p--user-avatar--order-9-green,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-9-green{background-color:#044317}:host(c4p-user-avatar) .c4p--user-avatar--order-10-magenta,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-10-magenta{background-color:#740937}:host(c4p-user-avatar) .c4p--user-avatar--order-11-purple,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-11-purple{background-color:#491d8b}:host(c4p-user-avatar) .c4p--user-avatar--order-12-teal,:host(c4p-user-avatar[theme=light]) .c4p--user-avatar--order-12-teal{background-color:#004144}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-1-cyan{background-color:#1192e8}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-2-gray{background-color:#8d8d8d}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-3-green{background-color:#24a148}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-4-magenta{background-color:#ee5396}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-5-purple{background-color:#a56eff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-6-teal{background-color:#009d9a}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-7-cyan{background-color:#82cfff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-8-gray{background-color:#c6c6c6}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-9-green{background-color:#6fdc8c}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-10-magenta{background-color:#ffafd2}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-11-purple{background-color:#d4bbff}:host(c4p-user-avatar[theme=dark]) .c4p--user-avatar--order-12-teal{background-color:#3ddbd9}"]);
+
+export { styles as default };
+//# sourceMappingURL=user-avatar.scss.js.map

package/es/components/user-avatar/user-avatar.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-avatar.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es/index.d.ts

@@ -8,3 +8,4 @@
  */
 export { default as CDSSidePanel } from './components/side-panel/side-panel';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet';
+export { default as CDSUseravatar } from './components/user-avatar/user-avatar';

package/es/index.js

@@ -7,4 +7,5 @@
 
 export { default as CDSSidePanel } from './components/side-panel/side-panel.js';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet.js';
+export { default as CDSUseravatar } from './components/user-avatar/user-avatar.js';
 //# sourceMappingURL=index.js.map

package/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/es/package.json.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var version = "0.8.0";
+var version = "0.9.0";
 var packageJson = {
 	version: version};
 

package/lib/components/user-avatar/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './user-avatar';

package/lib/components/user-avatar/user-avatar.d.ts

@@ -0,0 +1,374 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+import '@carbon/web-components/es/components/tooltip/index.js';
+declare const CDSUseravatar_base: {
+    new (...args: any[]): {
+        _handles: Set<import("@carbon/web-components/es/globals/internal/handle").default>;
+        connectedCallback(): void;
+        disconnectedCallback(): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        inert: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        attachInternals(): ElementInternals;
+        click(): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
+        removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
+        readonly attributes: NamedNodeMap;
+        readonly classList: DOMTokenList;
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        id: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        readonly part: DOMTokenList;
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
+        closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
+        getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, text: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
+        requestPointerLock(): void;
+        scroll(options?: ScrollToOptions | undefined): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions | undefined): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
+        scrollTo(options?: ScrollToOptions | undefined): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        textContent: string | null;
+        appendChild<T_1 extends Node>(node: T_1): T_1;
+        cloneNode(deep?: boolean | undefined): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions | undefined): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T_2 extends Node>(node: T_2, child: Node | null): T_2;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T_3 extends Node>(child: T_3): T_3;
+        replaceChild<T_4 extends Node>(node: Node, child: T_4): T_4;
+        readonly ATTRIBUTE_NODE: number;
+        readonly CDATA_SECTION_NODE: number;
+        readonly COMMENT_NODE: number;
+        readonly DOCUMENT_FRAGMENT_NODE: number;
+        readonly DOCUMENT_NODE: number;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: number;
+        readonly DOCUMENT_POSITION_CONTAINS: number;
+        readonly DOCUMENT_POSITION_DISCONNECTED: number;
+        readonly DOCUMENT_POSITION_FOLLOWING: number;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
+        readonly DOCUMENT_POSITION_PRECEDING: number;
+        readonly DOCUMENT_TYPE_NODE: number;
+        readonly ELEMENT_NODE: number;
+        readonly ENTITY_NODE: number;
+        readonly ENTITY_REFERENCE_NODE: number;
+        readonly NOTATION_NODE: number;
+        readonly PROCESSING_INSTRUCTION_NODE: number;
+        readonly TEXT_NODE: number;
+        dispatchEvent(event: Event): boolean;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColIndexText: string | null;
+        ariaColSpan: string | null;
+        ariaCurrent: string | null;
+        ariaDisabled: string | null;
+        ariaExpanded: string | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaInvalid: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowIndexText: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
+        role: string | null;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
+        after(...nodes: (string | Node)[]): void;
+        before(...nodes: (string | Node)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (string | Node)[]): void;
+        innerHTML: string;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (string | Node)[]): void;
+        prepend(...nodes: (string | Node)[]): void;
+        querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
+        querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
+        querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
+        querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
+        querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
+        querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
+        replaceChildren(...nodes: (string | Node)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
+        readonly style: CSSStyleDeclaration;
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string | undefined;
+        tabIndex: number;
+        blur(): void;
+        focus(options?: FocusOptions | undefined): void;
+    };
+    _hostListeners: {
+        [listenerName: string]: {
+            [type: string]: {
+                options?: boolean | AddEventListenerOptions | undefined;
+            };
+        };
+    };
+} & typeof LitElement;
+declare class CDSUseravatar extends CDSUseravatar_base {
+    /**
+     * Specify the text of the tooltip.
+     * Can be string
+     */
+    tooltipText: any;
+    /**
+     * Specify the alignment of the tooltip.
+     */
+    tooltipAlignment: string;
+    /**
+     * When passing the name prop, either send the initials to be used or the user's full name. The first two capital letters of the user's name will be used as the name.
+     */
+    name: any;
+    /**
+     * Provide a custom icon to use if you need to use an icon other than the default one
+     */
+    renderIcon: any;
+    /**
+     * Set the size of the avatar circle
+     */
+    size: any;
+    /**
+     * When passing the image prop, supply a full path to the image to be displayed.
+     */
+    image: any;
+    /**
+     * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+     */
+    imageDescription: any;
+    /**
+     * Provide the background color need to be set for UserAvatar.
+     */
+    backgroundColor: string;
+    /**
+     * Set theme in which the component will be rendered.
+     */
+    theme: any;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSUseravatar;

package/lib/index.d.ts

@@ -8,3 +8,4 @@
  */
 export { default as CDSSidePanel } from './components/side-panel/side-panel';
 export { default as CDSTearsheet } from './components/tearsheet/tearsheet';
+export { default as CDSUseravatar } from './components/user-avatar/user-avatar';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products-web-components",
   "description": "Carbon for IBM Products Web Components",
-  "version": "0.9.0-rc.0",
+  "version": "0.10.0-rc.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -49,14 +49,14 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@carbon/ibm-products-styles": "^2.56.0-rc.0",
-    "@carbon/styles": "1.74.0",
-    "@carbon/web-components": "2.22.0",
+    "@carbon/ibm-products-styles": "^2.57.0-rc.0",
+    "@carbon/styles": "1.75.0",
+    "@carbon/web-components": "2.23.0",
     "lit": "^3.1.0"
   },
   "devDependencies": {
     "@carbon/icon-helpers": "^10.54.0",
-    "@carbon/icons": "^11.54.0",
+    "@carbon/icons": "^11.55.0",
     "@carbon/motion": "^11.24.0",
     "@mordech/vite-lit-loader": "^0.35.0",
     "@rollup/plugin-alias": "^5.1.1",
@@ -96,5 +96,5 @@
     "vitest": "^3.0.1",
     "web-component-analyzer": "2.0.0"
   },
-  "gitHead": "c6483ba5c87a8c7b18a79188205dd425f9a406cb"
+  "gitHead": "42105e25737b74016cd80bcf1f76aeee6ee96cdf"
 }

package/scss/components/user-avatar/story-styles.scss

@@ -0,0 +1,10 @@
+/*
+* Copyright IBM Corp. 2025, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$story-prefix: 'user-avatar-stories__';

package/scss/components/user-avatar/user-avatar.scss

@@ -0,0 +1,74 @@
+/*
+* Copyright IBM Corp. 2025, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+$css--plex: true !default;
+
+/* Other Carbon settings. */
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/utilities';
+@use 'sass:map';
+
+@use '@carbon/ibm-products-styles/scss/components/UserAvatar/index' as *;
+
+$prefix: 'c4p';
+$carbon-prefix: 'cds';
+
+$block-class: #{$prefix}--user-avatar;
+
+:host(#{$prefix}-user-avatar) {
+  @extend .#{$block-class};
+  @extend .#{$block-class}__tooltip;
+}
+@mixin setBgColor($color) {
+  // stylelint-disable-next-line carbon/theme-use
+  background-color: $color;
+}
+
+//this mixin allows you to set background color based on the lighter themes such as g10 and white
+@mixin setLightBg($order, $color) {
+  :host(#{$prefix}-user-avatar) .#{$block-class}--#{$order},
+  :host(#{$prefix}-user-avatar[theme='light']) .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
+}
+@mixin setDarkBg($order, $color) {
+  :host(#{$prefix}-user-avatar[theme='dark']) .#{$block-class}--#{$order} {
+    @include setBgColor($color);
+  }
+}
+@include setLightBg(order-1-cyan, $cyan-60);
+@include setLightBg(order-2-gray, $gray-60);
+@include setLightBg(order-3-green, $green-60);
+@include setLightBg(order-4-magenta, $magenta-60);
+@include setLightBg(order-5-purple, $purple-60);
+@include setLightBg(order-6-teal, $teal-60);
+@include setLightBg(order-7-cyan, $cyan-80);
+@include setLightBg(order-8-gray, $gray-80);
+@include setLightBg(order-9-green, $green-80);
+@include setLightBg(order-10-magenta, $magenta-80);
+@include setLightBg(order-11-purple, $purple-80);
+@include setLightBg(order-12-teal, $teal-80);
+@include setDarkBg(order-1-cyan, $cyan-50);
+@include setDarkBg(order-2-gray, $gray-50);
+@include setDarkBg(order-3-green, $green-50);
+@include setDarkBg(order-4-magenta, $magenta-50);
+@include setDarkBg(order-5-purple, $purple-50);
+@include setDarkBg(order-6-teal, $teal-50);
+@include setDarkBg(order-7-cyan, $cyan-30);
+@include setDarkBg(order-8-gray, $gray-30);
+@include setDarkBg(order-9-green, $green-30);
+@include setDarkBg(order-10-magenta, $magenta-30);
+@include setDarkBg(order-11-purple, $purple-30);
+@include setDarkBg(order-12-teal, $teal-30);