@sevenfold/setto-client 0.8.2 → 0.8.3

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

@@ -24298,28 +24298,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(() => {