@likable-hair/svelte 0.0.14 → 0.0.17

package/common/Card.svelte

@@ -1,8 +1,12 @@
 <script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, style = "";
-import '$lib/common/tailwind.css';
 </script>
 
 <style>
+  .shadow-lg {
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 10px 15px -3px #000, 0 4px 6px -4px #000;
+    box-shadow: inset 0 0 0 calc(1px + 0px) rgb(255 255 255/0.1), 0 0 #0000, 0 0 #0000;
+  }
 </style>
 
 <div
@@ -19,16 +23,28 @@ import '$lib/common/tailwind.css';
   style:border-color={borderColor}
   style:border-width={borderWidth}
   style={style}
-  class="flex flex-col shadow-lg" 
+  style:display="flex"
+  style:flex-direction="column"
+  class="shadow-lg" 
   class:border-solid={outlined}
 >
-  <div class="header flex-none">
+  <div 
+    style:flex="none"
+    class="header"
+  >
     <slot name="header"></slot>
   </div>
-  <div class="body shrink overflow-y-auto">
+  <div
+    style:flex-shrink="1"
+    style:overflow-y="auto"
+    class="body"
+  >
     <slot></slot>
   </div>
-  <div class="footer flex-none">
+  <div 
+    style:flex="none"
+    class="footer flex-none"
+  >
     <slot name="footer"></slot>
   </div>
 </div>

package/common/Card.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         outlined?: boolean;

package/dates/Calendar.svelte

@@ -1,4 +1,3 @@
 <script >import { getDateRows } from './utils';
-import '$lib/common/tailwind.css';
 </script>
 

package/dates/Calendar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {};
     events: {

package/forms/Textfield.svelte

@@ -1,4 +1,4 @@
-<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined';
+<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderRadius = "5px", borderColor = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -16,22 +16,13 @@ function handleBlur() {
 $: if (!!labelElement) {
     legendWidth = !value && !focused ? 0 : (labelElement.offsetWidth * 0.8) + 8;
 }
-$: cssVariables = Object.entries({
-    '--theme-color': color,
-    '--legend-width': legendWidth + 'px'
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
 </script>
 
 <style>
   .input-container {
     height: 50px;
     position: relative;
-    width: var(--width, 100%);
-    --final-color: var(--theme-color, --border-color, rgb(88, 88, 88));
+    --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
   }
 
   /* outlined input */
@@ -39,7 +30,6 @@ import '$lib/common/tailwind.css';
   .input-outlined {
     border: 0px solid;
     box-sizing: border-box;
-    color: var(--color, black);
     font-size: 18px;
     height: 100%;
     outline: 0;
@@ -49,18 +39,17 @@ import '$lib/common/tailwind.css';
   }
 
   .fieldset-outlined {
-    border-radius: var(--border-radius, 5px);
     border: 1px solid rgb(122, 122, 122);
     padding-left: 4px;
   }
 
   .focused .fieldset-outlined {
-    border: 1px solid var(--final-color);
-    color: var(--final-color);
+    border: 1px solid var(--textfield-final-color);
+    color: var(--textfield-final-color);
   }
 
   .legend-outlined {
-    width: var(--legend-width);
+    width: var(--textfield-legend-width);
     padding: 0px;
     transition: width 0.3s, color 0.1s;
   }
@@ -85,9 +74,8 @@ import '$lib/common/tailwind.css';
   /* boxed input */
 
   .fieldset-boxed {
-    border: 2px solid var(--final-color);
+    border: 2px solid var(--textfield-final-color);
     padding: 5px;
-    border-radius: var(--border-radius, 0);
   }
 
   .input-boxed {
@@ -103,7 +91,7 @@ import '$lib/common/tailwind.css';
   }
 
   .input-boxed::placeholder {
-    color: var(--final-color);
+    color: var(--textfield-final-color);
     opacity: 60%;
   }
 
@@ -111,13 +99,18 @@ import '$lib/common/tailwind.css';
 
 
 <div 
+  style:width={width}
+  style:--textfield-theme-color={color}
+  style:--textfield-border-color={borderColor}
+  style:--textfield-legend-width={legendWidth + 'px'}
   class="input-container" 
-  style={cssVariables}
   class:focused={focused}
   class:texted={focused || !!value}
 >
   <fieldset 
-    aria-hidden="true" 
+    aria-hidden="true"
+    style:border-radius={borderRadius}
+    style:border-color={borderColor}
     class="fieldset"
     class:fieldset-outlined={variant == 'outlined'}
     class:fieldset-boxed={variant == 'boxed'}
@@ -129,11 +122,18 @@ import '$lib/common/tailwind.css';
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div class="flex content-center relative bottom-2 ml-2 mr-2">
+        <div 
+          style:display="flex"
+          style:position="relative"
+          style:bottom="8px"
+          style:margin-left="8px"
+          style:margin-right="8px"
+        >
           <div>
             <slot name="prepend-inner"></slot>
           </div>
           <input 
+            style:color={textColor}
             id={inputId} 
             class="input-outlined"
             type="text"
@@ -151,11 +151,14 @@ import '$lib/common/tailwind.css';
           </div>
         </div>
     {:else if variant == 'boxed'}
-      <div class="flex">
+      <div 
+        style:display="flex"
+      >
         <div>
           <slot name="prepend-inner"></slot>
         </div>
         <input
+          style:color={textColor}
           id={inputId}
           class="input-boxed"
           type="text"

package/forms/{TextField.svelte.d.ts → Textfield.svelte.d.ts}

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         label?: string;
@@ -7,6 +6,10 @@ declare const __propDef: {
         color?: string;
         value?: string;
         variant?: "outlined" | "boxed";
+        width?: string;
+        textColor?: string;
+        borderRadius?: string;
+        borderColor?: string;
     };
     events: {
         change: Event;
@@ -21,9 +24,9 @@ declare const __propDef: {
         'append-inner': {};
     };
 };
-export declare type TextFieldProps = typeof __propDef.props;
-export declare type TextFieldEvents = typeof __propDef.events;
-export declare type TextFieldSlots = typeof __propDef.slots;
-export default class TextField extends SvelteComponentTyped<TextFieldProps, TextFieldEvents, TextFieldSlots> {
+export declare type TextfieldProps = typeof __propDef.props;
+export declare type TextfieldEvents = typeof __propDef.events;
+export declare type TextfieldSlots = typeof __propDef.slots;
+export default class Textfield extends SvelteComponentTyped<TextfieldProps, TextfieldEvents, TextfieldSlots> {
 }
 export {};

package/index.d.ts

@@ -2,7 +2,7 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
-export { default as TextField } from './forms/TextField.svelte';
+export { default as TextField } from './forms/Textfield.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
 export { default as Avatar } from './media/Avatar.svelte';

package/index.js

@@ -5,7 +5,7 @@ export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
 // forms
-export { default as TextField } from './forms/TextField.svelte';
+export { default as TextField } from './forms/Textfield.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 // media

package/loaders/Skeleton.svelte

@@ -1,28 +1,37 @@
-<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, padding = '10px', width = undefined, height = undefined, dark = false;
-$: cssVariables = Object.entries({
-    '--max-width': maxWidth,
-    '--max-height': maxHeight,
-    '--min-width': minWidth,
-    '--min-height': minHeight,
-    '--width': width,
-    '--height': height,
-    '--padding': padding,
-    '--card-background': dark ? '#000000' : '#fff',
-    '--element-background': dark ? '#1a1a1a' : '#eee',
-    '--animation-color': dark ? '#000000e6' : '#ffffffe6',
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
+<script  context="module">export {};
 </script>
 
-<div class="card" style={cssVariables}>
+<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%", padding = '10px', dark = false;
+$: widthLessPadding = `calc(${width} - (${padding} * 2))`;
+$: heightLessPadding = `calc(${height} - (${padding} * 2))`;
+$: maxWidthLessPadding = `calc(${maxWidth} - (${padding} * 2))`;
+$: maxHeightLessPadding = `calc(${maxHeight} - (${padding} * 2))`;
+$: minWidthLessPadding = `calc(${minWidth} - (${padding} * 2))`;
+$: minHeightLessPadding = `calc(${minHeight} - (${padding} * 2))`;
+$: elementBackground = dark ? '#1a1a1a' : '#eee';
+$: animationBackground = dark ? '#000000e6' : '#ffffffe6';
+$: cardBackground = dark ? '#000000' : '#fff';
+</script>
+
+
+<div 
+  style:--skeleton-card-background={cardBackground}
+  style:--skeleton-animation-color={animationBackground}
+  style:width={widthLessPadding}
+  style:height={heightLessPadding}
+  style:max-width={maxWidthLessPadding}
+  style:max-height={maxHeightLessPadding}
+  style:min-width={minWidthLessPadding}
+  style:min-height={minHeightLessPadding}
+  style:padding={padding}
+  class="card"
+>
   {#each sections as section}
     {#if section.type == 'image'}
       <div 
+        style:height={section.height}
+        style:background={elementBackground}
         class="skeleton-image"
-        style="height: {section.height}"
       ></div>
     {/if}
   {/each}
@@ -30,7 +39,6 @@ import '$lib/common/tailwind.css';
 
 <style>
   .skeleton-image {
-    background: var(--element-background);
     margin-bottom: 10px;
     border-radius: 5px;
     overflow: hidden;
@@ -38,17 +46,10 @@ import '$lib/common/tailwind.css';
   }
   
   .card {
-    background: var(--card-background);
+    background: var(--skeleton-card-background);
     position: relative;
-    padding: var(--padding);
     border-radius: 5px;
     box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
-    width: calc(var(--width) - (var(--padding) * 2));
-    height: calc(var(--height) - (var(--padding) * 2));
-    max-width: calc(var(--max-width) - (var(--padding) * 2));
-    max-height: calc(var(--max-height) - (var(--padding) * 2));
-    min-width: calc(var(--min-width) - (var(--padding) * 2));
-    min-height: calc(var(--min-height) - (var(--padding) * 2));
     overflow: hidden;
   }
 
@@ -67,7 +68,7 @@ import '$lib/common/tailwind.css';
     background: linear-gradient(
       90deg,
       transparent,
-      var(--animation-color),
+      var(--skeleton-animation-color),
       transparent
     );
     width: 50%;

package/loaders/Skeleton.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SectionType } from './sectionType';
-import '$lib/common/tailwind.css';
+export declare type SectionType = "image" | "text";
 declare const __propDef: {
     props: {
         sections?: {
@@ -11,9 +10,9 @@ declare const __propDef: {
         maxHeight?: string;
         minWidth?: string;
         minHeight?: string;
-        padding?: string;
         width?: string;
         height?: string;
+        padding?: string;
         dark?: boolean;
     };
     events: {

package/media/Carousel.svelte

@@ -1,18 +1,13 @@
 <script >import { onMount } from 'svelte';
-export let images = [];
-let container, width = '0px', height = '0px';
+export let images = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%";
+let container, localWidth = '0px', localHeight = '0px';
 onMount(() => {
     calculateWidthAndHeight();
 });
 function calculateWidthAndHeight() {
-    width = container.offsetWidth + 'px';
-    height = container.offsetHeight + 'px';
+    localWidth = container.offsetWidth + 'px';
+    localHeight = container.offsetHeight + 'px';
 }
-$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
 import Image from './Image.svelte';
 </script>
 
@@ -22,9 +17,16 @@ import Image from './Image.svelte';
 
 
 <div 
-  style={cssVariables} 
+  style:max-width={maxWidth}
+  style:max-height={maxHeight}
+  style:min-width={minWidth}
+  style:min-height={minHeight}
+  style:width={width}
+  style:height={height}
+  style:display="flex"
+  style:flex-wrap="no-wrap"
   bind:this={container}
-  class="container flex flex-nowrap"
+  class="container"
 >
   {#each images as image}
     <div class="image-container">
@@ -34,9 +36,9 @@ import Image from './Image.svelte';
         description={image.description}
         disableHover={true}
         showSkeletonLoader={false}
-        minWidth={width}
-        width={width}
-        height={height}
+        minWidth={localWidth}
+        width={localWidth}
+        height={localHeight}
         imageContain={true}
         imageCover={false}
       />
@@ -46,12 +48,6 @@ import Image from './Image.svelte';
 
 <style>
   .container {
-    height: var(--height);
-    width: var(--width);
-    max-height: var(--max-height);
-    max-width: var(--max-width);
-    min-height: var(--min-height);
-    min-width: var(--min-width);
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     -ms-overflow-style: none;  /* Internet Explorer 10+ */

package/media/Carousel.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         images?: {
@@ -7,6 +6,12 @@ declare const __propDef: {
             title: string;
             description: string;
         }[];
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/media/Image.svelte

@@ -1,5 +1,4 @@
-<script >import { SectionType } from "../loaders/sectionType";
-import { browser } from '$app/env';
+<script >import { browser } from '$app/env';
 export let maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, borderRadius = undefined, src = undefined, title = undefined, description = undefined, dark = false, disableHover = false, showSkeletonLoader = true, imageCover = true, imageContain = false;
 const load = (src) => {
     return new Promise(async (resolve, reject) => {
@@ -16,13 +15,8 @@ const load = (src) => {
         }
     });
 };
-$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
 import IntersectionObserver from '../common/IntersectionObserver.svelte';
 import Skeleton from "../loaders/Skeleton.svelte";
-import '$lib/common/tailwind.css';
 </script>
 
 <div 
@@ -33,7 +27,6 @@ import '$lib/common/tailwind.css';
   style:max-height={maxHeight}
   style:min-height={minHeight}
   style:border-radius={borderRadius}
-  style={cssVariables} 
   class="image-container"
 >
   <IntersectionObserver once={true} let:intersecting={intersecting}>
@@ -43,7 +36,7 @@ import '$lib/common/tailwind.css';
           <Skeleton
             sections={[
               {
-                type: SectionType.Image,
+                type: 'image',
                 height: `100%`
               }
             ]}
@@ -82,7 +75,7 @@ import '$lib/common/tailwind.css';
         <Skeleton
           sections={[
             {
-              type: SectionType.Image,
+              type: 'image',
               height: `100%`
             }
           ]}

package/media/Image.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         maxWidth?: string;

package/media/ImageGrid.svelte

@@ -1,20 +1,15 @@
 <script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
-$: cssVariables = Object.entries({
-    '--columns': columns
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
 import Image from './Image.svelte';
-import '$lib/common/tailwind.css';
 </script>
 
-<div 
-  style={cssVariables}
+<div
   class="container flex-container"
 >
   {#each images as image }
-    <div class="image-container">
+    <div 
+      style:width={`calc((100% / var(${columns})) - (10px * ${columns})))`}
+      class="image-container"
+    >
       <Image
         src={image.url}
         height={imageHeight}
@@ -26,7 +21,7 @@ import '$lib/common/tailwind.css';
         description={image.description}
         disableHover={disableHover}
         dark={dark}
-        --border-radius="10px"
+        borderRadius="10px"
       ></Image>
     </div>
   {/each}
@@ -47,6 +42,5 @@ import '$lib/common/tailwind.css';
   .image-container {
     margin-right: 10px;
     margin-bottom: 10px;
-    width: calc((100% / var(--columns)) - (10px * var(--columns)));
   }
 </style>

package/media/ImageGrid.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         images?: {

package/navigation/HeaderMenu.svelte

@@ -13,7 +13,6 @@ function handleScroll() {
         lastScrollY = scrollY;
     }
 }
-import '$lib/common/tailwind.css';
 import Navigator from './Navigator.svelte';
 </script>
 
@@ -23,21 +22,32 @@ import Navigator from './Navigator.svelte';
 ></svelte:window>
 
 <nav
-  class="
-    shadow-md sticky h-14 -top-14 transition-all
-    flex flex-wrap items-center
-    header-menu-container
-  "
+  style:position="sticky"
+  style:display="flex"
+  style:flex-wrap="wrap"
+  style:align-items="center"
+  style:height="56px"
+  class="shadow-md transition-all header-menu-container"
+  class:-top-14={!visible}
   class:top-0={visible}
 >
   {#if $$slots.prepend}
-    <div class="h-14 flex-none">
+    <div 
+      style:height="56px"
+      style:flex="none"
+    >
       <slot name="prepend"></slot>
     </div>
   {/if}
-  <div class="grow ml-1">
+  <div 
+    style:flex-grow="1"
+    style:margin-left="4px"
+  >
     <slot name="title">
-      <span class="text-2xl">{title}</span>
+      <span 
+        style:font-size="24px"
+        style:line-height="32px"
+      >{title}</span>
     </slot>
   </div>
   <div>
@@ -54,4 +64,31 @@ import Navigator from './Navigator.svelte';
     color: var(--color);
     width: var(--width, 100vw)
   }
+
+  .shadow-md {
+    --shadow-color: #000;
+    --ring-inset: inset;
+    --ring-offset-width: 0px;
+    --ring-color: rgb(255 255 255/0.1);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    --ring-shadow: 0 0 #0000;
+    --shadow: 0 0 #0000;
+    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
+  }
+
+  .-top-14 {
+    top: -56px;
+  }
+
+  .top-0 {
+    top: 0;
+  }
+
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
 </style>

package/navigation/HeaderMenu.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Item } from "./Navigator.svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         title?: string;

package/navigation/Navigator.svelte

@@ -2,12 +2,16 @@
 </script>
 
 <script >export let items = [];
-import '$lib/common/tailwind.css';
 </script>
 
-<div class="flex">
+<div 
+  style:display="flex"
+>
   {#each items as item}
-    <div class="link bar-link mr-5">
+    <div 
+      style:margin-right="20px"
+      class="link bar-link"
+    >
       {item.title}
     </div>
   {/each}

package/navigation/Navigator.svelte.d.ts

@@ -4,7 +4,6 @@ export declare type Item = {
     name: string;
     url?: string;
 };
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         items?: Item[];

package/navigation/TabSwitcher.svelte

@@ -23,23 +23,19 @@ function setBookmarkPosition() {
     bookmarkWidth = tabButton.offsetWidth - 10;
     bookmarkLeft = tabButton.offsetLeft + 5;
 }
-$: cssVariables = Object.entries({
-    '--bookmark-left': bookmarkLeft + 'px',
-    '--bookmark-width': bookmarkWidth + 'px',
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
 </script>
 
 <div 
-  class="tab-switcher-container flex relative"
-  style={cssVariables}
+  style:position="relative"
+  style:display="flex"
+  class="tab-switcher-container"
 >
   {#each tabs as tab}
     <div 
-      class="mx-3 p-2 cursor-pointer"
+      style:cursor="pointer"
+      style:margin-left="12px"
+      style:margin-right="12px"
+      style:padding="8px"
       class:selected-tab={tab.name == selected}
       on:click={() => handleTabClick(tab)}
       bind:this={tabButtons[tab.name]}
@@ -47,7 +43,9 @@ import '$lib/common/tailwind.css';
       {tab.label}
     </div>
   {/each}
-  <span 
+  <span
+    style:left={bookmarkLeft + 'px'}
+    style:width={bookmarkWidth + 'px'}
     class="bookmark"
   ></span>
   <span class="horizontal-guide"></span>
@@ -80,8 +78,6 @@ import '$lib/common/tailwind.css';
     z-index: 10;
     background-color: var(--bookmark-color, var(--color, rgb(51 65 85)));
     transition: left 400ms, width 400ms;
-    left: var(--bookmark-left);
-    width: var(--bookmark-width)
   }
 
 </style>

package/navigation/TabSwitcher.svelte.d.ts

@@ -4,7 +4,6 @@ export declare type Tab = {
     label: string;
     icon?: string;
 };
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         tabs?: Tab[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -29,7 +29,6 @@
     "./common/Gesture.svelte": "./common/Gesture.svelte",
     "./common/IntersectionObserver.svelte": "./common/IntersectionObserver.svelte",
     "./common/materialDesign.css": "./common/materialDesign.css",
-    "./common/tailwind.css": "./common/tailwind.css",
     "./dates/Calendar.svelte": "./dates/Calendar.svelte",
     "./dates/utils": "./dates/utils.js",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",

package/shop/ProductCard.svelte

@@ -1,17 +1,19 @@
-<script >export let image = '', title = '', sale = false, saleText = 'SALE', price = undefined, currency = '€', discount = undefined;
+<script >export let image = '', title = '', sale = false, saleText = 'SALE', price = undefined, currency = '€', discount = undefined, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined;
 $: priceLessDiscount = Number((price - discount).toFixed(2));
 import Image from '../media/Image.svelte';
-import '$lib/common/tailwind.css';
 </script>
 
 <style>
-  .container {
-    height: var(--height);
-    width: var(--width);
-    max-height: var(--max-height);
-    max-width: var(--max-width);
-    min-height: var(--min-height);
-    min-width: var(--min-width);
+  .shadow-lg {
+    --shadow-color: #000;
+    --ring-inset: inset;
+    --ring-offset-width: 0px;
+    --ring-color: rgb(255 255 255/0.1);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    --ring-shadow: 0 0 #0000;
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
   }
 
   .info {
@@ -19,7 +21,16 @@ import '$lib/common/tailwind.css';
   }
 </style>
 
-<div class="container rounded-md shadow-lg">
+<div 
+  style:width={width}
+  style:height={height}
+  style:max-width={maxWidth}
+  style:max-height={maxHeight}
+  style:min-width={minWidth}
+  style:min-height={minHeight}
+  style:border-radius="0.375rem"
+  class="container shadow-lg"
+>
   <Image
     src={image}
     width="100%"
@@ -28,27 +39,63 @@ import '$lib/common/tailwind.css';
     --border-radius="10px 10px 0px 0px"
   >
     {#if sale}
-      <div class="font-semibold text-sm text-stone-50 bg-red-500 rounded-md top-2 right-2 w-fit absolute px-2">{saleText}</div>
+      <div 
+        style:font-weight="600"
+        style:font-size="14px"
+        style:line-height="20px"
+        style:color="rgb(250 250 249)"
+        style:background-color="rgb(239 68 68)"
+        style:border-radius="0.375rem"
+        style:top="8px"
+        style:right="8px"
+        style:width="fit-content"
+        style:position="absolute"
+        style:padding-left="8px"
+        style:padding-right="8px"
+      >{saleText}</div>
     {/if}
   </Image>
-  <div class="info p-2 relative ">
-    <div class="font-semibold">{title}</div>
+  <div 
+    style:padding="8px"
+    style:position="relative"
+    class="info"
+  >
+    <div style:font-weight="600" >{title}</div>
     {#if (price !== undefined && price !== null) || (discount !== undefined && discount !== null)}
-      <div class="absolute bottom-2 right-2">
+      <div 
+        style:position="absolute"
+        style:bottom="19px"
+        style:right="8px"
+      >
         {#if discount !== undefined && discount !== null }
-          <span class="line-through text-md tracking-wide font-normal text-gray-400">
+          <span 
+            style:text-decoration-line="line-through"
+            style:font-size=""
+            style:letter-spacing="0.025em"
+            style:font-weight="400px"
+            style:color="rgb(156 163 175)"
+          >
             {priceLessDiscount} {currency}
           </span>
         {/if}
 
         {#if price !== undefined && price !== null }
-          <span class="text-lg tracking-wide font-semibold">
+          <span 
+            style:letter-spacing="0.025em"
+            style:font-size="18px"
+            style:line-height="28px"
+            style:font-weight="600"
+          >
             {price} {currency}
           </span>
         {/if}
       </div>
     {/if}
-    <div class="absolute bottom-2 left-2">
+    <div 
+      style:position="absolute"
+      style:bottom="19px"
+      style:left="8px"
+    >
       <slot name="sizes">
 
       </slot>

package/shop/ProductCard.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         image?: string;
@@ -9,6 +8,12 @@ declare const __propDef: {
         price?: number;
         currency?: string;
         discount?: number;
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/shop/ProductsGrid.svelte

@@ -1,28 +1,22 @@
-<script >export let products = [], productMaxWidth = '90vw', productMinWidth = '200px', productMaxHeight = '90vh', productMinHeight = '300px', productHeight = '300px', productWidth = '200px';
-$: cssVariables = Object.entries({
-    '--min-width': productMinWidth || productWidth || '200px',
-    '--product-width': productWidth || '200px'
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
+<script >export let products = [], productMaxWidth = '90vw', productMinWidth = '200px', productMaxHeight = '90vh', productMinHeight = '300px', productHeight = '300px', productWidth = '200px', width = '100%', gap = '1rem';
 import ProductCard from './ProductCard.svelte';
-import '$lib/common/tailwind.css';
 </script>
 
 <div 
+  style:width={width}
+  style:gap={gap}
+  style:grid-template-columns={`repeat(auto-fit, minmax(${productMinWidth || productWidth || '200px'}, ${productWidth}))`}
   class="product-grid-container"
-  style={cssVariables}
 >
   {#each products as product }
     <div class="product-container">
       <ProductCard
-        --height={productHeight}
-        --width={productWidth}
-        --max-width={productMaxWidth}
-        --min-width={productMinWidth}
-        --max-height={productMaxHeight}
-        --min-height={productMinHeight}
+        height={productHeight}
+        width={productWidth}
+        max-width={productMaxWidth}
+        min-width={productMinWidth}
+        max-height={productMaxHeight}
+        min-height={productMinHeight}
         image={product.image}
         title={product.title}
         sale={product.sale}
@@ -41,11 +35,8 @@ import '$lib/common/tailwind.css';
 
 <style>
   .product-grid-container {
-    width: var(--width, 100%);
     display: grid;
-    gap: var(--gap, 1rem);
     align-content: space-between;
-    grid-template-columns: repeat(auto-fit, minmax(var(--min-width), var(--product-width)));
   }
 
   .product-container {

package/shop/ProductsGrid.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         products?: {
@@ -17,6 +16,8 @@ declare const __propDef: {
         productMinHeight?: string;
         productHeight?: string;
         productWidth?: string;
+        width?: string;
+        gap?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/timeline/ScrollTimeLine.svelte

@@ -21,7 +21,6 @@ $: if (!!value && periods.length > 0) {
     visiblePeriodIndex = periods.findIndex((period) => period.name == value.name);
 }
 import Gesture from '../common/Gesture.svelte';
-import '$lib/common/tailwind.css';
 </script>
 
 <style>
@@ -45,7 +44,7 @@ import '$lib/common/tailwind.css';
   style:minHeight={minHeight}
   class="timeline-container"
 >
-  <div style="display: flex;">
+  <div style:display="flex">
     {#if sideMenuVisible}
       <div class="side-menu shrink">
         {#if !!value}

package/timeline/ScrollTimeLine.svelte.d.ts

@@ -6,7 +6,6 @@ export declare type Period = {
     from?: Date;
     to?: Date;
 };
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         value?: Period | undefined;

package/common/tailwind.css

@@ -1,149 +0,0 @@
-html {
-  --shadow-color: #000;
-  --ring-inset: inset;
-  --ring-offset-width: 0px;
-  --ring-color: rgb(255 255 255/0.1);
-  --ring-offset-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
-  --ring-shadow: 0 0 #0000;
-  --shadow: 0 0 #0000;
-}
-
-.relative {
-  position: relative;
-}
-.sticky {
-  position: sticky;
-}
-
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-none {
-  flex: none;
-}
-
-.shrink {
-  flex-shrink: 1;
-}
-
-.grow {
-  flex-grow: 1;
-}
-
-.text-2xl {
-  font-size: 1.5rem/* 24px */;
-  line-height: 2rem/* 32px */;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.rounded-md {
-  border-radius: 0.375rem
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.border-solid {
-  border-style: solid;
-}
-
-.-top-12 {
-  top: -3rem/* -48px */;
-}
-
-.-top-14 {
-  top: -3.5rem/* -56px */;
-}
-
-.top-0 {
-  top: 0;
-}
-
-.bottom-3 {
-  bottom: 0.75rem/* 12px */;
-}
-
-.bottom-2 {
-  bottom: 0.5rem/* 8px */;
-}
-
-.mt-1 {
-  margin-top: 0.25rem/* 4px */;
-}
-
-.mt-6 {
-  margin-top: 1.5rem/* 24px */;
-}
-
-.ml-2 {
-  margin-left: 0.5rem/* 8px */;
-}
-
-.mr-2 {
-  margin-right: 0.5rem/* 8px */;
-}
-
-.mr-5 {
-  margin-right: 1.25rem/* 20px */;
-}
-
-.mx-2 {
-  margin-left: 0.5rem/* 8px */;
-  margin-right: 0.5rem/* 8px */;
-}
-
-.mx-3 {
-  margin-left: 0.75rem/* 12px */;
-  margin-right: 0.75rem/* 12px */;
-}
-
-.p-2 {
-  padding: 0.5rem/* 8px */;
-}
-
-.h-12 {
-  height: 3rem/* 48px */;
-}
-
-.h-14 {
-  height: 3.5rem/* 56px */;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
-.shadow-lg {
-  --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-colored: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
-  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
-}
-
-.shadow-md {
-  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-colored: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
-  box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
-}