@pontive/pontkit-core 1.0.0

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

@@ -0,0 +1,168 @@
+import { LitElement, PropertyValues } from '../../../../../node_modules/lit';
+import { ConfirmFieldAutocomplete, ConfirmFieldPart, ConfirmFieldValidation, ConfirmFieldVariant, PontConfirmFieldProps as Props } from './field.types';
+/**
+ * Self-validating confirm password input field for use in auth widget forms.
+ *
+ * @part confirm-field - pont-field: root
+ * @part confirm-field-label - pont-field-label
+ * @part confirm-field-mark - span: decorative marker text/caret in label
+ * @part confirm-field-description - pont-field-description
+ * @part confirm-field-input - pont-input/pont-password-input
+ * @part confirm-field-error - pont-field-error: inline validation error message
+ *
+ * @event pont-confirm-field:validate - Fired when validation runs, on form submit or via the public `validate()` method.
+ *  Detail: `{ id: string; inputId: string; name: string; value: string; valid: boolean; type: ConfirmFieldValidateType; pair: { selector: string; value: string }; message: string }`
+ *    - type: `"success" | "required" | "match"`
+ */
+export declare class PontConfirmField extends LitElement implements Props {
+    static readonly ROOT = "confirm-field";
+    static readonly LABEL = "label";
+    static readonly MARK = "mark";
+    static readonly DESCRIPTION = "description";
+    static readonly INPUT = "input";
+    static readonly ERROR = "error";
+    static readonly TAG: string;
+    static readonly VALIDATE_EVENT: string;
+    static readonly PARTS: Record<ConfirmFieldPart, string>;
+    static readonly INPUT_SELECTORS: string;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * ID given to the input part, forwarded to its inner input element.
+     */
+    private _inputId?;
+    private get _defaultInputId();
+    get inputId(): string;
+    set inputId(value: string | null | undefined);
+    /**
+     * HTML `name` attribute forwarded to the inner input, used as the form data
+     * key on submission.
+     */
+    private _name;
+    get name(): string;
+    set name(value: string);
+    /**
+     * Pre-fills the input until the user types and their input takes over.
+     * Resetting the form restores this value.
+     */
+    defaultValue?: string;
+    /**
+     * Text used in the label part of the field.
+     */
+    private _label;
+    get label(): string;
+    set label(value: string);
+    /**
+     * Placeholder text shown inside the input when empty.
+     */
+    placeholder?: string;
+    /**
+     * Text used in the description part of the field.
+     */
+    description?: string;
+    /**
+     * Controls the variation of input element rendered.
+     * When `"toggle"`, a toggleable input with a hide/show button is rendered.
+     */
+    variant: ConfirmFieldVariant;
+    /**
+     * Custom text used in the mark part of the field label.
+     */
+    mark?: string;
+    /**
+     * When provided with `required`, the mark part is rendered with an asterisk.
+     * Has no effect if a custom `mark` text is provided.
+     */
+    caret?: boolean;
+    /**
+     * HTML `autocomplete` hint forwarded to the inner input element.
+     */
+    autocomplete?: ConfirmFieldAutocomplete;
+    /**
+     * Disables the field and its inner input element, preventing interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as required: validation fails if field is empty.
+     */
+    required?: boolean;
+    /**
+     * CSS selector for the paired password field element.
+     */
+    pair: string;
+    /**
+     * Controls validation depth, only enforcing the required check if `"simple"`.
+     */
+    validation: ConfirmFieldValidation;
+    /**
+     * Error message used when the field is required but empty.
+     */
+    private _requiredError?;
+    private get _defaultRequiredError();
+    get requiredError(): string;
+    set requiredError(value: string | null | undefined);
+    /**
+     * Error message used when the field and pair field values do not match.
+     */
+    private _matchError;
+    get matchError(): string;
+    set matchError(value: string);
+    /**
+     * Tracks whether the field is currently in an invalid state.
+     */
+    private _invalid;
+    /**
+     * Error message displayed in the error part when the field is invalid.
+     */
+    private _error;
+    /**
+     * Raw value of the confirm field input, synced on each input event.
+     */
+    private _value;
+    /**
+     * Gates whether `defaultValue` or `_value` is authoritative for `this.value`.
+     * True once the user has typed into the input.
+     */
+    private _dirty;
+    /**
+     * Reference to the nearest `<form>` ancestor.
+     */
+    private _form;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get labelId(): string;
+    get markId(): string;
+    get descriptionId(): string;
+    get errorId(): string;
+    /**
+     * Normalized value of the password field input.
+     */
+    get value(): string;
+    /**
+     * Value of paired password field, returning an empty string if not found.
+     */
+    get pairValue(): string;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Triggers validation and returns `true` if the current value is valid,
+     * `false` otherwise.
+     */
+    validate(): boolean;
+    private _dispatchValidate;
+    private _onValidateSuccess;
+    private _onValidateError;
+    private _validate;
+    private _handleInput;
+    private _handleFormSubmit;
+    private _handleFormReset;
+    private _renderMark;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,160 @@
+import { LitElement, PropertyValues } from '../../../../../node_modules/lit';
+import { EmailFieldAutocomplete, EmailFieldPart, EmailFieldValidation, PontEmailFieldProps as Props } from './field.types';
+/**
+ * Self-validating email input field for use in auth widget forms.
+ *
+ * @part email-field - pont-field: root
+ * @part email-field-label - pont-field-label
+ * @part email-field-mark - span: decorative marker text/caret in label
+ * @part email-field-description - pont-field-description
+ * @part email-field-input - pont-input
+ * @part email-field-error - pont-field-error: inline validation error message
+ *
+ * @event pont-email-field:validate - Fired when validation runs, on form submit or via the public `validate()` method.
+ *  Detail: `{ id: string; inputId: string; name: string; value: string; valid: boolean; type: EmailFieldValidateType; message: string }`
+ *    - type: `"success" | "required" | "format"`
+ */
+export declare class PontEmailField extends LitElement implements Props {
+    static readonly ROOT = "email-field";
+    static readonly LABEL = "label";
+    static readonly MARK = "mark";
+    static readonly DESCRIPTION = "description";
+    static readonly INPUT = "input";
+    static readonly ERROR = "error";
+    static readonly TAG: string;
+    static readonly VALIDATE_EVENT: string;
+    static readonly PARTS: Record<EmailFieldPart, string>;
+    static readonly INPUT_SELECTORS: string;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * ID given to the input part, forwarded to its inner input element.
+     */
+    private _inputId?;
+    private get _defaultInputId();
+    get inputId(): string;
+    set inputId(value: string | null | undefined);
+    /**
+     * HTML `name` attribute forwarded to the inner input, used as the form data
+     * key on submission.
+     */
+    private _name;
+    get name(): string;
+    set name(value: string);
+    /**
+     * Pre-fills the input until the user types and their input takes over.
+     * Resetting the form restores this value.
+     */
+    defaultValue?: string;
+    /**
+     * Text used in the label part of the field.
+     */
+    private _label;
+    get label(): string;
+    set label(value: string);
+    /**
+     * Placeholder text shown inside the input when empty.
+     */
+    placeholder?: string;
+    /**
+     * Text used in the description part of the field.
+     */
+    description?: string;
+    /**
+     * Custom text used in the mark part of the field label.
+     */
+    mark?: string;
+    /**
+     * When provided with `required`, the mark part is rendered with an asterisk.
+     * Has no effect if a custom `mark` text is provided.
+     */
+    caret?: boolean;
+    /**
+     * HTML `autocomplete` hint forwarded to the inner input element.
+     */
+    autocomplete?: EmailFieldAutocomplete;
+    /**
+     * Disables the field and its inner input element, preventing interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as required: validation fails if field is empty.
+     */
+    required?: boolean;
+    /**
+     * Regex pattern used to validate the email format.
+     */
+    pattern: string;
+    /**
+     * Controls validation depth, only enforcing the required check if `"simple"`.
+     */
+    validation: EmailFieldValidation;
+    /**
+     * Error message used when the field is required but empty.
+     */
+    private _requiredError?;
+    private get _defaultRequiredError();
+    get requiredError(): string;
+    set requiredError(value: string | null | undefined);
+    /**
+     * Error message used when the field does not satisfy email format rules.
+     */
+    private _formatError?;
+    private get _defaultFormatError();
+    get formatError(): string;
+    set formatError(value: string | null | undefined);
+    /**
+     * Tracks whether the field is currently in an invalid state.
+     */
+    private _invalid;
+    /**
+     * Error message displayed in the error part when the field is invalid.
+     */
+    private _error;
+    /**
+     * Raw value of the email field input, synced on each input event.
+     */
+    private _value;
+    /**
+     * Gates whether `defaultValue` or `_value` is authoritative for `this.value`.
+     * True once the user has typed into the input.
+     */
+    private _dirty;
+    /**
+     * Reference to the nearest `<form>` ancestor.
+     */
+    private _form;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get labelId(): string;
+    get markId(): string;
+    get descriptionId(): string;
+    get errorId(): string;
+    /**
+     * Normalized value of the email field input.
+     */
+    get value(): string;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Triggers validation and returns `true` if the current value is valid,
+     * `false` otherwise.
+     */
+    validate(): boolean;
+    private _dispatchValidate;
+    private _onValidateSuccess;
+    private _onValidateError;
+    private _validate;
+    private _handleInput;
+    private _handleFormSubmit;
+    private _handleFormReset;
+    private _renderMark;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

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

@@ -0,0 +1,171 @@
+import { LitElement, PropertyValues } from '../../../../../node_modules/lit';
+import { PontAuthIdentifier } from '../../../../types';
+import { IdentifierFieldAutocomplete, IdentifierFieldPart, IdentifierFieldValidation, PontIdentifierFieldProps as Props } from './field.types';
+/**
+ * Self-validating identifier input field for use in auth widget forms.
+ *
+ * @part identifier-field - pont-field: root
+ * @part identifier-field-label - pont-field-label
+ * @part identifier-field-mark - span: decorative marker text/caret in label
+ * @part identifier-field-description - pont-field-description
+ * @part identifier-field-input - pont-input
+ * @part identifier-field-error - pont-field-error: inline validation error message
+ *
+ * @event pont-identifier-field:validate - Fired when validation runs, on form submit or via the public `validate()` method.
+ *  Detail: `{ id: string; inputId: string; name: string; identifiers: PontIdentifier[]; value: string; valid: boolean; type: IdentifierFieldValidateType; message: string }`
+ *    - type: `"success" | "required"`
+ */
+export declare class PontIdentifierField extends LitElement implements Props {
+    static readonly ROOT = "identifier-field";
+    static readonly LABEL = "label";
+    static readonly MARK = "mark";
+    static readonly DESCRIPTION = "description";
+    static readonly INPUT = "input";
+    static readonly ERROR = "error";
+    static readonly TAG: string;
+    static readonly VALIDATE_EVENT: string;
+    static readonly PARTS: Record<IdentifierFieldPart, string>;
+    static readonly INPUT_SELECTORS: string;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * ID given to the input part, forwarded to its inner input element.
+     */
+    private _inputId?;
+    private get _defaultInputId();
+    get inputId(): string;
+    set inputId(value: string | null | undefined);
+    /**
+     * HTML `name` attribute forwarded to the inner input, used as the form data
+     * key on submission.
+     */
+    private _name;
+    get name(): string;
+    set name(value: string);
+    /**
+     * Pre-fills the input until the user types and their input takes over.
+     * Resetting the form restores this value.
+     */
+    defaultValue?: string;
+    /**
+     * Accepted authentication identifier types.
+     */
+    identifiers: PontAuthIdentifier[];
+    private design;
+    /**
+     * The identifiers actually rendered.
+     *
+     * At runtime the resolve pass narrows the authored list to the app's enabled
+     * login methods, and prunes the field when none survive — so this is never
+     * empty by the time a user sees it. The designer narrows nothing, and an
+     * unconfigured field would render the generic "Identifier" label, which
+     * tells the author nothing about what the element does. Design mode shows
+     * the multi-identifier form most screens end up with.
+     */
+    private get _identifiers();
+    /**
+     * Text used in the label part of the field.
+     */
+    private _label?;
+    private get _defaultLabel();
+    get label(): string;
+    set label(value: string | null | undefined);
+    /**
+     * Placeholder text shown inside the input when empty.
+     */
+    placeholder?: string;
+    /**
+     * Text used in the description part of the field.
+     */
+    description?: string;
+    /**
+     * Custom text used in the mark part of the field label.
+     */
+    mark?: string;
+    /**
+     * When provided with `required`, the mark part is rendered with an asterisk.
+     * Has no effect if a custom `mark` text is provided.
+     */
+    caret?: boolean;
+    /**
+     * HTML `autocomplete` hint forwarded to the inner input element.
+     */
+    autocomplete?: IdentifierFieldAutocomplete;
+    /**
+     * Disables the field and its inner input element, preventing interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as required: validation fails if field is empty.
+     */
+    required?: boolean;
+    /**
+     * Controls validation depth, only enforcing the required check if `"simple"`.
+     */
+    validation: IdentifierFieldValidation;
+    /**
+     * Error message used when the field is required but empty.
+     */
+    private _requiredError?;
+    private get _defaultRequiredError();
+    get requiredError(): string;
+    set requiredError(value: string | null | undefined);
+    /**
+     * Tracks whether the field is currently in an invalid state.
+     */
+    private _invalid;
+    /**
+     * Error message displayed in the error part when the field is invalid.
+     */
+    private _error;
+    /**
+     * Raw value of the identifier field input, synced on each input event.
+     */
+    private _value;
+    /**
+     * Gates whether `defaultValue` or `_value` is authoritative for `this.value`.
+     * True once the user has typed into the input.
+     */
+    private _dirty;
+    /**
+     * Reference to the nearest `<form>` ancestor.
+     */
+    private _form;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get labelId(): string;
+    get markId(): string;
+    get descriptionId(): string;
+    get errorId(): string;
+    /**
+     * Normalized value of the identifier field input.
+     */
+    get value(): string;
+    /**
+     * Input element `type`, using identifier-specific types if possible.
+     */
+    private get _type();
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Triggers validation and returns `true` if the current value is valid,
+     * `false` otherwise.
+     */
+    validate(): boolean;
+    private _dispatchValidate;
+    private _onValidateSuccess;
+    private _onValidateError;
+    private _validate;
+    private _handleInput;
+    private _handleFormSubmit;
+    private _handleFormReset;
+    private _renderMark;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}

package/dist/components/renderers/auth/field/_name-field.d.ts

@@ -0,0 +1,186 @@
+import { LitElement, PropertyValues } from '../../../../../node_modules/lit';
+import { NameFieldAutocomplete, NameFieldPart, NameFieldValidation, PontNameFieldProps as Props } from './field.types';
+/**
+ * Self-validating name input field for use in auth widget forms.
+ *
+ * @part name-field - pont-field: root
+ * @part name-field-label - pont-field-label
+ * @part name-field-mark - span: decorative marker text/caret in label
+ * @part name-field-description - pont-field-description
+ * @part name-field-input - pont-input
+ * @part name-field-error - pont-field-error: inline validation error message
+ *
+ * @event pont-name-field:validate - Fired when validation runs, on form submit or via the public `validate()` method.
+ *  Detail: `{ id: string; inputId: string; name: string; value: string; valid: boolean; type: NameFieldValidateType; message: string }`
+ *    - type: `"success" | "required" | "minlength" | "maxlength" | "format"`
+ */
+export declare class PontNameField extends LitElement implements Props {
+    static readonly ROOT = "name-field";
+    static readonly LABEL = "label";
+    static readonly MARK = "mark";
+    static readonly DESCRIPTION = "description";
+    static readonly INPUT = "input";
+    static readonly ERROR = "error";
+    static readonly TAG: string;
+    static readonly VALIDATE_EVENT: string;
+    static readonly PARTS: Record<NameFieldPart, string>;
+    static readonly INPUT_SELECTORS: string;
+    /**
+     * Substring used in generated part IDs.
+     */
+    seed: string;
+    /**
+     * Custom ID used as the root part ID and as the base of subpart IDs.
+     */
+    customId?: string;
+    /**
+     * ID given to the input part, forwarded to its inner input element.
+     */
+    private _inputId?;
+    private get _defaultInputId();
+    get inputId(): string;
+    set inputId(value: string | null | undefined);
+    /**
+     * HTML `name` attribute forwarded to the inner input, used as the form data
+     * key on submission.
+     */
+    private _name;
+    get name(): string;
+    set name(value: string);
+    /**
+     * Pre-fills the input until the user types and their input takes over.
+     * Resetting the form restores this value.
+     */
+    defaultValue?: string;
+    /**
+     * Text used in the label part of the field.
+     */
+    private _label;
+    get label(): string;
+    set label(value: string);
+    /**
+     * Placeholder text shown inside the input when empty.
+     */
+    placeholder?: string;
+    /**
+     * Text used in the description part of the field.
+     */
+    description?: string;
+    /**
+     * Custom text used in the mark part of the field label.
+     */
+    mark?: string;
+    /**
+     * When provided with `required`, the mark part is rendered with an asterisk.
+     * Has no effect if a custom `mark` text is provided.
+     */
+    caret?: boolean;
+    /**
+     * HTML `autocomplete` hint forwarded to the inner input element.
+     */
+    autocomplete?: NameFieldAutocomplete;
+    /**
+     * Disables the field and its inner input element, preventing interaction.
+     */
+    disabled?: boolean;
+    /**
+     * Marks the field as required: validation fails if field is empty.
+     */
+    required?: boolean;
+    /**
+     * Minimum number of characters required for a valid name.
+     */
+    private _minlength?;
+    get minlength(): number | undefined;
+    set minlength(value: number | undefined);
+    /**
+     * Maximum number of characters accepted for a valid name.
+     */
+    private _maxlength?;
+    get maxlength(): number | undefined;
+    set maxlength(value: number | undefined);
+    /**
+     * Regex pattern used to validate the name format.
+     */
+    pattern: string;
+    /**
+     * Controls validation depth, only enforcing the required check if `"simple"`.
+     */
+    validation: NameFieldValidation;
+    /**
+     * Error message used when the field is required but empty.
+     */
+    private _requiredError?;
+    private get _defaultRequiredError();
+    get requiredError(): string;
+    set requiredError(value: string | null | undefined);
+    /**
+     * Error message used when the field is shorter than `minlength`.
+     */
+    private _minlengthError?;
+    private get _defaultMinlengthError();
+    get minlengthError(): string;
+    set minlengthError(value: string | null | undefined);
+    /**
+     * Error message used when the field is longer than `maxlength`.
+     */
+    private _maxlengthError?;
+    private get _defaultMaxlengthError();
+    get maxlengthError(): string;
+    set maxlengthError(value: string | null | undefined);
+    /**
+     * Error message used when the field does not satisfy name format rules.
+     */
+    private _formatError?;
+    private get _defaultFormatError();
+    get formatError(): string;
+    set formatError(value: string | null | undefined);
+    /**
+     * Tracks whether the field is currently in an invalid state.
+     */
+    private _invalid;
+    /**
+     * Error message displayed in the error part when the field is invalid.
+     */
+    private _error;
+    /**
+     * Raw value of the name field input, synced on each input event.
+     */
+    private _value;
+    /**
+     * Gates whether `defaultValue` or `_value` is authoritative for `this.value`.
+     * True once the user has typed into the input.
+     */
+    private _dirty;
+    /**
+     * Reference to the nearest `<form>` ancestor.
+     */
+    private _form;
+    protected createRenderRoot(): this;
+    get rootId(): string;
+    get labelId(): string;
+    get markId(): string;
+    get descriptionId(): string;
+    get errorId(): string;
+    /**
+     * Normalized value of the name field input.
+     */
+    get value(): string;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Triggers validation and returns `true` if the current value is valid,
+     * `false` otherwise.
+     */
+    validate(): boolean;
+    private _dispatchValidate;
+    private _onValidateSuccess;
+    private _onValidateError;
+    private _validate;
+    private _handleInput;
+    private _handleFormSubmit;
+    private _handleFormReset;
+    private _renderMark;
+    render(): import('../../../../../node_modules/lit-html').TemplateResult<1>;
+}