layerchart 2.0.0-next.38 → 2.0.0-next.39

package/dist/components/ClipPath.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import { createId } from '../utils/createId.js';
   import type { Without } from '../utils/types.js';
-  import { layerClass } from '../utils/attributes.js';
   import type { Snippet } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { getRenderContext } from './Chart.svelte';
@@ -76,7 +75,7 @@
   {#if disabled || renderContext !== 'svg'}
     {@render children({ id, url, useId })}
   {:else}
-    <g style:clip-path={url} class={layerClass('clip-path-g')}>
+    <g style:clip-path={url} class="lc-clip-path-g">
       {@render children({ id, url, useId })}
     </g>
   {/if}

package/dist/components/ColorRamp.svelte

@@ -83,5 +83,5 @@
   preserveAspectRatio="none"
   {height}
   {width}
-  {...extractLayerProps(restProps, 'color-ramp')}
+  {...extractLayerProps(restProps, 'lc-color-ramp')}
 />

package/dist/components/ComputedStyles.svelte

@@ -13,7 +13,6 @@
 <script lang="ts">
   import { computedStyles } from '@layerstack/svelte-actions';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
 
   let { class: className, children }: ComputedStylesProps = $props();
 
@@ -21,8 +20,16 @@
 </script>
 
 <div
-  class={cls(layerClass('computed-styles'), 'hidden', className)}
+  class={cls('lc-computed-styles', className)}
   use:computedStyles={(_styles) => (styles = _styles)}
 ></div>
 
 {@render children?.({ styles })}
+
+<style>
+  @layer base {
+    :global(:where(.lc-computed-styles)) {
+      display: none;
+    }
+  }
+</style>

package/dist/components/Connector.svelte

@@ -141,7 +141,7 @@
   marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
   marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
   marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-  {...extractLayerProps(restProps, 'connector')}
+  {...extractLayerProps(restProps, 'lc-connector')}
   {...restProps}
 />
 <MarkerWrapper id={markerStartId} marker={markerStart} />

package/dist/components/Ellipse.svelte

@@ -82,7 +82,6 @@
   import { renderEllipse, type ComputedStylesOptions } from '../utils/canvas.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     cx = 0,
@@ -133,7 +132,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-ellipse', className),
           }
     );
   }
@@ -181,7 +180,49 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('ellipse'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-ellipse', className)}
     {...restProps}
   />
+{:else if renderCtx === 'html'}
+  <div
+    style:position="absolute"
+    style:left="{motionCx.current}px"
+    style:top="{motionCy.current}px"
+    style:width="{motionRx.current * 2}px"
+    style:height="{motionRy.current * 2}px"
+    style:border-radius="50%"
+    style:background-color={fill}
+    style:opacity
+    style:border-width={strokeWidth}
+    style:border-color={stroke}
+    style:border-style="solid"
+    style:transform="translate(-50%, -50%)"
+    class={cls('lc-ellipse', className)}
+    {...restProps}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-ellipse)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-ellipse, svg.lc-ellipse):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-ellipse, svg.lc-ellipse):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-ellipse):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-ellipse):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

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

@@ -66,7 +66,6 @@
 </script>
 
 <script lang="ts">
-  import { cls } from '@layerstack/tailwind';
   import { merge } from 'lodash-es';
 
   import { getRenderContext } from './Chart.svelte';
@@ -74,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,
@@ -199,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

@@ -53,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}
 
@@ -68,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

@@ -81,5 +81,5 @@
   x={(d) => d[0]}
   y={(d) => d[1]}
   {curve}
-  {...extractLayerProps(restProps, 'geo-spline')}
+  {...extractLayerProps(restProps, 'lc-geo-spline')}
 />

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,7 +98,7 @@
   import Rule from './Rule.svelte';
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { autoTickVals, type TicksConfig } from '../utils/ticks.js';
 
   const ctx = getChartContext();
@@ -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();
 
@@ -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>

package/dist/components/Highlight.svelte

@@ -101,6 +101,11 @@
      */
     motion?: MotionProp;
 
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+
     onAreaClick?: (e: MouseEvent, detail: { data: any }) => void;
     onBarClick?: (e: MouseEvent, detail: { data: any }) => void;
 
@@ -114,7 +119,6 @@
   import { max, min } from 'd3-array';
   import { pointRadial, type Series, type SeriesPoint } from 'd3-shape';
   import { notNull } from '@layerstack/utils';
-  import { cls } from '@layerstack/tailwind';
 
   import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { asAny } from '../utils/types.js';
@@ -136,6 +140,7 @@
     lines: linesProp = false,
     area = false,
     bar = false,
+    opacity,
     motion = 'spring',
     onAreaClick,
     onBarClick,
@@ -435,11 +440,6 @@
       return tmpPoints;
     }
   );
-
-  const areaProps = $derived(extractLayerProps(area, 'highlight-area'));
-  const barProps = $derived(extractLayerProps(bar, 'highlight-bar'));
-  const linesProps = $derived(extractLayerProps(linesProp, 'highlight-line'));
-  const pointsProps = $derived(extractLayerProps(points, 'highlight-point'));
 </script>
 
 {#if highlightData}
@@ -454,15 +454,16 @@
         endAngle={_area.x + _area.width}
         innerRadius={_area.y}
         outerRadius={_area.y + _area.height}
-        class={cls(!areaProps.fill && 'fill-surface-content/5', areaProps.class)}
+        {opacity}
+        class="lc-highlight-area"
         onclick={onAreaClick && ((e) => onAreaClick(e, { data: highlightData }))}
       />
     {:else}
       <Rect
         motion={motion === 'spring' ? 'spring' : undefined}
+        {opacity}
         {..._area}
-        {...areaProps}
-        class={cls(!areaProps.fill && 'fill-surface-content/5', areaProps.class)}
+        {...extractLayerProps(area, 'lc-highlight-area')}
         onclick={onAreaClick && ((e) => onAreaClick(e, { data: highlightData }))}
       />
     {/if}
@@ -475,8 +476,8 @@
       <Bar
         motion={motion === 'spring' ? 'spring' : undefined}
         data={highlightData}
-        {...barProps}
-        class={cls(!barProps.fill && 'fill-primary', barProps.class)}
+        {opacity}
+        {...extractLayerProps(bar, 'lc-highlight-bar')}
         onclick={onBarClick && ((e) => onBarClick(e, { data: highlightData }))}
       />
     {/if}
@@ -493,11 +494,8 @@
           y1={line.y1}
           x2={line.x2}
           y2={line.y2}
-          {...linesProps}
-          class={cls(
-            'stroke-surface-content/20 stroke-2 [stroke-dasharray:2,2] pointer-events-none',
-            linesProps.class
-          )}
+          {opacity}
+          {...extractLayerProps(linesProp, 'lc-highlight-line')}
         />
       {/each}
     {/if}
@@ -515,12 +513,8 @@
           fill={point.fill}
           r={4}
           strokeWidth={6}
-          {...pointsProps}
-          class={cls(
-            'stroke-white [paint-order:stroke] drop-shadow-sm',
-            !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
-            pointsProps.class
-          )}
+          {opacity}
+          {...extractLayerProps(points, 'lc-highlight-point')}
           onpointerdown={onPointClick &&
             ((e) => {
               // Do not propagate `pointerdown` event to `BrushContext` if `onclick` is provided
@@ -546,3 +540,33 @@
     {/if}
   {/if}
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-highlight-area)) {
+      --fill-color: color-mix(in oklab, var(--color-surface-content, currentColor) 5%, transparent);
+    }
+
+    :global(:where(.lc-highlight-bar)) {
+      --fill-color: var(--color-primary, currentColor);
+    }
+
+    :global(:where(.lc-highlight-line)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      stroke-width: 2;
+      stroke-dasharray: 2 2;
+      pointer-events: none;
+    }
+
+    :global(:where(.lc-highlight-point)) {
+      --stroke-color: white;
+      --fill-color: var(--color-primary, currentColor);
+      paint-order: stroke;
+      filter: drop-shadow(var(--drop-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.15)));
+    }
+  }
+</style>

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

@@ -82,6 +82,10 @@ export type HighlightPropsWithoutHTML = {
      * @default true
      */
     motion?: MotionProp;
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
     onAreaClick?: (e: MouseEvent, detail: {
         data: any;
     }) => void;