diff --git a/src/lib/accordion/Accordion.svelte b/src/lib/accordion/Accordion.svelte index 7d7d2b1d8..223ef5f33 100644 --- a/src/lib/accordion/Accordion.svelte +++ b/src/lib/accordion/Accordion.svelte @@ -9,8 +9,6 @@ let { children, flush, activeClass, inactiveClass, multiple = false, class: className, transitionType, ...restProps }: AccordionProps = $props(); - const theme = getTheme("accordion"); - // Simple reactive state object const reactiveCtx: AccordionContextType = { get flush() { @@ -34,7 +32,7 @@ // Use untrack to explicitly capture only the initial value createSingleSelectionContext(untrack(() => multiple)); - const base = $derived(accordion({ flush, class: clsx(theme, className) })); + const base = $derived(accordion({ flush, class: clsx(getTheme("accordion"), className) }));
diff --git a/src/lib/accordion/AccordionItem.svelte b/src/lib/accordion/AccordionItem.svelte index 025681f95..14f3800d5 100644 --- a/src/lib/accordion/AccordionItem.svelte +++ b/src/lib/accordion/AccordionItem.svelte @@ -49,9 +49,6 @@ // Check if transitionType is explicitly set to undefined in props const useTransition = $derived(transitionType === "none" ? false : ctxTransitionType === "none" ? false : true); - // Theme context - const theme = getTheme("accordionItem"); - // single selection const self = Symbol("accordion-item"); @@ -68,10 +65,14 @@ const { base, button, content, active, inactive } = $derived(accordionItem({ flush: ctx?.flush, open })); let buttonClass = $derived(clsx(open && !ctx?.flush && (styling.active || ctx?.activeClass || active()), !open && !ctx?.flush && (styling.inactive || ctx?.inactiveClass || inactive()))); + + let baseClass = $derived(base({ class: clsx(getTheme("accordionItem")?.base, className) })); + let buttonCls = $derived(button({ class: clsx(buttonClass, getTheme("accordionItem")?.button, styling.button) })); + let contentCls = $derived(content({ class: clsx(getTheme("accordionItem")?.content, styling.content) })); -

-

{:else} - {/if} diff --git a/src/lib/card/Card.svelte b/src/lib/card/Card.svelte index 1cfad24dd..de67bfed7 100644 --- a/src/lib/card/Card.svelte +++ b/src/lib/card/Card.svelte @@ -15,8 +15,6 @@ const styling = $derived(classes ?? { image: imgClass }); - const theme = getTheme("card"); - const { base, image } = $derived( card({ size, @@ -27,12 +25,16 @@ href: !!restProps.href }) ); + + // Get theme reactively inside derived expressions + const baseClass = $derived(base({ class: clsx(getTheme("card")?.base, className) })); + const imageClass = $derived(image({ class: clsx(getTheme("card")?.image, styling.image) })); {#snippet childSlot()} {#if img} +
{@render childSlot()}
{:else} - + {@render childSlot()} {/if} diff --git a/src/lib/carousel/Carousel.svelte b/src/lib/carousel/Carousel.svelte index b2c6e7124..3fac7bd94 100644 --- a/src/lib/carousel/Carousel.svelte +++ b/src/lib/carousel/Carousel.svelte @@ -38,9 +38,6 @@ const styling = $derived(classes ?? { slide: imgClass }); - // Theme context - const theme = getTheme("carousel"); - let { base, slide: slideCls } = $derived(carousel()); const changeSlide = (n: number) => { @@ -181,6 +178,9 @@ touchEvent = null; } ); + + const divCls = $derived(base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", getTheme("carousel")?.base, className) })); + const slideClass = $derived(slideCls({ class: clsx(getTheme("carousel")?.slide, styling.slide) })); @@ -205,13 +205,13 @@ aria-label={ariaLabel} tabindex="0" {...restProps} - class={base({ class: clsx(activeDragGesture === undefined ? "transition-transform" : "", theme?.base, className) })} + class={divCls} {@attach loop} > {#if slide} {@render slide({ index: _state.index, Slide })} {:else} - + {/if} {@render children?.(_state.index)} diff --git a/src/lib/carousel/CarouselIndicators.svelte b/src/lib/carousel/CarouselIndicators.svelte index 72ae4b324..73a8295b7 100644 --- a/src/lib/carousel/CarouselIndicators.svelte +++ b/src/lib/carousel/CarouselIndicators.svelte @@ -8,25 +8,24 @@ let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props(); - const theme = getTheme("carouselIndicators"); - const _state = getCarouselContext(); const { base, indicator } = $derived(carouselIndicators({ position })); function goToIndex(newIndex: number) { _state?.changeSlide(newIndex); } + const divCls = $derived(base({ class: clsx(getTheme("carouselIndicators")?.base, className) })); {#if _state} -
+
{#each _state.images as _, idx (idx)} {@const selected = _state.index === idx} {/each} diff --git a/src/lib/carousel/ControlButton.svelte b/src/lib/carousel/ControlButton.svelte index 22d7d2e39..77c854cb9 100644 --- a/src/lib/carousel/ControlButton.svelte +++ b/src/lib/carousel/ControlButton.svelte @@ -2,16 +2,22 @@ import { controlButton } from "./theme"; import clsx from "clsx"; import type { ControlButtonProps } from "$lib"; - import { getTheme } from "$lib/theme/themeUtils"; + import { getTheme, warnThemeDeprecation } from "$lib/theme/themeUtils"; + import { untrack } from "svelte"; let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props(); - const { base, span } = $derived(controlButton({ forward })); + warnThemeDeprecation( + "ControlButton", + untrack(() => ({ spanClass })), + { spanClass: "span" } + ); - const theme = getTheme("controlButton"); + const { base, span } = $derived(controlButton({ forward })); + let buttonCls = $derived(base({ class: clsx(getTheme("controlButton")?.base, className) })); - {@render navButton(true)}
-
+
{#each weekdays as day (day)} -
{day}
+
{day}
{/each} {#each daysInMonth as day (day)} {@const current = day.getMonth() !== currentMonth.getMonth()} @@ -507,7 +512,7 @@ today: isToday(day), color: isInRange(day) ? color : undefined, unavailable: !available, - class: clsx(theme?.dayButton, classes?.dayButton, !available && "cursor-not-allowed opacity-50") + class: clsx(getTheme("datepicker")?.dayButton, classes?.dayButton, !available && "cursor-not-allowed opacity-50") })} onclick={() => handleDaySelect(day)} onkeydown={handleCalendarKeydown} @@ -524,7 +529,7 @@ {/if} {#if showActionButtons && !showMonthSelector} -
+
@@ -532,7 +537,7 @@ {/if} {#if actionSlot} -
+
{@render actionSlot({ selectedDate: range ? { from: rangeFrom, to: rangeTo } : value, handleClear, diff --git a/src/lib/drawer/Drawer.svelte b/src/lib/drawer/Drawer.svelte index 42e8fa8b1..d5a3779fa 100644 --- a/src/lib/drawer/Drawer.svelte +++ b/src/lib/drawer/Drawer.svelte @@ -64,8 +64,6 @@ }); // end - const theme = getTheme("drawer"); - let shifted = $state(true); const { base } = $derived(drawer({ placement, width, modal: offset && !open ? false : modal, shifted })); @@ -129,13 +127,13 @@ {...restProps} {onintrostart} {onoutrostart} - class={base({ class: clsx(theme?.base, className) })} + class={base({ class: clsx(getTheme("drawer")?.base, className) })} > {@render children?.()} {#if offset && !open} - + {@render children?.()} {/if} diff --git a/src/lib/drawer/DrawerHandle.svelte b/src/lib/drawer/DrawerHandle.svelte index 42f91b2db..b00d23fcf 100644 --- a/src/lib/drawer/DrawerHandle.svelte +++ b/src/lib/drawer/DrawerHandle.svelte @@ -9,13 +9,15 @@ const ctx = getDrawerContext(); - const theme = getTheme("drawerhandle"); let { base, handle } = $derived(drawerhandle({ placement: placement ?? ctx?.placement ?? "left" })); + + let baseClass = $derived(base({ class: clsx(getTheme("drawerhandle")?.base, className) })); + let handleClass = $derived(handle({ class: clsx(getTheme("drawerhandle")?.handle, classes?.handle) })); -