@sentropic/design-system-svelte 0.12.0 → 0.14.0

package/dist/ForceGraph.svelte

@@ -237,6 +237,18 @@
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
   };
 
@@ -256,6 +268,8 @@
     onEdgeHover,
     legend,
     edgeCurve = 0.15,
+    repulsion = 1,
+    onNodeHover,
     class: className
   }: ForceGraphProps = $props();
 
@@ -311,7 +325,8 @@
     es: ForceGraphEdge[],
     w: number,
     h: number,
-    ticks: number
+    ticks: number,
+    repulsionFactor: number
   ): Map<string, { x: number; y: number }> {
     const cx = w / 2;
     const cy = h / 2;
@@ -339,7 +354,11 @@
 
     const area = w * h;
     const k = Math.sqrt(area / Math.max(ns.length, 1)); // ideal node distance
-    const repulsion = k * k * 0.9;
+    // Clamp the caller-supplied factor so extreme values can't explode or
+    // collapse the layout. >1 spreads nodes out, <1 packs them tighter; the
+    // fit-to-content viewBox is recomputed afterwards so spacing just fills space.
+    const clampedRepulsion = Math.min(Math.max(repulsionFactor, 0.1), 10);
+    const repulsion = k * k * 0.9 * clampedRepulsion;
     const restLength = k * 0.8;
     const springK = 0.04;
     const gravity = 0.012;
@@ -426,7 +445,7 @@
   // honouring the motion preference (no rAF loop, no jitter).
   const layout = $derived.by(() => {
     const ticks = Math.max(1, Math.round(iterations));
-    return runSimulation(nodes, edges, width, height, ticks);
+    return runSimulation(nodes, edges, width, height, ticks, repulsion);
   });
 
   const positionedNodes = $derived.by(() =>
@@ -584,6 +603,38 @@
     return !(srcActive || tgtActive);
   }
 
+  // ---------------------------------------------------------------------------
+  // Hover-connexe (demand 7): hovering a node fades the rest of the graph the
+  // same way selection does — the hovered node and its direct neighbours stay
+  // full, every other node dims, and only edges incident to the hovered node
+  // keep their opacity. Composes with selection (predicates OR'd together).
+  // ---------------------------------------------------------------------------
+  const hoveredNodeId = $derived(
+    hoveredNodeIndex != null ? (positionedNodes[hoveredNodeIndex]?.node.id ?? null) : null
+  );
+  const hoverActiveSet = $derived.by(() => {
+    const set = new Set<string>();
+    if (hoveredNodeId == null) return set;
+    set.add(hoveredNodeId);
+    const nb = adjacency.get(hoveredNodeId);
+    if (nb) for (const n of nb) set.add(n);
+    return set;
+  });
+
+  // A node is dimmed by hover when a node is hovered and this one is neither
+  // the hovered node nor one of its direct neighbours.
+  function isHoverDimmedNode(id: string): boolean {
+    if (hoveredNodeId == null) return false;
+    return !hoverActiveSet.has(id);
+  }
+
+  // An edge is dimmed by hover when a node is hovered and the edge is not
+  // incident to it (keep only the hovered node's own edges full).
+  function isHoverDimmedEdge(e: ForceGraphEdge): boolean {
+    if (hoveredNodeId == null) return false;
+    return e.source !== hoveredNodeId && e.target !== hoveredNodeId;
+  }
+
   // Keyboard handler for a node circle: Space/Enter → onSelect, Enter → onOpenEntity.
   function handleNodeKeydown(id: string, e: KeyboardEvent) {
     if (e.key === "Enter" || e.key === " ") {
@@ -734,7 +785,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             d={e.path}
             fill="none"
             stroke-dasharray={e.dashArray}
@@ -747,7 +798,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             x1={e.x1}
             y1={e.y1}
             x2={e.x2}
@@ -764,7 +815,7 @@
       {#each positionedNodes as p (p.node.id)}
         <g
           class="st-forceGraph__node st-forceGraph__node--{p.tone}"
-          class:st-forceGraph__node--dim={(hoveredNodeIndex !== null && hoveredNodeIndex !== p.i) || isSelectionDimmed(p.node.id)}
+          class:st-forceGraph__node--dim={isHoverDimmedNode(p.node.id) || isSelectionDimmed(p.node.id)}
           class:st-forceGraph__node--selected={selectedSet.has(p.node.id)}
           class:st-forceGraph__node--focus={focusId === p.node.id}
           transform="translate({p.x} {p.y})"
@@ -777,10 +828,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}
@@ -793,10 +844,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}

package/dist/ForceGraph.svelte.d.ts

@@ -126,6 +126,18 @@ type ForceGraphProps = {
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
 };
 declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;

package/dist/ForceGraph.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}

package/dist/Rating.svelte

@@ -0,0 +1,189 @@
+<script lang="ts" module>
+  export type RatingSize = "sm" | "md" | "lg";
+</script>
+
+<script lang="ts">
+  import { Star, StarHalf } from "@lucide/svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type RatingProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Note courante (0..max). Pas de 1, ou 0.5 si `allowHalf`. */
+    value?: number;
+    /** Nombre d'étoiles. */
+    max?: number;
+    /** Appelé avec la nouvelle note au clic ou au clavier. */
+    onChange?: (value: number) => void;
+    /** Affichage seul : ni clic ni clavier n'émettent. */
+    readonly?: boolean;
+    /** Autorise les demi-étoiles (sélection au demi-point). */
+    allowHalf?: boolean;
+    size?: RatingSize;
+    /** Attribut name (utile dans un formulaire / pour la sémantique radio). */
+    name?: string;
+    /** Étiquette accessible du groupe. */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    value = 0,
+    max = 5,
+    onChange,
+    readonly = false,
+    allowHalf = false,
+    size = "md",
+    name,
+    label,
+    class: className,
+    ...rest
+  }: RatingProps = $props();
+
+  const iconSize = $derived(size === "sm" ? 16 : size === "lg" ? 28 : 22);
+
+  const classes = $derived(
+    ["st-rating", `st-rating--${size}`, readonly && "st-rating--readonly", className]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const stars = $derived(Array.from({ length: max }, (_, i) => i + 1));
+
+  // L'étoile « focusable » (tabindex 0) suit la valeur ; à 0 c'est la première.
+  const focusedStar = $derived(value > 0 ? Math.ceil(value) : 1);
+
+  function fill(star: number): "full" | "half" | "empty" {
+    if (value >= star) return "full";
+    if (allowHalf && value >= star - 0.5) return "half";
+    return "empty";
+  }
+
+  function commit(next: number) {
+    if (readonly) return;
+    const clamped = Math.max(0, Math.min(max, next));
+    value = clamped;
+    onChange?.(clamped);
+  }
+
+  function onStarClick(event: MouseEvent, star: number) {
+    if (readonly) return;
+    let next = star;
+    if (allowHalf) {
+      const target = event.currentTarget as HTMLElement;
+      const rect = target.getBoundingClientRect();
+      const isLeftHalf = event.clientX - rect.left < rect.width / 2;
+      next = isLeftHalf ? star - 0.5 : star;
+    }
+    // Re-cliquer la valeur déjà sélectionnée remet à zéro.
+    if (next === value) {
+      commit(0);
+      return;
+    }
+    commit(next);
+  }
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (readonly) return;
+    const step = allowHalf ? 0.5 : 1;
+    let handled = true;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        commit(Math.min(max, value + step));
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        commit(Math.max(0, value - step));
+        break;
+      case "Home":
+        commit(0);
+        break;
+      case "End":
+        commit(max);
+        break;
+      default:
+        handled = false;
+    }
+    if (handled) event.preventDefault();
+  }
+</script>
+
+<div
+  {...rest}
+  class={classes}
+  role="radiogroup"
+  aria-label={label}
+  aria-readonly={readonly ? "true" : undefined}
+>
+  {#each stars as star (star)}
+    {@const state = fill(star)}
+    <button
+      type="button"
+      class="st-rating__star"
+      class:st-rating__star--full={state === "full"}
+      class:st-rating__star--half={state === "half"}
+      role="radio"
+      name={name}
+      aria-checked={Math.ceil(value) === star ? "true" : "false"}
+      aria-label={`${star} / ${max}`}
+      tabindex={!readonly && star === focusedStar ? 0 : -1}
+      disabled={readonly}
+      onclick={(event) => onStarClick(event, star)}
+      onkeydown={onKeyDown}
+    >
+      {#if state === "half"}
+        <StarHalf size={iconSize} strokeWidth={1.75} aria-hidden="true" />
+      {:else}
+        <Star
+          size={iconSize}
+          strokeWidth={1.75}
+          fill={state === "full" ? "currentColor" : "none"}
+          aria-hidden="true"
+        />
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .st-rating {
+    align-items: center;
+    color: var(--st-semantic-text-secondary);
+    display: inline-flex;
+    gap: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    border-radius: var(--st-component-control-radius, 0.375rem);
+    color: var(--st-semantic-text-muted);
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    line-height: 0;
+    padding: var(--st-spacing-1, 0.25rem);
+  }
+
+  .st-rating__star--full,
+  .st-rating__star--half {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:hover:not(:disabled) {
+    color: var(--st-semantic-feedback-warning, var(--st-semantic-action-primary));
+  }
+
+  .st-rating__star:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-rating__star:disabled {
+    cursor: default;
+  }
+
+  .st-rating--readonly .st-rating__star {
+    cursor: default;
+  }
+</style>

package/dist/Rating.svelte.d.ts

@@ -0,0 +1,24 @@
+export type RatingSize = "sm" | "md" | "lg";
+import type { HTMLAttributes } from "svelte/elements";
+type RatingProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Note courante (0..max). Pas de 1, ou 0.5 si `allowHalf`. */
+    value?: number;
+    /** Nombre d'étoiles. */
+    max?: number;
+    /** Appelé avec la nouvelle note au clic ou au clavier. */
+    onChange?: (value: number) => void;
+    /** Affichage seul : ni clic ni clavier n'émettent. */
+    readonly?: boolean;
+    /** Autorise les demi-étoiles (sélection au demi-point). */
+    allowHalf?: boolean;
+    size?: RatingSize;
+    /** Attribut name (utile dans un formulaire / pour la sémantique radio). */
+    name?: string;
+    /** Étiquette accessible du groupe. */
+    label?: string;
+    class?: string;
+};
+declare const Rating: import("svelte").Component<RatingProps, {}, "">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;
+//# sourceMappingURL=Rating.svelte.d.ts.map

package/dist/Rating.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Rating.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC9E,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA2GJ,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/SlideIndicator.svelte

@@ -0,0 +1,173 @@
+<script lang="ts" module>
+  export type SlideIndicatorVariant = "dots" | "bars";
+</script>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+
+  type SlideIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Nombre total de diapositives. */
+    count: number;
+    /** Index de la diapositive courante (0-based). */
+    current?: number;
+    /** Appelé avec l'index ciblé au clic ou au clavier. */
+    onChange?: (index: number) => void;
+    size?: "sm" | "md" | "lg";
+    variant?: SlideIndicatorVariant;
+    /** Préfixe d'étiquette accessible de chaque point ("Diapositive 1"...). */
+    label?: string;
+    class?: string;
+  };
+
+  let {
+    count,
+    current = 0,
+    onChange,
+    size = "md",
+    variant = "dots",
+    label = "Diapositive",
+    class: className,
+    ...rest
+  }: SlideIndicatorProps = $props();
+
+  const classes = $derived(
+    [
+      "st-slideIndicator",
+      `st-slideIndicator--${size}`,
+      `st-slideIndicator--${variant}`,
+      className
+    ]
+      .filter(Boolean)
+      .join(" ")
+  );
+
+  const items = $derived(Array.from({ length: Math.max(0, count) }, (_, i) => i));
+
+  function select(index: number) {
+    if (index < 0 || index >= count || index === current) return;
+    onChange?.(index);
+  }
+
+  function onKeyDown(event: KeyboardEvent, index: number) {
+    let target = index;
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        target = Math.min(count - 1, index + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        target = Math.max(0, index - 1);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = count - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    select(target);
+  }
+</script>
+
+<div {...rest} class={classes} role="tablist" aria-label={label}>
+  {#each items as index (index)}
+    <button
+      type="button"
+      class="st-slideIndicator__dot"
+      class:st-slideIndicator__dot--current={index === current}
+      role="tab"
+      aria-selected={index === current ? "true" : "false"}
+      aria-current={index === current ? "true" : undefined}
+      aria-label={`${label} ${index + 1}`}
+      tabindex={index === current ? 0 : -1}
+      onclick={() => select(index)}
+      onkeydown={(event) => onKeyDown(event, index)}
+    ></button>
+  {/each}
+</div>
+
+<style>
+  .st-slideIndicator {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--st-spacing-2, 0.5rem);
+  }
+
+  .st-slideIndicator__dot {
+    background: var(--st-semantic-border-strong, var(--st-semantic-text-muted));
+    border: 0;
+    cursor: pointer;
+    opacity: 0.5;
+    padding: 0;
+    transition:
+      opacity var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      background-color var(--st-motion-fast, 120ms) var(--st-motion-easing, ease),
+      width var(--st-motion-fast, 120ms) var(--st-motion-easing, ease);
+  }
+
+  .st-slideIndicator__dot:hover {
+    opacity: 0.8;
+  }
+
+  .st-slideIndicator__dot:focus-visible {
+    outline: 2px solid var(--st-component-control-focusRing, var(--st-semantic-border-interactive));
+    outline-offset: 2px;
+  }
+
+  .st-slideIndicator__dot--current {
+    background: var(--st-semantic-action-primary);
+    opacity: 1;
+  }
+
+  /* Variant dots: cercles */
+  .st-slideIndicator--dots .st-slideIndicator__dot {
+    border-radius: 50%;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--sm .st-slideIndicator__dot {
+    height: 0.375rem;
+    width: 0.375rem;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--md .st-slideIndicator__dot {
+    height: 0.5rem;
+    width: 0.5rem;
+  }
+
+  .st-slideIndicator--dots.st-slideIndicator--lg .st-slideIndicator__dot {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
+  /* Variant bars: barres, la courante s'allonge */
+  .st-slideIndicator--bars .st-slideIndicator__dot {
+    border-radius: 999px;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--sm .st-slideIndicator__dot {
+    height: 0.25rem;
+    width: 0.75rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--md .st-slideIndicator__dot {
+    height: 0.3125rem;
+    width: 1rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot {
+    height: 0.375rem;
+    width: 1.25rem;
+  }
+
+  .st-slideIndicator--bars .st-slideIndicator__dot--current {
+    width: 1.75rem;
+  }
+
+  .st-slideIndicator--bars.st-slideIndicator--lg .st-slideIndicator__dot--current {
+    width: 2.25rem;
+  }
+</style>

package/dist/SlideIndicator.svelte.d.ts

@@ -0,0 +1,19 @@
+export type SlideIndicatorVariant = "dots" | "bars";
+import type { HTMLAttributes } from "svelte/elements";
+type SlideIndicatorProps = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onchange"> & {
+    /** Nombre total de diapositives. */
+    count: number;
+    /** Index de la diapositive courante (0-based). */
+    current?: number;
+    /** Appelé avec l'index ciblé au clic ou au clavier. */
+    onChange?: (index: number) => void;
+    size?: "sm" | "md" | "lg";
+    variant?: SlideIndicatorVariant;
+    /** Préfixe d'étiquette accessible de chaque point ("Diapositive 1"...). */
+    label?: string;
+    class?: string;
+};
+declare const SlideIndicator: import("svelte").Component<SlideIndicatorProps, {}, "">;
+type SlideIndicator = ReturnType<typeof SlideIndicator>;
+export default SlideIndicator;
+//# sourceMappingURL=SlideIndicator.svelte.d.ts.map

package/dist/SlideIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideIndicator.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SlideIndicator.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,MAAM,CAAC;AAGtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,KAAK,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtF,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuEJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}