@mechane-ai/elements 0.11.0 → 0.12.0

package/dist/tokens.js

@@ -155,8 +155,7 @@ var e = {
 	headingTracking: "var(--xgto76l)",
 	__varGroupHash__: "xledmcz"
 }, u = {
-	smHeight: "var(--x1hdxzrk)",
-	mdHeight: "var(--xymjgzc)",
+	height: "var(--x14tmdi9)",
 	coarseTarget: "var(--x6uufy4)",
 	iconSize: "var(--x1ud0cvw)",
 	paddingInline: "var(--xrzkwmd)",
@@ -166,32 +165,39 @@ var e = {
 	disabledOpacity: "var(--x9ngs59)",
 	__varGroupHash__: "x1sjug0q"
 }, d = {
+	inset: "var(--xnv5ly4)",
+	toolbarHeight: "var(--x1m0ogk9)",
+	sectionGap: "var(--xe6nmbs)",
+	__varGroupHash__: "x1vss23x"
+}, f = {
 	sm: "var(--x1asdyoo)",
 	md: "var(--xz1oyae)",
 	__varGroupHash__: "x1i152zt"
-}, f = {
+}, p = {
 	duration: "var(--xjjzqp4)",
 	easing: "var(--x5xz5r2)",
 	drawerDuration: "var(--xrmqybo)",
 	drawerEasing: "var(--xumjr7l)",
 	__varGroupHash__: "xtoz1ri"
-}, p = {
+}, m = {
 	popup: "var(--xfou7vv)",
+	selection: "var(--x1qr3jy8)",
 	__varGroupHash__: "x1e8hs47"
-}, m = { popup: "0 4px 16px #00000066" }, h = {
+}, h = { popup: "0 4px 16px #00000066" }, g = {
+	sticky: "1",
 	backdrop: "20",
 	dialog: "21",
 	popup: "30",
 	tooltip: "40",
 	skipLink: "50"
-}, g = {
+}, _ = {
 	rowHeight: 48,
 	headerHeight: 36
-}, _ = {
+}, v = {
 	coarsePointer: "@media (pointer: coarse)",
 	hoverPointer: "@media (hover: hover) and (pointer: fine)",
 	compactText: "@media (max-width:639px)",
 	compactTable: "@media (max-width:600px)",
 	reducedMotion: "@media (prefers-reduced-motion: reduce)"
 };
-export { i as avatarColors, n as chartColors, e as colors, _ as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, m as darkShadows, s as darkSyntaxColors, h as layers, f as motion, d as radii, p as shadows, c as spacing, o as syntaxColors, g as tableGeometry, l as typography };
+export { i as avatarColors, n as chartColors, e as colors, v as conditions, u as controls, a as darkAvatarColors, r as darkChartColors, t as darkColors, h as darkShadows, s as darkSyntaxColors, g as layers, p as motion, d as pageGeometry, f as radii, m as shadows, c as spacing, o as syntaxColors, _ as tableGeometry, l as typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {

package/packages/foundations/src/tokens.stylex.ts

@@ -169,17 +169,18 @@ export const typography = stylex.defineVars({
 });
 
 export const controls = stylex.defineVars({
-  smHeight: '32px',
-  mdHeight: '36px',
+  height: '32px',
   coarseTarget: '44px',
   iconSize: '16px',
   paddingInline: '10px',
-  paddingBlock: '7px',
+  paddingBlock: '5px',
   gap: '6px',
   focusWidth: '2px',
   disabledOpacity: '0.45',
 });
 
+export const pageGeometry = stylex.defineVars({ inset: '16px', toolbarHeight: '48px', sectionGap: '32px' });
+
 export const radii = stylex.defineVars({ sm: '4px', md: '6px' });
 
 export const motion = stylex.defineVars({
@@ -189,11 +190,18 @@ export const motion = stylex.defineVars({
   drawerEasing: 'cubic-bezier(0.32, 0.72, 0, 1)',
 });
 
-export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014' });
+export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014', selection: 'inset 2px 0 currentColor' });
 
 export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' });
 
-export const layers = stylex.defineConsts({ backdrop: '20', dialog: '21', popup: '30', tooltip: '40', skipLink: '50' });
+export const layers = stylex.defineConsts({
+  sticky: '1',
+  backdrop: '20',
+  dialog: '21',
+  popup: '30',
+  tooltip: '40',
+  skipLink: '50',
+});
 
 export const tableGeometry = stylex.defineConsts({ rowHeight: 48, headerHeight: 36 });