@dubai-design-system/components-js 4.1.0 → 5.0.0

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

@@ -1,100 +1,113 @@
-.dda-chip{
-  display: inline-flex;
-  height: 26px;
-  background: var(--dda-color-primary-95);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-color-primary-40);
-  align-items: center;
-  gap: 5px;
-  padding: 2px 8px;
-  border-radius: 6px; 
-}
-.dda-chip i{
-  font-size: 19px;
-}
-.dda-chip .circle{
-  font-size: 7px;
-}
-.dda-chip-grey{
-  background: var(--dda-neutral-variant-94);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode.dda-chip-grey{
-  background: var(--dda-neutral-variant-94);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-neutral-variant-30);
-}
-/**/
-.dda-chip-primary{
-  background: var(--dda-primary-variant-95);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-color-primary-40);
-}
-.light-mode.dda-chip-primary{
-  background: var(--dda-primary-95);
-  border: solid 1px var(--dda-primary-40);
-  color: var(--dda-primary-40);
-}
-/**/
-.dda-chip-green{
-  background: var(--dda-success-variant-95);
-  border: solid 1px var(--dda-color-success-40);
-  color: var(--dda-color-success-40);
-}
-.light-mode.dda-chip-green{
-  background: var(--dda-success-95);
-  border: solid 1px var(--dda-success-40);
-  color: var(--dda-success-40);
-}
-/**/
-.dda-chip-yellow{
-  background: var(--dda-warning-variant-95);
-  border: solid 1px var(--dda-color-warning-40);
-  color: var(--dda-color-warning-40);
-}
-.light-mode.dda-chip-yellow{
-  background: var(--dda-warning-95);
-  border: solid 1px var(--dda-warning-40);
-  color: var(--dda-warning-40);
-}
-/**/
-.dda-chip-red{
-  background: var(--dda-error-variant-95);
-  border: solid 1px var(--dda-color-error-40);
-  color: var(--dda-color-error-40);
-}
-.light-mode.dda-chip-red{
-  background: var(--dda-error-95);
-  border: solid 1px var(--dda-error-40);
-  color: var(--dda-error-40);
-}
-/**/
-.dda-chip-purple{
-  background: var(--dda-color-purple-50);
-  border: solid 1px var(--dda-color-purple);
-  color: var(--dda-color-purple);
-}
-
-.dda-chip-sm{
-  height: 24px;
-}
-.dda-chip-md{
-  height: 26px;
-}
-.dda-chip-lg{
-  height: 32px;
-  padding: 2px 12px;
-}
-.dda-chip-square{
-  border-radius: 6px;
-}
-.dda-chip-circle{
-  border-radius: 40px;
-}
-
-.dda-chip .chip-close{
-  display: inline-flex;
-  cursor: pointer;
-}
-
+.dda-chip{
+  display: inline-flex;
+  height: 26px;
+  background: var(--dda-color-primary-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+  align-items: center;
+  gap: 5px;
+  padding: 2px 8px;
+  border-radius: 6px; 
+}
+.dda-chip i{
+  font-size: 19px;
+}
+.dda-chip .circle{
+  font-size: 7px;
+}
+.dda-chip-grey{
+  /* F-023 B3: was raw, theme-invariant --dda-neutral-variant-94, paired
+     with the theme-flipping text alias --dda-on-surface-variant-30 (used
+     here for the icon glyphs). Swap to the theme-aware surface-variant
+     alias so the background flips with the text. */
+  background: var(--dda-surface-variant-90);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode.dda-chip-grey{
+  background: var(--dda-neutral-variant-94);
+  border: solid 1px var(--dda-neutral-90);
+  color: var(--dda-neutral-variant-30);
+}
+/**/
+.dda-chip-primary{
+  background: var(--dda-primary-variant-95);
+  border: solid 1px var(--dda-color-primary-40);
+  color: var(--dda-color-primary-40);
+}
+.light-mode.dda-chip-primary{
+  background: var(--dda-primary-95);
+  border: solid 1px var(--dda-primary-40);
+  color: var(--dda-primary-40);
+}
+/**/
+.dda-chip-green{
+  background: var(--dda-success-variant-95);
+  border: solid 1px var(--dda-color-success-40);
+  color: var(--dda-color-success-40);
+}
+.light-mode.dda-chip-green{
+  background: var(--dda-success-95);
+  border: solid 1px var(--dda-success-40);
+  color: var(--dda-success-40);
+}
+/**/
+.dda-chip-yellow{
+  background: var(--dda-warning-variant-95);
+  border: solid 1px var(--dda-color-warning-40);
+  color: var(--dda-color-warning-40);
+}
+.light-mode.dda-chip-yellow{
+  background: var(--dda-warning-95);
+  border: solid 1px var(--dda-warning-40);
+  color: var(--dda-warning-40);
+}
+/**/
+.dda-chip-red{
+  background: var(--dda-error-variant-95);
+  border: solid 1px var(--dda-color-error-40);
+  color: var(--dda-color-error-40);
+}
+.light-mode.dda-chip-red{
+  background: var(--dda-error-95);
+  border: solid 1px var(--dda-error-40);
+  color: var(--dda-error-40);
+}
+/**/
+.dda-chip-purple{
+  background: var(--dda-color-purple-50);
+  border: solid 1px var(--dda-color-purple);
+  color: var(--dda-color-purple);
+}
+
+.dda-chip-sm{
+  height: 24px;
+}
+.dda-chip-md{
+  height: 26px;
+}
+.dda-chip-lg{
+  height: 32px;
+  padding: 2px 12px;
+}
+.dda-chip-square{
+  border-radius: 6px;
+}
+.dda-chip-circle{
+  border-radius: 40px;
+}
+
+.dda-chip .chip-close{
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+

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

@@ -6,7 +6,7 @@ export class DdaChip {
         this.show_close_icon = false;
     }
     render() {
-        return (h(Host, { key: '5edd424e27372bacdaff7384212601986eefe94d' }, h("div", { key: '08b17b4726f206491b18d3b56d0c62255ede49f8', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons" }, this.icon) : null, h("span", { key: '9348be0ffdab0f69934ffc2015d897e9d5d17e0e' }, h("slot", { key: '42d7dab9d78852a013ecffdb066a60cb324ff9dd' })), this.show_close_icon && (h("span", { key: '93a3ac25440915d2c80634569e3a7ccf0d76baad', class: "chip-close", onClick: this.clickHandler }, h("i", { key: 'bd0f292794b58a3b5370ab873b18a7a1084aedf4', class: "material-icons" }, "close"))))));
+        return (h(Host, { key: '0aa34e124094cc16a3f8ee43c2af63310077c670' }, h("div", { key: 'e8c2758cd3f796f6970bbd520310f81752b3993f', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons  material-symbols-outlined" }, this.icon) : null, h("span", { key: 'a4145827380a4c7b02e972a2061fa657d409a354' }, h("slot", { key: '73ef803648455c6673d3ab23d5a89867550f0ecd' })), this.show_close_icon && (h("button", { key: '965754ae1ed1b9ddd44833724ceb636a506c94d5', type: "button", class: "chip-close", onClick: this.clickHandler, "aria-label": "Remove" }, h("i", { key: 'ead2026d342d304b4a59a2c27dd7604fdf20580b', class: "material-icons  material-symbols-outlined" }, "close"))))));
     }
     static get is() { return "dda-chip"; }
     static get originalStyleUrls() {
@@ -37,8 +37,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bg_color",
                 "reflect": false,
+                "attribute": "bg_color",
                 "defaultValue": "'success'"
             },
             "rounded": {
@@ -57,8 +57,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rounded",
                 "reflect": false,
+                "attribute": "rounded",
                 "defaultValue": "''"
             },
             "icon": {
@@ -77,8 +77,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
-                "reflect": false
+                "reflect": false,
+                "attribute": "icon"
             },
             "show_close_icon": {
                 "type": "boolean",
@@ -96,8 +96,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show_close_icon",
                 "reflect": false,
+                "attribute": "show_close_icon",
                 "defaultValue": "false"
             },
             "size": {
@@ -116,8 +116,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             },
             "custom_class": {
                 "type": "string",
@@ -135,8 +135,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
-                "reflect": false
+                "reflect": false,
+                "attribute": "custom_class"
             },
             "component_mode": {
                 "type": "string",
@@ -154,8 +154,8 @@ export class DdaChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             },
             "clickHandler": {
                 "type": "unknown",
@@ -182,4 +182,3 @@ export class DdaChip {
         };
     }
 }
-//# sourceMappingURL=dda-chip.js.map

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

@@ -46,20 +46,20 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-chip\` component, pass the following props:
-
-\`\`\`html
-<dda-chip
-    bg_color="grey"
-    icon="sentiment_satisfied"
-    show_close_icon="true"
-    custom_class=""
-    component_mode=""
-    onclick="console.log("clicked!")"
-    >Label
-</dda-chip>
-  \`\`\`
+                component: `
+To use the \`dda-chip\` component, pass the following props:
+
+\`\`\`html
+<dda-chip
+    bg_color="grey"
+    icon="sentiment_satisfied"
+    show_close_icon="true"
+    custom_class=""
+    component_mode=""
+    onclick="console.log("clicked!")"
+    >Label
+</dda-chip>
+  \`\`\`
 `,
             },
         },
@@ -70,9 +70,9 @@ const Template = (args) => {
         .filter(([key, value]) => value !== undefined && key !== 'text' && key !== 'onCloseClick')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `
-    <dda-chip ${attributes}>${args.text}
-    </dda-chip>
+    return `
+    <dda-chip ${attributes}>${args.text}
+    </dda-chip>
   `;
 };
 export const Grey = Template.bind({});
@@ -133,4 +133,3 @@ Purple.args = {
     component_mode: '',
     onclick: "() => alert('Close icon clicked!')",
 };
-//# sourceMappingURL=dda-chip.stories.js.map

package/dist/collection/components/dda-credit-card/dda-credit-card.css

@@ -1,104 +1,110 @@
-.dda-credit-card-container{
-  width: 352px;
-  height: 192px;
-  background: var(--dda-neutral-100);
-  padding: 16px 18px;
-  border-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 45px;
-}
-
-.dda-credit-card-header{
-  display: flex;
-}
-.dda-credit-card-header svg path{
-  fill: var(--dda-on-surface-0);
-}
-.light-mode .dda-credit-card-header svg path{
-  fill: var(--dda-neutral-0);
-}
-.card-balance-info{
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.card-balance-label{
-  font-size: 16px;
-  font-weight: var(--dda-fw-400);
-  opacity: 54;
-}
-.dda-credit-card-default .card-balance-label{
-  color: var(--dda-on-surface-variant-30);
-}
-.light-mode.dda-credit-card-default .card-balance-label{
-  color: var(--dda-neutral-variant-30);
-}
-.card-balance{
-  font-size: 32px;
-  font-weight: var(--dda-fw-700);
-  line-height: 45px;
-}
-.dda-credit-card-default .card-balance{
-  color: var(--dda-on-surface-0);
-}
-.light-mode.dda-credit-card-default .card-balance{
-  color: var(--dda-neutral-0);
-}
-.dda-credit-card-body{
-  display: flex;
-}
-.card-userinfo{
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.dda-card-name,
-.dda-card-number{
-  font-size: 14px;
-  color: var(--dda-on-surface-0);
-  font-weight: var(--dda-fw-500);
-  opacity: 90;
-}
-.light-mode .dda-card-name,
-.light-mode .dda-card-number{
-  color: var(--dda-neutral-0);
-}
-.card-type-icon{
-  width: 40px;
-  display: block;
-}
-.dda-credit-card-default{
-  background: var(--dda-surface-100);
-}
-.light-mode.dda-credit-card-default{
-  background: var(--dda-neutral-100);
-}
-.dda-credit-card-green{
-  background: var(--dda-color-primary-40);
-}
-.light-mode.dda-credit-card-green{
-  background: var(--dda-primary-40);
-}
-.dda-credit-card-dark{
-  background: var(--dda-on-surface-variant-30);
-}
-.light-mode.dda-credit-card-dark{
-  background: var(--dda-neutral-variant-30);
-}
-.dda-credit-card-green .dda-credit-card-header i,
-.dda-credit-card-green .card-balance-label,
-.dda-credit-card-green .card-balance,
-.dda-credit-card-green .dda-card-name,
-.dda-credit-card-green .dda-card-number,
-.dda-credit-card-dark .dda-credit-card-header i,
-.dda-credit-card-dark .card-balance-label,
-.dda-credit-card-dark .card-balance,
-.dda-credit-card-dark .dda-card-name,
-.dda-credit-card-dark .dda-card-number{
-  color: var(--dda-neutral-100);
-}
-.dda-credit-card-green .dda-credit-card-header svg path,
-.dda-credit-card-dark .dda-credit-card-header svg path{
-  fill: var(--dda-neutral-100);
+.dda-credit-card-container{
+  width: 352px;
+  height: 192px;
+  background: var(--dda-neutral-100);
+  padding: 16px 18px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 45px;
+}
+
+.dda-credit-card-header{
+  display: flex;
+}
+.dda-credit-card-header svg path{
+  fill: var(--dda-on-surface-0);
+}
+.light-mode .dda-credit-card-header svg path{
+  fill: var(--dda-neutral-0);
+}
+.card-balance-info{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.card-balance-label{
+  font-size: 16px;
+  font-weight: var(--dda-fw-400);
+  opacity: 54;
+}
+.dda-credit-card-default .card-balance-label{
+  color: var(--dda-on-surface-variant-30);
+}
+.light-mode.dda-credit-card-default .card-balance-label{
+  color: var(--dda-neutral-variant-30);
+}
+.card-balance{
+  font-size: 32px;
+  font-weight: var(--dda-fw-700);
+  line-height: 45px;
+}
+.dda-credit-card-default .card-balance{
+  color: var(--dda-on-surface-0);
+}
+.light-mode.dda-credit-card-default .card-balance{
+  color: var(--dda-neutral-0);
+}
+.dda-credit-card-body{
+  display: flex;
+}
+.card-userinfo{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.dda-card-name,
+.dda-card-number{
+  font-size: 14px;
+  color: var(--dda-on-surface-0);
+  font-weight: var(--dda-fw-500);
+  opacity: 90;
+}
+.light-mode .dda-card-name,
+.light-mode .dda-card-number{
+  color: var(--dda-neutral-0);
+}
+.card-type-icon{
+  width: 40px;
+  display: block;
+}
+.dda-credit-card-default{
+  background: var(--dda-surface-100);
+}
+.light-mode.dda-credit-card-default{
+  background: var(--dda-neutral-100);
+}
+/* F-023 B2: both fills below used a text-role alias (--dda-color-primary-40,
+   --dda-on-surface-variant-30) as a background. Both flip lighter in dark
+   theme, which is correct for text but wrong for a fill meant to hold fixed
+   white text (2.30:1 / 1.70:1). Use the raw ramp step instead, matching what
+   each rule's own .light-mode override already sets: a constant fill, so the
+   white text stays legible in both themes. */
+.dda-credit-card-green{
+  background: var(--dda-primary-40);
+}
+.light-mode.dda-credit-card-green{
+  background: var(--dda-primary-40);
+}
+.dda-credit-card-dark{
+  background: var(--dda-neutral-variant-30);
+}
+.light-mode.dda-credit-card-dark{
+  background: var(--dda-neutral-variant-30);
+}
+.dda-credit-card-green .dda-credit-card-header i,
+.dda-credit-card-green .card-balance-label,
+.dda-credit-card-green .card-balance,
+.dda-credit-card-green .dda-card-name,
+.dda-credit-card-green .dda-card-number,
+.dda-credit-card-dark .dda-credit-card-header i,
+.dda-credit-card-dark .card-balance-label,
+.dda-credit-card-dark .card-balance,
+.dda-credit-card-dark .dda-card-name,
+.dda-credit-card-dark .dda-card-number{
+  color: var(--dda-neutral-100);
+}
+.dda-credit-card-green .dda-credit-card-header svg path,
+.dda-credit-card-dark .dda-credit-card-header svg path{
+  fill: var(--dda-neutral-100);
 }

package/dist/collection/components/dda-credit-card/dda-credit-card.js

@@ -10,7 +10,7 @@ export class DdaCreditCard {
             this.custom_class ? `${this.custom_class}` : "",
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '2eba945388379c55031349588aa8d766cf862508' }, h("div", { key: '78d4aae40a46894394606784dd4db8bdd66ff86d', class: cardClass }, h("div", { key: '8f5aa3ddf213d1708dc1a4b52ddacb104d0551b6', class: "dda-credit-card-header" }, h("div", { key: '74966f3dad9b1218b9d46eeb3d3d7f2f7d52579c', class: "card-balance-info" }, h("span", { key: '3158daace9f375adc0619a0484a5e76deb95113b', class: "card-balance-label" }, "Current Balance"), h("span", { key: '03eb5a67823e6746f2acd26e154a78e448b4be10', class: "card-balance" }, this.balance)), h("i", { key: '0e24856c1a326aaa13a6e6128cc4d93e260bf051', class: "material-icons", "aria-hidden": "true" }, "wifi")), h("div", { key: 'e12c366072332137d4190fb0687a4ddf96555b47', class: "dda-credit-card-body" }, h("div", { key: 'cf9fabd395c1a28c4714377a57f128158798fc9b', class: "card-userinfo" }, h("span", { key: 'a6c9e12356d11e39dfa8dfbb98ee93700bbe19f0', class: "dda-card-name" }, this.name), h("span", { key: '3edeb139bfe56dad5c5c802131959108a3ff2c7d', class: "dda-card-number" }, "**** ", this.card_number.slice(-4))), h("div", { key: 'd4cc41344103001eb8d302c49ffa0958c99b6804' }, h("img", { key: '4a96c22cb5b8827bd1f716e96c35fc33b80a00b9', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
+        return (h(Host, { key: 'cdb9cf64608b99e8949e5044ca71e71890eb6003' }, h("div", { key: '3990e35381191298b1bb43e59a675225972a4565', class: cardClass }, h("div", { key: '58e7a17527038c2070e693760e6f56cd0f56e207', class: "dda-credit-card-header" }, h("div", { key: '930f3c19df66c412a8cb7a1d81210445a6ea74a5', class: "card-balance-info" }, h("span", { key: '1ddf75f9f411bd8101ea88876d9f2a053baec848', class: "card-balance-label" }, "Current Balance"), h("span", { key: '5b830f8bfa84df076f41ff60f7778ce5f79490dc', class: "card-balance" }, this.balance)), h("i", { key: '3e1c8f15f4bb42579d3bb325ed0d901523207f44', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "wifi")), h("div", { key: '347145c3282126ba71d3626ad599dc3474797a5c', class: "dda-credit-card-body" }, h("div", { key: 'e212f1520d56eab60244bf2b4b4fb5724c77ebf2', class: "card-userinfo" }, h("span", { key: '5b65a651f05cc7a26c4c1eb68162555c30e52f3c', class: "dda-card-name" }, this.name), h("span", { key: '35c6c8bd842adb512b3874204259c2b5470b9654', class: "dda-card-number" }, "**** ", this.card_number.slice(-4))), h("div", { key: 'af07bf8eb16106127585e0ef9c7c7ea5c3bd37de' }, h("img", { key: 'b35de3dd5d3df3b6926a3a489fab53c656bccafd', src: this.card_type, alt: "Card Type", class: "card-type-icon" }))))));
     }
     static get is() { return "dda-credit-card"; }
     static get originalStyleUrls() {
@@ -41,8 +41,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "balance",
-                "reflect": false
+                "reflect": false,
+                "attribute": "balance"
             },
             "name": {
                 "type": "string",
@@ -60,8 +60,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
-                "reflect": false
+                "reflect": false,
+                "attribute": "name"
             },
             "card_number": {
                 "type": "string",
@@ -79,8 +79,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "card_number",
-                "reflect": false
+                "reflect": false,
+                "attribute": "card_number"
             },
             "card_type": {
                 "type": "string",
@@ -98,8 +98,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "card_type",
-                "reflect": false
+                "reflect": false,
+                "attribute": "card_type"
             },
             "design": {
                 "type": "string",
@@ -117,8 +117,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "design",
-                "reflect": false
+                "reflect": false,
+                "attribute": "design"
             },
             "custom_class": {
                 "type": "string",
@@ -136,8 +136,8 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "custom_class",
                 "reflect": false,
+                "attribute": "custom_class",
                 "defaultValue": "''"
             },
             "component_mode": {
@@ -156,10 +156,9 @@ export class DdaCreditCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component_mode",
-                "reflect": false
+                "reflect": false,
+                "attribute": "component_mode"
             }
         };
     }
 }
-//# sourceMappingURL=dda-credit-card.js.map