@pathscale/ui 2.9.3 → 2.11.0

package/dist/components/color-wheel/ComplexColorWheel.css

@@ -3,6 +3,12 @@
   align-items: flex-start;
   gap: 1rem;
   padding: 0.875rem;
+  /*
+   * Named, so the `auto` rules below measure this component rather than the
+   * window. The wheel usually sits in a side panel, and a panel narrow enough
+   * to need stacking is common on a wide screen.
+   */
+  container: complex-color-wheel / inline-size;
 }
 
 .complex-color-wheel__adjustments {
@@ -13,6 +19,49 @@
   gap: 0.875rem;
 }
 
+/* Stacked: the wheel above, every axis in one column under it. */
+.complex-color-wheel--layout-stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/*
+ * Beside: the rows sit next to the wheel and pack two to a line. `auto-fit`
+ * rather than a fixed two, so the last row spans the full width instead of
+ * leaving a hole, and a container too narrow for two columns gets one.
+ */
+.complex-color-wheel--layout-beside .complex-color-wheel__adjustments {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+  gap: 0.875rem 1.25rem;
+  align-content: start;
+}
+
+/* The action sits alone on its own line above the axes it resets. */
+.complex-color-wheel--layout-beside .complex-color-wheel__action {
+  grid-column: 1 / -1;
+}
+
+@container complex-color-wheel (min-width: 30rem) {
+  .complex-color-wheel--layout-auto .complex-color-wheel__adjustments {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
+    gap: 0.875rem 1.25rem;
+    align-content: start;
+  }
+
+  .complex-color-wheel--layout-auto .complex-color-wheel__action {
+    grid-column: 1 / -1;
+  }
+}
+
+@container complex-color-wheel (max-width: 30rem) {
+  .complex-color-wheel--layout-auto {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 .complex-color-wheel__action {
   display: flex;
   justify-content: flex-end;

package/dist/components/color-wheel/ComplexColorWheel.generated.d.ts

@@ -27,5 +27,14 @@ export interface ComplexColorWheelProps extends ColorWheelProps {
     material?: CardMaterial;
     action?: JSX.Element;
     adjustmentsClass?: string;
+    /**
+     * Where the axes sit: `beside` the wheel and two to a line, `stacked` in one
+     * column under it, or `auto` to choose by the width this component is given.
+     *
+     * `auto` measures the component rather than the viewport, because the wheel
+     * is usually in a side panel and a narrow panel on a wide screen still wants
+     * the stacked reading.
+     */
+    layout?: "auto" | "beside" | "stacked";
 }
 export declare const ComplexColorWheelLayout: __LayoutComponent<ComplexColorWheelProps>;

package/dist/components/color-wheel/ComplexColorWheel.recipe.d.ts

@@ -35,4 +35,24 @@ export declare const complexColorWheel: import("solid-layouts/solid-2").Recipe<{
             readonly base: "complex-color-wheel__hint";
         };
     };
+    readonly props: {
+        /**
+         * Where the adjustment rows sit relative to the wheel, and to each other.
+         *
+         * `beside` is the wide reading: the rows sit to the right of the wheel and
+         * pack two to a line once there is room for them. `stacked` is the narrow
+         * one, everything in a single column. `auto` picks by the width the
+         * component is actually given rather than by the viewport, so a wheel in a
+         * narrow panel stacks on a wide screen, which is the case that matters:
+         * this lives in a side panel more often than on a page.
+         */
+        readonly layout: {
+            readonly auto: "complex-color-wheel--layout-auto";
+            readonly beside: "complex-color-wheel--layout-beside";
+            readonly stacked: "complex-color-wheel--layout-stacked";
+        };
+    };
+    readonly defaults: {
+        readonly layout: "auto";
+    };
 }>;

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

@@ -36,11 +36,27 @@ const complexColorWheel = recipe({
             base: "complex-color-wheel__hint"
         }
     },
+    props: {
+        layout: {
+            auto: "complex-color-wheel--layout-auto",
+            beside: "complex-color-wheel--layout-beside",
+            stacked: "complex-color-wheel--layout-stacked"
+        }
+    },
+    defaults: {
+        layout: "auto"
+    },
     _layouts: {
         slots: {
             root: {
                 base: "complex-color-wheel",
-                axes: {}
+                axes: {
+                    layout: {
+                        auto: "complex-color-wheel--layout-auto",
+                        beside: "complex-color-wheel--layout-beside",
+                        stacked: "complex-color-wheel--layout-stacked"
+                    }
+                }
             },
             adjustments: {
                 base: "complex-color-wheel__adjustments",

package/dist/components/color-wheel-flower/ColorWheelFlower.css

@@ -24,10 +24,6 @@
     inset: 0;
   }
 
-  .color-wheel-flower__ring-shell--outer {
-    transform: scale(1.1);
-  }
-
   .color-wheel-flower__ring-shell--inner {
     transform: scale(0.9);
   }
@@ -38,10 +34,6 @@
     border-radius: var(--radius-pill, 9999px);
   }
 
-  .color-wheel-flower__ring--outer {
-    will-change: transform, opacity, box-shadow, background;
-  }
-
   .color-wheel-flower__ring--inner {
     background: #0b1012;
   }

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

@@ -12,7 +12,7 @@ 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>");
+var _tmpl$ = /*#__PURE__*/ template("<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+)\)$/);
     if (!match) return {
@@ -317,27 +317,14 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
     }
     const mode = ()=>p.mode ?? currentTheme();
     const colors = createMemo(()=>buildColors(resolveColorWheelFlowerPalette(mode(), p.palette)));
-    const rainbowGradient = ()=>{
-        const outer = colors().slice(0, 12);
-        const stops = outer.map((item, index)=>`${item.rgb} ${index / outer.length * 360}deg`);
-        stops.push(`${outer[0].rgb} 360deg`);
-        return `conic-gradient(from 0deg, ${stops.join(", ")})`;
-    };
     const reduceMotion = prefersReducedMotion();
-    const ringTransition = reduceMotion ? {
-        duration: 0
-    } : {
-        duration: motionDurations.slow,
-        easing: motionEasings.inOut
-    };
+    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;
-    let outerRingRef;
-    let outerRingControl = null;
     const closestIndex = createMemo(()=>{
         const current = context.color();
         const items = colors();
@@ -437,51 +424,12 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
         setHoveredIndex(null);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     };
-    const outerRingBackground = ()=>{
-        const selected = selectedIndex();
-        if (null === selected) return rainbowGradient();
-        const color = colors()[selected];
-        return `conic-gradient(${color.rgb}, ${color.rgb})`;
-    };
-    const outerRingTarget = createMemo(()=>{
-        if (context.disabled()) return {
-            opacity: 0.5,
-            scale: 1
-        };
-        if (null !== selectedIndex()) return {
-            opacity: 1,
-            scale: 1
-        };
-        if (null !== hoveredIndex()) return {
-            opacity: 0.98,
-            scale: 0.84
-        };
-        return {
-            opacity: 0.92,
-            scale: 0.84
-        };
-    });
-    const outerRingGlow = createMemo(()=>{
-        if (context.disabled()) return "none";
-        const index = hoveredIndex() ?? selectedIndex();
-        if (null === index) return "0 0 10px rgba(255,255,255,0.08)";
-        const color = colors()[index].rgb;
-        return `0 0 10px rgba(255,255,255,0.16), 0 0 20px ${toRgba(color, 0.35)}`;
-    });
-    createTrackedEffect(()=>{
-        const node = outerRingRef;
-        if (!node) return;
-        const target = outerRingTarget();
-        outerRingControl?.stop();
-        outerRingControl = runMotion(node, readMotionState(node), target, ringTransition);
-    });
     onCleanup(()=>{
-        outerRingControl?.stop();
         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, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild;
+    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(()=>({
@@ -503,25 +451,9 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
             class: CLASSES.rings
         })), true);
     spread(_el$3, mergeProps(()=>({
-            class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.outer)
-        })), true);
-    var _ref$2 = outerRingRef;
-    "function" == typeof _ref$2 || Array.isArray(_ref$2) ? ref(()=>_ref$2, _el$4) : outerRingRef = _el$4;
-    spread(_el$4, mergeProps(()=>({
-            class: twMerge(CLASSES.ring.base, CLASSES.ring.outer)
-        }), {
-        get style () {
-            return {
-                background: outerRingBackground(),
-                "box-shadow": outerRingGlow(),
-                transition: reduceMotion ? "none" : "background 450ms ease-in-out, box-shadow 300ms ease-out"
-            };
-        }
-    }), false);
-    spread(_el$5, mergeProps(()=>({
             class: twMerge(CLASSES.ringShell.base, CLASSES.ringShell.inner)
         })), true);
-    spread(_el$6, mergeProps(()=>({
+    spread(_el$4, mergeProps(()=>({
             class: twMerge(CLASSES.ring.base, CLASSES.ring.inner)
         })), false);
     insert(_el$, createComponent(color_swatch_picker, mergeProps(()=>({
@@ -638,24 +570,24 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                     onCleanup(()=>{
                         dotControl?.stop();
                     });
-                    var _el$7 = _tmpl$2(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-                    spread(_el$7, mergeProps(()=>({
+                    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
                         }), {
                         get style () {
                             return flowerPetalPosition(item.offsetX, item.offsetY);
                         }
                     }), true);
-                    spread(_el$8, mergeProps(()=>({
+                    spread(_el$6, mergeProps(()=>({
                             class: CLASSES.dot.frame
                         })), true);
                     ref(()=>(el)=>{
                             motionRef = el;
-                        }, _el$9);
-                    spread(_el$9, mergeProps(()=>({
+                        }, _el$7);
+                    spread(_el$7, mergeProps(()=>({
                             class: CLASSES.dot.motion
                         })), true);
-                    spread(_el$0, mergeProps(()=>({
+                    spread(_el$8, mergeProps(()=>({
                             class: CLASSES.halo
                         }), {
                         get style () {
@@ -666,7 +598,7 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                             };
                         }
                     }), false);
-                    insert(_el$9, createComponent(color_swatch, mergeProps({
+                    insert(_el$7, createComponent(color_swatch, mergeProps({
                         get color () {
                             return item.hex;
                         },
@@ -704,11 +636,11 @@ const __solidLayoutColorWheelFlower = (_stable, p)=>{
                         onPointerCancel: ()=>{
                             if (!context.disabled()) setPressedIndex(null);
                         }
-                    })), _el$1);
-                    spread(_el$1, mergeProps(()=>({
+                    })), _el$9);
+                    spread(_el$9, mergeProps(()=>({
                             class: clsx(CLASSES.highlight.base, isHovered() && CLASSES.highlight.hovered, isPulsing() && CLASSES.highlight.pulsing)
                         })), false);
-                    return _el$7;
+                    return _el$5;
                 }
             });
         }

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

@@ -6,12 +6,10 @@ export declare const CLASSES: {
     readonly rings: "color-wheel-flower__rings";
     readonly ringShell: {
         readonly base: "color-wheel-flower__ring-shell";
-        readonly outer: "color-wheel-flower__ring-shell--outer";
         readonly inner: "color-wheel-flower__ring-shell--inner";
     };
     readonly ring: {
         readonly base: "color-wheel-flower__ring";
-        readonly outer: "color-wheel-flower__ring--outer";
         readonly inner: "color-wheel-flower__ring--inner";
     };
     readonly picker: "color-wheel-flower__picker";

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

@@ -7,12 +7,10 @@ const CLASSES = {
     rings: "color-wheel-flower__rings",
     ringShell: {
         base: "color-wheel-flower__ring-shell",
-        outer: "color-wheel-flower__ring-shell--outer",
         inner: "color-wheel-flower__ring-shell--inner"
     },
     ring: {
         base: "color-wheel-flower__ring",
-        outer: "color-wheel-flower__ring--outer",
         inner: "color-wheel-flower__ring--inner"
     },
     picker: "color-wheel-flower__picker",

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/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.3",
+  "version": "2.11.0",
   "components": {
     "Accordion": {
       "kind": "embedded"
@@ -321,6 +321,9 @@
     "ImmersiveLandingContext": {
       "kind": "embedded"
     },
+    "InlineEdit": {
+      "kind": "embedded"
+    },
     "Input": {
       "kind": "embedded"
     },

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",
@@ -15215,9 +15263,6 @@
             "base": [
               "color-wheel-flower__ring-shell"
             ],
-            "outer": [
-              "color-wheel-flower__ring-shell--outer"
-            ],
             "inner": [
               "color-wheel-flower__ring-shell--inner"
             ]
@@ -15226,9 +15271,6 @@
             "base": [
               "color-wheel-flower__ring"
             ],
-            "outer": [
-              "color-wheel-flower__ring--outer"
-            ],
             "inner": [
               "color-wheel-flower__ring--inner"
             ]
@@ -15283,10 +15325,8 @@
         ".color-wheel-flower__picker",
         ".color-wheel-flower__ring",
         ".color-wheel-flower__ring--inner",
-        ".color-wheel-flower__ring--outer",
         ".color-wheel-flower__ring-shell",
         ".color-wheel-flower__ring-shell--inner",
-        ".color-wheel-flower__ring-shell--outer",
         ".color-wheel-flower__rings",
         ".color-wheel-flower__swatch",
         ".color-wheel-flower__swatch--center",
@@ -19572,12 +19612,6 @@
           "ColorWheelFlower"
         ]
       },
-      {
-        "selector": ".color-wheel-flower__ring--outer",
-        "components": [
-          "ColorWheelFlower"
-        ]
-      },
       {
         "selector": ".color-wheel-flower__ring-shell",
         "components": [
@@ -19590,12 +19624,6 @@
           "ColorWheelFlower"
         ]
       },
-      {
-        "selector": ".color-wheel-flower__ring-shell--outer",
-        "components": [
-          "ColorWheelFlower"
-        ]
-      },
       {
         "selector": ".color-wheel-flower__rings",
         "components": [
@@ -25333,6 +25361,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": [
@@ -30828,6 +30928,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31065,6 +31166,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -31996,6 +32098,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "Kbd",
           "LanguageSwitcher",
@@ -32053,6 +32156,7 @@
           "ImmersiveLanding.navigation",
           "ImmersiveLanding.page",
           "ImmersiveLanding.pwaPrompt",
+          "InlineEdit",
           "Input",
           "InputOTP.Group",
           "InputOTP.Input",
@@ -32133,6 +32237,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.3",
+  "version": "2.11.0",
   "author": "pathscale",
   "repository": {
     "type": "git",