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

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

@@ -182,10 +182,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: '55af6c4a8e1fed6935eda674d5bbd51204814277', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: '790cdee9cb0c382ba87e0a1dd980023e86340bbf', class: "dda-slider-container" }, h("div", { key: 'bf9986414f25e2127d194860df875b171eb97880', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: '380c1b2915568c3662e491eb0f6084428dc0365a' })), h("div", { key: 'd75bdafad8323981b67f7d618e22d73dd2bce5d9', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '1a5bdeeb6a7b7cbe4f21c997e1b66795e1ace3e0', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: 'fc59a1f184e6dd2bf2fb0a29615f65ec02c9b804', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '3f8c87ccb3bf0c82551d24da0bb33a01b2df8071', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '8f3f95d4a1caf4a5b71051c7684e5c801b848c83', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: 'de0771580040c02d8a16b71b86bbb36ecdad5f35' }, 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: '0c5c03b4283cb4eebd37d5ceba09429ea6164743', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: '88e68e9d597893a55ab7f3e4d440ba409bae27de', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: 'c9c2a5b02f68eedc517f02acac754438240af2c6', 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() {

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"
+                        }
+                    }
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,24 @@
+const cards = [
+    { banner_card_href: '#', image_src: '', banner_card_title: 'About us', banner_card_description: 'Who we are and what we do' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Open data', banner_card_description: 'Download public data sets' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Partnerships', banner_card_description: 'Public and private projects' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Maliyoun', banner_card_description: 'Finance careers programme' },
+    { banner_card_href: '#', image_src: '', banner_card_title: 'Services', banner_card_description: 'All services in one place' },
+];
+export default {
+    title: 'Components/Home Carousel',
+    tags: ['autodocs'],
+    component: 'dda-home-carousel',
+    argTypes: {
+        items_in_view: { control: { type: 'number', min: 1 }, description: 'Cards shown at once on wide screens' },
+        aria_label: { control: 'text', description: 'Accessible name of the card list' },
+    },
+};
+const Template = args => `
+  <div class="home-intros" style="position: relative; height: 480px; background: #1d211b;">
+    <div class="dda-home-quick-links-wrap"><div class="dda-home-quick-links">
+      <dda-home-carousel items_in_view="${args.items_in_view}" aria_label="${args.aria_label}" bannercardlist='${JSON.stringify(cards)}'></dda-home-carousel>
+    </div></div>
+  </div>`;
+export const Default = Template.bind({});
+Default.args = { items_in_view: 4, aria_label: 'Quick links' };

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

@@ -42,7 +42,7 @@ export class DdaInput {
             this.input_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: '98dd445b764af2df20af7e95dbc49ef74013e312' }, h("div", { key: '7a83ce0abcd733095f27d5c3275d31548acff4ae', class: inputClass }, this.label && h("label", { key: 'ddea5a3451bf37ce1c753d4bddb32cef4a2baa2e', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'b8c1062b1609e72c4b87f43c4ead4b63ce35262a', "aria-label": this.aria_label, id: id, name: this.input_name, type: this.type, autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: 'af728d433f267c7e8c81e8b5894df4a17154faa7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '94ad0af0de6d1d02860e6432684b79ca137b61ad', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'b36592f3d8f701d0adf836057c3d3d2073ad64e6' }, h("div", { key: 'f5f37555cc31612fe697cfe4a26aacb273a76acb', class: inputClass }, this.label && h("label", { key: '54f1595fd236e6987e6b347dcecff8c95562e4e7', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: '36a393c6dba904336066803822a3efcf0e02ffae', "aria-label": this.aria_label, id: id, name: this.input_name, type: this.type, autocomplete: this.autocomplete, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: '9ddd9e935c97814b24d238f44f5d73fc232e5c5a', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7c3f9642076e69314f2356fb9ad471f75b2b1f08', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-link-button/dda-link-button.js

@@ -33,9 +33,9 @@ export class DdaLinkButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '8dc6bd810c9049ea16753e583f3b2459d7be8dce' }, h("a", { key: '8f33348f1cb96c947671cd0041cdfae96f75ce8d',
+        return (h(Host, { key: 'e0f1c7a305ff72f3eadf337585da8021e18e4571' }, h("a", { key: 'f2e280df14c0114c54d6e744651bcdfee022b66d',
             //   type={this.type}
-            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '2f2a09f7aff30f48cc0e0bebbac6fb8747fec785', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '7c8c764e2df42a872f8bd5123a8882f6ab30309c' }), this.end_icon && h("i", { key: 'e4892d4cd4b763d4ab306bd60f24b2f25a43ec59', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '190f9273d127bcf6a9b20882fda5a08d3c4c065b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: 'ec486bf4bd3b3aee2edf30df7f0677f76f090792' }), this.end_icon && h("i", { key: '0f295c677268f3751175800553566d39a2bc5e59', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
     static get originalStyleUrls() {

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

@@ -72,7 +72,7 @@ export class DdaNumberField {
             this.component_mode,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: 'e8e821361d846cd52c01047c1f0648e719e96249' }, h("div", { key: '4141b53316b4dbcd60faa46cf2d2b1c374cef309', class: containerClass }, this.label && h("label", { key: '20593074d31733885d83733dc63cd41376d572dc', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '443763cfb3a895c30815e339cd81d5e9b6de2c3e', class: "dda-input-field-group dda-number-field" }, h("input", { key: '57ed90d585e5a2d4e0c9f39bb1fdb6356d7b50f7', id: id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'cd3c78d23ba19978c5b296731192f454db3e5906', class: "dda-input-dropdown-btn" }, h("button", { key: '74d7d3720fcb37122d60ce71155e234393824a26', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.selected_currency}` : undefined, "aria-expanded": this.isCurrencyDropdownOpen ? 'true' : 'false', onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'd2310ea5de9922de9dfab5bac39210921b1be971', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '77491f92b3c065987958c8a0aadead2c941b86be', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'a3e3d37303fac4919afce9a7c6a892de4e8d2771', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'da1de1672834e28084e47eb3ae02b6d774b150de', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'f624d00bd4b5e0c29cdf713f837a83be852e8c30' }, h("div", { key: 'bdcbc45802ac76a5b59eecc57514ddfaa29235a7', class: containerClass }, this.label && h("label", { key: '02ef6553822c0a1b9fafc7ccff2038e200e00715', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'f0c13e421c9de5d60b815efc709f5021ee9b2509', class: "dda-input-field-group dda-number-field" }, h("input", { key: '09a73be6481a4285520150c3f4541a43bc2db872', id: id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '26db621e11ca058e3758144a20508483dcf33394', class: "dda-input-dropdown-btn" }, h("button", { key: '9ec16119661ba40362ab85c65f2f108ea5dcafff', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.selected_currency}` : undefined, "aria-expanded": this.isCurrencyDropdownOpen ? 'true' : 'false', onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: '5ed1789d07a7e70bb8e903e2d9c4ee969ea19a75', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '1f212a2cc5a4d71e8d8c463fc10b1ea828b66630', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: '038ad7c3098d0353d63a85e5fa224c084ec9989f', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '743f363599d29ff486146638e406053197328204', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
     static get originalStyleUrls() {

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

@@ -63,7 +63,7 @@ export class DdaPagination {
         }
     }
     render() {
-        return (h(Host, { key: '4de1572ef7acf0cd89b620183a723f8f9598fdf9' }, h("div", { key: '1aad2deab4985aaa29e0cf31790a0e7f3587c0d5', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: '3b11664484e9c91e045896687bce2b2f645c7947' }, h("div", { key: 'e9a932aaa1c53285520a54d2a66d115a86479817', class: `dda-pagination-container` }, this.renderPagination())));
     }
     static get is() { return "dda-pagination"; }
     static get originalStyleUrls() {