@softwareone/spi-sv5-library 1.14.1 → 1.14.3

package/README.md

@@ -1,97 +1,232 @@
-# SoftwareOne SPI Component Library for Svelte
+# @softwareone/spi-sv5-library
 
-This library provides a set of reusable components to help you build modern web applications with Svelte 5 (Runes) and SvelteKit 2. Each component is designed to be easily customizable and integrate seamlessly with your Svelte projects.
+SoftwareOne's Svelte 5 UI component library — a collection of accessible, composable components for building modern web applications with Svelte 5 (runes) and SvelteKit 2.
 
-## Installation
+[![npm version](https://img.shields.io/npm/v/@softwareone/spi-sv5-library)](https://www.npmjs.com/package/@softwareone/spi-sv5-library)
+[![license](https://img.shields.io/npm/l/@softwareone/spi-sv5-library)](LICENSE)
+
+---
+
+## Requirements
+
+- **Svelte** `^5.0.0`
+- **Node** `22+`
 
-To install the library, use the following command:
+---
+
+## Installation
 
 ```bash
-npm install @softwareone/swo-spi-svelte5-library
+npm install @softwareone/spi-sv5-library
+```
+
+### Optional peer dependencies
+
+Install only what you use:
+
+| Peer dependency                                   | Required for                         |
+| ------------------------------------------------- | ------------------------------------ |
+| `material-icons` + `material-icons-outlined`      | Icon rendering across all components |
+| `sveltekit-superforms` + `zod`                    | `@softwareone/spi-sv5-library/form`  |
+| `@tanstack/table-core` + `exceljs` + `file-saver` | `@softwareone/spi-sv5-library/table` |
+
+---
+
+## Quick start
+
+```svelte
+<script lang="ts">
+	import { Button, Modal } from '@softwareone/spi-sv5-library';
+
+	let showModal = $state(false);
+</script>
+
+<Button onclick={() => (showModal = true)}>Open modal</Button>
+
+<Modal bind:show={showModal} title="Hello">
+	<p>Modal content goes here.</p>
+</Modal>
+```
+
+---
+
+## Components
+
+### Layout & Navigation
+
+| Component  | Description                                                                         |
+| ---------- | ----------------------------------------------------------------------------------- |
+| `Header`   | Full application bar with built-in menu, account, loader, waffle, and announcements |
+| `Footer`   | Application footer                                                                  |
+| `Sidebar`  | Collapsible navigation sidebar                                                      |
+| `Tabs`     | Tabbed content navigation                                                           |
+| `Switcher` | Segmented option switcher                                                           |
+
+### Feedback & Overlays
+
+| Component                 | Description                                     |
+| ------------------------- | ----------------------------------------------- |
+| `Modal`                   | Dialog overlay with header, content, and footer |
+| `ConfirmationModal`       | Pre-built confirmation dialog                   |
+| `DeleteConfirmationModal` | Pre-built delete confirmation dialog            |
+| `Toast`                   | Toast notification system                       |
+| `Notification`            | Inline alert/notification banner                |
+| `Spinner`                 | Loading spinner                                 |
+| `Processing`              | Full-screen processing overlay                  |
+| `Tooltip`                 | Hover tooltip                                   |
+
+### Data Display
+
+| Component        | Description                                   |
+| ---------------- | --------------------------------------------- |
+| `Card`           | Content container with optional header/footer |
+| `Accordion`      | Collapsible content sections                  |
+| `HighlightPanel` | Key-value panel with configurable columns     |
+| `Chips`          | Tag / badge chips                             |
+| `Avatar`         | User avatar — image or initials fallback      |
+| `ProgressWizard` | Multi-step wizard with step validation        |
+| `ProgressPage`   | Linear step-by-step progress page             |
+
+### Forms & Controls
+
+| Component    | Description                |
+| ------------ | -------------------------- |
+| `Input`      | Text input                 |
+| `TextArea`   | Multi-line text input      |
+| `Select`     | Dropdown select            |
+| `RadioGroup` | Radio button group         |
+| `Toggle`     | On/off toggle switch       |
+| `AttachFile` | File attachment picker     |
+| `Label`      | Form label                 |
+| `Search`     | Search input with debounce |
+
+### General
+
+| Component   | Description             |
+| ----------- | ----------------------- |
+| `Button`    | Action button           |
+| `Link`      | Styled anchor           |
+| `Home`      | Application home layout |
+| `ErrorPage` | Error state page        |
+
+---
+
+## Sub-packages
+
+### Form components
+
+Integrates with [`sveltekit-superforms`](https://superforms.rocks/) and [`zod`](https://zod.dev/).
+
+```ts
+import { ... } from '@softwareone/spi-sv5-library/form';
+```
+
+### Table component
+
+Advanced data table built on [`@tanstack/table-core`](https://tanstack.com/table) with sorting, filtering, pagination, column visibility, and Excel export.
+
+```ts
+import { ... } from '@softwareone/spi-sv5-library/table';
+```
+
+---
+
+## API reference
+
+### Header
+
+```svelte
+<Header
+	title="My App"
+	homeUrl="/"
+	accountName="Contoso"
+	accountDescription="Microsoft Partner"
+	userName="John Doe"
+	{menuItems}
+	{waffleItems}
+	{profileMenuItems}
+	{announcementItems}
+	onreadannouncementitems={() => {}}
+/>
+```
+
+### Button
+
+```svelte
+<Button
+  variant="primary"      <!-- 'primary' | 'secondary' | 'outline' | 'outline-none' -->
+  variantColor="primary" <!-- 'primary' | 'danger' -->
+>
+  Label
+</Button>
 ```
 
-## Usage
-
-Import the components you need into your Svelte application:
-
-```javascript
-import {
-	Avatar,
-	Button,
-	Card,
-	Chips,
-	ErrorPage,
-	Footer,
-	Header,
-	HeaderAccount,
-	HeaderLoader,
-	HeaderLogo,
-	HighlightPanel,
-	Input,
-	Menu,
-	Modal,
-	ProgressWizard,
-	Sidebar,
-	Tabs,
-	TextArea,
-	Toaster,
-	Toggle,
-	Tooltip
-} from '@softwareone/swo-spi-svelte5-library';
+### Modal
+
+```svelte
+<script lang="ts">
+  let showModal = $state(false);
+</script>
+
+<Modal
+  bind:show={showModal}
+  title="Confirm action"
+  width="xs"           <!-- 'xs' | 'md' | 'lg' | 'xl' -->
+>
+  <p>Body content.</p>
+
+  {#snippet footer()}
+    <Button onclick={() => (showModal = false)}>Close</Button>
+  {/snippet}
+</Modal>
 ```
 
-Import the types you need into your Svelte application:
-
-```javascript
-import {
-	type HighlightPanelColumn,
-	type MenuItem,
-	type ModalProps,
-	type ProgressWizardStep,
-	type Tab,
-	type Toast
-} from '@softwareone/swo-spi-svelte5-library';
+### Tabs
+
+```svelte
+<script lang="ts">
+	import type { Tab } from '@softwareone/spi-sv5-library';
+	const tabs: Tab[] = [
+		{ index: 0, label: 'Overview' },
+		{ index: 1, label: 'Settings' }
+	];
+	let active = $state(0);
+</script>
+
+<Tabs {tabs} bind:activeTab={active} onchange={(i) => console.log(i)} />
 ```
 
-# List of components
-
-- Avatar
-- Button
-- Card
-- Chips
-- ErrorPage
-- Footer
-- Form
-    - Input
-    - TextArea
-    - Toggle
-- Header (including a loader)
-    - HeaderAccount
-    - HeaderLoader
-    - HeaderLogo
-- HighlightPanel
-- Menu
-    - Sidebar
-- Modal
-- ProgressWizard
-- Spinner
-- Tabs
-- Toaster
-- Tooltip
-
-# List of types per component
-
-- Chips
-    - ChipType
-- HighlightPanel
-    - ColumnType
-    - HighlightPanelColumn
-    - ImageType
-- Menu
-    - MenuItem
-- Modal
-    - ModalProps
-- ProgressWizard
-    - ProgressWizardStep
-- Tab
-- Toast
+---
+
+## Exported types
+
+```ts
+import type {
+	AnnouncementItem,
+	HighlightPanelColumn,
+	HomeItem,
+	MainMenu,
+	MenuItem,
+	SubMenuItem,
+	ModalProps,
+	ProgressWizardStep,
+	RadioOption,
+	SelectOption,
+	SwitcherOption,
+	Tab,
+	ToastNotification,
+	WaffleItem
+} from '@softwareone/spi-sv5-library';
+```
+
+## Exported enums
+
+```ts
+import { ChipType, ColumnType, ImageType } from '@softwareone/spi-sv5-library';
+```
+
+---
+
+## License
+
+MIT © SoftwareOne

package/dist/{Confirmation → components/confirmation}/Confirmation.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Button, Modal, Spinner, addToast } from '../index.js';
+	import { Button, Modal, Spinner, addToast } from '../../index.js';
 
 	interface Props {
 		title: string;
 		confirmationText: string;
 		confirmButtonText?: string;
-		showModal?: boolean;
+		show?: boolean;
 		onconfirm: () => Promise<string | void> | string | void;
 		onclose?: VoidFunction;
 	}
@@ -14,7 +14,7 @@
 		title,
 		confirmationText,
 		confirmButtonText = 'Proceed',
-		showModal = $bindable(false),
+		show = $bindable(false),
 		onconfirm,
 		onclose
 	}: Props = $props();
@@ -26,7 +26,7 @@
 
 		const error = await onconfirm();
 		if (error === undefined) {
-			showModal = false;
+			show = false;
 		} else {
 			addToast({ message: error, type: 'danger' });
 		}
@@ -35,7 +35,7 @@
 	};
 </script>
 
-<Modal {title} bind:showModal {onclose}>
+<Modal {title} bind:show {onclose}>
 	<Spinner show={isLoading} />
 	<p>{confirmationText}</p>
 	{#snippet footer()}

package/dist/{Confirmation → components/confirmation}/Confirmation.svelte.d.ts

@@ -2,10 +2,10 @@ interface Props {
     title: string;
     confirmationText: string;
     confirmButtonText?: string;
-    showModal?: boolean;
+    show?: boolean;
     onconfirm: () => Promise<string | void> | string | void;
     onclose?: VoidFunction;
 }
-declare const Confirmation: import("svelte").Component<Props, {}, "showModal">;
+declare const Confirmation: import("svelte").Component<Props, {}, "show">;
 type Confirmation = ReturnType<typeof Confirmation>;
 export default Confirmation;

package/dist/{Controls/AttachFile → components/controls/attach-file}/AttachFile.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Attachment } from 'svelte/attachments';
 
-	import type { LabelProps } from '../Label/types.js';
-	import { Label, Notification } from '../../index.js';
+	import { Label, Notification } from '../../../index.js';
+	import type { LabelProps } from '../label/types.js';
 	import FileManager from './FileManager.svelte';
 	import Warnings from './Warnings.svelte';
 

package/dist/{Controls/AttachFile → components/controls/attach-file}/AttachFile.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from '../Label/types.js';
+import type { LabelProps } from '../label/types.js';
 interface Props extends LabelProps {
     accept?: string;
     multiple?: boolean;

package/dist/{Controls/Input → components/controls/input}/Input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/types.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';

package/dist/{Controls/Input → components/controls/input}/Input.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { LabelProps } from '../Label/types.js';
+import type { LabelProps } from '../label/types.js';
 type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
 interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
     type?: InputType;

package/dist/{Controls/Label → components/controls/label}/Label.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip } from '../../index.js';
+	import { Tooltip } from '../../../index.js';
 	import type { LabelProps } from './types.js';
 
 	let { label, id, required, optional, infoTooltip }: LabelProps = $props();

package/dist/{Controls/RadioGroup → components/controls/radio-group}/RadioGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/types.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
 	import type { OptionValueType, RadioOption } from './types.js';
 
 	interface Props extends LabelProps {

package/dist/{Controls/RadioGroup → components/controls/radio-group}/RadioGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from '../Label/types.js';
+import type { LabelProps } from '../label/types.js';
 import type { OptionValueType, RadioOption } from './types.js';
 interface Props extends LabelProps {
     options: string[] | RadioOption[];

package/dist/{Controls/Select → components/controls/select}/Select.svelte

@@ -3,9 +3,9 @@
 	import type { Action } from 'svelte/action';
 	import type { Attachment } from 'svelte/attachments';
 
-	import { Search, type SelectOption } from '../../index.js';
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/types.js';
+	import { Search, type SelectOption } from '../../../index.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
 
 	interface Props extends LabelProps {
 		options: string[] | SelectOption[];

package/dist/{Controls/Select → components/controls/select}/Select.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
-import { type SelectOption } from '../../index.js';
-import type { LabelProps } from '../Label/types.js';
+import { type SelectOption } from '../../../index.js';
+import type { LabelProps } from '../label/types.js';
 interface Props extends LabelProps {
     options: string[] | SelectOption[];
     placeholder?: string;

package/dist/{Controls/TextArea → components/controls/textarea}/TextArea.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/types.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
 
 	interface Props extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
 		value?: string | null;

package/dist/{Controls/TextArea → components/controls/textarea}/TextArea.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
-import type { LabelProps } from '../Label/types.js';
+import type { LabelProps } from '../label/types.js';
 interface Props extends Omit<HTMLTextareaAttributes, 'value'>, LabelProps {
     value?: string | null;
     error?: string | string[];

package/dist/{Controls/Toggle → components/controls/toggle}/Toggle.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/types.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
 
 	interface Props extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
 		checked?: boolean;

package/dist/{Controls/Toggle → components/controls/toggle}/Toggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LabelProps } from '../Label/types.js';
+import type { LabelProps } from '../label/types.js';
 interface Props extends Pick<LabelProps, 'id' | 'label' | 'infoTooltip'> {
     checked?: boolean;
     disabled?: boolean;

package/dist/{DeleteConfirmation → components/delete-confirmation}/DeleteConfirmation.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { Button, Input, Modal, Spinner, addToast } from '../index.js';
+	import { Button, Input, Modal, Spinner, addToast } from '../../index.js';
 
 	interface Props {
 		confirmationName?: string;
 		enableDoubleConfirmation?: boolean;
-		showModal?: boolean;
+		show?: boolean;
 		ondelete: () => Promise<string | void> | string | void;
 		onclose?: VoidFunction;
 	}
@@ -12,7 +12,7 @@
 	let {
 		confirmationName = '',
 		enableDoubleConfirmation = false,
-		showModal = $bindable(false),
+		show = $bindable(false),
 		ondelete,
 		onclose
 	}: Props = $props();
@@ -29,7 +29,7 @@
 
 		const error = await ondelete();
 		if (error === undefined) {
-			showModal = false;
+			show = false;
 		} else {
 			addToast({ message: error, type: 'danger' });
 		}
@@ -38,7 +38,7 @@
 	};
 </script>
 
-<Modal title="Delete confirmation" bind:showModal {onclose}>
+<Modal title="Delete confirmation" bind:show {onclose}>
 	<Spinner show={isLoading} />
 	<div class="content">
 		<p>{confirmationText}</p>

package/dist/{DeleteConfirmation → components/delete-confirmation}/DeleteConfirmation.svelte.d.ts

@@ -1,10 +1,10 @@
 interface Props {
     confirmationName?: string;
     enableDoubleConfirmation?: boolean;
-    showModal?: boolean;
+    show?: boolean;
     ondelete: () => Promise<string | void> | string | void;
     onclose?: VoidFunction;
 }
-declare const DeleteConfirmation: import("svelte").Component<Props, {}, "showModal">;
+declare const DeleteConfirmation: import("svelte").Component<Props, {}, "show">;
 type DeleteConfirmation = ReturnType<typeof DeleteConfirmation>;
 export default DeleteConfirmation;

package/dist/{ErrorPage → components/error-page}/ErrorPage.svelte

@@ -2,8 +2,8 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 
-	import FeedbackIcon from '../assets/icons/feedback.svg';
-	import { Button } from '../index.js';
+	import FeedbackIcon from '../../assets/icons/feedback.svg';
+	import { Button } from '../../index.js';
 
 	interface Props {
 		status: number;

package/dist/{Form → components/form}/Form.svelte

@@ -10,9 +10,9 @@
 	} from 'sveltekit-superforms/client';
 	import { z } from 'zod';
 
-	import { addToast, Spinner } from '../index.js';
+	import { addToast, Spinner } from '../../index.js';
 	import { getFormContext } from './context.js';
-	import { isEqual } from './helper.js';
+	import { isEqual } from './utils.js';
 	import type { FormError } from './types.js';
 
 	type Schema = z.infer<typeof schema>;

package/dist/components/form/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Form } from './Form.svelte';
+export { getFormContext, setFormContext } from './context.js';
+export { validateSchema } from './utils.js';
+export { createZodString } from './zod-validations.js';
+export type { FormContext, FormError } from './types.js';

package/dist/components/form/index.js

@@ -0,0 +1,4 @@
+export { default as Form } from './Form.svelte';
+export { getFormContext, setFormContext } from './context.js';
+export { validateSchema } from './utils.js';
+export { createZodString } from './zod-validations.js';

package/dist/{Header → components/header}/Header.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { AnnouncementItem, MenuItem } from '../index.js';
-	import Announcement from '../Announcement/Announcement.svelte';
-	import Menu from '../Menu/Menu.svelte';
-	import Waffle from '../Waffle/Waffle.svelte';
-	import type { WaffleItem } from '../Waffle/types.js';
+	import type { AnnouncementItem, MenuItem } from '../../index.js';
+	import Announcement from '../announcement/Announcement.svelte';
+	import Menu from '../menu/Menu.svelte';
+	import Waffle from '../waffle/Waffle.svelte';
+	import type { WaffleItem } from '../waffle/types.js';
 	import HeaderAccount from './HeaderAccount.svelte';
 	import HeaderLoader from './HeaderLoader.svelte';
 	import HeaderLogo from './HeaderLogo.svelte';

package/dist/{Header → components/header}/Header.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { AnnouncementItem, MenuItem } from '../index.js';
-import type { WaffleItem } from '../Waffle/types.js';
+import type { AnnouncementItem, MenuItem } from '../../index.js';
+import type { WaffleItem } from '../waffle/types.js';
 interface Props {
     title?: string;
     homeUrl?: string;

package/dist/{Header → components/header}/HeaderAccount.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { Avatar, type MenuItem } from '../index.js';
+	import { Avatar, type MenuItem } from '../../index.js';
 	import { fade } from 'svelte/transition';
 
 	interface Props {

package/dist/{Header → components/header}/HeaderAccount.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type MenuItem } from '../index.js';
+import { type MenuItem } from '../../index.js';
 interface Props {
     userName: string;
     accountName?: string;

package/dist/{HighlightPanel → components/highlight-panel}/HighlightPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	import { Avatar, Chips, ColumnType, ImageType, type HighlightPanelColumn } from '../index.js';
+	import { Avatar, Chips, ColumnType, ImageType, type HighlightPanelColumn } from '../../index.js';
 
 	interface Props {
 		columns: HighlightPanelColumn[];

package/dist/{HighlightPanel → components/highlight-panel}/HighlightPanel.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { type HighlightPanelColumn } from '../index.js';
+import { type HighlightPanelColumn } from '../../index.js';
 interface Props {
     columns: HighlightPanelColumn[];
     buttonSection?: Snippet;