@winkintel/bootstrap-svelte 0.0.1

package/dist/Nav/nav-link.svelte

@@ -0,0 +1,77 @@
+<!--
+@component
+## Nav.Link
+Navigation link component typically used inside a Nav.Item.
+
+@example
+```svelte
+<Nav.Link href="#!" isActive={true}>Active Link</Nav.Link>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+- `href` (string): Optional. The URL to link to.
+- `id` (string): Optional. Unique ID for the navigation element. Defaults to `nav-{uid}`, where `uid` is a unique identifier.
+- `isActive` (boolean): Optional. Whether the link is active. If not supplied, the active state will be managed internally.
+- `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.
+-->
+<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), href = '#!', id = `nav-link-${uid}`, isActive, isDisabled = false, onclick = noop, role, ...restOfProps } = $props();
+const linkState = initNavLinkState({
+    get href() {
+        return href;
+    },
+    get id() {
+        return id;
+    },
+    get isActive() {
+        return isActive;
+    }
+});
+// If the link is a tab, we need to set the role to "tab", otherwise use the provided role.
+let defaultRole = $derived(linkState.isTab ? 'tab' : role);
+// If isActive is not provided, use the state from the linkState.
+let isActiveState = $derived(isActive !== undefined ? isActive : 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).
+const unset = Symbol('unset');
+let previousIsActive = unset;
+$effect(() => {
+    if (previousIsActive !== unset && previousIsActive !== isActive) {
+        if (linkState.isActive && !isActive) {
+            linkState.root.setNavLinkActive('');
+        }
+        else if (!linkState.isActive && isActive) {
+            linkState.onclick(new MouseEvent('click'));
+        }
+    }
+    previousIsActive = isActive;
+});
+</script>
+
+<a
+    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}
+    {href}
+    {id}
+    onclick={handleClick}
+    tabindex={isDisabled ? -1 : undefined}
+    role={defaultRole}
+    {...restOfProps}>
+    {@render children?.()}
+</a>

package/dist/Nav/nav-link.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Nav } from './index.js';
+/**
+ * ## Nav.Link
+ * Navigation link component typically used inside a Nav.Item.
+ *
+ * @example
+ * ```svelte
+ * <Nav.Link href="#!" isActive={true}>Active Link</Nav.Link>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `elementRef` (HTMLElement): Optional. Reference to the link DOM element.
+ * - `href` (string): Optional. The URL to link to.
+ * - `id` (string): Optional. Unique ID for the navigation element. Defaults to `nav-{uid}`, where `uid` is a unique identifier.
+ * - `isActive` (boolean): Optional. Whether the link is active. If not supplied, the active state will be managed internally.
+ * - `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.
+ */
+declare const NavLink: import("svelte").Component<Nav.LinkProps, {}, "elementRef">;
+type NavLink = ReturnType<typeof NavLink>;
+export default NavLink;

package/dist/Nav/nav.svelte

@@ -0,0 +1,93 @@
+<!--
+@component
+## Nav.Root
+Root navigation component that contains navigation items and links.
+
+@example
+```svelte
+<Nav.Root>
+    <Nav.Item>
+        <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+    </Nav.Item>
+    <Nav.Item>
+        <Nav.Link href="#!">Link</Nav.Link>
+    </Nav.Item>
+</Nav.Root>
+```
+
+#### Basic pills example
+```svelte
+<Nav.Root itemStyle="pills">
+    <Nav.Item>
+        <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+    </Nav.Item>
+    <Nav.Item>
+        <Nav.Link href="#!">Link</Nav.Link>
+    </Nav.Item>
+</Nav.Root>
+```
+
+#### Basic tabs example
+```svelte
+<Nav.Root itemStyle="tabs">
+    <Nav.Item>
+        <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+    </Nav.Item>
+    <Nav.Item>
+        <Nav.Link href="#!">Link</Nav.Link>
+    </Nav.Item>
+</Nav.Root>
+```
+
+### Props
+- `ariaOrientation` (string | null): Optional. Orientation for ARIA (horizontal or vertical). Defaults to `null`, which means no specific orientation is set.
+- `class` (string): Optional. Additional CSS classes. Defaults to an empty string.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element. Defaults to `null`.
+- `elementType` (string): Optional. Element type to render, one of: 'nav', 'ol', 'ul'. Defaults to 'ul'.
+- `horizontalAlignment` (string): Optional. Horizontal alignment, one of: 'start', 'center', 'end'. Defaults to 'start'.
+- `id` (string): Optional. Unique ID for the navigation element. Defaults to `nav-{uid}`, where `uid` is a unique identifier.
+- `itemLayout` (string): Optional. Item layout, one of: 'none', 'fill', 'justified'. Defaults to 'none'.
+- `itemStyle` (string): Optional. Item style, one of: 'none', 'pills', 'tabs', 'underline'. Defaults to 'none'.
+- `role` (string): Optional. ARIA role. If not set, defaults to 'navigation' for non-nav elements and 'tablist' for tabs.
+- `verticalBreakpoint` (string): Optional. Breakpoint for vertical orientation, one of: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'. Defaults to `null`, which means no vertical orientation is applied.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { initNavRootState, NavRootState } from '../common/nav-tab.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { ariaOrientation, children, class: classValues, elementRef = $bindable(null), elementType = 'ul', horizontalAlignment = 'start', id = `nav-${uid}`, itemLayout, itemStyle, role, verticalBreakpoint, ...restOfProps } = $props();
+let isVertical = $derived(!!verticalBreakpoint); // !! to convert to boolean
+// If role is not explicitly set and element type is not 'nav', default to navigation role
+let defaultRole = $derived(role ? role : itemStyle === 'tabs' ? 'tablist' : elementType !== 'nav' ? 'navigation' : undefined);
+// If ariaOrientation is not provided and verticalBreakpoint is defined, set it to 'vertical'. Otherwise, use the provided ariaOrientation.
+let ariaOrientationDerived = $derived(!ariaOrientation && isVertical ? 'vertical' : ariaOrientation);
+const _rootState = initNavRootState({
+    get id() {
+        return id;
+    }
+});
+// Build class string
+let classes = $derived(uniqueClsx('nav', {
+    'flex-column': verticalBreakpoint === 'xs',
+    [`flex-${verticalBreakpoint}-column`]: isVertical && verticalBreakpoint !== 'xs',
+    'justify-content-start': horizontalAlignment === 'start',
+    'justify-content-center': horizontalAlignment === 'center',
+    'justify-content-end': horizontalAlignment === 'end',
+    'nav-fill': itemLayout === 'fill',
+    'nav-justified': itemLayout === 'justified',
+    'nav-pills': itemStyle === 'pills',
+    'nav-tabs': itemStyle === 'tabs',
+    'nav-underline': itemStyle === 'underline'
+}, classValues));
+</script>
+
+<svelte:element
+    this={elementType}
+    aria-orientation={ariaOrientationDerived}
+    bind:this={elementRef}
+    class={classes}
+    {id}
+    role={defaultRole}
+    {...restOfProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/Nav/nav.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Nav } from './index.js';
+/**
+ * ## Nav.Root
+ * Root navigation component that contains navigation items and links.
+ *
+ * @example
+ * ```svelte
+ * <Nav.Root>
+ * <Nav.Item>
+ *     <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+ * </Nav.Item>
+ * <Nav.Item>
+ *     <Nav.Link href="#!">Link</Nav.Link>
+ * </Nav.Item>
+ * </Nav.Root>
+ * ```
+ *
+ * #### Basic pills example
+ * ```svelte
+ * <Nav.Root itemStyle="pills">
+ * <Nav.Item>
+ *     <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+ * </Nav.Item>
+ * <Nav.Item>
+ *     <Nav.Link href="#!">Link</Nav.Link>
+ * </Nav.Item>
+ * </Nav.Root>
+ * ```
+ *
+ * #### Basic tabs example
+ * ```svelte
+ * <Nav.Root itemStyle="tabs">
+ * <Nav.Item>
+ *     <Nav.Link href="#!" isActive={true}>Active</Nav.Link>
+ * </Nav.Item>
+ * <Nav.Item>
+ *     <Nav.Link href="#!">Link</Nav.Link>
+ * </Nav.Item>
+ * </Nav.Root>
+ * ```
+ *
+ * ### Props
+ * - `ariaOrientation` (string | null): Optional. Orientation for ARIA (horizontal or vertical). Defaults to `null`, which means no specific orientation is set.
+ * - `class` (string): Optional. Additional CSS classes. Defaults to an empty string.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element. Defaults to `null`.
+ * - `elementType` (string): Optional. Element type to render, one of: 'nav', 'ol', 'ul'. Defaults to 'ul'.
+ * - `horizontalAlignment` (string): Optional. Horizontal alignment, one of: 'start', 'center', 'end'. Defaults to 'start'.
+ * - `id` (string): Optional. Unique ID for the navigation element. Defaults to `nav-{uid}`, where `uid` is a unique identifier.
+ * - `itemLayout` (string): Optional. Item layout, one of: 'none', 'fill', 'justified'. Defaults to 'none'.
+ * - `itemStyle` (string): Optional. Item style, one of: 'none', 'pills', 'tabs', 'underline'. Defaults to 'none'.
+ * - `role` (string): Optional. ARIA role. If not set, defaults to 'navigation' for non-nav elements and 'tablist' for tabs.
+ * - `verticalBreakpoint` (string): Optional. Breakpoint for vertical orientation, one of: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'. Defaults to `null`, which means no vertical orientation is applied.
+ */
+declare const Nav: import("svelte").Component<Nav.RootProps, {}, "elementRef">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/Nav/types.d.ts

@@ -0,0 +1,26 @@
+import type { AnchorElement, BaseBreakpoint, ListItemElement, UListElement } from '../common/types.js';
+export type NavElementType = 'nav' | 'ol' | 'ul';
+export type NavHorizontalAlignment = 'start' | 'center' | 'end';
+export type NavOrientationType = 'horizontal' | 'vertical';
+export type NavRole = 'navigation' | 'tablist';
+export type NavVerticalBreakpoint = BaseBreakpoint;
+export type NavItemLayout = 'fill' | 'justified';
+export type NavItemStyle = 'pills' | 'tabs' | 'underline';
+export type NavLinkRole = 'button' | 'tab';
+export type NavRootProps = UListElement & {
+    ariaOrientation?: NavOrientationType;
+    elementType?: NavElementType;
+    horizontalAlignment?: NavHorizontalAlignment;
+    itemLayout?: NavItemLayout;
+    itemStyle?: NavItemStyle;
+    role?: NavRole | null;
+    verticalBreakpoint?: NavVerticalBreakpoint;
+};
+export type NavItemProps = ListItemElement & {};
+export type NavLinkProps = AnchorElement & {
+    href?: HTMLAnchorElement['href'];
+    isActive?: boolean;
+    isDisabled?: boolean;
+    onclick?: EventListener;
+    role?: NavLinkRole;
+};

package/dist/Nav/types.js

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

package/dist/Navbar/composition.d.ts

@@ -0,0 +1,8 @@
+export { default as Brand } from './navbar-brand.svelte';
+export { default as Collapse } from './navbar-collapse.svelte';
+export { default as Nav } from './navbar-nav.svelte';
+export { default as Text } from './navbar-text.svelte';
+export { default as TogglerIcon } from './navbar-toggler-icon.svelte';
+export { default as Toggler } from './navbar-toggler.svelte';
+export { default as Root } from './navbar.svelte';
+export type { NavbarBrandProps as BrandProps, NavbarCollapseProps as CollapseProps, NavbarNavProps as NavProps, NavbarRootProps as RootProps, NavbarTextProps as TextProps, NavbarTogglerIconProps as TogglerIconProps, NavbarTogglerProps as TogglerProps } from './types.js';

package/dist/Navbar/composition.js

@@ -0,0 +1,7 @@
+export { default as Brand } from './navbar-brand.svelte';
+export { default as Collapse } from './navbar-collapse.svelte';
+export { default as Nav } from './navbar-nav.svelte';
+export { default as Text } from './navbar-text.svelte';
+export { default as TogglerIcon } from './navbar-toggler-icon.svelte';
+export { default as Toggler } from './navbar-toggler.svelte';
+export { default as Root } from './navbar.svelte';

package/dist/Navbar/index.d.ts

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

package/dist/Navbar/index.js

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

package/dist/Navbar/navbar-brand.svelte

@@ -0,0 +1,55 @@
+<!--
+@component
+## Navbar.Brand
+Component for displaying the company, product, or project name/logo in the navbar.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### With image logo
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">
+        <img src="/logo.svg" alt="Brand Logo" height="30" class="d-inline-block align-text-top me-2" />
+        My Brand
+    </Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+### Props
+- `children`: Optional. Content to render inside the brand link.
+- `class` (string): Optional. Additional CSS classes to apply to the brand link.
+- `elementRef` (HTMLAnchorElement): Optional. Reference to the DOM anchor element.
+- `href` (string): Optional. URL that the brand links to. Defaults to '#!'.
+- `id` (string): Optional. Unique ID for the brand element. Defaults to `navbar-brand-{uid}`.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), href = '#!', id = `navbar-brand-${uid}`, ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('navbar-brand', classValues));
+</script>
+
+<a bind:this={elementRef} class={classes} {href} {id} {...restOfProps}>
+    {@render children?.()}
+</a>

package/dist/Navbar/navbar-brand.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Navbar } from './index.js';
+/**
+ * ## Navbar.Brand
+ * Component for displaying the company, product, or project name/logo in the navbar.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### With image logo
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">
+ *     <img src="/logo.svg" alt="Brand Logo" height="30" class="d-inline-block align-text-top me-2" />
+ *     My Brand
+ * </Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * ### Props
+ * - `children`: Optional. Content to render inside the brand link.
+ * - `class` (string): Optional. Additional CSS classes to apply to the brand link.
+ * - `elementRef` (HTMLAnchorElement): Optional. Reference to the DOM anchor element.
+ * - `href` (string): Optional. URL that the brand links to. Defaults to '#!'.
+ * - `id` (string): Optional. Unique ID for the brand element. Defaults to `navbar-brand-{uid}`.
+ */
+declare const NavbarBrand: import("svelte").Component<Navbar.BrandProps, {}, "elementRef">;
+type NavbarBrand = ReturnType<typeof NavbarBrand>;
+export default NavbarBrand;

package/dist/Navbar/navbar-collapse.svelte

@@ -0,0 +1,76 @@
+<!--
+@component
+## Navbar.Collapse
+Collapsible container for navbar content that toggles when the navbar toggler is clicked.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+                <Nav.Link href="/about">About</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### With event handlers
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse
+        onExpand={() => console.log('Expanding')}
+        onExpanded={() => console.log('Expanded')}
+        onCollapse={() => console.log('Collapsing')}
+        onCollapsed={() => console.log('Collapsed')}>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/">Home</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+### Props
+- `children`: Optional. Content to render inside the collapsible container.
+- `class` (string): Optional. Additional CSS classes to apply to the container.
+- `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+- `id` (string): Optional. Unique ID for the container. Defaults to `navbar-collapse-{uid}`.
+- `onCollapse` (function): Optional. Handler called when the container starts collapsing.
+- `onCollapsed` (function): Optional. Handler called when the container has finished collapsing.
+- `onExpand` (function): Optional. Handler called when the container starts expanding.
+- `onExpanded` (function): Optional. Handler called when the container has finished expanding.
+-->
+<script lang="ts">import { noop, uniqueClsx } from '../common/index.js';
+import { initNavbarCollapseState, NavbarCollapseState } from '../common/navbar-offcanvas.svelte.js';
+import { Collapse } from '../index.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `navbar-collapse-${uid}`, onCollapse: _onCollapse = noop, onCollapsed = noop, onExpand: _onExpand = noop, onExpanded: _onExpanded = noop, ...restOfProps } = $props();
+const collapseState = initNavbarCollapseState({
+    get id() {
+        return id;
+    }
+});
+let classes = $derived(uniqueClsx('navbar-collapse', classValues));
+let transitionDuration = $derived(collapseState.root.transitionDuration);
+let isExpandedState = $derived(collapseState.isExpanded);
+function handleOnCollapsed(event) {
+    // This will ensure that not transition animation will occur when the Navbar is expanded...
+    collapseState.root.transitionDuration = 0;
+    onCollapsed(event);
+}
+</script>
+
+<Collapse bind:elementRef class={classes} {id} isExpanded={isExpandedState} {transitionDuration} onCollapsed={handleOnCollapsed} {...restOfProps}>
+    {@render children?.()}
+</Collapse>

package/dist/Navbar/navbar-collapse.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Navbar } from './index.js';
+/**
+ * ## Navbar.Collapse
+ * Collapsible container for navbar content that toggles when the navbar toggler is clicked.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *         <Nav.Item>
+ *             <Nav.Link href="/about">About</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### With event handlers
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse
+ *     onExpand={() => console.log('Expanding')}
+ *     onExpanded={() => console.log('Expanded')}
+ *     onCollapse={() => console.log('Collapsing')}
+ *     onCollapsed={() => console.log('Collapsed')}>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Home</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * ### Props
+ * - `children`: Optional. Content to render inside the collapsible container.
+ * - `class` (string): Optional. Additional CSS classes to apply to the container.
+ * - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
+ * - `id` (string): Optional. Unique ID for the container. Defaults to `navbar-collapse-{uid}`.
+ * - `onCollapse` (function): Optional. Handler called when the container starts collapsing.
+ * - `onCollapsed` (function): Optional. Handler called when the container has finished collapsing.
+ * - `onExpand` (function): Optional. Handler called when the container starts expanding.
+ * - `onExpanded` (function): Optional. Handler called when the container has finished expanding.
+ */
+declare const NavbarCollapse: import("svelte").Component<Navbar.CollapseProps, {}, "elementRef">;
+type NavbarCollapse = ReturnType<typeof NavbarCollapse>;
+export default NavbarCollapse;

package/dist/Navbar/navbar-nav.svelte

@@ -0,0 +1,66 @@
+<!--
+@component
+## Navbar.Nav
+Container for navigation items within a navbar, providing proper styling and spacing.
+
+@example
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav>
+            <Nav.Item>
+                <Nav.Link href="/" isActive={true}>Home</Nav.Link>
+            </Nav.Item>
+            <Nav.Item>
+                <Nav.Link href="/about">About</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+        <Navbar.Nav class="ms-auto">
+            <Nav.Item>
+                <Nav.Link href="/login">Login</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+#### With vertical scrolling
+```svelte
+<Navbar.Root>
+    <Navbar.Brand href="/">My Brand</Navbar.Brand>
+    <Navbar.Toggle />
+    <Navbar.Collapse>
+        <Navbar.Nav isVerticalScrolling={true} style="max-height:200px;">
+            <Nav.Item>
+                <Nav.Link href="/">Item 1</Nav.Link>
+            </Nav.Item>
+        </Navbar.Nav>
+    </Navbar.Collapse>
+</Navbar.Root>
+```
+
+### Props
+- `children`: Optional. Content to render inside the navigation container.
+- `class` (string): Optional. Additional CSS classes to apply to the navigation container.
+- `elementRef` (HTMLUListElement): Optional. Reference to the DOM ul element.
+- `id` (string): Optional. Unique ID for the navigation container. Defaults to `navbar-{uid}`.
+- `isVerticalScrolling` (boolean): Optional. Enables vertical scrolling for the navigation items. Defaults to false.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/index.js';
+import { initNavRootState, NavRootState } from '../common/nav-tab.svelte.js';
+// Generate a unique ID for the component, in case one is not provided...
+const uid = $props.id();
+let { children, class: classValues, elementRef = $bindable(null), id = `navbar-${uid}`, isVerticalScrolling = false, ...restOfProps } = $props();
+const _rootState = initNavRootState({
+    get id() {
+        return id;
+    }
+});
+let classes = $derived(uniqueClsx('navbar-nav', { 'navbar-scrolling': isVerticalScrolling }, classValues));
+</script>
+
+<ul bind:this={elementRef} class={classes} {id} {...restOfProps}>
+    {@render children?.()}
+</ul>

package/dist/Navbar/navbar-nav.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Navbar } from './index.js';
+/**
+ * ## Navbar.Nav
+ * Container for navigation items within a navbar, providing proper styling and spacing.
+ *
+ * @example
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav>
+ *         <Nav.Item>
+ *             <Nav.Link href="/" isActive={true}>Home</Nav.Link>
+ *         </Nav.Item>
+ *         <Nav.Item>
+ *             <Nav.Link href="/about">About</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ *     <Navbar.Nav class="ms-auto">
+ *         <Nav.Item>
+ *             <Nav.Link href="/login">Login</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * #### With vertical scrolling
+ * ```svelte
+ * <Navbar.Root>
+ * <Navbar.Brand href="/">My Brand</Navbar.Brand>
+ * <Navbar.Toggle />
+ * <Navbar.Collapse>
+ *     <Navbar.Nav isVerticalScrolling={true} style="max-height:200px;">
+ *         <Nav.Item>
+ *             <Nav.Link href="/">Item 1</Nav.Link>
+ *         </Nav.Item>
+ *     </Navbar.Nav>
+ * </Navbar.Collapse>
+ * </Navbar.Root>
+ * ```
+ *
+ * ### Props
+ * - `children`: Optional. Content to render inside the navigation container.
+ * - `class` (string): Optional. Additional CSS classes to apply to the navigation container.
+ * - `elementRef` (HTMLUListElement): Optional. Reference to the DOM ul element.
+ * - `id` (string): Optional. Unique ID for the navigation container. Defaults to `navbar-{uid}`.
+ * - `isVerticalScrolling` (boolean): Optional. Enables vertical scrolling for the navigation items. Defaults to false.
+ */
+declare const NavbarNav: import("svelte").Component<Navbar.NavProps, {}, "elementRef">;
+type NavbarNav = ReturnType<typeof NavbarNav>;
+export default NavbarNav;