@tuspe/components 1.7.4 → 1.7.6

package/README.md

@@ -2,6 +2,17 @@
 
 [Tuspe Design](https://tuspe.com/en) builds websites and online stores for small and large businesses. This component library includes essential elements for forms, modals, breadcrumbs, and images. It also offers utility functions for price display, VAT calculations, and validations for tables and strings.
 
+## Example of required style specifications
+
+```CSS
+  :root {
+    --color-border: #bbb;
+    --color-content: #362e26;
+    --color-primary: #20a3cb;
+    --color-secondary: #263927;
+  }
+```
+
 ## Breadcrumbs
 
 A breadcrumb navigation provide links back to previous pages, and shows the user's current location in a website. The component complies with [Google standards](https://developers.google.com/search/docs/appearance/structured-data/breadcrumb).
@@ -79,8 +90,11 @@ Close button for modals and other dismissible elements.
 
 ```TypeScript
   interface Props {
-    onclick: () => any
+    ariaLabel?: string
     color?: string
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    onclick: () => any
   }
 ```
 
@@ -113,6 +127,7 @@ A versatile image component supporting various aspect ratios and object fit opti
   }
 
   interface Props {
+    ariaHidden?: boolean
     aspect?: '3:4' | '4:3' | 'square' | 'video'
     ball?: boolean
     border?: boolean
@@ -195,10 +210,15 @@ A simple `Modal` component that displays a popup with customizable content.
 ```TypeScript
   interface Props {
     children: Snippet
+    buttonAriaLabel?: string
+    colorButton?: string
+    colorBg?: string
+    headerClass?: string
     innerClass?: string
     open?: boolean
     outerClass?: string
     title?: string
+    titleClass?: string
   }
 ```
 
@@ -224,7 +244,7 @@ Formats a number or string as a price with two decimal places, spaces as thousan
 
 Retrieves or stores values in the cache; keys are slugified, and values are updated or returned if they exist. This ensures that `+page.ts` and other pages only retrieve data from the backend once and that the WordPress frontend uses the product list data on the product page without retrieving the same page again.
 
-## preventDefault
+### preventDefault
 
 Previously, Svelte handled form submission without reloading the page. However, the `preventDefault` function is no longer supported by Svelte v5, so this function handles form submission without loading the page.
 

package/dist/ButtonClose.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import Button from './Button.svelte'
-  let {color = 'black', onclick} = $props()
+
+  interface Props {
+    ariaLabel?: string
+    color?: string
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent'
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white'
+    onclick?: any
+  }
+
+  let {ariaLabel, color = 'white', hover = 'transparent', onclick}: Props = $props()
 </script>
 
 <div class="close-button">
-  <Button {color} {onclick} control fill>
-    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
-      <title>Sulje ikkuna</title>
+  <Button {ariaLabel} {color} {onclick} control fill {hover}>
+    <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
         d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 15.538l-3.592-3.548 3.546-3.587-1.416-1.403-3.545 3.589-3.588-3.543-1.405 1.405 3.593 3.552-3.547 3.592 1.405 1.405 3.555-3.596 3.591 3.55 1.403-1.416z"
       />

package/dist/ButtonClose.svelte.d.ts

@@ -1,6 +1,10 @@
-declare const ButtonClose: import("svelte").Component<{
+interface Props {
+    ariaLabel?: string;
     color?: string;
-    onclick: any;
-}, {}, "">;
+    hover?: 'black' | 'primary' | 'secondary' | 'success' | 'transparent';
+    hoverText?: 'black' | 'primary' | 'secondary' | 'white';
+    onclick?: any;
+}
+declare const ButtonClose: import("svelte").Component<Props, {}, "">;
 type ButtonClose = ReturnType<typeof ButtonClose>;
 export default ButtonClose;

package/dist/Image.svelte

@@ -2,6 +2,7 @@
   import type {ImageData} from './'
 
   interface Props {
+    ariaHidden?: boolean
     aspect?: '3:4' | '4:3' | 'square' | 'video'
     ball?: boolean
     border?: boolean
@@ -13,7 +14,7 @@
     objectFit?: 'contain' | 'cover'
   }
 
-  let {aspect, ball = false, border, center = false, extraClasses, fullWidth, image, loading = 'lazy', objectFit}: Props = $props()
+  let {ariaHidden, aspect, ball = false, border, center = false, extraClasses, fullWidth, image, loading = 'lazy', objectFit}: Props = $props()
 
   let classes = $state('')
   if (aspect) {
@@ -40,7 +41,16 @@
 </script>
 
 {#if image?.src}
-  <img alt={image.alt} class={classes} decoding="async" height={image.height} {loading} 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>

package/dist/Image.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { ImageData } from './';
 interface Props {
+    ariaHidden?: boolean;
     aspect?: '3:4' | '4:3' | 'square' | 'video';
     ball?: boolean;
     border?: boolean;

package/dist/Modal.svelte

@@ -3,24 +3,39 @@
   import ButtonClose from './ButtonClose.svelte'
   interface Props {
     children: Snippet
+    buttonAriaLabel?: string
+    colorButton?: string
+    colorBg?: string
+    headerClass?: string
     innerClass?: string
     open?: boolean
     outerClass?: string
     title?: string
+    titleClass?: string
   }
-  let {children, innerClass, open = $bindable(), outerClass, title}: Props = $props()
+  let {
+    children,
+    buttonAriaLabel,
+    colorButton = 'white',
+    headerClass = 'bg-primary',
+    innerClass,
+    open = $bindable(),
+    outerClass = 'bg-white text-content',
+    title = 'text-white',
+    titleClass
+  }: Props = $props()
   const handleClose = () => {
     open = false
   }
 </script>
 
 <div id="modal" class:hidden={!open}>
-  <div id="modal-content" class={outerClass}>
-    <header>
+  <div id="modal-content" class={outerClass} aria-live="polite">
+    <header class={headerClass}>
       {#if title}
-        <h2>{title}</h2>
+        <h2 class={titleClass}>{title}</h2>
       {/if}
-      <ButtonClose color="black" onclick={handleClose} />
+      <ButtonClose ariaLabel={buttonAriaLabel} onclick={handleClose} color={colorButton} hover="transparent" />
     </header>
     <div id="modal-body" class={innerClass}>
       {@render children?.()}
@@ -48,9 +63,9 @@
     visibility: hidden;
   }
   #modal-content {
-    background-color: #fff;
     border-radius: 1rem;
     border: 2px solid var(--color-primary);
+    color: var(--color-content);
     margin-left: auto;
     margin-right: auto;
     max-width: 95vw;
@@ -73,4 +88,16 @@
     line-height: 1;
     margin: 0;
   }
+  .bg-primary {
+    background-color: var(--color-primary);
+  }
+  .bg-white {
+    background-color: #fff;
+  }
+  .text-content {
+    color: var(--color-content);
+  }
+  .text-white {
+    color: #fff;
+  }
 </style>

package/dist/Modal.svelte.d.ts

@@ -1,10 +1,15 @@
 import type { Snippet } from 'svelte';
 interface Props {
     children: Snippet;
+    buttonAriaLabel?: string;
+    colorButton?: string;
+    colorBg?: string;
+    headerClass?: string;
     innerClass?: string;
     open?: boolean;
     outerClass?: string;
     title?: string;
+    titleClass?: string;
 }
 declare const Modal: import("svelte").Component<Props, {}, "open">;
 type Modal = ReturnType<typeof Modal>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tuspe/components",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "description": "A reusable SvelteKit component library for form elements, breadcrumbs, prices and images.",
   "keywords": [
     "svelteKit",
@@ -14,7 +14,8 @@
     "input",
     "checkbox",
     "select",
-    "preventDefault"
+    "preventDefault",
+    "validation"
   ],
   "homepage": "https://github.com/TuspeDesign/svelte-components",
   "license": "MIT",