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

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

@@ -17,7 +17,11 @@ export default {
         },
         search_input_name: {
             control: { type: 'text' },
-            description: 'Name for the search input',
+            description: 'Query parameter name for the search input (default q)',
+        },
+        search_action: {
+            control: { type: 'text' },
+            description: 'Results page URL. A search does a GET to it unless searchSubmit is cancelled',
         },
         language_button_name: {
             control: { type: 'text' },
@@ -59,7 +63,7 @@ To use the \`dda-header\` component, pass the following props:
     second-logo-white-src="digital-logo-white.svg"
     second-logo-alt="Dubai-Digital-Authority"
     login-link="/login"
-    readSpeakerLink=""
+    read-speaker-link=""
     language_text="العربية"
     hamburger_menu_button_name="hamburger_menu_button_name"
     accessibility_button_name="accessibility_button_name"
@@ -69,15 +73,7 @@ To use the \`dda-header\` component, pass the following props:
     close_menu_button_name="close_menu_button_name"
     close_accessibility_button_name="close_accessibility_button_name"
     close_sidebar_button_name="close_sidebar_button_name"
-    toggle_accessibility_button_name="toggle_accessibility_button_name"
-    languageswitch="() => console.log('Language Switcher')"
-    smtextsize="() => console.log('Small Text')"
-    basetextsize="() => console.log('Base Text')"
-    lgtextsize="() => console.log('Large Text')"
-    normalcontrast="() => console.log('Normal Text')"
-    blindcontrast="() => console.log('Blind Text')"
-    redcontrast="() => console.log('Red Text')"
-    greencontrast="() => console.log('Green Text')">
+    toggle_accessibility_button_name="toggle_accessibility_button_name">
 </dda-header>
   \`\`\`
 `,
@@ -99,26 +95,20 @@ const Template = args => `
       accessibility_button_name="${args.accessibility_button_name}"
       search_button_name="${args.search_button_name}"
       search_input_name="${args.search_input_name}"
+      search_action="${args.search_action}"
       language_button_name="${args.language_button_name}"
       close_menu_button_name="${args.close_menu_button_name}"
       close_accessibility_button_name="${args.close_accessibility_button_name}"
       close_sidebar_button_name="${args.close_sidebar_button_name}"
       toggle_accessibility_button_name="${args.toggle_accessibility_button_name}"
-      readSpeakerLink="app-eu.readspeaker.com"
-      languageSwitch="() => console.log('Language Switcher')"
-      smTextSize="() => console.log('Small Text')"
-      baseTextSize="() => console.log('Base Text')"
-      lgTextSize="() => console.log('Large Text')"
-       normalContrast="() => console.log('Normal Text')"
-        blindContrast="() => console.log('Blind Text')"
-         redContrast="() => console.log('Red Text')"
-          greenContrast="() => console.log('Green Text')"
+      read-speaker-link="${args.readSpeakerLink}"
       quick-links='${JSON.stringify(args.quickLinks)}'
       side-menu-items='${JSON.stringify(args.sideMenuItems)}'
     ></dda-header>
         <script>
       const header = document.querySelector('dda-header');
       header.addEventListener('languageSwitch', ${args.languageSwitch});
+      header.addEventListener('searchSubmit', (event) => console.log('Search', event.detail.query));
        header.addEventListener('smTextSize', ${args.smTextSize});
               header.addEventListener('baseTextSize', ${args.baseTextSize});
                      header.addEventListener('lgTextSize', ${args.lgTextSize});
@@ -141,7 +131,8 @@ Default.args = {
     hamburger_menu_button_name: "hamburger_menu_button_name",
     accessibility_button_name: "accessibility_button_name",
     search_button_name: "search_button_name",
-    search_input_name: "search_input_name",
+    search_input_name: "q",
+    search_action: "",
     language_button_name: "language_button_name",
     close_menu_button_name: "close_menu_button_name",
     close_accessibility_button_name: "close_accessibility_button_name",

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

@@ -88,6 +88,12 @@ export class DdaHomeBanner {
         this.updateSlides();
         this.startAutoplay();
     }
+    componentDidLoad() {
+        // Non-<slide> children are ignored, which otherwise looks like a blank banner.
+        if (!this.slides.length) {
+            console.warn('dda-home-banner: no <slide> children found. Each slide must be a <slide> element; other children are not shown.');
+        }
+    }
     disconnectedCallback() {
         var _a, _b;
         this.listening = false;
@@ -176,10 +182,10 @@ export class DdaHomeBanner {
     render() {
         const total = this.slides.length;
         const showAutoplayToggle = this.autoplay && !this.reducedMotion;
-        return (h(Host, { key: 'ac323ffde47f44882ece6d32e9fb62b50fd32c08', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'de9562eaf2c85d3848aa81af046f96642637e78c', class: "dda-slider-container" }, h("div", { key: 'c3cc772f608ee5ccb3256e889e99aab836ca101a', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: '4818e3c8bde26958dc66cf5fdb5180f2dfff1173' })), h("div", { key: '1d1bb6fb6efc59a2c7b652617e6e9425a0147b19', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '7b67231c638c6bf0817733a056ed247070f5a4c2', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: '167ca0ce45416089292def96db6b799907522377', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: 'ee55277e5fea022a2699811025f9768d8598b8ba', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: 'd9da0726b886ec951974e16c9429deab601e6e16', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: '75813985527f96c5086d21a4ec7aaca7484a1217' }, this.slides.map((_, index) => {
+        return (h(Host, { key: '337ecda1c81691400d3cf4368ae74baeaf997ad1', class: "home-slider", role: "region", "aria-roledescription": "carousel", "aria-label": this.aria_label }, h("div", { key: 'c916baad761db8b607c783f2fd58dcf0eda9c2ee', class: "dda-slider-container" }, h("div", { key: '7ce645f06a4a83d78185563d0d99e472aee19dce', class: "dda-slides", style: { width: total * 100 + 'vw', left: this.currentSlide * -100 + '%' } }, h("slot", { key: 'f946bde4fcf2ae779a96dc6d2a99bc68ab358fd2' })), h("div", { key: 'eb981c8e7753780a5c1d80f9f3651a8797e480eb', class: 'slider-nav' }, showAutoplayToggle && (h("button", { key: '3bbdc0f9fd960df2037deb65e4ddace5055d28bb', class: "pause", type: "button", "aria-label": this.isPaused ? this.play_button_label : this.pause_button_label, onClick: this.togglePause }, h("i", { key: 'c9d122cd73a083a871f3ba390987cb5e7aa3a1b6', class: "material-icons", "aria-hidden": "true" }, this.isPaused ? 'play_arrow' : 'pause'))), h("button", { key: '24f4655bc2a97cbe43e5d9c666b800be75e4d18d', class: "prev", type: "button", "aria-label": this.previous_button_label, onClick: () => this.prevSlide() }, h("i", { key: '028e2fffddc89b3679051f528245a931c4e6dc4d', class: "material-icons", "aria-hidden": "true" }, "chevron_left")), h("ul", { key: 'bbda2847681926070012d86593892b4788d409f0' }, this.slides.map((_, index) => {
             const isCurrent = this.currentSlide === index;
             return (h("li", null, h("button", { type: "button", class: isCurrent ? 'dots active' : 'dots', "aria-label": `${this.slide_button_label} ${index + 1}`, "aria-current": isCurrent ? 'true' : null, onClick: () => this.setSlide(index) })));
-        })), h("button", { key: '81d0bdaaab9850fd4c9c15303955b79a9e48ced7', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'c6807fe51b2334963a1484872ffc71f92855a389', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: 'ac26f8ea696ad5779617c49081cafad67c77153d', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
+        })), h("button", { key: '64f35b47bf5ed0fc6a2f6cec8fe709ff45e3909f', class: "next", type: "button", "aria-label": this.next_button_label, onClick: () => this.nextSlide() }, h("i", { key: 'd733c1fc3970f2d4f5319e8215636cdea0a2d9f9', class: "material-icons", "aria-hidden": "true" }, "chevron_right"))), h("div", { key: '8c66648d97b0c82868b7162486d8e91eb6e46a39', class: "visually-hidden", role: "status", "aria-live": this.isRotating ? 'off' : 'polite' }, total ? this.statusText(this.currentSlide + 1, total) : ''))));
     }
     static get is() { return "dda-home-banner"; }
     static get originalStyleUrls() {

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

@@ -55,6 +55,19 @@
   align-items: center;
 }
 
+/* Built-in scrim behind the slide text. The ::before gradient only darkens the bottom and fades
+   to nothing mid-slide, so white text over a bright photo fell to 2-3:1. At 0.55+ black the
+   background under white text stays at or below sRGB 115 even on a pure white photo (4.5:1+).
+   The dark side follows the text start edge; RTL mirrors it. */
+.home-slider .slide-wrap {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.2) 100%);
+}
+
+[dir='rtl'] .home-slider .slide-wrap,
+.home-slider[dir='rtl'] .slide-wrap {
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.2) 100%);
+}
+
 .home-slider .dda-slider-container {
   width: 100vw;
   height: 100vh;
@@ -92,7 +105,8 @@
   width: 100%;
   text-align: center;
   position: absolute;
-  bottom: 250px;
+  /* The quick-link cards over the banner rise by the sticky footer height, so the controls do too. */
+  bottom: calc(250px + var(--dda-sticky-footer-height, 0px));
   left: 0;
   display: flex;
   justify-content: center;
@@ -192,4 +206,10 @@
   .slider-nav {
     bottom: 100px;
   }
+  /* Below 992px the text runs the full width, so the scrim must too. */
+  .home-slider .slide-wrap,
+  [dir='rtl'] .home-slider .slide-wrap,
+  .home-slider[dir='rtl'] .slide-wrap {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
+  }
 }

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

@@ -1,20 +1,26 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaInput {
     constructor() {
+        /** Native input type, e.g. `text`, `password`, `email`, `number`, `date` or `time`. The legacy values `Witherror` and `disabled` only apply the error or disabled styling. */
         this.type = 'text';
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-input');
     }
     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).
+    // F-016: ids are derived from the input id (the consumer-supplied input_id,
+    // or the generated fallback), so they never collide across instances.
+    get inputId() {
+        return this.input_id || this.fallbackId;
+    }
     get helperId() {
-        return this.input_id ? `${this.input_id}-helper` : undefined;
+        return `${this.inputId}-helper`;
     }
     get errorId() {
-        return this.input_id ? `${this.input_id}-error` : undefined;
+        return `${this.inputId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -35,7 +41,8 @@ export class DdaInput {
             this.component_mode,
             this.input_name,
         ].filter(Boolean).join(' ');
-        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))));
+        const id = this.inputId;
+        return (h(Host, { key: 'fb19ff41ee2bb68694a569d5f9176e91976ff1bd' }, h("div", { key: 'a0e88b035e84a2bb843c16c133b1c42d9920cbb9', class: inputClass }, this.label && h("label", { key: '13b74df04c3afefc4467e8661a7b39531405283c', htmlFor: id, class: "dda-input-label" }, this.label), h("input", { key: 'e9b9b54145cd7ae6e0784f2fa314fcd214c5e5d4', "aria-label": this.aria_label, id: 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: '2c3f4562423f05642eefd37e333720f15aa920e5', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'cc986bf0d4c49550937ff23d82ec8f4548d890a7', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-input"; }
     static get originalStyleUrls() {
@@ -62,7 +69,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -81,7 +88,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the inner `<input>`."
                 },
                 "getter": false,
                 "setter": false,
@@ -100,7 +107,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Value of the inner `<input>`. Updates as the user types."
                 },
                 "getter": false,
                 "setter": false,
@@ -119,7 +126,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Native input type, e.g. `text`, `password`, `email`, `number`, `date` or `time`. The legacy values `Witherror` and `disabled` only apply the error or disabled styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -139,7 +146,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the input and linked with `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -158,7 +165,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the input. When set, the input gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -177,7 +184,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation style. `error` shows the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -196,7 +203,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size. `small` shows a smaller field; omit for the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -215,7 +222,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Status style. `disabled` shows the disabled styling only; it does not set the native `disabled` attribute."
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +241,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +260,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -272,7 +279,7 @@ export class DdaInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner `<input>`. Also used for the label `for` and the helper and error text ids. Optional: an id is generated when it is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -291,7 +298,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the inner `<input>`. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -310,7 +317,7 @@ export class DdaInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner `<input>`, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -59,10 +59,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the input field',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the input field',
-        },
         input_name: {
             control: { type: 'text' },
             description: 'Name of the input field',
@@ -88,7 +84,6 @@ To use the \`dda-input\` component, pass the following props:
     component_mode=""
     input_id="input"
     aria_label="input"
-    onchange="console.log('changed')"
     input_name=""
 ></dda-input>
   \`\`\`
@@ -118,7 +113,6 @@ Text.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Password = Template.bind({});
@@ -134,7 +128,6 @@ Password.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Email = Template.bind({});
@@ -150,7 +143,6 @@ Email.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Number = Template.bind({});
@@ -166,7 +158,6 @@ Number.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Date = Template.bind({});
@@ -182,7 +173,6 @@ Date.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Time = Template.bind({});
@@ -198,7 +188,6 @@ Time.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const Witherror = Template.bind({});
@@ -215,7 +204,6 @@ Witherror.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };
 export const disabled = Template.bind({});
@@ -232,6 +220,5 @@ disabled.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
 };

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

@@ -1,19 +1,26 @@
 import { Host, h } from "@stencil/core";
 export class DdaLinkButton {
     constructor() {
-        /** Type of button, e.g., "button", "submit" */
+        /** Not used: the component renders an `<a>` link, which has no `type`. */
         this.type = 'button';
-        /** Disable the button */
+        /** Not used: the link stays active. For a disabled look, set `button_color` to `disabled`. */
         this.disabled = false;
-        /** Icon class for the starting icon */
+        /** Material Symbols icon name shown before the label, e.g. `arrow_back`. */
         this.start_icon = '';
-        this.end_icon = ''; // icon class
+        /** Material Symbols icon name shown after the label, e.g. `arrow_forward`. */
+        this.end_icon = '';
+        /** Accessible name of the link. Required when the link shows only an icon. */
         this.aria_label = '';
-        this.button_color = 'primary'; // e.g., 'primary', 'error'
+        /** Color variant, e.g. `default-primary`, `default-secondary`, `error-primary`, `onsurface-link` or `disabled`. */
+        this.button_color = 'primary';
+        /** Shape: `default` or `circle`. */
         this.button_shape = '';
+        /** Shape of an icon-only link: `default` or `circle`. */
         this.icon_button_shape = '';
-        this.custom_class = ''; // Custom class prop
-        this.href = '#'; // Custom class prop
+        /** Extra CSS classes added to the inner `<a>`. */
+        this.custom_class = '';
+        /** URL the link opens. */
+        this.href = '#';
     }
     render() {
         const linkbuttonClass = [
@@ -26,9 +33,9 @@ export class DdaLinkButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'c05598ead44c09c1cd4d3a8699639c4012e37847' }, h("a", { key: '6f136a098f42b34d122ad5f6731334091b587938',
+        return (h(Host, { key: '8dc6bd810c9049ea16753e583f3b2459d7be8dce' }, h("a", { key: '8f33348f1cb96c947671cd0041cdfae96f75ce8d',
             //   type={this.type}
-            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))));
+            id: this.button_id, href: this.href, class: linkbuttonClass, "aria-label": this.aria_label }, this.start_icon && h("i", { key: '2f2a09f7aff30f48cc0e0bebbac6fb8747fec785', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '7c8c764e2df42a872f8bd5123a8882f6ab30309c' }), this.end_icon && h("i", { key: 'e4892d4cd4b763d4ab306bd60f24b2f25a43ec59', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
     }
     static get is() { return "dda-link-button"; }
     static get originalStyleUrls() {
@@ -55,7 +62,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Type of button, e.g., \"button\", \"submit\""
+                    "text": "Not used: the component renders an `<a>` link, which has no `type`."
                 },
                 "getter": false,
                 "setter": false,
@@ -75,7 +82,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disable the button"
+                    "text": "Not used: the link stays active. For a disabled look, set `button_color` to `disabled`."
                 },
                 "getter": false,
                 "setter": false,
@@ -95,7 +102,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon class for the starting icon"
+                    "text": "Material Symbols icon name shown before the label, e.g. `arrow_back`."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +122,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Symbols icon name shown after the label, e.g. `arrow_forward`."
                 },
                 "getter": false,
                 "setter": false,
@@ -135,7 +142,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the link. Required when the link shows only an icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -155,7 +162,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color variant, e.g. `default-primary`, `default-secondary`, `error-primary`, `onsurface-link` or `disabled`."
                 },
                 "getter": false,
                 "setter": false,
@@ -175,7 +182,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `sm`, `md`, `lg` or `xl`."
                 },
                 "getter": false,
                 "setter": false,
@@ -194,7 +201,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shape: `default` or `circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -214,7 +221,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shape of an icon-only link: `default` or `circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -234,7 +241,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Gap between icon and label, as a spacing step: 1\u20136, 8, 10, 12 or 16."
                 },
                 "getter": false,
                 "setter": false,
@@ -253,7 +260,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the inner `<a>`."
                 },
                 "getter": false,
                 "setter": false,
@@ -273,7 +280,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "URL the link opens."
                 },
                 "getter": false,
                 "setter": false,
@@ -293,7 +300,7 @@ export class DdaLinkButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the link, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -312,7 +319,7 @@ export class DdaLinkButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner `<a>`."
                 },
                 "getter": false,
                 "setter": false,