dap-design-system 0.20.0 → 0.21.0

package/dist/dds.d.ts

@@ -1410,6 +1410,7 @@ export declare class DapDSCheckbox extends LabelPositionedFormElement {
  * @property {string} label - The label of the select.
  * @property {string} description - The description of the select.
  * @property {string} tooltip - The tooltip of the select.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {'xs' | 'sm' | 'sm'} size - The size of the select. Default is 'md'.
  * @property {boolean} disabled - Whether the select is disabled.
  * @property {boolean} required - Whether the select is required.
@@ -1501,6 +1502,7 @@ export declare class DapDSContentSwitcherItem extends DdsElement {
  * @property {string} placeholder - The placeholder of the input.
  * @property {string} description - The description of the input.
  * @property {string} tooltip - The tooltip of the input.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The position of the tooltip. Can be `top`, `right`, `bottom`, or `left`.
  * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.
  * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`.
  * @property {string} name - The name of the input.
@@ -1569,6 +1571,7 @@ export declare class DapDSDAPBadge extends DdsElement {
  * @property {boolean} readonly - The readonly state of the datepicker.
  * @property {boolean} autofocus - The autofocus state of the datepicker.
  * @property {string} tooltip - The tooltip of the datepicker.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the datepicker.
  * @property {string} feedback - The feedback of the datepicker.
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker.
  * @property {boolean} optional - The optional state of the datepicker.
@@ -1738,6 +1741,7 @@ declare const DapDSFeedback_base: typeof DdsElement & {
  * @property {string} label - The label for the file input.
  * @property {string} description - The description for the file input.
  * @property {string} tooltip - The tooltip for the file input.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {boolean} disabled - Whether the file input is disabled.
  * @property { 'xs' | 'sm' | 'lg' } size - The size of the file input.
  * @property {string} feedback - The feedback for the file input.
@@ -2012,6 +2016,7 @@ export declare class DapDSIconButton extends DdsElement {
  * @property {string} placeholder - The placeholder of the input.
  * @property {boolean} loading - The loading state of the input. Default is false.
  * @property {string} tooltip - The tooltip of the input.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {string} feedback - The feedback of the input.
  * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the input. Can be `negative`, `positive`, or `warning`.
  * @property {'succes' | 'error'} status - The status of the input. Can be `success` or `error`.
@@ -2070,6 +2075,7 @@ export declare class DapDSInput extends InputBaseElement {
  * @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 {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement 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.
@@ -2261,6 +2267,7 @@ export declare class DapDSModal extends ModalBaseElement {
  * @property {string} placeholder - The placeholder of the input.
  * @property {string} description - The description of the input.
  * @property {string} tooltip - The tooltip of the input.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {'success' | 'error'} status - The status of the input. Can be `success` or `error`.
  * @property {'xs' | 'sm' | 'sm'} size - The size of the input. Default is `sm`. Can be `sm` or `lg`.
  * @property {string} name - The name of the input.
@@ -2447,6 +2454,7 @@ export declare class DapDSOverlay extends DdsElement {
  * @property {string} placeholder - The placeholder of the password input.
  * @property {string} description - The description of the password input.
  * @property {string} tooltip - The tooltip of the password input.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the input.
  * @property {string} status - The status of the password input. Can be `success` or `error`.
  * @property {'xs' | 'sm' | 'sm'} size - The size of the password input. Default is `sm`.
  * @property {string} name - The name of the password input.
@@ -2601,6 +2609,7 @@ export declare class DapDSRadioButton extends LabelPositionedFormElement {
  * @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 {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement 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.
@@ -2618,6 +2627,12 @@ export declare class DapDSRadioButton extends LabelPositionedFormElement {
  * @csspart container - The container of the radio group items.
  */
 export declare class DapDSRadioGroup extends GenericFormElement {
+    /** The placement of the tooltip.
+     * @type { 'top' | 'right' | 'bottom' | 'left' }
+     */
+    tooltipPlacement: PopupPlacement;
+    hiddenInput: HTMLInputElement;
+    optionalLabel: string;
     static styles: CSSResult;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _handleSlotChange;
@@ -2717,6 +2732,7 @@ export declare class DapDSSearch extends ComboboxBaseElement {
  * @property {string} label - The label of the select.
  * @property {string} description - The description of the select.
  * @property {string} tooltip - The tooltip of the select.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the select.
  * @property {'xs' | 'sm' | 'lg'} size - The size of the select. Default is `sm`.
  * @property {boolean} disabled - Whether the select is disabled.
  * @property {boolean} required - Whether the select is required.
@@ -2797,6 +2813,94 @@ export declare class DapDSSelect extends GenericFormElement {
     render(): TemplateResult_2;
 }
 
+/**
+ * `dap-ds-sidenav`
+ * @summary Side navigation is a list of links that are used to navigate to different sections of a page.
+ * @element dap-ds-sidenav
+ * @title - Side navigation
+ *
+ * @event dds-item-click - Event fired when the side navigation item is clicked.
+ *
+ * @slot - The content of the side navigation.
+ *
+ * @csspart base - The main side navigation container.
+ * @csspart menu - The menu of the side navigation.
+ */
+export declare class DapDSSideNav extends DdsElement {
+    /** The label of the side navigation, if aria label is not provided, it will be used as aria label */
+    label: string;
+    /** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */
+    activeHref: string;
+    static styles: CSSResult;
+    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private removeActive;
+    private setActive;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-sidenav-group`
+ * @summary Side navigation group
+ * @element dap-ds-sidenav-group
+ * @title - Side navigation group
+ * @group side-navigation
+ *
+ * @event dds-item-click - Event fired when the side navigation item is clicked.
+ *
+ * @slot - The content of the side navigation group.
+ * @slot submenu - The submenu of the side navigation group.
+ * @slot suffix - The suffix of the side navigation group.
+ *
+ * @csspart base - The main side navigation group container.
+ * @csspart title - The title of the side navigation group.
+ * @csspart link - The link of the side navigation group.
+ * @csspart toggle - The toggle button of the side navigation group.
+ * @csspart submenu - The submenu of the side navigation group.
+ */
+export declare class DapDSSideNavGroup extends DdsElement {
+    /** The href of the side navigation item */
+    href: string;
+    /** Whether the side navigation item is active */
+    active: boolean;
+    /** The spacing of the side navigation item
+     * @type {'top' | 'bottom' | 'both' | 'none'}
+     */
+    spacing: Spacing_2;
+    /** Whether the side navigation group is open */
+    open: boolean;
+    static styles: CSSResult;
+    render(): TemplateResult_2;
+}
+
+/**
+ * `dap-ds-sidenav-item`
+ * @summary Side navigation item
+ * @element dap-ds-sidenav-item
+ * @title - Side navigation item
+ * @group side-navigation
+ *
+ * @event dds-item-click - Event fired when the side navigation item is clicked.
+ *
+ * @slot - The content of the side navigation item.
+ * @slot suffix - The suffix of the side navigation item.
+ *
+ * @csspart base - The main side navigation item container.
+ * @csspart link - The link of the side navigation item.
+ */
+export declare class DapDSSideNavItem extends DdsElement {
+    /** The href of the side navigation item */
+    href: string;
+    /** Whether the side navigation item is active */
+    active: boolean;
+    /** The spacing of the side navigation item
+     * @type {'top' | 'bottom' | 'both' | 'none'}
+     */
+    spacing: Spacing_3;
+    static styles: CSSResult;
+    render(): TemplateResult_2;
+}
+
 /**
  * `dap-ds-skip-link`
  * @summary A skip link is a link that allows keyboard users to skip to the main content of a page.
@@ -3140,6 +3244,8 @@ export declare class DapDSTableRow extends DdsElement {
  * @property {boolean} disabled - The disabled state of the textarea.
  * @property {number} minlength - The minimum length of the textarea.
  * @property {string} value - The value of the textarea.
+ * @property {string} tooltip - The tooltip of the textarea.
+ * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.
  * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.
  * @property {boolean} readonly - The readonly state of the textarea.
  * @property {boolean} required - The required state of the textarea.
@@ -3433,6 +3539,8 @@ export declare type DdsInputEvent = CustomEvent<Record<PropertyKey, never>>;
 
 export declare type DdsInvalidDateEvent = CustomEvent<Record<PropertyKey, never>>;
 
+export declare type DdsItemClickEvent = CustomEvent<Record<PropertyKey, never>>;
+
 export declare type DdsKeydownEvent = CustomEvent<Record<PropertyKey, never>>;
 
 export declare type DdsNotAllowedEvent = CustomEvent<Record<PropertyKey, never>>;
@@ -3685,6 +3793,7 @@ declare interface LabelableElementInterface {
     label?: string;
     description?: string;
     tooltip?: string;
+    tooltipPlacement: PopupPlacement;
     feedbackId?: string;
     size: Size;
     required: boolean;
@@ -3833,6 +3942,10 @@ export declare type SnackbarPosition = 'bottom-left' | 'bottom-right' | 'bottom-
 
 export declare type Spacing = 0 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 1000 | 1200 | 1400 | 1600 | 1800 | 2000 | 2400 | 3000 | 4000 | 5000 | 6000;
 
+declare type Spacing_2 = 'top' | 'bottom' | 'both' | 'none';
+
+declare type Spacing_3 = 'top' | 'bottom' | 'both' | 'none';
+
 declare type SpinnerVariant = 'neutral' | 'brand' | 'negative' | 'positive' | 'inverted';
 
 /**
@@ -4975,6 +5088,13 @@ declare global {
 }
 
 
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'dds-item-click': DdsItemClickEvent;
+    }
+}
+
+
 declare global {
     interface GlobalEventHandlersEventMap {
         'dds-keydown': DdsKeydownEvent;
@@ -5729,6 +5849,14 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'dap-ds-sidenav': DapDSSideNav;
+        'dap-ds-sidenav-item': DapDSSideNavItem;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'dap-ds-skip-link': DapDSSkipLink;