@pathscale/ui 2.11.8 → 2.11.10

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -1,4 +1,4 @@
-import { createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./ColorWheelFlower.css";
 import { For, createMemo, createSignal, createTrackedEffect, onCleanup } from "solid-js";
@@ -9,7 +9,7 @@ import color_swatch_picker from "../color-swatch-picker/index.js";
 import { useColorPickerContext } from "./colorWheelFlowerContext.js";
 import { createColorFromHsl, parseColor, rgbToHex, rgbToHsl } from "./ColorUtils.js";
 import { resolveColorWheelFlowerPalette } from "./ColorWheelFlower.palette.js";
-import { motionDistances, motionDurations, motionEasings, prefersReducedMotion, runMotion } from "../../motion/index.js";
+import { prefersReducedMotion } from "../../motion/index.js";
 import { CLASSES, componentRecipe } from "./ColorWheelFlower.recipe.js";
 import { flowerPetalPosition } from "./ColorWheelFlower.geometry.js";
 var _tmpl$ = /*#__PURE__*/ template("<div><div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div><span></span><span>");
@@ -52,67 +52,6 @@ const createColorItem = (id, color, offsetX, offsetY, options)=>{
         isCenter: options?.isCenter
     };
 };
-const readMotionState = (el)=>{
-    if ("u" < typeof getComputedStyle) return {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        scale: 1
-    };
-    const styles = getComputedStyle(el);
-    const opacityValue = Number.parseFloat(styles.opacity);
-    const opacity = Number.isFinite(opacityValue) ? opacityValue : 1;
-    const transform = styles.transform;
-    if (!transform || "none" === transform) return {
-        opacity,
-        x: 0,
-        y: 0,
-        scale: 1
-    };
-    if ("u" > typeof DOMMatrixReadOnly) {
-        const matrix = new DOMMatrixReadOnly(transform);
-        return {
-            opacity,
-            x: matrix.m41,
-            y: matrix.m42,
-            scale: matrix.a
-        };
-    }
-    const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
-    if (!matrixMatch) return {
-        opacity,
-        x: 0,
-        y: 0,
-        scale: 1
-    };
-    const values = matrixMatch[1].split(",").map((value)=>Number.parseFloat(value.trim()));
-    return {
-        opacity,
-        scale: Number.isFinite(values[0]) ? values[0] : 1,
-        x: Number.isFinite(values[4]) ? values[4] : 0,
-        y: Number.isFinite(values[5]) ? values[5] : 0
-    };
-};
-const applyMotionState = (el, state)=>{
-    el.style.opacity = String(state.opacity ?? 1);
-    el.style.transform = `translate3d(${state.x ?? 0}px, ${state.y ?? 0}px, 0) scale(${state.scale ?? 1})`;
-};
-const getLiftOffset = (item, distance)=>{
-    const radius = Math.sqrt(item.offsetX ** 2 + item.offsetY ** 2);
-    if (!Number.isFinite(radius) || 0 === radius) return {
-        x: 0,
-        y: 0
-    };
-    return {
-        x: item.offsetX / radius * distance,
-        y: item.offsetY / radius * distance
-    };
-};
-const easeOutBack = (overshoot = 1.4)=>(t)=>{
-        const c1 = overshoot;
-        const c3 = c1 + 1;
-        return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
-    };
 const toRgba = (rgb, alpha)=>{
     const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
     if (!match) return rgb;
@@ -291,19 +230,9 @@ function buildColors(palette) {
         } : void 0));
 }
 const CENTER_INDEX = LAYOUT.findIndex((l)=>l.isCenter);
-const MAX_RADIUS = Math.max(...LAYOUT.map((l)=>Math.sqrt(l.offsetX ** 2 + l.offsetY ** 2)));
-const MAX_WAVE_DISTANCE = 2 * MAX_RADIUS;
-const MAX_WAVE_DELAY = 0.12;
 const __solidLayoutColorWheelFlower = (_stable, p)=>{
     const context = useColorPickerContext();
     const [selectedIndex, setSelectedIndex] = createSignal(null);
-    const [hoveredIndex, setHoveredIndex] = createSignal(null);
-    const [pressedIndex, setPressedIndex] = createSignal(null);
-    const [pointer, setPointer] = createSignal({
-        x: 0,
-        y: 0,
-        active: false
-    });
     const [pulseState, setPulseState] = createSignal(null);
     const [currentTheme, setCurrentTheme] = createSignal("u" > typeof document && "dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light");
     if ("u" > typeof window && "u" > typeof MutationObserver) {
@@ -322,12 +251,6 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
     const mode = ()=>p.mode ?? currentTheme();
     const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), p.palette)));
     const reduceMotion = prefersReducedMotion();
-    reduceMotion || (motionDurations.slow, motionEasings.inOut);
-    const hoverLift = reduceMotion ? 0 : motionDistances.sm;
-    const pressScale = 0.96;
-    const pulseScale = 1.12;
-    let containerRef;
-    let pointerTimeout;
     let pulseTimeout;
     const closestIndex = createMemo(()=>{
         const current = context.color();
@@ -401,48 +324,20 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         if (!selectedItem) return;
         if (!isNearColor(current, selectedItem)) setSelectedIndex(null);
     });
-    const handlePointerMove = (event)=>{
-        const node = containerRef;
-        if (!node) return;
-        const rect = node.getBoundingClientRect();
-        const x = event.clientX - rect.left - rect.width / 2;
-        const y = event.clientY - rect.top - rect.height / 2;
-        setPointer({
-            x,
-            y,
-            active: true
-        });
-        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
-        pointerTimeout = window.setTimeout(()=>{
-            setPointer((prev)=>({
-                    ...prev,
-                    active: false
-                }));
-        }, 120);
-    };
-    const handlePointerLeave = ()=>{
-        setPointer((prev)=>({
-                ...prev,
-                active: false
-            }));
-        setHoveredIndex(null);
-        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
-    };
     onCleanup(()=>{
         if (void 0 !== pulseTimeout) clearTimeout(pulseTimeout);
-        if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     });
     const pickerValue = ()=>colors()[visualSelectedIndex()]?.hex;
     var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
-    var _ref$ = containerRef;
-    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$) : containerRef = _el$;
-    spread(_el$, mergeProps(()=>({
+    spread(_el$, mergeProps({
+        get id () {
+            return p.id;
+        }
+    }, ()=>({
             class: twMerge(CLASSES.base, clsx({
                 [CLASSES.flag.disabled]: context.disabled()
             }), p.class)
         }), {
-        onMouseMove: handlePointerMove,
-        onMouseLeave: handlePointerLeave,
         "data-slot": "color-wheel-flower",
         get ["data-color-mode"] () {
             return mode();
@@ -460,7 +355,11 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
     spread(_el$4, mergeProps(()=>({
             class: twMerge(CLASSES.ring.base, CLASSES.ring.inner)
         })), false);
-    insert(_el$, createComponent(color_swatch_picker, mergeProps(()=>({
+    insert(_el$, createComponent(color_swatch_picker, mergeProps({
+        get id () {
+            return memo(()=>!!p.id)() ? `${p.id}-palette` : void 0;
+        }
+    }, ()=>({
             class: CLASSES.picker
         }), {
         get value () {
@@ -477,112 +376,10 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                     return colors();
                 },
                 children: (item, index)=>{
-                    let motionRef;
-                    let dotControl = null;
-                    let hasPaintedFinalState = false;
-                    const isHovered = ()=>hoveredIndex() === index();
-                    const isPressed = ()=>pressedIndex() === index();
                     const isPulsing = ()=>pulseState()?.index === index();
-                    const dotBaseTarget = createMemo(()=>{
-                        if (context.disabled()) return {
-                            opacity: 0.5,
-                            scale: 1,
-                            x: 0,
-                            y: 0
-                        };
-                        const pointerState = pointer();
-                        const anchorIdx = hoveredIndex();
-                        let scale = 1;
-                        let offsetX = 0;
-                        let offsetY = 0;
-                        if (null !== anchorIdx && pointerState.active) {
-                            const anchor = colors()[anchorIdx];
-                            const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
-                            const waveRadius = 0.9 * MAX_RADIUS;
-                            const influence = Math.max(0, 1 - distance / waveRadius);
-                            if (influence > 0) {
-                                const maxDelta = 16;
-                                const deltaX = Math.max(-maxDelta, Math.min(maxDelta, pointerState.x - anchor.offsetX));
-                                const deltaY = Math.max(-maxDelta, Math.min(maxDelta, pointerState.y - anchor.offsetY));
-                                const waveStrength = isHovered() ? 0.25 : 0.18;
-                                offsetX += deltaX * influence * waveStrength;
-                                offsetY += deltaY * influence * waveStrength;
-                                const liftStrength = isHovered() ? 0.8 : 0.35;
-                                const lift = getLiftOffset(item, hoverLift * liftStrength);
-                                offsetX += lift.x * influence;
-                                offsetY += lift.y * influence;
-                                const scaleBoost = isHovered() ? 0.06 : 0.03;
-                                scale += influence * scaleBoost;
-                            }
-                        }
-                        return {
-                            opacity: 1,
-                            scale,
-                            x: offsetX,
-                            y: offsetY
-                        };
-                    });
-                    const dotTarget = createMemo(()=>{
-                        const base = dotBaseTarget();
-                        let scale = base.scale ?? 1;
-                        if (isPulsing()) scale *= pulseScale;
-                        if (isPressed()) scale *= pressScale;
-                        return {
-                            ...base,
-                            scale
-                        };
-                    });
-                    const glowOpacity = createMemo(()=>{
-                        if (context.disabled()) return 0;
-                        if (isHovered()) return 0.6;
-                        if (isPulsing()) return 0.35;
-                        return 0;
-                    });
-                    const dotTransition = ()=>{
-                        if (reduceMotion) return {
-                            duration: 0
-                        };
-                        const anchorIdx = hoveredIndex();
-                        const pointerState = pointer();
-                        let delay = 0;
-                        if (null !== anchorIdx && pointerState.active) {
-                            const anchor = colors()[anchorIdx];
-                            const distance = Math.sqrt((item.offsetX - anchor.offsetX) ** 2 + (item.offsetY - anchor.offsetY) ** 2);
-                            delay = Math.min(MAX_WAVE_DELAY, distance / MAX_WAVE_DISTANCE * MAX_WAVE_DELAY);
-                        }
-                        if (isPulsing()) return {
-                            duration: motionDurations.fast,
-                            easing: easeOutBack(1.25)
-                        };
-                        if (isHovered()) return {
-                            duration: motionDurations.fast,
-                            easing: motionEasings.out,
-                            delay
-                        };
-                        return {
-                            duration: motionDurations.base,
-                            easing: motionEasings.out,
-                            delay
-                        };
-                    };
-                    createTrackedEffect(()=>{
-                        if (!motionRef) return;
-                        const target = dotTarget();
-                        if (!hasPaintedFinalState) {
-                            applyMotionState(motionRef, target);
-                            hasPaintedFinalState = true;
-                            return;
-                        }
-                        const transition = dotTransition();
-                        dotControl?.stop();
-                        dotControl = runMotion(motionRef, readMotionState(motionRef), target, transition);
-                    });
-                    onCleanup(()=>{
-                        dotControl?.stop();
-                    });
                     var _el$5 = _tmpl$2(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
                     spread(_el$5, mergeProps(()=>({
-                            class: CLASSES.dot.base
+                            class: clsx(CLASSES.dot.base, isPulsing() && "color-wheel-flower__dot--pulsing")
                         }), {
                         get style () {
                             return flowerPetalPosition(item.offsetX, item.offsetY);
@@ -591,9 +388,6 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                     spread(_el$6, mergeProps(()=>({
                             class: CLASSES.dot.frame
                         })), true);
-                    ref(()=>(el)=>{
-                            motionRef = el;
-                        }, _el$7);
                     spread(_el$7, mergeProps(()=>({
                             class: CLASSES.dot.motion
                         })), true);
@@ -602,13 +396,14 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                         }), {
                         get style () {
                             return {
-                                opacity: glowOpacity(),
-                                "box-shadow": `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`,
-                                transition: reduceMotion ? "none" : "opacity 200ms ease-out, box-shadow 200ms ease-out"
+                                "box-shadow": `0 0 8px ${toRgba(item.rgb, 0.3)}, 0 0 3px rgba(255,255,255,0.35)`
                             };
                         }
                     }), false);
                     insert(_el$7, createComponent(color_swatch, mergeProps({
+                        get id () {
+                            return memo(()=>!!p.id)() ? `${p.id}-petal-${index()}` : void 0;
+                        },
                         get color () {
                             return item.hex;
                         },
@@ -621,35 +416,17 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                         },
                         get state () {
                             return context.disabled() ? "disabled" : void 0;
-                        },
-                        onMouseEnter: ()=>{
-                            if (!context.disabled()) setHoveredIndex(index());
-                        },
-                        onMouseLeave: ()=>{
-                            if (!context.disabled()) setHoveredIndex(null);
-                        },
-                        onFocus: ()=>{
-                            if (!context.disabled()) setHoveredIndex(index());
-                        },
-                        onBlur: ()=>{
-                            if (!context.disabled()) setHoveredIndex(null);
-                        },
-                        onPointerDown: ()=>{
-                            if (!context.disabled()) setPressedIndex(index());
-                        },
-                        onPointerUp: ()=>{
-                            if (!context.disabled()) setPressedIndex(null);
-                        },
-                        onPointerLeave: ()=>{
-                            if (!context.disabled()) setPressedIndex(null);
-                        },
-                        onPointerCancel: ()=>{
-                            if (!context.disabled()) setPressedIndex(null);
                         }
                     })), _el$9);
                     spread(_el$9, mergeProps(()=>({
-                            class: clsx(CLASSES.highlight.base, isHovered() && CLASSES.highlight.hovered, isPulsing() && CLASSES.highlight.pulsing)
-                        })), false);
+                            class: clsx(CLASSES.highlight.base, isPulsing() && CLASSES.highlight.pulsing)
+                        }), {
+                        get style () {
+                            return {
+                                "border-color": item.hex
+                            };
+                        }
+                    }), false);
                     return _el$5;
                 }
             });

package/dist/components/dropdown/Dropdown.generated.js

@@ -22,9 +22,11 @@ const sortItemsByDomOrder = (items)=>[
     });
 const __solidLayoutDropdownRoot = (_stable, p)=>{
     const others = omit(p, "children", "class", "open", "defaultOpen", "onOpenChange", "placement", "autoFlip", "disabled", "dataTheme", "ref");
-    const baseId = createUniqueId();
-    const triggerId = `${baseId}-trigger`;
-    const menuId = `${baseId}-menu`;
+    const generatedBaseId = createUniqueId();
+    const authoredBaseId = "string" == typeof p.id ? p.id.trim() : "";
+    const baseId = authoredBaseId || generatedBaseId;
+    const triggerId = `${baseId}--trigger`;
+    const menuId = `${baseId}--menu`;
     const [internalOpen, setInternalOpen] = createSignal(Boolean(p.defaultOpen));
     const [items, setItems] = createSignal([]);
     const [focusedKey, setFocusedKey] = createSignal(void 0);

package/dist/components/inline-edit/InlineEdit.generated.js

@@ -50,23 +50,27 @@ const __solidLayoutInlineEdit = (_stable, p)=>{
     effect(()=>({
             e: CLASSES.slot.read,
             t: CLASSES.slot.value,
-            a: p.disabled,
-            o: p.label,
-            i: CLASSES.slot.trigger,
-            n: CLASSES.slot.edit,
-            s: p.value,
-            h: p.label,
-            r: twMerge(CLASSES.slot.field, p.fieldClass)
-        }), ({ e, t, a, o, i, n, s, h, r }, _p$)=>{
+            a: p.id ? `${p.id}-trigger` : void 0,
+            o: p.disabled,
+            i: p.label,
+            n: CLASSES.slot.trigger,
+            s: CLASSES.slot.edit,
+            h: p.id ? `${p.id}-field` : void 0,
+            r: p.value,
+            d: p.label,
+            l: twMerge(CLASSES.slot.field, p.fieldClass)
+        }), ({ e, t, a, o, i, n, s, h, r, d, l }, _p$)=>{
         className(_el$2, e, _p$?.e);
         className(_el$3, t, _p$?.t);
-        a !== _p$?.a && setAttribute(_el$4, "disabled", a);
-        o !== _p$?.o && setAttribute(_el$4, "aria-label", o);
-        className(_el$4, i, _p$?.i);
-        className(_el$5, n, _p$?.n);
-        _el$6.value = s ?? "";
-        h !== _p$?.h && setAttribute(_el$6, "aria-label", h);
-        className(_el$6, r, _p$?.r);
+        a !== _p$?.a && setAttribute(_el$4, "id", a);
+        o !== _p$?.o && setAttribute(_el$4, "disabled", o);
+        i !== _p$?.i && setAttribute(_el$4, "aria-label", i);
+        className(_el$4, n, _p$?.n);
+        className(_el$5, s, _p$?.s);
+        h !== _p$?.h && setAttribute(_el$6, "id", h);
+        _el$6.value = r ?? "";
+        d !== _p$?.d && setAttribute(_el$6, "aria-label", d);
+        className(_el$6, l, _p$?.l);
     });
     return _el$;
 };

package/dist/components/language-switcher/LanguageSwitcher.generated.d.ts

@@ -1,9 +1,11 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./LanguageSwitcher.css";
-import type { DropdownAlign } from "../dropdown";
+import { type DropdownAlign } from "../dropdown";
 import type { UIBaseProps } from "../vocabulary";
 import type { I18nStore } from "./createI18n";
 export interface LanguageSwitcherProps extends UIBaseProps {
+    /** Stable identity for the language control. */
+    id?: string;
     /**
      * The i18n store to use for language state
      */

package/dist/components/language-switcher/LanguageSwitcher.generated.js

@@ -1,72 +1,120 @@
-import { createComponent, effect, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./LanguageSwitcher.css";
-import { For, omit } from "solid-js";
+import { For, Show, createSignal, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
+import dropdown from "../dropdown/index.js";
+import icon from "../icon/index.js";
 import { CLASSES, componentRecipe } from "./LanguageSwitcher.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<select>"), _tmpl$2 = /*#__PURE__*/ template("<option>");
+var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutLanguageSwitcher = (_stable, p)=>{
     const others = omit(p, "i18n", "class", "style", "aria-label", "currentLanguageLabel", "optionsLabel", "loadingLabel", "align", "onLanguageChange");
     const currentLanguageName = ()=>p.i18n.languageNames[p.i18n.locale];
+    const isSelected = (lang)=>p.i18n.locale === lang;
+    const [open, setOpen] = createSignal(false);
     const handleSelect = async (lang)=>{
         await p.i18n.setLocale(lang);
         p.onLanguageChange?.(lang);
     };
-    const classes = ()=>twMerge(CLASSES.base, CLASSES.trigger, p.class);
-    const move = (direction)=>{
-        const languages = p.i18n.languages;
-        const current = languages.findIndex((language)=>language.code === p.i18n.locale);
-        const next = (Math.max(0, current) + direction + languages.length) % languages.length;
-        const language = languages[next];
-        if (language) handleSelect(language.code);
-    };
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps(others, ()=>({
+    const classes = ()=>twMerge(CLASSES.base, p.class);
+    return createComponent(dropdown.Root, mergeProps(others, ()=>({
             class: classes()
         }), {
-        get style () {
-            return p.style;
-        },
-        get value () {
-            return p.i18n.locale;
+        get open () {
+            return open();
         },
+        onOpenChange: setOpen,
         get disabled () {
             return p.i18n.isLoading;
         },
-        get ["aria-busy"] () {
-            return p.i18n.isLoading ? "true" : void 0;
-        },
-        get ["aria-label"] () {
-            return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
-        },
-        get title () {
-            return p.optionsLabel ?? p["aria-label"] ?? "Language selector";
+        get style () {
+            return p.style;
         },
-        onChange: (event)=>void handleSelect(event.currentTarget.value),
-        onKeyDown: (event)=>{
-            if ("ArrowDown" === event.key) {
-                event.preventDefault();
-                move(1);
-            } else if ("ArrowUp" === event.key) {
-                event.preventDefault();
-                move(-1);
-            }
+        get children () {
+            return [
+                createComponent(dropdown.Trigger, mergeProps(()=>({
+                        class: CLASSES.trigger
+                    }), {
+                    get ["aria-busy"] () {
+                        return p.i18n.isLoading ? "true" : void 0;
+                    },
+                    get ["aria-label"] () {
+                        return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
+                    },
+                    get title () {
+                        return p.optionsLabel ?? p["aria-label"] ?? "Language selector";
+                    },
+                    get children () {
+                        return createComponent(Show, {
+                            get when () {
+                                return !p.i18n.isLoading;
+                            },
+                            get fallback () {
+                                return createComponent(icon, mergeProps({
+                                    src: "icon-[mdi--loading]"
+                                }, ()=>({
+                                        class: CLASSES.loadingIcon
+                                    }), {
+                                    width: 16,
+                                    height: 16,
+                                    get ["aria-label"] () {
+                                        return p.loadingLabel ?? "Loading language";
+                                    }
+                                }));
+                            },
+                            get children () {
+                                var _el$ = _tmpl$();
+                                spread(_el$, mergeProps({
+                                    "data-slot": "language-current"
+                                }, ()=>({
+                                        class: CLASSES.locale
+                                    }), {
+                                    "aria-hidden": "true"
+                                }), true);
+                                insert(_el$, ()=>p.i18n.locale.toUpperCase());
+                                return _el$;
+                            }
+                        });
+                    }
+                })),
+                createComponent(dropdown.Menu, mergeProps(()=>({
+                        class: CLASSES.menu
+                    }), {
+                    get align () {
+                        return p.align;
+                    },
+                    get ["aria-label"] () {
+                        return p.optionsLabel ?? "Language options";
+                    },
+                    get children () {
+                        return createComponent(For, {
+                            get each () {
+                                return p.i18n.languages;
+                            },
+                            children: (lang)=>createComponent(dropdown.Item, mergeProps({
+                                    get id () {
+                                        return memo(()=>!!p.id)() ? `${p.id}-option-${lang.code}` : void 0;
+                                    },
+                                    onClick: ()=>void handleSelect(lang.code),
+                                    get ["aria-label"] () {
+                                        return lang.name;
+                                    }
+                                }, ()=>({
+                                        class: twMerge(CLASSES.item, isSelected(lang.code) && CLASSES.itemSelected)
+                                    }), {
+                                    get ["aria-current"] () {
+                                        return isSelected(lang.code) ? "true" : void 0;
+                                    },
+                                    get children () {
+                                        return lang.name;
+                                    }
+                                }))
+                        });
+                    }
+                }))
+            ];
         }
-    }), true);
-    insert(_el$, createComponent(For, {
-        get each () {
-            return p.i18n.languages;
-        },
-        children: (lang)=>(()=>{
-                var _el$2 = _tmpl$2();
-                insert(_el$2, ()=>lang.name);
-                effect(()=>lang.code, (_v$)=>{
-                    _el$2.value = _v$;
-                });
-                return _el$2;
-            })()
     }));
-    return _el$;
 };
 const LanguageSwitcher = defineComponent({
     recipe: componentRecipe,

package/dist/components/language-switcher/LanguageSwitcher.recipe.d.ts

@@ -11,5 +11,6 @@ export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
     readonly component: "language-switcher";
     readonly slots: {
         readonly root: {};
+        readonly "language-current": {};
     };
 }>;

package/dist/components/language-switcher/LanguageSwitcher.recipe.js

@@ -11,18 +11,24 @@ const CLASSES = {
 const componentRecipe = recipe({
     component: "language-switcher",
     slots: {
-        root: {}
+        root: {},
+        "language-current": {}
     },
     _layouts: {
         slots: {
             root: {
                 base: "",
                 axes: {}
+            },
+            "language-current": {
+                base: "",
+                axes: {}
             }
         },
         stateKeys: [],
         slotIds: {
-            root: 0
+            root: 1,
+            "language-current": 0
         }
     }
 });

package/dist/components/language-switcher/createI18n.js

@@ -25,9 +25,7 @@ function createI18n(options) {
         if (lang === localeSignal() && Object.keys(translations()).length > 0) return;
         setIsLoading(true);
         try {
-            const minDelay = new Promise((resolve)=>setTimeout(resolve, 100));
             let data;
-            await minDelay;
             data = lang === defaultLanguage && Object.keys(initialTranslations).length > 0 ? initialTranslations : loadTranslations ? await loadTranslations(lang) : initialTranslations;
             setTranslations(data);
             setLocaleSignal(lang);