@saasbase-io/core-elements 1.15.0 → 1.17.0

package/dist/components/renderers/_updated/field/_confirm-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbConfirmField extends LitElement implements ConfirmFieldPr
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     /**
      * The stable CSS part names exposed for external targeting.
      */

package/dist/components/renderers/_updated/field/_email-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbEmailField extends LitElement implements EmailFieldProps
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     private static readonly _PATTERN;
     /**
      * The stable CSS part names exposed for external targeting.

package/dist/components/renderers/_updated/field/_identifier-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbIdentifierField extends LitElement implements IdentifierF
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     /**
      * The stable CSS part names exposed for external targeting.
      */

package/dist/components/renderers/_updated/field/_password-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbPasswordField extends LitElement implements PasswordField
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     private static readonly _PATTERNS;
     /**
      * The stable CSS part names exposed for external targeting.

package/dist/components/renderers/_updated/field/_phone-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbPhoneField extends LitElement implements PhoneFieldProps
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     private static readonly _PATTERN;
     /**
      * The stable CSS part names exposed for external targeting.

package/dist/components/renderers/_updated/field/_username-field.d.ts

@@ -26,6 +26,7 @@ export declare class SbUsernameField extends LitElement implements UsernameField
     private static readonly _DESCRIPTION;
     private static readonly _INPUT;
     private static readonly _ERROR;
+    static readonly TAG: string;
     private static readonly _PATTERN;
     /**
      * The stable CSS part names exposed for external targeting.

package/dist/components/renderers/_updated/form/_form-submit.d.ts

@@ -12,6 +12,7 @@ import { FormSubmitProps, FormSubmitSize, FormSubmitSpinnerAlign, FormSubmitVari
 export declare class SbFormSubmit extends LitElement implements FormSubmitProps {
     private static readonly _ROOT;
     private static readonly _SPINNER;
+    static readonly TAG: string;
     /**
      * The stable CSS part names exposed for external targeting.
      */

package/dist/components/renderers/_updated/form/_form.d.ts

@@ -0,0 +1,130 @@
+import { LitElement } from '../../../../../node_modules/lit';
+import { FormOnReset, FormOnSubmit, FormProps } from './form.types';
+/**
+ * A composable form container that orchestrates validation, collects form data,
+ * and handles auth service communications.
+ * @element sb-form
+ *
+ * @part form (form)
+ *
+ * @fires sb-form:success { id, data, event }
+ * @fires sb-form:error { id, data, event, message }
+ * @fires sb-form:reset { id }
+ */
+export declare class SbForm extends LitElement implements FormProps {
+    private static readonly _ROOT;
+    static readonly TAG: string;
+    static readonly SUCCESS_EVENT: string;
+    static readonly ERROR_EVENT: string;
+    static readonly RESET_EVENT: string;
+    /**
+     * The stable CSS part names exposed for external targeting.
+     */
+    static get parts(): {
+        root: string;
+    };
+    /**
+     * A unique substring for fallback part IDs generated.
+     */
+    seed: string;
+    /**
+     * The `id` of the root part and the base of sub-part IDs.
+     */
+    childId?: string;
+    /**
+     * When provided, called with the collected form data and the auth event
+     * string instead of the default `Auth.processLoginflowEvent` call.
+     * Use this to plug in custom submission logic or to handle auth externally.
+     */
+    onSubmit?: FormOnSubmit;
+    /**
+     * Called after the native form reset event fires.
+     */
+    onReset?: FormOnReset;
+    /**
+     * Auth event string captured from the most recent `sb-form-submit:click`
+     * event. Cleared after each submission attempt.
+     */
+    private _pendingEvent?;
+    /**
+     * Guards against double-submission while an async auth call is in-flight.
+     */
+    private _loading;
+    /**
+     * Overrides default behavior to render into light DOM.
+     */
+    protected createRenderRoot(): this;
+    /**
+     * The `id` of the root element. Equal to `childId` when provided, otherwise
+     * derived from the component's part name and `seed`.
+     */
+    get rootId(): string;
+    /**
+     * The native `<form>` element rendered as the root part.
+     */
+    private get _form();
+    /**
+     * All `sb-*-field` descendants inside the form element.
+     */
+    private get _fields();
+    /**
+     * The first `sb-form-submit` descendant inside the form element.
+     */
+    private get _submit();
+    /**
+     * Subscribes to the `sb-form-submit:click` event so the auth event string
+     * is captured before the native form `submit` event fires.
+     */
+    connectedCallback(): void;
+    /**
+     * Removes the `sb-form-submit:click` listener.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Moves initial children (authored inside `<sb-form>` in markup) into the
+     * rendered `<form>` element. The DOM move disconnects and reconnects each
+     * custom-element child, letting field elements re-run `connectedCallback`
+     * and find the native form ancestor via `this.closest("form")`.
+     */
+    protected firstUpdated(): void;
+    /**
+     * Captures the auth event string emitted by `sb-form-submit` before the
+     * native form submit fires.
+     */
+    private _handleSubmitClick;
+    /**
+     * Dispatches a bubbling, composed custom event from `sb-form`.
+     */
+    private _dispatch;
+    /**
+     * Applies or removes the loading state on every field element and the
+     * submit button. `wasDisabled` records the pre-loading state so that
+     * fields that were already disabled are not re-enabled when loading ends.
+     */
+    private _setLoading;
+    /**
+     * Handles the native form submit event:
+     *
+     * 1. Always prevents the default browser navigation.
+     * 2. Adds temporary listeners for every `sb-*-field:validate` event on
+     *    `this`. These events bubble from field elements and carry `{ name,
+     *    value, valid }` in their detail — the exact values each field uses
+     *    for its own validation. The temporary listener builds the form-data
+     *    object as a side effect of the validation calls in step 3.
+     * 3. Calls `field.validate()` on every `sb-*-field` via `Array.map` (not
+     *    `Array.every`) so ALL fields are validated and ALL inline errors are
+     *    shown even when multiple fields are invalid simultaneously.
+     * 4. Removes the temporary validate listeners.
+     * 5. Aborts if any field returned `false`.
+     * 6. Calls `onSubmit` if provided, bypassing the default auth flow.
+     * 7. Otherwise calls `Auth.processLoginflowEvent` with the captured auth
+     *    event string and the collected data, managing loading state throughout.
+     */
+    private _handleSubmit;
+    /**
+     * Handles the native form reset event. Field elements handle their own
+     * internal state reset via their own form-reset listeners.
+     */
+    private _handleReset;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/_updated/form/form.defs.d.ts

@@ -0,0 +1,2 @@
+export declare const FIELD_SELECTORS: string;
+export declare const FIELD_VALIDATE_EVENTS: string[];

package/dist/components/renderers/_updated/form/form.stories/form.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Demo: Story;
+export declare const OnSubmit: Story;
+export declare const Events: Story;

package/dist/components/renderers/_updated/form/form.types.d.ts

@@ -1,4 +1,14 @@
 import { IconAlign, RtgButtonBasicSize, RtgButtonBasicVariant } from '../../../../types';
+import { SbConfirmField, SbEmailField, SbIdentifierField, SbPasswordField, SbPhoneField, SbUsernameField } from '../field';
+export type FormOnSubmit = (data: Record<string, string>, event?: string) => void;
+export type FormOnReset = (event: Event) => void;
+export type FormProps = {
+    seed: string;
+    childId?: string;
+    onSubmit?: FormOnSubmit;
+    onReset?: FormOnReset;
+};
+export type Field = SbEmailField | SbPhoneField | SbUsernameField | SbIdentifierField | SbPasswordField | SbConfirmField;
 export type FormSubmitVariant = RtgButtonBasicVariant;
 export type FormSubmitSize = RtgButtonBasicSize;
 export type FormSubmitSpinnerAlign = IconAlign;

package/dist/components/renderers/_updated/form/index.d.ts

@@ -1,9 +1,11 @@
+import { SbForm } from './_form';
 import { SbFormSeparator } from './_form-separator';
 import { SbFormSubmit } from './_form-submit';
 import { SbFormSwitch } from './_form-switch';
-export { SbFormSeparator, SbFormSubmit, SbFormSwitch };
+export { SbForm, SbFormSeparator, SbFormSubmit, SbFormSwitch };
 declare global {
     interface HTMLElementTagNameMap {
+        "sb-form": SbForm;
         "sb-form-submit": SbFormSubmit;
         "sb-form-separator": SbFormSeparator;
         "sb-form-switch": SbFormSwitch;