@x33025/sveltely 0.1.23 → 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

@@ -8,6 +8,7 @@
 <script lang="ts">
 	import AnimatedNumber from './AnimatedNumber.svelte';
 	import Button from '../Button/Button.svelte';
+	import VStack from '../VStack';
 
 	let value = $state(1234);
 
@@ -16,9 +17,9 @@
 	};
 </script>
 
-<div class="vstack center gap-3">
+<VStack gap={7.5}>
 	<div class="text-3xl font-semibold text-[var(--sveltely-text-primary-color)]">
 		<AnimatedNumber {value} />
 	</div>
 	<Button label="Change number" onclick={bump} />
-</div>
+</VStack>

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}