@tuspe/components 1.7.19 → 1.7.21

package/README.md

@@ -28,6 +28,8 @@ A breadcrumb navigation provide links back to previous pages, and shows the user
   interface Props {
     homeName?: string
     homeSlug?: string
+    onlyMeta?: boolean
+    outerClass?: string
     values: Breadcrumb[]
   }
 ```
@@ -77,10 +79,11 @@ Arrow icons for navigation, such as image sliders or content transitions.
 
 ```TypeScript
   interface Props {
-    onclick?: () => any
     ariaLabel: string
     color?: string
     direction: 'left' | 'right'
+    id?: string
+    onclick?: () => any
   }
 ```
 
@@ -94,7 +97,8 @@ Close button for modals and other dismissible elements.
     color?: string
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
     hoverText?: 'black' | 'primary' | 'secondary' | 'white'
-    onclick: () => any
+    id?: string
+    onclick?: any
   }
 ```
 
@@ -104,12 +108,13 @@ A button for toggling the mobile menu, dynamically changing its icon based on th
 
 ```TypeScript
   interface Props {
-    onclick?: () => any
     ariaControls: string
     ariaLabel: string
     color?: 'black' | 'white'
     extraClass?: string
     hidden?: boolean
+    id?: string
+    onclick?: () => any
     open: boolean
   }
 ```

package/dist/Breadcrumbs.svelte

@@ -6,18 +6,19 @@
   interface Props {
     homeName?: string
     homeSlug?: string
+    onlyMeta?: boolean
     outerClass?: string
     values: Breadcrumb[]
   }
 
-  let {homeName = 'Etusivu', homeSlug = '', outerClass, values}: Props = $props(),
+  let {homeName = 'Etusivu', homeSlug = '', onlyMeta = false, outerClass, values}: Props = $props(),
     classes = $state('truncate')
 
   const origin = page.url.origin + '/'
 
   let originWithSlug = $state(origin + homeSlug),
     listItems = $derived<Breadcrumb[]>(
-      Array.isArray(values) && values.length > 0
+      validateArray(values)
         ? [
             {
               '@type': 'ListItem',
@@ -51,7 +52,7 @@
   {/if}
 </svelte:head>
 
-{#if validateArray(listItems)}
+{#if !onlyMeta && validateArray(listItems)}
   <div class={classes}>
     <ol id="breadcrumb" class="max-w-screen-xl mx-auto my-0 px-4 py-2" vocab="https://schema.org/" typeof="BreadcrumbList">
       {#each listItems as page}

package/dist/Breadcrumbs.svelte.d.ts

@@ -2,6 +2,7 @@ import { type Breadcrumb } from './';
 interface Props {
     homeName?: string;
     homeSlug?: string;
+    onlyMeta?: boolean;
     outerClass?: string;
     values: Breadcrumb[];
 }

package/dist/Button.svelte

@@ -114,7 +114,7 @@
 </script>
 
 {#if href}
-  <a {href} class={classes} {target} data-sveltekit-preload-data={preload} rel="nofollow noopener">
+  <a class={classes} {href} {id} {target} data-sveltekit-preload-data={preload} rel="nofollow noopener">
     {@render children?.()}
   </a>
 {:else if control}

package/dist/ButtonArrow.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
   import Button from './Button.svelte'
   interface Props {
-    onclick?: () => any
     ariaLabel: string
     color?: string
     direction: 'left' | 'right'
+    id?: string
+    onclick?: () => any
   }
-  let {onclick, ariaLabel, color = 'black', direction}: Props = $props()
+  let {onclick, ariaLabel, color = 'black', direction, id}: Props = $props()
 </script>
 
-<Button {color} {onclick} {ariaLabel} control>
+<Button {ariaLabel} control {color} {id} {onclick}>
   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
     <title>Arrow {direction}</title>
     {#if direction === 'left'}

package/dist/ButtonArrow.svelte.d.ts

@@ -1,8 +1,9 @@
 interface Props {
-    onclick?: () => any;
     ariaLabel: string;
     color?: string;
     direction: 'left' | 'right';
+    id?: string;
+    onclick?: () => any;
 }
 declare const ButtonArrow: import("svelte").Component<Props, {}, "">;
 type ButtonArrow = ReturnType<typeof ButtonArrow>;

package/dist/ButtonClose.svelte

@@ -6,14 +6,15 @@
     color?: string
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
     hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    id?: string
     onclick?: any
   }
 
-  let {ariaLabel, color = 'white', hover = 'transparent', onclick}: Props = $props()
+  let {ariaLabel, color = 'white', hover = 'transparent', id, onclick}: Props = $props()
 </script>
 
 <div class="close-button">
-  <Button {ariaLabel} {color} {onclick} control fill {hover}>
+  <Button {ariaLabel} {color} {onclick} control fill {hover} {id}>
     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-hidden="true" fill={color}>
       <title>Close</title>
       <path

package/dist/ButtonClose.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     color?: string;
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
     hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    id?: string;
     onclick?: any;
 }
 declare const ButtonClose: import("svelte").Component<Props, {}, "">;

package/dist/ButtonMenu.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
   import Button from './Button.svelte'
   interface Props {
-    onclick?: () => any
     ariaControls: string
     ariaLabel: string
     color?: 'black' | 'white'
     extraClass?: string
     hidden?: boolean
+    id?: string
+    onclick?: () => any
     open: boolean
   }
-  let {ariaControls, ariaLabel, color = 'white', extraClass, hidden = false, open = $bindable()}: Props = $props()
+  let {ariaControls, ariaLabel, color = 'white', extraClass, hidden = false, id, open = $bindable()}: Props = $props()
   const handleOpen = () => {
     open = !open
   }
 </script>
 
 <div id="menu-button" class={extraClass} class:hidden>
-  <Button onclick={handleOpen} {ariaControls} ariaPopup="menu" ariaExpanded={open} {ariaLabel} {color} control fill>
+  <Button onclick={handleOpen} {ariaControls} ariaPopup="menu" ariaExpanded={open} {ariaLabel} {color} control fill {id}>
     <svg
       fill={color}
       clip-rule="evenodd"

package/dist/ButtonMenu.svelte.d.ts

@@ -1,10 +1,11 @@
 interface Props {
-    onclick?: () => any;
     ariaControls: string;
     ariaLabel: string;
     color?: 'black' | 'white';
     extraClass?: string;
     hidden?: boolean;
+    id?: string;
+    onclick?: () => any;
     open: boolean;
 }
 declare const ButtonMenu: import("svelte").Component<Props, {}, "open">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.7.19",
+  "version": "1.7.21",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -63,7 +63,7 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/js": "^9.22.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.19.0",
+    "@sveltejs/kit": "^2.19.1",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint-config-prettier": "^10.1.1",
@@ -77,6 +77,6 @@
     "svelte": "^5.23.0",
     "typescript-eslint": "^8.26.1",
     "typescript": "^5.8.2",
-    "vite": "^6.2.1"
+    "vite": "^6.2.2"
   }
 }