@dubai-design-system/components-js 5.0.3 → 5.1.1

package/dist/types/components/dda-header/dda-header.d.ts

@@ -1,40 +1,94 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaHeader {
+    el: HTMLElement;
+    /** Image URL of the first (government) logo, on the left of the header and in the side menu. */
     firstLogoSrc: string;
+    /** Image URL of the white first logo, shown in dark theme and on a transparent header (`<body class="transparent">`). Falls back to `firstLogoSrc`. */
     firstLogoWhiteSrc: string;
+    /** Alternative text for the first logo. */
     firstLogoAlt: string;
+    /** Link URL of the first logo in the header and the side menu. Default: `/`. */
+    firstLogoHref: string;
+    /** Image URL of the second (entity) logo. */
     secondLogoSrc: string;
+    /** Image URL of the white second logo, shown in dark theme and on a transparent header. Falls back to `secondLogoSrc` on desktop. */
     secondLogoWhiteSrc: string;
+    /** Alternative text for the second logo. */
     secondLogoAlt: string;
+    /** Link URL of the second logo on desktop and mobile. Default: `/`. */
+    secondLogoHref: string;
+    /** URL of the Login link in the toolbar and the side menu. */
     loginLink: string;
+    /** Side menu items. JSON array of `{ label, href, subMenu }`; each `subMenu` item is `{ headerLabel, label, href, subMenu }` and can nest. */
     sideMenuItems: string;
+    /** Main navigation links. JSON array of `{ label, href, menuLabel, subMenu }`; `subMenu` items are `{ title, description, icon, href }` and open a mega menu. */
     quickLinks: string;
+    /** URL of the ReadSpeaker "listen" link in the accessibility panel. */
     readSpeakerLink: string;
+    /** Placeholder and accessible label of the search input. Default: `Search`. */
     searchText: string;
+    /** Material Symbols icon name of the Login link in the side menu. Default: `sentiment_satisfied`. */
     loginIcon: string;
+    /** Label of the Login link in the side menu. Default: `Login`. */
     loginText: string;
+    /** Label of the language buttons in the desktop toolbar and the side menu. Default: `العربية`. */
     language_text: string;
+    /** `lang` attribute of the language buttons, the language of `language_text`. Default: `ar`. */
+    language_lang: string;
+    /** Emitted when the user clicks the language button. */
     languageSwitch: EventEmitter<void>;
+    /** Emitted when the user clicks the `A-` (smaller text) button in the accessibility panel. */
     smTextSize: EventEmitter<void>;
+    /** Emitted when the user clicks the `A` (default text size) button in the accessibility panel. */
     baseTextSize: EventEmitter<void>;
+    /** Emitted when the user clicks the `A+` (larger text) button in the accessibility panel. */
     lgTextSize: EventEmitter<void>;
+    /** Emitted when the user selects the Normal contrast option. */
     normalContrast: EventEmitter<void>;
+    /** Emitted when the user selects the Colours Blind contrast option. */
     blindContrast: EventEmitter<void>;
+    /** Emitted when the user selects the Red Weakness contrast option. */
     redContrast: EventEmitter<void>;
+    /** Emitted when the user selects the Green Weakness contrast option. */
     greenContrast: EventEmitter<void>;
+    /**
+     * Emitted when a non-empty search is submitted. Call `preventDefault()` to stop the
+     * browser navigating to `search_action`, for example to route inside a single-page app.
+     */
+    searchSubmit: EventEmitter<{
+        query: string;
+    }>;
     isMenuOpen: boolean;
     isSubMenuOpen: boolean;
     isSideSubMenuOpen: boolean;
     isAccessibiltyOpen: boolean;
+    isSearchOpen: boolean;
+    private readonly searchId;
+    private mobileSearchButton;
+    private mobileSearchInput;
+    private focusSearchAfterRender;
     private lastScrollTop;
+    /** `name` attribute of the hamburger menu button. */
     hamburger_menu_button_name: string;
+    /** Accessible name of the hamburger menu button (visually hidden text). Default: `Menu`. */
+    menu_button_label: string;
+    /** `name` attribute of the accessibility button in the side menu. */
     accessibility_button_name: string;
+    /** `name` attribute of the mobile search button. */
     search_button_name: string;
+    /** `name` of the search input, which is the query parameter sent to `search_action`. Default: `q`. */
     search_input_name: string;
+    /** Results page URL. When set, a search does a GET to this URL with the query in `search_input_name` (default `q`). */
+    search_action: string;
+    /** `name` attribute of the language button in the side menu. */
     language_button_name: string;
+    /** `name` attribute of the button that closes the side menu. */
     close_menu_button_name: string;
+    /** `name` attribute of the buttons that close the accessibility panel. */
     close_accessibility_button_name: string;
+    /** Not used: the current markup does not render an element with this name. */
     close_sidebar_button_name: string;
+    /** `name` attribute of the accessibility button in the desktop toolbar. */
     toggle_accessibility_button_name: string;
     openMenus: {
         [index: string]: boolean;
@@ -44,9 +98,17 @@ export declare class DdaHeader {
     toggleEscapeKey: (event: KeyboardEvent) => void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    onMenuOpenChange(isOpen: boolean): void;
+    private lockPageScroll;
+    private handleSearchSubmit;
+    private openMobileSearch;
+    private closeMobileSearch;
+    componentDidUpdate(): void;
+    private renderSearchInput;
     handleOutsideClick: (event: MouseEvent) => void;
     handleOutsideAccessibilityClick: (event: MouseEvent) => void;
     handleOutsideMegaMenuClick: (event: MouseEvent) => void;
+    private updateScrolled;
     handleScroll: () => void;
     private parseJsonArray;
     private toggleMenu;

package/dist/types/components/dda-header/dda-header.stories.d.ts

@@ -27,6 +27,12 @@ declare const _default: {
             };
             description: string;
         };
+        search_action: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         language_button_name: {
             control: {
                 type: string;

package/dist/types/components/dda-home-banner/dda-home-banner.d.ts

@@ -29,6 +29,7 @@ export declare class DdaHomeBanner {
     private hasFocusWithin;
     private listening;
     connectedCallback(): void;
+    componentDidLoad(): void;
     disconnectedCallback(): void;
     componentDidRender(): void;
     autoplayChanged(): void;

package/dist/types/components/dda-input/dda-input.d.ts

@@ -1,19 +1,37 @@
 export declare class DdaInput {
+    /** Visible label text, linked to the input through `input_id` (or a generated id). */
     label: string;
+    /** Placeholder text of the inner `<input>`. */
     placeholder: string;
+    /** Value of the inner `<input>`. Updates as the user types. */
     value: string;
+    /** Native input type, e.g. `text`, `password`, `email`, `number`, `date` or `time`. The legacy values `Witherror` and `disabled` only apply the error or disabled styling. */
     type: string;
+    /** Helper text shown below the input and linked with `aria-describedby`. */
     helper_text: string;
+    /** Error text shown below the input. When set, the input gets `aria-invalid="true"`. */
     error_message: string;
+    /** Validation style. `error` shows the error colors. */
     validation_type?: string;
+    /** Size. `small` shows a smaller field; omit for the default size. */
     size?: string;
+    /** Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute. */
     input_status?: string;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the inner `<input>`. Also used for the label `for` and the helper and error text ids. Optional: an id is generated when it is not set. */
     input_id: string;
+    /** Accessible name of the inner `<input>`. Use it when there is no visible label. */
     aria_label?: string;
+    /** `name` of the inner `<input>`, submitted with its form. */
     input_name?: string;
+    /** `autocomplete` token of the inner `<input>`, e.g. `name`, `email` or `tel`. Set it on fields that ask about the user (WCAG 1.3.5). */
+    autocomplete?: string;
     handleInput(event: any): void;
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-input/dda-input.stories.d.ts

@@ -75,12 +75,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         input_name: {
             control: {
                 type: string;

package/dist/types/components/dda-link-button/dda-link-button.d.ts

@@ -1,20 +1,31 @@
 export declare class DdaLinkButton {
-    /** Type of button, e.g., "button", "submit" */
+    /** Not used: the component renders an `<a>` link, which has no `type`. */
     type: string;
-    /** Disable the button */
+    /** Not used: the link stays active. For a disabled look, set `button_color` to `disabled`. */
     disabled: boolean;
-    /** Icon class for the starting icon */
+    /** Material Symbols icon name shown before the label, e.g. `arrow_back`. */
     start_icon: string;
+    /** Material Symbols icon name shown after the label, e.g. `arrow_forward`. */
     end_icon: string;
+    /** Accessible name of the link. Required when the link shows only an icon. */
     aria_label?: string;
+    /** Color variant, e.g. `default-primary`, `default-secondary`, `error-primary`, `onsurface-link` or `disabled`. */
     button_color: string;
+    /** Size: `sm`, `md`, `lg` or `xl`. */
     size?: string;
+    /** Shape: `default` or `circle`. */
     button_shape?: string;
+    /** Shape of an icon-only link: `default` or `circle`. */
     icon_button_shape?: string;
+    /** Gap between icon and label, as a spacing step: 1–6, 8, 10, 12 or 16. */
     gap?: number;
+    /** Extra CSS classes added to the inner `<a>`. */
     custom_class?: string;
+    /** URL the link opens. */
     href?: string;
+    /** Theme override class for the link, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the inner `<a>`. */
     button_id: string;
     render(): any;
 }

package/dist/types/components/dda-number-field/dda-number-field.d.ts

@@ -1,22 +1,41 @@
 export declare class DdaNumberField {
+    /** Placeholder text of the amount input. */
     placeholder: string;
+    /** Visible label text, linked to the amount input through `input_id` (or a generated id). */
     label: string;
+    /** Initial value of the amount input. Characters other than digits and `.` are removed as the user types. */
     value: string;
+    /** Helper text shown below the field and linked with `aria-describedby`. */
     helper_text: string;
+    /** Error text shown below the field. When set, the input gets `aria-invalid="true"`. */
     error_message: string;
+    /** Validation style. `error` shows the error colors. */
     validation_type?: string;
+    /** Size. `small` shows a smaller field; omit for the default size. */
     size?: string;
+    /** Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute. */
     input_status?: string;
+    /** Currency options for the dropdown, as a JSON array string, e.g. `'["AED","USD"]'`. */
     currencies: string;
+    /** Currency shown on the dropdown button. Updates when the user picks a currency. */
     selected_currency: string;
     is_focused: boolean;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the amount input. Also used for the label `for` and the helper and error text ids. Optional: an id is generated when it is not set. */
     input_id: string;
+    /** Accessible name of the amount input. Use it when there is no visible label. */
     aria_label?: string;
+    /** `name` of the amount input, submitted with its form. */
     input_name?: string;
+    /** `name` of the currency dropdown button. */
     toggle_button_name?: string;
+    /** `name` of each currency option button. */
     currency_button_name?: string;
+    /** Accessible name of the currency dropdown button; the selected currency is added after it. */
+    toggle_button_label?: string;
     isCurrencyDropdownOpen: boolean;
     handleInput(event: any): void;
     handleFocus(): void;
@@ -24,6 +43,8 @@ export declare class DdaNumberField {
     toggleCurrencyDropdown(): void;
     selectCurrency(currency: string): void;
     private get parsedCurrencies();
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-number-field/dda-number-field.stories.d.ts

@@ -76,12 +76,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         input_name: {
             control: {
                 type: string;

package/dist/types/components/dda-pagination/dda-pagination.d.ts

@@ -1,21 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class DdaPagination {
+    /** Number of pages. Values below 1 become 1. Mutable: the component corrects out-of-range values. */
     total_pages: number;
+    /** Selected page, counted from 1. Kept between 1 and `total_pages`; updates when the user changes the page. Mutable: the component assigns it. */
     current_page: number;
+    /** Layout: `simple-slider`, `buttons`, `text`, `text-pages`, `button-text`, `buttons-pages` or `full`. */
     type: 'simple-slider' | 'buttons' | 'text' | 'text-pages' | 'button-text' | 'buttons-pages' | 'full';
+    /** Extra CSS classes added to the pagination element. */
     custom_class: string;
+    /** Theme override class on the pagination element, e.g. `light-mode`. */
     component_mode?: string;
+    /** `name` of the previous page button when `type` is `simple-slider`. */
     simple_slider_prev_button: string;
+    /** `name` of the next page button when `type` is `simple-slider`. */
     simple_slider_next_button: string;
+    /** `name` of the previous page button when `type` is `buttons`. */
     buttons_prev_button: string;
+    /** `name` of the next page button when `type` is `buttons`. */
     buttons_next_button: string;
+    /** `name` of the previous page button when `type` is `text`. */
     text_prev_button: string;
+    /** `name` of the next page button when `type` is `text`. */
     text_next_button: string;
+    /** `name` of the previous page button when `type` is `text-pages`. */
     text_pages_prev_button: string;
+    /** `name` of the next page button when `type` is `text-pages`. */
     text_pages_next_button: string;
+    /** `name` of the previous page button when `type` is `button-text`. */
     button_text_prev_button: string;
+    /** `name` of the next page button when `type` is `button-text`. */
     button_text_next_button: string;
+    /** `name` of the previous page button when `type` is `buttons-pages`. */
     buttons_pages_prev_button: string;
+    /** `name` of the next page button when `type` is `buttons-pages`. */
     buttons_pages_next_button: string;
+    /** Accessible name of the icon-only previous page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts). */
+    previous_button_label: string;
+    /** Accessible name of the icon-only next page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts). */
+    next_button_label: string;
+    /** Emitted when the user moves to a different page. `detail.page` is the new page, counted from 1. */
+    pageChange: EventEmitter<{
+        page: number;
+    }>;
     validateTotalPages(newValue: number): void;
     validateCurrentPage(newValue: number): void;
     componentWillLoad(): void;

package/dist/types/components/dda-phonefield/dda-phonefield.d.ts

@@ -1,10 +1,17 @@
 export declare class DdaPhoneField {
+    /** Visible label text, linked to the phone input through `input_id`. */
     label: string;
+    /** Placeholder text of the phone input. */
     placeholder: string;
+    /** Helper text shown below the field. Hidden when `validation_type` is set. */
     helper_text: string;
+    /** Validation style. `error` shows the error colors. Any value hides `helper_text`. */
     validation_type?: string;
+    /** Error text shown below the field. When set, the input gets `aria-invalid="true"`. */
     error_message: string;
+    /** Disables the phone input and shows the disabled styling. */
     disabled: boolean;
+    /** Size. `small` shows a smaller field; omit for the default size. */
     size?: string;
     country_code: string;
     country_flag: string;
@@ -15,16 +22,30 @@ export declare class DdaPhoneField {
         code: string;
         flag: string;
     }[];
+    /** Extra CSS classes added to the field container. */
     custom_class: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the phone input. Also used for the label `for` and the helper and error text ids. When it is not set, the component generates a unique id. */
     input_id?: string;
+    /** Accessible name of the phone input. Use it when there is no visible label. */
     aria_label: string;
+    /** Prefix of the country option button ids in the open list. Each option gets `<button_id>-<index>`. When it is not set, the prefix comes from the input id. */
     button_id?: string;
+    /** Accessible name set on each country option button in the open list. */
     button_aria_label: string;
+    /** `name` of the country code dropdown button. */
     toggle_button_name: string;
+    /** `name` of each country option button. */
     country_select_button_name: string;
+    /** Accessible name of the country code dropdown button; the selected code is added after it. */
+    toggle_button_label: string;
+    /** `name` of the phone input, submitted with its form. */
     phone_input_name: string;
+    /** `autocomplete` token of the phone input. Defaults to `tel-national`, because the country code is chosen separately. */
     autocomplete: string;
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-phonefield/dda-phonefield.stories.d.ts

@@ -73,12 +73,6 @@ declare const _default: {
             };
             description: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         toggle_button_name: {
             control: {
                 type: string;

package/dist/types/components/dda-progressbar/dda-progressbar.d.ts

@@ -1,10 +1,17 @@
 export declare class DdaProgressBar {
+    /** Progress in percent, from 0 to 100. Sets the bar width and `aria-valuenow`. */
     progress: number;
+    /** Shows the percentage in a tooltip at the end of the filled bar. */
     tooltip: boolean;
+    /** Tooltip position: `top` or `bottom`. */
     tooltip_position: 'top' | 'bottom';
+    /** Shows the percentage as text after the bar. */
     show_percentage_text: boolean;
+    /** Extra CSS classes added to the progress bar container. */
     custom_class: string;
+    /** Theme override class for the progress bar, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the progress bar. */
     aria_label: string;
     render(): any;
 }

package/dist/types/components/dda-radiobutton/dda-radiobutton.d.ts

@@ -1,14 +1,25 @@
 export declare class DdaRadiobutton {
+    /** Label shown next to the radio button. */
     title_text: string;
+    /** Secondary text shown under the title. */
     supporting?: string;
+    /** `name` of the inner radio input. Give all radio buttons in one group the same value. */
     group_name?: string;
+    /** `id` of the inner radio input. The label points to it, so set a unique value to make the label clickable. */
     input_id?: string;
+    /** Checked state of the inner input. Read the current state from the input or its `change` event. */
     checked: boolean;
+    /** Status: `disabled` shows the disabled style and blocks pointer clicks. */
     radio_status?: string;
+    /** Size: `sm`, `md` or `lg`. */
     size?: string;
+    /** Style variant: `outlined` or `faded`. Leave empty (or `normal`) for the default style. */
     variants?: string;
+    /** Extra class suffix. The value is added as `dda-radio-<value>` on the container. */
     custom_class?: string;
+    /** Theme override class for the radio button, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the inner radio input. */
     aria_label?: string;
     render(): any;
 }

package/dist/types/components/dda-radiobutton/dda-radiobutton.stories.d.ts

@@ -21,10 +21,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        labelfor: {
-            control: string;
-            description: string;
-        };
         input_id: {
             control: string;
             description: string;
@@ -62,18 +58,12 @@ declare const _default: {
                 type: string;
             };
             description: string;
-            radio_status: {
-                control: {
-                    type: string;
-                };
-                options: string[];
-            };
-            onclick: {
-                control: {
-                    type: string;
-                };
-                description: string;
+        };
+        radio_status: {
+            control: {
+                type: string;
             };
+            options: string[];
         };
     };
 };

package/dist/types/components/dda-range-slider/dda-range-slider.d.ts

@@ -1,21 +1,37 @@
 export declare class DdaRangeSlider {
+    /** Lowest value of the range. */
     min: number;
+    /** Highest value of the range. */
     max: number;
+    /** Step between selectable values. */
     step: number;
+    /** Start value of the lower (left) handle. Read only when the component loads. */
     initial_min: number;
+    /** Start value of the upper (right) handle. Read only when the component loads. */
     initial_max: number;
+    /** Not used by the current version; it has no effect. */
     size?: string;
+    /** Value labels shown as tooltips: `top` or `bottom`. Without it, plain labels show below the track. */
     tooltip_position?: string;
     min_value: number;
     max_value: number;
+    /** Extra CSS classes added to the slider container. */
     custom_class?: string;
+    /** Theme override class for the slider, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the lower (left) range input. When it is not set, the component generates a unique id. */
     left_input_id: string;
+    /** `id` of the upper (right) range input. When it is not set, the component generates a unique id. */
     right_input_id: string;
+    /** Accessible name of the lower (left) range input, e.g. `Minimum amount`. When it is empty, the name is `Minimum`. */
     left_aria_label?: string;
+    /** Accessible name of the upper (right) range input, e.g. `Maximum amount`. When it is empty, the name is `Maximum`. */
     right_aria_label?: string;
+    /** `name` of the lower (left) range input, submitted with its form. */
     left_input_name: string;
+    /** `name` of the upper (right) range input, submitted with its form. */
     right_input_name: string;
+    private readonly fallbackId;
     componentWillLoad(): void;
     handleMinChange(event: any): void;
     handleMaxChange(event: any): void;

package/dist/types/components/dda-search-input/dda-search-input.d.ts

@@ -1,22 +1,43 @@
 export declare class DdaSearchInput {
+    /** Placeholder text of the search input. */
     placeholder: string;
+    /** Visible label text, linked to the search input through `input_id` (or a generated id). */
     label: string;
+    /** Size. `small` shows a smaller field; other values show the default size. */
     size: string;
+    /** Error text shown below the field. When set, the input gets `aria-invalid="true"`. */
     error_message: string;
+    /** Shows a "Search" button after the clear button. */
     show_button: boolean;
+    /** Helper text shown below the field and linked with `aria-describedby`. */
     helper_text: string;
+    /** Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute. */
     input_status?: string;
+    /** Shows the error colors. */
     has_error: boolean;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** `id` of the clear button. */
     button_id?: string;
+    /** `id` of the search input. Also used for the label `for` and the helper and error text ids. Optional: an id is generated when it is not set. */
     input_id?: string;
+    /** Accessible name of the search input. Use it when there is no visible label. */
     aria_label?: string;
+    /** Accessible name of the clear button, e.g. `Clear search`. */
     button_aria_label?: string;
+    /** `name` of the search input, submitted with its form. */
     search_input_name: string;
+    /** `name` of the clear button. */
     close_button_name: string;
+    /** Accessible name of the clear button. `button_aria_label` wins when set. */
+    clear_button_label: string;
+    /** `name` of the "Search" button. */
     search_button_name: string;
     el: HTMLElement;
+    private readonly fallbackId;
+    private get inputId();
     private get helperId();
     private get errorId();
     private get describedBy();

package/dist/types/components/dda-search-input/dda-search-input.stories.d.ts

@@ -77,12 +77,6 @@ declare const _default: {
             };
             describe: string;
         };
-        onchange: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
         search_input_name: {
             control: {
                 type: string;

package/dist/types/components/dda-select/dda-select.d.ts

@@ -1,21 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Ddaselect {
+    /** Label shown above the field. The trigger button is named by the label and its current text. */
     label: string;
+    /** Options as a JSON array string, e.g. `'["Dubai","Abu Dhabi","Sharjah"]'`. Invalid JSON shows "No options available". */
     options: string;
+    /** The selected option. Must match an entry in `options`. The trigger shows "Select an option" when it is empty. Updated when the user picks an option. Mutable: the component assigns it. */
     selected: string;
+    /** Disables the select: the list does not open and options cannot be picked. */
     disabled: boolean;
+    /** Validation state. `error` shows the error styling. */
     error?: string;
+    /** Error text shown under the field. Also sets `aria-invalid` on the trigger. */
     error_message: string;
+    /** Helper text shown under the field. */
     helper_text: string;
     is_open: boolean;
+    /** Field size. `small` gives the compact field; leave empty for the default size. */
     size?: string;
+    /** Extra CSS classes added to the field container. */
     custom_class?: string;
+    /** Theme override class for the field, e.g. `light-mode`. */
     component_mode?: string;
+    /** Accessible name of the trigger button and the option list. The list falls back to `label`. */
     aria_label?: string;
+    /** `id` of the trigger button. Also used to build the ids of the label, list, helper text and error message, so keep it unique. When it is not set, the component generates a unique id. */
     button_id: string;
+    /** `name` of the trigger button. */
     toggle_button_name: string;
+    /** `name` of each option button in the list. */
     option_select_button_name: string;
+    /** Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option. */
+    selectionChange: EventEmitter<{
+        value: string;
+    }>;
     el: HTMLElement;
     private pendingFocusIndex;
+    private readonly fallbackId;
+    private get triggerId();
+    private get labelId();
     private get listboxId();
     private get helperId();
     private get errorId();
@@ -26,6 +48,7 @@ export declare class Ddaselect {
     private initialOptionIndex;
     toggleSelect(): void;
     private closeAndReturnFocus;
+    onHostClick(event: MouseEvent): void;
     selectOption(option: string): void;
     private onTriggerKeyDown;
     private onOptionKeyDown;