@fundar/data-chart-telling 0.0.1

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

@@ -0,0 +1,481 @@
+/**
+ * Ready-made theme presets — partial configs deep-merged over
+ * `DEFAULT_CONFIG` by `setConfiguration`. `DEFAULT_CONFIG` itself stays an
+ * opinion-free no-op (`font: 'inherit'`, `color: 'currentColor'`, …); these
+ * are the actual visual identities consumers can opt into.
+ */
+export declare const THEMES: {
+    Default: {
+        font?: string | undefined;
+        color?: string | undefined;
+        background?: string | undefined;
+        border?: string | undefined;
+        spacing?: {
+            headerPadding?: string | undefined;
+            legendPadding?: string | undefined;
+            captionPadding?: string | undefined;
+        } | undefined;
+        title?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        subtitle?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        caption?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        legend?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            titleSize?: string | undefined;
+            titleWeight?: string | number | undefined;
+            gap?: string | undefined;
+            swatchSize?: string | undefined;
+        } | undefined;
+        axis?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            labelFontSize?: number | undefined;
+            titleFontSize?: number | undefined;
+            xTickSize?: number | undefined;
+            yTickSize?: number | undefined;
+            xTickPadding?: number | undefined;
+            yTickPadding?: number | undefined;
+            grid?: boolean | undefined;
+        } | undefined;
+        tooltip?: {
+            background?: string | undefined;
+            color?: string | undefined;
+            fontSize?: string | undefined;
+            padding?: string | undefined;
+            radius?: string | undefined;
+            border?: string | undefined;
+        } | undefined;
+        margins?: {
+            top?: number | undefined;
+            right?: number | undefined;
+            bottom?: number | undefined;
+            left?: number | undefined;
+        } | undefined;
+        palette?: string[] | undefined;
+        continuous?: {
+            min?: string | undefined;
+            max?: string | undefined;
+            labelColor?: string | undefined;
+        } | undefined;
+        line?: {
+            strokeWidth?: number | undefined;
+            dotRadius?: number | undefined;
+        } | undefined;
+        timeline?: {
+            axisColor?: string | undefined;
+            activeColor?: string | undefined;
+            thickness?: number | undefined;
+        } | undefined;
+        hover?: {
+            rule?: {
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                strokeLinecap?: import("../../types/plots/styles").LineCap | undefined;
+                strokeLinejoin?: import("../../types/plots/styles").LineJoin | undefined;
+            } | undefined;
+            dot?: {
+                dotRadius?: number | undefined;
+                dotFill?: string | undefined;
+                dotFillOpacity?: number | undefined;
+                dotSymbol?: import("../..").SymbolType | undefined;
+                dotStroke?: string | undefined;
+                dotStrokeWidth?: number | undefined;
+                dotStrokeOpacity?: number | undefined;
+                dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+            } | undefined;
+            font?: {
+                fill?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: "normal" | "bold" | undefined;
+                fontStyle?: "normal" | "italic" | undefined;
+                textAnchor?: "start" | "middle" | "end" | undefined;
+                lineAnchor?: "top" | "middle" | "bottom" | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                paintOrder?: string | undefined;
+                dx?: number | undefined;
+                dy?: number | undefined;
+            } | undefined;
+        } | undefined;
+    };
+    Editorial: {
+        font?: string | undefined;
+        color?: string | undefined;
+        background?: string | undefined;
+        border?: string | undefined;
+        spacing?: {
+            headerPadding?: string | undefined;
+            legendPadding?: string | undefined;
+            captionPadding?: string | undefined;
+        } | undefined;
+        title?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        subtitle?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        caption?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        legend?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            titleSize?: string | undefined;
+            titleWeight?: string | number | undefined;
+            gap?: string | undefined;
+            swatchSize?: string | undefined;
+        } | undefined;
+        axis?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            labelFontSize?: number | undefined;
+            titleFontSize?: number | undefined;
+            xTickSize?: number | undefined;
+            yTickSize?: number | undefined;
+            xTickPadding?: number | undefined;
+            yTickPadding?: number | undefined;
+            grid?: boolean | undefined;
+        } | undefined;
+        tooltip?: {
+            background?: string | undefined;
+            color?: string | undefined;
+            fontSize?: string | undefined;
+            padding?: string | undefined;
+            radius?: string | undefined;
+            border?: string | undefined;
+        } | undefined;
+        margins?: {
+            top?: number | undefined;
+            right?: number | undefined;
+            bottom?: number | undefined;
+            left?: number | undefined;
+        } | undefined;
+        palette?: string[] | undefined;
+        continuous?: {
+            min?: string | undefined;
+            max?: string | undefined;
+            labelColor?: string | undefined;
+        } | undefined;
+        line?: {
+            strokeWidth?: number | undefined;
+            dotRadius?: number | undefined;
+        } | undefined;
+        timeline?: {
+            axisColor?: string | undefined;
+            activeColor?: string | undefined;
+            thickness?: number | undefined;
+        } | undefined;
+        hover?: {
+            rule?: {
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                strokeLinecap?: import("../../types/plots/styles").LineCap | undefined;
+                strokeLinejoin?: import("../../types/plots/styles").LineJoin | undefined;
+            } | undefined;
+            dot?: {
+                dotRadius?: number | undefined;
+                dotFill?: string | undefined;
+                dotFillOpacity?: number | undefined;
+                dotSymbol?: import("../..").SymbolType | undefined;
+                dotStroke?: string | undefined;
+                dotStrokeWidth?: number | undefined;
+                dotStrokeOpacity?: number | undefined;
+                dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+            } | undefined;
+            font?: {
+                fill?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: "normal" | "bold" | undefined;
+                fontStyle?: "normal" | "italic" | undefined;
+                textAnchor?: "start" | "middle" | "end" | undefined;
+                lineAnchor?: "top" | "middle" | "bottom" | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                paintOrder?: string | undefined;
+                dx?: number | undefined;
+                dy?: number | undefined;
+            } | undefined;
+        } | undefined;
+    };
+    Dark: {
+        font?: string | undefined;
+        color?: string | undefined;
+        background?: string | undefined;
+        border?: string | undefined;
+        spacing?: {
+            headerPadding?: string | undefined;
+            legendPadding?: string | undefined;
+            captionPadding?: string | undefined;
+        } | undefined;
+        title?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        subtitle?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        caption?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        legend?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            titleSize?: string | undefined;
+            titleWeight?: string | number | undefined;
+            gap?: string | undefined;
+            swatchSize?: string | undefined;
+        } | undefined;
+        axis?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            labelFontSize?: number | undefined;
+            titleFontSize?: number | undefined;
+            xTickSize?: number | undefined;
+            yTickSize?: number | undefined;
+            xTickPadding?: number | undefined;
+            yTickPadding?: number | undefined;
+            grid?: boolean | undefined;
+        } | undefined;
+        tooltip?: {
+            background?: string | undefined;
+            color?: string | undefined;
+            fontSize?: string | undefined;
+            padding?: string | undefined;
+            radius?: string | undefined;
+            border?: string | undefined;
+        } | undefined;
+        margins?: {
+            top?: number | undefined;
+            right?: number | undefined;
+            bottom?: number | undefined;
+            left?: number | undefined;
+        } | undefined;
+        palette?: string[] | undefined;
+        continuous?: {
+            min?: string | undefined;
+            max?: string | undefined;
+            labelColor?: string | undefined;
+        } | undefined;
+        line?: {
+            strokeWidth?: number | undefined;
+            dotRadius?: number | undefined;
+        } | undefined;
+        timeline?: {
+            axisColor?: string | undefined;
+            activeColor?: string | undefined;
+            thickness?: number | undefined;
+        } | undefined;
+        hover?: {
+            rule?: {
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                strokeLinecap?: import("../../types/plots/styles").LineCap | undefined;
+                strokeLinejoin?: import("../../types/plots/styles").LineJoin | undefined;
+            } | undefined;
+            dot?: {
+                dotRadius?: number | undefined;
+                dotFill?: string | undefined;
+                dotFillOpacity?: number | undefined;
+                dotSymbol?: import("../..").SymbolType | undefined;
+                dotStroke?: string | undefined;
+                dotStrokeWidth?: number | undefined;
+                dotStrokeOpacity?: number | undefined;
+                dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+            } | undefined;
+            font?: {
+                fill?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: "normal" | "bold" | undefined;
+                fontStyle?: "normal" | "italic" | undefined;
+                textAnchor?: "start" | "middle" | "end" | undefined;
+                lineAnchor?: "top" | "middle" | "bottom" | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                paintOrder?: string | undefined;
+                dx?: number | undefined;
+                dy?: number | undefined;
+            } | undefined;
+        } | undefined;
+    };
+    Compact: {
+        font?: string | undefined;
+        color?: string | undefined;
+        background?: string | undefined;
+        border?: string | undefined;
+        spacing?: {
+            headerPadding?: string | undefined;
+            legendPadding?: string | undefined;
+            captionPadding?: string | undefined;
+        } | undefined;
+        title?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        subtitle?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        caption?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            leading?: string | undefined;
+            spacing?: string | undefined;
+        } | undefined;
+        legend?: {
+            font?: string | undefined;
+            size?: string | undefined;
+            weight?: string | number | undefined;
+            color?: string | undefined;
+            titleSize?: string | undefined;
+            titleWeight?: string | number | undefined;
+            gap?: string | undefined;
+            swatchSize?: string | undefined;
+        } | undefined;
+        axis?: {
+            color?: string | undefined;
+            fontSize?: number | undefined;
+            labelFontSize?: number | undefined;
+            titleFontSize?: number | undefined;
+            xTickSize?: number | undefined;
+            yTickSize?: number | undefined;
+            xTickPadding?: number | undefined;
+            yTickPadding?: number | undefined;
+            grid?: boolean | undefined;
+        } | undefined;
+        tooltip?: {
+            background?: string | undefined;
+            color?: string | undefined;
+            fontSize?: string | undefined;
+            padding?: string | undefined;
+            radius?: string | undefined;
+            border?: string | undefined;
+        } | undefined;
+        margins?: {
+            top?: number | undefined;
+            right?: number | undefined;
+            bottom?: number | undefined;
+            left?: number | undefined;
+        } | undefined;
+        palette?: string[] | undefined;
+        continuous?: {
+            min?: string | undefined;
+            max?: string | undefined;
+            labelColor?: string | undefined;
+        } | undefined;
+        line?: {
+            strokeWidth?: number | undefined;
+            dotRadius?: number | undefined;
+        } | undefined;
+        timeline?: {
+            axisColor?: string | undefined;
+            activeColor?: string | undefined;
+            thickness?: number | undefined;
+        } | undefined;
+        hover?: {
+            rule?: {
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                strokeLinecap?: import("../../types/plots/styles").LineCap | undefined;
+                strokeLinejoin?: import("../../types/plots/styles").LineJoin | undefined;
+            } | undefined;
+            dot?: {
+                dotRadius?: number | undefined;
+                dotFill?: string | undefined;
+                dotFillOpacity?: number | undefined;
+                dotSymbol?: import("../..").SymbolType | undefined;
+                dotStroke?: string | undefined;
+                dotStrokeWidth?: number | undefined;
+                dotStrokeOpacity?: number | undefined;
+                dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+            } | undefined;
+            font?: {
+                fill?: string | undefined;
+                fontSize?: number | undefined;
+                fontWeight?: "normal" | "bold" | undefined;
+                fontStyle?: "normal" | "italic" | undefined;
+                textAnchor?: "start" | "middle" | "end" | undefined;
+                lineAnchor?: "top" | "middle" | "bottom" | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                paintOrder?: string | undefined;
+                dx?: number | undefined;
+                dy?: number | undefined;
+            } | undefined;
+        } | undefined;
+    };
+};
+export type ThemeName = keyof typeof THEMES;

package/dist/configuration/themes/index.js

@@ -0,0 +1,16 @@
+import { DEFAULT_THEME } from './default';
+import { EDITORIAL_THEME } from './editorial';
+import { DARK_THEME } from './dark';
+import { COMPACT_THEME } from './compact';
+/**
+ * Ready-made theme presets — partial configs deep-merged over
+ * `DEFAULT_CONFIG` by `setConfiguration`. `DEFAULT_CONFIG` itself stays an
+ * opinion-free no-op (`font: 'inherit'`, `color: 'currentColor'`, …); these
+ * are the actual visual identities consumers can opt into.
+ */
+export const THEMES = {
+    Default: DEFAULT_THEME,
+    Editorial: EDITORIAL_THEME,
+    Dark: DARK_THEME,
+    Compact: COMPACT_THEME,
+};

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+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 Chart } from './charts/Chart.svelte';
+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 ChartContainer } from './charts/container/ChartContainer.svelte';
+export { default as PlotLayout } from './layout/plot/PlotLayout.svelte';
+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 LegendLayout } from './layout/legend/LegendLayout.svelte';
+export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
+export { default as HoverMarker } from './plots/markers/HoverMarker.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
+export { THEMES } from './configuration/themes';
+export type { ThemeName } from './configuration/themes';
+export { groupBy, buildSeries } from './utils/grouping';
+export { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';
+export type { AxisValue, Accessor, AxisScale, ScalesConfig, Series, SeriesProps, DataProps } from './types/plots/common';
+export type { DeltaConfig, } from './types/plots/delta';
+export type { SymbolType, LineStyle, StrokeStyle, DotStyle, FontStyle, LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, Range, Area, Segment, SeriesAwareSegmentsMap, SegmentsMap, ValueAnchor, ValuesStyle, ColorsStyle, PlotStyles, } from './types/plots/styles';
+export type { Marker, MarkerProps } from './types/plots/markers';
+export type { PlotProps } from './types/plots/props';
+export type { TimeValue, Orientation, FacetColumns, FacetConfig, TimelineConfig, ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
+export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, } from './types/charts/legend';
+export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipRuntime, } from './types/layout/tooltip';
+export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
+export type { ChartProps } from './types/charts/props';

package/dist/index.js

@@ -0,0 +1,27 @@
+// ── Plots ───────────────────────────────────────────────────────────────────
+// Low-level graphics: one specific mark family each, drawn into a given box.
+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';
+// ── Charts ──────────────────────────────────────────────────────────────────
+// High-level, plot-agnostic chrome plus ready-made chart kinds.
+export { default as Chart } from './charts/Chart.svelte';
+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';
+// Interchangeable layout primitives (compose your own chart kinds with these).
+export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
+export { default as PlotLayout } from './layout/plot/PlotLayout.svelte';
+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 LegendLayout } from './layout/legend/LegendLayout.svelte';
+export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
+export { default as HoverMarker } from './plots/markers/HoverMarker.svelte';
+export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
+export { THEMES } from './configuration/themes';
+// ── Utils ─────────────────────────────────────────────────────────────────────
+export { groupBy, buildSeries } from './utils/grouping';
+export { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';

package/dist/layout/facet/FacetLayout.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import { isMobile } from '../../stores/device';
+  import { groupBy } from '../../utils/grouping';
+  import type {
+    FacetColumns,
+    FacetCellSnippet,
+  } from '../../types/charts/common';
+  import type { Accessor } from '../../types/plots/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.
+   */
+  let {
+    data,
+    by,
+    columns = { desktop: 3, mobile: 1 },
+    values,
+    gap = 12,
+    width,
+    height,
+    cell,
+  }: {
+    data: TRow[];
+    by: Accessor<TRow, unknown>;
+    columns?: FacetColumns;
+    values?: string[];
+    gap?: number;
+    width: number;
+    height: number;
+    cell: FacetCellSnippet<TRow>;
+  } = $props();
+
+  const groups = $derived(groupBy(data, by));
+
+  const entries = $derived.by((): [string, TRow[]][] => {
+    if (!values) return [...groups.entries()];
+    return values
+      .filter((v) => groups.has(v))
+      .map((v) => [v, groups.get(v)!] as [string, TRow[]]);
+  });
+
+  const cols = $derived.by(() => {
+    const desired =
+      typeof columns === 'number'
+        ? columns
+        : $isMobile
+          ? columns.mobile
+          : columns.desktop;
+    return Math.max(1, Math.min(desired, entries.length || 1));
+  });
+
+  const rows = $derived(Math.ceil((entries.length || 1) / cols));
+  const cellWidth = $derived(Math.max(0, Math.floor((width - (cols - 1) * gap) / cols)));
+  const TITLE_H = 24;
+  const cellHeight = $derived(
+    Math.max(0, Math.floor((height - (rows - 1) * gap) / rows) - TITLE_H),
+  );
+</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}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .dct-facet {
+    display: grid;
+    width: 100%;
+    height: 100%;
+  }
+  .dct-facet__cell {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+  .dct-facet__title {
+    flex: 0 0 auto;
+    font-size: 0.85rem;
+    font-weight: 600;
+    text-align: center;
+    opacity: 0.9;
+  }
+</style>