@x33025/sveltely 0.1.17 → 0.1.19

package/dist/components/Local/HeroCard.svelte

@@ -25,16 +25,16 @@
 	paddingY={15}
 >
 	{#if title}
-		<h1 class="text-3xl font-semibold tracking-tight text-[var(--sveltely-primary-color)]">
+		<h1 class="text-3xl font-semibold tracking-tight text-[var(--sveltely-text-primary-color)]">
 			{title}
 		</h1>
 		{#if description}
-			<p class="max-w-3xl text-sm text-[var(--sveltely-secondary-color)]">{description}</p>
+			<p class="max-w-3xl text-sm text-[var(--sveltely-text-secondary-color)]">{description}</p>
 		{/if}
 	{/if}
 	<div class="hero-card-content">
 		{#if children}
-			<HStack minWidth="min-content" minHeight="100%" align="center" justify="center">
+			<HStack width="100%" height="100%" minWidth="min-content" align="center" justify="center">
 				{@render children()}
 			</HStack>
 		{/if}

package/dist/components/Local/LayoutStyleControls.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import Slider from '../Library/Slider';
+	import VStack from '../Library/VStack';
+
+	type Props = {
+		fontSize?: number;
+		borderRadius?: number;
+		paddingX?: number;
+		paddingY?: number;
+		gap?: number;
+		inset?: number;
+	};
+
+	let {
+		fontSize = $bindable(10),
+		borderRadius = $bindable(7.5),
+		paddingX = $bindable(7.5),
+		paddingY = $bindable(7.5),
+		gap = $bindable(5),
+		inset = $bindable(2.5)
+	}: Props = $props();
+</script>
+
+<VStack gap={5}>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Font size</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{fontSize.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={fontSize} min={5} max={20} step={0.5} />
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Border radius</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{borderRadius.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={borderRadius} min={0} max={30} step={0.5} />
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Padding X</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingX.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={paddingX} min={0} max={20} step="any" />
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Padding Y</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{paddingY.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={paddingY} min={0} max={20} step="any" />
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Gap</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{gap.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={gap} min={0} max={20} step="any" />
+	</div>
+	<div class="vstack gap-2">
+		<div class="hstack items-center justify-between gap-3">
+			<span class="font-medium">Inset</span>
+			<span class="text-[var(--sveltely-text-secondary-color)]">{inset.toFixed(1)}</span>
+		</div>
+		<Slider bind:value={inset} min={0} max={10} step="any" />
+	</div>
+</VStack>

package/dist/components/Local/LayoutStyleControls.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    fontSize?: number;
+    borderRadius?: number;
+    paddingX?: number;
+    paddingY?: number;
+    gap?: number;
+    inset?: number;
+};
+declare const LayoutStyleControls: import("svelte").Component<Props, {}, "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY">;
+type LayoutStyleControls = ReturnType<typeof LayoutStyleControls>;
+export default LayoutStyleControls;

package/dist/components/Local/StyleControls.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-	import Slider from '../Library/Slider';
+	import ColorStyleControls from './ColorStyleControls.svelte';
+	import LayoutStyleControls from './LayoutStyleControls.svelte';
+	import SegmentedPicker from '../Library/SegmentedPicker';
+	import VStack from '../Library/VStack';
+
+	type Panel = 'layout' | 'colors';
 
 	type Props = {
 		fontSize?: number;
@@ -9,11 +14,13 @@
 		gap?: number;
 		inset?: number;
 		borderColor?: string;
-		primaryColor?: string;
-		secondaryColor?: string;
-		activeColor?: string;
-		inactiveColor?: string;
+		textPrimaryColor?: string;
+		textSecondaryColor?: string;
+		textTertiaryColor?: string;
 		backgroundColor?: string;
+		controlActiveColor?: string;
+		controlInactiveColor?: string;
+		controlBackgroundColor?: string;
 	};
 
 	let {
@@ -24,127 +31,44 @@
 		gap = $bindable(5),
 		inset = $bindable(2.5),
 		borderColor = $bindable('#e4e4e7'),
-		primaryColor = $bindable('#18181b'),
-		secondaryColor = $bindable('#71717a'),
-		activeColor = $bindable('#18181b'),
-		inactiveColor = $bindable('#f4f4f5'),
-		backgroundColor = $bindable('#ffffff')
+		textPrimaryColor = $bindable('#18181b'),
+		textSecondaryColor = $bindable('#71717a'),
+		textTertiaryColor = $bindable('#a1a1aa'),
+		backgroundColor = $bindable('#ffffff'),
+		controlActiveColor = $bindable('#18181b'),
+		controlInactiveColor = $bindable('#f4f4f5'),
+		controlBackgroundColor = $bindable('#fafafa')
 	}: Props = $props();
+
+	const panelOptions = [
+		{ label: 'Layout', value: 'layout' },
+		{ label: 'Colors', value: 'colors' }
+	];
+
+	let panel = $state<Panel>('layout');
 </script>
 
-<div
-	class="vstack gap-3 text-sm text-[var(--sveltely-primary-color)]"
-	style="--sveltely-border-radius: 0.75rem;"
->
-	<div class="font-semibold tracking-wide text-[var(--sveltely-secondary-color)] uppercase">
-		Controls
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Font size</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{fontSize.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={fontSize} min={5} max={20} step={0.5} />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Border radius</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{borderRadius.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={borderRadius} min={0} max={30} step={0.5} />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Padding X</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{paddingX.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={paddingX} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Padding Y</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{paddingY.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={paddingY} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Gap</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{gap.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={gap} min={0} max={20} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Inset</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{inset.toFixed(1)}</span>
-		</div>
-		<Slider bind:value={inset} min={0} max={10} step="any" />
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Primary color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{primaryColor}</span>
-		</div>
-		<input
-			bind:value={primaryColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
-		/>
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Secondary color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{secondaryColor}</span>
-		</div>
-		<input
-			bind:value={secondaryColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
-		/>
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Background color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{backgroundColor}</span>
-		</div>
-		<input
-			bind:value={backgroundColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
-		/>
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Border color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{borderColor}</span>
-		</div>
-		<input
-			bind:value={borderColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
-		/>
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Active color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{activeColor}</span>
-		</div>
-		<input
-			bind:value={activeColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+<VStack gap={7.5} fontSize={8.75} color="var(--sveltely-text-primary-color)">
+	<SegmentedPicker options={panelOptions} bind:value={panel} />
+	{#if panel === 'layout'}
+		<LayoutStyleControls
+			bind:fontSize
+			bind:borderRadius
+			bind:paddingX
+			bind:paddingY
+			bind:gap
+			bind:inset
 		/>
-	</div>
-	<div class="vstack gap-2">
-		<div class="hstack items-center justify-between gap-3">
-			<span class="font-medium">Inactive color</span>
-			<span class="text-[var(--sveltely-secondary-color)]">{inactiveColor}</span>
-		</div>
-		<input
-			bind:value={inactiveColor}
-			type="color"
-			class="h-10 w-full cursor-pointer rounded-md border border-zinc-200 bg-white p-1"
+	{:else}
+		<ColorStyleControls
+			bind:borderColor
+			bind:textPrimaryColor
+			bind:textSecondaryColor
+			bind:textTertiaryColor
+			bind:backgroundColor
+			bind:controlActiveColor
+			bind:controlInactiveColor
+			bind:controlBackgroundColor
 		/>
-	</div>
-</div>
+	{/if}
+</VStack>

package/dist/components/Local/StyleControls.svelte.d.ts

@@ -6,12 +6,14 @@ type Props = {
     gap?: number;
     inset?: number;
     borderColor?: string;
-    primaryColor?: string;
-    secondaryColor?: string;
-    activeColor?: string;
-    inactiveColor?: string;
+    textPrimaryColor?: string;
+    textSecondaryColor?: string;
+    textTertiaryColor?: string;
     backgroundColor?: string;
+    controlActiveColor?: string;
+    controlInactiveColor?: string;
+    controlBackgroundColor?: string;
 };
-declare const StyleControls: import("svelte").Component<Props, {}, "backgroundColor" | "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "primaryColor" | "secondaryColor" | "activeColor" | "inactiveColor">;
+declare const StyleControls: import("svelte").Component<Props, {}, "backgroundColor" | "borderColor" | "borderRadius" | "fontSize" | "gap" | "inset" | "paddingX" | "paddingY" | "textPrimaryColor" | "textSecondaryColor" | "textTertiaryColor" | "controlActiveColor" | "controlInactiveColor" | "controlBackgroundColor">;
 type StyleControls = ReturnType<typeof StyleControls>;
 export default StyleControls;

package/dist/index.d.ts

@@ -13,8 +13,11 @@ export { ImageFit, ImageLoading } from './style/media';
 export type { ImageFitValue, ImageLoadingValue } from './style/media';
 export { ScrollAxis } from './style/scroll';
 export type { ScrollAxisValue } from './style/scroll';
-export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
-export type { TextAlignmentValue, TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
+export { TextAlignment, TextAs } from './style/text';
+export type { TextAlignmentValue, TextAsValue, TextProps } from './style/text';
+export { TextFieldType, TextInputMode } from './style/text-editor';
+export type { TextEditorProps, TextFieldTypeValue, TextInputModeValue } from './style/text-editor';
+export type { TooltipProps } from './style/tooltip';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -24,6 +27,7 @@ export { default as Grid } from './components/Library/Grid';
 export { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
+export { ImagePlaceholder } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
 export type { ImageMaskValue } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
@@ -43,6 +47,9 @@ export { default as Sheet } from './components/Library/Sheet';
 export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as Table } from './components/Library/Table';
+export type { TableColumn, TableColumnAlignment, TableColumnCustomization, TableColumnHeaderVisibility, TableRowKey, TableSelection, TableSelectionMode, TableSpanValue, TableSortDescriptor, TableSortDirection } from './components/Library/Table';
+export { default as Text } from './components/Library/Text';
 export { default as TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';

package/dist/index.js

@@ -6,7 +6,8 @@ export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';
 export { ScrollAxis } from './style/scroll';
-export { TextAlignment, TextFieldType, TextInputMode } from './style/text-editor';
+export { TextAlignment, TextAs } from './style/text';
+export { TextFieldType, TextInputMode } from './style/text-editor';
 export { default as AnimatedNumber } from './components/Library/AnimatedNumber';
 export * from './components/Library/ArticleEditor';
 export { default as Button } from './components/Library/Button';
@@ -16,6 +17,7 @@ export { default as Grid } from './components/Library/Grid';
 export { GridItem } from './components/Library/Grid';
 export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
+export { ImagePlaceholder } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
 export { default as Link } from './components/Library/Link';
@@ -34,6 +36,8 @@ export { default as Sheet } from './components/Library/Sheet';
 export { default as Spacer } from './components/Library/Spacer';
 export { default as Spinner } from './components/Library/Spinner';
 export { default as TextShimmer } from './components/Library/TextShimmer';
+export { default as Table } from './components/Library/Table';
+export { default as Text } from './components/Library/Text';
 export { default as TextEditor } from './components/Library/TextEditor';
 export { default as TextField } from './components/Library/TextField';
 export { default as Popover } from './components/Library/Popover';

package/dist/style/index.css

@@ -12,14 +12,13 @@
 		--sveltely-padding-x: 0.75rem;
 		--sveltely-padding-y: 0.75rem;
 		--sveltely-gap: 0.5rem;
-		--sveltely-primary-color: var(--color-zinc-900);
-		--sveltely-secondary-color: var(--color-zinc-500);
-		--sveltely-active-color: var(--color-zinc-900);
-		--sveltely-inactive-color: var(--color-zinc-100);
+		--sveltely-text-primary-color: var(--color-zinc-900);
+		--sveltely-text-secondary-color: var(--color-zinc-500);
+		--sveltely-text-tertiary-color: var(--color-zinc-400);
 		--sveltely-background-color: white;
-		--sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
-		--sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
-		--sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
+		--sveltely-control-active-color: var(--color-zinc-900);
+		--sveltely-control-inactive-color: var(--color-zinc-100);
+		--sveltely-control-background-color: var(--color-zinc-50);
 		--sveltely-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
 		--sveltely-border-radius-nested: clamp(
 			0px,
@@ -33,7 +32,7 @@
 	body {
 		@apply size-full overflow-hidden;
 		background: var(--sveltely-background-color);
-		color: var(--sveltely-primary-color);
+		color: var(--sveltely-text-primary-color);
 		-webkit-user-select: none;
 		user-select: none;
 	}
@@ -53,10 +52,6 @@
 		background-clip: padding-box;
 	}
 
-	button {
-		cursor: pointer;
-	}
-
 	button:disabled {
 		cursor: not-allowed;
 	}

package/dist/style/label.d.ts

@@ -1,6 +1,7 @@
 export declare const LabelOrientation: {
     readonly top: "top";
-    readonly left: "left";
+    readonly leading: "leading";
+    readonly trailing: "trailing";
 };
 export type LabelOrientationValue = (typeof LabelOrientation)[keyof typeof LabelOrientation];
 export type LabelOrientation = LabelOrientationValue;

package/dist/style/label.js

@@ -1,4 +1,5 @@
 export const LabelOrientation = {
     top: 'top',
-    left: 'left'
+    leading: 'leading',
+    trailing: 'trailing'
 };

package/dist/style/surface.js

@@ -9,6 +9,7 @@ const STYLE_PROP_KEYS = new Set([
     'borderColor',
     'color'
 ]);
+const INTERNAL_STYLE_KEYS = new Set(['class', 'style']);
 const toRem = (value) => (value === undefined ? undefined : `${value / 10}rem`);
 const pushVar = (declarations, name, value) => {
     const resolved = toRem(value);
@@ -20,6 +21,9 @@ export const extractStyleProps = (props) => {
     const styleProps = {};
     const restProps = {};
     for (const [key, value] of Object.entries(props)) {
+        if (INTERNAL_STYLE_KEYS.has(key)) {
+            continue;
+        }
         if (STYLE_PROP_KEYS.has(key)) {
             styleProps[key] = value;
             continue;

package/dist/style/text-editor.d.ts

@@ -1,12 +1,5 @@
-export declare const TextAlignment: {
-    readonly left: "left";
-    readonly center: "center";
-    readonly right: "right";
-    readonly start: "start";
-    readonly end: "end";
-};
-export type TextAlignmentValue = (typeof TextAlignment)[keyof typeof TextAlignment];
-export type TextAlignment = TextAlignmentValue;
+export { TextAlignment, TextAs, textStyle as textEditorStyle } from './text';
+export type { TextAlignmentValue, TextAlignment, TextAsValue, TextAs, TextProps as TextEditorProps } from './text';
 export declare const TextInputMode: {
     readonly none: "none";
     readonly text: "text";
@@ -28,7 +21,3 @@ export type TextInputModeValue = (typeof TextInputMode)[keyof typeof TextInputMo
 export type TextFieldTypeValue = (typeof TextFieldType)[keyof typeof TextFieldType];
 export type TextInputMode = TextInputModeValue;
 export type TextFieldType = TextFieldTypeValue;
-export type TextEditorProps = {
-    textAlign?: TextAlignment;
-};
-export declare const textEditorStyle: (props?: TextEditorProps, prefix?: string) => string;

package/dist/style/text-editor.js

@@ -1,10 +1,4 @@
-export const TextAlignment = {
-    left: 'left',
-    center: 'center',
-    right: 'right',
-    start: 'start',
-    end: 'end'
-};
+export { TextAlignment, TextAs, textStyle as textEditorStyle } from './text';
 export const TextInputMode = {
     none: 'none',
     text: 'text',
@@ -22,8 +16,3 @@ export const TextFieldType = {
     url: 'url',
     tel: 'tel'
 };
-export const textEditorStyle = (props, prefix = 'text-field') => {
-    if (!props?.textAlign)
-        return '';
-    return `--${prefix}-text-align: ${props.textAlign};`;
-};

package/dist/style/text.d.ts

@@ -0,0 +1,26 @@
+export declare const TextAlignment: {
+    readonly left: "left";
+    readonly center: "center";
+    readonly right: "right";
+    readonly start: "start";
+    readonly end: "end";
+};
+export declare const TextAs: {
+    readonly h1: "h1";
+    readonly h2: "h2";
+    readonly h3: "h3";
+    readonly h4: "h4";
+    readonly h5: "h5";
+    readonly h6: "h6";
+    readonly paragraph: "paragraph";
+};
+export type TextAlignmentValue = (typeof TextAlignment)[keyof typeof TextAlignment];
+export type TextAlignment = TextAlignmentValue;
+export type TextAsValue = (typeof TextAs)[keyof typeof TextAs];
+export type TextAs = TextAsValue;
+export type TextProps = {
+    as?: TextAs;
+    textAlign?: TextAlignment;
+};
+export declare const textElementFor: (as?: TextAs) => "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+export declare const textStyle: (props?: TextProps, prefix?: string) => string;

package/dist/style/text.js

@@ -0,0 +1,69 @@
+export const TextAlignment = {
+    left: 'left',
+    center: 'center',
+    right: 'right',
+    start: 'start',
+    end: 'end'
+};
+export const TextAs = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    paragraph: 'paragraph'
+};
+const TEXT_METRICS = {
+    h1: {
+        fontSize: 'calc(var(--sveltely-font-size) * 2.25)',
+        fontWeight: '700',
+        lineHeight: '1.05'
+    },
+    h2: {
+        fontSize: 'calc(var(--sveltely-font-size) * 1.875)',
+        fontWeight: '700',
+        lineHeight: '1.1'
+    },
+    h3: {
+        fontSize: 'calc(var(--sveltely-font-size) * 1.5)',
+        fontWeight: '650',
+        lineHeight: '1.15'
+    },
+    h4: {
+        fontSize: 'calc(var(--sveltely-font-size) * 1.25)',
+        fontWeight: '650',
+        lineHeight: '1.2'
+    },
+    h5: {
+        fontSize: 'calc(var(--sveltely-font-size) * 1.125)',
+        fontWeight: '600',
+        lineHeight: '1.25'
+    },
+    h6: {
+        fontSize: 'var(--sveltely-font-size)',
+        fontWeight: '600',
+        lineHeight: '1.25'
+    },
+    paragraph: {
+        fontSize: 'var(--sveltely-font-size)',
+        fontWeight: '400',
+        lineHeight: '1.5'
+    }
+};
+export const textElementFor = (as) => {
+    if (!as)
+        return 'span';
+    return as === 'paragraph' ? 'p' : as;
+};
+export const textStyle = (props, prefix = 'text') => {
+    const declarations = [];
+    const metrics = TEXT_METRICS[props?.as ?? 'paragraph'];
+    declarations.push(`--${prefix}-font-size: ${metrics.fontSize};`);
+    declarations.push(`--${prefix}-font-weight: ${metrics.fontWeight};`);
+    declarations.push(`--${prefix}-line-height: ${metrics.lineHeight};`);
+    if (props?.textAlign) {
+        declarations.push(`--${prefix}-text-align: ${props.textAlign};`);
+    }
+    return declarations.join(' ');
+};

package/dist/style/tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipOptions } from '../actions/tooltip';
+export type TooltipProps = {
+    tooltip?: TooltipOptions | null;
+};

package/dist/style/tooltip.js

@@ -0,0 +1 @@
+export {};