@iroco/ui 1.0.0-9 → 1.0.0

package/dist/ImageArticle.svelte

@@ -1,12 +1,27 @@
-<script>import { Icon } from "svelte-awesome";
-import chevronRight from "svelte-awesome/icons/chevronRight";
-export let imgSrc;
-export let figureCaption = void 0;
-export let alt;
-export let articleTitle;
-export let articleContent;
-export let buttonList = [];
-export let reversed = false;
+<script lang="ts">
+	import type { ButtonModel } from './definition';
+	import { Icon } from 'svelte-awesome';
+	import chevronRight from 'svelte-awesome/icons/chevronRight';
+
+	interface Props {
+		imgSrc: string;
+		figureCaption?: string | undefined;
+		alt: string;
+		articleTitle: string;
+		articleContent: string;
+		buttonList?: ButtonModel[];
+		reversed?: boolean;
+	}
+
+	let {
+		imgSrc,
+		figureCaption = undefined,
+		alt,
+		articleTitle,
+		articleContent,
+		buttonList = [],
+		reversed = false
+	}: Props = $props();
 </script>
 
 <div class="imagearticle" class:reversed>
@@ -89,6 +104,7 @@ export let reversed = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-large {
   width: calc(100% - 20px);
   max-width: 1280px;
@@ -131,6 +147,7 @@ export let reversed = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-medium {
   width: calc(100% - 20px);
   max-width: 884px;
@@ -168,6 +185,7 @@ export let reversed = false;
     max-width: calc(100% - 20px);
   }
 }
+
 .container-small {
   width: calc(100% - 20px);
   max-width: 496px;
@@ -190,159 +208,7 @@ export let reversed = false;
     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;
@@ -358,9 +224,9 @@ export let reversed = false;
   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);
@@ -397,6 +263,10 @@ export let reversed = false;
 .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;
@@ -404,6 +274,7 @@ export let reversed = false;
   color: var(--color-text);
   cursor: pointer;
 }
+
 .imagearticle {
   display: flex;
   justify-content: space-around;
@@ -436,6 +307,7 @@ export let reversed = false;
 .imagearticle.reversed {
   flex-direction: row-reverse;
 }
+
 @media all and (max-width: 768px) {
   .imagearticle {
     display: block;

package/dist/ImageArticle.svelte.d.ts

@@ -1,23 +1,13 @@
-import { SvelteComponent } from "svelte";
 import type { ButtonModel } from './definition';
-declare const __propDef: {
-    props: {
-        imgSrc: string;
-        figureCaption?: string | undefined;
-        alt: string;
-        articleTitle: string;
-        articleContent: string;
-        buttonList?: ButtonModel[] | undefined;
-        reversed?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ImageArticleProps = typeof __propDef.props;
-export type ImageArticleEvents = typeof __propDef.events;
-export type ImageArticleSlots = typeof __propDef.slots;
-export default class ImageArticle extends SvelteComponent<ImageArticleProps, ImageArticleEvents, ImageArticleSlots> {
+interface Props {
+    imgSrc: string;
+    figureCaption?: string | undefined;
+    alt: string;
+    articleTitle: string;
+    articleContent: string;
+    buttonList?: ButtonModel[];
+    reversed?: boolean;
 }
-export {};
+declare const ImageArticle: import("svelte").Component<Props, {}, "">;
+type ImageArticle = ReturnType<typeof ImageArticle>;
+export default ImageArticle;

package/dist/IrocoLogo.stories.svelte

@@ -1,7 +1,12 @@
-<script context="module">
+<script module lang="ts">
 	import { IrocoLogo } from './index';
 
-	export const meta = {
+	import {defineMeta,setTemplate} from '@storybook/addon-svelte-csf'
+
+	const {Story} = defineMeta({
+
+
+
 		title: 'Iroco-UI/Iroco/IrocoLogo',
 		type: 'Icons',
 		component: IrocoLogo,
@@ -17,15 +22,15 @@
 				max: 512
 			}
 		}
-	};
+	})
 </script>
 
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<IrocoLogo {...args} />
-</Template>
+{/snippet}
 
 <Story name="Default" />

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

@@ -1,50 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export let type: string;
-    export { IrocoLogo as component };
-    export namespace argTypes {
-        namespace width {
-            namespace control {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            let min: number;
-            let max: number;
-        }
-        namespace height {
-            export namespace control_1 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_1 as control };
-            let min_1: number;
-            export { min_1 as min };
-            let max_1: number;
-            export { max_1 as max };
-        }
-    }
-}
-/** @typedef {typeof __propDef.props}  IrocoLogoProps */
-/** @typedef {typeof __propDef.events}  IrocoLogoEvents */
-/** @typedef {typeof __propDef.slots}  IrocoLogoSlots */
-export default class IrocoLogo extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IrocoLogoProps = typeof __propDef.props;
-export type IrocoLogoEvents = typeof __propDef.events;
-export type IrocoLogoSlots = typeof __propDef.slots;
 import { IrocoLogo } 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 IrocoLogo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IrocoLogo = InstanceType<typeof IrocoLogo>;
+export default IrocoLogo;

package/dist/IrocoLogo.svelte

@@ -1,7 +1,16 @@
-<script>export let href = `/`;
-export let ariaLabel = "go to Iroco home";
-export let width = "10rem";
-export let height = "10rem";
+<script lang="ts">
+
+	let {
+		href = `/`,
+		ariaLabel = 'go to Iroco home',
+		width = '10rem',
+		height = '10rem'
+	}: {
+		href?: string;
+		ariaLabel?: string;
+		width?: string;
+		height?: string;
+	} = $props();
 </script>
 
 <a class="iroco-logo" {href} aria-label={ariaLabel}>

package/dist/IrocoLogo.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        href?: string | undefined;
-        ariaLabel?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+type $$ComponentProps = {
+    href?: string;
+    ariaLabel?: string;
+    width?: string;
+    height?: string;
 };
-export type IrocoLogoProps = typeof __propDef.props;
-export type IrocoLogoEvents = typeof __propDef.events;
-export type IrocoLogoSlots = typeof __propDef.slots;
-export default class IrocoLogo extends SvelteComponent<IrocoLogoProps, IrocoLogoEvents, IrocoLogoSlots> {
-}
-export {};
+declare const IrocoLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+type IrocoLogo = ReturnType<typeof IrocoLogo>;
+export default IrocoLogo;

package/dist/Loader.stories.svelte

@@ -1,19 +1,22 @@
-<script context="module">
+<script module lang="ts">
 	import { Loader } from './index';
 
-	export const meta = {
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+
+
 		title: 'Iroco-UI/Atoms/Loader',
 		component: Loader,
 		argTypes: {}
-	};
+	});
 </script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<Loader {...args} />
-</Template>
+{/snippet}
 
 <Story name="Default" />

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

@@ -1,29 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { Loader as component };
-    export let argTypes: {};
-}
-/** @typedef {typeof __propDef.props}  LoaderProps */
-/** @typedef {typeof __propDef.events}  LoaderEvents */
-/** @typedef {typeof __propDef.slots}  LoaderSlots */
-export default class Loader extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LoaderProps = typeof __propDef.props;
-export type LoaderEvents = typeof __propDef.events;
-export type LoaderSlots = typeof __propDef.slots;
 import { Loader } 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 Loader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Loader = InstanceType<typeof Loader>;
+export default Loader;

package/dist/Loader.svelte

@@ -1,4 +1,5 @@
-<script>import IconIrocoLogo from "./IconIrocoLogo.svelte";
+<script lang="ts">
+	import { IconIrocoLogo } from './index';
 </script>
 
 <div class="rotate linear infinite">
@@ -6,24 +7,24 @@
 </div>
 
 <style>
-	.rotate {
-		animation: rotation 2s;
-	}
+    .rotate {
+        animation: rotation 2s;
+    }
 
-	.linear {
-		animation-timing-function: linear;
-	}
+    .linear {
+        animation-timing-function: linear;
+    }
 
-	.infinite {
-		animation-iteration-count: infinite;
-	}
+    .infinite {
+        animation-iteration-count: infinite;
+    }
 
-	@keyframes rotation {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(359deg);
-		}
-	}
+    @keyframes rotation {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(359deg);
+        }
+    }
 </style>

package/dist/Loader.svelte.d.ts

@@ -1,14 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+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;
     };
-    slots: {};
-};
-export type LoaderProps = typeof __propDef.props;
-export type LoaderEvents = typeof __propDef.events;
-export type LoaderSlots = typeof __propDef.slots;
-export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Loader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Loader = InstanceType<typeof Loader>;
+export default Loader;

package/dist/NavBar.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
+<script module lang="ts">
 	import { NavigationItem, NavigationItemType } from './definition';
 	import { NavBar } from './index';
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
-	export const meta = {
+	const { Story } = defineMeta({
 		title: 'NavBar',
 		component: NavBar,
 		argTypes: {
@@ -10,28 +11,36 @@
 				control: { type: 'select' },
 				options: ['sidebar', 'topbar']
 			}
+		},
+		args: {
+			navigationItems: [
+				new NavigationItem('About', `/about`),
+				new NavigationItem('Foo', `/foo`),
+				new NavigationItem('Bar', `/bar`),
+				new NavigationItem('Button', `/button`, NavigationItemType.BUTTON),
+				new NavigationItem('Anchor', `/anchor`, NavigationItemType.ANCHOR),
+				new NavigationItem('Form', `/form`, NavigationItemType.FORM)
+			]
 		}
-	};
-</script>
 
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+	});
+</script>
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
-	<NavBar
-		{...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 template({ ...args })}
+	<NavBar {...args} />
+{/snippet}
 
 <Story name="Default" />
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
-<Story name="Title" args={{ title: 'Alternative title' }} />
+<Story name="Topbar" args={{ type: 'topbar' }} />
+<Story name="Active" args={{
+	navigating:{to:{url:{pathname:"/bar"}}},
+		navigationItems: [
+				new NavigationItem('About', `/about`),
+				new NavigationItem('Foo', `/foo`),
+				new NavigationItem('Bar', `/bar`),
+			]
+}} />