@tuspe/components 1.9.8 → 1.9.10

package/dist/Breadcrumbs.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
   import {page} from '$app/state'
-  import {onMount} from 'svelte'
-  import {validateArray} from './'
+  import {cx, validateArray} from './'
   import type {Breadcrumb} from './'
   import type {BreadcrumbView} from './types'
 
   let {homeName = 'Etusivu', homeSlug = '', onlyMeta = false, outerClass, values}: BreadcrumbView = $props()
-  let classes = $state('truncate')
+  let classes = $derived(cx('truncate', outerClass))
 
-  const origin = page.url.origin + '/'
-
-  let originWithSlug = $state(origin + homeSlug),
+  let origin = $derived(page.url.origin + '/'),
+    originWithSlug = $derived(origin + homeSlug),
     listItems = $derived<Breadcrumb[]>(
       validateArray(values)
         ? [
@@ -34,12 +32,6 @@
         ? `<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":${JSON.stringify(listItems)}}${'<'}/script>`
         : ''
     )
-
-  onMount(() => {
-    if (outerClass) {
-      classes += ` ${outerClass}`
-    }
-  })
 </script>
 
 <svelte:head>

package/dist/Button.svelte

@@ -1,87 +1,10 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, loading} from './'
   import type {ButtonView} from './types'
 
-  let {
-    ariaControls,
-    ariaExpanded,
-    ariaLabel,
-    ariaPopup,
-    borderColor = 'content',
-    borderSize = 0,
-    children,
-    color = 'white',
-    colorBg = 'primary',
-    control,
-    disabled = $bindable(),
-    extraClass,
-    fill,
-    fontWeight = 'bold',
-    fullWidth,
-    hover = 'secondary',
-    hoverText = 'white',
-    href,
-    id,
-    noCenter = false,
-    noHeight,
-    noPadding,
-    noSpinner,
-    onclick = undefined,
-    preload,
-    rel = 'noopener noreferrer',
-    role,
-    rounded = 'sm',
-    spinnerColor = 'white',
-    target,
-    title,
-    type,
-    uppercase = true,
-    value
-  }: ButtonView = $props()
+  let {ariaControls, ariaExpanded, ariaLabel, ariaPopup, borderColor = 'content', borderSize = 0, children, color = 'white', colorBg = 'primary', control, disabled = $bindable(), extraClass, fill, fontWeight = 'bold', fullWidth, hover = 'secondary', hoverText = 'white', href, id, noCenter = false, noHeight, noPadding, noSpinner, onclick = undefined, preload, rel = 'noopener noreferrer', role, rounded = 'sm', spinnerColor = 'white', target, title, type, uppercase = true, value}: ButtonView = $props()
 
-  let classes = $state(`btn text-${color}`)
-
-  if (control) {
-    classes += ' control'
-  } else {
-    classes += ' bg-' + colorBg
-  }
-  if (borderSize) {
-    classes += ' border-solid border-' + borderSize + ' border-' + borderColor
-  }
-  if (extraClass) {
-    classes += ' ' + extraClass
-  }
-  if (fill) {
-    classes += ' fill'
-  }
-  if (fontWeight) {
-    classes += ' font-' + fontWeight
-  }
-  if (fullWidth) {
-    classes += ' w-full'
-  }
-  if (hover) {
-    classes += ' hover-' + hover
-  }
-  if (hoverText) {
-    classes += ' hover-text-' + hoverText
-  }
-  if (!noCenter) {
-    classes += ' center'
-  }
-  if (noHeight) {
-    classes += ' no-height'
-  }
-  if (noPadding) {
-    classes += ' no-padding'
-  }
-  if (rounded) {
-    classes += ' radius-' + rounded
-  }
-  if (uppercase) {
-    classes += ' uppercase'
-  }
+  let classes = $derived(cx('btn', `text-${color}`, control ? 'control' : `bg-${colorBg}`, borderSize ? `border-solid border-${borderSize} border-${borderColor}` : false, extraClass, fill && 'fill', fontWeight && `font-${fontWeight}`, fullWidth && 'w-full', hover && `hover-${hover}`, hoverText && `hover-text-${hoverText}`, !noCenter && 'center', noHeight && 'no-height', noPadding && 'no-padding', rounded && `radius-${rounded}`, uppercase && 'uppercase'))
 </script>
 
 {#if href}
@@ -89,19 +12,7 @@
     {@render children?.()}
   </a>
 {:else if control}
-  <button
-    {id}
-    {onclick}
-    {role}
-    {title}
-    {value}
-    aria-controls={ariaControls}
-    aria-expanded={ariaExpanded}
-    aria-haspopup={ariaPopup}
-    aria-label={ariaLabel}
-    class={classes}
-    {disabled}
-  >
+  <button {id} {onclick} {role} {title} {value} aria-controls={ariaControls} aria-expanded={ariaExpanded} aria-haspopup={ariaPopup} aria-label={ariaLabel} class={classes} {disabled}>
     {@render children?.()}
   </button>
 {:else}
@@ -153,11 +64,11 @@
   }
   .bg-success:not(:hover),
   .hover-success:hover {
-    background-color: green;
+    background-color: var(--color-success, green);
   }
   .bg-danger:not(:hover),
   .hover-danger:hover {
-    background-color: darkred;
+    background-color: var(--color-danger, darkred);
   }
   .bg-black:not(:hover),
   .hover-black:hover {

package/dist/Checkbox.svelte

@@ -1,26 +1,12 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {CheckboxView} from './types'
-  let {
-    children,
-    onchange,
-    checked = $bindable(false),
-    disabled = $bindable(false),
-    group = $bindable(),
-    id,
-    outerClass,
-    required,
-    value,
-    ...props
-  }: CheckboxView = $props()
-  let classes = $state('input-checkbox')
-  if (outerClass) {
-    classes += ` ${outerClass}`
-  }
+  let {children, onchange, checked = $bindable(false), disabled = $bindable(false), group = $bindable(), id, outerClass, required, value, ...props}: CheckboxView = $props()
+  let classes = $derived(cx('input-checkbox', outerClass))
 </script>
 
 <label class={classes}>
-  <input bind:checked disabled={disabled || $loading ? true : false} {id} {onchange} {required} type="checkbox" {value} {...props} />
+  <input bind:checked disabled={isDisabled(disabled, $loading)} {id} {onchange} {required} type="checkbox" {value} {...props} />
   <span>
     {@render children?.()}
     {#if required}<sup>*</sup>{/if}
@@ -30,7 +16,7 @@
 <style scoped>
   input {
     accent-color: var(--color-primary);
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-border, #999);
     height: 20px;
     margin-top: 3px;
     outline: none;
@@ -56,6 +42,6 @@
   }
 
   sup {
-    color: darkred;
+    color: var(--color-danger, darkred);
   }
 </style>

package/dist/Image.svelte

@@ -1,54 +1,13 @@
 <script lang="ts">
+  import {cx} from './'
   import type {ImageView} from './types'
-  let {
-    ariaHidden,
-    aspect,
-    ball = false,
-    border,
-    center = false,
-    display = 'inline-block',
-    extraClasses,
-    fullWidth,
-    image,
-    loading = 'lazy',
-    objectFit
-  }: ImageView = $props()
+  let {ariaHidden, aspect, ball = false, border, center = false, display = 'inline-block', extraClasses, fullWidth, image, loading = 'lazy', objectFit}: ImageView = $props()
 
-  let classes = $state(display)
-  if (aspect) {
-    classes += ` aspect-${aspect}`
-  }
-  if (objectFit) {
-    classes += ' ' + objectFit
-  }
-  if (ball) {
-    classes += ' radius-full'
-  }
-  if (border) {
-    classes += ' border-full'
-  }
-  if (center) {
-    classes += ' mx-auto'
-  }
-  if (fullWidth) {
-    classes += ' full'
-  }
-  if (extraClasses) {
-    classes += ' ' + extraClasses
-  }
+  let classes = $derived(cx(display, aspect && `aspect-${aspect}`, objectFit, ball && 'radius-full', border && 'border-full', center && 'mx-auto', fullWidth && 'full', extraClasses))
 </script>
 
 {#if image?.src}
-  <img
-    {loading}
-    alt={image.alt}
-    aria-hidden={ariaHidden}
-    class={classes}
-    decoding="async"
-    height={image.height}
-    src={image.src}
-    width={image.width}
-  />
+  <img {loading} alt={image.alt} aria-hidden={ariaHidden} class={classes} decoding="async" height={image.height} src={image.src} width={image.width} />
 {/if}
 
 <style scoped>
@@ -72,7 +31,7 @@
     display: block;
   }
   .border-full {
-    border: 1px solid var(--color-content);
+    border: 1px solid var(--color-content, #222);
   }
   .contain {
     object-fit: contain;

package/dist/Input.svelte

@@ -1,101 +1,26 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {InputView} from './types'
 
-  let {
-    bgColor = 'transparent',
-    borderColor = 'default',
-    disabled,
-    id,
-    inputClass,
-    label,
-    max,
-    min,
-    onchange,
-    outerClass,
-    placeholder,
-    required = false,
-    step,
-    type = 'text',
-    value = $bindable(),
-    ...props
-  }: InputView = $props()
-
-  let classesIn = $state(''),
-    classesOut = $state(`input-${type}`)
-  if (inputClass) {
-    classesIn = inputClass
-  }
-  if (bgColor && bgColor !== 'none') {
-    classesIn += ` bg-${bgColor}`
-  }
-  if (borderColor && borderColor !== 'none') {
-    classesIn += ` border-color-${borderColor}`
-  }
-  if (outerClass) {
-    classesOut += ` ${outerClass}`
-  }
+  let {bgColor = 'transparent', borderColor = 'default', disabled, id, inputClass, label, max, min, onchange, outerClass, placeholder, required = false, step, type = 'text', value = $bindable(), ...props}: InputView = $props()
+
+  let classesIn = $derived(cx(inputClass, bgColor !== 'none' && `bg-${bgColor}`, borderColor !== 'none' && `border-color-${borderColor}`)),
+    classesOut = $derived(cx(`input-${type}`, outerClass)),
+    inputDisabled = $derived(isDisabled(disabled, $loading))
 </script>
 
 <label class={classesOut}>
   {label}{#if required}<sup>*</sup>{/if}
 
   {#if type === 'textarea'}
-    <textarea
-      bind:value
-      class={classesIn}
-      disabled={disabled || $loading ? true : false}
-      {id}
-      maxlength={max ? Number(max) : undefined}
-      {required}
-      {placeholder}
-      rows={4}
-      {...props}
-    ></textarea>
+    <textarea bind:value class={classesIn} disabled={inputDisabled} {id} maxlength={max ? Number(max) : undefined} {required} {placeholder} rows={4} {...props}></textarea>
   {:else if ['date', 'number'].includes(type)}
-    <input
-      bind:value
-      class={classesIn}
-      disabled={disabled || $loading ? true : false}
-      lang="fi-FI"
-      {max}
-      {min}
-      {onchange}
-      {required}
-      {step}
-      {type}
-      {placeholder}
-      {...props}
-    />
+    <input bind:value class={classesIn} disabled={inputDisabled} lang="fi-FI" {max} {min} {onchange} {required} {step} {type} {placeholder} {...props} />
   {:else}
-    <input
-      bind:value
-      {id}
-      {placeholder}
-      {required}
-      {type}
-      class={classesIn}
-      disabled={disabled || $loading ? true : false}
-      maxlength={max ? Number(max) : undefined}
-      minlength={min ? Number(min) : undefined}
-      onkeyup={onchange}
-      {...props}
-    />
+    <input bind:value {id} {placeholder} {required} {type} class={classesIn} disabled={inputDisabled} maxlength={max ? Number(max) : undefined} minlength={min ? Number(min) : undefined} onkeyup={onchange} {...props} />
     {#if type === 'search'}
-      <svg
-        clip-rule="evenodd"
-        fill-rule="evenodd"
-        stroke-linejoin="round"
-        stroke-miterlimit="2"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-        height="20"
-        width="20"
-      >
-        <path
-          d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z"
-          fill-rule="nonzero"
-        />
+      <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" height="20" width="20">
+        <path d="m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z" fill-rule="nonzero" />
       </svg>
     {/if}
   {/if}
@@ -111,7 +36,7 @@
     border-radius: 0.375rem;
     border-style: solid;
     border-width: 1px;
-    color: var(--color-content);
+    color: var(--color-content, #222);
     display: block;
     font-size: 1rem;
     margin-top: 0.25rem;
@@ -138,7 +63,7 @@
   }
 
   label.filter {
-    font-size: var(--text-sm);
+    font-size: var(--text-sm, 0.95rem);
   }
 
   label svg {
@@ -148,7 +73,7 @@
   }
 
   sup {
-    color: darkred;
+    color: var(--color-danger, darkred);
   }
 
   textarea {
@@ -166,7 +91,7 @@
   }
 
   .border-color-default {
-    border-color: var(--color-border);
+    border-color: var(--color-border, #999);
   }
 
   .border-color-primary {
@@ -174,6 +99,6 @@
   }
 
   .border-color-content {
-    border-color: var(--color-content);
+    border-color: var(--color-content, #222);
   }
 </style>

package/dist/Modal.svelte

@@ -1,17 +1,7 @@
 <script lang="ts">
   import ButtonClose from './ButtonClose.svelte'
   import type {ModalView} from './types'
-  let {
-    children,
-    buttonAriaLabel,
-    colorButton = 'white',
-    headerClass = 'bg-primary text-white',
-    innerClass,
-    open = $bindable(),
-    outerClass = 'bg-white text-content',
-    title,
-    titleClass = 'text-white'
-  }: ModalView = $props()
+  let {children, buttonAriaLabel, colorButton = 'white', headerClass = 'bg-primary text-white', innerClass, open = $bindable(), outerClass = 'bg-white text-content', title, titleClass = 'text-white'}: ModalView = $props()
   const handleClose = () => {
     open = false
   }
@@ -53,7 +43,7 @@
   #modal-content {
     border-radius: 1rem;
     border: 2px solid var(--color-primary);
-    color: var(--color-content);
+    color: var(--color-content, #222);
     margin-left: auto;
     margin-right: auto;
     max-width: 95vw;
@@ -69,7 +59,7 @@
     padding: 1rem;
   }
   header {
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border, #999);
     padding: 1rem;
   }
   h2 {
@@ -85,7 +75,7 @@
     background-color: #fff;
   }
   .text-content {
-    color: var(--color-content);
+    color: var(--color-content, #222);
   }
   .text-white {
     color: #fff;

package/dist/Select.svelte

@@ -1,29 +1,14 @@
 <script lang="ts">
-  import {loading} from './'
+  import {cx, isDisabled, loading} from './'
   import type {SelectView} from './types'
-  let {
-    colorBg = 'bg-transparent',
-    disabled,
-    id,
-    innerClass,
-    label,
-    onchange,
-    outerClass,
-    placeholder,
-    required = false,
-    value = $bindable(),
-    values
-  }: SelectView = $props()
-  let classes = $state(colorBg)
-  if (innerClass) {
-    classes += ' ' + innerClass
-  }
+  let {disabled, id, innerClass, label, onchange, outerClass, placeholder, required = false, value = $bindable(), values}: SelectView = $props()
+  let classes = $derived(cx(innerClass))
 </script>
 
 <label class={outerClass}>
   {label}
   {#if required}<sup>*</sup>{/if}
-  <select bind:value {onchange} class={classes} disabled={disabled || $loading ? true : false} {id} {placeholder} {required}>
+  <select bind:value {onchange} class={classes} disabled={isDisabled(disabled, $loading)} {id} {placeholder} {required}>
     {#each values as item}
       <option value={item.value}>{item.name}</option>
     {/each}
@@ -32,11 +17,17 @@
 
 <style scoped>
   select {
-    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
-      no-repeat 98% 50%;
+    appearance: none;
+    background-attachment: scroll;
+    background-color: var(--color-input-bg, #fff);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+');
+    background-position-x: 98%;
+    background-position-y: 50%;
+    background-repeat: no-repeat;
+    background-size: auto;
     border-radius: 0.375rem;
-    border: 1px solid var(--color-border);
-    color: var(--color-content);
+    border: 1px solid var(--color-border, #999);
+    color: var(--color-content, #222);
     font-size: 1rem;
     height: 48px;
     margin-top: 0.25rem;
@@ -44,11 +35,6 @@
     width: 100%;
     -moz-appearance: none;
     -webkit-appearance: none;
-    appearance: none;
-  }
-
-  select.bg-transparent {
-    background-color: transparent;
   }
 
   select:disabled {
@@ -63,10 +49,10 @@
 
   label.filter {
     position: relative;
-    font-size: var(--text-sm);
+    font-size: var(--text-sm, 0.95rem);
   }
 
   sup {
-    color: darkred;
+    color: var(--color-danger, darkred);
   }
 </style>

package/dist/index.d.ts

@@ -26,6 +26,14 @@ export interface SelectItem {
     value: number | string;
 }
 export declare const loading: import("svelte/store").Writable<number>;
+/**
+ * CLASS NAMES
+ */
+export declare const cx: (...classes: (string | false | null | undefined)[]) => string;
+/**
+ * DISABLED STATE
+ */
+export declare const isDisabled: (disabled: boolean | undefined, loadingCount: number) => boolean;
 /**
  * PRICES AND NUMBERS
  */

package/dist/index.js

@@ -11,6 +11,14 @@ import Modal from './Modal.svelte';
 import Select from './Select.svelte';
 export { Breadcrumbs, Button, ButtonArrow, ButtonClose, ButtonMenu, Checkbox, Image, Input, Modal, Select };
 export const loading = writable(0);
+/**
+ * CLASS NAMES
+ */
+export const cx = (...classes) => classes.filter(Boolean).join(' ');
+/**
+ * DISABLED STATE
+ */
+export const isDisabled = (disabled, loadingCount) => disabled === true || loadingCount > 0;
 /**
  * PRICES AND NUMBERS
  */
@@ -61,20 +69,20 @@ export const slugify = (value) => {
         .replace(/^-+|-+$/g, ''); // Trim leading and trailing hyphens
 };
 export const validateSlug = (value) => {
-    return value && slugify(value) === value ? true : false;
+    return !!value && slugify(value) === value;
 };
 export const validateEmail = (email) => {
-    var re = /\S+@\S+\.\S+/;
+    const re = /\S+@\S+\.\S+/;
     return re.test(email);
 };
 export const validateString = (value) => {
-    return value && value.replace(/[^\w\s@!.:;,?+äÄöÖåÅ/%&()|-]/gi, '') === value ? true : false;
+    return !!value && value.replace(/[^\w\s@!.:;,?+äÄöÖåÅ/%&()|-]/gi, '') === value;
 };
 /**
  * ARRAY VALIDATIONS
  */
 export const validateArray = (value, items = 0) => {
-    return value && Array.isArray(value) && value.length > items ? true : false;
+    return Array.isArray(value) && value.length > items;
 };
 export const cacheValues = writable({});
 export const handleCache = (key, value = undefined, ttl = 60) => {

package/dist/types.d.ts

@@ -16,10 +16,9 @@ export interface ButtonArrowView {
 }
 export interface ButtonCloseView {
     onclick?: any;
-    ariaLabel?: string;
+    ariaLabel?: string | undefined;
     color?: string;
-    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
-    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent' | undefined;
     id?: string;
 }
 export interface ButtonMenuView {
@@ -51,7 +50,7 @@ export interface ButtonView {
     hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
     hoverText?: 'black' | 'primary' | 'secondary' | 'white';
     href?: string | undefined;
-    id?: string;
+    id?: string | undefined;
     noCenter?: boolean;
     noHeight?: boolean;
     noPadding?: boolean;
@@ -114,7 +113,6 @@ export interface ModalView {
     children: Snippet;
     buttonAriaLabel?: string;
     colorButton?: string;
-    colorBg?: string;
     headerClass?: string;
     innerClass?: string;
     open?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.9.8",
+  "version": "1.9.10",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -60,24 +60,24 @@
     "svelte": "^5.20.2"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.2",
-    "@eslint/js": "^9.39.2",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/js": "^10.0.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/enhanced-img": "^0.10.0",
-    "@sveltejs/kit": "^2.50.2",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "eslint": "^9.39.2",
+    "@sveltejs/enhanced-img": "^0.10.4",
+    "@sveltejs/kit": "^2.65.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.3.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
-    "publint": "^0.3.17",
-    "svelte": "^5.49.1",
-    "svelte-check": "^4.3.6",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.54.0",
-    "vite": "^7.3.1"
+    "eslint-plugin-svelte": "^3.19.0",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.4",
+    "prettier-plugin-svelte": "^4.1.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.0",
+    "vite": "^8.0.16"
   }
 }