kanto-ds 1.3.0 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/README.md +10 -10
  2. package/dist/chunks/defaults-CFrjqae2.js +59 -0
  3. package/dist/chunks/{defaults-DKzFsNbv.js.map → defaults-CFrjqae2.js.map} +1 -1
  4. package/dist/chunks/events-r51msXNf.js +22 -0
  5. package/dist/chunks/{events-Bjl5Zmmq.js.map → events-r51msXNf.js.map} +1 -1
  6. package/dist/chunks/floating-B7_Dahpn.js +54 -0
  7. package/dist/chunks/floating-B7_Dahpn.js.map +1 -0
  8. package/dist/chunks/{form-control-CxjBTt1c.js → form-control-B74_EHtG.js} +7 -7
  9. package/dist/chunks/form-control-B74_EHtG.js.map +1 -0
  10. package/dist/chunks/{index-fzPIgxe2.js → index-STEEvEP7.js} +33 -16
  11. package/dist/chunks/index-STEEvEP7.js.map +1 -0
  12. package/dist/chunks/kt-calendar-B_hFdD9V.js +640 -0
  13. package/dist/chunks/kt-calendar-B_hFdD9V.js.map +1 -0
  14. package/dist/chunks/{kt-element-mdd5cXZX.js → kt-element-Djx2JcGl.js} +2 -2
  15. package/dist/chunks/{kt-element-mdd5cXZX.js.map → kt-element-Djx2JcGl.js.map} +1 -1
  16. package/dist/chunks/{listbox-Sm3nvsC6.js → listbox-llcUu_V-.js} +18 -14
  17. package/dist/chunks/{listbox-Sm3nvsC6.js.map → listbox-llcUu_V-.js.map} +1 -1
  18. package/dist/chunks/locale-C5xLkGx5.js +14 -0
  19. package/dist/chunks/locale-C5xLkGx5.js.map +1 -0
  20. package/dist/chunks/position-Cx_ZH5zh.js +39 -0
  21. package/dist/chunks/position-Cx_ZH5zh.js.map +1 -0
  22. package/dist/components/core/kt-avatar/kt-avatar.js +2 -2
  23. package/dist/components/core/kt-badge/kt-badge.js +3 -3
  24. package/dist/components/core/kt-button/kt-button.js +1 -1
  25. package/dist/components/core/kt-card/kt-card.js +2 -2
  26. package/dist/components/core/kt-code/kt-code.js +3 -3
  27. package/dist/components/core/kt-icon/kt-icon.js +2 -2
  28. package/dist/components/core/kt-kbd/kt-kbd.js +1 -1
  29. package/dist/components/core/kt-split-button/kt-split-button.js +4 -4
  30. package/dist/components/data/kt-chart/kt-chart.js +52 -52
  31. package/dist/components/data/kt-chart/kt-chart.js.map +1 -1
  32. package/dist/components/data/kt-meter/kt-meter.js +1 -1
  33. package/dist/components/data/kt-pagination/kt-pagination.js +3 -3
  34. package/dist/components/data/kt-stat/kt-stat.js +1 -1
  35. package/dist/components/data/kt-table/kt-table.d.ts +53 -3
  36. package/dist/components/data/kt-table/kt-table.js +286 -131
  37. package/dist/components/data/kt-table/kt-table.js.map +1 -1
  38. package/dist/components/data/kt-table/window.d.ts +19 -0
  39. package/dist/components/data/kt-timeline/kt-timeline.js +1 -1
  40. package/dist/components/feedback/kt-alert/kt-alert.js +3 -3
  41. package/dist/components/feedback/kt-empty-state/kt-empty-state.js +1 -1
  42. package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js +10 -10
  43. package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js.map +1 -1
  44. package/dist/components/feedback/kt-skeleton/kt-skeleton.js +1 -1
  45. package/dist/components/feedback/kt-toast/kt-toast.js +58 -42
  46. package/dist/components/feedback/kt-toast/kt-toast.js.map +1 -1
  47. package/dist/components/feedback/kt-toast-container/kt-toast-container.js +1 -1
  48. package/dist/components/feedback/kt-tooltip/kt-tooltip.d.ts +20 -0
  49. package/dist/components/feedback/kt-tooltip/kt-tooltip.js +95 -51
  50. package/dist/components/feedback/kt-tooltip/kt-tooltip.js.map +1 -1
  51. package/dist/components/forms/kt-calendar/kt-calendar.d.ts +96 -0
  52. package/dist/components/forms/kt-calendar/kt-calendar.js +13 -0
  53. package/dist/components/forms/kt-calendar/kt-calendar.js.map +1 -0
  54. package/dist/components/forms/kt-checkbox/kt-checkbox.d.ts +75 -0
  55. package/dist/components/forms/kt-checkbox/kt-checkbox.js +212 -0
  56. package/dist/components/forms/kt-checkbox/kt-checkbox.js.map +1 -0
  57. package/dist/components/forms/kt-date-picker/kt-date-picker.d.ts +105 -0
  58. package/dist/components/forms/kt-date-picker/kt-date-picker.js +382 -0
  59. package/dist/components/forms/kt-date-picker/kt-date-picker.js.map +1 -0
  60. package/dist/components/forms/kt-drag-drop/kt-drag-drop.d.ts +9 -0
  61. package/dist/components/forms/kt-drag-drop/kt-drag-drop.js +36 -22
  62. package/dist/components/forms/kt-drag-drop/kt-drag-drop.js.map +1 -1
  63. package/dist/components/forms/kt-form/kt-form.js +11 -10
  64. package/dist/components/forms/kt-form/kt-form.js.map +1 -1
  65. package/dist/components/forms/kt-input/kt-input.d.ts +37 -1
  66. package/dist/components/forms/kt-input/kt-input.js +380 -194
  67. package/dist/components/forms/kt-input/kt-input.js.map +1 -1
  68. package/dist/components/forms/kt-input-menu/kt-input-menu.d.ts +13 -0
  69. package/dist/components/forms/kt-input-menu/kt-input-menu.js +73 -42
  70. package/dist/components/forms/kt-input-menu/kt-input-menu.js.map +1 -1
  71. package/dist/components/forms/kt-label-input/kt-label-input.js +1 -1
  72. package/dist/components/forms/kt-radio-group/kt-radio-group.d.ts +112 -0
  73. package/dist/components/forms/kt-radio-group/kt-radio-group.js +279 -0
  74. package/dist/components/forms/kt-radio-group/kt-radio-group.js.map +1 -0
  75. package/dist/components/forms/kt-select/kt-select.d.ts +13 -0
  76. package/dist/components/forms/kt-select/kt-select.js +87 -56
  77. package/dist/components/forms/kt-select/kt-select.js.map +1 -1
  78. package/dist/components/forms/kt-textarea/kt-textarea.d.ts +9 -0
  79. package/dist/components/forms/kt-textarea/kt-textarea.js +28 -14
  80. package/dist/components/forms/kt-textarea/kt-textarea.js.map +1 -1
  81. package/dist/components/forms/kt-toggle/kt-toggle.d.ts +9 -0
  82. package/dist/components/forms/kt-toggle/kt-toggle.js +43 -29
  83. package/dist/components/forms/kt-toggle/kt-toggle.js.map +1 -1
  84. package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js +3 -3
  85. package/dist/components/navigation/kt-header/kt-header.js +3 -3
  86. package/dist/components/navigation/kt-page-header/kt-page-header.js +1 -1
  87. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.d.ts +9 -0
  88. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js +40 -22
  89. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js.map +1 -1
  90. package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js +3 -3
  91. package/dist/components/navigation/kt-tabs/kt-tabs.js +2 -2
  92. package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js +2 -2
  93. package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js +13 -7
  94. package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js.map +1 -1
  95. package/dist/components/overlays/kt-collapsible/kt-collapsible.js +2 -2
  96. package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js +3 -3
  97. package/dist/components/overlays/kt-dropdown/kt-dropdown.d.ts +7 -5
  98. package/dist/components/overlays/kt-dropdown/kt-dropdown.js +67 -57
  99. package/dist/components/overlays/kt-dropdown/kt-dropdown.js.map +1 -1
  100. package/dist/components/overlays/kt-modal/kt-modal.js +3 -3
  101. package/dist/components/overlays/kt-side-panel/kt-side-panel.js +3 -3
  102. package/dist/custom-elements.json +3526 -741
  103. package/dist/icons/defaults.d.ts +2 -0
  104. package/dist/icons/index.js +1 -1
  105. package/dist/index.d.ts +8 -0
  106. package/dist/index.js +99 -90
  107. package/dist/index.js.map +1 -1
  108. package/dist/internal/countries.d.ts +24 -9
  109. package/dist/internal/date.d.ts +53 -0
  110. package/dist/internal/events.d.ts +5 -0
  111. package/dist/internal/floating.d.ts +48 -0
  112. package/dist/internal/form-control.d.ts +5 -1
  113. package/dist/internal/locale.d.ts +15 -0
  114. package/dist/internal/position.d.ts +27 -0
  115. package/dist/internal/strings.d.ts +25 -0
  116. package/dist/react/index.d.ts +25 -0
  117. package/dist/react/index.js +189 -156
  118. package/dist/react/index.js.map +1 -1
  119. package/dist/react/jsx.d.ts +22 -1
  120. package/dist/strings/index.js +1 -1
  121. package/dist/tokens/base.css +5 -0
  122. package/dist/tokens/responsive.css +1 -0
  123. package/dist/tokens/spacing.css +1 -0
  124. package/dist/vscode.css-custom-data.json +20 -0
  125. package/dist/vscode.html-custom-data.json +221 -9
  126. package/dist/vue/index.d.ts +10 -0
  127. package/dist/vue/index.js +11 -7
  128. package/dist/vue/index.js.map +1 -1
  129. package/dist/web-types.json +514 -12
  130. package/package.json +18 -1
  131. package/dist/chunks/defaults-DKzFsNbv.js +0 -57
  132. package/dist/chunks/events-Bjl5Zmmq.js +0 -18
  133. package/dist/chunks/form-control-CxjBTt1c.js.map +0 -1
  134. package/dist/chunks/index-fzPIgxe2.js.map +0 -1
@@ -19,7 +19,7 @@
19
19
  * are for.
20
20
  */
21
21
  import type * as React from 'react';
22
- import type { KtAvatar, KtBadge, KtButton, KtSplitButton, KtCard, KtCode, KtIcon, KtKbd, KtForm, KtInput, KtTextarea, KtLabelInput, KtToggle, KtSelect, 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';
22
+ 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';
23
23
  /** The `on<event>` props React 19 turns into listeners, typed by their detail. */
24
24
  type Handlers<E> = {
25
25
  [K in keyof E & string as `on${K}`]?: (event: CustomEvent<E[K]>) => void;
@@ -83,6 +83,27 @@ declare module 'react' {
83
83
  checked: boolean;
84
84
  };
85
85
  }>;
86
+ 'kt-calendar': KtProps<KtCalendar, {
87
+ 'kt-change': {
88
+ value: string;
89
+ };
90
+ }>;
91
+ 'kt-date-picker': KtProps<KtDatePicker, {
92
+ 'kt-change': {
93
+ value: string | null;
94
+ };
95
+ }>;
96
+ 'kt-checkbox': KtProps<KtCheckbox, {
97
+ 'kt-change': {
98
+ checked: boolean;
99
+ };
100
+ }>;
101
+ 'kt-radio-group': KtProps<KtRadioGroup, {
102
+ 'kt-change': {
103
+ value: string | null;
104
+ };
105
+ }>;
106
+ 'kt-radio': KtProps<KtRadio>;
86
107
  'kt-select': KtProps<KtSelect, {
87
108
  'kt-change': {
88
109
  value: string | number | null;
@@ -1,4 +1,4 @@
1
- import { d as r, s as a, r as e, a as g } from "../chunks/index-fzPIgxe2.js";
1
+ import { d as r, s as a, r as e, a as g } from "../chunks/index-STEEvEP7.js";
2
2
  export {
3
3
  r as defaultStrings,
4
4
  a as getStrings,
@@ -89,11 +89,14 @@ pre {
89
89
  kt-badge,
90
90
  kt-breadcrumb,
91
91
  kt-button,
92
+ kt-calendar,
92
93
  kt-card,
93
94
  kt-chart,
95
+ kt-checkbox,
94
96
  kt-code,
95
97
  kt-collapsible,
96
98
  kt-confirm-dialog,
99
+ kt-date-picker,
97
100
  kt-drag-drop,
98
101
  kt-dropdown,
99
102
  kt-empty-state,
@@ -109,6 +112,8 @@ pre {
109
112
  kt-page-header,
110
113
  kt-pagination,
111
114
  kt-progress-bar,
115
+ kt-radio,
116
+ kt-radio-group,
112
117
  kt-segmented-control,
113
118
  kt-select,
114
119
  kt-side-panel,
@@ -104,5 +104,6 @@
104
104
  --duration-instant: 0s;
105
105
  --duration-fast: 0s;
106
106
  --duration-normal: 0s;
107
+ --duration-slow: 0s;
107
108
  }
108
109
  }
@@ -50,6 +50,7 @@
50
50
  --duration-instant: 0.1s;
51
51
  --duration-fast: 0.16s;
52
52
  --duration-normal: 0.2s;
53
+ --duration-slow: 0.4s; /* a bar filling to its new value */
53
54
  --easing-standard: ease;
54
55
 
55
56
  /* === ELEVATION ===
@@ -83,6 +83,20 @@
83
83
  { "name": "::part(base)", "description": "The toast surface." },
84
84
  { "name": "::part(close)", "description": "The dismiss button." },
85
85
  { "name": "::part(bubble)", "description": "The tooltip bubble." },
86
+ { "name": "::part(base)", "description": "The calendar." },
87
+ { "name": "::part(day)", "description": "A day cell." },
88
+ {
89
+ "name": "::part(base)",
90
+ "description": "The `<label>` around box and text."
91
+ },
92
+ { "name": "::part(input)", "description": "The native checkbox." },
93
+ { "name": "::part(box)", "description": "The drawn box." },
94
+ { "name": "::part(trigger)", "description": "The field." },
95
+ { "name": "::part(panel)", "description": "The calendar popup." },
96
+ {
97
+ "name": "::part(calendar)",
98
+ "description": "The `<kt-calendar>` inside it."
99
+ },
86
100
  { "name": "::part(base)", "description": "The dashed drop zone." },
87
101
  { "name": "::part(list)", "description": "The list of chosen files." },
88
102
  { "name": "::part(base)", "description": "The `<fieldset>`." },
@@ -97,6 +111,12 @@
97
111
  { "name": "::part(popup)", "description": "The option list." },
98
112
  { "name": "::part(option)", "description": "An option row." },
99
113
  { "name": "::part(label)", "description": "The `<label>`." },
114
+ { "name": "::part(base)", "description": "The `role=\"radio\"` row." },
115
+ { "name": "::part(circle)", "description": "The drawn circle." },
116
+ {
117
+ "name": "::part(base)",
118
+ "description": "The `role=\"radiogroup\"` container."
119
+ },
100
120
  {
101
121
  "name": "::part(trigger)",
102
122
  "description": "The button that opens the list."
@@ -419,6 +419,26 @@
419
419
  "name": "kt-table",
420
420
  "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>`.",
421
421
  "attributes": [
422
+ {
423
+ "name": "page",
424
+ "description": "The page on screen, from 1. Set it to open on another page.",
425
+ "values": []
426
+ },
427
+ {
428
+ "name": "manual",
429
+ "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.",
430
+ "values": []
431
+ },
432
+ {
433
+ "name": "virtual",
434
+ "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.",
435
+ "values": []
436
+ },
437
+ {
438
+ "name": "total-rows",
439
+ "description": "In manual mode, how many rows the server holds — what the pager counts.",
440
+ "values": []
441
+ },
422
442
  { "name": "selectable", "values": [] },
423
443
  {
424
444
  "name": "selection-mode",
@@ -439,6 +459,11 @@
439
459
  "name": "label",
440
460
  "description": "Accessible name for the table.",
441
461
  "values": []
462
+ },
463
+ {
464
+ "name": "locale",
465
+ "description": "BCP 47 locale text is sorted in. Empty means the page's `<html lang>`,\nthen the browser's language.",
466
+ "values": []
442
467
  }
443
468
  ],
444
469
  "references": []
@@ -622,7 +647,16 @@
622
647
  "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.",
623
648
  "attributes": [
624
649
  { "name": "text", "values": [] },
625
- { "name": "placement", "values": [{ "name": "KtTooltipPlacement" }] },
650
+ {
651
+ "name": "placement",
652
+ "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.",
653
+ "values": [{ "name": "KtTooltipPlacement" }]
654
+ },
655
+ {
656
+ "name": "open",
657
+ "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.",
658
+ "values": []
659
+ },
626
660
  {
627
661
  "name": "disabled",
628
662
  "description": "Suppresses the tooltip without removing it from the markup.",
@@ -631,9 +665,134 @@
631
665
  ],
632
666
  "references": []
633
667
  },
668
+ {
669
+ "name": "kt-calendar",
670
+ "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.",
671
+ "attributes": [
672
+ {
673
+ "name": "value",
674
+ "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
675
+ "values": []
676
+ },
677
+ {
678
+ "name": "range",
679
+ "description": "Choose a period — two dates — instead of one day.",
680
+ "values": []
681
+ },
682
+ {
683
+ "name": "min",
684
+ "description": "Earliest date that can be chosen, ISO.",
685
+ "values": []
686
+ },
687
+ {
688
+ "name": "max",
689
+ "description": "Latest date that can be chosen, ISO.",
690
+ "values": []
691
+ },
692
+ {
693
+ "name": "locale",
694
+ "description": "BCP 47 language tag for names and the first day of the week. Empty: the\npage's `lang`, then the browser's language.",
695
+ "values": []
696
+ },
697
+ {
698
+ "name": "label",
699
+ "description": "Accessible name of the calendar. Defaults to the strings registry.",
700
+ "values": []
701
+ }
702
+ ],
703
+ "references": []
704
+ },
705
+ {
706
+ "name": "kt-checkbox",
707
+ "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.",
708
+ "attributes": [
709
+ { "name": "checked", "values": [] },
710
+ {
711
+ "name": "indeterminate",
712
+ "description": "Neither checked nor unchecked — for a \"select all\" over a partial\nselection. Cleared as soon as the user clicks, as on a native checkbox.",
713
+ "values": []
714
+ },
715
+ { "name": "disabled", "values": [] },
716
+ { "name": "required", "values": [] },
717
+ { "name": "size", "values": [{ "name": "KtCheckboxSize" }] },
718
+ { "name": "name", "values": [] },
719
+ {
720
+ "name": "value",
721
+ "description": "Submitted when checked, as for a native checkbox.",
722
+ "values": []
723
+ },
724
+ {
725
+ "name": "label",
726
+ "description": "Accessible name, when nothing is slotted.",
727
+ "values": []
728
+ },
729
+ {
730
+ "name": "error",
731
+ "description": "Error message. A non-empty value puts the box in its error state.",
732
+ "values": []
733
+ }
734
+ ],
735
+ "references": []
736
+ },
737
+ {
738
+ "name": "kt-date-picker",
739
+ "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.",
740
+ "attributes": [
741
+ {
742
+ "name": "value",
743
+ "description": "ISO date, or `start/end` interval with `range`. `null` when empty.",
744
+ "values": []
745
+ },
746
+ {
747
+ "name": "range",
748
+ "description": "Choose a period — two dates — instead of one day.",
749
+ "values": []
750
+ },
751
+ {
752
+ "name": "min",
753
+ "description": "Earliest date that can be chosen, ISO.",
754
+ "values": []
755
+ },
756
+ {
757
+ "name": "max",
758
+ "description": "Latest date that can be chosen, ISO.",
759
+ "values": []
760
+ },
761
+ { "name": "name", "values": [] },
762
+ {
763
+ "name": "label",
764
+ "description": "Accessible name, when no `<kt-label-input>` wraps the field.",
765
+ "values": []
766
+ },
767
+ {
768
+ "name": "placeholder",
769
+ "description": "Shown while empty. Defaults to the strings registry.",
770
+ "values": []
771
+ },
772
+ {
773
+ "name": "locale",
774
+ "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.",
775
+ "values": []
776
+ },
777
+ { "name": "size", "values": [{ "name": "KtDatePickerSize" }] },
778
+ { "name": "disabled", "values": [] },
779
+ { "name": "required", "values": [] },
780
+ {
781
+ "name": "clearable",
782
+ "description": "Shows a button that empties the field once it holds a value.",
783
+ "values": []
784
+ },
785
+ {
786
+ "name": "error",
787
+ "description": "Error message. A non-empty value puts the field in its error state.",
788
+ "values": []
789
+ }
790
+ ],
791
+ "references": []
792
+ },
634
793
  {
635
794
  "name": "kt-drag-drop",
636
- "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.",
795
+ "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.",
637
796
  "attributes": [
638
797
  {
639
798
  "name": "heading",
@@ -701,7 +860,7 @@
701
860
  },
702
861
  {
703
862
  "name": "kt-input",
704
- "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.",
863
+ "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.",
705
864
  "attributes": [
706
865
  {
707
866
  "name": "value",
@@ -730,7 +889,7 @@
730
889
  },
731
890
  {
732
891
  "name": "error",
733
- "description": "Error message. A non-empty value puts the field in its error state.",
892
+ "description": "Error message. A non-empty value puts the field in its error state, and\nwins over the field's own checks.",
734
893
  "values": []
735
894
  },
736
895
  {
@@ -755,7 +914,7 @@
755
914
  },
756
915
  {
757
916
  "name": "kt-input-menu",
758
- "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.",
917
+ "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.",
759
918
  "attributes": [
760
919
  { "name": "value", "values": [] },
761
920
  { "name": "placeholder", "values": [] },
@@ -781,9 +940,62 @@
781
940
  ],
782
941
  "references": []
783
942
  },
943
+ {
944
+ "name": "kt-radio",
945
+ "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.",
946
+ "attributes": [
947
+ {
948
+ "name": "value",
949
+ "description": "Submitted by the group when this option is chosen.",
950
+ "values": []
951
+ },
952
+ { "name": "disabled", "values": [] },
953
+ { "name": "checked", "description": "Set by the group.", "values": [] },
954
+ {
955
+ "name": "invalid",
956
+ "description": "Set by the group while it reports an error.",
957
+ "values": []
958
+ },
959
+ {
960
+ "name": "group-disabled",
961
+ "description": "Set by the group while the whole group is disabled.",
962
+ "values": []
963
+ }
964
+ ],
965
+ "references": []
966
+ },
967
+ {
968
+ "name": "kt-radio-group",
969
+ "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.",
970
+ "attributes": [
971
+ {
972
+ "name": "value",
973
+ "description": "The chosen option's value, or `null`.",
974
+ "values": []
975
+ },
976
+ { "name": "name", "values": [] },
977
+ {
978
+ "name": "label",
979
+ "description": "Accessible name of the group.",
980
+ "values": []
981
+ },
982
+ { "name": "disabled", "values": [] },
983
+ { "name": "required", "values": [] },
984
+ {
985
+ "name": "orientation",
986
+ "values": [{ "name": "KtRadioGroupOrientation" }]
987
+ },
988
+ {
989
+ "name": "error",
990
+ "description": "Error message. A non-empty value puts the group in its error state.",
991
+ "values": []
992
+ }
993
+ ],
994
+ "references": []
995
+ },
784
996
  {
785
997
  "name": "kt-select",
786
- "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.",
998
+ "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.",
787
999
  "attributes": [
788
1000
  {
789
1001
  "name": "value",
@@ -820,7 +1032,7 @@
820
1032
  },
821
1033
  {
822
1034
  "name": "kt-textarea",
823
- "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.",
1035
+ "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.",
824
1036
  "attributes": [
825
1037
  { "name": "value", "values": [] },
826
1038
  { "name": "name", "values": [] },
@@ -850,7 +1062,7 @@
850
1062
  },
851
1063
  {
852
1064
  "name": "kt-toggle",
853
- "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.",
1065
+ "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.",
854
1066
  "attributes": [
855
1067
  { "name": "checked", "values": [] },
856
1068
  { "name": "disabled", "values": [] },
@@ -925,7 +1137,7 @@
925
1137
  },
926
1138
  {
927
1139
  "name": "kt-segmented-control",
928
- "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.",
1140
+ "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.",
929
1141
  "attributes": [
930
1142
  { "name": "value", "values": [] },
931
1143
  { "name": "size", "values": [{ "name": "KtSegmentedSize" }] },
@@ -44,6 +44,11 @@ import type { KtInput } from 'kanto-ds';
44
44
  import type { KtInputMenu } from 'kanto-ds';
45
45
  import type { KtLabelInput } from 'kanto-ds';
46
46
  import type { KtSelect } from 'kanto-ds';
47
+ import type { KtCheckbox } from 'kanto-ds';
48
+ import type { KtCalendar } from 'kanto-ds';
49
+ import type { KtDatePicker } from 'kanto-ds';
50
+ import type { KtRadioGroup } from 'kanto-ds';
51
+ import type { KtRadio } from 'kanto-ds';
47
52
  import type { KtTextarea } from 'kanto-ds';
48
53
  import type { KtToggle } from 'kanto-ds';
49
54
  import type { KtBreadcrumb } from 'kanto-ds';
@@ -105,6 +110,11 @@ declare module 'vue' {
105
110
  'kt-input-menu': KtProps<KtInputMenu>;
106
111
  'kt-label-input': KtProps<KtLabelInput>;
107
112
  'kt-select': KtProps<KtSelect>;
113
+ 'kt-checkbox': KtProps<KtCheckbox>;
114
+ 'kt-calendar': KtProps<KtCalendar>;
115
+ 'kt-date-picker': KtProps<KtDatePicker>;
116
+ 'kt-radio-group': KtProps<KtRadioGroup>;
117
+ 'kt-radio': KtProps<KtRadio>;
108
118
  'kt-textarea': KtProps<KtTextarea>;
109
119
  'kt-toggle': KtProps<KtToggle>;
110
120
  'kt-breadcrumb': KtProps<KtBreadcrumb>;
package/dist/vue/index.js CHANGED
@@ -6,11 +6,15 @@ import "../components/core/kt-card/kt-card.js";
6
6
  import "../components/core/kt-code/kt-code.js";
7
7
  import "../components/core/kt-icon/kt-icon.js";
8
8
  import "../components/core/kt-kbd/kt-kbd.js";
9
+ import "../components/forms/kt-checkbox/kt-checkbox.js";
10
+ import "../chunks/kt-calendar-B_hFdD9V.js";
11
+ import "../components/forms/kt-date-picker/kt-date-picker.js";
9
12
  import "../components/forms/kt-drag-drop/kt-drag-drop.js";
10
13
  import "../components/forms/kt-form/kt-form.js";
11
14
  import "../components/forms/kt-input/kt-input.js";
12
15
  import "../components/forms/kt-input-menu/kt-input-menu.js";
13
16
  import "../components/forms/kt-label-input/kt-label-input.js";
17
+ import "../components/forms/kt-radio-group/kt-radio-group.js";
14
18
  import "../components/forms/kt-select/kt-select.js";
15
19
  import "../components/forms/kt-textarea/kt-textarea.js";
16
20
  import "../components/forms/kt-toggle/kt-toggle.js";
@@ -28,7 +32,7 @@ import "../components/feedback/kt-progress-bar/kt-progress-bar.js";
28
32
  import "../components/feedback/kt-skeleton/kt-skeleton.js";
29
33
  import "../components/feedback/kt-toast/kt-toast.js";
30
34
  import "../components/feedback/kt-toast-container/kt-toast-container.js";
31
- import { t as S } from "../chunks/toaster-PmdKSV5x.js";
35
+ import { t as Z } from "../chunks/toaster-PmdKSV5x.js";
32
36
  import "../components/feedback/kt-tooltip/kt-tooltip.js";
33
37
  import "../components/overlays/kt-collapsible/kt-collapsible.js";
34
38
  import "../components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
@@ -41,17 +45,17 @@ import "../components/data/kt-pagination/kt-pagination.js";
41
45
  import "../components/data/kt-stat/kt-stat.js";
42
46
  import "../components/data/kt-table/kt-table.js";
43
47
  import "../components/data/kt-timeline/kt-timeline.js";
44
- function H(t) {
48
+ function Q(t) {
45
49
  return t.startsWith("kt-");
46
50
  }
47
- const J = "kt-", L = {
51
+ const S = "kt-", U = {
48
52
  install() {
49
53
  }
50
54
  };
51
55
  export {
52
- J as KANTO_TAG_PREFIX,
53
- H as isKantoElement,
54
- L as kanto,
55
- S as toaster
56
+ S as KANTO_TAG_PREFIX,
57
+ Q as isKantoElement,
58
+ U as kanto,
59
+ Z as toaster
56
60
  };
57
61
  //# sourceMappingURL=index.js.map
@@ -1 +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 { 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-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFO,SAASA,EAAeC,GAAsB;AACnD,SAAOA,EAAI,WAAW,KAAK;AAC7B;AAGO,MAAMC,IAAmB,OA8DnBC,IAAgB;AAAA,EAC3B,UAAU;AAAA,EAEV;AACF;"}
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;"}