@fundar/data-chart-telling 0.0.25 → 0.0.27

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as BarPlot } from './plots/bar/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
 export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
+export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
 export { default as GeoPlot } from './plots/geo/Plot.svelte';
 // ── Charts ──────────────────────────────────────────────────────────────────
 // High-level, plot-agnostic chrome plus ready-made chart kinds.
@@ -12,23 +13,30 @@ export { default as BarChart } from './charts/bar/Chart.svelte';
 export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
 export { default as LineChart } from './charts/line/Chart.svelte';
 export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
+export { default as ScatterChart } from './charts/scatter/Chart.svelte';
 // Interchangeable layout primitives (compose your own chart kinds with these).
 export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
 export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
-export { default as GeoLayout } from './layout/geo/GeoLayout.svelte';
-export { default as TileLayer } from './plots/geo/TileLayer.svelte';
+export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
+export { default as TileLayer } from './layout/styles/TileLayer.svelte';
 // Custom geo projections — usable as `scales.projection.type`.
-export { argentinaBicontinental } from './plots/geo/projections/argentina';
+export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { default as Timeline } from './layout/timeline/Timeline.svelte';
 export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
 export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
+export { default as FacetIndicator } from './layout/facet/FacetIndicator.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
+export { getLegendInteraction, provideLegendInteraction, createLegendInteraction, } from './layout/legend/interaction.svelte';
 // Markers
+export { default as BarMarker } from './markers/BarMarker.svelte';
+export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
 export { default as DotMarker } from './markers/DotMarker.svelte';
 export { default as HoverMarker } from './markers/HoverMarker.svelte';
+export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
+export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import { Plot } from 'svelteplot';
+  import { resolveProjection } from './resolveProjection';
+  import { createGeoZoom } from './zoom.svelte';
+  import { createGeoRotate, type GeoRotate } from './rotate.svelte';
+  import type { CoordinatesConfig } from '../../types/layout/coordinates';
+
+  type SveltePlotProps = ComponentProps<typeof Plot>;
+
+  /**
+   * The Coordinates layer, rendered — resolves the active coordinate system
+   * (today, only a `d3-geo` projection; svelteplot has no other coordinate
+   * abstraction, cartesian is implicit elsewhere) and owns `<Plot>` itself,
+   * since `<Plot projection>` must be known before `<Plot>` mounts — nothing
+   * nested inside it could supply that prop after the fact. Also owns the
+   * pan/zoom/rotate gesture state and applies the resulting transform as a
+   * `<g>` wrapper around `children`. A no-op identity transform, no
+   * projection, for every plot kind but `GeoPlot`.
+   */
+  let {
+    width,
+    height,
+    margin,
+    x,
+    y,
+    coordinates = undefined,
+    data,
+    containerEl,
+    children,
+  }: {
+    width: number;
+    height: number;
+    margin: SveltePlotProps['margin'];
+    x: SveltePlotProps['x'];
+    y: SveltePlotProps['y'];
+    coordinates?: CoordinatesConfig;
+    /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
+    data: TData[];
+    containerEl?: HTMLDivElement;
+    children: Snippet;
+  } = $props();
+
+  const resolvedProjection = $derived(resolveProjection(coordinates?.projection, data));
+
+  const zoomEnabled = $derived(coordinates?.zoom !== false && coordinates?.zoom != null);
+  const zoomConfig = $derived(typeof coordinates?.zoom === 'object' ? coordinates.zoom : undefined);
+
+  /**
+   * Orthographic (and other azimuthal, hemisphere-style) projections don't
+   * gain anything from drag-to-*pan* — panning just slides the same globe a
+   * few pixels within the frame — so when zoom is enabled on one, drag
+   * instead rotates the globe (`createGeoRotate`) and wheel/pinch keeps
+   * scaling it (`createGeoZoom`, with its own drag disabled below so the two
+   * gestures don't fight over the same pointer events).
+   */
+  const projectionType = $derived(
+    typeof resolvedProjection === 'string' ? resolvedProjection : resolvedProjection?.type,
+  );
+  const rotateEnabled = $derived(zoomEnabled && projectionType === 'orthographic');
+  const baseRotate = $derived.by((): GeoRotate => {
+    const configured = typeof resolvedProjection === 'object' ? resolvedProjection?.rotate : undefined;
+    return [configured?.[0] ?? 0, configured?.[1] ?? 0, configured?.[2] ?? 0];
+  });
+
+  const geoZoom = createGeoZoom({
+    enabled: () => zoomEnabled,
+    config: () => zoomConfig,
+    node: () => containerEl ?? null,
+    disableDrag: () => rotateEnabled,
+  });
+
+  const geoRotate = createGeoRotate({
+    enabled: () => rotateEnabled,
+    baseRotate: () => baseRotate,
+    scale: () => geoZoom.transform.k,
+    node: () => containerEl ?? null,
+  });
+
+  const finalProjection = $derived.by(() => {
+    if (!rotateEnabled) return resolvedProjection;
+    return {
+      ...(typeof resolvedProjection === 'string' ? { type: resolvedProjection } : resolvedProjection),
+      rotate: geoRotate.rotate,
+    };
+  });
+</script>
+
+<Plot {width} {height} {margin} {x} {y} projection={finalProjection as SveltePlotProps['projection']}>
+  <g transform="translate({geoZoom.transform.x}, {geoZoom.transform.y}) scale({geoZoom.transform.k})">
+    {@render children()}
+  </g>
+</Plot>

package/dist/layout/{plot/RuleLayout.svelte.d.ts → coordinates/CoordinatesLayout.svelte.d.ts}

@@ -1,19 +1,16 @@
 import type { Snippet } from 'svelte';
-import type { AxisValue } from '../../types/plots/axis';
-import type { Series } from '../../types/plots/data/common';
-import type { Marker } from '../../types/markers/common';
-import type { HoverPoint } from '../../types/layout/tooltip';
+import type { CoordinatesConfig } from '../../types/layout/coordinates';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
-        markers?: Marker[];
-        /** All resolved series, forwarded to unscoped component markers (e.g. DeltaMarker). */
-        seriesData?: Series<TData>[];
-        matchedPoints: HoverPoint<TData>[];
-        ruleX: AxisValue | null;
-        ruleY: AxisValue | null;
-        impliesRuleX: boolean;
-        impliesRuleY: boolean;
-        showHoverLabels?: boolean;
+        width: number;
+        height: number;
+        margin: number | "auto" | import("svelteplot/types/plot.js").PlotMargin | undefined;
+        x: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").XScaleOptions> | undefined;
+        y: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
+        coordinates?: CoordinatesConfig;
+        /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
+        data: TData[];
+        containerEl?: HTMLDivElement;
         children: Snippet;
     };
     exports: {};
@@ -35,6 +32,6 @@ interface $$IsomorphicComponent {
     <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const RuleLayout: $$IsomorphicComponent;
-type RuleLayout<TData extends Record<string, unknown>> = InstanceType<typeof RuleLayout<TData>>;
-export default RuleLayout;
+declare const CoordinatesLayout: $$IsomorphicComponent;
+type CoordinatesLayout<TData extends Record<string, unknown>> = InstanceType<typeof CoordinatesLayout<TData>>;
+export default CoordinatesLayout;

package/dist/layout/coordinates/margins.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GeoPlot's own margin default — a small, uniform gap on every side, unlike
+ * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
+ * on the left/bottom for y tick labels and an x-axis title). A map has no
+ * axes to make room for, so borrowing that estimate just left GeoPlot with
+ * a lopsided, oversized margin — most visibly a much taller gap under the
+ * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
+ * even though both are meant to read as the same edge gap. Matching this
+ * constant to that 8px inset default keeps the two visually aligned.
+ */
+export declare const GEO_MARGIN_ESTIMATE: {
+    readonly top: 8;
+    readonly right: 8;
+    readonly bottom: 8;
+    readonly left: 8;
+};

package/dist/layout/coordinates/margins.js

@@ -0,0 +1,11 @@
+/**
+ * GeoPlot's own margin default — a small, uniform gap on every side, unlike
+ * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
+ * on the left/bottom for y tick labels and an x-axis title). A map has no
+ * axes to make room for, so borrowing that estimate just left GeoPlot with
+ * a lopsided, oversized margin — most visibly a much taller gap under the
+ * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
+ * even though both are meant to read as the same edge gap. Matching this
+ * constant to that 8px inset default keeps the two visually aligned.
+ */
+export const GEO_MARGIN_ESTIMATE = { top: 8, right: 8, bottom: 8, left: 8 };

package/dist/{plots/geo → layout/coordinates}/projections/argentina.d.ts

@@ -1,4 +1,4 @@
-import type { GeoCustomProjectionFactory } from '../../../types/plots/scales/geo';
+import type { GeoCustomProjectionFactory } from '../../../types/layout/coordinates';
 /**
  * Argentina's territory in one unbroken frame: the mainland and the
  * Antarctic/South Atlantic sector both visible, related to each other at

package/dist/layout/{geo → coordinates}/resolveProjection.d.ts

@@ -1,4 +1,4 @@
-import type { GeoProjectionConfig } from '../../types/plots/scales/geo';
+import type { GeoProjectionConfig } from '../../types/layout/coordinates';
 /**
  * Resolves a `GeoScalesConfig['projection']` into what svelteplot's own
  * `<Plot projection>` expects — kept separate from `GeoPlot`'s own

package/dist/layout/coordinates/resolveProjection.js

@@ -0,0 +1,24 @@
+/**
+ * Resolves a `GeoScalesConfig['projection']` into what svelteplot's own
+ * `<Plot projection>` expects — kept separate from `GeoPlot`'s own
+ * `Plot.svelte` so adding more projection-level behavior (like the
+ * `domain: 'data'` sentinel below) doesn't grow that component itself.
+ */
+export function resolveProjection(projection, data) {
+    if (!projection)
+        return 'equal-earth';
+    if (typeof projection === 'string')
+        return projection;
+    const domain = projection.domain === 'data'
+        ? { type: 'FeatureCollection', features: data }
+        : projection.domain;
+    return {
+        type: projection.type,
+        rotate: projection.rotate,
+        center: projection.center,
+        parallels: projection.parallels,
+        inset: projection.inset,
+        clip: projection.clip,
+        domain,
+    };
+}

package/dist/{plots/geo → layout/coordinates}/zoom.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { GeoZoomConfig } from '../../types/plots/styles/geo';
+import type { GeoZoomConfig } from '../../types/layout/coordinates';
 export type GeoZoomTransform = {
     x: number;
     y: number;

package/dist/layout/facet/FacetIndicator.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  /**
+   * Default position badge for `carousel`/`paginated` facet modes. Styled from
+   * the `--dct-facet-indicator-*` config vars; positioning is owned by the
+   * parent that renders it.
+   */
+  let {
+    current,
+    total,
+    format,
+  }: {
+    current: number;
+    total: number;
+    format?: (current: number, total: number) => string;
+  } = $props();
+
+  const text = $derived(format ? format(current, total) : `${current} / ${total}`);
+</script>
+
+<div class="dct-facet-indicator">{text}</div>
+
+<style>
+  .dct-facet-indicator {
+    padding: var(--dct-facet-indicator-pad, 0.125rem 0.5rem);
+    border-radius: var(--dct-facet-indicator-radius, 999px);
+    font-size: var(--dct-facet-indicator-size, 0.8125rem);
+    background: var(--dct-facet-indicator-bg, #111827);
+    color: var(--dct-facet-indicator-color, #fff);
+    pointer-events: none;
+  }
+</style>

package/dist/layout/facet/FacetIndicator.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    current: number;
+    total: number;
+    format?: (current: number, total: number) => string;
+};
+declare const FacetIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type FacetIndicator = ReturnType<typeof FacetIndicator>;
+export default FacetIndicator;

package/dist/layout/facet/FacetLayout.svelte

@@ -1,17 +1,27 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
   import { isMobile } from '../../stores/device';
   import { groupBy } from '../../utils/grouping';
+  import FacetIndicator from './FacetIndicator.svelte';
   import type {
     FacetColumns,
+    FacetMode,
+    Responsive,
     FacetCellSnippet,
-  } from '../../types/charts/common';
+    FacetIndicatorSnippet,
+    FacetNavSnippet,
+    FacetNavDirection,
+  } from '../../types/layout/facet';
   import type { Accessor } from '../../types/plots/data/common';
 
   /**
-   * Small-multiples layout. It splits the data by `by`, arranges the groups in a
-   * responsive grid and renders each group through the `cell` snippet with its
-   * own measured box. Like the other primitives it never draws the plot itself —
-   * any plot that accepts `{ data, width, height }` can be faceted.
+   * Small-multiples layout. It splits the data by `by` and hands each group to
+   * the `cell` snippet with its own measured box. Like the other primitives it
+   * never draws the plot itself — any plot that accepts `{ data, width, height }`
+   * can be faceted.
+   *
+   * `mode` picks how the groups are arranged: `'grid'` (default) lays them all
+   * out at once; `'paginated'` pages through the same grid in fixed chunks;
+   * `'carousel'` shows `visible` groups at a time with touch-drag/snap.
    */
   let {
     data,
@@ -19,6 +29,12 @@
     columns = { desktop: 3, mobile: 1 },
     values,
     gap = 12,
+    mode = 'grid',
+    visible = 1,
+    pageSize,
+    formatIndicator,
+    indicator,
+    navButton,
     width,
     height,
     cell,
@@ -28,11 +44,24 @@
     columns?: FacetColumns;
     values?: string[];
     gap?: number;
+    mode?: Responsive<FacetMode>;
+    visible?: number;
+    pageSize?: number;
+    formatIndicator?: (current: number, total: number) => string;
+    indicator?: FacetIndicatorSnippet;
+    navButton?: FacetNavSnippet;
     width: number;
     height: number;
     cell: FacetCellSnippet<TRow>;
   } = $props();
 
+  function resolveResponsive<T>(value: Responsive<T>, mobile: boolean): T {
+    if (typeof value === 'object' && value !== null && 'desktop' in value) {
+      return mobile ? (value as { desktop: T; mobile: T }).mobile : (value as { desktop: T; mobile: T }).desktop;
+    }
+    return value as T;
+  }
+
   const groups = $derived(groupBy(data, by));
 
   const entries = $derived.by((): [string, TRow[]][] => {
@@ -42,13 +71,10 @@
       .map((v) => [v, groups.get(v)!] as [string, TRow[]]);
   });
 
+  const resolvedMode = $derived(resolveResponsive(mode, $isMobile));
+
   const cols = $derived.by(() => {
-    const desired =
-      typeof columns === 'number'
-        ? columns
-        : $isMobile
-          ? columns.mobile
-          : columns.desktop;
+    const desired = resolveResponsive(columns, $isMobile);
     return Math.max(1, Math.min(desired, entries.length || 1));
   });
 
@@ -58,22 +84,164 @@
   const cellHeight = $derived(
     Math.max(0, Math.floor((height - (rows - 1) * gap) / rows) - TITLE_H),
   );
+
+  // ── paginated ────────────────────────────────────────────────────────────
+  const resolvedPageSize = $derived(Math.max(1, pageSize ?? cols * rows));
+  let page = $state(0);
+  const totalPages = $derived(Math.max(1, Math.ceil(entries.length / resolvedPageSize)));
+  const pageEntries = $derived(
+    entries.slice(page * resolvedPageSize, page * resolvedPageSize + resolvedPageSize),
+  );
+
+  $effect(() => {
+    if (page > totalPages - 1) page = Math.max(0, totalPages - 1);
+  });
+
+  function prevPage(): void {
+    page = Math.max(0, page - 1);
+  }
+  function nextPage(): void {
+    page = Math.min(totalPages - 1, page + 1);
+  }
+
+  // ── carousel ─────────────────────────────────────────────────────────────
+  const visibleCount = $derived(Math.max(1, Math.min(visible, entries.length || 1)));
+  const carouselCellWidth = $derived(
+    Math.max(0, Math.floor((width - (visibleCount - 1) * gap) / visibleCount)),
+  );
+  const carouselCellHeight = $derived(Math.max(0, height - TITLE_H));
+  const maxIndex = $derived(Math.max(0, entries.length - visibleCount));
+  const stepWidth = $derived(carouselCellWidth + gap);
+
+  let activeIndex = $state(0);
+  let dragOffset = $state(0);
+  let dragging = $state(false);
+  let dragStartX = 0;
+
+  const translate = $derived(-activeIndex * stepWidth + dragOffset);
+
+  $effect(() => {
+    if (activeIndex > maxIndex) activeIndex = maxIndex;
+  });
+
+  // Reset browsing position whenever the faceted field or its value set changes.
+  $effect(() => {
+    void by;
+    void values;
+    page = 0;
+    activeIndex = 0;
+  });
+
+  function handleTouchStart(event: TouchEvent): void {
+    dragging = true;
+    dragStartX = event.touches[0].clientX;
+    dragOffset = 0;
+  }
+
+  function handleTouchMove(event: TouchEvent): void {
+    if (!dragging) return;
+    dragOffset = event.touches[0].clientX - dragStartX;
+  }
+
+  function handleTouchEnd(): void {
+    if (!dragging) return;
+    dragging = false;
+    const stepsMoved = Math.round(-dragOffset / stepWidth);
+    activeIndex = Math.max(0, Math.min(maxIndex, activeIndex + stepsMoved));
+    dragOffset = 0;
+  }
 </script>
 
-<div
-  class="dct-facet"
-  style:grid-template-columns="repeat({cols}, 1fr)"
-  style:gap="{gap}px"
->
-  {#each entries as [facetValue, rowsForCell] (facetValue)}
-    <div class="dct-facet__cell">
-      <div class="dct-facet__title">{facetValue}</div>
-      {#if cellWidth > 0 && cellHeight > 0}
-        {@render cell({ facetValue, data: rowsForCell, width: cellWidth, height: cellHeight })}
-      {/if}
+{#snippet indicatorSlot(current: number, total: number)}
+  <div class="dct-facet-indicator-slot">
+    {#if indicator}
+      {@render indicator({ current, total })}
+    {:else}
+      <FacetIndicator {current} {total} format={formatIndicator} />
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet navButtons(direction: FacetNavDirection, disabled: boolean, onclick: () => void, label: string, glyph: string)}
+  <span class="dct-facet-nav-slot">
+    {#if navButton}
+      {@render navButton({ direction, disabled, onclick })}
+    {:else}
+      <button
+        type="button"
+        class="dct-facet-paginated__btn"
+        {disabled}
+        {onclick}
+        aria-label={label}
+      >
+        {glyph}
+      </button>
+    {/if}
+  </span>
+{/snippet}
+
+{#snippet grid(gridEntries: [string, TRow[]][])}
+  <div class="dct-facet" style:grid-template-columns="repeat({cols}, 1fr)" style:gap="{gap}px">
+    {#each gridEntries as [facetValue, rowsForCell] (facetValue)}
+      <div class="dct-facet__cell">
+        <div class="dct-facet__title">{facetValue}</div>
+        {#if cellWidth > 0 && cellHeight > 0}
+          {@render cell({ facetValue, data: rowsForCell, width: cellWidth, height: cellHeight })}
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/snippet}
+
+{#if resolvedMode === 'paginated'}
+  <div class="dct-facet-paginated" style:width="{width}px" style:height="{height}px">
+    {@render grid(pageEntries)}
+    {#if totalPages > 1}
+      <div class="dct-facet-paginated__nav">
+        {@render navButtons('prev', page === 0, prevPage, 'Previous page', '‹')}
+        {@render navButtons('next', page >= totalPages - 1, nextPage, 'Next page', '›')}
+      </div>
+      {@render indicatorSlot(page + 1, totalPages)}
+    {/if}
+  </div>
+{:else if resolvedMode === 'carousel'}
+  <div
+    class="dct-facet-carousel"
+    role="group"
+    aria-roledescription="carousel"
+    style:width="{width}px"
+    style:height="{height}px"
+    ontouchstart={handleTouchStart}
+    ontouchmove={handleTouchMove}
+    ontouchend={handleTouchEnd}
+  >
+    <div
+      class="dct-facet-carousel__track"
+      class:dct-facet-carousel__track--dragging={dragging}
+      style:gap="{gap}px"
+      style:transform="translateX({translate}px)"
+    >
+      {#each entries as [facetValue, rowsForCell] (facetValue)}
+        <div class="dct-facet__cell dct-facet-carousel__cell" style:width="{carouselCellWidth}px">
+          <div class="dct-facet__title">{facetValue}</div>
+          {#if carouselCellWidth > 0 && carouselCellHeight > 0}
+            {@render cell({
+              facetValue,
+              data: rowsForCell,
+              width: carouselCellWidth,
+              height: carouselCellHeight,
+            })}
+          {/if}
+        </div>
+      {/each}
     </div>
-  {/each}
-</div>
+    {#if entries.length > 1}
+      {@render indicatorSlot(activeIndex + 1, entries.length)}
+    {/if}
+  </div>
+{:else}
+  {@render grid(entries)}
+{/if}
 
 <style>
   .dct-facet {
@@ -94,4 +262,61 @@
     text-align: center;
     opacity: 0.9;
   }
+
+  .dct-facet-paginated {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+  .dct-facet-paginated__nav {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+  .dct-facet-nav-slot {
+    pointer-events: auto;
+  }
+  .dct-facet-paginated__btn {
+    border: none;
+    border-radius: 999px;
+    width: var(--dct-facet-nav-btn-size, 2rem);
+    height: var(--dct-facet-nav-btn-size, 2rem);
+    font-size: var(--dct-facet-nav-font-size, 1.1rem);
+    line-height: 1;
+    background: var(--dct-facet-nav-bg, #111827);
+    color: var(--dct-facet-nav-color, #fff);
+    cursor: pointer;
+  }
+  .dct-facet-paginated__btn:disabled {
+    opacity: var(--dct-facet-nav-disabled-opacity, 0.3);
+    cursor: default;
+  }
+
+  .dct-facet-indicator-slot {
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
+  }
+
+  .dct-facet-carousel {
+    position: relative;
+    overflow: hidden;
+    touch-action: pan-y;
+  }
+  .dct-facet-carousel__track {
+    display: flex;
+    height: 100%;
+    transition: transform 0.25s ease;
+  }
+  .dct-facet-carousel__track--dragging {
+    transition: none;
+  }
+  .dct-facet-carousel__cell {
+    flex: 0 0 auto;
+  }
 </style>

package/dist/layout/facet/FacetLayout.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FacetColumns, FacetCellSnippet } from '../../types/charts/common';
+import type { FacetColumns, FacetMode, Responsive, FacetCellSnippet, FacetIndicatorSnippet, FacetNavSnippet } from '../../types/layout/facet';
 import type { Accessor } from '../../types/plots/data/common';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
@@ -7,6 +7,12 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         columns?: FacetColumns;
         values?: string[];
         gap?: number;
+        mode?: Responsive<FacetMode>;
+        visible?: number;
+        pageSize?: number;
+        formatIndicator?: (current: number, total: number) => string;
+        indicator?: FacetIndicatorSnippet;
+        navButton?: FacetNavSnippet;
         width: number;
         height: number;
         cell: FacetCellSnippet<TRow>;