dap-design-system 0.19.0 → 0.20.0

package/dist/dds.d.ts

@@ -717,9 +717,8 @@ export declare class DapDSAccordion extends DdsElement {
  * @element dap-ds-accordion-group
  * @summary An accordion group is a collection of accordion components.
  * @title - Accordion group
- *
- * @attribute {boolean} autoClose - Whether to close other accordions when one is opened. Default is `true`.
- *
+ * @group accordion
+ * *
  * @event dds-change - Event fired when an accordion is opened or closed.
  *
  * @slot - The content of the accordion group.
@@ -727,7 +726,8 @@ export declare class DapDSAccordion extends DdsElement {
  * @csspart base - The main accordion group container.
  */
 export declare class DapDSAccordionGroup extends DdsElement {
-    accordions: Array<DapDSAccordion>;
+    private accordions;
+    /** Whether to close other accordions when one is opened. */
     autoClose: string;
     static styles: CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
@@ -760,6 +760,32 @@ export declare class DapDSAnchorHeading extends DdsElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-avatar`
+ * @summary Avatar component can be used to display user profile images or icons, or illustrations.
+ * @element dap-ds-avatar
+ * @title - Avatar
+ *
+ * @csspart base - The main avatar image container.
+ * @csspart img - The avatar image.
+ */
+export declare class DapDSAvatar extends DdsElement {
+    /** The size of the avatar
+     * @type { 'lg' | 'md' | 'sm' | 'xs' | 'xxs' }
+     */
+    size: Size;
+    /** The source of the avatar. */
+    src: string;
+    /** The alt text of the avatar. */
+    alt: string;
+    /** The width of the avatar. This will override the size. */
+    width: number;
+    /** The height of the avatar. This will override the size. */
+    height: number;
+    static styles: CSSResult;
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-badge`
  * @summary A badge is a small status descriptor for UI elements.
@@ -871,6 +897,7 @@ export declare class DapDSBreadcrumb extends DdsElement {
  * @element dap-ds-breadcrumb-item
  * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.
  * @title - Breadcrumb item
+ * @group breadcrumb
  *
  * @slot - The content of the breadcrumb item.
  *
@@ -890,7 +917,7 @@ export declare class DapDSBreadcrumbItem extends DdsElement {
     rel: string;
     /** Whether the breadcrumb item is disabled. */
     disabled: boolean;
-    /** Whether the breadcrumb item is inverted. */
+    /** Whether the breadcrumb item has inverted style. */
     inverted: boolean;
     static styles: CSSResult;
     render(): TemplateResult_2<1>;
@@ -1052,26 +1079,28 @@ export declare class DapDSCalendar extends DdsElement {
  * @summary Calendar cell represents a single cell in the calendar.
  * @element dap-ds-calendar-cell
  * @title - Calendar cell
+ * @group calendar
  *
- * @property {Dayjs} value - The value of the calendar cell.
- * @property {boolean} selected - Whether the calendar cell is selected.
- * @property {boolean} disabledDay - Whether the calendar cell is disabled.
- * @property {boolean} today - Whether the calendar cell is today.
- * @property {boolean} outOfRange - Whether the calendar cell is out of range.
- * @property {boolean} header - Whether the calendar cell is header.
- * @property {boolean} focused - Whether the calendar cell is focused.
+ * @slot - The content of the calendar cell.
  *
  * @csspart base - The main calendar cell container.
  * @csspart today-mark - The today mark of the calendar cell.
  *
  */
 export declare class DapDSCalendarCell extends DapDSCalendarCell_base {
+    /** The value of the calendar cell. */
     value: Dayjs;
+    /** Whether the calendar cell is selected. */
     selected: boolean;
+    /** Whether the calendar cell is disabled. */
     disabledDay: boolean;
+    /** Whether the calendar cell is today. */
     today: boolean;
+    /** Whether the calendar cell is out of range. */
     outOfRange: boolean;
+    /** Whether the calendar cell is a date header. */
     header: boolean;
+    /** Whether the calendar cell is focused. */
     focused: boolean;
     static styles: CSSResult;
     get label(): string;
@@ -1147,6 +1176,8 @@ export declare class DapDSCallout extends DdsElement {
  * @element dap-ds-card
  * @title - Card
  *
+ * @property {'sm' | 'lg'} size - The size of the card title. Default is `sm`.
+ *
  * @slot - The content of the card.
  *
  * @csspart base - The main card container.
@@ -1182,13 +1213,14 @@ declare const DapDSCard_base: typeof DdsElement & {
  * @title - Card actions
  * @group card
  *
- * @attribute {string} parentSized - Whether the card actions should be sized from the parent. Default is true.
+ * @property {'sm' | 'lg'} size - The size of the card actions. Default is `sm`.
  *
  * @slot - The content of the card actions.
  *
  * @csspart base - The main card actions container.
  */
 export declare class DapDSCardActions extends DapDSCardActions_base {
+    /** Whether the card actions should be sized from the parent. */
     parentSized: string;
     static styles: CSSResult;
     render(): TemplateResult_2;
@@ -1206,15 +1238,16 @@ declare const DapDSCardActions_base: typeof DdsElement & {
  * @title - Card content
  * @group card
  *
- * @attribute {string} renderAs - The component of the card content. Default is 'div'.
- * @attribute {string} parentSized - Whether the card content should be sized from the parent. Default is true.
+ * @property {'sm' | 'lg'} size - The size of the card subtitle. Default is `sm`.
  *
  * @slot - The content of the card-content.
  *
  * @csspart base - The main card content container.
  */
 export declare class DapDSCardContent extends DapDSCardContent_base {
+    /** The base rendered root tag of the card content. */
     renderAs: string;
+    /** Whether the card content should be sized from the parent. */
     parentSized: string;
     static styles: CSSResult;
     render(): TemplateResult_2;
@@ -1256,15 +1289,16 @@ export declare class DapDSCardImage extends DdsElement {
  * @title - Card subtitle
  * @group card
  *
- * @attribute {'sm' | 'lg'} size - The size of the card subtitle. Default is `sm`.
- * @attribute {string} parentSized - Whether the card content should be sized from the parent. Default is true.
+ * @property {'sm' | 'lg'} size - The size of the card subtitle. Default is `sm`.
  *
  * @slot - The content of the subtitle.
  *
  * @csspart base - The subtitle container.
  */
 export declare class DapDSCardSubtitle extends DapDSCardSubtitle_base {
+    /** The base rendered root tag of the card subtitle. */
     renderAs: string;
+    /** Whether the card subtitle should be sized from the parent. */
     parentSized: string;
     static styles: CSSResult;
     render(): TemplateResult_2;
@@ -1282,17 +1316,19 @@ declare const DapDSCardSubtitle_base: typeof DdsElement & {
  * @title - Card title
  * @group card
  *
- * @attribute {'sm' | 'lg'} size - The size of the card title. Default is `sm`.
- * @attribute {string} parentSized - Whether the card content should be sized from the parent. Default is true.
- * @attribute {string} component - The rendered component of the card title. Default is 'div'.
+ * @property {'sm' | 'lg'} size - The size of the card title. Default is `sm`.
  *
  * @slot - The content of the title.
  *
  * @csspart base - The main card title container.
  */
 export declare class DapDSCardTitle extends DapDSCardTitle_base {
+    /** The base rendered root tag of the card title. */
     renderAs: string;
+    /** Whether the card title should be sized from the parent. */
     parentSized: string;
+    /** Whether the card title should have no padding. */
+    noPadding: boolean;
     static styles: CSSResult;
     render(): TemplateResult_2;
 }
@@ -1433,6 +1469,7 @@ export declare class DapDSContentSwitcher extends DdsElement {
  * @summary Segmented control item component for the segmented control.
  * @element dap-ds-content-switcher-item
  * @title - Content switcher item
+ * @group content-switcher
  *
  * @slot iconcontent - The icon content of the segmented control item.
  *
@@ -1450,7 +1487,7 @@ export declare class DapDSContentSwitcherItem extends DdsElement {
     name: string;
     static styles: CSSResult;
     private get multiple();
-    handleClick: (e: MouseEvent) => void;
+    private handleClick;
     render(): TemplateResult_2;
 }
 
@@ -1773,9 +1810,7 @@ export declare class DapDSFileInput extends GenericFormElement {
  * @summary A file input list is a container for file input items.
  * @element dap-ds-file-input-list
  * @title - File input list
- * @group fileinput
- *
- * @event dds-file-remove - Dispatched when a file is removed from the list.
+ * @group file-input
  *
  * @csspart base - The main file input list container.
  *
@@ -1806,7 +1841,9 @@ declare const DapDSFileInputList_base: typeof DdsElement & {
  * @summary A file input list item is a container for file input list items.
  * @element dap-ds-file-input-list-item
  * @title - File input list item
- * @group fileinput
+ * @group file-input
+ *
+ * @event dds-file-remove - Dispatched when a file is removed from the list.
  *
  * @csspart base - The main file input list item container.
  * @csspart feedback - The feedback container.
@@ -1838,6 +1875,7 @@ export declare class DapDSFileInputListItem extends DapDSFileInputListItem_base
     rel: string;
     /** The target of the item link. Only used if href is present. */
     target: LinkTarget;
+    /** Whether the file should be downloaded when clicked. */
     download: string;
     static styles: CSSResult;
     delete(): void;
@@ -1857,11 +1895,11 @@ declare const DapDSFileInputListItem_base: typeof DdsElement & {
  * @title - Form label
  * @group form
  *
- * @attribute {string} for - The id of the form element that the label is associated with.
- * @attribute {boolean} renderAsText - Whether the label should be rendered as text or a <label> tag. Default is false.
- * @attribute {string} optionalLabel - Label of optional text
- * @attribute {boolean} subtle - Text weight of the label.
- * @attribute {boolean} optional - If the label is optional.
+ * @property {string} for - The id of the form element that the label is associated with.
+ * @property {boolean} renderAsText - Whether the label should be rendered as text or a <label> tag. Default is false.
+ * @property {string} optionalLabel - Label of optional text
+ * @property {boolean} subtle - Text weight of the label.
+ * @property {boolean} optional - If the label is optional.
  *
  * @csspart base - The main form label container.
  * @csspart required - The required indicator of the form label.
@@ -2029,16 +2067,16 @@ export declare class DapDSInput extends InputBaseElement {
  * @title - Input group
  * @group form
  *
- * @attribute {string} label - The label of the input group.
- * @attribute {string} description - The description of the input group.
- * @attribute {string} tooltip - The tooltip of the input group.
- * @attribute {boolean} disabled - Whether the input group is disabled.
- * @attribute {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`. Can be `sm` or `lg`.
- * @attribute {boolean} required - Whether the input group is required.
- * @attribute {boolean} optional - Whether the input group is optional.
- * @attribute {string} feedback - The feedback of the input.
- * @attribute {string} feedbackType - The type of the feedback.
- * @attribute {boolean} subtle - Whether the input group label is subtle.
+ * @property {string} label - The label of the input group.
+ * @property {string} description - The description of the input group.
+ * @property {string} tooltip - The tooltip of the input group.
+ * @property {boolean} disabled - Whether the input group is disabled.
+ * @property {'xs' | 'sm' | 'lg'} size - The size of the input group. Default is `sm`. Can be `sm` or `lg`.
+ * @property {boolean} required - Whether the input group is required.
+ * @property {boolean} optional - Whether the input group is optional.
+ * @property {string} feedback - The feedback of the input.
+ * @property {string} feedbackType - The type of the feedback.
+ * @property {boolean} subtle - Whether the input group label is subtle.
  *
  * @slot - The content of the input group items.
  * @slot feedback-icon - The custom icon of the feedback.
@@ -2174,16 +2212,19 @@ export declare class DapDSListItem extends DdsElement {
  * @element dap-ds-modal
  * @title - Modal
  *
- * @attribute {boolean} open - The open state of the modal.
- * @attribute {boolean} closeOnEsc - Whether the modal should close on pressing the escape key. Default is true.
- * @attribute {boolean} closeOnOverlayClick - Whether the modal should close on clicking the overlay. Default is true.
- * @attribute {string} closeButton - Whether the modal should have a close button. Default is true.
- * @attribute {string} title - The title of the modal.
- * @attribute {string} description - The description of the modal.
- * @attribute {string} okButtonLabel - The label of the OK button.
- * @attribute {string} cancelButtonLabel - The label of the Cancel button.
- * @attribute {string} footer - Whether the modal should have a footer. Default is true.
- * @attribute {string} header - Whether the modal should have a header. Default is true.
+ * @property {boolean} open - The open state of the modal.
+ * @property {boolean} fullScreen - The full screen version of the modal.
+ * @property {boolean} wideFooter - Wide layout mode for footer.
+ * @property {boolean} bottomFooter - Pushes the footer to bottom.
+ * @property {boolean} closeOnEsc - Whether the modal should close on pressing the escape key. Default is true.
+ * @property {boolean} closeOnOverlayClick - Whether the modal should close on clicking the overlay. Default is true.
+ * @property {string} closeButton - Whether the modal should have a close button. Default is true.
+ * @property {string} title - The title of the modal.
+ * @property {string} description - The description of the modal.
+ * @property {string} okButtonLabel - The label of the OK button.
+ * @property {string} cancelButtonLabel - The label of the Cancel button.
+ * @property {string} footer - Whether the modal should have a footer. Default is true.
+ * @property {string} header - Whether the modal should have a header. Default is true.
  *
  * @event dds-before-open - Fires before the modal opens.
  * @event dds-opened - Fires after the modal opens.
@@ -2547,26 +2588,26 @@ export declare class DapDSRadioButton extends LabelPositionedFormElement {
  * @summary A radio group is a form element that allows the user to select one option from a set.
  * @element dap-ds-radio-group
  * @title - Radio group
- * @group form
+ * @group radio-button
  *
  * @event dds-change - Fired when the radio group is checked.
  * @event dds-blur - Emitted when the radio group loses focus.
  * @event dds-focus - Emitted when the radio group gains focus.
  *
- * @attribute {string} name - The name of the radio group.
- * @attribute {string} value - The value of the radio group.
- * @attribute {boolean} disabled - Whether the radio group is disabled.
- * @attribute {boolean} required - Whether the radio group is required.
- * @attribute {string} label - The label of the radio group.
- * @attribute {string} description - The description of the radio group.
- * @attribute {string} tooltip - The tooltip of the radio group.
- * @attribute {string} feedback - The feedback of the radio group.
- * @attribute {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.
- * @attribute {boolean} optional - The optional state of the radio group.
- * @attribute {string} optionalLabel - Text of optional label.
- * @attribute {boolean} subtle - The weight of the label. Default is `false`
- * @attribute {'sm' | 'lg'} size - The size of the radio group. Default is `sm`. Can be `sm` or `lg`.
- * @attribute {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.
+ * @property {string} name - The name of the radio group.
+ * @property {string} value - The value of the radio group.
+ * @property {boolean} disabled - Whether the radio group is disabled.
+ * @property {boolean} required - Whether the radio group is required.
+ * @property {string} label - The label of the radio group.
+ * @property {string} description - The description of the radio group.
+ * @property {string} tooltip - The tooltip of the radio group.
+ * @property {string} feedback - The feedback of the radio group.
+ * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the radio group. Can be `negative`, `positive`, or `warning`.
+ * @property {boolean} optional - The optional state of the radio group.
+ * @property {string} optionalLabel - Text of optional label.
+ * @property {boolean} subtle - The weight of the label. Default is `false`
+ * @property {'xs' | 'sm' | 'lg'} size - The size of the radio group. Default is `sm`.
+ * @property {boolean} subtle - Font weight of the feedback label. Default is `false` which is bold.
  *
  * @slot - The content of the radio group.
  * @slot feedback-icon - The custom icon of the feedback.
@@ -2577,8 +2618,6 @@ export declare class DapDSRadioButton extends LabelPositionedFormElement {
  * @csspart container - The container of the radio group items.
  */
 export declare class DapDSRadioGroup extends GenericFormElement {
-    hiddenInput: HTMLInputElement;
-    optionalLabel: string;
     static styles: CSSResult;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _handleSlotChange;
@@ -2821,12 +2860,7 @@ export declare class DapDSSnackbar extends DdsElement {
  * @summary The Snackbar component shows a sliding message to the user.
  * @element dap-ds-snackbar-message
  * @title - Snackbar message
- *
- * @attribute { string } message - The message to show in snackbar.
- * @attribute { string } closeButton - The snackbar has a close button when 'true'.
- * @attribute { string } alertType - The message type of the snackbar item.
- * @attribute { string } id - The id of the snackbar item.
- * @attribute { ActionType[] } actions - The actions of the snackbar item.
+ * @group snackbar
  *
  * @event dds-close - Fires when the snackbar closes.
  *
@@ -2838,11 +2872,14 @@ export declare class DapDSSnackbar extends DdsElement {
  * @csspart icon - The icon part of the close button.
  */
 export declare class DapDSSnackbarMessage extends DdsElement {
+    /** The actions of the snackbar item. */
     actions?: ActionType[];
+    /** The message of the snackbar item. */
     message: string;
+    /** Whether the snackbar has a close button. */
     closeButton: string;
+    /** The message type of the snackbar item. */
     alertType: AlertType;
-    id: string;
     static styles: CSSResult;
     private getActions;
     private getAlertTypeIcon;
@@ -2983,6 +3020,7 @@ export declare class DapDSTab extends DdsElement {
  * @summary A tab group component. It is used with dap-ds-tab component to create a tab group.
  * @element dap-ds-tab-group
  * @title - Tab group
+ * @group tab
  *
  * @event dds-tab-select - Fired when select a new tab.
  *
@@ -3039,6 +3077,7 @@ export declare class DapDSTable extends DdsElement {
  * Table cell component.
  * @element dap-ds-table-cell
  * @title - Table cell
+ * @group table
  *
  * @slot - The default slot.
  *
@@ -3049,6 +3088,7 @@ export declare class DapDSTableCell extends DdsElement {
     static styles: CSSResult;
     /**If the cell is the last one.*/
     last: boolean;
+    /** The html role of the cell */
     role: string;
     render(): TemplateResult_2;
 }
@@ -3057,7 +3097,8 @@ export declare class DapDSTableCell extends DdsElement {
  * Table header cell component.
  * @element dap-ds-table-header
  * @title - Table header
- * *
+ * @group table
+ *
  * @slot - The default slot.
  *
  * @csspart base - The main header cell container.
@@ -3067,6 +3108,7 @@ export declare class DapDSTableHeader extends DdsElement {
     static styles: CSSResult;
     /**If the header cell is the last one.*/
     last: boolean;
+    /** The html role of the header cell */
     role: string;
     render(): TemplateResult_2;
 }
@@ -3075,11 +3117,13 @@ export declare class DapDSTableHeader extends DdsElement {
  * Table row component.
  * @element dap-ds-table-row
  * @title - Table row
+ * @group table
  *
  * @slot - The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.
  */
 export declare class DapDSTableRow extends DdsElement {
     static styles: CSSResult;
+    /** The html role of the row */
     role: string;
     /**If the row is mobile design */
     mobile: boolean;
@@ -3702,6 +3746,7 @@ export declare type MessageOptionsType = {
 declare class ModalBaseElement extends DdsElement {
     dialog: HTMLDialogElement;
     open?: boolean;
+    fullScreen?: boolean;
     closeOnEsc: string;
     closeOnOverlayClick: string;
     closeButton: string;
@@ -3715,6 +3760,8 @@ declare class ModalBaseElement extends DdsElement {
     okButtonDanger: boolean;
     footer: string;
     header: string;
+    wideFooter: boolean;
+    bottomFooter: boolean;
     private canceled;
     static styles: CSSResult;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
@@ -3769,7 +3816,7 @@ export declare type PopupPlacement = 'top' | 'top-start' | 'top-end' | 'right' |
 
 export declare type PopupTrigger = 'click' | 'hover' | 'focus' | 'manual' | 'hover focus';
 
-export declare type Size = 'lg' | 'md' | 'sm' | 'xs';
+export declare type Size = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
 declare interface SizedElementInterface {
     size: Size;
@@ -5047,6 +5094,13 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-avatar': DapDSAvatar;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-badge': DapDSBadge;