@jxsuite/ui 0.0.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
   "license": "MIT",
   "repository": {
@@ -22,12 +22,34 @@
     "./theme": "./src/theme.ts",
     "./icons": "./src/icons.ts",
     "./documents": "./src/documents.ts",
+    "./loaders": "./src/loaders.ts",
+    "./color": "./src/color.ts",
+    "./behaviors/color-area": "./src/behaviors/color-area.ts",
+    "./behaviors/color-field": "./src/behaviors/color-field.ts",
+    "./behaviors/color-slider": "./src/behaviors/color-slider.ts",
+    "./behaviors/combobox": "./src/behaviors/combobox.ts",
+    "./behaviors/listbox": "./src/behaviors/listbox.ts",
     "./behaviors/menu": "./src/behaviors/menu.ts",
+    "./behaviors/tabs": "./src/behaviors/tabs.ts",
+    "./behaviors/toolbar": "./src/behaviors/toolbar.ts",
+    "./behaviors/tree": "./src/behaviors/tree.ts",
+    "./behaviors/action-group": "./src/behaviors/action-group.ts",
+    "./behaviors/popover": "./src/behaviors/popover.ts",
+    "./behaviors/select": "./src/behaviors/select.ts",
+    "./behaviors/split": "./src/behaviors/split.ts",
+    "./behaviors/swatch-group": "./src/behaviors/swatch-group.ts",
+    "./behaviors/tooltip": "./src/behaviors/tooltip.ts",
+    "./behaviors/dialog": "./src/behaviors/dialog.ts",
+    "./behaviors/textfield": "./src/behaviors/textfield.ts",
+    "./behaviors/number-field": "./src/behaviors/number-field.ts",
+    "./behaviors/toast": "./src/behaviors/toast.ts",
+    "./behaviors/toast-host": "./src/behaviors/toast-host.ts",
+    "./testing/anchor-support": "./src/testing/anchor-support.ts",
     "./testing/popover-shim": "./src/testing/popover-shim.ts",
     "./icons/manifest.json": "./icons/manifest.json"
   },
   "publishConfig": {
-    "provenance": false
+    "provenance": true
   },
   "scripts": {
     "build:icons": "bun run scripts/build-icons.ts",
@@ -36,11 +58,11 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@jxsuite/runtime": "workspace:^",
-    "@jxsuite/schema": "workspace:^"
+    "@jxsuite/runtime": "^4.0.1",
+    "@jxsuite/schema": "^2.2.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.12.0",
+    "@happy-dom/global-registrator": "^20.14.5",
     "@phosphor-icons/core": "^2.1.1"
   }
 }

package/project.json

@@ -9,159 +9,170 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--jx-gray-50": "#f7f7f9",
-    "--jx-gray-100": "#eeeef2",
-    "--jx-gray-200": "#e1e1e7",
-    "--jx-gray-300": "#c9c9d2",
-    "--jx-gray-400": "#a2a2af",
-    "--jx-gray-500": "#7c7c8b",
-    "--jx-gray-600": "#5e5e6c",
-    "--jx-gray-700": "#45454f",
-    "--jx-gray-800": "#2f2f36",
-    "--jx-gray-850": "#26262c",
-    "--jx-gray-900": "#1d1d22",
-    "--jx-gray-925": "#17171b",
-    "--jx-gray-950": "#111114",
-    "--jx-gray-975": "#0b0b0d",
-    "--jx-blue-50": "#eef4ff",
-    "--jx-blue-100": "#dbe7fe",
-    "--jx-blue-200": "#bcd3fd",
-    "--jx-blue-300": "#8fb5fb",
-    "--jx-blue-400": "#5f95f7",
-    "--jx-blue-500": "#3b82f6",
-    "--jx-blue-600": "#2563eb",
-    "--jx-blue-700": "#1d4ed8",
-    "--jx-blue-800": "#1e40af",
-    "--jx-blue-900": "#172554",
-    "--jx-blue-950": "#0f172e",
-    "--jx-red-50": "#fdeeee",
-    "--jx-red-100": "#fbd9d9",
-    "--jx-red-200": "#f5b3b3",
-    "--jx-red-300": "#ee8a8a",
-    "--jx-red-400": "#e86460",
-    "--jx-red-500": "#dc3f3b",
-    "--jx-red-600": "#c22e2b",
-    "--jx-red-700": "#a12522",
-    "--jx-red-800": "#7d1e1c",
-    "--jx-red-900": "#5a1614",
-    "--jx-red-950": "#3a0f0e",
-    "--jx-green-50": "#e9f7ee",
-    "--jx-green-100": "#cdeedb",
-    "--jx-green-200": "#a6dfbd",
-    "--jx-green-300": "#74c996",
-    "--jx-green-400": "#4fb27a",
-    "--jx-green-500": "#2f9a5f",
-    "--jx-green-600": "#22804e",
-    "--jx-green-700": "#1a6640",
-    "--jx-green-800": "#144e32",
-    "--jx-green-900": "#0f3a26",
-    "--jx-green-950": "#0a2719",
-    "--jx-amber-50": "#fdf3e1",
-    "--jx-amber-100": "#fae4b5",
-    "--jx-amber-200": "#f2cc7c",
-    "--jx-amber-300": "#e5ae4a",
-    "--jx-amber-400": "#d59429",
-    "--jx-amber-500": "#b8791a",
-    "--jx-amber-600": "#96600f",
-    "--jx-amber-700": "#764b0b",
-    "--jx-amber-800": "#5a3908",
-    "--jx-amber-900": "#3f2806",
-    "--jx-amber-950": "#2a1a04",
-    "--jx-bg": "light-dark(var(--jx-gray-50), var(--jx-gray-950))",
-    "--jx-bg-panel": "light-dark(#ffffff, var(--jx-gray-925))",
-    "--jx-bg-input": "light-dark(#ffffff, var(--jx-gray-900))",
-    "--jx-bg-overlay": "light-dark(#ffffff, var(--jx-gray-850))",
-    "--jx-border": "light-dark(var(--jx-gray-200), var(--jx-gray-800))",
-    "--jx-border-strong": "light-dark(var(--jx-gray-300), var(--jx-gray-700))",
-    "--jx-fg": "light-dark(var(--jx-gray-900), var(--jx-gray-100))",
-    "--jx-fg-dim": "light-dark(var(--jx-gray-600), var(--jx-gray-400))",
-    "--jx-fg-muted": "var(--jx-gray-500)",
-    "--jx-accent": "light-dark(var(--jx-blue-600), var(--jx-blue-500))",
-    "--jx-accent-solid": "var(--jx-blue-600)",
-    "--jx-accent-hover": "light-dark(var(--jx-blue-700), var(--jx-blue-400))",
-    "--jx-accent-fg": "#ffffff",
-    "--jx-accent-8": "color-mix(in oklab, var(--jx-accent) 8%, transparent)",
-    "--jx-accent-10": "color-mix(in oklab, var(--jx-accent) 10%, transparent)",
-    "--jx-accent-15": "color-mix(in oklab, var(--jx-accent) 15%, transparent)",
-    "--jx-accent-20": "color-mix(in oklab, var(--jx-accent) 20%, transparent)",
-    "--jx-accent-50": "color-mix(in oklab, var(--jx-accent) 50%, transparent)",
-    "--jx-hover-bg": "color-mix(in oklab, var(--jx-fg) 6%, transparent)",
-    "--jx-danger": "light-dark(var(--jx-red-600), var(--jx-red-400))",
-    "--jx-success": "light-dark(var(--jx-green-600), var(--jx-green-400))",
-    "--jx-warning": "light-dark(var(--jx-amber-600), var(--jx-amber-300))",
-    "--jx-tag": "light-dark(var(--jx-blue-700), var(--jx-blue-300))",
-    "--jx-signal": "light-dark(var(--jx-amber-700), var(--jx-amber-200))",
-    "--jx-handler": "light-dark(#7c3aed, #c8a2e0)",
-    "--jx-map": "light-dark(#4f46b5, #8b83e6)",
-    "--jx-switch-c": "var(--jx-danger)",
-    "--jx-font-sans": "\"Inter Variable\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
-    "--jx-font-mono": "\"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace",
-    "--jx-text-xs": "10px",
-    "--jx-text-sm": "11px",
-    "--jx-text-md": "12px",
-    "--jx-text-lg": "14px",
-    "--jx-leading-xs": "14px",
-    "--jx-leading-sm": "16px",
-    "--jx-leading-md": "18px",
-    "--jx-leading-lg": "20px",
-    "--jx-space-1": "2px",
-    "--jx-space-2": "4px",
-    "--jx-space-3": "8px",
-    "--jx-space-4": "12px",
-    "--jx-space-5": "16px",
-    "--jx-space-6": "24px",
-    "--jx-space-7": "32px",
-    "--jx-control-h": "24px",
-    "--jx-icon-size": "16px",
-    "--jx-radius-xs": "2px",
-    "--jx-radius-sm": "4px",
-    "--jx-radius-md": "6px",
-    "--jx-radius-lg": "10px",
-    "--jx-focus-ring": "2px solid var(--jx-accent)",
-    "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3)",
-    "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.7)",
-    "--jx-dur-1": "150ms",
-    "--jx-dur-2": "200ms",
-    "--jx-ease-out": "cubic-bezier(0.2, 0, 0, 1)",
-    "--jx-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
-    "colorScheme": "light dark",
-    "&[data-theme=\"light\"]": {
-      "colorScheme": "light",
-      "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1)",
-      "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.25)"
-    },
-    "&[data-theme=\"dark\"]": {
-      "colorScheme": "dark"
-    },
-    "&[data-density=\"compact\"]": {
-      "--jx-control-h": "20px",
-      "--jx-text-md": "11px"
-    },
-    "&[data-density=\"comfortable\"]": {
-      "--jx-control-h": "28px"
-    },
-    "@(prefers-reduced-motion: reduce)": {
-      "--jx-dur-1": "0ms",
-      "--jx-dur-2": "0ms"
-    },
-    "@(forced-colors: active)": {
-      "--jx-focus-ring": "2px solid Highlight"
-    },
-    "@property --jx-accent": {
-      "syntax": "\"<color>\"",
-      "inherits": "true",
-      "initialValue": "#3b82f6"
-    },
-    "@property --jx-dur-1": {
-      "syntax": "\"<time>\"",
-      "inherits": "true",
-      "initialValue": "150ms"
-    },
-    "@property --jx-dur-2": {
-      "syntax": "\"<time>\"",
-      "inherits": "true",
-      "initialValue": "200ms"
+    "@layer jx-ui": {
+      "--jx-gray-50": "#f7f7f9",
+      "--jx-gray-100": "#eeeef2",
+      "--jx-gray-200": "#e1e1e7",
+      "--jx-gray-300": "#c9c9d2",
+      "--jx-gray-400": "#a2a2af",
+      "--jx-gray-500": "#7c7c8b",
+      "--jx-gray-600": "#5e5e6c",
+      "--jx-gray-700": "#45454f",
+      "--jx-gray-800": "#2f2f36",
+      "--jx-gray-850": "#26262c",
+      "--jx-gray-900": "#1d1d22",
+      "--jx-gray-925": "#17171b",
+      "--jx-gray-950": "#111114",
+      "--jx-gray-975": "#0b0b0d",
+      "--jx-blue-50": "#eef4ff",
+      "--jx-blue-100": "#dbe7fe",
+      "--jx-blue-200": "#bcd3fd",
+      "--jx-blue-300": "#8fb5fb",
+      "--jx-blue-400": "#5f95f7",
+      "--jx-blue-500": "#3b82f6",
+      "--jx-blue-600": "#2563eb",
+      "--jx-blue-700": "#1d4ed8",
+      "--jx-blue-800": "#1e40af",
+      "--jx-blue-900": "#172554",
+      "--jx-blue-950": "#0f172e",
+      "--jx-red-50": "#fdeeee",
+      "--jx-red-100": "#fbd9d9",
+      "--jx-red-200": "#f5b3b3",
+      "--jx-red-300": "#ee8a8a",
+      "--jx-red-400": "#e86460",
+      "--jx-red-500": "#dc3f3b",
+      "--jx-red-600": "#c22e2b",
+      "--jx-red-700": "#a12522",
+      "--jx-red-800": "#7d1e1c",
+      "--jx-red-900": "#5a1614",
+      "--jx-red-950": "#3a0f0e",
+      "--jx-green-50": "#e9f7ee",
+      "--jx-green-100": "#cdeedb",
+      "--jx-green-200": "#a6dfbd",
+      "--jx-green-300": "#74c996",
+      "--jx-green-400": "#4fb27a",
+      "--jx-green-500": "#2f9a5f",
+      "--jx-green-600": "#22804e",
+      "--jx-green-700": "#1a6640",
+      "--jx-green-800": "#144e32",
+      "--jx-green-900": "#0f3a26",
+      "--jx-green-950": "#0a2719",
+      "--jx-amber-50": "#fdf3e1",
+      "--jx-amber-100": "#fae4b5",
+      "--jx-amber-200": "#f2cc7c",
+      "--jx-amber-300": "#e5ae4a",
+      "--jx-amber-400": "#d59429",
+      "--jx-amber-500": "#b8791a",
+      "--jx-amber-600": "#96600f",
+      "--jx-amber-700": "#764b0b",
+      "--jx-amber-800": "#5a3908",
+      "--jx-amber-900": "#3f2806",
+      "--jx-amber-950": "#2a1a04",
+      "--jx-bg": "light-dark(var(--jx-gray-50), var(--jx-gray-950))",
+      "--jx-bg-panel": "light-dark(#ffffff, var(--jx-gray-925))",
+      "--jx-bg-input": "light-dark(#ffffff, var(--jx-gray-900))",
+      "--jx-bg-overlay": "light-dark(#ffffff, var(--jx-gray-850))",
+      "--jx-border": "light-dark(var(--jx-gray-200), var(--jx-gray-800))",
+      "--jx-border-strong": "light-dark(var(--jx-gray-300), var(--jx-gray-700))",
+      "--jx-fg": "light-dark(var(--jx-gray-900), var(--jx-gray-100))",
+      "--jx-fg-dim": "light-dark(var(--jx-gray-600), var(--jx-gray-400))",
+      "--jx-fg-muted": "var(--jx-gray-500)",
+      "--jx-accent": "light-dark(var(--jx-blue-600), var(--jx-blue-500))",
+      "--jx-accent-solid": "var(--jx-blue-600)",
+      "--jx-accent-hover": "light-dark(var(--jx-blue-700), var(--jx-blue-400))",
+      "--jx-accent-fg": "#ffffff",
+      "--jx-accent-8": "color-mix(in oklab, var(--jx-accent) 8%, transparent)",
+      "--jx-accent-10": "color-mix(in oklab, var(--jx-accent) 10%, transparent)",
+      "--jx-accent-15": "color-mix(in oklab, var(--jx-accent) 15%, transparent)",
+      "--jx-accent-20": "color-mix(in oklab, var(--jx-accent) 20%, transparent)",
+      "--jx-accent-50": "color-mix(in oklab, var(--jx-accent) 50%, transparent)",
+      "--jx-hover-bg": "color-mix(in oklab, var(--jx-fg) 6%, transparent)",
+      "--jx-danger": "light-dark(var(--jx-red-600), var(--jx-red-400))",
+      "--jx-success": "light-dark(var(--jx-green-600), var(--jx-green-400))",
+      "--jx-warning": "light-dark(var(--jx-amber-600), var(--jx-amber-300))",
+      "--jx-tag": "light-dark(var(--jx-blue-700), var(--jx-blue-300))",
+      "--jx-signal": "light-dark(var(--jx-amber-700), var(--jx-amber-200))",
+      "--jx-handler": "light-dark(#7c3aed, #c8a2e0)",
+      "--jx-map": "light-dark(#4f46b5, #8b83e6)",
+      "--jx-switch-c": "var(--jx-danger)",
+      "--jx-switch-track": "var(--jx-gray-500)",
+      "--jx-switch-thumb": "light-dark(#ffffff, var(--jx-gray-100))",
+      "--jx-font-sans": "\"Inter Variable\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
+      "--jx-font-mono": "\"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace",
+      "--jx-text-xs": "10px",
+      "--jx-text-sm": "11px",
+      "--jx-text-md": "12px",
+      "--jx-text-lg": "14px",
+      "--jx-leading-xs": "14px",
+      "--jx-leading-sm": "16px",
+      "--jx-leading-md": "18px",
+      "--jx-leading-lg": "20px",
+      "--jx-space-1": "2px",
+      "--jx-space-2": "4px",
+      "--jx-space-3": "8px",
+      "--jx-space-4": "12px",
+      "--jx-space-5": "16px",
+      "--jx-space-6": "24px",
+      "--jx-space-7": "32px",
+      "--jx-control-h": "24px",
+      "--jx-field-label-w": "80px",
+      "--jx-icon-size": "16px",
+      "--jx-popover-offset": "4px",
+      "--jx-radius-xs": "2px",
+      "--jx-radius-sm": "4px",
+      "--jx-radius-md": "6px",
+      "--jx-radius-lg": "10px",
+      "--jx-focus-ring": "2px solid var(--jx-accent)",
+      "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3)",
+      "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.7)",
+      "--jx-dur-1": "150ms",
+      "--jx-dur-2": "200ms",
+      "--jx-ease-out": "cubic-bezier(0.2, 0, 0, 1)",
+      "--jx-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+      "colorScheme": "light dark",
+      "&[data-theme=\"light\"]": {
+        "colorScheme": "light",
+        "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1)",
+        "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.25)"
+      },
+      "&[data-theme=\"dark\"]": {
+        "colorScheme": "dark"
+      },
+      "&[data-density=\"compact\"]": {
+        "--jx-control-h": "24px",
+        "--jx-text-md": "11px",
+        "--jx-leading-md": "16px"
+      },
+      "&[data-density=\"comfortable\"]": {
+        "--jx-control-h": "28px"
+      },
+      "@(prefers-reduced-motion: reduce)": {
+        "--jx-dur-1": "0ms",
+        "--jx-dur-2": "0ms"
+      },
+      "@(forced-colors: active)": {
+        "--jx-focus-ring": "2px solid Highlight"
+      },
+      "@property --jx-accent": {
+        "syntax": "\"<color>\"",
+        "inherits": "true",
+        "initialValue": "#3b82f6"
+      },
+      "@property --jx-dur-1": {
+        "syntax": "\"<time>\"",
+        "inherits": "true",
+        "initialValue": "150ms"
+      },
+      "@property --jx-dur-2": {
+        "syntax": "\"<time>\"",
+        "inherits": "true",
+        "initialValue": "200ms"
+      }
     }
   },
-  "$elements": [{ "$ref": "./components/jx-icon.json" }]
+  "$elements": [
+    {
+      "$ref": "./components/jx-icon.json"
+    }
+  ]
 }