odj-svelte-ui 0.1.0 → 0.2.0

package/README.md

@@ -5,7 +5,8 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
 - [Original Docs](https://svelte-5-ui-lib.codewithshin.com/)
 
 ## Differences to Flowbite
-- You can choose the "background" color instead of using the hard-coded `gray` color. You have to choose your colors defining `light-surface` and `dark-surface` on `tailwind.config.js`.
+- Migration to Tailwind v4;
+- You can choose the "background" color instead of using the hard-coded `gray` color. You have to choose your colors defining `light-surface` and `dark-surface` on `app.css`;
 - Some components have the design slightly different:
   - All components: instead of using focus-within, uses focus-visible;
   - Forms: When focus, border slightly thicker;
@@ -14,54 +15,98 @@ This is a fork from [Flowbite for Svelte 5 with Runes](https://svelte-5-ui-lib.c
   - `Textarea` is fixed;
   - `Pagination` respect max-width;
   - `Modal` title has a better size, improved default animations with control of backdrop's animations and removed the outdated divider;
-  - `Label` now has `space-y-1` by default
+  - `Label` now has `space-y-1` by default, a new default color and the `disabled` prop;
+  - `Input:Search` has a better X button for Chromium browsers;
+  - `Radio` has a new design and it's animated;
 - `Tabs` styles are fixed and introduced underline animations and a complete modern redesign for "Full" style;
 - The `Tooltip` component received a rework;
 - `Modal` has <kbd>Esc</kbd> to close again;
+- `Button` has now a built-in loading state and can be controlled by the `loading` prop;
+- `Textarea` can autoexpand as user type, control this by `autoexpand` and `maxRows` props;
 
 ## Installation
 
 Install `svelte`, `tailwindcss`, and `odj-svelte-ui`, update dependencies and install the latest:
 
 ```sh
-npx sv create myapp // select to install tailwindcss
+bunx sv create myapp // select to install tailwindcss
 cd myapp
-pnpm install
-pnpm run dev
-pnpm i -D odj-svelte-ui
+bun install
+bun i -D odj-svelte-ui
+bun dev
 ```
 
-Add the following to tailwind.config.js:
+Add the following to app.css:
+> 💡 TIP: Get colors' codes [here](https://tailwindcss.com/docs/colors#default-color-palette-reference).
 
 ```js
-import type { Config } from 'tailwindcss';
-import colors from 'tailwindcss/colors';
-
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/odj-svelte-ui/**/*.{html,js,svelte,ts}'],
-  darkMode: 'selector',
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          50: '#FFF5F2',
-          100: '#FFF1EE',
-          200: '#FFE4DE',
-          300: '#FFD5CC',
-          400: '#FFBCAD',
-          500: '#FE795D',
-          600: '#EF562F',
-          700: '#EB4F27',
-          800: '#CC4522',
-          900: '#A5371B'
-        },
-        secondary: colors.blue,
-        "light-surface": colors.gray,
-        "dark-surface": colors.gray
-      }
-    }
-  },
-} as Config;
+@import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-primary-50: #fff5f2;
+  --color-primary-100: #fff1ee;
+  --color-primary-200: #ffe4de;
+  --color-primary-300: #ffd5cc;
+  --color-primary-400: #ffbcad;
+  --color-primary-500: #fe795d;
+  --color-primary-600: #ef562f;
+  --color-primary-700: #eb4f27;
+  --color-primary-800: #cc4522;
+  --color-primary-900: #a5371b;
+
+  --color-secondary-50: #eff6ff;
+  --color-secondary-100: #dbeafe;
+  --color-secondary-200: #bfdbfe;
+  --color-secondary-300: #93c5fd;
+  --color-secondary-400: #60a5fa;
+  --color-secondary-500: #3b82f6;
+  --color-secondary-600: #2563eb;
+  --color-secondary-700: #1d4ed8;
+  --color-secondary-800: #1e40af;
+  --color-secondary-900: #1e3a8a;
+  --color-secondary-950: #172554;
+
+  --color-light-surface-50: #f9fafb;
+  --color-light-surface-100: #f3f4f6;
+  --color-light-surface-200: #e5e7eb;
+  --color-light-surface-300: #d1d5db;
+  --color-light-surface-400: #9ca3af;
+  --color-light-surface-500: #6b7280;
+  --color-light-surface-600: #4b5563;
+  --color-light-surface-700: #374151;
+  --color-light-surface-800: #1f2937;
+  --color-light-surface-900: #111827;
+  --color-light-surface-950: #030712;
+
+  --color-dark-surface-50: #f9fafb;
+  --color-dark-surface-100: #f3f4f6;
+  --color-dark-surface-200: #e5e7eb;
+  --color-dark-surface-300: #d1d5db;
+  --color-dark-surface-400: #9ca3af;
+  --color-dark-surface-500: #6b7280;
+  --color-dark-surface-600: #4b5563;
+  --color-dark-surface-700: #374151;
+  --color-dark-surface-800: #1f2937;
+  --color-dark-surface-900: #111827;
+  --color-dark-surface-950: #030712;
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
 ```
 
 ## License

package/dist/{elements → _legacy}/accordion/Accordion.svelte

@@ -29,7 +29,7 @@
   export let multiple: boolean = false;
   export let flush: boolean = false;
   export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
-  export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+  export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800';
   export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
 
   const ctx: AccordionCtxType = {
@@ -56,6 +56,6 @@
 @prop export let multiple: boolean = false;
 @prop export let flush: boolean = false;
 @prop export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
-@prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+@prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800';
 @prop export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
 -->

package/dist/{elements → _legacy}/accordion/Accordion.svelte.d.ts

@@ -31,7 +31,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let multiple: boolean = false;
  * @prop export let flush: boolean = false;
  * @prop export let activeClass: string = 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-800';
- * @prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 hover:dark:bg-neutral-800';
+ * @prop export let inactiveClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800';
  * @prop export let defaultClass: string = 'text-neutral-500 dark:text-neutral-400';
  */
 declare const Accordion: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<import("svelte/elements").HTMLAnchorAttributes & {

package/dist/{elements → _legacy}/avatar/Avatar.svelte

@@ -23,13 +23,13 @@
   };
 
   let avatarClass: string;
-  $: avatarClass = twMerge(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-neutral-50 dark:ring-neutral-800', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-neutral-800', 'bg-neutral-50 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300', $$props.class);
+  $: avatarClass = twMerge(rounded ? 'rounded-sm' : 'rounded-full', border && 'p-1 ring-2 ring-neutral-50 dark:ring-neutral-800', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-neutral-800', 'bg-neutral-50 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-300', $$props.class);
 </script>
 
 {#if !src || !!href || $$slots.default || dot}
   <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class="relative flex justify-center items-center {avatarClass}">
     {#if src}
-      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+      <img {alt} {src} class={rounded ? 'rounded-sm' : 'rounded-full'} />
     {:else}
       <slot><AvatarPlaceholder {rounded} {size} {border} class={twMerge($$props.classPlaceholder)} /></slot>
     {/if}

package/dist/{elements → _legacy}/avatar/Placeholder.svelte

@@ -21,7 +21,7 @@
     xl: 'w-22 h-22 md:w-26 md:h-26'
   };
 
-  let svgClass: string = twMerge('text-neutral-400 bg-neutral-100 dark:bg-neutral-600', rounded ? 'rounded' : 'rounded-full', border ? borderedSizes[size] : sizes[size], $$props.class);
+  let svgClass: string = twMerge('text-neutral-400 bg-neutral-100 dark:bg-neutral-600', rounded ? 'rounded-sm' : 'rounded-full', border ? borderedSizes[size] : sizes[size], $$props.class);
 </script>
 
 <svg class={svgClass} fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

package/dist/{elements → _legacy}/badge/Badge.svelte

@@ -58,7 +58,7 @@
   const baseClass: string = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
 
   let badgeClass: string;
-  $: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? 'rounded-full' : 'rounded', $$props.class);
+  $: badgeClass = twMerge(baseClass, large ? 'text-sm' : 'text-xs', $$restProps.border ? `border ${borderedColors[color]}` : colors[color], $$restProps.href && hoverColors[color], $$restProps.rounded ? 'rounded-full' : 'rounded-sm', $$props.class);
 
   // only overwrite necessary colors (<CloseButton> v0.29.10)
   const closeBtnColors = {

package/dist/{elements → _legacy}/banner/Banner.svelte

@@ -16,7 +16,7 @@
   const divClasses = {
     default: 'top-0 left-0 w-full border-b border-neutral-200 bg-neutral-50',
     bottom: 'bottom-0 left-0 w-full border-t border-neutral-200 bg-neutral-50',
-    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-neutral-100 rounded-lg shadow-sm lg:max-w-7xl left-1/2 top-6',
+    cta: 'flex-col md:flex-row  w-[calc(100%-2rem)] -translate-x-1/2 bg-white border border-neutral-100 rounded-lg shadow-xs lg:max-w-7xl left-1/2 top-6',
     signup: 'top-0 left-0 w-full border-b border-neutral-200 bg-neutral-50',
     info: 'top-0 left-0 flex-col w-full border-b border-neutral-200 md:flex-row bg-neutral-50'
   };
@@ -25,8 +25,8 @@
     default: 'items-center mx-auto',
     bottom: 'items-center mx-auto',
     cta: 'flex-col items-start mb-3 mr-4 md:items-center md:flex-row md:mb-0',
-    signup: 'items-center flex-shrink-0 w-full mx-auto sm:w-auto',
-    info: 'items-center flex-shrink-0'
+    signup: 'items-center shrink-0 w-full mx-auto sm:w-auto',
+    info: 'items-center shrink-0'
   };
 
   $: divClass = twMerge(position, divClass, divClasses[bannerType], $$props.classDiv);

package/dist/{elements → _legacy}/button-group/ButtonGroup.svelte

@@ -4,7 +4,7 @@
   import type { SizeType } from '../types';
 
   export let size: SizeType = 'md';
-  export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+  export let divClass: string = 'inline-flex rounded-lg shadow-xs';
 
   setContext('group', { size });
 </script>
@@ -18,5 +18,5 @@
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let size: SizeType = 'md';
-@prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+@prop export let divClass: string = 'inline-flex rounded-lg shadow-xs';
 -->

package/dist/{elements → _legacy}/button-group/ButtonGroup.svelte.d.ts

@@ -21,7 +21,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let size: SizeType = 'md';
- * @prop export let divClass: string = 'inline-flex rounded-lg shadow-sm';
+ * @prop export let divClass: string = 'inline-flex rounded-lg shadow-xs';
  */
 declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/buttons/Button.svelte

@@ -79,7 +79,7 @@
   const hasBorder = () => outline || color === 'alternative' || color === 'light';
 
   let buttonClass: string;
-  $: buttonClass = twMerge('transition-colors text-center font-medium', group ? 'focus-visible:ring-2' : 'focus-visible:ring-4', group && 'focus:z-10', group || 'focus:outline-none', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-neutral-700 dark:text-white dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-600' : 'dark:bg-transparent dark:border-neutral-600 dark:hover:border-neutral-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-neutral-400 dark:border-neutral-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+  $: buttonClass = twMerge('transition-colors text-center font-medium', group ? 'focus-visible:ring-2' : 'focus-visible:ring-4', group && 'focus:z-10', group || 'focus:outline-hidden', 'inline-flex items-center justify-center ' + sizeClasses[size], outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' && (group ? 'dark:bg-neutral-700 dark:text-white dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-600' : 'dark:bg-transparent dark:border-neutral-600 dark:hover:border-neutral-700'), outline && color === 'dark' && (group ? 'dark:text-white dark:border-white' : 'dark:text-neutral-400 dark:border-neutral-700'), coloredFocusClasses[color], hasBorder() && group && 'border-l-0 first:border-l', group ? (pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : (pill && 'rounded-full') || 'rounded-lg', shadow && 'shadow-lg', shadow && coloredShadowClasses[color], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 </script>
 
 <svelte:element this={href ? 'a' : 'button'} type={href ? undefined : type} {href} role={href ? 'link' : 'button'} {...$$restProps} class={buttonClass} tabindex=0 on:click on:change on:keydown on:keyup on:touchstart|passive on:touchend on:touchcancel on:mouseenter on:mouseleave>

package/dist/_legacy/buttons/GradientButton.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+  import Button from './Button.svelte';
+  import { getContext } from 'svelte';
+
+  const group = getContext('group');
+
+  export let color: keyof typeof gradientClasses = 'blue';
+  export let shadow: boolean = false;
+
+  const gradientClasses = {
+    blue: 'text-white bg-linear-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-linear-to-br focus:ring-blue-300 dark:focus:ring-blue-800 ',
+    green: 'text-white bg-linear-to-r from-green-400 via-green-500 to-green-600 hover:bg-linear-to-br focus:ring-green-300 dark:focus:ring-green-800',
+    cyan: 'text-white bg-linear-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-linear-to-br focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    teal: 'text-white bg-linear-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-linear-to-br focus:ring-teal-300 dark:focus:ring-teal-800',
+    lime: 'text-neutral-900 bg-linear-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-linear-to-br focus:ring-lime-300 dark:focus:ring-lime-800',
+    red: 'text-white bg-linear-to-r from-red-400 via-red-500 to-red-600 hover:bg-linear-to-br focus:ring-red-300 dark:focus:ring-red-800',
+    pink: 'text-white bg-linear-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-linear-to-br focus:ring-pink-300 dark:focus:ring-pink-800',
+    purple: 'text-white bg-linear-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-linear-to-br focus:ring-purple-300 dark:focus:ring-purple-800',
+    purpleToBlue: 'text-white bg-linear-to-br from-purple-600 to-blue-500 hover:bg-linear-to-bl focus:ring-blue-300 dark:focus:ring-blue-800',
+    cyanToBlue: 'text-white bg-linear-to-r from-cyan-500 to-blue-500 hover:bg-linear-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800',
+    greenToBlue: 'text-white bg-linear-to-br from-green-400 to-blue-600 hover:bg-linear-to-bl focus:ring-green-200 dark:focus:ring-green-800',
+    purpleToPink: 'text-white bg-linear-to-r from-purple-500 to-pink-500 hover:bg-linear-to-l focus:ring-purple-200 dark:focus:ring-purple-800',
+    pinkToOrange: 'text-white bg-linear-to-br from-pink-500 to-orange-400 hover:bg-linear-to-bl focus:ring-pink-200 dark:focus:ring-pink-800',
+    tealToLime: 'text-neutral-900 bg-linear-to-r from-teal-200 to-lime-200 hover:bg-linear-to-l focus:ring-lime-200 dark:focus:ring-teal-700',
+    redToYellow: 'text-neutral-900 bg-linear-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-linear-to-bl focus:ring-red-100 dark:focus:ring-red-400'
+  };
+
+  const coloredShadowClasses = {
+    blue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    green: 'shadow-green-500/50 dark:shadow-green-800/80',
+    cyan: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    teal: 'shadow-teal-500/50 dark:shadow-teal-800/80 ',
+    lime: 'shadow-lime-500/50 dark:shadow-lime-800/80',
+    red: 'shadow-red-500/50 dark:shadow-red-800/80 ',
+    pink: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    purple: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    purpleToBlue: 'shadow-blue-500/50 dark:shadow-blue-800/80',
+    cyanToBlue: 'shadow-cyan-500/50 dark:shadow-cyan-800/80',
+    greenToBlue: 'shadow-green-500/50 dark:shadow-green-800/80',
+    purpleToPink: 'shadow-purple-500/50 dark:shadow-purple-800/80',
+    pinkToOrange: 'shadow-pink-500/50 dark:shadow-pink-800/80',
+    tealToLime: 'shadow-lime-500/50 dark:shadow-teal-800/80',
+    redToYellow: 'shadow-red-500/50 dark:shadow-red-800/80'
+  };
+
+  let gradientOutlineClass: string;
+  $: gradientOutlineClass = twMerge(
+    'inline-flex items-center justify-center w-full  border-0!',
+    $$props.pill || 'rounded-md!',
+    'bg-white text-neutral-900! dark:bg-neutral-900 dark:text-white!', // this is limitation - no transparency
+    'hover:bg-transparent hover:text-inherit!',
+    'transition-all duration-75 ease-in group-hover:bg-transparent! group-hover:text-inherit!'
+  );
+
+  let divClass: string;
+  $: divClass = twMerge($$props.outline && 'p-0.5', gradientClasses[color], shadow && 'shadow-lg', shadow && coloredShadowClasses[color], group ? ($$props.pill && 'first:rounded-l-full last:rounded-r-full') || 'first:rounded-l-lg last:rounded-r-lg' : ($$props.pill && 'rounded-full') || 'rounded-lg', $$props.class);
+</script>
+
+{#if $$props.outline}
+  <div class={divClass}>
+    <!-- Trick to prentend outline without using border
+	    This has a limitation of no supporting transparency as
+	    is set to bg-white dark:bg-neutral-900 -->
+    <Button {...$$restProps} color="none" class={gradientOutlineClass} on:click on:change on:keydown on:keyup on:mouseenter on:mouseleave><slot /></Button>
+  </div>
+{:else}
+  <Button {...$$restProps} color="none" class={divClass} on:click on:change on:keydown on:keyup on:touchstart on:touchend on:touchcancel on:mouseenter on:mouseleave>
+    <slot />
+  </Button>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Props
+@prop export let color: keyof typeof gradientClasses = 'blue';
+@prop export let shadow: boolean = false;
+-->

package/dist/{elements → _legacy}/cards/Card.svelte

@@ -33,7 +33,7 @@
     sm: 'max-w-sm',
     md: 'max-w-lg',
     lg: 'max-w-2xl',
-    xl: 'max-w-screen-xl'
+    xl: 'max-w-(--breakpoint-xl)'
   };
 
   let inneraPdding: string;

package/dist/{elements → _legacy}/carousel/ControlButton.svelte

@@ -5,12 +5,12 @@
   export let name: string;
 
   let buttonCls: string;
-  $: buttonCls = twMerge('flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-none text-white dark:text-neutral-300', forward ? 'right-0' : 'left-0', $$props.class);
+  $: buttonCls = twMerge('flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-neutral-300', forward ? 'right-0' : 'left-0', $$props.class);
 </script>
 
 <button on:click type="button" class={buttonCls}>
   <slot>
-    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-neutral-800/30 group-hover:bg-white/50 dark:group-hover:bg-neutral-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-neutral-800/70 group-focus:outline-none">
+    <span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-neutral-800/30 group-hover:bg-white/50 dark:group-hover:bg-neutral-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-neutral-800/70 group-focus:outline-hidden">
       {#if forward}
         <svg aria-hidden="true" class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />

package/dist/{elements → _legacy}/carousel/Slide.svelte

@@ -29,7 +29,7 @@
     duration: $state.slideDuration
   };
 
-  $: imgClass = twMerge('absolute block !w-full h-full object-cover', $$props.class);
+  $: imgClass = twMerge('absolute block w-full! h-full object-cover', $$props.class);
 </script>
 
 {#if transition}

package/dist/{elements → _legacy}/darkmode/DarkMode.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
 
-  export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+  export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-hidden focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
   export let size: 'sm' | 'md' | 'lg' = 'md';
   export let ariaLabel: string = 'Dark mode';
 
@@ -54,7 +54,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
-@prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+@prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-hidden focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
 @prop export let ariaLabel: string = 'Dark mode';
 -->

package/dist/{elements → _legacy}/darkmode/DarkMode.svelte.d.ts

@@ -14,7 +14,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
- * @prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-none focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
+ * @prop export let btnClass: string = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700 focus:outline-hidden focus:ring-4 focus:ring-neutral-200 dark:focus:ring-neutral-700 rounded-lg text-sm p-2.5';
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  * @prop export let ariaLabel: string = 'Dark mode';
  */

package/dist/{elements → _legacy}/drawer/Drawer.svelte

@@ -14,7 +14,6 @@
   export let width: string = 'w-80';
   export let backdrop: boolean = true;
   export let bgColor: string = 'bg-neutral-900';
-  export let bgOpacity: string = 'bg-opacity-75';
   export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
   export let id: string = 'drawer-example';
   export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';
@@ -80,7 +79,6 @@
 @prop export let width: string = 'w-80';
 @prop export let backdrop: boolean = true;
 @prop export let bgColor: string = 'bg-neutral-900';
-@prop export let bgOpacity: string = 'bg-opacity-75';
 @prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
 @prop export let id: string = 'drawer-example';
 @prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';

package/dist/{elements → _legacy}/drawer/Drawer.svelte.d.ts

@@ -30,7 +30,6 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let width: string = 'w-80';
  * @prop export let backdrop: boolean = true;
  * @prop export let bgColor: string = 'bg-neutral-900';
- * @prop export let bgOpacity: string = 'bg-opacity-75';
  * @prop export let placement: 'left' | 'right' | 'top' | 'bottom' = 'left';
  * @prop export let id: string = 'drawer-example';
  * @prop export let divClass: string = 'overflow-y-auto z-50 p-4 bg-white dark:bg-neutral-800';
@@ -49,7 +48,6 @@ declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     width?: string | undefined;
     backdrop?: boolean | undefined;
     bgColor?: string | undefined;
-    bgOpacity?: string | undefined;
     placement?: "left" | "right" | "top" | "bottom" | undefined;
     id?: string | undefined;
     divClass?: string | undefined;

package/dist/{elements → _legacy}/footer/Footer.svelte

@@ -3,7 +3,7 @@
 
   export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
 
-  let footerClass = twMerge(footerType === 'sitemap' && 'bg-neutral-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-neutral-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-neutral-800', footerType === 'default' && 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-neutral-800', $$props.class);
+  let footerClass = twMerge(footerType === 'sitemap' && 'bg-neutral-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-neutral-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow-sm md:px-6 md:py-8 dark:bg-neutral-800', footerType === 'default' && 'p-4 bg-white rounded-lg shadow-sm md:flex md:items-center md:justify-between md:p-6 dark:bg-neutral-800', $$props.class);
 </script>
 
 <footer {...$$restProps} class={footerClass}>

package/dist/{elements → _legacy}/forms/Fileupload.svelte

@@ -4,7 +4,7 @@
 
   export let value: string = '';
   export let files: FileList | undefined = undefined;
-  export let inputClass: string = 'border !p-0 dark:text-neutral-400';
+  export let inputClass: string = 'border p-0! dark:text-neutral-400';
 </script>
 
 <Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
@@ -17,5 +17,5 @@
 ## Props
 @prop export let value: string = '';
 @prop export let files: FileList | undefined = undefined;
-@prop export let inputClass: string = 'border !p-0 dark:text-neutral-400';
+@prop export let inputClass: string = 'border p-0! dark:text-neutral-400';
 -->

package/dist/{elements → _legacy}/forms/Fileupload.svelte.d.ts

@@ -16,7 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * ## Props
  * @prop export let value: string = '';
  * @prop export let files: FileList | undefined = undefined;
- * @prop export let inputClass: string = 'border !p-0 dark:text-neutral-400';
+ * @prop export let inputClass: string = 'border p-0! dark:text-neutral-400';
  */
 declare const Fileupload: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: any;

package/dist/{elements → _legacy}/forms/FloatingLabelInput.svelte

@@ -48,9 +48,9 @@
   };
 
   const inputClasses = {
-    filled: 'block rounded-t-lg w-full text-sm text-neutral-900 bg-neutral-50 dark:bg-neutral-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer',
-    outlined: 'block w-full text-sm text-neutral-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer',
-    standard: 'block w-full text-sm text-neutral-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
+    filled: 'block rounded-t-lg w-full text-sm text-neutral-900 bg-neutral-50 dark:bg-neutral-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-hidden focus:ring-0 peer',
+    outlined: 'block w-full text-sm text-neutral-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-hidden focus:ring-0 peer',
+    standard: 'block w-full text-sm text-neutral-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-hidden focus:ring-0 peer'
   };
 
   const labelClasses = {
@@ -66,7 +66,7 @@
   };
 
   const labelColorClasses = {
-    base: 'text-neutral-500 dark:text-neutral-400 peer-focus:text-primary-600 peer-focus:dark:text-primary-500',
+    base: 'text-neutral-500 dark:text-neutral-400 peer-focus:text-primary-600 dark:peer-focus:text-primary-500',
     green: 'text-green-600 dark:text-green-500',
     red: 'text-red-600 dark:text-red-500'
   };

package/dist/{elements → _legacy}/forms/MultiSelect.svelte

@@ -19,7 +19,7 @@
   };
 
   // Container
-  const multiSelectClass: string = 'relative flex items-center gap-1.5 text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg outline-none focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
+  const multiSelectClass: string = 'relative flex items-center gap-1.5 text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg outline-hidden focus:ring-1 focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
 
   // Dropdown
   let multiSelectDropdown: string;

package/dist/{elements → _legacy}/forms/Radio.svelte

@@ -17,7 +17,7 @@
   export const labelClass = (inline: boolean, extraClass: string) => twMerge(inline ? 'inline-flex' : 'flex', 'items-center', extraClass);
   export let spacing: string = 'mr-2';
 
-  export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => twMerge('w-4 h-4 bg-neutral-100 border-neutral-300 dark:ring-offset-neutral-800 focus:ring-2', spacing, tinted ? 'dark:bg-neutral-600 dark:border-neutral-500' : 'dark:bg-neutral-700 dark:border-neutral-600', custom && 'sr-only peer', rounded && 'rounded', colorClasses[color], extraClass);
+  export const inputClass = (custom: boolean, color: FormColorType, rounded: boolean, tinted: boolean, extraClass: string) => twMerge('w-4 h-4 bg-neutral-100 border-neutral-300 dark:ring-offset-neutral-800 focus:ring-2', spacing, tinted ? 'dark:bg-neutral-600 dark:border-neutral-500' : 'dark:bg-neutral-700 dark:border-neutral-600', custom && 'sr-only peer', rounded && 'rounded-sm', colorClasses[color], extraClass);
 </script>
 
 <script lang="ts">

package/dist/{elements → _legacy}/forms/Select.svelte

@@ -10,7 +10,7 @@
 
   export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
 
-  export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+  export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-hidden focus:ring-0 focus:border-neutral-200 peer';
 
   const common = 'block w-full';
   const sizes = {
@@ -20,7 +20,7 @@
   };
 
   let selectClass: string;
-  $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && '!px-0', $$props.class);
+  $: selectClass = twMerge(common, underline ? underlineClass : defaultClass, sizes[size], underline && 'px-0!', $$props.class);
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
@@ -45,5 +45,5 @@
 @prop export let underline: boolean = false;
 @prop export let size: 'sm' | 'md' | 'lg' = 'md';
 @prop export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
-@prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+@prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-hidden focus:ring-0 focus:border-neutral-200 peer';
 -->

package/dist/{elements → _legacy}/forms/Select.svelte.d.ts

@@ -26,7 +26,7 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
  * @prop export let underline: boolean = false;
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
  * @prop export let defaultClass: string = 'text-neutral-900 bg-neutral-50 border border-neutral-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-700 dark:border-neutral-600 dark:placeholder-neutral-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500';
- * @prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-none focus:ring-0 focus:border-neutral-200 peer';
+ * @prop export let underlineClass: string = 'text-neutral-500 bg-transparent border-0 border-b-2 border-neutral-200 appearance-none dark:text-neutral-400 dark:border-neutral-700 focus:outline-hidden focus:ring-0 focus:border-neutral-200 peer';
  */
 declare const Select: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;

package/dist/{elements → _legacy}/forms/Textarea.svelte

@@ -6,7 +6,7 @@
   const background = getContext('background');
 
   export let value: any = undefined;
-  export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+  export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0';
   export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
   export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
   let wrapped: boolean;
@@ -45,7 +45,7 @@
 [Go to docs](https://flowbite-svelte.com/)
 ## Props
 @prop export let value: any = undefined;
-@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+@prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0';
 @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
 @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
 -->

package/dist/{elements → _legacy}/forms/Textarea.svelte.d.ts

@@ -15,7 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Props
  * @prop export let value: any = undefined;
- * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-none focus:ring-0';
+ * @prop export let wrappedClass: string = 'block w-full text-sm border-0 px-0 bg-inherit dark:bg-inherit focus:outline-hidden focus:ring-0';
  * @prop export let unWrappedClass: string = 'p-2.5 text-sm focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500';
  * @prop export let innerWrappedClass: string = 'py-2 px-4 bg-white dark:bg-neutral-800';
  */

package/dist/{elements → _legacy}/indicators/Indicator.svelte

@@ -68,7 +68,7 @@
   };
 
   let dotClass: string;
-  $: dotClass = twMerge('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-neutral-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+  $: dotClass = twMerge('shrink-0', rounded ? 'rounded-sm' : 'rounded-full', border && 'border-2 border-white dark:border-neutral-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
 </script>
 
 <div class={dotClass}><slot /></div>