sveltacular 1.0.9 → 1.0.11

package/dist/generic/header/header.svelte

@@ -4,6 +4,7 @@
 	import Headline from '../../typography/headline.svelte';
 	import Subtitle from '../../typography/subtitle.svelte';
 	import { getContext } from 'svelte';
+	import Paragraph from '../../typography/paragraph.svelte';
 
 	const section: { title: string; level: SectionLevel } | undefined = getContext('section');
 
@@ -11,14 +12,16 @@
 		level = (section?.level || 2) as SectionLevel,
 		title = section?.title || '',
 		subtitle = '',
+		description = '',
 		underline = false,
 		children = undefined
 	}: {
 		level?: SectionLevel;
-		title?: string;
-		subtitle?: string;
+		title?: string | undefined;
+		subtitle?: string | undefined;
+		description?: string | undefined;
 		underline?: boolean;
-		children?: Snippet;
+		children?: Snippet | undefined;
 	} = $props();
 </script>
 
@@ -28,6 +31,9 @@
 		{#if subtitle}
 			<Subtitle {level}>{subtitle}</Subtitle>
 		{/if}
+		{#if description}
+			<Paragraph>{description}</Paragraph>
+		{/if}
 	</hgroup>
 	<div>
 		{#if children}

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

@@ -2,10 +2,11 @@ import type { Snippet } from 'svelte';
 import type { SectionLevel } from '../../types/generic.js';
 type $$ComponentProps = {
     level?: SectionLevel;
-    title?: string;
-    subtitle?: string;
+    title?: string | undefined;
+    subtitle?: string | undefined;
+    description?: string | undefined;
     underline?: boolean;
-    children?: Snippet;
+    children?: Snippet | undefined;
 };
 declare const Header: import("svelte").Component<$$ComponentProps, {}, "">;
 type Header = ReturnType<typeof Header>;

package/dist/layout/flex-col.svelte

@@ -1,75 +1,106 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	let {
-		marginBottom = 0,
-		marginTop = 0,
-		gap = '1rem',
-		justifyContent = 'start' as
-			| 'start'
-			| 'center'
-			| 'end'
-			| 'between'
-			| 'around'
-			| 'evenly'
-			| 'stretch'
-			| 'baseline',
-		alignItems = 'stretch' as 'start' | 'center' | 'end' | 'stretch' | 'auto',
-		alignContent = 'stretch' as 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch',
-		children
-	}: {
-		marginBottom?: string | number;
-		marginTop?: string | number;
-		gap?: string | number;
-		justifyContent?:
-			| 'start'
-			| 'center'
-			| 'end'
-			| 'between'
-			| 'around'
-			| 'evenly'
-			| 'stretch'
-			| 'baseline';
-		alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
-		alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
+	type JustifyContent =
+		| 'flex-start'
+		| 'flex-end'
+		| 'center'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
+
+	type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+
+	type SpacingSize = 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl';
+
+	interface Props {
+		/** Content to display in the flex column */
 		children: Snippet;
-	} = $props();
+		/** Gap between items (standard size token or custom CSS value) */
+		gap?: SpacingSize | string | number;
+		/** Whether to wrap items to next line */
+		wrap?: boolean;
+		/** Justify content along the main axis */
+		justify?: JustifyContent;
+		/** Align items along the cross axis */
+		align?: AlignItems;
+		/** Whether to take full width (default: true) */
+		fullWidth?: boolean;
+		/** Margin on all sides (standard size token or custom CSS value) */
+		margin?: SpacingSize | string | number;
+		/** Top margin override (standard size token or custom CSS value) */
+		marginTop?: SpacingSize | string | number;
+		/** Bottom margin override (standard size token or custom CSS value) */
+		marginBottom?: SpacingSize | string | number;
+		/** Additional CSS classes */
+		class?: string;
+	}
 
-	let _marginTop = $derived(typeof marginTop === 'number' ? `${marginTop}px` : marginTop);
-	let _marginBottom = $derived(
-		typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom
-	);
-	let _justifyContent = $derived(
-		['start', 'end'].includes(justifyContent)
-			? `flex-${justifyContent}`
-			: ['between', 'around', 'evenly'].includes(justifyContent)
-				? `space-${justifyContent}`
-				: justifyContent
-	);
-	let _alignContent = $derived(
-		['start', 'end'].includes(alignContent)
-			? `flex-${alignContent}`
-			: ['between', 'around'].includes(alignContent)
-				? `space-${alignContent}`
-				: alignContent
+	const spacingTokenMap: Record<SpacingSize, string> = {
+		xs: 'var(--spacing-xs)',
+		sm: 'var(--spacing-sm)',
+		md: 'var(--spacing-md)',
+		base: 'var(--spacing-base)',
+		lg: 'var(--spacing-lg)',
+		xl: 'var(--spacing-xl)',
+		'2xl': 'var(--spacing-2xl)'
+	};
+
+	const normalizeSpacing = (value: SpacingSize | string | number | undefined): string | undefined => {
+		if (value === undefined) return undefined;
+		if (typeof value === 'number') return `${value}px`;
+		if (value in spacingTokenMap) return spacingTokenMap[value as SpacingSize];
+		return value;
+	};
+
+	let {
+		children,
+		gap = 'base',
+		wrap = false,
+		justify = 'flex-start',
+		align = 'stretch',
+		fullWidth = true,
+		margin,
+		marginTop,
+		marginBottom,
+		class: className = ''
+	}: Props = $props();
+
+	const gapValue = $derived(normalizeSpacing(gap) ?? 'var(--spacing-base)');
+	const marginValue = $derived(normalizeSpacing(margin));
+	const marginTopValue = $derived(
+		marginTop !== undefined ? normalizeSpacing(marginTop) : marginValue
 	);
-	let _alignItems = $derived(
-		['start', 'end'].includes(alignItems) ? `flex-${alignItems}` : alignItems
+	const marginBottomValue = $derived(
+		marginBottom !== undefined ? normalizeSpacing(marginBottom) : marginValue
 	);
-	let _gap = $derived(typeof gap === 'number' ? `${gap}px` : gap);
 </script>
 
 <div
-	style={`
-	margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; 
-	gap: ${_gap}; justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent}
-`}
+	class="flex-col {wrap ? 'wrap' : ''} {!fullWidth ? 'auto-width' : ''} {className}"
+	style="
+		--gap: {gapValue};
+		--justify: {justify};
+		--align: {align};
+		{marginTopValue ? `margin-top: ${marginTopValue};` : ''}
+		{marginBottomValue ? `margin-bottom: ${marginBottomValue};` : ''}
+	"
 >
-	{@render children?.()}
+	{@render children()}
 </div>
 
-<style>div {
+<style>.flex-col {
   display: flex;
   flex-direction: column;
   width: 100%;
+  gap: var(--gap, var(--spacing-base));
+  justify-content: var(--justify, flex-start);
+  align-items: var(--align, stretch);
+  flex-wrap: nowrap;
+}
+.flex-col.wrap {
+  flex-wrap: wrap;
+}
+.flex-col.auto-width {
+  width: auto;
 }</style>

package/dist/layout/flex-col.svelte.d.ts

@@ -1,13 +1,29 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    marginBottom?: string | number;
-    marginTop?: string | number;
-    gap?: string | number;
-    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch' | 'baseline';
-    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
-    alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type SpacingSize = 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl';
+interface Props {
+    /** Content to display in the flex column */
     children: Snippet;
-};
-declare const FlexCol: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Gap between items (standard size token or custom CSS value) */
+    gap?: SpacingSize | string | number;
+    /** Whether to wrap items to next line */
+    wrap?: boolean;
+    /** Justify content along the main axis */
+    justify?: JustifyContent;
+    /** Align items along the cross axis */
+    align?: AlignItems;
+    /** Whether to take full width (default: true) */
+    fullWidth?: boolean;
+    /** Margin on all sides (standard size token or custom CSS value) */
+    margin?: SpacingSize | string | number;
+    /** Top margin override (standard size token or custom CSS value) */
+    marginTop?: SpacingSize | string | number;
+    /** Bottom margin override (standard size token or custom CSS value) */
+    marginBottom?: SpacingSize | string | number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FlexCol: import("svelte").Component<Props, {}, "">;
 type FlexCol = ReturnType<typeof FlexCol>;
 export default FlexCol;

package/dist/layout/flex-item.svelte

@@ -1,17 +1,39 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
+	type AlignSelf = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'auto';
+
+	interface Props {
+		/** Content to display in the flex item */
+		children: Snippet;
+		/** Whether the item should grow to fill available space */
+		grow?: boolean;
+		/** Align this item along the cross axis */
+		align?: AlignSelf;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
 	let {
+		children,
 		grow = false,
 		align = 'auto',
-		children
-	}: {
-		grow?: boolean;
-		align?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
-		children: Snippet;
-	} = $props();
+		class: className = ''
+	}: Props = $props();
+
 </script>
 
-<div style={`flex: ${grow ? 1 : 0}; align-self: ${align}`}>
-	{@render children?.()}
+<div
+	class="flex-item {grow ? 'grow' : ''} {className}"
+	style="
+		--align-self: {align};
+		flex: {grow ? 1 : 0};
+		align-self: var(--align-self);
+	"
+>
+	{@render children()}
 </div>
+
+<style>.flex-item {
+  display: block;
+}</style>

package/dist/layout/flex-item.svelte.d.ts

@@ -1,9 +1,15 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    grow?: boolean;
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
+type AlignSelf = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'auto';
+interface Props {
+    /** Content to display in the flex item */
     children: Snippet;
-};
-declare const FlexItem: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Whether the item should grow to fill available space */
+    grow?: boolean;
+    /** Align this item along the cross axis */
+    align?: AlignSelf;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FlexItem: import("svelte").Component<Props, {}, "">;
 type FlexItem = ReturnType<typeof FlexItem>;
 export default FlexItem;

package/dist/layout/flex-row.svelte

@@ -1,93 +1,108 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
+	type JustifyContent =
+		| 'flex-start'
+		| 'flex-end'
+		| 'center'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
+
+	type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+
+	type SpacingSize = 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl';
+
+	interface Props {
+		/** Content to display in the flex row */
+		children: Snippet;
+		/** Gap between items (standard size token or custom CSS value) */
+		gap?: SpacingSize | string | number;
+		/** Whether to wrap items to next line */
+		wrap?: boolean;
+		/** Justify content along the main axis */
+		justify?: JustifyContent;
+		/** Align items along the cross axis */
+		align?: AlignItems;
+		/** Whether to take full width (default: true) */
+		fullWidth?: boolean;
+		/** Margin on all sides (standard size token or custom CSS value) */
+		margin?: SpacingSize | string | number;
+		/** Top margin override (standard size token or custom CSS value) */
+		marginTop?: SpacingSize | string | number;
+		/** Bottom margin override (standard size token or custom CSS value) */
+		marginBottom?: SpacingSize | string | number;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	const spacingTokenMap: Record<SpacingSize, string> = {
+		xs: 'var(--spacing-xs)',
+		sm: 'var(--spacing-sm)',
+		md: 'var(--spacing-md)',
+		base: 'var(--spacing-base)',
+		lg: 'var(--spacing-lg)',
+		xl: 'var(--spacing-xl)',
+		'2xl': 'var(--spacing-2xl)'
+	};
+
+	const normalizeSpacing = (
+		value: SpacingSize | string | number | undefined
+	): string | undefined => {
+		if (value === undefined) return undefined;
+		if (typeof value === 'number') return `${value}px`;
+		if (value in spacingTokenMap) return spacingTokenMap[value as SpacingSize];
+		return value;
+	};
+
 	let {
-		marginBottom = 0,
-		marginTop = 0,
-		gap = '1rem',
-		size = 'full' as 'auto' | 'full',
+		children,
+		gap = 'base',
 		wrap = false,
-		justifyContent = 'space-between' as
-			| 'start'
-			| 'center'
-			| 'end'
-			| 'space-between'
-			| 'space-around'
-			| 'space-evenly'
-			| 'stretch'
-			| 'baseline',
-		alignItems = 'stretch' as 'start' | 'center' | 'end' | 'stretch' | 'auto',
-		alignContent = 'stretch' as
-			| 'start'
-			| 'center'
-			| 'end'
-			| 'space-between'
-			| 'space-around'
-			| 'stretch',
-		children
-	}: {
-		marginBottom?: string | number;
-		marginTop?: string | number;
-		gap?: string | number;
-		size?: 'auto' | 'full';
-		wrap?: boolean;
-		justifyContent?:
-			| 'start'
-			| 'center'
-			| 'end'
-			| 'space-between'
-			| 'space-around'
-			| 'space-evenly'
-			| 'stretch'
-			| 'baseline';
-		alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
-		alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
-		children: Snippet;
-	} = $props();
+		justify = 'flex-start',
+		align = 'stretch',
+		fullWidth = true,
+		margin,
+		marginTop,
+		marginBottom,
+		class: className = ''
+	}: Props = $props();
 
-	let _marginTop = $derived(typeof marginTop === 'number' ? `${marginTop}px` : marginTop);
-	let _marginBottom = $derived(
-		typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom
-	);
-	let _justifyContent = $derived(
-		['start', 'end'].includes(justifyContent)
-			? `flex-${justifyContent}`
-			: ['between', 'around', 'evenly'].includes(justifyContent)
-				? `space-${justifyContent}`
-				: justifyContent
-	);
-	let _alignContent = $derived(
-		['start', 'end'].includes(alignContent)
-			? `flex-${alignContent}`
-			: ['between', 'around'].includes(alignContent)
-				? `space-${alignContent}`
-				: alignContent
+	const gapValue = $derived(normalizeSpacing(gap) ?? 'var(--spacing-base)');
+	const marginValue = $derived(normalizeSpacing(margin));
+	const marginTopValue = $derived(
+		marginTop !== undefined ? normalizeSpacing(marginTop) : marginValue
 	);
-	let _alignItems = $derived(
-		['start', 'end'].includes(alignItems) ? `flex-${alignItems}` : alignItems
+	const marginBottomValue = $derived(
+		marginBottom !== undefined ? normalizeSpacing(marginBottom) : marginValue
 	);
-	let _gap = $derived(typeof gap === 'number' ? `${gap}px` : gap);
 </script>
 
 <div
-	style={`
-		margin-top: ${_marginTop}; margin-bottom: ${_marginBottom}; gap: ${_gap}; 
-		justify-content: ${_justifyContent}; align-items: ${_alignItems}; align-content: ${_alignContent};
-	`}
-	class="size-{size} {wrap ? 'wrap' : 'nowrap'}"
+	class="flex-row {wrap ? 'wrap' : ''} {!fullWidth ? 'auto-width' : ''} {className}"
+	style="
+		--gap: {gapValue};
+		--justify: {justify};
+		--align: {align};
+		{marginTopValue ? `margin-top: ${marginTopValue};` : ''}
+		{marginBottomValue ? `margin-bottom: ${marginBottomValue};` : ''}
+	"
 >
-	{@render children?.()}
+	{@render children()}
 </div>
 
-<style>div {
+<style>.flex-row {
   display: flex;
+  flex-direction: row;
   width: 100%;
+  gap: var(--gap, var(--spacing-base));
+  justify-content: var(--justify, flex-start);
+  align-items: var(--align, stretch);
   flex-wrap: nowrap;
-  column-gap: 1rem;
 }
-div.size-auto {
-  width: auto;
-}
-div.wrap {
+.flex-row.wrap {
   flex-wrap: wrap;
+}
+.flex-row.auto-width {
+  width: auto;
 }</style>

package/dist/layout/flex-row.svelte.d.ts

@@ -1,15 +1,29 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
-    marginBottom?: string | number;
-    marginTop?: string | number;
-    gap?: string | number;
-    size?: 'auto' | 'full';
-    wrap?: boolean;
-    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline';
-    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'auto';
-    alignContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch';
+type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type SpacingSize = 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl';
+interface Props {
+    /** Content to display in the flex row */
     children: Snippet;
-};
-declare const FlexRow: import("svelte").Component<$$ComponentProps, {}, "">;
+    /** Gap between items (standard size token or custom CSS value) */
+    gap?: SpacingSize | string | number;
+    /** Whether to wrap items to next line */
+    wrap?: boolean;
+    /** Justify content along the main axis */
+    justify?: JustifyContent;
+    /** Align items along the cross axis */
+    align?: AlignItems;
+    /** Whether to take full width (default: true) */
+    fullWidth?: boolean;
+    /** Margin on all sides (standard size token or custom CSS value) */
+    margin?: SpacingSize | string | number;
+    /** Top margin override (standard size token or custom CSS value) */
+    marginTop?: SpacingSize | string | number;
+    /** Bottom margin override (standard size token or custom CSS value) */
+    marginBottom?: SpacingSize | string | number;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const FlexRow: import("svelte").Component<Props, {}, "">;
 type FlexRow = ReturnType<typeof FlexRow>;
 export default FlexRow;

package/dist/layout/index.d.ts

@@ -2,3 +2,4 @@ export { default as FlexCol } from './flex-col.svelte';
 export { default as FlexRow } from './flex-row.svelte';
 export { default as FlexItem } from './flex-item.svelte';
 export { default as Grid } from './grid.svelte';
+export { default as Main } from './main/main.svelte';

package/dist/layout/index.js

@@ -2,3 +2,4 @@ export { default as FlexCol } from './flex-col.svelte';
 export { default as FlexRow } from './flex-row.svelte';
 export { default as FlexItem } from './flex-item.svelte';
 export { default as Grid } from './grid.svelte';
+export { default as Main } from './main/main.svelte';

package/dist/layout/main/main.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		children
+	}: {
+		children: Snippet;
+	} = $props();
+</script>
+
+<main>
+	<a
+		id="top"
+		aria-hidden="true"
+		style="position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+	></a>
+	{@render children?.()}
+</main>
+
+<style>/* ============================================
+   BREAKPOINTS - Responsive Design
+   ============================================ */
+main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  max-width: 1000px; /* Desktop: good for 1366px-1920px screens */
+  margin: 0 auto;
+  padding: 0 var(--spacing-base, 1rem);
+  /* Improve touch scrolling on iOS */
+  -webkit-overflow-scrolling: touch;
+  overflow-x: hidden; /* Prevent horizontal scroll */
+  /* Responsive padding for larger screens */
+}
+@media (min-width: 641px) {
+  main {
+    padding: 0 var(--spacing-xl, 2rem);
+  }
+}
+main {
+  /* Increase max-width on large screens to better utilize space */
+  /* 1440px provides good readability while using more of the screen */
+}
+@media (min-width: 1280px) {
+  main {
+    max-width: 1440px;
+  }
+}
+main {
+  /* Add extra bottom padding on mobile for better UX */
+}
+@media (max-width: 319.98px) {
+  main {
+    padding-bottom: 2rem;
+  }
+}</style>

package/dist/layout/main/main.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const Main: import("svelte").Component<$$ComponentProps, {}, "">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/modals/dialog-footer.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <footer>
-	<FlexRow justifyContent="stretch">
+	<FlexRow justify="flex-end" gap="md">
 		{@render children?.()}
 	</FlexRow>
 </footer>

package/dist/navigation/accordion/accordion.svelte

@@ -56,9 +56,14 @@
 <style>.accordion {
   background: #eee;
   color: #000;
-  max-height: 3rem;
-  transition: max-height 1s ease;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: fit-content;
+}
+.accordion h3 {
+  margin: 0;
+  padding: 0;
 }
 .accordion button {
   appearance: none;
@@ -72,12 +77,15 @@
   justify-content: space-between;
   align-items: center;
   font-size: 1rem;
+  box-sizing: border-box;
+  min-height: fit-content;
 }
 .accordion button .icon {
   width: 1rem;
   height: 1rem;
   display: block;
   transition: transform 0.3s linear;
+  flex-shrink: 0;
 }
 .accordion button:hover {
   background: #ccc;
@@ -86,12 +94,12 @@
   padding: 1rem;
   opacity: 0;
   transition: opacity 0.3s linear;
-}
-.accordion.expanded {
-  max-height: 800px;
+  max-height: 0;
+  overflow: hidden;
 }
 .accordion.expanded .menu {
   opacity: 1;
+  max-height: none;
 }
 .accordion.expanded .icon {
   transform: rotate(180deg);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.9",
+	"version": "1.0.11",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",