@likec4/styles 1.36.1 → 1.38.0

package/dist/tokens/index.mjs

@@ -900,23 +900,23 @@ const tokens = {
     "variable": "var(--shadows-none)"
   },
   "shadows.xs": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1)",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 1px 2px rgb(0 0 0/10%)",
     "variable": "var(--shadows-xs)"
   },
   "shadows.sm": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 10px 15px -5px, rgba(0, 0, 0, 0.04) 0 7px 7px -5px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 10px 15px -5px rgb(0 0 0/5%), 0 7px 7px -5px rgb(0 0 0/4%)",
     "variable": "var(--shadows-sm)"
   },
   "shadows.md": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 20px 25px -5px rgb(0 0 0/5%), 0 10px 10px -5px rgb(0 0 0/4%)",
     "variable": "var(--shadows-md)"
   },
   "shadows.lg": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 28px 23px -7px, rgba(0, 0, 0, 0.04) 0 12px 12px -7px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 28px 23px -7px rgb(0 0 0/5%), 0 12px 12px -7px rgb(0 0 0/4%)",
     "variable": "var(--shadows-lg)"
   },
   "shadows.xl": {
-    "value": "0 1px 3px rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 36px 28px -7px, rgba(0, 0, 0, 0.04) 0 17px 17px -7px",
+    "value": "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)",
     "variable": "var(--shadows-xl)"
   },
   "breakpoints.xs": {

package/dist/types/conditions.d.ts

@@ -46,7 +46,7 @@ export interface Conditions {
 	"_firstLetter": string
 	/** `&::first-line` */
 	"_firstLine": string
-	/** `&::marker` */
+	/** `&:is(::marker, ::-webkit-details-marker)` */
 	"_marker": string
 	/** `&::selection` */
 	"_selection": string
@@ -142,7 +142,7 @@ export interface Conditions {
 	"_default": string
 	/** `&:optional` */
 	"_optional": string
-	/** `&:is([open], [data-open], [data-state="open"])` */
+	/** `&:is([open], [data-open], [data-state="open"], :popover-open)` */
 	"_open": string
 	/** `&:is([closed], [data-closed], [data-state="closed"])` */
 	"_closed": string
@@ -194,9 +194,9 @@ export interface Conditions {
 	"_lessContrast": string
 	/** `@media (prefers-contrast: more)` */
 	"_moreContrast": string
-	/** `[dir=ltr] &` */
+	/** `:where([dir=ltr], :dir(ltr)) &` */
 	"_ltr": string
-	/** `[dir=rtl] &` */
+	/** `:where([dir=rtl], :dir(rtl)) &` */
 	"_rtl": string
 	/** `&::-webkit-scrollbar` */
 	"_scrollbar": string
@@ -212,6 +212,10 @@ export interface Conditions {
 	"_icon": string
 	/** `@starting-style` */
 	"_starting": string
+	/** `@media (scripting: none)` */
+	"_noscript": string
+	/** `@media (inverted-colors: inverted)` */
+	"_invertedColors": string
 	/** `:where([data-likec4-shape-size='xs']) &` */
 	"_shapeSizeXs": string
 	/** `:where([data-likec4-shape-size='sm']) &` */
@@ -240,23 +244,23 @@ export interface Conditions {
 	"_notDisabled": string
 	/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */
 	"_reduceGraphics": string
-	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning]) &` */
+	/** `.likec4-root:is([data-likec4-reduced-graphics][data-likec4-diagram-panning="true"]) &` */
 	"_reduceGraphicsOnPan": string
 	/** `.likec4-root:not([data-likec4-reduced-graphics]) &` */
 	"_noReduceGraphics": string
-	/** `:is(.likec4-root[data-likec4-diagram-panning]) &` */
+	/** `.likec4-root:is([data-likec4-diagram-panning="true"]) &` */
 	"_whenPanning": string
-	/** `:where([data-likec4-zoom-small]) &` */
+	/** `:where([data-likec4-zoom-small="true"]) &` */
 	"_smallZoom": string
 	/** `:where([data-compound-transparent]) &` */
 	"_compoundTransparent": string
 	/** `:where([data-likec4-edge-active="true"]) &` */
 	"_edgeActive": string
-	/** `:where([data-likec4-hovered="true"]) &` */
+	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &` */
 	"_whenHovered": string
 	/** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
 	"_whenSelected": string
-	/** `:where([data-likec4-dimmed]) &` */
+	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &` */
 	"_whenDimmed": string
 	/** `:where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &` */
 	"_whenFocused": string

package/dist/types/jsx.d.ts

@@ -23,7 +23,8 @@ interface RecipeFn {
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: TProps
-  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
+  forwardProps?: string[]
 }
 
 export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;

package/dist/types/prop-type.d.ts

@@ -68,6 +68,7 @@ export interface UtilityValues {
 	minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
 	maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
+	boxSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
 	color: Tokens["colors"];
 	fontFamily: Tokens["fonts"];
 	fontSize: Tokens["fontSizes"];
@@ -83,6 +84,7 @@ export interface UtilityValues {
 	background: Tokens["colors"];
 	backgroundColor: Tokens["colors"];
 	backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
+	backgroundLinear: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
 	gradientFrom: Tokens["colors"];
 	gradientTo: Tokens["colors"];
@@ -135,7 +137,7 @@ export interface UtilityValues {
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "none";
-	animationName: "indicatorStrokeOpacity" | "xyedgeAnimated";
+	animationName: "indicatorOpacity" | "indicatorStrokeOpacity" | "xyedgeAnimated";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
@@ -186,7 +188,7 @@ export interface UtilityValues {
 	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
 	textStyle: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "likec4.node.primary" | "likec4.node.secondary";
 	layerStyle: "likec4.tag" | "likec4.panel" | "likec4.dropdown";
-	animationStyle: "indicator" | "xyedgeAnimated";
+	animationStyle: "indicator" | "indicatorOpacity" | "xyedgeAnimated";
 }
 
 

package/dist/types/style-props.d.ts

@@ -5,10 +5,10 @@ import type { CssProperties } from './system-types';
 import type { Token } from '../tokens/index';
 
 type AnyString = (string & {})
-type CssVars = "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
+type CssVars = "var(--likec4-palette-fill)" | "var(--likec4-palette-stroke)" | "var(--likec4-palette-hiContrast)" | "var(--likec4-palette-loContrast)" | "var(--likec4-palette-relation-stroke)" | "var(--likec4-palette-relation-label)" | "var(--likec4-palette-relation-label-bg)" | "var(--likec4-palette-outline)" | "var(--likec4-text-size)" | "var(--likec4-spacing)" | "var(--text-fz)" | "var(--likec4-icon-size)"
 type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-type CssVarKeys = "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-text-size" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
+type CssVarKeys = "--likec4-palette-fill" | "--likec4-palette-stroke" | "--likec4-palette-hiContrast" | "--likec4-palette-loContrast" | "--likec4-palette-relation-stroke" | "--likec4-palette-relation-label" | "--likec4-palette-relation-label-bg" | "--likec4-palette-outline" | "--likec4-text-size" | "--likec4-spacing" | "--text-fz" | "--likec4-icon-size" | `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue
@@ -6992,6 +6992,9 @@ bgBlendMode?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundBlendMod
    */
 bgSize?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundSize"]>>
  bgGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | CssProperties["backgroundGradient"]>
+ bgLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | CssProperties["backgroundLinear"]>
+ bgRadial?: ConditionalValue<string | number | CssProperties["backgroundRadial"]>
+ bgConic?: ConditionalValue<string | number | CssProperties["backgroundConic"]>
  /**
    * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    *
@@ -7363,9 +7366,13 @@ scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingIn
  divideY?: ConditionalValue<string | number | CssProperties["divideY"]>
  divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
  divideStyle?: ConditionalValue<string | number | CssProperties["divideStyle"]>
+ boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | CssProperties["boxSize"]>
  fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | CssVars | CssProperties["fontSmoothing"]>
  truncate?: ConditionalValue<UtilityValues["truncate"] | CssVars | CssProperties["truncate"]>
  backgroundGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | CssProperties["backgroundGradient"]>
+ backgroundLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | CssProperties["backgroundLinear"]>
+ backgroundRadial?: ConditionalValue<string | number | CssProperties["backgroundRadial"]>
+ backgroundConic?: ConditionalValue<string | number | CssProperties["backgroundConic"]>
  textGradient?: ConditionalValue<UtilityValues["textGradient"] | CssVars | CssProperties["textGradient"]>
  gradientFromPosition?: ConditionalValue<string | number | CssProperties["gradientFromPosition"]>
  gradientToPosition?: ConditionalValue<string | number | CssProperties["gradientToPosition"]>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.36.1",
+  "version": "1.38.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -58,7 +58,7 @@
     "./dev": "./dev.ts"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^0.54.0"
+    "@pandacss/dev": "^1.0.1"
   },
   "peerDependenciesMeta": {
     "@pandacss/dev": {
@@ -71,15 +71,15 @@
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
     "@types/picomatch": "^4.0.2",
-    "@types/react": "19.1.9",
+    "@types/react": "19.1.10",
     "@types/react-dom": "19.1.7",
-    "@pandacss/dev": "^0.54.0",
+    "@pandacss/dev": "^1.0.1",
     "postcss": "8.5.5",
     "nano-spawn": "^1.0.2",
     "unbuild": "3.5.0",
     "typescript": "5.9.2",
-    "@likec4/style-preset": "1.36.1",
-    "@likec4/tsconfig": "1.36.1"
+    "@likec4/style-preset": "1.38.0",
+    "@likec4/tsconfig": "1.38.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/preset.d.mts

@@ -3,10 +3,14 @@ import { Preset } from '@pandacss/dev';
 
 declare const actionBtn: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
+declare const compoundNode: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
 declare const edgeActionBtn: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const elementNodeIcon: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
+declare const elementShapeRecipe: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
+
 declare const likec4tag: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const markdownBlock: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
@@ -14,13 +18,15 @@ declare const markdownBlock: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVari
 declare const navigationPanelActionIcon: _pandacss_dev.RecipeConfig<_pandacss_dev.RecipeVariantRecord>;
 
 declare const recipes_actionBtn: typeof actionBtn;
+declare const recipes_compoundNode: typeof compoundNode;
 declare const recipes_edgeActionBtn: typeof edgeActionBtn;
 declare const recipes_elementNodeIcon: typeof elementNodeIcon;
+declare const recipes_elementShapeRecipe: typeof elementShapeRecipe;
 declare const recipes_likec4tag: typeof likec4tag;
 declare const recipes_markdownBlock: typeof markdownBlock;
 declare const recipes_navigationPanelActionIcon: typeof navigationPanelActionIcon;
 declare namespace recipes {
-  export { recipes_actionBtn as actionBtn, recipes_edgeActionBtn as edgeActionBtn, recipes_elementNodeIcon as elementNodeIcon, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon };
+  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_elementNodeIcon as elementNodeIcon, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon };
 }
 
 declare const edgeLabel: _pandacss_dev.SlotRecipeConfig;
@@ -1092,6 +1098,14 @@ declare const theme: {
         lg: string;
     };
     keyframes: {
+        indicatorOpacity: {
+            '0%': {
+                opacity: number;
+            };
+            '100%': {
+                opacity: number;
+            };
+        };
         indicatorStrokeOpacity: {
             '0%': {
                 strokeOpacity: number;
@@ -1118,6 +1132,14 @@ declare const theme: {
                 animationName: string;
             };
         };
+        indicatorOpacity: {
+            value: {
+                animationDuration: string;
+                animationIterationCount: string;
+                animationDirection: string;
+                animationName: string;
+            };
+        };
         xyedgeAnimated: {
             value: {
                 animationDuration: string;