kanto-ds 1.4.0 → 1.5.2

package/dist/react/jsx.d.ts

@@ -19,7 +19,7 @@
  * are for.
  */
 import type * as React from 'react';
-import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtCheckbox, KtRadioGroup, KtRadio, KtInputMenu, KtDragDrop, KtBreadcrumb, KtSubMenuNavigation, KtPageHeader, KtSegmentedControl, KtTabs, KtHeader, KtToggleButton, KtToggleButtonGroup, KtAlert, KtEmptyState, KtProgressBar, KtSkeleton, KtTooltip, KtToast, KtToastContainer, KtCollapsible, KtDropdown, KtModal, KtSidePanel, KtConfirmDialog, KtChart, KtTable, KtMeter, KtPagination, KtStat, KtTimeline, KtTimelineItem } from 'kanto-ds';
+import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, KtCheckbox, KtCalendar, KtDatePicker, KtRadioGroup, KtRadio, KtInputMenu, KtDragDrop, KtBreadcrumb, KtSubMenuNavigation, KtPageHeader, KtSegmentedControl, KtTabs, KtHeader, KtToggleButton, KtToggleButtonGroup, KtAlert, KtEmptyState, KtProgressBar, KtSkeleton, KtTooltip, KtToast, KtToastContainer, KtCollapsible, KtDropdown, KtModal, KtSidePanel, KtConfirmDialog, KtChart, KtTable, KtMeter, KtPagination, KtStat, KtTimeline, KtTimelineItem } from 'kanto-ds';
 /** The `on<event>` props React 19 turns into listeners, typed by their detail. */
 type Handlers<E> = {
     [K in keyof E & string as `on${K}`]?: (event: CustomEvent<E[K]>) => void;
@@ -83,6 +83,16 @@ declare module 'react' {
                     checked: boolean;
                 };
             }>;
+            'kt-calendar': KtProps<KtCalendar, {
+                'kt-change': {
+                    value: string;
+                };
+            }>;
+            'kt-date-picker': KtProps<KtDatePicker, {
+                'kt-change': {
+                    value: string | null;
+                };
+            }>;
             'kt-checkbox': KtProps<KtCheckbox, {
                 'kt-change': {
                     checked: boolean;

package/dist/strings/index.js

@@ -1,4 +1,4 @@
-import { d as r, s as a, r as e, a as g } from "../chunks/index-DSSLJirw.js";
+import { d as r, s as a, r as e, a as g } from "../chunks/index-STEEvEP7.js";
 export {
   r as defaultStrings,
   a as getStrings,

package/dist/tokens/base.css

@@ -89,12 +89,14 @@ pre {
   kt-badge,
   kt-breadcrumb,
   kt-button,
+  kt-calendar,
   kt-card,
   kt-chart,
   kt-checkbox,
   kt-code,
   kt-collapsible,
   kt-confirm-dialog,
+  kt-date-picker,
   kt-drag-drop,
   kt-dropdown,
   kt-empty-state,

package/dist/tokens/responsive.css

@@ -104,5 +104,6 @@
     --duration-instant: 0s;
     --duration-fast: 0s;
     --duration-normal: 0s;
+    --duration-slow: 0s;
   }
 }

package/dist/tokens/spacing.css

@@ -50,6 +50,7 @@
   --duration-instant: 0.1s;
   --duration-fast: 0.16s;
   --duration-normal: 0.2s;
+  --duration-slow: 0.4s; /* a bar filling to its new value */
   --easing-standard: ease;
 
   /* === ELEVATION ===

package/dist/vscode.css-custom-data.json

@@ -83,12 +83,20 @@
     { "name": "::part(base)", "description": "The toast surface." },
     { "name": "::part(close)", "description": "The dismiss button." },
     { "name": "::part(bubble)", "description": "The tooltip bubble." },
+    { "name": "::part(base)", "description": "The calendar." },
+    { "name": "::part(day)", "description": "A day cell." },
     {
       "name": "::part(base)",
       "description": "The `<label>` around box and text."
     },
     { "name": "::part(input)", "description": "The native checkbox." },
     { "name": "::part(box)", "description": "The drawn box." },
+    { "name": "::part(trigger)", "description": "The field." },
+    { "name": "::part(panel)", "description": "The calendar popup." },
+    {
+      "name": "::part(calendar)",
+      "description": "The `<kt-calendar>` inside it."
+    },
     { "name": "::part(base)", "description": "The dashed drop zone." },
     { "name": "::part(list)", "description": "The list of chosen files." },
     { "name": "::part(base)", "description": "The `<fieldset>`." },

package/dist/vscode.html-custom-data.json

@@ -419,6 +419,26 @@
       "name": "kt-table",
       "description": "A data table: tri-state sorting, single or multiple selection, paging.\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>`.",
       "attributes": [
+        {
+          "name": "page",
+          "description": "The page on screen, from 1. Set it to open on another page.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "total-rows",
+          "description": "In manual mode, how many rows the server holds — what the pager counts.",
+          "values": []
+        },
         { "name": "selectable", "values": [] },
         {
           "name": "selection-mode",
@@ -439,6 +459,11 @@
           "name": "label",
           "description": "Accessible name for the table.",
           "values": []
+        },
+        {
+          "name": "locale",
+          "description": "BCP 47 locale text is sorted in. Empty means the page's `<html lang>`,\nthen the browser's language.",
+          "values": []
         }
       ],
       "references": []
@@ -622,7 +647,16 @@
       "description": "A short label that appears on hover or focus.\n\nWrap the thing it describes:\n\n```html\n<kt-tooltip text=\"Refresh the data\">\n  <kt-button icon=\"refresh-cw\" label=\"Refresh\"></kt-button>\n</kt-tooltip>\n```\n\nA tooltip is a *description*, never the only name of a control. If the\ntrigger has no visible text, give it its own `label` too — a tooltip that has\nto be hovered to be read leaves touch and screen-reader users with nothing.\n---\n\n\n### **Slots:**\n - _default_ - The trigger.\n\n### **CSS Parts:**\n - **bubble** - The tooltip bubble.",
       "attributes": [
         { "name": "text", "values": [] },
-        { "name": "placement", "values": [{ "name": "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.",
+          "values": [{ "name": "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.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Suppresses the tooltip without removing it from the markup.",
@@ -631,9 +665,46 @@
       ],
       "references": []
     },
+    {
+      "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### **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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+          "values": []
+        },
+        {
+          "name": "range",
+          "description": "Choose a period — two dates — instead of one day.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "Earliest date that can be chosen, ISO.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Latest date that can be chosen, ISO.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "Accessible name of the calendar. Defaults to the strings registry.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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### **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### **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.",
       "attributes": [
         { "name": "checked", "values": [] },
         {
@@ -663,9 +734,65 @@
       ],
       "references": []
     },
+    {
+      "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### **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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
+          "values": []
+        },
+        {
+          "name": "range",
+          "description": "Choose a period — two dates — instead of one day.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "Earliest date that can be chosen, ISO.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Latest date that can be chosen, ISO.",
+          "values": []
+        },
+        { "name": "name", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Shown while empty. Defaults to the strings registry.",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        },
+        { "name": "size", "values": [{ "name": "KtDatePickerSize" }] },
+        { "name": "disabled", "values": [] },
+        { "name": "required", "values": [] },
+        {
+          "name": "clearable",
+          "description": "Shows a button that empties the field once it holds a value.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "Error message. A non-empty value puts the field in its error state.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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### **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### **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.",
       "attributes": [
         {
           "name": "heading",
@@ -733,7 +860,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### **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### **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.",
       "attributes": [
         {
           "name": "value",
@@ -762,7 +889,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.",
           "values": []
         },
         {
@@ -787,7 +914,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### **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### **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.",
       "attributes": [
         { "name": "value", "values": [] },
         { "name": "placeholder", "values": [] },
@@ -839,7 +966,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### **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### **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.",
       "attributes": [
         {
           "name": "value",
@@ -868,7 +995,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### **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### **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.",
       "attributes": [
         {
           "name": "value",
@@ -905,7 +1032,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### **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### **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.",
       "attributes": [
         { "name": "value", "values": [] },
         { "name": "name", "values": [] },
@@ -935,7 +1062,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### **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### **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.",
       "attributes": [
         { "name": "checked", "values": [] },
         { "name": "disabled", "values": [] },
@@ -1010,7 +1137,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### **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### **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.",
       "attributes": [
         { "name": "value", "values": [] },
         { "name": "size", "values": [{ "name": "KtSegmentedSize" }] },

package/dist/vue/index.d.ts

@@ -45,6 +45,8 @@ import type { KtInputMenu } from 'kanto-ds';
 import type { KtLabelInput } from 'kanto-ds';
 import type { KtSelect } from 'kanto-ds';
 import type { KtCheckbox } from 'kanto-ds';
+import type { KtCalendar } from 'kanto-ds';
+import type { KtDatePicker } from 'kanto-ds';
 import type { KtRadioGroup } from 'kanto-ds';
 import type { KtRadio } from 'kanto-ds';
 import type { KtTextarea } from 'kanto-ds';
@@ -109,6 +111,8 @@ declare module 'vue' {
         'kt-label-input': KtProps<KtLabelInput>;
         'kt-select': KtProps<KtSelect>;
         'kt-checkbox': KtProps<KtCheckbox>;
+        'kt-calendar': KtProps<KtCalendar>;
+        'kt-date-picker': KtProps<KtDatePicker>;
         'kt-radio-group': KtProps<KtRadioGroup>;
         'kt-radio': KtProps<KtRadio>;
         'kt-textarea': KtProps<KtTextarea>;

package/dist/vue/index.js

@@ -7,6 +7,8 @@ import "../components/core/kt-code/kt-code.js";
 import "../components/core/kt-icon/kt-icon.js";
 import "../components/core/kt-kbd/kt-kbd.js";
 import "../components/forms/kt-checkbox/kt-checkbox.js";
+import "../chunks/kt-calendar-B_hFdD9V.js";
+import "../components/forms/kt-date-picker/kt-date-picker.js";
 import "../components/forms/kt-drag-drop/kt-drag-drop.js";
 import "../components/forms/kt-form/kt-form.js";
 import "../components/forms/kt-input/kt-input.js";
@@ -30,7 +32,7 @@ import "../components/feedback/kt-progress-bar/kt-progress-bar.js";
 import "../components/feedback/kt-skeleton/kt-skeleton.js";
 import "../components/feedback/kt-toast/kt-toast.js";
 import "../components/feedback/kt-toast-container/kt-toast-container.js";
-import { t as V } from "../chunks/toaster-PmdKSV5x.js";
+import { t as Z } from "../chunks/toaster-PmdKSV5x.js";
 import "../components/feedback/kt-tooltip/kt-tooltip.js";
 import "../components/overlays/kt-collapsible/kt-collapsible.js";
 import "../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
@@ -43,17 +45,17 @@ import "../components/data/kt-pagination/kt-pagination.js";
 import "../components/data/kt-stat/kt-stat.js";
 import "../components/data/kt-table/kt-table.js";
 import "../components/data/kt-timeline/kt-timeline.js";
-function L(t) {
+function Q(t) {
   return t.startsWith("kt-");
 }
-const M = "kt-", Q = {
+const S = "kt-", U = {
   install() {
   }
 };
 export {
-  M as KANTO_TAG_PREFIX,
-  L as isKantoElement,
-  Q as kanto,
-  V as toaster
+  S as KANTO_TAG_PREFIX,
+  Q as isKantoElement,
+  U as kanto,
+  Z as toaster
 };
 //# sourceMappingURL=index.js.map

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue integration for the Kanto elements.\n *\n * There are no per-component wrappers here, and that is the point. Vue 3\n * renders custom elements natively and sets non-primitive bindings as DOM\n * properties, so `<kt-select :options=\"regions\">` already works. A wrapper\n * layer would only be one more thing to keep in sync.\n *\n * What Vue cannot infer on its own is which tags are custom elements, and what\n * they accept. That is what this module supplies.\n *\n * ```ts\n * // vite.config.ts\n * import vue from '@vitejs/plugin-vue';\n * import { isKantoElement } from 'kanto-ds/vue';\n *\n * export default defineConfig({\n *   plugins: [vue({ template: { compilerOptions: { isCustomElement: isKantoElement } } })],\n * });\n * ```\n *\n * ```ts\n * // main.ts\n * import 'kanto-ds/vue'; // registers every element\n * import 'kanto-ds/styles.css';\n * ```\n *\n * Vue is a peer dependency: importing this module in a project without Vue\n * still works, since nothing here is imported from `vue` at runtime.\n */\n// Type-only, so nothing from Vue is pulled in at runtime — but the import is\n// what lets TypeScript resolve the module we augment below.\nimport type { Plugin } from 'vue';\n\nimport '../index.js';\n\nimport type { KtAvatar } from 'kanto-ds';\nimport type { KtBadge } from 'kanto-ds';\nimport type { KtButton } from 'kanto-ds';\nimport type { KtSplitButton } from 'kanto-ds';\nimport type { KtCard } from 'kanto-ds';\nimport type { KtCode } from 'kanto-ds';\nimport type { KtIcon } from 'kanto-ds';\nimport type { KtKbd } from 'kanto-ds';\nimport type { KtDragDrop } from 'kanto-ds';\nimport type { KtForm } from 'kanto-ds';\nimport type { KtInput } from 'kanto-ds';\nimport type { KtInputMenu } from 'kanto-ds';\nimport type { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } from 'kanto-ds';\nimport type { KtCheckbox } from 'kanto-ds';\nimport type { KtRadioGroup } from 'kanto-ds';\nimport type { KtRadio } from 'kanto-ds';\nimport type { KtTextarea } from 'kanto-ds';\nimport type { KtToggle } from 'kanto-ds';\nimport type { KtBreadcrumb } from 'kanto-ds';\nimport type { KtPageHeader } from 'kanto-ds';\nimport type { KtSegmentedControl } from 'kanto-ds';\nimport type { KtSubMenuNavigation } from 'kanto-ds';\nimport type { KtTabs } from 'kanto-ds';\nimport type { KtHeader } from 'kanto-ds';\nimport type { KtToggleButton } from 'kanto-ds';\nimport type { KtToggleButtonGroup } from 'kanto-ds';\nimport type { KtAlert } from 'kanto-ds';\nimport type { KtEmptyState } from 'kanto-ds';\nimport type { KtProgressBar } from 'kanto-ds';\nimport type { KtSkeleton } from 'kanto-ds';\nimport type { KtToast } from 'kanto-ds';\nimport type { KtToastContainer } from 'kanto-ds';\nimport type { KtTooltip } from 'kanto-ds';\nimport type { KtCollapsible } from 'kanto-ds';\nimport type { KtConfirmDialog } from 'kanto-ds';\nimport type { KtDropdown } from 'kanto-ds';\nimport type { KtModal } from 'kanto-ds';\nimport type { KtSidePanel } from 'kanto-ds';\nimport type { KtChart } from 'kanto-ds';\nimport type { KtMeter } from 'kanto-ds';\nimport type { KtPagination } from 'kanto-ds';\nimport type { KtStat } from 'kanto-ds';\nimport type { KtTable } from 'kanto-ds';\nimport type { KtTimeline, KtTimelineItem } from 'kanto-ds';\n\n/**\n * True for any Kanto custom element.\n *\n * Pass it as `compilerOptions.isCustomElement` so the Vue compiler stops\n * trying to resolve `kt-*` tags as components.\n */\nexport function isKantoElement(tag: string): boolean {\n  return tag.startsWith('kt-');\n}\n\n/** Every element's tag name, for anyone building their own predicate. */\nexport const KANTO_TAG_PREFIX = 'kt-';\n\n/**\n * What a Kanto element accepts in a template: its own properties, plus the\n * attributes and listeners any element takes.\n */\ntype KtProps<T> = Partial<T> &\n  Record<`on${string}`, unknown> & { class?: unknown; style?: unknown };\n\ndeclare module 'vue' {\n  interface GlobalComponents {\n    'kt-avatar': KtProps<KtAvatar>;\n    'kt-badge': KtProps<KtBadge>;\n    'kt-button': KtProps<KtButton>;\n    'kt-split-button': KtProps<KtSplitButton>;\n    'kt-card': KtProps<KtCard>;\n    'kt-code': KtProps<KtCode>;\n    'kt-icon': KtProps<KtIcon>;\n    'kt-kbd': KtProps<KtKbd>;\n    'kt-drag-drop': KtProps<KtDragDrop>;\n    'kt-form': KtProps<KtForm>;\n    'kt-input': KtProps<KtInput>;\n    'kt-input-menu': KtProps<KtInputMenu>;\n    'kt-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\n    'kt-radio-group': KtProps<KtRadioGroup>;\n    'kt-radio': KtProps<KtRadio>;\n    'kt-textarea': KtProps<KtTextarea>;\n    'kt-toggle': KtProps<KtToggle>;\n    'kt-breadcrumb': KtProps<KtBreadcrumb>;\n    'kt-page-header': KtProps<KtPageHeader>;\n    'kt-segmented-control': KtProps<KtSegmentedControl>;\n    'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation>;\n    'kt-tabs': KtProps<KtTabs>;\n    'kt-header': KtProps<KtHeader>;\n    'kt-toggle-button': KtProps<KtToggleButton>;\n    'kt-toggle-button-group': KtProps<KtToggleButtonGroup>;\n    'kt-alert': KtProps<KtAlert>;\n    'kt-empty-state': KtProps<KtEmptyState>;\n    'kt-progress-bar': KtProps<KtProgressBar>;\n    'kt-skeleton': KtProps<KtSkeleton>;\n    'kt-toast': KtProps<KtToast>;\n    'kt-toast-container': KtProps<KtToastContainer>;\n    'kt-tooltip': KtProps<KtTooltip>;\n    'kt-collapsible': KtProps<KtCollapsible>;\n    'kt-confirm-dialog': KtProps<KtConfirmDialog>;\n    'kt-dropdown': KtProps<KtDropdown>;\n    'kt-modal': KtProps<KtModal>;\n    'kt-side-panel': KtProps<KtSidePanel>;\n    'kt-chart': KtProps<KtChart>;\n    'kt-meter': KtProps<KtMeter>;\n    'kt-pagination': KtProps<KtPagination>;\n    'kt-stat': KtProps<KtStat>;\n    'kt-table': KtProps<KtTable>;\n    'kt-timeline': KtProps<KtTimeline>;\n    'kt-timeline-item': KtProps<KtTimelineItem>;\n  }\n}\n\n/**\n * A no-op plugin, for apps that would rather write `app.use(kanto)` than a\n * bare side-effect import. Importing this module already registers every\n * element; this only makes that visible in `main.ts`.\n */\nexport const kanto: Plugin = {\n  install() {\n    /* the elements register themselves on import */\n  },\n};\n\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n"],"names":["isKantoElement","tag","KANTO_TAG_PREFIX","kanto"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OAiEnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/index.ts"],"sourcesContent":["/**\n * Vue integration for the Kanto elements.\n *\n * There are no per-component wrappers here, and that is the point. Vue 3\n * renders custom elements natively and sets non-primitive bindings as DOM\n * properties, so `<kt-select :options=\"regions\">` already works. A wrapper\n * layer would only be one more thing to keep in sync.\n *\n * What Vue cannot infer on its own is which tags are custom elements, and what\n * they accept. That is what this module supplies.\n *\n * ```ts\n * // vite.config.ts\n * import vue from '@vitejs/plugin-vue';\n * import { isKantoElement } from 'kanto-ds/vue';\n *\n * export default defineConfig({\n *   plugins: [vue({ template: { compilerOptions: { isCustomElement: isKantoElement } } })],\n * });\n * ```\n *\n * ```ts\n * // main.ts\n * import 'kanto-ds/vue'; // registers every element\n * import 'kanto-ds/styles.css';\n * ```\n *\n * Vue is a peer dependency: importing this module in a project without Vue\n * still works, since nothing here is imported from `vue` at runtime.\n */\n// Type-only, so nothing from Vue is pulled in at runtime — but the import is\n// what lets TypeScript resolve the module we augment below.\nimport type { Plugin } from 'vue';\n\nimport '../index.js';\n\nimport type { KtAvatar } from 'kanto-ds';\nimport type { KtBadge } from 'kanto-ds';\nimport type { KtButton } from 'kanto-ds';\nimport type { KtSplitButton } from 'kanto-ds';\nimport type { KtCard } from 'kanto-ds';\nimport type { KtCode } from 'kanto-ds';\nimport type { KtIcon } from 'kanto-ds';\nimport type { KtKbd } from 'kanto-ds';\nimport type { KtDragDrop } from 'kanto-ds';\nimport type { KtForm } from 'kanto-ds';\nimport type { KtInput } from 'kanto-ds';\nimport type { KtInputMenu } from 'kanto-ds';\nimport type { KtLabelInput } from 'kanto-ds';\nimport type { KtSelect } from 'kanto-ds';\nimport type { KtCheckbox } from 'kanto-ds';\nimport type { KtCalendar } from 'kanto-ds';\nimport type { KtDatePicker } from 'kanto-ds';\nimport type { KtRadioGroup } from 'kanto-ds';\nimport type { KtRadio } from 'kanto-ds';\nimport type { KtTextarea } from 'kanto-ds';\nimport type { KtToggle } from 'kanto-ds';\nimport type { KtBreadcrumb } from 'kanto-ds';\nimport type { KtPageHeader } from 'kanto-ds';\nimport type { KtSegmentedControl } from 'kanto-ds';\nimport type { KtSubMenuNavigation } from 'kanto-ds';\nimport type { KtTabs } from 'kanto-ds';\nimport type { KtHeader } from 'kanto-ds';\nimport type { KtToggleButton } from 'kanto-ds';\nimport type { KtToggleButtonGroup } from 'kanto-ds';\nimport type { KtAlert } from 'kanto-ds';\nimport type { KtEmptyState } from 'kanto-ds';\nimport type { KtProgressBar } from 'kanto-ds';\nimport type { KtSkeleton } from 'kanto-ds';\nimport type { KtToast } from 'kanto-ds';\nimport type { KtToastContainer } from 'kanto-ds';\nimport type { KtTooltip } from 'kanto-ds';\nimport type { KtCollapsible } from 'kanto-ds';\nimport type { KtConfirmDialog } from 'kanto-ds';\nimport type { KtDropdown } from 'kanto-ds';\nimport type { KtModal } from 'kanto-ds';\nimport type { KtSidePanel } from 'kanto-ds';\nimport type { KtChart } from 'kanto-ds';\nimport type { KtMeter } from 'kanto-ds';\nimport type { KtPagination } from 'kanto-ds';\nimport type { KtStat } from 'kanto-ds';\nimport type { KtTable } from 'kanto-ds';\nimport type { KtTimeline, KtTimelineItem } from 'kanto-ds';\n\n/**\n * True for any Kanto custom element.\n *\n * Pass it as `compilerOptions.isCustomElement` so the Vue compiler stops\n * trying to resolve `kt-*` tags as components.\n */\nexport function isKantoElement(tag: string): boolean {\n  return tag.startsWith('kt-');\n}\n\n/** Every element's tag name, for anyone building their own predicate. */\nexport const KANTO_TAG_PREFIX = 'kt-';\n\n/**\n * What a Kanto element accepts in a template: its own properties, plus the\n * attributes and listeners any element takes.\n */\ntype KtProps<T> = Partial<T> &\n  Record<`on${string}`, unknown> & { class?: unknown; style?: unknown };\n\ndeclare module 'vue' {\n  interface GlobalComponents {\n    'kt-avatar': KtProps<KtAvatar>;\n    'kt-badge': KtProps<KtBadge>;\n    'kt-button': KtProps<KtButton>;\n    'kt-split-button': KtProps<KtSplitButton>;\n    'kt-card': KtProps<KtCard>;\n    'kt-code': KtProps<KtCode>;\n    'kt-icon': KtProps<KtIcon>;\n    'kt-kbd': KtProps<KtKbd>;\n    'kt-drag-drop': KtProps<KtDragDrop>;\n    'kt-form': KtProps<KtForm>;\n    'kt-input': KtProps<KtInput>;\n    'kt-input-menu': KtProps<KtInputMenu>;\n    'kt-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\n    'kt-calendar': KtProps<KtCalendar>;\n    'kt-date-picker': KtProps<KtDatePicker>;\n    'kt-radio-group': KtProps<KtRadioGroup>;\n    'kt-radio': KtProps<KtRadio>;\n    'kt-textarea': KtProps<KtTextarea>;\n    'kt-toggle': KtProps<KtToggle>;\n    'kt-breadcrumb': KtProps<KtBreadcrumb>;\n    'kt-page-header': KtProps<KtPageHeader>;\n    'kt-segmented-control': KtProps<KtSegmentedControl>;\n    'kt-sub-menu-navigation': KtProps<KtSubMenuNavigation>;\n    'kt-tabs': KtProps<KtTabs>;\n    'kt-header': KtProps<KtHeader>;\n    'kt-toggle-button': KtProps<KtToggleButton>;\n    'kt-toggle-button-group': KtProps<KtToggleButtonGroup>;\n    'kt-alert': KtProps<KtAlert>;\n    'kt-empty-state': KtProps<KtEmptyState>;\n    'kt-progress-bar': KtProps<KtProgressBar>;\n    'kt-skeleton': KtProps<KtSkeleton>;\n    'kt-toast': KtProps<KtToast>;\n    'kt-toast-container': KtProps<KtToastContainer>;\n    'kt-tooltip': KtProps<KtTooltip>;\n    'kt-collapsible': KtProps<KtCollapsible>;\n    'kt-confirm-dialog': KtProps<KtConfirmDialog>;\n    'kt-dropdown': KtProps<KtDropdown>;\n    'kt-modal': KtProps<KtModal>;\n    'kt-side-panel': KtProps<KtSidePanel>;\n    'kt-chart': KtProps<KtChart>;\n    'kt-meter': KtProps<KtMeter>;\n    'kt-pagination': KtProps<KtPagination>;\n    'kt-stat': KtProps<KtStat>;\n    'kt-table': KtProps<KtTable>;\n    'kt-timeline': KtProps<KtTimeline>;\n    'kt-timeline-item': KtProps<KtTimelineItem>;\n  }\n}\n\n/**\n * A no-op plugin, for apps that would rather write `app.use(kanto)` than a\n * bare side-effect import. Importing this module already registers every\n * element; this only makes that visible in `main.ts`.\n */\nexport const kanto: Plugin = {\n  install() {\n    /* the elements register themselves on import */\n  },\n};\n\nexport { toaster } from '../components/feedback/kt-toast-container/toaster.js';\n"],"names":["isKantoElement","tag","KANTO_TAG_PREFIX","kanto"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OAmEnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}