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.
- package/README.md +26 -14
- package/dist/AGENTS.md +157 -0
- package/dist/cdn/kanto.min.js +4743 -932
- package/dist/chunks/block-Cci-Kff_.js +69 -0
- package/dist/chunks/block-Cci-Kff_.js.map +1 -0
- package/dist/chunks/defaults-yhaR6U65.js +70 -0
- package/dist/chunks/{defaults-Cpeg13O5.js.map → defaults-yhaR6U65.js.map} +1 -1
- package/dist/chunks/heading-DsnZsfg-.js +21 -0
- package/dist/chunks/heading-DsnZsfg-.js.map +1 -0
- package/dist/chunks/{index-TWJzttLX.js → index-1ZFgagWW.js} +37 -12
- package/dist/chunks/index-1ZFgagWW.js.map +1 -0
- package/dist/chunks/indicator-B_Rs8F92.js +49 -0
- package/dist/chunks/indicator-B_Rs8F92.js.map +1 -0
- package/dist/chunks/{kt-calendar-CtwOby1R.js → kt-calendar-SK8eapuy.js} +3 -3
- package/dist/chunks/{kt-calendar-CtwOby1R.js.map → kt-calendar-SK8eapuy.js.map} +1 -1
- package/dist/chunks/kt-color-picker-BoezCAmx.js +365 -0
- package/dist/chunks/kt-color-picker-BoezCAmx.js.map +1 -0
- package/dist/chunks/{kt-element-T0VbIBNp.js → kt-element-DvWtPQ1Y.js} +2 -2
- package/dist/chunks/{kt-element-T0VbIBNp.js.map → kt-element-DvWtPQ1Y.js.map} +1 -1
- package/dist/chunks/motion-ChVUUO7O.js +28 -0
- package/dist/chunks/motion-ChVUUO7O.js.map +1 -0
- package/dist/chunks/numbers-QyecMiSJ.js +9 -0
- package/dist/chunks/numbers-QyecMiSJ.js.map +1 -0
- package/dist/chunks/{segmented-field-BBXR4XFL.js → segmented-field-T_Zo6lc1.js} +2 -2
- package/dist/chunks/{segmented-field-BBXR4XFL.js.map → segmented-field-T_Zo6lc1.js.map} +1 -1
- package/dist/chunks/{typed-date-CPAUNHzr.js → typed-date-CaU0kXoY.js} +2 -2
- package/dist/chunks/{typed-date-CPAUNHzr.js.map → typed-date-CaU0kXoY.js.map} +1 -1
- package/dist/components/blocks/kt-auth-form/kt-auth-form.d.ts +143 -0
- package/dist/components/blocks/kt-auth-form/kt-auth-form.js +368 -0
- package/dist/components/blocks/kt-auth-form/kt-auth-form.js.map +1 -0
- package/dist/components/blocks/kt-blog-post/kt-blog-post.d.ts +75 -0
- package/dist/components/blocks/kt-blog-post/kt-blog-post.js +285 -0
- package/dist/components/blocks/kt-blog-post/kt-blog-post.js.map +1 -0
- package/dist/components/blocks/kt-cta/kt-cta.d.ts +51 -0
- package/dist/components/blocks/kt-cta/kt-cta.js +126 -0
- package/dist/components/blocks/kt-cta/kt-cta.js.map +1 -0
- package/dist/components/blocks/kt-empty-page/kt-empty-page.d.ts +75 -0
- package/dist/components/blocks/kt-empty-page/kt-empty-page.js +245 -0
- package/dist/components/blocks/kt-empty-page/kt-empty-page.js.map +1 -0
- package/dist/components/blocks/kt-error-page/kt-error-page.d.ts +65 -0
- package/dist/components/blocks/kt-error-page/kt-error-page.js +177 -0
- package/dist/components/blocks/kt-error-page/kt-error-page.js.map +1 -0
- package/dist/components/blocks/kt-faq/kt-faq.d.ts +61 -0
- package/dist/components/blocks/kt-faq/kt-faq.js +129 -0
- package/dist/components/blocks/kt-faq/kt-faq.js.map +1 -0
- package/dist/components/blocks/kt-feature-grid/kt-feature-grid.d.ts +59 -0
- package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js +166 -0
- package/dist/components/blocks/kt-feature-grid/kt-feature-grid.js.map +1 -0
- package/dist/components/blocks/kt-hero/kt-hero.d.ts +51 -0
- package/dist/components/blocks/kt-hero/kt-hero.js +138 -0
- package/dist/components/blocks/kt-hero/kt-hero.js.map +1 -0
- package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.d.ts +46 -0
- package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js +100 -0
- package/dist/components/blocks/kt-logo-cloud/kt-logo-cloud.js.map +1 -0
- package/dist/components/blocks/kt-newsletter/kt-newsletter.d.ts +85 -0
- package/dist/components/blocks/kt-newsletter/kt-newsletter.js +247 -0
- package/dist/components/blocks/kt-newsletter/kt-newsletter.js.map +1 -0
- package/dist/components/blocks/kt-post-grid/kt-post-grid.d.ts +73 -0
- package/dist/components/blocks/kt-post-grid/kt-post-grid.js +249 -0
- package/dist/components/blocks/kt-post-grid/kt-post-grid.js.map +1 -0
- package/dist/components/blocks/kt-pricing-table/kt-pricing-table.d.ts +102 -0
- package/dist/components/blocks/kt-pricing-table/kt-pricing-table.js +307 -0
- package/dist/components/blocks/kt-pricing-table/kt-pricing-table.js.map +1 -0
- package/dist/components/blocks/kt-settings-section/kt-settings-section.d.ts +52 -0
- package/dist/components/blocks/kt-settings-section/kt-settings-section.js +158 -0
- package/dist/components/blocks/kt-settings-section/kt-settings-section.js.map +1 -0
- package/dist/components/blocks/kt-testimonials/kt-testimonials.d.ts +56 -0
- package/dist/components/blocks/kt-testimonials/kt-testimonials.js +161 -0
- package/dist/components/blocks/kt-testimonials/kt-testimonials.js.map +1 -0
- package/dist/components/core/kt-avatar/kt-avatar.js +2 -2
- package/dist/components/core/kt-avatar-group/kt-avatar-group.d.ts +42 -0
- package/dist/components/core/kt-avatar-group/kt-avatar-group.js +97 -0
- package/dist/components/core/kt-avatar-group/kt-avatar-group.js.map +1 -0
- package/dist/components/core/kt-badge/kt-badge.js +2 -2
- package/dist/components/core/kt-button/flights.d.ts +27 -0
- package/dist/components/core/kt-button/kt-button.d.ts +52 -1
- package/dist/components/core/kt-button/kt-button.js +353 -77
- package/dist/components/core/kt-button/kt-button.js.map +1 -1
- package/dist/components/core/kt-button/morph.d.ts +27 -0
- package/dist/components/core/kt-card/kt-card.js +1 -1
- package/dist/components/core/kt-code/kt-code.d.ts +2 -1
- package/dist/components/core/kt-code/kt-code.js +52 -37
- package/dist/components/core/kt-code/kt-code.js.map +1 -1
- package/dist/components/core/kt-copy-button/kt-copy-button.d.ts +47 -0
- package/dist/components/core/kt-copy-button/kt-copy-button.js +74 -0
- package/dist/components/core/kt-copy-button/kt-copy-button.js.map +1 -0
- package/dist/components/core/kt-icon/kt-icon.js +2 -2
- package/dist/components/core/kt-kbd/kt-kbd.js +1 -1
- package/dist/components/core/kt-split-button/kt-split-button.js +2 -2
- package/dist/components/data/kt-chart/kt-chart.js +2 -2
- package/dist/components/data/kt-chat-message/kt-chat-message.d.ts +60 -0
- package/dist/components/data/kt-chat-message/kt-chat-message.js +204 -0
- package/dist/components/data/kt-chat-message/kt-chat-message.js.map +1 -0
- package/dist/components/data/kt-description-list/kt-description-list.d.ts +56 -0
- package/dist/components/data/kt-description-list/kt-description-list.js +120 -0
- package/dist/components/data/kt-description-list/kt-description-list.js.map +1 -0
- package/dist/components/data/kt-meter/kt-meter.js +8 -6
- package/dist/components/data/kt-meter/kt-meter.js.map +1 -1
- package/dist/components/data/kt-pagination/kt-pagination.js +2 -2
- package/dist/components/data/kt-stat/kt-stat.d.ts +3 -1
- package/dist/components/data/kt-stat/kt-stat.js +31 -16
- package/dist/components/data/kt-stat/kt-stat.js.map +1 -1
- package/dist/components/data/kt-table/kt-table.js +2 -2
- package/dist/components/data/kt-timeline/kt-timeline.js +2 -2
- package/dist/components/data/kt-timeline/kt-timeline.js.map +1 -1
- package/dist/components/data/kt-tree/kt-tree.d.ts +69 -0
- package/dist/components/data/kt-tree/kt-tree.js +208 -0
- package/dist/components/data/kt-tree/kt-tree.js.map +1 -0
- package/dist/components/feedback/kt-alert/kt-alert.js +2 -2
- package/dist/components/feedback/kt-empty-state/kt-empty-state.js +1 -1
- package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js +1 -1
- package/dist/components/feedback/kt-skeleton/kt-skeleton.js +1 -1
- package/dist/components/feedback/kt-toast/kt-toast.js +2 -2
- package/dist/components/feedback/kt-toast-container/kt-toast-container.d.ts +8 -1
- package/dist/components/feedback/kt-toast-container/kt-toast-container.js +65 -26
- package/dist/components/feedback/kt-toast-container/kt-toast-container.js.map +1 -1
- package/dist/components/feedback/kt-tooltip/kt-tooltip.js +1 -1
- package/dist/components/forms/kt-calendar/kt-calendar.js +3 -3
- package/dist/components/forms/kt-checkbox/kt-checkbox.d.ts +2 -0
- package/dist/components/forms/kt-checkbox/kt-checkbox.js +19 -8
- package/dist/components/forms/kt-checkbox/kt-checkbox.js.map +1 -1
- package/dist/components/forms/kt-color-picker/kt-color-picker.d.ts +66 -0
- package/dist/components/forms/kt-color-picker/kt-color-picker.js +14 -0
- package/dist/components/forms/kt-color-picker/kt-color-picker.js.map +1 -0
- package/dist/components/forms/kt-date-input/kt-date-input.js +5 -5
- package/dist/components/forms/kt-date-picker/kt-date-picker.js +4 -4
- package/dist/components/forms/kt-drag-drop/kt-drag-drop.js +2 -2
- package/dist/components/forms/kt-form/kt-form.js +2 -2
- package/dist/components/forms/kt-input/kt-input.js +2 -2
- package/dist/components/forms/kt-input-menu/kt-input-menu.js +2 -2
- package/dist/components/forms/kt-label-input/kt-label-input.js +1 -1
- package/dist/components/forms/kt-multi-select/kt-multi-select.js +2 -2
- package/dist/components/forms/kt-number-input/kt-number-input.d.ts +92 -0
- package/dist/components/forms/kt-number-input/kt-number-input.js +366 -0
- package/dist/components/forms/kt-number-input/kt-number-input.js.map +1 -0
- package/dist/components/forms/kt-otp-input/kt-otp-input.d.ts +74 -0
- package/dist/components/forms/kt-otp-input/kt-otp-input.js +232 -0
- package/dist/components/forms/kt-otp-input/kt-otp-input.js.map +1 -0
- package/dist/components/forms/kt-prompt-input/kt-prompt-input.d.ts +74 -0
- package/dist/components/forms/kt-prompt-input/kt-prompt-input.js +213 -0
- package/dist/components/forms/kt-prompt-input/kt-prompt-input.js.map +1 -0
- package/dist/components/forms/kt-radio-group/kt-radio-group.js +2 -2
- package/dist/components/forms/kt-select/kt-select.js +2 -2
- package/dist/components/forms/kt-slider/kt-slider.d.ts +69 -0
- package/dist/components/forms/kt-slider/kt-slider.js +252 -0
- package/dist/components/forms/kt-slider/kt-slider.js.map +1 -0
- package/dist/components/forms/kt-textarea/kt-textarea.js +2 -2
- package/dist/components/forms/kt-time-input/kt-time-input.js +3 -3
- package/dist/components/forms/kt-toggle/kt-toggle.js +1 -1
- package/dist/components/navigation/kt-app-shell/kt-app-shell.d.ts +85 -0
- package/dist/components/navigation/kt-app-shell/kt-app-shell.js +220 -0
- package/dist/components/navigation/kt-app-shell/kt-app-shell.js.map +1 -0
- package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js +2 -2
- package/dist/components/navigation/kt-footer/kt-footer.d.ts +82 -0
- package/dist/components/navigation/kt-footer/kt-footer.js +220 -0
- package/dist/components/navigation/kt-footer/kt-footer.js.map +1 -0
- package/dist/components/navigation/kt-header/kt-header.js +2 -2
- package/dist/components/navigation/kt-page-header/kt-page-header.js +2 -2
- package/dist/components/navigation/kt-page-header/kt-page-header.js.map +1 -1
- package/dist/components/navigation/kt-segmented-control/kt-segmented-control.d.ts +1 -0
- package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js +81 -44
- package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js.map +1 -1
- package/dist/components/navigation/kt-steps/kt-steps.d.ts +68 -0
- package/dist/components/navigation/kt-steps/kt-steps.js +286 -0
- package/dist/components/navigation/kt-steps/kt-steps.js.map +1 -0
- package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js +3 -3
- package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js.map +1 -1
- package/dist/components/navigation/kt-tabs/kt-tabs.d.ts +1 -0
- package/dist/components/navigation/kt-tabs/kt-tabs.js +92 -64
- package/dist/components/navigation/kt-tabs/kt-tabs.js.map +1 -1
- package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js +1 -1
- package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js +2 -2
- package/dist/components/navigation/kt-user-menu/kt-user-menu.d.ts +86 -0
- package/dist/components/navigation/kt-user-menu/kt-user-menu.js +298 -0
- package/dist/components/navigation/kt-user-menu/kt-user-menu.js.map +1 -0
- package/dist/components/overlays/kt-accordion/kt-accordion.d.ts +47 -0
- package/dist/components/overlays/kt-accordion/kt-accordion.js +80 -0
- package/dist/components/overlays/kt-accordion/kt-accordion.js.map +1 -0
- package/dist/components/overlays/kt-collapsible/kt-collapsible.d.ts +17 -1
- package/dist/components/overlays/kt-collapsible/kt-collapsible.js +87 -32
- package/dist/components/overlays/kt-collapsible/kt-collapsible.js.map +1 -1
- package/dist/components/overlays/kt-command-palette/kt-command-palette.d.ts +87 -0
- package/dist/components/overlays/kt-command-palette/kt-command-palette.js +370 -0
- package/dist/components/overlays/kt-command-palette/kt-command-palette.js.map +1 -0
- package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js +2 -2
- package/dist/components/overlays/kt-dropdown/kt-dropdown.js +2 -2
- package/dist/components/overlays/kt-modal/kt-modal.js +2 -2
- package/dist/components/overlays/kt-side-panel/kt-side-panel.js +2 -2
- package/dist/components/overlays/kt-tour/kt-tour.d.ts +77 -0
- package/dist/components/overlays/kt-tour/kt-tour.js +200 -0
- package/dist/components/overlays/kt-tour/kt-tour.js.map +1 -0
- package/dist/custom-elements.json +16427 -8061
- package/dist/docs/kt-accordion.md +49 -0
- package/dist/docs/kt-app-shell.md +89 -0
- package/dist/docs/kt-auth-form.md +111 -0
- package/dist/docs/kt-avatar-group.md +49 -0
- package/dist/docs/kt-blog-post.md +77 -0
- package/dist/docs/kt-button.md +21 -0
- package/dist/docs/kt-chat-message.md +68 -0
- package/dist/docs/kt-color-picker.md +67 -0
- package/dist/docs/kt-command-palette.md +99 -0
- package/dist/docs/kt-copy-button.md +50 -0
- package/dist/docs/kt-cta.md +45 -0
- package/dist/docs/kt-description-list.md +58 -0
- package/dist/docs/kt-empty-page.md +92 -0
- package/dist/docs/kt-error-page.md +64 -0
- package/dist/docs/kt-faq.md +54 -0
- package/dist/docs/kt-feature-grid.md +53 -0
- package/dist/docs/kt-footer.md +115 -0
- package/dist/docs/kt-hero.md +53 -0
- package/dist/docs/kt-logo-cloud.md +41 -0
- package/dist/docs/kt-newsletter.md +69 -0
- package/dist/docs/kt-number-input.md +77 -0
- package/dist/docs/kt-otp-input.md +68 -0
- package/dist/docs/kt-post-grid.md +66 -0
- package/dist/docs/kt-pricing-table.md +101 -0
- package/dist/docs/kt-prompt-input.md +86 -0
- package/dist/docs/kt-settings-section.md +65 -0
- package/dist/docs/kt-slider.md +76 -0
- package/dist/docs/kt-steps.md +79 -0
- package/dist/docs/kt-testimonials.md +52 -0
- package/dist/docs/kt-tour.md +75 -0
- package/dist/docs/kt-tree.md +83 -0
- package/dist/docs/kt-user-menu.md +77 -0
- package/dist/icons/defaults.d.ts +2 -0
- package/dist/icons/index.js +1 -1
- package/dist/index.d.ts +56 -0
- package/dist/index.js +225 -284
- package/dist/index.js.map +1 -1
- package/dist/internal/block.d.ts +23 -0
- package/dist/internal/command-search.d.ts +27 -0
- package/dist/internal/heading.d.ts +8 -0
- package/dist/internal/indicator.d.ts +34 -0
- package/dist/internal/motion.d.ts +25 -0
- package/dist/internal/numbers.d.ts +2 -0
- package/dist/internal/strings.d.ts +36 -0
- package/dist/react/index.d.ts +165 -0
- package/dist/react/index.js +420 -171
- package/dist/react/index.js.map +1 -1
- package/dist/react/jsx.d.ts +128 -1
- package/dist/strings/index.js +1 -1
- package/dist/tokens/base.css +35 -2
- package/dist/vscode.css-custom-data.json +165 -19
- package/dist/vscode.html-custom-data.json +1023 -149
- package/dist/vue/index.d.ts +62 -0
- package/dist/vue/index.js +39 -8
- package/dist/vue/index.js.map +1 -1
- package/dist/web-types.json +3238 -836
- package/package.json +128 -3
- package/dist/chunks/defaults-Cpeg13O5.js +0 -68
- package/dist/chunks/index-TWJzttLX.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Kanto
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Eighty web components for dashboards, admin tools and forms — in your
|
|
4
4
|
colours, in any framework.**
|
|
5
5
|
|
|
6
6
|
[](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
|
-
|
|
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
|
|
213
|
-
rules that make code right the first time
|
|
214
|
-
|
|
215
|
-
|
|
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
|