@dubai-design-system/components-js 5.3.0 → 5.3.1

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

@@ -61,6 +61,22 @@ export default {
             control: { type: 'text' },
             description: 'Name for the option select button',
         },
+        placeholder: {
+            control: { type: 'text' },
+            description: 'Text in the trigger when nothing is selected',
+        },
+        input_name: {
+            control: { type: 'text' },
+            description: '3.x: name sent in the selectBlurred event',
+        },
+        main_aria_label: {
+            control: { type: 'text' },
+            description: '3.x name of aria_label; used only when there is no label',
+        },
+        validation_type: {
+            control: { type: 'text' },
+            description: '3.x name of the error/validation state',
+        },
     },
     parameters: {
         docs: {
@@ -85,17 +101,38 @@ export default {
     option_select_button_name="option_select_button_name"
 ></dda-select>
   \`\`\`
+
+  \`options\` also takes 3.x \`{ id, text }\` objects, and \`selected\` then takes the id:
+
+  \`\`\`html
+<dda-select
+    label="Emirate"
+    placeholder="Select an emirate"
+    selected="2"
+    options='[{"id":1,"text":"Dubai"},{"id":2,"text":"Abu Dhabi"},{"id":3,"text":"Sharjah"}]'
+></dda-select>
+
+    <script>
+      const select = document.querySelector('dda-select');
+      select.addEventListener('selectChanged', e => {
+        console.log('selectChanged:', e.detail);
+      });
+      select.addEventListener('selectionChange', e => {
+        console.log('selectionChange:', e.detail);
+      });
+    </script>
+  \`\`\`
   `,
             },
         },
     },
 };
-const Template = (args) => {
+const Template = args => {
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text' && key !== 'options')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    const optionsAttribute = `options='${JSON.stringify(args.options)}'`;
+    const optionsAttribute = `options='${typeof args.options === 'string' ? args.options : JSON.stringify(args.options)}'`;
     return `<dda-select ${attributes} ${optionsAttribute}></dda-select>`;
 };
 export const Default = Template.bind({});
@@ -111,8 +148,8 @@ Default.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const Small = Template.bind({});
 Small.args = {
@@ -127,8 +164,8 @@ Small.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const WithError = Template.bind({});
 WithError.args = {
@@ -143,8 +180,8 @@ WithError.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };
 export const Disabled = Template.bind({});
 Disabled.args = {
@@ -158,6 +195,27 @@ Disabled.args = {
     component_mode: '',
     button_id: 'button',
     aria_label: 'select',
-    toggle_button_name: "toggle_button_name",
-    option_select_button_name: "option_select_button_name",
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
+};
+export const IdAndText = Template.bind({});
+IdAndText.args = {
+    label: 'Emirate',
+    options: JSON.stringify([
+        { id: 1, text: 'Dubai' },
+        { id: 2, text: 'Abu Dhabi' },
+        { id: 3, text: 'Sharjah' },
+    ]),
+    selected: '2',
+    placeholder: 'Select an emirate',
+    disabled: false,
+    helper_text: '',
+    error_message: '',
+    size: 'default',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: 'select',
+    toggle_button_name: 'toggle_button_name',
+    option_select_button_name: 'option_select_button_name',
 };

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.js

@@ -78,12 +78,12 @@ export class DdaStickyFooter {
         const rightItems = parseJsonProp(this.rightLink, 'right-link');
         return (
         // An <aside>, not a <footer>: the page footer (dda-footer) is the only contentinfo landmark.
-        h("aside", { key: '98e82e7acac0d1fdced65fe2546e5d257490b188', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'd258148342884ac034881435c6e2420710efd564', class: "footer-content" }, h("div", { key: '1e9e6fff6e2be9cdcf92e725381d8fc76076fa41', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '103330ac1c291614ce79d08ca262a93c4d350ea8' }, this.happinessIconSrc && (h("li", { key: '4056ba1c34d26f7f842b0fa3e6b23eafd692c172', class: "foot-icon-btn" }, h("dda-tooltip", { key: '2762fb68895c5c0c2b4a0495d62975a58c79ca27', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'cf40c7afe41bbb92ef1936126ffaf109a56e9ae9', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: 'be106d991da1cf8ba76e1c9ad1576abe1db96fe9', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: '922ce8e7ac1d4c9336b939efbf112df4b70981a4', class: "foot-icon-btn" }, h("dda-tooltip", { key: '9c87d829d4df22939ad22c392ee3b67dcfaa12b6', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '0d79bf57f3c4388cb6b3edfd2f7d79609b76144d', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: 'd1adceed79be93894994134052268e96589ffcd8', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '33f5966ee771f4f47f8c10213b8daa84b5e01230', class: "foot-icon-btn" }, h("dda-tooltip", { key: '4d5c0b2729afd7c9a9109102f0a5751928559817', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '1eb5db319083a743976ecace4367ae8d231a1047', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '7b3008bc381efe03480b8ed9689608c16e9ca823', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: '61949470a1b493459e90196e0cc5c6f4d063bb50' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ea2a35e9a890b6d909fcdad4a034d54b4c7f9e80', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '8400eef134e06fbf999b4bd31a1c22700ca49f4f', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '54d67beb3ff5041e0a855e526ebc05d987fd395f', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '1904a8afd5c0cb12c5f308d0c2b03618b01dff37', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
+        h("aside", { key: '3646462dd78e1e15798cbde5a74d75191cdd1086', class: { 'dda-footer': true, hidden: this.isHidden, 'has-more-button': !!this.moreIcon }, "aria-label": this.aria_label, "aria-hidden": this.isHidden ? 'true' : 'false', inert: this.isHidden }, h("div", { key: 'cef204100853f69250b15c7e71ef2d6b97df7fce', class: "footer-content" }, h("div", { key: '0bc5c97a4406ff13f240becca20212f78d2e96fc', class: "dda-footer-item dda-footer-left" }, h("ul", { key: '70d02e19f02c4dd54cf533351dd70e28f9b9d00f' }, this.happinessIconSrc && (h("li", { key: 'e0202043b9b94772dec0ecce445ab1fff71545a2', class: "foot-icon-btn" }, h("dda-tooltip", { key: '0d3fb7aa55adca64a1b2cd5adb7c6d323ab358fd', title_text: this.happinessIconTooltip, description: "", position: "top" }, h("a", { key: 'b6617f12a5834e8c2edd86addc03416f19ea7af3', href: this.happinessIconHref, id: this.happinessIconId }, h("img", { key: '1689a7b0fa925862d7083870c1d90b6e2dbbc4ba', src: this.img(this.happinessIconSrc, this.happinessIconSrcDark), alt: this.happinessIconAlt }))))), this.accessibilityIconSrc && (h("li", { key: 'b2abd53e38316dffba4081fbdc2f32e2733e0f65', class: "foot-icon-btn" }, h("dda-tooltip", { key: 'd59ddfeac093c7e213e5847a645a98cae907efbc', title_text: this.accessibilityIconTooltip, description: "", position: "top" }, h("a", { key: '81fcac6b35eed1caf49017d18aa0960871ada04c', href: this.accessibilityIconHref, id: this.accessibilityIconId }, h("img", { key: '1fbec3dc783c99e16a66aec2edf6e09bf68e64aa', src: this.img(this.accessibilityIconSrc, this.accessibilityIconSrcDark), alt: this.accessibilityIconAlt }))))), (this.servicesIconSrc || this.servicesIconText) && (h("li", { key: '4a8bfc4edf865cab5d0dfd271d537a2bd889a170', class: "foot-icon-btn" }, h("dda-tooltip", { key: '48bccd2fc8736481a8446c9db30a014ac63d6ad8', title_text: this.servicesIconTooltip, description: "", position: "top" }, h("a", { key: '15c07ad10e9b29434ed40e1a0db429bb90e9531d', href: this.servicesIconHref, id: this.servicesIconId }, h("img", { key: '3ec96b68cd44f4468e219e46764a84d967ed3989', src: this.img(this.servicesIconSrc, this.servicesIconSrcDark), alt: this.servicesIconText ? '' : this.servicesIconAlt }), this.servicesIconText && h("span", { key: 'c8ebfa04088a46d883e920900ecb8f6880042be4' }, this.servicesIconText))))))), !this.hideMiddleSection && middleLogos.length > 0 && (h("div", { key: 'ffbce0f6070b63588bdf52b5660bdafd02937dc4', class: "dda-footer-item dda-footer-middle" }, h("ul", { key: '7b1ffaa87a43a549d5ff7c09acc7eedda8289776', class: "foot-logo" }, middleLogos.map(logo => (h("li", null, h("dda-tooltip", { title_text: logo.tooltip, description: "", position: "top" }, h("a", { href: logo.href }, h("img", { src: logo.src, alt: logo.alt }))))))))), h("div", { key: '1177349fa3617cc0a60cc36569e2005bd8d161b4', class: "dda-footer-item dda-footer-right" }, h("ul", { key: '28cf955988ea1a1b4897015dbeddbcd19913c523', id: this.rightListId, class: { 'foot-right_links': true, 'show-dda-icon': this.rightOpen }, inert: !!this.moreIcon && !this.rightOpen && this.isMobile }, rightItems.length > 0
             ? rightItems.map(item => (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: item.RightLinkTooltip || item.LinkText, description: "", position: "top" }, h("a", { href: item.href, id: item.itemId, title: item.title }, item.IconName && (h("i", { class: item.IconFamily || 'material-icons', "aria-hidden": "true" }, item.IconName)), h("span", null, item.LinkText))))))
             : [
                 (this.locationLogoSrc || this.locationButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.locationButtonText, description: "", position: "top" }, h("a", { href: this.locationButtonHref }, this.renderLinkGraphic(this.locationLogoSrc, this.locationButtonIcon, this.locationButtonText))))),
                 (this.newsButtonSrc || this.newsButtonIcon) && (h("li", { class: "foot-icon-btn" }, h("dda-tooltip", { title_text: this.newsButtonText, description: "", position: "top" }, h("a", { href: this.newsButtonHref }, this.renderLinkGraphic(this.newsButtonSrc, this.newsButtonIcon, this.newsButtonText))))),
-            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: '46e2339738039f1c72bf33774cdcbc691da90cf0', class: "foot-icon-btn" }, h("dda-tooltip", { key: '8cff02f4d003888c9f216aa80602ee107a0e7c5f', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: 'a0327d42a75196f4ad37b7a49d713e9eb08bffdf', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '831261649bdfd70e15718c45dcc85432fe069582', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: 'ef212c8912b467bfdde01a090e82f355fd39e5dd', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: 'fdc1ba032f6e0fcdb44f9cd71763797f86cc3b98', class: "foot-icon-btn" }, h("dda-tooltip", { key: '1f16f4968cae849c7ebce8199b8f29b613d67d55', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '331c9e786c7f01cbb0f2ab5730c3f6fccd4dac16', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: 'e15e6a11f0d07eb5c3e03e633f1f70bdecacf7c8', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'baa12806b144c59248bebc1fd97345f85fd04924', class: "foot-icon-btn" }, h("dda-tooltip", { key: '277dba6416abc5dfbd4bbf610c95c4d6cc730722', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '04867496deec0f284cf8cc583af32f19c6ba2a47', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '1dc1dad2f2323441660636bc3294a720bd0fb273', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: 'bfcd9e5aa6ce3a33632df965668954741471e25e', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: '6138d7b0a8f1923f603439fa2225e0c3f19a7566', class: this.moreIconFamily || 'material-icons', "aria-hidden": "true" }, this.moreIcon)))))));
+            ], this.dubaiaeIconSrc && this.dubaiaeIconSmallSrc && (h("li", { key: 'edc740c6c800ef96bc14f5543923f82a041d446c', class: "foot-icon-btn" }, h("dda-tooltip", { key: '827b9a1300bde258043c55733fd3547a9390abda', title_text: this.dubaiaeIconTooltip, description: "", position: "top" }, h("a", { key: '5d8e8ed55f43e3615722365b9d26ec8f6e1c4b2f', href: this.dubaiaeIconHref, id: this.dubaiaeIconId }, h("img", { key: '4a1f27125a148e86f50f53afa1b930e0de090dd9', class: "dubaiae-text-icon", src: this.img(this.dubaiaeIconSrc, this.dubaiaeIconSrcDark), alt: this.dubaiaeIconAlt }), h("img", { key: '665af1359538e8355621f813a138f0eb9d7bd84b', class: "dubaiae-small-icon", src: this.dubaiaeIconSmallSrc, alt: this.dubaiaeIconAlt }))))), this.aiIconSrc && (h("li", { key: '01fee43f185be8bf1294aecbe52b055398b7b543', class: "foot-icon-btn" }, h("dda-tooltip", { key: '820c78282e14472ca990b12041db4ec4e642083e', title_text: this.aiIconTooltip, description: "", position: "top" }, h("a", { key: '54eb1224021a028677e9b8d23006fbd9beb11fbf', href: this.aiIconHref, id: this.aiIconId }, h("img", { key: '6d1feb742d0ca78e690351535bbd9cbeebe0d5f5', src: this.img(this.aiIconSrc, this.aiIconSrcDark), alt: this.aiIconAlt }))))), this.chatIconSrc && (h("li", { key: 'af4d7ad217827506e99407da3a8101f32d7bde78', class: "foot-icon-btn" }, h("dda-tooltip", { key: '7478d66901785ce407d0a51ab8e80fa538f67768', title_text: this.chatIconTooltip, description: "", position: "top" }, h("a", { key: '4c8b819b05e00738e6b6a2a2c5361ba3480ec956', href: this.chatIconHref, id: this.chatIconId }, h("img", { key: '316c1e6691521684e21ca55ee6199a959f20528a', src: this.img(this.chatIconSrc, this.chatIconSrcDark), alt: this.chatIconAlt })))))), this.moreIcon && (h("button", { key: '2fc1d6684a5c59a364edf3cd3e7a7c1c03e097a9', type: "button", class: "show-right-icon", "aria-label": this.more_button_label || 'More', "aria-expanded": this.rightOpen ? 'true' : 'false', "aria-controls": this.rightListId, onClick: () => (this.rightOpen = !this.rightOpen) }, h("i", { key: 'e7b3e9c6ba9dec1af710039255832e5a2242b8bd', class: this.moreIconFamily || 'material-icons', "aria-hidden": "true" }, this.moreIcon)))))));
     }
     static get is() { return "dda-sticky-footer"; }
     static get originalStyleUrls() {

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

@@ -44,7 +44,7 @@ export class DdaTabs {
         }
     }
     render() {
-        return (h(Host, { key: '5e604aeca69071b4163a54f8f5a6f3a49c36112b' }, h("div", { key: '9b08673fc84df116c5b5c055e4ce1ff47127b978', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
+        return (h(Host, { key: 'cd618ae51b42c4b3537c9d79f9d0722c6fedcdf3' }, h("div", { key: '6c5ce0c1e8742ad322d845da606224b0caa9286c', role: "group", "aria-label": this.aria_label, class: `dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}` }, this.parsedTabs.map((title, index) => (h("button", { id: this.button_id, name: this.button_name, type: "button", "aria-pressed": this.active_tab === index ? 'true' : 'false', class: `dda-tab-item ${this.active_tab === index ? 'active' : ''}`, onClick: () => this.setActiveTab(index) }, this.type === 'text-icon' && h("i", { class: `material-icons`, "aria-hidden": "true" }, this.parsedIcons[index] || ""), h("span", null, title)))))));
     }
     static get is() { return "dda-tabs"; }
     static get originalStyleUrls() {

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

@@ -119,7 +119,7 @@ export class DdaTextarea {
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
         const id = this.inputId;
-        return (h(Host, { key: 'c5edab142a6817b728721f1a12e6582050d29410' }, h("div", { key: '67bf7f7bbef0f412b85f5040cce9c5cafcb8c890', class: textareaClass }, this.label && h("label", { key: 'e41f2bb1556278cd8bc733418eea6031ca66cc3d', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        return (h(Host, { key: '22ab5c9ede23feedead5b61e2ed4963c1851ecbc' }, h("div", { key: 'cef06c4a45c19a9ae0eefddd2609b9e9e9f1e48c', class: textareaClass }, this.label && h("label", { key: '76fb6bce4a0510aab2a79209f450d201a24ef9a6', id: this.labelId, htmlFor: this.enable_rich_editor ? undefined : id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
         // F-015: previously a bare `<div id="editor">` — the visible
         // label's `for` cannot target a non-labelable <div>, and even
         // aria-labelledby here would be wrong: Quill turns this
@@ -127,7 +127,7 @@ export class DdaTextarea {
         // as a child `.ql-editor`, which is what AT and Tab actually
         // land on. The ARIA lives on quill.root (.ql-editor), applied
         // imperatively in syncRichEditorA11y() after mount.
-        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: 'f31f3c2467bcf9b65296f5c0117ebc5d27c4fdab', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e419e51c55c6427a7f9ae33d93b7b7a1639ea54', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'c9804b5734d99b02abf438119aa668b8facf8110', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: 'da29cc16cd25173e1834b61c5bfc1d11e878fa1d', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'a9e908888326a4bf968798fdc58df5706732ef12', id: this.errorId, class: "dda-error-message" }, h("span", { key: 'a03685c802486a01e2797740e459b636365778f8', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '845e5de4faceee90c1ce7f828eb298344f152418', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '044631e0c851953de8334d51087d5c7cb430a1e3', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
+        h("div", { id: id, class: "dda-richeditor-field" })) : (h("textarea", { id: id, name: this.textarea_name, "aria-label": this.aria_label, placeholder: this.placeholder, value: this.value, onInput: (event) => this.handleInput(event), class: "dda-input-field dda-input-textarea", maxLength: this.max_characters, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && (h("div", { key: '382ba6b5dc9755bf262adb033a118c1be6941bd8', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '5d07ab9a7f7698528fc731778bc668c69fa0e5ec', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '33236593cdafdf4ed5694e272f5c4fcf85ca2f68', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: '2845bd3bface431badd534f44f12faa748c1a718', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: 'cc1fabc27cd1bf0f87cfe6e3194c68a0d43ac7f7', id: this.errorId, class: "dda-error-message" }, h("span", { key: '731658aad2027ae1ae107ad58962acb6bbf40eb2', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '80c26defc477ed47439939cbb23875e0373c9598', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: 'e4f4ca076692226881b259322af66f87b18ccc38', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {

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

@@ -11,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '594a044248a1ea4f445ed239d97c56a1976e167a' }, h("label", { key: '2d20d01b337379355004d902b60d9b499f9055fc', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '081734cff68c6228fc7daa23ce821e7ac5bc817f', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '7c41a8ece7705f6fb3bb779dcdca7e09ca7df610', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'cdf4855501fa3d62d2371179fdb7a28070b1f0ce' }, this.title_text && h("span", { key: '019febd23f5964bd936d3edca64e7d2010a7dfab', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: 'a5bdee7e1ccc27ab2279e5ae9e5cab37aa32f709', class: "toggle-supporting" }, this.supporting))))));
+        return (h(Host, { key: '034a0d08e3c605fe38f0f0b3244e1d5cc7442472' }, h("label", { key: '93539da2d2ccfa1e51d0eebf4cc1b234e1e03606', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '21c0ca32b52ed5cb69da4339f1fce9c26dcaf1fa', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '8d2def2951a2566625276ba4d350d2407c19af77', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'e56ce02068c3e3c87f3b7452a81b741560297274' }, this.title_text && h("span", { key: 'faeea2f00ee0c50f0b96b5e24c09da088a98f183', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '7999b6126c0fefb6cb09ac67930e311dad18d2b2', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {

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

@@ -31,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '6f9ecc5f00431d9bcd4d94ac3ec2636901540a6c' }, h("div", { key: 'cd08883c43bf2b03965b0d3c96a13e78aa690f02', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '21ee3779a3bdef7ac2f53089e2e43b57634a60e0' }), h("div", { key: 'cda784b2367e27f3b6856ec67ad2a68058a7aed2', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'c8dc3672a03fc16589aadc1da1757bbb72f699c5' }, this.title_text), h("p", { key: 'a5082ddd48a0e60d07007bad1909ec7605d6ef95' }, this.description)))));
+        return (h(Host, { key: 'e77ebb12700ccbbef52e2d2138e0950d65127778' }, h("div", { key: 'ea64d67136e615b33138a61f1f1a4ba804db5eea', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'c191a8ff9be73014c2da7b1a4fdbcce57e94ba4d' }), h("div", { key: 'c6733ebddb99c659db89027384a50ba9c7836341', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '47c45f8411f5803c4ba59d0b9b4ac5c830b403c7' }, this.title_text), h("p", { key: '4f08ecda01307162262d7c79aa26e795ff03251b' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {

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

@@ -28,7 +28,7 @@ export class DdaUiCard {
     }
     render() {
         const HeadingTag = this.headingTag;
-        return (h(Host, { key: '1bbdb967a31df80eb8d5bc04764a1caf1fa198b3' }, h("div", { key: 'daf4a4e9096e7a2bbd17b90e890cd12b034fb0fa', class: 'dda-card' }, h("div", { key: '36a0c9f0f2744a761d951e245741fe427a17d0c1', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '9062bafbd3168c130be10eb44d8154a8f66c68e8' }, !!this.icon && (h("span", { key: '2c0b9b94601f3a53dd9fe0480b8dbd95d427afea', class: 'dda-card-icon' }, h("i", { key: 'd1f692ab879ca203c0361ca96f1e92694417bf8d', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: '63b3fd072c5417695eba7b883be27b1f1d848841', class: 'dda-card-icon' }, h("img", { key: '7860e1a3df40a4fa4d35b06c1fb58f66f554563c', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: '0202e3ef4cc6dbed859f11c63d76c9df5a2c2340', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: 'd376be8224e3f0c48bf56d0e067e3e875352df98', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: '47be07e6756f019a12385aab8ee5063848fc2f56', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: '5ee32e96529e3d5badad707cb9c1293b113e3370' }, h("i", { key: 'd1eb863f78293d3af3ed4b1df56c18126538c4b0', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: 'd0c885254ad24cbfda489377950ae178bf0cb134' })))));
+        return (h(Host, { key: 'd82fda87340a70612440a60808a854297d749883' }, h("div", { key: '8cb77a42b82ed7121af29a234e4c065a416887d5', class: 'dda-card' }, h("div", { key: 'e25298c9dbb2d9247bdc238f9c505180aae45b67', class: 'dda-card-body' }, this.type !== 'custom' && (h("div", { key: '3d6d6e4b66a787270593fc53ecb9432ef87cd144' }, !!this.icon && (h("span", { key: '17d02a755a1a6345961ba4c922d2c5205ca79dcd', class: 'dda-card-icon' }, h("i", { key: 'a4eea58a0b1511548c2d60b12bc05068326ce339', class: 'material-icons', "aria-hidden": "true" }, this.icon))), !!this.image && (h("span", { key: 'fe5b33c447adb2a06c20495b576d185258a98bca', class: 'dda-card-icon' }, h("img", { key: '7db29168e53eebe578fb8241795a47862d732d13', src: this.image, alt: this.maintitle }))), !!this.maintitle && h(HeadingTag, { key: 'c2c0a5bd81432dad7b5400c9011998f30823adbf', class: 'dda-card-title' }, this.maintitle), !!this.subtitle && h("p", { key: '9620bfa353acba31cb43d4a818c11d17bb58ea6d', class: 'dda-card-text-muted' }, this.subtitle), !!this.link && (h("a", { key: 'd81101699701091f7d952c6f38637a621fb27324', href: this.link, class: 'dda-card-link', onClick: (event) => this.linkClick.emit(event) }, this.linktext, ' ', this.linkicon && (h("span", { key: 'e7304fca873531077bb4cafda43e462b8d3403d4' }, h("i", { key: 'd13a118077f9a11b76ba06f5cb4f1ab20f9b5472', class: 'material-icons', "aria-hidden": "true" }, this.linkicon))))))), h("slot", { key: '995bf90013e00498354bfb9a3bfd6950032dd924' })))));
     }
     static get is() { return "dda-ui-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js

@@ -69,7 +69,7 @@ export class DdaSegmentedTabs {
         this.segmentChange.emit(index);
     }
     render() {
-        return (h("div", { key: '53f6f24a1b70fed2a4b1bf12f01d04ea40a61cc6', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
+        return (h("div", { key: '4a72982d49270f6c04cee7fdeaafcba7cccc6d3c', role: "group", "aria-label": this.aria_label, class: `dda-segmented-group ${this.custom_class} ${this.radius_type} ${this.component_mode}` }, this.parsedItems.map((item, index) => {
             const isSelected = index === this.active_index;
             const className = `dda-segmented-item${isSelected ? ' active' : ''}`;
             return item.startsWith('fo') ? (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', "aria-label": this.iconLabel(item, index), onClick: () => this.selectSegment(index) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, item))) : (h("button", { name: this.button_name, type: "button", class: className, "aria-pressed": isSelected ? 'true' : 'false', onClick: () => this.selectSegment(index) }, item));

package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js

@@ -20,7 +20,7 @@ export class DdaHorizontalStepper {
         }
     }
     render() {
-        return (h(Host, { key: '10e1418182c1cf52a9415bf84fbceae00b011add' }, h("div", { key: 'dbbc4fb5892954834c15512f76c551a7827b81e1', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
+        return (h(Host, { key: '30afa97eccb87ee8595802f451f2ca2f0624da2a' }, h("div", { key: '70d6126c99005e54565473c574bde94545584b58', class: `${this.custom_class} ${this.component_mode} h-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step ? 'completed' : ''}` }, h("div", { class: "h-step-indicator" }, h("div", { class: "circle" })), h("div", { class: "h-step-content" }, h("div", { class: "h-step-title" }, step.title), h("div", { class: "h-step-subtitle" }, step.subtitle), h("div", { class: "h-step-description" }, step.description))))))));
     }
     static get is() { return "dda-horizontal-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js

@@ -24,7 +24,7 @@ export class DdaVerticalStepper {
     render() {
         var _a;
         const current = (_a = this.current_step) !== null && _a !== void 0 ? _a : this.current_Step;
-        return (h(Host, { key: '8d8d30895491f4053370c1fa392f81a8c8df91ac' }, h("div", { key: '558f122ea5c72cadb35efc70d31cd18ec1271ca1', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
+        return (h(Host, { key: '9aefae11819e6581b65a39af851806fb2c4cfd75' }, h("div", { key: 'b9f812a1626f99993e07a3cf07c0a0a15ed42f11', class: `${this.custom_class} ${this.component_mode} v-stepper-container` }, this.parsedSteps.map((step, index) => (h("div", { class: `v-step ${index <= current ? 'active' : ''}` }, h("div", { class: "v-step-indicator" }, h("div", { class: "icon" }, h("i", { class: `material-icons` }, step.icon))), h("div", { class: "v-step-content" }, h("div", { class: "v-step-title" }, step.title), h("div", { class: "v-step-subtitle" }, step.subtitle), h("div", { class: "v-step-description" }, step.description)), h("div", { class: "v-step-arrow" }, h("i", { class: "material-icons  material-symbols-outlined" }, "chevron_right"))))))));
     }
     static get is() { return "dda-vertical-stepper"; }
     static get originalStyleUrls() {

package/dist/collection/global/global.css

@@ -3203,6 +3203,11 @@ body {
 .dda-search input[type="text"]::placeholder{
     color: var(--dda-on-surface-0);
 }
+/* On the transparent header the typed text and the caret are white, like the placeholder. */
+.transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"] {
+    color: var(--dda-neutral-100);
+    caret-color: var(--dda-neutral-100);
+}
 .transparent dda-header:not(.dda-scrolled) .dda-search input[type="text"]::-ms-input-placeholder {
     color: var(--dda-neutral-100);
 }