@iroco/ui 1.0.0-9 → 1.0.1

package/dist/NavBar.stories.svelte.d.ts

@@ -1,37 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { NavBar as component };
-    export namespace argTypes {
-        namespace type {
-            namespace control {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            let options: string[];
-        }
-    }
-}
-/** @typedef {typeof __propDef.props}  NavBarProps */
-/** @typedef {typeof __propDef.events}  NavBarEvents */
-/** @typedef {typeof __propDef.slots}  NavBarSlots */
-export default class NavBar extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NavBarProps = typeof __propDef.props;
-export type NavBarEvents = typeof __propDef.events;
-export type NavBarSlots = typeof __propDef.slots;
 import { NavBar } from './index';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+    z_$$bindings?: Bindings;
+}
+declare const NavBar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NavBar = InstanceType<typeof NavBar>;
+export default NavBar;

package/dist/NavBar.svelte

@@ -1,32 +1,41 @@
-<script>import IconClose from "./IconClose.svelte";
-import { createEventDispatcher } from "svelte";
-import { navigating } from "$app/stores";
-import { NavigationItemType } from "./definition.js";
-export let navigationItems;
-export let type;
-export let version = null;
-let active;
-const dispatch = createEventDispatcher();
-const handleClickLink = (menuItem) => {
-  if (typeof menuItem.hrefOrCallback === "function") {
-    menuItem.hrefOrCallback();
-    return false;
-  }
-  dispatch("click_link");
-};
-function isActive(current, item) {
-  if (typeof item.hrefOrCallback === "string") {
-    return item.hrefOrCallback === current;
-  }
-  return false;
-}
-$:
-  if ($navigating)
-    active = $navigating.to.url.pathname;
+<script lang="ts">
+	import { IconClose } from './index';
+	import { createEventDispatcher } from 'svelte';
+	import { NavigationItemType, NavigationItem } from './definition.js';
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	interface Props {
+		navigationItems: Array<NavigationItem>;
+		type: 'sidebar' | 'topbar';
+		version?: string | null;
+		navigating?: { to: { url: { pathname: string } } } | null;
+		onclick?: MouseEventHandler<HTMLButtonElement>;
+	}
+
+	let { navigationItems, type, version = null, navigating = null, onclick }: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	const handleClickLink = (menuItem: NavigationItem) => {
+		if (typeof menuItem.hrefOrCallback === 'function') {
+			menuItem.hrefOrCallback();
+			return false; // to avoid calling href
+		}
+		dispatch('click_link');
+	};
+
+	function isActive(current: string, item: NavigationItem): boolean {
+		if (typeof item.hrefOrCallback === 'string') {
+			return item.hrefOrCallback === current;
+		}
+		return false;
+	}
+
+	let active = $derived(navigating?.to.url.pathname ?? '');
 </script>
 
 <nav data-testid={type} class="nav__{type}">
-	<button title="Close menu" on:click class="nav__{type}__close">
+	<button title="Close menu" {onclick} class="nav__{type}__close">
 		<IconClose width="3em" height="3em" />
 	</button>
 
@@ -39,7 +48,7 @@ $:
 					</form>
 				{:else}
 					<a
-						on:click={() => handleClickLink(item)}
+						onclick={() => handleClickLink(item)}
 						href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
 						class:iroco-ui-button={item.type === NavigationItemType.BUTTON}
 						class:iroco-ui-button--small={item.type === NavigationItemType.BUTTON}
@@ -106,6 +115,7 @@ $:
     max-width: calc(100% - 20px);
   }
 }
+
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -148,6 +158,7 @@ $:
     max-width: calc(100% - 20px);
   }
 }
+
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -185,6 +196,7 @@ $:
     max-width: calc(100% - 20px);
   }
 }
+
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -207,159 +219,7 @@ $:
     max-width: calc(100% - 20px);
   }
 }
-.container-wide {
-  width: calc(100% - 20px);
-  max-width: 2360px;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-}
-@media all and (max-width: 2560px) {
-  .container-wide {
-    max-width: 1620px;
-  }
-}
-@media all and (max-width: 1800px) {
-  .container-wide {
-    max-width: 1280px;
-  }
-}
-@media all and (max-width: 1440px) {
-  .container-wide {
-    max-width: 884px;
-  }
-}
-@media all and (max-width: 1024px) {
-  .container-wide {
-    max-width: 648px;
-  }
-}
-@media all and (max-width: 768px) {
-  .container-wide {
-    max-width: 496px;
-  }
-}
-@media all and (max-width: 596px) {
-  .container-wide {
-    max-width: 365px;
-  }
-}
-@media all and (max-width: 425px) {
-  .container-wide {
-    max-width: calc(100% - 60px);
-  }
-}
-@media all and (max-width: 375px) {
-  .container-wide {
-    max-width: calc(100% - 40px);
-  }
-}
-@media all and (max-width: 320px) {
-  .container-wide {
-    max-width: calc(100% - 20px);
-  }
-}
-.container-large {
-  width: calc(100% - 20px);
-  max-width: 1280px;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-}
-@media all and (max-width: 1440px) {
-  .container-large {
-    max-width: 884px;
-  }
-}
-@media all and (max-width: 1024px) {
-  .container-large {
-    max-width: 648px;
-  }
-}
-@media all and (max-width: 768px) {
-  .container-large {
-    max-width: 496px;
-  }
-}
-@media all and (max-width: 596px) {
-  .container-large {
-    max-width: 365px;
-  }
-}
-@media all and (max-width: 425px) {
-  .container-large {
-    max-width: calc(100% - 60px);
-  }
-}
-@media all and (max-width: 375px) {
-  .container-large {
-    max-width: calc(100% - 40px);
-  }
-}
-@media all and (max-width: 320px) {
-  .container-large {
-    max-width: calc(100% - 20px);
-  }
-}
-.container-medium {
-  width: calc(100% - 20px);
-  max-width: 884px;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-}
-@media all and (max-width: 1024px) {
-  .container-medium {
-    max-width: 648px;
-  }
-}
-@media all and (max-width: 768px) {
-  .container-medium {
-    max-width: 496px;
-  }
-}
-@media all and (max-width: 596px) {
-  .container-medium {
-    max-width: 365px;
-  }
-}
-@media all and (max-width: 425px) {
-  .container-medium {
-    max-width: calc(100% - 60px);
-  }
-}
-@media all and (max-width: 375px) {
-  .container-medium {
-    max-width: calc(100% - 40px);
-  }
-}
-@media all and (max-width: 320px) {
-  .container-medium {
-    max-width: calc(100% - 20px);
-  }
-}
-.container-small {
-  width: calc(100% - 20px);
-  max-width: 496px;
-  margin-left: auto;
-  margin-right: auto;
-  transition: max-width ease-out 200ms;
-}
-@media all and (max-width: 425px) {
-  .container-small {
-    max-width: calc(100% - 60px);
-  }
-}
-@media all and (max-width: 375px) {
-  .container-small {
-    max-width: calc(100% - 40px);
-  }
-}
-@media all and (max-width: 320px) {
-  .container-small {
-    max-width: calc(100% - 20px);
-  }
-}
+
 .iroco-ui-button {
   cursor: pointer;
   -webkit-touch-callout: none;
@@ -375,9 +235,9 @@ $:
   border-radius: 0.3em;
 }
 .iroco-ui-button--basic {
-  color: var(--btn-basic-label);
-  background: var(--btn-basic-bg);
-  border: 1px solid var(--btn-basic-border);
+  color: var(--btn-secondary-label);
+  background: var(--btn-secondary-bg);
+  border: 1px solid var(--btn-secondary-border);
 }
 .iroco-ui-button--dark {
   background: var(--dark-btn-primary-bg);
@@ -414,6 +274,10 @@ $:
 .iroco-ui-button.disabled:hover, .iroco-ui-button:disabled:hover {
   box-shadow: none;
 }
+.iroco-ui-button--full-width {
+  width: 100%;
+}
+
 .iroco-ui-link {
   background: none;
   border: none;
@@ -421,6 +285,7 @@ $:
   color: var(--color-text);
   cursor: pointer;
 }
+
 .nav__sidebar__item, .nav__topbar__item {
   text-decoration: none;
   display: block;
@@ -476,6 +341,7 @@ $:
   padding-left: 2em;
   color: var(--color-text-dark);
 }
+
 @media all and (max-width: 768px) {
   .nav__sidebar, .nav__topbar {
     position: fixed;

package/dist/NavBar.svelte.d.ts

@@ -1,22 +1,35 @@
-import { SvelteComponent } from "svelte";
-import type { NavigationItem } from './definition';
-declare const __propDef: {
-    props: {
-        navigationItems: Array<NavigationItem>;
-        type: 'sidebar' | 'topbar';
-        version?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        click_link: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+import { NavigationItem } from './definition.js';
+import type { MouseEventHandler } from 'svelte/elements';
+interface Props {
+    navigationItems: Array<NavigationItem>;
+    type: 'sidebar' | 'topbar';
+    version?: string | null;
+    navigating?: {
+        to: {
+            url: {
+                pathname: string;
+            };
+        };
+    } | null;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    slots: {};
-};
-export type NavBarProps = typeof __propDef.props;
-export type NavBarEvents = typeof __propDef.events;
-export type NavBarSlots = typeof __propDef.slots;
-export default class NavBar extends SvelteComponent<NavBarProps, NavBarEvents, NavBarSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const NavBar: $$__sveltets_2_IsomorphicComponent<Props, {
+    click_link: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type NavBar = InstanceType<typeof NavBar>;
+export default NavBar;

package/dist/Navigation.stories.svelte

@@ -1,48 +1,50 @@
-<script context="module">
-	import Navigation from './Navigation.svelte';
+<script module lang="ts">
+	import { Navigation } from './index';
 	import { NavigationItem, NavigationItemType } from './definition';
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+
 
-	export const meta = {
 		title: 'Navigation',
 		component: Navigation,
 		argTypes: {
-			type: {
-				control: { type: 'select' },
-				options: ['sidebar', 'topbar']
-			},
-			title: {
-				control: { type: 'text' }
-			},
-			version: {
-				control: { type: 'text' }
-			},
 			color: {
 				control: { type: 'color' }
 			}
+		},
+		args: {
+			type: 'topbar',
+			navigationItems: [
+				new NavigationItem('About', `/about`),
+				new NavigationItem('Foo', `/foo`),
+				new NavigationItem('Bar', `/bar`),
+				new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
+				new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
+				new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
+			]
 		}
-	};
+	});
 </script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<Navigation
 		{...args}
-		navigationItems={[
-			new NavigationItem('About', `/about`),
-			new NavigationItem('Foo', `/foo`),
-			new NavigationItem('Bar', `/bar`),
-			new NavigationItem('Button', `/bar`, NavigationItemType.BUTTON),
-			new NavigationItem('Anchor', `/bar`, NavigationItemType.ANCHOR),
-			new NavigationItem('Form', `/bar`, NavigationItemType.FORM)
-		]}
 	/>
-</Template>
+{/snippet}
 
 <Story name="Default" />
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
-
 <Story name="Title" args={{ title: 'Alternative title' }} />
 <Story name="Color" args={{ color: '#ABCDEF' }} />
+<Story name="Active" args={{
+	navigating:{to:{url:{pathname:"/bar"}}},
+		navigationItems: [
+				new NavigationItem('About', `/about`),
+				new NavigationItem('Foo', `/foo`),
+				new NavigationItem('Bar', `/bar`),
+			]
+}} />

package/dist/Navigation.stories.svelte.d.ts

@@ -1,59 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { Navigation as component };
-    export namespace argTypes {
-        export namespace type {
-            namespace control {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            let options: string[];
-        }
-        export namespace title_1 {
-            export namespace control_1 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_1 as control };
-        }
-        export { title_1 as title };
-        export namespace version {
-            export namespace control_2 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_2 as control };
-        }
-        export namespace color {
-            export namespace control_3 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_3 as control };
-        }
-    }
+import { Navigation } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
 }
-/** @typedef {typeof __propDef.props}  NavigationProps */
-/** @typedef {typeof __propDef.events}  NavigationEvents */
-/** @typedef {typeof __propDef.slots}  NavigationSlots */
-export default class Navigation extends SvelteComponent<{
-    [x: string]: never;
-}, {
+declare const Navigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NavigationProps = typeof __propDef.props;
-export type NavigationEvents = typeof __propDef.events;
-export type NavigationSlots = typeof __propDef.slots;
-import Navigation from './Navigation.svelte';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+}, {}, {}, string>;
+type Navigation = InstanceType<typeof Navigation>;
+export default Navigation;

package/dist/Navigation.svelte

@@ -1,16 +1,31 @@
-<script>import IconBurger from "./IconBurger.svelte";
-import IconIrocoLogo from "./IconIrocoLogo.svelte";
-import IrocoLogo from "./IrocoLogo.svelte";
-import NavBar from "./NavBar.svelte";
-import { Color } from "./definition";
-import { base } from "$app/paths";
-export let href = `${base}/`;
-export let navigationItems;
-export let type = "topbar";
-export let title = null;
-export let version = null;
-export let color = Color.green;
-let showMenu = false;
+<script lang="ts">
+	import type { NavigationItem } from './definition';
+	import { Color } from './definition';
+	import { IconBurger, IconIrocoLogo, IrocoLogo, NavBar } from './';
+
+	interface Props {
+		baseUrl?: string;
+		href?: string;
+		navigationItems: Array<NavigationItem>;
+		type?: 'sidebar' | 'topbar';
+		title?: string | null;
+		version?: string | null;
+		color?: Color | string;
+		navigating?: { to: { url: { pathname: string } } } | null;
+	}
+
+	let showMenu = $state(false);
+
+	let {
+		baseUrl = '',
+		href = `${baseUrl}/`,
+		navigationItems,
+		type = 'topbar',
+		title = null,
+		version = null,
+		color = Color.green,
+		navigating
+	}: Props = $props();
 </script>
 
 <div class="navigation--mobile">
@@ -23,7 +38,7 @@ let showMenu = false;
 		{/if}
 	</div>
 
-	<button title="Menu button" on:click={() => (showMenu = true)} class="navigation--mobile__button">
+	<button title="Menu button" onclick={() => (showMenu = true)} class="navigation--mobile__button">
 		<IconBurger width="3em" height="3em" />
 	</button>
 
@@ -33,6 +48,7 @@ let showMenu = false;
 			on:click={() => (showMenu = false)}
 			{type}
 			{navigationItems}
+			{navigating}
 			{version}
 		/>
 	{/if}
@@ -102,6 +118,7 @@ let showMenu = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -144,6 +161,7 @@ let showMenu = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -181,6 +199,7 @@ let showMenu = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -203,6 +222,7 @@ let showMenu = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .navigation {
   display: flex;
   flex-direction: row;
@@ -221,6 +241,7 @@ let showMenu = false;
 .navigation__title-container h1 {
   padding-left: 1em;
 }
+
 @media all and (max-width: 768px) {
   .navigation {
     display: none;