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

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

@@ -1,10 +1,18 @@
 import { h, Host } from "@stencil/core";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaNumberField {
     constructor() {
+        /** Currency shown on the dropdown button. Updates when the user picks a currency. */
         this.selected_currency = 'USD';
         this.is_focused = false;
+        /** Extra CSS classes added to the field container. */
         this.custom_class = '';
+        /** Accessible name of the currency dropdown button; the selected currency is added after it. */
+        this.toggle_button_label = 'Choose currency';
         this.isCurrencyDropdownOpen = false;
+        // Per-instance fallback, so the label, helper and error text stay linked
+        // to the amount input when the consumer omits input_id.
+        this.fallbackId = uniqueId('dda-number-field');
     }
     handleInput(event) {
         const inputElement = event.target;
@@ -34,13 +42,16 @@ export class DdaNumberField {
             return [];
         }
     }
-    // F-016: ids derived from the consumer-supplied input_id, same pattern as
-    // dda-input/dda-select.
+    // F-016: ids derived from the amount input id (the consumer-supplied input_id,
+    // or the generated fallback), same pattern as dda-input.
+    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 = [
@@ -60,7 +71,8 @@ export class DdaNumberField {
             this.custom_class ? `${this.custom_class}` : '',
             this.component_mode,
         ].filter(Boolean).join(' ');
-        return (h(Host, { key: '478d056b97c8fbbdeab9479d91a35b5065729f5a' }, h("div", { key: '99371519b6ecc1e1621f81b5fdaa5fdccde6bbdf', class: containerClass }, this.label && h("label", { key: '94a2fd311083fcd85676c608c5ae14c4e0347c0e', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: '0c0d94451f0a1ccff97cef278c5c4bc3fc17e147', class: "dda-input-field-group dda-number-field" }, h("input", { key: 'b93aae1d972d9aee4fc6a62f6040c35720723916', id: this.input_id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: '6275bae648bd43980e705530296b2b8c90899cb1', class: "dda-input-dropdown-btn" }, h("button", { key: 'b7a956128c59b5147531a4ce85b5b86ea7137e47', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: '8a1d3737250c5ff33c37c97825b48d106f0c5196', class: `material-icons` }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: 'd260c7d405316fa6f4bcf8ab7480f6287ebf35e1', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'eb8f3492e3603259b31b6c35ced9aac4d52eb4e4', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '9c074b68b234cae9882e14aaca175e5f865d24ee', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: 'e8e821361d846cd52c01047c1f0648e719e96249' }, h("div", { key: '4141b53316b4dbcd60faa46cf2d2b1c374cef309', class: containerClass }, this.label && h("label", { key: '20593074d31733885d83733dc63cd41376d572dc', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: '443763cfb3a895c30815e339cd81d5e9b6de2c3e', class: "dda-input-field-group dda-number-field" }, h("input", { key: '57ed90d585e5a2d4e0c9f39bb1fdb6356d7b50f7', id: id, name: this.input_name, "aria-label": this.aria_label, type: "text", placeholder: this.placeholder, value: this.value, pattern: "[0-9]*", onInput: event => this.handleInput(event), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), class: "dda-field-group-input", "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined }), h("div", { key: 'cd3c78d23ba19978c5b296731192f454db3e5906', class: "dda-input-dropdown-btn" }, h("button", { key: '74d7d3720fcb37122d60ce71155e234393824a26', name: this.toggle_button_name, type: "button", class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.selected_currency}` : undefined, "aria-expanded": this.isCurrencyDropdownOpen ? 'true' : 'false', onClick: () => this.toggleCurrencyDropdown() }, this.selected_currency, " ", h("i", { key: 'd2310ea5de9922de9dfab5bac39210921b1be971', class: `material-icons`, "aria-hidden": "true" }, this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), this.isCurrencyDropdownOpen && (h("div", { key: '77491f92b3c065987958c8a0aadead2c941b86be', class: "dda-input-dropdown-list" }, this.parsedCurrencies.length > 0 ? (this.parsedCurrencies.map(option => (h("button", { name: this.currency_button_name, type: "button", class: `dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`, onClick: () => this.selectCurrency(option) }, option)))) : (h("div", { class: "dda-input-dropdown-item" }, "No options available")))))), this.helper_text && h("span", { key: 'a3e3d37303fac4919afce9a7c6a892de4e8d2771', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: 'da1de1672834e28084e47eb3ae02b6d774b150de', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-number-field"; }
     static get originalStyleUrls() {
@@ -87,7 +99,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the amount input."
                 },
                 "getter": false,
                 "setter": false,
@@ -106,7 +118,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the amount input through `input_id` (or a generated id)."
                 },
                 "getter": false,
                 "setter": false,
@@ -125,7 +137,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Initial value of the amount input. Characters other than digits and `.` are removed as the user types."
                 },
                 "getter": false,
                 "setter": false,
@@ -144,7 +156,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field and linked with `aria-describedby`."
                 },
                 "getter": false,
                 "setter": false,
@@ -163,7 +175,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field. When set, the input gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -182,7 +194,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation style. `error` shows the error colors."
                 },
                 "getter": false,
                 "setter": false,
@@ -201,7 +213,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size. `small` shows a smaller field; omit for the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -220,7 +232,7 @@ export class DdaNumberField {
                 "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,
@@ -239,7 +251,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Currency options for the dropdown, as a JSON array string, e.g. `'[\"AED\",\"USD\"]'`."
                 },
                 "getter": false,
                 "setter": false,
@@ -258,7 +270,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Currency shown on the dropdown button. Updates when the user picks a currency."
                 },
                 "getter": false,
                 "setter": false,
@@ -278,7 +290,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +310,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -317,7 +329,7 @@ export class DdaNumberField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the amount 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,
@@ -336,7 +348,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the amount input. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -355,7 +367,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the amount input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -374,7 +386,7 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the currency dropdown button."
                 },
                 "getter": false,
                 "setter": false,
@@ -393,12 +405,32 @@ export class DdaNumberField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each currency option button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "currency_button_name"
+            },
+            "toggle_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the currency dropdown button; the selected currency is added after it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_button_label",
+                "defaultValue": "'Choose currency'"
             }
         };
     }

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

@@ -62,10 +62,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the number field',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the number field',
-        },
         input_name: {
             control: { type: 'text' },
             description: 'Name of the input field',
@@ -101,7 +97,6 @@ export default {
     input_id="input"
     aria_label="input"
     currencies='["USD","EUR","GBP","AED","PKR"]'
-    onchange="console.log('changed')"
 ></dda-number-field>
     \`\`\`
   `,
@@ -133,7 +128,6 @@ Default.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
     toggle_button_name: 'toggle-button',
     currency_button_name: 'currency-button',
@@ -154,7 +148,6 @@ Small.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
     toggle_button_name: 'toggle-button',
     currency_button_name: 'currency-button',
@@ -174,7 +167,6 @@ Error.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
     toggle_button_name: 'toggle-button',
     currency_button_name: 'currency-button',
@@ -195,7 +187,6 @@ Disabled.args = {
     component_mode: '',
     input_id: 'input',
     aria_label: 'input',
-    onchange: '',
     input_name: 'input',
     toggle_button_name: 'toggle-button',
     currency_button_name: 'currency-button',

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

@@ -1,10 +1,18 @@
 import { h, Host } from "@stencil/core";
 export class DdaPagination {
     constructor() {
+        /** Number of pages. Values below 1 become 1. Mutable: the component corrects out-of-range values. */
         this.total_pages = 8;
+        /** Selected page, counted from 1. Kept between 1 and `total_pages`; updates when the user changes the page. Mutable: the component assigns it. */
         this.current_page = 1;
+        /** Layout: `simple-slider`, `buttons`, `text`, `text-pages`, `button-text`, `buttons-pages` or `full`. */
         this.type = 'simple-slider';
+        /** Extra CSS classes added to the pagination element. */
         this.custom_class = '';
+        /** Accessible name of the icon-only previous page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts). */
+        this.previous_button_label = 'Previous page';
+        /** Accessible name of the icon-only next page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts). */
+        this.next_button_label = 'Next page';
     }
     validateTotalPages(newValue) {
         if (newValue < 1) {
@@ -26,17 +34,17 @@ export class DdaPagination {
     renderPagination() {
         switch (this.type) {
             case 'simple-slider':
-                return (h("div", { class: `dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.simple_slider_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back"), " Prev"), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.simple_slider_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.simple_slider_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back"), " Prev"), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.simple_slider_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'buttons':
-                return (h("div", { class: `dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back"), " Prev"), this.renderPageButtons(), h("button", { name: this.buttons_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back"), " Prev"), this.renderPageButtons(), h("button", { name: this.buttons_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, "Next ", h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'text':
-                return (h("div", { class: `dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back")), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.text_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), h("span", null, "Page ", this.current_page, " of ", this.total_pages), h("button", { name: this.text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'text-pages':
-                return (h("div", { class: `dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_pages_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.text_pages_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.text_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.text_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'button-text':
-                return (h("div", { class: `dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.button_text_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.button_text_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.button_text_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), this.renderPageButtons(), h("button", { name: this.button_text_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'buttons-pages':
-                return (h("div", { class: `dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_pages_prev_button, class: "prev", disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_back")), h("button", { name: this.buttons_pages_next_button, class: "next", disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined" }, "arrow_forward"))));
+                return (h("div", { class: `dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}` }, h("button", { name: this.buttons_pages_prev_button, class: "prev", "aria-label": this.previous_button_label, disabled: this.current_page === 1, onClick: () => this.setcurrentpage(this.current_page - 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_back")), h("button", { name: this.buttons_pages_next_button, class: "next", "aria-label": this.next_button_label, disabled: this.current_page === this.total_pages, onClick: () => this.setcurrentpage(this.current_page + 1) }, h("i", { class: "material-icons  material-symbols-outlined", "aria-hidden": "true" }, "arrow_forward"))));
             case 'full':
                 return (h("div", { class: `dda-pagination dda-pagination-full ${this.custom_class} ${this.component_mode}` }, this.renderPageButtons()));
         }
@@ -44,17 +52,18 @@ export class DdaPagination {
     renderPageButtons() {
         const buttons = [];
         for (let i = 1; i <= this.total_pages; i++) {
-            buttons.push(h("button", { class: i === this.current_page ? 'active' : '', onClick: () => this.setcurrentpage(i) }, i));
+            buttons.push(h("button", { class: i === this.current_page ? 'active' : '', "aria-label": `Page ${i}`, "aria-current": i === this.current_page ? 'page' : undefined, onClick: () => this.setcurrentpage(i) }, i));
         }
         return buttons;
     }
     setcurrentpage(page) {
-        if (page >= 1 && page <= this.total_pages) {
+        if (page >= 1 && page <= this.total_pages && page !== this.current_page) {
             this.current_page = page;
+            this.pageChange.emit({ page });
         }
     }
     render() {
-        return (h(Host, { key: '85e139ac55f4589cc1aabbdcc5ee4034c08138f7' }, h("div", { key: '20403174b3a3b556016eb01ab96a624e97c17b51', class: `dda-pagination-container` }, this.renderPagination())));
+        return (h(Host, { key: '4de1572ef7acf0cd89b620183a723f8f9598fdf9' }, h("div", { key: '1aad2deab4985aaa29e0cf31790a0e7f3587c0d5', class: `dda-pagination-container` }, this.renderPagination())));
     }
     static get is() { return "dda-pagination"; }
     static get originalStyleUrls() {
@@ -71,7 +80,7 @@ export class DdaPagination {
         return {
             "total_pages": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -81,7 +90,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Number of pages. Values below 1 become 1. Mutable: the component corrects out-of-range values."
                 },
                 "getter": false,
                 "setter": false,
@@ -91,7 +100,7 @@ export class DdaPagination {
             },
             "current_page": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -101,7 +110,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Selected page, counted from 1. Kept between 1 and `total_pages`; updates when the user changes the page. Mutable: the component assigns it."
                 },
                 "getter": false,
                 "setter": false,
@@ -121,7 +130,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Layout: `simple-slider`, `buttons`, `text`, `text-pages`, `button-text`, `buttons-pages` or `full`."
                 },
                 "getter": false,
                 "setter": false,
@@ -141,7 +150,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the pagination element."
                 },
                 "getter": false,
                 "setter": false,
@@ -161,7 +170,7 @@ export class DdaPagination {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class on the pagination element, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -180,7 +189,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `simple-slider`."
                 },
                 "getter": false,
                 "setter": false,
@@ -199,7 +208,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `simple-slider`."
                 },
                 "getter": false,
                 "setter": false,
@@ -218,7 +227,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `buttons`."
                 },
                 "getter": false,
                 "setter": false,
@@ -237,7 +246,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `buttons`."
                 },
                 "getter": false,
                 "setter": false,
@@ -256,7 +265,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -275,7 +284,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -294,7 +303,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `text-pages`."
                 },
                 "getter": false,
                 "setter": false,
@@ -313,7 +322,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `text-pages`."
                 },
                 "getter": false,
                 "setter": false,
@@ -332,7 +341,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `button-text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -351,7 +360,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `button-text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -370,7 +379,7 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the previous page button when `type` is `buttons-pages`."
                 },
                 "getter": false,
                 "setter": false,
@@ -389,15 +398,73 @@ export class DdaPagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the next page button when `type` is `buttons-pages`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "buttons_pages_next_button"
+            },
+            "previous_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 previous page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous_button_label",
+                "defaultValue": "'Previous page'"
+            },
+            "next_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 next page button (`text`, `text-pages`, `button-text` and `buttons-pages` layouts)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next_button_label",
+                "defaultValue": "'Next page'"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pageChange",
+                "name": "pageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user moves to a different page. `detail.page` is the new page, counted from 1."
+                },
+                "complexType": {
+                    "original": "{ page: number }",
+                    "resolved": "{ page: number; }",
+                    "references": {}
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "total_pages",