layerchart 2.0.0-next.37 → 2.0.0-next.39

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;

package/dist/components/Hull.svelte

@@ -65,7 +65,6 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     data,
@@ -104,13 +103,13 @@
   );
 </script>
 
-<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
+<Group {...restProps} class={cls('lc-hull-g', classes.root, className)} bind:ref>
   {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
       geojson={polygon}
       {curve}
-      class={cls(layerClass('hull-path'), 'fill-transparent', classes.path)}
+      class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
@@ -123,10 +122,18 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
-      class={cls(layerClass('hull-class'), 'fill-transparent', classes.path)}
+      class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-hull-path, .lc-hull-geo-path)) {
+      fill: transparent;
+    }
+  }
+</style>

package/dist/components/Labels.svelte

@@ -74,7 +74,7 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
   import Group from './Group.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -174,28 +174,38 @@
   }
 </script>
 
-<Group class={layerClass('labels-g')}>
+<Group class="lc-labels-g">
   <Points {data} {x} {y}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
-        {@const textProps = extractLayerProps(getTextProps(point), 'labels-text')}
+        {@const textProps = extractLayerProps(getTextProps(point), 'lc-labels-text')}
         {#if childrenProp}
           {@render childrenProp({ data: point, textProps })}
         {:else}
           <Text
+            data-placement={placement}
             {...textProps}
             {...restProps}
-            class={cls(
-              'text-xs',
-              placement === 'inside'
-                ? 'fill-surface-300 stroke-surface-content'
-                : 'fill-surface-content stroke-surface-100',
-              textProps.class,
-              className
-            )}
+            {...extractLayerProps(getTextProps(point), 'lc-labels-text', className ?? '')}
           />
         {/if}
       {/each}
     {/snippet}
   </Points>
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-labels-text)) {
+      font-size: 12px;
+
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: var(--color-surface-100, light-dark(white, black));
+
+      &[data-placement='inside'] {
+        --fill-color: var(--color-surface-100, light-dark(white, black));
+        --stroke-color: var(--color-surface-content, currentColor);
+      }
+    }
+  }
+</style>

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

@@ -56,10 +56,17 @@ export type LabelsPropsWithoutHTML<T = any> = {
     }]>;
 };
 export type LabelsProps<T = any> = LabelsPropsWithoutHTML<T> & Without<TextProps, LabelsPropsWithoutHTML<T>>;
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any> {
-    props(): LabelsProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/Legend.svelte

@@ -65,10 +65,6 @@
      */
     orientation?: 'horizontal' | 'vertical';
 
-    onclick?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
-
     /**
      * Determine display ramp (individual color swatches or continuous ramp)
      *
@@ -76,6 +72,11 @@
      */
     variant?: 'ramp' | 'swatches';
 
+    /**
+     * An array of selected items. If provided, the legend fades unselected items.
+     */
+    selected?: string[];
+
     /**
      * Classes to apply to the elements.
      *
@@ -91,6 +92,10 @@
       item?: string | ((item: LegendItem) => string);
     };
 
+    onclick?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
+
     /**
      * A bindable reference to the wrapping `<div>` element.
      *
@@ -116,7 +121,8 @@
   import { cls } from '@layerstack/tailwind';
   import type { AnyScale } from '../utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+  import { resolveMaybeFn } from '../utils/common.js';
 
   let {
     scale: scaleProp,
@@ -134,6 +140,7 @@
     onpointerenter,
     onpointerleave,
     variant = 'ramp',
+    selected = [],
     classes = {},
     ref: refProp = $bindable(),
     class: className,
@@ -296,29 +303,9 @@
   bind:this={ref}
   {...restProps}
   data-placement={placement}
-  class={cls(
-    layerClass('legend-container'),
-    'inline-block',
-    'z-1', // stack above tooltip context layers (band rects, voronoi, ...)
-    placement && [
-      'absolute',
-      {
-        'top-left': 'top-0 left-0',
-        top: 'top-0 left-1/2 -translate-x-1/2',
-        'top-right': 'top-0 right-0',
-        left: 'top-1/2 left-0 -translate-y-1/2',
-        center: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-        right: 'top-1/2 right-0 -translate-y-1/2',
-        'bottom-left': 'bottom-0 left-0',
-        bottom: 'bottom-0 left-1/2 -translate-x-1/2',
-        'bottom-right': 'bottom-0 right-0',
-      }[placement],
-    ],
-    className,
-    classes.root
-  )}
+  class={cls('lc-legend-container', className, classes.root)}
 >
-  <div class={cls(layerClass('legend-title'), 'text-[10px] font-semibold', classes.title)}>
+  <div class={cls('lc-legend-title', classes.title)}>
     {title}
   </div>
   {#if children}
@@ -331,35 +318,31 @@
       {width}
       height={height + tickLengthProp + tickFontSize}
       viewBox="0 0 {width} {height + tickLengthProp + tickFontSize}"
-      class={cls(layerClass('legend-ramp-svg'), 'overflow-visible')}
+      class={cls('lc-legend-ramp-svg')}
     >
-      <g class={layerClass('legend-ramp-g')}>
+      <g class="lc-legend-ramp-g">
         {#if scaleConfig.interpolator}
           <ColorRamp
             {width}
             {height}
             interpolator={scaleConfig.interpolator}
-            class={layerClass('legend-color-ramp')}
+            class="lc-legend-color-ramp"
           />
         {:else if scaleConfig.swatches}
           {#each scaleConfig.swatches as swatch, i}
-            <rect {...extractLayerProps(swatch, 'legend-swatch')} />
+            <rect {...extractLayerProps(swatch, 'lc-legend-ramp-swatch')} />
           {/each}
         {/if}
       </g>
 
-      <g class={layerClass('legend-tick-group')}>
+      <g class="lc-legend-tick-group">
         {#each tickValuesProp ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick, i}
           <text
             text-anchor="middle"
             x={scaleConfig.xScale?.(tick) + scaleConfig.tickLabelOffset}
             y={height + tickLengthProp + tickFontSize}
             style:font-size={tickFontSize}
-            class={cls(
-              layerClass('legend-tick-text'),
-              'text-[10px] fill-surface-content',
-              classes.label
-            )}
+            class={cls('lc-legend-tick-text', classes.label)}
           >
             <!-- @ts-expect-error - improve types -->
             {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
@@ -371,50 +354,26 @@
               y1={0}
               x2={scaleConfig.xScale?.(tick)}
               y2={height + tickLengthProp}
-              class={cls(layerClass('legend-tick-line'), 'stroke-surface-content', classes.tick)}
+              class={cls('lc-legend-tick-line', classes.tick)}
             />
           {/if}
         {/each}
       </g>
     </svg>
   {:else if variant === 'swatches'}
-    <div
-      class={cls(
-        layerClass('legend-swatch-group'),
-        'flex gap-x-4 gap-y-1',
-        orientation === 'vertical' && 'flex-col',
-        classes.items
-      )}
-    >
+    <div class={cls('lc-legend-swatch-group', classes.items)} data-orientation={orientation}>
       {#each scaleConfig.tickValues ?? scaleConfig.xScale?.ticks?.(ticks) ?? [] as tick}
         {@const color = scale?.(tick) ?? ''}
         {@const item = { value: tick, color }}
         <button
-          class={cls(
-            layerClass('legend-swatch-button'),
-            'flex items-center gap-1 truncate',
-            !onclick && 'cursor-auto',
-            typeof classes.item === 'function' ? classes.item(item) : classes.item
-          )}
+          class={cls('lc-legend-swatch-button', resolveMaybeFn(classes?.item, item))}
+          style:opacity={selected.length === 0 || selected.includes(tick) ? 1 : 0.3}
           onclick={(e) => onclick?.(e, item)}
           onpointerenter={(e) => onpointerenter?.(e, item)}
           onpointerleave={(e) => onpointerleave?.(e, item)}
         >
-          <div
-            class={cls(
-              layerClass('legend-swatch'),
-              'h-4 w-4 shrink-0 rounded-full',
-              classes.swatch
-            )}
-            style:background-color={color}
-          ></div>
-          <div
-            class={cls(
-              layerClass('legend-swatch-label'),
-              'text-xs text-surface-content truncate whitespace-nowrap',
-              classes.label
-            )}
-          >
+          <div class={cls('lc-legend-swatch', classes.swatch)} style:background-color={color}></div>
+          <div class={cls('lc-legend-swatch-label', classes.label)}>
             <!-- @ts-expect-error - improve types -->
             {tickFormatProp ? format(tick, asAny(tickFormatProp)) : tick}
           </div>
@@ -423,3 +382,110 @@
     </div>
   {/if}
 </div>
+
+<style>
+  @layer components {
+    :where(.lc-legend-container) {
+      display: inline-block;
+      z-index: 1; /*stack above tooltip context layers (band rects, voronoi, ...) */
+
+      &[data-placement] {
+        position: absolute;
+      }
+
+      &[data-placement='top-left'] {
+        top: 0;
+        left: 0;
+      }
+      &[data-placement='top'] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='top-right'] {
+        top: 0;
+        right: 0;
+      }
+      &[data-placement='left'] {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='center'] {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &[data-placement='right'] {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='bottom-left'] {
+        bottom: 0;
+        left: 0;
+      }
+      &[data-placement='bottom'] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='bottom-right'] {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    :where(.lc-legend-title) {
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    :where(.lc-legend-ramp-svg) {
+      overflow: visible;
+    }
+
+    :where(.lc-legend-tick-text) {
+      font-size: 10px;
+      fill: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-legend-tick-line) {
+      stroke: var(--color-surface-content, currentColor);
+    }
+
+    :where(.lc-legend-swatch-group) {
+      display: flex;
+      gap: 0.25rem 1rem;
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+      }
+    }
+
+    :where(.lc-legend-swatch-button) {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    :where(.lc-legend-swatch) {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      border-radius: 9999px; /* full */
+    }
+
+    :where(.lc-legend-swatch-label) {
+      font-size: 0.75rem; /* text-xs */
+      line-height: calc(1 / 0.75);
+      color: var(--color-surface-content, currentColor);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>

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

@@ -54,15 +54,16 @@ export type LegendPropsWithoutHTML = {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
-    onclick?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
-    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
     /**
      * Determine display ramp (individual color swatches or continuous ramp)
      *
      * @default 'ramp'
      */
     variant?: 'ramp' | 'swatches';
+    /**
+     * An array of selected items. If provided, the legend fades unselected items.
+     */
+    selected?: string[];
     /**
      * Classes to apply to the elements.
      *
@@ -77,6 +78,9 @@ export type LegendPropsWithoutHTML = {
         swatch?: string;
         item?: string | ((item: LegendItem) => string);
     };
+    onclick?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerenter?: (e: MouseEvent, detail: LegendItem) => any;
+    onpointerleave?: (e: MouseEvent, detail: LegendItem) => any;
     /**
      * A bindable reference to the wrapping `<div>` element.
      *

package/dist/components/Line.svelte

@@ -4,6 +4,7 @@
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import MarkerWrapper, { type MarkerOptions } from './MarkerWrapper.svelte';
   import type { CommonStyleProps, Without } from '../utils/types.js';
+  import { pointsToAngleAndLength } from '../utils/math.js';
 
   export type LinePropsWithoutHTML = {
     /**
@@ -98,7 +99,6 @@
 
   import { createKey } from '../utils/key.svelte.js';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -148,7 +148,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-line', className),
           }
     );
   }
@@ -195,10 +195,47 @@
     marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
     marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
     marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
-    class={cls(layerClass('line'), stroke === undefined && 'stroke-surface-content', className)}
+    class={cls('lc-line', className)}
     {...restProps}
   />
   <MarkerWrapper id={markerStartId} marker={markerStart ?? marker} />
   <MarkerWrapper id={markerMidId} marker={markerMid ?? marker} />
   <MarkerWrapper id={markerEndId} marker={markerEnd ?? marker} />
+{:else if renderCtx === 'html'}
+  {@const { angle, length } = pointsToAngleAndLength(
+    { x: motionX1.current, y: motionY1.current },
+    { x: motionX2.current, y: motionY2.current }
+  )}
+  <!-- STYLE-TODO: Should html use stroke for fill? -->
+  <div
+    style:position="absolute"
+    style:left="{motionX1.current}px"
+    style:top="{motionY1.current}px"
+    style:width="{length}px"
+    style:height="{strokeWidth ?? 1}px"
+    style:transform="translateY(-50%) rotate({angle}deg)"
+    style:transform-origin="0 50%"
+    style:opacity
+    style:background-color={stroke}
+    class={cls('lc-line', className)}
+    style={restProps.style}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-line)) {
+      --stroke-color: var(--color-surface-content, currentColor);
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-line, svg.lc-line):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-line):not([background-color])) {
+      background-color: var(--stroke-color);
+    }
+  }
+</style>