flowbite-svelte 2.0.0-next.0 → 2.0.0-next.2

package/dist/accordion/theme.js

@@ -39,7 +39,7 @@ export const accordionItem = tv({
                 content: "py-5 border-b border-default text-body"
             },
             false: {
-                button: "rounded-t-base hover:text-heading hover:bg-neutral-secondary-medium",
+                button: "hover:text-heading hover:bg-neutral-secondary-medium",
                 contentWrapper: "border border-s-0 border-e-0 border-t-0 border-b-default",
                 content: "p-4 md:p-5"
             }

package/dist/command-palette/CommandPalette.svelte

@@ -194,7 +194,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
+[CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2119)
 ## Props
 @prop open = $bindable(false)
 @prop items = []

package/dist/command-palette/CommandPalette.svelte.d.ts

@@ -2,7 +2,7 @@ import type { CommandPaletteProps } from "../types";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2253)
+ * [CommandPaletteProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L2119)
  * ## Props
  * @prop open = $bindable(false)
  * @prop items = []

package/dist/context.d.ts

@@ -1,4 +1,4 @@
-import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType } from "./types";
+import type { AccordionContextType, BottomNavContextType, CarouselContextType, DrawerContextType, DropdownContextType, PaginationContextType, ButtonToggleContextType, ListContextType, ToolbarContextType, ListGroupContextType, ButtonGroupContextType, NavbarState, NavbarBreakpoint, SidebarContextType, TableContextType, TabsContextType, SpeedCtxType } from "./types";
 import type { SplitPaneContext } from "./types";
 import type { ThemeConfig } from "./theme";
 declare const getAccordionContext: () => AccordionContextType | undefined, setAccordionContext: (context: AccordionContextType) => AccordionContextType;
@@ -48,3 +48,5 @@ declare const getSplitPaneContext: () => SplitPaneContext | undefined, setSplitP
 export { getSplitPaneContext, setSplitPaneContext };
 declare const getTabsContext: () => TabsContextType | undefined, setTabsContext: (context: TabsContextType) => TabsContextType;
 export { getTabsContext, setTabsContext };
+declare const getSpeedDialContext: () => SpeedCtxType | undefined, setSpeedDialContext: (context: SpeedCtxType) => SpeedCtxType;
+export { getSpeedDialContext, setSpeedDialContext };

package/dist/context.js

@@ -69,3 +69,6 @@ export { getSplitPaneContext, setSplitPaneContext };
 // Tabs
 const [getTabsContext, setTabsContext] = createSafeContext();
 export { getTabsContext, setTabsContext };
+// SpeedDial
+const [getSpeedDialContext, setSpeedDialContext] = createSafeContext();
+export { getSpeedDialContext, setSpeedDialContext };

package/dist/datepicker/Datepicker.svelte

@@ -438,9 +438,13 @@
         {disabled}
         aria-label={isOpen ? "Close date picker" : "Open date picker"}
       >
-        <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+        <svg class="text-body h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
           <path
-            d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Zm3-7h.01v.01H8V13Zm4 0h.01v.01H12V13Zm4 0h.01v.01H16V13Zm-8 4h.01v.01H8V17Zm4 0h.01v.01H12V17Zm4 0h.01v.01H16V17Z"
           ></path>
         </svg>
       </button>

package/dist/datepicker/theme.js

@@ -1,17 +1,17 @@
 import { tv } from "tailwind-variants";
 export const datepicker = tv({
     slots: {
-        base: "inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4",
-        input: "w-full rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 border-gray-300 bg-gray-50 text-gray-900",
+        base: "inline-block rounded-base bg-white dark:bg-gray-700 shadow-lg p-4",
+        input: "w-full rounded-base border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50 border-gray-300 bg-gray-50 text-gray-900",
         titleVariant: "mb-2 text-lg font-semibold text-gray-900 dark:text-white",
-        polite: "text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
+        polite: "text-sm rounded-base text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200",
         button: "absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400",
         actionButtons: "mt-4 flex justify-between",
         columnHeader: "text-center text-sm font-medium text-gray-500 dark:text-gray-400",
         grid: "grid grid-cols-7 gap-1 w-64",
         nav: "mb-4 flex items-center justify-between",
-        dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0",
-        monthButton: "rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700",
+        dayButton: "h-8 w-full block flex-1 leading-9 border-0 rounded-base cursor-pointer text-center font-semibold text-sm day p-0",
+        monthButton: "rounded-base px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700",
         actionSlot: "",
         monthBtnSelected: "bg-brand text-white",
         monthBtn: "text-gray-700 dark:text-gray-300"

package/dist/footer/theme.js

@@ -3,7 +3,7 @@ export const footer = tv({
     base: "bg-white dark:bg-gray-800",
     variants: {
         footerType: {
-            default: "p-4 rounded-lg shadow md:flex md:items-center md:justify-between md:p-6",
+            default: "p-4 rounded-base shadow md:flex md:items-center md:justify-between md:p-6",
             sitemap: "bg-white dark:bg-gray-900",
             socialmedia: "p-4 sm:p-6",
             logo: "p-4 rounded-lg shadow md:px-6 md:py-8",

package/dist/forms/floating-label/FloatingLabelInput.svelte

@@ -35,7 +35,10 @@
 
   const { base, input, label, close, combo } = $derived(floatingLabelInput({ variant, size, validation, disabled, withIcon }));
 
-  const clearAll = () => {
+  // Track if clear button should be shown
+  const showClearButton = $derived(clearable && value !== undefined && value !== "");
+
+  const clearAll = (_event?: MouseEvent) => {
     if (elementRef) {
       elementRef.value = "";
       value = "";
@@ -177,8 +180,8 @@
     onblur={handleBlur}
     onkeydown={handleKeydown}
   />
-  {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
+  {#if showClearButton}
+    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} ariaLabel="Clear search value" svgClass={clsx(styling?.svg)} />
   {/if}
   <label for={id} class={label({ class: clsx(theme?.label, styling?.label) })}>
     {@render children()}

package/dist/forms/input-addon/InputAddon.svelte

@@ -40,7 +40,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L831)
+[InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L815)
 ## Props
 @prop children
 @prop class: className

package/dist/forms/input-addon/InputAddon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { InputAddonProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L831)
+ * [InputAddonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L815)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/forms/input-field/Input.svelte

@@ -6,9 +6,8 @@
   import CloseButton from "../../utils/CloseButton.svelte";
   import { input } from "./theme";
   import { clampSize } from "./index";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
-  import { untrack } from "svelte";
 
   let {
     children,
@@ -21,23 +20,11 @@
     color = "default",
     class: className,
     classes,
-    wrapperClass,
-    leftClass,
-    rightClass,
-    divClass,
-    clearableSvgClass,
     clearableColor = "none",
-    clearableClass,
     clearableOnClick,
     data = [],
     maxSuggestions = 5,
     onSelect,
-    comboClass,
-    comboItemClass,
-    onInput,
-    onFocus,
-    onBlur,
-    onKeydown,
     oninput,
     onfocus,
     onblur,
@@ -45,22 +32,16 @@
     ...restProps
   }: InputProps<InputValue> = $props();
 
-  warnThemeDeprecation(
-    "Input",
-    untrack(() => ({ wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableClass, comboClass })),
-    { wrapperClass: "wrapper", leftClass: "left", rightClass: "right", divClass: "div", clearableSvgClass: "svg", clearableClass: "close", comboClass: "comboItem" }
-  );
-
-  const styling = $derived(classes ?? { left: leftClass, right: rightClass, div: divClass, svg: clearableSvgClass, close: clearableClass, combo: comboClass, comboItem: comboItemClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("input"));
 
   // onSelect is a custom combobox selection handler that takes a string
-  // standard DOM events, onInput, onFocus, onBlur, onKeydown will be deprecated in the next minor version
-  const resolvedOnInput = $derived(oninput || onInput);
-  const resolvedOnFocus = $derived(onfocus || onFocus);
-  const resolvedOnBlur = $derived(onblur || onBlur);
-  const resolvedOnKeydown = $derived(onkeydown || onKeydown);
+  // Derive event handler props (using lowercase DOM event names: oninput, onfocus, onblur, onkeydown)
+  const resolvedOnInput = $derived(oninput);
+  const resolvedOnFocus = $derived(onfocus);
+  const resolvedOnBlur = $derived(onblur);
+  const resolvedOnKeydown = $derived(onkeydown);
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -256,21 +237,21 @@
 {/if}
 
 {#if isCombobox || right || left || clearable}
-  <div class={base({ class: clsx(theme?.base, styling.div) })}>
+  <div class={base({ class: clsx(theme?.base, styling?.div) })}>
     {#if left}
-      <div class={leftCls({ class: clsx(theme?.left, styling.left) })}>
+      <div class={leftCls({ class: clsx(theme?.left, styling?.left) })}>
         {@render left()}
       </div>
     {/if}
     {@render inputContent(true)}
     {#if right}
-      <div class={rightCls({ class: clsx(theme?.right, styling.right) })}>
+      <div class={rightCls({ class: clsx(theme?.right, styling?.right) })}>
         {@render right()}
       </div>
     {/if}
 
     {#if isCombobox && isFocused && filteredSuggestions.length > 0}
-      <div class={combo({ class: clsx(theme?.combo, styling.combo) })}>
+      <div class={combo({ class: clsx(theme?.combo, styling?.combo) })}>
         {#each filteredSuggestions as item, i (item)}
           <button
             type="button"
@@ -278,7 +259,7 @@
             onclick={() => selectItem(item)}
             onmouseenter={() => (selectedIndex = i)}
           >
-            <p class={comboItem({ class: clsx(theme?.comboItem, styling.comboItem) })}>{item}</p>
+            <p class={comboItem({ class: clsx(theme?.comboItem, styling?.comboItem) })}>{item}</p>
           </button>
         {/each}
       </div>
@@ -300,10 +281,10 @@
       onfocus={handleFocus}
       onblur={handleBlur}
       onkeydown={handleKeydown}
-      class={[wrapped || base(), inputCls({ class: clsx(theme?.input, className) })]}
+      class={clsx(!wrapped && base(), inputCls({ class: clsx(theme?.input, className) }))}
     />
     {#if value !== undefined && value !== "" && clearable}
-      <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+      <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
     {/if}
   {/if}
 {/snippet}

package/dist/forms/label/Label.svelte

@@ -23,7 +23,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L846)
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L830)
 ## Props
 @prop children
 @prop color = "gray"

package/dist/forms/label/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import type { LabelProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L846)
+ * [LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L830)
  * ## Props
  * @prop children
  * @prop color = "gray"

package/dist/forms/radio/Radio.svelte

@@ -4,40 +4,29 @@
   import clsx from "clsx";
   import type { RadioProps } from "../..";
   import Label from "../label/Label.svelte";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { untrack } from "svelte";
+  import { getTheme } from "../../theme/themeUtils";
 
-  // remove inputClass in next major version
   let {
     children,
     "aria-describedby": ariaDescribedby,
     inline = false,
-    labelClass,
     color = "brand",
     custom = false,
     group = $bindable<T>(),
     value = $bindable<T>(),
-    class: className,
-    inputClass,
     classes,
     ...restProps
   }: RadioProps<T> = $props();
 
-  warnThemeDeprecation(
-    "Radio",
-    untrack(() => ({ inputClass, labelClass })),
-    { inputClass: "class", labelClass: "label" }
-  );
-
-  const styling = $derived(classes ?? { label: labelClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("radio"));
 
   const { input, label } = $derived(radio({ color, tinted: !!getContext("background"), custom, inline }));
 </script>
 
-<Label class={label({ class: clsx(theme?.label, styling.label) })}>
-  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx(theme?.input, className ?? inputClass) })} />
+<Label class={label({ class: clsx(theme?.label, styling?.label) })}>
+  <input type="radio" bind:group {value} aria-describedby={ariaDescribedby} {...restProps} class={input({ class: clsx(theme?.input, styling?.input) })} />
   {@render children?.()}
 </Label>
 

package/dist/forms/range/Range.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L874)
+[RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L856)
 ## Props
 @prop value = $bindable()
 @prop appearance = "none"

package/dist/forms/range/Range.svelte.d.ts

@@ -2,7 +2,7 @@ import type { RangeProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L874)
+ * [RangeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L856)
  * ## Props
  * @prop value = $bindable()
  * @prop appearance = "none"

package/dist/forms/search/Search.svelte

@@ -3,34 +3,24 @@
   import clsx from "clsx";
   import type { SearchProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
-  import { untrack } from "svelte";
 
   let {
     children,
-    inputClass,
     size,
     placeholder = "Search",
     value = $bindable(),
     elementRef = $bindable(),
     clearable = false,
-    clearableSvgClass,
     clearableColor = "none",
-    clearableClass,
     clearableOnClick,
     class: className,
     classes,
     ...restProps
   }: SearchProps = $props();
 
-  warnThemeDeprecation(
-    "Search",
-    untrack(() => ({ inputClass, clearableSvgClass, clearableClass })),
-    { inputClass: "input", clearableSvgClass: "svg", clearableClass: "close" }
-  );
-
-  const styling = $derived(classes ?? { input: inputClass, svg: clearableSvgClass, close: clearableClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("search"));
 
@@ -48,19 +38,19 @@
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })}>
-  <div class={left({ class: clsx(theme?.left, classes?.left) })}>
-    <svg class={icon({ class: clsx(theme?.icon, classes?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <div class={left({ class: clsx(theme?.left, styling?.left) })}>
+    <svg class={icon({ class: clsx(theme?.icon, styling?.icon) })} aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
     </svg>
   </div>
-  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx(theme?.input, styling.input) })} {placeholder} required {...restProps} />
+  <input type="search" bind:value bind:this={elementRef} class={inputCls({ class: clsx(theme?.input, styling?.input) })} {placeholder} required {...restProps} />
   {#if children}
-    <div class={content({ class: clsx(theme?.content, classes?.content) })}>
+    <div class={content({ class: clsx(theme?.content, styling?.content) })}>
       {@render children()}
     </div>
   {/if}
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} />
   {/if}
 </div>
 
@@ -68,18 +58,15 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L880)
+[SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L862)
 ## Props
 @prop children
-@prop inputClass
 @prop size
 @prop placeholder = "Search"
 @prop value = $bindable()
 @prop elementRef = $bindable()
 @prop clearable = false
-@prop clearableSvgClass
 @prop clearableColor = "none"
-@prop clearableClass
 @prop clearableOnClick
 @prop class: className
 @prop classes

package/dist/forms/search/Search.svelte.d.ts

@@ -2,18 +2,15 @@ import type { SearchProps } from "../..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L880)
+ * [SearchProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L862)
  * ## Props
  * @prop children
- * @prop inputClass
  * @prop size
  * @prop placeholder = "Search"
  * @prop value = $bindable()
  * @prop elementRef = $bindable()
  * @prop clearable = false
- * @prop clearableSvgClass
  * @prop clearableColor = "none"
- * @prop clearableClass
  * @prop clearableOnClick
  * @prop class: className
  * @prop classes

package/dist/forms/select/MultiSelect.svelte

@@ -4,8 +4,8 @@
   import Badge from "../../badge/Badge.svelte";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { multiSelect } from "./theme";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
-  import { onMount, untrack } from "svelte";
+  import { getTheme } from "../../theme/themeUtils";
+  import { onMount } from "svelte";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
 
@@ -16,7 +16,6 @@
     items = [],
     value = $bindable(),
     size = "md",
-    dropdownClass = "",
     placeholder = "",
     disabled = false,
     onchange,
@@ -31,13 +30,7 @@
     ...restProps
   }: MultiSelectProps<T> = $props();
 
-  warnThemeDeprecation(
-    "MultiSelect",
-    untrack(() => ({ dropdownClass })),
-    { dropdownClass: "dropdown" }
-  );
-
-  const styling = $derived(classes ?? { dropdown: dropdownClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("multiSelect"));
 
@@ -247,7 +240,7 @@
   </div>
 
   {#if show}
-    <div role="presentation" class={dropdown({ class: clsx(styling.dropdown) })}>
+    <div role="presentation" class={dropdown({ class: clsx(styling?.dropdown) })}>
       {#each items as item (item.value)}
         {@const isSelected = selectItems.includes(item)}
         {@const isActive = activeItem === item}

package/dist/forms/select/Select.svelte

@@ -3,10 +3,9 @@
   import clsx from "clsx";
   import type { SelectProps } from "../..";
   import CloseButton from "../../utils/CloseButton.svelte";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme/themeUtils";
   import { createDismissableContext } from "../../utils/dismissable";
   import { getButtonGroupContext } from "../../context";
-  import { untrack } from "svelte";
 
   let {
     children,
@@ -21,21 +20,12 @@
     clearableColor = "none",
     clearableOnClick,
     onClear,
-    clearableSvgClass,
-    clearableClass,
-    selectClass,
     class: className,
     classes,
     ...restProps
   }: SelectProps<T> = $props();
 
-  warnThemeDeprecation(
-    "Select",
-    untrack(() => ({ selectClass, clearableSvgClass, clearableClass })),
-    { selectClass: "select", clearableSvgClass: "svg", clearableClass: "close" }
-  );
-
-  const styling = $derived(classes ?? { select: selectClass, svg: clearableSvgClass, close: clearableClass });
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("select"));
   const group = getButtonGroupContext();
@@ -61,7 +51,7 @@
 </script>
 
 <div class={base({ class: clsx(theme?.base, className) })}>
-  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(theme?.select, styling.select) })}>
+  <select {disabled} {...restProps} bind:value bind:this={elementRef} class={select({ class: clsx(theme?.select, styling?.select) })}>
     {#if placeholder}
       <option disabled selected={value === "" || value === undefined} value="">{placeholder}</option>
     {/if}
@@ -77,6 +67,6 @@
     {/if}
   </select>
   {#if value !== undefined && value !== "" && clearable}
-    <CloseButton class={close({ class: clsx(theme?.close, styling.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling.svg)} {disabled} />
+    <CloseButton class={close({ class: clsx(theme?.close, styling?.close) })} color={clearableColor} aria-label="Clear search value" svgClass={clsx(styling?.svg)} {disabled} />
   {/if}
 </div>

package/dist/forms/tags/Tags.svelte

@@ -4,19 +4,15 @@
   import P from "../../typography/paragraph/P.svelte";
   import CloseButton from "../../utils/CloseButton.svelte";
   import { tags } from "./theme";
-  import { getTheme, warnThemeDeprecation } from "../../theme/themeUtils";
+  import { getTheme } from "../../theme/themeUtils";
   import { computePosition, offset, flip, shift, autoUpdate } from "@floating-ui/dom";
-  import { onDestroy, untrack } from "svelte";
+  import { onDestroy } from "svelte";
 
   let {
     value = $bindable([]),
     placeholder = "Enter tags",
     class: className,
     classes,
-    itemClass,
-    spanClass,
-    closeClass,
-    inputClass,
     closeBtnSize = "xs",
     unique = false,
     availableTags = [],
@@ -28,20 +24,7 @@
     ...restProps
   }: TagsProps = $props();
 
-  warnThemeDeprecation(
-    "Tags",
-    untrack(() => ({ itemClass, spanClass, closeClass, inputClass })),
-    { itemClass: "tag", spanClass: "span", closeClass: "close", inputClass: "input" }
-  );
-
-  const styling = $derived(
-    classes ?? {
-      tag: itemClass,
-      span: spanClass,
-      close: closeClass,
-      input: inputClass
-    }
-  );
+  const styling = $derived(classes);
 
   const theme = $derived(getTheme("tags"));
 
@@ -153,19 +136,19 @@
 <svelte:window />
 
 {#if showAvailableTags && availableTags.length > 0}
-  <P class={clsx(info(), classes?.info)}>Available tags: {availableTags.join(", ")}</P>
+  <P class={clsx(info(), styling?.info)}>Available tags: {availableTags.join(", ")}</P>
 {/if}
 
 {#if showHelper && contents.trim().length > 0}
   {#if unique && value.some((tag) => tag.toLowerCase() === contents.trim().toLowerCase())}
-    <P class={clsx(warning(), classes?.warning)}>"{contents.trim()}" is already added.</P>
+    <P class={clsx(warning(), styling?.warning)}>"{contents.trim()}" is already added.</P>
   {:else if availableTags.length > 0 && !allowNewTags && !availableTags.some((tag) => tag.toLowerCase() === contents.trim().toLowerCase())}
-    <P class={clsx(error(), classes?.error)}>"{contents.trim()}" is not in the available tags.</P>
+    <P class={clsx(error(), styling?.error)}>"{contents.trim()}" is not in the available tags.</P>
   {/if}
 {/if}
 
 {#if errorMessage}
-  <P class={clsx(error(), classes?.error)}>{errorMessage}</P>
+  <P class={clsx(error(), styling?.error)}>{errorMessage}</P>
 {/if}
 
 <div
@@ -175,11 +158,11 @@
   })}
 >
   {#each value as tag, index (index)}
-    <div class={tagCls({ class: clsx(theme?.tag, styling.tag) })}>
-      <span class={spanCls({ class: clsx(theme?.span, styling.span) })}>
+    <div class={tagCls({ class: clsx(theme?.tag, styling?.tag) })}>
+      <span class={spanCls({ class: clsx(theme?.span, styling?.span) })}>
         {tag}
       </span>
-      <CloseButton {disabled} size={closeBtnSize} class={close({ class: clsx(theme?.close, styling.close) })} onclick={() => deleteField(index)} />
+      <CloseButton {disabled} size={closeBtnSize} class={close({ class: clsx(theme?.close, styling?.close) })} onclick={() => deleteField(index)} />
     </div>
   {/each}
   <div class="relative w-full" bind:this={inputContainer}>
@@ -192,7 +175,7 @@
       placeholder={value.length === 0 ? placeholder : ""}
       type="text"
       autocomplete="off"
-      class={inputCls({ class: clsx(styling.input) })}
+      class={inputCls({ class: clsx(styling?.input) })}
     />
     {#if availableTags.length > 0 && contents.trim() !== ""}
       {@const filteredSuggestions = availableTags.filter((tag) => tag.toLowerCase().includes(contents.trim().toLowerCase()) && (!unique || !value.some((t) => t.toLowerCase() === tag.toLowerCase())))}
@@ -231,15 +214,13 @@
 @prop placeholder = "Enter tags"
 @prop class: className
 @prop classes
-@prop itemClass
-@prop spanClass
-@prop closeClass
-@prop inputClass
 @prop closeBtnSize = "xs"
 @prop unique = false
 @prop availableTags = []
 @prop showHelper = false
 @prop showAvailableTags = false
 @prop allowNewTags = true
+@prop inputProps = {}
+@prop disabled
 @prop ...restProps
 -->