kanto-ds 1.7.0 → 1.9.0

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 (251) hide show
  1. package/README.md +26 -14
  2. package/dist/AGENTS.md +157 -0
  3. package/dist/cdn/kanto.min.js +4743 -932
  4. package/dist/chunks/block-Cci-Kff_.js +69 -0
  5. package/dist/chunks/block-Cci-Kff_.js.map +1 -0
  6. package/dist/chunks/defaults-yhaR6U65.js +70 -0
  7. package/dist/chunks/{defaults-Cpeg13O5.js.map → defaults-yhaR6U65.js.map} +1 -1
  8. package/dist/chunks/heading-DsnZsfg-.js +21 -0
  9. package/dist/chunks/heading-DsnZsfg-.js.map +1 -0
  10. package/dist/chunks/{index-TWJzttLX.js → index-1ZFgagWW.js} +37 -12
  11. package/dist/chunks/index-1ZFgagWW.js.map +1 -0
  12. package/dist/chunks/indicator-B_Rs8F92.js +49 -0
  13. package/dist/chunks/indicator-B_Rs8F92.js.map +1 -0
  14. package/dist/chunks/{kt-calendar-CtwOby1R.js → kt-calendar-SK8eapuy.js} +3 -3
  15. package/dist/chunks/{kt-calendar-CtwOby1R.js.map → kt-calendar-SK8eapuy.js.map} +1 -1
  16. package/dist/chunks/kt-color-picker-BoezCAmx.js +365 -0
  17. package/dist/chunks/kt-color-picker-BoezCAmx.js.map +1 -0
  18. package/dist/chunks/{kt-element-T0VbIBNp.js → kt-element-DvWtPQ1Y.js} +2 -2
  19. package/dist/chunks/{kt-element-T0VbIBNp.js.map → kt-element-DvWtPQ1Y.js.map} +1 -1
  20. package/dist/chunks/motion-ChVUUO7O.js +28 -0
  21. package/dist/chunks/motion-ChVUUO7O.js.map +1 -0
  22. package/dist/chunks/numbers-QyecMiSJ.js +9 -0
  23. package/dist/chunks/numbers-QyecMiSJ.js.map +1 -0
  24. package/dist/chunks/{segmented-field-BBXR4XFL.js → segmented-field-T_Zo6lc1.js} +2 -2
  25. package/dist/chunks/{segmented-field-BBXR4XFL.js.map → segmented-field-T_Zo6lc1.js.map} +1 -1
  26. package/dist/chunks/{typed-date-CPAUNHzr.js → typed-date-CaU0kXoY.js} +2 -2
  27. package/dist/chunks/{typed-date-CPAUNHzr.js.map → typed-date-CaU0kXoY.js.map} +1 -1
  28. package/dist/components/blocks/kt-auth-form/kt-auth-form.d.ts +143 -0
  29. package/dist/components/blocks/kt-auth-form/kt-auth-form.js +368 -0
  30. package/dist/components/blocks/kt-auth-form/kt-auth-form.js.map +1 -0
  31. package/dist/components/blocks/kt-blog-post/kt-blog-post.d.ts +75 -0
  32. package/dist/components/blocks/kt-blog-post/kt-blog-post.js +285 -0
  33. package/dist/components/blocks/kt-blog-post/kt-blog-post.js.map +1 -0
  34. package/dist/components/blocks/kt-cta/kt-cta.d.ts +51 -0
  35. package/dist/components/blocks/kt-cta/kt-cta.js +126 -0
  36. package/dist/components/blocks/kt-cta/kt-cta.js.map +1 -0
  37. package/dist/components/blocks/kt-empty-page/kt-empty-page.d.ts +75 -0
  38. package/dist/components/blocks/kt-empty-page/kt-empty-page.js +245 -0
  39. package/dist/components/blocks/kt-empty-page/kt-empty-page.js.map +1 -0
  40. package/dist/components/blocks/kt-error-page/kt-error-page.d.ts +65 -0
  41. package/dist/components/blocks/kt-error-page/kt-error-page.js +177 -0
  42. package/dist/components/blocks/kt-error-page/kt-error-page.js.map +1 -0
  43. package/dist/components/blocks/kt-faq/kt-faq.d.ts +61 -0
  44. package/dist/components/blocks/kt-faq/kt-faq.js +129 -0
  45. package/dist/components/blocks/kt-faq/kt-faq.js.map +1 -0
  46. package/dist/components/blocks/kt-feature-grid/kt-feature-grid.d.ts +59 -0
  47. package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js +166 -0
  48. package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js.map +1 -0
  49. package/dist/components/blocks/kt-hero/kt-hero.d.ts +51 -0
  50. package/dist/components/blocks/kt-hero/kt-hero.js +138 -0
  51. package/dist/components/blocks/kt-hero/kt-hero.js.map +1 -0
  52. package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.d.ts +46 -0
  53. package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js +100 -0
  54. package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js.map +1 -0
  55. package/dist/components/blocks/kt-newsletter/kt-newsletter.d.ts +85 -0
  56. package/dist/components/blocks/kt-newsletter/kt-newsletter.js +247 -0
  57. package/dist/components/blocks/kt-newsletter/kt-newsletter.js.map +1 -0
  58. package/dist/components/blocks/kt-post-grid/kt-post-grid.d.ts +73 -0
  59. package/dist/components/blocks/kt-post-grid/kt-post-grid.js +249 -0
  60. package/dist/components/blocks/kt-post-grid/kt-post-grid.js.map +1 -0
  61. package/dist/components/blocks/kt-pricing-table/kt-pricing-table.d.ts +102 -0
  62. package/dist/components/blocks/kt-pricing-table/kt-pricing-table.js +307 -0
  63. package/dist/components/blocks/kt-pricing-table/kt-pricing-table.js.map +1 -0
  64. package/dist/components/blocks/kt-settings-section/kt-settings-section.d.ts +52 -0
  65. package/dist/components/blocks/kt-settings-section/kt-settings-section.js +158 -0
  66. package/dist/components/blocks/kt-settings-section/kt-settings-section.js.map +1 -0
  67. package/dist/components/blocks/kt-testimonials/kt-testimonials.d.ts +56 -0
  68. package/dist/components/blocks/kt-testimonials/kt-testimonials.js +161 -0
  69. package/dist/components/blocks/kt-testimonials/kt-testimonials.js.map +1 -0
  70. package/dist/components/core/kt-avatar/kt-avatar.js +2 -2
  71. package/dist/components/core/kt-avatar-group/kt-avatar-group.d.ts +42 -0
  72. package/dist/components/core/kt-avatar-group/kt-avatar-group.js +97 -0
  73. package/dist/components/core/kt-avatar-group/kt-avatar-group.js.map +1 -0
  74. package/dist/components/core/kt-badge/kt-badge.js +2 -2
  75. package/dist/components/core/kt-button/flights.d.ts +27 -0
  76. package/dist/components/core/kt-button/kt-button.d.ts +52 -1
  77. package/dist/components/core/kt-button/kt-button.js +353 -77
  78. package/dist/components/core/kt-button/kt-button.js.map +1 -1
  79. package/dist/components/core/kt-button/morph.d.ts +27 -0
  80. package/dist/components/core/kt-card/kt-card.js +1 -1
  81. package/dist/components/core/kt-code/kt-code.d.ts +2 -1
  82. package/dist/components/core/kt-code/kt-code.js +52 -37
  83. package/dist/components/core/kt-code/kt-code.js.map +1 -1
  84. package/dist/components/core/kt-copy-button/kt-copy-button.d.ts +47 -0
  85. package/dist/components/core/kt-copy-button/kt-copy-button.js +74 -0
  86. package/dist/components/core/kt-copy-button/kt-copy-button.js.map +1 -0
  87. package/dist/components/core/kt-icon/kt-icon.js +2 -2
  88. package/dist/components/core/kt-kbd/kt-kbd.js +1 -1
  89. package/dist/components/core/kt-split-button/kt-split-button.js +2 -2
  90. package/dist/components/data/kt-chart/kt-chart.js +2 -2
  91. package/dist/components/data/kt-chat-message/kt-chat-message.d.ts +60 -0
  92. package/dist/components/data/kt-chat-message/kt-chat-message.js +204 -0
  93. package/dist/components/data/kt-chat-message/kt-chat-message.js.map +1 -0
  94. package/dist/components/data/kt-description-list/kt-description-list.d.ts +56 -0
  95. package/dist/components/data/kt-description-list/kt-description-list.js +120 -0
  96. package/dist/components/data/kt-description-list/kt-description-list.js.map +1 -0
  97. package/dist/components/data/kt-meter/kt-meter.js +8 -6
  98. package/dist/components/data/kt-meter/kt-meter.js.map +1 -1
  99. package/dist/components/data/kt-pagination/kt-pagination.js +2 -2
  100. package/dist/components/data/kt-stat/kt-stat.d.ts +3 -1
  101. package/dist/components/data/kt-stat/kt-stat.js +31 -16
  102. package/dist/components/data/kt-stat/kt-stat.js.map +1 -1
  103. package/dist/components/data/kt-table/kt-table.js +2 -2
  104. package/dist/components/data/kt-timeline/kt-timeline.js +2 -2
  105. package/dist/components/data/kt-timeline/kt-timeline.js.map +1 -1
  106. package/dist/components/data/kt-tree/kt-tree.d.ts +69 -0
  107. package/dist/components/data/kt-tree/kt-tree.js +208 -0
  108. package/dist/components/data/kt-tree/kt-tree.js.map +1 -0
  109. package/dist/components/feedback/kt-alert/kt-alert.js +2 -2
  110. package/dist/components/feedback/kt-empty-state/kt-empty-state.js +1 -1
  111. package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js +1 -1
  112. package/dist/components/feedback/kt-skeleton/kt-skeleton.js +1 -1
  113. package/dist/components/feedback/kt-toast/kt-toast.js +2 -2
  114. package/dist/components/feedback/kt-toast-container/kt-toast-container.d.ts +8 -1
  115. package/dist/components/feedback/kt-toast-container/kt-toast-container.js +65 -26
  116. package/dist/components/feedback/kt-toast-container/kt-toast-container.js.map +1 -1
  117. package/dist/components/feedback/kt-tooltip/kt-tooltip.js +1 -1
  118. package/dist/components/forms/kt-calendar/kt-calendar.js +3 -3
  119. package/dist/components/forms/kt-checkbox/kt-checkbox.d.ts +2 -0
  120. package/dist/components/forms/kt-checkbox/kt-checkbox.js +19 -8
  121. package/dist/components/forms/kt-checkbox/kt-checkbox.js.map +1 -1
  122. package/dist/components/forms/kt-color-picker/kt-color-picker.d.ts +66 -0
  123. package/dist/components/forms/kt-color-picker/kt-color-picker.js +14 -0
  124. package/dist/components/forms/kt-color-picker/kt-color-picker.js.map +1 -0
  125. package/dist/components/forms/kt-date-input/kt-date-input.js +5 -5
  126. package/dist/components/forms/kt-date-picker/kt-date-picker.js +4 -4
  127. package/dist/components/forms/kt-drag-drop/kt-drag-drop.js +2 -2
  128. package/dist/components/forms/kt-form/kt-form.js +2 -2
  129. package/dist/components/forms/kt-input/kt-input.js +2 -2
  130. package/dist/components/forms/kt-input-menu/kt-input-menu.js +2 -2
  131. package/dist/components/forms/kt-label-input/kt-label-input.js +1 -1
  132. package/dist/components/forms/kt-multi-select/kt-multi-select.js +2 -2
  133. package/dist/components/forms/kt-number-input/kt-number-input.d.ts +92 -0
  134. package/dist/components/forms/kt-number-input/kt-number-input.js +366 -0
  135. package/dist/components/forms/kt-number-input/kt-number-input.js.map +1 -0
  136. package/dist/components/forms/kt-otp-input/kt-otp-input.d.ts +74 -0
  137. package/dist/components/forms/kt-otp-input/kt-otp-input.js +232 -0
  138. package/dist/components/forms/kt-otp-input/kt-otp-input.js.map +1 -0
  139. package/dist/components/forms/kt-prompt-input/kt-prompt-input.d.ts +74 -0
  140. package/dist/components/forms/kt-prompt-input/kt-prompt-input.js +213 -0
  141. package/dist/components/forms/kt-prompt-input/kt-prompt-input.js.map +1 -0
  142. package/dist/components/forms/kt-radio-group/kt-radio-group.js +2 -2
  143. package/dist/components/forms/kt-select/kt-select.js +2 -2
  144. package/dist/components/forms/kt-slider/kt-slider.d.ts +69 -0
  145. package/dist/components/forms/kt-slider/kt-slider.js +252 -0
  146. package/dist/components/forms/kt-slider/kt-slider.js.map +1 -0
  147. package/dist/components/forms/kt-textarea/kt-textarea.js +2 -2
  148. package/dist/components/forms/kt-time-input/kt-time-input.js +3 -3
  149. package/dist/components/forms/kt-toggle/kt-toggle.js +1 -1
  150. package/dist/components/navigation/kt-app-shell/kt-app-shell.d.ts +85 -0
  151. package/dist/components/navigation/kt-app-shell/kt-app-shell.js +220 -0
  152. package/dist/components/navigation/kt-app-shell/kt-app-shell.js.map +1 -0
  153. package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js +2 -2
  154. package/dist/components/navigation/kt-footer/kt-footer.d.ts +82 -0
  155. package/dist/components/navigation/kt-footer/kt-footer.js +220 -0
  156. package/dist/components/navigation/kt-footer/kt-footer.js.map +1 -0
  157. package/dist/components/navigation/kt-header/kt-header.js +2 -2
  158. package/dist/components/navigation/kt-page-header/kt-page-header.js +2 -2
  159. package/dist/components/navigation/kt-page-header/kt-page-header.js.map +1 -1
  160. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.d.ts +1 -0
  161. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js +81 -44
  162. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js.map +1 -1
  163. package/dist/components/navigation/kt-steps/kt-steps.d.ts +68 -0
  164. package/dist/components/navigation/kt-steps/kt-steps.js +286 -0
  165. package/dist/components/navigation/kt-steps/kt-steps.js.map +1 -0
  166. package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js +3 -3
  167. package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js.map +1 -1
  168. package/dist/components/navigation/kt-tabs/kt-tabs.d.ts +1 -0
  169. package/dist/components/navigation/kt-tabs/kt-tabs.js +92 -64
  170. package/dist/components/navigation/kt-tabs/kt-tabs.js.map +1 -1
  171. package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js +1 -1
  172. package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js +2 -2
  173. package/dist/components/navigation/kt-user-menu/kt-user-menu.d.ts +86 -0
  174. package/dist/components/navigation/kt-user-menu/kt-user-menu.js +298 -0
  175. package/dist/components/navigation/kt-user-menu/kt-user-menu.js.map +1 -0
  176. package/dist/components/overlays/kt-accordion/kt-accordion.d.ts +47 -0
  177. package/dist/components/overlays/kt-accordion/kt-accordion.js +80 -0
  178. package/dist/components/overlays/kt-accordion/kt-accordion.js.map +1 -0
  179. package/dist/components/overlays/kt-collapsible/kt-collapsible.d.ts +17 -1
  180. package/dist/components/overlays/kt-collapsible/kt-collapsible.js +87 -32
  181. package/dist/components/overlays/kt-collapsible/kt-collapsible.js.map +1 -1
  182. package/dist/components/overlays/kt-command-palette/kt-command-palette.d.ts +87 -0
  183. package/dist/components/overlays/kt-command-palette/kt-command-palette.js +370 -0
  184. package/dist/components/overlays/kt-command-palette/kt-command-palette.js.map +1 -0
  185. package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js +2 -2
  186. package/dist/components/overlays/kt-dropdown/kt-dropdown.js +2 -2
  187. package/dist/components/overlays/kt-modal/kt-modal.js +2 -2
  188. package/dist/components/overlays/kt-side-panel/kt-side-panel.js +2 -2
  189. package/dist/components/overlays/kt-tour/kt-tour.d.ts +77 -0
  190. package/dist/components/overlays/kt-tour/kt-tour.js +200 -0
  191. package/dist/components/overlays/kt-tour/kt-tour.js.map +1 -0
  192. package/dist/custom-elements.json +16427 -8061
  193. package/dist/docs/kt-accordion.md +49 -0
  194. package/dist/docs/kt-app-shell.md +89 -0
  195. package/dist/docs/kt-auth-form.md +111 -0
  196. package/dist/docs/kt-avatar-group.md +49 -0
  197. package/dist/docs/kt-blog-post.md +77 -0
  198. package/dist/docs/kt-button.md +21 -0
  199. package/dist/docs/kt-chat-message.md +68 -0
  200. package/dist/docs/kt-color-picker.md +67 -0
  201. package/dist/docs/kt-command-palette.md +99 -0
  202. package/dist/docs/kt-copy-button.md +50 -0
  203. package/dist/docs/kt-cta.md +45 -0
  204. package/dist/docs/kt-description-list.md +58 -0
  205. package/dist/docs/kt-empty-page.md +92 -0
  206. package/dist/docs/kt-error-page.md +64 -0
  207. package/dist/docs/kt-faq.md +54 -0
  208. package/dist/docs/kt-feature-grid.md +53 -0
  209. package/dist/docs/kt-footer.md +115 -0
  210. package/dist/docs/kt-hero.md +53 -0
  211. package/dist/docs/kt-logo-cloud.md +41 -0
  212. package/dist/docs/kt-newsletter.md +69 -0
  213. package/dist/docs/kt-number-input.md +77 -0
  214. package/dist/docs/kt-otp-input.md +68 -0
  215. package/dist/docs/kt-post-grid.md +66 -0
  216. package/dist/docs/kt-pricing-table.md +101 -0
  217. package/dist/docs/kt-prompt-input.md +86 -0
  218. package/dist/docs/kt-settings-section.md +65 -0
  219. package/dist/docs/kt-slider.md +76 -0
  220. package/dist/docs/kt-steps.md +79 -0
  221. package/dist/docs/kt-testimonials.md +52 -0
  222. package/dist/docs/kt-tour.md +75 -0
  223. package/dist/docs/kt-tree.md +83 -0
  224. package/dist/docs/kt-user-menu.md +77 -0
  225. package/dist/icons/defaults.d.ts +2 -0
  226. package/dist/icons/index.js +1 -1
  227. package/dist/index.d.ts +56 -0
  228. package/dist/index.js +225 -284
  229. package/dist/index.js.map +1 -1
  230. package/dist/internal/block.d.ts +23 -0
  231. package/dist/internal/command-search.d.ts +27 -0
  232. package/dist/internal/heading.d.ts +8 -0
  233. package/dist/internal/indicator.d.ts +34 -0
  234. package/dist/internal/motion.d.ts +25 -0
  235. package/dist/internal/numbers.d.ts +2 -0
  236. package/dist/internal/strings.d.ts +36 -0
  237. package/dist/react/index.d.ts +165 -0
  238. package/dist/react/index.js +420 -171
  239. package/dist/react/index.js.map +1 -1
  240. package/dist/react/jsx.d.ts +128 -1
  241. package/dist/strings/index.js +1 -1
  242. package/dist/tokens/base.css +35 -2
  243. package/dist/vscode.css-custom-data.json +165 -19
  244. package/dist/vscode.html-custom-data.json +1023 -149
  245. package/dist/vue/index.d.ts +62 -0
  246. package/dist/vue/index.js +39 -8
  247. package/dist/vue/index.js.map +1 -1
  248. package/dist/web-types.json +3238 -836
  249. package/package.json +128 -3
  250. package/dist/chunks/defaults-Cpeg13O5.js +0 -68
  251. package/dist/chunks/index-TWJzttLX.js.map +0 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Kanto
2
2
 
3
- **Forty-nine web components for dashboards, admin tools and forms — in your
3
+ **Eighty web components for dashboards, admin tools and forms — in your
4
4
  colours, in any framework.**
5
5
 
6
6
  [![npm](https://img.shields.io/npm/v/kanto-ds?color=5f5dea&label=npm)](https://www.npmjs.com/package/kanto-ds)
@@ -12,6 +12,11 @@ colours, in any framework.**
12
12
  colour, a font and a density, watch a real screen change, and copy the one
13
13
  line that does it in your project — or open it on StackBlitz.
14
14
 
15
+ Or build a page from whole sections: the site's
16
+ **[blocks](https://kanto.arnaudmichel.fr/#/blocks)** — a hero, pricing, a blog
17
+ post, a sign-in form, a settings section and more — are live, each with its
18
+ own documentation.
19
+
15
20
  They are standard custom elements, so the same `<kt-button>` runs in React,
16
21
  Vue, Angular, Svelte and plain HTML. Two complete themes, every element audited by axe in both and driven
17
22
  by the keyboard in its tests, and no framework to adopt.
@@ -143,16 +148,17 @@ Full details in **[src/tokens/README.md](src/tokens/README.md)**.
143
148
 
144
149
  ## Components
145
150
 
146
- Forty-nine elements. Each has a page beside its source.
151
+ Eighty elements. Each has a page beside its source.
147
152
 
148
- | Group | Elements |
149
- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
150
- | **Core** | [button](src/components/core/kt-button/kt-button.md) · [split-button](src/components/core/kt-split-button/kt-split-button.md) · [card](src/components/core/kt-card/kt-card.md) · [code](src/components/core/kt-code/kt-code.md) · [icon](src/components/core/kt-icon/kt-icon.md) · [avatar](src/components/core/kt-avatar/kt-avatar.md) · [badge](src/components/core/kt-badge/kt-badge.md) · [kbd](src/components/core/kt-kbd/kt-kbd.md) |
151
- | **Forms** | [input](src/components/forms/kt-input/kt-input.md) · [textarea](src/components/forms/kt-textarea/kt-textarea.md) · [time-input](src/components/forms/kt-time-input/kt-time-input.md) · [label-input](src/components/forms/kt-label-input/kt-label-input.md) · [form](src/components/forms/kt-form/kt-form.md) · [select](src/components/forms/kt-select/kt-select.md) · [checkbox](src/components/forms/kt-checkbox/kt-checkbox.md) · [date-input](src/components/forms/kt-date-input/kt-date-input.md) · [date-picker](src/components/forms/kt-date-picker/kt-date-picker.md) · [calendar](src/components/forms/kt-calendar/kt-calendar.md) · [radio-group](src/components/forms/kt-radio-group/kt-radio-group.md) · [input-menu](src/components/forms/kt-input-menu/kt-input-menu.md) · [multi-select](src/components/forms/kt-multi-select/kt-multi-select.md) · [toggle](src/components/forms/kt-toggle/kt-toggle.md) · [drag-drop](src/components/forms/kt-drag-drop/kt-drag-drop.md) |
152
- | **Navigation** | [header](src/components/navigation/kt-header/kt-header.md) · [breadcrumb](src/components/navigation/kt-breadcrumb/kt-breadcrumb.md) · [sub-menu-navigation](src/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.md) · [page-header](src/components/navigation/kt-page-header/kt-page-header.md) · [tabs](src/components/navigation/kt-tabs/kt-tabs.md) · [segmented-control](src/components/navigation/kt-segmented-control/kt-segmented-control.md) · [toggle-button](src/components/navigation/kt-toggle-button/kt-toggle-button.md) · [toggle-button-group](src/components/navigation/kt-toggle-button-group/kt-toggle-button-group.md) |
153
- | **Feedback** | [progress-bar](src/components/feedback/kt-progress-bar/kt-progress-bar.md) · [skeleton](src/components/feedback/kt-skeleton/kt-skeleton.md) · [tooltip](src/components/feedback/kt-tooltip/kt-tooltip.md) · [toast](src/components/feedback/kt-toast/kt-toast.md) · [toast-container + toaster](src/components/feedback/kt-toast-container/kt-toast-container.md) · [alert](src/components/feedback/kt-alert/kt-alert.md) · [empty-state](src/components/feedback/kt-empty-state/kt-empty-state.md) |
154
- | **Overlays** | [dropdown](src/components/overlays/kt-dropdown/kt-dropdown.md) · [side-panel](src/components/overlays/kt-side-panel/kt-side-panel.md) · [confirm-dialog](src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.md) · [modal](src/components/overlays/kt-modal/kt-modal.md) · [collapsible](src/components/overlays/kt-collapsible/kt-collapsible.md) |
155
- | **Data** | [table](src/components/data/kt-table/kt-table.md) · [pagination](src/components/data/kt-pagination/kt-pagination.md) · [stat](src/components/data/kt-stat/kt-stat.md) · [chart](src/components/data/kt-chart/kt-chart.md) · [meter](src/components/data/kt-meter/kt-meter.md) · [timeline](src/components/data/kt-timeline/kt-timeline.md) |
153
+ | Group | Elements |
154
+ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
155
+ | **Core** | [button](src/components/core/kt-button/kt-button.md) · [split-button](src/components/core/kt-split-button/kt-split-button.md) · [card](src/components/core/kt-card/kt-card.md) · [copy-button](src/components/core/kt-copy-button/kt-copy-button.md) · [code](src/components/core/kt-code/kt-code.md) · [icon](src/components/core/kt-icon/kt-icon.md) · [avatar](src/components/core/kt-avatar/kt-avatar.md) · [avatar-group](src/components/core/kt-avatar-group/kt-avatar-group.md) · [badge](src/components/core/kt-badge/kt-badge.md) · [kbd](src/components/core/kt-kbd/kt-kbd.md) |
156
+ | **Forms** | [input](src/components/forms/kt-input/kt-input.md) · [prompt-input](src/components/forms/kt-prompt-input/kt-prompt-input.md) · [textarea](src/components/forms/kt-textarea/kt-textarea.md) · [time-input](src/components/forms/kt-time-input/kt-time-input.md) · [label-input](src/components/forms/kt-label-input/kt-label-input.md) · [form](src/components/forms/kt-form/kt-form.md) · [select](src/components/forms/kt-select/kt-select.md) · [checkbox](src/components/forms/kt-checkbox/kt-checkbox.md) · [color-picker](src/components/forms/kt-color-picker/kt-color-picker.md) · [date-input](src/components/forms/kt-date-input/kt-date-input.md) · [date-picker](src/components/forms/kt-date-picker/kt-date-picker.md) · [calendar](src/components/forms/kt-calendar/kt-calendar.md) · [otp-input](src/components/forms/kt-otp-input/kt-otp-input.md) · [number-input](src/components/forms/kt-number-input/kt-number-input.md) · [radio-group](src/components/forms/kt-radio-group/kt-radio-group.md) · [input-menu](src/components/forms/kt-input-menu/kt-input-menu.md) · [multi-select](src/components/forms/kt-multi-select/kt-multi-select.md) · [slider](src/components/forms/kt-slider/kt-slider.md) · [toggle](src/components/forms/kt-toggle/kt-toggle.md) · [drag-drop](src/components/forms/kt-drag-drop/kt-drag-drop.md) |
157
+ | **Navigation** | [app-shell](src/components/navigation/kt-app-shell/kt-app-shell.md) · [user-menu](src/components/navigation/kt-user-menu/kt-user-menu.md) · [header](src/components/navigation/kt-header/kt-header.md) · [footer](src/components/navigation/kt-footer/kt-footer.md) · [breadcrumb](src/components/navigation/kt-breadcrumb/kt-breadcrumb.md) · [sub-menu-navigation](src/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.md) · [page-header](src/components/navigation/kt-page-header/kt-page-header.md) · [tabs](src/components/navigation/kt-tabs/kt-tabs.md) · [segmented-control](src/components/navigation/kt-segmented-control/kt-segmented-control.md) · [steps](src/components/navigation/kt-steps/kt-steps.md) · [toggle-button](src/components/navigation/kt-toggle-button/kt-toggle-button.md) · [toggle-button-group](src/components/navigation/kt-toggle-button-group/kt-toggle-button-group.md) |
158
+ | **Feedback** | [progress-bar](src/components/feedback/kt-progress-bar/kt-progress-bar.md) · [skeleton](src/components/feedback/kt-skeleton/kt-skeleton.md) · [tooltip](src/components/feedback/kt-tooltip/kt-tooltip.md) · [toast](src/components/feedback/kt-toast/kt-toast.md) · [toast-container + toaster](src/components/feedback/kt-toast-container/kt-toast-container.md) · [alert](src/components/feedback/kt-alert/kt-alert.md) · [empty-state](src/components/feedback/kt-empty-state/kt-empty-state.md) |
159
+ | **Overlays** | [dropdown](src/components/overlays/kt-dropdown/kt-dropdown.md) · [side-panel](src/components/overlays/kt-side-panel/kt-side-panel.md) · [confirm-dialog](src/components/overlays/kt-confirm-dialog/kt-confirm-dialog.md) · [modal](src/components/overlays/kt-modal/kt-modal.md) · [accordion](src/components/overlays/kt-accordion/kt-accordion.md) · [tour](src/components/overlays/kt-tour/kt-tour.md) · [collapsible](src/components/overlays/kt-collapsible/kt-collapsible.md) · [command-palette](src/components/overlays/kt-command-palette/kt-command-palette.md) |
160
+ | **Data** | [table](src/components/data/kt-table/kt-table.md) · [pagination](src/components/data/kt-pagination/kt-pagination.md) · [stat](src/components/data/kt-stat/kt-stat.md) · [chat-message](src/components/data/kt-chat-message/kt-chat-message.md) · [description-list](src/components/data/kt-description-list/kt-description-list.md) · [chart](src/components/data/kt-chart/kt-chart.md) · [meter](src/components/data/kt-meter/kt-meter.md) · [tree](src/components/data/kt-tree/kt-tree.md) · [timeline](src/components/data/kt-timeline/kt-timeline.md) |
161
+ | **Blocks** | [newsletter](src/components/blocks/kt-newsletter/kt-newsletter.md) · [post-grid](src/components/blocks/kt-post-grid/kt-post-grid.md) · [faq](src/components/blocks/kt-faq/kt-faq.md) · [logo-cloud](src/components/blocks/kt-logo-cloud/kt-logo-cloud.md) · [testimonials](src/components/blocks/kt-testimonials/kt-testimonials.md) · [pricing-table](src/components/blocks/kt-pricing-table/kt-pricing-table.md) · [cta](src/components/blocks/kt-cta/kt-cta.md) · [feature-grid](src/components/blocks/kt-feature-grid/kt-feature-grid.md) · [hero](src/components/blocks/kt-hero/kt-hero.md) · [blog-post](src/components/blocks/kt-blog-post/kt-blog-post.md) · [error-page](src/components/blocks/kt-error-page/kt-error-page.md) · [empty-page](src/components/blocks/kt-empty-page/kt-empty-page.md) · [settings-section](src/components/blocks/kt-settings-section/kt-settings-section.md) · [auth-form](src/components/blocks/kt-auth-form/kt-auth-form.md) |
156
162
 
157
163
  Import the whole system, or one element:
158
164
 
@@ -209,10 +215,16 @@ editor data generated from it, so plain HTML gets completion and hover docs:
209
215
 
210
216
  - **Storybook** and API-docs generators take `kanto-ds/custom-elements.json`.
211
217
 
212
- **AI assistants** read [`llms.txt`](https://kanto.arnaudmichel.fr/llms.txt): the
213
- rules that make code right the first time and a link to every component's
214
- page. In a project, each page also ships at
215
- `node_modules/kanto-ds/dist/docs/<tag>.md`.
218
+ **AI agents** get instructions of their own: the package ships
219
+ `dist/AGENTS.md` — the rules that make code right the first time, the mistakes
220
+ agents make and the fix, every component in a line. One line points Claude
221
+ Code, Cursor, Copilot or Codex at it; the
222
+ [AI agents guide](https://kanto.arnaudmichel.fr/#/guide/ai-agents) has each.
223
+ Each component's page ships at `node_modules/kanto-ds/dist/docs/<tag>.md`, and
224
+ a chat that cannot read your project takes
225
+ [`llms.txt`](https://kanto.arnaudmichel.fr/llms.txt) or
226
+ [`llms-full.txt`](https://kanto.arnaudmichel.fr/llms-full.txt), every page in
227
+ one file.
216
228
 
217
229
  ## Accessibility
218
230
 
package/dist/AGENTS.md ADDED
@@ -0,0 +1,157 @@
1
+ # Kanto — instructions for AI agents
2
+
3
+ This project's interface is built with Kanto (`kanto-ds`): accessible web
4
+ components for dashboards, admin tools and forms. Build from them before
5
+ writing a control of your own.
6
+
7
+ ## Before you write any interface
8
+
9
+ 1. Find the component that does the job in the list below. A modal, a select,
10
+ a date picker, a table, a toast: Kanto has it, accessible and themed.
11
+ 2. Read its page before you use it — `node_modules/kanto-ds/dist/docs/<tag>.md`.
12
+ Each page gives the properties, the events, what a screen reader hears and
13
+ when not to use the component.
14
+ 3. Style with the theme's tokens. Never write a colour, a size or a duration.
15
+
16
+ ## Rules
17
+
18
+ - Install with `npm install kanto-ds`, then `import 'kanto-ds';` and
19
+ `import 'kanto-ds/styles.css';` once at the root. Without a bundler, use
20
+ `<script type="module" src="https://cdn.jsdelivr.net/npm/kanto-ds@1"></script>`
21
+ and the stylesheet `https://cdn.jsdelivr.net/npm/kanto-ds@1/dist/styles.css`.
22
+ - Data goes in as properties, not attributes: `options`, `data`,
23
+ `columns`, `items` — anything that is not a string or a boolean — are set
24
+ from script (`table.data = rows`), or as `.data=${rows}` in Lit,
25
+ `:data` in Vue, `[data]` in Angular, a plain prop in React 19.
26
+ - Events are `kt-`-prefixed CustomEvents with the payload in `detail`:
27
+ `select.addEventListener('kt-change', (e) => e.detail.value)`.
28
+ - Style with tokens, never literal colours: `var(--surface-card)`,
29
+ `var(--text-body)`, `var(--color-primary-base)`. Dark is the default
30
+ theme; `<html data-theme="light">` or `"auto"` switches.
31
+ - Theme the whole system with attributes — `data-accent="teal"`,
32
+ `data-font="inter"`, `data-radius="round"`, `data-density="compact"`,
33
+ `data-text-size="large"` — or `setAppearance({ accent: '#e11d48' })`.
34
+ - Icons are Lucide names: `<kt-button icon="plus">`. Kanto ships the common
35
+ ones; register others with `registerIcons({ Rocket })` from
36
+ `kanto-ds/icons`.
37
+
38
+ ## Mistakes agents make, and the fix
39
+
40
+ - **Data set as an attribute.** `<kt-select options="...">` does nothing:
41
+ `options`, `data`, `columns` and `items` are properties.
42
+ - **Listening for `change` or `onChange`.** Kanto fires `kt-change`,
43
+ `kt-input` and the like; the value is in `event.detail`.
44
+ - **Restyling with a wrapper and literal colours.** Use the tokens, the
45
+ appearance attributes on `<html>`, or the `::part()` a page lists.
46
+ - **An icon that draws nothing.** Only the common Lucide icons are registered;
47
+ register any other with `registerIcons` before using its name.
48
+ - **A hand-built control.** Before writing a dropdown, a dialog or a stepper,
49
+ check the list: `kt-dropdown`, `kt-modal`, `kt-steps`.
50
+
51
+ ## Components
52
+
53
+ ### Core
54
+
55
+ - `kt-avatar` — A person or an organisation, as a picture or as their initials.
56
+ - `kt-avatar-group` — The people on something — a project's members, a document's editors — as avatars overlapping in a row, the rest summed up as "+N".
57
+ - `kt-badge` — A compact label: a pill `tag`, a monospaced `code` token, a `category` tinted with a colour of your choosing, or a `count`.
58
+ - `kt-button` — The Kanto action button.
59
+ - `kt-card` — The system's content surface: 12px radius, a 1px `--border-subtle` border, 24px of padding, 20px between its rows.
60
+ - `kt-code` — A block of code on a recessed surface, with its language and a copy button.
61
+ - `kt-copy-button` — Copies a value to the clipboard and says it did: an API key, an install command, a share link.
62
+ - `kt-icon` — A [Lucide](https://lucide.dev)
63
+ - `kt-kbd` — A keyboard shortcut, rendered per platform.
64
+ - `kt-split-button` — One button carrying a menu of related actions.
65
+
66
+ ### Forms
67
+
68
+ - `kt-calendar` — A month calendar to pick a day or a period from, shown in the page.
69
+ - `kt-checkbox` — A checkbox: a choice that applies when the form is submitted.
70
+ - `kt-color-picker` — A colour, chosen from swatches or set freely: a label's colour, a theme's accent, a chart series.
71
+ - `kt-date-input` — A date typed into its parts — day, month and year, each its own segment.
72
+ - `kt-date-picker` — A date field with a calendar, for one day or a period.
73
+ - `kt-drag-drop` — A file drop zone.
74
+ - `kt-form` — A panel grouping related fields.
75
+ - `kt-input` — A single-line text field.
76
+ - `kt-input-menu` — A combobox: type to narrow the list, then pick.
77
+ - `kt-label-input` — A label above a form control, with a red asterisk when it is required.
78
+ - `kt-multi-select` — Several choices from a list: type to narrow it, pick as many as you need.
79
+ - `kt-number-input` — A number field with − and + beside it: a quantity, a seat count, an amount.
80
+ - `kt-otp-input` — A one-time code — the six digits of a sign-in, a verification, a second factor — one box per character.
81
+ - `kt-prompt-input` — The field a person writes to an assistant in: it grows with what is written, sends on Enter, and shows the sending on its own send button.
82
+ - `kt-radio-group` — One choice among a few, all visible at once.
83
+ - `kt-select` — A single-choice dropdown.
84
+ - `kt-slider` — A value picked by sliding along a range: a volume, a threshold, or with `range`, a price between two ends.
85
+ - `kt-textarea` — A multi-line field, with the same borderless fill and outline states as `<kt-input>`.
86
+ - `kt-time-input` — A time of day typed into its parts — hours, minutes and, if asked, seconds.
87
+ - `kt-toggle` — An on/off switch.
88
+
89
+ ### Navigation
90
+
91
+ - `kt-app-shell` — The frame of an application: a header along the top, a sidebar down the side, and the content, which scrolls on its own.
92
+ - `kt-breadcrumb` — A trail showing where the current page sits.
93
+ - `kt-footer` — The site footer: a contentinfo landmark holding the brand and a word about the product, columns of links, actions, and a legal line under them.
94
+ - `kt-header` — The application header: a banner landmark holding the brand, the primary navigation and a row of actions.
95
+ - `kt-page-header` — The block every screen opens with: an overline, a title, a sentence, and the actions that belong to the page rather than to anything on it.
96
+ - `kt-segmented-control` — A small set of mutually exclusive choices, drawn as one inset track with the selected segment raised out of it.
97
+ - `kt-steps` — The steps of a flow — sign-up, checkout, onboarding — and where the reader is in it.
98
+ - `kt-sub-menu-navigation` — The sidebar: uppercase overline section titles over lists of links, to any depth.
99
+ - `kt-tabs` — An underlined tab bar.
100
+ - `kt-toggle-button` — A button that stays pressed.
101
+ - `kt-toggle-button-group` — Joins `<kt-toggle-button>`s into one bar and owns their selection.
102
+ - `kt-user-menu` — The account menu at the end of an application's header: the person's avatar, and under it who is signed in and what they can do.
103
+
104
+ ### Feedback
105
+
106
+ - `kt-alert` — A message that stays on the page.
107
+ - `kt-empty-state` — What a screen shows when it has nothing to show.
108
+ - `kt-progress-bar` — A determinate progress bar.
109
+ - `kt-skeleton` — A loading placeholder, pulsing between `--surface-raised` and `--surface-hover` — the same elevation ramp everything else in Kanto uses, so it reads as part of the page rather than as a grey rectangle pasted onto it.
110
+ - `kt-toast` — A transient notification.
111
+ - `kt-toast-container` — The stack that owns the toasts on screen, and the imperative shortcut to it.
112
+ - `kt-tooltip` — A short label that appears on hover or focus.
113
+
114
+ ### Overlays
115
+
116
+ - `kt-accordion` — A set of `kt-collapsible` sections that open one at a time: opening one folds the one that was open, so the page stays the length of one answer.
117
+ - `kt-collapsible` — A section that folds away.
118
+ - `kt-command-palette` — The palette a product opens on Cmd+K: every action and page, a few keystrokes away.
119
+ - `kt-confirm-dialog` — A centred yes/no overlay for an action worth stopping to think about.
120
+ - `kt-dropdown` — A panel anchored to a trigger.
121
+ - `kt-modal` — A centred dialog for anything that is not a yes/no question.
122
+ - `kt-side-panel` — A drawer sliding in from the right, for viewing or editing one record without losing the list behind it.
123
+ - `kt-tour` — A guided tour: a few steps, each pointing at a part of the page with a word about it — a product's first run, a new feature.
124
+
125
+ ### Data
126
+
127
+ - `kt-chart` — A chart, drawn from the token layer: line, area and bar — stacked, sideways or mixed — plus scatter, bubble, pie, doughnut, polar area and radar.
128
+ - `kt-chat-message` — One message of a conversation with an assistant.
129
+ - `kt-description-list` — Terms and their details — an invoice's number, customer and amount; a person's email and role — the body of a detail page.
130
+ - `kt-meter` — How a fixed total is spent: storage by file type, a budget by category, seats by role.
131
+ - `kt-pagination` — Previous / next paging, with the position between them.
132
+ - `kt-stat` — One headline figure: a label, a value, and how it moved.
133
+ - `kt-table` — A data table: tri-state sorting, single or multiple selection, paging.
134
+ - `kt-timeline` — An ordered run of events on a rail.
135
+ - `kt-tree` — Things inside things — folders and files, an organisation's teams, nested pages — as a tree to open and walk.
136
+
137
+ ### Blocks
138
+
139
+ - `kt-auth-form` — The way into a product: signing in, creating an account, resetting a password, entering a code — one block, four modes.
140
+ - `kt-blog-post` — A post, set to be read: its title, who wrote it and when, a cover, and the body in a measure an eye can follow.
141
+ - `kt-cta` — The ask at the end of a page: a heading, a line, and the button that acts on them.
142
+ - `kt-empty-page` — The page a new account lands on, before there is anything in it: a welcome, and the first steps that fill it — what is done, what is next, and the way to each.
143
+ - `kt-error-page` — The page a person lands on when the one they wanted is not there: not found, broken, or down for maintenance — said plainly, with the way on.
144
+ - `kt-faq` — The questions people ask before they sign up, answered: an accordion under a heading, one answer open at a time.
145
+ - `kt-feature-grid` — What the product does, a feature at a time: an icon, a title and a line, in a grid.
146
+ - `kt-hero` — The top of a page: what the product is, in a heading and a line, and the way in.
147
+ - `kt-logo-cloud` — Who uses it, in their logos: a line of marks under a caption.
148
+ - `kt-newsletter` — A way to hear from you again: a heading, a line, an email field and the button that subscribes it.
149
+ - `kt-post-grid` — The latest posts, each a card that leads to it: a cover, a title, a line, and who wrote it when.
150
+ - `kt-pricing-table` — The plans, side by side: what each costs, what it includes, and the way in — with a switch between monthly and yearly prices when the plans have both.
151
+ - `kt-settings-section` — One part of a settings page: what it is about, the fields that change it, and the button that saves them.
152
+ - `kt-testimonials` — What the people who use it say: a quote, and who said it.
153
+
154
+ ## More
155
+
156
+ - Every page in one file: https://kanto.arnaudmichel.fr/llms-full.txt
157
+ - The documentation, live: https://kanto.arnaudmichel.fr