@winkintel/bootstrap-svelte 0.0.1

package/dist/Breadcrumb/breadcrumb.svelte.js

@@ -0,0 +1,41 @@
+import { Context } from '../common/index.js';
+export class BreadcrumbRootState {
+    props;
+    #activeBreadcrumbItemId = $state('');
+    constructor(props) {
+        this.props = props;
+        this.isBreadcrumbItemActive = this.isBreadcrumbItemActive.bind(this);
+        this.setBreadcrumbItemActive = this.setBreadcrumbItemActive.bind(this);
+    }
+    isBreadcrumbItemActive(itemId) {
+        return this.#activeBreadcrumbItemId === itemId;
+    }
+    setBreadcrumbItemActive(itemId) {
+        this.#activeBreadcrumbItemId = itemId;
+    }
+}
+export class BreadcrumbItemState {
+    props;
+    root;
+    isActive = $derived.by(() => this.root.isBreadcrumbItemActive(this.props.id || ''));
+    constructor(props, root) {
+        this.props = props;
+        this.root = root;
+        if (this.props.isActive) {
+            this.root.setBreadcrumbItemActive(this.props.id || '');
+        }
+    }
+}
+const BreadcrumbRootContext = new Context('breadcrumb-root');
+const BreadcrumbItemContext = new Context('breadcrumb-item');
+export function initBreadcrumbRootState(props) {
+    const rootState = new BreadcrumbRootState(props);
+    return BreadcrumbRootContext.set(rootState);
+}
+export function initBreadcrumbItemState(props) {
+    if (!BreadcrumbRootContext.exists()) {
+        throw new Error('BreadcrumbRootContext is not set. Please initialize it first.');
+    }
+    const rootState = BreadcrumbRootContext.get();
+    return BreadcrumbItemContext.set(new BreadcrumbItemState(props, rootState));
+}

package/dist/Breadcrumb/composition.d.ts

@@ -0,0 +1,3 @@
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Root } from './breadcrumb.svelte';
+export type { BreadcrumbItemProps as ItemProps, BreadcrumbRootProps as RootProps } from './types.js';

package/dist/Breadcrumb/composition.js

@@ -0,0 +1,2 @@
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Root } from './breadcrumb.svelte';

package/dist/Breadcrumb/index.d.ts

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

package/dist/Breadcrumb/index.js

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

package/dist/Breadcrumb/types.d.ts

@@ -0,0 +1,9 @@
+import type { ListItemElement, OListElement } from '../common/types.js';
+export type BreadcrumbRootProps = OListElement & {
+    ariaLabel?: string;
+    divider?: string;
+};
+export type BreadcrumbItemProps = ListItemElement & {
+    isActive?: boolean;
+    href?: string;
+};

package/dist/Breadcrumb/types.js

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

package/dist/BreakpointListener/breakpoint-listener.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">import { noop } from '../common/noop.js';
+import { MediaQuery } from 'svelte/reactivity';
+import { MediaQueryStringsByBreakpointEnum } from './types.js';
+let { children, currentBreakpoint = $bindable(undefined), isDisabled = false, onChange = noop, onBreakUp = noop, onBreakDown = noop, renderOn } = $props();
+const mediaQueries = Object.entries(MediaQueryStringsByBreakpointEnum).map(([breakpoint, queryString]) => ({
+    breakpoint: parseInt(breakpoint),
+    mediaQuery: new MediaQuery(queryString)
+}));
+const doRenderChildren = () => {
+    if (!children || isDisabled) {
+        return false;
+    }
+    if (Array.isArray(renderOn)) {
+        // only call includes when currentBreakpoint is defined to satisfy the BaseBreakpoint type
+        if (currentBreakpoint == null) {
+            return false;
+        }
+        return renderOn.includes(currentBreakpoint);
+    }
+    else {
+        return renderOn === currentBreakpoint;
+    }
+};
+// Effect to monitor all media queries and update currentBreakpoint
+$effect(() => {
+    if (isDisabled) {
+        return;
+    }
+    // Find the currently matching breakpoint
+    const matchingBreakpoint = mediaQueries.find(({ mediaQuery }) => mediaQuery.current);
+    // Only proceed if we found a matching breakpoint and it's different from current
+    if (matchingBreakpoint !== undefined && currentBreakpoint !== matchingBreakpoint.breakpoint) {
+        const previousBreakpoint = currentBreakpoint ?? null;
+        currentBreakpoint = matchingBreakpoint.breakpoint;
+        // Trigger onChange callback
+        onChange({ current: currentBreakpoint, previous: previousBreakpoint });
+        // Trigger direction-specific callbacks
+        if (previousBreakpoint === null) {
+            // First detection always counts as breaking up from null
+            onBreakUp({ from: null, to: currentBreakpoint });
+        }
+        else if (currentBreakpoint > previousBreakpoint) {
+            onBreakUp({ from: previousBreakpoint, to: currentBreakpoint });
+        }
+        else {
+            onBreakDown({ from: previousBreakpoint, to: currentBreakpoint });
+        }
+    }
+});
+</script>
+
+{#if doRenderChildren()}
+    {@render children?.()}
+{/if}

package/dist/BreakpointListener/breakpoint-listener.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BreakpointListenerRootProps } from './types.js';
+declare const BreakpointListener: import("svelte").Component<BreakpointListenerRootProps, {}, "currentBreakpoint">;
+type BreakpointListener = ReturnType<typeof BreakpointListener>;
+export default BreakpointListener;

package/dist/BreakpointListener/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BreakpointListener } from './breakpoint-listener.svelte';
+export * from './types.js';

package/dist/BreakpointListener/index.js

@@ -0,0 +1,2 @@
+export { default as BreakpointListener } from './breakpoint-listener.svelte';
+export * from './types.js';

package/dist/BreakpointListener/types.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+export type BreakEvent = {
+    from: BreakpointEnum | null;
+    to: BreakpointEnum;
+};
+/**
+ * Enum for breakpoints using numbers to facilitate comparisons.
+ */
+export declare enum BreakpointEnum {
+    XS = 0,
+    SM = 1,
+    MD = 2,
+    LG = 3,
+    XL = 4,
+    XXL = 5
+}
+export type BreakpointListenerRootProps = {
+    children?: Snippet;
+    currentBreakpoint?: BreakpointEnum;
+    isDisabled?: boolean;
+    onChange?: (changeEvent: ChangeEvent) => void;
+    onBreakUp?: (breakEvent: BreakEvent) => void;
+    onBreakDown?: (breakEvent: BreakEvent) => void;
+    renderOn?: BreakpointEnum | BreakpointEnum[];
+};
+export type ChangeEvent = {
+    current: BreakpointEnum;
+    previous: BreakpointEnum | null;
+};
+export declare const MediaQueryStringsByBreakpointEnum: Record<BreakpointEnum, string>;

package/dist/BreakpointListener/types.js

@@ -0,0 +1,20 @@
+/**
+ * Enum for breakpoints using numbers to facilitate comparisons.
+ */
+export var BreakpointEnum;
+(function (BreakpointEnum) {
+    BreakpointEnum[BreakpointEnum["XS"] = 0] = "XS";
+    BreakpointEnum[BreakpointEnum["SM"] = 1] = "SM";
+    BreakpointEnum[BreakpointEnum["MD"] = 2] = "MD";
+    BreakpointEnum[BreakpointEnum["LG"] = 3] = "LG";
+    BreakpointEnum[BreakpointEnum["XL"] = 4] = "XL";
+    BreakpointEnum[BreakpointEnum["XXL"] = 5] = "XXL";
+})(BreakpointEnum || (BreakpointEnum = {}));
+export const MediaQueryStringsByBreakpointEnum = {
+    [BreakpointEnum.XS]: '(max-width: 575.98px)',
+    [BreakpointEnum.SM]: '(min-width: 576px) and (max-width: 767.98px)',
+    [BreakpointEnum.MD]: '(min-width: 768px) and (max-width: 991.98px)',
+    [BreakpointEnum.LG]: '(min-width: 992px) and (max-width: 1199.98px)',
+    [BreakpointEnum.XL]: '(min-width: 1200px) and (max-width: 1399.98px)',
+    [BreakpointEnum.XXL]: '(min-width: 1400px)'
+};

package/dist/Button/button.svelte

@@ -0,0 +1,87 @@
+<!--
+@component
+## Button
+Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for multiple sizes, states, and more.
+
+@example
+```svelte
+<Button>Click me</Button>
+```
+
+#### Button color variants
+```svelte
+<Button colorVariant="primary">Primary</Button>
+<Button colorVariant="secondary">Secondary</Button>
+<Button colorVariant="success">Success</Button>
+<Button colorVariant="danger">Danger</Button>
+<Button colorVariant="warning">Warning</Button>
+<Button colorVariant="info">Info</Button>
+<Button colorVariant="light">Light</Button>
+<Button colorVariant="dark">Dark</Button>
+<Button colorVariant="link">Link</Button>
+```
+
+#### Button sizes
+```svelte
+<Button size="lg">Large button</Button>
+<Button size="sm">Small button</Button>
+```
+
+#### Disabled state
+```svelte
+<Button disabled>Disabled button</Button>
+```
+
+#### Button with href
+```svelte
+<Button href="https://example.com">Link button</Button>
+```
+#### Button with input type
+```svelte
+<Button type="submit" value="Submit">Submit</Button>
+<Button type="reset" value="Reset">Reset</Button>
+<Button type="button" value="Custom">Custom</Button>
+```
+
+### Props
+- `children` (slot): Content to display inside the button.
+- `class` (string): Optional. Additional CSS classes.
+- `colorVariant` (string): Optional. Button style variant ('primary', 'secondary', 'success', etc.).
+- `disabled` (boolean): Optional. Disables the button when true (default: false).
+- `elementRef` (HTMLElement): Optional. Reference to the button DOM element.
+- `href` (string): Optional. Turns the button into an anchor element when provided.
+- `size` (string): Optional. Button size ('lg' or 'sm').
+- `type` (string): Optional. Button type attribute (default: 'button').
+- `value` (string): Optional. Value attribute when rendered as an input.
+-->
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any -- `restOfProps` spread targets <svelte:element> which unions <a>/<button>; the union type is not spreadable without `as any` */
+import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the collapse element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, colorVariant, disabled = false, elementRef = $bindable(null), href, id = `btn-${uid}`, size, type = 'button', value = $bindable(undefined), ...restOfProps } = $props();
+let isAnchor = $derived(Boolean(href));
+let isInput = $derived(Boolean(value));
+let elementType = $derived(isAnchor ? 'a' : isInput ? 'input' : 'button');
+let classes = $derived(uniqueClsx('btn', colorVariant && `btn-${colorVariant}`, size && `btn-${size}`, isAnchor && disabled && 'disabled', classValues));
+</script>
+
+{#if !isInput}
+    <svelte:element
+        this={elementType}
+        aria-disabled={isAnchor ? disabled : undefined}
+        bind:this={elementRef}
+        class={classes}
+        disabled={isAnchor ? undefined : disabled}
+        href={href && !disabled ? href : undefined}
+        {id}
+        role={isAnchor ? 'button' : undefined}
+        tabindex={isAnchor && disabled ? -1 : 0}
+        type={isAnchor ? undefined : type}
+        {...restOfProps as any}
+        ><!-- using `as Record<string, unknown>` because Svelte doesn't support spreading props on elements with different types -->
+        {@render children?.()}
+    </svelte:element>
+{:else}
+    <!-- using `as Record<string, unknown>` because Svelte doesn't support spreading props on elements with different types -->
+    <input bind:this={elementRef} bind:value class={classes} {disabled} tabindex={disabled ? -1 : 0} {type} {...restOfProps as any} />
+{/if}

package/dist/Button/button.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { ButtonRootProps } from './types.js';
+/**
+ * ## Button
+ * Use Bootstrap's custom button styles for actions in forms, dialogs, and more. Includes support for multiple sizes, states, and more.
+ *
+ * @example
+ * ```svelte
+ * <Button>Click me</Button>
+ * ```
+ *
+ * #### Button color variants
+ * ```svelte
+ * <Button colorVariant="primary">Primary</Button>
+ * <Button colorVariant="secondary">Secondary</Button>
+ * <Button colorVariant="success">Success</Button>
+ * <Button colorVariant="danger">Danger</Button>
+ * <Button colorVariant="warning">Warning</Button>
+ * <Button colorVariant="info">Info</Button>
+ * <Button colorVariant="light">Light</Button>
+ * <Button colorVariant="dark">Dark</Button>
+ * <Button colorVariant="link">Link</Button>
+ * ```
+ *
+ * #### Button sizes
+ * ```svelte
+ * <Button size="lg">Large button</Button>
+ * <Button size="sm">Small button</Button>
+ * ```
+ *
+ * #### Disabled state
+ * ```svelte
+ * <Button disabled>Disabled button</Button>
+ * ```
+ *
+ * #### Button with href
+ * ```svelte
+ * <Button href="https://example.com">Link button</Button>
+ * ```
+ * #### Button with input type
+ * ```svelte
+ * <Button type="submit" value="Submit">Submit</Button>
+ * <Button type="reset" value="Reset">Reset</Button>
+ * <Button type="button" value="Custom">Custom</Button>
+ * ```
+ *
+ * ### Props
+ * - `children` (slot): Content to display inside the button.
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `colorVariant` (string): Optional. Button style variant ('primary', 'secondary', 'success', etc.).
+ * - `disabled` (boolean): Optional. Disables the button when true (default: false).
+ * - `elementRef` (HTMLElement): Optional. Reference to the button DOM element.
+ * - `href` (string): Optional. Turns the button into an anchor element when provided.
+ * - `size` (string): Optional. Button size ('lg' or 'sm').
+ * - `type` (string): Optional. Button type attribute (default: 'button').
+ * - `value` (string): Optional. Value attribute when rendered as an input.
+ */
+declare const Button: import("svelte").Component<ButtonRootProps, {}, "value" | "elementRef">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button.svelte';
+export * from './types.js';

package/dist/Button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './button.svelte';
+export * from './types.js';

package/dist/Button/types.d.ts

@@ -0,0 +1,26 @@
+import type { BaseColorVariant, WithElementRef } from '../common/types.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, HTMLInputAttributes } from 'svelte/elements';
+export type ButtonAsAnchorElement = WithElementRef<Omit<HTMLAnchorAttributes, 'href' | 'type' | 'value'>> & {
+    disabled?: HTMLButtonAttributes['disabled'];
+    href: HTMLAnchorAttributes['href'];
+    type?: never;
+    value?: never;
+};
+export type ButtonAsButtonElement = WithElementRef<Omit<HTMLButtonAttributes, 'href' | 'type' | 'value'>> & {
+    disabled?: HTMLButtonAttributes['disabled'];
+    type?: HTMLButtonAttributes['type'];
+    href?: never;
+    value?: never;
+};
+export type ButtonAsInputElement = WithElementRef<Omit<HTMLInputAttributes, 'href' | 'size' | 'type' | 'value'>> & {
+    disabled?: HTMLInputAttributes['disabled'];
+    type?: HTMLInputAttributes['type'];
+    href?: never;
+    value?: string;
+};
+export type ButtonRootProps = (ButtonAsAnchorElement | ButtonAsButtonElement | ButtonAsInputElement) & {
+    colorVariant?: ButtonColorVariant;
+    size?: ButtonSize;
+};
+export type ButtonColorVariant = BaseColorVariant | 'link' | 'outline-primary' | 'outline-secondary' | 'outline-success' | 'outline-danger' | 'outline-warning' | 'outline-info' | 'outline-light' | 'outline-dark';
+export type ButtonSize = 'sm' | 'lg' | '';

package/dist/Button/types.js

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

package/dist/ButtonGroup/button-check.svelte

@@ -0,0 +1,70 @@
+<!--
+@component
+## ButtonCheck
+Bootstrap toggle-button input that renders a `.btn-check` input and its matching `.btn` label.
+
+@example
+```svelte
+<ButtonCheck id="newsletter">Newsletter</ButtonCheck>
+```
+
+#### Radio toggle group
+```svelte
+<ButtonGroup>
+    <ButtonCheck id="option-a" name="options" type="radio" colorVariant="outline-primary">Option A</ButtonCheck>
+    <ButtonCheck id="option-b" name="options" type="radio" colorVariant="outline-primary">Option B</ButtonCheck>
+</ButtonGroup>
+```
+
+### Props
+- `autocomplete` (string): Optional. Defaults to `'off'`.
+- `checked` (boolean): Optional. Bindable checked state for checkbox inputs.
+- `class` (string): Optional. Additional CSS classes for the input.
+- `colorVariant` (string): Optional. Button style variant for the label.
+- `disabled` (boolean): Optional. Disables the input and label interaction.
+- `elementRef` (HTMLInputElement): Optional. Reference to the input element.
+- `group` (string | unknown[]): Optional. Bindable group value for grouped radio or checkbox inputs.
+- `id` (string): Optional. Input id used by the label `for` attribute.
+- `labelClass` (string): Optional. Additional CSS classes for the label.
+- `labelElementRef` (HTMLLabelElement): Optional. Reference to the label element.
+- `name` (string): Optional. Input group name, commonly used with radio toggles.
+- `type` (`'checkbox' | 'radio'`): Optional. Defaults to `'checkbox'`.
+-->
+<script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
+const uid = $props.id();
+let { autocomplete = 'off', children, checked = $bindable(false), class: classValues, colorVariant, disabled = false, elementRef = $bindable(null), group = $bindable(undefined), id = `btn-check-${uid}`, labelClass, labelElementRef = $bindable(null), onchange = noop, type = 'checkbox', value = undefined, ...restOfProps } = $props();
+let inputClasses = $derived(uniqueClsx('btn-check', classValues));
+let labelClasses = $derived(uniqueClsx('btn', colorVariant && `btn-${colorVariant}`, labelClass));
+let isCheckboxGroup = $derived(type === 'checkbox' && group !== undefined);
+</script>
+
+{#if type === 'radio'}
+    <input bind:this={elementRef} bind:group {autocomplete} class={inputClasses} {disabled} {id} {onchange} type="radio" {value} {...restOfProps} />
+{:else if isCheckboxGroup}
+    <input
+        bind:this={elementRef}
+        bind:group
+        {autocomplete}
+        class={inputClasses}
+        {disabled}
+        {id}
+        {onchange}
+        type="checkbox"
+        {value}
+        {...restOfProps} />
+{:else}
+    <input
+        bind:this={elementRef}
+        bind:checked
+        {autocomplete}
+        class={inputClasses}
+        {disabled}
+        {id}
+        {onchange}
+        type="checkbox"
+        {value}
+        {...restOfProps} />
+{/if}
+<label bind:this={labelElementRef} class={labelClasses} for={id}>
+    {@render children?.()}
+</label>

package/dist/ButtonGroup/button-check.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { ButtonCheckRootProps } from './types.js';
+/**
+ * ## ButtonCheck
+ * Bootstrap toggle-button input that renders a `.btn-check` input and its matching `.btn` label.
+ *
+ * @example
+ * ```svelte
+ * <ButtonCheck id="newsletter">Newsletter</ButtonCheck>
+ * ```
+ *
+ * #### Radio toggle group
+ * ```svelte
+ * <ButtonGroup>
+ * <ButtonCheck id="option-a" name="options" type="radio" colorVariant="outline-primary">Option A</ButtonCheck>
+ * <ButtonCheck id="option-b" name="options" type="radio" colorVariant="outline-primary">Option B</ButtonCheck>
+ * </ButtonGroup>
+ * ```
+ *
+ * ### Props
+ * - `autocomplete` (string): Optional. Defaults to `'off'`.
+ * - `checked` (boolean): Optional. Bindable checked state for checkbox inputs.
+ * - `class` (string): Optional. Additional CSS classes for the input.
+ * - `colorVariant` (string): Optional. Button style variant for the label.
+ * - `disabled` (boolean): Optional. Disables the input and label interaction.
+ * - `elementRef` (HTMLInputElement): Optional. Reference to the input element.
+ * - `group` (string | unknown[]): Optional. Bindable group value for grouped radio or checkbox inputs.
+ * - `id` (string): Optional. Input id used by the label `for` attribute.
+ * - `labelClass` (string): Optional. Additional CSS classes for the label.
+ * - `labelElementRef` (HTMLLabelElement): Optional. Reference to the label element.
+ * - `name` (string): Optional. Input group name, commonly used with radio toggles.
+ * - `type` (`'checkbox' | 'radio'`): Optional. Defaults to `'checkbox'`.
+ */
+declare const ButtonCheck: import("svelte").Component<ButtonCheckRootProps, {}, "elementRef" | "group" | "checked" | "labelElementRef">;
+type ButtonCheck = ReturnType<typeof ButtonCheck>;
+export default ButtonCheck;

package/dist/ButtonGroup/button-group.svelte

@@ -0,0 +1,51 @@
+<!--
+@component
+## ButtonGroup
+A component that groups a series of buttons together on a single line or stacked vertically.
+
+@example
+```svelte
+<ButtonGroup>
+    <Button>Left</Button>
+    <Button>Middle</Button>
+    <Button>Right</Button>
+</ButtonGroup>
+```
+
+#### Basic button group
+```svelte
+<ButtonGroup>
+    <Button colorVariant="primary">Primary</Button>
+    <Button colorVariant="secondary">Secondary</Button>
+    <Button colorVariant="success">Success</Button>
+</ButtonGroup>
+```
+
+#### Vertical button group
+```svelte
+<ButtonGroup isVertical={true}>
+    <Button>Top</Button>
+    <Button>Middle</Button>
+    <Button>Bottom</Button>
+</ButtonGroup>
+```
+
+### Props
+- `ariaLabel` (string): Optional. Accessibility label for the button group
+- `class` (string): Optional. CSS classes for styling the button group
+- `elementRef` (HTMLElement): Optional. Reference to the button group DOM element
+- `id` (string): Optional. ID for the button group
+- `isVertical` (boolean): Optional. Makes the button group stack vertically\
+- `size` (string): Optional. Size of the button group ('sm' or 'lg')
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import {} from './types.js';
+// Generate a unique ID for the collapse element, in case one is not provided...
+const uid = $props.id();
+let { ariaLabel = `Button group ${uid}`, children, class: classValues, elementRef = $bindable(null), id = `btn-group-${uid}`, isVertical = false, size, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx({ 'btn-group-vertical': isVertical }, { 'btn-group': !isVertical }, size && `btn-group-${size}`, classValues));
+</script>
+
+<div aria-label={ariaLabel} bind:this={elementRef} class={classes} {id} role="group" {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/ButtonGroup/button-group.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type ButtonGroupRootProps } from './types.js';
+/**
+ * ## ButtonGroup
+ * A component that groups a series of buttons together on a single line or stacked vertically.
+ *
+ * @example
+ * ```svelte
+ * <ButtonGroup>
+ * <Button>Left</Button>
+ * <Button>Middle</Button>
+ * <Button>Right</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * #### Basic button group
+ * ```svelte
+ * <ButtonGroup>
+ * <Button colorVariant="primary">Primary</Button>
+ * <Button colorVariant="secondary">Secondary</Button>
+ * <Button colorVariant="success">Success</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * #### Vertical button group
+ * ```svelte
+ * <ButtonGroup isVertical={true}>
+ * <Button>Top</Button>
+ * <Button>Middle</Button>
+ * <Button>Bottom</Button>
+ * </ButtonGroup>
+ * ```
+ *
+ * ### Props
+ * - `ariaLabel` (string): Optional. Accessibility label for the button group
+ * - `class` (string): Optional. CSS classes for styling the button group
+ * - `elementRef` (HTMLElement): Optional. Reference to the button group DOM element
+ * - `id` (string): Optional. ID for the button group
+ * - `isVertical` (boolean): Optional. Makes the button group stack vertically\
+ * - `size` (string): Optional. Size of the button group ('sm' or 'lg')
+ */
+declare const ButtonGroup: import("svelte").Component<ButtonGroupRootProps, {}, "elementRef">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/ButtonGroup/button-toolbar.svelte

@@ -0,0 +1,36 @@
+<!--
+@component
+## ButtonToolbar
+Combine sets of button groups into button toolbars for more complex components.
+
+@example
+```svelte
+<ButtonToolbar ariaLabel="Toolbar with button groups">
+    <ButtonGroup class="me-2">
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
+    </ButtonGroup>
+    <ButtonGroup class="me-2">
+        <Button>4</Button>
+        <Button>5</Button>
+    </ButtonGroup>
+</ButtonToolbar>
+```
+### Props
+- `ariaLabel` (string): Optional. Accessibility label for the button group.
+- `class` (string): Optional. CSS classes for styling the button group.
+- `elementRef` (HTMLElement): Optional. Reference to the button group DOM element.
+- `id` (string): Optional. ID for the button group.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import {} from './types.js';
+// Generate a unique ID for the collapse element, in case one is not provided...
+const uid = $props.id();
+let { ariaLabel = 'Button toolbar ${uid}', children, class: classValues, elementRef = $bindable(null), id = `btn-toolbar-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('btn-toolbar', classValues));
+</script>
+
+<div aria-label={ariaLabel} bind:this={elementRef} class={classes} {id} role="toolbar" {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/ButtonGroup/button-toolbar.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type ButtonToolbarRootProps } from './types.js';
+/**
+ * ## ButtonToolbar
+ * Combine sets of button groups into button toolbars for more complex components.
+ *
+ * @example
+ * ```svelte
+ * <ButtonToolbar ariaLabel="Toolbar with button groups">
+ * <ButtonGroup class="me-2">
+ *     <Button>1</Button>
+ *     <Button>2</Button>
+ *     <Button>3</Button>
+ * </ButtonGroup>
+ * <ButtonGroup class="me-2">
+ *     <Button>4</Button>
+ *     <Button>5</Button>
+ * </ButtonGroup>
+ * </ButtonToolbar>
+ * ```
+ * ### Props
+ * - `ariaLabel` (string): Optional. Accessibility label for the button group.
+ * - `class` (string): Optional. CSS classes for styling the button group.
+ * - `elementRef` (HTMLElement): Optional. Reference to the button group DOM element.
+ * - `id` (string): Optional. ID for the button group.
+ */
+declare const ButtonToolbar: import("svelte").Component<ButtonToolbarRootProps, {}, "elementRef">;
+type ButtonToolbar = ReturnType<typeof ButtonToolbar>;
+export default ButtonToolbar;

package/dist/ButtonGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ButtonCheck } from './button-check.svelte';
+export { default as ButtonGroup } from './button-group.svelte';
+export { default as ButtonToolbar } from './button-toolbar.svelte';
+export * from './types.js';

package/dist/ButtonGroup/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonCheck } from './button-check.svelte';
+export { default as ButtonGroup } from './button-group.svelte';
+export { default as ButtonToolbar } from './button-toolbar.svelte';
+export * from './types.js';