@winkintel/bootstrap-svelte 0.0.1

package/dist/ButtonGroup/types.d.ts

@@ -0,0 +1,21 @@
+import type { DivElement } from '../common/types.js';
+import type { ButtonColorVariant } from '../Button/types.js';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type ButtonGroupSize = 'sm' | 'lg' | '';
+export type ButtonCheckType = 'checkbox' | 'radio';
+export type ButtonCheckRootProps = Omit<HTMLInputAttributes, 'class' | 'size' | 'type'> & {
+    class?: string;
+    colorVariant?: ButtonColorVariant;
+    elementRef?: HTMLInputElement | null;
+    labelClass?: string;
+    labelElementRef?: HTMLLabelElement | null;
+    type?: ButtonCheckType;
+};
+export type ButtonGroupRootProps = DivElement & {
+    ariaLabel?: string;
+    isVertical?: boolean;
+    size?: ButtonGroupSize;
+};
+export type ButtonToolbarRootProps = DivElement & {
+    ariaLabel?: string;
+};

package/dist/ButtonGroup/types.js

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

package/dist/Card/card-body.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-body-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-body', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card-body.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardBody: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;

package/dist/Card/card-footer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-footer-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-footer', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card-footer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardFooter: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/Card/card-group.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-group-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-group', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card-group.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardGroup: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardGroup = ReturnType<typeof CardGroup>;
+export default CardGroup;

package/dist/Card/card-header.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-header-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-header', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card-header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardHeader: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/Card/card-img-overlay.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-img-overlay-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-img-overlay', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card-img-overlay.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardImgOverlay: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardImgOverlay = ReturnType<typeof CardImgOverlay>;
+export default CardImgOverlay;

package/dist/Card/card-img.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { class: classValues, elementRef = $bindable(null), id = `card-img-${uid}`, position, src = '', alt = '', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx({
+    'card-img': !position,
+    'card-img-top': position === 'top',
+    'card-img-bottom': position === 'bottom'
+}, classValues));
+</script>
+
+<img bind:this={elementRef} class={classes} {id} {src} {alt} {...restOfProps} />

package/dist/Card/card-img.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Card } from './index.js';
+declare const CardImg: import("svelte").Component<Card.ImgProps, {}, "elementRef">;
+type CardImg = ReturnType<typeof CardImg>;
+export default CardImg;

package/dist/Card/card-link.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), href = '#!', id = `card-link-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-link', classValues));
+</script>
+
+<a bind:this={elementRef} class={classes} {href} {id} {...restOfProps}>
+    {@render children?.()}
+</a>

package/dist/Card/card-link.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Card } from './index.js';
+declare const CardLink: import("svelte").Component<Card.LinkProps, {}, "elementRef">;
+type CardLink = ReturnType<typeof CardLink>;
+export default CardLink;

package/dist/Card/card-subtitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-subtitle-${uid}`, level = 6, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('card-subtitle', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Card/card-subtitle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Card } from './index.js';
+declare const CardSubtitle: import("svelte").Component<Card.SubtitleProps, {}, "elementRef">;
+type CardSubtitle = ReturnType<typeof CardSubtitle>;
+export default CardSubtitle;

package/dist/Card/card-text.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-text-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card-text', classValues));
+</script>
+
+<p bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</p>

package/dist/Card/card-text.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const CardText: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CardText = ReturnType<typeof CardText>;
+export default CardText;

package/dist/Card/card-title.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-title-${uid}`, level = 5, ...restOfProps } = $props();
+let elementType = $derived(`h${level}`);
+let classes = $derived(uniqueClsx('card-title', classValues));
+</script>
+
+<svelte:element this={elementType} bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Card/card-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Card } from './index.js';
+declare const CardTitle: import("svelte").Component<Card.TitleProps, {}, "elementRef">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/Card/card.svelte

@@ -0,0 +1,45 @@
+<!--
+@component
+## Card
+A flexible and extensible content container with multiple variants and options.
+
+@example
+```svelte
+<Card.Root>
+    <Card.Body>
+        <Card.Title>Card Title</Card.Title>
+        <Card.Subtitle>Card Subtitle</Card.Subtitle>
+        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
+        <Card.Link href="#!">Card Link</Card.Link>
+        <Card.Link href="#!">Another Link</Card.Link>
+    </Card.Body>
+</Card.Root>
+```
+
+@example
+```svelte
+<Card.Root>
+    <Card.Img src="https://placehold.co/300x180/000000/FFF" alt="Card image" />
+    <Card.ImgOverlay>
+        <Card.Title>Card title</Card.Title>
+        <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
+        <Card.Text><small>Last updated 3 mins ago</small></Card.Text>
+    </Card.ImgOverlay>
+</Card.Root>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the card.
+- `elementRef` (HTMLElement): Optional. Reference to the card DOM element.
+- `id` (string): Optional. Unique ID for the card element. Defaults to `card-{uid}`.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the card element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `card-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('card', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Card/card.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Card } from './index.js';
+/**
+ * ## Card
+ * A flexible and extensible content container with multiple variants and options.
+ *
+ * @example
+ * ```svelte
+ * <Card.Root>
+ * <Card.Body>
+ *     <Card.Title>Card Title</Card.Title>
+ *     <Card.Subtitle>Card Subtitle</Card.Subtitle>
+ *     <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
+ *     <Card.Link href="#!">Card Link</Card.Link>
+ *     <Card.Link href="#!">Another Link</Card.Link>
+ * </Card.Body>
+ * </Card.Root>
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Card.Root>
+ * <Card.Img src="https://placehold.co/300x180/000000/FFF" alt="Card image" />
+ * <Card.ImgOverlay>
+ *     <Card.Title>Card title</Card.Title>
+ *     <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
+ *     <Card.Text><small>Last updated 3 mins ago</small></Card.Text>
+ * </Card.ImgOverlay>
+ * </Card.Root>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the card.
+ * - `elementRef` (HTMLElement): Optional. Reference to the card DOM element.
+ * - `id` (string): Optional. Unique ID for the card element. Defaults to `card-{uid}`.
+ */
+declare const Card: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/Card/composition.d.ts

@@ -0,0 +1,12 @@
+export { default as Body } from './card-body.svelte';
+export { default as Footer } from './card-footer.svelte';
+export { default as Group } from './card-group.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as ImgOverlay } from './card-img-overlay.svelte';
+export { default as Img } from './card-img.svelte';
+export { default as Link } from './card-link.svelte';
+export { default as Subtitle } from './card-subtitle.svelte';
+export { default as Text } from './card-text.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Root } from './card.svelte';
+export type { CardBodyProps as BodyProps, CardFooterProps as FooterProps, CardGroupProps as GroupProps, CardHeaderProps as HeaderProps, CardImgOverlayProps as ImgOverlayProps, CardImgProps as ImgProps, CardLinkProps as LinkProps, CardRootProps as RootProps, CardSubtitleProps as SubtitleProps, CardTextProps as TextProps, CardTitleProps as TitleProps } from './types.js';

package/dist/Card/composition.js

@@ -0,0 +1,11 @@
+export { default as Body } from './card-body.svelte';
+export { default as Footer } from './card-footer.svelte';
+export { default as Group } from './card-group.svelte';
+export { default as Header } from './card-header.svelte';
+export { default as ImgOverlay } from './card-img-overlay.svelte';
+export { default as Img } from './card-img.svelte';
+export { default as Link } from './card-link.svelte';
+export { default as Subtitle } from './card-subtitle.svelte';
+export { default as Text } from './card-text.svelte';
+export { default as Title } from './card-title.svelte';
+export { default as Root } from './card.svelte';

package/dist/Card/index.d.ts

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

package/dist/Card/index.js

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

package/dist/Card/types.d.ts

@@ -0,0 +1,22 @@
+import type { AnchorElement, DivElement, HeadingElement, HeadingLevels, ImgElement } from '../common/types.js';
+export type CardRootProps = DivElement;
+export type CardGroupProps = DivElement;
+export type CardHeaderProps = DivElement;
+export type CardBodyProps = DivElement;
+export type CardFooterProps = DivElement;
+export type CardImgOverlayProps = DivElement;
+export type CardImgProps = ImgElement & {
+    alt?: string;
+    src?: string;
+    position?: 'top' | 'bottom';
+};
+export type CardTitleProps = HeadingElement & {
+    level?: HeadingLevels;
+};
+export type CardSubtitleProps = HeadingElement & {
+    level?: HeadingLevels;
+};
+export type CardTextProps = DivElement;
+export type CardLinkProps = AnchorElement & {
+    href?: string;
+};

package/dist/Card/types.js

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

package/dist/Carousel/carousel-caption.svelte

@@ -0,0 +1,30 @@
+<!--
+@component
+## Carousel.Caption
+Adds captions to carousel slides. Should be placed inside a Carousel.Item.
+
+@example
+```svelte
+<Carousel.Item isActive={true}>
+    <img src="..." class="d-block w-100" alt="...">
+    <Carousel.Caption>
+        <h5>First slide label</h5>
+        <p>Some representative placeholder content for the first slide.</p>
+    </Carousel.Caption>
+</Carousel.Item>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique identifier for the component.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the carousel-caption element, in case one is not provided
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `carousel-caption-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('carousel-caption', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Carousel/carousel-caption.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ## Carousel.Caption
+ * Adds captions to carousel slides. Should be placed inside a Carousel.Item.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Item isActive={true}>
+ * <img src="..." class="d-block w-100" alt="...">
+ * <Carousel.Caption>
+ *     <h5>First slide label</h5>
+ *     <p>Some representative placeholder content for the first slide.</p>
+ * </Carousel.Caption>
+ * </Carousel.Item>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique identifier for the component.
+ */
+declare const CarouselCaption: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CarouselCaption = ReturnType<typeof CarouselCaption>;
+export default CarouselCaption;

package/dist/Carousel/carousel-control-next.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+## Carousel.ControlNext
+Next slide control button. Should be placed inside a Carousel.Root.
+
+@example
+```svelte
+<Carousel.Root id="myCarousel">
+    <Carousel.Inner>
+        Slides...
+    </Carousel.Inner>
+    <Carousel.ControlPrev />
+    <Carousel.ControlNext />
+</Carousel.Root>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { CarouselControlNextState, initCarouselControlNextState } from './carousel.svelte.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+// Initialize control state (true means next control)
+const controlState = initCarouselControlNextState({});
+let classes = $derived(uniqueClsx('carousel-control-next', classValues));
+const handleClick = (event) => {
+    controlState.onclick(event);
+};
+</script>
+
+<button bind:this={elementRef} class={classes} onclick={handleClick} type="button" {...restOfProps}>
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+    {@render children?.()}
+</button>

package/dist/Carousel/carousel-control-next.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ## Carousel.ControlNext
+ * Next slide control button. Should be placed inside a Carousel.Root.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Root id="myCarousel">
+ * <Carousel.Inner>
+ *     Slides...
+ * </Carousel.Inner>
+ * <Carousel.ControlPrev />
+ * <Carousel.ControlNext />
+ * </Carousel.Root>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ */
+declare const CarouselControlNext: import("svelte").Component<import("../index.js").ButtonElement, {}, "elementRef">;
+type CarouselControlNext = ReturnType<typeof CarouselControlNext>;
+export default CarouselControlNext;

package/dist/Carousel/carousel-control-prev.svelte

@@ -0,0 +1,35 @@
+<!--
+@component
+## Carousel.ControlPrev
+Previous slide control button. Should be placed inside a Carousel.Root.
+
+@example
+```svelte
+<Carousel.Root id="myCarousel">
+    <Carousel.Inner>
+        Slides...
+    </Carousel.Inner>
+    <Carousel.ControlPrev />
+    <Carousel.ControlNext />
+</Carousel.Root>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { CarouselControlPrevState, initCarouselControlPrevState } from './carousel.svelte.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+// Initialize control state (false means previous control)
+const controlState = initCarouselControlPrevState({});
+let classes = $derived(uniqueClsx('carousel-control-prev', classValues));
+const handleClick = (event) => {
+    controlState.onclick(event);
+};
+</script>
+
+<button bind:this={elementRef} class={classes} onclick={handleClick} type="button" {...restOfProps}>
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+    {@render children?.()}
+</button>

package/dist/Carousel/carousel-control-prev.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ## Carousel.ControlPrev
+ * Previous slide control button. Should be placed inside a Carousel.Root.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Root id="myCarousel">
+ * <Carousel.Inner>
+ *     Slides...
+ * </Carousel.Inner>
+ * <Carousel.ControlPrev />
+ * <Carousel.ControlNext />
+ * </Carousel.Root>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ */
+declare const CarouselControlPrev: import("svelte").Component<import("../index.js").ButtonElement, {}, "elementRef">;
+type CarouselControlPrev = ReturnType<typeof CarouselControlPrev>;
+export default CarouselControlPrev;

package/dist/Carousel/carousel-indicator-button.svelte

@@ -0,0 +1,41 @@
+<!--
+@component
+## Carousel.IndicatorButton
+Button for carousel indicators. Should be placed inside a Carousel.Indicators component.
+
+@example
+```svelte
+<Carousel.Indicators>
+    <Carousel.IndicatorButton ariaLabel="Slide 1" />
+    <Carousel.IndicatorButton ariaLabel="Slide 2" />
+    <Carousel.IndicatorButton ariaLabel="Slide 3" />
+</Carousel.Indicators>
+```
+### Props
+- `ariaLabel` (string): Required. Screen reader text for accessibility.
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { CarouselIndicatorButtonState, initCarouselIndicatorButtonState } from './carousel.svelte.js';
+let { ariaLabel, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+// Initialize indicator button state
+const indicatorState = initCarouselIndicatorButtonState({});
+let classes = $derived(uniqueClsx({
+    active: indicatorState.isActive || indicatorState.isNextActive
+}, classValues));
+let effectiveAriaLabel = $derived(ariaLabel || `Slide ${indicatorState.index + 1}`);
+const handleClick = (event) => {
+    indicatorState.onclick(event);
+};
+</script>
+
+<button
+    aria-label={effectiveAriaLabel}
+    bind:this={elementRef}
+    class={classes}
+    data-bs-target="true"
+    type="button"
+    aria-current={indicatorState.isActive ? 'true' : 'false'}
+    onclick={handleClick}
+    {...restOfProps}></button>

package/dist/Carousel/carousel-indicator-button.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Carousel } from './index.js';
+/**
+ * ## Carousel.IndicatorButton
+ * Button for carousel indicators. Should be placed inside a Carousel.Indicators component.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Indicators>
+ * <Carousel.IndicatorButton ariaLabel="Slide 1" />
+ * <Carousel.IndicatorButton ariaLabel="Slide 2" />
+ * <Carousel.IndicatorButton ariaLabel="Slide 3" />
+ * </Carousel.Indicators>
+ * ```
+ * ### Props
+ * - `ariaLabel` (string): Required. Screen reader text for accessibility.
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ */
+declare const CarouselIndicatorButton: import("svelte").Component<Carousel.IndicatorButtonProps, {}, "elementRef">;
+type CarouselIndicatorButton = ReturnType<typeof CarouselIndicatorButton>;
+export default CarouselIndicatorButton;

package/dist/Carousel/carousel-indicators.svelte

@@ -0,0 +1,33 @@
+<!--
+@component
+## Carousel.Indicators
+Container for indicator buttons. Should be placed inside a Carousel.Root component.
+
+@example
+```svelte
+<Carousel.Root id="myCarousel">
+    <Carousel.Indicators>
+        <Carousel.IndicatorButton slideTo={0} ariaLabel="Slide 1" />
+        <Carousel.IndicatorButton slideTo={1} ariaLabel="Slide 2" />
+        <Carousel.IndicatorButton slideTo={2} ariaLabel="Slide 3" />
+    </Carousel.Indicators>
+    <Carousel.Inner>
+        Slides...
+    </Carousel.Inner>
+</Carousel.Root>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the component.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique identifier for the component.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the carousel-indicators element, in case one is not provided
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `carousel-indicators-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('carousel-indicators', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Carousel/carousel-indicators.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ## Carousel.Indicators
+ * Container for indicator buttons. Should be placed inside a Carousel.Root component.
+ *
+ * @example
+ * ```svelte
+ * <Carousel.Root id="myCarousel">
+ * <Carousel.Indicators>
+ *     <Carousel.IndicatorButton slideTo={0} ariaLabel="Slide 1" />
+ *     <Carousel.IndicatorButton slideTo={1} ariaLabel="Slide 2" />
+ *     <Carousel.IndicatorButton slideTo={2} ariaLabel="Slide 3" />
+ * </Carousel.Indicators>
+ * <Carousel.Inner>
+ *     Slides...
+ * </Carousel.Inner>
+ * </Carousel.Root>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the component.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique identifier for the component.
+ */
+declare const CarouselIndicators: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type CarouselIndicators = ReturnType<typeof CarouselIndicators>;
+export default CarouselIndicators;