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

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

@@ -1,19 +1,31 @@
 import { h, Host } from "@stencil/core";
 export class DdaBreadcrumb {
     constructor() {
-        this.design = 'text'; // Default to text design
-        this.separator = 'chevron_right'; // Default to chevron separator
+        /** What each item shows: `text` (label only), `icon-text` (icon and label) or `icon` (icon only). */
+        this.design = 'text';
+        /** Material Symbols icon shown between items: `chevron_right` or `pen_size_2` (a slash). */
+        this.separator = 'chevron_right';
+        /** Extra CSS classes added to the inner `<nav>`. */
         this.custom_class = '';
-        this.breadcrumbs = [];
     }
-    componentWillLoad() {
-        const breadcrumbsData = this.el.getAttribute('data-breadcrumbs');
-        if (breadcrumbsData) {
-            this.breadcrumbs = JSON.parse(breadcrumbsData);
+    parseBreadcrumbs() {
+        var _a;
+        const source = (_a = this.breadcrumbs) !== null && _a !== void 0 ? _a : this.el.getAttribute('data-breadcrumbs');
+        if (!source)
+            return [];
+        if (Array.isArray(source))
+            return source;
+        try {
+            const parsed = JSON.parse(source);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch (_b) {
+            return [];
         }
     }
     render() {
-        return (h(Host, { key: '3b2fb277fddd52159d3df33176c255cc93827b89' }, h("div", { key: '4b8d65186e70be644326d300ad581e20b7c2f9e5', class: this.component_mode }, h("nav", { key: '57730ad06b7854a068b8cb7b626678d4e4dee341', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: '1b286c52f35bcd99c1d65f56eac8a19b0486ef33', class: "dda-breadcrumb" }, this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons` }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text)), index < this.breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined` }, this.separator))))))))));
+        const breadcrumbs = this.parseBreadcrumbs();
+        return (h(Host, { key: '87d47d41d1da4d9bac28cbea4136a2b22728b6ee' }, h("div", { key: '038c176e93c24c117fdc50e4245c503adbaf65dc', class: this.component_mode }, h("nav", { key: '36a47a1d0e908d5ce10757051f00a723e867cf92', "aria-label": "breadcrumb", class: `${this.custom_class}` }, h("ol", { key: 'c1ef97d3a64e0cf56f9ee1b2e9561c5d5d7cb300', class: "dda-breadcrumb" }, breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons` }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text)), index < breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined` }, this.separator))))))))));
     }
     static get is() { return "dda-breadcrumb"; }
     static get originalStyleUrls() {
@@ -40,7 +52,7 @@ export class DdaBreadcrumb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "What each item shows: `text` (label only), `icon-text` (icon and label) or `icon` (icon only)."
                 },
                 "getter": false,
                 "setter": false,
@@ -60,7 +72,7 @@ export class DdaBreadcrumb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Symbols icon shown between items: `chevron_right` or `pen_size_2` (a slash)."
                 },
                 "getter": false,
                 "setter": false,
@@ -80,7 +92,7 @@ export class DdaBreadcrumb {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the inner `<nav>`."
                 },
                 "getter": false,
                 "setter": false,
@@ -100,12 +112,37 @@ export class DdaBreadcrumb {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class on the wrapper, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "component_mode"
+            },
+            "breadcrumbs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | BreadcrumbItem[]",
+                    "resolved": "BreadcrumbItem[] | string",
+                    "references": {
+                        "BreadcrumbItem": {
+                            "location": "local",
+                            "path": "/root/Coding/dubai-design-system/packages/stencil/src/components/dda-breadcrumb/dda-breadcrumb.tsx",
+                            "id": "src/components/dda-breadcrumb/dda-breadcrumb.tsx::BreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The items, as an array or a JSON string of `{ text, icon?, url? }` objects. The last item is the current page. The `data-breadcrumbs` attribute is still read when this is not set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breadcrumbs"
             }
         };
     }

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

@@ -1,18 +1,25 @@
 import { Host, h } from "@stencil/core";
 export class DdaButton {
     constructor() {
-        /** Type of button, e.g., "button", "submit" */
+        /** Native button type: `button`, `submit` or `reset`. */
         this.type = 'button';
-        /** Disable the button */
+        /** Disables the button. */
         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. Required when the button 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`. */
+        this.button_color = 'primary';
+        /** Shape: `default` or `circle`. */
         this.button_shape = '';
+        /** Shape of an icon-only button: `default` or `circle`. */
         this.icon_button_shape = '';
-        this.custom_class = ''; // Custom class prop
+        /** Extra CSS classes added to the inner `<button>`. */
+        this.custom_class = '';
+        /** `name` of the inner `<button>`, submitted with its form. */
         this.button_name = '';
     }
     render() {
@@ -26,7 +33,7 @@ export class DdaButton {
             this.custom_class, // Include custom class
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '7ca601d66dd70e18be4348ed1c6fefe1d564ddc3' }, h("button", { key: '76f6ffc16cdbc36d375b232247e1fe568695e81f', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler, name: this.button_name }, this.start_icon && h("i", { key: 'd0d51f02bb5bca06a17bca151c356d3ffd6aa8ea', class: "material-icons  material-symbols-outlined" }, this.start_icon), h("slot", { key: 'f9f5b57e2063cb1b6faae31cb39705d451dc14aa' }), this.end_icon && h("i", { key: '133fa4595380dfca13e29628fcbfe7b59501ab8f', class: "material-icons  material-symbols-outlined" }, this.end_icon))));
+        return (h(Host, { key: '25a967630460899e8083499dbaba5a8da655c03d' }, h("button", { key: 'cffeab56005fd6f9c736f7a4f2615c273fbff6d2', id: this.button_id, type: this.type, class: buttonClass, disabled: this.disabled, "aria-label": this.aria_label, onClick: this.clickHandler, name: this.button_name }, this.start_icon && h("i", { key: '7e91f590471e16e74128d5edfd149935f7c7933b', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.start_icon), h("slot", { key: '3f135fe5fdce6e4cc46626285d40b6859f95c213' }), this.end_icon && h("i", { key: 'd1ea77fa05a58a354b7c8c365d01196d624407c6', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.end_icon))));
     }
     static get is() { return "dda-button"; }
     static get originalStyleUrls() {
@@ -53,7 +60,7 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Type of button, e.g., \"button\", \"submit\""
+                    "text": "Native button type: `button`, `submit` or `reset`."
                 },
                 "getter": false,
                 "setter": false,
@@ -73,7 +80,7 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disable the button"
+                    "text": "Disables the button."
                 },
                 "getter": false,
                 "setter": false,
@@ -93,7 +100,7 @@ export class DdaButton {
                 "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,
@@ -113,7 +120,7 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Symbols icon name shown after the label, e.g. `arrow_forward`."
                 },
                 "getter": false,
                 "setter": false,
@@ -133,7 +140,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name. Required when the button shows only an icon."
                 },
                 "getter": false,
                 "setter": false,
@@ -153,7 +160,7 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color variant, e.g. `default-primary`, `default-secondary`, `error-primary`, `onsurface-link`."
                 },
                 "getter": false,
                 "setter": false,
@@ -173,7 +180,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `sm`, `md`, `lg` or `xl`."
                 },
                 "getter": false,
                 "setter": false,
@@ -192,7 +199,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shape: `default` or `circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -212,7 +219,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shape of an icon-only button: `default` or `circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -232,7 +239,7 @@ export class DdaButton {
                 "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,
@@ -251,7 +258,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the inner `<button>`."
                 },
                 "getter": false,
                 "setter": false,
@@ -271,7 +278,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the button, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -290,7 +297,7 @@ export class DdaButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner `<button>`."
                 },
                 "getter": false,
                 "setter": false,
@@ -309,7 +316,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner `<button>`, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -334,7 +341,7 @@ export class DdaButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Function to be called on button click"
+                    "text": "Click handler, set as a JavaScript property. You can also listen for the native `click` event."
                 },
                 "getter": false,
                 "setter": false

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

@@ -77,6 +77,19 @@
   box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);
 }
 
+/* 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 styled box. The :checked selector keeps it above the
+   :checked:focus-within rule. */
+.dda-checkbox-container input[type="checkbox"]:focus-visible~label i,
+.dda-checkbox-container input[type="checkbox"]:focus-visible~label svg,
+.dda-checkbox-container input[type="checkbox"]:checked:focus-visible~label i,
+.dda-checkbox-container input[type="checkbox"]:checked:focus-visible~label svg {
+  -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-checkbox-container label p {
   margin: 0px;
 }

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

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class DdaCheckbox {
     constructor() {
+        /** Extra CSS classes added to the checkbox container. */
         this.custom_class = '';
     }
     render() {
@@ -12,7 +13,7 @@ export class DdaCheckbox {
             this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '4b8e8376bf784fd0ed1e918f0b5fdc4ebe7fd7ed' }, h("div", { key: 'f66aca291d7c0098979177e971aa758b82a5ffc9', class: checkboxClass }, h("input", { key: 'f243f679de75b492775c6e3a0b1ca1f0f3bfe423', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: 'f0c6cc39d19009132332d9c01a901b23c8f0a18c', htmlFor: this.input_id }, h("i", { key: 'b378cfa8cc108dcd6394472563afef4c3c87de13', class: "material-icons  material-symbols-outlined" }, "check"), h("p", { key: '416beeef5a24297c00221c6bfebef2778f0f26ac' }, h("span", { key: 'c62bf2fb6a703cace37b092d5f493ee1944f3e73', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '846a087c01f8277af1f512c1de76e11a2fb95748', class: "dda-checkbox-supporting" }, this.supporting))))));
+        return (h(Host, { key: 'a03a2096e9f0cf6f803e1e0268eb56e96a82bfeb' }, h("div", { key: 'd1e56a9ee711a90bf8c4f42a9b189eab4d8e4187', class: checkboxClass }, h("input", { key: '63d4afed191febf792cc147f2aa0834846301760', "aria-label": this.aria_label, type: "checkbox", id: this.input_id, name: this.group_name, checked: this.checked }), h("label", { key: '281964bf46d08eef1e9f3432ce7f90ce18119786', htmlFor: this.input_id }, h("i", { key: 'c60e23ce71bb3ea998f3bc7fc75ca116b73304c3', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "check"), h("p", { key: '29dbc05b1934a8aae622aa2ffbbda00652c8541b' }, h("span", { key: 'aa7f42edff530e20b3049f43dd6ab6745ef15bad', class: "dda-checkbox-title" }, this.title_text), this.supporting && h("span", { key: '27e8db36535ad9ca842b2c8fb980dca2940bc478', class: "dda-checkbox-supporting" }, this.supporting))))));
     }
     static get is() { return "dda-checkbox"; }
     static get originalStyleUrls() {
@@ -39,7 +40,7 @@ export class DdaCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label shown next to the checkbox."
                 },
                 "getter": false,
                 "setter": false,
@@ -58,7 +59,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Secondary text shown under the title."
                 },
                 "getter": false,
                 "setter": false,
@@ -77,7 +78,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the inner checkbox input."
                 },
                 "getter": false,
                 "setter": false,
@@ -96,7 +97,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the inner checkbox input. The label points to it, so set a unique value to make the label clickable."
                 },
                 "getter": false,
                 "setter": false,
@@ -115,7 +116,7 @@ export class DdaCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Checked state of the inner input. Read the current state from the input or its `change` event."
                 },
                 "getter": false,
                 "setter": false,
@@ -134,7 +135,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Status: `disabled` shows the disabled style and blocks pointer clicks."
                 },
                 "getter": false,
                 "setter": false,
@@ -153,7 +154,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size: `sm`, `md` or `lg`."
                 },
                 "getter": false,
                 "setter": false,
@@ -172,7 +173,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Box shape: `square` or `rounded`."
                 },
                 "getter": false,
                 "setter": false,
@@ -191,7 +192,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the checkbox container."
                 },
                 "getter": false,
                 "setter": false,
@@ -211,7 +212,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the checkbox, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -230,7 +231,7 @@ export class DdaCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the inner checkbox input."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -14,10 +14,6 @@ export default {
             control: 'text',
             description: 'default',
         },
-        labelfor: {
-            control: 'text',
-            description: 'default',
-        },
         input_id: {
             control: 'text',
             description: 'default',
@@ -50,10 +46,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the checkbox',
         },
-        onclick: {
-            control: { type: 'text' },
-            description: 'Event handler for the checkbox component',
-        }
     },
     parameters: {
         docs: {
@@ -73,7 +65,6 @@ To use the \`dda-checkbox\` component, pass the following props:
     custom_class=""
     component_mode=""
     aria_label="checkbox"
-    onclick="console.log('Checkbox clicked')"
 ></dda-checkbox>
   \`\`\`
 `,
@@ -99,7 +90,6 @@ checkboxSquare.args = {
     input_id: 'testId',
     custom_class: '',
     component_mode: '',
-    onclick: "",
 };
 export const checkboxRounded = Template.bind({});
 checkboxRounded.args = {
@@ -113,5 +103,4 @@ checkboxRounded.args = {
     custom_class: '',
     component_mode: '',
     aria_label: 'checkbox',
-    onclick: "",
 };

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

@@ -1,12 +1,17 @@
 import { h, Host } from "@stencil/core";
 export class DdaChip {
     constructor() {
+        /** Color: `grey`, `primary`, `green`, `yellow`, `red` or `purple`. Other values, including the default, use the base primary style. */
         this.bg_color = 'success';
+        /** Corner radius: `sm`, `md`, `lg` or `circle`. */
         this.rounded = '';
+        /** Shows a close button after the label. Its accessible name comes from `close_button_label`. */
         this.show_close_icon = false;
+        /** Accessible name of the icon-only close button. */
+        this.close_button_label = 'Remove';
     }
     render() {
-        return (h(Host, { key: '0aa34e124094cc16a3f8ee43c2af63310077c670' }, h("div", { key: 'e8c2758cd3f796f6970bbd520310f81752b3993f', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons  material-symbols-outlined" }, this.icon) : null, h("span", { key: 'a4145827380a4c7b02e972a2061fa657d409a354' }, h("slot", { key: '73ef803648455c6673d3ab23d5a89867550f0ecd' })), this.show_close_icon && (h("button", { key: '965754ae1ed1b9ddd44833724ceb636a506c94d5', type: "button", class: "chip-close", onClick: this.clickHandler, "aria-label": "Remove" }, h("i", { key: 'ead2026d342d304b4a59a2c27dd7604fdf20580b', class: "material-icons  material-symbols-outlined" }, "close"))))));
+        return (h(Host, { key: '2cd6e91242c3e95df532f3771098fc59c745b0e7' }, h("div", { key: '3ea476295a82ac1bd866d56d9982e64cdaee2692', class: `dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}` }, this.icon ? h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, this.icon) : null, h("span", { key: 'c2fa931281235fdbdc75fe6a725e3c55623f6f33' }, h("slot", { key: '09f4718890a6591edd1ab86b8825621aa305162e' })), this.show_close_icon && (h("button", { key: 'c2b60bf0ae4533ee8a4b80f481772154d03d9af0', type: "button", class: "chip-close", onClick: this.clickHandler, "aria-label": this.close_button_label }, h("i", { key: '62e9e1659c60d909d6db32636654126c35184395', class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "close"))))));
     }
     static get is() { return "dda-chip"; }
     static get originalStyleUrls() {
@@ -33,7 +38,7 @@ export class DdaChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Color: `grey`, `primary`, `green`, `yellow`, `red` or `purple`. Other values, including the default, use the base primary style."
                 },
                 "getter": false,
                 "setter": false,
@@ -53,7 +58,7 @@ export class DdaChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Corner radius: `sm`, `md`, `lg` or `circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -73,7 +78,7 @@ export class DdaChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Material Symbols icon name shown before the label, e.g. `check_circle`."
                 },
                 "getter": false,
                 "setter": false,
@@ -92,7 +97,7 @@ export class DdaChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows a close button after the label. Its accessible name comes from `close_button_label`."
                 },
                 "getter": false,
                 "setter": false,
@@ -100,6 +105,26 @@ export class DdaChip {
                 "attribute": "show_close_icon",
                 "defaultValue": "false"
             },
+            "close_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the icon-only close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close_button_label",
+                "defaultValue": "'Remove'"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -112,7 +137,7 @@ export class DdaChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Height: `sm` (24px), `md` (26px) or `lg` (32px)."
                 },
                 "getter": false,
                 "setter": false,
@@ -131,7 +156,7 @@ export class DdaChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the chip container."
                 },
                 "getter": false,
                 "setter": false,
@@ -150,7 +175,7 @@ export class DdaChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the chip, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,7 +199,7 @@ export class DdaChip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Click handler for the close button, set as a JavaScript property. The chip does not remove itself."
                 },
                 "getter": false,
                 "setter": false

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

@@ -38,10 +38,6 @@ export default {
             options: ['light-mode'],
             description: 'Mode of the chip component',
         },
-        onclick: {
-            control: { type: 'text' },
-            description: 'Function triggered when the close icon is clicked',
-        },
     },
     parameters: {
         docs: {
@@ -56,7 +52,6 @@ To use the \`dda-chip\` component, pass the following props:
     show_close_icon="true"
     custom_class=""
     component_mode=""
-    onclick="console.log("clicked!")"
     >Label
 </dda-chip>
   \`\`\`
@@ -81,7 +76,6 @@ Grey.args = {
     bg_color: 'grey',
     icon: 'sentiment_satisfied',
     show_close_icon: true,
-    onclick: "console.log('clicked')",
 };
 export const Primary = Template.bind({});
 Primary.args = {
@@ -91,7 +85,6 @@ Primary.args = {
     show_close_icon: true,
     custom_class: '',
     component_mode: '',
-    onclick: "alert('Close icon clicked!')",
 };
 export const Green = Template.bind({});
 Green.args = {
@@ -101,7 +94,6 @@ Green.args = {
     show_close_icon: true,
     custom_class: '',
     component_mode: '',
-    onclick: "() => alert('Close icon clicked!')",
 };
 export const Yellow = Template.bind({});
 Yellow.args = {
@@ -111,7 +103,6 @@ Yellow.args = {
     show_close_icon: true,
     custom_class: '',
     component_mode: '',
-    onclick: "() => alert('Close icon clicked!')",
 };
 export const Red = Template.bind({});
 Red.args = {
@@ -121,7 +112,6 @@ Red.args = {
     show_close_icon: true,
     custom_class: '',
     component_mode: '',
-    onclick: "() => alert('Close icon clicked!')",
 };
 export const Purple = Template.bind({});
 Purple.args = {
@@ -131,5 +121,4 @@ Purple.args = {
     show_close_icon: true,
     custom_class: '',
     component_mode: '',
-    onclick: "() => alert('Close icon clicked!')",
 };