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

package/dist/collection/components/dda-home-banner/dda-home-banner.stories.js

@@ -1,64 +1,94 @@
+const IMG_1 = 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg';
+const IMG_2 = 'https://images.pexels.com/photos/1470405/pexels-photo-1470405.jpeg';
+const IMG_3 = 'https://images.pexels.com/photos/162031/dubai-tower-arab-emirates-162031.jpeg';
+const slide = (src, alt, title, subtitle) => `
+  <slide>
+    <img src="${src}" alt="${alt}" />
+    <div class="slide-wrap">
+      <div class="slide-content">
+        <h2>${title}</h2>
+        <p>${subtitle}</p>
+        <dda-button button_color="default-primary" size="lg">Call to action</dda-button>
+      </div>
+    </div>
+  </slide>`;
 export default {
     title: 'Components/Home Banner',
     component: 'dda-home-banner',
     argTypes: {
-        images: { control: 'array' },
-        autoplay: { control: 'boolean' },
-        interval: { control: 'number' },
+        autoplay: { control: 'boolean', description: 'Advance through the slides automatically' },
+        interval: { control: 'number', description: 'Milliseconds each slide is shown for when autoplay is on' },
+        aria_label: { control: 'text', description: 'Accessible name for the carousel region' },
+        previous_button_label: { control: 'text', description: 'Accessible name for the previous-slide button' },
+        next_button_label: { control: 'text', description: 'Accessible name for the next-slide button' },
+        pause_button_label: { control: 'text', description: 'Accessible name for the pause button' },
+        play_button_label: { control: 'text', description: 'Accessible name for the play button' },
+        slide_button_label: { control: 'text', description: 'Prefix for each dot’s accessible name' },
     },
     parameters: {
         docs: {
             description: {
                 component: `
-  To use the \`dda-home-banner\` component, pass the following props:
-  
-  \`\`\`html
-<dda-home-banner
-    images='[
-      { "src": "assets/img/home1.jpg", "title": "Welcome to Our Site", "subtitle": "Discover amazing features", "link": "#" },
-      { "src": "assets/img/home2.jpg", "title": "Explore More", "subtitle": "Find what you need", "link": "#" },
-      { "src": "assets/img/home3.jpg", "title": "Join Us Today", "subtitle": "Become part of our community", "link": "#" }
-    ]'
-    autoplay="true"
-    interval="3000"
-></dda-home-banner>
-  \`\`\`
-  `,
+The banner is **slotted** — each slide must be a \`<slide>\` element. The component
+collects slides with \`querySelectorAll('slide')\`, so \`<div>\` children are ignored.
+
+\`\`\`html
+<dda-home-banner autoplay="true" interval="5000">
+  <slide>
+    <img src="assets/img/home-banner.jpg" alt="Aerial view of Dubai at sunset" />
+    <div class="slide-wrap">
+      <div class="slide-content">
+        <h2>Digitalizing Life In Dubai</h2>
+        <p>Pioneering and accelerating the pace of digital transformation in the city</p>
+      </div>
+    </div>
+  </slide>
+</dda-home-banner>
+\`\`\`
+
+Layout CSS ships inside the component's own chunk and is injected when the element
+upgrades — the global \`dda.css\` plus \`defineCustomElements()\` is all you need.
+        `,
             },
         },
-        controls: {
-            expanded: true,
-        },
+        controls: { expanded: true },
     },
 };
-const Template = (args) => `<dda-home-banner images='${JSON.stringify(args.images)}' autoplay='${args.autoplay}' interval='${args.interval}'></dda-home-banner>`;
+const Template = args => `
+  <dda-home-banner
+    autoplay="${args.autoplay}"
+    interval="${args.interval}"
+    aria_label="${args.aria_label}"
+    previous_button_label="${args.previous_button_label}"
+    next_button_label="${args.next_button_label}"
+    pause_button_label="${args.pause_button_label}"
+    play_button_label="${args.play_button_label}"
+    slide_button_label="${args.slide_button_label}"
+  >
+    ${slide(IMG_1, 'Aerial view of Dubai at sunset', 'Digitalizing Life In Dubai', 'Pioneering and accelerating the pace of digital transformation in the city')}
+    ${slide(IMG_2, 'Dubai skyline at dusk', 'Explore More', 'Find the services you need')}
+    ${slide(IMG_3, 'Burj Khalifa against a clear sky', 'Join Us Today', 'Become part of our community')}
+  </dda-home-banner>`;
+const defaultArgs = {
+    autoplay: false,
+    interval: 5000,
+    aria_label: 'Highlights',
+    previous_button_label: 'Previous slide',
+    next_button_label: 'Next slide',
+    pause_button_label: 'Pause slideshow',
+    play_button_label: 'Play slideshow',
+    slide_button_label: 'Go to slide',
+};
 export const Default = Template.bind({});
-Default.args = {
-    images: [
-        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
-        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
-        { src: 'https://images.pexels.com/photos/3680912/pexels-photo-3680912.jpeg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
-    ],
-    autoplay: true,
-    interval: 3000,
+Default.args = Object.assign({}, defaultArgs);
+export const Autoplay = Template.bind({});
+Autoplay.args = Object.assign(Object.assign({}, defaultArgs), { autoplay: true, interval: 5000 });
+Autoplay.parameters = {
+    docs: {
+        description: {
+            story: 'With `autoplay` on, a pause/play button is rendered next to the slide dots (WCAG 2.2.2). ' +
+                'Autoplay also suspends on hover and on keyboard focus, and is disabled entirely when ' +
+                '`prefers-reduced-motion: reduce` is set.',
+        },
+    },
 };
-// export const NoAutoplay = Template.bind({});
-// NoAutoplay.args = {
-//   images: [
-//     { src: 'assets/img/home1.jpg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
-//     { src: 'assets/img/home2.jpg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
-//     { src: 'assets/img/home3.jpg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
-//   ],
-//   autoplay: false,
-//   interval: 3000,
-// };
-// export const CustomInterval = Template.bind({});
-// CustomInterval.args = {
-//   images: [
-//     { src: 'assets/img/home1.jpg', title: 'Welcome to Our Site', subtitle: 'Discover amazing features', link: '#' },
-//     { src: 'assets/img/home2.jpg', title: 'Explore More', subtitle: 'Find what you need', link: '#' },
-//     { src: 'assets/img/home3.jpg', title: 'Join Us Today', subtitle: 'Become part of our community', link: '#' }
-//   ],
-//   autoplay: true,
-//   interval: 5000,
-// };

package/dist/collection/components/dda-home-banner/home-banner.css

@@ -102,7 +102,8 @@
   z-index: 3;
 }
 .slider-nav .prev,
-.slider-nav .next {
+.slider-nav .next,
+.slider-nav .pause {
   height: 28px;
   width: 28px;
   padding: 0;
@@ -119,19 +120,49 @@
   transition: all 0.2s linear;
 }
 .slider-nav .prev:hover,
-.slider-nav .next:hover {
+.slider-nav .next:hover,
+.slider-nav .pause:hover {
   background: rgba(0, 0, 0, 0.45);
 }
+
+/* The icon is a Material Icons ligature. Until that font loads — or if the
+   consumer never loads it — the literal text renders and would overflow the
+   28px button and cover the slide dots, making them unclickable. Clip it. */
+.slider-nav .prev,
+.slider-nav .next,
+.slider-nav .pause {
+  overflow: hidden;
+  flex: 0 0 auto;
+}
+
+.slider-nav .prev i,
+.slider-nav .next i,
+.slider-nav .pause i {
+  font-size: 25px;
+  line-height: 1;
+  width: 25px;
+  height: 25px;
+  overflow: hidden;
+}
 .slider-nav ul {
   display: flex;
   align-items: center;
   gap: 15px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.slider-nav li {
+  display: flex;
 }
 .slider-nav .dots {
   display: block;
+  appearance: none;
+  -webkit-appearance: none;
   width: 10px;
   height: 10px;
-  background: rgba(256,256,256,0.2);
+  background: rgba(255, 255, 255, 0.2);
   overflow: hidden;
   text-indent: -100px;
   margin: 0;
@@ -143,7 +174,17 @@
 }
 
 .slider-nav .dots.active {
-  background: rgba(256,256,256,0.85);
+  background: rgba(255, 255, 255, 0.85);
+}
+
+/* Controls sit over photography, where the UA default focus ring is often
+   invisible. Pair a white ring with a dark outer ring so it reads on any slide. */
+.slider-nav .prev:focus-visible,
+.slider-nav .next:focus-visible,
+.slider-nav .pause:focus-visible,
+.slider-nav .dots:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
 }
 
 

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

@@ -6,6 +6,23 @@ export class DdaInput {
     handleInput(event) {
         this.value = event.target.value;
     }
+    // F-016: ids are derived from the consumer-supplied input_id, the same
+    // pattern dda-select's listboxId already relies on for uniqueness. If a
+    // consumer omits input_id, no id-based association is emitted at all
+    // (rather than colliding on a shared literal id across instances).
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
     render() {
         const inputClass = [
             'dda-input-container',
@@ -18,7 +35,7 @@ export class DdaInput {
             this.component_mode,
             this.input_name,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '8efc8f909732eb8ed47989be4f00c4a61fb63d6b' }, h("div", { key: '29e307bebfc63a535451b21e9d15a80ca4bb5905', class: inputClass }, this.label && h("label", { key: 'c53a063d2eedb4bd4308349d27b1b4665e10d454', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("input", { key: 'ed3f74cc36069c3e93bfab8353659feba9267b36', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text" }), this.helper_text && h("span", { key: 'bac4e7ccb56cef050765efbce9ffe0b3d077afc1', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'a56a6467a0bcc695a20d3340702ec7a1a9bf9aad', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '2cbe6df5e60ff611ece992565bb8f4f335c199fa' }, h("div", { key: 'e878d9e3055d199b69bad630541090902f24436e', class: inputClass }, this.label && h("label", { key: '336e7e91b2d3bbc2207507cbbca7636a9f8041c4', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("input", { key: '5a72ef700ad5aa6a14cc2beb04c90895586dfa82', "aria-label": this.aria_label, id: this.input_id, name: this.input_name, type: this.type, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-text", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), this.helper_text && h("span", { key: 'd1aed2d29bb8510248da9ef409209f77b53d2021', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'e9f72ebbb0beb1771238768a8ecdd7a27abcc309', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-link-button/dda-link-button.js

@@ -26,9 +26,9 @@ export class DdaLinkButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '48353384334580d3b87d21c97fe28bfa86c3715e' }, h("a", { key: 'fe3f1969cb31a53d775b5877a48613fb775cf47f',
+        return (h(Host, { key: 'c05598ead44c09c1cd4d3a8699639c4012e37847' }, h("a", { key: '6f136a098f42b34d122ad5f6731334091b587938',
             //   type={this.type}
-            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: 'fc4981b276f2b51e0a4085e37685a952388d4dcd', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'd48a10fcc4421f484e91b6209aa44b997dce0578' }), this.end_icon && h("i", { key: '9e2169cc158f3eed4930e328cc8a6d05559ab997', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '8c073887eae47a0303486aaa79cab227e726cbbe', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'e320db9c64f86fe64dd33937b446cab933672689' }), this.end_icon && h("i", { key: 'c5f7efefa3751d2d9fae3afb1ba24226bd9f54ba', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/dda-number-field/dda-number-field.js

@@ -34,6 +34,21 @@ export class DdaNumberField {
             return [];
         }
     }
+    // F-016: ids derived from the consumer-supplied input_id, same pattern as
+    // dda-input/dda-select.
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    }
     render() {
         const containerClass = [
             'dda-input-container',
@@ -45,7 +60,7 @@ export class DdaNumberField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'ae450483f9cc0b6ac2eaefcace9274bfb5da20f9' }, h("div", { key: 'ab0b9539dea8e287d8986defdf9d18525d067b60', class: containerClass }, this.label && h("label", { key: '80362825c56ad807a12b31c9a75f424b76d4d97c', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '00384dc7f258667a7fa11eded180bdc1aa54b679', class: "dda-input-field-group dda-number-field" }, h("input", { key: '5d62066d29d6a96535b84ebacd610a3c52f70324', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input" }), h("div", { key: '9add17f647588c6094834ac60597a1c1e5ca5d8c', class: "dda-input-dropdown-btn" }, h("button", { key: '7e25c49ce1e2553c3b9f58569f60cde0f1c19c63', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'f844dad82c5626b893caf9079933a7d59a8126d6', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '04becf4d6491a0b64cb2d17c1840370ad99b6a4c', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'fbd6f5dd617e4d7e6f79a6fdc9824373223757b1', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '22a6f9205239ca193904344ba8239b8a023a8e47', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: '478d056b97c8fbbdeab9479d91a35b5065729f5a' }, h("div", { key: '99371519b6ecc1e1621f81b5fdaa5fdccde6bbdf', class: containerClass }, this.label && h("label", { key: '94a2fd311083fcd85676c608c5ae14c4e0347c0e', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '0c0d94451f0a1ccff97cef278c5c4bc3fc17e147', class: "dda-input-field-group dda-number-field" }, h("input", { key: 'b93aae1d972d9aee4fc6a62f6040c35720723916', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '6275bae648bd43980e705530296b2b8c90899cb1', class: "dda-input-dropdown-btn" }, h("button", { key: 'b7a956128c59b5147531a4ce85b5b86ea7137e47', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: '8a1d3737250c5ff33c37c97825b48d106f0c5196', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: 'd260c7d405316fa6f4bcf8ab7480f6287ebf35e1', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'eb8f3492e3603259b31b6c35ced9aac4d52eb4e4', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '9c074b68b234cae9882e14aaca175e5f865d24ee', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
     static get originalStyleUrls() {

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

@@ -142,8 +142,16 @@
   border-radius: 0 5px 5px 0;
 }
 
+/*
+ * F-022 (WCAG 2.5.8 target size, minimum): each dot is a deliberately
+ * small 10x10 visual target. Rather than growing the dots themselves
+ * (which would change the design), the gap is sized so their centres sit
+ * >= 24px apart, satisfying the spacing exception - the same approach and
+ * numbers (10px target, 25px centre-to-centre) already used for
+ * dda-home-banner's slide dots (home-banner.css `.slider-nav .dots`).
+ */
 .dda-pagination-full {
-  gap: 8px;
+  gap: 15px;
 }
 
 .dda-pagination-full button {

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

@@ -54,7 +54,7 @@ export class DdaPagination {
         }
     }
     render() {
-        return (h(Host, { key: 'f2aae7b4e27f61cf808f33a42fb91c151601af14' }, h("div", { key: 'ba730faba72a4b7a034143f1d8ab3f7b08ddee4f', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: '85e139ac55f4589cc1aabbdcc5ee4034c08138f7' }, h("div", { key: '20403174b3a3b556016eb01ab96a624e97c17b51', class: `dda-pagination-container` }, this.renderPagination())));
     }
     static get is() { return "dda-pagination"; }
     static get originalStyleUrls() {

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

@@ -10,6 +10,24 @@ export class DdaPhoneField {
         this.is_focused = false;
         this.dropdown_open = false;
         this.countries = [];
+        // F-018 (WCAG 1.3.5): telephone is exactly the field type autocomplete
+        // exists for. Default to the correct token; still overridable.
+        this.autocomplete = 'tel';
+    }
+    // F-016: ids derived from the consumer-supplied input_id, same pattern as
+    // dda-input/dda-select.
+    get helperId() {
+        return this.input_id ? `${this.input_id}-helper` : undefined;
+    }
+    get errorId() {
+        return this.input_id ? `${this.input_id}-error` : undefined;
+    }
+    get describedBy() {
+        const ids = [
+            this.helper_text && !this.validation_type ? this.helperId : undefined,
+            this.error_message ? this.errorId : undefined,
+        ].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
     }
     // componentWillLoad() {
     //   fetch('/path/to/countries.json')
@@ -42,7 +60,7 @@ export class DdaPhoneField {
     }
     render() {
         const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''}  ${this.validation_type ? `dda-validation-${this.validation_type}` : ''}  ${this.is_focused ? 'dda-input-focus' : ''} ${this.phone_number ? 'dda-input-focus-filled' : ''}`;
-        return (h(Host, { key: '633a50058d652a08b4e06098aaf0321145490071' }, h("div", { key: 'a1ac672c9016157e669004a02b31c5d55505c687', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'e25913e6ce4004a1bea91f66350f27838cfb8525', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'cd6bcdc19e1fbb70b471ea0807227ae770667193', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'a097adee0cd6770fa3c99f1254299b3ef6231405', class: "dda-input-dropdown-btn" }, h("button", { key: '2bc2168e0b4680cb50cf6e2f2e17647dcfdd2b48', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: 'b0f854029f4959a6fcd97c441f84eca0462dff33', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '4f5494f5aa6bf1506e4fdbd53ce25e4a90fc9c99', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: '898d790a05c88ea2c2ee9bd535dc7d393d10ebc5', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: '318d327cfc460a30d3aeddd34a97e074ede58a50', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled })), this.helper_text && !this.validation_type && h("span", { key: 'd7744a45e5cc3ffa866986c3e94b621e19d635f6', class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '1fedde21cf7acf94663d2d5d7dd7424a55f6b208', class: "dda-error-message" }, this.error_message))));
+        return (h(Host, { key: 'cf25902e0ce27b528e00a92f728a0eb221bb65ff' }, h("div", { key: 'ff34b06175b8ab15fedbad232468316639bbe0d3', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'a277c84bebef55a5126396beca24584f70d7acb6', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'ccf3e63be167ecbbe310084e8b3306e353a6f243', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'c41acbf341633482a915273f9d3c522c4b2bd95f', class: "dda-input-dropdown-btn" }, h("button", { key: '0cc277ad44e73255ad84f6e2e099847f254fe4d4', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: '78e46d6ca28db487ebe4c66b14c8f46850a0ccd8', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '31511bbcb0826bb1fd787a4431378c4b1f8b616f', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'e541a962e8f0ea40162968f700ece1e572ce54d3', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: 'ebb15740cd44c82780ce21a7c4425893fdea7e50', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: '635c07efb64846c0deac837cc269f4b544572ef7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7e4e2dce397eb4d761bc1e2536219f5f2005dc68', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
     static get originalStyleUrls() {
@@ -362,6 +380,26 @@ export class DdaPhoneField {
                 "setter": false,
                 "reflect": false,
                 "attribute": "phone_input_name"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete",
+                "defaultValue": "'tel'"
             }
         };
     }

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

@@ -72,6 +72,10 @@ export default {
         phone_input_name: {
             control: { type: 'text' },
             description: 'Name for the phone input field',
+        },
+        autocomplete: {
+            control: { type: 'text' },
+            description: 'Autocomplete token for the phone number input (WCAG 1.3.5). Defaults to "tel".',
         }
     },
     parameters: {
@@ -97,7 +101,8 @@ To use the \`dda-phonefield\` component, pass the following props:
     toggle_button_name="toggle-button"
     country_select_button_name="country-select-button"
     phone_input_name="phone-input"
-    
+    autocomplete="tel"
+
 ></dda-phonefield>
   \`\`\`
 `,
@@ -129,6 +134,7 @@ Default.args = {
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const FocusFilled = Template.bind({});
 FocusFilled.args = {
@@ -149,6 +155,7 @@ FocusFilled.args = {
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Filled = Template.bind({});
 Filled.args = {
@@ -168,6 +175,7 @@ Filled.args = {
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Error = Template.bind({});
 Error.args = {
@@ -187,6 +195,7 @@ Error.args = {
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -205,4 +214,5 @@ Disabled.args = {
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
+    autocomplete: 'tel',
 };

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

@@ -91,5 +91,9 @@
 .dda-percentage-text {
   margin-inline-start: 8px;
   font-size: 16px;
+  color: var(--dda-on-surface-0);
+}
+
+.light-mode .dda-percentage-text {
   color: var(--dda-neutral-0);
 }

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

@@ -5,12 +5,13 @@ export class DdaProgressBar {
         this.tooltip = false;
         this.tooltip_position = 'top';
         this.show_percentage_text = false;
+        this.aria_label = 'Progress';
     }
     render() {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: '4cbce751eac1bc29f403200296dcd31354106ad6' }, h("div", { key: '30234fe16f58122158feacbf4b080809fdc3757b', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'ae391d79102c3a948d000e7501d9849ffd6c45dd', class: "dda-progress-bar" }, h("div", { key: '17748d988309d5445fb02f6b3dae13fc1256bee4', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '1b17f52b4274ff08a031b9290afbf7a46257058a', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: '7f03f2e9c7d20e77c2e74983bbeef68300c55a7d', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: 'd15dd4450a6e3844824c70012a60a7ffc2929a05' }, h("div", { key: '272d319e6dc56d0887c8a5649df86ceefcbd15e1', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a6783ce163ce0f5d18a869f90a941b3956ab84bf', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '18dde8d79aa85aa38550aad9b17f145ec1d513ac', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '682ba315e92ce66c2312169fe157723a0d6d7880', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'f8ac4a0f095600dfc5df8b6001fe7221533cc49f', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {
@@ -142,6 +143,26 @@ export class DdaProgressBar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "component_mode"
+            },
+            "aria_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria_label",
+                "defaultValue": "'Progress'"
             }
         };
     }

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

@@ -32,6 +32,11 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the progress bar component',
         },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Accessible name announced for the progressbar role. Defaults to "Progress".',
+            defaultValue: 'Progress',
+        },
     },
     parameters: {
         docs: {
@@ -47,6 +52,7 @@ To use the \`dda-progressbar\` component, pass the following props:
     show_percentage_text="false"
     custom_class=""
     component_mode=""
+    aria_label="Progress"
 ></dda-progressbar>
   \`\`\`
 `,

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

@@ -63,7 +63,10 @@
   --dda-on-primary-94: var(--dda-primary-20);
 
   --dda-primary-variant-96: var(--dda-primary-30);
-  --dda-primary-variant-95: var(--dda-primary-30);
+  /* F-023 Decision 2: was var(--dda-primary-30) — 4.05:1 against the alert's
+     info text, failing 4.5:1. Darkening the fill (not the text, which is
+     also the alert's border/link/icon colour) brings it to 5.72:1. */
+  --dda-primary-variant-95: var(--dda-primary-20);
   --dda-primary-variant-94: var(--dda-primary-25);
   --dda-primary-variant-92: var(--dda-primary-20);
   --dda-primary-variant-87: var(--dda-primary-12);
@@ -282,7 +285,11 @@
 }
 :root[data-theme='dark'] {
   --dda-color-warning-50: var(--dda-warning-80);
-  --dda-color-warning-40: var(--dda-warning-50);
+  /* F-023 Decision 2: was var(--dda-warning-50) — 2.08:1 against the alert's
+     warning fill, failing both the 24px title's 3:1 and the description's
+     4.5:1. This token is also the alert's border/link/icon colour, so the
+     text tone moves (not the fill) to stay in one place: 5.47:1. */
+  --dda-color-warning-40: var(--dda-warning-80);
   --dda-color-warning-30: var(--dda-warning-90);
   --dda-color-warning-20: var(--dda-warning-94);
 
@@ -499,6 +506,11 @@
   --dda-on-surface-30: var(--dda-neutral-30);
   --dda-on-surface-40: var(--dda-neutral-40);
   --dda-on-surface-0: var(--dda-neutral-0);
+
+  /* F-023 Decision 1: theme-aware muted/disabled-text alias. --dda-neutral-60
+     itself stays a theme-invariant raw ramp step; this alias is the
+     theme-aware layer for the 8 call sites that use it as text. */
+  --dda-on-surface-muted: var(--dda-neutral-40);
 }
 
 :root[data-theme='dark'] {
@@ -515,6 +527,8 @@
   --dda-on-surface-20: var(--dda-neutral-90);
   --dda-on-surface-30: var(--dda-neutral-80);
   --dda-on-surface-40: var(--dda-neutral-70);
+
+  --dda-on-surface-muted: var(--dda-neutral-70);
 }
 
 :root {
@@ -2036,6 +2050,16 @@
     width: 100%;
     z-index: 5;
     padding: 0 20px;
+    transform: translateY(0);
+    transition: transform 300ms ease-in-out;
+}
+
+/* dda-sticky-footer toggles this class off its own scroll-direction state
+   (see dda-sticky-footer.tsx handleScroll) to hide the bar while scrolling
+   down and bring it back while scrolling up. Same transition idiom as
+   .dda-header in dda-header-main.css. */
+.dda-footer.hidden {
+    transform: translateY(100%);
 }
 
 .footer-content {

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

@@ -12,7 +12,7 @@ export class DdaRadiobutton {
             this.radio_status ? `dda-radio-${this.radio_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '082ff0a0d36b50e123841bb3a134c6a7c385a216' }, h("div", { key: '874a04242a1145a7423728775d27db4ce637b8a0', class: radiobuttonClass }, h("input", { key: '7a62ee2d82ab301e33fbc3fd734ff3bbdb8490c6', "aria-label": this.aria_label, type: "radio", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '0de6c3e1587714facf4d51e66506849b0e52f863', htmlFor: this.input_id }, h("span", { key: '4a230a998897b776b3509f29ae0fee18b8a7c3e1', class: "radio-circle" }), h("p", { key: '4aed15b7ed126660d64a275c616b35d67298f9d2' }, h("span", { key: 'cf415855032cd401957d4aed229020fcd2ab75f3', class: "radio-title" }, this.title_text), this.supporting && h("span", { key: 'fc690d46511adda8ed69ea96e359fa9c96a87156', class: "radio-supporting" }, this.supporting))))));
+        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))))));
     }
     static get is() { return "dda-radiobutton"; }
     static get originalStyleUrls() {