dap-design-system 0.48.0 → 0.50.0

package/dist/common/const.d.ts

@@ -0,0 +1 @@
+export declare const anchorClass = "dds-anchor";

package/dist/common/debounce.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Creates a debounced function that delays invoking func until after wait milliseconds
+ * have elapsed since the last time the debounced function was invoked.
+ *
+ * @param func - The function to debounce
+ * @param wait - The number of milliseconds to delay (default: 300)
+ * @returns A debounced version of the function
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): (...args: Parameters<T>) => void;
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param str - The string to convert
+ * @returns The kebab-cased string
+ */
+export declare function kebabCase(str: string): string;

package/dist/common/decorators.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export default function Debounce(wait?: number): (_proto: any, _methodName: any, descriptor: PropertyDescriptor) => void;
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/common/errors.d.ts

@@ -0,0 +1,11 @@
+export declare class HttpError extends Error {
+    response: any;
+    status: number;
+    constructor(message: string, response: any, status: number);
+}
+export declare class FileError extends Error {
+    file: File;
+    type: string;
+    meta?: Record<string, any>;
+    constructor(message: string, file: File, type: string, meta?: Record<string, any>);
+}

package/dist/common/slot.d.ts

@@ -0,0 +1,2 @@
+import { ReactiveControllerHost } from 'lit';
+export declare const hasNamedSlot: (host: ReactiveControllerHost & Element, name: string) => boolean;

package/dist/common/stories.consts.d.ts

@@ -0,0 +1,28 @@
+import { CommonSize, Size } from './types';
+export type SbBaseFormType = {
+    size: {};
+    label: {};
+    description: {};
+    tooltip: {};
+    feedback?: {};
+    feedbackType: {};
+    useCustomFeedbackIcon: {};
+    disabled: {};
+    required: {};
+};
+export type SbCommonFormType = SbBaseFormType & {
+    placeholder: {};
+    value: {};
+    readonly: {};
+    status: {};
+};
+export declare const storybookSizes: Size[];
+export declare const commonSizes: Size[];
+export declare const storybookBaseFormArgs: SbBaseFormType;
+export declare const storybookCommonFormArgs: SbCommonFormType;
+export declare const storybookBaseArgTypes: SbBaseFormType;
+export declare const storybookCommonArgTypes: SbCommonFormType;
+export declare function storybookBaseProps(args: any): string;
+export declare function storybookCommonProps(args: any): string;
+export declare const getDefaultStorybookSize: () => Size;
+export declare const customFeedbackIcon: (size?: CommonSize) => string;

package/dist/common/types.d.ts

@@ -0,0 +1,81 @@
+import { ButtonVariant } from '../components/button/button.component';
+import { default as DapDSFileInputListItem, FileListElement } from '../components/file-input/file-input-list-item.component';
+export type Common<T> = Pick<T, keyof T>;
+export type Size = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
+export type CommonSize = Extract<Size, 'sm' | 'lg'>;
+export type CommonFormElementSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+export type Layout = 'horizontal' | 'vertical';
+export type ElementSpacing = 'top' | 'bottom' | 'both' | 'none';
+export type InputStatus = 'success' | 'error';
+export type InputTypes = 'text' | 'number' | 'button' | 'color' | 'email' | 'hidden' | 'reset' | 'submit' | 'url' | 'password' | 'file' | 'time';
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'center';
+export type LabelPlacement = Extract<Placement, 'left' | 'right'>;
+export type DescriptionPlacement = Extract<Placement, 'top' | 'bottom'>;
+export type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong';
+export type Alignment = 'vertical' | 'horizontal';
+export type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>;
+export type ButtonShape = 'button' | 'circle';
+export type CSSFlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';
+export type Spacing = 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 | 2000 | 2400 | 3000 | 4000 | 5000 | 6000;
+export type PopupPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type PopupTrigger = 'click' | 'hover' | 'focus' | 'manual' | 'hover focus';
+export type TooltipMode = 'tooltip' | 'toggle';
+export type LinkTarget = '_blank' | '_self' | '_parent' | '_top';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type FloatingStrategy = 'absolute' | 'fixed';
+export type SnackbarPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center';
+export type AlertType = 'default' | 'information' | 'successful' | 'error';
+export type ActionType = {
+    href?: string;
+    target?: LinkTarget;
+    rel?: string;
+    text?: string;
+    variant?: ButtonVariant;
+    func?: () => void;
+};
+export type MessageOptionsType = {
+    duration?: number;
+    alertType?: AlertType;
+    actions?: ActionType[];
+    closeButton?: string;
+    customStyle?: Record<string, string>;
+};
+export type SnackbarMessage = {
+    id: string;
+    message: string;
+    options?: MessageOptionsType;
+};
+export type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
+export type FileType = 'image' | 'video' | 'audio' | 'document' | 'unknown' | 'pdf';
+export type FileItemTemplate = {
+    component: DapDSFileInputListItem;
+    file: File;
+    fileObjectUrl: string;
+    href: string;
+    target: string;
+    rel: string;
+    download: string;
+    showFileLink: string;
+    showFileSize: string;
+    showDeleteButton: string;
+    formattedSize: string;
+    feedback: string;
+    feedbackType: string;
+    loading: boolean;
+    showThumbnail: string;
+    fileType: string;
+    fileLinkLabel?: string;
+    thumbnailUrl?: string | null;
+    thumbnailSize?: string;
+    handleFileClick: (event: Event) => void;
+    handleDelete: (file: FileListElement | File) => void;
+};
+export interface TimeSelection {
+    hour: number;
+    minute: number;
+    second?: number;
+}
+export interface TimePreset {
+    label: string;
+    value: string;
+}

package/dist/common/utils.d.ts

@@ -0,0 +1,63 @@
+export declare const isReducedMotion: boolean;
+export declare function isMobileView(): boolean;
+export declare function setFromParentSize(element: HTMLElement): void;
+export declare function numberRange(start: number, end: number): number[];
+export declare const JSONAttributeParser: (value: string | null) => {};
+/**
+ * Normalizes a string value that might be null, undefined, or the string "null"/"undefined".
+ * This is useful for handling values from React/Next.js object spreads where null props
+ * can be serialized as the string "null".
+ *
+ * @param value - The value to normalize
+ * @returns An empty string if the value is null, undefined, or the string "null"/"undefined", otherwise the value
+ *
+ * @example
+ * ```typescript
+ * protected updated(changedProperties: Map<PropertyKey, unknown>): void {
+ *   super.updated(changedProperties)
+ *   if (changedProperties.has('title')) {
+ *     this.title = normalizeStringProperty(this.title)
+ *   }
+ * }
+ * ```
+ */
+export declare function normalizeStringProperty(value: string | null | undefined): string;
+/**
+ * Lit property converter that handles null/undefined values from React/Next.js object spreads.
+ *
+ * When React serializes null props (e.g., from object spreads like {...props} where props.title = null),
+ * it can become the string "null" in HTML attributes. This converter normalizes these cases.
+ *
+ * @example
+ * ```typescript
+ * @property({
+ *   converter: stringPropertyConverter
+ * })
+ * title: string
+ * ```
+ *
+ * This prevents the string "null" from appearing in the rendered output when:
+ * - Props come from object spreads with null values
+ * - React/Next.js serializes null as the string "null"
+ * - Properties are set directly (bypassing attribute conversion)
+ *
+ * Note: For direct property assignments (e.g., `element.title = null`), also use
+ * `normalizeStringProperty` in the `updated` lifecycle method.
+ */
+export declare const stringPropertyConverter: {
+    fromAttribute: (value: string | null) => string;
+    toAttribute: (value: string | null | undefined) => string | null;
+};
+export declare function getValidityStateObject(state: Partial<ValidityState>): {
+    badInput: boolean;
+    customError: boolean;
+    patternMismatch: boolean;
+    rangeOverflow: boolean;
+    rangeUnderflow: boolean;
+    stepMismatch: boolean;
+    tooLong: boolean;
+    tooShort: boolean;
+    typeMismatch: boolean;
+    valid: boolean;
+    valueMissing: boolean;
+};

package/dist/components/accordion/accordion-base-element.d.ts

@@ -0,0 +1,82 @@
+import { PropertyValueMap, TemplateResult } from 'lit';
+import { CommonSize, HeadingLevel, LabelPlacement } from '../../dap-design-system';
+import { DdsElement } from '../../internal/dds-hu-element';
+export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
+export interface AccordionEventDetail {
+    open: boolean;
+    item: AccordionBaseElement;
+}
+export type AccordionOpenedEvent = CustomEvent<AccordionEventDetail>;
+export type AccordionClosedEvent = CustomEvent<AccordionEventDetail>;
+export declare class AccordionBaseElement extends DdsElement {
+    static readonly styles: import('lit').CSSResult;
+    private static nextId;
+    private readonly accordionId;
+    private readonly buttonId;
+    private readonly contentId;
+    private _headingLevel;
+    private _variant;
+    /** Query for the accordion button element */
+    protected button?: HTMLButtonElement;
+    /** Query for the accordion content element */
+    protected content?: HTMLDivElement;
+    /** The size of the accordion
+     * @type { 'sm' | 'lg' }
+     */
+    size: CommonSize;
+    /** The heading level of the accordion
+     * @type { 1 | 2 | 3 | 4 | 5 | 6 }
+     */
+    get headingLevel(): HeadingLevel;
+    set headingLevel(value: HeadingLevel);
+    /** Whether the accordion is opened */
+    opened: boolean;
+    /** Whether the accordion is disabled */
+    disabled: boolean;
+    /** Whether the accordion is in loading state */
+    loading: boolean;
+    /** The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided */
+    heading?: string;
+    /** The loading aria label of the accordion */
+    loadingAriaLabel?: string;
+    /** The location of the icon
+     * @type { 'left' | 'right' }
+     */
+    iconLocation: LabelPlacement;
+    /** The variant of the accordion
+     * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
+     */
+    get variant(): AccordionVariant;
+    set variant(value: AccordionVariant);
+    /** Whether this is the last item in an accordion group */
+    lastItem: boolean;
+    /** ID of element that describes the accordion */
+    ariaDescribedBy?: string;
+    constructor();
+    /**
+     * Renders the heading content. Override in subclasses to customize heading rendering.
+     * @returns Template result for heading content
+     */
+    protected headingRender(): TemplateResult;
+    /**
+     * Renders additional content. Override in subclasses to add custom content.
+     * @returns Template result for additional content
+     */
+    protected contentRender(): TemplateResult;
+    validateProperties(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private onChange;
+    private toggle;
+    private handleKeyDown;
+    private handleClick;
+    private get accordionClasses();
+    private renderIconOrSpinner;
+    private renderButtons;
+    private renderContent;
+    private renderHeading;
+    /**
+     * Renders the complete accordion component. Override in subclasses to customize the entire accordion structure.
+     * @returns Template result for the complete accordion
+     */
+    renderAccordion(): TemplateResult;
+}

package/dist/components/accordion/accordion.component.d.ts

@@ -0,0 +1,58 @@
+import { AccordionBaseElement } from './accordion-base-element';
+/**
+ * `dap-ds-accordion` is a custom accordion component.
+ * @element dap-ds-accordion
+ * @summary An accordion is a vertically stacked list of interactive items that can be expanded or collapsed to reveal or hide content.
+ * @title - Accordion
+ *
+ * @property { 'sm' | 'lg' } size - The size of the accordion. Default is `sm`.
+ * @property {string} heading - The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided
+ * @property { 1 | 2 | 3 | 4 | 5 | 6 } headingLevel - The heading level of the accordion. Default is `4`.
+ * @property {boolean} opened - Whether the accordion is opened. Default is `false`.
+ * @property { 'left' | 'right' } iconLocation - The location of the icon. Default is `right`.
+ * @property { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' } variant - The variant of the accordion.
+ * @property {boolean} lastItem - Whether the accordion is the last item.
+ * @property {boolean} disabled - Whether the accordion is disabled.
+ * @property {boolean} loading - Whether the accordion is in loading state.
+ *
+ * @event {{ open: boolean, item: AccordionBaseElement }} dds-opened - Event fired when the accordion is opened.
+ * @event {{ open: boolean, item: AccordionBaseElement }} dds-closed - Event fired when the accordion is closed.
+ *
+ * @slot default - The content of the accordion.
+ * @slot heading - The heading of the accordion.
+ * @slot icon-opened - The icon when the accordion is opened.
+ * @slot icon-closed - The icon when the accordion is closed.
+ *
+ * @csspart base - The main accordion container.
+ * @csspart heading - The heading of the accordion.
+ * @csspart button - The button of the accordion.
+ * @csspart content - The content of the accordion.
+ * @csspart content-container - The container of the accordion content.
+ * @csspart icon-wrapper - The icon wrapper of the accordion.
+ * @csspart open-icon - The icon when the accordion is opened.
+ * @csspart open-icon-base - The base of the icon when the accordion is opened.
+ * @csspart close-icon - The icon when the accordion is closed.
+ * @csspart close-icon-base - The base of the icon when the accordion is closed.
+ *
+ * @cssproperty --dds-accordion-border-width - The width of the accordion border (default: var(--dds-border-width-base))
+ * @cssproperty --dds-accordion-border-style - The style of the accordion border (default: solid)
+ * @cssproperty --dds-accordion-border-radius - The border radius of the accordion (default: var(--dds-radius-base))
+ * @cssproperty --dds-accordion-border-color - The color of the accordion border (default: var(--dds-border-neutral-divider))
+ * @cssproperty --dds-accordion-background-color - The background color of the accordion (default: var(--dds-background-neutral-subtle))
+ * @cssproperty --dds-accordion-text-color - The text color of the accordion (default: var(--dds-text-neutral-strong))
+ * @cssproperty --dds-accordion-hover-background - The background color when hovering over the accordion (default: var(--dds-background-neutral-base))
+ * @cssproperty --dds-accordion-active-background - The background color when the accordion is active (default: var(--dds-background-neutral-medium))
+ * @cssproperty --dds-accordion-icon-background - The background color of the accordion icon (default: var(--dds-transparent-black-subtle))
+ * @cssproperty --dds-accordion-icon-color - The color of the accordion icon (default: var(--dds-icon-neutral-base))
+ * @cssproperty --dds-accordion-icon-hover-background - The background color of the accordion icon when hovered (default: var(--dds-transparent-black-base))
+ * @cssproperty --dds-accordion-icon-active-background - The background color of the accordion icon when active (default: var(--dds-transparent-black-strong))
+ * @cssproperty --dds-accordion-icon-hover-color - The color of the accordion icon when hovered (default: var(--dds-icon-neutral-strong))
+ * @cssproperty --dds-accordion-icon-active-color - The color of the accordion icon when active (default: var(--dds-icon-neutral-strong))
+ * @cssproperty --dds-accordion-content-color - The color of the accordion content (default: var(--dds-text-text-neutral))
+ * @cssproperty --dds-accordion-transition-duration - The duration of the accordion transitions (default: var(--dds-transition-fast))
+ * @cssproperty --dds-accordion-transition-timing - The timing function of the accordion transitions (default: var(--dds-easing-ease-in-out))
+ * @cssproperty --dds-accordion-divider-color - The color of the divider between accordion items (default: var(--dds-border-neutral-divider))
+ */
+export default class DapDSAccordion extends AccordionBaseElement {
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSAccordion } from './accordion.component';
+export * from './accordion.component';
+export default DapDSAccordion;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-accordion': DapDSAccordion;
+    }
+}

package/dist/components/accordion-group/accordion-group.component.d.ts

@@ -0,0 +1,39 @@
+import { PropertyValueMap } from 'lit';
+import { DdsElement } from '../../internal/dds-hu-element';
+import { AccordionVariant } from '../accordion/accordion-base-element';
+/**
+ * `dap-ds-accordion-group` is a custom accordion group component.
+ * @element dap-ds-accordion-group
+ * @summary An accordion group is a collection of accordion components.
+ * @title - Accordion group
+ * @group accordion
+ *
+ * @slot - The content of the accordion group.
+ *
+ * @csspart base - The main accordion group container.
+ *
+ * @cssproperty --dds-accordion-group-spacing - Controls the gap between accordion items (default: var(--dds-spacing-300))
+ * @cssproperty --dds-accordion-group-border-color - Controls the border color (default: var(--dds-border-neutral-subtle))
+ * @cssproperty --dds-accordion-group-border-width - Controls the border width (default: var(--dds-border-width-base))
+ * @cssproperty --dds-accordion-group-border-radius - Controls the border radius (default: var(--dds-radius-base))
+ * @cssproperty --dds-accordion-group-background - Controls the background color (default: transparent)
+ */
+export default class DapDSAccordionGroup extends DdsElement {
+    private readonly accordions;
+    /** Whether to close other accordions when one is opened. */
+    autoClose: string;
+    /** The variant of the accordion
+     * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
+     */
+    variant: AccordionVariant;
+    static readonly styles: import('lit').CSSResult;
+    private readonly boundOnAccordionChange;
+    private readonly boundOnSlotChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<DapDSAccordionGroup> | Map<PropertyKey, unknown>): void;
+    private onSlotChange;
+    private setupAccordions;
+    private onAccordionChange;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/accordion-group/accordion-group.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSAccordionGroup } from './accordion-group.component.js';
+export * from './accordion-group.component.js';
+export default DapDSAccordionGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-accordion-group': DapDSAccordionGroup;
+    }
+}

package/dist/components/anchor-heading/anchor-heading.component.d.ts

@@ -0,0 +1,31 @@
+import { DdsElement } from '../../internal/dds-hu-element';
+import { TypographyVariant } from '../typography/typography.component';
+export type HeadingVariant = Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
+/**
+ * `dap-ds-anchor-heading`
+ * @summary Anchor heading is a heading with an anchor link.
+ * @element dap-ds-anchor-heading
+ * @title - Anchor heading
+ *
+ * @attribute {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'} variant - The variant of the heading. Default is `h2`. Can be `h1`, `h2`, `h3`, `h4`, `h5`, or `h6`.
+ * @attribute {string} label - The label of the heading.
+ *
+ * @csspart base - The main anchor heading container.
+ * @csspart link - The link of the anchor heading. dap-ds-link element.
+ * @csspart link-base - The base of the link part.
+ * @csspart text - The text of the anchor heading.
+ *
+ * @cssproperty --dds-anchor-link-color - The color of the anchor link (default: var(--dds-color-primary))
+ * @cssproperty --dds-anchor-link-opacity - The opacity of the anchor link when not hovered (default: 0)
+ * @cssproperty --dds-anchor-link-hover-opacity - The opacity of the anchor link when hovered (default: 1)
+ * @cssproperty --dds-anchor-link-transition - The transition property for the anchor link opacity (default: opacity 0.2s ease-in-out)
+ */
+export default class DapDSAnchorHeading extends DdsElement {
+    variant: HeadingVariant;
+    label: string;
+    static readonly styles: import('lit').CSSResult[];
+    createRenderRoot(): this;
+    get elementId(): string;
+    get anchorTitle(): string;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/anchor-heading/anchor-heading.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSAnchorHeading } from './anchor-heading.component.js';
+export * from './anchor-heading.component.js';
+export default DapDSAnchorHeading;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-anchor-heading': DapDSAnchorHeading;
+    }
+}

package/dist/components/avatar/avatar.component.d.ts

@@ -0,0 +1,117 @@
+import { Size } from '../../dap-design-system';
+import { DdsElement } from '../../internal/dds-hu-element';
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+export type AvatarVariant = 'image' | 'initials' | 'icon';
+/**
+ * `dap-ds-avatar`
+ * @summary Avatar component can be used to display user profile images, initials, or icons.
+ * @element dap-ds-avatar
+ * @title - Avatar
+ *
+ * @slot icon - The icon to display when variant is 'icon'.
+ * @slot fallback - Custom fallback content when image fails to load.
+ *
+ * @event dds-click - Fired when the avatar is clicked (only when interactive).
+ * @event dds-load - Fired when the image loads successfully.
+ * @event dds-error - Fired when the image fails to load.
+ *
+ * @csspart base - The main avatar container.
+ * @csspart img - The avatar image.
+ * @csspart initials - The initials container.
+ * @csspart icon - The icon container.
+ * @csspart fallback - The fallback content container.
+ * @csspart loading - The loading indicator.
+ *
+ * @cssproperty --dds-avatar-border-radius - The border radius of the avatar (default: 50%)
+ * @cssproperty --dds-avatar-background-color - The background color of the avatar (default: var(--dds-neutral-200))
+ * @cssproperty --dds-avatar-border-width - The border width of the avatar (default: 0)
+ * @cssproperty --dds-avatar-border-color - The color of the avatar's border (default: transparent)
+ * @cssproperty --dds-avatar-border-style - The style of the avatar's border (default: solid)
+ * @cssproperty --dds-avatar-transition - The transition property for the avatar (default: all 0.2s ease-in-out)
+ * @cssproperty --dds-avatar-text-color - The text color for initials (default: var(--dds-text-neutral-strong))
+ * @cssproperty --dds-avatar-font-weight - The font weight for initials (default: var(--dds-font-weight-bold))
+ * @cssproperty --dds-avatar-lg-size - Size for large avatars (default: var(--dds-avatar-size-lg))
+ * @cssproperty --dds-avatar-md-size - Size for medium avatars (default: var(--dds-avatar-size-md))
+ * @cssproperty --dds-avatar-sm-size - Size for small avatars (default: var(--dds-avatar-size-sm))
+ * @cssproperty --dds-avatar-xs-size - Size for extra small avatars (default: var(--dds-avatar-size-xs))
+ * @cssproperty --dds-avatar-xxs-size - Size for extra extra small avatars (default: var(--dds-avatar-size-xxs))
+ * @cssproperty --dds-avatar-font-size-lg - Font size for large avatars (default: var(--dds-font-2xl))
+ * @cssproperty --dds-avatar-font-size-md - Font size for medium avatars (default: var(--dds-font-lg))
+ * @cssproperty --dds-avatar-font-size-sm - Font size for small avatars (default: var(--dds-font-base))
+ * @cssproperty --dds-avatar-font-size-xs - Font size for extra small avatars (default: var(--dds-font-sm))
+ * @cssproperty --dds-avatar-font-size-xxs - Font size for extra extra small avatars (default: var(--dds-font-xs))
+ * @cssproperty --dds-avatar-hover-transform - Transform applied on hover for interactive avatars (default: scale(1.05))
+ * @cssproperty --dds-avatar-active-transform - Transform applied when active for interactive avatars (default: scale(0.95))
+ * @cssproperty --dds-avatar-focus-ring - Focus ring style for interactive avatars (default: 0 0 0 2px var(--dds-focus-outer-ring))
+ * @cssproperty --dds-avatar-loading-background - Background color when loading (default: var(--dds-neutral-100))
+ * @cssproperty --dds-avatar-error-background - Background color when image fails to load (default: var(--dds-negative-100))
+ * @cssproperty --dds-avatar-error-color - Text color when image fails to load (default: var(--dds-negative-600))
+ */
+export default class DapDSAvatar extends DdsElement {
+    /** The size of the avatar
+     * @default md
+     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
+     * @example
+     * ```html
+     * <dap-ds-avatar size="xxs">
+     * <dap-ds-avatar size="xs">
+     * <dap-ds-avatar size="sm">
+     * <dap-ds-avatar size="md">
+     * <dap-ds-avatar size="lg">
+     * ```
+     */
+    size: Size;
+    /** The shape of the avatar
+     * @default circle
+     * @type { 'circle' | 'rounded' | 'square' }
+     * @example
+     * ```html
+     * <dap-ds-avatar shape="circle">
+     * <dap-ds-avatar shape="rounded">
+     * <dap-ds-avatar shape="square">
+     * ```
+     */
+    shape: AvatarShape;
+    /** The variant type of the avatar
+     * @default image
+     * @type { 'image' | 'initials' | 'icon' }
+     * @example
+     * ```html
+     * <dap-ds-avatar variant="image">
+     * <dap-ds-avatar variant="initials">
+     * <dap-ds-avatar variant="icon">
+     * ```
+     */
+    variant: AvatarVariant;
+    /** The source of the avatar image */
+    src: string;
+    /** The alt text of the avatar */
+    alt: string;
+    /** The initials to display when variant is 'initials' */
+    initials: string;
+    /** Accessible label for the avatar */
+    label: string;
+    /** Loading state indicator */
+    loading: boolean;
+    /** Whether the avatar is interactive (clickable) */
+    interactive: boolean;
+    /** The width of the avatar. This will override the size */
+    width: number;
+    /** The height of the avatar. This will override the size */
+    height: number;
+    private hasImageError;
+    private isImageLoading;
+    static readonly styles: import('lit').CSSResult;
+    private handleImageLoad;
+    private handleImageError;
+    private handleClick;
+    private generateInitials;
+    private mapSizeToSpinnerSize;
+    private renderImage;
+    private renderInitials;
+    private renderIcon;
+    private renderFallback;
+    private renderLoading;
+    private renderContent;
+    render(): import('lit-html').TemplateResult;
+}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,8 @@
+import { default as DapDSAvatar } from './avatar.component.js';
+export * from './avatar.component.js';
+export default DapDSAvatar;
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-avatar': DapDSAvatar;
+    }
+}