@winkintel/bootstrap-svelte 0.0.1

package/dist/Portal/portal.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { PortalRootProps } from './types.js';
+/**
+ * ## Portal
+ * Render a component into a different part of the DOM tree.
+ *
+ * @example
+ * ```svelte
+ * <Portal target="body">
+ * <div>
+ *     <h1>Hello from the portal!</h1>
+ *     <p>This content is rendered as a child of the <code>body</code> element.</p>
+ * </div>
+ * </Portal>
+ * ```
+ *
+ * #### Disabled prop
+ * ```svelte
+ * <Portal target="body" disabled={true}>
+ * <div>
+ *     <p>This content will be rendered inline instead of as a child of the <code>body</code> element.</p>
+ * </div>
+ * </Portal>
+ * ```
+ *
+ * ### Props
+ * - `children`: The content to render inside the portal. This can be any valid Svelte component or HTML element.
+ * - `disabled`: If true, the portal will not be rendered. This is useful for conditionally rendering the portal based on some state.
+ * - `target`: The target element to render the portal into. This can be a string selector or an element reference.
+ */
+declare const Portal: import("svelte").Component<PortalRootProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/Portal/types.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+export type PortalRootProps = {
+    children: Snippet;
+    disabled?: boolean;
+    target: string | HTMLElement;
+};

package/dist/Portal/types.js

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

package/dist/Progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './progress-bar.svelte';
+export { default as ProgressStacked } from './progress-stacked.svelte';
+export * from './types.js';

package/dist/Progress/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './progress-bar.svelte';
+export { default as ProgressStacked } from './progress-stacked.svelte';
+export * from './types.js';

package/dist/Progress/progress-bar.svelte

@@ -0,0 +1,101 @@
+<!--
+@component
+## ProgressBar
+A visual indicator component that displays progress towards completion of a task or operation.
+Supports percentage-based progress visualization with customizable styling, theming, and accessibility attributes.
+
+@example
+```svelte
+<ProgressBar valueNow={60} />
+```
+
+### Variants
+```svelte
+<ProgressBar valueNow={25} backgroundColorVariant="success" />
+<ProgressBar valueNow={50} backgroundColorVariant="info" />
+<ProgressBar valueNow={75} backgroundColorVariant="warning" />
+<ProgressBar valueNow={100} backgroundColorVariant="danger" />
+
+<ProgressBar valueNow={25}>25%</ProgressBar>
+
+<ProgressStacked>
+    <ProgressBar valueNow={30} backgroundColorVariant="success" />
+    <ProgressBar valueNow={20} backgroundColorVariant="warning" />
+</ProgressStacked>
+```
+### Props
+- `ariaLabel` (string): Accessible label for screen readers. Defaults to 'Progress Bar'.
+- `backgroundColorVariant` (string): Bootstrap color variant for the progress bar (primary, success, warning, etc.).
+- `barProps` (object): Additional props to pass to the inner progress bar element.
+- `class` (string): Additional CSS classes to apply to the progress container.
+- `elementRef` (HTMLDivElement): Reference to the underlying DOM element.
+- `style` (string): CSS styles to apply to the progress container.
+- `valueMax` (number): Maximum value for the progress bar. Defaults to 100.
+- `valueMin` (number): Minimum value for the progress bar. Defaults to 0.
+- `valueNow` (number): Current progress value. Defaults to 0.
+-->
+<script lang="ts">import { fromStyle, toStyle, uniqueClsx } from '../common/css.js';
+import { initProgressState, ProgressState } from './progress.svelte.js';
+let { ariaLabel = 'Progress Bar', backgroundColorVariant, children, class: classValues, barProps = {}, elementRef = $bindable(null), style, valueMax = 100, valueMin = 0, valueNow = 0, ...restOfProps } = $props();
+let { class: barClassValues, isAnimated = false, isStriped = false, style: barStyle, ...restOfBarProps } = $derived(barProps);
+// Initialize state and detect if this progress bar is part of a stacked container
+const barState = initProgressState({
+    get barProps() {
+        return barProps;
+    }
+});
+// Determine where to apply width - when in a stacked layout, width is on the root element,
+// otherwise it's applied to the inner bar element
+let widthPlacement = $derived(barState.isStacked ? 'root' : 'bar');
+// Root element...
+let classes = $derived(uniqueClsx('progress', classValues));
+// Conditionally apply width to the root element's style if this bar is part of a stacked layout
+let styles = $derived.by(() => {
+    if (widthPlacement === 'root') {
+        let cssProps = fromStyle(style);
+        return toStyle({
+            ...cssProps,
+            width: `${valueNow}%`
+        });
+    }
+    return style;
+});
+// Bar element...
+// Apply styles and classes to the inner bar element...
+let barClasses = $derived(uniqueClsx('progress-bar', backgroundColorVariant && `bg-${backgroundColorVariant}`, {
+    'progress-bar-animated': isAnimated,
+    'progress-bar-striped': isStriped
+}, barClassValues));
+// Apply width to the inner bar element when not in a stacked layout
+let barStyles = $derived.by(() => {
+    if (widthPlacement === 'bar') {
+        let cssProps = fromStyle(barStyle);
+        return toStyle({
+            ...cssProps,
+            width: `${valueNow}%`
+        });
+    }
+    return barStyle;
+});
+// Apply Bootstrap's theme attribute for proper text contrast on dark backgrounds
+// This ensures text remains visible when placed inside colored progress bars
+let theme = $derived.by(() => {
+    const darkVariants = ['dark', 'primary', 'secondary', 'success', 'danger'];
+    return darkVariants.includes(backgroundColorVariant ?? '') ? 'dark' : undefined;
+});
+</script>
+
+<div
+    aria-label={ariaLabel}
+    aria-valuemax={valueMax}
+    aria-valuemin={valueMin}
+    aria-valuenow={valueNow}
+    bind:this={elementRef}
+    class={classes}
+    role="progressbar"
+    style={styles}
+    {...restOfProps}>
+    <div class={barClasses} data-bs-theme={theme} style={barStyles} {...restOfBarProps}>
+        {@render children?.()}
+    </div>
+</div>

package/dist/Progress/progress-bar.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { ProgressProps } from './index.js';
+/**
+ * ## ProgressBar
+ * A visual indicator component that displays progress towards completion of a task or operation.
+ * Supports percentage-based progress visualization with customizable styling, theming, and accessibility attributes.
+ *
+ * @example
+ * ```svelte
+ * <ProgressBar valueNow={60} />
+ * ```
+ *
+ * ### Variants
+ * ```svelte
+ * <ProgressBar valueNow={25} backgroundColorVariant="success" />
+ * <ProgressBar valueNow={50} backgroundColorVariant="info" />
+ * <ProgressBar valueNow={75} backgroundColorVariant="warning" />
+ * <ProgressBar valueNow={100} backgroundColorVariant="danger" />
+ *
+ * <ProgressBar valueNow={25}>25%</ProgressBar>
+ *
+ * <ProgressStacked>
+ * <ProgressBar valueNow={30} backgroundColorVariant="success" />
+ * <ProgressBar valueNow={20} backgroundColorVariant="warning" />
+ * </ProgressStacked>
+ * ```
+ * ### Props
+ * - `ariaLabel` (string): Accessible label for screen readers. Defaults to 'Progress Bar'.
+ * - `backgroundColorVariant` (string): Bootstrap color variant for the progress bar (primary, success, warning, etc.).
+ * - `barProps` (object): Additional props to pass to the inner progress bar element.
+ * - `class` (string): Additional CSS classes to apply to the progress container.
+ * - `elementRef` (HTMLDivElement): Reference to the underlying DOM element.
+ * - `style` (string): CSS styles to apply to the progress container.
+ * - `valueMax` (number): Maximum value for the progress bar. Defaults to 100.
+ * - `valueMin` (number): Minimum value for the progress bar. Defaults to 0.
+ * - `valueNow` (number): Current progress value. Defaults to 0.
+ */
+declare const ProgressBar: import("svelte").Component<ProgressProps, {}, "elementRef">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/Progress/progress-stacked.svelte

@@ -0,0 +1,34 @@
+<!--
+@component
+## ProgressStacked
+A container component that enables multiple progress bars to be stacked horizontally in a single visual element.
+When progress bars are placed within this component, they automatically adapt their styling to function as part
+of a stacked group rather than individual progress elements.
+
+Note: This component provides visual grouping without requiring manual style adjustments or explicit parent-child prop
+passing - child ProgressBar components automatically detect they're within a stacked context.
+
+@example
+```svelte
+<ProgressStacked>
+    <ProgressBar value={30} colorVariant="success" striped />
+    <ProgressBar value={20} colorVariant="warning" />
+    <ProgressBar value={10} colorVariant="danger" animated />
+</ProgressStacked>
+```
+### Props
+- `class` (string): Optional. Additional CSS classes to apply to the container.
+- `elementRef` (HTMLDivElement): Optional. Reference to the underlying DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { initProgressStackedState } from './progress.svelte.js';
+let { children, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
+let classes = $derived(uniqueClsx('progress-stacked', classValues));
+// Initialize context for child ProgressBar components to detect they're within a stacked container
+// This enables automatic layout adjustments without requiring explicit parent-child prop passing
+initProgressStackedState({});
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Progress/progress-stacked.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+ * ## ProgressStacked
+ * A container component that enables multiple progress bars to be stacked horizontally in a single visual element.
+ * When progress bars are placed within this component, they automatically adapt their styling to function as part
+ * of a stacked group rather than individual progress elements.
+ *
+ * Note: This component provides visual grouping without requiring manual style adjustments or explicit parent-child prop
+ * passing - child ProgressBar components automatically detect they're within a stacked context.
+ *
+ * @example
+ * ```svelte
+ * <ProgressStacked>
+ * <ProgressBar value={30} colorVariant="success" striped />
+ * <ProgressBar value={20} colorVariant="warning" />
+ * <ProgressBar value={10} colorVariant="danger" animated />
+ * </ProgressStacked>
+ * ```
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes to apply to the container.
+ * - `elementRef` (HTMLDivElement): Optional. Reference to the underlying DOM element.
+ */
+declare const ProgressStacked: import("svelte").Component<import("../index.js").DivElement, {}, "elementRef">;
+type ProgressStacked = ReturnType<typeof ProgressStacked>;
+export default ProgressStacked;

package/dist/Progress/progress.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { ProgressProps, ProgressStackedProps } from './types.js';
+/**
+ * Manages state for a stacked progress component that can contain multiple
+ * progress bars aligned horizontally in the same container
+ */
+export declare class ProgressStackedState {
+    readonly props: ProgressStackedProps;
+    constructor(props: ProgressStackedProps);
+}
+/**
+ * Manages state for the progress components and it's child progress bar component,
+ * which can be used standalone or as part of a stacked progress group
+ */
+export declare class ProgressState {
+    readonly props: ProgressProps;
+    readonly root: ProgressStackedState | null;
+    readonly isStacked: boolean;
+    constructor(props: ProgressProps, root?: ProgressStackedState | null);
+}
+/**
+ * Initializes a stacked progress context and registers it for child components
+ * to discover. Any ProgressBar components rendered within this context will
+ * automatically detect they are part of a stacked group.
+ */
+export declare function initProgressStackedState(props: ProgressStackedProps): ProgressStackedState;
+/**
+ * Initializes a progress bar state, automatically detecting if it's within
+ * a stacked progress context. This allows the same ProgressBar component
+ * to be used both as a standalone bar or as part of a stacked group.
+ */
+export declare function initProgressState(props: ProgressProps): ProgressState;

package/dist/Progress/progress.svelte.js

@@ -0,0 +1,52 @@
+import { Context } from '../common/index.js';
+/**
+ * Manages state for a stacked progress component that can contain multiple
+ * progress bars aligned horizontally in the same container
+ */
+export class ProgressStackedState {
+    props;
+    constructor(props) {
+        this.props = props;
+    }
+}
+/**
+ * Manages state for the progress components and it's child progress bar component,
+ * which can be used standalone or as part of a stacked progress group
+ */
+export class ProgressState {
+    props;
+    root;
+    // Reactive state to track whether this progress bar is part of a stacked group
+    isStacked = $state(false);
+    constructor(props, root = null) {
+        this.props = props;
+        this.root = root;
+        this.isStacked = this.root !== null;
+    }
+}
+// Context provides a way for child progress bars to discover if they're
+// inside a stacked container without explicit prop passing
+const ProgressStackedContext = new Context('progress-stacked');
+/**
+ * Initializes a stacked progress context and registers it for child components
+ * to discover. Any ProgressBar components rendered within this context will
+ * automatically detect they are part of a stacked group.
+ */
+export function initProgressStackedState(props) {
+    const rootState = new ProgressStackedState(props);
+    return ProgressStackedContext.set(rootState);
+}
+/**
+ * Initializes a progress bar state, automatically detecting if it's within
+ * a stacked progress context. This allows the same ProgressBar component
+ * to be used both as a standalone bar or as part of a stacked group.
+ */
+export function initProgressState(props) {
+    if (ProgressStackedContext.exists()) {
+        const rootState = ProgressStackedContext.get();
+        return new ProgressState(props, rootState);
+    }
+    else {
+        return new ProgressState(props);
+    }
+}

package/dist/Progress/types.d.ts

@@ -0,0 +1,40 @@
+import type { BaseColorVariant, DivElement } from '../common/types.js';
+/**
+ * Color variants for the Progress component's background.
+ * Uses the same color scheme as Bootstrap's base color variants.
+ */
+export type ProgressBackgroundColorVariant = BaseColorVariant;
+/**
+ * Props for stacked progress bars, allowing multiple bars to be
+ * combined in a single progress component.
+ */
+export type ProgressStackedProps = DivElement;
+/**
+ * Props for the main Progress component.
+ * Follows the WAI-ARIA pattern for progress indicators with appropriate
+ * accessibility attributes (min, max, now).
+ */
+export type ProgressProps = DivElement & {
+    /** Accessible label for screen readers describing the progress bar */
+    ariaLabel?: string;
+    /** Color variant for the progress track (background) */
+    backgroundColorVariant?: ProgressBackgroundColorVariant;
+    /** Props passed to the inner progress bar element */
+    barProps?: ProgressBarProps;
+    /** Maximum value of the progress bar (defaults to 100) */
+    valueMax?: number;
+    /** Minimum value of the progress bar (defaults to 0) */
+    valueMin?: number;
+    /** Current value of the progress bar, used to calculate the percentage completion */
+    valueNow?: number;
+};
+/**
+ * Props for the inner bar element of the Progress component.
+ * Allows customization of the actual progress indicator.
+ */
+export type ProgressBarProps = DivElement & {
+    /** Apply a striped pattern to the progress bar */
+    isStriped?: boolean;
+    /** Apply an animated effect to the striped progress bar */
+    isAnimated?: boolean;
+};

package/dist/Progress/types.js

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

package/dist/Row/index.d.ts

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

package/dist/Row/index.js

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

package/dist/Row/row.svelte

@@ -0,0 +1,75 @@
+<!--
+@component
+## Row
+A component that implements Bootstrap's grid row functionality.
+
+@example
+```svelte
+<Row>
+    <Col>Content</Col>
+</Row>
+```
+
+#### With column count
+```svelte
+<Row cols={3}>
+    <Col>Content</Col>
+    <Col>Content</Col>
+    <Col>Content</Col>
+</Row>
+```
+
+#### With responsive column count
+```svelte
+<Row cols={{ xs: 1, sm: 2, md: 3 }}>
+    <Col>Content</Col>
+    <Col>Content</Col>
+    <Col>Content</Col>
+</Row>
+```
+
+#### With auto column count
+```svelte
+<Row cols="auto">
+    <Col>Content</Col>
+    <Col>Content</Col>
+</Row>
+```
+
+### Props
+- `class` (string): Optional. Additional CSS classes.
+- `cols` (RowColsMap | OneToSix | 'auto'): Optional. Define the number of equal-width columns in the row. Can be a number between 1 and 6, 'auto', or a breakpoint map.
+- `elementRef` (HTMLElement): Optional. Reference to the row DOM element.
+-->
+<script lang="ts">import { uniqueClsx } from '../common/css.js';
+let { children, class: classValues, cols, elementRef = $bindable(null), ...restOfProps } = $props();
+// Generate cols classes based on the cols prop
+let colsClasses = $derived.by(() => {
+    // If cols is  a string (e.g., 'auto'), return a single row-cols-auto class
+    if (typeof cols === 'string' && cols === 'auto') {
+        return [`row-cols-${cols}`];
+    }
+    // If cols is a number (OneToSix type), generate a simple row-cols-n class
+    if (typeof cols === 'number') {
+        return [`row-cols-${cols}`];
+    }
+    // If cols is an object (RowColsMap type), generate breakpoint-specific classes
+    else if (cols && typeof cols === 'object') {
+        return Object.entries(cols).map(([breakpoint, value]) => {
+            // If the breakpoint is 'xs', return 'row-col-{value}'
+            if (breakpoint === 'xs') {
+                return `row-col-${value}`;
+            }
+            // Otherwise, return 'row-cols-{breakpoint}-{value}'
+            return `row-cols-${breakpoint}-${value}`;
+        });
+    }
+    // Default: no row-cols classes
+    return [];
+});
+let classes = $derived(uniqueClsx('row', ...colsClasses, classValues));
+</script>
+
+<div bind:this={elementRef} class={classes} {...restOfProps}>
+    {@render children?.()}
+</div>

package/dist/Row/row.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { RowRootProps } from './types.js';
+/**
+ * ## Row
+ * A component that implements Bootstrap's grid row functionality.
+ *
+ * @example
+ * ```svelte
+ * <Row>
+ * <Col>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With column count
+ * ```svelte
+ * <Row cols={3}>
+ * <Col>Content</Col>
+ * <Col>Content</Col>
+ * <Col>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With responsive column count
+ * ```svelte
+ * <Row cols={{ xs: 1, sm: 2, md: 3 }}>
+ * <Col>Content</Col>
+ * <Col>Content</Col>
+ * <Col>Content</Col>
+ * </Row>
+ * ```
+ *
+ * #### With auto column count
+ * ```svelte
+ * <Row cols="auto">
+ * <Col>Content</Col>
+ * <Col>Content</Col>
+ * </Row>
+ * ```
+ *
+ * ### Props
+ * - `class` (string): Optional. Additional CSS classes.
+ * - `cols` (RowColsMap | OneToSix | 'auto'): Optional. Define the number of equal-width columns in the row. Can be a number between 1 and 6, 'auto', or a breakpoint map.
+ * - `elementRef` (HTMLElement): Optional. Reference to the row DOM element.
+ */
+declare const Row: import("svelte").Component<RowRootProps, {}, "elementRef">;
+type Row = ReturnType<typeof Row>;
+export default Row;

package/dist/Row/types.d.ts

@@ -0,0 +1,12 @@
+import type { DivElement, OneToSix } from '../common/types.js';
+export type RowColsMap = {
+    xs?: OneToSix;
+    sm?: OneToSix;
+    md?: OneToSix;
+    lg?: OneToSix;
+    xl?: OneToSix;
+    xxl?: OneToSix;
+};
+export type RowRootProps = DivElement & {
+    cols?: RowColsMap | OneToSix | 'auto';
+};

package/dist/Row/types.js

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

package/dist/Scrollspy/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scrollspy-attachment.svelte.js';
+export * from './types.js';

package/dist/Scrollspy/index.js

@@ -0,0 +1,2 @@
+export * from './scrollspy-attachment.svelte.js';
+export * from './types.js';

package/dist/Scrollspy/scrollspy-attachment.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Attachment } from 'svelte/attachments';
+import type { ScrollspyOptions } from './types.js';
+/**
+ * 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 declare function scrollspy(options: ScrollspyOptions): Attachment<HTMLElement>;