@fundar/data-chart-telling 0.0.26 → 0.0.28

package/dist/charts/BaseChart.svelte

@@ -7,14 +7,11 @@
   import { provideHover } from '../layout/tooltip/hover.svelte';
   import { provideLegendInteraction } from '../layout/legend/interaction.svelte';
   import type { Snippet } from 'svelte';
-  import type { LegendSection } from '../types/charts/legend';
+  import type { LegendSection } from '../types/layout/legend';
   import type { HoverStrategy } from '../types/layout/tooltip';
-  import type {
-    ChartPlotSnippet,
-    FacetConfig,
-    TimeValue,
-    TimelineConfig,
-  } from '../types/charts/common';
+  import type { ChartPlotSnippet } from '../types/charts/common';
+  import type { FacetConfig } from '../types/layout/facet';
+  import type { TimeValue, TimelineConfig } from '../types/layout/timeline';
 
   /**
    * The orchestrator. It wires together the four interchangeable layout
@@ -60,7 +57,11 @@
   const cfg = $derived(getConfiguration());
 
   const hoverStore = provideHover();
-  provideLegendInteraction();
+  const legendInteraction = provideLegendInteraction();
+  const legendPlotContext = $derived({
+    disabledSeries: new Set(legendInteraction.disabledSeries.keys()),
+    isDisabled: (name: string) => legendInteraction.disabledSeries.has(name),
+  });
   $effect(() => {
     hoverStore.strategy = hover?.strategy ?? 'x';
     hoverStore.sync = hover?.sync ?? false;
@@ -75,6 +76,12 @@
       columns={facet.columns}
       values={facet.values}
       gap={facet.gap}
+      mode={facet.mode}
+      visible={facet.visible}
+      pageSize={facet.pageSize}
+      formatIndicator={facet.formatIndicator}
+      indicator={facet.indicator}
+      navButton={facet.navButton}
       width={w}
       height={h}
     >
@@ -84,12 +91,13 @@
           width: cw,
           height: ch,
           facetValue,
-          selectedValue
+          selectedValue,
+          legend: legendPlotContext
         })}
       {/snippet}
     </FacetLayout>
   {:else}
-    {@render plot({ data: rows, width: w, height: h, selectedValue })}
+    {@render plot({ data: rows, width: w, height: h, selectedValue, legend: legendPlotContext })}
   {/if}
 {/snippet}
 

package/dist/charts/BaseChart.svelte.d.ts

@@ -1,7 +1,9 @@
 import type { Snippet } from 'svelte';
-import type { LegendSection } from '../types/charts/legend';
+import type { LegendSection } from '../types/layout/legend';
 import type { HoverStrategy } from '../types/layout/tooltip';
-import type { ChartPlotSnippet, FacetConfig, TimelineConfig } from '../types/charts/common';
+import type { ChartPlotSnippet } from '../types/charts/common';
+import type { FacetConfig } from '../types/layout/facet';
+import type { TimelineConfig } from '../types/layout/timeline';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: {
         width: number;

package/dist/charts/heatmap/Chart.svelte

@@ -46,7 +46,7 @@
   const getX = $derived(resolveAccessor<TRow>(x));
   const getY = $derived(resolveAccessor<TRow>(y));
   const getZ = $derived(resolveAccessor<TRow>(z));
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
 
   // Compute domain over the full dataset so colour is comparable across facets/timeline steps.
   // Caller-provided `scales.z.domain` always takes precedence.
@@ -66,7 +66,7 @@
   const defaultFormat = $derived((row: TRow) => {
     const xl = scales.x?.label || 'x';
     const yl = scales.y?.label || 'y';
-    return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${fmtVal(Number(getZ(row)), '')}`;
+    return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${formatValue(Number(getZ(row)), '')}`;
   });
 </script>
 

package/dist/charts/pyramid/Chart.svelte

@@ -48,7 +48,7 @@
   const getMagnitude = $derived(resolveAccessor<TRow>(magnitude));
   const getCategory = $derived(resolveAccessor<TRow>(category));
   const getSides = $derived(resolveAccessor<TRow>(sides));
-  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const formatValue = $derived(styles.values?.format ?? ((v: number) => `${v}`));
 
   // Computed once over the full dataset (not the per-facet/timeline-filtered
   // rows) so the diverging axis and category bands stay comparable across
@@ -86,7 +86,7 @@
   const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'y'));
   const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
   const defaultFormat = $derived(
-    (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${fmtVal(Number(getMagnitude(row)), String(getSides(row)))}`,
+    (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${formatValue(Number(getMagnitude(row)), String(getSides(row)))}`,
   );
 </script>
 

package/dist/configuration/config.svelte.js

@@ -89,6 +89,22 @@ export const DEFAULT_CONFIG = {
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
         area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 },
     },
+    facet: {
+        indicator: {
+            background: '#111827',
+            color: '#ffffff',
+            fontSize: '0.8125rem',
+            padding: '0.125rem 0.5rem',
+            radius: '999px',
+        },
+        navButton: {
+            background: '#111827',
+            color: '#ffffff',
+            size: '2rem',
+            fontSize: '1.1rem',
+            disabledOpacity: 0.3,
+        },
+    },
 };
 // ── Merge ─────────────────────────────────────────────────────────────────────
 function isPlainObject(v) {
@@ -162,6 +178,16 @@ export function configToCssVars(c) {
         '--dct-heat-min': c.continuous.min,
         '--dct-heat-max': c.continuous.max,
         '--dct-heat-text': c.continuous.labelColor,
+        '--dct-facet-indicator-bg': c.facet.indicator.background,
+        '--dct-facet-indicator-color': c.facet.indicator.color,
+        '--dct-facet-indicator-size': c.facet.indicator.fontSize,
+        '--dct-facet-indicator-pad': c.facet.indicator.padding,
+        '--dct-facet-indicator-radius': c.facet.indicator.radius,
+        '--dct-facet-nav-bg': c.facet.navButton.background,
+        '--dct-facet-nav-color': c.facet.navButton.color,
+        '--dct-facet-nav-btn-size': c.facet.navButton.size,
+        '--dct-facet-nav-font-size': c.facet.navButton.fontSize,
+        '--dct-facet-nav-disabled-opacity': String(c.facet.navButton.disabledOpacity),
     };
 }
 /** Serialize a CSS-vars record into a `style` attribute string. */

package/dist/configuration/themes/dark.js

@@ -11,6 +11,10 @@ export const DARK_THEME = {
     continuous: { min: '#1e293b', max: '#38bdf8', labelColor: '#e5e7eb' },
     axis: { color: '#94a3b8', fontSize: 13, xTickSize: 6, yTickSize: 6 },
     tooltip: { background: '#e5e7eb', color: '#0f172a' },
+    facet: {
+        indicator: { background: '#e5e7eb', color: '#0f172a' },
+        navButton: { background: '#e5e7eb', color: '#0f172a' },
+    },
     line: { strokeWidth: 3, dotRadius: 4 },
     timeline: { activeColor: '#38bdf8', axisColor: '#94a3b8', thickness: 60 },
     hover: { rule: { stroke: '#38bdf8' } },

package/dist/configuration/themes/index.d.ts

@@ -146,6 +146,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        facet?: {
+            indicator?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                fontSize?: string | undefined;
+                padding?: string | undefined;
+                radius?: string | undefined;
+            } | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
+        } | undefined;
     };
     Editorial: {
         font?: string | undefined;
@@ -288,6 +304,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        facet?: {
+            indicator?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                fontSize?: string | undefined;
+                padding?: string | undefined;
+                radius?: string | undefined;
+            } | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
+        } | undefined;
     };
     Dark: {
         font?: string | undefined;
@@ -430,6 +462,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        facet?: {
+            indicator?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                fontSize?: string | undefined;
+                padding?: string | undefined;
+                radius?: string | undefined;
+            } | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
+        } | undefined;
     };
     Compact: {
         font?: string | undefined;
@@ -572,6 +620,22 @@ export declare const THEMES: {
                 borderRadius?: number | undefined;
             } | undefined;
         } | undefined;
+        facet?: {
+            indicator?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                fontSize?: string | undefined;
+                padding?: string | undefined;
+                radius?: string | undefined;
+            } | undefined;
+            navButton?: {
+                background?: string | undefined;
+                color?: string | undefined;
+                size?: string | undefined;
+                fontSize?: string | undefined;
+                disabledOpacity?: number | undefined;
+            } | undefined;
+        } | undefined;
     };
 };
 export type ThemeName = keyof typeof THEMES;

package/dist/index.d.ts

@@ -18,8 +18,10 @@ export { argentinaBicontinental } from './layout/coordinates/projections/argenti
 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';
 export { default as BarMarker } from './markers/BarMarker.svelte';
 export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
@@ -49,8 +51,10 @@ export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/p
 export type { ScatterDataProps } from './types/plots/data/scatter';
 export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig, } from './types/layout/coordinates';
 export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
-export type { TimeValue, Orientation, FacetColumns, FacetConfig, TimelineConfig, ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
-export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, } from './types/charts/legend';
+export type { ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
+export type { TimeValue, Orientation, TimelineConfig, } from './types/layout/timeline';
+export type { Responsive, FacetColumns, FacetMode, FacetConfig, FacetIndicatorContext, FacetIndicatorSnippet, FacetNavDirection, FacetNavContext, FacetNavSnippet, } from './types/layout/facet';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, LegendInteractionStore, LegendPlotContext, } from './types/layout/legend';
 export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
 export type { ChartProps } from './types/charts/props';

package/dist/index.js

@@ -24,8 +24,10 @@ export { argentinaBicontinental } from './layout/coordinates/projections/argenti
 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';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -42,7 +42,7 @@
   } = $props();
 
   const resolvedProjection = $derived(
-    coordinates?.projection ? resolveProjection(coordinates.projection, data) : undefined,
+    coordinates ? resolveProjection(coordinates.projection, data) : undefined,
   );
 
   const zoomEnabled = $derived(coordinates?.zoom !== false && coordinates?.zoom != null);

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>