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

package/dist/collection/components/dda-radiobutton/dda-radiobutton.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;
@@ -2933,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%;
 }
 
@@ -3442,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;
@@ -3504,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;
 }
@@ -3722,6 +3835,10 @@ ul {
 }
 .dda-radio-container .radio-circle{
   display: inline-block;
+  /* The md size; without it the circle is 0x0 when no size is set. The size rules below override it. */
+  width: 21px;
+  height: 21px;
+  flex-shrink: 0;
   margin-top: 2px;
   background: var(--dda-neutral-100);
   border-radius: 50px;

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class DdaRadiobutton {
     constructor() {
+        /** Extra class suffix. The value is added as `dda-radio-<value>` on the container. */
         this.custom_class = '';
     }
     render() {
@@ -12,7 +13,7 @@ export class DdaRadiobutton {
             this.radio_status ? `dda-radio-${this.radio_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'a8c20b31595f50e03be9c176ada7abe31072a92e' }, h("div", { key: '8fa4b0fc9b43d3c3e7856b48a6d48a5a27ee3d08', class: radiobuttonClass }, h("input", { key: 'c82a834dfdfce765ca8f0bc79965b33c8609cf59', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: 'dcdda4589a603a09992e1b43cfc1c2c33b3a9f31', htmlFor: this.input_id }, h("span", { key: 'f954a5e51ee26ae675d7c10af9b7a8c137f0ea76', class: "radio-circle" }), h("p", { key: 'af562e56bbc53e7e92358afef1c0fb42be24c717' }, h("span", { key: 'c66e2473d0b3a38b460bfc6d84a8d3cecda2c756', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '9b75dd46d93f4e17ce114200851b8bc019e7b27c', class: "radio-supporting" }, this.supporting))))));
+        return (h(Host, { key: '3ded227310410ca3089d2fb5e7bbf703c7265a77' }, h("div", { key: 'e3811560e5a82a24cba3b238c787350887a36236', class: radiobuttonClass }, h("input", { key: 'a36c5facb630f742dd56d71837995a17629731b7', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '60c40663b7259d7582043639a3b9a25b484898a1', htmlFor: this.input_id }, h("span", { key: '652a643169f96d317df1901cff19368466f8ad43', class: "radio-circle" }), h("p", { key: 'e6bdad31f55802fc2da9b78c603063382a18826c' }, h("span", { key: '0cca8461aa8c5a00dbde62fd42b1fc17715798d5', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: '56bc7d2c636a1a106bed8120238138963933f6a0', class: "radio-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {
@@ -39,7 +40,7 @@ export class DdaRadiobutton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label shown next to the radio button."
                 },
                 "getter": false,
                 "setter": false,
@@ -58,7 +59,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Secondary text shown under the title."
                 },
                 "getter": false,
                 "setter": false,
@@ -77,7 +78,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner radio input. Give all radio buttons in one group the same value."
                 },
                 "getter": false,
                 "setter": false,
@@ -96,7 +97,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner radio input. The label points to it, so set a unique value to make the label clickable."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +116,7 @@ export class DdaRadiobutton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Checked state of the inner input. Read the current state from the input or its `change` event."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,7 +135,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Status: `disabled` shows the disabled style and blocks pointer clicks."
                 },
                 "getter": false,
                 "setter": false,
@@ -153,7 +154,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `sm`, `md` or `lg`."
                 },
                 "getter": false,
                 "setter": false,
@@ -172,7 +173,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Style variant: `outlined` or `faded`. Leave empty (or `normal`) for the default style."
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +192,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra class suffix. The value is added as `dda-radio-<value>` on the container."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,7 +212,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the radio button, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -230,7 +231,7 @@ export class DdaRadiobutton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the inner radio input."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -19,7 +19,6 @@ To use the \`dda-radiobutton\` component, pass the following props:
     custom_class=""
     component_mode=""
     aria_label="radio-button"
-    onclick="console.log('clicked')"
 ></dda-radiobutton>
   \`\`\`
 `,
@@ -39,10 +38,6 @@ To use the \`dda-radiobutton\` component, pass the following props:
             control: 'text',
             description: 'default',
         },
-        labelfor: {
-            control: 'text',
-            description: 'default',
-        },
         input_id: {
             control: 'text',
             description: 'default',
@@ -70,16 +65,12 @@ To use the \`dda-radiobutton\` component, pass the following props:
         aria_label: {
             control: { type: 'text' },
             description: 'Aria label for the radio button',
-            radio_status: {
-                control: { type: 'select' },
-                options: ['normal', 'disabled'],
-            },
-            onclick: {
-                control: { type: 'text' },
-                description: 'event handler for radio button',
-            }
         },
-    }
+        radio_status: {
+            control: { type: 'select' },
+            options: ['normal', 'disabled'],
+        },
+    },
 };
 const Template = (args) => {
     const attributes = Object.entries(args)
@@ -100,7 +91,6 @@ DefaultRadio.args = {
     custom_class: '',
     component_mode: '',
     aria_label: 'radio-button',
-    onclick: '',
 };
 export const CheckedRadio = Template.bind({});
 CheckedRadio.args = {
@@ -114,5 +104,4 @@ CheckedRadio.args = {
     custom_class: '',
     component_mode: '',
     aria_label: 'radio-button',
-    onclick: '',
 };

package/dist/collection/components/dda-range-slider/dda-range-slider.js

@@ -1,12 +1,22 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaRangeSlider {
     constructor() {
+        /** Lowest value of the range. */
         this.min = 0;
+        /** Highest value of the range. */
         this.max = 100;
+        /** Step between selectable values. */
         this.step = 1;
+        /** Start value of the lower (left) handle. Read only when the component loads. */
         this.initial_min = 0;
+        /** Start value of the upper (right) handle. Read only when the component loads. */
         this.initial_max = 100;
+        /** Extra CSS classes added to the slider container. */
         this.custom_class = '';
+        // Fallback id base so each wrapping label points at a real input when no
+        // left_input_id/right_input_id is passed (WAVE "Orphaned form label").
+        this.fallbackId = uniqueId('dda-range-slider');
     }
     componentWillLoad() {
         this.min_value = this.initial_min;
@@ -28,10 +38,12 @@ export class DdaRangeSlider {
         return ((value - this.min) / (this.max - this.min)) * 100;
     }
     render() {
-        return (h(Host, { key: '80a768ff1c3149aa7e863bbe8fe4936f6c39ff43' }, h("div", { key: 'ec21fa68c81ef52b6d41a2dd73232f2da367b59a', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '01837c6961c25dae8dd22722ccffb88dc6740c48', class: "dda-range-slider" }, h("div", { key: '21e0c50619dff33b4552a1b2cfaacd6d5ee4259a', class: "dda-range-slider-track", style: {
+        const leftId = this.left_input_id || `${this.fallbackId}-min`;
+        const rightId = this.right_input_id || `${this.fallbackId}-max`;
+        return (h(Host, { key: '3a72a25212a511d65f982a0606cd8cd0e6cd1d66' }, h("div", { key: '8eb7a5199e81bc5bf437d5dfe61e4eec7b732753', class: `dda-range-slider-container dda-tooltip-${this.tooltip_position} ${this.custom_class} ${this.component_mode}` }, h("div", { key: '6b303ab598aff66a693b645d350fea4eaa470bac', class: "dda-range-slider" }, h("div", { key: '3904d63ade7e2251d9ea424c015bf4aab74eae77', class: "dda-range-slider-track", style: {
                 left: `${this.getPercentage(this.min_value)}%`,
                 right: `${100 - this.getPercentage(this.max_value)}%`,
-            } }, h("span", { key: '697d15494be5b1b2223c6994f5757449b8137d0a', class: "min-label" }, this.min_value, "%"), h("span", { key: 'cf9fb2c9a32acadf8aa39ba3bfe81eb669c3d5b6', class: "max-label" }, this.max_value, "%")), h("label", { key: '11d8300e01852e9ea304489a60611ad311318a8a', htmlFor: this.left_input_id }, h("input", { key: '11d5bf0e71ad6c1e6486baf367cc77b82b487a15', id: this.left_input_id, name: this.left_input_name, "aria-label": this.left_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("label", { key: 'c0985baf70eba826197503254da107693d7a21bc', htmlFor: this.right_input_id }, h("input", { key: '2b3c8aed413ef9615dca183c089c4840fdf83ab6', id: this.right_input_id, name: this.right_input_name, "aria-label": this.right_aria_label, type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
+            } }, h("span", { key: '0d1038171b37eebb70862e3dec81773a069f8d39', class: "min-label" }, this.min_value, "%"), h("span", { key: 'ee925f1eb9de817c30fb1b24669e05088d2735c8', class: "max-label" }, this.max_value, "%")), h("span", { key: '29d65987c630c9d67453ad3f3566a3ecdf55357b' }, h("input", { key: '4a6db59b2ef1ca6cfde2acc1ab52046afb2d786f', id: leftId, name: this.left_input_name, "aria-label": this.left_aria_label || 'Minimum', type: "range", min: this.min, max: this.max, step: this.step, value: this.min_value, onInput: (event) => this.handleMinChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.min_value > this.max - this.min_value ? 5 : 3}` } })), h("span", { key: '02fb3162cb1566304e1d25794d61bd760b02bd3c' }, h("input", { key: '46022edc3c2b069ba5f240ea0e7945326cf7459c', id: rightId, name: this.right_input_name, "aria-label": this.right_aria_label || 'Maximum', type: "range", min: this.min, max: this.max, step: this.step, value: this.max_value, onInput: (event) => this.handleMaxChange(event), class: "dda-range-slider-input", style: { zIndex: `${this.max_value < this.max - this.min_value ? 5 : 3}` } }))))));
     }
     static get is() { return "dda-range-slider"; }
     static get originalStyleUrls() {
@@ -58,7 +70,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Lowest value of the range."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +90,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Highest value of the range."
                 },
                 "getter": false,
                 "setter": false,
@@ -98,7 +110,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Step between selectable values."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +130,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Start value of the lower (left) handle. Read only when the component loads."
                 },
                 "getter": false,
                 "setter": false,
@@ -138,7 +150,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Start value of the upper (right) handle. Read only when the component loads."
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +170,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Not used by the current version; it has no effect."
                 },
                 "getter": false,
                 "setter": false,
@@ -177,7 +189,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Value labels shown as tooltips: `top` or `bottom`. Without it, plain labels show below the track."
                 },
                 "getter": false,
                 "setter": false,
@@ -196,7 +208,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the slider container."
                 },
                 "getter": false,
                 "setter": false,
@@ -216,7 +228,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the slider, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +247,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the lower (left) range input. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -254,7 +266,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the upper (right) range input. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,7 +285,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the lower (left) range input, e.g. `Minimum amount`. When it is empty, the name is `Minimum`."
                 },
                 "getter": false,
                 "setter": false,
@@ -292,7 +304,7 @@ export class DdaRangeSlider {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the upper (right) range input, e.g. `Maximum amount`. When it is empty, the name is `Maximum`."
                 },
                 "getter": false,
                 "setter": false,
@@ -311,7 +323,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the lower (left) range input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -330,7 +342,7 @@ export class DdaRangeSlider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the upper (right) range input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,