layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/components/ForceSimulation.svelte.d.ts

@@ -1,44 +1,95 @@
-import { type Force, type Simulation, type SimulationNodeDatum } from 'd3-force';
+import { type Force, type Simulation, type SimulationLinkDatum, type SimulationNodeDatum } from 'd3-force';
 import type { Snippet } from 'svelte';
-type Forces = Record<string, Force<any, any>>;
+export type Forces<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = Record<string, Force<NodeDatum, LinkDatum>>;
+export type Data<TNode = any, TLink = any> = {
+    nodes: TNode[];
+    links?: TLink[];
+};
 export type LinkPosition = {
     x1: number;
     y1: number;
     x2: number;
     y2: number;
 };
-export type ForceSimulationProps = {
+export type OnStartEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnTickEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnEndEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+export type OnNodesChangeEvent<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
+    alpha: number;
+    alphaTarget: number;
+    nodes: NodeDatum[];
+    links: LinkDatum[];
+    simulation: Simulation<NodeDatum, LinkDatum>;
+};
+/**
+ * Default initial alpha value of the simulation.
+ */
+export declare const DEFAULT_ALPHA: number;
+/**
+ * Default target alpha value for the simulation.
+ */
+export declare const DEFAULT_ALPHA_TARGET: number;
+/**
+ * Default alpha decay rate per tick.
+ *
+ * Formula: `1 - Math.pow(0.001, 1 / 300)`.
+ */
+export declare const DEFAULT_ALPHA_DECAY: number;
+/**
+ * Default minimum alpha value at which simulation stops.
+ */
+export declare const DEFAULT_ALPHA_MIN: number;
+/**
+ * Default velocity decay factor applied to nodes each tick.
+ */
+export declare const DEFAULT_VELOCITY_DECAY: number;
+export type ForceSimulationProps<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = {
     /**
      * Force simulation parameters
      */
-    forces: Forces;
+    forces: Forces<NodeDatum, LinkDatum>;
     /**
-     * An array of links to be used for position calculation.
+     * An object with arrays of nodes and links,
+     * to be used for position calculation.
      */
-    links?: any[];
+    data: Data<NodeDatum, LinkDatum>;
     /**
      * Current alpha value of the simulation
-     * @default 1
+     * @default DEFAULT_ALPHA
      */
     alpha?: number;
     /**
      * Target alpha value for the simulation
-     * @default 0
+     * @default DEFAULT_ALPHA_TARGET
      */
     alphaTarget?: number;
     /**
      * Alpha decay rate per tick
-     * @default 1 - Math.pow(0.001, 1 / 300)
+     * @default DEFAULT_ALPHA_DECAY
      */
     alphaDecay?: number;
     /**
      * Minimum alpha value at which simulation stops
-     * @default 0.01
+     * @default DEFAULT_ALPHA_MIN
      */
     alphaMin?: number;
     /**
      * Velocity decay factor applied to nodes each tick
-     * @default 0.4
+     * @default DEFAULT_VELOCITY_DECAY
      */
     velocityDecay?: number;
     /**
@@ -59,26 +110,49 @@ export type ForceSimulationProps = {
     /**
      * Callback function triggered when simulation starts
      */
-    onStart?: () => void;
+    onStart?: (e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void;
+    /**
+     * Callback function triggered right before nodes get passed to the simulation
+     */
+    onNodesChange?: (e: OnNodesChangeEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered on each simulation tick
      */
-    onTick?: (e: {
-        alpha: number;
-        alphaTarget: number;
-    }) => void;
+    onTick?: (e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void;
     /**
      * Callback function triggered when simulation ends
      */
-    onEnd?: () => void;
+    onEnd?: (e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void;
     children?: Snippet<[
         {
-            nodes: any[];
-            simulation: Simulation<SimulationNodeDatum, undefined>;
+            nodes: NodeDatum[];
+            links: LinkDatum[];
             linkPositions: LinkPosition[];
+            simulation: Simulation<NodeDatum, LinkDatum>;
         }
     ]>;
 };
-declare const ForceSimulation: import("svelte").Component<ForceSimulationProps, {}, "alpha">;
-type ForceSimulation = ReturnType<typeof ForceSimulation>;
+declare function $$render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(): {
+    props: ForceSimulationProps<NodeDatum, LinkDatum>;
+    exports: {};
+    bindings: "alpha";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> {
+    props(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['props'];
+    events(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['events'];
+    slots(): ReturnType<typeof $$render<NodeDatum, LinkDatum>>['slots'];
+    bindings(): "alpha";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['events']>, ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['bindings']>;
+    } & ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    <NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined>(internal: unknown, props: ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['props']> & {}): ReturnType<__sveltets_Render<NodeDatum, LinkDatum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ForceSimulation: $$IsomorphicComponent;
+type ForceSimulation<NodeDatum extends SimulationNodeDatum, LinkDatum extends SimulationLinkDatum<NodeDatum> | undefined> = InstanceType<typeof ForceSimulation<NodeDatum, LinkDatum>>;
 export default ForceSimulation;

package/dist/components/Frame.svelte

@@ -37,5 +37,5 @@
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   bind:ref
-  {...extractLayerProps(restProps, 'frame')}
+  {...extractLayerProps(restProps, 'lc-frame')}
 />

package/dist/components/GeoCircle.svelte

@@ -34,4 +34,4 @@
   const geojson = $derived(geoCircle().radius(radius).center(center).precision(precision)());
 </script>
 
-<GeoPath {geojson} {...extractLayerProps(restProps, 'geo-circle')} />
+<GeoPath {geojson} {...extractLayerProps(restProps, 'lc-geo-circle')} />

package/dist/components/GeoEdgeFade.svelte

@@ -56,6 +56,6 @@
   const opacity = $derived(opacityProp ?? clamper(fade(distance)));
 </script>
 
-<Group {opacity} bind:ref {...extractLayerProps(restProps, 'geo-edge-fade')}>
+<Group {opacity} bind:ref {...extractLayerProps(restProps, 'lc-geo-edge-fade')}>
   {@render children?.()}
 </Group>

package/dist/components/GeoPath.svelte

@@ -5,6 +5,7 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import {
+    geoPath as d3GeoPath,
     geoTransform as d3geoTransform,
     type GeoIdentityTransform,
     type GeoPermissibleObjects,
@@ -65,7 +66,6 @@
 </script>
 
 <script lang="ts">
-  import { cls } from '@layerstack/tailwind';
   import { merge } from 'lodash-es';
 
   import { getRenderContext } from './Chart.svelte';
@@ -73,7 +73,6 @@
   import { geoCurvePath } from '../utils/geo.js';
   import { getGeoContext } from './GeoContext.svelte';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     fill,
@@ -105,6 +104,10 @@
   const geoPath = $derived.by(() => {
     geojson;
     if (!projection) return;
+    // Only use geoCurvePath for custom curves (performance impact)
+    if (curve === curveLinearClosed) {
+      return d3GeoPath(projection);
+    }
     return geoCurvePath(projection, curve);
   });
 
@@ -157,16 +160,18 @@
       name: 'GeoPath',
       render,
       events: {
-        click: _onClick,
-        pointerenter: _onPointerEnter,
-        pointermove: _onPointerMove,
-        pointerleave: _onPointerLeave,
+        // Only register events if they are defined (so they are not registered with hit canvas unnecessarily)
+        click: onclick ? _onClick : undefined,
+        pointerenter: restProps.onpointerenter || tooltipContext ? _onPointerEnter : undefined,
+        pointermove: restProps.onpointermove || tooltipContext ? _onPointerMove : undefined,
+        pointerleave: restProps.onpointerleave || tooltipContext ? _onPointerLeave : undefined,
         pointerdown: restProps.onpointerdown,
         touchmove: restProps.ontouchmove,
       },
       deps: () => [
-        geojson,
         projection,
+        geojson,
+        curve,
         fillKey.current,
         strokeKey.current,
         strokeWidth,
@@ -192,6 +197,23 @@
     onpointerenter={_onPointerEnter}
     onpointermove={_onPointerMove}
     onpointerleave={_onPointerLeave}
-    class={cls(layerClass('geo-path'), fill == null && 'fill-transparent', className)}
+    class={['lc-geo-path', className]}
   />
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-geo-path)) {
+      --fill-color: transparent;
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-geo-path, svg.lc-geo-path):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-geo-path, svg.lc-geo-path):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/GeoPoint.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SVGAttributes } from 'svelte/elements';
-  import Circle, { type CircleProps, type CirclePropsWithoutHTML } from './Circle.svelte';
+  import Circle, { type CircleProps } from './Circle.svelte';
   import type { Without } from '../utils/types.js';
 
   export type GeoPointPropsWithoutHTML = {
@@ -54,11 +53,11 @@
 
 {#if renderContext === 'svg'}
   {#if children}
-    <Group {x} {y} {...extractLayerProps(restProps, 'geo-point-group')}>
+    <Group {x} {y} {...extractLayerProps(restProps, 'lc-geo-point-group')}>
       {@render children({ x, y })}
     </Group>
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
+    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}
 
@@ -69,6 +68,6 @@
     {@render children({ x, y })}
     <!-- </Group> -->
   {:else}
-    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'geo-point')} />
+    <Circle cx={x} cy={y} {...extractLayerProps(restProps, 'lc-geo-point')} />
   {/if}
 {/if}

package/dist/components/GeoSpline.svelte

@@ -42,13 +42,13 @@
     link,
     loft = 1.0,
     curve = curveNatural,
-    splineRef: splineRefProp = $bindable(),
+    pathRef: pathRefProp = $bindable(),
     ...restProps
   }: GeoSplineProps = $props();
 
-  let splineRef = $state<SVGPathElement>();
+  let pathRef = $state<SVGPathElement>();
   $effect.pre(() => {
-    splineRefProp = splineRef;
+    pathRefProp = pathRef;
   });
 
   const geoCtx = getGeoContext();
@@ -76,10 +76,10 @@
 </script>
 
 <Spline
-  bind:splineRef
+  bind:pathRef
   data={[source, middle, target]}
   x={(d) => d[0]}
   y={(d) => d[1]}
   {curve}
-  {...extractLayerProps(restProps, 'geo-spline')}
+  {...extractLayerProps(restProps, 'lc-geo-spline')}
 />

package/dist/components/GeoSpline.svelte.d.ts

@@ -27,6 +27,6 @@ export type GeoSplinePropsWithoutHTML = {
     curve?: CurveFactory | CurveFactoryLineOnly;
 };
 export type GeoSplineProps = GeoSplinePropsWithoutHTML & Without<SplineProps, GeoSplinePropsWithoutHTML>;
-declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "splineRef">;
+declare const GeoSpline: import("svelte").Component<GeoSplineProps, {}, "pathRef">;
 type GeoSpline = ReturnType<typeof GeoSpline>;
 export default GeoSpline;

package/dist/components/GeoTile.svelte

@@ -106,7 +106,7 @@
     <Group
       x={-ctx.padding.left}
       y={-ctx.padding.top}
-      {...extractLayerProps(group, 'geo-tile-group')}
+      {...extractLayerProps(group, 'lc-geo-tile-group')}
     >
       {#each tiles as [x, y, z] (url(x, y, z))}
         <TileImage

package/dist/components/Graticule.svelte

@@ -15,7 +15,7 @@
 
 <script lang="ts">
   import { geoGraticule } from 'd3-geo';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import Group from './Group.svelte';
 
   let { lines, outline, step = [10, 10], ...restProps }: GraticuleProps = $props();
@@ -27,22 +27,22 @@
   });
 </script>
 
-<Group class={layerClass('graticule-g')}>
+<Group class="lc-graticule-g">
   <!-- TODO: Any reason to still render the single `MultiLineString` path if using `lines` and/or `outline` -->
   {#if !lines && !outline}
-    <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'graticule-geo-path')} />
+    <GeoPath geojson={graticule()} {...extractLayerProps(restProps, 'lc-graticule-geo-path')} />
   {/if}
 
   {#if lines}
     {#each graticule.lines() as line}
-      <GeoPath geojson={line} {...extractLayerProps(lines, 'graticule-geo-line')} />
+      <GeoPath geojson={line} {...extractLayerProps(lines, 'lc-graticule-geo-line')} />
     {/each}
   {/if}
 
   {#if outline}
     <GeoPath
       geojson={graticule.outline()}
-      {...extractLayerProps(outline, 'graticule-geo-outline')}
+      {...extractLayerProps(outline, 'lc-graticule-geo-outline')}
     />
   {/if}
 </Group>

package/dist/components/Grid.svelte

@@ -98,8 +98,8 @@
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
-  import { resolveTickVals, type TicksConfig } from '../utils/ticks.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
 
   const ctx = getChartContext();
 
@@ -131,8 +131,8 @@
 
   const transitionIn = $derived((transitionInProp ?? tweenConfig?.options) ? fade : () => ({}));
 
-  const xTickVals = $derived(resolveTickVals(ctx.xScale, xTicks));
-  const yTickVals = $derived(resolveTickVals(ctx.yScale, yTicks));
+  const xTickVals = $derived(autoTickVals(ctx.xScale, xTicks));
+  const yTickVals = $derived(autoTickVals(ctx.yScale, yTicks));
 
   const xBandOffset = $derived(
     isScaleBand(ctx.xScale)
@@ -151,11 +151,11 @@
   );
 </script>
 
-<Group bind:ref class={cls(layerClass('grid'), classes.root, className)} {...restProps}>
+<Group bind:ref class={cls('lc-grid', classes.root, className)} {...restProps}>
   {#if x}
-    {@const splineProps = extractLayerProps(x, 'grid-x-line')}
+    {@const splineProps = extractLayerProps(x, 'lc-grid-x-line')}
 
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-x')}>
+    <Group {transitionIn} {transitionInParams} class="lc-grid-x">
       {#each xTickVals as x (x)}
         {#if ctx.radial}
           {@const [x1, y1] = pointRadial(ctx.xScale(x), ctx.yRange[0])}
@@ -167,12 +167,7 @@
             {y2}
             motion={tweenConfig}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-radial-line'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-radial-line', classes.line, splineProps?.class)}
           />
         {:else}
           <Rule
@@ -180,37 +175,28 @@
             xOffset={xBandOffset}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-x-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-x-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
 
       <!-- Add extra rule after last band -->
       {#if isScaleBand(ctx.xScale) && bandAlign === 'between' && !ctx.radial && xTickVals.length}
+        {@const x = ctx.xScale(xTickVals[xTickVals.length - 1])! + ctx.xScale.step() + xBandOffset}
         <Rule
           x={xTickVals[xTickVals.length - 1]}
           xOffset={ctx.xScale.step() + xBandOffset}
           {motion}
           {...splineProps}
-          class={cls(
-            layerClass('grid-x-end-rule'),
-            'stroke-surface-content/10',
-            classes.line,
-            splineProps?.class
-          )}
+          class={cls('lc-grid-x-end-rule', classes.line, splineProps?.class)}
         />
       {/if}
     </Group>
   {/if}
 
   {#if y}
-    {@const splineProps = extractLayerProps(y, 'grid-y-line')}
-    <Group {transitionIn} {transitionInParams} class={layerClass('grid-y')}>
+    {@const splineProps = extractLayerProps(y, 'lc-grid-y-line')}
+    <Group {transitionIn} {transitionInParams} class="lc-grid-y">
       {#each yTickVals as y (y)}
         {#if ctx.radial}
           {#if radialY === 'circle'}
@@ -218,12 +204,7 @@
               r={ctx.yScale(y) + yBandOffset}
               {motion}
               {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-circle'),
-                'fill-none stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
+              class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
             />
           {:else}
             <Spline
@@ -233,26 +214,18 @@
               motion={tweenConfig}
               curve={curveLinearClosed}
               {...splineProps}
-              class={cls(
-                layerClass('grid-y-radial-line'),
-                'stroke-surface-content/10',
-                classes.line,
-                splineProps?.class
-              )}
+              class={cls('lc-grid-y-radial-line', classes.line, splineProps?.class)}
             />
           {/if}
         {:else}
-          <Rule
-            {y}
-            yOffset={yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={ctx.yScale(y) + yBandOffset}
+            x2={ctx.xRange[1]}
+            y2={ctx.yScale(y) + yBandOffset}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/each}
@@ -264,28 +237,52 @@
             r={ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-radial-circle'),
-              'fill-none stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-radial-circle', classes.line, splineProps?.class)}
           />
         {:else}
-          <Rule
-            y={yTickVals[yTickVals.length - 1]}
-            yOffset={ctx.yScale.step() + yBandOffset}
+          {@const y =
+            ctx.yScale(yTickVals[yTickVals.length - 1])! + ctx.yScale.step() + yBandOffset}
+          <Line
+            x1={ctx.xRange[0]}
+            y1={y}
+            x2={ctx.xRange[1]}
+            y2={y}
             {motion}
             {...splineProps}
-            class={cls(
-              layerClass('grid-y-end-rule'),
-              'stroke-surface-content/10',
-              classes.line,
-              splineProps?.class
-            )}
+            class={cls('lc-grid-y-end-rule', classes.line, splineProps?.class)}
           />
         {/if}
       {/if}
     </Group>
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(
+      :where(
+        .lc-grid-x-rule,
+        .lc-grid-x-end-rule,
+        .lc-grid-x-radial-line,
+        .lc-grid-y-rule,
+        .lc-grid-y-end-rule,
+        .lc-grid-y-radial-line
+      )
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-grid-y-radial-circle)) {
+      --fill-color: none;
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+  }
+</style>

package/dist/components/Group.svelte

@@ -83,13 +83,10 @@
   import { fade } from 'svelte/transition';
   import { cubicIn } from 'svelte/easing';
 
-  import { cls } from '@layerstack/tailwind';
-
   import { getRenderContext } from './Chart.svelte';
   import { registerCanvasComponent } from './layout/Canvas.svelte';
 
   import { getChartContext } from './Chart.svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -100,7 +97,7 @@
     initialY: initialYProp,
     center = false,
     preventTouchMove = false,
-    opacity = 1,
+    opacity = undefined,
     motion,
     transitionIn: transitionInProp,
     transitionInParams: transitionInParamsProp,
@@ -144,7 +141,7 @@
       name: 'Group',
       render: (ctx) => {
         const currentGlobalAlpha = ctx.globalAlpha;
-        ctx.globalAlpha = opacity;
+        ctx.globalAlpha = opacity ?? 1;
 
         ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
 
@@ -178,7 +175,7 @@
 {:else if renderCtx === 'svg'}
   <g
     style:transform
-    class={cls(layerClass('group-g'), className)}
+    class={['lc-group-g', className]}
     in:transitionIn={transitionInParams}
     {opacity}
     {...restProps}
@@ -187,16 +184,24 @@
   >
     {@render children?.()}
   </g>
-{:else}
+{:else if renderCtx === 'html'}
   <div
     bind:this={ref}
     style:transform
     style:opacity
     in:transitionIn={transitionInParams}
     {...restProps}
-    class={cls(layerClass('group-div'), 'absolute', className)}
+    class={['lc-group-div', className]}
     ontouchmove={handleTouchMove}
   >
     {@render children?.()}
   </div>
 {/if}
+
+<style>
+  @layer base {
+    :where(.lc-group-div) {
+      position: absolute;
+    }
+  }
+</style>