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

package/dist/collection/components/dda-search-input/dda-search-input.js

@@ -1,19 +1,33 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaSearchInput {
     constructor() {
+        /** Placeholder text of the search input. */
         this.placeholder = 'Search';
-        this.size = 'sm'; // default to small size
-        this.show_button = false; // control to show/hide search button
-        this.has_error = false; // control error state
+        /** Size. `small` shows a smaller field; other values show the default size. */
+        this.size = 'sm';
+        /** Shows a "Search" button after the clear button. */
+        this.show_button = false;
+        /** Shows the error colors. */
+        this.has_error = false;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
+        /** Accessible name of the clear button. `button_aria_label` wins when set. */
+        this.clear_button_label = 'Clear search';
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the search input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-search-input');
+    }
+    // F-016: ids derived from the search input id (the consumer-supplied
+    // input_id, or the generated fallback), same pattern as dda-input.
+    get inputId() {
+        return this.input_id || this.fallbackId;
     }
-    // F-016: ids derived from the consumer-supplied input_id, same pattern as
-    // dda-input/dda-select.
     get helperId() {
-        return this.input_id ? `${this.input_id}-helper` : undefined;
+        return `${this.inputId}-helper`;
     }
     get errorId() {
-        return this.input_id ? `${this.input_id}-error` : undefined;
+        return `${this.inputId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -24,14 +38,15 @@ export class DdaSearchInput {
     }
     clearInput() {
         // Was `#search` — the search input's id is now the consumer-supplied
-        // input_id (possibly undefined), so target the stable class instead.
+        // input_id or a generated one, so target the stable class instead.
         const input = this.el.querySelector('.dda-search-field');
         if (input) {
             input.value = '';
         }
     }
     render() {
-        return (h(Host, { key: 'defadb63674c2c2a74ff001a33c46e1b70884362' }, h("div", { key: '6b485070024fe6138c6964aafd30ac31f76add42', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '71564d0889be28002cedf12d11159be2c0fc6ad8', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'edd31c93a5098642a98952e9e786a1f52cef5f57', class: "dda-search-area dda-search-action" }, h("i", { key: '708fbf189d534e27c1a26c9491389c6caae0826d', class: "material-icons icon-left" }, "search"), h("input", { key: '8e1a5df3baf8c894a474047ff041db15191bc874', name: this.search_input_name, "aria-label": this.aria_label, id: this.input_id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '622e7a0ee2b0659ced993f533369e27bab553d6b', class: "dda-search-btngroup" }, h("button", { key: 'f508784161c13624b4cc30baaa05c031c6dbbbe4', name: this.close_button_name, "aria-label": this.button_aria_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '6680303fc0fe51810eaf1e2f2f509ac894fc0a8a', class: "material-icons  material-symbols-outlined" }, "close")), this.show_button && (h("button", { key: '37c5dce6caff03bca2b018f2a789b5de2614aded', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'ca5d52ea2953f2de298b6dbbca209697b006220f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2c7e0710441d65ed6a4652fc3962629c4a644b05', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: '63dd0ce5b1ba526bc4f2b79cd4646f433bf7f5b1' }, h("div", { key: '4b19e3abcdd6e920b8146484f1e859c449eb6f56', class: `dda-input-container dda-input-size-${this.size} ${this.component_mode} ${this.custom_class}  ${this.input_status ? `dda-input-${this.input_status}` : ''} ${this.has_error ? 'dda-validation-error' : ''}` }, this.label && h("label", { key: '54f45f95ae269e974064a01d9453934ef25f1f82', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '51b6460a3a04c80947ce2a9f68cbd472d2dac945', class: "dda-search-area dda-search-action" }, h("i", { key: '2d19436afd728672b1dee78a5888a66a9418e929', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: 'a28e11d99e628aeb122c857bad226bea62881a1f', name: this.search_input_name, "aria-label": this.aria_label, id: id, type: "text", class: "dda-input-field dda-search-field", placeholder: this.placeholder, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'd0064ab0d27ad86ef26d048a604de6d93f290c60', class: "dda-search-btngroup" }, h("button", { key: 'a6e9f7288c8ff9123553e80f74e36467bc6f5b43', name: this.close_button_name, "aria-label": this.button_aria_label || this.clear_button_label, id: this.button_id, type: "button", class: "icon-close", onClick: () => this.clearInput() }, h("i", { key: '2676bd651dd8fffd3f6ebf76dc812bfb0272e003', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '455e7da64da6df0b345ad44559a8a403b44d07f8', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: 'fe5fbeb25377cf89d4d1fa3520d4c11fd44eb55c', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '8538814d841caf3e75b0f4edb33c5d53d442b792', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-search-input"; }
     static get originalStyleUrls() {
@@ -58,7 +73,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the search input."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +93,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the search input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -97,7 +112,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size. `small` shows a smaller field; other values show the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -117,7 +132,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field. When set, the input gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -136,7 +151,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows a \"Search\" button after the clear button."
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +171,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field and linked with `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +190,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +209,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -214,7 +229,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +249,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +268,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the clear button."
                 },
                 "getter": false,
                 "setter": false,
@@ -272,7 +287,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`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."
                 },
                 "getter": false,
                 "setter": false,
@@ -291,7 +306,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the search input. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -310,7 +325,7 @@ export class DdaSearchInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the clear button, e.g. `Clear search`."
                 },
                 "getter": false,
                 "setter": false,
@@ -329,7 +344,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the search input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -348,13 +363,33 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the clear button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "close_button_name"
             },
+            "clear_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the clear button. `button_aria_label` wins when set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear_button_label",
+                "defaultValue": "'Clear search'"
+            },
             "search_button_name": {
                 "type": "string",
                 "mutable": false,
@@ -367,7 +402,7 @@ export class DdaSearchInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the \"Search\" button."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/dda-search-input/dda-search-input.stories.js

@@ -61,10 +61,6 @@ export default {
             control: { type: 'text' },
             describe: 'Aria label for the clear button',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the search field',
-        },
         search_input_name: {
             control: { type: 'text' },
             description: 'Name for the search input field',
@@ -99,7 +95,6 @@ export default {
     input_id="search"
     aria_label="search-input"
     button_aria_label="clear-search"
-    onchange="console.log('changed')"
     search_input_name="search-input"
     close_button_name="close-button"
     search_button_name="search-button"
@@ -132,7 +127,6 @@ Default.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -152,7 +146,6 @@ WithButton.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -171,7 +164,6 @@ WithError.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",
@@ -191,7 +183,6 @@ Disabled.args = {
     input_id: 'search',
     aria_label: 'search-input',
     button_aria_label: 'clear-search',
-    onchange: '',
     search_input_name: "search-input",
     close_button_name: "close-button",
     search_button_name: "search-button",

package/dist/collection/components/dda-select/dda-select.js

@@ -1,14 +1,20 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class Ddaselect {
     constructor() {
+        /** Disables the select: the list does not open and options cannot be picked. */
         this.disabled = false;
         this.is_open = false;
         //@Prop() validationtype?: string;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
         // F-014: focus target requested by a keyboard interaction (ArrowDown/Up
         // from the trigger) that fires before the listbox exists in the DOM.
         // Consumed by componentDidRender, then cleared.
         this.pendingFocusIndex = null;
+        // Fallback id so the label, list and messages are wired when no button_id
+        // is passed (otherwise ids became "undefined-listbox" and the label had for="").
+        this.fallbackId = uniqueId('dda-select');
         this.onTriggerKeyDown = (event) => {
             if (this.disabled) {
                 return;
@@ -68,15 +74,21 @@ export class Ddaselect {
             }
         };
     }
+    get triggerId() {
+        return this.button_id || this.fallbackId;
+    }
+    get labelId() {
+        return `${this.triggerId}-label`;
+    }
     get listboxId() {
-        return `${this.button_id}-listbox`;
+        return `${this.triggerId}-listbox`;
     }
-    // F-016: same button_id-derived uniqueness pattern as listboxId above.
+    // F-016: same trigger-id-derived uniqueness pattern as listboxId above.
     get helperId() {
-        return this.button_id ? `${this.button_id}-helper` : undefined;
+        return `${this.triggerId}-helper`;
     }
     get errorId() {
-        return this.button_id ? `${this.button_id}-error` : undefined;
+        return `${this.triggerId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -122,10 +134,28 @@ export class Ddaselect {
             trigger.focus();
         }
     }
+    // The label has no `for`: label[for] on a <button> replaces the button text
+    // as its name, so the selected value was not announced. A click on the label
+    // still acts on the trigger, like a native label click did.
+    onHostClick(event) {
+        const target = event.target;
+        if (!target || typeof target.closest !== 'function' || !target.closest('label.dda-input-label')) {
+            return;
+        }
+        const trigger = this.el.querySelector('.dda-select-header');
+        if (trigger) {
+            trigger.focus();
+        }
+        this.toggleSelect();
+    }
     selectOption(option) {
         if (!this.disabled) {
+            const changed = this.selected !== option;
             this.selected = option;
             this.closeAndReturnFocus();
+            if (changed) {
+                this.selectionChange.emit({ value: option });
+            }
         }
     }
     componentDidRender() {
@@ -136,7 +166,8 @@ export class Ddaselect {
         }
     }
     render() {
-        return (h(Host, { key: '24112cb3263994d6e4b7c87a5a1ec75d010c6ee0' }, h("div", { key: '9d49fc8c1905079e83a8949ca8c1f46fa3255401', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '96d14ea8c1174032261945b9bef49f23e6ff55b6', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '0896838d28313f76b1938c225bdf5df1fdbc7849', class: "dda-dropdown-container" }, h("button", { key: 'a224ad80778a6e315735e806a0afbb4fc7c57e93', name: this.toggle_button_name, "aria-label": this.aria_label, id: this.button_id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '7ed3bdb440c0a892795af32b1b2f9105633d5af7', class: `material-icons` }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '266c9fc8de36433de06bf289a854c22ab499f0ca', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '62028ea0d45943d0728f71ec58122ab58a554ec7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '30f11a0804b15424e0ca7a8769477f5f4547b191', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.triggerId;
+        return (h(Host, { key: '35fead649fe2206feb1749d1accbdddb2691d09d' }, h("div", { key: 'd41d81d1944c32c379f9289efd276bccf5f25a1a', class: `dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} ` }, this.label && h("label", { key: '8bd67c36aab4be42289b73f0f95466c0cc3da1f3', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'a99b28ef07e8fa4577e12e964eaa4a55c73ced8b', class: "dda-dropdown-container" }, h("button", { key: 'a03cc3709395e13290d78fcbc497d56953fa16ae', name: this.toggle_button_name, "aria-label": this.aria_label, "aria-labelledby": this.label && !this.aria_label ? `${this.labelId} ${id}` : undefined, id: id, type: "button", class: "dda-input-field dda-select-header", "aria-haspopup": "listbox", "aria-expanded": this.is_open ? 'true' : 'false', "aria-controls": this.is_open ? this.listboxId : undefined, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined, onClick: () => { this.toggleSelect(); }, onKeyDown: this.onTriggerKeyDown }, this.selected || 'Select an option', h("i", { key: '6764cc54e1b60305b9a0f3bf528ec6d74dd8433d', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '418cae53a5351d92e5b55186d58b97bd62dc8bcb', id: this.listboxId, role: "listbox", "aria-label": this.aria_label || this.label, class: "dda-input-dropdown-list dda-select-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map((option, index) => (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', tabIndex: index === this.initialOptionIndex() ? 0 : -1, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '064eb06fc8dea8656c753aa4372be0a797241a22', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'fbe4f80920eac2f18c99177f2425b443f497e569', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -163,7 +194,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label shown above the field. The trigger button is named by the label and its current text."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,7 +213,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Options as a JSON array string, e.g. `'[\"Dubai\",\"Abu Dhabi\",\"Sharjah\"]'`. Invalid JSON shows \"No options available\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +222,7 @@ export class Ddaselect {
             },
             "selected": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -201,7 +232,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -220,7 +251,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disables the select: the list does not open and options cannot be picked."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +271,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation state. `error` shows the error styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -259,7 +290,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown under the field. Also sets `aria-invalid` on the trigger."
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +309,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown under the field."
                 },
                 "getter": false,
                 "setter": false,
@@ -297,7 +328,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Field size. `small` gives the compact field; leave empty for the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -316,7 +347,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -336,7 +367,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -355,7 +386,7 @@ export class Ddaselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the trigger button and the option list. The list falls back to `label`."
                 },
                 "getter": false,
                 "setter": false,
@@ -374,7 +405,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`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."
                 },
                 "getter": false,
                 "setter": false,
@@ -393,7 +424,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the trigger button."
                 },
                 "getter": false,
                 "setter": false,
@@ -412,7 +443,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each option button in the list."
                 },
                 "getter": false,
                 "setter": false,
@@ -426,5 +457,32 @@ export class Ddaselect {
             "is_open": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "selectionChange",
+                "name": "selectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new option."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }