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

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/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>

package/dist/components/LinearGradient.svelte

@@ -81,7 +81,7 @@
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -113,6 +113,35 @@
 
   let canvasGradient = $state<CanvasGradient>();
 
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      // Use direction keywords when no rotation is specified
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+
   function render(_ctx: CanvasRenderingContext2D) {
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
     const _stops = stops.map((stop, i) => {
@@ -170,7 +199,7 @@
       {y2}
       gradientTransform={rotate ? `rotate(${rotate})` : ''}
       gradientUnits={units}
-      {...extractLayerProps(restProps, 'linear-gradient')}
+      {...extractLayerProps(restProps, 'lc-linear-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent?.()}
@@ -180,13 +209,13 @@
             <stop
               offset={stop[0]}
               stop-color={stop[1]}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {:else}
             <stop
               offset="{i * (100 / (stops.length - 1))}%"
               stop-color={stop}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {/if}
         {/each}
@@ -195,4 +224,6 @@
   </defs>
 
   {@render children?.({ id, gradient: `url(#${id})` })}
+{:else if renderCtx === 'html'}
+  {@render children?.({ id, gradient: createCSSGradient() })}
 {/if}

package/dist/components/Link.svelte

@@ -173,5 +173,5 @@ TODO:
   {type}
   {curve}
   {sweep}
-  {...extractLayerProps(restProps, 'link')}
+  {...extractLayerProps(restProps, 'lc-link')}
 />

package/dist/components/Marker.svelte

@@ -73,7 +73,6 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -104,39 +103,51 @@
     {refX}
     {refY}
     {viewBox}
+    data-type={type}
     {...restProps}
-    class={cls(
-      layerClass('marker'),
-      'overflow-visible',
-      // stroke
-      restProps.stroke == null &&
-        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
-          ? 'stroke-[context-stroke]'
-          : type === 'circle'
-            ? 'stroke-surface-100'
-            : 'stroke-none'),
-      // extra stroke attrs
-      '[stroke-linecap:round] [stroke-linejoin:round]',
-      //fill
-      restProps.fill == null &&
-        (['triangle', 'dot', 'circle'].includes(type ?? '')
-          ? 'fill-[context-stroke]'
-          : type === 'circle-stroke'
-            ? 'fill-surface-100'
-            : 'fill-none'),
-      className
-    )}
+    class={cls('lc-marker', className)}
   >
     {#if children}
       {@render children()}
     {:else if type === 'triangle'}
-      <path d="M 0 0 L 10 5 L 0 10 z" class={layerClass('marker-triangle')} />
+      <path d="M 0 0 L 10 5 L 0 10 z" class="lc-marker-triangle" />
     {:else if type === 'arrow'}
-      <polyline points="0 0, 10 5, 0 10" class={layerClass('marker-arrow')} />
+      <polyline points="0 0, 10 5, 0 10" class="lc-marker-arrow" />
     {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
-      <circle cx={5} cy={5} r={5} class={layerClass('marker-circle')} />
+      <circle cx={5} cy={5} r={5} class="lc-marker-circle" />
     {:else if type === 'line'}
-      <polyline points="5 0, 5 10" class={layerClass('marker-line')} />
+      <polyline points="5 0, 5 10" class="lc-marker-line" />
     {/if}
   </marker>
 </defs>
+
+<style>
+  @layer base {
+    :global(:where(.lc-marker)) {
+      overflow: visible;
+
+      &[data-type='arrow'],
+      &[data-type='circle-stroke'],
+      &[data-type='line'] {
+        fill: none;
+        stroke: context-stroke;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      &[data-type='circle'] {
+        stroke: var(--color-surface-100, light-dark(white, black));
+      }
+
+      &[data-type='triangle'],
+      &[data-type='dot'],
+      &[data-type='circle'] {
+        fill: context-stroke;
+      }
+
+      &[data-type='circle-stroke'] {
+        fill: var(--color-surface-100, light-dark(white, black));
+      }
+    }
+  }
+</style>