@softwareone/spi-sv5-library 1.2.0 → 1.3.0

package/dist/Card/Card.svelte

@@ -2,31 +2,29 @@
 	import type { Snippet } from 'svelte';
 
 	interface CardProps {
-		type?: 'layout' | 'highlight';
 		children?: Snippet;
+		disablePadding?: boolean;
 	}
 
-	let { type = 'layout', children }: CardProps = $props();
+	let { children, disablePadding = false }: CardProps = $props();
 </script>
 
-<div class="card card-{type}">
+<div class="card" class:padding={!disablePadding}>
 	{@render children?.()}
 </div>
 
 <style>
 	.card {
 		width: 100%;
-		min-height: var(--card-min-height, auto);
 		background: #fff;
 		margin-bottom: 24px;
-		padding: 24px;
 		border-radius: 16px;
 		box-shadow:
 			0px 1px 16px rgba(107, 113, 128, 0.1),
 			0px 1px 3px rgba(107, 113, 128, 0.2);
 	}
 
-	.card-layout {
-		--card-min-height: 100vh;
+	.padding {
+		padding: 24px;
 	}
 </style>

package/dist/Card/Card.svelte.d.ts

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

package/dist/Form/Input/Input.svelte

@@ -14,6 +14,7 @@
 		description?: string;
 		currency?: string;
 		disableValidationColor?: boolean;
+		infoTooltip?: string;
 	}
 
 	let {
@@ -30,6 +31,7 @@
 		readonly,
 		oninput,
 		disableValidationColor = false,
+		infoTooltip,
 		...props
 	}: InputProps = $props();
 
@@ -51,7 +53,7 @@
 </script>
 
 <div class="form-container">
-	<Label {label} {id} {optional} {required} />
+	<Label {label} {id} {optional} {required} {infoTooltip} />
 	<div
 		class={[
 			'form-input-wrapper',

package/dist/Form/Input/Input.svelte.d.ts

@@ -9,6 +9,7 @@ interface InputProps extends Omit<HTMLInputAttributes, 'type' | 'value'> {
     description?: string;
     currency?: string;
     disableValidationColor?: boolean;
+    infoTooltip?: string;
 }
 declare const Input: import("svelte").Component<InputProps, {}, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/Form/Label.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
+	import { Tooltip } from '../index.js';
+
 	interface LabelProps {
 		label?: string;
 		id?: string | null;
 		required?: boolean | null;
 		optional?: boolean;
+		infoTooltip?: string;
 	}
 
-	let { label, id, required, optional }: LabelProps = $props();
+	let { label, id, required, optional, infoTooltip }: LabelProps = $props();
 </script>
 
 {#if label}
@@ -17,6 +20,13 @@
 		{:else if optional}
 			<span class="form-label-optional">Optional</span>
 		{/if}
+		{#if infoTooltip}
+			<Tooltip content={infoTooltip} width="sm">
+				{#snippet children()}
+					<span class="material-icons-outlined">info</span>
+				{/snippet}
+			</Tooltip>
+		{/if}
 	</div>
 {/if}
 
@@ -34,4 +44,9 @@
 	.form-label-required {
 		color: #dc2626;
 	}
+
+	.material-icons-outlined {
+		font-size: 14px;
+		vertical-align: middle;
+	}
 </style>

package/dist/Form/Label.svelte.d.ts

@@ -3,6 +3,7 @@ interface LabelProps {
     id?: string | null;
     required?: boolean | null;
     optional?: boolean;
+    infoTooltip?: string;
 }
 declare const Label: import("svelte").Component<LabelProps, {}, "">;
 type Label = ReturnType<typeof Label>;

package/dist/Form/Select/Select.svelte

@@ -21,6 +21,7 @@
 		error?: string | string[];
 		customSelection?: Snippet<[option: SelectOption]>;
 		customOption?: Snippet<[option: SelectOption]>;
+		infoTooltip?: string;
 	}
 
 	let {
@@ -38,7 +39,8 @@
 		value = $bindable(),
 		error,
 		customSelection,
-		customOption
+		customOption,
+		infoTooltip
 	}: SelectProps = $props();
 
 	let dropdownElement: HTMLElement;
@@ -156,7 +158,7 @@
 
 <div class="form-container">
 	{#if label}
-		<Label {label} {required} {optional} />
+		<Label {label} {required} {optional} {infoTooltip} />
 	{/if}
 
 	<div

package/dist/Form/Select/Select.svelte.d.ts

@@ -16,6 +16,7 @@ interface SelectProps {
     error?: string | string[];
     customSelection?: Snippet<[option: SelectOption]>;
     customOption?: Snippet<[option: SelectOption]>;
+    infoTooltip?: string;
 }
 declare const Select: import("svelte").Component<SelectProps, {}, "value">;
 type Select = ReturnType<typeof Select>;

package/dist/Form/TextArea/TextArea.svelte

@@ -10,6 +10,7 @@
 		description?: string;
 		maximumCharactersAllowed?: number;
 		resize?: boolean;
+		infoTooltip?: string;
 	}
 
 	let {
@@ -22,6 +23,7 @@
 		maximumCharactersAllowed,
 		resize = false,
 		id,
+		infoTooltip,
 		...props
 	}: TextAreaProps = $props();
 
@@ -38,7 +40,7 @@
 </script>
 
 <div class="form-container">
-	<Label {label} {id} {optional} {required} />
+	<Label {label} {id} {optional} {required} {infoTooltip} />
 
 	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
 		<textarea
@@ -87,7 +89,6 @@
 		line-height: 20px;
 	}
 
-
 	.form-message {
 		font-size: 12px;
 	}

package/dist/Form/TextArea/TextArea.svelte.d.ts

@@ -7,6 +7,7 @@ interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
     description?: string;
     maximumCharactersAllowed?: number;
     resize?: boolean;
+    infoTooltip?: string;
 }
 declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;

package/dist/HighlightPanel/HighlightPanel.svelte

@@ -65,6 +65,10 @@
 		line-height: 20px;
 	}
 
+	h2 {
+		font-weight: bold;
+	}
+
 	.text-description {
 		color: #6b7180;
 	}

package/dist/Home/Home.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import type { HomeItem } from '../index.js';
+
+	interface HomeProps {
+		title: string;
+		homeItems: HomeItem[];
+	}
+
+	let { title, homeItems }: HomeProps = $props();
+
+	const hasSingleItem: boolean = homeItems.length === 1;
+	const hasManyItems: boolean = homeItems.length > 1;
+</script>
+
+<h1 class={['home-title', hasSingleItem && 'centered']}>
+	{title}
+</h1>
+
+<section class={['home-container', hasSingleItem && 'centered', hasManyItems && 'grid']}>
+	{#each homeItems as homeItem}
+		<a href={homeItem.url} class="home-item">
+			<span>
+				<img src={homeItem.icon} alt={homeItem.text} />
+			</span>
+			<div>
+				<h2>{homeItem.text}</h2>
+				<p>{homeItem.detail}</p>
+			</div>
+		</a>
+	{/each}
+</section>
+
+<style>
+	.home-title {
+		padding-bottom: 16px;
+		font-size: 18px;
+		line-height: 1.55;
+		font-weight: 600;
+	}
+
+	.home-title.centered {
+		display: flex;
+		justify-content: center;
+	}
+
+	.home-container {
+		--black-1: #434952;
+		--black-2: #273444;
+		--white: #fff;
+	}
+
+	.home-container.centered {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.home-container.grid {
+		display: grid;
+		gap: 24px;
+
+		@media (width >= 640px) {
+			grid-template-columns: repeat(1, minmax(0, 1fr));
+		}
+
+		@media (width >= 1024px) {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		@media (width >= 1536px) {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+	}
+
+	.home-container > .home-item {
+		display: flex;
+		max-height: 150px;
+		max-width: 770px;
+		gap: 16px;
+		padding: 12px;
+		border-radius: 16px;
+		background: var(--black-1);
+		transition: background 0.2s ease-in-out;
+
+		> span {
+			display: flex;
+			align-items: center;
+
+			> img {
+				width: 40px;
+				height: 40px;
+				filter: invert(100%);
+			}
+		}
+
+		> div {
+			color: var(--white);
+
+			> h2 {
+				padding-bottom: 8px;
+				font-size: 16px;
+				line-height: 1.5;
+				font-weight: 600;
+			}
+
+			> p {
+				font-size: 14px;
+				line-height: 1.42;
+			}
+		}
+	}
+
+	.home-container > .home-item:hover {
+		background: var(--black-2);
+	}
+</style>

package/dist/Home/Home.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HomeItem } from '../index.js';
+interface HomeProps {
+    title: string;
+    homeItems: HomeItem[];
+}
+declare const Home: import("svelte").Component<HomeProps, {}, "">;
+type Home = ReturnType<typeof Home>;
+export default Home;

package/dist/Home/homeState.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type MenuItem } from '../index.js';
+export type HomeItem = Omit<MenuItem, 'children'> & {
+    detail?: string;
+};

package/dist/Home/homeState.svelte.js

@@ -0,0 +1 @@
+import {} from '../index.js';

package/dist/Modal/Modal.svelte

@@ -16,70 +16,52 @@
 		footer
 	}: ModalProps = $props();
 
-	let dialog = $state<HTMLDialogElement>();
-
-	$effect(() => {
-		showModal ? dialog?.showModal() : dialog?.close();
-	});
-
 	const onHandleClose = () => {
 		showModal = false;
 		onclose();
 	};
 </script>
 
-<dialog
-	bind:this={dialog}
-	onclose={onHandleClose}
-	class="modal {width}"
-	transition:scale={{
-		duration: 150,
-		start: 0.95
-	}}
->
-	<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
-	<ModalContent content={children} />
-	<ModalFooter {footer} onclose={onHandleClose} />
-</dialog>
+<div class="modal-container">
+	<div
+		onclose={onHandleClose}
+		class="modal {width}"
+		transition:scale={{
+			duration: 150,
+			start: 0.95
+		}}
+	>
+		<ModalHeader {title} {errorIcon} onclose={onHandleClose} />
+		<ModalContent content={children} />
+		<ModalFooter {footer} onclose={onHandleClose} />
+	</div>
+</div>
 
 <style>
-	dialog {
-		align-self: center;
+	.modal-container {
+		display: flex;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		width: 100%;
+		height: 100%;
+		background-color: #e0e5e880;
+	}
+
+	.modal {
+		width: var(--modal-width);
+		max-height: 90%;
 		border-radius: 16px;
 		background-color: #ffffff;
-		border: none;
 		margin: auto;
+		overflow-y: auto;
 		box-shadow:
 			0px 1px 10px 0px rgba(51, 56, 64, 0.12),
 			0px 2px 4px -1px rgba(51, 56, 64, 0.2),
 			0px 4px 5px 0px rgba(51, 56, 64, 0.14);
 	}
 
-	dialog:focus-visible {
-		outline: none;
-	}
-
-	dialog::backdrop {
-		background: #e0e5e880;
-	}
-
-	dialog::-webkit-scrollbar {
-		width: 10px;
-	}
-
-	dialog::-webkit-scrollbar-thumb {
-		background: #888;
-		border-radius: 10px;
-	}
-
-	dialog::-webkit-scrollbar-thumb:hover {
-		background: #555;
-	}
-
-	.modal {
-		width: var(--modal-width);
-	}
-
 	.modal.xs {
 		--modal-width: 500px;
 	}
@@ -96,7 +78,20 @@
 		--modal-width: 1000px;
 	}
 
-	:global(html:has(dialog.modal[open])) {
+	.modal::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	.modal::-webkit-scrollbar-thumb {
+		background: #888;
+		border-radius: 10px;
+	}
+
+	.modal::-webkit-scrollbar-thumb:hover {
+		background: #555;
+	}
+
+	:global(html:has(.modal-container)) {
 		overflow: hidden;
 	}
 </style>

package/dist/Tabs/Tabs.svelte

@@ -59,6 +59,7 @@
 		display: flex;
 		gap: 16px;
 		border-bottom: 1px solid #e0e5e8;
+		padding: 0 24px;
 	}
 
 	.tabs-list button {
@@ -68,6 +69,7 @@
 		position: relative;
 		border: none;
 		font-size: 16px;
+		font-weight: 500;
 	}
 
 	.tabs-list button:hover {
@@ -77,6 +79,7 @@
 
 	.tabs-list button.active {
 		color: #472aff;
+		font-weight: 600;
 	}
 
 	.tabs-list button::after {

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import HeaderLoader from './Header/HeaderLoader.svelte';
 import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
 import { ColumnType, ImageType, type HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
+import Home from './Home/Home.svelte';
+import type { HomeItem } from './Home/homeState.svelte.js';
 import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import type { MenuItem } from './Menu/SidebarState.svelte';
@@ -35,4 +37,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type Tab, type Toast };

package/dist/index.js

@@ -18,6 +18,7 @@ import HeaderLoader from './Header/HeaderLoader.svelte';
 import HeaderLogo from './Header/HeaderLogo.svelte';
 import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
 import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
+import Home from './Home/Home.svelte';
 import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
@@ -30,4 +31,4 @@ import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };
+export { Accordion, addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, ImageType, Input, Menu, Modal, Notification, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",