@pathscale/ui 3.0.0 → 3.1.0

package/dist/components/auth-field-group/AuthFieldGroup.css

@@ -5,15 +5,23 @@
     flex-direction: column;
   }
 
+  /*
+   * The same three gaps `Flex` names.
+   *
+   * `md` and `lg` already matched `gap-4` and `gap-6`; `sm` was 0.75rem where
+   * Flex's is 0.5rem. One name meaning two spacings is the kind of thing an
+   * application fixes with a corrective class once per form, forever -- and it
+   * is the same defect `--control-h-*` was added for, one axis over.
+   */
   .auth-field-group--sm {
-    gap: 0.75rem;
+    gap: var(--gap-sm);
   }
 
   .auth-field-group--md {
-    gap: 1rem;
+    gap: var(--gap-md);
   }
 
   .auth-field-group--lg {
-    gap: 1.5rem;
+    gap: var(--gap-lg);
   }
 }

package/dist/components/button/Button.css

@@ -225,20 +225,20 @@
    * Size
    * --------------------------------------------------------------------- */
   .button--xs {
-    height: 1.75rem;
+    height: var(--control-h-xs);
     padding-inline: 0.5rem;
     font-size: 0.75rem;
   }
   .button--sm {
-    height: 2.25rem;
+    height: var(--control-h-sm);
     padding-inline: 0.75rem;
   }
   .button--md {
-    height: 2.5rem;
+    height: var(--control-h-md);
     padding-inline: 1rem;
   }
   .button--lg {
-    height: 2.75rem;
+    height: var(--control-h-lg);
     padding-inline: 1.125rem;
     font-size: 1rem;
   }

package/dist/components/card/Card.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "../_shared/material.css";
 import type { JSX } from "@solidjs/web";
 import "./Card.css";
-import type { Flavor, Material, Radius, Space, State, UIBaseProps, Variant } from "../vocabulary";
+import type { Flavor, Material, Radius, Space, UIBaseProps, Variant } from "../vocabulary";
 /**
  * @deprecated Use `Material` from the shared vocabulary. Kept as an alias
  * because it is exported publicly and removing it would break call sites; it
@@ -10,12 +10,31 @@ import type { Flavor, Material, Radius, Space, State, UIBaseProps, Variant } fro
  */
 export type CardMaterial = Material;
 export type CardElevation = "none" | "sm" | "md" | "lg";
+/**
+ * The states this card actually renders.
+ *
+ * Not the shared `State`, which is what the prop was typed as. That union is
+ * `default | loading | error | invalid | disabled | hidden` and this recipe
+ * implements `info | success | warning | danger`: the two have **no member in
+ * common**. So every value the type permitted resolved to no class, and every
+ * value the recipe implements was a type error.
+ *
+ * A prop that accepts only values it ignores is worse than one that does not
+ * exist, because it reads as configured. Narrowed to what is implemented;
+ * `state="disabled"` and friends stop type-checking, and they never did
+ * anything, so nothing that worked stops working.
+ *
+ * A card is not a form control, which is why the shared vocabulary does not
+ * fit: it has no validity and nothing to disable. Behaviour lives on
+ * `isInteractive`.
+ */
+export type CardState = "info" | "success" | "warning" | "danger";
 export type CardProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     variant?: Variant;
     material?: Material;
     elevation?: CardElevation;
     flavor?: Flavor;
-    state?: State;
+    state?: CardState;
     padding?: Space;
     radius?: Radius;
     /** Replaces isHoverable and isPressable, which had one call site each across 330. */

package/dist/components/card/index.d.ts

@@ -11,6 +11,6 @@ declare const Card: import("solid-js").Component<import("./Card.generated").Card
     Content: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
     Footer: import("solid-js").Component<import("./Card.generated").CardSectionProps>;
 };
-export type { CardElevation, CardMaterial, CardProps, CardSectionProps, } from "./Card.generated";
+export type { CardElevation, CardMaterial, CardState, CardProps, CardSectionProps, } from "./Card.generated";
 export { card, cardBody, cardFooter, cardHeader } from "./Card.recipe";
 export { Card as default, Card, CardBodyLayout as CardBody, CardFooterLayout as CardFooter, CardHeaderLayout as CardHeader, };

package/dist/components/checkbox/Checkbox.generated.d.ts

@@ -1,9 +1,9 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Checkbox.css";
 import type { JSX } from "@solidjs/web";
-import type { UIBaseProps, State, Issue } from "../vocabulary";
+import type { Issue, State, UIBaseProps } from "../vocabulary";
 export type CheckboxVariant = "primary" | "secondary";
-export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & UIBaseProps & {
+export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children" | "onChange"> & UIBaseProps & {
     defaultChecked?: boolean;
     children?: JSX.Element;
     description?: JSX.Element;
@@ -12,6 +12,27 @@ export type CheckboxProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "typ
     isIndeterminate?: boolean;
     indeterminate?: boolean;
     variant?: CheckboxVariant;
+    /**
+     * The new checked state.
+     *
+     * **Breaking in 3.1.** This was the input's native `onChange`, handing you
+     * an `Event`, while `Slider`, `RadioGroup` and `CheckboxGroup` handed you a
+     * value under the same name. Every control now reports its value here.
+     *
+     * Fires for a checkbox inside a `CheckboxGroup` too, reporting this box's
+     * own state; the group separately reports the whole selection through its
+     * own `onChange`.
+     *
+     * The native handler is {@link onNativeChange}.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * The underlying `change` event, before the toggle is applied.
+     *
+     * `preventDefault()` here leaves the box as it was, suppresses
+     * {@link onChange}, and does not notify an enclosing group.
+     */
+    onNativeChange?: JSX.EventHandlerUnion<HTMLInputElement, Event>;
 };
 declare const Checkbox: __LayoutComponent<CheckboxProps>;
 export default Checkbox;

package/dist/components/checkbox/Checkbox.generated.js

@@ -4,8 +4,8 @@ import "./Checkbox.css";
 import { Show, createSignal, createTrackedEffect, omit, useContext } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
 import { CheckboxGroupContext } from "../checkbox-group/context.js";
-import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
 import { resolveState } from "../vocabulary.js";
+import { CLASSES, componentRecipe } from "./Checkbox.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--indeterminate fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-width=3 viewBox="0 0 24 24"><line x1=21 x2=3 y1=12 y2=12>'), _tmpl$2 = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ template("<span>"), _tmpl$4 = /*#__PURE__*/ template("<span><!><!>"), _tmpl$5 = /*#__PURE__*/ template("<label><input><span><span>"), _tmpl$6 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=checkbox-default-indicator--checkmark fill=none role=presentation stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox="0 0 17 18"><polyline points="1 9 7 14 15 4">');
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
@@ -14,7 +14,7 @@ const invokeEventHandler = (handler, event)=>{
 const __solidLayoutCheckbox = (_stable, p)=>{
     let inputRef;
     const group = useContext(CheckboxGroupContext);
-    const others = omit(p, "class", "children", "description", "state", "issues", "isIndeterminate", "indeterminate", "variant", "checked", "defaultChecked", "value", "name", "disabled", "onChange", "dataTheme", "aria-invalid");
+    const others = omit(p, "class", "children", "description", "state", "issues", "isIndeterminate", "indeterminate", "variant", "checked", "defaultChecked", "value", "name", "disabled", "onChange", "onNativeChange", "dataTheme", "aria-invalid");
     const [internalSelected, setInternalSelected] = createSignal(Boolean(p.defaultChecked));
     const isControlled = ()=>void 0 !== p.checked;
     const optionValue = ()=>null != p.value ? String(p.value) : void 0;
@@ -31,11 +31,17 @@ const __solidLayoutCheckbox = (_stable, p)=>{
         inputRef.indeterminate = isIndeterminate();
     });
     const handleChange = (event)=>{
-        invokeEventHandler(p.onChange, event);
+        invokeEventHandler(p.onNativeChange, event);
         if (event.defaultPrevented) return;
         if (isDisabled()) return;
-        if (group && void 0 !== optionValue()) return void group.toggleValue(optionValue(), event.currentTarget.checked, event);
-        if (!isControlled()) setInternalSelected(event.currentTarget.checked);
+        const checked = event.currentTarget.checked;
+        if (group && void 0 !== optionValue()) {
+            group.toggleValue(optionValue(), checked, event);
+            p.onChange?.(checked);
+            return;
+        }
+        if (!isControlled()) setInternalSelected(checked);
+        p.onChange?.(checked);
     };
     var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
     spread(_el$, mergeProps(()=>({
@@ -168,7 +174,9 @@ const Checkbox = defineComponent({
         "issues",
         "isIndeterminate",
         "indeterminate",
-        "variant"
+        "variant",
+        "onChange",
+        "onNativeChange"
     ]
 });
 const Checkbox_generated = Checkbox;

package/dist/components/connection-settings/ConnectionSettings.css

@@ -0,0 +1,76 @@
+@layer components {
+  .connection-settings {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .connection-settings__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .connection-settings__title {
+    font-weight: 500;
+  }
+
+  .connection-settings__description {
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  /*
+   * The fields are absent from the tree while closed rather than hidden. A
+   * reveal that only sets `display: none` reads as present to anything driving
+   * the renderer, so a broken toggle still looks like it worked.
+   */
+  .connection-settings__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .connection-settings__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .connection-settings__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .connection-settings__input {
+    width: 100%;
+  }
+
+  .connection-settings__hint {
+    font-size: 0.875rem;
+    opacity: 0.7;
+  }
+
+  .connection-settings__current {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+    opacity: 0.6;
+  }
+
+  .connection-settings__actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  /* `data-applying`, not a class: the flag is this component's own runtime
+     state, not a prop, so a recipe prop could never be driven by it. State
+     attributes are what the library documents for exactly this. */
+  .connection-settings[data-applying="true"] .connection-settings__actions {
+    opacity: 0.6;
+  }
+}

package/dist/components/connection-settings/ConnectionSettings.generated.d.ts

@@ -0,0 +1,45 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ConnectionSettings.css";
+import type { JSX } from "@solidjs/web";
+import type { ConnectionSettingsStore } from "../../hooks/connection";
+import type { UIBaseProps } from "../vocabulary";
+/** One backend, as this panel presents it. `name` matches the store's endpoint. */
+export type ConnectionSettingsEndpointLabel = {
+    name: string;
+    label: string;
+    /** Shown under the field. The place to say what the default is for. */
+    hint?: string;
+    placeholder?: string;
+};
+export type ConnectionSettingsLabels = {
+    /** The switch's own label. */
+    useCustom: string;
+    useCustomDescription?: string;
+    appPublicId?: string;
+    save: string;
+    reset: string;
+    /** Prefix for the read-only "this is where you are pointed" lines. */
+    current?: string;
+};
+export type ConnectionSettingsProps = Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & UIBaseProps & {
+    /** From `createConnectionSettings`. The panel reads and writes it directly. */
+    store: ConnectionSettingsStore;
+    endpoints: readonly ConnectionSettingsEndpointLabel[];
+    labels: ConnectionSettingsLabels;
+    /** Omit to hide the app id field entirely. */
+    showAppPublicId?: boolean;
+    /**
+     * Rendered inside the revealed region, after the endpoint fields.
+     *
+     * Every site has one field the others do not: an app id, a second backend,
+     * a network selector. Putting them here keeps them inside the same reveal
+     * instead of forcing a second copy of the panel.
+     */
+    children?: JSX.Element;
+    /** Called after the store has applied. For a toast, or navigation. */
+    onSaved?: () => void;
+    /** Called when applying threw. The panel also shows the message itself. */
+    onSaveFailed?: (error: unknown) => void;
+    onResetDone?: () => void;
+};
+export declare const ConnectionSettingsLayout: __LayoutComponent<ConnectionSettingsProps>;

package/dist/components/connection-settings/ConnectionSettings.generated.js

@@ -0,0 +1,300 @@
+import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./ConnectionSettings.css";
+import { For, Show, createMemo, createSignal, createUniqueId, omit } from "solid-js";
+import button_0 from "../button/index.js";
+import input from "../input/index.js";
+import switch_0 from "../switch/index.js";
+import { componentRecipe } from "./ConnectionSettings.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<div><label>"), _tmpl$4 = /*#__PURE__*/ template("<form><div><div><p></p></div></div><!><div></div><div><!><!>"), _tmpl$5 = /*#__PURE__*/ template("<div><label></label><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<span><!>: <!>");
+const __solidLayoutConnectionSettingsLayout = (_stable, p)=>{
+    const others = omit(p, "children", "class", "dataTheme", "onSubmit", "style", "store", "endpoints", "labels", "showAppPublicId", "onSaved", "onSaveFailed", "onResetDone");
+    const uid = createUniqueId();
+    const fieldId = (name)=>`connection-settings-${uid}-${name}`;
+    const [open, setOpen] = createSignal(p.endpoints.some((e)=>p.store.isOverridden(e.name)));
+    const [draft, setDraft] = createSignal({});
+    const [appIdDraft, setAppIdDraft] = createSignal(void 0);
+    const [failure, setFailure] = createSignal(void 0);
+    const fieldValue = (name)=>draft()[name] ?? p.store.state.urls[name] ?? "";
+    const appIdValue = ()=>appIdDraft() ?? p.store.state.appPublicId;
+    const resolvedUrls = createMemo(()=>p.store.urls);
+    const edit = (name, value)=>setDraft({
+            ...draft(),
+            [name]: value
+        });
+    const setUseCustom = (next)=>setOpen(next);
+    let saving = false;
+    const save = async ()=>{
+        if (saving) return;
+        saving = true;
+        try {
+            await commit();
+        } finally{
+            saving = false;
+        }
+    };
+    const commit = async ()=>{
+        setFailure(void 0);
+        const values = new Map(p.endpoints.map((endpoint)=>[
+                endpoint.name,
+                fieldValue(endpoint.name)
+            ]));
+        if (open()) for (const [name, value] of values){
+            const problem = p.store.validate(name, value);
+            if (problem) {
+                setFailure(problem);
+                p.onSaveFailed?.(new Error(problem));
+                return;
+            }
+        }
+        for (const endpoint of p.endpoints){
+            const value = values.get(endpoint.name) ?? "";
+            const fallback = p.store.fallbacks[endpoint.name];
+            const overridden = open() && "" !== value && value !== fallback;
+            p.store.setOverride(endpoint.name, overridden);
+            if ("" !== value) p.store.setUrl(endpoint.name, value);
+        }
+        const id = appIdDraft();
+        if (void 0 !== id) p.store.setAppPublicId(id);
+        setDraft({});
+        setAppIdDraft(void 0);
+        try {
+            await p.store.apply();
+            p.onSaved?.();
+        } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            p.onSaveFailed?.(error);
+        }
+    };
+    const saveOnEnter = (event)=>{
+        if ("Enter" !== event.key || event.isComposing) return;
+        event.preventDefault();
+        save();
+    };
+    const reset = async ()=>{
+        setFailure(void 0);
+        setDraft({});
+        setAppIdDraft(void 0);
+        p.store.reset();
+        setOpen(false);
+        try {
+            await p.store.apply();
+            p.onResetDone?.();
+        } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            p.onSaveFailed?.(error);
+        }
+    };
+    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$14 = _el$2.nextSibling, _el$1 = _el$14.nextSibling, _el$11 = _el$1.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+    claimElement(_el$);
+    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
+        get style () {
+            return p.style;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get ["data-open"] () {
+            return open() ? "true" : "false";
+        },
+        get ["data-applying"] () {
+            return p.store.isApplying ? "true" : "false";
+        },
+        onSubmit: (event)=>{
+            event.preventDefault();
+            save();
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>_stable.slot.header), true);
+    spread(_el$4, mergeProps(()=>_stable.slot.title), true);
+    insert(_el$4, ()=>p.labels.useCustom);
+    insert(_el$3, createComponent(Show, {
+        get when () {
+            return p.labels.useCustomDescription;
+        },
+        get children () {
+            var _el$5 = _tmpl$();
+            spread(_el$5, mergeProps(()=>_stable.slot.description), true);
+            insert(_el$5, ()=>p.labels.useCustomDescription);
+            return _el$5;
+        }
+    }), null);
+    insert(_el$2, createComponent(switch_0, mergeProps(()=>_stable.slot.switch, {
+        get id () {
+            return fieldId("use-custom");
+        },
+        get ["aria-label"] () {
+            return p.labels.useCustom;
+        },
+        get checked () {
+            return open();
+        },
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onChange: ()=>setUseCustom(!open())
+    })), null);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return open();
+        },
+        get children () {
+            var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+            spread(_el$6, mergeProps(()=>_stable.slot.fields), true);
+            insert(_el$6, createComponent(For, {
+                get each () {
+                    return p.endpoints;
+                },
+                children: (endpoint)=>(()=>{
+                        var _el$15 = _tmpl$5(), _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.nextSibling;
+                        spread(_el$15, mergeProps(()=>_stable.slot.field), true);
+                        spread(_el$16, mergeProps(()=>_stable.slot.label, {
+                            get ["for"] () {
+                                return fieldId(endpoint.name);
+                            }
+                        }), true);
+                        insert(_el$16, ()=>endpoint.label);
+                        insert(_el$15, createComponent(input.Field, mergeProps(()=>_stable.slot.input, {
+                            get id () {
+                                return fieldId(endpoint.name);
+                            },
+                            get name () {
+                                return endpoint.name;
+                            },
+                            type: "text",
+                            onKeyDown: saveOnEnter,
+                            get ["aria-label"] () {
+                                return endpoint.label;
+                            },
+                            get placeholder () {
+                                return endpoint.placeholder;
+                            },
+                            get value () {
+                                return fieldValue(endpoint.name);
+                            },
+                            get disabled () {
+                                return p.store.isApplying;
+                            },
+                            onInput: (event)=>edit(endpoint.name, event.currentTarget.value)
+                        })), _el$18);
+                        insert(_el$15, createComponent(Show, {
+                            get when () {
+                                return endpoint.hint;
+                            },
+                            get children () {
+                                var _el$17 = _tmpl$();
+                                spread(_el$17, mergeProps(()=>_stable.slot.hint), true);
+                                insert(_el$17, ()=>endpoint.hint);
+                                return _el$17;
+                            }
+                        }), _el$19);
+                        return _el$15;
+                    })()
+            }), _el$7);
+            insert(_el$6, ()=>_stable.children, _el$8);
+            return _el$6;
+        }
+    }), _el$14);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return memo(()=>!!p.showAppPublicId)() ? p.labels.appPublicId : p.showAppPublicId;
+        },
+        get children () {
+            var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
+            spread(_el$9, mergeProps(()=>_stable.slot.field), true);
+            spread(_el$0, mergeProps(()=>_stable.slot.label, {
+                get ["for"] () {
+                    return fieldId("app-public-id");
+                }
+            }), true);
+            insert(_el$0, ()=>p.labels.appPublicId);
+            insert(_el$9, createComponent(input.Field, mergeProps(()=>_stable.slot.input, {
+                get id () {
+                    return fieldId("app-public-id");
+                },
+                type: "text",
+                onKeyDown: saveOnEnter,
+                get ["aria-label"] () {
+                    return p.labels.appPublicId;
+                },
+                get value () {
+                    return appIdValue();
+                },
+                get disabled () {
+                    return p.store.isApplying;
+                },
+                onInput: (event)=>setAppIdDraft(event.currentTarget.value)
+            })), null);
+            return _el$9;
+        }
+    }), _el$1);
+    spread(_el$1, mergeProps(()=>_stable.slot.current), true);
+    insert(_el$1, createComponent(For, {
+        get each () {
+            return p.endpoints;
+        },
+        children: (endpoint)=>(()=>{
+                var _el$20 = _tmpl$6(), _el$22 = _el$20.firstChild, _el$21 = _el$22.nextSibling, _el$23 = _el$21.nextSibling;
+                insert(_el$20, (()=>{
+                    var _c$ = memo(()=>!!p.labels.current);
+                    return ()=>_c$() ? `${p.labels.current} ` : "";
+                })(), _el$22);
+                insert(_el$20, ()=>endpoint.label, _el$21);
+                insert(_el$20, ()=>resolvedUrls()[endpoint.name], _el$23);
+                return _el$20;
+            })()
+    }));
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return failure();
+        },
+        get children () {
+            var _el$10 = _tmpl$();
+            spread(_el$10, mergeProps(()=>_stable.slot.hint, {
+                role: "alert"
+            }), true);
+            insert(_el$10, failure);
+            return _el$10;
+        }
+    }), _el$11);
+    spread(_el$11, mergeProps(()=>_stable.slot.actions), true);
+    insert(_el$11, createComponent(button_0, {
+        type: "button",
+        flavor: "primary",
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onClick: ()=>void save(),
+        get children () {
+            return p.labels.save;
+        }
+    }), _el$12);
+    insert(_el$11, createComponent(button_0, {
+        type: "button",
+        flavor: "secondary",
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onClick: reset,
+        get children () {
+            return p.labels.reset;
+        }
+    }), _el$13);
+    return _el$;
+};
+const ConnectionSettingsLayout = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutConnectionSettingsLayout,
+    embedded: true,
+    behaviour: [
+        "store",
+        "endpoints",
+        "labels",
+        "showAppPublicId",
+        "children",
+        "onSaved",
+        "onSaveFailed",
+        "onResetDone"
+    ]
+});
+export { ConnectionSettingsLayout };

package/dist/components/connection-settings/ConnectionSettings.recipe.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Presentation lives here, not in the layout.
+ *
+ * This declared empty slots while `ConnectionSettings.layout.tsx` kept a
+ * `CLASSES` table and assembled class strings by hand with `twMerge`. That is
+ * the shape `solid-layouts-lint` calls a "legacy component-shaped Layout", and
+ * it was the only unbaselined warning in the repository -- new debt in a new
+ * component, which is exactly the debt `warningsAsErrors` exists to stop.
+ *
+ * `open` and `applying` are recipe props rather than conditional classes in the
+ * component, so the compiler owns the whole class string.
+ */
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "connection-settings";
+    readonly element: "form";
+    readonly slots: {
+        readonly root: {
+            readonly base: "connection-settings";
+        };
+        readonly header: {
+            readonly base: "connection-settings__header";
+        };
+        readonly title: {
+            readonly base: "connection-settings__title";
+        };
+        readonly description: {
+            readonly base: "connection-settings__description";
+        };
+        readonly switch: {
+            readonly base: "connection-settings__switch";
+        };
+        readonly fields: {
+            readonly base: "connection-settings__fields";
+        };
+        readonly field: {
+            readonly base: "connection-settings__field";
+        };
+        readonly label: {
+            readonly base: "connection-settings__label";
+        };
+        readonly input: {
+            readonly base: "connection-settings__input";
+        };
+        readonly hint: {
+            readonly base: "connection-settings__hint";
+        };
+        readonly current: {
+            readonly base: "connection-settings__current";
+        };
+        readonly actions: {
+            readonly base: "connection-settings__actions";
+        };
+    };
+}>;