@six-group/ui-library 0.0.0-insider.77a508a → 0.0.0-insider.79a0d1c

package/dist/collection/components/six-date/six-date.js

@@ -1,18 +1,19 @@
 import { h } from "@stencil/core";
 import { EventListeners } from "../../utils/event-listeners";
-import { debounce, DEFAULT_DEBOUNCE_FAST } from "../../utils/execution-control";
 import { hasSlot } from "../../utils/slot";
 import { MonthSelection } from "./components/month-selection";
 import { YearSelection } from "./components/year-selection";
 import { DaySelection } from "./components/day-selection";
-import { cleanupValue, formatDate, fromFormattedString, todayAsPointerDate, toPointerDate } from "./iso-date";
+import { cleanupValue, formatDate, fromFormattedString, nextPointerDate, previousPointerDate, todayAsPointerDate, toPointerDate, } from "./iso-date";
 import { createCalendarGrid } from "./calendar-grid";
 import { translateFormatHelp, translateMonth } from "./translations";
 import Popover from "../../utils/popover";
 const NUMBER_OF_YEARS_SHOWN = 25;
 /**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
  * @since 5.0
- * @status experimental
+ * @status beta
  *
  * @slot label - The date's label. Alternatively, you can use the label prop.
  * @slot help-text - Help text that describes the usage.
@@ -32,7 +33,7 @@ export class SixDate {
          */
         this.language = 'en';
         /**
-         * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
          */
         this.readonly = false;
         /**
@@ -43,14 +44,43 @@ export class SixDate {
          * Callback to determine which dates in the picker should be selectable.
          */
         this.allowedDates = () => true;
-        /** Dates size. */
+        /**
+         * The size of the date input field.
+         */
         this.size = 'medium';
         /** Set to true to show an asterisk beneath the label. */
         this.required = false;
         /**
-         * The value of the form field, which accepts a date object.
+         * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+         * Example: '2024-01-01'.
+         *
+         * When an invalid date is provided, it will be replaced with an empty string (''),
+         * matching the behavior of native HTML <input type="date">.
+         *
+         * The displayed format can be customized using the dateFormat property, but the underlying
+         * value will always be stored in ISO format.
          */
         this.value = '';
+        /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+         *
+         * The parser accepts flexible input that doesn't strictly match the format pattern.
+         * Input with missing leading zeros or incomplete years will be automatically normalized.
+         * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+         * "1.1.225" becomes "01.01.0225".
+         *
+         * Defaults to "dd.MM.yyyy".
+         *
+         * Available patterns:
+         * - Year: "yyyy" (e.g., "2021")
+         * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+         * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+         *
+         * Examples:
+         * - "dd.MM.yyyy" -> "31.01.2024"
+         * - "yyyy-MM-dd" -> "2024-01-31"
+         * - "d.M.yyyy" -> "31.1.2024"
+         * */
+        this.dateFormat = 'dd.MM.yyyy';
         /** The label text. */
         this.label = '';
         /** The input's help text. Alternatively, you can use the help-text slot. */
@@ -59,56 +89,16 @@ export class SixDate {
         this.errorText = '';
         /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
         this.invalid = false;
-        /** Define the dateFormat. Defaults to "dd.MM.yyyy".
-         *
-         * Available patterns:
-         * - Year: "yyyy" (e.g., "2021")
-         * - Month: "MM" (e.g., "01" for January, "12" for December)
-         * - Day: "dd" (e.g., "08" for the 8th day of the month)
-         * */
-        this.dateFormat = 'dd.MM.yyyy';
-        /**
-         * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
-         */
-        this.debounce = DEFAULT_DEBOUNCE_FAST;
         /** The input's name attribute. */
         this.name = '';
         /** Set to true to add a clear button when the input is populated. */
         this.clearable = false;
         this.panelHideInProgress = false;
         this.handlePreviousClick = () => {
-            switch (this.selectionMode) {
-                case 'day':
-                    if (this.pointerDate.month === 0) {
-                        this.pointerDate = { year: this.pointerDate.year - 1, month: 11, day: 1 };
-                    }
-                    else {
-                        this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month - 1, day: 1 };
-                    }
-                    break;
-                case 'month':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - 1 });
-                    break;
-                case 'year':
-                    this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year - NUMBER_OF_YEARS_SHOWN });
-                    break;
-            }
+            this.pointerDate = previousPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleNextClick = () => {
-            if (this.selectionMode === 'day') {
-                if (this.pointerDate.month === 11) {
-                    this.pointerDate = { year: this.pointerDate.year + 1, month: 0, day: 1 };
-                }
-                else {
-                    this.pointerDate = { year: this.pointerDate.year, month: this.pointerDate.month + 1, day: 1 };
-                }
-            }
-            else if (this.selectionMode === 'month') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + 1 });
-            }
-            else if (this.selectionMode === 'year') {
-                this.pointerDate = Object.assign(Object.assign({}, this.pointerDate), { year: this.pointerDate.year + NUMBER_OF_YEARS_SHOWN });
-            }
+            this.pointerDate = nextPointerDate(this.selectionMode, this.pointerDate);
         };
         this.handleDocumentMouseDown = (event) => {
             const baseElement = this.getSixInputBaseElement();
@@ -121,12 +111,6 @@ export class SixDate {
                 this.sixBlur.emit();
             }
         };
-        this.handleClearClick = () => {
-            this.hide();
-            this.value = '';
-            this.pointerDate = todayAsPointerDate();
-            this.sixChange.emit(this.value);
-        };
         this.handleDayClick = (date) => {
             var _a;
             this.value = date;
@@ -159,14 +143,18 @@ export class SixDate {
             }
             this.sixChange.emit(this.value);
         };
-        this.handleOnBlur = () => {
+        this.handleInputBlur = () => {
             var _a;
             if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false) {
-                if (this.inputElement) {
-                    this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-                }
+                this.updateInputElementValue();
             }
         };
+        this.handleInputClearClick = () => {
+            this.hide();
+            this.value = '';
+            this.pointerDate = todayAsPointerDate();
+            this.sixChange.emit(this.value);
+        };
         this.handleInputKeyDown = (event) => {
             if (event.key === 'Tab') {
                 this.hide();
@@ -192,6 +180,7 @@ export class SixDate {
         if (warning != null) {
             console.warn(warning);
         }
+        this.updateInputElementValue();
     }
     getSixInputBaseElement() {
         var _a, _b;
@@ -208,9 +197,7 @@ export class SixDate {
         var _a, _b;
         if (((_a = this.popoverHelper) === null || _a === void 0 ? void 0 : _a.isVisible) === false)
             return;
-        if (this.inputElement) {
-            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
-        }
+        this.updateInputElementValue();
         this.selectionMode = 'day';
         this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);
         this.panelHideInProgress = true;
@@ -233,13 +220,19 @@ export class SixDate {
             },
         });
     }
+    updateInputElementValue() {
+        if (this.inputElement && document.activeElement !== this.host) {
+            this.inputElement.value = this.value === '' ? '' : formatDate(this.value, this.dateFormat);
+        }
+    }
     connectedCallback() {
         this.initPopover();
         this.updateValueAndPointerDate();
-        this.eventListeners.forward('sixChange', 'change', this.host);
-        this.eventListeners.forward('sixBlur', 'blur', this.host);
+        this.eventListeners.forward('six-change', 'change', this.host);
+        this.eventListeners.forward('six-blur', 'blur', this.host);
     }
     componentDidLoad() {
+        this.updateInputElementValue();
         this.initPopover();
     }
     disconnectedCallback() {
@@ -249,7 +242,7 @@ export class SixDate {
         this.popoverHelper = undefined;
     }
     render() {
-        return (h("div", { key: 'c265e5d13e1b427ae90518739b636f88d699bb26', class: "container" }, h("six-input", { key: 'f54a006c5dad56772a835fcaf50bd71af6b72012', value: this.value === '' ? '' : formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: debounce(this.handleInputChange, this.debounce), onBlur: this.handleOnBlur, "onSix-input-clear": this.handleClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: 'c439a91f415360095df11777c716458a5a33524a', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '429013fa5ab20bc7d43667ca6c806c6f35d36193', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '11cb4223c0a281e81bf8ee6c6094f843e0933dd3', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: 'cd9e835fe163a29f768f73cdb5595112aba3acfb', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '32638197c7fbf6c971c4cba86d6ad403d59d8568', class: "panel__header" }, h("six-icon-button", { key: '270c601321d5ab2770db5a3cc38ba5b9e1c0c9c0', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: 'a1b16f14156a6f65f48a56b77dd7f452d3ed2ea5', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '0ab2dd455eeca3a7fb8ecd8af15688ec64ce3469' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: 'd9794772d6992d4e9b67d12443e9f10ac9d89d1d', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: '6f70820606bc8fb7101f64ca41ca90296ba140e7' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: 'b0847793e0ab3baf1f866d8b0f2f777560fbd539', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '0d47af045fa9c8590ade47c4d738410b04b7b552', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '28c7bad7579a206a3bdf8b0bd5325c6613634270', language: this.language, calendarGrid: createCalendarGrid({
+        return (h("div", { key: '915708e6b3815709fbf93546453a1527f0e2f4b2', class: "container" }, h("six-input", { key: '7beac04f73a37fba611860890c02a79d5a065fb6', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, h("six-icon", { key: '88f5d61c8d6af1627be1b9ed5ddf534669cbbedd', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null, hasSlot(this.host, 'help-text') ? (h("span", { slot: "help-text" }, h("slot", { name: "help-text" }))) : null), h("span", { key: '36f359e7ed900e6102444dcbf7e7c22b1aac042d', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), h("div", { key: '560443132d2dbe1f0f2c147c2d0538eb33c7b76a', ref: (el) => (this.positioner = el), class: "positioner" }, h("div", { key: '800d71554bf415d0e39d40696271791785004e7f', class: "panel", ref: (el) => (this.panel = el) }, h("header", { key: '71baa85fece27f99982e5cb06e15c5d89d81f7a1', class: "panel__header" }, h("six-icon-button", { key: '43274a816945112492cb030012f4ecd0f1c6f5f3', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (h("div", { key: '2f391850b72291bfb7249bccf2ccf4aea6387340', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), h("six-icon", { key: '95ea49cd1ccbeec9019491799cefb4d31b846f87' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (h("div", { key: '7d65185d34d64361b8addfac6e3a5eb130fcf6b7', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, h("six-icon", { key: 'ab5c06e07a09f945e845902588096ce4f906b5bf' }, "arrow_drop_down"))), this.selectionMode === 'year' && (h("div", { key: '9871ad7e39d18fdd5629b0f9d1caf935952d4ca5', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), h("six-icon-button", { key: '20bafd71902a85f3db3c3b54628555b0f86e50aa', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (h(DaySelection, { key: '38e23637ec958abf9615adba7900f4ea6b15f27c', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -257,7 +250,7 @@ export class SixDate {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '34f2aafe0f63276c36f867006f4f64344dd41eb8', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'b67ead6fc8fc0c50e2e505b896040c605e176155', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (h(MonthSelection, { key: '10ec980d8a5fc1bf6480a96ee5df66abb9b347cb', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (h(YearSelection, { key: 'ba791467977c55f80781a20774c5e32951641877', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     static get is() { return "six-date"; }
     static get encapsulation() { return "shadow"; }
@@ -275,6 +268,7 @@ export class SixDate {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": false,
                 "complexType": {
                     "original": "Language",
@@ -295,12 +289,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "'en'"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -311,16 +305,16 @@ export class SixDate {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` the user can only select a date via the component in the popup, but not directly edit the input field."
+                    "text": "If `true` the user can only select a date via the component in the popup but not directly edit the input field."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -335,23 +329,17 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "allowedDates": {
                 "type": "unknown",
+                "attribute": "allowed-dates",
                 "mutable": false,
                 "complexType": {
-                    "original": "(date: IsoDate) => boolean",
-                    "resolved": "(date: `${number}${number}${number}${number}-${number}${number}-${number}${number}`) => boolean",
-                    "references": {
-                        "IsoDate": {
-                            "location": "import",
-                            "path": "./iso-date",
-                            "id": "src/components/six-date/iso-date.ts::IsoDate"
-                        }
-                    }
+                    "original": "(date: string) => boolean",
+                    "resolved": "(date: string) => boolean",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -365,56 +353,45 @@ export class SixDate {
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
-                    "original": "IsoDate",
-                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}` | undefined",
-                    "references": {
-                        "IsoDate": {
-                            "location": "import",
-                            "path": "./iso-date",
-                            "id": "src/components/six-date/iso-date.ts::IsoDate"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum date allowed. Value must be an iso-date string."
+                    "text": "The minimum allowed selectable date in ISO format (yyyy-MM-dd).\nDates before this value will be disabled in the date picker.\nExample: '2024-01-01'"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
-                    "original": "IsoDate",
-                    "resolved": "`${number}${number}${number}${number}-${number}${number}-${number}${number}` | undefined",
-                    "references": {
-                        "IsoDate": {
-                            "location": "import",
-                            "path": "./iso-date",
-                            "id": "src/components/six-date/iso-date.ts::IsoDate"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum date allowed.Value must be an iso-date string."
+                    "text": "The maximum allowed selectable date in ISO format (yyyy-MM-dd).\nDates after this value will be disabled in the date picker.\nExample: '2025-01-01'"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small' | 'medium' | 'large'",
@@ -425,16 +402,16 @@ export class SixDate {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Dates size."
+                    "text": "The size of the date input field."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -449,12 +426,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -469,37 +446,51 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
-                    "original": "IsoDate | ''",
-                    "resolved": "\"\" | `${number}${number}${number}${number}-${number}${number}-${number}${number}`",
-                    "references": {
-                        "IsoDate": {
-                            "location": "import",
-                            "path": "./iso-date",
-                            "id": "src/components/six-date/iso-date.ts::IsoDate"
-                        }
-                    }
+                    "original": "string | ''",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the form field, which accepts a date object."
+                    "text": "The value of the form field in ISO 8601 date format (yyyy-MM-dd).\nExample: '2024-01-01'.\n\nWhen an invalid date is provided, it will be replaced with an empty string (''),\nmatching the behavior of native HTML <input type=\"date\">.\n\nThe displayed format can be customized using the dateFormat property, but the underlying\nvalue will always be stored in ISO format."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "dateFormat": {
+                "type": "string",
+                "attribute": "date-format",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the format pattern for displaying dates and how dates can be entered via keyboard.\n\nThe parser accepts flexible input that doesn't strictly match the format pattern.\nInput with missing leading zeros or incomplete years will be automatically normalized.\nFor example, with the pattern \"dd.MM.yyyy\": \"1.1.2025\" becomes \"01.01.2025\" and\n\"1.1.225\" becomes \"01.01.0225\".\n\nDefaults to \"dd.MM.yyyy\".\n\nAvailable patterns:\n- Year: \"yyyy\" (e.g., \"2021\")\n- Month: \"MM\" (e.g., \"01\" for January) or \"M\" (e.g., \"1\" for January)\n- Day: \"dd\" (e.g., \"08\" for the 8th) or \"d\" (e.g., \"8\" for the 8th)\n\nExamples:\n- \"dd.MM.yyyy\" -> \"31.01.2024\"\n- \"yyyy-MM-dd\" -> \"2024-01-31\"\n- \"d.M.yyyy\" -> \"31.1.2024\""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'dd.MM.yyyy'"
+            },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -514,12 +505,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -534,12 +525,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorText": {
                 "type": "string",
+                "attribute": "error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string | string[]",
@@ -554,12 +545,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "errorTextCount": {
                 "type": "number",
+                "attribute": "error-text-count",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -574,11 +565,11 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text-count",
                 "reflect": false
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -593,52 +584,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "dateFormat": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Define the dateFormat. Defaults to \"dd.MM.yyyy\".\n\nAvailable patterns:\n- Year: \"yyyy\" (e.g., \"2021\")\n- Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n- Day: \"dd\" (e.g., \"08\" for the 8th day of the month)"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "date-format",
-                "reflect": false,
-                "defaultValue": "'dd.MM.yyyy'"
-            },
-            "debounce": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "debounce",
-                "reflect": false,
-                "defaultValue": "DEFAULT_DEBOUNCE_FAST"
-            },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -653,12 +604,12 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -673,7 +624,6 @@ export class SixDate {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clearable",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -688,34 +638,28 @@ export class SixDate {
     static get events() {
         return [{
                 "method": "sixChange",
-                "name": "sixChange",
+                "name": "six-change",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the control's value changes."
+                    "text": "Emitted when the control's value changes.\nEvent detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared."
                 },
                 "complexType": {
-                    "original": "IsoDate | ''",
-                    "resolved": "\"\" | `${number}${number}${number}${number}-${number}${number}-${number}${number}`",
-                    "references": {
-                        "IsoDate": {
-                            "location": "import",
-                            "path": "./iso-date",
-                            "id": "src/components/six-date/iso-date.ts::IsoDate"
-                        }
-                    }
+                    "original": "string | ''",
+                    "resolved": "string",
+                    "references": {}
                 }
             }, {
                 "method": "sixBlur",
-                "name": "sixBlur",
+                "name": "six-blur",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the control loses focus."
+                    "text": "Emitted when the control loses focus or the date picker popup is closed.\nDoes not contain event details."
                 },
                 "complexType": {
                     "original": "any",