kanto-ds 1.1.0 → 1.3.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "kanto-ds",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -587,7 +587,7 @@
             {
               "name": "menu-label",
               "description": "Accessible name of the caret, which has no text of its own.",
-              "value": { "type": "string", "default": "'More actions'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "preferred-placement",
@@ -596,7 +596,7 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No actions'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -636,14 +636,14 @@
               {
                 "name": "menuLabel",
                 "description": "Accessible name of the caret, which has no text of its own.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "preferredPlacement",
                 "description": "Where to put the menu when there is room on both sides.",
                 "type": "KtDropdownPlacement"
               },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               {
                 "name": "isOpen",
                 "description": "Whether the menu is showing.",
@@ -716,12 +716,12 @@
             {
               "name": "center-label",
               "description": "Names the total in the middle of a doughnut.",
-              "value": { "type": "string", "default": "'Total'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "total-label",
               "description": "Names the sum in a stacked chart's tooltip and table.",
-              "value": { "type": "string", "default": "'Total'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "label",
@@ -802,12 +802,12 @@
               {
                 "name": "centerLabel",
                 "description": "Names the total in the middle of a doughnut.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "totalLabel",
                 "description": "Names the sum in a stacked chart's tooltip and table.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "label",
@@ -918,7 +918,7 @@
             },
             {
               "name": "label",
-              "value": { "type": "string", "default": "'Pagination'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -935,7 +935,7 @@
                 "type": "number"
               },
               { "name": "totalPages", "type": "number" },
-              { "name": "label", "type": "string" }
+              { "name": "label", "type": "string | undefined" }
             ],
             "events": [
               {
@@ -1067,11 +1067,11 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No data to display'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "loading-text",
-              "value": { "type": "string", "default": "'Loading…'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "label",
@@ -1122,8 +1122,8 @@
                 "description": "Renders a cell. Return `undefined` to fall back to the raw value.",
                 "type": "KtCellRenderer | undefined"
               },
-              { "name": "emptyText", "type": "string" },
-              { "name": "loadingText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
+              { "name": "loadingText", "type": "string | undefined" },
               {
                 "name": "label",
                 "description": "Accessible name for the table.",
@@ -1656,12 +1656,12 @@
             {
               "name": "heading",
               "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
-              "value": { "type": "string", "default": "'Drag and drop or'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "link-text",
               "description": "The clickable-looking part of the prompt.",
-              "value": { "type": "string", "default": "'browse your files'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "recommended-size",
@@ -1711,12 +1711,12 @@
               {
                 "name": "heading",
                 "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "linkText",
                 "description": "The clickable-looking part of the prompt.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "recommendedSize",
@@ -2007,7 +2007,7 @@
             { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No options available'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2030,7 +2030,7 @@
               { "name": "required", "type": "boolean" },
               { "name": "error", "type": "string" },
               { "name": "label", "type": "string" },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               { "name": "selectedOption", "type": "KtOption | undefined" }
             ],
             "events": [
@@ -2093,7 +2093,7 @@
             },
             {
               "name": "placeholder",
-              "value": { "type": "string", "default": "'Select'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             { "name": "name", "value": { "type": "string", "default": "''" } },
             {
@@ -2126,7 +2126,7 @@
             {
               "name": "empty-text",
               "description": "Shown when `options` is empty.",
-              "value": { "type": "string", "default": "'No options available'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2147,7 +2147,7 @@
                 "description": "The selected option's id, or `null`.",
                 "type": "string | number | null"
               },
-              { "name": "placeholder", "type": "string" },
+              { "name": "placeholder", "type": "string | undefined" },
               { "name": "name", "type": "string" },
               { "name": "size", "type": "KtSelectSize" },
               { "name": "disabled", "type": "boolean" },
@@ -2170,7 +2170,7 @@
               {
                 "name": "emptyText",
                 "description": "Shown when `options` is empty.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "selectedOption",
@@ -2349,7 +2349,7 @@
             {
               "name": "label",
               "description": "Accessible name for the navigation landmark.",
-              "value": { "type": "string", "default": "'Breadcrumb'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2368,7 +2368,7 @@
               {
                 "name": "label",
                 "description": "Accessible name for the navigation landmark.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [
@@ -2590,7 +2590,7 @@
             },
             {
               "name": "label",
-              "value": { "type": "string", "default": "'Secondary navigation'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "flush",
@@ -2621,7 +2621,7 @@
                 "description": "The href of the current page. Marks the matching link active.",
                 "type": "string"
               },
-              { "name": "label", "type": "string" },
+              { "name": "label", "type": "string | undefined" },
               {
                 "name": "flush",
                 "description": "Drops the card background, for a sidebar that owns its own surface.",
@@ -2907,7 +2907,7 @@
             },
             {
               "name": "heading",
-              "value": { "type": "string", "default": "'Are you sure?'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "message",
@@ -2915,11 +2915,11 @@
             },
             {
               "name": "confirm-label",
-              "value": { "type": "string", "default": "'Confirm'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "cancel-label",
-              "value": { "type": "string", "default": "'Cancel'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "variant",
@@ -2946,10 +2946,10 @@
           "js": {
             "properties": [
               { "name": "open", "type": "boolean" },
-              { "name": "heading", "type": "string" },
+              { "name": "heading", "type": "string | undefined" },
               { "name": "message", "type": "string" },
-              { "name": "confirmLabel", "type": "string" },
-              { "name": "cancelLabel", "type": "string" },
+              { "name": "confirmLabel", "type": "string | undefined" },
+              { "name": "cancelLabel", "type": "string | undefined" },
               {
                 "name": "variant",
                 "description": "`danger` gives the confirm button the solid red treatment.",
@@ -2994,7 +2994,7 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No results'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3035,7 +3035,7 @@
                 "type": "KtDropdownAlign"
               },
               { "name": "disabled", "type": "boolean" },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               {
                 "name": "isOpen",
                 "description": "Whether the panel is showing.",
@@ -3135,7 +3135,7 @@
             {
               "name": "eyebrow",
               "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
-              "value": { "type": "string", "default": "'Details'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "heading",
@@ -3163,7 +3163,7 @@
               {
                 "name": "eyebrow",
                 "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
-                "type": "string"
+                "type": "string | undefined"
               },
               { "name": "heading", "type": "string" },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kanto-ds",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Framework-agnostic design system for data-dense product interfaces.",
   "keywords": [
     "design-system",
@@ -11,7 +11,9 @@
     "dark-theme"
   ],
   "homepage": "https://kanto.arnaudmichel.fr",
-  "bugs": "https://github.com/MrArnaudMichel/kanto/issues",
+  "bugs": {
+    "url": "https://github.com/MrArnaudMichel/kanto/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MrArnaudMichel/kanto.git"
@@ -51,10 +53,18 @@
       "types": "./dist/icons/index.d.ts",
       "default": "./dist/icons/index.js"
     },
+    "./strings": {
+      "types": "./dist/strings/index.d.ts",
+      "default": "./dist/strings/index.js"
+    },
     "./react": {
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
     },
+    "./react/jsx": {
+      "types": "./dist/react/jsx.d.ts",
+      "default": "./dist/react/jsx.js"
+    },
     "./vue": {
       "types": "./dist/vue/index.d.ts",
       "default": "./dist/vue/index.js"
@@ -260,26 +270,26 @@
     "format:check": "prettier --check .",
     "clean": "node -e \"fs.rmSync(dist,{recursive:true,force:true})\"",
     "check:exports": "node scripts/check-exports.js",
-    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run build:demo",
+    "check:size": "node scripts/check-size.js",
+    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run check:size && npm run build:demo",
     "release": "node scripts/release.js",
     "release:dry": "node scripts/release.js --dry-run",
     "prepublishOnly": "npm run verify"
   },
   "dependencies": {
-    "@lit/react": "^1.0.8",
     "lit": "^3.3.3",
     "lucide": "^1.43.0"
   },
   "peerDependencies": {
+    "@lit/react": "^1.0.8",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
     "vue": "^3.4.0"
   },
   "peerDependenciesMeta": {
-    "react": {
+    "@lit/react": {
       "optional": true
     },
-    "react-dom": {
+    "react": {
       "optional": true
     },
     "vue": {
@@ -289,12 +299,15 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/js": "^10.0.1",
+    "@lit/react": "^1.0.8",
     "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "^5.0.1",
     "@vitest/coverage-v8": "^5.0.1",
     "axe-core": "^4.13.0",
     "custom-element-jet-brains-integration": "^1.8.0",
     "custom-element-vs-code-integration": "^1.5.0",
+    "esbuild": "^0.28.2",
     "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lit": "^2.3.1",
@@ -306,6 +319,7 @@
     "playwright": "^1.63.0",
     "prettier": "^3.9.6",
     "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.70.0",
     "vite": "^7.3.6",

package/dist/chunks/kt-element-B_jjQDhg.js

@@ -1,38 +0,0 @@
-import { LitElement as i, css as s } from "lit";
-class o extends i {
-  static {
-    this.styles = s`
-    :host {
-      box-sizing: border-box;
-    }
-
-    :host([hidden]) {
-      display: none !important;
-    }
-
-    *,
-    *::before,
-    *::after {
-      box-sizing: inherit;
-    }
-
-    /* Read by assistive technology, never drawn. */
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip-path: inset(50%);
-      white-space: nowrap;
-    }
-  `;
-  }
-}
-function d(e, t) {
-  customElements.get(e) || customElements.define(e, t);
-}
-export {
-  o as K,
-  d
-};
-//# sourceMappingURL=kt-element-B_jjQDhg.js.map

package/dist/chunks/kt-element-B_jjQDhg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kt-element-B_jjQDhg.js","sources":["../../src/internal/kt-element.ts"],"sourcesContent":["import { LitElement, css, type CSSResultGroup } from 'lit';\n\n/**\n * Base class for every Kanto element.\n *\n * It exists for two reasons. First, `box-sizing: border-box` does not cross a\n * shadow boundary, so each root has to re-establish it. Second, `[hidden]`\n * loses to a `:host { display: flex }` rule inside the shadow root, and every\n * element in this system sets its own display — without the override here,\n * hiding a Kanto element from the outside silently does nothing.\n */\nexport class KtElement extends LitElement {\n  static override styles: CSSResultGroup = css`\n    :host {\n      box-sizing: border-box;\n    }\n\n    :host([hidden]) {\n      display: none !important;\n    }\n\n    *,\n    *::before,\n    *::after {\n      box-sizing: inherit;\n    }\n\n    /* Read by assistive technology, never drawn. */\n    .visually-hidden {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip-path: inset(50%);\n      white-space: nowrap;\n    }\n  `;\n}\n\n/**\n * Registers a custom element, tolerating a repeat call.\n *\n * A design system gets loaded twice more often than you would like — two\n * versions in one dependency tree, a dev-server hot reload, a micro-frontend\n * mounting a second copy. `customElements.define` throws on a duplicate tag\n * and would take the whole page down with it.\n */\nexport function defineElement(tag: string, ctor: CustomElementConstructor): void {\n  if (customElements.get(tag)) return;\n  customElements.define(tag, ctor);\n}\n"],"names":["KtElement","LitElement","css","defineElement","tag","ctor"],"mappings":";AAWO,MAAMA,UAAkBC,EAAW;AAAA,EACxC,OAAA;AAAA,SAAgB,SAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAyB3C;AAUO,SAASC,EAAcC,GAAaC,GAAsC;AAC/E,EAAI,eAAe,IAAID,CAAG,KAC1B,eAAe,OAAOA,GAAKC,CAAI;AACjC;"}