#### Change Log Version: (3.12.10) - The slider navigation is now hidden when there is only one slide. [(https://designsystem.dubai.ae/components/interactive-banner)]. #### Change Log Version: (3.12.9) - Submenu inside the sidemenu re-positioned dynamically using its parent’s screen position. [(https://designsystem.dubai.ae/components/header)]. - File name text overflow issue is fixed [(https://designsystem.dubai.ae/components/attach-file)]. #### Change Log Version: (3.12.8) - Added a new target_blank props for the Government of Dubai logo in the header. [(https://designsystem.dubai.ae/components/header)]. #### Change Log Version: (3.12.7) - Added an "active" class to the Home Banner Card button to highlight the selected item once it clicked [(https://designsystem.dubai.ae/components/home-carousel)]. #### Change Log Version: (3.12.6) - Added new component split-button [(https://designsystem.dubai.ae/components/buttons/split-button)]. - Added dropdown menu to the login button in Header [(https://designsystem.dubai.ae/components/header)]. #### Change Log Version: (3.12.5) - Select Input Field error function updated [https://designsystem.dubai.ae/components/select-input-field]. - Added onClick function to the delete button of Attach File [(https://designsystem.dubai.ae/components/attach-file)]. - Added event property to the search in Header [(https://designsystem.dubai.ae/components/header)]. #### Change Log Version: (3.12.4) - Introduced `active` prop support in Header Menu component for menu items. [https://designsystem.dubai.ae/components/header]. - Supports initial active state via JSON configuration (`"active": "true"`). #### Change Log Version: (3.12.3) - Added Unified Methods and Events to Form Components (Refer to Documentation for guides on using them) [https://designsystem.dubai.ae/developers/input-interactions]. #### Change Log Version: (alpha) #### This change is not meant to be adapted on production evironments - Added Unified Methods and Events to Form Components (Refer to Documentation for guides on using them) #### Change Log Version: (3.11.9) - Revert for Search Event on Change event #### Change Log Version: (3.11.8) - Added Set/Reset Methods to Form Inputs #### Change Log Version: (3.11.7) - Support for disabling and changing icons in Quicklinks Mega Menu - Added Horizontal Scroll for Header Quicklinks drop downs and Mega Menu #### Change Log Version: (3.11.6) Published on: 01-september-2025 - Header (Added Dropdown support for login button) - Breadcrumbs (Added Router support) - Sticky Bar (Added behaviour for hide on scroll) #### Change Log Version: (3.11.5) Published on: 25-august-2025 - Search Input events added #### Change Log Version: (3.11.4) Published on: 25-august-2025 - Search & Toggle Input events added #### Change Log Version: (3.11.3) Published on: 22-august-2025 - Accessibility Fixes #### Change Log - Breaking Change Version: (3.11.2) Published on: 20-august-2025 - Fix for Default Font. - The default font in the library is now changed to system-ui, sans-serif instead of Dubai Font. - The users will now need to define their own font family even if they intend to use Dubai Font. #### Change Log - Breaking Change Version: (3.11.1) Published on: 18-august-2025 - Added fix for performance issue, seperated CSS injections from components (Kindly refer to documentation on how to import the css) - Accessibility Fixes #### Change Log Version: (3.10.0) Published on: 13-august-2025 Added Support for event Listeners as an alternative for href in Header and Cards for SPA router support Updated Components: - DDA Header - [https://designsystem.dubai.ae/components/header) - Cards - [https://designsystem.dubai.ae/components/cards] #### Change Log Version: (3.9.14) Published on: 28-july-2025 Overall Accessibility Improvements: Updated Components: - Team Member Card - [https://designsystem.dubai.ae/components/cards/team-member-card](https://designsystem.dubai.ae/components/cards/team-member-card) #### Change Log Version: (3.9.7) Published on: 28-july-2025 Updated Components:(Accessibility) - Attach File - [https://designsystem.dubai.ae/components/attach-file](https://designsystem.dubai.ae/components/attach-file) - Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input) - Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field) - Text Area Field – [https://designsystem.dubai.ae/components/text-area-field](https://designsystem.dubai.ae/components/text-area-field) - Pagination – [https://designsystem.dubai.ae/components/pagination](https://designsystem.dubai.ae/components/pagination) - Phone Number Field – [https://designsystem.dubai.ae/components/phone-number-field](https://designsystem.dubai.ae/components/phone-number-field) - video-card – [https://designsystem.dubai.ae/components/cards/video-card](https://designsystem.dubai.ae/components/cards/video-card) - Button – [https://designsystem.dubai.ae/components/buttons/button](https://designsystem.dubai.ae/components/buttons/button) - Phone Number Field – [https://designsystem.dubai.ae/components/phone-number-field](https://designsystem.dubai.ae/components/phone-number-field) - Select Input Field – [https://designsystem.dubai.ae/components/select-input-field](https://designsystem.dubai.ae/components/select-input-field) - Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs) - New Component: - Custom Card – [https://designsystem.dubai.ae/components/cards/custom-cards](https://designsystem.dubai.ae/components/cards/custom-cards) #### Change Log Version: (3.9.6) Published on: 11-july-2025 Updated Components:(Accessibility) - Button - [https://designsystem.dubai.ae/components/buttons/button](https://designsystem.dubai.ae/components/buttons/button) - Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input) - Header – [https://designsystem.dubai.ae/components/header](https://designsystem.dubai.ae/components/header) - Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field) - Home Carousel – [https://designsystem.dubai.ae/components/home-carousel](https://designsystem.dubai.ae/components/home-carousel) - Search Input Field – [https://designsystem.dubai.ae/components/search-input-field](https://designsystem.dubai.ae/components/search-input-field) - Sticky Bar – [https://designsystem.dubai.ae/components/sticky-bar](https://designsystem.dubai.ae/components/sticky-bar) - Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs) #### Change Log Version: (3.9.5) Published on: 9-july-2025 Accessibility Updated #### Change Log Version: (3.9.4) Published on: 8-july-2025 Updated Components: - Alert - [https://designsystem.dubai.ae/components/alert](https://designsystem.dubai.ae/components/alert) - Avatar - [https://designsystem.dubai.ae/components/avatar](https://designsystem.dubai.ae/components/avatar) - Banner Card – [https://designsystem.dubai.ae/components/cards/banner-cards](https://designsystem.dubai.ae/components/cards/banner-cards) - Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input) - Header – [https://designsystem.dubai.ae/components/header](https://designsystem.dubai.ae/components/header) - Interactive Banner – [https://designsystem.dubai.ae/components/interactive-banner](https://designsystem.dubai.ae/components/interactive-banner) - Home Carousel – [https://designsystem.dubai.ae/components/home-carousel](https://designsystem.dubai.ae/components/home-carousel) - Event Card – [https://designsystem.dubai.ae/components/cards/image-cards/event-card](https://designsystem.dubai.ae/components/cards/image-cards/event-card) - Pricing Card – [https://designsystem.dubai.ae/components/cards/image-cards/pricing-card](https://designsystem.dubai.ae/components/cards/image-cards/pricing-card) - Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field) - Sticky Bar – [https://designsystem.dubai.ae/components/sticky-bar](https://designsystem.dubai.ae/components/sticky-bar) - Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs) - Team Section Card – [https://designsystem.dubai.ae/components/cards/team-section-cards/team-section-card](https://designsystem.dubai.ae/components/cards/team-section-cards/team-section-card) #### Key Features Lightweight & Fast: Uses native Web Components for optimal performance. Customizable: Designed to align with Dubai Design System branding. Framework-Agnostic: Works with any HTML, JavaScript, or TypeScript-based project. Accessible & Scalable: Follows best practices for accessibility and responsive design. #### Usage 1. Include the Web Components Library Next, add the material-icons package which is the icon package used by DDA: Start by adding the material-icons package inside the `` tag ```jsx Add the following script to your HTML to load the library: ``` #### Add DDA Components in Your HTML Now you can use DDA components directly in your HTML files: ```jsx Button ``` #### Available Components - Customizable button component - Dropdown component with various options - Accessible modal dialog - Card layout with structured content And more... #### Contributing This project is built with a focus on Dubai’s digital transformation and welcomes contributions from the community. Feel free to submit issues, feedback, or feature requests. #### License This package is licensed under the Dubai Digital Authority regulations. For more details, refer to the official documentation.