@hyvor/design 2.1.8 → 2.1.10

package/dist/cloud/HyvorBar/BarNotice/BarNotice.svelte

@@ -12,7 +12,7 @@
 		text="You have an unpaid invoice. Please settle to avoid service interruption."
 		position="bottom"
 	>
-		<a href={instance + '/account/billing?pay-failed'}>
+		<a href={instance + '/account/org/billing?pay-failed'}>
 			<Tag color="orange">
 				{#snippet start()}
 					<IconExclamationCircle size={14} />

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -111,7 +111,7 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				<a href={SOCIAL_LINKS.blueksy} target="_blank">
+				<a href={SOCIAL_LINKS.bluesky} target="_blank">
 					<ActionListItem>
 						Bluesky
 						{#snippet start()}

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	interface Props {
+		column?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { column = false, children }: Props = $props();
+</script>
+
+<div class="button-group" class:column>
+	{@render children?.()}
+</div>
+
+<style>.button-group {
+  display: inline-flex;
+}
+
+.button-group.column {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.button-group :global(> .button) {
+  position: relative;
+}
+
+.button-group :global(> .button:hover),
+.button-group :global(> .button:focus-visible) {
+  z-index: 1;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:last-child)) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:last-child)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  margin-left: -1px;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  margin-top: -1px;
+}
+
+.button-group:not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  top: 22%;
+  bottom: 22%;
+  left: 0;
+  width: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.button-group.column :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  left: 22%;
+  right: 22%;
+  top: 0;
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}</style>

package/dist/components/{Button → ButtonGroup}/ButtonGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    column?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const ButtonGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -2,6 +2,7 @@
 	import ColorPicker from 'svelte-awesome-color-picker';
 	import { clickOutside } from '../index.js';
 	import { createEventDispatcher } from 'svelte';
+	import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
 
 	interface Props {
 		color?: string;
@@ -9,6 +10,8 @@
 		show?: boolean;
 		'aria-label'?: string;
 		alpha?: boolean;
+		align?: DropdownAlign;
+		position?: DropdownPosition;
 		oninput?: (color: string) => void;
 		onchange?: (color: string) => void;
 	}
@@ -19,6 +22,8 @@
 		show = $bindable(false),
 		'aria-label': ariaLabel = '',
 		alpha = false,
+		align = 'start',
+		position = 'bottom',
 		oninput,
 		onchange
 	}: Props = $props();
@@ -29,25 +34,79 @@
 	}>();
 
 	let buttonElement: HTMLButtonElement;
+	let wrapElement: HTMLElement | undefined = $state();
 	let pickerTop = $state(0);
 	let pickerLeft = $state(0);
 
+	const GAP = 5;
+	const SPACE_AROUND = 15;
+
 	function updatePosition() {
-		if (buttonElement) {
-			const rect = buttonElement.getBoundingClientRect();
-			pickerLeft = rect.right;
-			pickerTop = rect.bottom;
+		if (!buttonElement || !wrapElement) return;
+
+		const triggerRect = buttonElement.getBoundingClientRect();
+		const contentRect = wrapElement.getBoundingClientRect();
+		const documentWidth = document.documentElement.clientWidth;
+		const width = contentRect.width;
+		const height = contentRect.height;
+
+		let top = triggerRect.bottom + GAP;
+		let left = triggerRect.left;
+
+		if (position === 'bottom') {
+			top = triggerRect.bottom + GAP;
+		} else if (position === 'top') {
+			top = triggerRect.top - height - GAP;
+		} else if (position === 'left') {
+			left = triggerRect.left - width - GAP;
+		} else if (position === 'right') {
+			left = triggerRect.right + GAP;
+		}
+
+		if (position === 'bottom' || position === 'top') {
+			if (align === 'start') {
+				left = Math.min(triggerRect.left, documentWidth - width - SPACE_AROUND);
+			} else if (align === 'center') {
+				left = triggerRect.left + triggerRect.width / 2 - width / 2;
+			} else if (align === 'end') {
+				left = triggerRect.right - width;
+			}
+			left = Math.max(left, SPACE_AROUND);
+		} else {
+			if (align === 'start') {
+				top = triggerRect.top;
+			} else if (align === 'center') {
+				top = triggerRect.top + triggerRect.height / 2 - height / 2;
+			} else if (align === 'end') {
+				top = triggerRect.bottom - height;
+			}
+			top = Math.max(top, SPACE_AROUND);
 		}
+
+		pickerTop = top;
+		pickerLeft = left;
 	}
 
 	$effect(() => {
-		if (show) {
+		// rerun when positioning inputs change
+		position;
+		align;
+		show;
+
+		if (show && wrapElement) {
 			updatePosition();
 			window.addEventListener('scroll', updatePosition, true);
 			window.addEventListener('resize', updatePosition);
-		} else {
-			window.removeEventListener('scroll', updatePosition, true);
-			window.removeEventListener('resize', updatePosition);
+
+			// the color picker widget can change size after it mounts
+			const observer = new MutationObserver(updatePosition);
+			observer.observe(wrapElement, { subtree: true, childList: true });
+
+			return () => {
+				observer.disconnect();
+				window.removeEventListener('scroll', updatePosition, true);
+				window.removeEventListener('resize', updatePosition);
+			};
 		}
 
 		return () => {
@@ -87,6 +146,7 @@
 	{#if show}
 		<div
 			class="color-picker-wrap"
+			bind:this={wrapElement}
 			style:top="{pickerTop}px"
 			style:left="{pickerLeft}px"
 			use:clickOutside={{
@@ -114,7 +174,6 @@
 	}
 	div {
 		position: fixed;
-		width: 0;
 		z-index: 1000;
 	}
 </style>

package/dist/components/ColorPicker/ColorPicker.svelte.d.ts

@@ -1,10 +1,13 @@
 import ColorPicker from 'svelte-awesome-color-picker';
+import type { DropdownAlign, DropdownPosition } from '../Dropdown/dropdown.types.js';
 interface Props {
     color?: string;
     size?: number;
     show?: boolean;
     'aria-label'?: string;
     alpha?: boolean;
+    align?: DropdownAlign;
+    position?: DropdownPosition;
     oninput?: (color: string) => void;
     onchange?: (color: string) => void;
 }

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -2,7 +2,6 @@
 	import Modal from './Modal.svelte';
 	import { confirmStore } from './confirm.js';
 	import Button from './../Button/Button.svelte';
-	import ButtonGroup from './../Button/ButtonGroup.svelte';
 
 	let show = $state(true);
 
@@ -32,14 +31,12 @@
 		{/if}
 
 		{#snippet footer()}
-			<ButtonGroup>
-				<Button variant="invisible" on:click={handleCancel}>
-					{$confirmStore.cancelText || 'Cancel'}
-				</Button>
-				<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
-					{$confirmStore.confirmText || 'Confirm'}
-				</Button>
-			</ButtonGroup>
+			<Button variant="invisible" on:click={handleCancel}>
+				{$confirmStore.cancelText || 'Cancel'}
+			</Button>
+			<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
+				{$confirmStore.confirmText || 'Confirm'}
+			</Button>
 		{/snippet}
 	</Modal>
 {/if}

package/dist/components/Modal/ModalFooter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Button from '../Button/Button.svelte';
-	import ButtonGroup from '../Button/ButtonGroup.svelte';
 	import type { Footer } from './modal-types.ts';
 
 	interface Props {
@@ -14,30 +13,28 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup>
-	{#if footer.cancel !== false}
-		<Button
-			variant="invisible"
-			on:click={() => {
-				show = false;
-				dispatch('cancel');
-			}}
-			{...footer.cancel?.props}
-			disabled={footer.cancel?.disabled}
-		>
-			{footer.cancel?.text || 'Cancel'}
-		</Button>
-	{/if}
+{#if footer.cancel !== false}
+	<Button
+		variant="invisible"
+		on:click={() => {
+			show = false;
+			dispatch('cancel');
+		}}
+		{...footer.cancel?.props}
+		disabled={footer.cancel?.disabled}
+	>
+		{footer.cancel?.text || 'Cancel'}
+	</Button>
+{/if}
 
-	{#if footer.confirm !== false}
-		<Button
-			variant="fill"
-			color={footer.confirm?.danger ? 'red' : 'accent'}
-			on:click={() => dispatch('confirm')}
-			{...footer.confirm?.props}
-			disabled={footer.confirm?.disabled}
-		>
-			{footer.confirm?.text || 'Confirm'}
-		</Button>
-	{/if}
-</ButtonGroup>
+{#if footer.confirm !== false}
+	<Button
+		variant="fill"
+		color={footer.confirm?.danger ? 'red' : 'accent'}
+		on:click={() => dispatch('confirm')}
+		{...footer.confirm?.props}
+		disabled={footer.confirm?.disabled}
+	>
+		{footer.confirm?.text || 'Confirm'}
+	</Button>
+{/if}

package/dist/components/Toast/ToastMessage.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import ToastIcon from './ToastIcon.svelte';
 	import type { Toast } from './toast.ts';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
 	interface Props {
 		toast: Toast;
@@ -10,7 +11,7 @@
 	let { toast }: Props = $props();
 </script>
 
-<div class="toast" out:fade={{ duration: 200 }} in:fade={{ duration: 50 }}>
+<div class="toast" in:fly={{ y: 20, duration: 250, easing: cubicOut }} out:fade={{ duration: 150 }}>
 	{#if toast.type !== 'blank'}
 		<div class="icon-wrap">
 			<ToastIcon {toast} />
@@ -28,7 +29,6 @@
 
 <style>
 	.toast {
-		margin-bottom: 10px;
 		box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
 		border-radius: var(--box-radius);
 		background-color: var(--box-background);
@@ -38,9 +38,6 @@
 		max-width: 350px;
 		pointer-events: initial;
 	}
-	.toast:first-child {
-		margin-top: 10px;
-	}
 	.icon-wrap {
 		margin-right: 8px;
 		display: inline-flex;

package/dist/components/Toast/ToastProvider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { flip } from 'svelte/animate';
 	import ToastMessage from './ToastMessage.svelte';
 	import { toastStore } from './toast.js';
 	import { useCleaner } from './cleaner.js';
@@ -8,21 +9,24 @@
 
 <div id="toasts-wrap">
 	{#each $toastStore as toast (toast.id)}
-		<ToastMessage {toast} />
+		<div class="toast-item" animate:flip={{ duration: 200 }}>
+			<ToastMessage {toast} />
+		</div>
 	{/each}
 </div>
 
 <style>
 	#toasts-wrap {
 		position: fixed;
-		top: 0;
+		bottom: 0;
 		left: 0;
 		width: 100%;
 		z-index: 20000000;
 		display: flex;
-		flex-direction: column;
+		flex-direction: column-reverse;
 		align-items: center;
-		justify-content: center;
+		gap: 10px;
+		padding: 10px 0 24px;
 		pointer-events: none;
 	}
 </style>

package/dist/components/index.d.ts

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/dist/components/index.js

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/dist/index.css

@@ -95,3 +95,7 @@ a {
 	font-weight: var(--shiki-dark-font-weight) !important;
 	text-decoration: var(--shiki-dark-text-decoration) !important;
 }
+
+::selection {
+	background-color: var(--selection, var(--accent-light));
+}

package/dist/marketing/AllFeaturesAccordion/AllFeaturesAccordion.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import Feature from './AllFeaturesAccordionFeature.svelte';
+	import IconChevronDown from '@hyvor/icons/IconChevronDown';
+
+	interface FeatureItem {
+		icon: Component;
+		title: string;
+		description: string;
+	}
+
+	interface Category {
+		label: string;
+		icon: Component;
+		color?: string;
+		features: FeatureItem[];
+	}
+
+	interface Props {
+		title?: string;
+		description?: string;
+		categories: Category[];
+		defaultOpenIndex?: number;
+		accentColor?: string;
+		accentColorDark?: string;
+	}
+
+	let {
+		title = "And There's More...",
+		description = '',
+		categories,
+		defaultOpenIndex = 0,
+		accentColor,
+		accentColorDark
+	}: Props = $props();
+
+	let openIndex = $state(defaultOpenIndex);
+
+	function toggle(i: number) {
+		openIndex = openIndex === i ? -1 : i;
+	}
+</script>
+
+<section
+	class="hds-all-features-accordion hds-container"
+	style:--afa-accent={accentColor}
+	style:--afa-accent-dark={accentColorDark}
+>
+	<div class="section-header">
+		<h2>{title}</h2>
+		{#if description}
+			<p>{description}</p>
+		{/if}
+	</div>
+
+	<div class="accordion">
+		{#each categories as cat, i}
+			{@const CatIcon = cat.icon}
+			{@const catColor = cat.color || 'var(--accent)'}
+			<div class="accordion-item" class:open={openIndex === i}>
+				<h3 class="accordion-heading">
+					<button
+						class="accordion-trigger"
+						id="hds-accordion-trigger-{i}"
+						onclick={() => toggle(i)}
+						aria-expanded={openIndex === i}
+						aria-controls="hds-accordion-panel-{i}"
+						style="--cat-color: {catColor}"
+					>
+						<span class="cat-icon" aria-hidden="true">
+							<CatIcon size={18} />
+						</span>
+						<span class="cat-label">{cat.label}</span>
+						<span class="cat-count">{cat.features.length} features</span>
+						<span class="chevron" class:rotated={openIndex === i} aria-hidden="true">
+							<IconChevronDown size={14} />
+						</span>
+					</button>
+				</h3>
+
+				<div
+					class="accordion-body"
+					class:open={openIndex === i}
+					role="region"
+					id="hds-accordion-panel-{i}"
+					aria-labelledby="hds-accordion-trigger-{i}"
+				>
+					<div class="accordion-body-inner">
+						<div class="accordion-content">
+							<ul class="features-grid">
+								{#each cat.features as feat}
+									<Feature
+										icon={feat.icon}
+										title={feat.title}
+										description={feat.description}
+										color={catColor}
+									/>
+								{/each}
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.hds-all-features-accordion {
+		padding: 80px 0;
+	}
+
+	.section-header {
+		text-align: center;
+		margin-bottom: 48px;
+	}
+
+	.section-header h2 {
+		font-size: 32px;
+		font-weight: 700;
+		margin: 0 0 6px;
+		font-family: var(--font-serif);
+	}
+
+	.section-header p {
+		font-size: 1rem;
+		color: var(--text-light);
+		margin: 0;
+	}
+
+	.accordion {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.accordion-item {
+		border-radius: 16px;
+		transition: background 0.2s ease;
+	}
+
+	.accordion-item.open {
+		background: color-mix(in srgb, var(--afa-accent, var(--accent)) 6%, transparent);
+	}
+
+	:global(:root.dark) .accordion-item.open {
+		background: color-mix(
+			in srgb,
+			var(--afa-accent-dark, var(--afa-accent, var(--accent))) 6%,
+			transparent
+		);
+	}
+
+	.accordion-heading {
+		margin: 0;
+		font-size: inherit;
+		font-weight: inherit;
+	}
+
+	.accordion-trigger {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 14px;
+		padding: 18px 20px;
+		background: none;
+		border: none;
+		border-radius: inherit;
+		cursor: pointer;
+		text-align: left;
+		transition: background 0.15s;
+		color: var(--text);
+	}
+
+	.accordion-item:not(.open) .accordion-trigger:hover {
+		background: var(--hover);
+	}
+
+	.cat-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border-radius: 10px;
+		color: var(--cat-color);
+		background: color-mix(in srgb, var(--cat-color) 16%, transparent);
+		flex-shrink: 0;
+	}
+
+	.cat-label {
+		font-size: 16px;
+		font-weight: 600;
+		flex: 1;
+	}
+
+	.cat-count {
+		font-size: 13px;
+		color: var(--text-light);
+	}
+
+	.chevron {
+		display: flex;
+		align-items: center;
+		color: var(--text-light);
+		transition: transform 0.2s;
+	}
+
+	.chevron.rotated {
+		transform: rotate(180deg);
+	}
+
+	/* CSS grid row trick: content stays in DOM for SEO, height animates via grid */
+	.accordion-body {
+		display: grid;
+		grid-template-rows: 0fr;
+		transition: grid-template-rows 0.22s ease;
+	}
+
+	.accordion-body.open {
+		grid-template-rows: 1fr;
+	}
+
+	.accordion-body-inner {
+		overflow: hidden;
+	}
+
+	.accordion-content {
+		padding: 8px 20px 28px;
+	}
+
+	.features-grid {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 28px 20px;
+		margin: 0;
+		padding: 0;
+	}
+
+	/* Override AllFeaturesAccordionFeature's width since we're using grid now */
+	/* TODO */
+	.features-grid :global(.feature) {
+		width: auto;
+	}
+
+	@media (max-width: 768px) {
+		.features-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>