@dubai-design-system/components-js 5.0.2 → 5.1.0

package/dist/collection/global/global.css

@@ -714,7 +714,8 @@
 .quick-links-wrap {
   width: 100%;
   position: absolute;
-  bottom: 45px;
+  /* dda-sticky-footer sets --dda-sticky-footer-height; the cards sit above the fixed bar. */
+  bottom: calc(45px + var(--dda-sticky-footer-height, 0px));
   z-index: 1;
 }
 
@@ -764,6 +765,14 @@
   margin-bottom: 15px;
   color: var(--dda-on-surface-variant-40);
 }
+.quick-links .link-item i {
+  display: block;
+  width: fit-content;
+  font-size: 35px;
+  line-height: 1;
+  margin-bottom: 15px;
+  color: var(--dda-on-surface-variant-40);
+}
 .quick-links .link-item .title {
   display: block;
   font-size: var(--dda-fs-title-sm);
@@ -785,6 +794,8 @@
   }
   .quick-links-wrap {
     position: relative;
+    /* In normal flow the cards do not sit over the fixed bar, so keep the original offset. */
+    bottom: 45px;
   }
   .quick-links-wrap .quick-links {
     display: grid;
@@ -804,7 +815,10 @@
     }
 } */
 
-@media only screen and (orientation: landscape) and (max-width: 1600px) {
+/* Short landscape screens (a phone or small tablet on its side) cannot fit the display-size
+   slide title in the full-height banner. This was keyed on max-width: 1600px, which also caught
+   ordinary laptop screens and shrank the title there to 1.2rem. */
+@media only screen and (orientation: landscape) and (max-height: 600px) {
   .slide-content h2 {
     font-size: 1.2rem;
   }
@@ -812,6 +826,8 @@
     font-size: 1rem;
     margin-bottom: 5px;
   }
+}
+@media only screen and (orientation: landscape) and (max-width: 1600px) {
   .quick-links .link-item {
     padding: 13px;
     height: 128px;
@@ -820,6 +836,10 @@
     height: 20px;
     margin-bottom: 5px;
   }
+  .quick-links .link-item i {
+    font-size: 20px;
+    margin-bottom: 5px;
+  }
   .quick-links .link-item .title {
     font-size: 15px;
   }
@@ -2145,11 +2165,23 @@
         box-shadow: none;
     }
 
-    .foot-menu,
-    .foot-icon-btn a span {
+    .foot-menu {
         display: none;
     }
 
+    /* Hide the icon text visually only: it is the link's name when the image is decorative. */
+    .foot-icon-btn a span {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
     .dda-footer-item ul li {
         padding: 0 8px;
         border: 0px !important;
@@ -2488,6 +2520,8 @@
     content: "";
     width: 100%;
     height: 250px;
+    /* Decoration only: it reaches below the header and must not catch taps on the page. */
+    pointer-events: none;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 63.02%, rgba(0, 0, 0, 0) 100%);
     position: absolute;
     top: 0;
@@ -2828,7 +2862,7 @@
     color: var(--dda-on-surface-10);
     font-weight: var(--dda-fw-700);
     border: 0px;
-    padding: 11px;
+    padding: 8px;
     border-radius: 50px;
     display: inline-flex;
     align-items: center;
@@ -2852,7 +2886,9 @@
 .dda-toolbar-menu ul li .tool-btn svg,
 .dda-toolbar-menu-sidemenu ul li .tool-btn i,
 .dda-toolbar-menu-sidemenu ul li .tool-btn svg {
-    font-size: 20px; 
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
     color: var(--dda-on-surface-variant-30);
 }
 
@@ -2886,6 +2922,19 @@
     width: 250px;
     outline: 0;
 }
+/* WCAG 2.4.7 Focus Visible: the input above drops the native outline so the
+   pill can expand cleanly; the ring is painted on the pill instead, with the
+   same idiom as .dda-btn:focus-visible in dda-button.css. */
+.dda-search:focus-within {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+/* Header tool buttons that do not carry .dda-btn (the mobile search button and
+   the side-menu accessibility toggle) get the same ring. */
+.dda-mobile-search button:focus-visible,
+.dda-toolbar-menu-sidemenu ul li .tool-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
 .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-on-surface-0);
 }
@@ -2918,6 +2967,8 @@
     gap: 15px;
     padding: 32px;
     overflow-y: auto;
+    /* Reaching the end of the menu must not start scrolling the locked page. */
+    overscroll-behavior: contain;
     height: 100%;
 }
 
@@ -3178,7 +3229,9 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
 
 .dda-mobile-search button i,
 .dda-mobile-search button svg {
-    font-size: 19px;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
     color: var(--dda-on-surface-variant-30);
 }
 .dda-mobile-search button svg {
@@ -3425,6 +3478,76 @@ ul.main_side_menu .main_sub_menu .main_sub_menu .main_sub_menu {
 
 
 
+/* Mobile search: the search button opens this panel under the header. */
+.dda-mobile-search-panel {
+    position: absolute;
+    top: 100%;
+    inset-inline: 0;
+    padding: 12px 16px;
+    background: var(--dda-surface-100);
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
+    z-index: 8;
+}
+
+.dda-mobile-search-panel[hidden] {
+    display: none;
+}
+
+.dda-mobile-search-form {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--dda-surface-90);
+    border-radius: 100px;
+    padding-inline-start: 12px;
+}
+
+.dda-mobile-search-form:focus-within {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+.dda-mobile-search-form > i {
+    font-size: 24px;
+    color: var(--dda-on-surface-variant-30);
+}
+
+.dda-mobile-search-form input {
+    flex: 1;
+    min-width: 0;
+    height: 44px;
+    border: 0;
+    background: transparent;
+    color: var(--dda-on-surface-0);
+    font-size: var(--dda-fs-body-lg);
+    outline: 0;
+}
+
+.dda-mobile-search-close {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 100px;
+    background: transparent;
+    color: var(--dda-on-surface-variant-30);
+}
+
+.dda-mobile-search-close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
+
+/* The panel only exists where the mobile search button is shown. */
+@media screen and (min-width: 768px) {
+    .dda-mobile-search-panel {
+        display: none;
+    }
+}
+
 
 :root{
   --font-family-main: 'Dubai', sans-serif;
@@ -3487,6 +3610,13 @@ a:hover {
   text-decoration: none !important;
 }
 
+/* WCAG 1.4.1: links in running text keep an underline so color is not the only cue.
+   Classed links (buttons, cards) and list links (menus) stay undecorated. */
+:where(p, td, dd, blockquote, figcaption) a:not([class]),
+:where(p, td, dd, blockquote, figcaption) a:not([class]):hover {
+  text-decoration: underline !important;
+}
+
 button {
   cursor: pointer;
 }

package/dist/collection/global/input.css

@@ -22,6 +22,8 @@
     height: 32px;
     background-color: transparent;
     flex: 1;
+    /* An input's intrinsic width would otherwise stop it shrinking and push the row past its container. */
+    min-width: 0;
     font-size: var(--dda-fs-body-lg);
     font-weight: var(--dda-fw-400);
     padding: 0px;
@@ -67,6 +69,35 @@
     border: 1px solid var(--dda-neutral-90);
     color: var(--dda-neutral-0);
 }
+
+/*
+ * WCAG 1.4.3 placeholder contrast. The global `::placeholder` colour in
+ * global.css (#8E9191) is 3.18:1 on the white field background. The
+ * theme-aware --dda-on-surface-variant-40 is 6.49:1 on surface-100 in the
+ * light theme (#56605F on #FFFFFF) and 7.46:1 in the dark theme (#A3ADAC on
+ * #191C1C). `.light-mode` forces a white field, so it uses the raw light
+ * step. Kept above the validation-error and disabled placeholder rules so
+ * those still win at equal specificity.
+ */
+.dda-input-field::-ms-input-placeholder,
+.dda-field-group-input::-ms-input-placeholder {
+    color: var(--dda-on-surface-variant-40);
+}
+
+.dda-input-field::placeholder,
+.dda-field-group-input::placeholder {
+    color: var(--dda-on-surface-variant-40);
+}
+
+.light-mode .dda-input-field::-ms-input-placeholder,
+.light-mode .dda-field-group-input::-ms-input-placeholder {
+    color: var(--dda-neutral-variant-40);
+}
+
+.light-mode .dda-input-field::placeholder,
+.light-mode .dda-field-group-input::placeholder {
+    color: var(--dda-neutral-variant-40);
+}
 .dda-input-size-small .dda-input-field-group,
 .dda-input-size-small .dda-input-field {
     height: 48px;
@@ -90,6 +121,7 @@
 
 .dda-input-dropdown-btn {
     min-width: 110px;
+    flex-shrink: 0;
     position: relative;
     display: inline-block;
     padding: 0;
@@ -568,8 +600,30 @@
     background-color: var(--dda-surface-94);
 }
 
-.dda-file-choose input {
-    display: none;
+/*
+ * WCAG 2.1.1 / 4.1.2: the native file input was `display: none`, so it was
+ * out of the tab order and the accessibility tree. It is now visually hidden
+ * but focusable; keyboard focus shows the ring on the visible control after
+ * it ("Choose File", or the chosen file's details).
+ */
+.dda-attach-file input[type='file'] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    opacity: 0;
+}
+
+.dda-attach-file input[type='file']:focus-visible + .dda-file-input .dda-file-choose,
+.dda-attach-file input[type='file']:focus-visible + .dda-file-details {
+    outline: none;
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
 }
 
 .dda-file-details {

package/dist/collection/storybook/component-api.js

@@ -0,0 +1,15 @@
+// Builds a docs page's API section from the tables Stencil generates into a component readme,
+// so the documented props and events always match the component source after a build.
+const API_SECTIONS = ['Properties', 'Events', 'Methods', 'Slots', 'Shadow Parts', 'CSS Custom Properties'];
+
+export function componentApi(readme) {
+  const generated = readme.split('<!-- Auto Generated Below -->')[1] ?? '';
+  const sections = generated
+    .split(/^## /m)
+    .slice(1)
+    .filter(section => API_SECTIONS.includes(section.split('\n')[0].trim()))
+    // Drop Stencil's "Built with StencilJS" footer, which follows the last section.
+    .map(section => `### ${section.replace(/^-{10,}[\s\S]*$/m, '').trim()}`);
+
+  return sections.length ? sections.join('\n\n') : '_This component has no public properties or events._';
+}

package/dist/collection/utils/placeholder-color.js

@@ -0,0 +1,89 @@
+// Shared e2e helper for WCAG 1.4.3 placeholder-contrast specs. Not consumed
+// by any component.
+//
+// Chromium's `getComputedStyle(input, '::placeholder')` returns the input's
+// own `color`, not the placeholder's, so a spec cannot read the placeholder
+// colour directly. This walks the page's stylesheets instead: it finds every
+// `::placeholder` rule whose base selector matches the field, keeps the one
+// that wins the cascade (highest specificity, then latest in source order),
+// and resolves its `color` value (including `var()`) to a computed
+// `rgb(...)` string that `contrastRatio()` can read.
+//
+// Pass the function itself to `page.evaluate()`. It runs in the browser, so
+// it must stay self-contained: no imports, no closures, no async.
+export function readPlaceholderColors(args) {
+    const field = document.querySelector(args.field);
+    const backgroundEl = document.querySelector(args.background || args.field);
+    if (!field || !backgroundEl) {
+        throw new Error(`placeholder-color.ts: no element for "${args.field}" or "${args.background}"`);
+    }
+    const specificity = (selector) => {
+        let rest = selector;
+        const ids = (rest.match(/#[\w-]+/g) || []).length;
+        rest = rest.replace(/#[\w-]+/g, ' ');
+        const classes = (rest.match(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g) || []).length;
+        rest = rest.replace(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g, ' ');
+        const types = (rest.match(/[a-zA-Z][\w-]*/g) || []).length;
+        return ids * 10000 + classes * 100 + types;
+    };
+    let bestValue = '';
+    let bestSpecificity = -1;
+    const visit = (rules) => {
+        for (let i = 0; i < rules.length; i++) {
+            const rule = rules[i];
+            if (rule.styleSheet && rule.styleSheet.cssRules) {
+                visit(rule.styleSheet.cssRules);
+            }
+            else if (rule.selectorText !== undefined) {
+                const value = rule.style.getPropertyValue('color');
+                if (!value)
+                    continue;
+                const parts = String(rule.selectorText).split(',');
+                for (let j = 0; j < parts.length; j++) {
+                    const part = parts[j].trim();
+                    if (!/::placeholder$/.test(part))
+                        continue;
+                    const base = part.replace(/::placeholder$/, '').trim() || '*';
+                    let matches = false;
+                    try {
+                        matches = field.matches(base);
+                    }
+                    catch (_a) {
+                        matches = false;
+                    }
+                    if (!matches)
+                        continue;
+                    const s = specificity(base);
+                    if (s >= bestSpecificity) {
+                        bestSpecificity = s;
+                        bestValue = value;
+                    }
+                }
+            }
+            else if (rule.cssRules) {
+                const media = rule.media ? rule.media.mediaText : '';
+                if (!media || window.matchMedia(media).matches) {
+                    visit(rule.cssRules);
+                }
+            }
+        }
+    };
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        let rules = null;
+        try {
+            rules = document.styleSheets[i].cssRules;
+        }
+        catch (_a) {
+            rules = null;
+        }
+        if (rules)
+            visit(rules);
+    }
+    // Resolve var()/keywords to rgb() in the field's own context.
+    const probe = document.createElement('span');
+    field.parentElement.appendChild(probe);
+    probe.style.color = bestValue || getComputedStyle(field).color;
+    const placeholder = getComputedStyle(probe).color;
+    probe.remove();
+    return { placeholder, background: getComputedStyle(backgroundEl).backgroundColor };
+}

package/dist/collection/utils/unique-id.js

@@ -0,0 +1,10 @@
+let counter = 0;
+/**
+ * Returns an id that is unique on the page, for elements such as a label's input when the
+ * consumer did not pass one. Call it once per component instance (as a field initializer),
+ * so the id stays stable across renders.
+ */
+export function uniqueId(prefix) {
+    counter += 1;
+    return `${prefix}-${counter}`;
+}