@sevenfold/setto-client 0.8.2 → 0.8.4

package/dist/modules/forms/SettoForm.d.ts

@@ -56,3 +56,30 @@ export interface SettoFormProps {
     classNames?: SettoFormClassNames;
 }
 export declare function SettoForm({ formId, fields: propFields, endpoint, endpointKey, className, classNames, }: SettoFormProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Enough that an unstyled form looks intentional, while still losing to
+ * anything the site says on purpose. Colours lean on `currentColor`, so the
+ * form follows whatever section it sits in, light or dark.
+ *
+ * Every rule is scoped under `.setto-form`, which is not decoration: written
+ * at the zero specificity of a bare `:where()`, these rules lost to Tailwind's
+ * Preflight — `button, input, optgroup, select, textarea { padding: 0 }` is an
+ * element selector, and an element selector outranks nothing at all. Every
+ * generated site ships Preflight, so every form went out with no padding on
+ * its fields or its button. Simon, on a real site: "the form in the bottom
+ * seems unstyled."
+ *
+ * So the sheet is in two halves, and which half a property lands in is decided
+ * by who it has to beat.
+ *
+ * SHAPE — padding, width, radius, the things Preflight strips — is scoped
+ * `.setto-form :where(…)`. That scores one class, which beats an element
+ * selector, and puts back exactly what the reset took away.
+ *
+ * COLOUR — background, border colour, text colour — stays at zero specificity,
+ * because here the site really must win. The generator emits `bg-card` and
+ * `text-foreground` on these very elements, and scoping those under a class
+ * would tie on weight and then beat them on order, quietly discarding the
+ * palette the build chose. Shape is ours; colour is theirs.
+ */
+export declare const BASE_CSS = "\n.setto-form{display:grid;gap:1.1rem;position:relative}\n.setto-form :where(.setto-form__field){display:grid;gap:.4rem;position:relative}\n.setto-form :where(.setto-form__label,.setto-form__legend){font-weight:500;line-height:1.3;padding:0}\n.setto-form :where(.setto-form__required){opacity:.6;margin-left:.15em}\n.setto-form :where(.setto-form__input,.setto-form__textarea,.setto-form__select){width:100%;box-sizing:border-box;padding:.7rem .85rem;border-width:1px;border-style:solid;border-radius:.6rem;font:inherit;line-height:1.4}\n.setto-form :where(.setto-form__textarea){min-height:7.5rem;resize:vertical}\n.setto-form :where(.setto-form__fieldset){border:0;padding:0;margin:0;min-width:0;display:grid;gap:.5rem}\n.setto-form :where(.setto-form__options){display:grid;gap:.5rem}\n.setto-form :where(.setto-form__option,.setto-form__check){display:flex;gap:.6rem;align-items:flex-start;line-height:1.4;cursor:pointer;font-weight:400}\n.setto-form :where(.setto-form__option input,.setto-form__check input){margin:.25em 0 0;flex:none;accent-color:currentColor}\n.setto-form :where(.setto-form__actions){display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}\n.setto-form :where(.setto-form__button){cursor:pointer;font:inherit;font-weight:500;padding:.75rem 1.4rem;border-radius:999px;border-width:1px;border-style:solid}\n.setto-form :where(.setto-form__success){display:grid;gap:.75rem;justify-items:start;outline:none}\n.setto-form :where(.setto-form__success-icon){width:2.5rem;height:2.5rem}\n.setto-form :where(.setto-form__success-text){margin:0;font-size:1.05em}\n.setto-form :where(.setto-form__hp){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}\n:where(.setto-form__input,.setto-form__textarea,.setto-form__select){border-color:color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);color:inherit}\n:where(.setto-form__input,.setto-form__textarea,.setto-form__select)::placeholder{color:inherit;opacity:.5}\n:where(.setto-form__input,.setto-form__textarea,.setto-form__select):focus-visible{outline:2px solid currentColor;outline-offset:1px}\n:where(.setto-form__button){border-color:currentColor;background:transparent;color:inherit}\n:where(.setto-form__button:disabled){opacity:.6;cursor:progress}\n:where(.setto-form__field-error,.setto-form__error){font-size:.875rem;color:#b42318;margin:0}\n:where(.setto-form__success-icon){color:#0f7b4f}\n:where(.setto-form__again){background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;opacity:.8;width:fit-content;max-width:100%;text-align:inherit}\n:where(.setto-form [aria-invalid=\"true\"]){border-color:#b42318}\n";

package/dist/setto-client.js

@@ -21410,6 +21410,13 @@ function SettoPreviewBar() {
   const signIn = () => {
     window.location.href = "/setto";
   };
+  const next = () => {
+    if (window.parent !== window) {
+      window.parent.postMessage({ type: "setto:next", siteId: config.siteId }, "*");
+      return;
+    }
+    signIn();
+  };
   const publish = async () => {
     setBusy(true);
     setError(null);
@@ -21459,11 +21466,8 @@ function SettoPreviewBar() {
           /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: publish, disabled: busy, children: busy ? "Åpner betaling …" : "Publiser" })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { style: dotStyle, "aria-hidden": true }),
-          /* @__PURE__ */ jsxs("span", { style: labelStyle, children: [
-            "Forhåndsvisning av ",
-            name
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: signIn, children: "Rediger" })
+          /* @__PURE__ */ jsx("span", { style: labelStyle, children: "Forhåndsvisning" }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: primaryStyle, onClick: next, children: "Neste" })
         ] })
       }
     ),
@@ -21487,7 +21491,20 @@ const barStyle = {
   fontFamily: 'system-ui, -apple-system, "Segoe UI", sans-serif',
   fontSize: 14,
   lineHeight: 1.3,
-  boxShadow: "0 18px 40px -18px rgba(0, 0, 0, 0.65)"
+  boxShadow: "0 18px 40px -18px rgba(0, 0, 0, 0.65)",
+  /*
+   * A frosted rim, so the pill reads as an object on any page.
+   *
+   * The bar sits on sites Setto did not choose the colours for: on a dark hero
+   * a dark pill disappears, and on a pale section its shadow is all that holds
+   * it. A translucent white border with `padding-box` clipping lets the page
+   * show through the rim itself, which separates the pill from either ground
+   * without picking a side.
+   */
+  border: "5px solid rgba(255, 255, 255, 0.22)",
+  backgroundClip: "padding-box",
+  backdropFilter: "blur(10px)",
+  WebkitBackdropFilter: "blur(10px)"
 };
 const dotStyle = {
   width: 7,
@@ -24298,28 +24315,31 @@ function CheckIcon() {
 }
 const STYLE_ID$1 = "setto-form-styles";
 const BASE_CSS = `
-:where(.setto-form){display:grid;gap:1.1rem;position:relative}
-:where(.setto-form__field){display:grid;gap:.4rem;position:relative}
-:where(.setto-form__label,.setto-form__legend){font-weight:500;line-height:1.3;padding:0}
-:where(.setto-form__required){opacity:.6;margin-left:.15em}
-:where(.setto-form__input,.setto-form__textarea,.setto-form__select){width:100%;box-sizing:border-box;padding:.7rem .85rem;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:.6rem;background:color-mix(in srgb,currentColor 4%,transparent);color:inherit;font:inherit;line-height:1.4}
+.setto-form{display:grid;gap:1.1rem;position:relative}
+.setto-form :where(.setto-form__field){display:grid;gap:.4rem;position:relative}
+.setto-form :where(.setto-form__label,.setto-form__legend){font-weight:500;line-height:1.3;padding:0}
+.setto-form :where(.setto-form__required){opacity:.6;margin-left:.15em}
+.setto-form :where(.setto-form__input,.setto-form__textarea,.setto-form__select){width:100%;box-sizing:border-box;padding:.7rem .85rem;border-width:1px;border-style:solid;border-radius:.6rem;font:inherit;line-height:1.4}
+.setto-form :where(.setto-form__textarea){min-height:7.5rem;resize:vertical}
+.setto-form :where(.setto-form__fieldset){border:0;padding:0;margin:0;min-width:0;display:grid;gap:.5rem}
+.setto-form :where(.setto-form__options){display:grid;gap:.5rem}
+.setto-form :where(.setto-form__option,.setto-form__check){display:flex;gap:.6rem;align-items:flex-start;line-height:1.4;cursor:pointer;font-weight:400}
+.setto-form :where(.setto-form__option input,.setto-form__check input){margin:.25em 0 0;flex:none;accent-color:currentColor}
+.setto-form :where(.setto-form__actions){display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
+.setto-form :where(.setto-form__button){cursor:pointer;font:inherit;font-weight:500;padding:.75rem 1.4rem;border-radius:999px;border-width:1px;border-style:solid}
+.setto-form :where(.setto-form__success){display:grid;gap:.75rem;justify-items:start;outline:none}
+.setto-form :where(.setto-form__success-icon){width:2.5rem;height:2.5rem}
+.setto-form :where(.setto-form__success-text){margin:0;font-size:1.05em}
+.setto-form :where(.setto-form__hp){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
+:where(.setto-form__input,.setto-form__textarea,.setto-form__select){border-color:color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);color:inherit}
 :where(.setto-form__input,.setto-form__textarea,.setto-form__select)::placeholder{color:inherit;opacity:.5}
 :where(.setto-form__input,.setto-form__textarea,.setto-form__select):focus-visible{outline:2px solid currentColor;outline-offset:1px}
-:where(.setto-form__textarea){min-height:7.5rem;resize:vertical}
-:where(.setto-form__fieldset){border:0;padding:0;margin:0;min-width:0;display:grid;gap:.5rem}
-:where(.setto-form__options){display:grid;gap:.5rem}
-:where(.setto-form__option,.setto-form__check){display:flex;gap:.6rem;align-items:flex-start;line-height:1.4;cursor:pointer;font-weight:400}
-:where(.setto-form__option input,.setto-form__check input){margin:.25em 0 0;flex:none;accent-color:currentColor}
-:where(.setto-form__field-error,.setto-form__error){font-size:.875rem;color:#b42318;margin:0}
-:where(.setto-form [aria-invalid="true"]){border-color:#b42318}
-:where(.setto-form__actions){display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center}
-:where(.setto-form__button){cursor:pointer;font:inherit;font-weight:500;padding:.75rem 1.4rem;border-radius:999px;border:1px solid currentColor;background:transparent;color:inherit}
+:where(.setto-form__button){border-color:currentColor;background:transparent;color:inherit}
 :where(.setto-form__button:disabled){opacity:.6;cursor:progress}
-:where(.setto-form__success){display:grid;gap:.75rem;justify-items:start;outline:none}
-:where(.setto-form__success-icon){width:2.5rem;height:2.5rem;color:#0f7b4f}
-:where(.setto-form__success-text){margin:0;font-size:1.05em}
+:where(.setto-form__field-error,.setto-form__error){font-size:.875rem;color:#b42318;margin:0}
+:where(.setto-form__success-icon){color:#0f7b4f}
 :where(.setto-form__again){background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;opacity:.8;width:fit-content;max-width:100%;text-align:inherit}
-:where(.setto-form__hp){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
+:where(.setto-form [aria-invalid="true"]){border-color:#b42318}
 `;
 function useFormStyles() {
   useInsertionEffect(() => {