ui-svelte 0.2.17 → 0.2.19

package/dist/control/Audio.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { PauseFilledIcon, PlayFilledIcon } from '../icons/index.js';
+	import { Avatar, IconButton } from '../index.js';
 	import { cn } from '../utils/class-names.js';
-	import IconButton from './IconButton.svelte';
-	import Avatar from '../display/Avatar.svelte';
 
 	type Props = {
 		class?: string;
@@ -207,6 +206,7 @@
 		variant={variant === 'solid' ? 'soft' : 'solid'}
 		{color}
 		onclick={togglePlay}
+		ariaLabel={isPlaying ? 'Pause audio' : 'Play audio'}
 	/>
 
 	<div class="media-content">
@@ -218,6 +218,7 @@
 			aria-valuenow={Math.round((currentTime / duration) * 100) || 0}
 			aria-valuemin="0"
 			aria-valuemax="100"
+			aria-label="Audio progress"
 		>
 			<div class="media-bars" class:loading={isAnalyzing} class:loaded={!isAnalyzing}>
 				{#if isAnalyzing}

package/dist/control/Button.svelte

@@ -21,6 +21,7 @@
 		isWide?: boolean;
 		isDisabled?: boolean;
 		isSolid?: boolean;
+		ariaLabel?: string;
 	};
 
 	const {
@@ -37,7 +38,8 @@
 		endIcon,
 		isLoading,
 		isWide,
-		isDisabled
+		isDisabled,
+		ariaLabel
 	}: Props = $props();
 
 	const colors = {
@@ -82,7 +84,13 @@
 {/snippet}
 
 {#if href}
-	<a class={baseClasses} {href} {target}>
+	<a
+		class={baseClasses}
+		{href}
+		{target}
+		aria-label={ariaLabel}
+		aria-disabled={isDisabled || undefined}
+	>
 		{@render content()}
 	</a>
 {:else}
@@ -92,6 +100,7 @@
 		disabled={isDisabled || isLoading}
 		class={baseClasses}
 		aria-busy={isLoading}
+		aria-label={ariaLabel}
 	>
 		{#if isLoading}
 			<span class="btn-loading">

package/dist/control/Button.svelte.d.ts

@@ -16,6 +16,7 @@ type Props = {
     isWide?: boolean;
     isDisabled?: boolean;
     isSolid?: boolean;
+    ariaLabel?: string;
 };
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/control/Fab.svelte

@@ -26,6 +26,7 @@
 		offsetY?: string;
 		onclick?: () => void;
 		children?: Snippet;
+		ariaLabel?: string;
 	};
 
 	const {
@@ -40,7 +41,8 @@
 		offsetX,
 		offsetY,
 		onclick,
-		children
+		children,
+		ariaLabel
 	}: Props = $props();
 
 	let isOpen = $state(false);
@@ -97,7 +99,14 @@
 		{#if children}
 			{@render children()}
 		{:else}
-			<IconButton {icon} {color} {variant} {size} onclick={handleTriggerClick} />
+			<IconButton
+				{icon}
+				{color}
+				{variant}
+				{size}
+				onclick={handleTriggerClick}
+				ariaLabel={ariaLabel || (actions.length > 0 ? 'Open actions menu' : undefined)}
+			/>
 		{/if}
 	</div>
 </div>

package/dist/control/Fab.svelte.d.ts

@@ -19,6 +19,7 @@ type Props = {
     offsetY?: string;
     onclick?: () => void;
     children?: Snippet;
+    ariaLabel?: string;
 };
 declare const Fab: import("svelte").Component<Props, {}, "">;
 type Fab = ReturnType<typeof Fab>;

package/dist/control/IconButton.svelte

@@ -16,6 +16,7 @@
 		isLoading?: boolean;
 		icon: IconData;
 		isDisabled?: boolean;
+		ariaLabel?: string;
 	};
 
 	const {
@@ -29,7 +30,8 @@
 		class: className,
 		icon,
 		isLoading,
-		isDisabled
+		isDisabled,
+		ariaLabel
 	}: Props = $props();
 
 	const colors = {
@@ -68,7 +70,7 @@
 {/snippet}
 
 {#if href}
-	<a class={baseClasses} {href} {target}>
+	<a class={baseClasses} {href} {target} aria-label={ariaLabel}>
 		{@render content()}
 	</a>
 {:else}
@@ -78,6 +80,7 @@
 		disabled={isDisabled || isLoading}
 		class={baseClasses}
 		aria-busy={isLoading}
+		aria-label={ariaLabel}
 	>
 		{#if isLoading}
 			<span class="btn-loading">

package/dist/control/IconButton.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     isLoading?: boolean;
     icon: IconData;
     isDisabled?: boolean;
+    ariaLabel?: string;
 };
 declare const IconButton: import("svelte").Component<Props, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;

package/dist/control/Image.svelte

@@ -109,6 +109,7 @@
 					{color}
 					variant="overlay"
 					size="sm"
+					ariaLabel="Download image"
 				/>
 				<IconButton
 					onclick={handleToggleMaximize}
@@ -116,6 +117,7 @@
 					{color}
 					variant="overlay"
 					size="sm"
+					ariaLabel="Toggle fullscreen"
 				/>
 			</div>
 		</div>

package/dist/control/Record.svelte

@@ -357,6 +357,7 @@
 			{color}
 			variant={variant === 'solid' ? 'soft' : 'solid'}
 			size="md"
+			ariaLabel={isPlaying ? 'Pause playback' : 'Play recording'}
 		/>
 
 		<div class="media-content">
@@ -382,6 +383,7 @@
 				color="danger"
 				variant="ghost"
 				size="sm"
+				ariaLabel="Discard recording"
 			/>
 			<IconButton
 				onclick={confirmRecording}
@@ -390,6 +392,7 @@
 				variant="ghost"
 				size="sm"
 				isLoading={isUploading}
+				ariaLabel="Confirm recording"
 			/>
 		</div>
 	{:else if !isRecording}
@@ -399,6 +402,7 @@
 			{color}
 			variant={variant === 'solid' ? 'soft' : 'solid'}
 			size="md"
+			ariaLabel="Start recording"
 		/>
 
 		<div class="media-content">
@@ -421,6 +425,7 @@
 				{color}
 				variant={variant === 'solid' ? 'soft' : 'solid'}
 				size="md"
+				ariaLabel="Resume recording"
 			/>
 		{:else}
 			<IconButton
@@ -429,6 +434,7 @@
 				{color}
 				variant={variant === 'solid' ? 'soft' : 'solid'}
 				size="md"
+				ariaLabel="Pause recording"
 			/>
 		{/if}
 
@@ -456,6 +462,7 @@
 				color="danger"
 				variant="ghost"
 				size="sm"
+				ariaLabel="Discard recording"
 			/>
 			<IconButton
 				onclick={stopRecording}
@@ -463,6 +470,7 @@
 				{color}
 				variant="ghost"
 				size="sm"
+				ariaLabel="Stop recording"
 			/>
 		</div>
 	{/if}

package/dist/control/ToggleGroup.svelte

@@ -20,6 +20,7 @@
 		isWide?: boolean;
 		isVertical?: boolean;
 		isDisabled?: boolean;
+		ariaLabel?: string;
 	};
 
 	let {
@@ -33,7 +34,8 @@
 		class: className,
 		isWide,
 		isVertical,
-		isDisabled
+		isDisabled,
+		ariaLabel
 	}: Props = $props();
 
 	const colors = {
@@ -78,14 +80,15 @@
 	}
 </script>
 
-<div class={groupClasses} role="group">
+<div class={groupClasses} role="radiogroup" aria-label={ariaLabel}>
 	{#each items as item}
 		<button
 			type="button"
 			class={cn('toggle-group-item', sizes[size], value === item.id && 'is-active')}
 			onclick={() => handleClick(item.id)}
 			disabled={isDisabled}
-			aria-pressed={value === item.id}
+			role="radio"
+			aria-checked={value === item.id}
 		>
 			{#if item.icon}
 				<Icon icon={item.icon} />

package/dist/control/ToggleGroup.svelte.d.ts

@@ -15,6 +15,7 @@ type Props = {
     isWide?: boolean;
     isVertical?: boolean;
     isDisabled?: boolean;
+    ariaLabel?: string;
 };
 declare const ToggleGroup: import("svelte").Component<Props, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

package/dist/control/ToggleTheme.svelte

@@ -20,4 +20,5 @@
 	{variant}
 	class={className}
 	onclick={theme.toggleTheme}
+	ariaLabel={theme.isDark ? 'Switch to light mode' : 'Switch to dark mode'}
 />

package/dist/control/Video.svelte

@@ -181,6 +181,7 @@
 					{color}
 					variant="overlay"
 					size="sm"
+					ariaLabel={videoParams.paused ? 'Play video' : 'Pause video'}
 				/>
 
 				<Chip variant="overlay" {color}>
@@ -217,6 +218,7 @@
 						{color}
 						variant="overlay"
 						size="sm"
+						ariaLabel={videoParams.muted ? 'Unmute video' : 'Mute video'}
 					/>
 				</div>
 				<IconButton
@@ -225,6 +227,7 @@
 					{color}
 					variant="overlay"
 					size="sm"
+					ariaLabel="Toggle picture-in-picture"
 				/>
 				<IconButton
 					onclick={handleToggleMaximize}
@@ -232,6 +235,7 @@
 					{color}
 					variant="overlay"
 					size="sm"
+					ariaLabel="Toggle fullscreen"
 				/>
 			</div>
 		</div>

package/dist/css/base.css

@@ -1,4 +1,7 @@
 @layer base {
+	html {
+		scroll-behavior: smooth;
+	}
 	body {
 		@apply h-dvh flex flex-col relative;
 		@apply bg-background text-on-background;

package/dist/display/Icon.svelte

@@ -15,6 +15,11 @@
 	const { icon, class: className }: Props = $props();
 </script>
 
-<svg viewBox={icon.viewbox} class={cn('icon', className)} xmlns="http://www.w3.org/2000/svg">
+<svg
+	viewBox={icon.viewbox}
+	class={cn('icon', className)}
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+>
 	{@html icon.body}
 </svg>

package/dist/form/Select.svelte

@@ -4,6 +4,11 @@
 	import { cn } from '../utils/class-names.js';
 	import { onMount } from 'svelte';
 
+	const instanceId = Math.random().toString(36).substring(2, 9);
+	const listboxId = `select-listbox-${instanceId}`;
+	const labelId = `select-label-${instanceId}`;
+	const helpTextId = `select-help-${instanceId}`;
+
 	type Option = {
 		id: string | number;
 		label: string;
@@ -273,7 +278,7 @@
 	<input type="text" {name} bind:value hidden />
 
 	{#if !isFloatLabel && label}
-		<div class="field-label">{label}</div>
+		<div class="field-label" id={labelId}>{label}</div>
 	{/if}
 
 	<button
@@ -291,6 +296,16 @@
 		onclick={toggleDropdown}
 		onmouseenter={() => (isActive = true)}
 		onmouseleave={() => (isActive = false)}
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded={isOpen}
+		aria-controls={listboxId}
+		aria-activedescendant={isOpen && focusedIndex >= 0
+			? `${listboxId}-option-${focusedIndex}`
+			: undefined}
+		aria-labelledby={label ? labelId : undefined}
+		aria-label={!label ? placeholder : undefined}
+		aria-describedby={errorText || helpText ? helpTextId : undefined}
 	>
 		{#if isFloatLabel && label}
 			<span
@@ -325,13 +340,21 @@
 	</button>
 
 	{#if errorText || helpText}
-		<div class={cn('field-help', errorText && 'is-danger')}>{errorText || helpText}</div>
+		<div id={helpTextId} class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
+		</div>
 	{/if}
 
 	<div class:is-active={isOpen} class="select-popover" bind:this={contentEl} {style}>
-		<ul class="select-options" bind:this={optionsEl}>
+		<ul
+			class="select-options"
+			bind:this={optionsEl}
+			role="listbox"
+			id={listboxId}
+			aria-label={label}
+		>
 			{#each options as item, index}
-				<li>
+				<li id={`${listboxId}-option-${index}`} role="option" aria-selected={value === item.id}>
 					<Item
 						label={item.label}
 						src={item.src}

package/dist/form/TextField.svelte

@@ -165,6 +165,8 @@
 			oninput={(e) => oninput?.((e.target as HTMLInputElement).value)}
 			onfocusin={() => (isFocused = true)}
 			onfocusout={() => (isFocused = false)}
+			aria-describedby={errorText || helpText ? `${uid}-help` : undefined}
+			aria-invalid={!!errorText}
 		/>
 
 		{#if endContent}
@@ -181,7 +183,7 @@
 	</label>
 
 	{#if errorText || helpText}
-		<div class={cn('field-help', errorText && 'is-danger')}>
+		<div id={`${uid}-help`} class={cn('field-help', errorText && 'is-danger')}>
 			{errorText || helpText}
 		</div>
 	{/if}

package/dist/form/Toggle.svelte

@@ -49,6 +49,8 @@
 		{defaultChecked}
 		{disabled}
 		onchange={() => onchange && onchange(checked!)}
+		role="switch"
+		aria-checked={checked}
 	/>
 	{#if labelRight}
 		<span class={cn('toggle-label-right', checked && 'is-active')}>{labelRight}</span>

package/dist/layout/Provider.svelte

@@ -49,7 +49,7 @@
 <svelte:head>
 	<meta
 		name="viewport"
-		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
+		content="width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover, interactive-widget=resizes-content"
 	/>
 	<script>
 		let themeState = 'light';

package/dist/navigation/NavMenu.svelte

@@ -48,6 +48,8 @@
 	let openSubmenuIndex = $state<number | null>(null);
 	let triggerElements = $state<Record<number, HTMLElement>>({});
 	let popoverElement = $state<HTMLElement>();
+	let activeHash = $state<string | null>(null);
+	let sectionObserver: IntersectionObserver | null = null;
 	let position = $state({
 		top: 0,
 		left: 0,
@@ -84,6 +86,11 @@
 
 	function isItemActive(href?: string): boolean {
 		if (!href) return false;
+
+		if (href.startsWith('#')) {
+			return activeHash === href;
+		}
+
 		return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
 	}
 
@@ -191,7 +198,38 @@
 	}
 
 	onMount(() => {
-		return () => stopEventListeners();
+		const hashLinks = items
+			.flatMap((item) => [item.href, ...(item.subitems?.map((s) => s.href) || [])])
+			.filter((href): href is string => !!href && href.startsWith('#'))
+			.map((href) => href.slice(1));
+
+		if (hashLinks.length > 0) {
+			sectionObserver = new IntersectionObserver(
+				(entries) => {
+					const visibleEntries = entries.filter((e) => e.isIntersecting);
+					if (visibleEntries.length > 0) {
+						const mostVisible = visibleEntries.reduce((prev, curr) =>
+							curr.intersectionRatio > prev.intersectionRatio ? curr : prev
+						);
+						activeHash = '#' + mostVisible.target.id;
+					}
+				},
+				{
+					threshold: [0.1, 0.5, 0.9],
+					rootMargin: '-10% 0px -10% 0px'
+				}
+			);
+
+			hashLinks.forEach((id) => {
+				const el = document.getElementById(id);
+				if (el) sectionObserver!.observe(el);
+			});
+		}
+
+		return () => {
+			sectionObserver?.disconnect();
+			stopEventListeners();
+		};
 	});
 </script>
 
@@ -216,6 +254,9 @@
 				)}
 				bind:this={triggerElements[index]}
 				onclick={() => handleItemClick(item, index)}
+				aria-haspopup={!!(item.subitems || item.megamenu)}
+				aria-expanded={openSubmenuIndex === index}
+				aria-controls={openSubmenuIndex === index ? `navmenu-popover-${index}` : undefined}
 			>
 				{#if item.icon}
 					<Icon icon={item.icon} class="navmenu-icon" />
@@ -235,6 +276,7 @@
 {#if openSubmenuIndex !== null}
 	{@const currentItem = items[openSubmenuIndex]}
 	<div
+		id={`navmenu-popover-${openSubmenuIndex}`}
 		class={cn(
 			'navmenu-popover',
 			sizeClasses[size],
@@ -243,6 +285,7 @@
 		)}
 		bind:this={popoverElement}
 		{style}
+		role="menu"
 	>
 		{#if currentItem?.megamenu}
 			{@render currentItem.megamenu()}
@@ -257,6 +300,7 @@
 								openSubmenuIndex = null;
 								stopEventListeners();
 							}}
+							role="menuitem"
 						>
 							{#if subitem.icon}
 								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />
@@ -273,6 +317,7 @@
 							type="button"
 							class="navmenu-submenu-item"
 							onclick={() => handleSubmenuItemClick(subitem)}
+							role="menuitem"
 						>
 							{#if subitem.icon}
 								<Icon icon={subitem.icon} class="navmenu-submenu-icon" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ui-svelte",
-	"version": "0.2.17",
+	"version": "0.2.19",
 	"author": {
 		"name": "SappsDev",
 		"email": "info@sappsdev.com"