@dubai-design-system/components-js 3.12.13 → 3.12.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +15 -7
  2. package/package.json +2 -2
  3. package/readme.md +47 -39
package/CHANGELOG.md CHANGED
@@ -4,29 +4,37 @@ All notable changes to the Dubai Design System packages are documented in this f
4
4
  All four published packages (`components-js`, `components-react`, `components-vue`,
5
5
  `components-angular`) share a version and release together.
6
6
 
7
- ## [3.12.13](https://github.com/salehtl/dda-design-system-components/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.13) (2026-07-15)
7
+ ## [3.12.14](https://github.com/saleh-lootah/dubai-design-system/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.14) (2026-07-16)
8
+
9
+ ### Documentation
10
+
11
+ - rewrite all four package readmes: clear install steps, links to the hosted documentation, corrected code examples (Vue `@click`/`<script setup>`, fixed code fences)
12
+ - pin CDN loader URLs to an exact version in examples — unversioned jsdelivr URLs mix chunk versions and break rendering; examples now use an `X.X.X` placeholder
13
+ - document the Vite/Rollup lazy-loader limitation and the `dist/components` workaround in the `components-js` readme
14
+
15
+ ## [3.12.13](https://github.com/saleh-lootah/dubai-design-system/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.13) (2026-07-15)
8
16
 
9
17
  ### Bug Fixes
10
18
 
11
19
  - **angular:** fix broken package entry points — `main`/`module`/`types`/`exports` now resolve into the ng-packagr output under `dist/stencil-wrapper/`
12
20
 
13
- ## [3.12.12](https://github.com/salehtl/dda-design-system-components/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.12) (2026-07-15)
21
+ ## [3.12.12](https://github.com/saleh-lootah/dubai-design-system/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.12) (2026-07-15)
14
22
 
15
23
  ### Chores
16
24
 
17
25
  - ship CHANGELOG.md in the `components-js` npm package
18
26
 
19
- ## [3.12.11](https://github.com/salehtl/dda-design-system-components/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.11) (2026-07-15)
27
+ ## [3.12.11](https://github.com/saleh-lootah/dubai-design-system/releases/tag/%40dubai-design-system%2Fcomponents-js%403.12.11) (2026-07-15)
20
28
 
21
29
  ### Bug Fixes
22
30
 
23
- - **header:** enforce 40x40 touch targets for nav-bar buttons ([0822d3f](https://github.com/salehtl/dda-design-system-components/commit/0822d3f))
31
+ - **header:** enforce 40x40 touch targets for nav-bar buttons ([0822d3f](https://github.com/saleh-lootah/dubai-design-system/commit/0822d3f))
24
32
 
25
33
  ### Chores
26
34
 
27
- - publish all packages with public npm access ([7f30032](https://github.com/salehtl/dda-design-system-components/commit/7f30032))
28
- - rename the color palette creator app and mark it private so it is excluded from publishing ([7f30032](https://github.com/salehtl/dda-design-system-components/commit/7f30032))
29
- - regenerate stencil type declarations ([8f77df6](https://github.com/salehtl/dda-design-system-components/commit/8f77df6))
35
+ - publish all packages with public npm access ([7f30032](https://github.com/saleh-lootah/dubai-design-system/commit/7f30032))
36
+ - rename the color palette creator app and mark it private so it is excluded from publishing ([7f30032](https://github.com/saleh-lootah/dubai-design-system/commit/7f30032))
37
+ - regenerate stencil type declarations ([8f77df6](https://github.com/saleh-lootah/dubai-design-system/commit/8f77df6))
30
38
 
31
39
  ## 3.12.10 and earlier
32
40
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dubai-design-system/components-js",
3
- "version": "3.12.13",
3
+ "version": "3.12.14",
4
4
  "private": false,
5
5
  "description": "JavaScript package for the Digital Dubai Design System, offering reusable, customizable components for seamless integration into web applications",
6
6
  "main": "dist/index.cjs.js",
@@ -84,5 +84,5 @@
84
84
  "access": "public"
85
85
  },
86
86
  "license": "SEE LICENSE IN LICENSE",
87
- "gitHead": "d23a64b2308bbbee21bf66c7b5852f3bfe17bca6"
87
+ "gitHead": "3c1d51fdfb385074fed1c8b95e18f1f73dd0ea75"
88
88
  }
package/readme.md CHANGED
@@ -4,67 +4,75 @@
4
4
  </a>
5
5
  </p>
6
6
 
7
- This package provides web components built using StencilJS as part of the Dubai Design System (DDA), ensuring consistency, reusability, and performance across modern web applications. These components are framework-agnostic and can be used in custom websites without dependency on React, Angular, or Vue.
7
+ <h1 align="center">
8
+ Dubai Design System — Web Components
9
+ </h1>
8
10
 
9
- #### Key Features
11
+ Framework-agnostic web components built with StencilJS as part of the Dubai Design System (DDA). Use them in any HTML, JavaScript, or TypeScript project — no dependency on React, Angular, or Vue.
10
12
 
11
- Lightweight & Fast: Uses native Web Components for optimal performance.
13
+ Framework wrappers are also available: [`@dubai-design-system/components-react`](https://www.npmjs.com/package/@dubai-design-system/components-react), [`@dubai-design-system/components-vue`](https://www.npmjs.com/package/@dubai-design-system/components-vue), and [`@dubai-design-system/components-angular`](https://www.npmjs.com/package/@dubai-design-system/components-angular).
12
14
 
13
- Customizable: Designed to align with Dubai Design System branding.
15
+ 📖 **Full documentation, live examples, and the complete component list:** https://saleh-lootah.github.io/dubai-design-system/
14
16
 
15
- Framework-Agnostic: Works with any HTML, JavaScript, or TypeScript-based project.
17
+ #### Key features
16
18
 
17
- Accessible & Scalable: Follows best practices for accessibility and responsive design.
19
+ - **Lightweight & fast** — native Web Components with lazy loading.
20
+ - **Customizable** — aligned with Dubai Design System branding, with light and dark themes.
21
+ - **Framework-agnostic** — works in plain HTML or with any framework.
22
+ - **Accessible & responsive** — follows accessibility best practices.
18
23
 
19
- #### Usage
24
+ ## Setup
20
25
 
21
- 1. Include the Web Components Library
26
+ ### 1. Add the icon fonts
22
27
 
23
- Next, add the material-icons package which is the icon package used by DDA:
24
-
25
- Start by adding the material-icons package inside the `<head>` tag
26
-
27
- ```jsx
28
+ DDA components use Material Icons and Material Symbols. Add both inside your `<head>` tag:
28
29
 
30
+ ```html
29
31
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
32
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
33
+ ```
30
34
 
31
- Add the following script to your HTML to load the library:
35
+ ### 2. Load the components
32
36
 
33
- <script type="module">
37
+ **Option A — CDN (no build step).** Add this script to your HTML, replacing `X.X.X` with the [latest published version](https://www.npmjs.com/package/@dubai-design-system/components-js). **Always pin an exact version in the CDN URL** — unversioned jsdelivr URLs resolve each file independently, so the loader and its chunks can come from different package versions, which breaks rendering:
34
38
 
35
- import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js/loader/index.es2017.js";
36
-
37
- defineCustomElements();
39
+ ```html
40
+ <script type="module">
41
+ import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js@X.X.X/loader/index.es2017.js";
38
42
 
43
+ defineCustomElements();
39
44
  </script>
40
-
41
45
  ```
42
46
 
43
- #### Add DDA Components in Your HTML
44
-
45
- Now you can use DDA components directly in your HTML files:
47
+ **Option B — npm with a bundler (Vite, Rollup).** Install the package:
46
48
 
47
- ```jsx
48
- <dda-button
49
- button_color="default-primary"
50
- start_icon="sentiment_satisfied"
51
- end_icon="arrow_forward"
52
- custom_class=""
53
- component_mode=""
54
- button_id="button"
55
- aria_label="button"
56
- onclick="console.log('clicked')"
57
- >Button</dda-button>
49
+ ```bash
50
+ npm i @dubai-design-system/components-js
58
51
  ```
59
52
 
60
- #### Available Components
53
+ Then import the self-registering build for each component you use:
54
+
55
+ ```js
56
+ // each import automatically defines its custom element
57
+ import '@dubai-design-system/components-js/dist/components/dda-button.js';
58
+ import '@dubai-design-system/components-js/dist/components/dda-header.js';
59
+ ```
61
60
 
62
- <dda-button> - Customizable button component
61
+ > ⚠️ With Vite or plain Rollup, do **not** use the lazy loader (`@dubai-design-system/components-js/loader`). Its computed dynamic imports cannot be statically analyzed by these bundlers, so component chunks are missing from the build (404 on `dda-*.entry.js`) and components never render. The CDN approach and Angular's builder are unaffected.
63
62
 
64
- <dda-dropdown> - Dropdown component with various options
63
+ ### 3. Use the components
65
64
 
66
- <dda-modal> - Accessible modal dialog
65
+ ```html
66
+ <dda-button
67
+ button_color="default-primary"
68
+ start_icon="sentiment_satisfied"
69
+ end_icon="arrow_forward"
70
+ button_id="button"
71
+ aria_label="button"
72
+ onclick="console.log('clicked')"
73
+ >Button</dda-button>
74
+ ```
67
75
 
68
- <dda-card> - Card layout with structured content
76
+ ## Available components
69
77
 
70
- And more...
78
+ `dda-button`, `dda-dropdown`, `dda-modal`, `dda-card`, `dda-header`, and more — browse the full list with live examples and prop tables in the [documentation](https://saleh-lootah.github.io/dubai-design-system/).