kanto-ds 1.5.2 → 1.6.0

package/dist/tokens/theme-light.css

@@ -14,7 +14,8 @@
  */
 
 :root[data-theme='light'],
-[data-theme='light'] {
+[data-theme='light'],
+[data-theme='light'] [data-accent] {
   color-scheme: light;
 
   --color-white: rgba(255, 255, 255, 1);
@@ -22,32 +23,66 @@
   /* Darker than the base colours, which stay tuned for fills. Success,
      info and warning turn a few degrees of hue for chroma: a dark enough
      amber is brown, a dark enough orange is still orange. */
-  --color-primary-text: #4f30ef;
+  --color-primary-text: var(--accent-text-light, #4f30ef);
   --color-danger-text: #b30436;
   --color-info-text: #0260a2;
   --color-warning-text: #9e4502;
   --color-success-text: #026f2a;
 
-  --color-text-100: rgba(28, 28, 30, 1);
-  --color-text-400: rgba(80, 80, 90, 1);
-  --color-text-500: rgba(110, 110, 120, 1);
-  --color-text-600: rgba(130, 130, 140, 1);
-  --color-text-700: rgba(155, 155, 165, 1);
-  --color-text-800: rgba(180, 180, 190, 1);
-  --color-text-900: rgba(220, 220, 225, 1);
+  --color-text-100: oklch(
+    0.2273 calc(0.0038 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.1)
+  );
+  --color-text-400: oklch(
+    0.4349 calc(0.0163 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.7)
+  );
+  --color-text-500: oklch(
+    0.5416 calc(0.0154 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.9)
+  );
+  --color-text-600: oklch(
+    0.6099 calc(0.015 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.9)
+  );
+  --color-text-700: oklch(
+    0.6927 calc(0.0145 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8)
+  );
+  --color-text-800: oklch(
+    0.773 calc(0.0141 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.1)
+  );
+  --color-text-900: oklch(
+    0.8959 calc(0.0068 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+  );
 
   /* The ramp inverts: "8" stays the extreme, "24" stays the most elevated. */
   --color-dark-8: rgba(255, 255, 255, 1);
-  --color-dark-12: rgba(250, 250, 252, 1);
-  --color-dark-14: rgba(245, 245, 247, 1);
-  --color-dark-15: rgba(242, 242, 245, 1);
-  --color-dark-16: rgba(238, 238, 241, 1);
-  --color-dark-18: rgba(232, 232, 236, 1);
-  --color-dark-19: rgba(228, 228, 233, 1);
-  --color-dark-20: rgba(222, 222, 228, 1);
-  --color-dark-22: rgba(215, 215, 222, 1);
-  --color-dark-23: rgba(210, 210, 218, 1);
-  --color-dark-24: rgba(205, 205, 212, 1);
+  --color-dark-12: oklch(
+    0.9857 calc(0.0026 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.4)
+  );
+  --color-dark-14: oklch(
+    0.9707 calc(0.0027 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.4)
+  );
+  --color-dark-15: oklch(
+    0.962 calc(0.004 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+  );
+  --color-dark-16: oklch(
+    0.95 calc(0.004 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+  );
+  --color-dark-18: oklch(
+    0.9321 calc(0.0054 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+  );
+  --color-dark-19: oklch(
+    0.9203 calc(0.0067 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+  );
+  --color-dark-20: oklch(
+    0.9023 calc(0.0081 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+  );
+  --color-dark-22: oklch(
+    0.8812 calc(0.0095 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+  );
+  --color-dark-23: oklch(
+    0.8661 calc(0.0109 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+  );
+  --color-dark-24: oklch(
+    0.8504 calc(0.0096 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+  );
 
   --color-navigation-top-icon: #1c1c1e;
   --color-navigation-icon: #505050;
@@ -86,13 +121,22 @@
 
   /* Inverted really is inverted: a dark bubble on a light page. */
   --surface-inverted: rgba(29, 28, 34, 1);
+
+  /* Light, a darker step reads as a grey smudge and fades whatever sits on it,
+     and a white one is lost on a near-white page: white, then, with an edge
+     and the system's one soft shadow besides the toasts'. */
+  --surface-popover: var(--color-dark-8);
+  --border-popover: var(--color-dark-20);
+  --shadow-popover: 0 8px 24px rgba(28, 28, 30, 0.12), 0 1px 3px rgba(28, 28, 30, 0.08);
+  --divider-popover: var(--color-dark-20);
   --text-inverted: rgba(244, 244, 245, 1);
 }
 
 /* data-theme="auto" defers to the OS setting. */
 @media (prefers-color-scheme: light) {
   :root[data-theme='auto'],
-  [data-theme='auto'] {
+  [data-theme='auto'],
+  [data-theme='auto'] [data-accent] {
     color-scheme: light;
 
     --color-white: rgba(255, 255, 255, 1);
@@ -100,31 +144,65 @@
     /* Darker than the base colours, which stay tuned for fills. Success,
        info and warning turn a few degrees of hue for chroma: a dark enough
        amber is brown, a dark enough orange is still orange. */
-    --color-primary-text: #4f30ef;
+    --color-primary-text: var(--accent-text-light, #4f30ef);
     --color-danger-text: #b30436;
     --color-info-text: #0260a2;
     --color-warning-text: #9e4502;
     --color-success-text: #026f2a;
 
-    --color-text-100: rgba(28, 28, 30, 1);
-    --color-text-400: rgba(80, 80, 90, 1);
-    --color-text-500: rgba(110, 110, 120, 1);
-    --color-text-600: rgba(130, 130, 140, 1);
-    --color-text-700: rgba(155, 155, 165, 1);
-    --color-text-800: rgba(180, 180, 190, 1);
-    --color-text-900: rgba(220, 220, 225, 1);
+    --color-text-100: oklch(
+      0.2273 calc(0.0038 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.1)
+    );
+    --color-text-400: oklch(
+      0.4349 calc(0.0163 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.7)
+    );
+    --color-text-500: oklch(
+      0.5416 calc(0.0154 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.9)
+    );
+    --color-text-600: oklch(
+      0.6099 calc(0.015 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 7.9)
+    );
+    --color-text-700: oklch(
+      0.6927 calc(0.0145 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8)
+    );
+    --color-text-800: oklch(
+      0.773 calc(0.0141 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.1)
+    );
+    --color-text-900: oklch(
+      0.8959 calc(0.0068 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+    );
 
     --color-dark-8: rgba(255, 255, 255, 1);
-    --color-dark-12: rgba(250, 250, 252, 1);
-    --color-dark-14: rgba(245, 245, 247, 1);
-    --color-dark-15: rgba(242, 242, 245, 1);
-    --color-dark-16: rgba(238, 238, 241, 1);
-    --color-dark-18: rgba(232, 232, 236, 1);
-    --color-dark-19: rgba(228, 228, 233, 1);
-    --color-dark-20: rgba(222, 222, 228, 1);
-    --color-dark-22: rgba(215, 215, 222, 1);
-    --color-dark-23: rgba(210, 210, 218, 1);
-    --color-dark-24: rgba(205, 205, 212, 1);
+    --color-dark-12: oklch(
+      0.9857 calc(0.0026 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.4)
+    );
+    --color-dark-14: oklch(
+      0.9707 calc(0.0027 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.4)
+    );
+    --color-dark-15: oklch(
+      0.962 calc(0.004 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+    );
+    --color-dark-16: oklch(
+      0.95 calc(0.004 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+    );
+    --color-dark-18: oklch(
+      0.9321 calc(0.0054 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+    );
+    --color-dark-19: oklch(
+      0.9203 calc(0.0067 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.3)
+    );
+    --color-dark-20: oklch(
+      0.9023 calc(0.0081 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+    );
+    --color-dark-22: oklch(
+      0.8812 calc(0.0095 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+    );
+    --color-dark-23: oklch(
+      0.8661 calc(0.0109 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+    );
+    --color-dark-24: oklch(
+      0.8504 calc(0.0096 * var(--neutral-chroma, 1)) calc(var(--neutral-hue, 278) + 8.2)
+    );
 
     --color-navigation-top-icon: #1c1c1e;
     --color-navigation-icon: #505050;
@@ -157,6 +235,14 @@
     --border-code: var(--color-dark-20);
 
     --surface-inverted: rgba(29, 28, 34, 1);
+
+    /* Light, a darker step reads as a grey smudge and fades whatever sits on it,
+       and a white one is lost on a near-white page: white, then, with an edge
+       and the system's one soft shadow besides the toasts'. */
+    --surface-popover: var(--color-dark-8);
+    --border-popover: var(--color-dark-20);
+    --shadow-popover: 0 8px 24px rgba(28, 28, 30, 0.12), 0 1px 3px rgba(28, 28, 30, 0.08);
+    --divider-popover: var(--color-dark-20);
     --text-inverted: rgba(244, 244, 245, 1);
   }
 }

package/dist/tokens/typography.css

@@ -12,29 +12,36 @@
  * gets a sensible system face.
  */
 
-:root {
+:root,
+[data-radius],
+[data-density],
+[data-text-size],
+[data-font] {
   /* === FAMILIES === */
-  --font-family-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
-  --font-family-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-family-display: var(--font-display, 'Manrope', 'Segoe UI', system-ui, sans-serif);
+  --font-family-body: var(--font-body, 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif);
   --font-family-code: 'Source Code Pro', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
 
   /* === TITLES (Manrope) === */
-  --font-title-studio: 400 48px/58px var(--font-family-display);
-  --font-title-h1: 600 36px/43px var(--font-family-display);
-  --font-title-h4: 400 24px/29px var(--font-family-display);
-  --font-title-h6: 600 18px var(--font-family-display);
+  --font-title-studio: 400 calc(48px * var(--text-scale, 1)) / calc(58px * var(--text-scale, 1))
+    var(--font-family-display);
+  --font-title-h1: 600 calc(36px * var(--text-scale, 1)) / calc(43px * var(--text-scale, 1))
+    var(--font-family-display);
+  --font-title-h4: 400 calc(24px * var(--text-scale, 1)) / calc(29px * var(--text-scale, 1))
+    var(--font-family-display);
+  --font-title-h6: 600 calc(18px * var(--text-scale, 1)) var(--font-family-display);
 
   /* Overline uses the body face despite living with the titles. */
-  --font-title-overline: 600 10px var(--font-family-body);
+  --font-title-overline: 600 calc(10px * var(--text-scale, 1)) var(--font-family-body);
 
   /* === BODY & UI (Mulish) === */
-  --font-normal-regular: 400 14px var(--font-family-body);
-  --font-normal-medium: 500 14px var(--font-family-body);
-  --font-normal-small: 400 12px var(--font-family-body);
-  --font-input: 400 14px var(--font-family-body);
+  --font-normal-regular: 400 calc(14px * var(--text-scale, 1)) var(--font-family-body);
+  --font-normal-medium: 500 calc(14px * var(--text-scale, 1)) var(--font-family-body);
+  --font-normal-small: 400 calc(12px * var(--text-scale, 1)) var(--font-family-body);
+  --font-input: 400 calc(14px * var(--text-scale, 1)) var(--font-family-body);
 
   /* === CODE === */
-  --font-code-regular: 400 14px var(--font-family-code);
+  --font-code-regular: 400 calc(14px * var(--text-scale, 1)) var(--font-family-code);
 
   /* === TRACKING === */
   --letter-spacing-overline: 2px;

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

@@ -91,8 +91,33 @@
     },
     { "name": "::part(input)", "description": "The native checkbox." },
     { "name": "::part(box)", "description": "The drawn box." },
-    { "name": "::part(trigger)", "description": "The field." },
+    { "name": "::part(field)", "description": "The field." },
+    {
+      "name": "::part(segment)",
+      "description": "A day, month or year segment."
+    },
+    {
+      "name": "::part(trigger)",
+      "description": "The calendar button, with `calendar`."
+    },
+    {
+      "name": "::part(panel)",
+      "description": "The calendar popup, with `calendar`."
+    },
+    { "name": "::part(field)", "description": "The field." },
+    {
+      "name": "::part(input)",
+      "description": "The text the date is typed into."
+    },
+    {
+      "name": "::part(trigger)",
+      "description": "The button that opens the calendar."
+    },
     { "name": "::part(panel)", "description": "The calendar popup." },
+    {
+      "name": "::part(presets)",
+      "description": "The column of ready-made periods, with `range`."
+    },
     {
       "name": "::part(calendar)",
       "description": "The `<kt-calendar>` inside it."
@@ -111,6 +136,11 @@
     { "name": "::part(popup)", "description": "The option list." },
     { "name": "::part(option)", "description": "An option row." },
     { "name": "::part(label)", "description": "The `<label>`." },
+    { "name": "::part(control)", "description": "The field." },
+    { "name": "::part(chips)", "description": "The row of chips." },
+    { "name": "::part(input)", "description": "The native `<input>`." },
+    { "name": "::part(popup)", "description": "The option list." },
+    { "name": "::part(option)", "description": "An option row." },
     { "name": "::part(base)", "description": "The `role=\"radio\"` row." },
     { "name": "::part(circle)", "description": "The drawn circle." },
     {
@@ -126,6 +156,11 @@
     { "name": "::part(base)", "description": "The field container." },
     { "name": "::part(control)", "description": "The native `<textarea>`." },
     { "name": "::part(counter)", "description": "The character counter." },
+    { "name": "::part(field)", "description": "The field." },
+    {
+      "name": "::part(segment)",
+      "description": "An hour, minute, second or AM/PM segment."
+    },
     {
       "name": "::part(base)",
       "description": "The button carrying `role=\"switch\"`."

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

@@ -667,7 +667,7 @@
     },
     {
       "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.",
+      "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 title — \"September 2026\" — opens one panel: a scrolling list of years\nbeside the twelve months of the one chosen. A year is a click or four typed\ndigits away, then its month a second click, whatever the distance.\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 year list: arrows, Page Up/Down by ten,\nHome/End, or type the year; Enter or Tab on to the months. In the months:\narrows, Enter to choose. Escape returns 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",
@@ -694,6 +694,11 @@
           "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": "months",
+          "description": "How many months the day view shows side by side: 1, or 2 for a period.",
+          "values": [{ "name": "1" }, { "name": "2" }]
+        },
         {
           "name": "label",
           "description": "Accessible name of the calendar. Defaults to the strings registry.",
@@ -734,9 +739,21 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-date-input",
+      "description": "A date typed into its parts: day, month and year, each its own segment.\n\nThe segments come in the order the reader's language writes a date —\n`25/09/2026` in London, `09/25/2026` in New York, `25.09.2026` in Berlin —\nand the focus moves on as each fills, so a date is eight keystrokes. The\narrows step a segment, a day never past its month's end. The value is ISO\n8601, `2026-09-25`, and `null` until the date is complete.\n\nWith `calendar`, a button at the end opens a `<kt-calendar>` to pick from.\n---\n\n\n### **Events:**\n - **kt-change** - The date became complete, changed, or stopped being one. `detail: { value }` — the ISO date or `null`.\n\n### **Methods:**\n \n\n### **CSS Parts:**\n - **field** - The field.\n- **segment** - A day, month or year segment.\n- **trigger** - The calendar button, with `calendar`.\n- **panel** - The calendar popup, with `calendar`.",
+      "attributes": [
+        {
+          "name": "calendar",
+          "description": "Adds a button that opens a calendar to pick the date from.",
+          "values": []
+        }
+      ],
+      "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.",
+      "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 field takes a date typed the way the reader writes it — `25/09/2026` in\nLondon, `9/25/2026` in New York, `25 sept.` in Paris, ISO anywhere — on Enter\nor when it is left. What does not read as a date is flagged, and the value\nit had is kept.\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 - **field** - The field.\n- **input** - The text the date is typed into.\n- **trigger** - The button that opens the calendar.\n- **panel** - The calendar popup.\n- **presets** - The column of ready-made periods, with `range`.\n- **calendar** - The `<kt-calendar>` inside it.",
       "attributes": [
         {
           "name": "value",
@@ -940,6 +957,32 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-multi-select",
+      "description": "Several choices from a list: type to narrow it, pick as many as you need.\n\nEach choice shows in the field as a removable chip. The field keeps to one\nline — the chips that do not fit collapse into a \"+3\" — so it sits in a row\nof filters without changing its height; the open list shows everything,\nchosen or not.\n---\n\n\n### **Events:**\n - **kt-change** - The choice changed. `detail: { value, options }`.\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- **formStateRestoreCallback(state: _string | FormData | null_): _void_** - Called by the platform when the browser restores a session.\n\n### **CSS Parts:**\n - **control** - The field.\n- **chips** - The row of chips.\n- **input** - The native `<input>`.\n- **popup** - The option list.\n- **option** - An option row.",
+      "attributes": [
+        { "name": "placeholder", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "disabled", "values": [] },
+        {
+          "name": "required",
+          "description": "At least one value must be chosen.",
+          "values": []
+        },
+        { "name": "error", "values": [] },
+        {
+          "name": "label",
+          "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
+          "values": []
+        },
+        {
+          "name": "empty-text",
+          "description": "Shown in the list when no option matches.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "kt-radio",
       "description": "One option of a `<kt-radio-group>`.\n\nIt draws itself and carries `role=\"radio\"`; the group owns the selection,\nthe tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\nuseful.\n---\n\n\n### **Slots:**\n - _default_ - The label.\n\n### **CSS Parts:**\n - **base** - The `role=\"radio\"` row.\n- **circle** - The drawn circle.",
@@ -1060,6 +1103,28 @@
       ],
       "references": []
     },
+    {
+      "name": "kt-time-input",
+      "description": "A time of day typed into its parts: hours, minutes and, if asked, seconds.\n\nThe clock is the reader's — `14:30` in London, `2:30 PM` in New York — or\nthe one `hour-cycle` names. Whatever the clock shows, the value is the\n24-hour time HTML uses, `14:30` or `14:30:00`, and `null` until complete.\nThe arrows step a segment, the minutes by `step`.\n---\n\n\n### **Events:**\n - **kt-change** - The time became complete, changed, or stopped being one. `detail: { value }` — `HH:MM`, `HH:MM:SS` or `null`.\n\n### **Methods:**\n \n\n### **CSS Parts:**\n - **field** - The field.\n- **segment** - An hour, minute, second or AM/PM segment.",
+      "attributes": [
+        {
+          "name": "seconds",
+          "description": "Shows a seconds segment, and puts seconds in the value.",
+          "values": []
+        },
+        {
+          "name": "hour-cycle",
+          "description": "The clock to show: `h12` with AM/PM, `h23` without. Empty: the language's.",
+          "values": [{ "name": "KtHourCycle" }, { "name": "''" }]
+        },
+        {
+          "name": "step",
+          "description": "How many minutes the arrows step by.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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### **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.",

package/dist/vue/index.d.ts

@@ -42,11 +42,14 @@ import type { KtDragDrop } from 'kanto-ds';
 import type { KtForm } from 'kanto-ds';
 import type { KtInput } from 'kanto-ds';
 import type { KtInputMenu } from 'kanto-ds';
+import type { KtMultiSelect } 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 { KtDateInput } from 'kanto-ds';
 import type { KtDatePicker } from 'kanto-ds';
+import type { KtTimeInput } from 'kanto-ds';
 import type { KtRadioGroup } from 'kanto-ds';
 import type { KtRadio } from 'kanto-ds';
 import type { KtTextarea } from 'kanto-ds';
@@ -108,11 +111,14 @@ declare module 'vue' {
         'kt-form': KtProps<KtForm>;
         'kt-input': KtProps<KtInput>;
         'kt-input-menu': KtProps<KtInputMenu>;
+        'kt-multi-select': KtProps<KtMultiSelect>;
         'kt-label-input': KtProps<KtLabelInput>;
         'kt-select': KtProps<KtSelect>;
         'kt-checkbox': KtProps<KtCheckbox>;
         'kt-calendar': KtProps<KtCalendar>;
+        'kt-date-input': KtProps<KtDateInput>;
         'kt-date-picker': KtProps<KtDatePicker>;
+        'kt-time-input': KtProps<KtTimeInput>;
         'kt-radio-group': KtProps<KtRadioGroup>;
         'kt-radio': KtProps<KtRadio>;
         'kt-textarea': KtProps<KtTextarea>;

package/dist/vue/index.js

@@ -7,16 +7,19 @@ 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 "../chunks/kt-calendar-CtwOby1R.js";
+import "../components/forms/kt-date-input/kt-date-input.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";
 import "../components/forms/kt-input-menu/kt-input-menu.js";
+import "../components/forms/kt-multi-select/kt-multi-select.js";
 import "../components/forms/kt-label-input/kt-label-input.js";
 import "../components/forms/kt-radio-group/kt-radio-group.js";
 import "../components/forms/kt-select/kt-select.js";
 import "../components/forms/kt-textarea/kt-textarea.js";
+import "../components/forms/kt-time-input/kt-time-input.js";
 import "../components/forms/kt-toggle/kt-toggle.js";
 import "../components/navigation/kt-breadcrumb/kt-breadcrumb.js";
 import "../components/navigation/kt-page-header/kt-page-header.js";
@@ -32,7 +35,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 Z } from "../chunks/toaster-PmdKSV5x.js";
+import { t as ot } 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";
@@ -45,17 +48,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 Q(t) {
+function V(t) {
   return t.startsWith("kt-");
 }
-const S = "kt-", U = {
+const Y = "kt-", Z = {
   install() {
   }
 };
 export {
-  S as KANTO_TAG_PREFIX,
-  Q as isKantoElement,
-  U as kanto,
-  Z as toaster
+  Y as KANTO_TAG_PREFIX,
+  V as isKantoElement,
+  Z as kanto,
+  ot 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 { 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;"}
+{"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 { KtMultiSelect } 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 { KtDateInput } from 'kanto-ds';\nimport type { KtDatePicker } from 'kanto-ds';\nimport type { KtTimeInput } 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-multi-select': KtProps<KtMultiSelect>;\n    'kt-label-input': KtProps<KtLabelInput>;\n    'kt-select': KtProps<KtSelect>;\n    'kt-checkbox': KtProps<KtCheckbox>;\n    'kt-calendar': KtProps<KtCalendar>;\n    'kt-date-input': KtProps<KtDateInput>;\n    'kt-date-picker': KtProps<KtDatePicker>;\n    'kt-time-input': KtProps<KtTimeInput>;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OAsEnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}