@winkintel/bootstrap-svelte 1.0.5 → 1.0.6

package/dist/common/css.js

@@ -1,31 +1,33 @@
 import BezierEasing, {} from 'bezier-easing';
 const whitespacePattern = /\s/;
 const classTokenPattern = /\S+/g;
-function appendClassTokens(result, value) {
+function appendClassTokens(result, seenTokens, value) {
     const classValue = typeof value === 'string' ? value : String(value);
     if (!classValue) {
         return;
     }
     if (!whitespacePattern.test(classValue)) {
-        if (result.indexOf(classValue) === -1) {
+        if (!seenTokens.has(classValue)) {
+            seenTokens.add(classValue);
             result.push(classValue);
         }
         return;
     }
-    const tokens = classValue.match(classTokenPattern);
-    if (!tokens) {
+    const classTokens = classValue.match(classTokenPattern);
+    if (!classTokens) {
         return;
     }
-    for (let i = 0; i < tokens.length; i++) {
-        const token = tokens[i];
-        if (result.indexOf(token) === -1) {
+    for (let i = 0; i < classTokens.length; i++) {
+        const token = classTokens[i];
+        if (!seenTokens.has(token)) {
+            seenTokens.add(token);
             result.push(token);
         }
     }
 }
-function appendClassValue(result, value) {
+function appendClassValue(result, tokens, value) {
     if (typeof value === 'string' || typeof value === 'number') {
-        appendClassTokens(result, value);
+        appendClassTokens(result, tokens, value);
         return;
     }
     if (!value || typeof value !== 'object') {
@@ -34,14 +36,14 @@ function appendClassValue(result, value) {
     if (Array.isArray(value)) {
         for (let i = 0; i < value.length; i++) {
             if (value[i]) {
-                appendClassValue(result, value[i]);
+                appendClassValue(result, tokens, value[i]);
             }
         }
         return;
     }
     for (const key in value) {
         if (value[key]) {
-            appendClassTokens(result, key);
+            appendClassTokens(result, tokens, key);
         }
     }
 }
@@ -88,16 +90,17 @@ export const cubicBezier = (x1, y1, x2, y2) => {
  */
 export function uniqueClsx(...args) {
     const result = [];
+    const tokens = new Set();
     for (let i = 0; i < args.length; i++) {
         const value = args[i];
         if (!value) {
             continue;
         }
         if (typeof value === 'string' || typeof value === 'number') {
-            appendClassTokens(result, value);
+            appendClassTokens(result, tokens, value);
         }
         else {
-            appendClassValue(result, value);
+            appendClassValue(result, tokens, value);
         }
     }
     return result.join(' ');
@@ -123,7 +126,7 @@ export function toStyle(styleObj) {
     return Object.entries(styleObj)
         .map(([key, value]) => {
         // Convert camelCase to kebab-case (e.g., flexDirection to flex-direction)
-        const kebabKey = key.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+        const kebabKey = key.startsWith('--') ? key : key.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
         return `${kebabKey}: ${value}`;
     })
         .join(';');
@@ -143,17 +146,48 @@ export function fromStyle(cssString) {
         return {};
     }
     const styleObj = {};
-    // Split the string by semicolons and process each style declaration
-    cssString.split(';').forEach((declaration) => {
-        // Skip empty declarations
-        if (!declaration.trim()) {
+    const appendDeclaration = (declaration) => {
+        let quote;
+        let parentheses = 0;
+        let escaped = false;
+        let separator = -1;
+        for (let index = 0; index < declaration.length; index++) {
+            const character = declaration[index];
+            if (escaped) {
+                escaped = false;
+                continue;
+            }
+            if (quote) {
+                if (character === '\\') {
+                    escaped = true;
+                }
+                else if (character === quote) {
+                    quote = undefined;
+                }
+                continue;
+            }
+            if (character === '\\') {
+                escaped = true;
+            }
+            else if (character === '"' || character === "'") {
+                quote = character;
+            }
+            else if (character === '(') {
+                parentheses++;
+            }
+            else if (character === ')' && parentheses > 0) {
+                parentheses--;
+            }
+            else if (character === ':' && parentheses === 0) {
+                separator = index;
+                break;
+            }
+        }
+        if (separator === -1) {
             return;
         }
-        // Split the declaration into property and value
-        const [property, ...valueParts] = declaration.split(':');
-        // Handle case where there might be colons in the value (like in data URLs)
-        const value = valueParts.join(':').trim();
-        const trimmedProperty = property?.trim();
+        const trimmedProperty = declaration.slice(0, separator).trim();
+        const value = declaration.slice(separator + 1).trim();
         if (!trimmedProperty || !value) {
             return;
         }
@@ -170,6 +204,44 @@ export function fromStyle(cssString) {
         // Try to convert numeric strings to numbers, but not for CSS variables or var() functions
         const parsedValue = !isNaN(Number(value)) && value.trim() !== '' && !value.includes('var(') ? Number(value) : value;
         styleObj[camelProperty] = parsedValue;
-    });
+    };
+    let declarationStart = 0;
+    let quote;
+    let parentheses = 0;
+    let escaped = false;
+    for (let index = 0; index <= cssString.length; index++) {
+        const character = cssString[index];
+        if (escaped) {
+            escaped = false;
+            continue;
+        }
+        if (quote) {
+            if (character === '\\') {
+                escaped = true;
+            }
+            else if (character === quote) {
+                quote = undefined;
+            }
+            continue;
+        }
+        if (character === '\\') {
+            escaped = true;
+        }
+        else if (character === '"' || character === "'") {
+            quote = character;
+        }
+        else if (character === '(') {
+            parentheses++;
+        }
+        else if (character === ')' && parentheses > 0) {
+            parentheses--;
+        }
+        else if (character === ';' || index === cssString.length) {
+            if (parentheses === 0) {
+                appendDeclaration(cssString.slice(declarationStart, index));
+                declarationStart = index + 1;
+            }
+        }
+    }
     return styleObj;
 }

package/dist/common/navbar-offcanvas.svelte.d.ts

@@ -11,6 +11,7 @@ export declare class NavbarRootState {
     transitionDuration: number;
     constructor(props: Navbar.RootProps);
     get isExpanded(): boolean;
+    get defaultCollapseId(): string;
     toggleIsExpanded(): void;
 }
 /**
@@ -32,6 +33,7 @@ export declare class NavbarCollapseState {
     readonly props: Navbar.CollapseProps;
     readonly root: NavbarRootState;
     isExpanded: boolean;
+    id: string;
     constructor(props: Navbar.CollapseProps, root: NavbarRootState);
 }
 /**

package/dist/common/navbar-offcanvas.svelte.js

@@ -39,6 +39,9 @@ export class NavbarRootState {
     get isExpanded() {
         return this.#isExpanded || this.#mediaQuery?.current || false;
     }
+    get defaultCollapseId() {
+        return `${this.props.id || 'navbar'}-collapse`;
+    }
     toggleIsExpanded() {
         this.#isExpanded = !this.#isExpanded;
     }
@@ -79,13 +82,11 @@ export class NavbarCollapseState {
     props;
     root;
     isExpanded = $derived.by(() => this.root.isExpanded);
+    id = $derived.by(() => this.props.id || this.root.defaultCollapseId);
     constructor(props, root) {
         this.props = props;
         this.root = root;
-        if (!this.props.id) {
-            console.warn('props.id is required for the Navbar.Collapse to set accessibility correctly');
-        }
-        this.root.ariaControls = this.props.id || undefined;
+        this.root.ariaControls = this.props.id || this.root.defaultCollapseId;
     }
 }
 /**

package/dist/common/overlay-stack.d.ts

@@ -0,0 +1,13 @@
+export type OverlayStackEntry = {
+    baseBackdropZIndex: number;
+    baseOverlayZIndex: number;
+    containsActiveElement?: () => boolean;
+    focus?: () => void;
+    onKeydown: (event: KeyboardEvent) => void;
+    setLayers: (overlayZIndex: number | undefined, backdropZIndex: number | undefined) => void;
+};
+export declare function registerOverlay(entry: OverlayStackEntry): void;
+export declare function unregisterOverlay(entry: OverlayStackEntry): void;
+export declare function isTopOverlay(entry: OverlayStackEntry): boolean;
+export declare function focusTopOverlay(): void;
+export declare function isFocusInTopOverlay(): boolean;

package/dist/common/overlay-stack.js

@@ -0,0 +1,49 @@
+const overlayStack = [];
+const overlayLayerStep = 20;
+function handleKeydown(event) {
+    overlayStack.at(-1)?.onKeydown(event);
+}
+function syncKeydownListener() {
+    if (typeof window === 'undefined')
+        return;
+    window.removeEventListener('keydown', handleKeydown);
+    if (overlayStack.length > 0) {
+        window.addEventListener('keydown', handleKeydown);
+    }
+}
+function syncLayers() {
+    let previousOverlayZIndex = Number.NEGATIVE_INFINITY;
+    overlayStack.forEach((entry) => {
+        const overlayZIndex = Math.max(entry.baseOverlayZIndex, previousOverlayZIndex + overlayLayerStep);
+        const backdropZIndex = overlayZIndex - (entry.baseOverlayZIndex - entry.baseBackdropZIndex);
+        entry.setLayers(overlayZIndex, backdropZIndex);
+        previousOverlayZIndex = overlayZIndex;
+    });
+}
+export function registerOverlay(entry) {
+    const existingIndex = overlayStack.indexOf(entry);
+    if (existingIndex !== -1) {
+        overlayStack.splice(existingIndex, 1);
+    }
+    overlayStack.push(entry);
+    syncLayers();
+    syncKeydownListener();
+}
+export function unregisterOverlay(entry) {
+    const index = overlayStack.indexOf(entry);
+    if (index === -1)
+        return;
+    overlayStack.splice(index, 1);
+    entry.setLayers(undefined, undefined);
+    syncLayers();
+    syncKeydownListener();
+}
+export function isTopOverlay(entry) {
+    return overlayStack.at(-1) === entry;
+}
+export function focusTopOverlay() {
+    overlayStack.at(-1)?.focus?.();
+}
+export function isFocusInTopOverlay() {
+    return overlayStack.at(-1)?.containsActiveElement?.() ?? false;
+}

package/dist/common/scrollbar.js

@@ -1,7 +1,19 @@
 import { hasAttribute, isRTL, setAttribute } from './dom.js';
 const SCROLLBAR_INITIAL_OVERFLOW = 'data-scrollbar-initial-overflow-value';
 const SCROLLBAR_INITIAL_PADDING = 'data-scrollbar-initial-padding-value';
+const SCROLLBAR_INITIAL_PADDING_SIDE = 'data-scrollbar-initial-padding-side';
 const SCROLLBAR_LOCK_COUNT = 'data-scrollbar-lock-count';
+const getLockCount = (bodyElement) => {
+    const value = Number(bodyElement.getAttribute(SCROLLBAR_LOCK_COUNT));
+    return Number.isInteger(value) && value > 0 ? value : 0;
+};
+const hasSavedScrollState = (bodyElement) => hasAttribute(bodyElement, SCROLLBAR_INITIAL_OVERFLOW) ||
+    hasAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING) ||
+    hasAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING_SIDE);
+const getRecoverableLockCount = (bodyElement) => {
+    const count = getLockCount(bodyElement);
+    return count || (hasSavedScrollState(bodyElement) ? 1 : 0);
+};
 /**
  * Calculates the width of the browser's scrollbar
  *
@@ -28,8 +40,10 @@ export const disableBodyScrolling = (bodyElement) => {
     const initialPadding = bodyElement.style.getPropertyValue(paddingPropName);
     setAttribute(bodyElement, SCROLLBAR_INITIAL_OVERFLOW, initialOverflow);
     setAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING, initialPadding);
+    setAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING_SIDE, paddingPropName);
     // Set the overflow to hidden and add padding-right to prevent layout shift
-    const newPaddingRight = parseInt(initialPadding || '0', 10) + scrollbarWidth;
+    const initialPaddingValue = Number.parseFloat(initialPadding);
+    const newPaddingRight = (Number.isFinite(initialPaddingValue) ? initialPaddingValue : 0) + scrollbarWidth;
     bodyElement.style.setProperty('overflow', 'hidden');
     bodyElement.style.setProperty(paddingPropName, `${newPaddingRight}px`);
 };
@@ -43,20 +57,21 @@ export const disableBodyScrolling = (bodyElement) => {
  * @param {HTMLElement} bodyElement - The body element to restore scrolling on
  */
 export const resetBodyScrolling = (bodyElement) => {
-    // Skip reset if data attributes aren't present (scrolling was never disabled)
-    if (!hasAttribute(bodyElement, SCROLLBAR_INITIAL_OVERFLOW) || !hasAttribute(bodyElement, SCROLLBAR_INITIAL_PADDING)) {
+    if (!hasSavedScrollState(bodyElement)) {
         return;
     }
     // Get the initial values from the data attributes
     const initialOverflow = bodyElement.getAttribute(SCROLLBAR_INITIAL_OVERFLOW);
     const initialPadding = bodyElement.getAttribute(SCROLLBAR_INITIAL_PADDING);
     // Reset the overflow and padding-right values to their initial values
-    const paddingPropName = isRTL() ? 'padding-left' : 'padding-right';
-    bodyElement.style.setProperty('overflow', initialOverflow || '');
-    bodyElement.style.setProperty(paddingPropName, initialPadding || '');
+    const savedPaddingSide = bodyElement.getAttribute(SCROLLBAR_INITIAL_PADDING_SIDE);
+    const paddingPropName = savedPaddingSide === 'padding-left' ? 'padding-left' : 'padding-right';
+    bodyElement.style.setProperty('overflow', initialOverflow ?? '');
+    bodyElement.style.setProperty(paddingPropName, initialPadding ?? '');
     // Remove the data attributes
     bodyElement.removeAttribute(SCROLLBAR_INITIAL_OVERFLOW);
     bodyElement.removeAttribute(SCROLLBAR_INITIAL_PADDING);
+    bodyElement.removeAttribute(SCROLLBAR_INITIAL_PADDING_SIDE);
 };
 /**
  * Acquires a body scroll lock. The first acquisition disables scrolling;
@@ -66,7 +81,7 @@ export const resetBodyScrolling = (bodyElement) => {
  * @returns {number} the lock count after acquiring
  */
 export const acquireBodyScrollLock = (bodyElement) => {
-    const count = parseInt(bodyElement.getAttribute(SCROLLBAR_LOCK_COUNT) ?? '0', 10) + 1;
+    const count = getRecoverableLockCount(bodyElement) + 1;
     bodyElement.setAttribute(SCROLLBAR_LOCK_COUNT, `${count}`);
     if (count === 1) {
         disableBodyScrolling(bodyElement);
@@ -81,8 +96,9 @@ export const acquireBodyScrollLock = (bodyElement) => {
  * @returns {number} the lock count after releasing
  */
 export const releaseBodyScrollLock = (bodyElement) => {
-    const current = parseInt(bodyElement.getAttribute(SCROLLBAR_LOCK_COUNT) ?? '0', 10);
+    const current = getRecoverableLockCount(bodyElement);
     if (current <= 0) {
+        bodyElement.removeAttribute(SCROLLBAR_LOCK_COUNT);
         return 0;
     }
     const count = current - 1;

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Wink, Inc.",
     "name": "@winkintel/bootstrap-svelte",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Bootstrap components for Svelte 5 with TypeScript support.",
     "license": "Apache-2.0",
     "repository": {