kanto-ds 1.4.0 → 1.5.2

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "kanto-ds",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1033,6 +1033,26 @@
           "description": "A data table: tri-state sorting, single or multiple selection, paging.\n\n---\n\n\n### **Events:**\n - **kt-sort-change** - Sorting changed. `detail: { key, direction }`.\n- **kt-selection-change** - Selection changed. `detail: { selected, rows }`.\n- **kt-row-click** - A row was clicked. `detail: { row, index }`.\n- **kt-page-change** - The page changed. `detail: { page }`.\n\n### **CSS Parts:**\n - **table** - The `<table>`.\n- **header-cell** - A `<th>`.\n- **row** - A `<tr>`.\n- **cell** - A `<td>`.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "page",
+              "description": "The page on screen, from 1. Set it to open on another page.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "manual",
+              "description": "For data sorted and paged on a server: `data` is the current page, shown\nas given. Headers and the pager still update the state and fire their\nevents, and the application loads what they ask for.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "virtual",
+              "description": "Renders only the rows in view, for thousands of rows without paging. The\ntable scrolls inside its own box: give it a height (`kt-table { height:\n480px }`). Every row must be the same height — the first one rendered is\nmeasured. A page size takes precedence.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "total-rows",
+              "description": "In manual mode, how many rows the server holds — what the pager counts.",
+              "value": { "type": "number", "default": "0" }
+            },
             {
               "name": "selectable",
               "value": { "type": "boolean", "default": "false" }
@@ -1077,6 +1097,11 @@
               "name": "label",
               "description": "Accessible name for the table.",
               "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "locale",
+              "description": "BCP 47 locale text is sorted in. Empty means the page's `<html lang>`,\nthen the browser's language.",
+              "value": { "type": "string", "default": "''" }
             }
           ],
           "events": [
@@ -1099,6 +1124,26 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "page",
+                "description": "The page on screen, from 1. Set it to open on another page.",
+                "type": "number"
+              },
+              {
+                "name": "manual",
+                "description": "For data sorted and paged on a server: `data` is the current page, shown\nas given. Headers and the pager still update the state and fire their\nevents, and the application loads what they ask for.",
+                "type": "boolean"
+              },
+              {
+                "name": "virtual",
+                "description": "Renders only the rows in view, for thousands of rows without paging. The\ntable scrolls inside its own box: give it a height (`kt-table { height:\n480px }`). Every row must be the same height — the first one rendered is\nmeasured. A page size takes precedence.",
+                "type": "boolean"
+              },
+              {
+                "name": "totalRows",
+                "description": "In manual mode, how many rows the server holds — what the pager counts.",
+                "type": "number"
+              },
               { "name": "columns", "type": "readonly KtTableColumn[]" },
               { "name": "data", "type": "readonly KtTableRow[]" },
               { "name": "selectable", "type": "boolean" },
@@ -1129,9 +1174,14 @@
                 "description": "Accessible name for the table.",
                 "type": "string"
               },
+              {
+                "name": "locale",
+                "description": "BCP 47 locale text is sorted in. Empty means the page's `<html lang>`,\nthen the browser's language.",
+                "type": "string"
+              },
               {
                 "name": "sortedRows",
-                "description": "The rows after sorting, before paging.",
+                "description": "The rows after sorting, before paging.\n\nSorted once per change of `data`, `sortKey`, `sortDirection` or locale, not on\nevery render: hovering a row or ticking a box re-renders the table, and\nre-sorting a few thousand rows each time is what made that lag. Assign a\nnew array to `data` rather than changing it in place.",
                 "type": "readonly KtTableRow[]"
               },
               { "name": "totalPages", "type": "number" },
@@ -1625,8 +1675,14 @@
             { "name": "text", "value": { "type": "string", "default": "''" } },
             {
               "name": "placement",
+              "description": "The side the bubble prefers. It takes the opposite one when this one has\nno room — \"top\" on a trigger at the top of the page shows below it.",
               "value": { "type": "KtTooltipPlacement", "default": "'top'" }
             },
+            {
+              "name": "open",
+              "description": "Shows the bubble whatever the pointer and focus do — for a trigger that\ncannot take focus itself, like an icon beside a field, whose owner shows\nit while the field is focused.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Suppresses the tooltip without removing it from the markup.",
@@ -1638,7 +1694,16 @@
           "js": {
             "properties": [
               { "name": "text", "type": "string" },
-              { "name": "placement", "type": "KtTooltipPlacement" },
+              {
+                "name": "placement",
+                "description": "The side the bubble prefers. It takes the opposite one when this one has\nno room — \"top\" on a trigger at the top of the page shows below it.",
+                "type": "KtTooltipPlacement"
+              },
+              {
+                "name": "open",
+                "description": "Shows the bubble whatever the pointer and focus do — for a trigger that\ncannot take focus itself, like an icon beside a field, whose owner shows\nit while the field is focused.",
+                "type": "boolean"
+              },
               {
                 "name": "disabled",
                 "description": "Suppresses the tooltip without removing it from the markup.",
@@ -1648,9 +1713,92 @@
             "events": []
           }
         },
+        {
+          "name": "kt-calendar",
+          "description": "A month calendar to pick a day or a period from, shown in the page.\n\nThe same calendar `<kt-date-picker>` opens in its popup, for when the\ncalendar is the interface rather than a way to fill a field: a booking\npage, a dashboard's date filter, a planning view.\n\nThe header's month and year are buttons. The month opens a grid of the\ntwelve months, the year a grid of twelve years, so reaching a date years\naway takes three clicks rather than paging month by month.\n\nKeyboard, in the day grid (the WAI-ARIA date grid pattern): arrows by day\nand week, Home/End to the week's ends, Page Up/Down by month and with Shift\nby year, Enter to choose. In the month and year grids: arrows, Page Up/Down\nby year or by twelve years, Enter to choose, Escape back to the days.\n\n---\n\n\n### **Events:**\n - **kt-change** - A day, or a whole period, was chosen. `detail: { value }`.\n\n### **Methods:**\n - **focus(): _void_** - Focuses the grid's current cell — the chosen day, or today.\n\n### **CSS Parts:**\n - **base** - The calendar.\n- **day** - A day cell.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "range",
+              "description": "Choose a period — two dates — instead of one day.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min",
+              "description": "Earliest date that can be chosen, ISO.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max",
+              "description": "Latest date that can be chosen, ISO.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "locale",
+              "description": "BCP 47 language tag for names and the first day of the week. Empty: the\npage's `lang`, then the browser's language.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "Accessible name of the calendar. Defaults to the strings registry.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "A day, or a whole period, was chosen. `detail: { value }`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+                "type": "string | null"
+              },
+              {
+                "name": "range",
+                "description": "Choose a period — two dates — instead of one day.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "Earliest date that can be chosen, ISO.",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "Latest date that can be chosen, ISO.",
+                "type": "string"
+              },
+              {
+                "name": "locale",
+                "description": "BCP 47 language tag for names and the first day of the week. Empty: the\npage's `lang`, then the browser's language.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "Accessible name of the calendar. Defaults to the strings registry.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "A day, or a whole period, was chosen. `detail: { value }`."
+              }
+            ]
+          }
+        },
         {
           "name": "kt-checkbox",
-          "description": "A checkbox: a choice that applies when the form is submitted.\n\nBuilt on a real `<input type=\"checkbox\">`, laid invisibly over the drawn\nbox, so the keyboard, the label click, the indeterminate state and what a\nscreen reader announces all come from the platform rather than a\nreimplementation of it.\n\nFor a setting that takes effect the moment it is flipped, use\n`<kt-toggle>`; for one choice among several, `<kt-radio-group>`.\n\n---\n\n\n### **Events:**\n - **kt-change** - The box was checked or unchecked. `detail: { checked }`.\n\n### **Slots:**\n - _default_ - The label, clickable.\n\n### **CSS Parts:**\n - **base** - The `<label>` around box and text.\n- **input** - The native checkbox.\n- **box** - The drawn box.",
+          "description": "A checkbox: a choice that applies when the form is submitted.\n\nBuilt on a real `<input type=\"checkbox\">`, laid invisibly over the drawn\nbox, so the keyboard, the label click, the indeterminate state and what a\nscreen reader announces all come from the platform rather than a\nreimplementation of it.\n\nFor a setting that takes effect the moment it is flipped, use\n`<kt-toggle>`; for one choice among several, `<kt-radio-group>`.\n\n---\n\n\n### **Events:**\n - **kt-change** - The box was checked or unchecked. `detail: { checked }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **Slots:**\n - _default_ - The label, clickable.\n\n### **CSS Parts:**\n - **base** - The `<label>` around box and text.\n- **input** - The native checkbox.\n- **box** - The drawn box.",
           "doc-url": "",
           "attributes": [
             {
@@ -1734,9 +1882,139 @@
             ]
           }
         },
+        {
+          "name": "kt-date-picker",
+          "description": "A date field with a calendar, for one day or a period.\n\nThe value is ISO 8601 text, the format a server and a `<input type=\"date\">`\nalready speak: `2026-09-25`, or `2026-09-01/2026-09-25` for a period. What\nthe field shows is the same date formatted for the reader's language, and\nthe calendar starts its weeks on the day their region does.\n\nThe popup is a `<kt-calendar>`, with its keyboard model and its month and\nyear views: the WAI-ARIA date picker dialog pattern, where Escape closes the\ndialog and hands focus back to the field, and tabbing out closes it too.\n\n---\n\n\n### **Events:**\n - **kt-change** - A date or a whole period was chosen, or the value cleared. `detail: { value }` — the ISO date or interval, or `null`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **trigger** - The field.\n- **panel** - The calendar popup.\n- **calendar** - The `<kt-calendar>` inside it.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "range",
+              "description": "Choose a period — two dates — instead of one day.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "min",
+              "description": "Earliest date that can be chosen, ISO.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "max",
+              "description": "Latest date that can be chosen, ISO.",
+              "value": { "type": "string", "default": "''" }
+            },
+            { "name": "name", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "label",
+              "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Shown while empty. Defaults to the strings registry.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "locale",
+              "description": "BCP 47 language tag for formatting and for the first day of the week.\nEmpty: the page's `lang`, then the browser's language.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "size",
+              "value": { "type": "KtDatePickerSize", "default": "'medium'" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "clearable",
+              "description": "Shows a button that empties the field once it holds a value.",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "error",
+              "description": "Error message. A non-empty value puts the field in its error state.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "events": [
+            {
+              "name": "kt-change",
+              "description": "A date or a whole period was chosen, or the value cleared. `detail: { value }` — the ISO date or interval, or `null`."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+                "type": "string | null"
+              },
+              {
+                "name": "range",
+                "description": "Choose a period — two dates — instead of one day.",
+                "type": "boolean"
+              },
+              {
+                "name": "min",
+                "description": "Earliest date that can be chosen, ISO.",
+                "type": "string"
+              },
+              {
+                "name": "max",
+                "description": "Latest date that can be chosen, ISO.",
+                "type": "string"
+              },
+              { "name": "name", "type": "string" },
+              {
+                "name": "label",
+                "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Shown while empty. Defaults to the strings registry.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "locale",
+                "description": "BCP 47 language tag for formatting and for the first day of the week.\nEmpty: the page's `lang`, then the browser's language.",
+                "type": "string"
+              },
+              { "name": "size", "type": "KtDatePickerSize" },
+              { "name": "disabled", "type": "boolean" },
+              { "name": "required", "type": "boolean" },
+              {
+                "name": "clearable",
+                "description": "Shows a button that empties the field once it holds a value.",
+                "type": "boolean"
+              },
+              {
+                "name": "error",
+                "description": "Error message. A non-empty value puts the field in its error state.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "kt-change",
+                "description": "A date or a whole period was chosen, or the value cleared. `detail: { value }` — the ISO date or interval, or `null`."
+              }
+            ]
+          }
+        },
         {
           "name": "kt-drag-drop",
-          "description": "A file drop zone.\n\nAccepts a drop or a click, lists what was picked with sizes and types, and\nlets each entry be removed. It holds the files in memory and reports them —\nuploading is the application's business.\n\n---\n\n\n### **Events:**\n - **kt-files-change** - The selection changed. `detail: { files }`.\n- **kt-files-rejected** - Files were refused. `detail: { files, reason }`.\n\n### **Methods:**\n - **clear(): _void_** - Empties the selection without firing a rejection.\n\n### **CSS Parts:**\n - **base** - The dashed drop zone.\n- **list** - The list of chosen files.",
+          "description": "A file drop zone.\n\nAccepts a drop or a click, lists what was picked with sizes and types, and\nlets each entry be removed. It holds the files in memory and reports them —\nuploading is the application's business.\n\n---\n\n\n### **Events:**\n - **kt-files-change** - The selection changed. `detail: { files }`.\n- **kt-files-rejected** - Files were refused. `detail: { files, reason }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n- **clear(): _void_** - Empties the selection without firing a rejection.\n\n### **CSS Parts:**\n - **base** - The dashed drop zone.\n- **list** - The list of chosen files.",
           "doc-url": "",
           "attributes": [
             {
@@ -1916,7 +2194,7 @@
         },
         {
           "name": "kt-input",
-          "description": "A single-line text field.\n\nBorderless by design: the field is a fill on `--color-dark-12` that gains a\n2px *outline* — grey on hover, primary on focus, danger on error. An outline\nsits outside the box, so nothing reflows when the state changes.\n\nThe element is form-associated: it serialises into `FormData` under its\n`name`, resets with the form, and reports validity like a native input.\n\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed (blur or Enter). `detail: { value }`.\n- **kt-clear** - The clear button was pressed.\n\n### **Methods:**\n - **formResetCallback(): _void_** - Called by the platform when the enclosing form is reset.\n- **formStateRestoreCallback(state: _string_): _void_** - Called by the platform when the browser restores a session.\n- **select(): _void_** - Selects the field's contents, as `HTMLInputElement.select()` does.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<input>`.\n- **actions** - The trailing icon row.",
+          "description": "A single-line text field.\n\nBorderless by design: the field is a fill on `--color-dark-12` that gains a\n2px *outline* — grey on hover, primary on focus, danger on error. An outline\nsits outside the box, so nothing reflows when the state changes.\n\nThe element is form-associated: it serialises into `FormData` under its\n`name`, resets with the form, and reports validity like a native input.\n\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed (blur or Enter). `detail: { value }`.\n- **kt-clear** - The clear button was pressed.\n\n### **Methods:**\n - **formResetCallback(): _void_** - Called by the platform when the enclosing form is reset.\n- **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n- **formStateRestoreCallback(state: _string_): _void_** - Called by the platform when the browser restores a session.\n- **select(): _void_** - Selects the field's contents, as `HTMLInputElement.select()` does.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<input>`.\n- **actions** - The trailing icon row.",
           "doc-url": "",
           "attributes": [
             {
@@ -1958,7 +2236,7 @@
             },
             {
               "name": "error",
-              "description": "Error message. A non-empty value puts the field in its error state.",
+              "description": "Error message. A non-empty value puts the field in its error state, and\nwins over the field's own checks.",
               "value": { "type": "string", "default": "''" }
             },
             {
@@ -2025,7 +2303,7 @@
               },
               {
                 "name": "error",
-                "description": "Error message. A non-empty value puts the field in its error state.",
+                "description": "Error message. A non-empty value puts the field in its error state, and\nwins over the field's own checks.",
                 "type": "string"
               },
               {
@@ -2069,7 +2347,7 @@
         },
         {
           "name": "kt-input-menu",
-          "description": "A combobox: type to narrow the list, then pick.\n\nReach for it over `<kt-select>` once the list is long enough that scanning it\nis slower than typing three letters — somewhere around twenty options.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n- **kt-filter** - The query changed. `detail: { query }`.\n\n### **CSS Parts:**\n - **control** - The field.\n- **input** - The native `<input>`.\n- **popup** - The option list.\n- **option** - An option row.",
+          "description": "A combobox: type to narrow the list, then pick.\n\nReach for it over `<kt-select>` once the list is long enough that scanning it\nis slower than typing three letters — somewhere around twenty options.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n- **kt-filter** - The query changed. `detail: { query }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **control** - The field.\n- **input** - The native `<input>`.\n- **popup** - The option list.\n- **option** - An option row.",
           "doc-url": "",
           "attributes": [
             {
@@ -2233,7 +2511,7 @@
         },
         {
           "name": "kt-radio-group",
-          "description": "One choice among a few, all visible at once.\n\nReach for it over `<kt-select>` when there are few enough options to show\nthem all — seeing every option is the point — and over\n`<kt-segmented-control>` when the options need a sentence each, or the\nchoice belongs in a form rather than a toolbar.\n\nNative radios cannot form a group across shadow roots, so this is the ARIA\nradio group pattern: one tab stop for the whole group, arrow keys move and\nselect, disabled options are skipped.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen. `detail: { value }`.\n\n### **Slots:**\n - _default_ - The `<kt-radio>` options.\n\n### **CSS Parts:**\n - **base** - The `role=\"radiogroup\"` container.",
+          "description": "One choice among a few, all visible at once.\n\nReach for it over `<kt-select>` when there are few enough options to show\nthem all — seeing every option is the point — and over\n`<kt-segmented-control>` when the options need a sentence each, or the\nchoice belongs in a form rather than a toolbar.\n\nNative radios cannot form a group across shadow roots, so this is the ARIA\nradio group pattern: one tab stop for the whole group, arrow keys move and\nselect, disabled options are skipped.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen. `detail: { value }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **Slots:**\n - _default_ - The `<kt-radio>` options.\n\n### **CSS Parts:**\n - **base** - The `role=\"radiogroup\"` container.",
           "doc-url": "",
           "attributes": [
             {
@@ -2307,7 +2585,7 @@
         },
         {
           "name": "kt-select",
-          "description": "A single-choice dropdown.\n\nUnlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\nmove an active descendant, Home and End jump to the ends, Enter commits,\nEscape closes without changing anything, and disabled options are skipped\nrather than merely unclickable.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **trigger** - The button that opens the list.\n- **popup** - The option list.\n- **option** - An option row.",
+          "description": "A single-choice dropdown.\n\nUnlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\nmove an active descendant, Home and End jump to the ends, Enter commits,\nEscape closes without changing anything, and disabled options are skipped\nrather than merely unclickable.\n\n---\n\n\n### **Events:**\n - **kt-change** - An option was chosen or cleared. `detail: { value, option }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **trigger** - The button that opens the list.\n- **popup** - The option list.\n- **option** - An option row.",
           "doc-url": "",
           "attributes": [
             {
@@ -2412,7 +2690,7 @@
         },
         {
           "name": "kt-textarea",
-          "description": "A multi-line text field, with the same borderless fill and outline states as\n`<kt-input>`.\n\nA character counter appears whenever `maxlength` is set — the field tells\nthe user where the limit is before the browser silently stops accepting\nkeystrokes.\n\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed. `detail: { value }`.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<textarea>`.\n- **counter** - The character counter.",
+          "description": "A multi-line text field, with the same borderless fill and outline states as\n`<kt-input>`.\n\nA character counter appears whenever `maxlength` is set — the field tells\nthe user where the limit is before the browser silently stops accepting\nkeystrokes.\n\n---\n\n\n### **Events:**\n - **kt-input** - On every keystroke. `detail: { value }`.\n- **kt-change** - When the value is committed. `detail: { value }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **base** - The field container.\n- **control** - The native `<textarea>`.\n- **counter** - The character counter.",
           "doc-url": "",
           "attributes": [
             { "name": "value", "value": { "type": "string", "default": "''" } },
@@ -2501,7 +2779,7 @@
         },
         {
           "name": "kt-toggle",
-          "description": "An on/off switch.\n\nSized off the button heights so a toggle lines up with the controls beside\nit: the track is 1.8× the field height, the thumb is inset by 12% of it.\nChange `--button-height` and the switch follows.\n\n---\n\n\n### **Events:**\n - **kt-change** - The state changed. `detail: { checked }`.\n\n### **Slots:**\n - _default_ - Optional label, rendered beside the switch and clickable.\n\n### **CSS Parts:**\n - **base** - The button carrying `role=\"switch\"`.\n- **track** - The track.\n- **thumb** - The sliding thumb.",
+          "description": "An on/off switch.\n\nSized off the button heights so a toggle lines up with the controls beside\nit: the track is 1.8× the field height, the thumb is inset by 12% of it.\nChange `--button-height` and the switch follows.\n\n---\n\n\n### **Events:**\n - **kt-change** - The state changed. `detail: { checked }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **Slots:**\n - _default_ - Optional label, rendered beside the switch and clickable.\n\n### **CSS Parts:**\n - **base** - The button carrying `role=\"switch\"`.\n- **track** - The track.\n- **thumb** - The sliding thumb.",
           "doc-url": "",
           "attributes": [
             {
@@ -2740,7 +3018,7 @@
         },
         {
           "name": "kt-segmented-control",
-          "description": "A small set of mutually exclusive choices, shown as one inset track with the\nselected segment raised out of it.\n\nUse it for two to five options that all fit on screen — a view switch, a date\nrange. Past that, `<kt-select>`.\n\nImplemented as a radio group: one tab stop for the whole control, arrows to\nmove between segments. That is what a keyboard user expects here, and it\nkeeps a five-option control from adding five tab stops to the page.\n\n---\n\n\n### **Events:**\n - **kt-change** - A segment was chosen. `detail: { value, option }`.\n\n### **CSS Parts:**\n - **base** - The track.\n- **option** - A segment.",
+          "description": "A small set of mutually exclusive choices, shown as one inset track with the\nselected segment raised out of it.\n\nUse it for two to five options that all fit on screen — a view switch, a date\nrange. Past that, `<kt-select>`.\n\nImplemented as a radio group: one tab stop for the whole control, arrows to\nmove between segments. That is what a keyboard user expects here, and it\nkeeps a five-option control from adding five tab stops to the page.\n\n---\n\n\n### **Events:**\n - **kt-change** - A segment was chosen. `detail: { value, option }`.\n\n### **Methods:**\n - **formDisabledCallback(disabled: _boolean_): _void_** - Called by the platform when the control's disabled state changes — its\nown `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n\n### **CSS Parts:**\n - **base** - The track.\n- **option** - A segment.",
           "doc-url": "",
           "attributes": [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kanto-ds",
-  "version": "1.4.0",
+  "version": "1.5.2",
   "description": "Framework-agnostic design system for data-dense product interfaces.",
   "keywords": [
     "design-system",
@@ -153,10 +153,18 @@
       "types": "./dist/components/feedback/kt-tooltip/kt-tooltip.d.ts",
       "default": "./dist/components/feedback/kt-tooltip/kt-tooltip.js"
     },
+    "./components/forms/kt-calendar": {
+      "types": "./dist/components/forms/kt-calendar/kt-calendar.d.ts",
+      "default": "./dist/components/forms/kt-calendar/kt-calendar.js"
+    },
     "./components/forms/kt-checkbox": {
       "types": "./dist/components/forms/kt-checkbox/kt-checkbox.d.ts",
       "default": "./dist/components/forms/kt-checkbox/kt-checkbox.js"
     },
+    "./components/forms/kt-date-picker": {
+      "types": "./dist/components/forms/kt-date-picker/kt-date-picker.d.ts",
+      "default": "./dist/components/forms/kt-date-picker/kt-date-picker.js"
+    },
     "./components/forms/kt-drag-drop": {
       "types": "./dist/components/forms/kt-drag-drop/kt-drag-drop.d.ts",
       "default": "./dist/components/forms/kt-drag-drop/kt-drag-drop.js"
@@ -323,6 +331,7 @@
     "happy-dom": "^20.14.0",
     "highlight.js": "^11.12.0",
     "jsdom": "^30.0.1",
+    "libphonenumber-js": "^1.13.14",
     "marked": "^18.0.12",
     "playwright": "^1.63.0",
     "prettier": "^3.9.6",

package/dist/chunks/events-Bjl5Zmmq.js

@@ -1,18 +0,0 @@
-function c(e, u, r) {
-  const t = new CustomEvent(u, {
-    detail: r,
-    bubbles: !0,
-    composed: !0,
-    cancelable: !0
-  });
-  return e.dispatchEvent(t), t;
-}
-let n = 0;
-function o(e) {
-  return n += 1, `${e}-${n}`;
-}
-export {
-  c as e,
-  o as u
-};
-//# sourceMappingURL=events-Bjl5Zmmq.js.map

package/dist/chunks/form-control-CxjBTt1c.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-control-CxjBTt1c.js","sources":["../../src/internal/form-control.ts"],"sourcesContent":["/**\n * Form participation for Kanto's input elements.\n *\n * A control inside a shadow root is invisible to the form around it. The\n * platform's answer is `ElementInternals`: the element declares\n * `static formAssociated = true`, calls `attachInternals()` and pushes its\n * value in with `setFormValue`, which makes it a first-class form control —\n * serialised into `FormData`, reset by `form.reset()`, validated by\n * `form.checkValidity()`.\n *\n * Every browser Kanto targets supports this. Test environments do not: neither\n * happy-dom nor jsdom implements it, and jsdom stubs `attachInternals` with an\n * object that has no `setFormValue`. So each call is guarded, and an element\n * still works — minus form serialisation — where the API is missing.\n */\n\n/** An `ElementInternals` implementation complete enough to be worth calling. */\nexport type UsableInternals = ElementInternals;\n\nexport function attachFormInternals(host: HTMLElement): UsableInternals | null {\n  if (typeof host.attachInternals !== 'function') return null;\n\n  const internals = host.attachInternals();\n  if (typeof internals.setFormValue !== 'function') return null;\n\n  return internals;\n}\n\n/**\n * Pushes the control's current value into the enclosing form, if there is one.\n *\n * A `FormData` submits each of its entries as they are named in it — which is\n * how one control contributes several files under one name.\n */\nexport function setFormValue(\n  internals: UsableInternals | null,\n  value: string | FormData | null,\n): void {\n  internals?.setFormValue(value);\n}\n\n/**\n * Mirrors a control's validity onto the host element.\n *\n * `anchor` is the element a browser scrolls to and anchors the native bubble\n * against when the form is submitted invalid.\n */\nexport function setValidity(\n  internals: UsableInternals | null,\n  flags: ValidityStateFlags,\n  message: string,\n  anchor?: HTMLElement,\n): void {\n  if (!internals || typeof internals.setValidity !== 'function') return;\n  if (Object.values(flags).some(Boolean)) internals.setValidity(flags, message, anchor);\n  else internals.setValidity({});\n}\n"],"names":["attachFormInternals","host","internals","setFormValue","value","setValidity","flags","message","anchor"],"mappings":"AAmBO,SAASA,EAAoBC,GAA2C;AAC7E,MAAI,OAAOA,EAAK,mBAAoB,WAAY,QAAO;AAEvD,QAAMC,IAAYD,EAAK,gBAAA;AACvB,SAAI,OAAOC,EAAU,gBAAiB,aAAmB,OAElDA;AACT;AAQO,SAASC,EACdD,GACAE,GACM;AACN,EAAAF,GAAW,aAAaE,CAAK;AAC/B;AAQO,SAASC,EACdH,GACAI,GACAC,GACAC,GACM;AACN,EAAI,CAACN,KAAa,OAAOA,EAAU,eAAgB,eAC/C,OAAO,OAAOI,CAAK,EAAE,KAAK,OAAO,IAAGJ,EAAU,YAAYI,GAAOC,GAASC,CAAM,IAC/EN,EAAU,YAAY,EAAE;AAC/B;"}

package/dist/chunks/index-DSSLJirw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-DSSLJirw.js","sources":["../../src/internal/strings.ts"],"sourcesContent":["/**\n * Every piece of copy the elements write themselves — empty states, button\n * labels, validation messages, and the accessible names a screen reader\n * announces but nobody sees.\n *\n * English by default. An application in another language replaces them once,\n * at start-up, and every element follows:\n *\n *     import { setStrings } from 'kanto-ds/strings';\n *\n *     setStrings({\n *       clear: 'Effacer',\n *       pageOf: (page, total) => `Page ${page} sur ${total}`,\n *     });\n *\n * Anything left out keeps its English default. A string an element also takes\n * as a property — `emptyText`, `placeholder`, `confirmLabel` — still wins when\n * it is set, so one screen can say something different from the rest.\n *\n * Copy that carries a value is a function, not a template with placeholders:\n * the translation owns the word order, and \"Remove {name}\" does not survive\n * languages that put the object first.\n */\n\nexport interface KtStrings {\n  // --- Shared actions ---\n  /** Clear button in fields. */\n  clear: string;\n  /** Close button on toasts, alerts' dismiss button. */\n  close: string;\n  dismiss: string;\n  /** Copy button on `kt-code`, and its state once copied. */\n  copy: string;\n  copied: string;\n  copyCode: string;\n  /** The countdown bar on a toast that closes itself. */\n  timeRemaining: string;\n  /** Remove button on a badge or a dropped file. */\n  remove: (name: string) => string;\n\n  // --- Empty and loading states ---\n  noOptions: string;\n  noResults: string;\n  noActions: string;\n  noData: string;\n  loading: string;\n\n  // --- Fields ---\n  /** `kt-select` with nothing chosen. */\n  select: string;\n  openList: string;\n  closeList: string;\n  showPassword: string;\n  hidePassword: string;\n  searchCountry: string;\n  noCountry: string;\n  countryCode: (country: string | undefined) => string;\n  dragAndDrop: string;\n  browseFiles: string;\n  recommendedSize: (size: string) => string;\n  selectedFiles: string;\n\n  // --- Validation messages, shown by the browser on submit ---\n  required: string;\n  selectOption: string;\n  selectFile: string;\n  /** A required checkbox left unchecked. */\n  checkRequired: string;\n\n  // --- Navigation ---\n  openMenu: string;\n  closeMenu: string;\n  breadcrumb: string;\n  secondaryNavigation: string;\n  pagination: string;\n  previous: string;\n  next: string;\n  pageOf: (page: number, total: number) => string;\n  moreActions: string;\n\n  // --- Groups and sections ---\n  /** A button or choice group with no label of its own. */\n  options: string;\n  /** A `kt-form` section with no heading. */\n  formSection: string;\n\n  // --- Data ---\n  selectRow: string;\n  selectAll: string;\n  total: string;\n  /** Column headers of the data table every chart renders for assistive tech. */\n  chartSeries: string;\n  chartPoint: string;\n  chartSlice: string;\n  chartShare: string;\n  /** Caption of a chart's data table when the chart has no label. */\n  chartData: string;\n  /** Value column of a single-series chart's data table when the series has no name. */\n  chartValue: string;\n\n  // --- Overlays ---\n  confirmHeading: string;\n  confirm: string;\n  cancel: string;\n  details: string;\n\n  // --- Identity ---\n  avatar: string;\n}\n\nexport const defaultStrings: Readonly<KtStrings> = Object.freeze({\n  clear: 'Clear',\n  close: 'Close',\n  dismiss: 'Dismiss',\n  copy: 'Copy',\n  copied: 'Copied',\n  copyCode: 'Copy code',\n  timeRemaining: 'Time remaining',\n  remove: (name: string) => (name ? `Remove ${name}` : 'Remove'),\n\n  noOptions: 'No options available',\n  noResults: 'No results',\n  noActions: 'No actions',\n  noData: 'No data to display',\n  loading: 'Loading…',\n\n  select: 'Select',\n  openList: 'Open list',\n  closeList: 'Close list',\n  showPassword: 'Show password',\n  hidePassword: 'Hide password',\n  searchCountry: 'Search country or dial code',\n  noCountry: 'No country found',\n  countryCode: (country: string | undefined) => `Country code: ${country ?? 'none'}`,\n  dragAndDrop: 'Drag and drop or',\n  browseFiles: 'browse your files',\n  recommendedSize: (size: string) => `Recommended image size: ${size}`,\n  selectedFiles: 'Selected files',\n\n  required: 'This field is required.',\n  selectOption: 'Select an option.',\n  selectFile: 'Select a file.',\n  checkRequired: 'Check this box to continue.',\n\n  openMenu: 'Open menu',\n  closeMenu: 'Close menu',\n  breadcrumb: 'Breadcrumb',\n  secondaryNavigation: 'Secondary navigation',\n  pagination: 'Pagination',\n  previous: 'Previous',\n  next: 'Next',\n  pageOf: (page: number, total: number) => `Page ${page} / ${total}`,\n  moreActions: 'More actions',\n\n  options: 'Options',\n  formSection: 'Form section',\n\n  selectRow: 'Select row',\n  selectAll: 'Select all',\n  total: 'Total',\n  chartSeries: 'Series',\n  chartPoint: 'Point',\n  chartSlice: 'Slice',\n  chartShare: 'Share',\n  chartData: 'Chart data',\n  chartValue: 'Value',\n\n  confirmHeading: 'Are you sure?',\n  confirm: 'Confirm',\n  cancel: 'Cancel',\n  details: 'Details',\n\n  avatar: 'Avatar',\n});\n\nlet current: KtStrings = { ...defaultStrings };\nconst listeners = new Set<() => void>();\n\n/** The strings in effect. Elements read them at render time. */\nexport function strings(): Readonly<KtStrings> {\n  return current;\n}\n\n/**\n * Replaces some or all of the strings, and re-renders every connected element\n * so the change shows at once — switching language at runtime works.\n */\nexport function setStrings(overrides: Partial<KtStrings>): void {\n  current = { ...current, ...overrides };\n  for (const listener of listeners) listener();\n}\n\n/** Back to the English defaults. */\nexport function resetStrings(): void {\n  setStrings(defaultStrings);\n}\n\n/** Calls `listener` after every `setStrings`. Returns the unsubscribe function. */\nexport function onStringsChange(listener: () => void): () => void {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n}\n"],"names":["defaultStrings","name","country","size","page","total","current","listeners","strings","setStrings","overrides","listener","resetStrings","onStringsChange"],"mappings":"AA8GO,MAAMA,IAAsC,OAAO,OAAO;AAAA,EAC/D,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ,CAACC,MAAkBA,IAAO,UAAUA,CAAI,KAAK;AAAA,EAErD,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,cAAc;AAAA,EACd,eAAe;AAAA,EACf,WAAW;AAAA,EACX,aAAa,CAACC,MAAgC,iBAAiBA,KAAW,MAAM;AAAA,EAChF,aAAa;AAAA,EACb,aAAa;AAAA,EACb,iBAAiB,CAACC,MAAiB,2BAA2BA,CAAI;AAAA,EAClE,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,qBAAqB;AAAA,EACrB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,QAAQ,CAACC,GAAcC,MAAkB,QAAQD,CAAI,MAAMC,CAAK;AAAA,EAChE,aAAa;AAAA,EAEb,SAAS;AAAA,EACT,aAAa;AAAA,EAEb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EAEZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EAET,QAAQ;AACV,CAAC;AAED,IAAIC,IAAqB,EAAE,GAAGN,EAAA;AAC9B,MAAMO,wBAAgB,IAAA;AAGf,SAASC,IAA+B;AAC7C,SAAOF;AACT;AAMO,SAASG,EAAWC,GAAqC;AAC9D,EAAAJ,IAAU,EAAE,GAAGA,GAAS,GAAGI,EAAA;AAC3B,aAAWC,KAAYJ,EAAW,CAAAI,EAAA;AACpC;AAGO,SAASC,IAAqB;AACnC,EAAAH,EAAWT,CAAc;AAC3B;AAGO,SAASa,EAAgBF,GAAkC;AAChE,SAAAJ,EAAU,IAAII,CAAQ,GACf,MAAMJ,EAAU,OAAOI,CAAQ;AACxC;"}