@winkintel/bootstrap-svelte 0.0.1

package/dist/Scrollspy/scrollspy-attachment.svelte.js

@@ -0,0 +1,122 @@
+import { isDisabled } from '../common/dom.js';
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * Creates a scrollspy attachment that monitors elements matching a target selector
+ * and triggers a callback when they intersect with the scrolling container.
+ *
+ * @param options Configuration options for the scrollspy behavior
+ * @returns An Attachment function compatible with Svelte 5's {@attach ...} directive
+ */
+export function scrollspy(options) {
+    return (element) => {
+        // Sanity check the options...
+        if (!options || typeof options !== 'object') {
+            throw new Error('Scrollspy: options must be an object');
+        }
+        if (options.targetSelector === undefined) {
+            throw new Error('Scrollspy: targetSelector is required in options');
+        }
+        if (typeof options.callback !== 'function') {
+            throw new Error('Scrollspy: callback must be a function');
+        }
+        // Get the target element from options targetSelector...
+        const targetElement = document.querySelector(options.targetSelector);
+        if (!targetElement) {
+            throw new Error(`Scrollspy: target element not found for selector "${options.targetSelector}"`);
+        }
+        // Smooth scroll functionality
+        const handleClick = (event) => {
+            const target = event.target;
+            if (!(target instanceof HTMLElement)) {
+                return;
+            }
+            // Only handle clicks on anchor links with hash
+            const anchor = target.closest('a[href^="#"]');
+            if (!anchor || !anchor.hash) {
+                return;
+            }
+            // Find the target element that corresponds to the clicked link's hash
+            const targetElement = element.querySelector(anchor.hash);
+            if (targetElement) {
+                event.preventDefault();
+                // Get the scroll container (root element or window)
+                const root = options.observerOptions?.root || element;
+                // Calculate the scroll position
+                const elementRect = targetElement.getBoundingClientRect();
+                const containerRect = root.getBoundingClientRect();
+                let scrollTop;
+                if (root === element || root instanceof HTMLElement) {
+                    // Scrolling within a container element
+                    // Cast targetElement to HTMLElement to use offsetTop
+                    scrollTop = targetElement.offsetTop - element.offsetTop;
+                }
+                else {
+                    // Scrolling the window
+                    scrollTop = elementRect.top + window.pageYOffset - containerRect.top;
+                }
+                // Perform smooth scroll
+                if (root === element || root instanceof HTMLElement) {
+                    if (root.scrollTo) {
+                        root.scrollTo({ top: scrollTop, behavior: 'smooth' });
+                    }
+                    else {
+                        // Fallback for older browsers
+                        root.scrollTop = scrollTop;
+                    }
+                }
+                else {
+                    // Scroll the window
+                    if (window.scrollTo) {
+                        window.scrollTo({ top: scrollTop, behavior: 'smooth' });
+                    }
+                    else {
+                        // Fallback for older browsers
+                        document.documentElement.scrollTop = scrollTop; // Use document.documentElement.scrollTop instead
+                        document.body.scrollTop = scrollTop; // For Safari compatibility
+                    }
+                }
+            }
+        };
+        // Maps to store links and their target sections
+        const targetLinks = new SvelteMap();
+        const observableSections = new SvelteMap();
+        // Find all the anchor links within the target element...
+        const anchors = targetElement.querySelectorAll('[href]');
+        for (const anchor of anchors) {
+            // ensure that the anchor has a valid hash and is not disabled
+            if (!anchor.hash || ['#', '#!'].includes(anchor.hash) || isDisabled(anchor)) {
+                continue;
+            }
+            const observableSection = document.querySelector(decodeURI(anchor.hash));
+            if (observableSection !== null) {
+                targetLinks.set(decodeURI(anchor.hash), anchor);
+                observableSections.set(anchor.hash, observableSection);
+                // attach the click handler to the anchor
+                anchor.addEventListener('click', handleClick);
+            }
+        }
+        // Set default options for the IntersectionObserver...
+        const defaultBootstrapObserverOptions = {
+            root: element,
+            rootMargin: '0px 0px -25%',
+            threshold: [0.1, 0.5, 1]
+        };
+        // Ensure observerOptions exists, create it if it doesn't
+        options.observerOptions = { ...defaultBootstrapObserverOptions, ...options.observerOptions };
+        // Create an IntersectionObserver that will invoke the callback when targets intersect
+        const observer = new IntersectionObserver(options.callback, options.observerOptions);
+        // Start observing each target element for intersection events
+        for (const section of observableSections.values()) {
+            observer.observe(section);
+        }
+        // Return cleanup function that will be called when the attachment is removed
+        return () => {
+            // Remove click event listener
+            for (const anchor of targetLinks.values()) {
+                anchor.removeEventListener('click', handleClick);
+            }
+            // Disconnect the observer to prevent memory leaks
+            observer.disconnect();
+        };
+    };
+}

package/dist/Scrollspy/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Configuration options for the Scrollspy component.
+ * Used to track when elements enter/exit the viewport and trigger navigation highlights.
+ */
+export type ScrollspyOptions = {
+    targetSelector: string;
+    callback: IntersectionObserverCallback;
+    observerOptions?: IntersectionObserverInit;
+};

package/dist/Scrollspy/types.js

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

package/dist/Spinner/index.d.ts

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

package/dist/Spinner/index.js

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

package/dist/Spinner/spinner.svelte

@@ -0,0 +1,77 @@
+<!--
+@component
+## Spinner
+A component that indicates a loading state using Bootstrap's spinner styling.
+
+@example
+```svelte
+<Spinner />
+```
+
+#### Border spinner (default)
+```svelte
+<Spinner>
+    <span class="visually-hidden">Loading...</span>
+</Spinner>
+```
+
+#### Growing spinner
+```svelte
+<Spinner type="grow">
+    <span class="visually-hidden">Loading...</span>
+</Spinner>
+```
+
+#### Colors variants
+```svelte
+<Spinner colorVariant="primary">
+    <span class="visually-hidden">Loading primary...</span>
+</Spinner>
+<Spinner colorVariant="secondary">
+    <span class="visually-hidden">Loading secondary...</span>
+</Spinner>
+<Spinner colorVariant="success">
+    <span class="visually-hidden">Loading success...</span>
+</Spinner>
+<Spinner colorVariant="danger">
+    <span class="visually-hidden">Loading danger...</span>
+</Spinner>
+<Spinner colorVariant="warning">
+    <span class="visually-hidden">Loading warning...</span>
+</Spinner>
+<Spinner colorVariant="info">
+    <span class="visually-hidden">Loading info...</span>
+</Spinner>
+<Spinner colorVariant="light">
+    <span class="visually-hidden">Loading light...</span>
+</Spinner>
+<Spinner colorVariant="dark">
+    <span class="visually-hidden">Loading dark...</span>
+</Spinner>
+```
+
+#### Sizes
+```svelte
+<Spinner size="sm">
+    <span class="visually-hidden">Loading...</span>
+</Spinner>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `colorVariant` (string): Optional. Color variant of the spinner ('primary', 'secondary', etc.).
+- `elementRef` (HTMLElement): Optional. Reference to the spinner DOM element.
+- `id` (string): Optional. ID for the spinner. If not provided, a unique ID will be generated.
+- `size` (string): Optional. Size of the spinner ('sm').
+- `type` (string): Optional. Type of spinner ('border' or 'grow'), defaults to 'border'.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+// Generate a unique ID for the spinner element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), id = `spinner-${uid}`, size, type = 'border', ...restOfProps } = $props();
+let classes = $derived(uniqueClsx(`spinner-${type}`, size && `spinner-${type}-${size}`, colorVariant && `text-${colorVariant}`, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} role="status" {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Spinner/spinner.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { SpinnerRootProps } from './types.js';
+/**
+ * ## Spinner
+ * A component that indicates a loading state using Bootstrap's spinner styling.
+ *
+ * @example
+ * ```svelte
+ * <Spinner />
+ * ```
+ *
+ * #### Border spinner (default)
+ * ```svelte
+ * <Spinner>
+ * <span class="visually-hidden">Loading...</span>
+ * </Spinner>
+ * ```
+ *
+ * #### Growing spinner
+ * ```svelte
+ * <Spinner type="grow">
+ * <span class="visually-hidden">Loading...</span>
+ * </Spinner>
+ * ```
+ *
+ * #### Colors variants
+ * ```svelte
+ * <Spinner colorVariant="primary">
+ * <span class="visually-hidden">Loading primary...</span>
+ * </Spinner>
+ * <Spinner colorVariant="secondary">
+ * <span class="visually-hidden">Loading secondary...</span>
+ * </Spinner>
+ * <Spinner colorVariant="success">
+ * <span class="visually-hidden">Loading success...</span>
+ * </Spinner>
+ * <Spinner colorVariant="danger">
+ * <span class="visually-hidden">Loading danger...</span>
+ * </Spinner>
+ * <Spinner colorVariant="warning">
+ * <span class="visually-hidden">Loading warning...</span>
+ * </Spinner>
+ * <Spinner colorVariant="info">
+ * <span class="visually-hidden">Loading info...</span>
+ * </Spinner>
+ * <Spinner colorVariant="light">
+ * <span class="visually-hidden">Loading light...</span>
+ * </Spinner>
+ * <Spinner colorVariant="dark">
+ * <span class="visually-hidden">Loading dark...</span>
+ * </Spinner>
+ * ```
+ *
+ * #### Sizes
+ * ```svelte
+ * <Spinner size="sm">
+ * <span class="visually-hidden">Loading...</span>
+ * </Spinner>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `colorVariant` (string): Optional. Color variant of the spinner ('primary', 'secondary', etc.).
+ * - `elementRef` (HTMLElement): Optional. Reference to the spinner DOM element.
+ * - `id` (string): Optional. ID for the spinner. If not provided, a unique ID will be generated.
+ * - `size` (string): Optional. Size of the spinner ('sm').
+ * - `type` (string): Optional. Type of spinner ('border' or 'grow'), defaults to 'border'.
+ */
+declare const Spinner: import("svelte").Component<SpinnerRootProps, {}, "elementRef">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/Spinner/types.d.ts

@@ -0,0 +1,9 @@
+import type { BaseColorVariant, DivElement } from '../common/types.js';
+export type SpinnerColorVariant = BaseColorVariant;
+export type SpinnerType = 'border' | 'grow';
+export type SpinnerSize = 'sm' | '';
+export type SpinnerRootProps = DivElement & {
+    colorVariant?: SpinnerColorVariant;
+    size?: SpinnerSize;
+    type?: SpinnerType;
+};

package/dist/Spinner/types.js

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

package/dist/Tab/composition.d.ts

@@ -0,0 +1,5 @@
+export { default as Content } from './tab-content.svelte';
+export { default as NavLink } from './tab-nav-link.svelte';
+export { default as Pane } from './tab-pane.svelte';
+export { default as Root } from './tab.svelte';
+export type { TabContentProps as ContentProps, TabNavLinkProps as NavLinkProps, TabPaneProps as PaneProps, TabRootProps as RootProps } from './types.js';

package/dist/Tab/composition.js

@@ -0,0 +1,4 @@
+export { default as Content } from './tab-content.svelte';
+export { default as NavLink } from './tab-nav-link.svelte';
+export { default as Pane } from './tab-pane.svelte';
+export { default as Root } from './tab.svelte';

package/dist/Tab/index.d.ts

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

package/dist/Tab/index.js

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

package/dist/Tab/tab-content.svelte

@@ -0,0 +1,29 @@
+<!--
+@component
+## Tab.Content
+Content container for tab content. Used with tabs navigation.
+
+@example
+```svelte
+<Tab.Content>
+    <Tab.Pane id="home-tab-pane" isActive={true}>
+        Content for home tab
+    </Tab.Pane>
+    <Tab.Pane id="contact-tab-pane">
+        Content for contact tab
+    </Tab.Pane>
+</Tab.Content>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('tab-content', classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Tab/tab-content.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ## Tab.Content
+ * Content container for tab content. Used with tabs navigation.
+ *
+ * @example
+ * ```svelte
+ * <Tab.Content>
+ * <Tab.Pane id="home-tab-pane" isActive={true}>
+ *     Content for home tab
+ * </Tab.Pane>
+ * <Tab.Pane id="contact-tab-pane">
+ *     Content for contact tab
+ * </Tab.Pane>
+ * </Tab.Content>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element
+ */
+declare const TabContent: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type TabContent = ReturnType<typeof TabContent>;
+export default TabContent;

package/dist/Tab/tab-nav-link.svelte

@@ -0,0 +1,69 @@
+<!--
+@component
+## Tab.NavLink
+A tab navigation link component specifically used inside a Tab.Root component.
+
+@example
+```svelte
+<Tab.NavLink targetPaneId="#!" isActive={true}>Active Link</Tab.NavLink>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+- `id` (string): Optional. Unique ID for the navigation element. Defaults to `tab-nav-link-{uid}`, where `uid` is a unique identifier.
+- `isActive` (boolean): Optional. Whether the link is active.
+- `isDisabled` (boolean): Optional. Whether the link is disabled.
+- `role` (string): Optional. The ARIA role of the link. If not provided, it will be set to "tab" if the link is a tab.
+- `targetPaneId` (string): Optional. The ID of the tab pane to link to.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { initNavLinkState, NavLinkState } from '../common/nav-tab.svelte.js';
+import { noop } from '../common/noop.js';
+// Generate a unique ID for the link, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), targetPaneId = '#', id = `tab-nav-link-${uid}`, isActive = false, isDisabled = false, onclick = noop, ...restOfProps } = $props();
+const linkState = initNavLinkState({
+    get href() {
+        return targetPaneId;
+    },
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    }
+});
+let isActiveState = $derived(linkState.isActive);
+let classes = $derived(uniqueClsx('nav-link', { active: isActiveState, disabled: isDisabled }, classValues));
+const handleClick = (event) => {
+    linkState.onclick(event);
+    onclick(event);
+};
+// Track the previously synchronized isActive value so we only react to
+// genuine prop transitions (not to reads of the live linkState.props.isActive).
+let previousIsActive;
+$effect(() => {
+    if (previousIsActive !== undefined && previousIsActive !== isActive && isActive) {
+        linkState.onclick(new MouseEvent('click'));
+    }
+    previousIsActive = isActive;
+});
+</script>
+
+<button
+    aria-controls={linkState.ariaControls}
+    aria-current={isActiveState ? 'page' : undefined}
+    aria-disabled={isDisabled ? 'true' : undefined}
+    aria-selected={linkState.isTab ? isActiveState : undefined}
+    bind:this={elementRef}
+    class={classes}
+    data-tab-pane-id={targetPaneId}
+    {id}
+    onclick={handleClick}
+    tabindex={isDisabled ? -1 : undefined}
+    type="button"
+    role="tab"
+    {...restOfProps}>
+    {@render children?.()}
+</button>

package/dist/Tab/tab-nav-link.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Tab } from './index.js';
+/**
+ * ## Tab.NavLink
+ * A tab navigation link component specifically used inside a Tab.Root component.
+ *
+ * @example
+ * ```svelte
+ * <Tab.NavLink targetPaneId="#!" isActive={true}>Active Link</Tab.NavLink>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+ * - `id` (string): Optional. Unique ID for the navigation element. Defaults to `tab-nav-link-{uid}`, where `uid` is a unique identifier.
+ * - `isActive` (boolean): Optional. Whether the link is active.
+ * - `isDisabled` (boolean): Optional. Whether the link is disabled.
+ * - `role` (string): Optional. The ARIA role of the link. If not provided, it will be set to "tab" if the link is a tab.
+ * - `targetPaneId` (string): Optional. The ID of the tab pane to link to.
+ */
+declare const TabNavLink: import("svelte").Component<Tab.NavLinkProps, {}, "elementRef">;
+type TabNavLink = ReturnType<typeof TabNavLink>;
+export default TabNavLink;

package/dist/Tab/tab-pane.svelte

@@ -0,0 +1,72 @@
+<!--
+@component
+## Tab.Pane
+Content pane for a tab. Used inside Tab.Root.
+
+@example
+```svelte
+<Tab.Pane id="home" isActive={true} doFade={true}>
+    Content for home tab
+</Tab.Pane>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `doFade` (boolean): Optional. Whether to use fade transition. Defaults to false.
+- `id` (string): Required. ID matching the href of a Nav.Link.
+- `isActive` (boolean): Optional. Whether the pane is initially visible.
+- `onHide` (function): Optional. Callback when the pane is about to be hidden.
+- `onHidden` (function): Optional. Callback when the pane has been hidden.
+- `onShow` (function): Optional. Callback when the pane is about to be shown.
+- `onShown` (function): Optional. Callback when the pane has been shown.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { noop } from '../common/noop.js';
+import { fade } from 'svelte/transition';
+import { initTabPaneState, TabPaneState } from '../common/nav-tab.svelte.js';
+// Generate a unique ID for the pane element, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, doFade = false, elementRef = $bindable(null), id = `tab-pane-${uid}`, isActive = false, onHide = noop, onHidden = noop, onShow = noop, onShown = noop, ...restOfProps } = $props();
+const paneState = initTabPaneState({
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    }
+});
+let isActiveState = $derived(paneState.root.isTabPaneActive(id));
+let classes = $derived(uniqueClsx('tab-pane', {
+    // The "fade" and "show" class is not needed because we are using the Svelte transition
+    active: isActiveState
+}, classValues));
+// The active class can only added or removed when the transition is complete.
+const handleShow = (event) => {
+    elementRef?.classList.add('active');
+    onShow(event);
+};
+const handleHide = (event) => {
+    elementRef?.classList.remove('active');
+    onHide(event);
+};
+</script>
+
+{#if isActiveState}
+    <div
+        aria-hidden={!isActiveState}
+        aria-labelledby={paneState.ariaLabelledBy}
+        bind:this={elementRef}
+        class={classes}
+        hidden={!isActiveState}
+        {id}
+        onintrostart={doFade ? handleShow : onShow}
+        onintroend={onShown}
+        onoutrostart={doFade ? handleHide : onHide}
+        onoutroend={onHidden}
+        role="tabpanel"
+        transition:fade={{ duration: doFade ? 500 : 0 }}
+        {...restOfProps}>
+        {@render children?.()}
+    </div>
+{/if}

package/dist/Tab/tab-pane.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Tab } from './index.js';
+/**
+ * ## Tab.Pane
+ * Content pane for a tab. Used inside Tab.Root.
+ *
+ * @example
+ * ```svelte
+ * <Tab.Pane id="home" isActive={true} doFade={true}>
+ * Content for home tab
+ * </Tab.Pane>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `doFade` (boolean): Optional. Whether to use fade transition. Defaults to false.
+ * - `id` (string): Required. ID matching the href of a Nav.Link.
+ * - `isActive` (boolean): Optional. Whether the pane is initially visible.
+ * - `onHide` (function): Optional. Callback when the pane is about to be hidden.
+ * - `onHidden` (function): Optional. Callback when the pane has been hidden.
+ * - `onShow` (function): Optional. Callback when the pane is about to be shown.
+ * - `onShown` (function): Optional. Callback when the pane has been shown.
+ */
+declare const TabPane: import("svelte").Component<Tab.PaneProps, {}, "elementRef">;
+type TabPane = ReturnType<typeof TabPane>;
+export default TabPane;

package/dist/Tab/tab.svelte

@@ -0,0 +1,63 @@
+<!--
+@component
+## Tab.Root
+Root component for tab content. Used with tabs navigation.
+
+@example
+```svelte
+<Tab.Root>
+    <Nav.Root data-testid="nav-tabs" itemStyle="tabs">
+        <Nav.Item>
+            <Nav.Link href="#home-tabpane" id="home-navlink" isActive={true}>Home</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+            <Nav.Link href="#profile-tabpane" id="profile-navlink">Profile</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+            <Nav.Link href="#contact-tabpane" id="contact-navlink">Contact</Nav.Link>
+        </Nav.Item>
+        <Nav.Item>
+            <Nav.Link href="#disabled-tabpane" id="disabled-navlink" isDisabled={true}>Disabled</Nav.Link>
+        </Nav.Item>
+    </Nav.Root>
+    <Tab.Content data-testid="tab-content-container">
+        <Tab.Pane data-testid="home-content" id="home-tabpane" isActive={true}>
+            <h5 class="mt-3">Home Content</h5>
+            <p>This is the home content panel.</p>
+        </Tab.Pane>
+        <Tab.Pane data-testid="profile-content" id="profile-tabpane">
+            <h5 class="mt-3">Profile Content</h5>
+            <p>This is the profile content panel.</p>
+        </Tab.Pane>
+        <Tab.Pane data-testid="contact-content" id="contact-tabpane">
+            <h5 class="mt-3">Contact Content</h5>
+            <p>This is the contact content panel.</p>
+        </Tab.Pane>
+        <Tab.Pane data-testid="disabled-content" id="disabled-tabpane">
+            <h5 class="mt-3">Disabled Content</h5>
+            <p>This is the disabled content panel.</p>
+        </Tab.Pane>
+    </Tab.Content>
+</Tab.Root>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes
+- `elementRef` (HTMLElement): Optional. Reference to the root DOM element
+- `id` (string): Optional. Unique ID for the root element. Defaults to `tab-{uid}`, where `uid` is a unique identifier.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { initTabRootState, TabRootState } from '../common/nav-tab.svelte.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 = `tab-${uid}`, ...restOfProps } = $props();
+const _rootState = initTabRootState({
+    get id() {
+        return id;
+    }
+});
+let classes = $derived(uniqueClsx(classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</div>