@pathscale/ui 2.9.2 → 2.9.3

package/dist/components/_shared/controlledState.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Apply one requested controlled/uncontrolled boolean-state transition.
+ *
+ * Capture whether the request changes the current value before mutating local
+ * state. Reactive setters may update synchronously; checking again afterwards
+ * can incorrectly suppress the owner's change callback.
+ */
+export declare function applyBooleanStateRequest(options: {
+    current: boolean;
+    next: boolean;
+    controlled: boolean;
+    setInternal: (next: boolean) => void;
+    onChange?: (next: boolean) => void;
+}): boolean;

package/dist/components/_shared/controlledState.js

@@ -0,0 +1,7 @@
+function applyBooleanStateRequest(options) {
+    if (options.current === options.next) return false;
+    if (!options.controlled) options.setInternal(options.next);
+    options.onChange?.(options.next);
+    return true;
+}
+export { applyBooleanStateRequest };

package/dist/components/color-wheel/ComplexColorWheel.generated.js

@@ -63,26 +63,27 @@ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card,
                         get each () {
                             return p.adjustments;
                         },
+                        keyed: false,
                         children: (adjustment)=>(()=>{
                                 var _el$5 = _tmpl$4(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling;
                                 spread(_el$5, mergeProps(()=>_stable.slot.axis, {
                                     get ["data-axis"] () {
-                                        return adjustment.id;
+                                        return adjustment().id;
                                     }
                                 }), true);
                                 spread(_el$6, mergeProps(()=>_stable.slot.axisHeading), true);
-                                insert(_el$7, ()=>adjustment.label);
-                                insert(_el$8, ()=>adjustment.formatValue?.(adjustment.value) ?? adjustment.value);
+                                insert(_el$7, ()=>adjustment().label);
+                                insert(_el$8, ()=>adjustment().formatValue?.(adjustment().value) ?? adjustment().value);
                                 spread(_el$9, mergeProps(()=>_stable.slot.axisControl), true);
                                 insert(_el$9, createComponent(Show, {
                                     get when () {
-                                        return memo(()=>!!adjustment.stops?.length)() ? adjustment.stops : void 0;
+                                        return memo(()=>!!adjustment().stops?.length)() ? adjustment().stops : void 0;
                                     },
                                     get fallback () {
                                         return [
                                             createComponent(Show, {
                                                 get when () {
-                                                    return adjustment.preview;
+                                                    return adjustment().preview;
                                                 },
                                                 get children () {
                                                     var _el$1 = _tmpl$3();
@@ -90,7 +91,7 @@ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card,
                                                         "aria-hidden": "true",
                                                         get style () {
                                                             return {
-                                                                "background-color": adjustment.preview?.(adjustment.value, p.value)
+                                                                "background-color": adjustment().preview?.(adjustment().value, p.value)
                                                             };
                                                         }
                                                     }), false);
@@ -99,31 +100,31 @@ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card,
                                             }),
                                             createComponent(slider, {
                                                 get label () {
-                                                    return adjustment.label;
+                                                    return adjustment().label;
                                                 },
                                                 get value () {
-                                                    return adjustment.value;
+                                                    return adjustment().value;
                                                 },
                                                 get min () {
-                                                    return adjustment.min ?? 0;
+                                                    return adjustment().min ?? 0;
                                                 },
                                                 get max () {
-                                                    return adjustment.max ?? 100;
+                                                    return adjustment().max ?? 100;
                                                 },
                                                 get step () {
-                                                    return adjustment.step;
+                                                    return adjustment().step;
                                                 },
                                                 get disabled () {
                                                     return p.isDisabled;
                                                 },
                                                 get onChange () {
-                                                    return adjustment.onChange;
+                                                    return adjustment().onChange;
                                                 },
                                                 get onChangeEnd () {
-                                                    return adjustment.onChangeEnd;
+                                                    return adjustment().onChangeEnd;
                                                 },
                                                 get formatValue () {
-                                                    return adjustment.formatValue;
+                                                    return adjustment().formatValue;
                                                 },
                                                 size: "sm"
                                             })
@@ -141,29 +142,29 @@ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card,
                                                         size: "sm",
                                                         variant: "ghost",
                                                         get ["aria-label"] () {
-                                                            return `${adjustment.label} ${adjustment.formatValue?.(stop) ?? stop}`;
+                                                            return `${adjustment().label} ${adjustment().formatValue?.(stop) ?? stop}`;
                                                         },
                                                         get ["aria-pressed"] () {
-                                                            return Math.abs(adjustment.value - stop) < 0.001 ? "true" : "false";
+                                                            return Math.abs(adjustment().value - stop) < 0.001 ? "true" : "false";
                                                         },
                                                         get disabled () {
                                                             return p.isDisabled;
                                                         },
-                                                        onClick: ()=>adjustment.onChange(stop),
+                                                        onClick: ()=>adjustment().onChange(stop),
                                                         get children () {
                                                             var _el$11 = _tmpl$3();
                                                             spread(_el$11, mergeProps(()=>_stable.slot.stopPreview, {
                                                                 "aria-hidden": "true",
                                                                 get style () {
                                                                     return {
-                                                                        "background-color": adjustment.preview?.(stop, p.value),
-                                                                        color: adjustment.ink?.(stop, p.value)
+                                                                        "background-color": adjustment().preview?.(stop, p.value),
+                                                                        color: adjustment().ink?.(stop, p.value)
                                                                     };
                                                                 }
                                                             }), true);
                                                             insert(_el$11, createComponent(Show, {
                                                                 get when () {
-                                                                    return adjustment.ink;
+                                                                    return adjustment().ink;
                                                                 },
                                                                 children: "A"
                                                             }));
@@ -176,12 +177,12 @@ const __solidLayoutComplexColorWheelLayout = (_stable, p)=>createComponent(card,
                                 }));
                                 insert(_el$5, createComponent(Show, {
                                     get when () {
-                                        return adjustment.hint;
+                                        return adjustment().hint;
                                     },
                                     get children () {
                                         var _el$0 = _tmpl$3();
                                         spread(_el$0, mergeProps(()=>_stable.slot.hint), true);
-                                        insert(_el$0, ()=>adjustment.hint);
+                                        insert(_el$0, ()=>adjustment().hint);
                                         return _el$0;
                                     }
                                 }), null);

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

@@ -11,6 +11,7 @@ import { createColorFromHsl, parseColor, rgbToHex, rgbToHsl } from "./ColorUtils
 import { resolveColorWheelFlowerPalette } from "./ColorWheelFlower.palette.js";
 import { motionDistances, motionDurations, motionEasings, prefersReducedMotion, runMotion } 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></div></div><div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div><span></span><span>");
 const parseRgbToHsl = (rgbString)=>{
     const match = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
@@ -52,6 +53,12 @@ const createColorItem = (id, color, offsetX, offsetY, options)=>{
     };
 };
 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;
@@ -295,7 +302,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
     });
     const [pulseState, setPulseState] = createSignal(null);
     const [currentTheme, setCurrentTheme] = createSignal("u" > typeof document && "dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light");
-    if ("u" > typeof window) {
+    if ("u" > typeof window && "u" > typeof MutationObserver) {
         const observer = new MutationObserver(()=>{
             const t = document.documentElement.getAttribute("data-theme");
             setCurrentTheme("dark" === t ? "dark" : "light");
@@ -636,10 +643,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                             class: CLASSES.dot.base
                         }), {
                         get style () {
-                            return {
-                                left: `calc(50% + ${item.offsetX}px)`,
-                                top: `calc(50% + ${item.offsetY}px)`
-                            };
+                            return flowerPetalPosition(item.offsetX, item.offsetY);
                         }
                     }), true);
                     spread(_el$8, mergeProps(()=>({

package/dist/components/color-wheel-flower/ColorWheelFlower.geometry.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Place one petal around the wheel centre using properties Blitz supports.
+ *
+ * Keeping the percentage anchor separate from the pixel offset is deliberate:
+ * browser engines accept `calc(50% + …px)`, while Blitz currently drops that
+ * mixed-unit position and piles every petal onto the centre.
+ */
+export declare function flowerPetalPosition(offsetX: number, offsetY: number): {
+    readonly left: "50%";
+    readonly top: "50%";
+    readonly "margin-left": `${number}px`;
+    readonly "margin-top": `${number}px`;
+};

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

@@ -0,0 +1,9 @@
+function flowerPetalPosition(offsetX, offsetY) {
+    return {
+        left: "50%",
+        top: "50%",
+        "margin-left": `${offsetX}px`,
+        "margin-top": `${offsetY}px`
+    };
+}
+export { flowerPetalPosition };

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

@@ -1,6 +1,6 @@
 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 {

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

@@ -1,102 +1,72 @@
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, effect, insert, mergeProps, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./LanguageSwitcher.css";
-import { For, Show, omit } from "solid-js";
+import { For, 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("<span>");
+var _tmpl$ = /*#__PURE__*/ template("<select>"), _tmpl$2 = /*#__PURE__*/ template("<option>");
 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 handleSelect = async (lang)=>{
         await p.i18n.setLocale(lang);
         p.onLanguageChange?.(lang);
     };
-    const classes = ()=>twMerge(CLASSES.base, p.class);
-    return createComponent(dropdown.Root, mergeProps(others, ()=>({
+    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, ()=>({
             class: classes()
         }), {
         get style () {
             return p.style;
         },
-        role: void 0,
+        get value () {
+            return p.i18n.locale;
+        },
+        get disabled () {
+            return p.i18n.isLoading;
+        },
+        get ["aria-busy"] () {
+            return p.i18n.isLoading ? "true" : void 0;
+        },
         get ["aria-label"] () {
-            return p["aria-label"] ?? "Language selector";
+            return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
+        },
+        get title () {
+            return p.optionsLabel ?? p["aria-label"] ?? "Language selector";
         },
-        get children () {
-            return [
-                createComponent(dropdown.Trigger, mergeProps(()=>({
-                        class: CLASSES.trigger
-                    }), {
-                    get ["aria-label"] () {
-                        return `${p.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
-                    },
-                    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(()=>({
-                                        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({
-                                    onClick: ()=>handleSelect(lang.code)
-                                }, ()=>({
-                                        class: twMerge(CLASSES.item, isSelected(lang.code) && CLASSES.itemSelected)
-                                    }), {
-                                    get ["aria-current"] () {
-                                        return isSelected(lang.code) ? "true" : void 0;
-                                    },
-                                    get children () {
-                                        return lang.name;
-                                    }
-                                }))
-                        });
-                    }
-                }))
-            ];
+        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);
+            }
         }
+    }), 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/metal-border/MetalBorder.generated.js

@@ -20,7 +20,7 @@ const toRadiusCssValue = (value)=>{
     return value;
 };
 const readRadiusPx = (element)=>{
-    if (!element || "u" < typeof window) return 0;
+    if (!element || "u" < typeof window || "function" != typeof window.getComputedStyle) return 0;
     const computed = window.getComputedStyle(element);
     const candidates = [
         computed.borderTopLeftRadius,
@@ -145,7 +145,7 @@ const __solidLayoutMetalBorder = (_stable, p)=>{
             setPrefersReduced(prefersReducedMotion());
         };
         mediaQueryList?.addEventListener?.("change", handleMotionChange);
-        if (hostRef) {
+        if (hostRef && "u" > typeof MutationObserver) {
             const themeRoot = hostRef.closest("[data-theme]") ?? document.documentElement;
             mutationObserver = new MutationObserver(()=>{
                 syncResolvedTheme();

package/dist/components/popover/Popover.css

@@ -81,6 +81,12 @@
   .popover__trigger {
     display: inline-flex;
     cursor: pointer;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
   }
 
   .popover__trigger:focus-visible,

package/dist/components/popover/Popover.generated.d.ts

@@ -2,8 +2,8 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./Popover.css";
 import { type JSX } from "@solidjs/web";
 import "../_shared/material.css";
-import type { Material, UIBaseProps } from "../vocabulary";
 import { type OverlayAnchorRect, type OverlayPlacement } from "../_shared/overlayPosition";
+import type { Material, UIBaseProps } from "../vocabulary";
 export type PopoverPlacement = OverlayPlacement;
 export type PopoverAnchorRect = OverlayAnchorRect;
 export type PopoverAnchor = PopoverAnchorRect | (() => PopoverAnchorRect | undefined);
@@ -21,7 +21,7 @@ export type PopoverRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElem
     onInteractOutside?: (event: Event) => void;
 };
 declare const PopoverRoot: __LayoutComponent<PopoverRootProps>;
-export type PopoverTriggerProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+export type PopoverTriggerProps = UIBaseProps & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     children: JSX.Element;
 };
 declare const PopoverTrigger: __LayoutComponent<PopoverTriggerProps>;
@@ -53,4 +53,4 @@ declare const Popover: __LayoutComponent<PopoverRootProps> & {
     Heading: __LayoutComponent<PopoverHeadingProps>;
 };
 export default Popover;
-export { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading, };
+export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger, };

package/dist/components/popover/Popover.generated.js

@@ -4,9 +4,10 @@ import "./Popover.css";
 import { Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import "../_shared/material.css";
+import { applyBooleanStateRequest } from "../_shared/controlledState.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
 import { CLASSES, componentRecipe } from "./Popover.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<h3>");
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<h3>");
 const PopoverContext = createContext(null);
 const usePopoverContext = ()=>{
     const ctx = useContext(PopoverContext);
@@ -24,8 +25,13 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const isControlled = createMemo(()=>void 0 !== p.open);
     const isOpen = createMemo(()=>isControlled() ? Boolean(p.open) : internalOpen());
     const setIsOpen = (next, options)=>{
-        if (!isControlled()) setInternalOpen(next);
-        if (isOpen() !== next) p.onOpenChange?.(next);
+        applyBooleanStateRequest({
+            current: isOpen(),
+            next,
+            controlled: isControlled(),
+            setInternal: setInternalOpen,
+            onChange: p.onOpenChange
+        });
         if (!next && options?.focusTrigger) triggerRef()?.focus();
     };
     const preferredPlacement = ()=>p.placement ?? "bottom";
@@ -105,7 +111,7 @@ const PopoverRoot = defineComponent({
     embedded: true
 });
 const __solidLayoutPopoverTrigger = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "onKeyDown");
+    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "onKeyDown");
     const ctx = usePopoverContext();
     const handleClick = (event)=>{
         if ("function" == typeof p.onClick) p.onClick(event);
@@ -115,10 +121,6 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
     const handleKeyDown = (event)=>{
         if ("function" == typeof p.onKeyDown) p.onKeyDown(event);
         if (event.defaultPrevented) return;
-        if ("Enter" === event.key || " " === event.key) {
-            event.preventDefault();
-            ctx.setIsOpen(!ctx.isOpen());
-        }
         if ("Escape" === event.key && ctx.isOpen()) {
             event.preventDefault();
             ctx.setIsOpen(false, {
@@ -126,14 +128,15 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
             });
         }
     };
-    var _el$2 = _tmpl$();
+    var _el$2 = _tmpl$2();
     ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
     spread(_el$2, mergeProps(others, {
+        get type () {
+            return p.type ?? "button";
+        },
         get id () {
             return ctx.triggerId();
-        },
-        role: "button",
-        tabindex: 0
+        }
     }, ()=>({
             class: twMerge(CLASSES.slot.trigger, p.class)
         }), {
@@ -226,7 +229,7 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                             return style();
                         },
                         get ["aria-labelledby"] () {
-                            return ctx.triggerRef() ? ctx.triggerId() : void 0;
+                            return p["aria-labelledby"] ?? (ctx.triggerRef() ? ctx.triggerId() : void 0);
                         },
                         get ["aria-hidden"] () {
                             return ctx.isOpen() ? "false" : "true";
@@ -269,8 +272,8 @@ const PopoverDialog = defineComponent({
 const __solidLayoutPopoverArrow = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style");
     const ctx = usePopoverContext();
-    const defaultArrow = _tmpl$2();
-    var _el$6 = _tmpl$3();
+    const defaultArrow = _tmpl$3();
+    var _el$6 = _tmpl$4();
     spread(_el$6, mergeProps(others, ()=>({
             class: twMerge(CLASSES.slot.arrow, p.class)
         }), {
@@ -296,7 +299,7 @@ const PopoverArrow = defineComponent({
 });
 const __solidLayoutPopoverHeading = (_stable, p)=>{
     const others = omit(p, "children", "class", "dataTheme", "style");
-    var _el$7 = _tmpl$4();
+    var _el$7 = _tmpl$5();
     spread(_el$7, mergeProps(others, ()=>({
             class: twMerge(CLASSES.slot.heading, p.class)
         }), {

package/dist/components/slider/Slider.generated.js

@@ -3,8 +3,8 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Slider.css";
 import { Show, createSignal, createUniqueId } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { CLASSES, componentRecipe } from "./Slider.recipe.js";
 import { createSliderInteractionHandlers } from "./Slider.interactions.js";
+import { CLASSES, componentRecipe } from "./Slider.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div><div></div><div>");
 function clamp(val, min, max) {
     return Math.min(Math.max(val, min), max);
@@ -101,6 +101,7 @@ const __solidLayoutSlider = (_stable, p)=>{
             dragGeometry = active ? measureTrack() : void 0;
         },
         isThumb: (target)=>Boolean(thumbRef && target === thumbRef),
+        focusThumb: ()=>thumbRef?.focus(),
         onChange: (value)=>p.onChange(value),
         onChangeEnd: (value)=>p.onChangeEnd?.(value),
         onDraggingChange: setDragging
@@ -203,10 +204,10 @@ const __solidLayoutSlider = (_stable, p)=>{
                 left: thumbLeft()
             };
         },
-        role: "slider",
-        get tabindex () {
-            return isDisabled() ? -1 : 0;
-        },
+        role: "slider"
+    }, ()=>({
+            tabindex: isDisabled() ? -1 : 0
+        }), {
         get ["aria-valuemin"] () {
             return min();
         },

package/dist/components/slider/Slider.interactions.d.ts

@@ -6,6 +6,8 @@ export type SliderInteractionOptions = {
     onDragGeometry?: (active: boolean) => void;
     /** Whether a press landed on the thumb rather than on the bare track. */
     isThumb?: (target: EventTarget | null) => boolean;
+    /** Focus the keyboard-operable thumb as a fallback for synthetic pointers. */
+    focusThumb: () => void;
     valueFromKey: (key: string, currentValue: number) => number | undefined;
     onChange: (value: number) => void;
     onChangeEnd: (value: number) => void;

package/dist/components/slider/Slider.interactions.js

@@ -51,7 +51,7 @@ const createSliderInteractionHandlers = (options)=>{
     return {
         onPointerDown (event) {
             if (options.isDisabled() || void 0 !== pointerId) return;
-            event.preventDefault();
+            options.focusThumb();
             const target = event.currentTarget;
             target.setPointerCapture(event.pointerId);
             pointerId = event.pointerId;

package/dist/components/theme-color-picker/hueShift.js

@@ -170,7 +170,7 @@ function createHueShiftStore(storagePrefix) {
             applyThemeColor(color);
         }
     });
-    if ("u" > typeof window) {
+    if ("u" > typeof window && "u" > typeof MutationObserver) {
         const observer = new MutationObserver((mutations)=>{
             for (const mutation of mutations)if ("attributes" === mutation.type && "data-theme" === mutation.attributeName) requestAnimationFrame(reapplyThemeColor);
         });

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "components": {
     "Accordion": {
       "kind": "embedded"

package/dist/motion/engine.js

@@ -3,6 +3,7 @@ import { resolveEase } from "./easing.js";
 const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
 const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
 const readOpacity = (el)=>{
+    if ("u" < typeof getComputedStyle) return 1;
     const value = Number.parseFloat(getComputedStyle(el).opacity);
     return Number.isFinite(value) ? value : 1;
 };

package/dist/purge-manifest.json

@@ -8498,8 +8498,7 @@
         ]
       },
       "deps": [
-        "Dropdown",
-        "Icon"
+        "Dropdown"
       ]
     },
     "DateField.Root": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "author": "pathscale",
   "repository": {
     "type": "git",