@tuspe/components 1.8.0 → 1.8.2

package/README.md

@@ -42,8 +42,8 @@ Easily replace most buttons in your project with this versatile button component
   interface Props {
     ariaControls?: string | undefined
     ariaExpanded?: boolean | undefined
-    ariaLabel?: string
-    ariaPopup?: 'dialog' | 'menu' | 'listbox' | undefined
+    ariaLabel?: string | undefined
+    ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined
     borderColor?: 'content' | 'default' | 'primary'
     borderSize?: 0 | 1 | 2
     children: Snippet
@@ -64,9 +64,11 @@ Easily replace most buttons in your project with this versatile button component
     noPadding?: boolean
     onclick?: any
     preload?: 'hover' | 'tap'
+    rel?: string
     role?: string
     rounded?: 'full' | 'lg' | 'none' | 'sm'
     target?: '_blank' | '_top' | undefined
+    title?: string | undefined
     type?: 'submit'
     uppercase?: boolean
     value?: string | number
@@ -109,13 +111,13 @@ A button for toggling the mobile menu, dynamically changing its icon based on th
 ```TypeScript
   interface Props {
     ariaControls: string
-    ariaLabel: string
     color?: 'black' | 'white'
     extraClass?: string
     hidden?: boolean
     id?: string
     onclick?: () => any
     open: boolean
+    title: string
   }
 ```
 

package/dist/Button.svelte

@@ -5,7 +5,7 @@
   interface Props {
     ariaControls?: string | undefined
     ariaExpanded?: boolean | undefined
-    ariaLabel?: string
+    ariaLabel?: string | undefined
     ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined
     borderColor?: 'content' | 'default' | 'primary'
     borderSize?: 0 | 1 | 2
@@ -27,9 +27,11 @@
     noPadding?: boolean
     onclick?: any
     preload?: 'hover' | 'tap'
+    rel?: string
     role?: string
     rounded?: 'full' | 'lg' | 'none' | 'sm'
     target?: '_blank' | '_top' | undefined
+    title?: string | undefined
     type?: 'submit'
     uppercase?: boolean
     value?: string | number
@@ -60,9 +62,11 @@
     noPadding,
     onclick = undefined,
     preload,
+    rel = 'noopener noreferrer',
     role,
     rounded = 'sm',
     target,
+    title,
     type,
     uppercase = true,
     value
@@ -114,7 +118,7 @@
 </script>
 
 {#if href}
-  <a class={classes} {href} {id} {target} data-sveltekit-preload-data={preload} rel="nofollow noopener">
+  <a class={classes} {href} {id} {target} data-sveltekit-preload-data={preload} {rel} {title}>
     {@render children?.()}
   </a>
 {:else if control}
@@ -122,6 +126,7 @@
     {id}
     {onclick}
     {role}
+    {title}
     {value}
     aria-controls={ariaControls}
     aria-expanded={ariaExpanded}
@@ -133,7 +138,7 @@
     {@render children?.()}
   </button>
 {:else}
-  <button {onclick} class={classes} {disabled} {type}>
+  <button {onclick} class={classes} {disabled} {title} {type}>
     {@render children?.()}
   </button>
 {/if}

package/dist/Button.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 interface Props {
     ariaControls?: string | undefined;
     ariaExpanded?: boolean | undefined;
-    ariaLabel?: string;
+    ariaLabel?: string | undefined;
     ariaPopup?: 'dialog' | 'listbox' | 'menu' | undefined;
     borderColor?: 'content' | 'default' | 'primary';
     borderSize?: 0 | 1 | 2;
@@ -24,9 +24,11 @@ interface Props {
     noPadding?: boolean;
     onclick?: any;
     preload?: 'hover' | 'tap';
+    rel?: string;
     role?: string;
     rounded?: 'full' | 'lg' | 'none' | 'sm';
     target?: '_blank' | '_top' | undefined;
+    title?: string | undefined;
     type?: 'submit';
     uppercase?: boolean;
     value?: string | number;

package/dist/ButtonMenu.svelte

@@ -2,22 +2,22 @@
   import Button from './Button.svelte'
   interface Props {
     ariaControls: string
-    ariaLabel: string
     color?: 'black' | 'white'
     extraClass?: string
     hidden?: boolean
     id?: string
     onclick?: () => any
     open: boolean
+    title: string
   }
-  let {ariaControls, ariaLabel, color = 'white', extraClass, hidden = false, id, open = $bindable()}: Props = $props()
+  let {ariaControls, title, 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 {id}>
+  <Button onclick={handleOpen} {ariaControls} ariaPopup="menu" ariaExpanded={open} {title} {color} control fill {id}>
     <svg
       fill={color}
       clip-rule="evenodd"

package/dist/ButtonMenu.svelte.d.ts

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

package/dist/Input.svelte

@@ -38,8 +38,6 @@
     value = $bindable()
   }: Props = $props()
 
-  let isDisabled = $state(disabled || $loading)
-
   let classes = $state('')
   if (inputClass) {
     classes = inputClass
@@ -56,10 +54,18 @@
   {label}{#if required}<sup>*</sup>{/if}
 
   {#if type === 'textarea'}
-    <textarea bind:value class={classes} disabled={isDisabled} {id} maxlength={max ? Number(max) : undefined} {required} {placeholder} rows={4}
+    <textarea
+      bind:value
+      class={classes}
+      disabled={disabled || $loading}
+      {id}
+      maxlength={max ? Number(max) : undefined}
+      {required}
+      {placeholder}
+      rows={4}
     ></textarea>
   {:else if ['date', 'number'].includes(type)}
-    <input bind:value class={classes} disabled={isDisabled} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} />
+    <input bind:value class={classes} disabled={disabled || $loading} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} />
   {:else}
     <input
       bind:value
@@ -68,7 +74,7 @@
       {required}
       {type}
       class={classes}
-      disabled={isDisabled}
+      disabled={disabled || $loading}
       maxlength={max ? Number(max) : undefined}
       minlength={min ? Number(min) : undefined}
       onkeyup={onchange}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -61,21 +61,21 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.7",
-    "@eslint/js": "^9.22.0",
+    "@eslint/js": "^9.23.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.19.2",
+    "@sveltejs/kit": "^2.20.2",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.2.1",
-    "eslint": "^9.22.0",
+    "eslint-plugin-svelte": "^3.3.3",
+    "eslint": "^9.23.0",
     "globals": "^16.0.0",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier": "^3.5.3",
     "publint": "^0.3.9",
     "svelte-check": "^4.1.5",
-    "svelte": "^5.23.1",
-    "typescript-eslint": "^8.26.1",
+    "svelte": "^5.25.2",
+    "typescript-eslint": "^8.27.0",
     "typescript": "^5.8.2",
     "vite": "^6.2.2"
   }