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

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

@@ -59,6 +59,132 @@ export default {
             control: { type: 'text' },
             description: 'Name for the toggle accessibility button',
         },
+        // 3.x accessibility-panel and toolbar text props (Tasks 2-4): every one falls back to the
+        // English default when it is absent, and removes the text it names when it is empty ("").
+        read_speaker_link: {
+            control: { type: 'text' },
+            description: '3.x name of `readSpeakerLink`, as an attribute: `read_speaker_link`. `readSpeakerLink` wins when both are set.',
+        },
+        contrast_title: {
+            control: { type: 'text' },
+            description: 'Heading of the contrast column in the accessibility panel. Default: `Contrast`. An empty value removes the heading.',
+        },
+        contrast_description: {
+            control: { type: 'text' },
+            description: 'Text above the contrast options. Default: `Select your preferred contrast setting`.',
+        },
+        contrast_normal_text: {
+            control: { type: 'text' },
+            description: 'Label of the normal contrast option. Default: `Normal`.',
+        },
+        contrast_noraml_text: {
+            control: { type: 'text' },
+            description: '3.x spelling of `contrast_normal_text`. `contrast_normal_text` wins when both are set.',
+        },
+        contrast_color_blind_text: {
+            control: { type: 'text' },
+            description: 'Label of the colour-blind contrast option. Default: `Colours Blind`.',
+        },
+        contrast_red_weakness_text: {
+            control: { type: 'text' },
+            description: 'Label of the red-weakness contrast option. Default: `Red Weakness`.',
+        },
+        contrast_green_weakness_text: {
+            control: { type: 'text' },
+            description: 'Label of the green-weakness contrast option. Default: `Green Weakness`.',
+        },
+        screen_reader_title: {
+            control: { type: 'text' },
+            description: 'Heading of the screen reader column. Default: `Screen Reader`.',
+        },
+        screen_reader_description: {
+            control: { type: 'text' },
+            description: 'Text in the screen reader column. Default: `Listen to the content of the page by clicking play or listen`.',
+        },
+        screen_reader_link_label: {
+            control: { type: 'text' },
+            description: 'Accessible name of the ReadSpeaker play link. Default: `Listen to this page using ReadSpeaker`.',
+        },
+        text_size_title: {
+            control: { type: 'text' },
+            description: 'Heading of the text size column. Default: `Text Size`.',
+        },
+        text_size_description: {
+            control: { type: 'text' },
+            description: 'Text in the text size column. Default: `Use the buttons below to increase or decrease the text size`.',
+        },
+        selected_contrast: {
+            control: { type: 'text' },
+            description: 'The contrast option shown as selected. The header updates it when the user picks an option. Default: `normal`.',
+        },
+        selected_text_size: {
+            control: { type: 'text' },
+            description: 'The text size button shown as selected (`default-primary`). The header updates it on each click. Default: none.',
+        },
+        accessibility_tooltip: {
+            control: { type: 'text' },
+            description: 'Tooltip of the desktop accessibility button. Default: `Accessibility`.',
+        },
+        accessibility_button_text: {
+            control: { type: 'text' },
+            description: 'Accessible name (visually hidden text) of both accessibility buttons. Default: `Accessibility`.',
+        },
+        accessibility_button_id: {
+            control: { type: 'text' },
+            description: '`id` of the desktop accessibility button. The side-menu button gets this id plus `-sidemenu`.',
+        },
+        accessibility_button_icon_family: {
+            control: { type: 'text' },
+            description: '`class` of the accessibility button icon. Default: `material-icons  material-symbols-outlined`.',
+        },
+        accessibility_button_icon_name: {
+            control: { type: 'text' },
+            description: 'Material icon name of the accessibility buttons. Default: `accessibility`.',
+        },
+        search_tooltip: {
+            control: { type: 'text' },
+            description: 'Tooltip of the desktop search. Default: `Search`.',
+        },
+        search_input_placeholder: {
+            control: { type: 'text' },
+            description: 'Placeholder of the search inputs. Default: the `searchText` value, else `Search`.',
+        },
+        language_tooltip: {
+            control: { type: 'text' },
+            description: 'Tooltip of the desktop language button. Default: `Language`.',
+        },
+        login_tooltip: {
+            control: { type: 'text' },
+            description: 'Tooltip of the desktop Login link. Default: the Login label.',
+        },
+        usePredesignedAccessibilityMenu: {
+            control: { type: 'text' },
+            description: 'When `false`, the header renders no accessibility panel; the buttons only emit `accessibilitymenufunctionality`, so the page can open its own panel. Default: `true`.',
+        },
+        sideMainMenuTitle: {
+            control: { type: 'text' },
+            description: 'Title above the side-menu links. Default: `Quick Links`. An empty value removes it.',
+        },
+        sideOtherMenuTitle: {
+            control: { type: 'text' },
+            description: 'Title above the "other" side-menu links. It shows only when there are other links.',
+        },
+        otherMenuItems: {
+            control: { type: 'text' },
+            description: 'Second list in the side menu. JSON array (or array property) of `{ label, href, active }`; `active: "true"` marks the current page.',
+        },
+        hideOtherMenu: {
+            control: { type: 'text' },
+            description: 'Hides the "other" side-menu links and their title. Default: `false`.',
+        },
+        mobileMenuSearchId: {
+            control: { type: 'text' },
+            description: '`id` of the mobile search control.',
+        },
+        mobileMenuSearchUrl: {
+            control: { type: 'text' },
+            description: "3.x mobile search: when set, the mobile search is a plain link to this URL (with `mobileMenuSearchId` as its id) and the header's own search panel is not rendered.",
+        },
     },
     parameters: {
         docs: {
@@ -135,27 +261,27 @@ const Template = args => `
   `;
 export const Default = Template.bind({});
 Default.args = {
-    firstlogoSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo.svg",
-    firstLogoWhiteSrc: "https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg",
-    firstLogoAlt: "Dubai-Digital-Authority",
-    secondLogoSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
-    secondLogoWhiteSrc: "https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg",
-    secondLogoAlt: "Dubai-Digital-Authority",
-    loginLink: "/login",
-    loginText: "Login",
-    loginIcon: "sentiment_satisfied",
+    firstlogoSrc: 'https://www.dof.gov.ae/Style Library/img/gov-logo.svg',
+    firstLogoWhiteSrc: 'https://www.dof.gov.ae/Style Library/img/gov-logo-white.svg',
+    firstLogoAlt: 'Dubai-Digital-Authority',
+    secondLogoSrc: 'https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg',
+    secondLogoWhiteSrc: 'https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg',
+    secondLogoAlt: 'Dubai-Digital-Authority',
+    loginLink: '/login',
+    loginText: 'Login',
+    loginIcon: 'sentiment_satisfied',
     hide_login: false,
-    language_text: "العربية",
-    hamburger_menu_button_name: "hamburger_menu_button_name",
-    accessibility_button_name: "accessibility_button_name",
-    search_button_name: "search_button_name",
-    search_input_name: "q",
-    search_action: "",
-    language_button_name: "language_button_name",
-    close_menu_button_name: "close_menu_button_name",
-    close_accessibility_button_name: "close_accessibility_button_name",
-    close_sidebar_button_name: "close_sidebar_button_name",
-    toggle_accessibility_button_name: "toggle_accessibility_button_name",
+    language_text: 'العربية',
+    hamburger_menu_button_name: 'hamburger_menu_button_name',
+    accessibility_button_name: 'accessibility_button_name',
+    search_button_name: 'search_button_name',
+    search_input_name: 'q',
+    search_action: '',
+    language_button_name: 'language_button_name',
+    close_menu_button_name: 'close_menu_button_name',
+    close_accessibility_button_name: 'close_accessibility_button_name',
+    close_sidebar_button_name: 'close_sidebar_button_name',
+    toggle_accessibility_button_name: 'toggle_accessibility_button_name',
     languageSwitch: "() => console.log('Language Switcher')",
     smTextSize: "() => console.log('Small Text')",
     baseTextSize: "() => console.log('Base Text')",
@@ -164,7 +290,7 @@ Default.args = {
     blindContrast: "() => console.log('Blind Contrast')",
     redContrast: "() => console.log('Red Contrast')",
     greenContrast: "() => console.log('Green Contrast')",
-    readSpeakerLink: "app-eu.readspeaker.com",
+    readSpeakerLink: 'app-eu.readspeaker.com',
     quickLinks: [
         { label: 'Home', href: '#', subMenu: [] },
         {
@@ -185,24 +311,34 @@ Default.args = {
             label: 'Initiatives',
             href: '#',
             subMenu: [
-                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
-                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
-                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
-                            ] },
-                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
-                    ] },
-                { headerLabel: 'Initiatives', label: 'Submenu-1', href: '#', subMenu: [
-                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [
-                                { headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }
-                            ] },
-                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' }
-                    ] },
+                {
+                    headerLabel: 'Initiatives',
+                    label: 'Submenu-1',
+                    href: '#',
+                    subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [{ headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }] },
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' },
+                    ],
+                },
+                {
+                    headerLabel: 'Initiatives',
+                    label: 'Submenu-1',
+                    href: '#',
+                    subMenu: [
+                        { headerLabel: 'Initiatives', label: 'Submenu-2', href: '#', subMenu: [{ headerLabel: 'Initiatives', label: 'Submenu-4', href: '#' }] },
+                        { headerLabel: 'Initiatives', label: 'Submenu-3', href: '#' },
+                    ],
+                },
             ],
         },
-        { label: 'Services', href: '#', subMenu: [
+        {
+            label: 'Services',
+            href: '#',
+            subMenu: [
                 { headerLabel: 'Service', label: 'Service-1', href: '#' },
                 { headerLabel: 'Service', label: 'Service-2', href: '#' },
-            ] },
+            ],
+        },
         { label: 'Data', href: '#', subMenu: [] },
         { label: 'Government Services', href: '#', subMenu: [] },
         { label: 'Investor Relations', href: '#', subMenu: [] },
@@ -214,3 +350,32 @@ Default.args = {
 // A site without sign-in: hide_login removes the Login link from the toolbar and the side menu.
 export const WithoutLogin = Template.bind({});
 WithoutLogin.args = Object.assign(Object.assign({}, Default.args), { hide_login: true });
+// A page built on the 3.x attributes, in Arabic: every settable text in the accessibility panel,
+// the toolbar and the side menu comes from an attribute. A few close-button labels (for example
+// "Close Sidebar") have no attribute and stay fixed English text.
+export const Arabic3x = () => `
+  <div dir="rtl" lang="ar">
+    <dda-header
+      contrast_title="تباين الألوان" contrast_description="حدد إعداد تباين الألوان المفضل لديك"
+      contrast_noraml_text="الألوان العادية" contrast_color_blind_text="عمى الألوان"
+      contrast_red_weakness_text="ضعف أحمر" contrast_green_weakness_text="الضعف الأخضر"
+      screen_reader_title="قارئ الشاشة" screen_reader_description="استمع إلى محتوى الصفحة بالضغط على تشغيل أو استماع"
+      read_speaker_link="#" text_size_title="حجم النص" text_size_description="استخدم الأزرار أدناه لزيادة أو تقليل حجم النص"
+      accessibility_tooltip="إمكانية الوصول" accessibility_button_text="إمكانية الوصول إلى الموقع الإلكتروني"
+      accessibility_button_icon_name="accessible_forward"
+      search_tooltip="بحث" search_input_placeholder="يبحث" language_text="English" language_lang="en" language_tooltip="تغيير اللغة"
+      login-text="" side-main-menu-title="قائمة الموقع" menu_button_label="القائمة"
+      quick-links='${JSON.stringify([
+    { type: 'dda_default_submenu', headerMenuLabel: 'الصفحة الرئيسية', url: '#', children: [] },
+    {
+        type: 'dda_default_submenu',
+        headerMenuLabel: 'عن الدائرة',
+        url: '#',
+        children: [
+            { type: 'dda_default_submenu', headerMenuLabel: 'استراتيجية الدائرة', url: '#', children: [] },
+            { type: 'dda_default_submenu', headerMenuLabel: 'السياسات', url: '#', children: [{ headerMenuLabel: 'سياسة الجودة', url: '#', children: [] }] },
+        ],
+    },
+])}'
+    ></dda-header>
+  </div>`;

package/dist/collection/components/dda-header/nav-model.js

@@ -0,0 +1,69 @@
+import { parseJsonProp } from "../../utils/parse-json-prop";
+const clean = (value) => (typeof value === 'string' ? value.trim() : '');
+const optional = (value) => clean(value) || undefined;
+const isPlainObject = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+// An array field (children, mega-menu columns/items, 5.x subMenu) may contain a bad entry (null, a
+// number, ...) even when the field itself is a valid array. Each bad entry is skipped, with one
+// warning, rather than reaching a raw.<prop> access on a non-object and throwing.
+const asArray = (value) => {
+    if (!Array.isArray(value))
+        return [];
+    return value.filter(item => {
+        if (isPlainObject(item))
+            return true;
+        console.warn('quick-links: an item is not an object; it is ignored.');
+        return false;
+    });
+};
+const isLegacy = (raw) => raw.headerMenuLabel !== undefined || raw.type !== undefined;
+function legacyItem(raw) {
+    const children = asArray(raw.children);
+    const base = {
+        label: clean(raw.headerMenuLabel),
+        href: clean(raw.url) || '#',
+        active: raw.active === 'true' || raw.active === true,
+        id: optional(raw.headerMenuId),
+        description: optional(raw.description),
+        icon: optional(raw.quickLinksIcon),
+        kind: 'link',
+        submenuTitle: optional(raw.defaultSubMenuTitle),
+        children: [],
+        columns: [],
+    };
+    if (children.length === 0)
+        return base;
+    if (raw.type === 'dda_main_megamenu') {
+        return Object.assign(Object.assign({}, base), { kind: 'mega', columns: children.map(col => ({
+                title: optional(col.title),
+                links: asArray(col.items).map(link => {
+                    var _a;
+                    return ({
+                        label: clean(link.headerMenuLabel),
+                        href: clean(link.url) || '#',
+                        description: optional(link.description),
+                        // 3.x always showed an icon in the mega menu, defaulting to 'sentiment_satisfied' when
+                        // none was set; the 5.x subMenu shape never had a default, so this fallback stays scoped
+                        // to the 3.x mapping (see modernItem below, which leaves icon undefined).
+                        icon: (_a = optional(link.quickLinksIcon)) !== null && _a !== void 0 ? _a : 'sentiment_satisfied',
+                        active: false,
+                    });
+                }),
+            })) });
+    }
+    return Object.assign(Object.assign({}, base), { kind: 'dropdown', children: children.map(legacyItem) });
+}
+function modernItem(raw) {
+    const sub = asArray(raw.subMenu);
+    const base = { label: clean(raw.label), href: clean(raw.href) || '#', active: false, kind: 'link', children: [], columns: [] };
+    if (sub.length === 0)
+        return base;
+    return Object.assign(Object.assign({}, base), { kind: 'mega', columns: [
+            {
+                title: optional(raw.menuLabel),
+                links: sub.map(link => ({ label: clean(link.title), href: clean(link.href) || '#', description: optional(link.description), icon: optional(link.icon), active: false })),
+            },
+        ] });
+}
+export function normalizeQuickLinks(value) {
+    return asArray(parseJsonProp(value, 'quick-links')).map(raw => (isLegacy(raw) ? legacyItem(raw) : modernItem(raw)));
+}

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

@@ -20,6 +20,10 @@ export class DdaHomeBanner {
         this.slide_button_label = 'Go to slide';
         /** Template for the screen-reader slide announcement. `{current}` and `{total}` are substituted. */
         this.slide_status_label = 'Slide {current} of {total}';
+        /** Shows the decorative scroll icon at the end of the slide controls (hidden at 992px and below unless `show_scroll_icon_mobile` is set). Default: `true`. */
+        this.show_scroll_icon = true;
+        /** Also shows the scroll icon at 992px and below. Default: `false`. */
+        this.show_scroll_icon_mobile = false;
         this.currentSlide = 0;
         this.slides = [];
         this.isPaused = false;
@@ -182,10 +186,10 @@ export class DdaHomeBanner {
     render() {
         const total = this.slides.length;
         const showAutoplayToggle = this.autoplay && !this.reducedMotion;
-        return (h(Host, { key: '337ecda1c81691400d3cf4368ae74baeaf997ad1', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'c916baad761db8b607c783f2fd58dcf0eda9c2ee', class: "dda-slider-container" }, h("div", { key: '7ce645f06a4a83d78185563d0d99e472aee19dce', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'f946bde4fcf2ae779a96dc6d2a99bc68ab358fd2' })), h("div", { key: 'eb981c8e7753780a5c1d80f9f3651a8797e480eb', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '3bbdc0f9fd960df2037deb65e4ddace5055d28bb', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: 'c9d122cd73a083a871f3ba390987cb5e7aa3a1b6', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '24f4655bc2a97cbe43e5d9c666b800be75e4d18d', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '028e2fffddc89b3679051f528245a931c4e6dc4d', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: 'bbda2847681926070012d86593892b4788d409f0' }, this.slides.map((_, index) => {
+        return (h(Host, { key: '44c4c55938a8ba6d6974780e92cfdc02479afb8a', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: '18314d56093e75acab6394769984de61cc133e4c', class: "dda-slider-container" }, h("div", { key: '6dca34903300349e02527a809be5cae94878831d', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'a9df2fcbbcdaba8f79f29fa8ff3cbcd163eaa9d4' })), h("div", { key: '37a9054da4e5dcad38d83a8decd80635ef26cdf2', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '94718488655c71f3a38baabadb3bfe945cf1e7ca', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: 'ff629d0378a36110f00bb8f17f358a37dd3cd7d0', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '76227e52e94f08a416b56680f61ac5a76c6ef1ba', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '19f8f4da320613319482f4da4e4367a0ff1ea887', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '32ae627535ab523d85ad33d658523095f9ff9e45' }, this.slides.map((_, index) => {
             const isCurrent = this.currentSlide === index;
             return (h("li", null, h("button", { type: "button", class: isCurrent ? 'dots active' : 'dots', "aria-label": `${this.slide_button_label} ${index + 1}`, "aria-current": isCurrent ? 'true' : null, onClick: () => this.setSlide(index) })));
-        })), h("button", { key: '64f35b47bf5ed0fc6a2f6cec8fe709ff45e3909f', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'd733c1fc3970f2d4f5319e8215636cdea0a2d9f9', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: '8c66648d97b0c82868b7162486d8e91eb6e46a39', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
+        })), h("button", { key: '60ce3c8766da6e41c43fed8b2896289592b2b21f', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'ce7a17d796ae162e53b3ed26aea0b48a3be907f1', class: "material-icons", "aria-hidden": "true" }, "chevron_right")), this.show_scroll_icon && (h("div", { key: '2280a7a5818da850449da17792d5d6d9fd5740fe', class: { 'dda-mouse-scroll': true, 'dda-mouse-scroll-mobile': this.show_scroll_icon_mobile }, "aria-hidden": "true" }, h("dda-scroll-icon", { key: 'd0f4be0b232c881c71c2c3469c47c019de021acf', scroll_icon_size: "sm", scroll_icon_color: "white" })))), h("div", { key: '1438d05ca350cd7a98c343bd6dd3b549fbfa75f3', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
     }
     static get is() { return "dda-home-banner"; }
     static get originalStyleUrls() {
@@ -379,6 +383,46 @@ export class DdaHomeBanner {
                 "reflect": false,
                 "attribute": "slide_status_label",
                 "defaultValue": "'Slide {current} of {total}'"
+            },
+            "show_scroll_icon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the decorative scroll icon at the end of the slide controls (hidden at 992px and below unless `show_scroll_icon_mobile` is set). Default: `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show_scroll_icon",
+                "defaultValue": "true"
+            },
+            "show_scroll_icon_mobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Also shows the scroll icon at 992px and below. Default: `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show_scroll_icon_mobile",
+                "defaultValue": "false"
             }
         };
     }

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

@@ -24,6 +24,8 @@ export default {
         pause_button_label: { control: 'text', description: 'Accessible name for the pause button' },
         play_button_label: { control: 'text', description: 'Accessible name for the play button' },
         slide_button_label: { control: 'text', description: 'Prefix for each dot’s accessible name' },
+        show_scroll_icon: { control: 'boolean', description: 'Show the decorative scroll icon after the slide controls' },
+        show_scroll_icon_mobile: { control: 'boolean', description: 'Also show the scroll icon at 992px and below' },
     },
     parameters: {
         docs: {
@@ -64,6 +66,8 @@ const Template = args => `
     pause_button_label="${args.pause_button_label}"
     play_button_label="${args.play_button_label}"
     slide_button_label="${args.slide_button_label}"
+    show_scroll_icon="${args.show_scroll_icon}"
+    show_scroll_icon_mobile="${args.show_scroll_icon_mobile}"
   >
     ${slide(IMG_1, 'Aerial view of Dubai at sunset', 'Digitalizing Life In Dubai', 'Pioneering and accelerating the pace of digital transformation in the city')}
     ${slide(IMG_2, 'Dubai skyline at dusk', 'Explore More', 'Find the services you need')}
@@ -78,6 +82,8 @@ const defaultArgs = {
     pause_button_label: 'Pause slideshow',
     play_button_label: 'Play slideshow',
     slide_button_label: 'Go to slide',
+    show_scroll_icon: true,
+    show_scroll_icon_mobile: false,
 };
 export const Default = Template.bind({});
 Default.args = Object.assign({}, defaultArgs);

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

@@ -160,6 +160,13 @@
   height: 25px;
   overflow: hidden;
 }
+
+.slider-nav .dda-mouse-scroll {
+  display: flex;
+  align-items: center;
+  margin-inline-start: 8px;
+}
+
 .slider-nav ul {
   display: flex;
   align-items: center;
@@ -208,6 +215,9 @@
   .slider-nav {
     bottom: 100px;
   }
+  .slider-nav .dda-mouse-scroll:not(.dda-mouse-scroll-mobile) {
+    display: none;
+  }
 }
 /* On taller small screens the quick-link cards sit on the banner (dda.css), so the controls sit
    16px above them. The two custom properties are the cards' gap above the bar and their height. */

package/dist/collection/components/dda-home-carousel/dda-home-carousel.js

@@ -0,0 +1,164 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- h is the Stencil JSX pragma; this repo's eslint config does not recognize it as used (same false positive on every other component file).
+import { h } from "@stencil/core";
+import { parseJsonProp } from "../../utils/parse-json-prop";
+// The 3.x home-page card row, rebuilt on the .quick-links row in dda.css: the same cards, scroll
+// indicators and banner position as plain-HTML quick links. No mouse-driven scrolling, no timers.
+export class DdaHomeCarousel {
+    constructor() {
+        /** Cards shown at once on wide screens. A card is never narrower than 220px. Default: `5`. */
+        this.items_in_view = 5;
+        /** Accessible name of the card list. Default: `Quick links`. */
+        this.aria_label = 'Quick links';
+        /** Extra CSS classes on the list. */
+        this.custom_class = '';
+    }
+    render() {
+        const items = parseJsonProp(this.bannercardlist, 'bannercardlist');
+        const perView = Math.max(1, Math.round(Number(this.items_in_view)) || 5);
+        const listClass = ['quick-links', 'dda-home-carousel-track', this.custom_class, this.component_mode].filter(Boolean).join(' ');
+        return (h("nav", { key: '1e6d6b2d6dde778e65bd639ea753597f8d072366', class: "dda-home-carousel", "aria-label": this.aria_label }, h("ul", { key: 'b41e6812130fdc4a49b27a78202c6502191c79e4', class: listClass, style: { '--dda-home-carousel-per-view': String(perView) } }, items.map((item, index) => (h("li", { class: "dda-home-carousel-item", key: item.banner_card_id || index }, h("dda-banner-card", { onClick: () => this.cardClick.emit(item), banner_card_href: item.banner_card_href, banner_card_url: item.banner_card_url, banner_card_id: item.banner_card_id, image_src: item.image_src, image_alt: item.image_alt, banner_card_title: item.banner_card_title, banner_card_description: item.banner_card_description, banner_card_value: item.banner_card_value, banner_card_name: item.banner_card_name, custom_class: item.custom_class || '', component_mode: item.component_mode })))))));
+    }
+    static get is() { return "dda-home-carousel"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../global/global.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../global/global.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bannercardlist": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BannerCardItem[]",
+                    "resolved": "BannerCardItem[] | string",
+                    "references": {
+                        "BannerCardItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
+                            "id": "src/components/dda-home-carousel/dda-home-carousel.tsx::BannerCardItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The cards. JSON array, or array property, of `{ banner_card_href, banner_card_title, banner_card_description, image_src, image_alt, banner_card_id, banner_card_value, banner_card_name, custom_class, component_mode }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bannercardlist"
+            },
+            "items_in_view": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cards shown at once on wide screens. A card is never narrower than 220px. Default: `5`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items_in_view",
+                "defaultValue": "5"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the card list. Default: `Quick links`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Quick links'"
+            },
+            "custom_class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra CSS classes on the list."
+                },
+                "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"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cardClick",
+                "name": "cardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a card is clicked, with its item. A link card still navigates."
+                },
+                "complexType": {
+                    "original": "BannerCardItem",
+                    "resolved": "BannerCardItem",
+                    "references": {
+                        "BannerCardItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-home-carousel/dda-home-carousel.tsx",
+                            "id": "src/components/dda-home-carousel/dda-home-carousel.tsx::BannerCardItem"
+                        }
+                    }
+                }
+            }];
+    }
+}