@dubai-design-system/components-js 5.3.0 → 5.3.1

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

@@ -16,7 +16,7 @@ export class DdaProgressBar {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: '097789c9ac738134268e473677410f6966fb2a2e' }, h("div", { key: '7822aa7f33639e49e37248201458931b0418c6a3', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a26c90a915992100c6c1b7763bf40fc86b7786fd', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '4c4945e57ffe790edc31d2787fd2ad89f9292cbb', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '978a8fcfd4101ebe52bf1d2fbc4d0276171bb751', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'ee75db5f57bb41d78cc3cd3e0eecc63520637bec', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: '04313ddfb70c55db686fea642590ba75ab52d00f' }, h("div", { key: '9daec3039295c313c661f990a5e95a583508a744', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: '784a889d7db67402936a560997cbd12d59c886df', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '5429f351051181423e18a271269babd479f15e9a', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '2178aa8908e5fce94a72c1a2b8dada282addc9fe', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: '323b032598d4bbe965dd8e56874835d3573b6adb', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-radiobutton/dda-radiobutton.css

@@ -3203,6 +3203,11 @@ body {
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
+/* On the transparent header the typed text and the caret are white, like the placeholder. */
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"] {
+    color: var(--dda-neutral-100);
+    caret-color: var(--dda-neutral-100);
+}
 .transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }

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

@@ -13,7 +13,7 @@ export class DdaRadiobutton {
             this.radio_status ? `dda-radio-${this.radio_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'c324fbb5277d318a4f6550f18950ed02cbd0b781' }, h("div", { key: 'dd31d4f163976c7341aceeea2b6fa2a3b2f09ad4', class: radiobuttonClass }, h("input", { key: '920ff8e75067733041c6868bb90556a801a1040c', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '7fe73646f3a9f87aa17fba687dd90b06be9277fc', htmlFor: this.input_id }, h("span", { key: 'f8113a4da08152bd0a61ca72e20dfc520d4c561d', class: "radio-circle" }), h("p", { key: 'e08ad9c71518a60081c8ea1ab688e497cb6c7b1f' }, h("span", { key: 'e38e4b2fc129edf82b4a603acf753c9c3afbbb1b', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '0c5f35d22f5db9af755f8056e0f14e6a0e694ceb', class: "radio-supporting" }, this.supporting))))));
+        return (h(Host, { key: 'dd57237727d215708e18097d29e1543b27f155fd' }, h("div", { key: 'c9997615a28ba5e6b39dd5192bce8be6bafa3294', class: radiobuttonClass }, h("input", { key: '06e80cd7290b4582174d1d5ac66016091c9be88b', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '1d337acbc432e898381079385de5a44ea7e84d7c', htmlFor: this.input_id }, h("span", { key: 'b3864f116634c2c3d4dca437df9f7e06c9897844', class: "radio-circle" }), h("p", { key: '19241cca6592bc73e695ef7801a6faf18e1a566f' }, h("span", { key: 'a082d64589f2452401380039adfe65d34747c679', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: 'd98a860bbe61b9e09c06f164108c5d49612c9a3a', class: "radio-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -40,10 +40,10 @@ export class DdaRangeSlider {
     render() {
         const leftId = this.left_input_id || `${this.fallbackId}-min`;
         const rightId = this.right_input_id || `${this.fallbackId}-max`;
-        return (h(Host, { key: '1af601923e27b7c62ef97b8a5199f71003f46a46' }, h("div", { key: '69d46d14321399d2d5e39969a211953c6a87a9a1', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'fbfecb4cc371d29c862f9408f8af579f05149561', class: "dda-range-slider" }, h("div", { key: '7bc922c71312956eb782250e3e9425d0494996b4', class: "dda-range-slider-track", style: {
+        return (h(Host, { key: '183b4a9a57ed9c7c64158595d6d8ecc7985784a4' }, h("div", { key: '741df5d78729be31eb32701d3aa13b7fc6190682', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '13d362fc01c2189edfce78dcc01ae6ae7a397c49', class: "dda-range-slider" }, h("div", { key: '1f5cc6b659e517107a035f15e79245eec9dbd09d', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: 'ec67480ab23cca5d2e905ee6b04c7cea3c2fcb17', class: "min-label" }, this.min_value, "%"), h("span", { key: '77d4387ab709f62f4b97fc1d6c49f0821a10145e', class: "max-label" }, this.max_value, "%")), h("span", { key: '2c455e418dfc1d4716364424fad33565ae65a503' }, h("input", { key: 'c87f18613d6b4e92c100587a340e96a7ea66474e', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '1b59740d95af2396e7183d250edff76ab8641156' }, h("input", { key: 'c88c8f1358767b3a00b5144c4e689f6e553ebbd7', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: '79773cfafea77732a556d70819ea4ac8875c19fd', class: "min-label" }, this.min_value, "%"), h("span", { key: 'e5663666fce21bd4a2a59b811cd740577b890c35', class: "max-label" }, this.max_value, "%")), h("span", { key: 'b4ab6d47bb1e26e0ed4ba430eab6218f5168cefa' }, h("input", { key: '3eb384952b21acf20fefb49e8cc2fd2565c4fb9d', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '8bfe1915e08e6ce035f74cf781ac9543736bd7e2' }, h("input", { key: '3abcde5b1d268d0d56f687caadfcf16340ae6c4f', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-scroll-icon/dda-scroll-icon.css

@@ -0,0 +1,72 @@
+dda-scroll-icon {
+  display: inline-flex;
+}
+.dda-scroll-icon-scroll {
+  border-style: solid;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+.scroll-icon-size-sm {
+  width: 16.5px;
+  height: 24px;
+  border-width: 2px;
+}
+.scroll-icon-size-lg {
+  width: 40px;
+  height: 60px;
+  border-width: 4px;
+}
+.scroll-icon-color-white {
+  border-color: #ffffff;
+}
+.scroll-icon-color-black {
+  border-color: #000000;
+}
+.dda-scroll-icon-scroll-dot {
+  border-radius: 50%;
+}
+.scroll-icon-color-white .dda-scroll-icon-scroll-dot {
+  background: #ffffff;
+}
+.scroll-icon-color-black .dda-scroll-icon-scroll-dot {
+  background: #000000;
+}
+.scroll-icon-size-sm .dda-scroll-icon-scroll-dot {
+  width: 4.5px;
+  height: 4.5px;
+  transform: translateY(2px);
+}
+.scroll-icon-size-lg .dda-scroll-icon-scroll-dot {
+  width: 12px;
+  height: 12px;
+  transform: translateY(5px);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .scroll-icon-size-sm .dda-scroll-icon-scroll-dot {
+    animation: dda-scroll-icon-sm var(--animation-duration, 1.8s) infinite;
+  }
+  .scroll-icon-size-lg .dda-scroll-icon-scroll-dot {
+    animation: dda-scroll-icon-lg var(--animation-duration, 1.5s) infinite;
+  }
+}
+@keyframes dda-scroll-icon-sm {
+  0%,
+  100% {
+    transform: translateY(2px);
+  }
+  50% {
+    transform: translateY(10px);
+  }
+}
+@keyframes dda-scroll-icon-lg {
+  0%,
+  100% {
+    transform: translateY(5px);
+  }
+  50% {
+    transform: translateY(24px);
+  }
+}

package/dist/collection/components/dda-scroll-icon/dda-scroll-icon.js

@@ -0,0 +1,120 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { Host, h } from "@stencil/core";
+// A decorative "scroll down" mouse icon. It carries no information, so it is hidden from
+// assistive technology, and its dot moves only when the user has not asked for reduced motion.
+export class DdaScrollIcon {
+    constructor() {
+        /** Size: `sm` (16.5 × 24px) or `lg` (40 × 60px). Default: `sm`. */
+        this.scroll_icon_size = 'sm';
+        /** Colour: `white` or `black`. Default: `white`. */
+        this.scroll_icon_color = 'white';
+        /** Extra CSS classes on the icon. */
+        this.custom_class = '';
+    }
+    render() {
+        const className = [
+            'dda-scroll-icon-scroll',
+            `scroll-icon-size-${this.scroll_icon_size || 'sm'}`,
+            `scroll-icon-color-${this.scroll_icon_color || 'white'}`,
+            this.custom_class,
+            this.component_mode,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: '7aa27a84683b21941cc9f843579736d85a5f3717', "aria-hidden": "true" }, h("div", { key: '59a540879bb9786d8088ca64ea0e0ca3ee8b82c2', class: className }, h("div", { key: 'f44dc05a49f86b9af2460de11381516fbe86127b', class: "dda-scroll-icon-scroll-dot" }))));
+    }
+    static get is() { return "dda-scroll-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dda-scroll-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dda-scroll-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scroll_icon_size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'lg'",
+                    "resolved": "\"lg\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size: `sm` (16.5 \u00D7 24px) or `lg` (40 \u00D7 60px). Default: `sm`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll_icon_size",
+                "defaultValue": "'sm'"
+            },
+            "scroll_icon_color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'white' | 'black'",
+                    "resolved": "\"black\" | \"white\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour: `white` or `black`. Default: `white`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll_icon_color",
+                "defaultValue": "'white'"
+            },
+            "custom_class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra CSS classes on the icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom_class",
+                "defaultValue": "''"
+            },
+            "component_mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme override class, e.g. `light-mode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component_mode"
+            }
+        };
+    }
+}

package/dist/collection/components/dda-scroll-icon/dda-scroll-icon.stories.js

@@ -0,0 +1,17 @@
+export default {
+    title: 'Components/Scroll Icon',
+    tags: ['autodocs'],
+    component: 'dda-scroll-icon',
+    argTypes: {
+        scroll_icon_size: { control: 'select', options: ['sm', 'lg'], description: 'Size of the icon' },
+        scroll_icon_color: { control: 'select', options: ['white', 'black'], description: 'Colour of the icon' },
+    },
+};
+const Template = args => `
+  <div style="padding: 24px; background: ${args.scroll_icon_color === 'white' ? '#1d211b' : '#ffffff'};">
+    <dda-scroll-icon scroll_icon_size="${args.scroll_icon_size}" scroll_icon_color="${args.scroll_icon_color}"></dda-scroll-icon>
+  </div>`;
+export const Default = Template.bind({});
+Default.args = { scroll_icon_size: 'sm', scroll_icon_color: 'white' };
+export const LargeBlack = Template.bind({});
+LargeBlack.args = { scroll_icon_size: 'lg', scroll_icon_color: 'black' };

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

@@ -46,7 +46,7 @@ export class DdaSearchInput {
     }
     render() {
         const id = this.inputId;
-        return (h(Host, { key: 'a04933a4ee9971b6ec7c072f53a6f1b4f065f2fe' }, h("div", { key: '5fe0c2752a3264b9d5c746a6f896b5e035db8a11', 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: 'a9e72000f00dcaaaaf868294a056b8b27d677994', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '304af511df79764b150ab91f50cfb161d47e9400', class: "dda-search-area dda-search-action" }, h("i", { key: 'bc6f44b62a7689f5885c6b6a7ccabfb93674b892', class: "material-icons icon-left", "aria-hidden": "true" }, "search"), h("input", { key: '972a383d29613793a37dfaa8aa47b34901db90ab', 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: '398e33adf066c9b80f8500628677ef3bd360c380', class: "dda-search-btngroup" }, h("button", { key: 'f46d5b85fc84154af0c30dfadb8e963bf08f01ee', 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: '333cc8bc389f34bd707a89a077e04ba43806128e', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")), this.show_button && (h("button", { key: '75e608f7b78350d120442fa35cf6fa17e041806c', name: this.search_button_name, type: "button", class: "dda-btn btn-color-default-primary dda-btn-sm" }, "Search")))), this.helper_text && h("span", { key: '58be16a63bd590a3cced76e83b3656d465c5eb1f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '39f6f55a3cda6eba1e919744094670d10dff78b6', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        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() {

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

@@ -15,6 +15,19 @@ export class Ddaselect {
         // 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.onTriggerBlur = (event) => {
+            var _a;
+            // A keyboard ArrowDown/Up on the trigger opens the list and moves focus into it — that is
+            // not the user leaving the field, so skip the event when focus lands back inside this.el.
+            const related = event.relatedTarget;
+            if (related && this.el.contains(related)) {
+                return;
+            }
+            this.selectBlurred.emit({
+                name: this.input_name || this.button_id || this.triggerId,
+                value: ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.text) || '',
+            });
+        };
         this.onTriggerKeyDown = (event) => {
             if (this.disabled) {
                 return;
@@ -98,12 +111,51 @@ export class Ddaselect {
         return ids.length ? ids.join(' ') : undefined;
     }
     get parsedOptions() {
-        try {
-            return JSON.parse(this.options);
+        let raw = this.options;
+        if (typeof raw === 'string') {
+            try {
+                raw = JSON.parse(raw);
+            }
+            catch (_a) {
+                return [];
+            }
         }
-        catch (_a) {
+        if (!Array.isArray(raw))
             return [];
-        }
+        return raw
+            .map((entry) => {
+            var _a;
+            if (typeof entry === 'string')
+                return { id: entry, text: entry };
+            if (entry && typeof entry === 'object' && typeof entry.text === 'string') {
+                const option = entry;
+                // Keep the original entry as `source` so selectChanged can emit it with any extra
+                // fields (e.g. `code`) the page passed in, as 3.x did.
+                return { id: (_a = option.id) !== null && _a !== void 0 ? _a : option.text, text: option.text, source: option };
+            }
+            return null;
+        })
+            .filter((option) => option !== null);
+    }
+    // 3.x matched `selected` against the id (as a string) or the text. An id match wins over a
+    // text match, so two options with the same text but different ids stay apart.
+    findSelected(options) {
+        var _a;
+        if (this.selected === undefined || this.selected === null)
+            return undefined;
+        const value = String(this.selected);
+        return (_a = options.find(option => String(option.id) === value)) !== null && _a !== void 0 ? _a : options.find(option => option.text === value);
+    }
+    get selectedOption() {
+        return this.findSelected(this.parsedOptions);
+    }
+    get triggerLabel() {
+        if (this.aria_label)
+            return this.aria_label;
+        // main_aria_label sets aria-label, which replaces aria-labelledby. Only use it when there is
+        // no label to keep aria-labelledby for; otherwise the label and the selected value would stop
+        // being announced.
+        return this.label ? undefined : this.main_aria_label || undefined;
     }
     focusOption(index) {
         const options = Array.from(this.el.querySelectorAll('.dda-input-dropdown-item[role="option"]'));
@@ -119,8 +171,9 @@ export class Ddaselect {
     }
     initialOptionIndex() {
         const options = this.parsedOptions;
-        const selectedIndex = options.indexOf(this.selected);
-        return selectedIndex >= 0 ? selectedIndex : 0;
+        const selected = this.findSelected(options);
+        const index = selected ? options.indexOf(selected) : -1;
+        return index >= 0 ? index : 0;
     }
     toggleSelect() {
         if (!this.disabled) {
@@ -149,12 +202,19 @@ export class Ddaselect {
         this.toggleSelect();
     }
     selectOption(option) {
+        var _a;
         if (!this.disabled) {
-            const changed = this.selected !== option;
-            this.selected = option;
+            const value = String(option.id);
+            // Compare against the currently *matched* option's id, not the raw `selected` prop: when
+            // `selected` holds text or a differently-typed id (e.g. a number), comparing it to
+            // `value` directly reported a change that had not happened.
+            const currentSelected = this.findSelected(this.parsedOptions);
+            const changed = String(currentSelected === null || currentSelected === void 0 ? void 0 : currentSelected.id) !== value;
+            this.selected = value;
             this.closeAndReturnFocus();
+            this.selectChanged.emit((_a = option.source) !== null && _a !== void 0 ? _a : { id: option.id, text: option.text });
             if (changed) {
-                this.selectionChange.emit({ value: option });
+                this.selectionChange.emit({ value, id: option.id, text: option.text });
             }
         }
     }
@@ -166,8 +226,17 @@ export class Ddaselect {
         }
     }
     render() {
+        var _a;
         const id = this.triggerId;
-        return (h(Host, { key: '1c91c9a3fe3d57849fbf1f2e54494412fbe39e15' }, h("div", { key: '87f88aa9629cfd9ee7cbe2b6b12ff21f1ad463b8', 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: '31d3c458112c6a44f7e9d5c488e6c6959521faa9', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: 'cdf70b1a3ebfef09df49f3b399d2cdc960ea9fd3', class: "dda-dropdown-container" }, h("button", { key: '3223419582be3819dff4b0613999eb37a9e10cb9', 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: '9a14de25046bf78a44b5afa3575ace2b0031f8c6', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '48b9417d23766f0c8654df0f8653c7c28f6f5464', 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: '391eefc548be3ee063cea84368917191a61b70f2', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'b9e5a701944138256c439a99375b3739a12a8b7d', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const options = this.parsedOptions;
+        const current = this.findSelected(options);
+        // Computed once here (not per option below) to keep the list render O(n) instead of O(n^2).
+        const activeIndex = current ? options.indexOf(current) : 0;
+        const validation = this.error || this.validation_type;
+        return (h(Host, { key: '79b4f368bdab0911dde6303d33ab79c8ea093399' }, h("div", { key: '8f9d7984043832d14d72ed6770b5ea384b3e4015', 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-${validation} ` }, this.label && h("label", { key: 'c3e73bc801980fe409dde6078b5763edbc249292', id: this.labelId, class: "dda-input-label" }, this.label), h("div", { key: '2572ef664b2aafcefd62c7361337d2aa9a649438', class: "dda-dropdown-container" }, h("button", { key: 'cda07037871e133d06a54c4da37abee49db11f59', name: this.toggle_button_name, "aria-label": this.triggerLabel, "aria-labelledby": this.label && !this.triggerLabel ? `${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, onBlur: this.onTriggerBlur }, current ? current.text : ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select an option'), h("i", { key: '3d8f579d35ad0516e78530b548d61858d0721831', class: `material-icons`, "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.is_open && (h("div", { key: '66eb4b2edd1f716a95be787e4cfd9185936bc62f', id: this.listboxId, role: "listbox", "aria-label": this.triggerLabel || this.label, class: "dda-input-dropdown-list dda-select-list" }, options.length > 0 ? (options.map((option, index) => {
+            const isCurrent = current !== undefined && String(current.id) === String(option.id);
+            return (h("button", { name: this.option_select_button_name, type: "button", role: "option", "aria-selected": isCurrent ? 'true' : 'false', tabIndex: index === activeIndex ? 0 : -1, class: `dda-input-dropdown-item ${isCurrent ? 'selected' : ''}`, onClick: () => this.selectOption(option), onKeyDown: (event) => this.onOptionKeyDown(event, option), key: `${index}-${option.id}` }, option.text));
+        })) : (h("div", { class: "dda-input-dropdown-item" }, "No options available"))))), this.helper_text && h("span", { key: '31d9c4afb879454e109e7d6fb406b5467ef5c495', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '2b6ab09e5477120046fbacf530c514c8421a4aaa', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-select"; }
     static get originalStyleUrls() {
@@ -205,15 +274,25 @@ export class Ddaselect {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "string | Array<string | SelectOption>",
+                    "resolved": "(string | SelectOption)[] | string",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "id": "src/components/dda-select/dda-select.tsx::SelectOption"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Options as a JSON array string, e.g. `'[\"Dubai\",\"Abu Dhabi\",\"Sharjah\"]'`. Invalid JSON shows \"No options available\"."
+                    "text": "Options: a JSON array, or an array property, of strings (`[\"Dubai\",\"Sharjah\"]`) or 3.x `{ id, text }` objects (`[{\"id\":1,\"text\":\"Dubai\"}]`). Other entries are ignored. Invalid JSON shows \"No options available\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +311,7 @@ export class Ddaselect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
+                    "text": "The selected option: its id, or its text. For string options the id is the text. Updated to the picked option's id (as a string) when the user picks one. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -449,6 +528,82 @@ export class Ddaselect {
                 "setter": false,
                 "reflect": false,
                 "attribute": "option_select_button_name"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text in the trigger when nothing is selected. Default: `Select an option`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "input_name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`name` sent in `selectBlurred`. Falls back to `button_id`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input_name"
+            },
+            "main_aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x name of `aria_label`, used as the trigger's aria-label only when `label` is not set. `aria_label` wins when both are set; when `label` is set, `main_aria_label` is ignored and the trigger keeps its `aria-labelledby`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "main_aria_label"
+            },
+            "validation_type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x name of `error` (the validation state class). `error` wins when both are set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validation_type"
             }
         };
     }
@@ -466,11 +621,47 @@ export class Ddaselect {
                 "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."
+                    "text": "Emitted when the user picks an option other than the selected one, by mouse or keyboard. `detail.value` is the new `selected` value (the option id as a string); `detail.id` and `detail.text` are the option."
+                },
+                "complexType": {
+                    "original": "{ value: string; id: string | number; text: string }",
+                    "resolved": "{ value: string; id: string | number; text: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "selectChanged",
+                "name": "selectChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x event: emitted each time the user picks one, even if it is already selected. For a string\noption this is `{ id, text }`; for an object option this is the original option object, extra\nfields included, as 3.x did."
+                },
+                "complexType": {
+                    "original": "SelectOption",
+                    "resolved": "SelectOption",
+                    "references": {
+                        "SelectOption": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-select/dda-select.tsx",
+                            "id": "src/components/dda-select/dda-select.tsx::SelectOption"
+                        }
+                    }
+                }
+            }, {
+                "method": "selectBlurred",
+                "name": "selectBlurred",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "3.x event: emitted when the trigger loses focus, with `{ name, value }` \u2014 `input_name` (or `button_id`) and the selected text."
                 },
                 "complexType": {
-                    "original": "{ value: string }",
-                    "resolved": "{ value: string; }",
+                    "original": "{ name: string; value: string }",
+                    "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
             }];