@grampro/kit 2.4.1 → 2.4.2

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 2.4.2
+
+### Fixed
+
+**Your own class now beats a component's variant.**
+
+Restyling a variant used to fail silently. A rule like
+
+```css
+.btn-brand { --bt-fill: #7c3aed; }
+```
+
+worked on a plain button and was ignored the moment anyone wrote
+`variant="outline"`, because the shipped rule named two things
+(`.bt-root[data-variant="outline"]`) where yours named one, and the browser
+prefers the more specific selector. No error, nothing in devtools -- the
+colour simply did not apply.
+
+Selectors that carry an option you chose -- `variant`, `size`, `orientation`,
+`appearance`, `placement` and the rest -- are now written so they add no
+weight of their own. One class from you is enough, on any variant, in any
+setup:
+
+```tsx
+<Button variant="outline" className="btn-brand">Save</Button>
+```
+
+**State deliberately still wins.** Disabled, invalid, selected, loading and
+the other runtime states keep their weight, because a brand colour has no
+business painting over a disabled control. To restyle a state, name the
+state: `.btn-brand[data-disabled] { ... }`.
+
+215 selectors across 26 stylesheets. Verified by capturing the computed
+styles of 3,716 elements across every demo in light and dark before and
+after: the only differences were opacity on the shimmer and spinner, which
+differ between two runs of the same build because they are mid-animation.
+Nothing else moved.
+
+Nothing in your code needs to change. If you had already worked around this
+with a more specific selector, that still wins.
+
 ## 2.4.1
 
 ### Fixed

package/package.json

@@ -1,77 +1,77 @@
-{
-  "name": "@grampro/kit",
-  "version": "2.4.1",
-  "description": "GramproKit \u2014 an agent-native UI runtime for React. Copy-in components you own, each publishing a contract that software can read.",
-  "type": "module",
-  "files": [
-    "index.cjs",
-    "source",
-    ".gbs",
-    "tools",
-    "schema",
-    "!tools/eval",
-    "!source/**/__tests__",
-    "!**/*.test.ts",
-    "!**/*.test.tsx",
-    "CHANGELOG.md"
-  ],
-  "engines": {
-    "node": ">=17"
-  },
-  "bin": {
-    "grampro-kit": "index.cjs",
-    "gbs-add-block": "index.cjs"
-  },
-  "scripts": {
-    "prepublishOnly": "npm test && npm run passport:check",
-    "version": "npm run passport && git add -A source",
-    "test": "pnpm -C playground test",
-    "passport": "node tools/passport/cli.cjs",
-    "passport:check": "node tools/passport/cli.cjs --check",
-    "eval:grid": "node tools/eval/grid/cli.cjs"
-  },
-  "keywords": [
-    "react",
-    "react-19",
-    "component-library",
-    "agent-native",
-    "ui-runtime",
-    "ai-agents",
-    "webmcp",
-    "data-grid",
-    "copy-in",
-    "accessibility"
-  ],
-  "author": "Anandhu Remanan",
-  "license": "ISC",
-  "dependencies": {
-    "@grampro/headless-helpers": "^1.0.21",
-    "fs-extra": "^11.0.4",
-    "tailwind-merge": "^3.6.0",
-    "yargs": "^17.7.2"
-  },
-  "devDependencies": {
-    "@huggingface/transformers": "^4.3.1",
-    "@huggingface/transformers-structured-output": "^4.3.1",
-    "@types/fs-extra": "^11.0.4",
-    "typescript": "^6.0.3"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "overrides": {
-    "dompurify": "^3.4.16"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gramproindia/kit.git"
-  },
-  "homepage": "https://kit.gramproindia.com",
-  "bugs": {
-    "url": "https://github.com/gramproindia/kit/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@grampro/kit",
+  "version": "2.4.2",
+  "description": "GramproKit \u2014 an agent-native UI runtime for React. Copy-in components you own, each publishing a contract that software can read.",
+  "type": "module",
+  "files": [
+    "index.cjs",
+    "source",
+    ".gbs",
+    "tools",
+    "schema",
+    "!tools/eval",
+    "!source/**/__tests__",
+    "!**/*.test.ts",
+    "!**/*.test.tsx",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=17"
+  },
+  "bin": {
+    "grampro-kit": "index.cjs",
+    "gbs-add-block": "index.cjs"
+  },
+  "scripts": {
+    "prepublishOnly": "npm test && npm run passport:check",
+    "version": "npm run passport && git add -A source",
+    "test": "pnpm -C playground test",
+    "passport": "node tools/passport/cli.cjs",
+    "passport:check": "node tools/passport/cli.cjs --check",
+    "eval:grid": "node tools/eval/grid/cli.cjs"
+  },
+  "keywords": [
+    "react",
+    "react-19",
+    "component-library",
+    "agent-native",
+    "ui-runtime",
+    "ai-agents",
+    "webmcp",
+    "data-grid",
+    "copy-in",
+    "accessibility"
+  ],
+  "author": "Anandhu Remanan",
+  "license": "ISC",
+  "dependencies": {
+    "@grampro/headless-helpers": "^1.0.21",
+    "fs-extra": "^11.0.4",
+    "tailwind-merge": "^3.6.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "@huggingface/transformers": "^4.3.1",
+    "@huggingface/transformers-structured-output": "^4.3.1",
+    "@types/fs-extra": "^11.0.4",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "overrides": {
+    "dompurify": "^3.4.16"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gramproindia/kit.git"
+  },
+  "homepage": "https://kit.gramproindia.com",
+  "bugs": {
+    "url": "https://github.com/gramproindia/kit/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/source/components/accordion/passport.json

@@ -10,7 +10,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/index.ts",
       "core/open.ts",
@@ -21,7 +21,7 @@
       "react/context.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:cb253f4bd818d48805735b4f44c3a25fc66c3a074239558ccc97de1b4ed948bb"
+    "sourceHash": "sha256:87a51fb32f4a2b0982da7743b12adcbb8529dc7f02c4811f6213a42f481c8ffc"
   },
   "props": [
     {

package/source/components/accordion/styles.css

@@ -47,12 +47,12 @@
   box-sizing: border-box;
 }
 
-.ac-root[data-size="sm"] {
+.ac-root:where([data-size="sm"]) {
   --ac-px: 10px;
   --ac-py: 8px;
   --ac-font-size: 12px;
 }
-.ac-root[data-size="lg"] {
+.ac-root:where([data-size="lg"]) {
   --ac-px: 18px;
   --ac-py: 16px;
   --ac-font-size: 14px;
@@ -68,35 +68,35 @@
 }
 
 /* Contained: one block with dividers instead of separate cards. */
-.ac-root[data-variant="contained"] {
+.ac-root:where([data-variant="contained"]) {
   gap: 0;
   border: 1px solid var(--ac-border);
   border-radius: var(--ac-radius);
   overflow: hidden;
 }
-.ac-root[data-variant="contained"] .ac-item {
+.ac-root:where([data-variant="contained"]) .ac-item {
   border: 0;
   border-block-end: 1px solid var(--ac-border);
   border-radius: 0;
 }
-.ac-root[data-variant="contained"] .ac-item:last-child {
+.ac-root:where([data-variant="contained"]) .ac-item:last-child {
   border-block-end: 0;
 }
 
 /* Plain: rules only, for a sidebar or a FAQ. */
-.ac-root[data-variant="plain"] {
+.ac-root:where([data-variant="plain"]) {
   gap: 0;
 }
-.ac-root[data-variant="plain"] .ac-item {
+.ac-root:where([data-variant="plain"]) .ac-item {
   border: 0;
   border-block-end: 1px solid var(--ac-border);
   border-radius: 0;
   background: none;
 }
-.ac-root[data-variant="plain"] .ac-header {
+.ac-root:where([data-variant="plain"]) .ac-header {
   padding-inline: 0;
 }
-.ac-root[data-variant="plain"] .ac-body {
+.ac-root:where([data-variant="plain"]) .ac-body {
   padding-inline: 0;
 }
 

package/source/components/alert/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/index.ts",
       "core/live.ts",
@@ -19,7 +19,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:fb3baa3da19c07b09a7bebf3c96c8360ce4612c4b882f6dd2f95aa0616b6bead"
+    "sourceHash": "sha256:4c0ffa0d7cacb22dc9f3e577f604e7b692d7a79d7c316c6a74dda8018f383b8b"
   },
   "props": [
     {

package/source/components/alert/styles.css

@@ -58,20 +58,20 @@
   box-sizing: border-box;
 }
 
-.al-root[data-variant="success"] {
+.al-root:where([data-variant="success"]) {
   --al-accent: var(--al-success);
 }
-.al-root[data-variant="warning"] {
+.al-root:where([data-variant="warning"]) {
   --al-accent: var(--al-warning);
 }
-.al-root[data-variant="danger"] {
+.al-root:where([data-variant="danger"]) {
   --al-accent: var(--al-danger);
 }
-.al-root[data-variant="neutral"] {
+.al-root:where([data-variant="neutral"]) {
   --al-accent: var(--al-muted);
 }
 
-.al-root[data-size="sm"] {
+.al-root:where([data-size="sm"]) {
   --al-px: 10px;
   --al-py: 8px;
   --al-font-size: 12px;
@@ -89,7 +89,7 @@
   width: 16px;
   height: 16px;
 }
-.al-root[data-size="sm"] .al-icon > svg {
+.al-root:where([data-size="sm"]) .al-icon > svg {
   width: 14px;
   height: 14px;
 }

package/source/components/avatar/passport.json

@@ -9,7 +9,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/identity.ts",
       "core/index.ts",
@@ -20,7 +20,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:b77d7514edf27df52d7bad888ae4ae24cac924a9f748dcce72ae8a92256ab54a"
+    "sourceHash": "sha256:a4c28c560e9abb816f4c55d1bb89fef4d63e7d60b13e86603a32bdb00d195e5c"
   },
   "props": [
     {

package/source/components/avatar/styles.css

@@ -62,28 +62,28 @@
   user-select: none;
   vertical-align: middle;
 }
-.av-root[data-shape="square"] {
+.av-root:where([data-shape="square"]) {
   border-radius: var(--av-radius);
   overflow: visible;
 }
-.av-root[data-shape="square"] .av-image,
-.av-root[data-shape="square"] .av-fallback {
+.av-root:where([data-shape="square"]) .av-image,
+.av-root:where([data-shape="square"]) .av-fallback {
   border-radius: var(--av-radius);
 }
 
-.av-root[data-size="xs"] {
+.av-root:where([data-size="xs"]) {
   --av-size: 20px;
   --av-font-size: 10px;
 }
-.av-root[data-size="sm"] {
+.av-root:where([data-size="sm"]) {
   --av-size: 24px;
   --av-font-size: 11px;
 }
-.av-root[data-size="lg"] {
+.av-root:where([data-size="lg"]) {
   --av-size: 40px;
   --av-font-size: 15px;
 }
-.av-root[data-size="xl"] {
+.av-root:where([data-size="xl"]) {
   --av-size: 56px;
   --av-font-size: 20px;
 }
@@ -124,7 +124,7 @@
   border-radius: 50%;
   background: var(--av-muted);
 }
-.av-root[data-shape="square"] .av-status {
+.av-root:where([data-shape="square"]) .av-status {
   right: -2px;
   bottom: -2px;
 }
@@ -173,43 +173,43 @@
   font-variant-numeric: tabular-nums;
   line-height: 1;
 }
-.av-overflow[data-shape="square"] {
+.av-overflow:where([data-shape="square"]) {
   border-radius: var(--av-radius);
 }
-.av-group[data-size="xs"],
-.av-overflow[data-size="xs"] {
+.av-group:where([data-size="xs"]),
+.av-overflow:where([data-size="xs"]) {
   --av-size: 20px;
   --av-font-size: 10px;
 }
-.av-group[data-size="sm"],
-.av-overflow[data-size="sm"] {
+.av-group:where([data-size="sm"]),
+.av-overflow:where([data-size="sm"]) {
   --av-size: 24px;
   --av-font-size: 11px;
 }
-.av-group[data-size="lg"],
-.av-overflow[data-size="lg"] {
+.av-group:where([data-size="lg"]),
+.av-overflow:where([data-size="lg"]) {
   --av-size: 40px;
   --av-font-size: 15px;
 }
-.av-group[data-size="xl"],
-.av-overflow[data-size="xl"] {
+.av-group:where([data-size="xl"]),
+.av-overflow:where([data-size="xl"]) {
   --av-size: 56px;
   --av-font-size: 20px;
 }
 /* The group's size reaches the avatars inside it, unless one sets its own. */
-.av-group[data-size="xs"] .av-root:not([data-size]) {
+.av-group:where([data-size="xs"]) .av-root:not(:where([data-size])) {
   --av-size: 20px;
   --av-font-size: 10px;
 }
-.av-group[data-size="sm"] .av-root:not([data-size]) {
+.av-group:where([data-size="sm"]) .av-root:not(:where([data-size])) {
   --av-size: 24px;
   --av-font-size: 11px;
 }
-.av-group[data-size="lg"] .av-root:not([data-size]) {
+.av-group:where([data-size="lg"]) .av-root:not(:where([data-size])) {
   --av-size: 40px;
   --av-font-size: 15px;
 }
-.av-group[data-size="xl"] .av-root:not([data-size]) {
+.av-group:where([data-size="xl"]) .av-root:not(:where([data-size])) {
   --av-size: 56px;
   --av-font-size: 20px;
 }

package/source/components/badge/passport.json

@@ -9,7 +9,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/count.ts",
       "core/index.ts",
@@ -20,7 +20,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:2f5c5c1d91e4edd8c8c6dc2a14ba66a140b738c9c7b889c7a0a54414513d3f2f"
+    "sourceHash": "sha256:0c10d8dc0e095394f6cb6dc51e86c551c942e3be90c70953479abd2db7d2a9e9"
   },
   "props": [
     {

package/source/components/badge/styles.css

@@ -59,53 +59,53 @@
   box-sizing: border-box;
 }
 
-.bd-root[data-variant="accent"],
-.bd-tag[data-variant="accent"] {
+.bd-root:where([data-variant="accent"]),
+.bd-tag:where([data-variant="accent"]) {
   --bd-accent: var(--bd-accent-color);
 }
-.bd-root[data-variant="success"],
-.bd-tag[data-variant="success"] {
+.bd-root:where([data-variant="success"]),
+.bd-tag:where([data-variant="success"]) {
   --bd-accent: var(--bd-success);
 }
-.bd-root[data-variant="warning"],
-.bd-tag[data-variant="warning"] {
+.bd-root:where([data-variant="warning"]),
+.bd-tag:where([data-variant="warning"]) {
   --bd-accent: var(--bd-warning);
 }
-.bd-root[data-variant="danger"],
-.bd-tag[data-variant="danger"] {
+.bd-root:where([data-variant="danger"]),
+.bd-tag:where([data-variant="danger"]) {
   --bd-accent: var(--bd-danger);
 }
-.bd-root[data-variant="info"],
-.bd-tag[data-variant="info"] {
+.bd-root:where([data-variant="info"]),
+.bd-tag:where([data-variant="info"]) {
   --bd-accent: var(--bd-info);
 }
 
 /* --------------------------------------------------------- appearances */
 
-.bd-root[data-appearance="soft"],
-.bd-tag[data-appearance="soft"] {
+.bd-root:where([data-appearance="soft"]),
+.bd-tag:where([data-appearance="soft"]) {
   background: color-mix(in oklab, var(--bd-accent) 12%, var(--bd-bg));
   color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
 }
-.bd-root[data-appearance="solid"],
-.bd-tag[data-appearance="solid"] {
+.bd-root:where([data-appearance="solid"]),
+.bd-tag:where([data-appearance="solid"]) {
   background: var(--bd-accent);
   color: var(--bd-on-accent);
 }
 /* Neutral solid would be black on near-black text; invert it instead. */
-.bd-root[data-variant="neutral"][data-appearance="solid"],
-.bd-tag[data-variant="neutral"][data-appearance="solid"] {
+.bd-root:where([data-variant="neutral"]):where([data-appearance="solid"]),
+.bd-tag:where([data-variant="neutral"]):where([data-appearance="solid"]) {
   background: var(--bd-fg);
   color: var(--bd-bg);
 }
-.bd-root[data-appearance="outline"],
-.bd-tag[data-appearance="outline"] {
+.bd-root:where([data-appearance="outline"]),
+.bd-tag:where([data-appearance="outline"]) {
   border-color: color-mix(in oklab, var(--bd-accent) 40%, var(--bd-border));
   color: color-mix(in oklab, var(--bd-accent) 85%, var(--bd-fg));
 }
 
-.bd-root[data-size="sm"],
-.bd-tag[data-size="sm"] {
+.bd-root:where([data-size="sm"]),
+.bd-tag:where([data-size="sm"]) {
   --bd-height: 17px;
   --bd-px: 6px;
   --bd-font-size: 11px;
@@ -195,8 +195,8 @@
   .bd-tag {
     border-color: CanvasText;
   }
-  .bd-root[data-appearance="solid"],
-  .bd-tag[data-appearance="solid"] {
+  .bd-root:where([data-appearance="solid"]),
+  .bd-tag:where([data-appearance="solid"]) {
     background: Highlight;
     color: HighlightText;
   }

package/source/components/breadcrumb/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/index.ts",
       "core/trail.ts",
@@ -18,7 +18,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:f3093ad51f16f3bae86b349a012218e71848f7c7d624d27d41ac578bb55da82c"
+    "sourceHash": "sha256:e58f3eaf22137155f0de8623f06ff1217cb2749ab10bd83bae64e69b739e25a9"
   },
   "props": [
     {

package/source/components/breadcrumb/styles.css

@@ -37,10 +37,10 @@
   box-sizing: border-box;
 }
 
-.bc-root[data-size="sm"] {
+.bc-root:where([data-size="sm"]) {
   --bc-font-size: 12px;
 }
-.bc-root[data-size="lg"] {
+.bc-root:where([data-size="lg"]) {
   --bc-font-size: 14px;
 }
 

package/source/components/button/passport.json

@@ -8,7 +8,7 @@
     ]
   },
   "source": {
-    "libraryVersion": "2.4.1",
+    "libraryVersion": "2.4.2",
     "files": [
       "core/index.ts",
       "core/state.ts",
@@ -18,7 +18,7 @@
       "react/locale.ts",
       "react/props.ts"
     ],
-    "sourceHash": "sha256:85b2394bf3f7b37bd6bafd8ea93782b6c68a6ef4c5e207a6d3e6639a8ca23f9f"
+    "sourceHash": "sha256:b10547e2d34ee9c542458b1dc8b6e067878a5b47c364409de7f314412520d8a0"
   },
   "purpose": "Trigger an action. Not for navigation unless `render` supplies a link element.",
   "props": [