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

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

@@ -1,22 +1,30 @@
 import { h, Host } from "@stencil/core";
 import Quill from "quill";
 import "quill/dist/quill.snow.css";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaTextarea {
     constructor() {
+        /** Value of the textarea. Updates as the user types; in rich text mode it holds the editor HTML. */
         this.value = '';
         this.characterCount = 0; // State to track the character count
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the field when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-textarea');
     }
-    // F-016: ids derived from the consumer-supplied input_id (same pattern as
-    // dda-input/dda-select). F-015: the rich-editor container also needs a
+    // F-016: ids derived from the field id (the consumer-supplied input_id, or
+    // the generated fallback). F-015: the rich-editor container also needs a
     // stable label id to point aria-labelledby at.
+    get inputId() {
+        return this.input_id || this.fallbackId;
+    }
     get labelId() {
-        return this.input_id ? `${this.input_id}-label` : undefined;
+        return `${this.inputId}-label`;
     }
     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 = [
@@ -40,7 +48,8 @@ export class DdaTextarea {
         const editorEl = this.quill.root;
         editorEl.setAttribute('role', 'textbox');
         editorEl.setAttribute('aria-multiline', 'true');
-        if (this.labelId) {
+        // The label element (and so its id) only exists when `label` is set.
+        if (this.label) {
             editorEl.setAttribute('aria-labelledby', this.labelId);
         }
         else {
@@ -62,7 +71,7 @@ export class DdaTextarea {
     componentDidLoad() {
         if (this.enable_rich_editor) {
             // F-015: was `#editor` — the id is now the consumer-supplied
-            // input_id (possibly undefined), so target the stable class instead.
+            // input_id or a generated one, so target the stable class instead.
             const editor = this.el.querySelector('.dda-richeditor-field');
             this.quill = new Quill(editor, {
                 modules: {
@@ -109,7 +118,8 @@ export class DdaTextarea {
             this.input_status ? `dda-input-${this.input_status}` : '',
             this.custom_class, this.component_mode, this.textarea_name,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '622c5d071b6bc1a27d98bcce0b2e1103c2cd56b8' }, h("div", { key: '48c2d05b77ef1d8badd31382cb6669d8cc23e46d', class: textareaClass }, this.label && h("label", { key: '6d659cd684ff5afa46ceee22cc33dcdf0995f722', id: this.labelId, htmlFor: this.input_id, class: "dda-input-label" }, this.label), this.enable_rich_editor ? (
+        const id = this.inputId;
+        return (h(Host, { key: '36d3524d56afd5ec4839df413c7c4a9f73c02349' }, h("div", { key: 'b549320f31064d89f9c3cb93100e00209ffec631', class: textareaClass }, this.label && h("label", { key: '507594fc98f36d10d2b0cc7e728d2789d19acffd', 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
@@ -117,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: this.input_id, class: "dda-richeditor-field" })) : (h("textarea", { id: this.input_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: '6d6733d1b96b26acd713f2bdb230a6ecc93e746d', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '6e11cfb6dcc23a17fce5723d3a5e3b6cc8aef3b4', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '0946a74fbf33efb08ce50810b932595341f11b0c', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.helper_text), h("span", { key: 'ef8e61d7fae106951d802253afa962ed82096022', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '539ade6c788aa436587936ccf60a55e025752f18', id: this.errorId, class: "dda-error-message" }, h("span", { key: '25ec27d18994c0a83deb589bb5e407734a03526b', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '40d501e7d690a5525f17c36a7ea7b4114a8515e3', class: "material-icons  material-symbols-outlined" }, "info"), " ", this.error_message), h("span", { key: '191a2521e12bebe37d874f501bfe21d40d183487', 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: '4931a7959dcc63311c7bf39d9f48345705153b2b', id: this.helperId, class: "dda-helper-text" }, h("span", { key: '0611a1223915e8c25963ea0d2084b8d12ea4e505', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: 'c52d7a98fa16609999310aa9603185ea4249d642', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.helper_text), h("span", { key: 'c68c8d582a5d2a8f365fb31c3dd63f92280624ea', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))), this.error_message && (h("div", { key: '2a1476454a2b11836afbdcd46d78b49a0704f701', id: this.errorId, class: "dda-error-message" }, h("span", { key: '0009df8437058f165415719e25705b23b90f2610', class: "dda-flex dda-align-center dda-gap-2" }, h("i", { key: '283e095c1acbc957dbdc8ed3ed28cd717b05616d', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "info"), " ", this.error_message), h("span", { key: '2fc7cfb38f4ed9d3676acfa6c5f48fc772aff8cd', class: "dda-letter-count" }, this.characterCount, " / ", this.max_characters))))));
     }
     static get is() { return "dda-textarea"; }
     static get originalStyleUrls() {
@@ -144,7 +154,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the textarea or the rich text editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -163,7 +173,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the field through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,7 +192,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Value of the textarea. Updates as the user types; in rich text mode it holds the editor HTML."
                 },
                 "getter": false,
                 "setter": false,
@@ -202,7 +212,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field with the character count. When set, the field gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -221,7 +231,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation style. `error` shows the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -240,7 +250,7 @@ export class DdaTextarea {
                 "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,
@@ -259,7 +269,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field with the character count, linked with `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +288,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -297,7 +307,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Replaces the textarea with a Quill rich text editor and toolbar."
                 },
                 "getter": false,
                 "setter": false,
@@ -316,7 +326,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Maximum number of characters (`maxlength` of the textarea), shown in the character count."
                 },
                 "getter": false,
                 "setter": false,
@@ -335,7 +345,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -354,7 +364,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the textarea or editor. Also used for the label and the helper and error text ids. Optional: an id is generated when it is not set."
                 },
                 "getter": false,
                 "setter": false,
@@ -373,7 +383,7 @@ export class DdaTextarea {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the textarea. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -392,7 +402,7 @@ export class DdaTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the textarea, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -57,10 +57,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the textarea field'
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the textarea field',
-        },
         textarea_name: {
             control: { type: 'text' },
             description: 'Name of the textarea field',
@@ -84,7 +80,6 @@ export default {
     component_mode=""
     input_id="input"
     aria_label="textarea"
-    onchange="console.log('changed')"
     textarea_name="textarea-name"
 ></dda-textarea>
   \`\`\`
@@ -112,7 +107,6 @@ Default.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'textarea',
-    onchange: '',
     textarea_name: "textarea-name",
 };
 export const WithErrorMessage = Template.bind({});
@@ -127,7 +121,6 @@ WithErrorMessage.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'textarea',
-    onchange: '',
     textarea_name: "textarea-name",
 };
 export const Disabled = Template.bind({});
@@ -142,7 +135,6 @@ Disabled.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'textarea',
-    onchange: '',
     textarea_name: "textarea-name",
 };
 export const RichEditorEnabled = Template.bind({});
@@ -157,6 +149,5 @@ RichEditorEnabled.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'textarea',
-    onchange: '',
     textarea_name: "textarea-name",
 };

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

@@ -53,6 +53,15 @@
 .dda-toggle-btn input:checked~.toggle::after {
   left: 17px;
 }
+/* WCAG 2.4.7 Focus Visible: the native input is hidden, so keyboard focus
+   draws the shared two-tone ring (same idiom as .dda-btn:focus-visible in
+   dda-button.css) on the track. */
+.dda-toggle-btn input:focus-visible~.toggle,
+.dda-toggle-btn input:checked:focus-visible~.toggle{
+  -webkit-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+  -moz-box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px rgba(0, 0, 0, 0.65);
+}
 
 .dda-toggle-sm .toggle{
   width: 27px;

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class DdaToggle {
     constructor() {
+        /** Extra CSS classes added to the toggle label. */
         this.custom_class = '';
     }
     render() {
@@ -10,7 +11,7 @@ export class DdaToggle {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: 'f01e62cab63407de5a460bea59d60be7baef9b96' }, h("label", { key: '42494c1ace83b7b0af66116e6fa263f2abe4a647', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '77e61b283527b562bbac7b1577bb27aaab285913', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '469818087720955164d61897c2d9e31a5d2f082c', class: "toggle" }), h("p", { key: 'a2866cc3ebfde7f3216b0713e725b085099be974' }, h("span", { key: 'd19a8c1a9cc7b252326dce41b0a3dd1577457825', class: "toggle-title" }, "Radio Button Title"), h("span", { key: '667b7febf89ff08e3749dbd95478120c3b4ff091', class: "toggle-supporting" }, "Supporting Text")))));
+        return (h(Host, { key: 'dea39431c86169e24d54733a62c769eeaa2b689a' }, h("label", { key: '3cacd3f24b5f943148c08d49507367f447360130', class: toggleClass, htmlFor: this.input_id }, h("input", { key: '05ddb8d7855baa638d27a2e75e958b0925cb6133', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("span", { key: '94a53389d2bc3e2a0865f4eabe144957088f3c9e', class: "toggle" }), (this.title_text || this.supporting) && (h("p", { key: 'f2c763dfde5598c8c38aa6ded502246915d6697c' }, this.title_text && h("span", { key: '1226a811dccc581837743c79b698ee553eb561b8', class: "toggle-title" }, this.title_text), this.supporting && h("span", { key: '53b895d6524528f56a1b8c0e85fcd1292a2295a4', class: "toggle-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-toggle"; }
     static get originalStyleUrls() {
@@ -37,7 +38,7 @@ export class DdaToggle {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Checked (on) state of the inner input. Read the current state from the input or its `change` event."
                 },
                 "getter": false,
                 "setter": false,
@@ -56,7 +57,7 @@ export class DdaToggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `sm`, `md` or `lg`."
                 },
                 "getter": false,
                 "setter": false,
@@ -75,7 +76,7 @@ export class DdaToggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the toggle label."
                 },
                 "getter": false,
                 "setter": false,
@@ -95,7 +96,7 @@ export class DdaToggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner checkbox input."
                 },
                 "getter": false,
                 "setter": false,
@@ -114,7 +115,7 @@ export class DdaToggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner checkbox input."
                 },
                 "getter": false,
                 "setter": false,
@@ -133,7 +134,7 @@ export class DdaToggle {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the toggle, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -152,12 +153,50 @@ export class DdaToggle {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the inner checkbox input. Set it when there is no `title_text`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "aria_label"
+            },
+            "title_text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown next to the switch. Nothing is shown when it is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title_text"
+            },
+            "supporting": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary text shown under the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting"
             }
         };
     }

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

@@ -10,22 +10,18 @@ export default {
             control: 'boolean',
             description: 'Checked state of the toggle',
         },
-        label_on: {
+        title_text: {
             control: 'text',
-            description: 'Label for the "On" state',
+            description: 'Label shown next to the switch',
         },
-        label_off: {
+        supporting: {
             control: 'text',
-            description: 'Label for the "Off" state',
+            description: 'Secondary text shown under the title',
         },
         group_name: {
             control: 'text',
             description: 'default',
         },
-        label_for: {
-            control: 'text',
-            description: 'default',
-        },
         input_id: {
             control: 'text',
             description: 'default',
@@ -42,10 +38,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the toggle component',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the toggle component',
-        }
     },
     parameters: {
         docs: {
@@ -56,15 +48,14 @@ export default {
   \`\`\`html
 <dda-toggle
     checked="false"
-    label_on="On"
-    label_off="Off"
+    title_text="Notifications"
+    supporting="Email me updates"
     size="md"
     group_name="togglegroup1"
     input_id="testId"
     custom_class=""
     component_mode=""
     aria_label="toggle"
-    onchange="console.log('changed')"
 ></dda-toggle>
   \`\`\`
   `,
@@ -82,27 +73,24 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
     checked: false,
-    label_on: 'On',
-    label_off: 'Off',
+    title_text: 'Notifications',
+    supporting: 'Email me updates',
     size: 'md',
     group_name: 'togglegroup1',
     input_id: 'testId',
     custom_class: '',
     component_mode: '',
     aria_label: 'toggle',
-    onchange: '',
 };
 export const Checked = Template.bind({});
 Checked.args = {
     checked: true,
-    label_on: 'On',
-    label_off: 'Off',
+    title_text: 'Notifications',
+    supporting: 'Email me updates',
     size: 'md',
     group_name: 'togglegroup1',
     input_id: 'testId',
     custom_class: '',
     component_mode: '',
-    on_toggled: () => void (0),
     aria_label: 'toggle',
-    onchange: '',
 };

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

@@ -1,7 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class DdaTooltip {
     constructor() {
-        this.position = 'top'; // Default to top position
+        /** Side of the trigger where the box appears: `top`, `bottom`, `left` or `right`. */
+        this.position = 'top';
+        /** Extra CSS classes added to the tooltip container. */
         this.custom_class = '';
         // F-011 (WCAG 1.4.13 dismissible): Escape hides the tooltip without
         // moving the pointer or focus. Losing hover/focus (mouseleave/focusout)
@@ -29,7 +31,7 @@ export class DdaTooltip {
         this.el.removeEventListener('mouseleave', this.resetDismissed);
     }
     render() {
-        return (h(Host, { key: '1cdf4f709c81572379fffdfb63832ce42345aceb' }, h("div", { key: '4a02d6eda15fd3e97b56b6eb6e58566164f250ec', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: 'f18f7b1d729b310b8c5467c4766f675dfedaaea9' }), h("div", { key: 'b21175526d8510415920b09a0993b3bd92387046', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: '2571076616dcd823da28a14a9aa3c39b42ef6b1c' }, this.title_text), h("p", { key: '8d1c7abbc7fb5a2d66df13b5abb1a9280495ab07' }, this.description)))));
+        return (h(Host, { key: '2ed16ceb8feae5e30c32f8f6233b4af58bcaf7a9' }, h("div", { key: '5dae51f2ac993d030be0c2287552f6979eb14ca5', class: `dda-tooltip-container ${this.custom_class} ${this.component_mode} ${this.dismissed ? 'dismissed' : ''}` }, h("slot", { key: '18c1f46d365c677fe0ca88bf4582e7899b08df0d' }), h("div", { key: 'df7107e2d43c930942faea1c5e574cbe6fea9608', class: `dda-tooltip-box ${this.position}` }, h("strong", { key: 'abf766e5920575854a064b25b4f63536c9fd6cdf' }, this.title_text), h("p", { key: '7fb2ba0d0f7ce6ceff058b5c56df509acab10e24' }, this.description)))));
     }
     static get is() { return "dda-tooltip"; }
     static get originalStyleUrls() {
@@ -56,7 +58,7 @@ export class DdaTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Bold heading shown in the tooltip box."
                 },
                 "getter": false,
                 "setter": false,
@@ -75,7 +77,7 @@ export class DdaTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text shown below the heading in the tooltip box."
                 },
                 "getter": false,
                 "setter": false,
@@ -94,7 +96,7 @@ export class DdaTooltip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Side of the trigger where the box appears: `top`, `bottom`, `left` or `right`."
                 },
                 "getter": false,
                 "setter": false,
@@ -114,7 +116,7 @@ export class DdaTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the tooltip container."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,7 +136,7 @@ export class DdaTooltip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme class added to the tooltip container, e.g. `light-mode`. The tooltip styles do not change with it."
                 },
                 "getter": false,
                 "setter": false,