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

package/dist/components/AnnotationLine.svelte

@@ -130,7 +130,7 @@
   x2={line.x2}
   y2={line.y2}
   {...props?.line}
-  class={cls('stroke-surface-content', props?.line?.class)}
+  class={cls('lc-annotation-line', props?.line?.class)}
 />
 
 {#if label}
@@ -138,6 +138,19 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-line-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    :global(:where(.lc-annotation-line-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/AnnotationPoint.svelte

@@ -108,12 +108,14 @@
   cx={point.x}
   cy={point.y}
   {r}
+  onpointermove={onPointerMove}
   onmousemove={onPointerMove}
   ontouchmove={onPointerMove}
+  onpointerleave={onPointerLeave}
   onmouseleave={onPointerLeave}
   ontouchend={onPointerLeave}
   {...props?.circle}
-  class={cls('stroke-surface-100', props?.circle?.class)}
+  class={cls('lc-annotation-point', props?.circle?.class)}
 />
 
 {#if label}
@@ -121,6 +123,15 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-point-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-point-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/AnnotationRange.svelte

@@ -118,7 +118,12 @@
 </script>
 
 {#if fill || className}
-  <Rect {...rect} {...props?.rect} {fill} class={cls(props?.rect?.class, className)} />
+  <Rect
+    {...rect}
+    {...props?.rect}
+    {fill}
+    class={cls('lc-annotation-range', props?.rect?.class, className)}
+  />
 {/if}
 
 {#if gradient}
@@ -142,6 +147,15 @@
     value={label}
     {...labelProps}
     {...props?.label}
-    class={cls('text-xs pointer-events-none', props?.label?.class)}
+    class={cls('lc-annotation-range-label', props?.label?.class)}
   />
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-annotation-range-label)) {
+      font-size: 12px;
+      pointer-events: none;
+    }
+  }
+</style>

package/dist/components/Arc.svelte

@@ -189,7 +189,7 @@
 
   import { degreesToRadians } from '../utils/math.js';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
   import { max } from 'd3-array';
   import {
@@ -402,7 +402,7 @@
     pathData={trackArc()}
     stroke="none"
     bind:pathRef={trackRef}
-    {...extractLayerProps(track, 'arc-track')}
+    {...extractLayerProps(track, 'lc-arc-track')}
   />
 {/if}
 
@@ -416,7 +416,7 @@
   stroke-width={strokeWidth}
   {opacity}
   {...restProps}
-  class={cls(layerClass('arc-line'), className)}
+  class={cls('lc-arc-line', className)}
   onpointerenter={onPointerEnter}
   onpointermove={onPointerMove}
   onpointerleave={onPointerLeave}

package/dist/components/Area.svelte

@@ -239,7 +239,15 @@
 </script>
 
 {#if line}
-  <Spline {data} {x} y={y1} {curve} {defined} {motion} {...extractLayerProps(line, 'area-line')} />
+  <Spline
+    {data}
+    {x}
+    y={y1}
+    {curve}
+    {defined}
+    {motion}
+    {...extractLayerProps(line, 'lc-area-line')}
+  />
 {/if}
 
 {#if renderCtx === 'svg'}
@@ -251,6 +259,6 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    {...extractLayerProps(restProps, 'area-path')}
+    {...extractLayerProps(restProps, 'lc-area-path')}
   />
 {/if}

package/dist/components/Axis.svelte

@@ -145,7 +145,7 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
 
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { type MotionProp } from '../utils/motion.svelte.js';
   import { autoTickVals, autoTickFormat, type TicksConfig } from '../utils/ticks.js';
 
@@ -422,28 +422,21 @@
     capHeight: '7px',
     lineHeight: '11px',
     ...labelProps,
-    class: cls(
-      layerClass('axis-label'),
-      'text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-      classes.label,
-      labelProps?.class
-    ),
+    class: cls('lc-axis-label', classes.label, labelProps?.class),
   }) satisfies ComponentProps<typeof Text>;
 </script>
 
 <Group
   {...restProps}
   data-placement={placement}
-  class={cls(layerClass('axis'), `placement-${placement}`, classes.root, className)}
+  class={cls('lc-axis', `placement-${placement}`, classes.root, className)}
 >
   {#if rule !== false}
-    {@const ruleProps = extractLayerProps(rule, 'axis-rule')}
     <Rule
       x={placement === 'left' ? '$left' : placement === 'right' ? '$right' : placement === 'angle'}
       y={placement === 'top' ? '$top' : placement === 'bottom' ? '$bottom' : placement === 'radius'}
       {motion}
-      {...ruleProps}
-      class={cls('stroke-surface-content/50', classes.rule, ruleProps?.class)}
+      {...extractLayerProps(rule, 'lc-axis-rule', classes.rule ?? '')}
     />
   {/if}
 
@@ -470,32 +463,21 @@
       capHeight: '7px',
       lineHeight: '11px',
       ...tickLabelProps,
-      class: cls(
-        layerClass('axis-tick-label'),
-        'text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-        classes.tickLabel,
-        tickLabelProps?.class
-      ),
+      class: cls('lc-axis-tick-label', classes.tickLabel, tickLabelProps?.class),
     }}
 
-    <Group {transitionIn} {transitionInParams} class={layerClass('axis-tick-group')}>
+    <Group {transitionIn} {transitionInParams} class="lc-axis-tick-group">
       {#if grid !== false}
-        {@const ruleProps = extractLayerProps(grid, 'axis-grid')}
         <Rule
           x={orientation === 'horizontal' || orientation === 'angle' ? tick : false}
           y={orientation === 'vertical' || orientation === 'radius' ? tick : false}
           {motion}
-          {...ruleProps}
-          class={cls('stroke-surface-content/10', classes.rule, ruleProps?.class)}
+          {...extractLayerProps(grid, 'lc-axis-grid', classes.rule ?? '')}
         />
       {/if}
 
       {#if tickMarks}
-        {@const tickClasses = cls(
-          layerClass('axis-tick'),
-          'stroke-surface-content/50',
-          classes.tick
-        )}
+        {@const tickClasses = cls('lc-axis-tick', classes.tick)}
         {#if orientation === 'horizontal'}
           <Line
             x1={tickCoords.x}
@@ -534,3 +516,38 @@
     </Group>
   {/each}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-axis-rule)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-tick)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-grid)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 10%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-axis-label, .lc-axis-tick-label)) {
+      font-size: 10px;
+      stroke: var(--color-surface-100, light-dark(white, black));
+      stroke-width: 2px;
+      font-weight: 300;
+    }
+  }
+</style>

package/dist/components/Bar.svelte

@@ -71,7 +71,8 @@
     Without<
       Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>,
       BarPropsWithoutHTML
-    >;
+    > &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -84,7 +85,7 @@
   import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import { extractLayerProps } from '../utils/attributes.js';
   import { extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
   import Arc from './Arc.svelte';
@@ -183,7 +184,7 @@
     {strokeWidth}
     {opacity}
     cornerRadius={radius}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else if rounded === 'all' || rounded === 'none' || radius === 0}
   <Rect
@@ -199,7 +200,7 @@
     {initialHeight}
     {initialWidth}
     {...dimensions}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {:else}
   {@const tweenMotion = extractTweenConfig(motion)}
@@ -211,6 +212,6 @@
     {strokeWidth}
     {opacity}
     motion={tweenMotion}
-    {...extractLayerProps(restProps, 'bar')}
+    {...extractLayerProps(restProps, 'lc-bar')}
   />
 {/if}

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

@@ -41,10 +41,10 @@ export type BarPropsWithoutHTML = {
     rounded?: 'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 } & CommonStyleProps;
-export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML>;
+export type BarProps = BarPropsWithoutHTML & Without<Omit<SVGAttributes<SVGElement>, 'width' | 'height' | 'x' | 'y' | 'offset'>, BarPropsWithoutHTML> & CommonEvents;
 import type { SVGAttributes } from 'svelte/elements';
 import { type Accessor } from '../utils/common.js';
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import { type MotionProp } from '../utils/motion.svelte.js';
 declare const Bar: import("svelte").Component<BarProps, {}, "">;
 type Bar = ReturnType<typeof Bar>;

package/dist/components/Bars.svelte

@@ -34,7 +34,7 @@
 
   import { getChartContext } from './Chart.svelte';
   import { chartDataArray } from '../utils/common.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   let {
     fill,
@@ -52,7 +52,7 @@
   const data = $derived(chartDataArray(dataProp ?? ctx.data));
 </script>
 
-<Group class={layerClass('bars')}>
+<Group class="lc-bars">
   {#if children}
     {@render children()}
   {:else}
@@ -64,7 +64,7 @@
         {stroke}
         fill={fill ?? (ctx.config.c ? ctx.cGet(d) : null)}
         onclick={(e) => onBarClick(e, { data: d })}
-        {...extractLayerProps(restProps, 'bars-bar')}
+        {...extractLayerProps(restProps, 'lc-bars-bar')}
       />
     {/each}
   {/if}

package/dist/components/Blur.svelte

@@ -24,7 +24,6 @@
   import type { Snippet } from 'svelte';
   import { getRenderContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -35,13 +34,13 @@
 
 {#if renderContext === 'svg'}
   <defs>
-    <filter {id} class={layerClass('blur-filter')}>
+    <filter {id} class="lc-blur-filter">
       <feGaussianBlur in="SourceGraphic" {stdDeviation} />
     </filter>
   </defs>
 
   {#if children}
-    <g filter="url(#{id})" class={layerClass('blur-g')}>
+    <g filter="url(#{id})" class="lc-blur-g">
       {@render children()}
     </g>
   {/if}

package/dist/components/BrushContext.svelte

@@ -148,7 +148,6 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -463,7 +462,6 @@
 {#if disabled}
   {@render children?.({ brushContext })}
 {:else}
-  {@const handleClass = layerClass('brush-handle')}
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     bind:this={rootEl}
@@ -471,12 +469,12 @@
     style:left="{ctx.padding.left}px"
     style:width="{ctx.width}px"
     style:height="{ctx.height}px"
-    class={cls(layerClass('brush-context'), 'absolute touch-none')}
+    class={cls('lc-brush-context')}
     onpointerdown={createRange}
     ondblclick={() => selectAll()}
   >
     <div
-      class={cls(layerClass('brush-container'), 'absolute')}
+      class={cls('lc-brush-container')}
       style:top="-{ctx.padding.top ?? 0}px"
       style:left="-{ctx.padding.left ?? 0}px"
       style:width="{ctx.containerWidth}px"
@@ -492,13 +490,7 @@
         style:top="{_range.y}px"
         style:width="{_range.width}px"
         style:height="{_range.height}px"
-        class={cls(
-          layerClass('brush-range'),
-          'absolute bg-surface-content/10 cursor-move select-none',
-          'z-10',
-          classes.range,
-          range?.class
-        )}
+        class={cls('lc-brush-range', classes.range, range?.class)}
         onpointerdown={adjustRange}
         ondblclick={() => reset()}
       ></div>
@@ -511,14 +503,7 @@
           style:width="{_range.width}px"
           style:height="{handleSize}px"
           data-position="top"
-          class={cls(
-            handleClass,
-            'cursor-ns-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustTop}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -536,15 +521,7 @@
           style:width="{_range.width}px"
           style:height="{handleSize}px"
           data-position="bottom"
-          class={cls(
-            handleClass,
-            'handle bottom',
-            'cursor-ns-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustBottom}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -564,14 +541,7 @@
           style:width="{handleSize}px"
           style:height="{_range.height}px"
           data-position="left"
-          class={cls(
-            handleClass,
-            'cursor-ew-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustLeft}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -589,14 +559,7 @@
           style:width="{handleSize}px"
           style:height="{_range.height}px"
           data-position="right"
-          class={cls(
-            handleClass,
-            'cursor-ew-resize select-none',
-            'range absolute',
-            'z-10',
-            classes.handle,
-            handle?.class
-          )}
+          class={cls('lc-brush-handle', classes.handle, handle?.class)}
           onpointerdown={adjustRight}
           ondblclick={(e) => {
             e.stopPropagation();
@@ -610,3 +573,40 @@
     {/if}
   </div>
 {/if}
+
+<style>
+  @layer base {
+    :where(.lc-brush-context) {
+      position: absolute;
+      touch-action: none;
+    }
+
+    :where(.lc-brush-container) {
+      position: absolute;
+    }
+
+    :where(.lc-brush-range) {
+      position: absolute;
+      cursor: move;
+      user-select: none;
+      z-index: 10;
+      background: color-mix(in oklab, var(--color-surface-content, currentColor) 10%, transparent);
+    }
+
+    :where(.lc-brush-handle) {
+      position: absolute;
+      user-select: none;
+      z-index: 10;
+
+      &[data-position='top'],
+      &[data-position='bottom'] {
+        cursor: ns-resize;
+      }
+
+      &[data-position='left'],
+      &[data-position='right'] {
+        cursor: ew-resize;
+      }
+    }
+  }
+</style>

package/dist/components/Calendar.svelte

@@ -128,14 +128,15 @@
       fill={cell.color}
       onpointermove={(e) => tooltip?.show(e, cell.data)}
       onpointerleave={(e) => tooltip?.hide()}
-      {...extractLayerProps(restProps, 'calendar-cell', 'stroke-surface-content/5')}
+      strokeWidth={1}
+      {...extractLayerProps(restProps, 'lc-calendar-cell')}
     />
   {/each}
 {/if}
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'calendar-month-path')} />
+    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'lc-calendar-month-path')} />
   {/each}
 {/if}
 
@@ -143,9 +144,25 @@
   {#each yearMonths as date}
     <Text
       x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
-      y={-4}
       value={format(date, 'month', { variant: 'short' })}
-      {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
+      capHeight="7px"
+      {...extractLayerProps(monthLabel, 'lc-calendar-month-label')}
     />
   {/each}
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-calendar-cell)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 5%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-calendar-month-label)) {
+      font-size: 12px;
+    }
+  }
+</style>

package/dist/components/Chart.svelte

@@ -41,7 +41,6 @@
   import { geoFitObjectTransform } from '../utils/geo.js';
   import TransformContext, { type TransformContextValue } from './TransformContext.svelte';
   import BrushContext, { type BrushContextValue } from './BrushContext.svelte';
-  import { layerClass } from '../utils/attributes.js';
   import type { TimeInterval } from 'd3-time';
 
   const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -1394,7 +1393,7 @@
     style:pointer-events={pointerEvents === false ? 'none' : null}
     bind:clientWidth={containerWidth}
     bind:clientHeight={containerHeight}
-    class={layerClass('root-container')}
+    class="lc-root-container"
   >
     {#key isMounted}
       <!-- svelte-ignore ownership_invalid_binding -->

package/dist/components/ChartClipPath.svelte

@@ -41,5 +41,5 @@
   {disabled}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
-  {...extractLayerProps(restProps, 'chart-clip-path')}
+  {...extractLayerProps(restProps, 'lc-chart-clip-path')}
 />

package/dist/components/Circle.svelte

@@ -68,7 +68,6 @@
   import { renderCircle, 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,
@@ -115,7 +114,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-circle', className),
           }
     );
   }
@@ -161,7 +160,49 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('circle'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-circle', className)}
     {...restProps}
   />
+{:else if renderCtx === 'html'}
+  <div
+    style:position="absolute"
+    style:left="{motionCx.current}px"
+    style:top="{motionCy.current}px"
+    style:width="{motionR.current * 2}px"
+    style:height="{motionR.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-circle', className)}
+    {...restProps}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-circle)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-circle, svg.lc-circle):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-circle):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-circle):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/CircleClipPath.svelte

@@ -80,6 +80,13 @@
 
 <ClipPath {id} {disabled} {children}>
   {#snippet clip()}
-    <Circle {cx} {cy} {r} {motion} {...extractLayerProps(restProps, 'clip-path-circle')} bind:ref />
+    <Circle
+      {cx}
+      {cy}
+      {r}
+      {motion}
+      {...extractLayerProps(restProps, 'lc-clip-path-circle')}
+      bind:ref
+    />
   {/snippet}
 </ClipPath>