webcoreui 1.1.0-beta.3 → 1.2.0-0

package/README.md

@@ -40,14 +40,18 @@
 - [Documentation](#documentation)
 - [Getting started](#getting-started)
     - [Prerequisites](#prerequisites)
-    - [Installation](#installation)
+    - [Installation with CLI](#installation-with-cli)
+    - [Manual Installation](#manual-installation)
     - [Setup](#setup)
     - [Using Components](#using-components)
 - [Components](#components)
+- [Blocks](#blocks)
+- [Templates](#templates)
 
 ## Documentation
 
-Full documentation available on [webcoreui.dev](https://webcoreui.dev).
+- Full documentation available on [webcoreui.dev](https://webcoreui.dev).
+- For installation steps, visit our [setup docs](https://webcoreui.dev/docs/setup).
 
 ## Getting Started
 
@@ -73,7 +77,28 @@ Depending on your project setup, you'll also need the following packages:
     - [React](https://www.npmjs.com/package/react) - `v19.0`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
 
-### Installation
+### Installation with CLI
+
+You can use our CLI tool to create a new Webcore project, or integrate it into an existing project more easily:
+
+```bash
+# Create a new Webcore project
+npm create webcore@latest
+
+# Update configuration files for an existing Astro project
+npm create webcore@latest config
+
+# Create a new Webcore project with a specific template
+npm create webcore@latest template [TemplateName] [destination]
+
+# Use the "Portfolio" template on the current directory
+npm create webcore@latest template Portfolio
+
+# Create the "Portfolio" template in the "portfolio" directory
+npm create webcore@latest template Portfolio ./portfolio
+```
+
+### Manual Installation
 
 Install Webcore as a dependency by running one of the following command:
 
@@ -87,6 +112,16 @@ yarn add webcoreui
 
 ### Setup
 
+Add the following integration to your Astro configuration file (`astro.config.mjs`) at the root of your project directory:
+
+```js
+import { webcore } from 'webcoreui/integration'
+
+export default defineConfig({
+    integrations: [webcore()]
+})
+```
+
 Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
@@ -101,7 +136,7 @@ Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configura
 > [!TIP]
 > You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
 
-The `Setup` mixin can also accept the following options:
+The `setup` mixin can also accept the following options:
 
 
 | Property  | Default value | Purpose |
@@ -110,6 +145,7 @@ The `Setup` mixin can also accept the following options:
 | `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
+| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.
 
 Default component styles can be changed by overriding the following CSS variables:
 
@@ -143,6 +179,11 @@ html body {
     // Radio component
     --w-radio-color: var(--w-color-primary);
 
+    // RangeSlider component
+    --w-range-slider-background: var(--w-color-primary-50);
+    --w-range-slider-color: var(--w-color-primary);
+    --w-range-slider-thumb: var(--w-color-primary-50);
+
     // Rating component
     --w-rating-color: var(--w-color-primary);
     --w-rating-empty-color: var(--w-color-primary);
@@ -263,6 +304,7 @@ import { Accordion } from 'webcoreui/react'
 - [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
+- [RangeSlider](https://github.com/Frontendland/webcoreui/tree/main/src/components/RangeSlider)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
 - [Ribbon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Ribbon)
 - [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
@@ -286,6 +328,7 @@ import { Accordion } from 'webcoreui/react'
 ## Blocks
 
 - [Author](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Author)
+- [AvatarWithRating](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/AvatarWithRating)
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
 - [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
 - [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)

package/astro.d.ts

@@ -31,6 +31,7 @@ import type { PaginationProps as WPaginationProps } from './components/Paginatio
 import type { PopoverProps as WPopoverProps } from './components/Popover/popover'
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { RadioProps as WRadioProps } from './components/Radio/radio'
+import type { RangeSliderProps as WRangeSliderProps } from './components/RangeSlider/rangeslider'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
 import type { RibbonProps as WRibbonProps } from './components/Ribbon/ribbon'
 import type { SelectProps as WSelectProps } from './components/Select/select'
@@ -54,6 +55,7 @@ import type { ToastProps as WToastProps } from './components/Toast/toast'
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
 import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { RangeSliderEventType as WRangeSliderEventType } from './components/RangeSlider/rangeslider.ts'
 import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
 
 declare module 'webcoreui/astro' {
@@ -90,6 +92,7 @@ declare module 'webcoreui/astro' {
 	export function Popover(_props: WPopoverProps): any
 	export function Progress(_props: WProgressProps): any
 	export function Radio(_props: WRadioProps): any
+	export function RangeSlider(_props: WRangeSliderProps): any
 	export function Rating(_props: WRatingProps): any
 	export function Ribbon(_props: WRibbonProps): any
 	export function Select(_props: WSelectProps): any
@@ -143,6 +146,7 @@ declare module 'webcoreui/astro' {
 	export type PopoverProps = WPopoverProps
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WRadioProps
+	export type RangeSliderProps = WRangeSliderProps
 	export type RatingProps = WRatingProps
 	export type RibbonProps = WRibbonProps
 	export type SelectProps = WSelectProps
@@ -167,5 +171,6 @@ declare module 'webcoreui/astro' {
 	export type HeadingObject = WHeadingObject
 	export type ListEventType = WListEventType
 	export type PaginationEventType = WPaginationEventType
+	export type RangeSliderEventType = WRangeSliderEventType
 	export type SelectEventType = WSelectEventType
 }

package/astro.js

@@ -31,6 +31,7 @@ import PaginationComponent from './components/Pagination/Pagination.astro'
 import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
+import RangeSliderComponent from './components/RangeSlider/RangeSlider.astro'
 import RatingComponent from './components/Rating/Rating.astro'
 import RibbonComponent from './components/Ribbon/Ribbon.astro'
 import SelectComponent from './components/Select/Select.astro'
@@ -84,6 +85,7 @@ export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
+export const RangeSlider = RangeSliderComponent
 export const Rating = RatingComponent
 export const Ribbon = RibbonComponent
 export const Select = SelectComponent

package/components/BottomNavigation/BottomNavigation.astro

@@ -5,8 +5,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './bottomnavigation.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends BottomNavigationProps {}
 
 const {
@@ -39,7 +37,7 @@ const styleVariable = maxWidth
                         <Fragment>
                             {item.icon?.startsWith('<svg')
                                 ? <Fragment set:html={item.icon} />
-                                : <Icon type={item.icon as IconProps['type']} />
+                                : <Icon type={item.icon} />
                             }
                         </Fragment>
                     )}

package/components/Breadcrumb/Breadcrumb.astro

@@ -6,8 +6,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './breadcrumb.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends BreadcrumbProps {}
 
 const {
@@ -33,7 +31,7 @@ const classes = [
                     <Fragment>
                         {item.icon.startsWith('<svg')
                             ? <Fragment set:html={item.icon} />
-                            : <Icon type={item.icon as IconProps['type']} />
+                            : <Icon type={item.icon} />
                         }
                     </Fragment>
                 )}

package/components/Carousel/Carousel.astro

@@ -35,10 +35,14 @@ const containerClasses = [
     scrollSnap && styles.snap
 ]
 
+const getItemsPerSlide = () => typeof itemsPerSlide === 'number'
+    ? itemsPerSlide
+    : itemsPerSlide.default || 1
+
 const wrapperClasses = [
     styles.wrapper,
     effect && styles[effect],
-    itemsPerSlide > 1 && styles['no-snap'],
+    getItemsPerSlide() > 1 && styles['no-snap'],
     wrapperClassName
 ]
 
@@ -52,10 +56,10 @@ const paginationClasses = classNames([
     !subText && paginationClassName
 ])
 
-const totalPages = Math.ceil(items / itemsPerSlide)
+const totalPages = Math.ceil(items / getItemsPerSlide())
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-const style = itemsPerSlide > 1
-    ? `--w-slide-width: calc(${100 / itemsPerSlide}% - 5px);`
+const style = getItemsPerSlide() > 1
+    ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
     : null
 ---
 
@@ -68,7 +72,8 @@ const style = itemsPerSlide > 1
         <ul
             class:list={wrapperClasses}
             style={style}
-            data-visible-items={itemsPerSlide > 1 ? itemsPerSlide : null}
+            data-visible-items={getItemsPerSlide() > 1 ? getItemsPerSlide() : null}
+            data-breakpoint-items={typeof itemsPerSlide !== 'number' ? JSON.stringify(itemsPerSlide) : null}
         >
             <slot />
         </ul>
@@ -101,6 +106,7 @@ const style = itemsPerSlide > 1
 <script>
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     const addEventListeners = () => {
         const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
@@ -127,7 +133,7 @@ const style = itemsPerSlide > 1
                 }
 
                 for (let i = 0; i < diff; i++) {
-                    triggerButton.click()
+                    triggerButton?.click()
                 }
 
                 Array.from(carouselElement.children).forEach(li => {
@@ -140,12 +146,72 @@ const style = itemsPerSlide > 1
             }
         }
 
+        const updateOnResize = (entries: ResizeObserverEntry[]) => {
+            const target = entries[0].target
+            const carousel = target.querySelector<HTMLUListElement>('ul')
+            const pagination = target.parentElement?.querySelector<HTMLUListElement>('[data-id="w-pagination"]')
+            const breakpoint = getBreakpoint()
+
+            if (!target || !carousel || !pagination) {
+                return
+            }
+
+            if (carousel.dataset.currentBreakpoint === breakpoint) {
+                return
+            }
+
+            const progress = target.parentElement?.querySelector<HTMLDivElement>('.w-carousel-progress')
+            const prevPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="prev"]')
+            const nextPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="next"]')
+            const subText = pagination.nextElementSibling
+            const breakpoints = JSON.parse(carousel.dataset.breakpointItems || '')
+            const itemsPerSlide = breakpoints[breakpoint] || breakpoints.default
+            const totalItems = carousel.children.length
+            const totalPages = Math.ceil(totalItems / itemsPerSlide)
+
+            carousel.dataset.currentBreakpoint = breakpoint
+            carousel.dataset.visibleItems = itemsPerSlide
+            carousel.children[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            carousel.style.setProperty('--w-slide-width', `calc(${100 / itemsPerSlide}% - 5px)`)
+
+            pagination.dataset.totalPages = String(totalPages)
+
+            if (!(prevPageButton && nextPageButton)) {
+                pagination.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1)
+                    .map(i => `
+                        <li>
+                            <button
+                                data-active="${i - 1 === 0}"
+                                data-page="${i}"
+                                aria-label="${`page ${i}`}"
+                            ></button>
+                        </li>
+                    `).join('')
+            }
+
+            if (progress && progress.children[0] instanceof HTMLDivElement) {
+                progress.children[0].style.setProperty('--w-progress-width', '0%')
+            }
+
+            if (subText instanceof HTMLSpanElement && subText?.dataset.text) {
+                subText.innerText = subText.dataset.text
+                    .replace('{0}', '1')
+                    .replace('{1}', String(totalPages))
+            }
+        }
+
         carousels.forEach(carousel => {
             const carouselElement = carousel as HTMLDivElement
+            const carouselList = carousel.querySelector<HTMLUListElement>('ul')
+            const observer = new ResizeObserver(updateOnResize)
             const debounceAmount = carouselElement.dataset.debounce
                 ? Number(carouselElement.dataset.debounce)
                 : 20
 
+            if (carouselList?.dataset.breakpointItems) {
+                observer.observe(carouselElement)
+            }
+
             carousel.addEventListener('scroll', debounce((event: Event) => {
                 scroll(event)
             }, debounceAmount))
@@ -169,6 +235,10 @@ const style = itemsPerSlide > 1
                 .filter(index => index < totalItems)
         })
 
+        if (indexes.length < event.page) {
+            return
+        }
+
         const pageIndex = event.direction === 'prev'
             ? indexes[event.page - 1][0]
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
@@ -194,15 +264,15 @@ const style = itemsPerSlide > 1
         }
 
         if (event.trusted) {
-            const carouselContaienr = target.closest('section').querySelector('[data-id="w-carousel"]')
+            const carouselContainer = target.closest('section').querySelector('[data-id="w-carousel"]')
 
             liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
             liElement.dataset.active = 'true'
 
-            carouselContaienr.dataset.paginated = 'true'
+            carouselContainer.dataset.paginated = 'true'
 
             setTimeout(() => {
-                carouselContaienr.removeAttribute('data-paginated')
+                carouselContainer.removeAttribute('data-paginated')
             }, 300)
         }
     })

package/components/Carousel/Carousel.svelte

@@ -8,6 +8,7 @@
 
     import { classNames } from '../../utils/classNames'
     import { debounce as debounceScroll } from '../../utils/debounce'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     import styles from './carousel.module.scss'
 
@@ -29,12 +30,28 @@
         onScroll
     }: SvelteCarouselProps = $props()
 
+    const getItemsPerSlide = () => {
+        if (carousel) {
+            return typeof itemsPerSlide === 'number'
+                ? itemsPerSlide
+                : itemsPerSlide[getBreakpoint()] || itemsPerSlide.default || 1
+        }
+
+        return typeof itemsPerSlide === 'number'
+            ? itemsPerSlide
+            : itemsPerSlide.default || 1
+    }
+
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
     let progressValue = $state(0)
     let paginated = false
     let currentPage = $state(1)
+    let totalPages = $state(Math.ceil(items / getItemsPerSlide()))
+    let style = $state(getItemsPerSlide() > 1
+        ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        : null)
 
     const classes = classNames([
         styles.carousel,
@@ -49,7 +66,7 @@
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
-        itemsPerSlide! > 1 && styles['no-snap'],
+        getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -63,11 +80,7 @@
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = itemsPerSlide! > 1
-        ? `--w-slide-width: calc(${100 / itemsPerSlide!}% - 5px);`
-        : null
 
     const updateValues = () => {
         const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
@@ -104,8 +117,8 @@
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
-            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+        const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
+            return Array.from({ length: getItemsPerSlide() }, (_, j) => (i * getItemsPerSlide()) + j)
                 .filter(index => index < items)
         })
 
@@ -126,15 +139,33 @@
         }, 300)
     }
 
+    const updateOnResize = () => {
+        currentPage = 1
+        progressValue = 0
+        totalPages = Math.ceil(items / getItemsPerSlide())
+        style = `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+
+        if (subTextValue) {
+            subText = subTextValue
+                .replace('{0}', '1')
+                .replace('{1}', String(totalPages))
+        }
+    }
+
     onMount(() => {
         const usedInAstro = carousel.children[0].nodeName === 'ASTRO-SLOT'
-
-        carouselContainer.addEventListener('scroll', scroll)
+        const observer = new ResizeObserver(updateOnResize)
 
         carouselItems = usedInAstro
             ? carousel.querySelectorAll('li')
             : carousel.children
 
+        carouselContainer.addEventListener('scroll', scroll)
+
+        if (typeof itemsPerSlide !== 'number') {
+            observer.observe(carouselContainer)
+        }
+
         return () => {
             carouselContainer.removeEventListener('scroll', scroll)
         }

package/components/Carousel/Carousel.tsx

@@ -7,6 +7,7 @@ import Progress from '../Progress/Progress.tsx'
 
 import { classNames } from '../../utils/classNames'
 import { debounce as debounceScroll } from '../../utils/debounce'
+import { getBreakpoint } from '../../utils/getBreakpoint'
 
 import styles from './carousel.module.scss'
 
@@ -27,14 +28,30 @@ const Carousel = ({
     onScroll,
     children
 }: ReactCarouselProps) => {
+    const getItemsPerSlide = () => {
+        if (carousel.current) {
+            return typeof itemsPerSlide === 'number'
+                ? itemsPerSlide
+                : itemsPerSlide[getBreakpoint()] || itemsPerSlide.default || 1
+        }
+
+        return typeof itemsPerSlide === 'number'
+            ? itemsPerSlide
+            : itemsPerSlide.default || 1
+    }
+
     const carouselContainer = useRef<HTMLDivElement>(null)
     const carousel = useRef<HTMLUListElement>(null)
     const carouselItems = useRef<any>(null)
     const paginated = useRef(false)
     const currentPage = useRef(1)
+    const totalPages = useRef(Math.ceil(items / getItemsPerSlide()))
 
     const [progressValue, setProgressValue] = useState(0)
     const [updatedSubText, setUpdatedSubText] = useState(subText)
+    const [style, setStyle] = useState(getItemsPerSlide() > 1
+        ? { '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
+        : undefined)
 
     const classes = classNames([
         styles.carousel,
@@ -49,7 +66,7 @@ const Carousel = ({
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
-        itemsPerSlide! > 1 && styles['no-snap'],
+        getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -63,11 +80,7 @@ const Carousel = ({
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = itemsPerSlide > 1
-        ? { '--w-slide-width': `calc(${100 / itemsPerSlide!}% - 5px);` } as React.CSSProperties
-        : undefined
 
     const updateValues = (page: number) => {
         const activeElement = carouselItems.current[page - 1]
@@ -79,12 +92,12 @@ const Carousel = ({
             setUpdatedSubText(
                 subTextValue
                     .replace('{0}', String(page))
-                    .replace('{1}', String(totalPages))
+                    .replace('{1}', String(totalPages.current))
             )
         }
 
         if (progress) {
-            const percentage = (100 / (totalPages - 1))
+            const percentage = (100 / (totalPages.current - 1))
 
             setProgressValue(percentage * (page - 1))
         }
@@ -106,8 +119,8 @@ const Carousel = ({
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
-            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+        const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
+            return Array.from({ length: getItemsPerSlide() }, (_, j) => (i * getItemsPerSlide()) + j)
                 .filter(index => index < items)
         })
 
@@ -128,8 +141,26 @@ const Carousel = ({
         }, 300)
     }
 
+    const updateOnResize = () => {
+        currentPage.current = 1
+        setProgressValue(0)
+        totalPages.current = Math.ceil(items / getItemsPerSlide())
+        setStyle(prevStyle => ({
+            ...prevStyle,
+            '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)`
+        }) as React.CSSProperties)
+
+        if (subTextValue) {
+            setUpdatedSubText(subTextValue
+                .replace('{0}', '1')
+                .replace('{1}', String(totalPages.current))
+            )
+        }
+    }
+
     useEffect(() => {
         const usedInAstro = carousel.current?.children[0].nodeName === 'ASTRO-SLOT'
+        const observer = new ResizeObserver(updateOnResize)
 
         carouselItems.current = usedInAstro
             ? carousel.current?.querySelectorAll('li')
@@ -137,6 +168,10 @@ const Carousel = ({
 
         carouselContainer.current?.addEventListener('scroll', scroll)
 
+        if (typeof itemsPerSlide !== 'number') {
+            observer.observe(carouselContainer.current!)
+        }
+
         return () => {
             carouselContainer.current?.removeEventListener('scroll', scroll)
         }
@@ -162,7 +197,7 @@ const Carousel = ({
                     type="arrows"
                     {...pagination}
                     currentPage={currentPage.current}
-                    totalPages={totalPages}
+                    totalPages={totalPages.current}
                     className={paginationClasses}
                     onChange={paginate}
                 />
@@ -170,7 +205,7 @@ const Carousel = ({
                     <span className={styles.subtext}>
                         {updatedSubText
                             .replace('{0}', '1')
-                            .replace('{1}', String(totalPages))
+                            .replace('{1}', String(totalPages.current))
                         }
                     </span>
                 )}

package/components/Carousel/carousel.ts

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte'
 
+import type { Responsive } from '../../utils/getLayoutClasses'
+
 import type { PaginationProps } from '../Pagination/pagination'
 
 export type CarouselProps = {
     items: number
-    itemsPerSlide?: number
+    itemsPerSlide?: number | Responsive<number>
     subText?: string
     autoplay?: boolean
     vertical?: boolean

package/components/ContextMenu/ContextMenu.astro

@@ -61,8 +61,9 @@ if (!Astro.slots.has('context')) {
             on(ctx, 'contextmenu', (event: MouseEvent) => {
                 event.preventDefault()
 
+                const target = event.currentTarget as HTMLElement
+
                 if (!contents[i]) {
-                    const target = event.currentTarget as HTMLElement
                     contents[i] = target.lastElementChild as HTMLDivElement
                 }
 
@@ -74,8 +75,12 @@ if (!Astro.slots.has('context')) {
                     })
                 }
 
-                contents[i].style.top = `${event.offsetY}px`
-                contents[i].style.left = `${event.offsetX}px`
+                const rect = target.getBoundingClientRect()
+                const x = event.clientX - rect.left
+                const y = event.clientY - rect.top
+
+                contents[i].style.top = `${y}px`
+                contents[i].style.left = `${x}px`
                 contents[i].dataset.show = 'true'
             })
         })

package/components/ContextMenu/ContextMenu.svelte

@@ -24,8 +24,13 @@
         event.preventDefault()
 
         if (content) {
-            content.style.top = `${event.offsetY}px`
-            content.style.left = `${event.offsetX}px`
+            const target = event.currentTarget as HTMLElement
+            const rect = target.getBoundingClientRect()
+            const x = event.clientX - rect.left
+            const y = event.clientY - rect.top
+
+            content.style.top = `${y}px`
+            content.style.left = `${x}px`
             content.dataset.show = 'true'
         }
     }