dap-design-system 0.36.7 → 0.36.8

package/dist/dds.d.ts

@@ -18,6 +18,9 @@ import { TemplateResult as TemplateResult_2 } from 'lit-html';
 
 declare class AccordionBaseElement extends DdsElement {
     static readonly styles: CSSResult;
+    private readonly accordionId;
+    private readonly buttonId;
+    private readonly contentId;
     /** The size of the accordion
      * @type { 'sm' | 'lg' }
      */
@@ -28,6 +31,10 @@ declare class AccordionBaseElement extends DdsElement {
     headingLevel: 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 location of the icon
      * @type { 'left' | 'right' }
      */
@@ -35,19 +42,29 @@ declare class AccordionBaseElement extends DdsElement {
     /** The variant of the accordion
      * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
      */
-    variant: string;
+    variant: AccordionVariant;
+    /** Whether this is the last item in an accordion group */
     lastItem: boolean;
+    /** ID of element that describes the accordion */
+    ariaDescribedBy?: string;
+    constructor();
     headingRender(): TemplateResult;
     contentRender(): TemplateResult;
     connectedCallback(): void;
+    validateProperties(): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private onChange;
     private toggle;
+    private handleKeyDown;
+    private handleClick;
     private renderButtons;
     private renderContent;
     private renderHeading;
     renderAccordion(): TemplateResult;
 }
 
+declare type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
+
 export declare type ActionType = {
     href?: string;
     target?: LinkTarget;
@@ -613,6 +630,12 @@ export declare class ArrowsExpandUpDownFill extends DdsElement {
     render(): TemplateResult_2;
 }
 
+declare type AvatarGroupLayout = 'stack' | 'grid';
+
+declare type AvatarShape = 'circle' | 'rounded' | 'square';
+
+declare type AvatarVariant = 'image' | 'initials' | 'icon';
+
 export declare type BackgroundShade = 'subtle' | 'base' | 'medium' | 'strong';
 
 export declare type BadgeType = 'neutral' | 'brand' | 'info' | 'positive' | 'warning' | 'negative';
@@ -806,6 +829,8 @@ export declare type CSSFlexDirection = 'column' | 'row' | 'column-reverse' | 'ro
  * @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.
@@ -873,10 +898,16 @@ export declare class DapDSAccordionGroup extends DdsElement {
     /** The variant of the accordion
      * @type { 'default' | 'collapsed' | 'clean' | 'clean-collapsed' }
      */
-    variant: string;
+    variant: AccordionVariant;
     static readonly styles: CSSResult;
-    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    onAccordionChange(event: CustomEvent): void;
+    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(): TemplateResult_2;
 }
 
@@ -911,46 +942,179 @@ export declare class DapDSAnchorHeading extends DdsElement {
 
 /**
  * `dap-ds-avatar`
- * @summary Avatar component can be used to display user profile images or icons, or illustrations.
+ * @summary Avatar component can be used to display user profile images, initials, or icons.
  * @element dap-ds-avatar
  * @title - Avatar
  *
- * @attribute {'lg' | 'md' | 'sm' | 'xs' | 'xxs'} size - The size of the avatar. Default is 'md'.
- * @attribute {string} src - The source of the avatar image.
- * @attribute {string} alt - The alt text of the avatar.
- * @attribute {number} width - The width of the avatar. This will override the size.
- * @attribute {number} height - The height of the avatar. This will override the size.
+ * @slot icon - The icon to display when variant is 'icon'.
+ * @slot fallback - Custom fallback content when image fails to load.
  *
- * @csspart base - The main avatar image container.
+ * @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 is the design system's rounded radius.
- * @cssproperty --dds-avatar-background-color - The background color of the avatar. Default is transparent.
+ * @cssproperty --dds-avatar-border-radius - The border radius of the avatar. Default varies by shape.
+ * @cssproperty --dds-avatar-background-color - The background color of the avatar. Default is neutral.
  * @cssproperty --dds-avatar-border-width - The width of the avatar's border. Default is 0.
  * @cssproperty --dds-avatar-border-color - The color of the avatar's border. Default is transparent.
  * @cssproperty --dds-avatar-border-style - The style of the avatar's border. Default is solid.
  * @cssproperty --dds-avatar-transition - The transition property for the avatar. Default is 'all 0.2s ease-in-out'.
+ * @cssproperty --dds-avatar-text-color - The color of initials text. Default is neutral strong.
+ * @cssproperty --dds-avatar-font-size - The font size for initials. Calculated based on size.
+ * @cssproperty --dds-avatar-font-weight - The font weight for initials. Default is semibold.
  *
- * @cssproperty --dds-avatar-size-lg - The size of the large avatar. Default is the design system's spacing-2000.
- * @cssproperty --dds-avatar-size-md - The size of the medium avatar. Default is the design system's spacing-1600.
- * @cssproperty --dds-avatar-size-sm - The size of the small avatar. Default is the design system's spacing-1200.
- * @cssproperty --dds-avatar-size-xs - The size of the extra small avatar. Default is the design system's spacing-800.
- * @cssproperty --dds-avatar-size-xxs - The size of the extra extra small avatar. Default is the design system's spacing-600.
+ * @cssproperty --dds-avatar-size-lg - The size of the large avatar. Default is 80px.
+ * @cssproperty --dds-avatar-size-md - The size of the medium avatar. Default is 64px.
+ * @cssproperty --dds-avatar-size-sm - The size of the small avatar. Default is 48px.
+ * @cssproperty --dds-avatar-size-xs - The size of the extra small avatar. Default is 32px.
+ * @cssproperty --dds-avatar-size-xxs - The size of the extra extra small avatar. Default is 24px.
  */
 export declare class DapDSAvatar extends DdsElement {
     /** The size of the avatar
-     * @type { 'lg' | 'md' | 'sm' | 'xs' | 'xxs' }
+     * @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 source of the avatar. */
+    /** 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. */
+    /** The alt text of the avatar */
     alt: string;
-    /** The width of the avatar. This will override the size. */
+    /** 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. */
+    /** The height of the avatar. This will override the size */
     height: number;
+    private hasImageError;
+    private isImageLoading;
     static readonly styles: CSSResult;
+    private handleImageLoad;
+    private handleImageError;
+    private handleClick;
+    private generateInitials;
+    private mapSizeToSpinnerSize;
+    private renderImage;
+    private renderInitials;
+    private renderIcon;
+    private renderFallback;
+    private renderLoading;
+    private renderContent;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-avatar-group`
+ * @summary Avatar group component displays multiple avatars in an organized layout with overflow management.
+ * @element dap-ds-avatar-group
+ * @title - Avatar Group
+ * @group avatar
+ *
+ * @slot - The avatars to display in the group.
+ *
+ * @event dds-overflow-click - Fired when the overflow indicator is clicked.
+ *
+ * @csspart base - The main container of the avatar group.
+ * @csspart avatars - The container for the visible avatars.
+ * @csspart overflow - The overflow indicator element.
+ *
+ * @cssproperty --dds-avatar-group-gap - Gap between avatars in grid layout. Default is 0.
+ * @cssproperty --dds-avatar-group-overlap - Overlap amount for stacked layout. Default is -8px.
+ * @cssproperty --dds-avatar-group-border-width - Border width for avatars. Default is 2px.
+ * @cssproperty --dds-avatar-group-border-color - Border color for avatars. Default is white.
+ * @cssproperty --dds-avatar-group-overflow-bg - Background color for overflow indicator.
+ * @cssproperty --dds-avatar-group-overflow-color - Text color for overflow indicator.
+ * @cssproperty --dds-avatar-group-overflow-border - Border for overflow indicator.
+ * @cssproperty --dds-avatar-group-size-lg - Size for large avatars. Default is 80px.
+ * @cssproperty --dds-avatar-group-size-md - Size for medium avatars. Default is 64px.
+ * @cssproperty --dds-avatar-group-size-sm - Size for small avatars. Default is 48px.
+ * @cssproperty --dds-avatar-group-size-xs - Size for extra small avatars. Default is 32px.
+ * @cssproperty --dds-avatar-group-size-xxs - Size for extra extra small avatars. Default is 24px.
+ */
+export declare class DapDSAvatarGroup extends DdsElement {
+    private avatars;
+    /** The size of avatars in the group
+     * @default md
+     * @type { 'xxs' | 'xs' | 'sm' | 'md' | 'lg' }
+     * @example
+     * ```html
+     * <dap-ds-avatar-group size="xxs">
+     * <dap-ds-avatar-group size="xs">
+     * <dap-ds-avatar-group size="sm">
+     * <dap-ds-avatar-group size="md">
+     * <dap-ds-avatar-group size="lg">
+     * ```
+     */
+    size: Size;
+    /** Layout type for the avatar group
+     * @default stack
+     * @type { 'stack' | 'grid' }
+     * @example
+     * ```html
+     * <dap-ds-avatar-group layout="stack">
+     * <dap-ds-avatar-group layout="grid">
+     * ```
+     */
+    layout: AvatarGroupLayout;
+    /** Maximum number of avatars to show before showing overflow */
+    max: number;
+    /** Whether to show the total count in overflow indicator */
+    showTotal: boolean;
+    /** Interactive overflow indicator */
+    interactiveOverflow: boolean;
+    /** Accessible label for the avatar group */
+    label: string;
+    /** Accessible label for the overflow indicator */
+    overflowLabel: string;
+    static readonly styles: CSSResult;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private handleOverflowClick;
+    private renderOverflowIndicator;
+    private styleSlottedAvatars;
     render(): TemplateResult_2;
 }
 
@@ -1014,10 +1178,14 @@ export declare class DapDSBadge extends DdsElement {
      */
     size: CommonSize;
     /** The icon of the badge, this is a name of a built in icon */
-    icon: string;
+    icon?: string;
     static readonly styles: CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    private updateIconSlot;
     private getIconSize;
+    private renderIcon;
+    private hasSlottedIcon;
     render(): TemplateResult_2;
 }
 
@@ -1186,15 +1354,41 @@ export declare class DapDSBreadcrumbItem extends DdsElement {
 }
 
 /**
- * `dap-ds-button` is a custom button component.
+ * `dap-ds-button` is a versatile button component for triggering actions and navigation.
  * @element dap-ds-button
- * @summary A button is a clickable element that can be used to trigger an action.
+ * @summary A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.
  * @title - Button
  *
- * @slot - The content of the button.
+ * @example Basic Usage
+ * ```html
+ * <dap-ds-button>Click me</dap-ds-button>
+ * <dap-ds-button variant="outline">Secondary action</dap-ds-button>
+ * <dap-ds-button href="/dashboard">Navigate</dap-ds-button>
+ * ```
+ *
+ * @example Form Integration
+ * ```html
+ * <form>
+ *   <dap-ds-button htmlType="submit">Submit Form</dap-ds-button>
+ *   <dap-ds-button htmlType="reset" variant="outline">Reset</dap-ds-button>
+ * </form>
+ * ```
+ *
+ * @example Accessibility
+ * ```html
+ * <!-- Icon-only buttons require aria-label -->
+ * <dap-ds-button aria-label="Close dialog" shape="circle">
+ *   <dap-ds-icon name="close-line"></dap-ds-icon>
+ * </dap-ds-button>
+ * ```
+ *
+ * @event dds-loading-timeout - Emitted when the loading timeout is reached
+ *
+ * @slot - The content of the button. Can contain text, icons, or other elements.
  *
  * @csspart base - The main button container.
  * @csspart high-contrast - The high contrast part of the button.
+ * @csspart content - The content wrapper inside the button.
  *
  * @cssproperty --dds-button-padding-x - Horizontal padding of the button (default: var(--dds-spacing-300))
  * @cssproperty --dds-button-padding-y - Vertical padding of the button (default: var(--dds-spacing-300))
@@ -1302,55 +1496,150 @@ export declare class DapDSButton extends GenericFormElement {
      * @ignore
      */
     readonly button: HTMLButtonElement | HTMLLinkElement;
-    /** The variant of the button
+    /** The visual style variant of the button
      * @type { 'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' }
+     * @default 'primary'
+     * @example
+     * ```html
+     * <dap-ds-button variant="primary">Primary action</dap-ds-button>
+     * <dap-ds-button variant="outline">Secondary action</dap-ds-button>
+     * <dap-ds-button variant="subtle">Tertiary action</dap-ds-button>
+     * ```
+     * @group Visual
      */
     variant: ButtonVariant;
-    /** The size of the button
+    /** The size of the button affecting padding and font size
      * @type { 'lg' | 'md' | 'sm' | 'xs' }
+     * @default 'md'
+     * @example
+     * ```html
+     * <dap-ds-button size="xs">Extra small</dap-ds-button>
+     * <dap-ds-button size="sm">Small</dap-ds-button>
+     * <dap-ds-button>Medium (default)</dap-ds-button>
+     * <dap-ds-button size="lg">Large</dap-ds-button>
+     * ```
+     * @group Visual
      */
     size: ButtonSize_2;
-    /** Whether the button is in loading state */
+    /** Whether the button is in loading state, showing a spinner and disabling interaction
+     * @default false
+     * @example
+     * ```html
+     * <dap-ds-button loading>Submitting...</dap-ds-button>
+     * ```
+     * @group State
+     */
     loading: boolean;
-    /** Whether the button is danger button */
+    /** Whether the button represents a destructive action (applies danger styling)
+     * @default false
+     * @example
+     * ```html
+     * <dap-ds-button danger>Delete Account</dap-ds-button>
+     * <dap-ds-button variant="outline" danger>Remove Item</dap-ds-button>
+     * ```
+     * @group State
+     */
     danger: boolean;
-    /** The shape of the button
+    /** The shape of the button - use 'circle' for icon-only buttons
      * @type { 'button' | 'circle' }
+     * @default 'button'
+     * @example
+     * ```html
+     * <dap-ds-button shape="circle" aria-label="Close">
+     *   <dap-ds-icon name="close-line"></dap-ds-icon>
+     * </dap-ds-button>
+     * ```
+     * @group Visual
      */
     shape: ButtonShape;
-    /** The html type of the button
+    /** The HTML type attribute for form interaction
      * @type { 'button' | 'submit' | 'reset' }
+     * @default 'button'
+     * @example
+     * ```html
+     * <form>
+     *   <dap-ds-button htmlType="submit">Submit</dap-ds-button>
+     *   <dap-ds-button htmlType="reset">Reset</dap-ds-button>
+     * </form>
+     * ```
+     * @group Form
      */
     htmlType: HtmlButtonType;
-    /** The name of the button */
-    name: string;
-    /** The Href of the button. If this present the button will be rendered as an anchor `<a></a>` element. */
-    href: string;
-    /** The target of the button
+    /** The URL to navigate to. When present, the button renders as an anchor element
+     * @example
+     * ```html
+     * <dap-ds-button href="/dashboard">Go to Dashboard</dap-ds-button>
+     * <dap-ds-button href="https://example.com" target="_blank">External Link</dap-ds-button>
+     * ```
+     * @group Navigation
+     */
+    href?: string;
+    /** The target attribute for link navigation
      * @type { '_blank' | '_self' | '_parent' | '_top' }
+     * @default '_self'
+     * @example
+     * ```html
+     * <dap-ds-button href="https://example.com" target="_blank">Open in new tab</dap-ds-button>
+     * ```
+     * @group Navigation
      */
     target: LinkTarget;
-    /**
-     * The rel of the button link. Default is `noreferrer noopener`.
+    /** The rel attribute for link security and behavior
+     * @default 'noreferrer noopener'
+     * @example
+     * ```html
+     * <dap-ds-button href="https://example.com" rel="noopener">Safe external link</dap-ds-button>
+     * ```
+     * @group Navigation
      */
-    rel: string;
-    /** The aria-controls of the button */
-    ariaControls: string;
-    /** The aria-haspopup of the button */
-    ariaHasPopup: string;
-    /** The aria-expanded of the button */
-    ariaExpanded: string;
-    /**
+    rel?: string;
+    /** The ID of the element controlled by this button
+     * @example
+     * ```html
+     * <dap-ds-button aria-controls="menu-1" aria-expanded="false">Menu</dap-ds-button>
+     * <div id="menu-1">Menu content</div>
+     * ```
+     * @group Accessibility
+     */
+    ariaControls?: string;
+    /** The ID of the element that describes the button
+     * @example
+     * ```html
+     * <dap-ds-button aria-describedby="help-text">Submit</dap-ds-button>
+     * <div id="help-text">This will submit your form data</div>
+     * ```
+     * @group Accessibility
+     */
+    ariaDescribedBy?: string;
+    /** Controls loading timeout in milliseconds
+     * @default 0
+     * @group State
+     */
+    loadingTimeout: number;
+    /** Enables high contrast theme toggle functionality (internal use)
+     * @default false
      * @ignore
      */
     hc: boolean;
     static readonly styles: CSSResult;
+    private loadingTimer?;
+    private getSecureRel;
+    private validateAriaExpanded;
+    private validateAriaPressed;
+    private validateProperties;
+    private isValidUrl;
     private handleClick;
+    private toggleHighContrast;
+    private startLoadingTimeout;
+    private clearLoadingTimeout;
     focus(options?: FocusOptions): void;
     /**
      * @ignore
      */
-    get focusElement(): HTMLButtonElement | HTMLLinkElement;
+    get focusElement(): HTMLLinkElement | HTMLButtonElement;
+    protected updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    disconnectedCallback(): void;
     render(): TemplateResult_2;
     private getLoadingIconSize;
     private _getLoadingSpinner;
@@ -2393,6 +2682,10 @@ export declare class DapDSDataTable<T> extends DdsElement {
     enableStripedRows: boolean;
     /** Number of rows in the table */
     rowCount?: number;
+    /** ID of element describing the table */
+    ariaDescribedBy?: string;
+    /** Caption text for the table */
+    caption?: string;
     /** Whether to show the pager component */
     pager: boolean;
     /** Show the page size options. */
@@ -2438,6 +2731,8 @@ export declare class DapDSDataTable<T> extends DdsElement {
     /** @ignore */
     private _pagination;
     /** @ignore */
+    private readonly _statusMessage;
+    /** @ignore */
     debug: boolean;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
@@ -2447,6 +2742,9 @@ export declare class DapDSDataTable<T> extends DdsElement {
     private getHeaderCellStyle;
     private getSortIcon;
     private getSortTitle;
+    private getAriaSortValue;
+    private handleRowClick;
+    private handleRowKeydown;
     private readonly renderHeader;
     private readonly renderBody;
     protected render(): TemplateResult_2;
@@ -2787,9 +3085,9 @@ export declare class DapDSFileInput extends GenericFormElement {
     get files(): File[];
     private _files;
     private _uploadProgress;
-    private _uploadingFiles;
-    private _activeUploads;
-    private _uploadedFiles;
+    private readonly _uploadingFiles;
+    private readonly _activeUploads;
+    private readonly _uploadedFiles;
     private _isDragOver;
     private _showRemoveDialog;
     private _fileToRemove;
@@ -3582,6 +3880,8 @@ export declare class DapDSModal extends ModalBaseElement {
  * @cssproperty --dds-notification-badge-positive-bg - Background color for positive type
  * @cssproperty --dds-notification-badge-warning-bg - Background color for warning type
  * @cssproperty --dds-notification-badge-negative-bg - Background color for negative type
+ * @cssproperty --dds-notification-badge-circular-offset-x - Horizontal offset for circular positioning
+ * @cssproperty --dds-notification-badge-circular-offset-y - Vertical offset for circular positioning
  */
 export declare class DapDSNotificationBadge extends DdsElement {
     /** The content of the badge, it can be a number or a string. Content tried to be parsed as a number, if it's not a number, it will be displayed as a string. */
@@ -3604,7 +3904,19 @@ export declare class DapDSNotificationBadge extends DdsElement {
      * @type { 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' }
      */
     placement: PopupPlacement;
+    /** Whether to automatically detect circular elements and adjust positioning accordingly */
+    circularAuto: boolean;
+    /** Override circular positioning detection - forces circular positioning calculation */
+    forceCircular: boolean;
+    private isCircularElement;
+    private circularOffset;
     static readonly styles: CSSResult;
+    connectedCallback(): void;
+    private detectCircularElement;
+    private isElementCircular;
+    private calculateCircularOffset;
+    private getAngleForPlacement;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     private parseBadgeContent;
     private handleMax;
     private renderContent;
@@ -4700,18 +5012,6 @@ export declare class DapDSSkipLink extends DdsElement {
     render(): TemplateResult_2;
 }
 
-/**
- * `dap-ds-snackbar`
- * @summary The Snackbar is a container of sliding messages.
- * @element dap-ds-snackbar
- * @title - Snackbar
- *
- * @csspart host - The host element
- *
- * @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))
- * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)
- * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)
- */
 export declare class DapDSSnackbar extends DdsElement {
     /** The maximum number of snackbar messages at a given time. */
     maxItems: number;
@@ -4721,18 +5021,63 @@ export declare class DapDSSnackbar extends DdsElement {
     position: SnackbarPosition;
     /** The duration of the snackbar message in milliseconds */
     duration: number;
+    /** Whether the snackbar should announce new messages to screen readers */
+    announceMessages: boolean;
     private messages;
     private idCounter;
-    private _timeoutId;
+    private timeouts;
     static readonly styles: CSSResult;
+    /**
+     * Static method to show a snackbar message anywhere in the application
+     * @param message - The message to display
+     * @param options - Optional configuration for the message
+     */
+    static show(message: string, options?: MessageOptionsType): void;
+    /**
+     * Static method to show a success message
+     * @param message - The message to display
+     * @param options - Optional configuration (alertType will be overridden to 'successful')
+     */
+    static success(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
+    /**
+     * Static method to show an error message
+     * @param message - The message to display
+     * @param options - Optional configuration (alertType will be overridden to 'error')
+     */
+    static error(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
+    /**
+     * Static method to show an information message
+     * @param message - The message to display
+     * @param options - Optional configuration (alertType will be overridden to 'information')
+     */
+    static info(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
+    /**
+     * Static method to show a default message
+     * @param message - The message to display
+     * @param options - Optional configuration (alertType will be overridden to 'default')
+     */
+    static default(message: string, options?: Omit<MessageOptionsType, 'alertType'>): void;
+    /**
+     * Static method to close all snackbar messages globally
+     */
+    static closeAll(): void;
+    /**
+     * Close all currently displayed messages
+     */
+    closeAll(): void;
     private generateId;
     addMessage(message: string, options?: MessageOptionsType): void;
     private sliceMessage;
     private removeMessage;
     private elapseMessages;
-    private clearElapseTimeout;
+    private clearTimeout;
+    private clearAllTimeouts;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private handleShowSnackbarEvent;
+    private handleCloseAllEvent;
+    private handleKeyDown;
+    private announceToScreenReader;
     private _closeMessage;
     render(): TemplateResult_2;
 }
@@ -5358,6 +5703,7 @@ export declare class DapDSToggleButton extends GenericFormElement {
     shape: ButtonShape;
     sizeChildren: string;
     static readonly styles: CSSResult;
+    get focusElement(): HTMLButtonElement;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     private handleClick;
     render(): TemplateResult_2;
@@ -5595,6 +5941,8 @@ declare class DdsElement extends LitElement {
     emit<V = Record<PropertyKey, any>>(name: string, value?: V, options?: EventOptions): CustomEvent<V>;
 }
 
+export declare type DdsErrorEvent = CustomEvent<Record<PropertyKey, never>>;
+
 export declare type DdsFileChangeEvent = CustomEvent<{
     files: File[];
 }>;
@@ -5644,6 +5992,12 @@ export declare type DdsListChangedEvent = CustomEvent<{
     elements: any[];
 }>;
 
+export declare type DdsLoadEvent = CustomEvent<Record<PropertyKey, never>>;
+
+export declare type DdsLoadingTimeoutEvent = CustomEvent<{
+    timeout: number;
+}>;
+
 export declare type DdsNotAllowedEvent = CustomEvent<Record<PropertyKey, never>>;
 
 export declare type DdsOkEvent = CustomEvent<Record<PropertyKey, never>>;
@@ -5657,6 +6011,11 @@ export declare type DdsOptionChangeEvent = CustomEvent<{
     selected?: boolean;
 }>;
 
+export declare type DdsOverflowClickEvent = CustomEvent<{
+    /** The original click event that triggered this overflow click */
+    originalEvent: Event;
+}>;
+
 export declare type DdsPaginationChangeEvent = CustomEvent<{
     pagination: PaginationState;
 }>;
@@ -5776,6 +6135,64 @@ export declare class DocumentFileCopyLine extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-icon-folder-line`
+ * @summary An icon
+ * @element dap-ds-icon-folder-line
+ * @title - DocumentFolderLine
+ * @group icon
+ * @icontype document
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class DocumentFolderLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-icon-folder-open-line`
+ * @summary An icon
+ * @element dap-ds-icon-folder-open-line
+ * @title - DocumentFolderOpenLine
+ * @group icon
+ * @icontype document
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class DocumentFolderOpenLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
 export declare type ElementSpacing = 'top' | 'bottom' | 'both' | 'none';
 
 declare interface EventOptions {
@@ -6531,6 +6948,64 @@ export declare class SystemCloseLine extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-icon-delete-bin-fill`
+ * @summary An icon
+ * @element dap-ds-icon-delete-bin-fill
+ * @title - SystemDeleteBinFill
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class SystemDeleteBinFill extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-icon-delete-bin-line`
+ * @summary An icon
+ * @element dap-ds-icon-delete-bin-line
+ * @title - SystemDeleteBinLine
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class SystemDeleteBinLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-icon-download-line`
  * @summary An icon
@@ -7024,6 +7499,35 @@ export declare class SystemSearchLine extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-icon-share-line`
+ * @summary An icon
+ * @element dap-ds-icon-share-line
+ * @title - SystemShareLine
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class SystemShareLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-icon-shield-check-fill`
  * @summary An icon
@@ -7227,6 +7731,64 @@ export declare class SystemUpload2Line extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-icon-upload-line`
+ * @summary An icon
+ * @element dap-ds-icon-upload-line
+ * @title - SystemUploadLine
+ * @group icon
+ * @icontype system
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class SystemUploadLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-icon-edit-line`
+ * @summary An icon
+ * @element dap-ds-icon-edit-line
+ * @title - DesignEditLine
+ * @group icon
+ * @icontype design
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class SystemUploadLine2 extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
 export { Table }
 
 export { TableController }
@@ -7241,4 +7803,62 @@ declare type TypographySize = Extract<Size, 'lg' | 'md' | 'sm'> | null | undefin
 
 declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description';
 
+/**
+ * `dap-ds-icon-user-fill`
+ * @summary An icon
+ * @element dap-ds-icon-user-fill
+ * @title - UserUserFill
+ * @group icon
+ * @icontype user
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class UserUserFill extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-icon-user-line`
+ * @summary An icon
+ * @element dap-ds-icon-user-line
+ * @title - UserUserLine
+ * @group icon
+ * @icontype user
+ *
+ * @attribute {number} size - (optional) The width and height in pixels
+ * @attribute {boolean} selected - (optional) Sets the icon color via the `fill` attribute
+ * @attribute {string} accessibilityTitle - (optional) When using the icon standalone, make it meaningful for accessibility
+ * @attribute {boolean} focusable - (optional) If `true` the icon can receive focus
+ *
+ * @csspart base - The main icon container.
+ */
+export declare class UserUserLine extends DdsElement {
+    /** (optional) The width and height in pixels */
+    size?: number | undefined;
+    /** (optional) Sets the icon color via the `fill` attribute */
+    selected?: boolean;
+    /** (optional) When using the icon standalone, make it meaningful for accessibility */
+    accessibilityTitle?: string;
+    /** (optional) If `true` the icon can receive focus */
+    focusable?: boolean;
+    static readonly styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    render(): TemplateResult_2;
+}
+
 export { }