@pathscale/ui 2.9.2 → 2.10.0

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/inline-edit/InlineEdit.css

@@ -0,0 +1,79 @@
+@layer components {
+  .inline-edit {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .inline-edit--full-width {
+    width: 100%;
+  }
+
+  .inline-edit__read {
+    display: inline-flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .inline-edit__value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .inline-edit__trigger {
+    display: inline-flex;
+    height: 1.125rem;
+    width: 1.125rem;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    padding: 0;
+    color: var(--color-base-content);
+    opacity: 0.55;
+  }
+
+  .inline-edit__trigger:hover {
+    background-color: oklch(100% 0 0 / 0.08);
+    opacity: 1;
+  }
+
+  .inline-edit__edit {
+    display: none;
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .inline-edit--editing .inline-edit__read {
+    display: none;
+  }
+
+  .inline-edit--editing .inline-edit__edit {
+    display: inline-flex;
+  }
+
+  .inline-edit__field {
+    min-width: 0;
+    flex: 1 1 auto;
+    border-radius: 0.375rem;
+    border: var(--border, 1px) solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    padding: 0.125rem 0.5rem;
+    color: var(--color-base-content);
+    outline: none;
+  }
+
+  .inline-edit__field:focus {
+    border-color: var(--color-primary);
+  }
+
+  .inline-edit--disabled .inline-edit__trigger {
+    pointer-events: none;
+    opacity: 0.4;
+  }
+}

package/dist/components/inline-edit/InlineEdit.generated.d.ts

@@ -0,0 +1,27 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./InlineEdit.css";
+import type { JSX } from "@solidjs/web";
+import type { UIBaseProps } from "../vocabulary";
+/**
+ * A value that is read in place until someone chooses to change it.
+ *
+ * Enter commits, Escape abandons, and moving focus away commits, so the mode
+ * has an exit for a reader who never touches the keyboard.
+ */
+export type InlineEditProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "onChange" | "children"> & UIBaseProps & {
+    /** The current value, shown while not editing and used as the draft. */
+    value: string;
+    /** Called with the trimmed draft when it differs from `value`. */
+    onCommit?: (value: string) => void | Promise<unknown>;
+    /** Accessible name for the trigger and the field. Both need one. */
+    label?: string;
+    /** Rendered inside the trigger. An icon, usually. */
+    trigger?: JSX.Element;
+    /** Rendered in place of the plain value, for a value that is also a link. */
+    children?: JSX.Element;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    fieldClass?: string;
+};
+declare const InlineEdit: __LayoutComponent<InlineEditProps>;
+export default InlineEdit;

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

@@ -0,0 +1,117 @@
+import { className, delegateEvents, effect, insert, mergeProps, ref, setAttribute, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./InlineEdit.css";
+import { omit } from "solid-js";
+import { twMerge } from "../../lib/twMerge.js";
+import { CLASSES, componentRecipe } from "./InlineEdit.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span><span data-slot=inline-edit-read><span data-slot=inline-edit-value></span><button type=button data-slot=inline-edit-trigger></button></span><span data-slot=inline-edit-edit><input type=text data-slot=inline-edit-field>");
+const __solidLayoutInlineEdit = (_stable, p)=>{
+    const others = omit(p, "class", "value", "onCommit", "label", "trigger", "children", "fullWidth", "disabled", "fieldClass");
+    let readRow;
+    let editRow;
+    let field;
+    let open = false;
+    let focused = false;
+    let draft = "";
+    const apply = (next)=>{
+        open = next;
+        if (readRow) readRow.style.display = next ? "none" : "inline-flex";
+        if (editRow) editRow.style.display = next ? "inline-flex" : "none";
+    };
+    const start = ()=>{
+        if (p.disabled) return;
+        draft = p.value;
+        if (field) field.value = draft;
+        apply(true);
+        queueMicrotask(()=>{
+            field?.focus();
+            field?.select();
+        });
+    };
+    const cancel = ()=>{
+        draft = p.value;
+        if (field) field.value = draft;
+        focused = false;
+        apply(false);
+    };
+    const commit = ()=>{
+        const next = draft.trim();
+        focused = false;
+        apply(false);
+        if (!next || next === p.value) return;
+        p.onCommit?.(next);
+    };
+    const rootClasses = ()=>twMerge(CLASSES.base, p.fullWidth && CLASSES.flag.fullWidth, p.disabled && CLASSES.flag.disabled, p.class);
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild;
+    spread(_el$, mergeProps(others, {
+        get ["class"] () {
+            return rootClasses();
+        },
+        "data-slot": "root"
+    }), true);
+    ref(()=>(element)=>{
+            readRow = element;
+        }, _el$2);
+    insert(_el$3, ()=>p.children ?? p.value);
+    _el$4.$$click = start;
+    insert(_el$4, ()=>p.trigger);
+    ref(()=>(element)=>{
+            editRow = element;
+        }, _el$5);
+    _el$6.$$keydown = (event)=>{
+        if ("Enter" === event.key) {
+            event.preventDefault();
+            commit();
+        } else if ("Escape" === event.key) {
+            event.preventDefault();
+            cancel();
+        }
+    };
+    _el$6.addEventListener("blur", ()=>{
+        if (!focused) return;
+        if (open) commit();
+    });
+    _el$6.addEventListener("focus", ()=>{
+        focused = true;
+    });
+    _el$6.$$input = (event)=>{
+        draft = event.currentTarget.value;
+    };
+    ref(()=>(element)=>{
+            field = element;
+        }, _el$6);
+    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$)=>{
+        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);
+    });
+    return _el$;
+};
+const InlineEdit = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInlineEdit,
+    embedded: true
+});
+const InlineEdit_generated = InlineEdit;
+delegateEvents([
+    "click",
+    "input",
+    "keydown"
+]);
+export default InlineEdit_generated;

package/dist/components/inline-edit/InlineEdit.recipe.d.ts

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    readonly base: "inline-edit";
+    readonly slot: {
+        readonly read: "inline-edit__read";
+        readonly value: "inline-edit__value";
+        readonly trigger: "inline-edit__trigger";
+        readonly edit: "inline-edit__edit";
+        readonly field: "inline-edit__field";
+    };
+    readonly flag: {
+        readonly editing: "inline-edit--editing";
+        readonly fullWidth: "inline-edit--full-width";
+        readonly disabled: "inline-edit--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "inline-edit";
+    readonly slots: {
+        readonly root: {};
+        readonly "inline-edit-read": {};
+        readonly "inline-edit-value": {};
+        readonly "inline-edit-trigger": {};
+        readonly "inline-edit-edit": {};
+        readonly "inline-edit-field": {};
+    };
+}>;

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

@@ -0,0 +1,65 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "inline-edit",
+    slot: {
+        read: "inline-edit__read",
+        value: "inline-edit__value",
+        trigger: "inline-edit__trigger",
+        edit: "inline-edit__edit",
+        field: "inline-edit__field"
+    },
+    flag: {
+        editing: "inline-edit--editing",
+        fullWidth: "inline-edit--full-width",
+        disabled: "inline-edit--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "inline-edit",
+    slots: {
+        root: {},
+        "inline-edit-read": {},
+        "inline-edit-value": {},
+        "inline-edit-trigger": {},
+        "inline-edit-edit": {},
+        "inline-edit-field": {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-read": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-value": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-trigger": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-edit": {
+                base: "",
+                axes: {}
+            },
+            "inline-edit-field": {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 5,
+            "inline-edit-read": 2,
+            "inline-edit-value": 4,
+            "inline-edit-trigger": 3,
+            "inline-edit-edit": 0,
+            "inline-edit-field": 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/inline-edit/index.d.ts

@@ -0,0 +1,3 @@
+import InlineEdit from "./InlineEdit.generated";
+export type { InlineEditProps } from "./InlineEdit.generated";
+export default InlineEdit;

package/dist/components/inline-edit/index.js

@@ -0,0 +1,3 @@
+import InlineEdit_generated from "./InlineEdit.generated.js";
+const inline_edit = InlineEdit_generated;
+export default inline_edit;

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/index.d.ts

@@ -58,6 +58,8 @@ export { default as Header } from "./components/header";
 export { default as Icon } from "./components/icon";
 export type { CookieConsentProps, CookieConsentStorageKeys, CookieConsentTexts, FirefoxPWABannerProps, FirefoxPWABannerTexts, ImmersiveLandingArrowsProps, ImmersiveLandingContextValue, ImmersiveLandingNavigationProps, ImmersiveLandingPageProps, ImmersiveLandingProps, PWAInstallPromptProps, PWAInstallPromptTexts, UseImmersiveLandingOptions, UseImmersiveLandingReturn, } from "./components/immersive-landing";
 export { CookieConsent, default as ImmersiveLanding, FirefoxPWABanner, ImmersiveLandingContext, PWAInstallPrompt, useImmersiveLanding, useImmersiveLandingContext, } from "./components/immersive-landing";
+export type { InlineEditProps } from "./components/inline-edit";
+export { default as InlineEdit } from "./components/inline-edit";
 export { default as Input } from "./components/input";
 export type { InputOTPGroupProps, InputOTPProps, InputOTPRootProps, InputOTPSeparatorProps, InputOTPSlotProps, InputOTPVariant, } from "./components/input-otp";
 export { default as InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, } from "./components/input-otp";

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as Grid } from "./components/grid/index.js";
 export { default as Header } from "./components/header/index.js";
 export { default as Icon } from "./components/icon/index.js";
 export { CookieConsent, FirefoxPWABanner, ImmersiveLandingContext, PWAInstallPrompt, default as ImmersiveLanding, useImmersiveLanding, useImmersiveLandingContext } from "./components/immersive-landing/index.js";
+export { default as InlineEdit } from "./components/inline-edit/index.js";
 export { default as Input } from "./components/input/index.js";
 export { InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, default as InputOTP } from "./components/input-otp/index.js";
 export { default as Label } from "./components/label/index.js";

package/dist/layouts.manifest.json

@@ -1,7 +1,7 @@
 {
   "format": "solid-layouts-library-v2",
   "package": "@pathscale/ui",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -321,6 +321,9 @@
     "ImmersiveLandingContext": {
       "kind": "embedded"
     },
+    "InlineEdit": {
+      "kind": "embedded"
+    },
     "Input": {
       "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

@@ -7631,6 +7631,54 @@
         "CheckboxGroup"
       ]
     },
+    "InlineEdit": {
+      "key": "InlineEdit",
+      "component": "InlineEdit",
+      "classes": {
+        "always": [],
+        "byProp": {
+          "slot": {
+            "read": [],
+            "value": [],
+            "trigger": [],
+            "edit": [],
+            "field": []
+          },
+          "editing": [],
+          "fullWidth": [],
+          "disabled": []
+        }
+      },
+      "attributeSelectors": [],
+      "selectors": [
+        ".inline-edit",
+        ".inline-edit--disabled .inline-edit__trigger",
+        ".inline-edit--editing .inline-edit__edit",
+        ".inline-edit--editing .inline-edit__read",
+        ".inline-edit--full-width",
+        ".inline-edit__edit",
+        ".inline-edit__field",
+        ".inline-edit__field:focus",
+        ".inline-edit__read",
+        ".inline-edit__trigger",
+        ".inline-edit__trigger:hover",
+        ".inline-edit__value"
+      ],
+      "cssVars": {
+        "declared": [],
+        "referenced": [
+          "--border",
+          "--color-base-100",
+          "--color-base-300",
+          "--color-base-content",
+          "--color-primary"
+        ]
+      },
+      "keyframes": {
+        "declared": [],
+        "referenced": []
+      }
+    },
     "Navbar.navbar": {
       "key": "Navbar.navbar",
       "component": "Navbar",
@@ -8498,8 +8546,7 @@
         ]
       },
       "deps": [
-        "Dropdown",
-        "Icon"
+        "Dropdown"
       ]
     },
     "DateField.Root": {
@@ -25334,6 +25381,78 @@
           "ImmersiveLanding.pwaPrompt"
         ]
       },
+      {
+        "selector": ".inline-edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__field",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__field:focus",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__read",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__trigger",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__trigger:hover",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit__value",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--disabled .inline-edit__trigger",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--editing .inline-edit__edit",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--editing .inline-edit__read",
+        "components": [
+          "InlineEdit"
+        ]
+      },
+      {
+        "selector": ".inline-edit--full-width",
+        "components": [
+          "InlineEdit"
+        ]
+      },
       {
         "selector": ".input__icon",
         "components": [
@@ -30829,6 +30948,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31066,6 +31186,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31997,6 +32118,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "Kbd",
           "LanguageSwitcher",
@@ -32054,6 +32176,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -32134,6 +32257,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "LanguageSwitcher",
           "LiveChat.bubble",
           "LiveChat.panel",

package/package.json

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