kanto-ds 1.6.1 → 1.8.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 (154) hide show
  1. package/README.md +66 -13
  2. package/dist/cdn/kanto.min.js +7272 -0
  3. package/dist/chunks/{floating-B33g-M_1.js → floating-C9RLa6cZ.js} +2 -2
  4. package/dist/chunks/floating-C9RLa6cZ.js.map +1 -0
  5. package/dist/chunks/{index-TWJzttLX.js → index-BEWmAE0T.js} +21 -7
  6. package/dist/chunks/index-BEWmAE0T.js.map +1 -0
  7. package/dist/chunks/{kt-calendar-CtwOby1R.js → kt-calendar-D72xa8qr.js} +3 -3
  8. package/dist/chunks/{kt-calendar-CtwOby1R.js.map → kt-calendar-D72xa8qr.js.map} +1 -1
  9. package/dist/chunks/{kt-element-T0VbIBNp.js → kt-element-COgh6Yr1.js} +2 -2
  10. package/dist/chunks/{kt-element-T0VbIBNp.js.map → kt-element-COgh6Yr1.js.map} +1 -1
  11. package/dist/chunks/numbers-QyecMiSJ.js +9 -0
  12. package/dist/chunks/numbers-QyecMiSJ.js.map +1 -0
  13. package/dist/chunks/{segmented-field-BBXR4XFL.js → segmented-field-BCjCGF4I.js} +2 -2
  14. package/dist/chunks/{segmented-field-BBXR4XFL.js.map → segmented-field-BCjCGF4I.js.map} +1 -1
  15. package/dist/chunks/{typed-date-CPAUNHzr.js → typed-date-Z3vcUJbb.js} +2 -2
  16. package/dist/chunks/{typed-date-CPAUNHzr.js.map → typed-date-Z3vcUJbb.js.map} +1 -1
  17. package/dist/components/core/kt-avatar/kt-avatar.js +2 -2
  18. package/dist/components/core/kt-badge/kt-badge.js +2 -2
  19. package/dist/components/core/kt-button/kt-button.js +1 -1
  20. package/dist/components/core/kt-card/kt-card.js +1 -1
  21. package/dist/components/core/kt-code/kt-code.js +2 -2
  22. package/dist/components/core/kt-icon/kt-icon.js +1 -1
  23. package/dist/components/core/kt-kbd/kt-kbd.js +1 -1
  24. package/dist/components/core/kt-split-button/kt-split-button.js +2 -2
  25. package/dist/components/data/kt-chart/kt-chart.js +2 -2
  26. package/dist/components/data/kt-meter/kt-meter.js +1 -1
  27. package/dist/components/data/kt-pagination/kt-pagination.js +2 -2
  28. package/dist/components/data/kt-stat/kt-stat.js +1 -1
  29. package/dist/components/data/kt-table/kt-table.js +2 -2
  30. package/dist/components/data/kt-timeline/kt-timeline.js +1 -1
  31. package/dist/components/feedback/kt-alert/kt-alert.js +2 -2
  32. package/dist/components/feedback/kt-empty-state/kt-empty-state.js +1 -1
  33. package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js +1 -1
  34. package/dist/components/feedback/kt-skeleton/kt-skeleton.js +1 -1
  35. package/dist/components/feedback/kt-toast/kt-toast.js +2 -2
  36. package/dist/components/feedback/kt-toast-container/kt-toast-container.js +1 -1
  37. package/dist/components/feedback/kt-tooltip/kt-tooltip.js +1 -1
  38. package/dist/components/forms/kt-calendar/kt-calendar.js +3 -3
  39. package/dist/components/forms/kt-checkbox/kt-checkbox.js +2 -2
  40. package/dist/components/forms/kt-date-input/kt-date-input.js +6 -6
  41. package/dist/components/forms/kt-date-picker/kt-date-picker.js +5 -5
  42. package/dist/components/forms/kt-drag-drop/kt-drag-drop.js +2 -2
  43. package/dist/components/forms/kt-form/kt-form.js +2 -2
  44. package/dist/components/forms/kt-input/kt-input.js +3 -3
  45. package/dist/components/forms/kt-input-menu/kt-input-menu.js +3 -3
  46. package/dist/components/forms/kt-label-input/kt-label-input.js +1 -1
  47. package/dist/components/forms/kt-multi-select/kt-multi-select.js +3 -3
  48. package/dist/components/forms/kt-number-input/kt-number-input.d.ts +89 -0
  49. package/dist/components/forms/kt-number-input/kt-number-input.js +350 -0
  50. package/dist/components/forms/kt-number-input/kt-number-input.js.map +1 -0
  51. package/dist/components/forms/kt-radio-group/kt-radio-group.js +2 -2
  52. package/dist/components/forms/kt-select/kt-select.js +3 -3
  53. package/dist/components/forms/kt-slider/kt-slider.d.ts +69 -0
  54. package/dist/components/forms/kt-slider/kt-slider.js +252 -0
  55. package/dist/components/forms/kt-slider/kt-slider.js.map +1 -0
  56. package/dist/components/forms/kt-textarea/kt-textarea.js +2 -2
  57. package/dist/components/forms/kt-time-input/kt-time-input.js +3 -3
  58. package/dist/components/forms/kt-toggle/kt-toggle.js +1 -1
  59. package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js +2 -2
  60. package/dist/components/navigation/kt-header/kt-header.js +2 -2
  61. package/dist/components/navigation/kt-page-header/kt-page-header.js +1 -1
  62. package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js +2 -2
  63. package/dist/components/navigation/kt-steps/kt-steps.d.ts +65 -0
  64. package/dist/components/navigation/kt-steps/kt-steps.js +244 -0
  65. package/dist/components/navigation/kt-steps/kt-steps.js.map +1 -0
  66. package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js +2 -2
  67. package/dist/components/navigation/kt-tabs/kt-tabs.js +1 -1
  68. package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js +1 -1
  69. package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js +2 -2
  70. package/dist/components/overlays/kt-collapsible/kt-collapsible.js +1 -1
  71. package/dist/components/overlays/kt-command-palette/kt-command-palette.d.ts +87 -0
  72. package/dist/components/overlays/kt-command-palette/kt-command-palette.js +370 -0
  73. package/dist/components/overlays/kt-command-palette/kt-command-palette.js.map +1 -0
  74. package/dist/components/overlays/kt-confirm-dialog/kt-confirm-dialog.js +2 -2
  75. package/dist/components/overlays/kt-dropdown/kt-dropdown.js +3 -3
  76. package/dist/components/overlays/kt-modal/kt-modal.js +2 -2
  77. package/dist/components/overlays/kt-side-panel/kt-side-panel.js +2 -2
  78. package/dist/custom-elements.json +3279 -1754
  79. package/dist/docs/kt-alert.md +52 -0
  80. package/dist/docs/kt-avatar.md +46 -0
  81. package/dist/docs/kt-badge.md +104 -0
  82. package/dist/docs/kt-breadcrumb.md +53 -0
  83. package/dist/docs/kt-button.md +72 -0
  84. package/dist/docs/kt-calendar.md +98 -0
  85. package/dist/docs/kt-card.md +93 -0
  86. package/dist/docs/kt-chart.md +230 -0
  87. package/dist/docs/kt-checkbox.md +65 -0
  88. package/dist/docs/kt-code.md +88 -0
  89. package/dist/docs/kt-collapsible.md +50 -0
  90. package/dist/docs/kt-command-palette.md +99 -0
  91. package/dist/docs/kt-confirm-dialog.md +52 -0
  92. package/dist/docs/kt-date-input.md +97 -0
  93. package/dist/docs/kt-date-picker.md +116 -0
  94. package/dist/docs/kt-drag-drop.md +85 -0
  95. package/dist/docs/kt-dropdown.md +65 -0
  96. package/dist/docs/kt-empty-state.md +36 -0
  97. package/dist/docs/kt-form.md +93 -0
  98. package/dist/docs/kt-header.md +100 -0
  99. package/dist/docs/kt-icon.md +68 -0
  100. package/dist/docs/kt-input-menu.md +90 -0
  101. package/dist/docs/kt-input.md +137 -0
  102. package/dist/docs/kt-kbd.md +44 -0
  103. package/dist/docs/kt-label-input.md +54 -0
  104. package/dist/docs/kt-meter.md +79 -0
  105. package/dist/docs/kt-modal.md +62 -0
  106. package/dist/docs/kt-multi-select.md +115 -0
  107. package/dist/docs/kt-number-input.md +77 -0
  108. package/dist/docs/kt-page-header.md +53 -0
  109. package/dist/docs/kt-pagination.md +36 -0
  110. package/dist/docs/kt-progress-bar.md +66 -0
  111. package/dist/docs/kt-radio-group.md +73 -0
  112. package/dist/docs/kt-segmented-control.md +70 -0
  113. package/dist/docs/kt-select.md +80 -0
  114. package/dist/docs/kt-side-panel.md +59 -0
  115. package/dist/docs/kt-skeleton.md +46 -0
  116. package/dist/docs/kt-slider.md +76 -0
  117. package/dist/docs/kt-split-button.md +105 -0
  118. package/dist/docs/kt-stat.md +57 -0
  119. package/dist/docs/kt-steps.md +79 -0
  120. package/dist/docs/kt-sub-menu-navigation.md +118 -0
  121. package/dist/docs/kt-table.md +179 -0
  122. package/dist/docs/kt-tabs.md +87 -0
  123. package/dist/docs/kt-textarea.md +59 -0
  124. package/dist/docs/kt-time-input.md +88 -0
  125. package/dist/docs/kt-timeline.md +63 -0
  126. package/dist/docs/kt-toast-container.md +69 -0
  127. package/dist/docs/kt-toast.md +41 -0
  128. package/dist/docs/kt-toggle-button-group.md +67 -0
  129. package/dist/docs/kt-toggle-button.md +52 -0
  130. package/dist/docs/kt-toggle.md +47 -0
  131. package/dist/docs/kt-tooltip.md +68 -0
  132. package/dist/index.d.ts +6 -0
  133. package/dist/index.js +105 -97
  134. package/dist/index.js.map +1 -1
  135. package/dist/internal/command-search.d.ts +27 -0
  136. package/dist/internal/floating.d.ts +4 -0
  137. package/dist/internal/numbers.d.ts +2 -0
  138. package/dist/internal/strings.d.ts +14 -0
  139. package/dist/react/index.d.ts +31 -0
  140. package/dist/react/index.js +199 -164
  141. package/dist/react/index.js.map +1 -1
  142. package/dist/react/jsx.d.ts +27 -1
  143. package/dist/strings/index.js +1 -1
  144. package/dist/tokens/base.css +4 -0
  145. package/dist/tokens/colors.css +5 -2
  146. package/dist/vscode.css-custom-data.json +26 -2
  147. package/dist/vscode.html-custom-data.json +120 -12
  148. package/dist/vue/index.d.ts +8 -0
  149. package/dist/vue/index.js +12 -8
  150. package/dist/vue/index.js.map +1 -1
  151. package/dist/web-types.json +347 -39
  152. package/package.json +41 -6
  153. package/dist/chunks/floating-B33g-M_1.js.map +0 -1
  154. package/dist/chunks/index-TWJzttLX.js.map +0 -1
package/README.md CHANGED
@@ -1,10 +1,27 @@
1
1
  # Kanto
2
2
 
3
- **A design system for data-dense product interfaces** — dashboards, admin
4
- tools, forms.
3
+ **Fifty-three web components for dashboards, admin tools and forms — in your
4
+ colours, in any framework.**
5
5
 
6
- The components are standard custom elements, so they run in React, Vue,
7
- Angular, Svelte or plain HTML without a per-framework rewrite.
6
+ [![npm](https://img.shields.io/npm/v/kanto-ds?color=5f5dea&label=npm)](https://www.npmjs.com/package/kanto-ds)
7
+ [![CI](https://github.com/MrArnaudMichel/kanto/actions/workflows/ci.yml/badge.svg)](https://github.com/MrArnaudMichel/kanto/actions/workflows/ci.yml)
8
+ [![Accessibility: axe, both themes](https://img.shields.io/badge/accessibility-axe%20tested%2C%20both%20themes-5f5dea)](#accessibility)
9
+ [![License: MIT](https://img.shields.io/badge/license-MIT-5f5dea)](LICENSE)
10
+
11
+ **[Open the live docs and playground](https://kanto.arnaudmichel.fr).** Pick a
12
+ colour, a font and a density, watch a real screen change, and copy the one
13
+ line that does it in your project — or open it on StackBlitz.
14
+
15
+ Or start from a whole screen: the site's
16
+ **[templates](https://kanto.arnaudmichel.fr/#/templates/dashboard)** — sign-in,
17
+ dashboard, settings, onboarding, pricing — are ready to copy or to run on
18
+ StackBlitz.
19
+
20
+ They are standard custom elements, so the same `<kt-button>` runs in React,
21
+ Vue, Angular, Svelte and plain HTML. Two complete themes, every element audited by axe in both and driven
22
+ by the keyboard in its tests, and no framework to adopt.
23
+
24
+ ## Start
8
25
 
9
26
  ```bash
10
27
  npm install kanto-ds
@@ -23,6 +40,37 @@ import 'kanto-ds/styles.css';
23
40
  </kt-card>
24
41
  ```
25
42
 
43
+ No bundler? One stylesheet and one script tag:
44
+
45
+ ```html
46
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kanto-ds@1/dist/styles.css" />
47
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kanto-ds@1"></script>
48
+ ```
49
+
50
+ Per-framework setup — React 18 and 19, Vue, Angular, Svelte — is in
51
+ **[docs/frameworks.md](docs/frameworks.md)**.
52
+
53
+ ## Make it yours
54
+
55
+ Colour, font, corners, density and text size are each one attribute, on the
56
+ page or on any container:
57
+
58
+ ```html
59
+ <html data-accent="teal" data-radius="round" data-density="compact"></html>
60
+ ```
61
+
62
+ Or any colour at all — Kanto solves the shades for it and keeps every text at
63
+ 4.5:1 in both themes:
64
+
65
+ ```js
66
+ import { setAppearance } from 'kanto-ds';
67
+
68
+ setAppearance({ accent: '#e11d48', radius: 'round', textSize: 'large' });
69
+ ```
70
+
71
+ Fonts other than Kanto's own (`data-font="inter"`, `"plex"`, `"geist"`) need
72
+ the face loaded by your page, from Google Fonts or your own files.
73
+
26
74
  ---
27
75
 
28
76
  ## Showcase
@@ -100,16 +148,16 @@ Full details in **[src/tokens/README.md](src/tokens/README.md)**.
100
148
 
101
149
  ## Components
102
150
 
103
- Forty-nine elements. Each has a page beside its source.
151
+ Fifty-three elements. Each has a page beside its source.
104
152
 
105
- | Group | Elements |
106
- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
107
- | **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) |
108
- | **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) |
109
- | **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) |
110
- | **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) |
111
- | **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) |
112
- | **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) · [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) |
156
+ | **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) · [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** | [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) · [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) · [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) · [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) |
113
161
 
114
162
  Import the whole system, or one element:
115
163
 
@@ -166,6 +214,11 @@ editor data generated from it, so plain HTML gets completion and hover docs:
166
214
 
167
215
  - **Storybook** and API-docs generators take `kanto-ds/custom-elements.json`.
168
216
 
217
+ **AI assistants** read [`llms.txt`](https://kanto.arnaudmichel.fr/llms.txt): the
218
+ rules that make code right the first time and a link to every component's
219
+ page. In a project, each page also ships at
220
+ `node_modules/kanto-ds/dist/docs/<tag>.md`.
221
+
169
222
  ## Accessibility
170
223
 
171
224
  Not a phase at the end; it is why several of these components exist in this