@tuspe/components 1.7.18 → 1.7.20

package/README.md

@@ -77,10 +77,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 +95,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 +106,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/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/dist/Select.svelte

@@ -16,7 +16,7 @@
   }
 
   let {
-      colorBg = 'transparent',
+      colorBg = 'bg-transparent',
       disabled,
       id,
       innerClass,
@@ -28,7 +28,7 @@
       value = $bindable(),
       values
     }: Props = $props(),
-    classes = $state(`bg-${colorBg}`)
+    classes = $state(colorBg)
   if (innerClass) {
     classes += ' ' + innerClass
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.7.18",
+  "version": "1.7.20",
   "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"
   }
-}
+}