@winkintel/bootstrap-svelte 0.0.1

package/dist/Carousel/carousel.svelte.js

@@ -0,0 +1,551 @@
+import { Context } from '../common/index.js';
+import { tick } from 'svelte';
+/**
+ * Manages the state for the Carousel root component.
+ * Handles the tracking of active slide, autoplay behavior, and transition control.
+ */
+export class CarouselRootState {
+    props;
+    // Public static constants...
+    static ANIMATION_DEFAULT = 'none';
+    static INTERNAL_DEFAULT = 5000;
+    static PAUSE_DEFAULT = 'hover';
+    static RIDE_DEFAULT = false;
+    static TRANSITION_DURATION_DEFAULT = 600;
+    // Private state properties...
+    #activeItemIndex = $state(0); // Zero-based index for active item
+    #animation = $state(CarouselRootState.ANIMATION_DEFAULT);
+    #hasUserInteraction = $state(false); // Used to delay autoplay until user interacts when ride=true
+    #indicators = [];
+    #interval = $state(0);
+    #timeoutId = $state(null);
+    #isAnimating = $state(false);
+    #isHovered = $state(false);
+    #isPaused = $state(true);
+    #isPointerDown = $state(false);
+    #items = [];
+    #nextActiveItemIndex = $state(-1); // Tracks the index of the slide that will become active (-1 when no transition is pending)
+    #pauseInteraction = $state(CarouselRootState.PAUSE_DEFAULT);
+    #pointerStartX = $state(0);
+    #ride = $state(false);
+    #transitionDuration = $state(CarouselRootState.TRANSITION_DURATION_DEFAULT);
+    #visibilityListener = null;
+    // Public readonly properties...
+    isSlideAnimation = $derived.by(() => this.animation === 'slide');
+    isFadeAnimation = $derived.by(() => this.animation === 'fade');
+    isCrossfadeAnimation = $derived.by(() => this.animation === 'crossfade');
+    isNoneAnimation = $derived.by(() => this.animation === 'none');
+    constructor(props) {
+        this.props = props;
+        this.#animation = this.props.animation || CarouselRootState.ANIMATION_DEFAULT;
+        this.#interval = this.props.interval || CarouselRootState.INTERNAL_DEFAULT;
+        this.#pauseInteraction = this.props.pause !== undefined ? this.props.pause : CarouselRootState.PAUSE_DEFAULT;
+        this.#ride = this.props.ride || CarouselRootState.RIDE_DEFAULT;
+        this.#transitionDuration = this.props.transitionDuration || CarouselRootState.TRANSITION_DURATION_DEFAULT;
+        this.registerItem = this.registerItem.bind(this);
+        this.isItemActive = this.isItemActive.bind(this);
+        this.next = this.next.bind(this);
+        this.prev = this.prev.bind(this);
+        this.pause = this.pause.bind(this);
+        this.cycle = this.cycle.bind(this);
+        this.to = this.to.bind(this);
+        this.handleMouseEnter = this.handleMouseEnter.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handlePointerDown = this.handlePointerDown.bind(this);
+        this.handlePointerMove = this.handlePointerMove.bind(this);
+        this.handlePointerUp = this.handlePointerUp.bind(this);
+        // Setup Page Visibility API listener
+        if (typeof document !== 'undefined' && 'hidden' in document) {
+            this.#visibilityListener = () => {
+                if (document.hidden) {
+                    this.pause();
+                }
+                else if (this.shouldCycle() && !this.#isHovered) {
+                    this.cycle();
+                }
+            };
+            document.addEventListener('visibilitychange', this.#visibilityListener);
+        }
+        // Start autoplay immediately if ride='carousel', otherwise wait for user interaction
+        if (this.#ride === 'carousel' && !this.#timeoutId) {
+            this.cycle();
+        }
+    }
+    // Determines the appropriate interval duration, prioritizing the active item's specific interval
+    getCurrentItemInterval() {
+        if (this.#items.length === 0) {
+            return this.#interval;
+        }
+        const activeItem = this.#items[this.#activeItemIndex];
+        if (activeItem && activeItem.interval) {
+            return activeItem.interval;
+        }
+        return this.#interval;
+    }
+    // Determines if the carousel should auto-cycle based on configuration and user interaction state
+    shouldCycle() {
+        return this.#ride === 'carousel' || (this.#ride === true && this.#hasUserInteraction);
+    }
+    get animation() {
+        return this.#animation;
+    }
+    set animation(animation) {
+        this.#animation = animation;
+    }
+    get pauseInteraction() {
+        return this.#pauseInteraction;
+    }
+    set pauseInteraction(value) {
+        this.#pauseInteraction = value;
+    }
+    get interval() {
+        return this.#interval;
+    }
+    set interval(interval) {
+        this.#interval = interval;
+        if (this.shouldCycle()) {
+            this.cycle();
+        }
+    }
+    get ride() {
+        return this.#ride;
+    }
+    set ride(ride) {
+        this.#ride = ride;
+        if (this.shouldCycle()) {
+            this.cycle();
+        }
+        else {
+            this.pause();
+        }
+    }
+    get transitionDuration() {
+        return this.#transitionDuration;
+    }
+    set transitionDuration(duration) {
+        this.#transitionDuration = duration;
+    }
+    get isAnimating() {
+        return this.#isAnimating;
+    }
+    registerItem(item) {
+        this.#items.push(item);
+        // Activate the first item by default if none is active
+        if (item.props.isActive && !this.#isAnimating) {
+            this.#activeItemIndex = item.index;
+        }
+    }
+    registerIndicator(indicator) {
+        this.#indicators.push(indicator);
+    }
+    isItemActive(index) {
+        return this.#activeItemIndex === index;
+    }
+    getActiveIndex() {
+        return this.#activeItemIndex;
+    }
+    isNextItemActive(index) {
+        return this.#nextActiveItemIndex === index;
+    }
+    getNextActiveIndex() {
+        return this.#nextActiveItemIndex;
+    }
+    getItemCount() {
+        return this.#items.length;
+    }
+    getIndicatorCount() {
+        return this.#indicators.length;
+    }
+    next() {
+        if (this.#isAnimating) {
+            return;
+        }
+        const nextIndex = (this.#activeItemIndex + 1) % this.#items.length;
+        this.to(nextIndex, 'next');
+        // Mark that user interaction has occurred
+        this.#hasUserInteraction = true;
+        // Start cycling if ride is true and this is first interaction
+        if (this.#ride === true && !this.#timeoutId) {
+            this.cycle();
+        }
+    }
+    prev() {
+        if (this.#isAnimating) {
+            return;
+        }
+        const prevIndex = (this.#activeItemIndex - 1 + this.#items.length) % this.#items.length;
+        this.to(prevIndex, 'prev');
+        // Mark that user interaction has occurred
+        this.#hasUserInteraction = true;
+        // Start cycling if ride is true and this is first interaction
+        if (this.#ride === true && !this.#timeoutId) {
+            this.cycle();
+        }
+    }
+    /**
+     * Navigates to the slide at the specified index with the given transition direction.
+     * Handles animation states and timing for different animation types.
+     */
+    to(index, transitionDirection) {
+        if (index === this.#activeItemIndex || this.#isAnimating) {
+            console.warn(`[Carousel] Already on item ${this.#activeItemIndex}, ignoring to(${index})`);
+            return;
+        }
+        if (this.#animation !== 'slide' && this.#animation !== 'fade' && this.#animation !== 'crossfade' && this.#animation !== 'none') {
+            console.warn(`[Carousel] Unsupported animation type: ${this.#animation}`);
+            return;
+        }
+        const isNext = transitionDirection === 'next';
+        const isPrev = transitionDirection === 'prev';
+        const toItem = this.#items[index];
+        const fromItem = this.#items[this.#activeItemIndex];
+        if (toItem === fromItem) {
+            console.warn(`[Carousel] Attempting to transition to the same item ${index}, ignoring.`);
+            return;
+        }
+        if (!toItem) {
+            console.warn(`[Carousel] Item ${index} does not exist, ignoring transition.`);
+            return;
+        }
+        if (!fromItem) {
+            console.warn(`[Carousel] Active item ${this.#activeItemIndex} does not exist, ignoring transition.`);
+            return;
+        }
+        this.#isAnimating = true;
+        this.#nextActiveItemIndex = index;
+        // For slide and crossfade animations, we set directional classes and clean up after transition
+        if (this.#animation === 'slide' || this.#animation === 'crossfade') {
+            if (isNext) {
+                fromItem.direction = 'start';
+                toItem.direction = 'start';
+                toItem.order = 'next';
+            }
+            if (isPrev) {
+                fromItem.direction = 'end';
+                toItem.direction = 'end';
+                toItem.order = 'prev';
+            }
+            setTimeout(() => {
+                fromItem.order = undefined;
+                fromItem.direction = undefined;
+                toItem.order = undefined;
+                toItem.direction = undefined;
+                this.#activeItemIndex = index;
+                this.#nextActiveItemIndex = -1;
+                this.#isAnimating = false;
+                // Restart cycle with new slide's interval if cycling
+                if (this.shouldCycle() && !this.#isPaused) {
+                    this.cycle();
+                }
+            }, this.#transitionDuration);
+        }
+        // For fade animation, we immediately change the active index but clean up classes after transition
+        if (this.#animation === 'fade') {
+            if (isNext) {
+                toItem.order = 'next';
+            }
+            if (isPrev) {
+                toItem.order = 'prev';
+            }
+            setTimeout(() => {
+                toItem.order = undefined;
+                this.#isAnimating = false;
+            }, this.#transitionDuration / 2);
+            this.#activeItemIndex = index;
+            this.#nextActiveItemIndex = -1;
+            // Restart cycle with new slide's interval if cycling
+            if (this.shouldCycle() && !this.#isPaused) {
+                this.cycle();
+            }
+        }
+        // For no animation, we simply update the active index on the next tick
+        if (this.#animation === 'none') {
+            tick().then(() => {
+                this.#activeItemIndex = index;
+                this.#nextActiveItemIndex = -1;
+                this.#isAnimating = false;
+                // Restart cycle with new slide's interval if cycling
+                if (this.shouldCycle() && !this.#isPaused) {
+                    this.cycle();
+                }
+            });
+        }
+    }
+    /**
+     * Starts or restarts the autoplay cycle with the appropriate interval.
+     * Uses the active slide's specific interval if available.
+     */
+    cycle() {
+        if (typeof window === 'undefined') {
+            console.warn('[Carousel] Cycle called in non-browser environment, ignoring.');
+            return;
+        }
+        // Don't start cycling if we're hovered and pause='hover'
+        if (this.#pauseInteraction === 'hover' && this.#isHovered) {
+            return;
+        }
+        // Don't start cycling if the document is hidden
+        if (typeof document !== 'undefined' && 'hidden' in document && document.hidden) {
+            return;
+        }
+        // Clear any existing timeout
+        this.pause();
+        this.#isPaused = false;
+        // Use the current active slide's interval or the default
+        const currentInterval = this.getCurrentItemInterval();
+        // Schedule the next slide using setTimeout
+        this.#timeoutId = window.setTimeout(() => {
+            if (!this.#isPaused && !this.#isAnimating) {
+                this.next();
+            }
+            else if (!this.#isPaused) {
+                // If we're animating, try again after a short delay
+                this.cycle();
+            }
+        }, currentInterval);
+    }
+    pause() {
+        if (typeof window === 'undefined') {
+            console.warn('[Carousel] Pause called in non-browser environment, ignoring.');
+            return;
+        }
+        if (this.#timeoutId) {
+            window.clearTimeout(this.#timeoutId);
+            this.#timeoutId = null;
+        }
+        this.#isPaused = true;
+    }
+    handleMouseEnter() {
+        this.#isHovered = true;
+        if (this.#pauseInteraction === 'hover' && this.shouldCycle()) {
+            this.pause();
+        }
+    }
+    handleMouseLeave() {
+        this.#isHovered = false;
+        if (this.shouldCycle() && this.#pauseInteraction === 'hover') {
+            this.cycle();
+        }
+    }
+    handlePointerDown(pointerEvent) {
+        // Only track primary touch pointer
+        if (pointerEvent.pointerType === 'touch' && pointerEvent.isPrimary) {
+            this.#isPointerDown = true;
+            this.#pointerStartX = pointerEvent.clientX;
+            // Pause autoplay during touch interaction
+            if (this.shouldCycle()) {
+                this.pause();
+            }
+            // Mark that user interaction has occurred
+            this.#hasUserInteraction = true;
+        }
+    }
+    handlePointerMove(pointerEvent) {
+        // Skip if not tracking a touch
+        if (!this.#isPointerDown || pointerEvent.pointerType !== 'touch' || !pointerEvent.isPrimary) {
+            return;
+        }
+        // No need to do anything here, just track in pointerup
+    }
+    /**
+     * Handles touch swipe gestures for mobile carousel navigation.
+     * Determines swipe direction based on horizontal movement distance.
+     */
+    handlePointerUp(pointerEvent) {
+        if (!this.#isPointerDown || pointerEvent.pointerType !== 'touch' || !pointerEvent.isPrimary) {
+            return;
+        }
+        const deltaX = pointerEvent.clientX - this.#pointerStartX;
+        // Consider it a swipe if movement exceeds threshold (50px)
+        if (Math.abs(deltaX) > 50) {
+            if (deltaX > 0) {
+                this.prev(); // Swipe right means go to previous
+            }
+            else {
+                this.next(); // Swipe left means go to next
+            }
+        }
+        this.#isPointerDown = false;
+        // Resume cycling after touch with a delay to prevent immediate transition
+        if (this.shouldCycle()) {
+            setTimeout(() => {
+                this.cycle();
+            }, 1000);
+        }
+    }
+    dispose() {
+        if (this.#timeoutId) {
+            window.clearTimeout(this.#timeoutId);
+            this.#timeoutId = null;
+        }
+        // Remove visibility change listener
+        if (typeof document !== 'undefined' && this.#visibilityListener) {
+            document.removeEventListener('visibilitychange', this.#visibilityListener);
+            this.#visibilityListener = null;
+        }
+    }
+}
+/**
+ * Manages the state for an individual Carousel item.
+ * Tracks active state and provides methods to handle transitions.
+ */
+export class CarouselItemState {
+    props;
+    root;
+    #order = $state(undefined);
+    #direction = $state(undefined);
+    index;
+    interval;
+    isActive = $derived.by(() => this.root.isItemActive(this.index));
+    isNext = $derived(this.#order === 'next');
+    isPrev = $derived(this.#order === 'prev');
+    // Used to determine whether this item should be in the DOM (active or transitioning)
+    isActiveOrWillBeActive = $derived.by(() => this.isActive || this.isNext || this.isPrev);
+    isEnd = $derived(this.#direction === 'end');
+    isStart = $derived(this.#direction === 'start');
+    isSlideAnimation = $derived.by(() => this.root.animation === 'slide');
+    isFadeAnimation = $derived.by(() => this.root.animation === 'fade');
+    isCrossfadeAnimation = $derived.by(() => this.root.animation === 'crossfade');
+    isNoneAnimation = $derived.by(() => this.root.animation === 'none');
+    // These derived values determine which animation classes/behavior to apply
+    doSlideItem = $derived.by(() => this.isSlideAnimation && this.isActiveOrWillBeActive);
+    doFadeItem = $derived.by(() => this.isFadeAnimation && this.isActiveOrWillBeActive);
+    doCrossfadeItem = $derived.by(() => this.isCrossfadeAnimation && this.isActiveOrWillBeActive);
+    doShowImmediatelyItem = $derived.by(() => this.isNoneAnimation && this.isActiveOrWillBeActive);
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.index = this.root.getItemCount();
+        this.interval = this.props.interval || 5000;
+    }
+    get order() {
+        return this.#order;
+    }
+    set order(order) {
+        this.#order = order;
+    }
+    get direction() {
+        return this.#direction;
+    }
+    set direction(direction) {
+        this.#direction = direction;
+    }
+}
+/**
+ * Manages the state for Carousel controls.
+ * Handles previous actions and target identification.
+ */
+export class CarouselControlPrevState {
+    props;
+    root;
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick(event) {
+        event.preventDefault();
+        this.root.prev();
+    }
+}
+/**
+ * Manages the state for Carousel controls.
+ * Handles next actions and target identification.
+ */
+export class CarouselControlNextState {
+    props;
+    root;
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick(event) {
+        event.preventDefault();
+        this.root.next();
+    }
+}
+/**
+ * Manages the state for Carousel indicator buttons.
+ * Tracks active state and provides methods to handle clicks.
+ */
+export class CarouselIndicatorButtonState {
+    props;
+    root;
+    isActive = $derived.by(() => this.root.isItemActive(this.index) && !this.root.isAnimating);
+    isNextActive = $derived.by(() => this.root.isNextItemActive(this.index));
+    index;
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        this.index = this.root.getIndicatorCount();
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick(event) {
+        event.preventDefault();
+        const order = this.index > this.root.getActiveIndex() ? 'next' : 'prev';
+        this.root.to(this.index, order);
+    }
+}
+const CarouselRootContext = new Context('carousel-root');
+/**
+ * Creates and initializes the Carousel root state.
+ * This function is used to set up the context for the Carousel component.
+ * @param props - The props for the Carousel root component.
+ * @returns The created CarouselRootState instance.
+ */
+export function initCarouselRootState(props) {
+    const rootState = new CarouselRootState(props);
+    return CarouselRootContext.set(rootState);
+}
+/**
+ * Creates and initializes the Carousel item state.
+ * This function is used to set up the state for a Carousel item.
+ * @param props - The props for the Carousel item.
+ * @param index - The index of the item in the carousel.
+ * @returns The created CarouselItemState instance.
+ */
+export function initCarouselItemState(props) {
+    if (!CarouselRootContext.exists()) {
+        throw new Error('Carousel.Item requires Carousel.Root context. Please ensure Carousel.Root is initialized before Carousel.Item.');
+    }
+    const rootState = CarouselRootContext.get();
+    const itemState = new CarouselItemState(props, rootState);
+    rootState.registerItem(itemState);
+    return itemState;
+}
+/**
+ * Creates and initializes the Carousel control state.
+ * This function is used to set up the state for a Carousel control button.
+ * @param props - The props for the Carousel control.
+ * @returns The created CarouselControlState instance.
+ */
+export function initCarouselControlPrevState(props) {
+    if (!CarouselRootContext.exists()) {
+        throw new Error('Carousel.Control requires Carousel.Root context. Please ensure Carousel.Root is initialized before Carousel.Control.');
+    }
+    const rootState = CarouselRootContext.get();
+    return new CarouselControlPrevState(props, rootState);
+}
+export function initCarouselControlNextState(props) {
+    if (!CarouselRootContext.exists()) {
+        throw new Error('Carousel.Control requires Carousel.Root context. Please ensure Carousel.Root is initialized before Carousel.Control.');
+    }
+    const rootState = CarouselRootContext.get();
+    return new CarouselControlNextState(props, rootState);
+}
+/**
+ * Creates and initializes the Carousel indicator button state.
+ * This function is used to set up the state for a Carousel indicator button.
+ * @param props - The props for the Carousel indicator button.
+ * @returns The created CarouselIndicatorButtonState instance.
+ */
+export function initCarouselIndicatorButtonState(props) {
+    if (!CarouselRootContext.exists()) {
+        throw new Error('Carousel.IndicatorButton requires Carousel.Root context. Please ensure Carousel.Root is initialized before Carousel.IndicatorButton.');
+    }
+    const rootState = CarouselRootContext.get();
+    const indicatorState = new CarouselIndicatorButtonState(props, rootState);
+    rootState.registerIndicator(indicatorState);
+    return indicatorState;
+}

package/dist/Carousel/composition.d.ts

@@ -0,0 +1,9 @@
+export { default as Caption } from './carousel-caption.svelte';
+export { default as ControlNext } from './carousel-control-next.svelte';
+export { default as ControlPrev } from './carousel-control-prev.svelte';
+export { default as IndicatorButton } from './carousel-indicator-button.svelte';
+export { default as Indicators } from './carousel-indicators.svelte';
+export { default as Inner } from './carousel-inner.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as Root } from './carousel.svelte';
+export type { CarouselCaptionProps as CaptionProps, CarouselControlProps as ControlProps, CarouselIndicatorButtonProps as IndicatorButtonProps, CarouselIndicatorsProps as IndicatorsProps, CarouselInnerProps as InnerProps, CarouselItemProps as ItemProps, CarouselRootProps as RootProps } from './types.js';

package/dist/Carousel/composition.js

@@ -0,0 +1,8 @@
+export { default as Caption } from './carousel-caption.svelte';
+export { default as ControlNext } from './carousel-control-next.svelte';
+export { default as ControlPrev } from './carousel-control-prev.svelte';
+export { default as IndicatorButton } from './carousel-indicator-button.svelte';
+export { default as Indicators } from './carousel-indicators.svelte';
+export { default as Inner } from './carousel-inner.svelte';
+export { default as Item } from './carousel-item.svelte';
+export { default as Root } from './carousel.svelte';

package/dist/Carousel/index.d.ts

@@ -0,0 +1 @@
+export * as Carousel from './composition.js';

package/dist/Carousel/index.js

@@ -0,0 +1 @@
+export * as Carousel from './composition.js';

package/dist/Carousel/types.d.ts

@@ -0,0 +1,74 @@
+import type { ButtonElement, DivElement } from '../common/types.js';
+/**
+ * Controls the transition effect between carousel items
+ * - 'none': No animation (immediate change)
+ * - 'slide': Standard horizontal sliding transition
+ * - 'fade': Opacity transition without horizontal movement
+ * - 'crossfade': Cross-dissolve between slides
+ */
+export type CarouselAnimation = 'none' | 'slide' | 'fade' | 'crossfade';
+/**
+ * Denotes the relative position of a carousel item during transitions
+ */
+export type CarouselItemOrder = 'next' | 'prev';
+/**
+ * Specifies the direction of movement for carousel transitions
+ * - 'start': Move toward the start (right-to-left in LTR, left-to-right in RTL)
+ * - 'end': Move toward the end (left-to-right in LTR, right-to-left in RTL)
+ */
+export type CarouselItemDirection = 'start' | 'end';
+/**
+ * Controls auto-cycling behavior
+ * - true: Enable auto-cycling with default settings
+ * - false: Disable auto-cycling
+ * - 'carousel': Enable auto-cycling with Bootstrap's standard behavior
+ */
+export type CarouselRide = boolean | 'carousel';
+/**
+ * Determines what pauses the carousel's cycling
+ * - 'hover': Pause when mouse hovers over carousel
+ * - false: Don't pause on hover
+ */
+export type CarouselPause = 'hover' | false;
+/**
+ * Root carousel container properties
+ * Controls overall carousel behavior including animation type and timing
+ */
+export type CarouselRootProps = DivElement & {
+    animation?: CarouselAnimation;
+    interval?: number;
+    pause?: CarouselPause;
+    ride?: CarouselRide;
+    transitionDuration?: number;
+};
+/**
+ * Container for carousel items that manages the sliding surface
+ */
+export type CarouselInnerProps = DivElement;
+/**
+ * Individual carousel slide properties
+ */
+export type CarouselItemProps = DivElement & {
+    isActive?: boolean;
+    interval?: number;
+    onSlide?: EventListener;
+    onSlid?: EventListener;
+};
+/**
+ * Container for optional caption text within carousel items
+ */
+export type CarouselCaptionProps = DivElement;
+/**
+ * Container for the indicator dots/buttons showing current position
+ */
+export type CarouselIndicatorsProps = DivElement;
+/**
+ * Individual indicator button properties
+ */
+export type CarouselIndicatorButtonProps = ButtonElement & {
+    ariaLabel?: string;
+};
+/**
+ * Properties for previous/next navigation controls
+ */
+export type CarouselControlProps = ButtonElement;

package/dist/Carousel/types.js

@@ -0,0 +1 @@
+export {};

package/dist/CloseButton/close-button.svelte

@@ -0,0 +1,32 @@
+<!--
+@component
+## CloseButton
+A button component that provides a standardized close button functionality.
+Typically used in alerts, modals, and other dismissible components.
+
+@example
+```svelte
+<CloseButton />
+```
+
+#### Basic close button
+```svelte
+<CloseButton />
+```
+
+#### Disabled state
+```svelte
+<CloseButton disabled={true} />
+```
+### Props
+- `ariaLabel` (string): Optional. Customizes the aria-label attribute for accessibility (defaults to "Close")
+- `class` (string): Optional. Additional CSS classes to apply to the close button
+- `disabled` (boolean): Optional. Disables the close button when set to true
+- `elementRef` (HTMLElement): Optional. Reference to the button DOM element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { ariaLabel = 'Close', class: classValues, disabled = false, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('btn-close', classValues));
+</script>
+
+<button aria-label={ariaLabel} bind:this={elementRef} class={classes} {disabled} type="button" {...restOfProps}></button>