@mantine-vue/carousel 3.5.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/cjs/index.cjs +1 -2
  2. package/cjs/index.cjs.map +1 -1
  3. package/esm/index.mjs +1 -2
  4. package/esm/index.mjs.map +1 -1
  5. package/package.json +3 -3
package/cjs/index.cjs CHANGED
@@ -210,8 +210,7 @@ var Carousel_default = /* @__PURE__ */ (0, vue.defineComponent)({
210
210
  name: "Carousel",
211
211
  classes: Carousel_module_default,
212
212
  props,
213
- className: attrs.class,
214
- style: attrs.style,
213
+ attrs,
215
214
  classNames: props.classNames,
216
215
  styles: props.styles,
217
216
  unstyled: props.unstyled,
package/cjs/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":[],"sources":["../src/Carousel.context.ts","../src/components/CarouselVariables/CarouselVariables.utils.ts","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/get-chevron-rotation.ts","../src/get-indicator-navigation.ts","../src/Carousel.module.css","../src/components/Carousel/Carousel.vue","../src/components/Carousel/Carousel.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/index.ts","../src/components/Carousel/index.ts"],"sourcesContent":["import { createSafeContext } from '@mantine-vue/core'\n\nexport interface CarouselContextValue {\n getStyles: (selector: string, options?: Record<string, any>) => Record<string, any>\n orientation: 'horizontal' | 'vertical' | undefined\n}\n\nexport const [provideCarouselContext, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree',\n)\n","import { filterProps, getBaseValue, getSpacing, rem } from '@mantine-vue/core'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\nexport const isObject = (value: unknown): value is Record<string, any> =>\n typeof value === 'object' && value !== null && !Array.isArray(value)\nexport const getBaseStyles = (props: CarouselVariablesProps) =>\n filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(props.slideGap)),\n '--carousel-slide-size': rem(getBaseValue(props.slideSize)),\n })\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","// Ported verbatim from @mantine/carousel/src/get-chevron-rotation.ts – pure function, no\n// React/Vue specifics.\nexport interface GetChevronRotationOptions {\n dir: 'rtl' | 'ltr'\n orientation: 'horizontal' | 'vertical' | undefined\n direction: 'next' | 'previous'\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: GetChevronRotationOptions) {\n if (direction === 'previous') {\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180\n }\n\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0\n}\n","// Extracted so the wrap-around index math can be unit tested without mounting a component.\nexport function getNextIndicatorIndex(index: number, total: number): number {\n return index < total - 1 ? index + 1 : 0\n}\n\nexport function getPreviousIndicatorIndex(index: number, total: number): number {\n return index > 0 ? index - 1 : total - 1\n}\n\n// Note: when `max < min` (e.g. an empty carousel), this clamps to `max`, not `min`.\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max)\n}\n",".root {\n --carousel-height: auto;\n position: relative;\n}\n\n.viewport {\n height: var(--carousel-height);\n overflow: hidden;\n\n &[data-type='container'] {\n container: carousel / inline-size;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n height: var(--carousel-height);\n\n :where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: calc(var(--carousel-slide-gap) * -1);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: calc(var(--carousel-slide-gap) * -1);\n }\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n }\n}\n\n.controls {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n inset-inline-start: calc(50% - var(--carousel-control-size) / 2);\n top: 0;\n bottom: 0;\n flex-direction: column;\n padding: var(--carousel-controls-offset) 0;\n }\n\n &:where([data-orientation='horizontal']) {\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: calc(50% - var(--carousel-control-size) / 2);\n flex-direction: row;\n padding: 0 var(--carousel-controls-offset);\n }\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: var(--carousel-control-size);\n min-height: var(--carousel-control-size);\n border-radius: var(--carousel-control-size);\n pointer-events: all;\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n box-shadow: var(--mantine-shadow-md);\n border: 1px solid var(--mantine-color-gray-3);\n transition: opacity 100ms ease;\n\n @mixin where-light {\n opacity: 0.85;\n }\n\n @mixin where-dark {\n opacity: 0.65;\n }\n\n @mixin hover {\n opacity: 1;\n }\n}\n\n.indicators {\n position: absolute;\n display: flex;\n justify-content: center;\n gap: 8px;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n bottom: 0;\n top: 0;\n inset-inline-end: var(--mantine-spacing-md);\n flex-direction: column;\n }\n\n &:where([data-orientation='horizontal']) {\n bottom: var(--mantine-spacing-md);\n inset-inline-start: 0;\n inset-inline-end: 0;\n flex-direction: row;\n }\n}\n\n.indicator {\n pointer-events: all;\n border-radius: var(--mantine-radius-xl);\n box-shadow: var(--mantine-shadow-sm);\n opacity: 0.6;\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n opacity: 1;\n }\n\n &:where([data-active]) {\n opacity: 1;\n }\n\n &:where([data-orientation='vertical']) {\n width: 5px;\n height: 25px;\n }\n\n &:where([data-orientation='horizontal']) {\n width: 25px;\n height: 5px;\n }\n}\n\n.slide {\n position: relative;\n flex: 0 0 var(--carousel-slide-size, 100%);\n\n .root:where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n padding-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n padding-inline-end: var(--carousel-slide-gap);\n }\n }\n\n .root:where(:not([data-include-gap-in-size])) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: var(--carousel-slide-gap);\n }\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","import { factory } from '@mantine-vue/core'\nimport CarouselSlideComponent from './CarouselSlide.vue'\nimport type { CarouselSlideFactory } from './CarouselSlide.types'\nimport classes from '../../Carousel.module.css'\nexport const CarouselSlide = factory<CarouselSlideFactory>(CarouselSlideComponent, { classes })\nexport type {\n CarouselSlideFactory,\n CarouselSlideProps,\n CarouselSlideStylesNames,\n} from './CarouselSlide.types'\n","import { factory } from '@mantine-vue/core'\nimport CarouselComponent, { varsResolver } from './Carousel.vue'\nimport type { CarouselFactory } from './Carousel.types'\nimport { CarouselSlide } from '../CarouselSlide'\nimport classes from '../../Carousel.module.css'\nexport const Carousel = factory<CarouselFactory>(CarouselComponent, {\n classes,\n varsResolver,\n Slide: CarouselSlide,\n})\nexport type {\n CarouselCssVariables,\n CarouselEmits,\n CarouselFactory,\n CarouselProps,\n CarouselStylesNames,\n} from './Carousel.types'\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","names":[],"sources":["../src/Carousel.context.ts","../src/components/CarouselVariables/CarouselVariables.utils.ts","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/get-chevron-rotation.ts","../src/get-indicator-navigation.ts","../src/Carousel.module.css","../src/components/Carousel/Carousel.vue","../src/components/Carousel/Carousel.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/index.ts","../src/components/Carousel/index.ts"],"sourcesContent":["import { createSafeContext } from '@mantine-vue/core'\n\nexport interface CarouselContextValue {\n getStyles: (selector: string, options?: Record<string, any>) => Record<string, any>\n orientation: 'horizontal' | 'vertical' | undefined\n}\n\nexport const [provideCarouselContext, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree',\n)\n","import { filterProps, getBaseValue, getSpacing, rem } from '@mantine-vue/core'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\nexport const isObject = (value: unknown): value is Record<string, any> =>\n typeof value === 'object' && value !== null && !Array.isArray(value)\nexport const getBaseStyles = (props: CarouselVariablesProps) =>\n filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(props.slideGap)),\n '--carousel-slide-size': rem(getBaseValue(props.slideSize)),\n })\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","// Ported verbatim from @mantine/carousel/src/get-chevron-rotation.ts – pure function, no\n// React/Vue specifics.\nexport interface GetChevronRotationOptions {\n dir: 'rtl' | 'ltr'\n orientation: 'horizontal' | 'vertical' | undefined\n direction: 'next' | 'previous'\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: GetChevronRotationOptions) {\n if (direction === 'previous') {\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180\n }\n\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0\n}\n","// Extracted so the wrap-around index math can be unit tested without mounting a component.\nexport function getNextIndicatorIndex(index: number, total: number): number {\n return index < total - 1 ? index + 1 : 0\n}\n\nexport function getPreviousIndicatorIndex(index: number, total: number): number {\n return index > 0 ? index - 1 : total - 1\n}\n\n// Note: when `max < min` (e.g. an empty carousel), this clamps to `max`, not `min`.\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max)\n}\n",".root {\n --carousel-height: auto;\n position: relative;\n}\n\n.viewport {\n height: var(--carousel-height);\n overflow: hidden;\n\n &[data-type='container'] {\n container: carousel / inline-size;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n height: var(--carousel-height);\n\n :where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: calc(var(--carousel-slide-gap) * -1);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: calc(var(--carousel-slide-gap) * -1);\n }\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n }\n}\n\n.controls {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n inset-inline-start: calc(50% - var(--carousel-control-size) / 2);\n top: 0;\n bottom: 0;\n flex-direction: column;\n padding: var(--carousel-controls-offset) 0;\n }\n\n &:where([data-orientation='horizontal']) {\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: calc(50% - var(--carousel-control-size) / 2);\n flex-direction: row;\n padding: 0 var(--carousel-controls-offset);\n }\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: var(--carousel-control-size);\n min-height: var(--carousel-control-size);\n border-radius: var(--carousel-control-size);\n pointer-events: all;\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n box-shadow: var(--mantine-shadow-md);\n border: 1px solid var(--mantine-color-gray-3);\n transition: opacity 100ms ease;\n\n @mixin where-light {\n opacity: 0.85;\n }\n\n @mixin where-dark {\n opacity: 0.65;\n }\n\n @mixin hover {\n opacity: 1;\n }\n}\n\n.indicators {\n position: absolute;\n display: flex;\n justify-content: center;\n gap: 8px;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n bottom: 0;\n top: 0;\n inset-inline-end: var(--mantine-spacing-md);\n flex-direction: column;\n }\n\n &:where([data-orientation='horizontal']) {\n bottom: var(--mantine-spacing-md);\n inset-inline-start: 0;\n inset-inline-end: 0;\n flex-direction: row;\n }\n}\n\n.indicator {\n pointer-events: all;\n border-radius: var(--mantine-radius-xl);\n box-shadow: var(--mantine-shadow-sm);\n opacity: 0.6;\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n opacity: 1;\n }\n\n &:where([data-active]) {\n opacity: 1;\n }\n\n &:where([data-orientation='vertical']) {\n width: 5px;\n height: 25px;\n }\n\n &:where([data-orientation='horizontal']) {\n width: 25px;\n height: 5px;\n }\n}\n\n.slide {\n position: relative;\n flex: 0 0 var(--carousel-slide-size, 100%);\n\n .root:where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n padding-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n padding-inline-end: var(--carousel-slide-gap);\n }\n }\n\n .root:where(:not([data-include-gap-in-size])) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: var(--carousel-slide-gap);\n }\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n attrs,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n attrs,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","import { factory } from '@mantine-vue/core'\nimport CarouselSlideComponent from './CarouselSlide.vue'\nimport type { CarouselSlideFactory } from './CarouselSlide.types'\nimport classes from '../../Carousel.module.css'\nexport const CarouselSlide = factory<CarouselSlideFactory>(CarouselSlideComponent, { classes })\nexport type {\n CarouselSlideFactory,\n CarouselSlideProps,\n CarouselSlideStylesNames,\n} from './CarouselSlide.types'\n","import { factory } from '@mantine-vue/core'\nimport CarouselComponent, { varsResolver } from './Carousel.vue'\nimport type { CarouselFactory } from './Carousel.types'\nimport { CarouselSlide } from '../CarouselSlide'\nimport classes from '../../Carousel.module.css'\nexport const Carousel = factory<CarouselFactory>(CarouselComponent, {\n classes,\n varsResolver,\n Slide: CarouselSlide,\n})\nexport type {\n CarouselCssVariables,\n CarouselEmits,\n CarouselFactory,\n CarouselProps,\n CarouselStylesNames,\n} from './Carousel.types'\n"],"mappings":"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"}
package/esm/index.mjs CHANGED
@@ -186,8 +186,7 @@ var Carousel_default = /* @__PURE__ */ defineComponent({
186
186
  name: "Carousel",
187
187
  classes: Carousel_module_default,
188
188
  props,
189
- className: attrs.class,
190
- style: attrs.style,
189
+ attrs,
191
190
  classNames: props.classNames,
192
191
  styles: props.styles,
193
192
  unstyled: props.unstyled,
package/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":[],"sources":["../src/Carousel.context.ts","../src/components/CarouselVariables/CarouselVariables.utils.ts","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/get-chevron-rotation.ts","../src/get-indicator-navigation.ts","../src/Carousel.module.css","../src/components/Carousel/Carousel.vue","../src/components/Carousel/Carousel.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/index.ts","../src/components/Carousel/index.ts"],"sourcesContent":["import { createSafeContext } from '@mantine-vue/core'\n\nexport interface CarouselContextValue {\n getStyles: (selector: string, options?: Record<string, any>) => Record<string, any>\n orientation: 'horizontal' | 'vertical' | undefined\n}\n\nexport const [provideCarouselContext, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree',\n)\n","import { filterProps, getBaseValue, getSpacing, rem } from '@mantine-vue/core'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\nexport const isObject = (value: unknown): value is Record<string, any> =>\n typeof value === 'object' && value !== null && !Array.isArray(value)\nexport const getBaseStyles = (props: CarouselVariablesProps) =>\n filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(props.slideGap)),\n '--carousel-slide-size': rem(getBaseValue(props.slideSize)),\n })\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","// Ported verbatim from @mantine/carousel/src/get-chevron-rotation.ts – pure function, no\n// React/Vue specifics.\nexport interface GetChevronRotationOptions {\n dir: 'rtl' | 'ltr'\n orientation: 'horizontal' | 'vertical' | undefined\n direction: 'next' | 'previous'\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: GetChevronRotationOptions) {\n if (direction === 'previous') {\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180\n }\n\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0\n}\n","// Extracted so the wrap-around index math can be unit tested without mounting a component.\nexport function getNextIndicatorIndex(index: number, total: number): number {\n return index < total - 1 ? index + 1 : 0\n}\n\nexport function getPreviousIndicatorIndex(index: number, total: number): number {\n return index > 0 ? index - 1 : total - 1\n}\n\n// Note: when `max < min` (e.g. an empty carousel), this clamps to `max`, not `min`.\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max)\n}\n",".root {\n --carousel-height: auto;\n position: relative;\n}\n\n.viewport {\n height: var(--carousel-height);\n overflow: hidden;\n\n &[data-type='container'] {\n container: carousel / inline-size;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n height: var(--carousel-height);\n\n :where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: calc(var(--carousel-slide-gap) * -1);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: calc(var(--carousel-slide-gap) * -1);\n }\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n }\n}\n\n.controls {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n inset-inline-start: calc(50% - var(--carousel-control-size) / 2);\n top: 0;\n bottom: 0;\n flex-direction: column;\n padding: var(--carousel-controls-offset) 0;\n }\n\n &:where([data-orientation='horizontal']) {\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: calc(50% - var(--carousel-control-size) / 2);\n flex-direction: row;\n padding: 0 var(--carousel-controls-offset);\n }\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: var(--carousel-control-size);\n min-height: var(--carousel-control-size);\n border-radius: var(--carousel-control-size);\n pointer-events: all;\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n box-shadow: var(--mantine-shadow-md);\n border: 1px solid var(--mantine-color-gray-3);\n transition: opacity 100ms ease;\n\n @mixin where-light {\n opacity: 0.85;\n }\n\n @mixin where-dark {\n opacity: 0.65;\n }\n\n @mixin hover {\n opacity: 1;\n }\n}\n\n.indicators {\n position: absolute;\n display: flex;\n justify-content: center;\n gap: 8px;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n bottom: 0;\n top: 0;\n inset-inline-end: var(--mantine-spacing-md);\n flex-direction: column;\n }\n\n &:where([data-orientation='horizontal']) {\n bottom: var(--mantine-spacing-md);\n inset-inline-start: 0;\n inset-inline-end: 0;\n flex-direction: row;\n }\n}\n\n.indicator {\n pointer-events: all;\n border-radius: var(--mantine-radius-xl);\n box-shadow: var(--mantine-shadow-sm);\n opacity: 0.6;\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n opacity: 1;\n }\n\n &:where([data-active]) {\n opacity: 1;\n }\n\n &:where([data-orientation='vertical']) {\n width: 5px;\n height: 25px;\n }\n\n &:where([data-orientation='horizontal']) {\n width: 25px;\n height: 5px;\n }\n}\n\n.slide {\n position: relative;\n flex: 0 0 var(--carousel-slide-size, 100%);\n\n .root:where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n padding-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n padding-inline-end: var(--carousel-slide-gap);\n }\n }\n\n .root:where(:not([data-include-gap-in-size])) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: var(--carousel-slide-gap);\n }\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n className: attrs.class,\n style: attrs.style as any,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","import { factory } from '@mantine-vue/core'\nimport CarouselSlideComponent from './CarouselSlide.vue'\nimport type { CarouselSlideFactory } from './CarouselSlide.types'\nimport classes from '../../Carousel.module.css'\nexport const CarouselSlide = factory<CarouselSlideFactory>(CarouselSlideComponent, { classes })\nexport type {\n CarouselSlideFactory,\n CarouselSlideProps,\n CarouselSlideStylesNames,\n} from './CarouselSlide.types'\n","import { factory } from '@mantine-vue/core'\nimport CarouselComponent, { varsResolver } from './Carousel.vue'\nimport type { CarouselFactory } from './Carousel.types'\nimport { CarouselSlide } from '../CarouselSlide'\nimport classes from '../../Carousel.module.css'\nexport const Carousel = factory<CarouselFactory>(CarouselComponent, {\n classes,\n varsResolver,\n Slide: CarouselSlide,\n})\nexport type {\n CarouselCssVariables,\n CarouselEmits,\n CarouselFactory,\n CarouselProps,\n CarouselStylesNames,\n} from './Carousel.types'\n"],"mappings":";;;;;AAOA,IAAa,CAAC,wBAAwB,sBAAsB,kBAC1D,0CACF;;;ACPA,IAAa,YAAY,UACvB,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,MAAM,QAAQ,KAAK;AACrE,IAAa,iBAAiB,UAC5B,YAAY;CACV,wBAAwB,WAAW,aAAa,MAAM,QAAQ,CAAC;CAC/D,yBAAyB,IAAI,aAAa,MAAM,SAAS,CAAC;AAC5D,CAAC;;;;;;;;;;;;ECFH,MAAM,QAAQ;EACd,MAAM,SAAS,eAAe,cAAc,KAAK,CAAC;EAClD,MAAM,YAAY,eAAe;GAC/B,MAAM,kBAAkB,UACtB,SAAS,KAAK,IAAI,KAAK,KAAK,EAAE,QAAQ,QAAQ,QAAQ,MAAM,IAAI,CAAC;GAInE,OAHoB,CAClB,GAAG,IAAI,IAAI,CAAC,GAAG,eAAe,MAAM,QAAQ,GAAG,GAAG,eAAe,MAAM,SAAS,CAAC,CAAC,CACpF,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,CACtB,EAAY,QAA6C,QAAQ,eAAe;IACrF,MAAM,SAA8B,CAAC;IACrC,IAAI,SAAS,MAAM,QAAQ,KAAK,MAAM,SAAS,gBAAgB,KAAA,GAC7D,OAAO,0BAA0B,WAAW,MAAM,SAAS,WAAW;IACxE,IAAI,SAAS,MAAM,SAAS,KAAK,MAAM,UAAU,gBAAgB,KAAA,GAC/D,OAAO,2BAA2B,IAAI,MAAM,UAAU,WAAW;IACnE,OAAO,wBAAwB,WAAW,MAAM;IAChD,OAAO;GACT,GAAG,CAAC,CAAC;EACP,CAAC;;uBAGC,YAAmF,MAAA,YAAA,GAAA;IAApE,UAAU,MAAM;IAAW,QAAQ,OAAA;IAAS,WAAW,UAAA;;;;;;;;;;;;;;;;;;;;EEbxE,MAAM,QAAQ;EACd,MAAM,QAAQ,gBAAgB;EAC9B,MAAM,SAAS,eAAe,cAAc,KAAK,CAAC;EAClD,MAAM,QAAQ,eAAe;GAC3B,MAAM,UAAU,KAAK,MAAM,MAAM,WAAW,EAAE,QAC3C,QAAQ,eAAe;IACtB,MAAM,SAA8B,CAAC;IACrC,IAAI,SAAS,MAAM,QAAQ,KAAK,MAAM,SAAS,gBAAgB,KAAA,GAC7D,OAAO,0BAA0B,WAAW,MAAM,SAAS,WAAW;IACxE,IAAI,SAAS,MAAM,SAAS,KAAK,MAAM,UAAU,gBAAgB,KAAA,GAC/D,OAAO,2BAA2B,IAAI,MAAM,UAAU,WAAW;IACnE,OAAO,cAAc;IACrB,OAAO;GACT,GACA,CAAC,CACH;GACA,OAAO,qBAAqB,MAAM,MAAM,WAAW,EAAE,QAClD,QAAQ,SAAS;IAChB,IAAI,KAAK,QAAQ,KAAK,eAAe,CAAC,CAAC,EAAE,QACvC,OAAO,eAAe,MAAM,MAAM,YAAY,KAAK,YAAY,MAC7D,QAAQ,KAAK;IACjB,OAAO;GACT,GACA,CAAC,CACH;EACF,CAAC;;uBAES,YAA2E,MAAA,YAAA,GAAA;IAA5D,UAAU,MAAM;IAAW,QAAQ,OAAA;IAAS,OAAO,MAAA;;;;;;;;;;;AEhC5E,SAAgB,mBAAmB,EAAE,KAAK,aAAa,aAAwC;CAC7F,IAAI,cAAc,YAChB,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,IAAI,MAAM;CAGxE,OAAO,gBAAgB,eAAe,MAAM,QAAQ,QAAQ,KAAK,KAAK;AACxE;;;ACbA,SAAgB,sBAAsB,OAAe,OAAuB;CAC1E,OAAO,QAAQ,QAAQ,IAAI,QAAQ,IAAI;AACzC;AAEA,SAAgB,0BAA0B,OAAe,OAAuB;CAC9E,OAAO,QAAQ,IAAI,QAAQ,IAAI,QAAQ;AACzC;AAGA,SAAgB,MAAM,OAAe,KAAa,KAAqB;CACrE,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC3C;;;;;;;;;;;;;;;;;AEVA,IAAM,eAAe,oBAAyB,GAAG,EAAE,QAAQ,aAAa,sBAAsB,EAC5F,MAAM;CACJ,qBAAqB,IAAI,MAAM;CAC/B,2BAA2B,IAAI,WAAW;CAC1C,8BAA8B,WAAW,cAAc;AACzD,EACF,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CF,MAAM,QAAQ,SAAS,YAAY,MAAM,OAAQ;EACjD,MAAM,OAAO;EACb,MAAM,QAAQ,SAAS;EACvB,MAAM,QAAQ,SAAS;EACvB,MAAM,YAAY,UAAU;GAC1B,MAAM;GACN,SAAA;GACA;GACA,WAAW,MAAM;GACjB,OAAO,MAAM;GACb,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,UAAU,MAAM;GAChB,MAAM,MAAM;GACZ;EACF,CAAC;EACD,MAAM,KAAK,MAAM,MAAM,EAAE;EACzB,MAAM,sBAAsB,0BAA0B,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,CAAC;EAC3F,MAAM,EAAE,QAAQ,aAAa;EAC7B,MAAM,sBAAwC;GAC5C,OAAO;GACP,MAAM;GACN,gBAAgB;GAChB,UAAU;GACV,iBAAiB;GACjB,WAAW;GACX,eAAe;EACjB;EASA,MAAM,CAAC,WAAW,SAAS,iBARN,gBAAkC;GACrD,MAAM,MAAM,gBAAgB,eAAe,MAAM;GACjD,WAAW,MAAM,gBAAgB,eAAe,IAAI,QAAQ,KAAA;GAC5D,YAAY,MAAM;GAClB,GAAG;GACH,GAAG,MAAM;EACX,EAE4C,GAD5B,eAAe,MAAM,WAAW,CAAC,CACS,CAAO;EACjE,MAAM,WAAW,IAAI,CAAC;EACtB,MAAM,cAAc,IAAI,CAAC;EACzB,MAAM,iBAAiB,IAAI,CAAC;EAC5B,MAAM,gBAAgB,eAAgB,SAAS,SAAS,KAAK,MAAM,OAAO,cAAc,KAAM,KAAK;EACnG,MAAM,gBAAgB,eAAgB,SAAS,SAAS,KAAK,MAAM,OAAO,cAAc,KAAM,KAAK;EACnG,MAAM,iBAAiB,gBAAgB;GACrC,UAAU,IAAI;GACd,WAAW,MAAM;GACjB,UAAU,MAAM;EAClB,EAAE;EAEF,SAAS,gBAAgB,OAAgB;GACvC,OAAO,MAAM,QAAQ,SAAS,KAAK,SAAS,OAAO,EAAE;EACvD;EACA,SAAS,eAAe;GACtB,MAAM,QAAQ,MAAM,UAAU,KAAK,CAAC;GACpC,eAAe,QAAQ,gBAAgB,KAAK;GAC5C,OAAO;EACT;EACA,SAAS,SAAS,OAAe;GAC/B,MAAM,OAAO,SAAS,KAAK;EAC7B;EACA,SAAS,SAAS;GAChB,MAAM,WAAW,MAAM;GACvB,IAAI,CAAC,UAAU;GACf,MAAM,QAAQ,SAAS,mBAAmB;GAC1C,MAAM,UAAU,UAAU,SAAS;GACnC,SAAS,QAAQ;GACjB,IAAI,SAAS,KAAK,gBAAgB,KAAK;EACzC;EACA,SAAS,WAAW;GAClB,MAAM,OAAO,WAAW;GACxB,KAAK,gBAAgB;EACvB;EACA,SAAS,OAAO;GACd,MAAM,OAAO,WAAW;GACxB,KAAK,YAAY;EACnB;EACA,SAAS,QAAQ,OAAsB;GACrC,IAAI,CAAC,MAAM,oBAAoB;GAC/B,IAAI,MAAM,QAAQ,cAAc;IAC9B,MAAM,eAAe;IACrB,KAAK;GACP;GACA,IAAI,MAAM,QAAQ,aAAa;IAC7B,MAAM,eAAe;IACrB,SAAS;GACX;GACA,IAAI,MAAM,QAAQ,QAAQ;IACxB,MAAM,eAAe;IACrB,SAAS,CAAC;GACZ;GACA,IAAI,MAAM,QAAQ,OAAO;IACvB,MAAM,eAAe;IACrB,UAAU,MAAM,OAAO,eAAe,EAAE,UAAU,KAAK,CAAC;GAC1D;EACF;EACA,SAAS,iBAAiB,OAAsB,OAAe;GAC7D,MAAM,UAAU,MAAM,gBAAgB,eAAe,eAAe;GACpE,MAAM,cAAc,MAAM,gBAAgB,eAAe,cAAc;GACvE,MAAM,SAAU,MAAM,cAA8B;GACpD,IAAI,SAAwB;GAC5B,IAAI,MAAM,QAAQ,SAAS,SAAS,sBAAsB,OAAO,YAAY,KAAK;GAClF,IAAI,MAAM,QAAQ,aAAa,SAAS,0BAA0B,OAAO,YAAY,KAAK;GAC1F,IAAI,MAAM,QAAQ,QAAQ,SAAS;GACnC,IAAI,MAAM,QAAQ,OAAO,SAAS,YAAY,QAAQ;GACtD,IAAI,WAAW,MAAM;IACnB,MAAM,eAAe;IACrB,SAAS,MAAM;IACd,CAAC,QAAQ,SAAS,UAAqC,MAAM;GAChE;EACF;EACA,SAAS,eAAe,OAAe;GACrC,OAAO;IACL,GAAG,UAAU,WAAW;IACxB,MAAM;IACN,cAAc,eAAe,QAAQ;IACrC,iBAAiB,UAAU,SAAS;IACpC,UAAU,UAAU,SAAS,QAAQ,IAAI;IACzC,eAAe,UAAU,SAAS,SAAS,KAAA;IAC3C,oBAAoB,MAAM;IAC1B,eAAe,SAAS,KAAK;IAC7B,YAAY,UAAyB,iBAAiB,OAAO,KAAK;IAClE,cAAc,UAAiB,MAAM,eAAe;IACpD,GAAG,MAAM,oBAAoB,KAAK;GACpC;EACF;EACA,SAAS,gBAAgB;GACvB,OAAO;IACL,iBAAiB,GAAG;IACpB,cAAc;IACd,iBAAiB,CAAC,cAAc;IAChC,iBAAiB,CAAC,cAAc,SAAS,KAAA;IACzC,aAAa;IACb,UAAU,cAAc,QAAQ,IAAI;IACpC,GAAG,MAAM;IACT,GAAG,UAAU,WAAW;KACtB,WAAW,MAAM,sBAAsB;KACvC,OAAO,MAAM,sBAAsB;IACrC,CAAC;IACD,UAAU,UAAiB;KACzB,SAAS;KACT,MAAM,sBAAsB,UAAU,KAAK;IAC7C;GACF;EACF;EACA,SAAS,YAAY;GACnB,OAAO;IACL,iBAAiB,GAAG;IACpB,cAAc;IACd,iBAAiB,CAAC,cAAc;IAChC,iBAAiB,CAAC,cAAc,SAAS,KAAA;IACzC,aAAa;IACb,UAAU,cAAc,QAAQ,IAAI;IACpC,GAAG,UAAU,WAAW;KACtB,WAAW,MAAM,kBAAkB;KACnC,OAAO,MAAM,kBAAkB;IACjC,CAAC;IACD,GAAG,MAAM;IACT,UAAU,UAAiB;KACzB,KAAK;KACL,MAAM,kBAAkB,UAAU,KAAK;IACzC;GACF;EACF;EACA,MAAM,2BAA2B,MAAM;EACvC,MAAM,uBAAuB,MAAM;EAEnC,MACE,QACC,UAAU,WAAW,cAAc;GAClC,IAAI,CAAC,UAAU;GACf,KAAK,mBAAmB,QAAQ;GAChC,OAAO;GACP,YAAY,QAAQ,SAAS,eAAe,EAAE;GAC9C,SAAS,GAAG,UAAU,MAAM;GAC5B,gBAAgB,SAAS,IAAI,UAAU,MAAM,CAAC;EAChD,GACA,EAAE,WAAW,KAAK,CACpB;EACA,MAAM,CAAC,sBAAsB,MAAM,cAAc,cAAc,IAAI,CAAC,mBAAmB;GACrF,MAAM,WAAW,MAAM;GACvB,IAAI,CAAC,UAAU;GACf,SAAS,OAAO;GAChB,YAAY,QAAQ,SAAS,eAAe,EAAE;GAC9C,SAAS,QAAQ,MAAM,SAAS,OAAO,GAAG,gBAAgB,CAAC;EAC7D,CAAC;EACD,uBAAuB;GACrB;GACA,IAAI,cAAc;IAChB,OAAO,MAAM;GACf;EACF,CAAQ;EAER,MAAM,cAAc,IAAoB,IAAI;EAE5C,MAAM,cAAc,SAAyB;GAC3C,YAAY,QAAQ;GACpB,UAAU,MAAM,SAAS,IAAI;EAC/B;EAEA,SAAa;GAAE;GAAO;EAAY,CAAC;;2DAIC,MAAA,KAAA,EAAM,SAAI,eAAA,UAAA,GAA5C,YAAwF,oCAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAAlB,eAAA,KAAc,CAAA,GAAA,MAAA,EAAA,MAAA,UAAA,GACpF,YAAoD,2BAAA,eAAA,WAAA,EAAA,KAAA,EAAA,GAAlB,eAAA,KAAc,CAAA,GAAA,MAAA,EAAA,IAChD,YA+DM,MAAA,GAAA,GA/DN,WA+DM,EA9DH,SAAS,WAAU,GAAA;;;OAC+D,MAAA,KAAA;OAAgB,MAAA,SAAA,EAAS,QAAA,EAAA,WAAsB,oBAAmB,CAAA;;IAMpJ,IAAI,MAAA,EAAA;IACJ,KAAG,CAAA;kBAAyB,MAAA,KAAA,EAAM;KAAW,uBAAyB,MAAA,KAAA,EAAM;IAAgB,GAAU,MAAA,KAAA,EAAM,GAAA;sBAI3F;;2BAID;KAFjB,YAEiB,MAAA,cAAA,GAAA;MAFD,MAAK;MAAS,aAAU;MAAS,eAAY;;6BACW,CAAA,gBAAA,gBAAnE,YAAA,QAAW,IAAA,SAAgB,SAAA,QAAQ,EAAA,MAAW,YAAA,UAAW,EAAA,GAAA,CAAA,CAAA,CAAA;;;KAGtD,MAAA,KAAA,EAAM,gBAAA,UAAA,GADd,mBAuBM,OAvBN,WAuBM,EAAA,KAAA,EAAA,GArBI,MAAA,SAAA,EAAS,UAAA,GAAA,EAChB,oBAAkB,MAAA,KAAA,EAAM,YAAA,CAAA,GAAA,CAEzB,YAQiB,MAAA,cAAA,GAAA,eAAA,mBARO,cAAa,CAAA,CAAA,GAAA;6BACkD,CAApE,MAAA,KAAA,EAAM,wBAAwB,KAAA,KAAA,UAAA,GAA/C,YAAqF,wBAAtB,kBAAkB,GAAA,EAAA,KAAA,EAAA,CAAA,MAAA,UAAA,GACjF,YAKE,MAAA,gBAAA,GAAA;;OAHC,OAAK,eAAA,EAAA,WAAA,UAAqC,MAAA,kBAAA,EAAkB;QAAA,KAAG,MAAA,GAAA;QAAG,aAAe,MAAA,KAAA,EAAM;QAAW,WAAA;OAAA,CAAA,EAAA,MAAA,CAAA;;;aAKvG,YAQiB,MAAA,cAAA,GAAA,eAAA,mBARO,UAAS,CAAA,CAAA,GAAA;6BAC8C,CAA5D,MAAA,KAAA,EAAM,oBAAoB,KAAA,KAAA,UAAA,GAA3C,YAA6E,wBAAlB,cAAc,GAAA,EAAA,KAAA,EAAA,CAAA,MAAA,UAAA,GACzE,YAKE,MAAA,gBAAA,GAAA;;OAHC,OAAK,eAAA,EAAA,WAAA,UAAqC,MAAA,kBAAA,EAAkB;QAAA,KAAG,MAAA,GAAA;QAAG,aAAe,MAAA,KAAA,EAAM;QAAW,WAAA;OAAA,CAAA,EAAA,MAAA,CAAA;;;;KAMzG,mBAOM,OAPN,WAOM;eAPG;MAAJ,KAAI;QAAoB,MAAA,SAAA,EAAS,UAAA,GAAA,EAAe,aAAW,MAAA,KAAA,EAAM,KAAA,CAAA,GAAA,CACpE,mBAKM,OALN,WACU,MAIJ,SAAA,EAJa,aAAA,EAAA,WAA2B,oBAAmB,CAAA,GAAA,EAC9D,oBAAkB,MAAA,KAAA,EAAM,YAAA,CAAA,GAAA,EAAA,UAAA,GAEzB,YAAgC,wBAAhB,YAAY,CAAA,EAAA,GAAA,IAAA,UAAA,CAAA,GAAA,IAAA,UAAA;KAIxB,MAAA,KAAA,EAAM,kBAAA,UAAA,GADd,mBAYM,OAZN,WAYM,EAAA,KAAA,EAAA,GAVI,MAAA,SAAA,EAAS,YAAA,GAAA;MACjB,MAAK;MACL,cAAW;MACV,oBAAkB,MAAA,KAAA,EAAM;4BAEzB,mBAIE,UAAA,MAAA,WAHgB,YAAA,QAAT,UAAK;0BADd,YAIE,MAAA,cAAA,GAJF,WAIE,EAFC,KAAK,QAAK,EAAA,GAAA,EAAA,SAAA,KAAA,GACH,eAAe,QAAK,CAAA,CAAA,GAAA,MAAA,EAAA;;;;;;;;;;AIxTpC,IAAa,gBAAgB,QAA8B;;;;;;;;;;;EFI3D,MAAM,QAAQ;EACd,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,mBAAmB;EAEnC,MAAM,cAAc,IAAoB,IAAI;EAE5C,MAAM,cAAc,SAAyB;GAC3C,YAAY,QAAQ;GACpB,UAAU,MAAM,SAAS,IAAI;EAC/B;EAEA,SAAa,EAAE,YAAY,CAAC;;uBAI1B,YAiBM,MAAA,GAAA,GAjBN,WAiBM,EAhBH,SAAS,WAAU,GAAA;OACD,MAAA,KAAA;OAAgB,MAAA,OAAA,EAAQ,UAAS,SAAA;gBAA+B,MAAA,KAAA,EAAM;YAAsB,MAAA,KAAA,EAAM;iBAA2B,MAAM;aAA4B,MAAM;;;IASvL,KAAG,CAAA,EAAA,aAAkB,MAAA,OAAA,EAAQ,YAAW,GAAI,MAAM,GAAG;IACtD,MAAK;IACL,wBAAqB;IACrB,cAAW;;2BAEH,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;;;;CEnC+C,GAAwB,EAAE,SAAA,wBAAQ,CAAC;;;ACC9F,IAAa,WAAW,QAAyB,kBAAmB;CAClE,SAAA;CACA;CACA,OAAO;AACT,CAAC"}
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/Carousel.context.ts","../src/components/CarouselVariables/CarouselVariables.utils.ts","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselContainerVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/components/CarouselVariables/CarouselVariables.vue","../src/get-chevron-rotation.ts","../src/get-indicator-navigation.ts","../src/Carousel.module.css","../src/components/Carousel/Carousel.vue","../src/components/Carousel/Carousel.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/CarouselSlide.vue","../src/components/CarouselSlide/index.ts","../src/components/Carousel/index.ts"],"sourcesContent":["import { createSafeContext } from '@mantine-vue/core'\n\nexport interface CarouselContextValue {\n getStyles: (selector: string, options?: Record<string, any>) => Record<string, any>\n orientation: 'horizontal' | 'vertical' | undefined\n}\n\nexport const [provideCarouselContext, useCarouselContext] = createSafeContext<CarouselContextValue>(\n 'Carousel component was not found in tree',\n)\n","import { filterProps, getBaseValue, getSpacing, rem } from '@mantine-vue/core'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\nexport const isObject = (value: unknown): value is Record<string, any> =>\n typeof value === 'object' && value !== null && !Array.isArray(value)\nexport const getBaseStyles = (props: CarouselVariablesProps) =>\n filterProps({\n '--carousel-slide-gap': getSpacing(getBaseValue(props.slideGap)),\n '--carousel-slide-size': rem(getBaseValue(props.slideSize)),\n })\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { InlineStyles, keys, getSpacing, px, rem } from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselContainerVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst styles = computed(() => getBaseStyles(props))\nconst container = computed(() => {\n const getBreakpoints = (value: unknown) =>\n isObject(value) ? keys(value).filter((key) => key !== 'base') : []\n const breakpoints = [\n ...new Set([...getBreakpoints(props.slideGap), ...getBreakpoints(props.slideSize)]),\n ].sort((a, b) => px(a) - px(b))\n return breakpoints.reduce<Record<string, Record<string, any>>>((result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[`carousel (min-width: ${breakpoint})`] = values\n return result\n }, {})\n})\n</script>\n<template>\n <InlineStyles :selector=\"props.selector\" :styles=\"styles\" :container=\"container\" />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n getSortedBreakpoints,\n InlineStyles,\n keys,\n getSpacing,\n rem,\n useMantineTheme,\n} from '@mantine-vue/core'\nimport { getBaseStyles, isObject } from './CarouselVariables.utils'\nimport type { CarouselVariablesProps } from './CarouselVariables.types'\ndefineOptions({ name: 'CarouselVariables' })\nconst props = defineProps<CarouselVariablesProps>()\nconst theme = useMantineTheme()\nconst styles = computed(() => getBaseStyles(props))\nconst media = computed(() => {\n const queries = keys(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, breakpoint) => {\n const values: Record<string, any> = {}\n if (isObject(props.slideGap) && props.slideGap[breakpoint] !== undefined)\n values['--carousel-slide-gap'] = getSpacing(props.slideGap[breakpoint])\n if (isObject(props.slideSize) && props.slideSize[breakpoint] !== undefined)\n values['--carousel-slide-size'] = rem(props.slideSize[breakpoint])\n result[breakpoint] = values\n return result\n },\n {},\n )\n return getSortedBreakpoints(theme.value.breakpoints).reduce<Record<string, Record<string, any>>>(\n (result, item) => {\n if (keys(queries[item.breakpoint] ?? {}).length)\n result[`(min-width: ${theme.value.breakpoints[item.breakpoint]})`] =\n queries[item.breakpoint]\n return result\n },\n {},\n )\n})\n</script>\n<template><InlineStyles :selector=\"props.selector\" :styles=\"styles\" :media=\"media\" /></template>\n","// Ported verbatim from @mantine/carousel/src/get-chevron-rotation.ts – pure function, no\n// React/Vue specifics.\nexport interface GetChevronRotationOptions {\n dir: 'rtl' | 'ltr'\n orientation: 'horizontal' | 'vertical' | undefined\n direction: 'next' | 'previous'\n}\n\nexport function getChevronRotation({ dir, orientation, direction }: GetChevronRotationOptions) {\n if (direction === 'previous') {\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? 1 : -1) : -180\n }\n\n return orientation === 'horizontal' ? 90 * (dir === 'ltr' ? -1 : 1) : 0\n}\n","// Extracted so the wrap-around index math can be unit tested without mounting a component.\nexport function getNextIndicatorIndex(index: number, total: number): number {\n return index < total - 1 ? index + 1 : 0\n}\n\nexport function getPreviousIndicatorIndex(index: number, total: number): number {\n return index > 0 ? index - 1 : total - 1\n}\n\n// Note: when `max < min` (e.g. an empty carousel), this clamps to `max`, not `min`.\nexport function clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max)\n}\n",".root {\n --carousel-height: auto;\n position: relative;\n}\n\n.viewport {\n height: var(--carousel-height);\n overflow: hidden;\n\n &[data-type='container'] {\n container: carousel / inline-size;\n }\n}\n\n.container {\n display: flex;\n flex-direction: row;\n height: var(--carousel-height);\n\n :where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: calc(var(--carousel-slide-gap) * -1);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: calc(var(--carousel-slide-gap) * -1);\n }\n }\n\n &:where([data-orientation='vertical']) {\n flex-direction: column;\n }\n}\n\n.controls {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n inset-inline-start: calc(50% - var(--carousel-control-size) / 2);\n top: 0;\n bottom: 0;\n flex-direction: column;\n padding: var(--carousel-controls-offset) 0;\n }\n\n &:where([data-orientation='horizontal']) {\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: calc(50% - var(--carousel-control-size) / 2);\n flex-direction: row;\n padding: 0 var(--carousel-controls-offset);\n }\n}\n\n.control {\n display: flex;\n justify-content: center;\n align-items: center;\n min-width: var(--carousel-control-size);\n min-height: var(--carousel-control-size);\n border-radius: var(--carousel-control-size);\n pointer-events: all;\n background-color: var(--mantine-color-white);\n color: var(--mantine-color-black);\n box-shadow: var(--mantine-shadow-md);\n border: 1px solid var(--mantine-color-gray-3);\n transition: opacity 100ms ease;\n\n @mixin where-light {\n opacity: 0.85;\n }\n\n @mixin where-dark {\n opacity: 0.65;\n }\n\n @mixin hover {\n opacity: 1;\n }\n}\n\n.indicators {\n position: absolute;\n display: flex;\n justify-content: center;\n gap: 8px;\n pointer-events: none;\n\n &:where([data-orientation='vertical']) {\n bottom: 0;\n top: 0;\n inset-inline-end: var(--mantine-spacing-md);\n flex-direction: column;\n }\n\n &:where([data-orientation='horizontal']) {\n bottom: var(--mantine-spacing-md);\n inset-inline-start: 0;\n inset-inline-end: 0;\n flex-direction: row;\n }\n}\n\n.indicator {\n pointer-events: all;\n border-radius: var(--mantine-radius-xl);\n box-shadow: var(--mantine-shadow-sm);\n opacity: 0.6;\n background-color: var(--mantine-color-white);\n\n @mixin hover {\n opacity: 1;\n }\n\n &:where([data-active]) {\n opacity: 1;\n }\n\n &:where([data-orientation='vertical']) {\n width: 5px;\n height: 25px;\n }\n\n &:where([data-orientation='horizontal']) {\n width: 25px;\n height: 5px;\n }\n}\n\n.slide {\n position: relative;\n flex: 0 0 var(--carousel-slide-size, 100%);\n\n .root:where([data-include-gap-in-size]) & {\n &:where([data-orientation='vertical']) {\n padding-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n padding-inline-end: var(--carousel-slide-gap);\n }\n }\n\n .root:where(:not([data-include-gap-in-size])) & {\n &:where([data-orientation='vertical']) {\n margin-bottom: var(--carousel-slide-gap);\n }\n\n &:where([data-orientation='horizontal']) {\n margin-inline-end: var(--carousel-slide-gap);\n }\n }\n}\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n attrs,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script lang=\"ts\">\nimport { createVarsResolver, getSpacing, rem } from '@mantine-vue/core'\nconst varsResolver = createVarsResolver<any>((_, { height, controlSize, controlsOffset }) => ({\n root: {\n '--carousel-height': rem(height),\n '--carousel-control-size': rem(controlSize),\n '--carousel-controls-offset': getSpacing(controlsOffset),\n },\n}))\nexport { varsResolver }\n</script>\n\n<script setup lang=\"ts\">\nimport { Comment, computed, ref, useAttrs, useSlots, watch, type VNode } from 'vue'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport type { EmblaOptionsType } from 'embla-carousel'\nimport {\n AccordionChevron,\n Box,\n UnstyledButton,\n VisuallyHidden,\n useDirection,\n useProps,\n useStyles,\n} from '@mantine-vue/core'\nimport { assignRef, useId } from '@mantine-vue/hooks'\nimport { provideCarouselContext } from '../../Carousel.context'\nimport CarouselContainerVariables from '../CarouselVariables/CarouselContainerVariables.vue'\nimport CarouselVariables from '../CarouselVariables/CarouselVariables.vue'\nimport { getChevronRotation } from '../../get-chevron-rotation'\nimport {\n clamp,\n getNextIndicatorIndex,\n getPreviousIndicatorIndex,\n} from '../../get-indicator-navigation'\nimport type { CarouselEmits, CarouselProps } from './Carousel.types'\nimport classes from '../../Carousel.module.css'\n\ndefineOptions({ name: 'Carousel', inheritAttrs: false })\nconst rawProps = withDefaults(defineProps<CarouselProps>(), {\n controlSize: 26,\n controlsOffset: 'sm',\n slideSize: '100%',\n slideGap: 0,\n orientation: 'horizontal',\n includeGapInSize: true,\n initialSlide: 0,\n withControls: true,\n withIndicators: false,\n withKeyboardEvents: true,\n type: 'media',\n})\nconst props = useProps('Carousel', null, rawProps)\nconst emit = defineEmits<CarouselEmits>()\nconst attrs = useAttrs()\nconst slots = useSlots()\nconst getStyles = useStyles({\n name: 'Carousel',\n classes,\n props,\n attrs,\n classNames: props.classNames,\n styles: props.styles,\n unstyled: props.unstyled,\n vars: props.vars,\n varsResolver,\n})\nconst id = useId(props.id)\nconst responsiveClassName = `__mantine-vue-carousel-${Math.random().toString(36).slice(2, 9)}`\nconst { dir } = useDirection()\nconst defaultEmblaOptions: EmblaOptionsType = {\n align: 'center',\n loop: false,\n slidesToScroll: 1,\n dragFree: false,\n inViewThreshold: 0,\n skipSnaps: false,\n containScroll: 'trimSnaps',\n}\nconst emblaOptions = computed<EmblaOptionsType>(() => ({\n axis: props.orientation === 'horizontal' ? 'x' : 'y',\n direction: props.orientation === 'horizontal' ? dir.value : undefined,\n startIndex: props.initialSlide,\n ...defaultEmblaOptions,\n ...props.emblaOptions,\n}))\nconst plugins = computed(() => props.plugins ?? [])\nconst [emblaNode, embla] = emblaCarouselVue(emblaOptions, plugins)\nconst selected = ref(0)\nconst slidesCount = ref(0)\nconst slotSlideCount = ref(0)\nconst canScrollPrev = computed(() => (selected.value >= 0 && embla.value?.canScrollPrev()) || false)\nconst canScrollNext = computed(() => (selected.value >= 0 && embla.value?.canScrollNext()) || false)\nconst variablesProps = computed(() => ({\n selector: `.${responsiveClassName}`,\n slideSize: props.slideSize,\n slideGap: props.slideGap,\n}))\n\nfunction countRealSlides(nodes: VNode[]) {\n return nodes.filter((node) => node.type !== Comment).length\n}\nfunction renderSlides() {\n const nodes = slots.default?.() ?? []\n slotSlideCount.value = countRealSlides(nodes)\n return nodes\n}\nfunction scrollTo(index: number) {\n embla.value?.scrollTo(index)\n}\nfunction select() {\n const instance = embla.value\n if (!instance) return\n const slide = instance.selectedScrollSnap()\n const changed = slide !== selected.value\n selected.value = slide\n if (changed) emit('slide-change', slide)\n}\nfunction previous() {\n embla.value?.scrollPrev()\n emit('previous-slide')\n}\nfunction next() {\n embla.value?.scrollNext()\n emit('next-slide')\n}\nfunction keydown(event: KeyboardEvent) {\n if (!props.withKeyboardEvents) return\n if (event.key === 'ArrowRight') {\n event.preventDefault()\n next()\n }\n if (event.key === 'ArrowLeft') {\n event.preventDefault()\n previous()\n }\n if (event.key === 'Home') {\n event.preventDefault()\n scrollTo(0)\n }\n if (event.key === 'End') {\n event.preventDefault()\n scrollTo((embla.value?.scrollSnapList().length ?? 1) - 1)\n }\n}\nfunction indicatorKeydown(event: KeyboardEvent, index: number) {\n const nextKey = props.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n const previousKey = props.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const parent = (event.currentTarget as HTMLElement).parentElement\n let target: number | null = null\n if (event.key === nextKey) target = getNextIndicatorIndex(index, slidesCount.value)\n if (event.key === previousKey) target = getPreviousIndicatorIndex(index, slidesCount.value)\n if (event.key === 'Home') target = 0\n if (event.key === 'End') target = slidesCount.value - 1\n if (target !== null) {\n event.preventDefault()\n scrollTo(target)\n ;(parent?.children[target] as HTMLElement | undefined)?.focus()\n }\n}\nfunction indicatorAttrs(index: number) {\n return {\n ...getStyles('indicator'),\n role: 'tab',\n 'aria-label': `Go to slide ${index + 1}`,\n 'aria-selected': index === selected.value,\n tabindex: index === selected.value ? 0 : -1,\n 'data-active': index === selected.value || undefined,\n 'data-orientation': props.orientation,\n onClick: () => scrollTo(index),\n onKeydown: (event: KeyboardEvent) => indicatorKeydown(event, index),\n onMousedown: (event: Event) => event.preventDefault(),\n ...props.getIndicatorProps?.(index),\n }\n}\nfunction previousAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Previous slide',\n 'aria-disabled': !canScrollPrev.value,\n 'data-inactive': !canScrollPrev.value || undefined,\n 'data-type': 'previous',\n tabindex: canScrollPrev.value ? 0 : -1,\n ...props.previousControlProps,\n ...getStyles('control', {\n className: props.previousControlProps?.className,\n style: props.previousControlProps?.style,\n }),\n onClick: (event: Event) => {\n previous()\n props.previousControlProps?.onClick?.(event)\n },\n }\n}\nfunction nextAttrs() {\n return {\n 'aria-controls': id.value,\n 'aria-label': 'Next slide',\n 'aria-disabled': !canScrollNext.value,\n 'data-inactive': !canScrollNext.value || undefined,\n 'data-type': 'next',\n tabindex: canScrollNext.value ? 0 : -1,\n ...getStyles('control', {\n className: props.nextControlProps?.className,\n style: props.nextControlProps?.style,\n }),\n ...props.nextControlProps,\n onClick: (event: Event) => {\n next()\n props.nextControlProps?.onClick?.(event)\n },\n }\n}\nconst renderPreviousIcon = () => props.previousControlIcon\nconst renderNextIcon = () => props.nextControlIcon\n\nwatch(\n embla,\n (instance, _previous, onCleanup) => {\n if (!instance) return\n emit('embla-api-ready', instance)\n select()\n slidesCount.value = instance.scrollSnapList().length\n instance.on('select', select)\n onCleanup(() => instance.off('select', select))\n },\n { immediate: true },\n)\nwatch([slotSlideCount, () => props.emblaOptions?.slidesToScroll], ([childrenCount]) => {\n const instance = embla.value\n if (!instance) return\n instance.reInit()\n slidesCount.value = instance.scrollSnapList().length\n selected.value = clamp(selected.value, 0, childrenCount - 1)\n})\nprovideCarouselContext({\n getStyles,\n get orientation() {\n return props.orientation\n },\n} as any)\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ embla, rootElement })\n</script>\n\n<template>\n <CarouselContainerVariables v-if=\"props.type === 'container'\" v-bind=\"variablesProps\" />\n <CarouselVariables v-else v-bind=\"variablesProps\" />\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n role: 'region',\n 'aria-roledescription': 'carousel',\n ...attrs,\n ...getStyles('root', { className: responsiveClassName }),\n }\"\n :id=\"id\"\n :mod=\"[\n { orientation: props.orientation, 'include-gap-in-size': props.includeGapInSize },\n props.mod,\n ]\"\n @keydown.capture=\"keydown\"\n >\n <VisuallyHidden role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ slidesCount > 0 ? `Slide ${selected + 1} of ${slidesCount}` : '' }}\n </VisuallyHidden>\n <div\n v-if=\"props.withControls\"\n v-bind=\"getStyles('controls')\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton v-bind=\"previousAttrs()\">\n <component v-if=\"props.previousControlIcon !== undefined\" :is=\"renderPreviousIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'previous' })}deg)`,\n }\"\n />\n </UnstyledButton>\n <UnstyledButton v-bind=\"nextAttrs()\">\n <component v-if=\"props.nextControlIcon !== undefined\" :is=\"renderNextIcon\" />\n <AccordionChevron\n v-else\n :style=\"{\n transform: `rotate(${getChevronRotation({ dir, orientation: props.orientation, direction: 'next' })}deg)`,\n }\"\n />\n </UnstyledButton>\n </div>\n <div ref=\"emblaNode\" v-bind=\"getStyles('viewport')\" :data-type=\"props.type\">\n <div\n v-bind=\"getStyles('container', { className: responsiveClassName })\"\n :data-orientation=\"props.orientation\"\n >\n <component :is=\"renderSlides\" />\n </div>\n </div>\n <div\n v-if=\"props.withIndicators\"\n v-bind=\"getStyles('indicators')\"\n role=\"tablist\"\n aria-label=\"Slides\"\n :data-orientation=\"props.orientation\"\n >\n <UnstyledButton\n v-for=\"index in slidesCount\"\n :key=\"index - 1\"\n v-bind=\"indicatorAttrs(index - 1)\"\n />\n </div>\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","<script setup lang=\"ts\">\nimport { ref, useAttrs } from 'vue'\nimport { assignRef } from '@mantine-vue/hooks'\nimport { Box } from '@mantine-vue/core'\nimport { useCarouselContext } from '../../Carousel.context'\nimport type { CarouselSlideProps } from './CarouselSlide.types'\n\ndefineOptions({ name: 'CarouselSlide', inheritAttrs: false })\nconst props = defineProps<CarouselSlideProps>()\nconst attrs = useAttrs()\nconst context = useCarouselContext()\n\nconst rootElement = ref<Element | null>(null)\n\nconst setRootRef = (node: Element | null) => {\n rootElement.value = node\n assignRef(props.rootRef, node)\n}\n\ndefineExpose({ rootElement })\n</script>\n\n<template>\n <Box\n :rootRef=\"setRootRef\"\n v-bind=\"{\n ...attrs,\n ...context.getStyles('slide', {\n className: attrs.class,\n style: attrs.style,\n classNames: props.classNames,\n styles: props.styles,\n }),\n }\"\n :mod=\"[{ orientation: context.orientation }, props.mod]\"\n role=\"group\"\n aria-roledescription=\"slide\"\n aria-label=\"Carousel slide\"\n >\n <slot />\n </Box>\n</template>\n","import { factory } from '@mantine-vue/core'\nimport CarouselSlideComponent from './CarouselSlide.vue'\nimport type { CarouselSlideFactory } from './CarouselSlide.types'\nimport classes from '../../Carousel.module.css'\nexport const CarouselSlide = factory<CarouselSlideFactory>(CarouselSlideComponent, { classes })\nexport type {\n CarouselSlideFactory,\n CarouselSlideProps,\n CarouselSlideStylesNames,\n} from './CarouselSlide.types'\n","import { factory } from '@mantine-vue/core'\nimport CarouselComponent, { varsResolver } from './Carousel.vue'\nimport type { CarouselFactory } from './Carousel.types'\nimport { CarouselSlide } from '../CarouselSlide'\nimport classes from '../../Carousel.module.css'\nexport const Carousel = factory<CarouselFactory>(CarouselComponent, {\n classes,\n varsResolver,\n Slide: CarouselSlide,\n})\nexport type {\n CarouselCssVariables,\n CarouselEmits,\n CarouselFactory,\n CarouselProps,\n CarouselStylesNames,\n} from './Carousel.types'\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine-vue/carousel",
3
- "version": "3.5.0",
3
+ "version": "3.6.0",
4
4
  "description": "Embla based carousel, Vue equivalent to @mantine/carousel",
5
5
  "license": "MIT",
6
6
  "files": [
@@ -39,8 +39,8 @@
39
39
  "vue": "^3.5.0"
40
40
  },
41
41
  "peerDependencies": {
42
- "@mantine-vue/core": "3.5.0",
43
- "@mantine-vue/hooks": "3.5.0",
42
+ "@mantine-vue/core": "3.6.0",
43
+ "@mantine-vue/hooks": "3.6.0",
44
44
  "embla-carousel": ">=8.0.0",
45
45
  "embla-carousel-vue": ">=8.0.0",
46
46
  "vue": "^3.5.0"