import { r as registerInstance, g as getElement, j as jsx, H as Host } from './index-C7YNCRgy.js';

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const avatarCss = () => `@layer base {   :host .dds-avatar {     display: inline-flex;     flex-shrink: 0;     block-size: var(--dds-avatar-size);     inline-size: var(--dds-avatar-size);   } }  @layer shapes {   :host([shape="circle"]) {     --dds-avatar-radius: var(--dds-radius-full);   }    :host([shape="square"]) {     --dds-avatar-radius: var(--dds-radius-s);   } }  @layer sizes {   :host([size="m"]) {     --dds-avatar-size: var(--dds-avatar-size-m);   } }  @layer reset, base, shapes, sizes; `;

const Avatar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get host() { return getElement(this); }
    // MARK: Props
    size = "m";
    shape = "circle";
    name = '';
    initials;
    // MARK: States
    // MARK: Events
    // MARK: Lifecycle
    getInitials() {
        let initials = '';
        if (this.initials) {
            initials = this.initials.toUpperCase().slice(0, 2);
        }
        else if (this.name.trim().length > 0) {
            initials = this.name
                .split(' ')
                .map((part) => part[0])
                .join('')
                .toUpperCase()
                .slice(0, 2);
        }
        return initials;
    }
    // MARK: Render
    render() {
        const { size, shape } = this;
        return (jsx(Host, { size: size, shape: shape, part: "root", children: jsx("div", { class: "dds-avatar", part: "avatar", children: this.getInitials() }, 'f2568da0435ef226012b8259fa3042b455a70495') }, '1e5dd2608f5487dd25a523e3ad4b66e4efe2b22b'));
    }
};
Avatar.style = resetCss() + avatarCss();

export { Avatar as dds_avatar };
