import "./icon-CTW4Gr4z.js"; import { CSSResultGroup, PropertyValues } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/avatar/avatar.d.ts /** * * * @summary Provides a visual representation of a user to enhance personalization and recognition. * @tag sigvelo-avatar * @documentation https://design-system.sigvelo.com/docs/components/avatar * @status stable * @since 1.0 * * @dependency sigvelo-icon * * @slot icon - A custom icon to use instead of the default. Will not be shown when an image or initials are present. * For best results, use a `` or an `` element. * * @cssproperty [--size=3rem] - The size of the avatar to draw. * * @example Default * ```html * * ``` * * **Note:** In the same way that images require `alt` text, you should add a label to every avatar. The label won't be displayed, but it will be announced by assistive devices. * * @example Images * Avatars are best used with images to create a more personalized experience. Set the `image` attribute to any valid image URL. If the image fails to load, it will show characters or the default image instead. * * ```html * * ``` * * @example Characters * When an image isn't available or fails to load, you can provide up to five characters to show instead. It's usually best to show no more than three, as the text shrinks to fit. * * ```html * * * * ``` * * @example Custom icons * When no image or letters are provided as a fallback, the default user icon will be displayed. You can show a custom icon by placing one into the `icon` slot. Works best with a `` or an `` element. * * ```html * * * * * * * * ``` * * @example Changing the size * You can change the size of an avatar by setting the `--size` custom property. The aspect ratio is 1:1, so the width and height will always be the same. * * ```html * * * * ``` * * @example Changing the color * To change the color of the avatar, use the `background-color` property and the `color` property. You can also apply gradients with the `background-image` property. * * ```html * * * * * ``` * * @example Changing the shape * You can change the shape of an avatar by adjusting the `border-radius` property. More complex shapes can be achieved by removing the default border radius and using `clip-path`. * * ```html * * * * ``` * * @example Grouping avatars * You can group avatars with some custom CSS. * * ```html *
* * * * *
* * * ``` * * @example Wrapping with links * You can wrap links around avatars to make the avatar clickable. * * ```html * * * * ``` */ declare class SigveloAvatar extends SigveloElement { static styles: CSSResultGroup; hasImageLoaded: boolean; /** * An accessible label for the avatar. This won't be visible, but it will be read to assistive devices so you should * always include one. */ label?: string; /** * A string of characters to display in the avatar when an image isn't available or fails to load. Up to five * characters are supported. */ characters?: string; /** The URL of an image to display in the avatar. Non-square images will be clipped to fit. */ image?: string; firstUpdated(): void; updated(changedProperties: PropertyValues): void; render(): import("lit-html").TemplateResult<1>; } declare global { interface HTMLElementTagNameMap { "sigvelo-avatar": SigveloAvatar; } } //#endregion export { SigveloAvatar as t };