@hyvor/design 1.0.5 → 1.0.6

package/dist/components/ActionList/Selected.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Checkbox from '../Checkbox/Checkbox.svelte';
-	import { IconCheck } from '@hyvor/icons';
+	import IconCheck from '@hyvor/icons/IconCheck';
 
 	interface Props {
 		selection: 'none' | 'single' | 'multi';

package/dist/components/Dark/DarkToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { IconMoonStarsFill, IconSunFill } from '@hyvor/icons';
+	import IconMoonStarsFill from '@hyvor/icons/IconMoonStarsFill';
+	import IconSunFill from '@hyvor/icons/IconSunFill';
 	import IconButton from '../IconButton/IconButton.svelte';
 	import { dark } from './../../stores/dark.js';
 

package/dist/components/FormControl/Validation.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-	import {
-		IconCheckCircleFill,
-		IconExclamationTriangleFill,
-		IconInfoCircleFill
-	} from '@hyvor/icons';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconExclamationTriangleFill from '@hyvor/icons/IconExclamationTriangleFill';
+	import IconInfoCircleFill from '@hyvor/icons/IconInfoCircleFill';
 	import type { AriaRole } from 'svelte/elements';
 
 	interface Props {

package/dist/components/HyvorBar/BarProducts.svelte

@@ -24,11 +24,11 @@
 
 <script lang="ts">
 	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
-	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
 	import LogoFortguard from '../../marketing/Logo/LogoFortguard.svelte';
 	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
 	import { ActionList, ActionListItem, Button, Dropdown } from '../index.js';
-	import { IconCaretDownFill, IconBoxArrowUpRight } from '@hyvor/icons';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 
 	interface Props {
 		mobile?: boolean;

package/dist/components/HyvorBar/BarSupport.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
 	import { ActionList, ActionListItem, Button, Dropdown } from '../index.js';
-	import {
-		IconCaretDownFill,
-		IconBoxArrowUpRight,
-		IconChat,
-		IconDiscord,
-		IconInfoCircle,
-		IconFileEarmark,
-		IconChatDots,
-		IconTwitterX,
-		IconLinkedin
-	} from '@hyvor/icons';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
+	import IconChat from '@hyvor/icons/IconChat';
+	import IconDiscord from '@hyvor/icons/IconDiscord';
+	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
+	import IconFileEarmark from '@hyvor/icons/IconFileEarmark';
+	import IconChatDots from '@hyvor/icons/IconChatDots';
+	import IconTwitterX from '@hyvor/icons/IconTwitterX';
+	import IconLinkedin from '@hyvor/icons/IconLinkedin';
+
 	import ActionListGroup from '../ActionList/ActionListGroup.svelte';
 	import { PRODUCTS } from './BarProducts.svelte';
 	import type { BarConfig, BarProduct } from './bar.js';

package/dist/components/HyvorBar/BarUpdates.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { IconButton, Dropdown } from '../index.js';
-	import { IconMegaphone } from '@hyvor/icons';
+	import IconMegaphone from '@hyvor/icons/IconMegaphone';
 	import BarUpdatesList from './BarUpdatesList.svelte';
 	import { type BarProduct, barUnreadUpdates } from './bar.js';
 

package/dist/components/HyvorBar/BarUpdatesList.svelte

@@ -9,7 +9,7 @@
 		type BarProduct,
 		type BarUpdate
 	} from './bar.js';
-	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 	import Button from '../Button/Button.svelte';
 	import Tag from '../Tag/Tag.svelte';
 	import IconMessage from '../IconMessage/IconMessage.svelte';

package/dist/components/HyvorBar/BarUser.svelte

@@ -2,7 +2,7 @@
 	import ActionList from '../ActionList/ActionList.svelte';
 	import ActionListItem from '../ActionList/ActionListItem.svelte';
 	import Dropdown from '../Dropdown/Dropdown.svelte';
-	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import IconBoxArrowUpRight from '@hyvor/icons/IconBoxArrowUpRight';
 	import { barUser } from './bar.js';
 	import BarUserPreview from './BarUserPreview.svelte';
 

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -5,7 +5,7 @@
 	import BarSupport from './BarSupport.svelte';
 	import { loadBarUser, type BarConfig, type BarProduct } from './bar.js';
 	import BarUpdates from './BarUpdates.svelte';
-	import { IconCaretDownFill } from '@hyvor/icons';
+	import IconCaretDownFill from '@hyvor/icons/IconCaretDownFill';
 	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
 	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
 	import LogoCore from '../../marketing/Logo/LogoCore.svelte';

package/dist/components/IconMessage/IconMessage.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { type Component, type Snippet } from 'svelte';
-	import { IconBug, IconInbox } from '@hyvor/icons';
+	import IconBug from '@hyvor/icons/IconBug';
+	import IconInbox from '@hyvor/icons/IconInbox';
 	import Button from '../Button/Button.svelte';
 
 	interface Props {

package/dist/components/Internationalization/LanguageToggle.svelte

@@ -6,7 +6,7 @@
 	import ActionList from '../ActionList/ActionList.svelte';
 	import ActionListItem from '../ActionList/ActionListItem.svelte';
 	import Text from '../Text/Text.svelte';
-	import { IconCaretDown } from '@hyvor/icons';
+	import IconCaretDown from '@hyvor/icons/IconCaretDown';
 	import IconButton from '../IconButton/IconButton.svelte';
 
 	interface Props {

package/dist/components/Loader/Loader.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { run } from 'svelte/legacy';
 
-	import { IconCheckCircleFill, IconXCircleFill } from '@hyvor/icons';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
 
 	interface Props {
 		block?: boolean;

package/dist/components/Modal/Modal.svelte

@@ -3,7 +3,7 @@
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
 	import { clickOutside } from '../directives/clickOutside.js';
-	import { IconX } from '@hyvor/icons';
+	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
 	import { onMount, tick, type Snippet } from 'svelte';

package/dist/components/Toast/ToastIcon.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { Toast } from './toast.ts';
 	import Loader from '../Loader/Loader.svelte';
-	import {
-		IconCheckCircleFill,
-		IconXCircleFill,
-		IconExclamationCircleFill,
-		IconInfoCircleFill
-	} from '@hyvor/icons';
+
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
+	import IconExclamationCircleFill from '@hyvor/icons/IconExclamationCircleFill';
+	import IconInfoCircleFill from '@hyvor/icons/IconInfoCircleFill';
 
 	interface Props {
 		toast: Toast;

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import { afterNavigate, onNavigate } from '$app/navigation';
-	import { page } from '$app/stores';
-	import { IconList } from '@hyvor/icons';
+	import { afterNavigate } from '$app/navigation';
+	import IconList from '@hyvor/icons/IconList';
 	import { onMount } from 'svelte';
 	import { clickOutside } from '../../../components/index.js';
 	interface Props {

package/dist/marketing/Docs/Toc.svelte

@@ -6,7 +6,8 @@
 	import tocbot from 'tocbot';
 
 	import Loader from '../../components/Loader/Loader.svelte';
-	import { IconCaretDown, IconCaretRight } from '@hyvor/icons';
+	import IconCaretDown from '@hyvor/icons/IconCaretDown';
+	import IconCaretRight from '@hyvor/icons/IconCaretRight';
 	import Button from '../../components/Button/Button.svelte';
 
 	let tocElement: HTMLDivElement | undefined = $state();
@@ -68,6 +69,8 @@
 
 <style>.wrap {
   padding: 25px;
+  max-height: calc(100vh - var(--header-height) - 50px);
+  overflow-y: auto;
 }
 
 .toc-wrap {

package/dist/marketing/Document/Document.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import FeatureSectionTitle from './DocumentTitle.svelte';
+	import { page } from '$app/stores';
+	import DocumentTitle from './DocumentTitle.svelte';
 
 	interface Props {
 		title: string;
@@ -8,12 +11,42 @@
 	}
 
 	let { title, subtitle, children }: Props = $props();
+
+	function linkifyHeadings() {
+		var hs = document.querySelectorAll('h2[id],h3[id],h4[id]');
+		for (var i = 0; i < hs.length; i++) {
+			var h = hs[i];
+
+			var icon = document.createElement('a');
+			icon.className = 'heading-anchor-link';
+			icon.innerHTML =
+				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
+			icon.tabIndex = -1;
+			h.appendChild(icon);
+
+			var id = h.getAttribute('id');
+			var link = document.createElement('a');
+			link.className = 'heading-anchor';
+			link.setAttribute('href', '#' + id);
+			link.innerHTML = h.innerHTML;
+			h.innerHTML = link.outerHTML;
+		}
+	}
+
+	onMount(() => {
+		const unsubscribe = page.subscribe(() => {
+			linkifyHeadings();
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
 </script>
 
 <section>
 	<div class="hds-container container">
-		<FeatureSectionTitle {title} />
-		<div class="date">{subtitle}</div>
+		<DocumentTitle {title} {subtitle} />
 		<content>{@render children?.()}</content>
 	</div>
 </section>
@@ -29,11 +62,6 @@
 .container :global(.wrap) {
   margin-top: 0 !important;
 }
-.container .date {
-  text-align: center;
-  margin: 15px 0 60px 0;
-  color: var(--text-light);
-}
 .container content :global(h2) {
   font-size: 32px !important;
   font-weight: 600;
@@ -63,4 +91,25 @@
 .container content :global(a) {
   color: var(--link);
   text-decoration: underline;
+}
+.container content :global(a.heading-anchor-link) {
+  position: absolute;
+  right: 100%;
+  margin-right: 7px;
+  opacity: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+}
+.container content :global(.heading-anchor:hover + .heading-anchor-link) {
+  opacity: 1;
+}
+.container content :global(h2 a:not(.heading-anchor-link)),
+.container content :global(h3 a:not(.heading-anchor-link)),
+.container content :global(h4 a:not(.heading-anchor-link)),
+.container content :global(h5 a:not(.heading-anchor-link)),
+.container content :global(h6 a:not(.heading-anchor-link)) {
+  text-decoration: none;
+  color: inherit;
 }</style>

package/dist/marketing/Document/DocumentTitle.svelte

@@ -53,6 +53,7 @@
 		font-weight: normal;
 		line-height: 1.4;
 		text-align: center;
+		color: var(--text-light);
 	}
 	.img-wrap {
 		text-align: center;

package/dist/marketing/Footer/Footer.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 	import Container from '../Container/Container.svelte';
-	import {
-		IconCopy,
-		IconDiscord,
-		IconEnvelope,
-		IconGithub,
-		IconLinkedin,
-		IconTwitterX,
-		IconYoutube
-	} from '@hyvor/icons';
+
+	import IconCopy from '@hyvor/icons/IconCopy';
+	import IconDiscord from '@hyvor/icons/IconDiscord';
+	import IconEnvelope from '@hyvor/icons/IconEnvelope';
+	import IconGithub from '@hyvor/icons/IconGithub';
+	import IconLinkedin from '@hyvor/icons/IconLinkedin';
+	import IconTwitterX from '@hyvor/icons/IconTwitterX';
+	import IconYoutube from '@hyvor/icons/IconYoutube';
+
 	import Link from '../../components/Link/Link.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Tooltip from '../../components/Tooltip/Tooltip.svelte';

package/dist/marketing/Header/Header.svelte

@@ -3,7 +3,7 @@
 	import DarkToggle from '../../components/Dark/DarkToggle.svelte';
 	import IconButton from '../../components/IconButton/IconButton.svelte';
 	import Dropdown from '../../components/Dropdown/Dropdown.svelte';
-	import { IconList } from '@hyvor/icons';
+	import IconList from '@hyvor/icons/IconList';
 
 	interface Props {
 		logo: string;

package/package.json

@@ -46,7 +46,7 @@
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
-		"@hyvor/icons": "^1.0.0",
+		"@hyvor/icons": "^1.1.0",
 		"deepmerge-ts": "^5.1.0",
 		"highlight.js": "^11.9.0",
 		"intl-messageformat": "^10.5.11",
@@ -57,5 +57,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.0.5"
+	"version": "1.0.6"
 }