@winkintel/bootstrap-svelte 1.0.4 → 1.0.6

package/README.md

@@ -174,7 +174,7 @@ Interactive components are implemented as Svelte components rather than requirin
 
 ## Status and feedback
 
-This package is published as `1.0.4`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
+This package is published as `1.0.6`, but feedback from Svelte developers is still very welcome. Useful feedback includes:
 
 - Component API ergonomics
 - Svelte 5 idioms and runes compatibility

package/dist/Alert/alert.svelte

@@ -45,8 +45,10 @@ Bootstrap-styled alert component for displaying messages.
 import { uniqueClsx } from '../common/css.js';
 import { noop } from '../common/noop.js';
 import { fade } from 'svelte/transition';
-let { children, class: classValues = 'alert-primary', colorVariant, elementRef = $bindable(null), isDismissible = false, isAnimated = true, isOpen = $bindable(true), onClose = noop, onClosed = noop, ...restOfProps } = $props();
-let classes = $derived(uniqueClsx('alert', colorVariant && `alert-${colorVariant}`, {
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), isDismissible = false, isAnimated = true, isOpen = $bindable(true), onClose = noop, onClosed = noop, ...restOfProps } = $props();
+let hasColorVariant = $derived(typeof colorVariant === 'string' && colorVariant.trim().length > 0);
+let hasClassValues = $derived(typeof classValues === 'string' && classValues.trim().length > 0);
+let classes = $derived(uniqueClsx('alert', hasColorVariant ? `alert-${colorVariant}` : !hasClassValues && 'alert-primary', {
     'alert-dismissible': isDismissible,
     fade: isAnimated,
     show: isOpen

package/dist/Badge/badge.svelte

@@ -21,20 +21,22 @@ A small count and labeling component that can be used to add context or notifica
 
 #### Positioned badges
 ```svelte
-<Badge position="top-right">99+</Badge>
+<Badge position="top-end">99+</Badge>
 ```
 
 ### Props
 - `class` (string): Optional. CSS classes for styling the badge (default: 'text-bg-primary')
 - `elementRef` (HTMLElement): Optional. Reference to the badge DOM element
 - `isPill` (boolean): Optional. Makes the badge more rounded with pill styling
-- `position` (string): Optional. Position of the badge when used as a notification ('top-right', 'top-left', etc.)
+- `position` (string): Optional logical position from `top-start` through `bottom-end`.
 - `colorVariant` (string): Optional. The badge variant style
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
 import { transformBadgePosition } from './types.js';
-let { children, class: classValues = 'text-bg-primary', colorVariant, elementRef = $bindable(null), isPill = false, position, ...restOfProps } = $props();
-let classes = $derived(uniqueClsx('badge', colorVariant, { 'rounded-pill': isPill }, position && transformBadgePosition(position), classValues));
+let { children, class: classValues, colorVariant, elementRef = $bindable(null), isPill = false, position, ...restOfProps } = $props();
+let hasColorVariant = $derived(typeof colorVariant === 'string' && colorVariant.trim().length > 0);
+let hasClassValues = $derived(typeof classValues === 'string' && classValues.trim().length > 0);
+let classes = $derived(uniqueClsx('badge', hasColorVariant ? colorVariant : !hasClassValues && 'text-bg-primary', { 'rounded-pill': isPill }, position && transformBadgePosition(position), classValues));
 </script>
 
 <span bind:this={elementRef} class={classes} {...restOfProps}>

package/dist/Badge/badge.svelte.d.ts

@@ -21,14 +21,14 @@ import { type BadgeRootProps } from './types.js';
  *
  * #### Positioned badges
  * ```svelte
- * <Badge position="top-right">99+</Badge>
+ * <Badge position="top-end">99+</Badge>
  * ```
  *
  * ### Props
  * - `class` (string): Optional. CSS classes for styling the badge (default: 'text-bg-primary')
  * - `elementRef` (HTMLElement): Optional. Reference to the badge DOM element
  * - `isPill` (boolean): Optional. Makes the badge more rounded with pill styling
- * - `position` (string): Optional. Position of the badge when used as a notification ('top-right', 'top-left', etc.)
+ * - `position` (string): Optional logical position from `top-start` through `bottom-end`.
  * - `colorVariant` (string): Optional. The badge variant style
  */
 declare const Badge: import("svelte").Component<BadgeRootProps, {}, "elementRef">;

package/dist/Badge/types.d.ts

@@ -25,4 +25,5 @@ export type BadgeRootProps = SpanElement & {
  * @param position - The logical position descriptor for the badge
  * @returns - Bootstrap CSS classes that implement the requested position
  */
-export declare const transformBadgePosition: (position: BadgePosition) => string;
+export declare function transformBadgePosition(position: BadgePosition): string;
+export declare function transformBadgePosition(position: string): string | undefined;

package/dist/Badge/types.js

@@ -1,12 +1,4 @@
-/**
- * Transforms a logical badge position value into the corresponding Bootstrap CSS classes.
- * Returns a string with position-absolute class combined with the specific positioning
- * and translation classes required for proper badge placement.
- *
- * @param position - The logical position descriptor for the badge
- * @returns - Bootstrap CSS classes that implement the requested position
- */
-export const transformBadgePosition = (position) => {
+export function transformBadgePosition(position) {
     // Map logical position names to their corresponding Bootstrap utility classes
     const positionTypeToClassMap = {
         'top-start': 'top-0 start-0',
@@ -20,5 +12,5 @@ export const transformBadgePosition = (position) => {
         'bottom-end': 'top-100 start-100'
     };
     const positionClass = positionTypeToClassMap[position];
-    return `position-absolute ${positionClass} translate-middle`;
-};
+    return positionClass ? `position-absolute ${positionClass} translate-middle` : undefined;
+}

package/dist/Button/button.svelte

@@ -56,32 +56,52 @@ Use Bootstrap's custom button styles for actions in forms, dialogs, and more. In
 -->
 <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';
+import { noop } from '../common/noop.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 { 'aria-disabled': ariaDisabled, children, class: classValues, colorVariant, disabled = false, elementRef = $bindable(null), href, id = `btn-${uid}`, onclick = noop, role: consumerRole, size, tabindex: consumerTabIndex, type = 'button', value = $bindable(undefined), ...restOfProps } = $props();
+let isAnchor = $derived(href !== undefined);
+let isInput = $derived(!isAnchor && value !== undefined);
 let elementType = $derived(isAnchor ? 'a' : isInput ? 'input' : 'button');
 let classes = $derived(uniqueClsx('btn', colorVariant && `btn-${colorVariant}`, size && `btn-${size}`, isAnchor && disabled && 'disabled', classValues));
+const handleClick = (event) => {
+    if (disabled) {
+        event.preventDefault();
+        return;
+    }
+    (onclick ?? noop)(event);
+};
 </script>
 
 {#if !isInput}
     <svelte:element
         this={elementType}
-        aria-disabled={isAnchor ? disabled : undefined}
+        {...restOfProps as any}
+        aria-disabled={disabled ? 'true' : isAnchor ? (ariaDisabled ?? 'false') : ariaDisabled}
         bind:this={elementRef}
         class={classes}
         disabled={isAnchor ? undefined : disabled}
-        href={href && !disabled ? href : undefined}
+        href={isAnchor && !disabled ? href : undefined}
         {id}
-        role={isAnchor ? 'button' : undefined}
-        tabindex={isAnchor && disabled ? -1 : 0}
+        onclick={handleClick}
+        role={isAnchor ? 'button' : consumerRole}
+        tabindex={disabled ? -1 : (consumerTabIndex ?? 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} />
+    <input
+        {...restOfProps as any}
+        aria-disabled={disabled ? 'true' : ariaDisabled}
+        bind:this={elementRef}
+        bind:value
+        class={classes}
+        {disabled}
+        {id}
+        role={consumerRole}
+        tabindex={disabled ? -1 : (consumerTabIndex ?? 0)}
+        {type}
+        onclick={handleClick} />
 {/if}

package/dist/ButtonGroup/button-group.svelte

@@ -42,10 +42,11 @@ A component that groups a series of buttons together on a single line or stacked
 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 { 'aria-label': nativeAriaLabel, ariaLabel, 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));
+let resolvedAriaLabel = $derived(ariaLabel ?? nativeAriaLabel ?? `Button group ${uid}`);
 </script>
 
-<div aria-label={ariaLabel} bind:this={elementRef} class={classes} {id} role="group" {...restOfProps}>
+<div {...restOfProps} aria-label={resolvedAriaLabel} bind:this={elementRef} class={classes} {id} role="group">
     {@render children?.()}
 </div>

package/dist/ButtonGroup/button-toolbar.svelte

@@ -27,10 +27,11 @@ Combine sets of button groups into button toolbars for more complex components.
 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 { 'aria-label': nativeAriaLabel, ariaLabel, children, class: classValues, elementRef = $bindable(null), id = `btn-toolbar-${uid}`, ...restOfProps } = $props();
 let classes = $derived(uniqueClsx('btn-toolbar', classValues));
+let resolvedAriaLabel = $derived(ariaLabel ?? nativeAriaLabel ?? `Button toolbar ${uid}`);
 </script>
 
-<div aria-label={ariaLabel} bind:this={elementRef} class={classes} {id} role="toolbar" {...restOfProps}>
+<div {...restOfProps} aria-label={resolvedAriaLabel} bind:this={elementRef} class={classes} {id} role="toolbar">
     {@render children?.()}
 </div>

package/dist/ButtonGroup/types.contract.d.ts

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

package/dist/ButtonGroup/types.contract.js

@@ -0,0 +1,15 @@
+const group = { 'aria-label': 'Actions' };
+const toolbar = { 'aria-label': 'Formatting' };
+const invalidGroupRole = {
+    // @ts-expect-error ButtonGroup owns its required group role.
+    role: 'navigation'
+};
+const invalidToolbarRole = {
+    // @ts-expect-error ButtonToolbar owns its required toolbar role.
+    role: 'navigation'
+};
+void group;
+void toolbar;
+void invalidGroupRole;
+void invalidToolbarRole;
+export {};

package/dist/ButtonGroup/types.d.ts

@@ -11,11 +11,11 @@ export type ButtonCheckRootProps = Omit<HTMLInputAttributes, 'class' | 'size' |
     labelElementRef?: HTMLLabelElement | null;
     type?: ButtonCheckType;
 };
-export type ButtonGroupRootProps = DivElement & {
+export type ButtonGroupRootProps = Omit<DivElement, 'role'> & {
     ariaLabel?: string;
     isVertical?: boolean;
     size?: ButtonGroupSize;
 };
-export type ButtonToolbarRootProps = DivElement & {
+export type ButtonToolbarRootProps = Omit<DivElement, 'role'> & {
     ariaLabel?: string;
 };

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

@@ -17,10 +17,17 @@ Button for carousel indicators. Should be placed inside a Carousel.Indicators co
 - `elementRef` (HTMLElement): Optional. Reference to the DOM element.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
+import { onDestroy, onMount } from 'svelte';
 import { CarouselIndicatorButtonState, initCarouselIndicatorButtonState } from './carousel.svelte.js';
 let { ariaLabel, class: classValues, elementRef = $bindable(null), ...restOfProps } = $props();
 // Initialize indicator button state
-const indicatorState = initCarouselIndicatorButtonState({});
+const indicatorState = initCarouselIndicatorButtonState({
+    get elementRef() {
+        return elementRef;
+    }
+});
+onMount(() => indicatorState.root.scheduleRegistrationOrder());
+onDestroy(() => indicatorState.root.unregisterIndicator(indicatorState));
 let classes = $derived(uniqueClsx({
     active: indicatorState.isActive || indicatorState.isNextActive
 }, classValues));

package/dist/Carousel/carousel-item.svelte

@@ -26,23 +26,41 @@ Represents a slide in the carousel. Should be placed inside a Carousel.Inner.
 <script lang="ts">import { easeInOut, uniqueClsx } from '../common/css.js';
 import { noop } from '../common/noop.js';
 import { linear } from 'svelte/easing';
+import { onDestroy, onMount } from 'svelte';
 import { fade, fly } from 'svelte/transition';
 import { CarouselItemState, initCarouselItemState } from './carousel.svelte.js';
 // Generate a unique ID for the carousel-item element, in case one is not provided
 const uid = $props.id();
-let { children, class: classValues, elementRef = $bindable(null), id = `carousel-item-${uid}`, isActive = false, interval = 5000, onSlide = noop, onSlid = noop, style, ...restOfProps } = $props();
+let { children, class: classValues, elementRef = $bindable(null), id = `carousel-item-${uid}`, isActive = false, interval, onmouseenter: onMouseEnter, onmouseleave: onMouseLeave, onSlide = noop, onSlid = noop, style, ...restOfProps } = $props();
+let orderElementRef = $state(null);
 // Get the item state after the component is mounted
 const itemState = initCarouselItemState({
     get id() {
         return id;
     },
+    get elementRef() {
+        return elementRef;
+    },
     get isActive() {
         return isActive;
     },
     get interval() {
         return interval;
+    },
+    get orderElementRef() {
+        return orderElementRef;
     }
 });
+onMount(() => itemState.root.scheduleRegistrationOrder());
+onDestroy(() => itemState.root.unregisterItem(itemState));
+function handleMouseEnter(event) {
+    itemState.root.handleMouseEnter();
+    onMouseEnter?.(event);
+}
+function handleMouseLeave(event) {
+    itemState.root.handleMouseLeave();
+    onMouseLeave?.(event);
+}
 let flyX = $derived.by(() => {
     if (itemState.isNext) {
         return '100%';
@@ -62,6 +80,8 @@ let classes = $derived(uniqueClsx('carousel-item', {
 let styles = $derived(`transition: transform ${itemState.root.transitionDuration / 1000}s ease-in-out !important;` + (style ? style : ''));
 </script>
 
+<span aria-hidden="true" bind:this={orderElementRef} hidden></span>
+
 <!--
     The slide and crossfade branches use in: (never transition:) — their exit visuals are
     driven by the carousel-item-start/-end CSS classes during the transition window, and
@@ -83,8 +103,8 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
             opacity: 1,
             easing: easeInOut
         }}
-        onmouseenter={() => itemState.root.handleMouseEnter()}
-        onmouseleave={() => itemState.root.handleMouseLeave()}
+        onmouseenter={handleMouseEnter}
+        onmouseleave={handleMouseLeave}
         {...restOfProps}>
         {@render children?.()}
     </div>
@@ -102,8 +122,8 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
             duration: itemState.root.transitionDuration / 2,
             easing: linear
         }}
-        onmouseenter={() => itemState.root.handleMouseEnter()}
-        onmouseleave={() => itemState.root.handleMouseLeave()}
+        onmouseenter={handleMouseEnter}
+        onmouseleave={handleMouseLeave}
         {...restOfProps}>
         {@render children?.()}
     </div>
@@ -122,8 +142,8 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
             opacity: 0,
             easing: easeInOut
         }}
-        onmouseenter={() => itemState.root.handleMouseEnter()}
-        onmouseleave={() => itemState.root.handleMouseLeave()}
+        onmouseenter={handleMouseEnter}
+        onmouseleave={handleMouseLeave}
         {...restOfProps}>
         {@render children?.()}
     </div>
@@ -136,8 +156,8 @@ let styles = $derived(`transition: transform ${itemState.root.transitionDuration
         onintrostart={onSlide}
         onintroend={onSlid}
         transition:fade={{ duration: 0 }}
-        onmouseenter={() => itemState.root.handleMouseEnter()}
-        onmouseleave={() => itemState.root.handleMouseLeave()}
+        onmouseenter={handleMouseEnter}
+        onmouseleave={handleMouseLeave}
         {...restOfProps}>
         {@render children?.()}
     </div>

package/dist/Carousel/carousel.svelte

@@ -42,11 +42,11 @@ The main container for a carousel component.
 - `transitionDuration` (number): Optional. The duration of the transition effect in milliseconds. Default is `600`.
 -->
 <script lang="ts">import { uniqueClsx } from '../common/css.js';
-import { onMount } from 'svelte';
+import { onMount, tick } from 'svelte';
 import { CarouselRootState, initCarouselRootState } from './carousel.svelte.js';
 // Generate a unique ID for the carousel element, in case one is not provided
 const uid = $props.id();
-let { animation = CarouselRootState.ANIMATION_DEFAULT, children, class: classValues, elementRef = $bindable(null), id = `carousel-${uid}`, interval = CarouselRootState.INTERNAL_DEFAULT, pause = CarouselRootState.PAUSE_DEFAULT, ride = CarouselRootState.RIDE_DEFAULT, style, transitionDuration = CarouselRootState.TRANSITION_DURATION_DEFAULT, ...restOfProps } = $props();
+let { animation = CarouselRootState.ANIMATION_DEFAULT, children, class: classValues, elementRef = $bindable(null), id = `carousel-${uid}`, interval = CarouselRootState.INTERNAL_DEFAULT, onpointercancel: onPointerCancel, onpointerdown: onPointerDown, onpointerup: onPointerUp, pause = CarouselRootState.PAUSE_DEFAULT, ride = CarouselRootState.RIDE_DEFAULT, style, transitionDuration = CarouselRootState.TRANSITION_DURATION_DEFAULT, ...restOfProps } = $props();
 // Initialize the carousel state
 const rootState = initCarouselRootState({
     get animation() {
@@ -74,14 +74,21 @@ const unset = Symbol('unset');
 // Handle touch events for swipe gestures
 function handlePointerDown(pointerEvent) {
     rootState.handlePointerDown(pointerEvent);
+    onPointerDown?.(pointerEvent);
 }
 function handlePointerMove(pointerEvent) {
     rootState.handlePointerMove(pointerEvent);
 }
 function handlePointerUp(pointerEvent) {
     rootState.handlePointerUp(pointerEvent);
+    onPointerUp?.(pointerEvent);
+}
+function handlePointerCancel(pointerEvent) {
+    rootState.handlePointerCancel();
+    onPointerCancel?.(pointerEvent);
 }
 onMount(() => {
+    tick().then(() => rootState.start());
     // Cleanup when component is destroyed
     return () => {
         rootState.dispose();
@@ -102,7 +109,7 @@ $effect(() => {
 });
 $effect(() => {
     if (previousInterval !== unset && previousInterval !== interval) {
-        rootState.interval = interval || CarouselRootState.INTERNAL_DEFAULT;
+        rootState.interval = interval;
     }
     previousInterval = interval;
 });
@@ -120,7 +127,7 @@ $effect(() => {
 });
 $effect(() => {
     if (previousTransitionDuration !== unset && previousTransitionDuration !== transitionDuration) {
-        rootState.transitionDuration = transitionDuration || CarouselRootState.TRANSITION_DURATION_DEFAULT;
+        rootState.transitionDuration = transitionDuration;
     }
     previousTransitionDuration = transitionDuration;
 });
@@ -133,7 +140,7 @@ $effect(() => {
     onpointerdown={handlePointerDown}
     onpointermove={handlePointerMove}
     onpointerup={handlePointerUp}
-    onpointercancel={handlePointerUp}
+    onpointercancel={handlePointerCancel}
     style={styles}
     {...restOfProps}>
     {@render children?.()}