@skdx/web-components-blocks 0.34.0 → 0.35.0

package/dist/reset-password-page/ResetPasswordPage.d.cts

@@ -0,0 +1,104 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+/** What a `reset-password` event carries: the new password the form held. */
+export interface SkdxResetPasswordDetail {
+    /** The new password, already matched against the confirmation when one renders. */
+    password: string;
+}
+/**
+ * Reset-password block: a new-password field with its rules, an optional
+ * confirmation matched against it, and a submit button, replaced entirely by a
+ * success alert once the change is accepted.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-reset-password-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__success`, `__form`, `__field`, `__requirements`, `__submit`
+ * and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-reset-password-page
+ *   id="reset"
+ *   confirm-password-label="Confirm new password"
+ * >
+ *   <span slot="requirements">At least 12 characters.</span>
+ * </skdx-reset-password-page>
+ * <script>
+ *   document
+ *     .getElementById('reset')
+ *     .addEventListener('reset-password', (event) => console.log(event.detail.password));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot requirements - Password rules used as the new-password field's description.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires reset-password - Fires with `{ password }` when the form submits with a valid password that matches the confirmation.
+ */
+export declare class SkdxResetPasswordPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Choose a new password'
+     */
+    title: string;
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Confirmation rendered into a derived success Alert that replaces the form entirely.
+     * @default undefined — the form renders instead.
+     */
+    success?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while both fields stay editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the field where the new password is typed.
+     * @default 'New password'
+     */
+    passwordLabel: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders.
+     */
+    confirmPasswordLabel?: string;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Update password'
+     */
+    submitLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private readonly handleSubmit;
+    private readonly clearMismatch;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-reset-password-page': SkdxResetPasswordPage;
+    }
+}

package/dist/reset-password-page/ResetPasswordPage.d.ts

@@ -0,0 +1,104 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+/** What a `reset-password` event carries: the new password the form held. */
+export interface SkdxResetPasswordDetail {
+    /** The new password, already matched against the confirmation when one renders. */
+    password: string;
+}
+/**
+ * Reset-password block: a new-password field with its rules, an optional
+ * confirmation matched against it, and a submit button, replaced entirely by a
+ * success alert once the change is accepted.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-reset-password-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__success`, `__form`, `__field`, `__requirements`, `__submit`
+ * and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-reset-password-page
+ *   id="reset"
+ *   confirm-password-label="Confirm new password"
+ * >
+ *   <span slot="requirements">At least 12 characters.</span>
+ * </skdx-reset-password-page>
+ * <script>
+ *   document
+ *     .getElementById('reset')
+ *     .addEventListener('reset-password', (event) => console.log(event.detail.password));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the submit button.
+ * @slot requirements - Password rules used as the new-password field's description.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires reset-password - Fires with `{ password }` when the form submits with a valid password that matches the confirmation.
+ */
+export declare class SkdxResetPasswordPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Choose a new password'
+     */
+    title: string;
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Confirmation rendered into a derived success Alert that replaces the form entirely.
+     * @default undefined — the form renders instead.
+     */
+    success?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while both fields stay editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the field where the new password is typed.
+     * @default 'New password'
+     */
+    passwordLabel: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders.
+     */
+    confirmPasswordLabel?: string;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage: string;
+    /**
+     * Text of the form's submit button.
+     * @default 'Update password'
+     */
+    submitLabel: string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private readonly handleSubmit;
+    private readonly clearMismatch;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-reset-password-page': SkdxResetPasswordPage;
+    }
+}

package/dist/reset-password-page/ResetPasswordPage.js

@@ -0,0 +1,59 @@
+var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=(l,n,e,i)=>{for(var s=i>1?void 0:i?b(n,e):n,a=l.length-1,c;a>=0;a--)(c=l[a])&&(s=(i?c(n,e,s):c(s))||s);return i&&s&&g(n,e,s),s};import{html as o,LitElement as f,nothing as p}from"lit";import{property as d}from"lit/decorators.js";import{customElement as k}from"../internal/define.js";import{emit as x}from"../internal/events.js";import{hasUnslottedChild as w,placeSlotted as v}from"../internal/slots.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";var m="data-skdx-reset-password-page-generated",y="data-skdx-reset-password-page-content",u="confirmPassword",$=0,t=class extends f{constructor(){super(...arguments);this.title="Choose a new password";this.pending=!1;this.passwordLabel="New password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Update password";this.titleId=`skdx-reset-password-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=h(i,"password")?.value??"",a=h(i,u);if(a&&a.value!==s){a.setCustomValidity(this.passwordMismatchMessage),a.reportValidity();return}x(this,"reset-password",{password:s})};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${y}]`)}get hasContent(){return w(this,m)||(this.contentRegion?.hasChildNodes()??!1)}updated(){v(this,m,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return o`
+      <div
+        class="skdx-reset-password-page__panel"
+        data-skdx-reset-password-page-generated
+      >
+        <skdx-heading
+          class="skdx-reset-password-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?o`<skdx-alert
+                class="skdx-reset-password-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:p}
+        ${this.success?o`<skdx-alert
+                class="skdx-reset-password-page__success"
+                .status=${"success"}
+                >${this.success}</skdx-alert
+              >`:o`<skdx-form class="skdx-reset-password-page__form">
+                <form>
+                  <skdx-field
+                    class="skdx-reset-password-page__field"
+                    label=${this.passwordLabel}
+                    required
+                  >
+                    <skdx-password-input
+                      name="password"
+                      required
+                    ></skdx-password-input>
+                    ${this.hasSlotted("requirements")?o`<skdx-field-description
+                            class="skdx-reset-password-page__requirements"
+                          ></skdx-field-description>`:p}
+                  </skdx-field>
+                  ${this.confirmPasswordLabel===void 0?p:o`<skdx-field
+                          class="skdx-reset-password-page__field"
+                          label=${this.confirmPasswordLabel}
+                          required
+                        >
+                          <skdx-password-input
+                            name=${u}
+                            required
+                            @value-change=${this.clearMismatch}
+                          ></skdx-password-input>
+                        </skdx-field>`}
+                  ${this.hasContent?o`<div data-skdx-reset-password-page-content></div>`:p}
+                  <skdx-button
+                    class="skdx-reset-password-page__submit"
+                    type="submit"
+                    ?loading=${this.pending}
+                    ?disabled=${this.pending}
+                    >${this.submitLabel}</skdx-button
+                  >
+                </form>
+              </skdx-form>`}
+        ${this.hasSlotted("footer")?o`<div class="skdx-reset-password-page__footer"></div>`:p}
+      </div>
+    `}};r([d({type:String})],t.prototype,"title",2),r([d({type:String})],t.prototype,"error",2),r([d({type:String})],t.prototype,"success",2),r([d({type:Boolean})],t.prototype,"pending",2),r([d({type:String,attribute:"password-label"})],t.prototype,"passwordLabel",2),r([d({type:String,attribute:"confirm-password-label"})],t.prototype,"confirmPasswordLabel",2),r([d({type:String,attribute:"password-mismatch-message"})],t.prototype,"passwordMismatchMessage",2),r([d({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),t=r([k("skdx-reset-password-page","reset-password-page","root")],t);function h(l,n){return l.querySelector(`[name="${n}"]`)}export{t as SkdxResetPasswordPage};

package/dist/reset-password-page/index.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var p=(s,e)=>{for(var a in e)d(s,a,{get:e[a],enumerable:!0})},w=(s,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of P(e))!k.call(s,t)&&t!==a&&d(s,t,{get:()=>e[t],enumerable:!(o=x(e,t))||o.enumerable});return s};var R=s=>w(d({},"__esModule",{value:!0}),s);var S={};p(S,{SkdxResetPasswordPage:()=>r.SkdxResetPasswordPage});module.exports=R(S);var r=require("./ResetPasswordPage.cjs");0&&(module.exports={SkdxResetPasswordPage});

package/dist/reset-password-page/index.d.cts

@@ -0,0 +1 @@
+export { SkdxResetPasswordPage, type SkdxResetPasswordDetail } from './ResetPasswordPage.cjs';

package/dist/reset-password-page/index.d.ts

@@ -0,0 +1 @@
+export { SkdxResetPasswordPage, type SkdxResetPasswordDetail } from './ResetPasswordPage.js';

package/dist/reset-password-page/index.js

@@ -0,0 +1 @@
+import{SkdxResetPasswordPage as t}from"./ResetPasswordPage.js";export{t as SkdxResetPasswordPage};

package/dist/sign-up-page/SignUpPage.cjs

@@ -0,0 +1,97 @@
+"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},$=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!y.call(r,s)&&s!==e&&u(r,s,{get:()=>t[s],enumerable:!(a=h(t,s))||a.enumerable});return r};var E=r=>$(u({},"__esModule",{value:!0}),r),n=(r,t,e,a)=>{for(var s=a>1?void 0:a?h(t,e):t,o=r.length-1,p;o>=0;o--)(p=r[o])&&(s=(a?p(t,e,s):p(s))||s);return a&&s&&u(t,e,s),s};var q={};L(q,{SkdxSignUpPage:()=>d});module.exports=E(q);var i=require("lit"),l=require("lit/decorators.js"),k=require("../internal/define.cjs"),g=require("../internal/events.cjs"),m=require("../internal/slots.cjs"),f=require("../sign-in-page/index.cjs"),S=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),V=require("@skdx/web-components/checkbox"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),A=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input"),F=require("@skdx/web-components/text-field");var x="data-skdx-sign-up-page-generated",w="data-skdx-sign-up-page-content",b="confirmPassword",M=0,d=class extends i.LitElement{constructor(){super(...arguments);this.title="Create account";this.pending=!1;this.emailLabel="Email";this.passwordLabel="Password";this.passwordMismatchMessage="Passwords do not match";this.submitLabel="Create account";this.titleId=`skdx-sign-up-page-title-${++M}`;this.handleSubmit=e=>{let a=e.target?.closest("skdx-form");if(!a)return;e.preventDefault();let s=c(a,"password"),o=v(a,b);if(o&&o.value!==s){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:c(a,"email"),password:s};this.nameLabel!==void 0&&(p.name=c(a,"name")),this.hasSlotted("terms")&&(p.termsAccepted=C(a)),(0,g.emit)(this,"sign-up",p)};this.clearMismatch=e=>{e.target.setCustomValidity("")}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-checkbox > span")}get contentRegion(){return this.querySelector(`[${w}]`)}get hasContent(){return(0,m.hasUnslottedChild)(this,x)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,m.placeSlotted)(this,x,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion)}signUpWithProvider(e){(0,g.emit)(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],a=this.getProviderLabel??f.defaultProviderLabel;return i.html`
+      <div
+        class="skdx-sign-up-page__panel"
+        data-skdx-sign-up-page-generated
+      >
+        <skdx-heading
+          class="skdx-sign-up-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?i.html`<skdx-alert
+                class="skdx-sign-up-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:i.nothing}
+        ${e.length?i.html`<div class="skdx-sign-up-page__providers">
+                  ${e.map(s=>i.html`<skdx-button
+                        class="skdx-sign-up-page__provider"
+                        type="button"
+                        data-provider=${s.id}
+                        @click=${()=>this.signUpWithProvider(s.id)}
+                        >${a(s)}</skdx-button
+                      >`)}
+                </div>
+                <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:i.nothing}
+        <skdx-form class="skdx-sign-up-page__form">
+          <form>
+            ${this.nameLabel===void 0?i.nothing:i.html`<skdx-field
+                    class="skdx-sign-up-page__field"
+                    label=${this.nameLabel}
+                    required
+                  >
+                    <skdx-text-field
+                      name="name"
+                      required
+                    >
+                      <skdx-text-field-input autocomplete="name"></skdx-text-field-input>
+                    </skdx-text-field>
+                  </skdx-field>`}
+            <skdx-field
+              class="skdx-sign-up-page__field"
+              label=${this.emailLabel}
+              required
+            >
+              <skdx-text-field
+                name="email"
+                type="email"
+                required
+              >
+                <skdx-text-field-input
+                  type="email"
+                  autocomplete="email"
+                ></skdx-text-field-input>
+              </skdx-text-field>
+            </skdx-field>
+            <skdx-field
+              class="skdx-sign-up-page__field"
+              label=${this.passwordLabel}
+              required
+            >
+              <skdx-password-input
+                name="password"
+                required
+              ></skdx-password-input>
+            </skdx-field>
+            ${this.confirmPasswordLabel===void 0?i.nothing:i.html`<skdx-field
+                    class="skdx-sign-up-page__field"
+                    label=${this.confirmPasswordLabel}
+                    required
+                  >
+                    <skdx-password-input
+                      name=${b}
+                      required
+                      @value-change=${this.clearMismatch}
+                    ></skdx-password-input>
+                  </skdx-field>`}
+            ${this.hasContent?i.html`<div data-skdx-sign-up-page-content></div>`:i.nothing}
+            ${this.hasSlotted("terms")?i.html`<skdx-field class="skdx-sign-up-page__terms">
+                    <skdx-checkbox
+                      name="terms"
+                      required
+                      ><span></span
+                    ></skdx-checkbox>
+                  </skdx-field>`:i.nothing}
+            <skdx-button
+              class="skdx-sign-up-page__submit"
+              type="submit"
+              ?loading=${this.pending}
+              ?disabled=${this.pending}
+              >${this.submitLabel}</skdx-button
+            >
+          </form>
+        </skdx-form>
+        ${this.hasSlotted("footer")?i.html`<div class="skdx-sign-up-page__footer"></div>`:i.nothing}
+      </div>
+    `}};n([(0,l.property)({type:String})],d.prototype,"title",2),n([(0,l.property)({attribute:!1})],d.prototype,"providers",2),n([(0,l.property)({type:String})],d.prototype,"error",2),n([(0,l.property)({type:Boolean})],d.prototype,"pending",2),n([(0,l.property)({type:String,attribute:"name-label"})],d.prototype,"nameLabel",2),n([(0,l.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),n([(0,l.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),n([(0,l.property)({type:String,attribute:"confirm-password-label"})],d.prototype,"confirmPasswordLabel",2),n([(0,l.property)({type:String,attribute:"password-mismatch-message"})],d.prototype,"passwordMismatchMessage",2),n([(0,l.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),n([(0,l.property)({attribute:!1})],d.prototype,"getProviderLabel",2),d=n([(0,k.customElement)("skdx-sign-up-page","sign-up-page","root")],d);function v(r,t){return r.querySelector(`[name="${t}"]`)}function c(r,t){return v(r,t)?.value??""}function C(r){return r.querySelector('[name="terms"]')?.checked===!0}0&&(module.exports={SkdxSignUpPage});

package/dist/sign-up-page/SignUpPage.d.cts

@@ -0,0 +1,133 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxSignInProvider } from '../sign-in-page/index.cjs';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/checkbox';
+import '@skdx/web-components/divider';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+import '@skdx/web-components/text-field';
+/** What a `sign-up` event carries: the chosen provider, plus the values of the fields that rendered. */
+export interface SkdxSignUpDetail {
+    /** The `id` of the provider the user chose, or `'credentials'` for the form. */
+    providerId: string;
+    /** The name the form held; absent unless the name field rendered. */
+    name?: string;
+    /** The email the form held; absent for a provider button. */
+    email?: string;
+    /** The password the form held, already matched against the confirmation. */
+    password?: string;
+    /** Whether the terms checkbox was ticked; absent unless the terms field rendered. */
+    termsAccepted?: boolean;
+}
+/**
+ * Sign-up block: provider buttons, a credentials form with optional name,
+ * confirmation and terms fields, and a footer.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-sign-up-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__providers`, `__provider`, `__divider`, `__form`, `__field`,
+ * `__terms`, `__submit` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-sign-up-page
+ *   id="sign-up"
+ *   confirm-password-label="Confirm password"
+ * >
+ *   <span slot="terms">I accept the terms.</span>
+ * </skdx-sign-up-page>
+ * <script>
+ *   document
+ *     .getElementById('sign-up')
+ *     .addEventListener('sign-up', (event) => console.log(event.detail));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the terms and the submit button.
+ * @slot terms - Terms copy and links used as the label of the required terms checkbox.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires sign-up - Fires with `{ providerId, name?, email?, password?, termsAccepted? }` when a provider button is activated or the form submits with matching, valid fields.
+ */
+export declare class SkdxSignUpPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Create account'
+     */
+    title: string;
+    /**
+     * Third-party providers, in render order, each rendering one button above the credentials form.
+     * @default undefined — no providers region and no divider render.
+     */
+    providers?: readonly SkdxSignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while every field stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the name field; supplying it is what makes that field render at all.
+     * @default undefined — no name field renders.
+     */
+    nameLabel?: string;
+    /**
+     * Label of the email field in the credentials form.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders.
+     */
+    confirmPasswordLabel?: string;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Create account'
+     */
+    submitLabel: string;
+    /**
+     * Formats a provider button's text from its entry.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SkdxSignInProvider) => string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    /** The span inside the terms checkbox that the `terms` slot is moved into. */
+    private get termsLabel();
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private readonly handleSubmit;
+    private readonly clearMismatch;
+    private signUpWithProvider;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sign-up-page': SkdxSignUpPage;
+    }
+}

package/dist/sign-up-page/SignUpPage.d.ts

@@ -0,0 +1,133 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxSignInProvider } from '../sign-in-page/index.js';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/checkbox';
+import '@skdx/web-components/divider';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+import '@skdx/web-components/text-field';
+/** What a `sign-up` event carries: the chosen provider, plus the values of the fields that rendered. */
+export interface SkdxSignUpDetail {
+    /** The `id` of the provider the user chose, or `'credentials'` for the form. */
+    providerId: string;
+    /** The name the form held; absent unless the name field rendered. */
+    name?: string;
+    /** The email the form held; absent for a provider button. */
+    email?: string;
+    /** The password the form held, already matched against the confirmation. */
+    password?: string;
+    /** Whether the terms checkbox was ticked; absent unless the terms field rendered. */
+    termsAccepted?: boolean;
+}
+/**
+ * Sign-up block: provider buttons, a credentials form with optional name,
+ * confirmation and terms fields, and a footer.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-sign-up-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__providers`, `__provider`, `__divider`, `__form`, `__field`,
+ * `__terms`, `__submit` and `__footer`.
+ *
+ * @example
+ * ```html
+ * <skdx-sign-up-page
+ *   id="sign-up"
+ *   confirm-password-label="Confirm password"
+ * >
+ *   <span slot="terms">I accept the terms.</span>
+ * </skdx-sign-up-page>
+ * <script>
+ *   document
+ *     .getElementById('sign-up')
+ *     .addEventListener('sign-up', (event) => console.log(event.detail));
+ * </script>
+ * ```
+ *
+ * @slot - Extra fields rendered inside the form, above the terms and the submit button.
+ * @slot terms - Terms copy and links used as the label of the required terms checkbox.
+ * @slot footer - Navigation below the form, such as a link back to the sign-in page.
+ * @fires sign-up - Fires with `{ providerId, name?, email?, password?, termsAccepted? }` when a provider button is activated or the form submits with matching, valid fields.
+ */
+export declare class SkdxSignUpPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Create account'
+     */
+    title: string;
+    /**
+     * Third-party providers, in render order, each rendering one button above the credentials form.
+     * @default undefined — no providers region and no divider render.
+     */
+    providers?: readonly SkdxSignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the form. The block never clears it.
+     * @default undefined — no error region renders.
+     */
+    error?: string;
+    /**
+     * Marks the request in flight, making the submit button busy while every field stays editable.
+     * @default false
+     */
+    pending: boolean;
+    /**
+     * Label of the name field; supplying it is what makes that field render at all.
+     * @default undefined — no name field renders.
+     */
+    nameLabel?: string;
+    /**
+     * Label of the email field in the credentials form.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel: string;
+    /**
+     * Label of the confirmation field; supplying it is what turns password matching on.
+     * @default undefined — no confirmation field renders.
+     */
+    confirmPasswordLabel?: string;
+    /**
+     * Validation message pushed onto the confirmation field when the two passwords differ.
+     * @default 'Passwords do not match'
+     */
+    passwordMismatchMessage: string;
+    /**
+     * Text of the credentials form's submit button.
+     * @default 'Create account'
+     */
+    submitLabel: string;
+    /**
+     * Formats a provider button's text from its entry.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SkdxSignInProvider) => string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Whether the consumer supplied content for `name` — still true once it has been moved in. */
+    private hasSlotted;
+    private region;
+    /** The span inside the terms checkbox that the `terms` slot is moved into. */
+    private get termsLabel();
+    private get contentRegion();
+    private get hasContent();
+    protected updated(): void;
+    private readonly handleSubmit;
+    private readonly clearMismatch;
+    private signUpWithProvider;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sign-up-page': SkdxSignUpPage;
+    }
+}