@pathscale/ui 2.11.7 → 2.11.9

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,34 +416,10 @@ 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)
+                            class: clsx(CLASSES.highlight.base, isPulsing() && CLASSES.highlight.pulsing)
                         })), false);
                     return _el$5;
                 }

package/dist/components/dock/Dock.generated.js

@@ -5,7 +5,7 @@ import { For, Show, createSignal, omit, onCleanup, onSettled } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CLASSES, componentRecipe } from "./Dock.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<a>"), _tmpl$5 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<div><button>"), _tmpl$7 = /*#__PURE__*/ template('<svg><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h16">');
-const prefersReducedMotion = "u" > typeof window && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const prefersReducedMotion = "u" > typeof window && "function" == typeof window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 function createSpring(initial, opts = {}) {
     const mass = opts.mass ?? 1;
     const stiffness = opts.stiffness ?? 150;

package/dist/components/dropdown/Dropdown.css

@@ -12,6 +12,20 @@
     position: relative;
     isolation: isolate;
     display: inline-flex;
+    /*
+     * The border is inside the height a consumer asks for.
+     *
+     * There is no global `box-sizing` reset in this library, so this element
+     * was `content-box`: `height: 24px` set the *content* box and the 1px
+     * border on each side was added on top. AgencyZero's composer pill asks
+     * for `h-[24px]` and rendered at 28, measured on a running app, which is
+     * the sort of few-pixel drift that reads as a component quietly breaking
+     * its own contract.
+     *
+     * `border-box` makes an explicit height mean the height that lands on
+     * screen, which is what every caller already assumed.
+     */
+    box-sizing: border-box;
     min-height: 2.25rem;
     width: fit-content;
     align-items: center;
@@ -36,9 +50,26 @@
     background-color: var(--dropdown-trigger-bg);
     color: var(--dropdown-trigger-fg);
     border-color: var(--dropdown-trigger-border);
-    box-shadow:
+    /*
+     * The drop shadow is a variable so a caller can turn it off.
+     *
+     * `0 1px 2px` paints about 3px below the border box, and a shadow is not
+     * part of the box: an element declared `24px` occupies 24px of layout and
+     * reports bounds of 27.8. That is correct CSS and still wrong for a pill
+     * sized to sit inside a fixed-height composer row, where the visual result
+     * reads as the control quietly ignoring its own height. Measured on the
+     * running application: border-box 24.1, outer bounds 27.8, with border
+     * 0.9 and zero vertical padding - the whole 3.7px difference is this
+     * shadow.
+     *
+     * A variable rather than removal, because a dropdown on an ordinary
+     * surface wants the elevation. Set `--dropdown-trigger-shadow: none` on
+     * the trigger to opt out.
+     */
+    --dropdown-trigger-shadow:
       0 1px 2px rgb(var(--shadow-color, 0 0 0) / 6%),
       0 1px 0 oklch(100% 0 0 / 0.03) inset;
+    box-shadow: var(--dropdown-trigger-shadow);
     transition:
       transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
       background-color 150ms ease,

package/dist/components/dropdown/Dropdown.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Dropdown.css";
-import type { JSX } from "@solidjs/web";
+import { type JSX } from "@solidjs/web";
 import { type OverlayPlacement } from "../_shared/overlayPosition";
 type DropdownAlign = "start" | "end";
 type DropdownPlacement = OverlayPlacement;

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

@@ -1,7 +1,7 @@
-import { createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Dropdown.css";
-import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup, onSettled, useContext } from "solid-js";
+import { Show, createContext, createSignal, createTrackedEffect, createUniqueId, flush, omit, onCleanup, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Dropdown.recipe.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);
@@ -117,6 +119,7 @@ const __solidLayoutDropdownRoot = (_stable, p)=>{
             if (menuRef()?.contains(target)) return;
             if (triggerRef()?.contains(target)) return;
             setOpen(false);
+            flush();
         };
         document.addEventListener("pointerdown", handlePointerDown);
         return ()=>{
@@ -337,44 +340,48 @@ const __solidLayoutDropdownMenu = (_stable, p)=>{
             return ctx.open();
         },
         get children () {
-            var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
-            var _ref$ = ctx.setMenuRef;
-            "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
-            spread(_el$6, mergeProps(others, {
-                get id () {
-                    return ctx.menuId;
+            return createComponent(Portal, {
+                get children () {
+                    var _el$6 = _tmpl$3(), _el$7 = _el$6.firstChild;
+                    var _ref$ = ctx.setMenuRef;
+                    "function" == typeof _ref$ || Array.isArray(_ref$) ? ref(()=>_ref$, _el$6) : ctx.setMenuRef = _el$6;
+                    spread(_el$6, mergeProps(others, {
+                        get id () {
+                            return ctx.menuId;
+                        }
+                    }, ()=>({
+                            class: twMerge(CLASSES.slot.popover, p.class)
+                        }), {
+                        get role () {
+                            return p.role ?? "menu";
+                        },
+                        "data-slot": "dropdown-popover",
+                        get ["data-open"] () {
+                            return ctx.open() ? "true" : "false";
+                        },
+                        get ["data-align"] () {
+                            return p.align ?? "start";
+                        },
+                        get ["data-placement"] () {
+                            return overlayPosition.placement();
+                        },
+                        get ["aria-hidden"] () {
+                            return ctx.open() ? "false" : "true";
+                        },
+                        get style () {
+                            return menuStyle();
+                        },
+                        onKeyDown: handleKeyDown
+                    }), true);
+                    spread(_el$7, mergeProps(()=>({
+                            class: CLASSES.slot.menu
+                        }), {
+                        "data-slot": "dropdown-menu"
+                    }), true);
+                    insert(_el$7, ()=>p.children);
+                    return _el$6;
                 }
-            }, ()=>({
-                    class: twMerge(CLASSES.slot.popover, p.class)
-                }), {
-                get role () {
-                    return p.role ?? "menu";
-                },
-                "data-slot": "dropdown-popover",
-                get ["data-open"] () {
-                    return ctx.open() ? "true" : "false";
-                },
-                get ["data-align"] () {
-                    return p.align ?? "start";
-                },
-                get ["data-placement"] () {
-                    return overlayPosition.placement();
-                },
-                get ["aria-hidden"] () {
-                    return ctx.open() ? "false" : "true";
-                },
-                get style () {
-                    return menuStyle();
-                },
-                onKeyDown: handleKeyDown
-            }), true);
-            spread(_el$7, mergeProps(()=>({
-                    class: CLASSES.slot.menu
-                }), {
-                "data-slot": "dropdown-menu"
-            }), true);
-            insert(_el$7, ()=>p.children);
-            return _el$6;
+            });
         }
     });
 };

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

@@ -4,6 +4,8 @@ import type { DropdownAlign } from "../dropdown";
 import type { UIBaseProps } from "../vocabulary";
 import type { I18nStore } from "./createI18n";
 export interface LanguageSwitcherProps extends UIBaseProps {
+    /** Stable identity for the native language control. */
+    id?: string;
     /**
      * The i18n store to use for language state
      */

package/dist/components/panel-toggle/PanelToggle.css

@@ -0,0 +1,72 @@
+@layer components {
+  .panel-toggle {
+    position: absolute;
+    top: 50%;
+    z-index: 20;
+    display: inline-flex;
+    width: 0.5rem;
+    height: 3rem;
+    flex-shrink: 0;
+    transform: translateY(-50%);
+    align-items: center;
+    justify-content: center;
+    border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
+    padding: 0;
+    background: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    color: var(--color-primary);
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease;
+  }
+
+  .panel-toggle:hover,
+  .panel-toggle[data-hovered="true"] {
+    border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
+    background: color-mix(in oklab, var(--color-primary) 30%, transparent);
+  }
+
+  .panel-toggle:focus-visible,
+  .panel-toggle[data-focus-visible="true"] {
+    outline: var(--focus-ring-width, 2px) solid var(--color-primary);
+    outline-offset: var(--focus-ring-offset, 2px);
+  }
+
+  .panel-toggle--right {
+    left: 100%;
+    border-left: 0;
+    border-radius: 0 0.5rem 0.5rem 0;
+  }
+
+  .panel-toggle--left {
+    right: 100%;
+    border-right: 0;
+    border-radius: 0.5rem 0 0 0.5rem;
+  }
+
+  .panel-toggle__indicator {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-right: 0.125rem solid currentColor;
+    border-bottom: 0.125rem solid currentColor;
+    transition: transform 200ms ease;
+  }
+
+  .panel-toggle--right[data-expanded="true"] .panel-toggle__indicator,
+  .panel-toggle--left[data-expanded="false"] .panel-toggle__indicator {
+    transform: rotate(-45deg);
+  }
+
+  .panel-toggle--right[data-expanded="false"] .panel-toggle__indicator,
+  .panel-toggle--left[data-expanded="true"] .panel-toggle__indicator {
+    transform: rotate(135deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .panel-toggle,
+    .panel-toggle__indicator {
+      transition: none;
+    }
+  }
+}