alus-ui 0.1.0

package/dist/components/feedback/live-region/LiveRegion.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	type Politeness = 'polite' | 'assertive' | 'off';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		message?: string;
+		politeness?: Politeness;
+		atomic?: boolean;
+		relevant?: 'additions' | 'removals' | 'text' | 'all' | 'additions text';
+		role?: 'status' | 'alert' | 'log' | 'marquee' | 'timer' | undefined;
+		visuallyHidden?: boolean;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		message,
+		politeness = 'polite',
+		atomic = true,
+		relevant,
+		role,
+		visuallyHidden = true,
+		class: className = '',
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	const effectiveRole = $derived(role ?? (politeness === 'assertive' ? 'alert' : 'status'));
+
+	const hiddenStyle =
+		'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+</script>
+
+<div
+	role={effectiveRole}
+	aria-live={politeness}
+	aria-atomic={atomic}
+	aria-relevant={relevant}
+	aria-label={ariaLabel}
+	class={className}
+	style={visuallyHidden ? hiddenStyle : undefined}
+>
+	{#if children}
+		{@render children()}
+	{:else if message}
+		{message}
+	{/if}
+</div>

package/dist/components/feedback/live-region/LiveRegion.svelte.d.ts

@@ -0,0 +1,15 @@
+type Politeness = 'polite' | 'assertive' | 'off';
+interface Props {
+    children?: import('svelte').Snippet;
+    message?: string;
+    politeness?: Politeness;
+    atomic?: boolean;
+    relevant?: 'additions' | 'removals' | 'text' | 'all' | 'additions text';
+    role?: 'status' | 'alert' | 'log' | 'marquee' | 'timer' | undefined;
+    visuallyHidden?: boolean;
+    class?: string;
+    'aria-label'?: string;
+}
+declare const LiveRegion: import("svelte").Component<Props, {}, "">;
+type LiveRegion = ReturnType<typeof LiveRegion>;
+export default LiveRegion;

package/dist/components/feedback/live-region/index.d.ts

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

package/dist/components/feedback/live-region/index.js

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

package/dist/components/feedback/notification-bell/NotificationBell.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet<[{ count: number; display: string; hasUnread: boolean }]>;
+		count?: number;
+		max?: number;
+		showZero?: boolean;
+		disabled?: boolean;
+		class?: string;
+		badgeClass?: string;
+		announce?: boolean;
+		'aria-label'?: string;
+		onclick?: (e: MouseEvent) => void;
+	}
+
+	let {
+		children,
+		count = 0,
+		max = 99,
+		showZero = false,
+		disabled = false,
+		class: className = '',
+		badgeClass = '',
+		announce = true,
+		'aria-label': ariaLabel,
+		onclick
+	}: Props = $props();
+
+	const display = $derived(count > max ? `${max}+` : String(count));
+	const hasUnread = $derived(count > 0);
+	const showBadge = $derived(hasUnread || showZero);
+	const label = $derived(
+		ariaLabel ?? (hasUnread ? `Notifications, ${count} unread` : 'Notifications, no unread items')
+	);
+
+	const srOnlyStyle =
+		'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+</script>
+
+<button
+	type="button"
+	class={className}
+	aria-label={label}
+	aria-disabled={disabled || undefined}
+	{disabled}
+	data-has-unread={hasUnread || undefined}
+	{onclick}
+>
+	{#if children}
+		{@render children({ count, display, hasUnread })}
+	{/if}
+	{#if showBadge}
+		<span class={badgeClass} data-notification-badge aria-hidden="true">{display}</span>
+	{/if}
+	{#if announce}
+		<span style={srOnlyStyle} aria-live="polite" aria-atomic="true">{label}</span>
+	{/if}
+</button>

package/dist/components/feedback/notification-bell/NotificationBell.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        count: number;
+        display: string;
+        hasUnread: boolean;
+    }]>;
+    count?: number;
+    max?: number;
+    showZero?: boolean;
+    disabled?: boolean;
+    class?: string;
+    badgeClass?: string;
+    announce?: boolean;
+    'aria-label'?: string;
+    onclick?: (e: MouseEvent) => void;
+}
+declare const NotificationBell: import("svelte").Component<Props, {}, "">;
+type NotificationBell = ReturnType<typeof NotificationBell>;
+export default NotificationBell;

package/dist/components/feedback/notification-bell/index.d.ts

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

package/dist/components/feedback/notification-bell/index.js

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

package/dist/components/feedback/progress/Progress.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ percent: number; indeterminate: boolean }]>;
+		value?: number;
+		max?: number;
+		min?: number;
+		indeterminate?: boolean;
+		class?: string;
+		indicatorClass?: string;
+		id?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		value = 0,
+		max = 100,
+		min = 0,
+		indeterminate = false,
+		class: className = '',
+		indicatorClass = '',
+		id,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	let percent = $derived(
+		indeterminate ? 0 : Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100))
+	);
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			widgetAttrs({
+				valuemin: min,
+				valuemax: max,
+				valuenow: indeterminate ? undefined : value
+			})
+		)
+	);
+</script>
+
+<div
+	{id}
+	role="progressbar"
+	class={className}
+	data-state={indeterminate ? 'indeterminate' : 'loading'}
+	{...ariaAttrs}
+>
+	{#if children}
+		{@render children({ percent, indeterminate })}
+	{:else}
+		<div
+			class={indicatorClass}
+			style:width={indeterminate ? '100%' : `${percent}%`}
+			data-state={indeterminate ? 'indeterminate' : 'loading'}
+		></div>
+	{/if}
+</div>

package/dist/components/feedback/progress/Progress.svelte.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        percent: number;
+        indeterminate: boolean;
+    }]>;
+    value?: number;
+    max?: number;
+    min?: number;
+    indeterminate?: boolean;
+    class?: string;
+    indicatorClass?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/feedback/progress/index.d.ts

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

package/dist/components/feedback/progress/index.js

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

package/dist/components/feedback/skeleton/Skeleton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		class?: string;
+		'aria-label'?: string;
+		/** When true (default) acts as live status; set false for purely decorative skeletons */
+		announce?: boolean;
+	}
+
+	let {
+		class: className = '',
+		'aria-label': ariaLabel = 'Loading',
+		announce = true
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		announce
+			? mergeAttrs(labelAttrs({ label: ariaLabel }), interactiveStateAttrs({ busy: true }))
+			: {}
+	);
+</script>
+
+{#if announce}
+	<span class={className} role="status" {...ariaAttrs}></span>
+{:else}
+	<span class={className} aria-hidden="true"></span>
+{/if}

package/dist/components/feedback/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    class?: string;
+    'aria-label'?: string;
+    /** When true (default) acts as live status; set false for purely decorative skeletons */
+    announce?: boolean;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/feedback/skeleton/index.d.ts

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

package/dist/components/feedback/skeleton/index.js

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

package/dist/components/feedback/spinner/Spinner.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import VisuallyHidden from '../../utility/visually-hidden/VisuallyHidden.svelte';
+
+	interface Props {
+		class?: string;
+		label?: string;
+	}
+
+	let { class: className = '', label = 'Loading' }: Props = $props();
+</script>
+
+<span role="status" aria-live="polite" class={className}>
+	<VisuallyHidden>{label}</VisuallyHidden>
+</span>

package/dist/components/feedback/spinner/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    label?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/feedback/spinner/index.d.ts

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

package/dist/components/feedback/spinner/index.js

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

package/dist/components/feedback/tag/Tag.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		// Accessibility attributes
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		// State
+		disabled?: boolean;
+		removable?: boolean;
+		// Events
+		onremove?: (event: MouseEvent) => void;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		disabled = false,
+		removable = false,
+		onremove
+	}: Props = $props();
+
+	// Build ARIA attributes using reusable utilities
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled })
+		)
+	);
+</script>
+
+<span class={className} data-removable={removable ? '' : undefined} {...ariaAttrs}>
+	{#if children}
+		{@render children()}
+	{/if}
+	{#if removable}
+		<button type="button" aria-label="Remove" {disabled} onclick={onremove} class="remove-button">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="12"
+				height="12"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<line x1="18" y1="6" x2="6" y2="18"></line>
+				<line x1="6" y1="6" x2="18" y2="18"></line>
+			</svg>
+		</button>
+	{/if}
+</span>

package/dist/components/feedback/tag/Tag.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    disabled?: boolean;
+    removable?: boolean;
+    onremove?: (event: MouseEvent) => void;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/feedback/tag/index.d.ts

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

package/dist/components/feedback/tag/index.js

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

package/dist/components/feedback/toast/Toaster.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" module>
+	export type Placement =
+		| 'top-left'
+		| 'top-right'
+		| 'top-center'
+		| 'bottom-left'
+		| 'bottom-right'
+		| 'bottom-center';
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown> = Record<string, unknown>">
+	import { untrack } from 'svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+	import {
+		Toaster as ToasterClass,
+		setToasterContext,
+		type Toast,
+		type ToastType,
+		type HoverBehavior,
+		type TabHiddenBehavior
+	} from './toast.svelte.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		toast: import('svelte').Snippet<[Toast<T>]>;
+		toaster?: ToasterClass<T>;
+		closeDelay?: number;
+		type?: ToastType;
+		hover?: HoverBehavior;
+		tabHidden?: TabHiddenBehavior;
+		placement?: Placement;
+		class?: string;
+		'aria-label'?: string;
+		live?: 'polite' | 'assertive';
+	}
+
+	let {
+		children,
+		toast: toastSnippet,
+		toaster: providedToaster,
+		closeDelay,
+		type,
+		hover,
+		tabHidden,
+		placement = 'bottom-right',
+		class: className = '',
+		'aria-label': ariaLabel = 'Notifications',
+		live = 'polite'
+	}: Props = $props();
+
+	const t = untrack(
+		() => providedToaster ?? new ToasterClass<T>({ closeDelay, type, hover, tabHidden })
+	);
+	setToasterContext(t as ToasterClass<Record<string, unknown>>);
+</script>
+
+{#if children}{@render children()}{/if}
+
+<Portal>
+	<ol
+		role="region"
+		aria-label={ariaLabel}
+		aria-live={live}
+		aria-relevant="additions text"
+		class={className}
+		data-placement={placement}
+	>
+		{#each t.toasts as toastInstance (toastInstance.id)}
+			<li data-toast-id={toastInstance.id}>
+				{@render toastSnippet(toastInstance)}
+			</li>
+		{/each}
+	</ol>
+</Portal>

package/dist/components/feedback/toast/Toaster.svelte.d.ts

@@ -0,0 +1,38 @@
+export type Placement = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+import { Toaster as ToasterClass, type Toast, type ToastType, type HoverBehavior, type TabHiddenBehavior } from './toast.svelte.js';
+declare function $$render<T extends Record<string, unknown> = Record<string, unknown>>(): {
+    props: {
+        children?: import("svelte").Snippet;
+        toast: import("svelte").Snippet<[Toast<T>]>;
+        toaster?: ToasterClass<T>;
+        closeDelay?: number;
+        type?: ToastType;
+        hover?: HoverBehavior;
+        tabHidden?: TabHiddenBehavior;
+        placement?: Placement;
+        class?: string;
+        'aria-label'?: string;
+        live?: "polite" | "assertive";
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown> = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown> = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends Record<string, unknown> = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Toaster: $$IsomorphicComponent;
+type Toaster<T extends Record<string, unknown> = Record<string, unknown>> = InstanceType<typeof Toaster<T>>;
+export default Toaster;

package/dist/components/feedback/toast/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Toaster } from './Toaster.svelte';
+export type { Placement } from './Toaster.svelte';
+export { Toaster as ToasterStore, Toast, createToaster, setToasterContext, getToasterContext } from './toast.svelte.js';
+export type { ToasterProps, AddToastArgs, UpdateToastArgs, ToastType, HoverBehavior, TabHiddenBehavior } from './toast.svelte.js';

package/dist/components/feedback/toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './Toaster.svelte';
+export { Toaster as ToasterStore, Toast, createToaster, setToasterContext, getToasterContext } from './toast.svelte.js';

package/dist/components/feedback/toast/toast.svelte.d.ts

@@ -0,0 +1,90 @@
+export type ToastType = 'polite' | 'assertive';
+export type HoverBehavior = 'pause' | 'pause-all' | null;
+export type TabHiddenBehavior = 'pause-all' | null;
+export interface ToasterProps {
+    closeDelay?: number;
+    type?: ToastType;
+    hover?: HoverBehavior;
+    tabHidden?: TabHiddenBehavior;
+}
+export interface AddToastArgs<T = Record<string, unknown>> {
+    id?: string;
+    closeDelay?: number;
+    type?: ToastType;
+    data: T;
+}
+export interface UpdateToastArgs<T = Record<string, unknown>> {
+    id: string;
+    closeDelay?: number;
+    type?: ToastType;
+    data?: T;
+}
+interface ToastInternalProps<T> {
+    toaster: Toaster<T>;
+    id: string;
+    closeDelay: number;
+    type: ToastType;
+    data: T;
+}
+export declare class Toast<T = Record<string, unknown>> {
+    #private;
+    readonly id: string;
+    readonly createdAt: number;
+    data: T;
+    closeDelay: number;
+    type: ToastType;
+    timeElapsed: number;
+    readonly percentage: number;
+    constructor(props: ToastInternalProps<T>);
+    get toaster(): Toaster<T>;
+    readonly removeSelf: () => void;
+    /** @internal */
+    readonly cleanup: () => void;
+    readonly pause: () => void;
+    readonly resume: () => void;
+    readonly reset: () => void;
+    get content(): {
+        readonly id: string;
+        readonly role: "alert" | "status";
+        readonly 'aria-labelledby': string;
+        readonly 'aria-describedby': string;
+        readonly 'aria-live': ToastType;
+        readonly 'aria-atomic': "true";
+        readonly tabindex: -1;
+        readonly 'data-toast-id': string;
+        readonly onpointerenter: (e: PointerEvent) => void;
+        readonly onpointerleave: (e: PointerEvent) => void;
+    };
+    get title(): {
+        readonly id: string;
+    };
+    get description(): {
+        readonly id: string;
+    };
+    get close(): {
+        readonly type: "button";
+        readonly 'aria-label': "Dismiss";
+        readonly onclick: () => void;
+    };
+}
+export declare class Toaster<T = Record<string, unknown>> {
+    #private;
+    closeDelay: number;
+    type: ToastType;
+    hover: HoverBehavior;
+    tabHidden: TabHiddenBehavior;
+    readonly toasts: Toast<T>[];
+    constructor(props?: ToasterProps);
+    addToast: (args: AddToastArgs<T>) => Toast<T>;
+    removeToast: (id: string) => void;
+    updateToast: (args: UpdateToastArgs<T>) => void;
+    pauseAll: () => void;
+    resumeAll: () => void;
+    clear: () => void;
+    /** @internal */
+    dispose: () => void;
+}
+export declare function setToasterContext<T = Record<string, unknown>>(toaster: Toaster<T>): void;
+export declare function getToasterContext<T = Record<string, unknown>>(): Toaster<T>;
+export declare function createToaster<T = Record<string, unknown>>(props?: ToasterProps): Toaster<T>;
+export {};