sveltacular 0.0.76 → 1.0.0

package/dist/generic/pill/pill.svelte

@@ -1,55 +1,69 @@
-<script>export let size = "md";
-export let style = "standard";
-export let shape = "rounded";
-export let fill = "solid";
-export let compact = false;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { FormFieldSizeOptions } from '../../types/form.js';
+
+	let {
+		size = 'md' as FormFieldSizeOptions,
+		variant = 'standard' as 'standard' | 'positive' | 'negative',
+		shape = 'rounded' as 'circular' | 'square' | 'rounded' | 'badge' | 'circle',
+		fill = 'solid' as 'solid' | 'outline',
+		compact = false,
+		label
+	}: {
+		size?: FormFieldSizeOptions;
+		variant?: 'standard' | 'positive' | 'negative';
+		shape?: 'circular' | 'square' | 'rounded' | 'badge' | 'circle';
+		fill?: 'solid' | 'outline';
+		compact?: boolean;
+		label?: string;
+	} = $props();
 </script>
 
-<div class="pill {size} {style} {shape} {fill}" class:compact>
-	<span><slot /></span>
+<div class="pill {size} {variant} {shape} {fill}" class:compact>
+	<span>{label}</span>
 </div>
 
 <style>.pill {
   display: inline-block;
-  padding: 0.25rem 0.5rem;
-  border-radius: 1.5rem;
-  background-color: #f1f5f9;
-  font-size: 0.75rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--radius-pill);
+  background-color: var(--base-color-fg);
+  font-size: var(--font-sm);
   font-weight: 500;
-  color: #4a5568;
-  font-family: var(--base-font-family, sans-serif);
+  color: var(--base-color-bg);
+  font-family: var(--base-font-family);
 }
 .pill.compact {
-  padding: 0.125rem;
+  padding: var(--spacing-xs);
 }
 .pill.sm {
-  font-size: 0.625rem;
-  padding: 0.125rem 0.25rem;
+  font-size: var(--font-xs);
+  padding: var(--spacing-xs) var(--spacing-xs);
 }
 .pill.lg {
-  font-size: 0.875rem;
-  padding: 0.375rem 0.75rem;
+  font-size: var(--font-base);
+  padding: var(--spacing-xs) var(--spacing-md);
 }
 .pill.xl {
-  font-size: 1rem;
-  padding: 0.5rem 1rem;
+  font-size: var(--font-md);
+  padding: var(--spacing-sm) var(--spacing-base);
 }
 .pill.badge {
-  border-radius: 0.5rem;
+  border-radius: var(--radius-lg);
 }
 .pill.square {
   border-radius: 0;
 }
 .pill.outline {
   background-color: transparent;
-  border: 1px solid #4a5568;
-  color: #4a5568;
+  border: var(--border-thin) solid var(--gray-600);
+  color: var(--gray-600);
 }
 .pill.circular {
-  border-radius: 50%;
+  border-radius: var(--radius-full);
 }
 .pill.circle {
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   width: 1.75rem;
   height: 1.75rem;
   position: relative;
@@ -63,8 +77,8 @@ export let compact = false;
   height: 2.25rem;
 }
 .pill.circle.xl {
-  width: 3rem;
-  height: 3rem;
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
 }
 .pill.circle span {
   display: flex;
@@ -74,20 +88,20 @@ export let compact = false;
   height: 100%;
 }
 .pill.positive {
-  background-color: #0a5200;
+  background-color: var(--color-success);
   color: #fff;
 }
 .pill.positive.outline {
   background-color: transparent;
-  border: 1px solid #0a5200;
-  color: #0a5200;
+  border: var(--border-thin) solid var(--color-success);
+  color: var(--color-success);
 }
 .pill.negative {
-  background-color: #570000;
+  background-color: var(--color-error);
   color: #fff;
 }
 .pill.negative.outline {
   background-color: transparent;
-  border: 1px solid #570000;
-  color: #570000;
+  border: var(--border-thin) solid var(--color-error);
+  color: var(--color-error);
 }</style>

package/dist/generic/pill/pill.svelte.d.ts

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
 import type { FormFieldSizeOptions } from '../../types/form.js';
-declare const __propDef: {
-    props: {
-        size?: FormFieldSizeOptions | undefined;
-        style?: "positive" | "negative" | "standard" | undefined;
-        shape?: "circle" | "circular" | "square" | "rounded" | "badge" | undefined;
-        fill?: "outline" | "solid" | undefined;
-        compact?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    size?: FormFieldSizeOptions;
+    variant?: 'standard' | 'positive' | 'negative';
+    shape?: 'circular' | 'square' | 'rounded' | 'badge' | 'circle';
+    fill?: 'solid' | 'outline';
+    compact?: boolean;
+    label?: string;
 };
-export type PillProps = typeof __propDef.props;
-export type PillEvents = typeof __propDef.events;
-export type PillSlots = typeof __propDef.slots;
-export default class Pill extends SvelteComponent<PillProps, PillEvents, PillSlots> {
-}
-export {};
+declare const Pill: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pill = ReturnType<typeof Pill>;
+export default Pill;

package/dist/generic/popover/popover.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { uniqueId } from '../../helpers/unique-id.js';
+	import { browser } from '$app/environment';
+	import { usePosition } from '../../helpers/use-position.svelte.js';
+	import type { Placement } from '../../helpers/positioning.js';
+
+	let {
+		open = $bindable(false),
+		position = 'bottom' as 'top' | 'bottom' | 'left' | 'right',
+		placement = undefined as Placement | undefined,
+		autoPosition = true,
+		arrow = false,
+		offset = 8,
+		trigger,
+		children
+	}: {
+		open?: boolean;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		placement?: Placement;
+		autoPosition?: boolean;
+		arrow?: boolean;
+		offset?: number;
+		trigger?: Snippet;
+		children?: Snippet;
+	} = $props();
+
+	const popoverId = uniqueId();
+	let triggerElement: HTMLElement | null = $state(null);
+	let popoverElement: HTMLElement | null = $state(null);
+
+	// Use smart positioning if enabled
+	let positionManager = $derived(
+		autoPosition
+			? usePosition(
+					() => triggerElement,
+					() => popoverElement,
+					{
+						placement: placement || (position as Placement),
+						offset,
+						arrow,
+						arrowSize: 8,
+						enabled: open
+					}
+				)
+			: null
+	);
+
+	const handleClickOutside = (e: MouseEvent) => {
+		if (
+			browser &&
+			popoverElement &&
+			triggerElement &&
+			!popoverElement.contains(e.target as Node) &&
+			!triggerElement.contains(e.target as Node)
+		) {
+			open = false;
+		}
+	};
+
+	const handleKeyDown = (e: KeyboardEvent) => {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			open = !open;
+		}
+	};
+
+	$effect(() => {
+		if (open && browser) {
+			document.addEventListener('click', handleClickOutside);
+			return () => {
+				document.removeEventListener('click', handleClickOutside);
+			};
+		}
+	});
+
+	// Update position manager when open state changes
+	$effect(() => {
+		if (positionManager) {
+			positionManager.setOptions({ enabled: open });
+			if (open) {
+				positionManager.update();
+			}
+		}
+	});
+</script>
+
+<div class="popover-wrapper">
+	<div
+		bind:this={triggerElement}
+		onclick={() => (open = !open)}
+		onkeydown={handleKeyDown}
+		role="button"
+		tabindex="0"
+		aria-expanded={open}
+		aria-haspopup="true"
+	>
+		{@render trigger?.()}
+	</div>
+	{#if open}
+		{#if autoPosition && positionManager}
+			<!-- Smart positioned popover (fixed positioning) -->
+			<div
+				bind:this={popoverElement}
+				class="popover positioned"
+				class:with-arrow={arrow}
+				role="dialog"
+				id={popoverId}
+				aria-modal="false"
+				style="position: fixed; top: {positionManager.top}px; left: {positionManager.left}px;"
+			>
+				{@render children?.()}
+				{#if arrow}
+					<div
+						class="popover-arrow {positionManager.arrowSide}"
+						style={positionManager.arrowStyle}
+					></div>
+				{/if}
+			</div>
+		{:else}
+			<!-- Legacy positioned popover (relative positioning) -->
+			<div
+				bind:this={popoverElement}
+				class="popover {position}"
+				role="dialog"
+				id={popoverId}
+				aria-modal="false"
+			>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>.popover-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.popover {
+  z-index: 1000;
+  padding: var(--spacing-md);
+  background-color: var(--popover-bg);
+  border: var(--border-thin) solid var(--popover-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  min-width: 12rem;
+  max-width: 20rem;
+  animation: popover-fade-in 0.2s ease-out;
+}
+.popover.positioned {
+  /* Fixed positioning handled by inline styles */
+  position: fixed;
+}
+.popover.with-arrow {
+  /* Add space for arrow if needed */
+  position: relative;
+}
+.popover {
+  /* Legacy relative positioning */
+}
+.popover:not(.positioned) {
+  position: absolute;
+}
+.popover:not(.positioned).top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--spacing-sm);
+}
+.popover:not(.positioned).bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--spacing-sm);
+}
+.popover:not(.positioned).left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--spacing-sm);
+}
+.popover:not(.positioned).right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--spacing-sm);
+}
+
+.popover-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.popover-arrow.top {
+  border-width: 8px 8px 0 8px;
+  border-color: var(--popover-bg) transparent transparent transparent;
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
+}
+.popover-arrow.bottom {
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent var(--popover-bg) transparent;
+  filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
+}
+.popover-arrow.left {
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--popover-bg);
+  filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
+}
+.popover-arrow.right {
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--popover-bg) transparent transparent;
+  filter: drop-shadow(-2px 0 2px rgba(0, 0, 0, 0.1));
+}
+
+@keyframes popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}</style>

package/dist/generic/popover/popover.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { Placement } from '../../helpers/positioning.js';
+type $$ComponentProps = {
+    open?: boolean;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: Placement;
+    autoPosition?: boolean;
+    arrow?: boolean;
+    offset?: number;
+    trigger?: Snippet;
+    children?: Snippet;
+};
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/generic/rating/rating.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { ComponentSize } from '../../types/size.js';
+	import { uniqueId } from '../../helpers/unique-id.js';
+
+	const id = uniqueId();
+
+	let {
+		value = $bindable(0 as number),
+		max = 5,
+		size = 'md' as ComponentSize,
+		readonly = false,
+		onChange = undefined
+	}: {
+		value?: number;
+		max?: number;
+		size?: ComponentSize;
+		readonly?: boolean;
+		onChange?: ((value: number) => void) | undefined;
+	} = $props();
+
+	const setValue = (newValue: number) => {
+		if (readonly) return;
+		value = newValue;
+		onChange?.(newValue);
+	};
+</script>
+
+<div class="rating {size}" role="radiogroup" aria-label="Rating">
+	{#each Array(max) as _, i}
+		<button
+			type="button"
+			class="star {i < value ? 'filled' : 'empty'}"
+			onclick={() => setValue(i + 1)}
+			aria-label="Rate {i + 1} out of {max}"
+			aria-pressed={i < value}
+			disabled={readonly}
+			aria-disabled={readonly}
+		>
+			★
+		</button>
+	{/each}
+</div>
+
+<style>.rating {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+.rating .star {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--rating-empty-color, #ccc);
+  transition: color 0.2s ease-in-out;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+.rating .star.filled {
+  color: var(--rating-filled-color, #ffc107);
+}
+.rating .star:hover:not([readonly]) {
+  color: var(--rating-hover-color, #ffb300);
+}
+.rating .star[readonly] {
+  cursor: default;
+}
+.rating .star:focus {
+  outline: 2px solid var(--rating-focus-color, #3182ce);
+  outline-offset: 2px;
+  border-radius: 0.125rem;
+}
+.rating.sm .star {
+  font-size: 1rem;
+}
+.rating.md .star {
+  font-size: 1.5rem;
+}
+.rating.lg .star {
+  font-size: 2rem;
+}
+.rating.xl .star {
+  font-size: 2.5rem;
+}</style>
+

package/dist/generic/rating/rating.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentSize } from '../../types/size.js';
+type $$ComponentProps = {
+    value?: number;
+    max?: number;
+    size?: ComponentSize;
+    readonly?: boolean;
+    onChange?: ((value: number) => void) | undefined;
+};
+declare const Rating: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/generic/scorecard/scorecard.svelte

@@ -1,28 +1,41 @@
-<script>import { navigateTo, uniqueId } from "../../index.js";
-import { getContext } from "svelte";
-export let value;
-export let caption = "below";
-export let href = void 0;
-const onClick = () => {
-  if (!href)
-    return;
-  navigateTo(href);
-};
-const id = uniqueId();
-const container = getContext("CardContainer");
-if (container) {
-  container.register(id);
-}
-$:
-  formattedValue = typeof value === "number" ? value.toLocaleString() : value;
-$:
-  isLink = !!href;
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { navigateTo, uniqueId } from '../../index.js';
+	import { getContext } from 'svelte';
+	import type { CardContainerContext } from '../card/card-container.js';
+
+	let {
+		value,
+		caption = 'below' as 'above' | 'below' | 'left' | 'right',
+		href = undefined,
+		children
+	}: {
+		value: string | number;
+		caption?: 'above' | 'below' | 'left' | 'right';
+		href?: string;
+		children: Snippet;
+	} = $props();
+
+	const onClick = () => {
+		if (!href) return;
+		navigateTo(href);
+	};
+
+	const id = uniqueId();
+	const container = getContext<CardContainerContext | undefined>('CardContainer');
+	if (container) {
+		container.register(id);
+	}
+
+	// Reactively format a string output of value, if it's a number, formatted with commas
+	let formattedValue = $derived(typeof value === 'number' ? value.toLocaleString() : value);
+	let isLink = $derived(!!href);
 </script>
 
-<button on:click={onClick} class:isLink {id}>
+<button onclick={onClick} class:isLink {id}>
 	<figure class={caption}>
 		<span class="value">{formattedValue}</span>
-		<figcaption><slot /></figcaption>
+		<figcaption>{@render children?.()}</figcaption>
 	</figure>
 </button>
 

package/dist/generic/scorecard/scorecard.svelte.d.ts

@@ -1,20 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: string | number;
-        caption?: "left" | "right" | "above" | "below" | undefined;
-        href?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value: string | number;
+    caption?: 'above' | 'below' | 'left' | 'right';
+    href?: string;
+    children: Snippet;
 };
-export type ScorecardProps = typeof __propDef.props;
-export type ScorecardEvents = typeof __propDef.events;
-export type ScorecardSlots = typeof __propDef.slots;
-export default class Scorecard extends SvelteComponent<ScorecardProps, ScorecardEvents, ScorecardSlots> {
-}
-export {};
+declare const Scorecard: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scorecard = ReturnType<typeof Scorecard>;
+export default Scorecard;

package/dist/generic/section/section.svelte

@@ -1,18 +1,37 @@
-<script>import { setContext } from "svelte";
-import Header from "../header/header.svelte";
-export let title = void 0;
-export let level = 2;
-export let size = "full";
-export let hidden = false;
-export let align = "left";
-setContext("section", { level, title });
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import type { SectionLevel } from '../../types/generic.js';
+	import Header from '../header/header.svelte';
+	import type { FormFieldSizeOptions } from '../../index.js';
+
+	let {
+		title = undefined,
+		level = 2 as SectionLevel,
+		size = 'full' as FormFieldSizeOptions,
+		hidden = false,
+		align = 'left' as 'left' | 'center' | 'right',
+		children
+	}: {
+		title?: string;
+		level?: SectionLevel;
+		size?: FormFieldSizeOptions;
+		hidden?: boolean;
+		align?: 'left' | 'center' | 'right';
+		children: Snippet;
+	} = $props();
+
+	setContext('section', { 
+		get level() { return level; },
+		get title() { return title; }
+	});
 </script>
 
 <section class="level-{level} {size} {align}" class:hidden>
 	{#if title}
 		<Header {level} />
 	{/if}
-	<slot />
+	{@render children?.()}
 </section>
 
 <style>section {

package/dist/generic/section/section.svelte.d.ts

@@ -1,24 +1,14 @@
-import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 import type { SectionLevel } from '../../types/generic.js';
 import type { FormFieldSizeOptions } from '../../index.js';
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        level?: SectionLevel | undefined;
-        size?: FormFieldSizeOptions | undefined;
-        hidden?: boolean | undefined;
-        align?: "center" | "left" | "right" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
+type $$ComponentProps = {
+    title?: string;
+    level?: SectionLevel;
+    size?: FormFieldSizeOptions;
+    hidden?: boolean;
+    align?: 'left' | 'center' | 'right';
+    children: Snippet;
 };
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = typeof __propDef.slots;
-export default class Section extends SvelteComponent<SectionProps, SectionEvents, SectionSlots> {
-}
-export {};
+declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
+type Section = ReturnType<typeof Section>;
+export default Section;