@skdx/web-components-blocks 0.1.0 → 0.35.0

package/dist/onboarding-checklist/OnboardingChecklist.js

@@ -0,0 +1,55 @@
+var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(c,r,e,t)=>{for(var s=t>1?void 0:t?g(r,e):r,a=c.length-1,p;a>=0;a--)(p=c[a])&&(s=(t?p(r,e,s):p(s))||s);return t&&s&&m(r,e,s),s};import{html as l,LitElement as h,nothing as o}from"lit";import{property as d}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{emit as k}from"../internal/events.js";import"@skdx/web-components/button";import"@skdx/web-components/heading";import"@skdx/web-components/progress";import"@skdx/web-components/text";import"@skdx/web-components/visually-hidden";function x(c,r){return`${c}/${r}`}var $=0,i=class extends h{constructor(){super(...arguments);this.headingLevel=2;this.completeLabel="Completed";this.optionalLabel="Optional";this.titleId=`skdx-onboarding-checklist-title-${++$}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId)}renderItem(e){let t=e.state??"pending";return l`<li
+      class="skdx-onboarding-checklist__item"
+      data-state=${t}
+      aria-current=${t==="active"?"step":o}
+    >
+      <span
+        class="skdx-onboarding-checklist__indicator"
+        aria-hidden="true"
+      ></span>
+      <div class="skdx-onboarding-checklist__body">
+        <span class="skdx-onboarding-checklist__item-title"
+          >${e.label}${t==="complete"?l`<skdx-visually-hidden> ${this.completeLabel}</skdx-visually-hidden>`:o}</span
+        >
+        ${e.optional?l`<span class="skdx-onboarding-checklist__optional">${this.optionalLabel}</span>`:o}
+        ${e.description?l`<skdx-text
+                class="skdx-onboarding-checklist__item-description"
+                as="p"
+                .tone=${"muted"}
+                >${e.description}</skdx-text
+              >`:o}
+      </div>
+      ${e.actionLabel&&t!=="complete"?l`<skdx-button
+              class="skdx-onboarding-checklist__action"
+              .size=${"sm"}
+              .variant=${t==="active"?"primary":"secondary"}
+              ?disabled=${t==="disabled"}
+              @click=${()=>{k(this,"action",e)}}
+              >${e.actionLabel}</skdx-button
+            >`:o}
+    </li>`}render(){let e=this.items??[],t=e.filter(a=>(a.state??"pending")==="complete").length,s=this.getProgressLabel??x;return l`
+      <div class="skdx-onboarding-checklist__header">
+        <skdx-heading
+          class="skdx-onboarding-checklist__title"
+          as=${`h${this.headingLevel}`}
+          id=${this.titleId}
+          >${this.title??""}</skdx-heading
+        >
+        ${this.description?l`<skdx-text
+                class="skdx-onboarding-checklist__description"
+                as="p"
+                .tone=${"muted"}
+                >${this.description}</skdx-text
+              >`:o}
+        ${e.length?l`<skdx-progress
+                class="skdx-onboarding-checklist__progress"
+                .value=${t}
+                .max=${e.length}
+                aria-labelledby=${this.titleId}
+                .getValueLabel=${(a,p,b)=>s(a,b)}
+              ></skdx-progress>`:o}
+      </div>
+      <ol class="skdx-onboarding-checklist__list">
+        ${e.map(a=>this.renderItem(a))}
+      </ol>
+    `}};n([d({type:String})],i.prototype,"title",2),n([d({type:String})],i.prototype,"description",2),n([d({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),n([d({attribute:!1})],i.prototype,"items",2),n([d({attribute:!1})],i.prototype,"getProgressLabel",2),n([d({type:String,attribute:"complete-label"})],i.prototype,"completeLabel",2),n([d({type:String,attribute:"optional-label"})],i.prototype,"optionalLabel",2),i=n([u("skdx-onboarding-checklist","onboarding-checklist","root")],i);export{i as SkdxOnboardingChecklist};

package/dist/onboarding-checklist/index.cjs

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

package/dist/onboarding-checklist/index.d.cts

@@ -0,0 +1 @@
+export { SkdxOnboardingChecklist, type SkdxOnboardingChecklistItem, type SkdxOnboardingChecklistItemState, } from './OnboardingChecklist.cjs';

package/dist/onboarding-checklist/index.d.ts

@@ -0,0 +1 @@
+export { SkdxOnboardingChecklist, type SkdxOnboardingChecklistItem, type SkdxOnboardingChecklistItemState, } from './OnboardingChecklist.js';

package/dist/onboarding-checklist/index.js

@@ -0,0 +1 @@
+import{SkdxOnboardingChecklist as d}from"./OnboardingChecklist.js";export{d as SkdxOnboardingChecklist};

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

@@ -0,0 +1,59 @@
+"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var v=(i,e)=>{for(var t in e)p(i,t,{get:e[t],enumerable:!0})},y=(i,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of x(e))!w.call(i,r)&&r!==t&&p(i,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return i};var $=i=>y(p({},"__esModule",{value:!0}),i),d=(i,e,t,o)=>{for(var r=o>1?void 0:o?u(e,t):e,l=i.length-1,m;l>=0;l--)(m=i[l])&&(r=(o?m(e,t,r):m(r))||r);return o&&r&&p(e,t,r),r};var C={};v(C,{SkdxResetPasswordPage:()=>a});module.exports=$(C);var s=require("lit"),n=require("lit/decorators.js"),f=require("../internal/define.cjs"),k=require("../internal/events.cjs"),c=require("../internal/slots.cjs"),M=require("@skdx/web-components/alert"),q=require("@skdx/web-components/button"),S=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),N=require("@skdx/web-components/password-input");var h="data-skdx-reset-password-page-generated",_="data-skdx-reset-password-page-content",g="confirmPassword",E=0,a=class extends s.LitElement{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-${++E}`;this.handleSubmit=t=>{let o=t.target?.closest("skdx-form");if(!o)return;t.preventDefault();let r=b(o,"password")?.value??"",l=b(o,g);if(l&&l.value!==r){l.setCustomValidity(this.passwordMismatchMessage),l.reportValidity();return}(0,k.emit)(this,"reset-password",{password:r})};this.clearMismatch=t=>{t.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(t){return this.querySelector(`[slot="${t}"]`)!==null}region(t){return this.querySelector(`.skdx-reset-password-page__${t}`)}get contentRegion(){return this.querySelector(`[${_}]`)}get hasContent(){return(0,c.hasUnslottedChild)(this,h)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,c.placeSlotted)(this,h,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return s.html`
+      <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?s.html`<skdx-alert
+                class="skdx-reset-password-page__error"
+                .status=${"danger"}
+                >${this.error}</skdx-alert
+              >`:s.nothing}
+        ${this.success?s.html`<skdx-alert
+                class="skdx-reset-password-page__success"
+                .status=${"success"}
+                >${this.success}</skdx-alert
+              >`:s.html`<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")?s.html`<skdx-field-description
+                            class="skdx-reset-password-page__requirements"
+                          ></skdx-field-description>`:s.nothing}
+                  </skdx-field>
+                  ${this.confirmPasswordLabel===void 0?s.nothing:s.html`<skdx-field
+                          class="skdx-reset-password-page__field"
+                          label=${this.confirmPasswordLabel}
+                          required
+                        >
+                          <skdx-password-input
+                            name=${g}
+                            required
+                            @value-change=${this.clearMismatch}
+                          ></skdx-password-input>
+                        </skdx-field>`}
+                  ${this.hasContent?s.html`<div data-skdx-reset-password-page-content></div>`:s.nothing}
+                  <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")?s.html`<div class="skdx-reset-password-page__footer"></div>`:s.nothing}
+      </div>
+    `}};d([(0,n.property)({type:String})],a.prototype,"title",2),d([(0,n.property)({type:String})],a.prototype,"error",2),d([(0,n.property)({type:String})],a.prototype,"success",2),d([(0,n.property)({type:Boolean})],a.prototype,"pending",2),d([(0,n.property)({type:String,attribute:"password-label"})],a.prototype,"passwordLabel",2),d([(0,n.property)({type:String,attribute:"confirm-password-label"})],a.prototype,"confirmPasswordLabel",2),d([(0,n.property)({type:String,attribute:"password-mismatch-message"})],a.prototype,"passwordMismatchMessage",2),d([(0,n.property)({type:String,attribute:"submit-label"})],a.prototype,"submitLabel",2),a=d([(0,f.customElement)("skdx-reset-password-page","reset-password-page","root")],a);function b(i,e){return i.querySelector(`[name="${e}"]`)}0&&(module.exports={SkdxResetPasswordPage});

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});