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

package/dist/collection/components/dda-credit-card/dda-credit-card.js

@@ -1,16 +1,18 @@
 import { h, Host } from "@stencil/core";
 export class DdaCreditCard {
     constructor() {
+        /** Extra CSS classes added to the card container. */
         this.custom_class = '';
     }
     render() {
+        var _a;
         const cardClass = [
             'dda-credit-card-container',
             this.design ? `dda-credit-card-${this.design}` : '',
             this.custom_class ? `${this.custom_class}` : "",
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'cdb9cf64608b99e8949e5044ca71e71890eb6003' }, h("div", { key: '3990e35381191298b1bb43e59a675225972a4565', class: cardClass }, h("div", { key: '58e7a17527038c2070e693760e6f56cd0f56e207', class: "dda-credit-card-header" }, h("div", { key: '930f3c19df66c412a8cb7a1d81210445a6ea74a5', class: "card-balance-info" }, h("span", { key: '1ddf75f9f411bd8101ea88876d9f2a053baec848', class: "card-balance-label" }, "Current Balance"), h("span", { key: '5b830f8bfa84df076f41ff60f7778ce5f79490dc', class: "card-balance" }, this.balance)), h("i", { key: '3e1c8f15f4bb42579d3bb325ed0d901523207f44', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "wifi")), h("div", { key: '347145c3282126ba71d3626ad599dc3474797a5c', class: "dda-credit-card-body" }, h("div", { key: 'e212f1520d56eab60244bf2b4b4fb5724c77ebf2', class: "card-userinfo" }, h("span", { key: '5b65a651f05cc7a26c4c1eb68162555c30e52f3c', class: "dda-card-name" }, this.name), h("span", { key: '35c6c8bd842adb512b3874204259c2b5470b9654', class: "dda-card-number" }, "**** ", this.card_number.slice(-4))), h("div", { key: 'af07bf8eb16106127585e0ef9c7c7ea5c3bd37de' }, h("img", { key: 'b35de3dd5d3df3b6926a3a489fab53c656bccafd', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
+        return (h(Host, { key: 'a2b51766a37e26931722154096371e0c6e4f613e' }, h("div", { key: '6a230b5a394819e020e6d602c24b190e10a0412b', class: cardClass }, h("div", { key: '0e736764ef1421aa4c74cfd2651f5b28b5923bfe', class: "dda-credit-card-header" }, h("div", { key: '3ca757d69ce6f3dccf6ed2a774f81af804701b4d', class: "card-balance-info" }, h("span", { key: 'f199cbddbde087a4e0019bc5f49d688aa91b332e', class: "card-balance-label" }, "Current Balance"), h("span", { key: 'e51769b4f7ac8013035074abec4677feb32b7ecb', class: "card-balance" }, this.balance)), h("i", { key: '64cac265fa7e397b4a48efeedc4fdd1bbe01463e', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "wifi")), h("div", { key: '8c14cdf5cd7932395b3b99d76dc712418034944d', class: "dda-credit-card-body" }, h("div", { key: '3c040ff604757b252088df1db1949a0b6e856bf0', class: "card-userinfo" }, h("span", { key: '1427d499c577ffefad4ea29eb01ddff6fa248a28', class: "dda-card-name" }, this.name), h("span", { key: 'fa7bc5a8a59aa86766f1d974e4e4f0819f17e59c', class: "dda-card-number" }, "**** ", String((_a = this.card_number) !== null && _a !== void 0 ? _a : '').slice(-4))), h("div", { key: '4fddb8131ca26074f5ed74d1992e15b51d20f4b1' }, this.card_type && h("img", { key: '51ea45a24d2a8101eb357b8fba88449479f69bee', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
     }
     static get is() { return "dda-credit-card"; }
     static get originalStyleUrls() {
@@ -37,7 +39,7 @@ export class DdaCreditCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Balance text shown under the fixed \"Current Balance\" label, e.g. `AED 5,750.20`."
                 },
                 "getter": false,
                 "setter": false,
@@ -56,7 +58,7 @@ export class DdaCreditCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Card holder name."
                 },
                 "getter": false,
                 "setter": false,
@@ -75,7 +77,7 @@ export class DdaCreditCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Card number. Only the last four characters are shown, after `****`. When not set, only `****` is shown."
                 },
                 "getter": false,
                 "setter": false,
@@ -94,7 +96,7 @@ export class DdaCreditCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of the card type image (e.g. a card brand logo) shown at the bottom end of the card. When not set, no image is rendered."
                 },
                 "getter": false,
                 "setter": false,
@@ -113,7 +115,7 @@ export class DdaCreditCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Background design: `default`, `green` or `dark`."
                 },
                 "getter": false,
                 "setter": false,
@@ -132,7 +134,7 @@ export class DdaCreditCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the card container."
                 },
                 "getter": false,
                 "setter": false,
@@ -152,7 +154,7 @@ export class DdaCreditCard {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the card, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.js

@@ -1,22 +1,34 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaCreditCardField {
     constructor() {
+        /** Card number. Shown as groups of four digits separated by ` - `; the component updates it as the user types. Mutable: the component assigns it. */
         this.value = '';
+        /** Disables the input and applies the disabled look. */
         this.disabled = false;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
+        /** Sets the input `maxlength`: 25 characters when `false` (16 digits with separators), 100 when `true`. */
         this.restrict_input = false;
         // F-018 (WCAG 1.3.5): card number is exactly the field type autocomplete
         // exists for. Default to the correct token; still overridable.
+        /** `autocomplete` token of the input. Defaults to `cc-number`. */
         this.autocomplete = 'cc-number';
         this.formattedValue = '';
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-creditcard-field');
+    }
+    // F-016: ids derived from the 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 = [
@@ -30,9 +42,13 @@ export class DdaCreditCardField {
         const inputValue = inputElement.value.replace(/[^0-9-]/g, '');
         const maxLength = this.restrict_input ? 100 : 25;
         if (inputValue.length <= maxLength) {
+            const changed = inputValue !== this.value;
             this.value = inputValue;
             this.formatCardNumber(this.value);
             inputElement.value = this.formattedValue;
+            if (changed) {
+                this.valueChange.emit({ value: this.value });
+            }
         }
         else {
             inputElement.value = this.formattedValue;
@@ -62,7 +78,8 @@ export class DdaCreditCardField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '640731f6a54bbae77a0a77c5dfb23e5a42a41d4f' }, h("div", { key: '402f8104c51e949a5e0fd5c9b458ee4a585c4ebd', class: inputClass }, this.label && h("label", { key: '9952ea7f684ac81c2f392b139f9c1b33cf68e923', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'cbd8c3549328e6366d78a8713faffd69093688b3', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: '3960616cd63f3368e678d6dd2a82adcb795f9f18', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: '9597182a7f98f68bf94465da894a669b95b81dc9', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: "text", inputmode: "numeric", autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.formattedValue, onInput: (event) => this.handleInput(event), class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && h("span", { key: 'ef7f3746abb8e205ee6b3be035ac9507318145b5', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '3f925024408b1ebdd4738a203ef00784efe5820f', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: '49503120129a4036ea69ad5427873e7c80689472' }, h("div", { key: 'c4bbd736f977b8fbd780ca9f51f18577f957d449', class: inputClass }, this.label && h("label", { key: '718fec1b47645d3733602fbab31cda9f09e29b9c', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'cb96d9ca72d92fb1cae781b7fc5033fbba82fa4d', class: "dda-input-field-wrapper" }, this.card_icon && h("img", { key: 'fa10e97d30a0c97245005fc66dbe81640653e2fd', src: this.card_icon, alt: "Card Icon", class: "dda-creditcard-icon" }), h("input", { key: 'c4b042e4ead4b79e1e63f00777a9f62a8f3964a6', "aria-label": this.aria_label, id: id, name: this.input_name, type: "text", inputmode: "numeric", autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.formattedValue, onInput: (event) => this.handleInput(event), class: "dda-input-field", disabled: this.disabled, maxlength: this.restrict_input ? 100 : 25, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && h("span", { key: '6021061f65edff9a4eb040285ea76147c81072f7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '32a5d2c0e72e1ec62c9c6ce89d7fc950ab77505e', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-creditcard-field"; }
     static get originalStyleUrls() {
@@ -89,7 +106,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the input, e.g. `0000 - 0000 - 0000 - 0000`."
                 },
                 "getter": false,
                 "setter": false,
@@ -108,7 +125,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label text shown above the input. Linked to the input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -117,7 +134,7 @@ export class DdaCreditCardField {
             },
             "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -127,7 +144,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Card number. Shown as groups of four digits separated by ` - `; the component updates it as the user types. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -147,7 +164,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL of an image shown at the start of the input, e.g. a card brand logo."
                 },
                 "getter": false,
                 "setter": false,
@@ -166,7 +183,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the input. Also sets `aria-invalid=\"true\"` on the input."
                 },
                 "getter": false,
                 "setter": false,
@@ -185,7 +202,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation state: `error` applies the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -204,7 +221,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `default` or `small`."
                 },
                 "getter": false,
                 "setter": false,
@@ -223,7 +240,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Adds the class `dda-input-<value>`. `disabled` gives only the disabled look; use `disabled` to disable the input."
                 },
                 "getter": false,
                 "setter": false,
@@ -242,7 +259,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the input. Linked by `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -261,7 +278,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disables the input and applies the disabled look."
                 },
                 "getter": false,
                 "setter": false,
@@ -281,7 +298,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -301,7 +318,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Sets the input `maxlength`: 25 characters when `false` (16 digits with separators), 100 when `true`."
                 },
                 "getter": false,
                 "setter": false,
@@ -321,7 +338,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -340,7 +357,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner `<input>`. Also used to link the label, helper text and error message. Optional: an id is generated when it is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -359,7 +376,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the input. Use it when there is no visible `label`."
                 },
                 "getter": false,
                 "setter": false,
@@ -378,7 +395,7 @@ export class DdaCreditCardField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner `<input>`, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -397,7 +414,7 @@ export class DdaCreditCardField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`autocomplete` token of the input. Defaults to `cc-number`."
                 },
                 "getter": false,
                 "setter": false,
@@ -412,4 +429,22 @@ export class DdaCreditCardField {
             "formattedValue": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when user input changes `value`, after the component removes characters other than digits and `-`. `detail.value` is the new `value`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/dda-creditcard-field/dda-creditcard-field.stories.js

@@ -12,7 +12,7 @@ export default {
         },
         restrict_input: {
             control: 'boolean',
-            description: 'Restrict the input field to 16 digits',
+            description: 'Sets maxlength to 100 characters instead of 25',
         },
         value: {
             control: 'text',
@@ -66,10 +66,6 @@ export default {
             control: { type: 'text' },
             description: 'Accessible label for the credit card field',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the credit card field',
-        },
         input_name: {
             control: { type: 'text' },
             description: 'Name of the input field',
@@ -100,7 +96,6 @@ export default {
     component_mode=""
     input_id="input"
     aria_label="credit-card-field"
-    onchange="console.log('changed')"
     input_name="input"
     autocomplete="cc-number"
 ></dda-creditcard-field>
@@ -132,7 +127,6 @@ Default.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'credit-card-field',
-    onchange: '',
     input_name: 'input',
     autocomplete: 'cc-number',
 };
@@ -151,7 +145,6 @@ SmallSize.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'credit-card-field',
-    onchange: '',
     input_name: 'input',
     autocomplete: 'cc-number',
 };
@@ -170,7 +163,6 @@ WithErrorMessage.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'credit-card-field',
-    onchange: '',
     input_name: 'input',
     autocomplete: 'cc-number',
 };
@@ -190,7 +182,6 @@ Disabled.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'credit-card-field',
-    onchange: '',
     input_name: 'input',
     autocomplete: 'cc-number',
 };

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

@@ -1,12 +1,22 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaDropdown {
     constructor() {
+        /** Disables the dropdown: the list does not open and options cannot be picked. */
         this.disabled = false;
+        /** Button background: `bg-white` (field style) or `bg-transparent` (no border, background or padding). */
         this.type = 'bg-white';
+        /** Size: `medium` or `small`. */
         this.size = 'medium';
-        this.icon_mode = false; // New prop for icon mode
+        /** Shows only the three-dots icon, without the selected text and arrow. */
+        this.icon_mode = false;
+        /** Extra CSS classes added to the dropdown container. */
         this.custom_class = '';
+        /** Accessible name of the dropdown button in `icon_mode` when `aria_label` and `label` are not set. */
+        this.toggle_button_label = 'Show options';
         this.isopen = false;
+        // Fallback id so the label is wired when no button_id is passed.
+        this.fallbackId = uniqueId('dda-dropdown');
     }
     get parsedOptions() {
         try {
@@ -21,13 +31,28 @@ export class DdaDropdown {
             this.isopen = !this.isopen;
         }
     }
+    // The label has no `for`: label[for] on a <button> replaces the button text
+    // as its name, so the selected option was not announced. A click on the
+    // label still acts on the button, like a native label click did.
+    onHostClick(event) {
+        var _a;
+        const target = event.target;
+        if (!target || typeof target.closest !== 'function' || !target.closest('label.dda-input-label')) {
+            return;
+        }
+        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.toggleDropdown();
+    }
     selectOption(option) {
         if (!this.disabled) {
             this.selected = option;
             this.isopen = false;
+            this.optionSelect.emit({ value: option });
         }
     }
     render() {
+        const id = this.button_id || this.fallbackId;
+        const labelId = `${id}-label`;
         const containerClass = [
             'dda-input-container dda-inline-flex',
             this.disabled ? 'dda-input-disabled' : '',
@@ -35,7 +60,7 @@ export class DdaDropdown {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '670440482e1458551292232c6ecf4b8e54222dd5' }, h("div", { key: 'fe217205cb7551e3d2589af17099f29f7ddf1459', class: containerClass }, this.label && h("label", { key: '001a9f98169f9ea10fcc81ee244aeefcdc4cf274', htmlFor: this.button_id, class: "dda-input-label" }, this.label), h("div", { key: '76a1a5219278d1a9719d66144e0705070ce8e31e', class: `dda-dropdown-container ${this.type}` }, h("button", { key: '77267978ffe12646d58cca9ea78dc8c7a09f5e60', id: this.button_id, name: this.arrow_button_name, "aria-label": this.aria_label, type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '1f055334eda72df38f48b0a6a16236ece8550dae', class: `three-dots material-icons` }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '89c83de3aeb45ab86b680414f16b531b9b93169c', class: "dda-dropdown-text" }, h("span", { key: 'ab2e18139b8bc2df6abc5c39a733623902bd43df' }, this.selected || 'Select an option'), " ", h("i", { key: '29761f83b08188e3d9d68052849be96332d6c484', class: `material-icons` }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'd2e8282cce424d2711198de03921944e9e7bba71', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '4851be0b717e83d496a449981dfb45ec4eedc7e8', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '2d5dae4c61a2e4fa3a9b864ab649fcc25cc74b0d', class: "dda-error-message" }, this.error))));
+        return (h(Host, { key: '8b053569398521717cd7b5fecfc20da86ddc36e2' }, h("div", { key: 'f05077b9937e415212e3ca95272284f4f43a2f4e', class: containerClass }, this.label && h("label", { key: '5d7a1d12cece57a300deb5ee40ac42fe30991e05', id: labelId, class: "dda-input-label" }, this.label), h("div", { key: 'dec4834ffda3aaf39799640c2e3403ad2bbde804', class: `dda-dropdown-container ${this.type}` }, h("button", { key: '74cdd5264b2ba9e149b002ef9f32761d4657dffe', ref: el => (this.buttonEl = el), id: id, name: this.arrow_button_name, "aria-label": this.aria_label || (this.icon_mode && !this.label ? this.toggle_button_label : undefined), "aria-labelledby": this.label && !this.aria_label ? `${labelId} ${id}` : undefined, "aria-expanded": this.isopen ? 'true' : 'false', type: "button", class: "dda-input-field dda-dropdown-header", onClick: () => this.toggleDropdown() }, h("i", { key: '114ea6a6e36e3f10fb2eb170a0869c659be91fcc', class: `three-dots material-icons`, "aria-hidden": "true" }, this.isopen ? 'more_vert' : 'more_vert'), !this.icon_mode && h("span", { key: '38daede9e618b1f3cf3b04e73799f5ba94f2aabe', class: "dda-dropdown-text" }, h("span", { key: 'd8e2f92b77bfd9611b56322123c22282051d6744' }, this.selected || 'Select an option'), " ", h("i", { key: '11ce919e89fbbe0bbcc5df8124d40ffa683e9520', class: `material-icons`, "aria-hidden": "true" }, this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))), this.isopen && (h("div", { key: 'e1ab0eb1476986e8964eea8469d367b9f607f737', class: "dda-input-dropdown-list" }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("button", { type: "button", name: this.dropdown_button_name, class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '8d8f98cd697819f29bebc593167ef47c4e5eed33', class: "dda-helper-text" }, this.helper_text), this.error && h("span", { key: '4c129c5b219115796263afe4daf726ea9b77ee04', class: "dda-error-message" }, this.error))));
     }
     static get is() { return "dda-dropdown"; }
     static get originalStyleUrls() {
@@ -62,7 +87,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label shown above the dropdown. The dropdown button is named by the label and its current text."
                 },
                 "getter": false,
                 "setter": false,
@@ -81,7 +106,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Options as a JSON array string, e.g. `'[\"Edit\",\"Download\",\"Delete\"]'`. Invalid JSON shows \"No options available\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -90,7 +115,7 @@ export class DdaDropdown {
             },
             "selected": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -100,7 +125,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The selected option. Must match an entry in `options`. The button shows \"Select an option\" when it is empty. Updated when the user picks an option. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -119,7 +144,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disables the dropdown: the list does not open and options cannot be picked."
                 },
                 "getter": false,
                 "setter": false,
@@ -139,7 +164,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown under the dropdown."
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +183,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown under the dropdown."
                 },
                 "getter": false,
                 "setter": false,
@@ -177,7 +202,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Button background: `bg-white` (field style) or `bg-transparent` (no border, background or padding)."
                 },
                 "getter": false,
                 "setter": false,
@@ -197,7 +222,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `medium` or `small`."
                 },
                 "getter": false,
                 "setter": false,
@@ -217,7 +242,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows only the three-dots icon, without the selected text and arrow."
                 },
                 "getter": false,
                 "setter": false,
@@ -237,7 +262,7 @@ export class DdaDropdown {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the dropdown container."
                 },
                 "getter": false,
                 "setter": false,
@@ -257,7 +282,7 @@ export class DdaDropdown {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the dropdown, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -276,7 +301,7 @@ export class DdaDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the dropdown button. The label id is built from it. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -295,7 +320,7 @@ export class DdaDropdown {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the dropdown button. Set it when `icon_mode` is on."
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +339,7 @@ export class DdaDropdown {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the dropdown button that opens the list."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,12 +358,32 @@ export class DdaDropdown {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each option button in the list."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "dropdown_button_name"
+            },
+            "toggle_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the dropdown button in `icon_mode` when `aria_label` and `label` are not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_button_label",
+                "defaultValue": "'Show options'"
             }
         };
     }
@@ -347,4 +392,31 @@ export class DdaDropdown {
             "isopen": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "optionSelect",
+                "name": "optionSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted every time the user picks an option, also when it is already selected, so the dropdown works as an action menu. `detail.value` is the option."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onHostClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }