@nanahoshi/mona-ui 0.1.1 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-scroll-view.mjs

@@ -1,18 +1,18 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, computed, input, Directive, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
+import { computed, input, Directive, inject, DestroyRef, DOCUMENT, ElementRef, contentChild, TemplateRef, signal, viewChild, model, afterNextRender, Component } from '@angular/core';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { toCssValue } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { select } from '@mirei/ts-collections';
 import { startWith, pairwise, map, Subject, timer, interval, takeUntil, asyncScheduler, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const scrollViewBaseVariants = cva(`
-        block relative w-full h-full outline-none
-        overflow-hidden
-        border border-border border-2
+const scrollViewBaseThemeVariants = cva(`
+        relative block h-full w-full overflow-hidden
+        bg-surface outline-none
+        border border-border-subtle
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         rounded: {
@@ -23,26 +23,24 @@ const scrollViewBaseVariants = cva(`
         }
     }
 });
-const scrollViewContentVariants = cva(`
+const scrollViewContentThemeVariants = cva(`
         absolute inset-0 overflow-hidden
     `);
-const scrollViewListVariants = cva(`
-        relative list-none h-full
+const scrollViewListThemeVariants = cva(`
+        relative h-full list-none
         [&_li]:absolute
         [&_li]:inset-0
         [&_li]:outline-none
     `);
-const scrollViewArrowVariants = cva(`
-        absolute top-0 bottom-0 px-1
-        flex items-center justify-center
+const scrollViewArrowThemeVariants = cva(`
+        absolute top-0 bottom-0 flex items-center justify-center
+        px-1
         cursor-pointer select-none
-
-        text-foreground
-        [&_svg]:stroke-white
-        [&_svg]:drop-shadow-[0_0_15px_#000]
-        [&_svg]:opacity-40
-        hover:[&_svg]:opacity-100
-        [&_svg]:transition-opacity duration-300 ease-out
+        bg-surface-overlay/65 text-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover/90 active:bg-active/90
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `, {
     variants: {
         hidden: {
@@ -59,37 +57,37 @@ const scrollViewArrowVariants = cva(`
         }
     }
 });
-const scrollViewPagerVariants = cva(`
-        absolute left-0 right-0 bottom-0 flex items-center justify-center
+const scrollViewPagerThemeVariants = cva(`
+        absolute right-0 bottom-0 left-0 flex items-center justify-center
     `, {
     variants: {
         pagerOverlay: {
-            dark: "border-0 border-t border-border/20 bg-background-dark/20",
-            light: "border-0 border-t border-border/20 bg-background/20",
+            dark: "bg-canvas/85 border-0 border-t border-border-subtle",
+            light: "bg-surface-overlay/85 border-0 border-t border-border-subtle",
             none: ""
         }
     }
 });
-const scrollViewPagerListContainerVariants = cva(`
-        flex items-center justify-center
-        flex-1 overflow-hidden
+const scrollViewPagerListContainerThemeVariants = cva(`
+        flex flex-1 items-center justify-center overflow-hidden
     `);
-const scrollViewPagerListVariants = cva(`
-        flex items-center gap-2
-        list-none overflow-hidden
-        flex-nowrap px-1 py-3
+const scrollViewPagerListThemeVariants = cva(`
+        flex flex-nowrap items-center gap-2
+        overflow-hidden list-none
+        px-1 py-3
     `);
-const scrollViewPagerListItemVariants = cva(`
-        w-3 h-3
-        content-[' ']
-        flex-grow-0 flex-shrink-0 flex-basis-3
+const scrollViewPagerListItemThemeVariants = cva(`
+        h-3 w-3 flex-none basis-3
         cursor-pointer
-        border border-border bg-white
-        not-last:mr-3
+        bg-muted-foreground/40 border border-border-subtle
+        transition-colors
+        not-last:me-3
+        hover:bg-muted-foreground/60 active:bg-foreground
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         active: {
-            true: "!bg-primary",
+            true: "!bg-foreground hover:!bg-foreground",
             false: ""
         },
         pagerRounded: {
@@ -101,100 +99,23 @@ const scrollViewPagerListItemVariants = cva(`
         }
     }
 });
-const scrollViewPagerArrowVariants = cva(`
+const scrollViewPagerArrowThemeVariants = cva(`
         flex items-center justify-center
-        p-2 cursor-pointer select-none
-        transition-opacity duration-300 ease-out
-        opacity-70 hover:opacity-100
-        font-medium
-        [&_svg]:stroke-white
-        [&_svg]:drop-shadow-[0_0_15px_#000]
-        [&_svg]:opacity-40
-        hover:[&_svg]:opacity-100
-        [&_svg]:transition-opacity duration-300 ease-out
+        p-2
+        cursor-pointer select-none
+        font-medium text-muted-foreground
+        transition-colors duration-(--mona-motion-standard) ease-out
+        hover:bg-hover hover:text-foreground active:bg-active
+        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
+        [&_svg]:stroke-current
     `);
 
-const scrollViewBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewBaseVariants;
-        default:
-            return scrollViewBaseVariants;
-    }
-};
-const scrollViewContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewContentVariants;
-        default:
-            return scrollViewContentVariants;
-    }
-};
-const scrollViewListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewListVariants;
-        default:
-            return scrollViewListVariants;
-    }
-};
-const scrollViewArrowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewArrowVariants;
-        default:
-            return scrollViewArrowVariants;
-    }
-};
-const scrollViewPagerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerVariants;
-        default:
-            return scrollViewPagerVariants;
-    }
-};
-const scrollViewPagerListContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListContainerVariants;
-        default:
-            return scrollViewPagerListContainerVariants;
-    }
-};
-const scrollViewPagerListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListVariants;
-        default:
-            return scrollViewPagerListVariants;
-    }
-};
-const scrollViewPagerListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerListItemVariants;
-        default:
-            return scrollViewPagerListItemVariants;
-    }
-};
-const scrollViewPagerArrowThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return scrollViewPagerArrowVariants;
-        default:
-            return scrollViewPagerArrowVariants;
-    }
-};
-
 class ScrollViewActivePageDirective {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.pageItemClass = computed(() => {
-            const theme = this.#themeService.theme();
             const active = this.active();
             const pagerRounded = this.rounded();
-            return scrollViewPagerListItemThemeVariants(theme)({ active, pagerRounded });
+            return scrollViewPagerListItemThemeVariants({ active, pagerRounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageItemClass" }] : /* istanbul ignore next */ []));
         this.active = input.required(/* @ts-ignore */
@@ -202,7 +123,6 @@ class ScrollViewActivePageDirective {
         this.rounded = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ScrollViewActivePageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ScrollViewActivePageDirective, isStandalone: true, selector: "button[monaScrollViewActivePage]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "pageItemClass()" } }, ngImport: i0 }); }
 }
@@ -222,7 +142,6 @@ class ScrollViewComponent {
     #viewIndex;
     #directionFromIndex;
     #hostElementRef;
-    #themeService;
     #resizeObserver;
     #scroll$;
     #scrollMouseUpHandler;
@@ -256,7 +175,6 @@ class ScrollViewComponent {
             initialValue: "right"
         });
         this.#hostElementRef = inject(ElementRef);
-        this.#themeService = inject(ThemeService);
         this.#resizeObserver = null;
         this.#scroll$ = new Subject();
         this.#scrollMouseUpHandler = () => this.onPagerScrollEnd();
@@ -266,16 +184,14 @@ class ScrollViewComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClass = scrollViewBaseThemeVariants(theme)({ rounded });
+            const variantClass = scrollViewBaseThemeVariants({ rounded });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewContentThemeVariants(theme)();
+            return scrollViewContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentTemplate = contentChild(TemplateRef, /* @ts-ignore */
@@ -291,45 +207,38 @@ class ScrollViewComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leaveAnimation" }] : /* istanbul ignore next */ []));
         this.leftArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hidden = !this.arrows() || !(this.infinite() || this.index() !== 0);
-            return scrollViewArrowThemeVariants(theme)({ left: true, hidden });
+            return scrollViewArrowThemeVariants({ left: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leftArrowClass" }] : /* istanbul ignore next */ []));
         this.listClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewListThemeVariants(theme)();
+            return scrollViewListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
         this.pagerArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerArrowThemeVariants(theme)();
+            return scrollViewPagerArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowClass" }] : /* istanbul ignore next */ []));
         this.pagerArrowVisible = signal(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerArrowVisible" }] : /* istanbul ignore next */ []));
         this.pagerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const pagerOverlay = this.pagerOverlay();
-            return scrollViewPagerThemeVariants(theme)({ pagerOverlay });
+            return scrollViewPagerThemeVariants({ pagerOverlay });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerClass" }] : /* istanbul ignore next */ []));
         this.pagerListClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListThemeVariants(theme)();
+            return scrollViewPagerListThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListClass" }] : /* istanbul ignore next */ []));
         this.pagerListContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return scrollViewPagerListContainerThemeVariants(theme)();
+            return scrollViewPagerListContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListContainerClass" }] : /* istanbul ignore next */ []));
         this.pagerListElementRef = viewChild("pagerListElement", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pagerListElementRef" }] : /* istanbul ignore next */ []));
         this.rightArrowClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hidden = !this.arrows() || !(this.infinite() || this.index() !== this.itemCount() - 1);
-            return scrollViewArrowThemeVariants(theme)({ right: true, hidden });
+            return scrollViewArrowThemeVariants({ right: true, hidden });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rightArrowClass" }] : /* istanbul ignore next */ []));
         this.scrollViewHeight = computed(() => {

package/fesm2022/nanahoshi-mona-ui-slider.mjs

@@ -3,9 +3,9 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Directive, Pipe, DestroyRef, signal, viewChildren, NgZone, computed, contentChild, TemplateRef, input, output, afterNextRender, viewChild, model, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, tap, filter, switchMap, takeUntil } from 'rxjs';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
+import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class SliderTickDirective {
     constructor() {
@@ -150,26 +150,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const sliderBaseVariants = cva(`
-        flex relative select-none
+const sliderBaseThemeVariants = cva(`
+        relative flex select-none
 
-        data-[orientation="horizontal"]:h-6
         data-[orientation="horizontal"]:w-full
+        data-[orientation="horizontal"]:h-6
         data-[orientation="horizontal"]:min-w-[200px]
         data-[orientation="horizontal"]:items-center
 
-        data-[orientation="vertical"]:w-6
         data-[orientation="vertical"]:h-[200px]
+        data-[orientation="vertical"]:w-6
         data-[orientation="vertical"]:justify-center
 
         data-[disabled="true"]:pointer-events-none
-        data-[disabled="true"]:opacity-50
         data-[disabled="true"]:cursor-not-allowed
+        data-[disabled="true"]:opacity-50
     `);
-const sliderTrackVariants = cva(`
+const sliderTrackThemeVariants = cva(`
         relative z-2 cursor-pointer
-        border border-input-border
-        bg-background text-foreground
+        overflow-hidden
+        bg-surface-muted text-foreground
 
         data-[orientation="horizontal"]:w-full
         data-[orientation="horizontal"]:h-1.5
@@ -177,12 +177,22 @@ const sliderTrackVariants = cva(`
         data-[orientation="vertical"]:h-full
         data-[orientation="vertical"]:w-1.5
 
-    `);
-const sliderSelectionVariants = cva(`
+    `, {
+    variants: {
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        }
+    }
+});
+const sliderSelectionThemeVariants = cva(`
         absolute
-        bg-primary border-none
-
-        ease-out duration-200
+        bg-primary
+        border-none
+        transition duration-(--mona-motion-fast) ease-out
 
         data-[orientation="horizontal"]:top-0
         data-[orientation="horizontal"]:bottom-0
@@ -194,7 +204,7 @@ const sliderSelectionVariants = cva(`
         data-[orientation="vertical"]:transition-[top,bottom]
         data-[orientation="vertical"]:data-[dragging="true"]:transition-none
     `);
-const sliderTickListVariants = cva(`
+const sliderTickListThemeVariants = cva(`
         absolute
 
         data-[orientation="horizontal"]:w-full
@@ -207,34 +217,29 @@ const sliderTickListVariants = cva(`
         data-[orientation="vertical"]:top-0
         data-[orientation="vertical"]:left-0
     `);
-const sliderTickVariants = cva(`
+const sliderTickThemeVariants = cva(`
         cursor-pointer
-        bg-input-border
-        brightness-75
+        bg-border-control-hover
     `);
-const sliderTickLabelListVariants = cva(`
-        absolute
-        w-full h-full
+const sliderTickLabelListThemeVariants = cva(`
+        absolute h-full w-full
         select-none
     `);
-const sliderTickLabelVariants = cva(`
-        absolute flex
-        items-center justify-center
+const sliderTickLabelThemeVariants = cva(`
+        absolute flex items-center justify-center
+        text-xs/[1.667] text-foreground
 
-        text-xs/[1.667]
-        text-foreground
-
-        data-[orientation="vertical"]:w-4.25
         data-[orientation="vertical"]:h-auto
+        data-[orientation="vertical"]:w-4.25
     `);
-const sliderHandleVariants = cva(`
+const sliderHandleThemeVariants = cva(`
         absolute z-2 flex items-center justify-center
-        w-4.25 h-4.25
+        h-4.25 w-4.25
         cursor-pointer
+        ${themeRaisedSurfaceClasses}
+        border border-(--mona-slider-handle-border-color) shadow-(--shadow-control)
         outline-none
-        bg-primary border border-border
-
-        ease-out duration-200
+        transition duration-(--mona-motion-fast) ease-out
 
         data-[orientation="horizontal"]:translate-x-[-50%]
         data-[orientation="horizontal"]:transition-[left]
@@ -244,11 +249,14 @@ const sliderHandleVariants = cva(`
         data-[orientation="vertical"]:transition-[bottom]
         data-[orientation="vertical"]:data-[dragging="true"]:transition-none
 
+        data-[focused="true"]:border-focus-indicator
         data-[focused="true"]:ring-2
-        data-[focused="true"]:ring-primary/40
+        data-[focused="true"]:ring-focus-indicator/35
 
         data-[invalid="true"]:border-error
-        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/40
+        data-[invalid="true"]:ring-2 data-[invalid="true"]:ring-error/35
+        data-[invalid="true"]:data-[focused="true"]:border-error
+        data-[invalid="true"]:data-[focused="true"]:ring-error/35
     `, {
     variants: {
         rounded: {
@@ -261,75 +269,8 @@ const sliderHandleVariants = cva(`
     }
 });
 
-const sliderBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderBaseVariants;
-        default:
-            return sliderBaseVariants; // Default to Mona styles
-    }
-};
-const sliderTrackThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTrackVariants;
-        default:
-            return sliderTrackVariants; // Default to Mona styles
-    }
-};
-const sliderSelectionThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderSelectionVariants;
-        default:
-            return sliderSelectionVariants; // Default to Mona styles
-    }
-};
-const sliderTickListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickListVariants;
-        default:
-            return sliderTickListVariants; // Default to Mona styles
-    }
-};
-const sliderTickThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickVariants;
-        default:
-            return sliderTickVariants; // Default to Mona styles
-    }
-};
-const sliderTickLabelListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickLabelListVariants;
-        default:
-            return sliderTickLabelListVariants; // Default to Mona styles
-    }
-};
-const sliderTickLabelThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderTickLabelVariants;
-        default:
-            return sliderTickLabelVariants; // Default to Mona styles
-    }
-};
-const sliderHandleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return sliderHandleVariants;
-        default:
-            return sliderHandleVariants; // Default to Mona styles
-    }
-};
-
 class SliderBaseComponent {
-    #themeService;
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.destroyRef = inject(DestroyRef);
         this.dragging = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
@@ -337,7 +278,7 @@ class SliderBaseComponent {
         this.tickElements = viewChildren(SliderTickDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickElements" }] : /* istanbul ignore next */ []));
         this.zone = inject(NgZone);
-        this.baseClasses = computed(() => sliderBaseThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.baseClasses = computed(() => sliderBaseThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.effectiveDisabled = computed(() => this.disabled(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
@@ -398,12 +339,12 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.selectionClasses = computed(() => sliderSelectionThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.selectionClasses = computed(() => sliderSelectionThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectionClasses" }] : /* istanbul ignore next */ []));
         this.sliderHandleClasses = computed(() => {
             const rounded = this.rounded();
             const handleClasses = this.handleClasses();
-            const variants = sliderHandleThemeVariants(this.#themeService.theme())({ rounded });
+            const variants = sliderHandleThemeVariants({ rounded });
             return twMerge(variants ?? "", Array.isArray(handleClasses) ? handleClasses.join(" ") : handleClasses);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderHandleClasses" }] : /* istanbul ignore next */ []));
@@ -422,13 +363,13 @@ class SliderBaseComponent {
             return `${number}px`;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sliderTrackSize" }] : /* istanbul ignore next */ []));
-        this.tickClasses = computed(() => sliderTickThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickClasses = computed(() => sliderTickThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelClasses = computed(() => sliderTickLabelThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelClasses" }] : /* istanbul ignore next */ []));
-        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickLabelListClasses = computed(() => sliderTickLabelListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickLabelListClasses" }] : /* istanbul ignore next */ []));
-        this.tickListClasses = computed(() => sliderTickListThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.tickListClasses = computed(() => sliderTickListThemeVariants(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tickListClasses" }] : /* istanbul ignore next */ []));
         this.tickStyleArgs = computed(() => {
             const largeTickStep = this.largeTickStep();
@@ -464,7 +405,10 @@ class SliderBaseComponent {
             return typeof bg === "string" ? { background: bg } : bg;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackBackgroundStyle" }] : /* istanbul ignore next */ []));
-        this.trackClasses = computed(() => sliderTrackThemeVariants(this.#themeService.theme())(), /* @ts-ignore */
+        this.trackClasses = computed(() => {
+            const rounded = this.rounded();
+            return sliderTrackThemeVariants({ rounded });
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "trackClasses" }] : /* istanbul ignore next */ []));
         /**
          * @description Human-readable override for the `aria-valuenow` announcement. Pass a function that receives the current value and returns the string to announce.