@x33025/sveltely 0.1.15 → 0.1.16

package/dist/components/Library/Link/Link.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import { extractStyleProps, surfaceStyle, type StyleProps } from '../../../style/surface';
+
+	type Props = {
+		children?: Snippet;
+		label?: string;
+	} & StyleProps &
+		Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
+			class?: HTMLAnchorAttributes['class'];
+		};
+
+	let { children, label, class: className = '', ...restProps }: Props = $props();
+
+	const extractedStyleProps = $derived.by(() => extractStyleProps(restProps));
+	const styleProps = $derived(extractedStyleProps.styleProps);
+	const props = $derived(extractedStyleProps.restProps);
+	const rootStyle = $derived.by(() => surfaceStyle(styleProps, 'link'));
+</script>
+
+<a class="link {className}" style={rootStyle} {...props}>
+	{#if children}
+		{@render children()}
+	{:else if label}
+		<span>{label}</span>
+	{/if}
+</a>
+
+<style>
+	.link {
+		--link-font-size: var(--sveltely-font-size);
+		--link-icon-size: calc(var(--link-font-size) * 1.143);
+		display: inline-flex;
+		min-width: 0;
+		align-items: center;
+		gap: var(--link-gap, calc(var(--sveltely-gap) * 0.75));
+		border-radius: var(--link-border-radius, var(--sveltely-border-radius-nested));
+		color: var(--link-color, var(--sveltely-active-color));
+		font-size: var(--link-font-size);
+		line-height: 1.25;
+		text-decoration: none;
+		text-underline-offset: 0.18em;
+		transition:
+			color 150ms,
+			background-color 150ms,
+			text-decoration-color 150ms;
+	}
+
+	.link:hover {
+		color: var(--link-hover-color, var(--sveltely-active-color));
+		text-decoration-line: underline;
+		text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
+	}
+
+	.link:focus-visible {
+		outline: 2px solid color-mix(in oklab, var(--sveltely-active-color) 24%, white);
+		outline-offset: 2px;
+	}
+
+	.link :global(svg) {
+		width: var(--link-icon-size);
+		height: var(--link-icon-size);
+		flex-shrink: 0;
+	}
+
+	.link :global(span) {
+		min-width: 0;
+	}
+</style>

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

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

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

@@ -0,0 +1 @@
+export { default } from './Link.svelte';

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

@@ -0,0 +1 @@
+export { default } from './Link.svelte';

package/dist/components/Library/{NavigationLink/NavigationLink.svelte.d.ts → NavigationStack/Link.svelte.d.ts}

@@ -8,6 +8,6 @@ type Props = {
 } & StyleProps & Omit<HTMLAnchorAttributes, 'children' | 'class' | 'style'> & {
     class?: HTMLAnchorAttributes['class'];
 };
-declare const NavigationLink: import("svelte").Component<Props, {}, "">;
-type NavigationLink = ReturnType<typeof NavigationLink>;
-export default NavigationLink;
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

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

@@ -1,7 +1,9 @@
 import NavigationStackComponent from './NavigationStack.svelte';
+import Link from './Link.svelte';
 import Toolbar from './Toolbar.svelte';
 import SidebarToggle from './SidebarToggle.svelte';
 declare const NavigationStack: typeof NavigationStackComponent & {
+    Link: typeof Link;
     Toolbar: typeof Toolbar;
     SidebarToggle: typeof SidebarToggle;
 };

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

@@ -1,8 +1,10 @@
 import NavigationStackComponent from './NavigationStack.svelte';
+import Link from './Link.svelte';
 import Toolbar from './Toolbar.svelte';
 import SidebarToggle from './SidebarToggle.svelte';
-// Attach subcomponents for NavigationStack.Toolbar/SidebarToggle syntax
+// Attach subcomponents for NavigationStack.Link/Toolbar/SidebarToggle syntax
 const NavigationStack = NavigationStackComponent;
+NavigationStack.Link = Link;
 NavigationStack.Toolbar = Toolbar;
 NavigationStack.SidebarToggle = SidebarToggle;
 export default NavigationStack;

package/dist/index.d.ts

@@ -27,7 +27,7 @@ export { default as Image } 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';
-export { default as NavigationLink } from './components/Library/NavigationLink';
+export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';

package/dist/index.js

@@ -18,7 +18,7 @@ export { default as HStack } from './components/Library/HStack';
 export { default as Image } from './components/Library/Image';
 export { default as ImageMask } from './components/Library/ImageMask';
 export { default as Label } from './components/Library/Label';
-export { default as NavigationLink } from './components/Library/NavigationLink';
+export { default as Link } from './components/Library/Link';
 export { default as NavigationStack } from './components/Library/NavigationStack';
 export { default as NumberField } from './components/Library/NumberField';
 export { default as SegmentedPicker } from './components/Library/SegmentedPicker';

package/dist/style/index.css

@@ -12,17 +12,6 @@
 		--sveltely-padding-x: 0.75rem;
 		--sveltely-padding-y: 0.75rem;
 		--sveltely-gap: 0.5rem;
-		--sveltely-scale-0: 0;
-		--sveltely-scale-1: 0.1;
-		--sveltely-scale-2: 0.2;
-		--sveltely-scale-3: 0.3;
-		--sveltely-scale-4: 0.4;
-		--sveltely-scale-5: 0.5;
-		--sveltely-scale-6: 0.6;
-		--sveltely-scale-7: 0.7;
-		--sveltely-scale-8: 0.8;
-		--sveltely-scale-9: 0.9;
-		--sveltely-scale-10: 1;
 		--sveltely-primary-color: var(--color-zinc-900);
 		--sveltely-secondary-color: var(--color-zinc-500);
 		--sveltely-active-color: var(--color-zinc-900);

package/dist/style.css

@@ -853,17 +853,6 @@
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
-    --sveltely-scale-0: 0;
-    --sveltely-scale-1: 0.1;
-    --sveltely-scale-2: 0.2;
-    --sveltely-scale-3: 0.3;
-    --sveltely-scale-4: 0.4;
-    --sveltely-scale-5: 0.5;
-    --sveltely-scale-6: 0.6;
-    --sveltely-scale-7: 0.7;
-    --sveltely-scale-8: 0.8;
-    --sveltely-scale-9: 0.9;
-    --sveltely-scale-10: 1;
     --sveltely-primary-color: var(--color-zinc-900);
     --sveltely-secondary-color: var(--color-zinc-500);
     --sveltely-active-color: var(--color-zinc-900);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.15",
+	"version": "0.1.16",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

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

@@ -1 +0,0 @@
-export { default } from './NavigationLink.svelte';

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

@@ -1 +0,0 @@
-export { default } from './NavigationLink.svelte';