@likec4/styles 1.46.3 → 1.47.0

package/dist/css/conditions.mjs

@@ -1,6 +1,6 @@
 import { withoutSpace } from '../helpers.mjs';
 
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,base"
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_shapeBucket,_shapeDocument,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,base"
 const conditions = new Set(conditionsStr.split(','))
 
 const conditionRegex = /^@|&|&$/

package/dist/jsx/is-valid-prop.mjs

@@ -1,7 +1,7 @@
 import { splitProps } from '../helpers.mjs';
 import { memo } from '../helpers.mjs';
 // src/index.ts
-var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle"
+var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,WebkitTextFillColor,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_shapeSizeXs,_shapeSizeSm,_shapeSizeMd,_shapeSizeLg,_shapeSizeXl,_shapeRectangle,_shapePerson,_shapeBrowser,_shapeMobile,_shapeCylinder,_shapeStorage,_shapeQueue,_shapeBucket,_shapeDocument,_notDisabled,_reduceGraphics,_reduceGraphicsOnPan,_noReduceGraphics,_whenPanning,_smallZoom,_compoundTransparent,_edgeActive,_whenHovered,_whenSelectable,_whenSelected,_whenDimmed,_whenFocused,_p3,_srgb,_rec2020,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,xsToSm,xsToMd,xsToLg,xsToXl,smToMd,smToLg,smToXl,mdToLg,mdToXl,lgToXl,@/xs,@/sm,@/md,@/lg,@likec4-root/xs,@likec4-root/sm,@likec4-root/md,@likec4-root/lg,@likec4-dialog/xs,@likec4-dialog/sm,@likec4-dialog/md,@likec4-dialog/lg,textStyle,layerStyle,animationStyle"
 var userGenerated = userGeneratedStr.split(",");
 var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
 var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);

package/dist/preset.d.mts

@@ -11,6 +11,8 @@ declare const edgeLabel: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVari
 
 declare const edgePath: _pandacss_types.SlotRecipeConfig;
 
+declare const elementNode: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+
 declare const elementNodeData: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
 declare const elementShapeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -28,6 +30,7 @@ declare const recipes_compoundNode: typeof compoundNode;
 declare const recipes_edgeActionBtn: typeof edgeActionBtn;
 declare const recipes_edgeLabel: typeof edgeLabel;
 declare const recipes_edgePath: typeof edgePath;
+declare const recipes_elementNode: typeof elementNode;
 declare const recipes_elementNodeData: typeof elementNodeData;
 declare const recipes_elementShapeRecipe: typeof elementShapeRecipe;
 declare const recipes_likec4tag: typeof likec4tag;
@@ -35,14 +38,17 @@ declare const recipes_markdownBlock: typeof markdownBlock;
 declare const recipes_navigationPanelActionIcon: typeof navigationPanelActionIcon;
 declare const recipes_overlay: typeof overlay;
 declare namespace recipes {
-  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_edgeLabel as edgeLabel, recipes_edgePath as edgePath, recipes_elementNodeData as elementNodeData, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon, recipes_overlay as overlay };
+  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_edgeLabel as edgeLabel, recipes_edgePath as edgePath, recipes_elementNode as elementNode, recipes_elementNodeData as elementNodeData, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon, recipes_overlay as overlay };
 }
 
 declare const navigationLink: _pandacss_types.SlotRecipeConfig;
 
+declare const navigationPanel: _pandacss_types.SlotRecipeConfig;
+
 declare const slotRecipes_navigationLink: typeof navigationLink;
+declare const slotRecipes_navigationPanel: typeof navigationPanel;
 declare namespace slotRecipes {
-  export { slotRecipes_navigationLink as navigationLink };
+  export { slotRecipes_navigationLink as navigationLink, slotRecipes_navigationPanel as navigationPanel };
 }
 
 declare const theme: {

package/dist/preset.mjs

@@ -3935,12 +3935,10 @@ function createPreset(options) {
 const keyframes = defineKeyframes({
   "indicatorOpacity": {
     "0%": {
-      opacity: 0.8,
-      strokeOpacity: 0.8
+      opacity: 0.8
     },
     "100%": {
-      opacity: 0.4,
-      strokeOpacity: 0.4
+      opacity: 0.3
     }
   },
   "xyedgeAnimated": {
@@ -3956,10 +3954,11 @@ const keyframes = defineKeyframes({
 const animationStyles = defineAnimationStyles({
   "indicator": {
     value: {
-      animationDuration: "1s",
+      animationDuration: ".8s",
       animationIterationCount: "infinite",
       animationDirection: "alternate",
-      animationName: "indicatorOpacity"
+      animationName: "indicatorOpacity",
+      animationTimingFunction: "{easings.in}"
     }
   },
   "xyedgeAnimated": {
@@ -4704,7 +4703,9 @@ const conditions$1 = {
   shapeMobile: ":where([data-likec4-shape='mobile']) &",
   shapeCylinder: ":where([data-likec4-shape='cylinder']) &",
   shapeStorage: ":where([data-likec4-shape='storage']) &",
-  shapeQueue: ":where([data-likec4-shape='queue']) &"
+  shapeQueue: ":where([data-likec4-shape='queue']) &",
+  shapeBucket: ":where([data-likec4-shape='bucket']) &",
+  shapeDocument: ":where([data-likec4-shape='document']) &"
 };
 const generatedGlobalCss = {
   ":where([data-likec4-text-size='xs'])": {
@@ -5734,6 +5735,52 @@ const edgePath = defineSlotRecipe({
     conditions: ["*"]
   }]
 });
+const elementNode = defineRecipe({
+  className: "likec4-element-node",
+  jsx: ["ElementNodeContainer", "ElementNode"],
+  base: {
+    position: "relative",
+    width: "full",
+    height: "full",
+    padding: "0",
+    margin: "0",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+    _focusVisible: {
+      outline: "none"
+    },
+    _whenSelectable: {
+      pointerEvents: "all",
+      _before: {
+        content: '" "',
+        position: "absolute",
+        top: "[calc(100% - 4px)]",
+        left: "0",
+        width: "full",
+        height: "24px",
+        background: "transparent",
+        pointerEvents: "all"
+      }
+    },
+    _reduceGraphicsOnPan: {
+      _before: {
+        display: "none"
+      }
+    },
+    [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+      cursor: "pointer"
+    },
+    [`&:is([data-likec4-shape="document"])`]: {
+      paddingBottom: "16px"
+    }
+  },
+  staticCss: [{
+    conditions: ["*"],
+    responsive: true
+  }]
+});
 const parts$2 = defineParts({
   root: { selector: "&" },
   icon: { selector: "& [data-likec4-icon]" },
@@ -5786,6 +5833,10 @@ const elementNodeData = defineRecipe({
         paddingTop: "32px",
         paddingBottom: "28px"
       },
+      _shapeBucket: {
+        paddingLeft: "calc(var(--likec4-spacing) + 20px)",
+        paddingRight: "calc(var(--likec4-spacing) + 20px)"
+      },
       _shapeSizeXs: {
         [iconSize$1]: "24px"
       },
@@ -5940,6 +5991,7 @@ const elementShapeRecipe = defineRecipe({
       ["--likec4-outline-size"]: `4px`
     },
     outline: {
+      opacity: 0.8,
       visibility: {
         base: "hidden",
         _smallZoom: "hidden",
@@ -5962,6 +6014,7 @@ const elementShapeRecipe = defineRecipe({
       html: parts$1({
         root: {
           backgroundColor: "var(--likec4-palette-fill)",
+          border: "none",
           borderRadius: "[6px]",
           boxShadow: {
             base: [
@@ -6050,7 +6103,7 @@ const elementShapeRecipe = defineRecipe({
             fill: "var(--likec4-palette-stroke)"
           },
           '& [data-likec4-fill="mix-stroke"]': {
-            fill: "[color-mix(in oklab, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
+            fill: "[color-mix(in oklab, var(--likec4-palette-stroke) 80%, var(--likec4-palette-fill))]"
           }
         },
         multipleSvg: {
@@ -6079,16 +6132,39 @@ const elementShapeRecipe = defineRecipe({
         },
         outline: {
           stroke: "var(--likec4-palette-outline)",
-          fill: "[none]",
-          strokeWidth: 3,
-          strokeOpacity: 0.8,
+          fill: "none",
+          strokeWidth: 4,
           animationStyle: "indicator"
         }
       })
+    },
+    withBorder: {
+      true: {},
+      false: {}
     }
   },
+  defaultVariants: {
+    withBorder: false
+  },
+  compoundVariants: [{
+    shapetype: "html",
+    withBorder: true,
+    css: parts$1({
+      root: {
+        borderStyle: "solid",
+        borderWidth: "3px",
+        borderColor: "var(--likec4-palette-stroke)",
+        "--likec4-outline-size": "6px"
+      },
+      outline: {
+        borderRadius: "10px"
+      }
+    })
+  }],
   staticCss: [{
     shapetype: ["*"],
+    withBorder: ["*"],
+    responsive: true,
     conditions: ["*"]
   }]
 });
@@ -6671,6 +6747,7 @@ const recipes = {
   edgeActionBtn,
   edgeLabel,
   edgePath,
+  elementNode,
   elementNodeData,
   elementShapeRecipe,
   likec4tag,
@@ -6941,9 +7018,118 @@ const navigationLink = defineSlotRecipe({
     conditions: ["*"]
   }]
 });
+const navigationPanel = defineSlotRecipe({
+  className: "likec4-navigation-panel",
+  jsx: ["NavigationPanel", /NavigationPanel/],
+  slots: ["root", "body", "logo", "label", "dropdown"],
+  description: "LikeC4 Navigation panel",
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      pointerEvents: "none",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      margin: "0",
+      width: "100%",
+      gap: "xxs",
+      maxWidth: [
+        "calc(100vw)",
+        "calc(100cqw)"
+      ],
+      "@/sm": {
+        margin: "xs",
+        gap: "xs",
+        width: "max-content",
+        maxWidth: [
+          "calc(100vw - 2 * {spacing.md})",
+          "calc(100cqw - 2 * {spacing.md})"
+        ]
+      },
+      _print: {
+        display: "none"
+      }
+    },
+    body: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      layerStyle: "likec4.panel",
+      position: "relative",
+      gap: "xs",
+      pointerEvents: "all",
+      width: "100%",
+      cursor: "default"
+    },
+    logo: {
+      display: "flex",
+      flexDirection: "row",
+      padding: "0.5",
+      margin: "0",
+      background: "none",
+      border: "none",
+      cursor: "pointer"
+    },
+    label: {
+      fontSize: "sm",
+      fontWeight: "500",
+      transition: "fast",
+      userSelect: "none",
+      color: "likec4.panel.text"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        body: {
+          minHeight: "40px"
+        },
+        logo: {
+          width: {
+            base: "[20px]",
+            "@/md": "[64px]"
+          }
+        }
+      },
+      lg: {
+        body: {
+          "@/sm": {
+            gap: "sm",
+            minHeight: "48px",
+            paddingInline: "md",
+            _hover: {
+              boxShadow: "xl"
+            }
+          }
+        },
+        logo: {
+          "@/sm": {
+            width: "[74px]"
+          }
+        },
+        label: {
+          "@/sm": {
+            fontSize: "md"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  },
+  staticCss: [{
+    conditions: ["*"],
+    size: ["*"],
+    responsive: true
+  }]
+});
 const slotRecipes = {
   __proto__: null,
-  navigationLink
+  navigationLink,
+  navigationPanel
 };
 const textStyles = defineTextStyles({
   dimmed: {

package/dist/recipes/element-node.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface ElementNodeVariant {
+  
+}
+
+type ElementNodeVariantMap = {
+  [key in keyof ElementNodeVariant]: Array<ElementNodeVariant[key]>
+}
+
+
+
+export type ElementNodeVariantProps = {
+  [key in keyof ElementNodeVariant]?: ConditionalValue<ElementNodeVariant[key]> | undefined
+}
+
+export interface ElementNodeRecipe {
+  
+  __type: ElementNodeVariantProps
+  (props?: ElementNodeVariantProps): string
+  raw: (props?: ElementNodeVariantProps) => ElementNodeVariantProps
+  variantMap: ElementNodeVariantMap
+  variantKeys: Array<keyof ElementNodeVariant>
+  splitVariantProps<Props extends ElementNodeVariantProps>(props: Props): [ElementNodeVariantProps, Pretty<DistributiveOmit<Props, keyof ElementNodeVariantProps>>]
+  getVariantProps: (props?: ElementNodeVariantProps) => ElementNodeVariantProps
+}
+
+
+export declare const elementNode: ElementNodeRecipe

package/dist/recipes/element-node.mjs

@@ -0,0 +1,24 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const elementNodeFn = /* @__PURE__ */ createRecipe('likec4-element-node', {}, [])
+
+const elementNodeVariantMap = {}
+
+const elementNodeVariantKeys = Object.keys(elementNodeVariantMap)
+
+export const elementNode = /* @__PURE__ */ Object.assign(memo(elementNodeFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'elementNode',
+  __getCompoundVariantCss__: elementNodeFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: elementNodeVariantKeys,
+  variantMap: elementNodeVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, elementNodeVariantKeys)
+  },
+  getVariantProps: elementNodeFn.getVariantProps,
+})

package/dist/recipes/element-shape-recipe.d.ts

@@ -4,6 +4,10 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface ElementShapeRecipeVariant {
   shapetype: "html" | "svg"
+/**
+ * @default false
+ */
+withBorder: boolean
 }
 
 type ElementShapeRecipeVariantMap = {
@@ -13,7 +17,7 @@ type ElementShapeRecipeVariantMap = {
 
 
 export type ElementShapeRecipeVariantProps = {
-  [key in keyof ElementShapeRecipeVariant]?: ConditionalValue<ElementShapeRecipeVariant[key]> | undefined
+  [key in keyof ElementShapeRecipeVariant]?: ElementShapeRecipeVariant[key] | undefined
 }
 
 export interface ElementShapeRecipeRecipe {

package/dist/recipes/element-shape-recipe.mjs

@@ -1,12 +1,34 @@
 import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
-const elementShapeRecipeFn = /* @__PURE__ */ createRecipe('likec4-element-shape', {}, [])
+const elementShapeRecipeFn = /* @__PURE__ */ createRecipe('likec4-element-shape', {
+  "withBorder": false
+}, [
+  {
+    "shapetype": "html",
+    "withBorder": true,
+    "css": {
+      "&": {
+        "borderStyle": "solid",
+        "borderWidth": "3px",
+        "borderColor": "var(--likec4-palette-stroke)",
+        "--likec4-outline-size": "6px"
+      },
+      "& .likec4-shape-outline": {
+        "borderRadius": "10px"
+      }
+    }
+  }
+])
 
 const elementShapeRecipeVariantMap = {
   "shapetype": [
     "html",
     "svg"
+  ],
+  "withBorder": [
+    "true",
+    "false"
   ]
 }
 

package/dist/recipes/index.d.ts

@@ -4,10 +4,12 @@ export * from './compound-node';
 export * from './edge-action-btn';
 export * from './edge-label';
 export * from './edge-path';
+export * from './element-node';
 export * from './element-node-data';
 export * from './element-shape-recipe';
 export * from './likec4tag';
 export * from './markdown-block';
 export * from './navigation-panel-action-icon';
 export * from './overlay';
-export * from './navigation-link';
+export * from './navigation-link';
+export * from './navigation-panel';

package/dist/recipes/index.mjs

@@ -3,10 +3,12 @@ export * from './compound-node.mjs';
 export * from './edge-action-btn.mjs';
 export * from './edge-label.mjs';
 export * from './edge-path.mjs';
+export * from './element-node.mjs';
 export * from './element-node-data.mjs';
 export * from './element-shape-recipe.mjs';
 export * from './likec4tag.mjs';
 export * from './markdown-block.mjs';
 export * from './navigation-panel-action-icon.mjs';
 export * from './overlay.mjs';
-export * from './navigation-link.mjs';
+export * from './navigation-link.mjs';
+export * from './navigation-panel.mjs';

package/dist/recipes/navigation-panel.d.ts

@@ -0,0 +1,36 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface NavigationPanelVariant {
+  /**
+ * @default "md"
+ */
+size: "md" | "lg"
+}
+
+type NavigationPanelVariantMap = {
+  [key in keyof NavigationPanelVariant]: Array<NavigationPanelVariant[key]>
+}
+
+type NavigationPanelSlot = "root" | "body" | "logo" | "label" | "dropdown"
+
+export type NavigationPanelVariantProps = {
+  [key in keyof NavigationPanelVariant]?: ConditionalValue<NavigationPanelVariant[key]> | undefined
+}
+
+export interface NavigationPanelRecipe {
+  __slot: NavigationPanelSlot
+  __type: NavigationPanelVariantProps
+  (props?: NavigationPanelVariantProps): Pretty<Record<NavigationPanelSlot, string>>
+  raw: (props?: NavigationPanelVariantProps) => NavigationPanelVariantProps
+  variantMap: NavigationPanelVariantMap
+  variantKeys: Array<keyof NavigationPanelVariant>
+  splitVariantProps<Props extends NavigationPanelVariantProps>(props: Props): [NavigationPanelVariantProps, Pretty<DistributiveOmit<Props, keyof NavigationPanelVariantProps>>]
+  getVariantProps: (props?: NavigationPanelVariantProps) => NavigationPanelVariantProps
+}
+
+/**
+ * LikeC4 Navigation panel
+ */
+export declare const navigationPanel: NavigationPanelRecipe

package/dist/recipes/navigation-panel.mjs

@@ -0,0 +1,58 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const navigationPanelDefaultVariants = {
+  "size": "md"
+}
+const navigationPanelCompoundVariants = []
+
+const navigationPanelSlotNames = [
+  [
+    "root",
+    "likec4-navigation-panel__root"
+  ],
+  [
+    "body",
+    "likec4-navigation-panel__body"
+  ],
+  [
+    "logo",
+    "likec4-navigation-panel__logo"
+  ],
+  [
+    "label",
+    "likec4-navigation-panel__label"
+  ],
+  [
+    "dropdown",
+    "likec4-navigation-panel__dropdown"
+  ]
+]
+const navigationPanelSlotFns = /* @__PURE__ */ navigationPanelSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, navigationPanelDefaultVariants, getSlotCompoundVariant(navigationPanelCompoundVariants, slotName))])
+
+const navigationPanelFn = memo((props = {}) => {
+  return Object.fromEntries(navigationPanelSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const navigationPanelVariantKeys = [
+  "size"
+]
+const getVariantProps = (variants) => ({ ...navigationPanelDefaultVariants, ...compact(variants) })
+
+export const navigationPanel = /* @__PURE__ */ Object.assign(navigationPanelFn, {
+  __recipe__: false,
+  __name__: 'navigationPanel',
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: navigationPanelVariantKeys,
+  variantMap: {
+  "size": [
+    "md",
+    "lg"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, navigationPanelVariantKeys)
+  },
+  getVariantProps
+})

package/dist/types/conditions.d.ts

@@ -240,6 +240,10 @@ export interface Conditions {
 	"_shapeStorage": string
 	/** `:where([data-likec4-shape='queue']) &` */
 	"_shapeQueue": string
+	/** `:where([data-likec4-shape='bucket']) &` */
+	"_shapeBucket": string
+	/** `:where([data-likec4-shape='document']) &` */
+	"_shapeDocument": string
 	/** `&:not(:is(:disabled, [disabled], [data-disabled]))` */
 	"_notDisabled": string
 	/** `.likec4-root:is([data-likec4-reduced-graphics]) &` */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.46.3",
+  "version": "1.47.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -71,8 +71,8 @@
     "./dev": "./dev.ts"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.7.1",
-    "@pandacss/types": "^1.7.1",
+    "@pandacss/dev": "^1.7.2",
+    "@pandacss/types": "^1.7.2",
     "react": "^18.x || ^19.x",
     "@types/react": "^18.x || ^19.x"
   },
@@ -89,8 +89,8 @@
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
-    "@pandacss/dev": "^1.7.1",
-    "@pandacss/types": "^1.7.1",
+    "@pandacss/dev": "^1.7.2",
+    "@pandacss/types": "^1.7.2",
     "@types/picomatch": "^4.0.2",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
@@ -98,9 +98,9 @@
     "nano-spawn": "^2.0.0",
     "unbuild": "3.5.0",
     "typescript": "5.9.3",
-    "@likec4/style-preset": "1.46.3",
-    "@likec4/tsconfig": "1.46.1",
-    "@likec4/devops": "1.42.0"
+    "@likec4/style-preset": "1.47.0",
+    "@likec4/devops": "1.42.0",
+    "@likec4/tsconfig": "1.46.1"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",

package/dist/recipes/edge-container.d.ts

@@ -1,33 +0,0 @@
-/* eslint-disable */
-import type { ConditionalValue } from '../types/index';
-import type { DistributiveOmit, Pretty } from '../types/system-types';
-
-interface EdgeContainerVariant {
-  
-}
-
-type EdgeContainerVariantMap = {
-  [key in keyof EdgeContainerVariant]: Array<EdgeContainerVariant[key]>
-}
-
-
-
-export type EdgeContainerVariantProps = {
-  [key in keyof EdgeContainerVariant]?: ConditionalValue<EdgeContainerVariant[key]> | undefined
-}
-
-export interface EdgeContainerRecipe {
-  
-  __type: EdgeContainerVariantProps
-  (props?: EdgeContainerVariantProps): string
-  raw: (props?: EdgeContainerVariantProps) => EdgeContainerVariantProps
-  variantMap: EdgeContainerVariantMap
-  variantKeys: Array<keyof EdgeContainerVariant>
-  splitVariantProps<Props extends EdgeContainerVariantProps>(props: Props): [EdgeContainerVariantProps, Pretty<DistributiveOmit<Props, keyof EdgeContainerVariantProps>>]
-  getVariantProps: (props?: EdgeContainerVariantProps) => EdgeContainerVariantProps
-}
-
-/**
- * Recipe for Edge Container
- */
-export declare const edgeContainer: EdgeContainerRecipe

package/dist/recipes/edge-container.mjs

@@ -1,24 +0,0 @@
-import { memo, splitProps } from '../helpers.mjs';
-import { createRecipe, mergeRecipes } from './create-recipe.mjs';
-
-const edgeContainerFn = /* @__PURE__ */ createRecipe('likec4-edge-container', {}, [])
-
-const edgeContainerVariantMap = {}
-
-const edgeContainerVariantKeys = Object.keys(edgeContainerVariantMap)
-
-export const edgeContainer = /* @__PURE__ */ Object.assign(memo(edgeContainerFn.recipeFn), {
-  __recipe__: true,
-  __name__: 'edgeContainer',
-  __getCompoundVariantCss__: edgeContainerFn.__getCompoundVariantCss__,
-  raw: (props) => props,
-  variantKeys: edgeContainerVariantKeys,
-  variantMap: edgeContainerVariantMap,
-  merge(recipe) {
-    return mergeRecipes(this, recipe)
-  },
-  splitVariantProps(props) {
-    return splitProps(props, edgeContainerVariantKeys)
-  },
-  getVariantProps: edgeContainerFn.getVariantProps,
-})