@x33025/sveltely 0.1.24 → 0.1.25

package/dist/actions/LoaderOverlay.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Spinner from '../components/Library/Spinner/Spinner.svelte';
-	import VStack from '../components/Library/VStack/VStack.svelte';
 
 	type Props = {
 		text: string;
@@ -32,12 +31,12 @@
 	aria-label={text || 'Loading'}
 	style={overlayStyle}
 >
-	<VStack align="center" justify="center" gap={5}>
+	<div class="sveltely-loader-content">
 		<Spinner size="calc(var(--sveltely-loader-font-size) * 1.143)" />
 		{#if text}
 			<span class="sveltely-loader-text">{text}</span>
 		{/if}
-	</VStack>
+	</div>
 </div>
 
 <style>
@@ -57,6 +56,14 @@
 		text-align: center;
 	}
 
+	.sveltely-loader-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sveltely-gap, 0.5rem);
+	}
+
 	.sveltely-loader-text {
 		max-width: 100%;
 		overflow: hidden;

package/dist/components/Library/Accordion/Accordion.demo.svelte

@@ -0,0 +1,21 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Accordion',
+		description: 'Single collapsible disclosure primitive with header and content.',
+		columnSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Accordion from './index';
+
+	let open = $state(true);
+</script>
+
+<Accordion bind:open>
+	<Accordion.Header>Release notes</Accordion.Header>
+	<Accordion.Content>
+		Small primitives stay easy to compose: the header owns the toggle and the content collapses
+		under it.
+	</Accordion.Content>
+</Accordion>

package/dist/components/Library/Accordion/Accordion.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+};
+import Accordion from './index';
+declare const Accordion: import("svelte").Component<Record<string, never>, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Library/Accordion/Accordion.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+	export { default as Header } from './Header.svelte';
+	export { default as Content } from './Content.svelte';
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+	import { setAccordionContext } from './context';
+
+	type Props = {
+		children?: Snippet;
+		open?: boolean;
+		disabled?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	} & StyleProps &
+		Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+
+	let {
+		children,
+		open = $bindable(false),
+		disabled = false,
+		onOpenChange,
+		...restProps
+	}: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const forwardedProps = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'accordion'));
+
+	function setOpen(nextOpen: boolean) {
+		if (disabled || open === nextOpen) return;
+		open = nextOpen;
+		onOpenChange?.(nextOpen);
+	}
+
+	setAccordionContext({
+		get open() {
+			return open;
+		},
+		get disabled() {
+			return disabled;
+		},
+		toggle: () => setOpen(!open),
+		openPanel: () => setOpen(true),
+		closePanel: () => setOpen(false)
+	});
+</script>
+
+<div class="accordion" data-open={open} data-disabled={disabled} style={rootStyle} {...forwardedProps}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.accordion {
+		--accordion-border-radius: var(--sveltely-border-radius);
+		--accordion-font-size: var(--sveltely-font-size);
+		--accordion-padding-x: var(--sveltely-padding-x);
+		--accordion-padding-y: var(--sveltely-padding-y);
+		--accordion-gap: var(--sveltely-gap);
+		align-self: flex-start;
+		min-width: 0;
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--accordion-border-radius);
+		background: var(--sveltely-background-color);
+		color: var(--sveltely-text-primary-color);
+		font-size: var(--accordion-font-size);
+		overflow: hidden;
+	}
+
+	.accordion[data-disabled='true'] {
+		opacity: 0.6;
+	}
+</style>

package/dist/components/Library/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,14 @@
+export { default as Header } from './Header.svelte';
+export { default as Content } from './Content.svelte';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type StyleProps } from '../../../style/surface';
+type Props = {
+    children?: Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+} & StyleProps & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+declare const Accordion: import("svelte").Component<Props, {}, "open">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/Library/Accordion/Content.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getAccordionContext } from './context';
+
+	type Props = {
+		children?: Snippet;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+
+	let { children, ...props }: Props = $props();
+
+	const accordion = getAccordionContext();
+</script>
+
+<div
+	class="accordion-content"
+	data-open={accordion.open}
+	role="region"
+	aria-hidden={!accordion.open}
+	{...props}
+>
+	<div class="accordion-content-inner">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.accordion-content {
+		display: grid;
+		grid-template-rows: 0fr;
+		border-top: 1px solid transparent;
+		transform-origin: top;
+		transition:
+			grid-template-rows 180ms ease,
+			border-color 180ms ease;
+	}
+
+	.accordion-content[data-open='true'] {
+		grid-template-rows: 1fr;
+		border-top-color: var(--sveltely-border-color);
+	}
+
+	.accordion-content-inner {
+		min-height: 0;
+		overflow: hidden;
+		padding: 0 var(--accordion-padding-x, var(--sveltely-padding-x));
+		color: var(--sveltely-text-secondary-color);
+		line-height: 1.5;
+		transition: padding-block 180ms ease;
+	}
+
+	.accordion-content[data-open='true'] .accordion-content-inner {
+		padding-block: var(--accordion-padding-y, var(--sveltely-padding-y));
+	}
+</style>

package/dist/components/Library/Accordion/Content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = {
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'>;
+declare const Content: import("svelte").Component<Props, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Library/Accordion/Header.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { ChevronDownIcon } from '@lucide/svelte';
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getAccordionContext, type AccordionState } from './context';
+
+	type Props = {
+		children?: Snippet<[AccordionState]>;
+		label?: string;
+	} & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+	type ButtonMouseEvent = MouseEvent & { currentTarget: EventTarget & HTMLButtonElement };
+
+	let {
+		children,
+		label,
+		disabled = false,
+		type = 'button',
+		onclick,
+		...props
+	}: Props = $props();
+
+	const accordion = getAccordionContext();
+	const buttonDisabled = $derived(disabled || accordion.disabled);
+
+	function handleClick(event: ButtonMouseEvent) {
+		if (buttonDisabled) return;
+		onclick?.(event);
+		if (!event.defaultPrevented) accordion.toggle();
+	}
+</script>
+
+<button
+	{type}
+	class="accordion-header"
+	data-open={accordion.open}
+	aria-expanded={accordion.open}
+	disabled={buttonDisabled}
+	{...props}
+	onclick={handleClick}
+>
+	<span class="accordion-header-label">
+		{#if children}
+			{@render children(accordion)}
+		{:else if label}
+			{label}
+		{/if}
+	</span>
+	<ChevronDownIcon class="accordion-header-icon" aria-hidden="true" />
+</button>
+
+<style>
+	.accordion-header {
+		display: flex;
+		width: 100%;
+		min-width: 0;
+		align-items: center;
+		justify-content: space-between;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		gap: var(--accordion-gap, var(--sveltely-gap));
+		padding: var(--accordion-padding-y, var(--sveltely-padding-y))
+			var(--accordion-padding-x, var(--sveltely-padding-x));
+		font: inherit;
+		line-height: 1.35;
+		text-align: left;
+		transition: background-color 150ms;
+	}
+
+	.accordion-header:disabled {
+		cursor: not-allowed;
+	}
+
+	.accordion-header:not(:disabled) {
+		cursor: pointer;
+	}
+
+	.accordion-header:not(:disabled):hover {
+		background: var(--sveltely-control-background-color);
+	}
+
+	.accordion-header-label {
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+
+	.accordion-header-icon {
+		width: 1rem;
+		height: 1rem;
+		flex: 0 0 auto;
+		color: var(--sveltely-text-secondary-color);
+		transition: transform 150ms;
+	}
+
+	.accordion-header[data-open='true'] :global(.accordion-header-icon) {
+		transform: rotate(180deg);
+	}
+</style>

package/dist/components/Library/Accordion/Header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type AccordionState } from './context';
+type Props = {
+    children?: Snippet<[AccordionState]>;
+    label?: string;
+} & Omit<HTMLButtonAttributes, 'children' | 'class' | 'style'>;
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/components/Library/Accordion/context.d.ts

@@ -0,0 +1,9 @@
+export type AccordionState = {
+    get open(): boolean;
+    get disabled(): boolean;
+    toggle: () => void;
+    openPanel: () => void;
+    closePanel: () => void;
+};
+export declare const setAccordionContext: (context: AccordionState) => void;
+export declare const getAccordionContext: () => AccordionState;

package/dist/components/Library/Accordion/context.js

@@ -0,0 +1,6 @@
+import { getContext, setContext } from 'svelte';
+const accordionContextKey = Symbol('accordion');
+export const setAccordionContext = (context) => {
+    setContext(accordionContextKey, context);
+};
+export const getAccordionContext = () => getContext(accordionContextKey);

package/dist/components/Library/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import AccordionComponent from './Accordion.svelte';
+import Header from './Header.svelte';
+import Content from './Content.svelte';
+declare const Accordion: typeof AccordionComponent & {
+    Header: typeof Header;
+    Content: typeof Content;
+};
+export default Accordion;
+export type { AccordionState } from './context';

package/dist/components/Library/Accordion/index.js

@@ -0,0 +1,7 @@
+import AccordionComponent from './Accordion.svelte';
+import Header from './Header.svelte';
+import Content from './Content.svelte';
+const Accordion = AccordionComponent;
+Accordion.Header = Header;
+Accordion.Content = Content;
+export default Accordion;

package/dist/components/Library/AnimatedNumber/AnimatedNumber.demo.svelte

@@ -17,7 +17,7 @@
 	};
 </script>
 
-<VStack align="center" justify="center" gap={7.5}>
+<VStack gap={7.5}>
 	<div class="text-3xl font-semibold text-[var(--sveltely-text-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>

package/dist/components/Library/ArticleEditor/ArticleEditor.svelte

@@ -115,8 +115,7 @@
 <svelte:window onkeydown={handleGlobalKeyDown} />
 
 <VStack
-	width="100%"
-	maxWidth="860px"
+	width="860px"
 	gap={25}
 	paddingX={35}
 	paddingY={25}

package/dist/components/Library/ArticleEditor/Blocks/Table.svelte

@@ -78,7 +78,7 @@
 					minWidth={180}
 				>
 					{#snippet header()}
-						<HStack width="100%" align="center" gap={5}>
+						<HStack width="100%" gap={5}>
 							<input
 								class="article-block-table-header-input"
 								value={block.columns?.[columnIndex] ?? ''}

package/dist/components/Library/ChipInput/ChipInput.demo.svelte

@@ -12,7 +12,7 @@
 	let tags = $state(['svelte', 'ui', 'search']);
 </script>
 
-<VStack width="100%" maxWidth="24rem" gap={5}>
+<VStack width="24rem" gap={5}>
 	<ChipInput bind:tags />
 	<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Tags: {tags.join(', ')}</p>
 </VStack>

package/dist/components/Library/Dropdown/Dropdown.demo.svelte

@@ -123,7 +123,7 @@
 			{#snippet trigger()}
 				<Dropdown.Trigger>
 					{#if selectedWebsite}
-						<HStack minWidth={0} align="center" gap={5}>
+						<HStack gap={5}>
 							<span class="truncate text-[var(--sveltely-text-primary-color)]"
 								>{selectedWebsite.name}</span
 							>
@@ -166,7 +166,7 @@
 								{#each visibleWebsites as website (website.id)}
 									<Dropdown.Item value={website.id}>
 										{#snippet children({ selected })}
-											<VStack minWidth={0} gap={1.25}>
+											<VStack gap={1.25}>
 												<span class="truncate">{website.name}</span>
 												{#if website.domain}
 													<span class="truncate text-xs text-[var(--sveltely-text-secondary-color)]"
@@ -189,6 +189,8 @@
 				{/if}
 			</Dropdown.Section>
 		</Dropdown>
-		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">Actions clicked: {actionCount}</p>
+		<p class="text-xs text-[var(--sveltely-text-secondary-color)]">
+			Actions clicked: {actionCount}
+		</p>
 	</VStack>
 </Grid>

package/dist/components/Library/Grid/Grid.demo.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+	type Tile = {
+		id: number;
+		title: string;
+		tone: string;
+	};
+
+	export const demo = {
+		name: 'Grid',
+		description: 'Virtualized fixed-size grid powered by the viewport layout engine.',
+		columnSpan: 2,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import Grid from './index';
+
+	const tones = ['#2563eb', '#16a34a', '#d97706', '#db2777'];
+	const tiles: Tile[] = Array.from({ length: 400 }, (_, index) => ({
+		id: index + 1,
+		title: `Tile ${index + 1}`,
+		tone: tones[index % tones.length]
+	}));
+</script>
+
+{#snippet tile(item: Tile)}
+	<div class="grid-demo-tile" style:--grid-demo-tone={item.tone}>
+		<span>{item.title}</span>
+	</div>
+{/snippet}
+
+<Grid
+	items={tiles}
+	item={tile}
+	columns={4}
+	columnWidth={120}
+	rowHeight={84}
+	columnGap={8}
+	rowGap={8}
+	overscan={96}
+	height="100%"
+/>
+
+<style>
+	.grid-demo-tile {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		border: 1px solid color-mix(in oklab, var(--grid-demo-tone) 24%, transparent);
+		border-radius: var(--sveltely-border-radius-nested);
+		background: color-mix(in oklab, var(--grid-demo-tone) 10%, var(--sveltely-background-color));
+		padding: 0.75rem;
+		color: var(--sveltely-text-primary-color);
+		font-size: 0.85rem;
+		font-weight: 600;
+	}
+</style>

package/dist/components/Library/Grid/Grid.demo.svelte.d.ts

@@ -0,0 +1,25 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import Grid from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Grid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Grid = InstanceType<typeof Grid>;
+export default Grid;