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

package/dist/collection/components/dda-attach-file/dda-attach-file.js

@@ -6,11 +6,15 @@ import excelIcon from "../../assets/img/icn/icn-Excel.svg";
 import imageIcon from "../../assets/img/icn/icn-Image.svg";
 import videoIcon from "../../assets/img/icn/icn-Video.svg";
 import onenoteIcon from "../../assets/img/icn/icn-OneNote.svg";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaAttachFile {
     constructor() {
         this.file = null;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
+        /** Accessible name of the file input. Not rendered when empty. */
         this.aria_label = '';
+        /** Accessible name of the remove button shown after a file is chosen, e.g. `Remove file`. */
         this.button_aria_label = '';
         this.fileIcons = {
             pdf: pdfIcon,
@@ -24,6 +28,9 @@ export class DdaAttachFile {
             mkv: videoIcon,
             one: onenoteIcon,
         };
+        // Per-instance fallback, so the labels, helper and error text stay linked
+        // to the file input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-attach-file');
     }
     handleFileInput(event) {
         const files = event.target.files;
@@ -36,18 +43,26 @@ export class DdaAttachFile {
     }
     removeFile() {
         this.file = null;
+        // The file input stays in the DOM (so a native form submit sends the
+        // file), so clear it too, or the removed file would still be submitted.
+        if (this.fileInput) {
+            this.fileInput.value = '';
+        }
     }
     getFileIcon(fileName) {
         const extension = fileName.split('.').pop().toLowerCase();
         return this.fileIcons[extension] || 'path/to/default-icon.png';
     }
-    // F-016: ids derived from the consumer-supplied input_id, same pattern as
-    // dda-input/dda-select.
+    // F-016: ids derived from the file input id (the consumer-supplied
+    // input_id, or the generated fallback), same pattern as dda-input.
+    get inputId() {
+        return this.input_id || this.fallbackId;
+    }
     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 = [
@@ -65,7 +80,8 @@ export class DdaAttachFile {
             this.custom_class,
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '02b1e08ea2bf657fb54e1a7506852f696658eb4c' }, h("div", { key: 'ea657b0a3bc0196edb10dc22006f378df968e92e', class: inputClass }, this.label && h("label", { key: 'b21659aae1c9906c2a74603eeada8a329ebdbb81', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '907242aa03fa4723528545687a096e0224b34bc0', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: this.input_id, class: "dda-file-choose" }, "Choose File", h("input", { id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "file", onInput: (event) => { this.handleFileInput(event); }, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }))))), this.helper_text && h("span", { key: '14f2a6f6ed78d54b4edb2afe7057f5caf4127356', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '513cdbc27c0dc0ca1edf1026d4e6447090f5e2b6', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: '6c02affad592523dbfd0718c7e3a1c3cdaabaa5d' }, h("div", { key: 'adbb23b5820fc0691005ab2b0b24437ae9d8de5e', class: inputClass }, this.label && h("label", { key: '0752ba9cc62ab42342275a3404f24015eaee2970', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '0fdf02bdb47946440d0d942a191228dfc16b0faa', class: "dda-input-field-group dda-attach-file" }, h("input", { key: 'd8a998efbc6c89a5f71a1f5f453f530772c89f54', ref: (el) => (this.fileInput = el), id: id, name: this.input_name, "aria-label": this.aria_label || (this.label ? undefined : 'Choose file'), type: "file", onInput: (event) => { this.handleFileInput(event); }, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { type: "button", id: this.button_id, name: this.button_name, "aria-label": this.button_aria_label || `Remove ${this.file.name}`, class: "remove-file", onClick: () => this.removeFile() }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, "No File Selected"), h("label", { htmlFor: id, class: "dda-file-choose" }, "Choose File")))), this.helper_text && h("span", { key: '8ae9ce5a344e6bae48398514f5e4709064c2ff07', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'f16a52e31eddf59fbb6e05f3285bf5abb0f91aa3', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-attach-file"; }
     static get originalStyleUrls() {
@@ -92,7 +108,7 @@ export class DdaAttachFile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label text shown above the field. Linked to the file input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -111,7 +127,7 @@ export class DdaAttachFile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field. Linked by `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -130,7 +146,7 @@ export class DdaAttachFile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field. Also sets `aria-invalid=\"true\"` on the file input."
                 },
                 "getter": false,
                 "setter": false,
@@ -149,7 +165,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `default` or `small`."
                 },
                 "getter": false,
                 "setter": false,
@@ -168,7 +184,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation state: `error` applies the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -187,7 +203,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Adds the class `dda-input-<value>`. `disabled` gives the disabled look only; it does not disable the file input."
                 },
                 "getter": false,
                 "setter": false,
@@ -206,7 +222,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -226,7 +242,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -245,7 +261,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the file input. Not rendered when empty."
                 },
                 "getter": false,
                 "setter": false,
@@ -265,7 +281,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the remove button shown after a file is chosen, e.g. `Remove file`."
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +301,7 @@ export class DdaAttachFile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the file 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,
@@ -304,7 +320,7 @@ export class DdaAttachFile {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the remove button shown after a file is chosen."
                 },
                 "getter": false,
                 "setter": false,
@@ -323,7 +339,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the remove button shown after a file is chosen."
                 },
                 "getter": false,
                 "setter": false,
@@ -342,7 +358,7 @@ export class DdaAttachFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the file input."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/dda-attach-file/dda-attach-file.stories.js

@@ -23,7 +23,6 @@ export default {
     button_aria_label="button"
     button_name="button"
     input_name="input"
-    onchange="console.log('changed')"
 ></dda-attach-file>
     \`\`\`
   `,
@@ -83,10 +82,6 @@ export default {
             control: 'text',
             description: 'Aria label for the upload button',
         },
-        onchange: {
-            control: 'text',
-            description: 'onchange event for the attach file component',
-        },
         button_name: {
             control: 'text',
             description: 'Name for the upload button',
@@ -118,7 +113,6 @@ Default.args = {
     button_id: 'button',
     aria_label: 'input',
     button_aria_label: 'button',
-    onchange: '',
     button_name: 'button',
     input_name: 'input'
 };
@@ -136,7 +130,6 @@ Small.args = {
     button_id: 'button',
     aria_label: 'input',
     button_aria_label: 'button',
-    onchange: '',
     button_name: 'button',
     input_name: 'input'
 };
@@ -154,7 +147,6 @@ ErrorState.args = {
     button_id: 'button',
     aria_label: 'input',
     button_aria_label: 'button',
-    onchange: '',
     button_name: 'button',
     input_name: 'input'
 };
@@ -172,7 +164,6 @@ Disabled.args = {
     button_id: 'button',
     aria_label: 'input',
     button_aria_label: 'button',
-    onchange: '',
     button_name: 'button',
     input_name: 'input'
 };

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

@@ -1,14 +1,23 @@
 import { h } from "@stencil/core";
 export class DdaAvatar {
     constructor() {
+        /** Content: `photo` shows the `src` image, `icon` shows a smiley icon, `text` shows `text` as initials. */
         this.type = 'photo';
+        /** Size: `xs` (24px), `sm` (32px), `md` (40px), `lg` (48px), `xl` (56px) or `xxl` (64px). */
         this.size = 'md';
+        /** Badge: `default` (none), `status` (green dot), `verified` (check badge), `notification` (count from `notification_number`). `story` has no style yet. */
         this.design = 'default';
+        /** Shape: `circle` or `square` (rounded corners). */
         this.rounded = 'circle';
-        this.src = ''; // For photo type
-        this.icon = 'material-icons'; // For icon type
-        this.text = 'AB'; // For text type
-        this.notification_number = 0; // For notification design
+        /** Image URL shown when `type` is `photo`. */
+        this.src = '';
+        /** CSS class of the icon font used when `type` is `icon`, e.g. `material-icons`. The icon glyph is always `sentiment_satisfied`. */
+        this.icon = 'material-icons';
+        /** Initials shown when `type` is `text`. */
+        this.text = 'AB';
+        /** Count shown in the badge when `design` is `notification`. Hidden at sizes `xs` and `sm`. */
+        this.notification_number = 0;
+        /** Extra CSS classes added to the avatar container. */
         this.custom_class = '';
         this.isOpen = false;
     }
@@ -18,6 +27,7 @@ export class DdaAvatar {
     selectOption(option) {
         this.selected = option;
         this.isOpen = false;
+        this.optionSelect.emit({ value: option });
     }
     get parsedOptions() {
         try {
@@ -30,11 +40,11 @@ export class DdaAvatar {
     render() {
         const hasOptions = this.parsedOptions.length > 0;
         const avatarContent = [
-            this.type === 'photo' && h("img", { key: '5455ae34642a1a696172dcb9b6985f9b7fc88df2', src: this.src, alt: "Avatar" }),
-            this.type === 'icon' && h("i", { key: 'ada1e07644b9a96e36335a7490db0451099b6bd0', class: `${this.icon} dda-smile` }, "sentiment_satisfied"),
-            this.type === 'text' && h("span", { key: 'd7cb60a8861f09c69dbcdbca401331f57b0b8805', class: 'avatar-main-text' }, this.text),
+            this.type === 'photo' && h("img", { key: '4823e200a9e782d34c89a440e4bcf8c721d2dbac', src: this.src, alt: "Avatar" }),
+            this.type === 'icon' && h("i", { key: 'df5437bbfaf72949ef5a0fb73668cbce45f97b92', class: `${this.icon} dda-smile` }, "sentiment_satisfied"),
+            this.type === 'text' && h("span", { key: '765b4a8c095760ab4f93561869a04af5b0a8629e', class: 'avatar-main-text' }, this.text),
         ];
-        return (h("div", { key: 'aad1a0787cae3bd4eb0db425f16e0c3403f306af', class: {
+        return (h("div", { key: '6682fd805892257e209e89b5514d1ec946ca6c93', class: {
                 'dda-avatar': true,
                 [`avatar-type-${this.type}`]: true,
                 [`avatar-size-${this.size}`]: true,
@@ -43,7 +53,7 @@ export class DdaAvatar {
                 [`${this.custom_class}`]: true,
                 [`${this.component_mode}`]: true,
                 [`${this.button_name}`]: true,
-            } }, hasOptions ? (h("button", { type: "button", class: "avatar-trigger", onClick: () => this.toggleDropdown(), "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.aria_label || 'Avatar options' }, avatarContent)) : (h("div", { class: "avatar-trigger" }, avatarContent)), hasOptions && this.isOpen && (h("div", { key: 'aad8ebd1a5df312d76d4051a92a3d2a3aa9e84e6', class: "dda-input-dropdown-list" }, this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option))))), this.design === 'status' && h("div", { key: '65373d337dd0c2265c8f787619ab14fdd8be2f53', class: "status-circle" }), this.design === 'verified' && h("div", { key: 'ee627f6d549434ec4faf03affbc14f2a8d1c4ab9', class: "verified-icon" }, h("span", { key: '43dc04d4dbe9ae6889a0a8552a04278ed078bcf2', class: "material-icons  material-symbols-outlined" }, "verified")), this.design === 'notification' && h("div", { key: '35970e35388fbbd3ea4fe5887d7e84bdc2193209', class: "notification-circle" }, this.notification_number)));
+            } }, hasOptions ? (h("button", { type: "button", class: "avatar-trigger", onClick: () => this.toggleDropdown(), "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.aria_label || 'Avatar options' }, avatarContent)) : (h("div", { class: "avatar-trigger" }, avatarContent)), hasOptions && this.isOpen && (h("div", { key: '162d00860b22f1ffd6dce0d7aad1e834e4f3375f', class: "dda-input-dropdown-list" }, this.parsedOptions.map(option => (h("button", { id: this.button_id, name: this.button_name, "aria-label": this.aria_label, type: "button", class: `dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`, onClick: () => { this.selectOption(option); } }, option))))), this.design === 'status' && h("div", { key: '7619e3c34b74c0c6454b0967eec02302fc23c020', class: "status-circle" }), this.design === 'verified' && h("div", { key: 'd728730b0b15f67836fc2e76b1e660f11954afdd', class: "verified-icon" }, h("span", { key: '38ae3cafca90b8764cf86dea697eb2d5b498173a', class: "material-icons  material-symbols-outlined" }, "verified")), this.design === 'notification' && h("div", { key: 'b023a7473841c84d8b14321d7d1113063b114b70', class: "notification-circle" }, this.notification_number)));
     }
     static get is() { return "dda-avatar"; }
     static get originalStyleUrls() {
@@ -70,7 +80,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Content: `photo` shows the `src` image, `icon` shows a smiley icon, `text` shows `text` as initials."
                 },
                 "getter": false,
                 "setter": false,
@@ -90,7 +100,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `xs` (24px), `sm` (32px), `md` (40px), `lg` (48px), `xl` (56px) or `xxl` (64px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -110,7 +120,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Badge: `default` (none), `status` (green dot), `verified` (check badge), `notification` (count from `notification_number`). `story` has no style yet."
                 },
                 "getter": false,
                 "setter": false,
@@ -130,7 +140,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shape: `circle` or `square` (rounded corners)."
                 },
                 "getter": false,
                 "setter": false,
@@ -150,7 +160,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Image URL shown when `type` is `photo`."
                 },
                 "getter": false,
                 "setter": false,
@@ -170,7 +180,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "CSS class of the icon font used when `type` is `icon`, e.g. `material-icons`. The icon glyph is always `sentiment_satisfied`."
                 },
                 "getter": false,
                 "setter": false,
@@ -190,7 +200,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Initials shown when `type` is `text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -210,7 +220,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Count shown in the badge when `design` is `notification`. Hidden at sizes `xs` and `sm`."
                 },
                 "getter": false,
                 "setter": false,
@@ -230,7 +240,7 @@ export class DdaAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the avatar container."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +250,7 @@ export class DdaAvatar {
             },
             "selected": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -250,7 +260,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The selected option. Matches one entry of `options`; updated when the user picks an option. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -269,7 +279,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Dropdown options as a JSON array of strings, e.g. `[\"Profile\",\"Sign out\"]`. When set, the avatar becomes a button that opens the list."
                 },
                 "getter": false,
                 "setter": false,
@@ -288,7 +298,7 @@ export class DdaAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the avatar, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -307,7 +317,7 @@ export class DdaAvatar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the avatar button and of each option button. The avatar button falls back to `Avatar options`."
                 },
                 "getter": false,
                 "setter": false,
@@ -326,7 +336,7 @@ export class DdaAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` applied to each option button in the dropdown."
                 },
                 "getter": false,
                 "setter": false,
@@ -345,7 +355,7 @@ export class DdaAvatar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each option button in the dropdown. Also added as a CSS class on the avatar container."
                 },
                 "getter": false,
                 "setter": false,
@@ -359,4 +369,22 @@ export class DdaAvatar {
             "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 from the dropdown, also when it is already selected. `detail.value` is the option."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
 }

package/dist/collection/components/dda-avatar/dda-avatar.stories.js

@@ -69,7 +69,7 @@ To use the \`dda-avatar\` component, pass the following props:
     icon="sentiment_satisfied"
     text="AB"
     options='["Option 1","Option 2","Option 3"]'
-    notification-number="20"
+    notification_number="20"
     custom_class=""
     component_mode=""
     aria_label="avatar"

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

@@ -1,3 +1,38 @@
 :host {
   display: block;
 }
+
+.dda-banner-slider {
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+/* The slider is the keyboard focus stop. The ring is outside the box, so the slider's own
+   overflow does not clip it; white inner and dark outer rings read on any background. */
+.dda-banner-slider:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px #ffffff,
+    0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+.dda-banner-slide {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.dda-banner-slide img {
+  display: block;
+  max-width: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dda-banner-slider {
+    scroll-behavior: auto;
+  }
+}

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

@@ -1,13 +1,22 @@
 import { h, Host } from "@stencil/core";
 export class DdaBanner {
     constructor() {
+        /** Accessible name of the scrollable slide region that keyboard users focus to scroll. */
+        this.aria_label = 'Slides';
         this.parsedSlides = [];
     }
     componentWillLoad() {
-        this.parsedSlides = JSON.parse(this.slides);
+        var _a;
+        try {
+            const slides = JSON.parse((_a = this.slides) !== null && _a !== void 0 ? _a : '[]');
+            this.parsedSlides = Array.isArray(slides) ? slides : [];
+        }
+        catch (_b) {
+            this.parsedSlides = [];
+        }
     }
     render() {
-        return (h(Host, { key: '2cee5be83d942c4478169615a7dd7ab9c02fdc1a' }, h("div", { key: '5e49ec5b1d4aa90d56dff504f271ab52cc61fa72', class: 'dda-banner-slider' }, this.parsedSlides.map((slide) => (h("div", { class: 'dda-banner-slide' }, h("img", { src: slide.image, alt: slide.title, style: { width: this.slider_width, height: this.slider_height } })))))));
+        return (h(Host, { key: '65403933ce5ab094906d55c7fabaa7c56c409817' }, h("div", { key: 'd4944ddf46c232aab0d02df97f120ffc76589e24', class: 'dda-banner-slider', tabIndex: 0, role: "region", "aria-label": this.aria_label }, this.parsedSlides.map((slide) => (h("div", { class: 'dda-banner-slide' }, h("img", { src: slide.image, alt: slide.title, style: { width: this.slider_width, height: this.slider_height } })))))));
     }
     static get is() { return "dda-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -35,7 +44,7 @@ export class DdaBanner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Slide images. JSON array of `{ image, title }`; `image` is the image URL and `title` its alternative text. Read once, when the component loads."
                 },
                 "getter": false,
                 "setter": false,
@@ -54,7 +63,7 @@ export class DdaBanner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "CSS width of each slide image, e.g. `360px`."
                 },
                 "getter": false,
                 "setter": false,
@@ -73,12 +82,32 @@ export class DdaBanner {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "CSS height of each slide image, e.g. `220px`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "slider_height"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the scrollable slide region that keyboard users focus to scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Slides'"
             }
         };
     }