@softwareone/spi-sv5-library 1.14.0 → 1.14.2

package/README.md

@@ -1,102 +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: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,
-	Breadcrumbs,
-	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: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 BreadcrumbsNameMap,
-	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
-- Breadcrumbs
-- 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
-
-- Breadcrumbs
-    - BreadcrumbsNameMap
-- 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/{Accordion → components/accordion}/Accordion.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface AccordionProps {
+	interface Props {
 		title: string;
 		disableBorder?: boolean;
 		isOpen?: boolean;
 		children: Snippet;
 	}
 
-	let {
-		title,
-		disableBorder = false,
-		isOpen = $bindable(false),
-		children
-	}: AccordionProps = $props();
+	let { title, disableBorder = false, isOpen = $bindable(false), children }: Props = $props();
 
 	const toggleAccordion = () => {
 		isOpen = !isOpen;

package/dist/{Accordion → components/accordion}/Accordion.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { Snippet } from 'svelte';
-interface AccordionProps {
+interface Props {
     title: string;
     disableBorder?: boolean;
     isOpen?: boolean;
     children: Snippet;
 }
-declare const Accordion: import("svelte").Component<AccordionProps, {}, "isOpen">;
+declare const Accordion: import("svelte").Component<Props, {}, "isOpen">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;

package/dist/{Announcement → components/announcement}/Announcement.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import type { AnnouncementItem } from './AnnouncementState.svelte.js';
+	import type { AnnouncementItem } from './types.js';
 
 	interface Props {
 		announcementItems?: AnnouncementItem[];

package/dist/{Announcement → components/announcement}/Announcement.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AnnouncementItem } from './AnnouncementState.svelte.js';
+import type { AnnouncementItem } from './types.js';
 interface Props {
     announcementItems?: AnnouncementItem[];
     showAnnouncement: boolean;

package/dist/{Avatar → components/avatar}/Avatar.svelte

@@ -2,7 +2,7 @@
 	type BackgroundColor = '#472AFF' | '#25282D';
 	type TextColor = '#333840' | '#FFFFFF';
 
-	interface AvatarProps {
+	interface Props {
 		text: string;
 		backgroundColor?: BackgroundColor;
 		textColor?: TextColor;
@@ -14,7 +14,7 @@
 		backgroundColor = '#25282D',
 		textColor = '#FFFFFF',
 		keepOrder = false
-	}: AvatarProps = $props();
+	}: Props = $props();
 
 	const avatarSrc = (text: string): string => {
 		const defaultValue = 'SO';

package/dist/{Avatar → components/avatar}/Avatar.svelte.d.ts

@@ -1,11 +1,11 @@
 type BackgroundColor = '#472AFF' | '#25282D';
 type TextColor = '#333840' | '#FFFFFF';
-interface AvatarProps {
+interface Props {
     text: string;
     backgroundColor?: BackgroundColor;
     textColor?: TextColor;
     keepOrder?: boolean;
 }
-declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+declare const Avatar: import("svelte").Component<Props, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/{Button → components/button}/Button.svelte

@@ -6,7 +6,7 @@
 	type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 	type VariantColor = 'primary' | 'danger';
 
-	interface ButtonProps extends HTMLButtonAttributes {
+	interface Props extends HTMLButtonAttributes {
 		variant?: Variant;
 		variantColor?: VariantColor;
 		loading?: boolean;
@@ -20,7 +20,7 @@
 		disabled = false,
 		children,
 		...props
-	}: ButtonProps = $props();
+	}: Props = $props();
 
 	const clearButtonFocus: Attachment<HTMLButtonElement> = (element: HTMLButtonElement) => {
 		if (loading) element.blur();

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

@@ -2,12 +2,12 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type Variant = 'primary' | 'secondary' | 'outline' | 'outline-none';
 type VariantColor = 'primary' | 'danger';
-interface ButtonProps extends HTMLButtonAttributes {
+interface Props extends HTMLButtonAttributes {
     variant?: Variant;
     variantColor?: VariantColor;
     loading?: boolean;
     children: Snippet;
 }
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/{Card → components/card}/Card.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface CardProps {
+	interface Props {
 		children?: Snippet;
 		disablePadding?: boolean;
 	}
 
-	let { children, disablePadding = false }: CardProps = $props();
+	let { children, disablePadding = false }: Props = $props();
 </script>
 
 <div class={['card', !disablePadding && 'padding']}>

package/dist/{Card → components/card}/Card.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
-interface CardProps {
+interface Props {
     children?: Snippet;
     disablePadding?: boolean;
 }
-declare const Card: import("svelte").Component<CardProps, {}, "">;
+declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/{Chips → components/chips}/Chips.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { ChipType } from './chipsState.svelte.js';
+	import { ChipType } from './enums.js';
 
-	interface ChipsProps {
+	interface Props {
 		type?: ChipType;
 		text?: string;
 	}
 
-	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: ChipsProps =
+	let { type = ChipType.Info, text = type.charAt(0).toUpperCase() + type.slice(1) }: Props =
 		$props();
 </script>
 

package/dist/components/chips/Chips.svelte.d.ts

@@ -0,0 +1,8 @@
+import { ChipType } from './enums.js';
+interface Props {
+    type?: ChipType;
+    text?: string;
+}
+declare const Chips: import("svelte").Component<Props, {}, "">;
+type Chips = ReturnType<typeof Chips>;
+export default Chips;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Modal, Spinner, addToast } from '../index.js';
+	import { Button, Modal, Spinner, addToast } from '../../index.js';
 
 	interface Props {
 		title: string;

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/labelState.svelte.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/labelState.svelte.js';
+import type { LabelProps } from '../label/types.js';
 interface Props extends LabelProps {
     accept?: string;
     multiple?: boolean;

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	interface WarningProps {
+	interface Props {
 		validationMessages: string[];
 	}
-	let { validationMessages }: WarningProps = $props();
+	let { validationMessages }: Props = $props();
 </script>
 
 <details class="container">

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

@@ -1,6 +1,6 @@
-interface WarningProps {
+interface Props {
     validationMessages: string[];
 }
-declare const Warnings: import("svelte").Component<WarningProps, {}, "">;
+declare const Warnings: import("svelte").Component<Props, {}, "">;
 type Warnings = ReturnType<typeof Warnings>;
 export default Warnings;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.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';
 
-	interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
+	interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
 		type?: InputType;
 		value?: string | number | null;
 		error?: string | string[];
@@ -31,7 +31,7 @@
 		disableValidationColor = false,
 		infoTooltip,
 		...props
-	}: InputProps = $props();
+	}: Props = $props();
 
 	let isPasswordVisible = $state(false);
 

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { LabelProps } from '../Label/labelState.svelte.js';
+import type { LabelProps } from '../label/types.js';
 type InputType = 'text' | 'password' | 'number' | 'date' | 'money';
-interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelProps {
     type?: InputType;
     value?: string | number | null;
     error?: string | string[];
@@ -9,6 +9,6 @@ interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'>, LabelP
     currency?: string;
     disableValidationColor?: boolean;
 }
-declare const Input: import("svelte").Component<InputProps, {}, "value">;
+declare const Input: import("svelte").Component<Props, {}, "value">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

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

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

@@ -1,4 +1,4 @@
-import type { LabelProps } from './labelState.svelte.js';
+import type { LabelProps } from './types.js';
 declare const Label: import("svelte").Component<LabelProps, {}, "">;
 type Label = ReturnType<typeof Label>;
 export default Label;

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import Label from '../Label/Label.svelte';
-	import type { LabelProps } from '../Label/labelState.svelte.js';
-	import type { OptionValueType, RadioOption } from './radioGroupState.svelte.js';
+	import Label from '../label/Label.svelte';
+	import type { LabelProps } from '../label/types.js';
+	import type { OptionValueType, RadioOption } from './types.js';
 
-	interface RadioGroupProps extends LabelProps {
+	interface Props extends LabelProps {
 		options: string[] | RadioOption[];
 		name: string;
 		value?: OptionValueType;
@@ -25,7 +25,7 @@
 		row = false,
 		description,
 		onchange
-	}: RadioGroupProps = $props();
+	}: Props = $props();
 
 	const isStringArray = (items: string[] | RadioOption[]): items is string[] =>
 		typeof items[0] === 'string';

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

@@ -1,6 +1,6 @@
-import type { LabelProps } from '../Label/labelState.svelte.js';
-import type { OptionValueType, RadioOption } from './radioGroupState.svelte.js';
-interface RadioGroupProps extends LabelProps {
+import type { LabelProps } from '../label/types.js';
+import type { OptionValueType, RadioOption } from './types.js';
+interface Props extends LabelProps {
     options: string[] | RadioOption[];
     name: string;
     value?: OptionValueType;
@@ -9,6 +9,6 @@ interface RadioGroupProps extends LabelProps {
     description?: string;
     onchange?: (value: OptionValueType) => void;
 }
-declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;