@pathscale/ui 2.11.8 → 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/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

@@ -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;
+    }
+  }
+}

package/dist/components/panel-toggle/PanelToggle.generated.d.ts

@@ -0,0 +1,18 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./PanelToggle.css";
+import type { JSX } from "@solidjs/web";
+import type { UIBaseProps } from "../vocabulary";
+export type PanelToggleSide = "left" | "right";
+export type PanelToggleProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "id" | "aria-label" | "aria-expanded" | "type"> & UIBaseProps & {
+    /** Required so inspection and QA can address this control without its copy. */
+    id: string;
+    /** Whether the panel controlled by this gutter tab is visible. */
+    expanded: boolean;
+    /** The side of the content on which the controlled panel lives. */
+    side?: PanelToggleSide;
+    /** Names the action in the current state, for example “Hide details”. */
+    "aria-label": string;
+    /** The id of the panel this button expands and collapses. */
+    "aria-controls"?: string;
+};
+export declare const PanelToggleLayout: __LayoutComponent<PanelToggleProps>;

package/dist/components/panel-toggle/PanelToggle.generated.js

@@ -0,0 +1,41 @@
+import { mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./PanelToggle.css";
+import { omit } from "solid-js";
+import { panelToggle } from "./PanelToggle.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<button><span>");
+const __solidLayoutPanelToggleLayout = (_stable, p)=>{
+    const rest = omit(p, "id", "expanded", "side", "aria-label", "aria-controls", "children", "class", "style");
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    spread(_el$, mergeProps(rest, ()=>_stable.slot.root, {
+        get id () {
+            return p.id;
+        },
+        type: "button",
+        get ["aria-label"] () {
+            return p["aria-label"];
+        },
+        get ["aria-controls"] () {
+            return p["aria-controls"];
+        },
+        get ["aria-expanded"] () {
+            return p.expanded ? "true" : "false";
+        },
+        get ["data-expanded"] () {
+            return p.expanded ? "true" : "false";
+        },
+        get ["data-side"] () {
+            return p.side ?? "right";
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>_stable.slot.indicator, {
+        "aria-hidden": "true"
+    }), false);
+    return _el$;
+};
+const PanelToggleLayout = defineComponent({
+    recipe: panelToggle,
+    layout: __solidLayoutPanelToggleLayout,
+    embedded: true
+});
+export { PanelToggleLayout };

package/dist/components/panel-toggle/PanelToggle.recipe.d.ts

@@ -0,0 +1,21 @@
+export declare const panelToggle: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "panel-toggle";
+    readonly element: "button";
+    readonly slots: {
+        readonly root: {
+            readonly base: "panel-toggle";
+        };
+        readonly indicator: {
+            readonly base: "panel-toggle__indicator";
+        };
+    };
+    readonly props: {
+        readonly side: {
+            readonly left: "panel-toggle--left";
+            readonly right: "panel-toggle--right";
+        };
+    };
+    readonly defaults: {
+        readonly side: "right";
+    };
+}>;

package/dist/components/panel-toggle/PanelToggle.recipe.js

@@ -0,0 +1,45 @@
+import { recipe } from "../../lib/layouts/index.js";
+const panelToggle = recipe({
+    component: "panel-toggle",
+    element: "button",
+    slots: {
+        root: {
+            base: "panel-toggle"
+        },
+        indicator: {
+            base: "panel-toggle__indicator"
+        }
+    },
+    props: {
+        side: {
+            left: "panel-toggle--left",
+            right: "panel-toggle--right"
+        }
+    },
+    defaults: {
+        side: "right"
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "panel-toggle",
+                axes: {
+                    side: {
+                        left: "panel-toggle--left",
+                        right: "panel-toggle--right"
+                    }
+                }
+            },
+            indicator: {
+                base: "panel-toggle__indicator",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 1,
+            indicator: 0
+        }
+    }
+});
+export { panelToggle };

package/dist/components/panel-toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { PanelToggleLayout as default, PanelToggleLayout as PanelToggle, type PanelToggleProps, type PanelToggleSide, } from "./PanelToggle.generated";
+export { panelToggle } from "./PanelToggle.recipe";

package/dist/components/panel-toggle/index.js

@@ -0,0 +1,2 @@
+export { PanelToggleLayout as PanelToggle, PanelToggleLayout as default } from "./PanelToggle.generated.js";
+export { panelToggle } from "./PanelToggle.recipe.js";