@skdx/web-components-blocks 0.38.0 → 0.40.0

package/dist/onboarding-checklist/OnboardingChecklist.js

@@ -52,4 +52,4 @@ var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var n=(c,r,e,t
       <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};
+    `}};n([d({type:String,attribute:"heading"})],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/page-container/PageContainer.cjs

@@ -1,14 +1,14 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var a in e)d(r,a,{get:e[a],enumerable:!0})},x=(r,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!h.call(r,t)&&t!==a&&d(r,t,{get:()=>e[t],enumerable:!(n=p(e,t))||n.enumerable});return r};var v=r=>x(d({},"__esModule",{value:!0}),r),o=(r,e,a,n)=>{for(var t=n>1?void 0:n?p(e,a):e,c=r.length-1,b;c>=0;c--)(b=r[c])&&(t=(n?b(e,a,t):b(t))||t);return n&&t&&d(e,a,t),t};var L={};k(L,{SkdxPageContainer:()=>i});module.exports=v(L);var s=require("lit"),l=require("lit/decorators.js"),m=require("../internal/define.cjs"),u=require("../internal/slots.cjs"),E=require("@skdx/web-components/breadcrumb"),f=require("@skdx/web-components/heading"),T=require("@skdx/web-components/toolbar");var _="data-skdx-page-container-generated",y=0,i=class extends s.LitElement{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++y}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(a){return this.querySelector(`.skdx-page-container__${a}`)}updated(){(0,u.placeSlotted)(this,_,{actions:this.region("actions")},this.region("content"))}render(){return s.html`
+"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var a in e)l(r,a,{get:e[a],enumerable:!0})},x=(r,e,a,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!h.call(r,t)&&t!==a&&l(r,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return r};var v=r=>x(l({},"__esModule",{value:!0}),r),o=(r,e,a,s)=>{for(var t=s>1?void 0:s?p(e,a):e,c=r.length-1,b;c>=0;c--)(b=r[c])&&(t=(s?b(e,a,t):b(t))||t);return s&&t&&l(e,a,t),t};var L={};k(L,{SkdxPageContainer:()=>i});module.exports=v(L);var n=require("lit"),d=require("lit/decorators.js"),u=require("../internal/define.cjs"),m=require("../internal/slots.cjs"),E=require("@skdx/web-components/breadcrumb"),f=require("@skdx/web-components/heading"),T=require("@skdx/web-components/toolbar");var _="data-skdx-page-container-generated",y=0,i=class extends n.LitElement{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++y}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(a){return this.querySelector(`.skdx-page-container__${a}`)}updated(){(0,m.placeSlotted)(this,_,{actions:this.region("actions")},this.region("content"))}render(){return n.html`
       <header
         class="skdx-page-container__header"
         data-skdx-page-container-generated
         role="none"
       >
-        ${this.breadcrumbs?.length?s.html`<skdx-breadcrumb
+        ${this.breadcrumbs?.length?n.html`<skdx-breadcrumb
                 class="skdx-page-container__breadcrumbs"
                 label=${this.breadcrumbLabel}
                 .items=${this.breadcrumbs}
-              ></skdx-breadcrumb>`:s.nothing}
+              ></skdx-breadcrumb>`:n.nothing}
         <div class="skdx-page-container__heading-row">
           <skdx-heading
             class="skdx-page-container__title"
@@ -16,14 +16,14 @@
             id=${this.titleId}
             >${this.title??""}</skdx-heading
           >
-          ${this.hasActions?s.html`<skdx-toolbar
+          ${this.hasActions?n.html`<skdx-toolbar
                   class="skdx-page-container__actions"
                   aria-label=${this.actionsLabel}
-                ></skdx-toolbar>`:s.nothing}
+                ></skdx-toolbar>`:n.nothing}
         </div>
       </header>
       <div
         class="skdx-page-container__content"
         data-skdx-page-container-generated
       ></div>
-    `}};o([(0,l.property)({type:String})],i.prototype,"title",2),o([(0,l.property)({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),o([(0,l.property)({attribute:!1})],i.prototype,"breadcrumbs",2),o([(0,l.property)({type:String,attribute:"breadcrumb-label"})],i.prototype,"breadcrumbLabel",2),o([(0,l.property)({type:String,attribute:"actions-label"})],i.prototype,"actionsLabel",2),i=o([(0,m.customElement)("skdx-page-container","page-container","root")],i);0&&(module.exports={SkdxPageContainer});
+    `}};o([(0,d.property)({type:String,attribute:"heading"})],i.prototype,"title",2),o([(0,d.property)({type:Number,attribute:"heading-level"})],i.prototype,"headingLevel",2),o([(0,d.property)({attribute:!1})],i.prototype,"breadcrumbs",2),o([(0,d.property)({type:String,attribute:"breadcrumb-label"})],i.prototype,"breadcrumbLabel",2),o([(0,d.property)({type:String,attribute:"actions-label"})],i.prototype,"actionsLabel",2),i=o([(0,u.customElement)("skdx-page-container","page-container","root")],i);0&&(module.exports={SkdxPageContainer});

package/dist/page-container/PageContainer.d.cts

@@ -20,19 +20,19 @@ export interface SkdxPageContainerBreadcrumb {
  *
  * @example
  * ```html
- * <skdx-page-container title="Billing">
+ * <skdx-page-container heading="Billing">
  *   <skdx-button slot="actions">Export</skdx-button>
  *   <p>Invoices and payment methods.</p>
  * </skdx-page-container>
  * ```
  *
  * @slot - The page content below the header.
- * @slot actions - Controls placed in the toolbar beside the heading.
+ * @slot actions - Toolbar parts placed in the toolbar beside the heading. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
  */
 export declare class SkdxPageContainer extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** The page heading text, rendered into a derived Heading that also names the section. */
+    /** The page heading text, rendered into a derived Heading that also names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Heading level of the derived title. A page container normally holds the page's only `<h1>`; lower it when the block sits inside a larger outline.

package/dist/page-container/PageContainer.d.ts

@@ -20,19 +20,19 @@ export interface SkdxPageContainerBreadcrumb {
  *
  * @example
  * ```html
- * <skdx-page-container title="Billing">
+ * <skdx-page-container heading="Billing">
  *   <skdx-button slot="actions">Export</skdx-button>
  *   <p>Invoices and payment methods.</p>
  * </skdx-page-container>
  * ```
  *
  * @slot - The page content below the header.
- * @slot actions - Controls placed in the toolbar beside the heading.
+ * @slot actions - Toolbar parts placed in the toolbar beside the heading. Pass toolbar parts — a toolbar button, link, separator or toggle group; anything else stays its own Tab stop and the arrow keys skip it, since only a toolbar part joins the roving tabindex.
  */
 export declare class SkdxPageContainer extends LitElement {
     /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
     createRenderRoot(): HTMLElement | DocumentFragment;
-    /** The page heading text, rendered into a derived Heading that also names the section. */
+    /** The page heading text, rendered into a derived Heading that also names the section. The JavaScript property is `title`. */
     title: string;
     /**
      * Heading level of the derived title. A page container normally holds the page's only `<h1>`; lower it when the block sits inside a larger outline.

package/dist/page-container/PageContainer.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(o,a,i,n)=>{for(var t=n>1?void 0:n?m(a,i):a,l=o.length-1,d;l>=0;l--)(d=o[l])&&(t=(n?d(a,i,t):d(t))||t);return n&&t&&p(a,i,t),t};import{html as c,LitElement as u,nothing as b}from"lit";import{property as s}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{placeSlotted as h}from"../internal/slots.js";import"@skdx/web-components/breadcrumb";import"@skdx/web-components/heading";import"@skdx/web-components/toolbar";var k="data-skdx-page-container-generated",x=0,e=class extends u{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++x}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(i){return this.querySelector(`.skdx-page-container__${i}`)}updated(){h(this,k,{actions:this.region("actions")},this.region("content"))}render(){return c`
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(o,a,i,s)=>{for(var t=s>1?void 0:s?u(a,i):a,d=o.length-1,l;d>=0;d--)(l=o[d])&&(t=(s?l(a,i,t):l(t))||t);return s&&t&&p(a,i,t),t};import{html as c,LitElement as m,nothing as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{placeSlotted as h}from"../internal/slots.js";import"@skdx/web-components/breadcrumb";import"@skdx/web-components/heading";import"@skdx/web-components/toolbar";var k="data-skdx-page-container-generated",x=0,e=class extends m{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++x}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(i){return this.querySelector(`.skdx-page-container__${i}`)}updated(){h(this,k,{actions:this.region("actions")},this.region("content"))}render(){return c`
       <header
         class="skdx-page-container__header"
         data-skdx-page-container-generated
@@ -26,4 +26,4 @@ var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(o,a,i,n
         class="skdx-page-container__content"
         data-skdx-page-container-generated
       ></div>
-    `}};r([s({type:String})],e.prototype,"title",2),r([s({type:Number,attribute:"heading-level"})],e.prototype,"headingLevel",2),r([s({attribute:!1})],e.prototype,"breadcrumbs",2),r([s({type:String,attribute:"breadcrumb-label"})],e.prototype,"breadcrumbLabel",2),r([s({type:String,attribute:"actions-label"})],e.prototype,"actionsLabel",2),e=r([g("skdx-page-container","page-container","root")],e);export{e as SkdxPageContainer};
+    `}};r([n({type:String,attribute:"heading"})],e.prototype,"title",2),r([n({type:Number,attribute:"heading-level"})],e.prototype,"headingLevel",2),r([n({attribute:!1})],e.prototype,"breadcrumbs",2),r([n({type:String,attribute:"breadcrumb-label"})],e.prototype,"breadcrumbLabel",2),r([n({type:String,attribute:"actions-label"})],e.prototype,"actionsLabel",2),e=r([g("skdx-page-container","page-container","root")],e);export{e as SkdxPageContainer};

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

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

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

@@ -44,7 +44,7 @@ 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Choose a new password'
      */
     title: string;

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

@@ -44,7 +44,7 @@ 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Choose a new password'
      */
     title: string;

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

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,i)=>{for(var s=i>1?void 0:i?k(n,e):n,a=l.length-1,u;a>=0;a--)(u=l[a])&&(s=(i?u(n,e,s):u(s))||s);return i&&s&&h(n,e,s),s};import{html as o,LitElement as w,nothing as p}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import{hasUnslottedChild as f,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 c="data-skdx-reset-password-page-generated",$="data-skdx-reset-password-page-content",m="confirmPassword",y=0,t=class extends w{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-${++y}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=g(i,"password")?.value??"",a=g(i,m);if(a&&a.value!==s){a.setCustomValidity(this.passwordMismatchMessage),a.reportValidity();return}b(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}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){v(this,c,{requirements:this.region("requirements"),footer:this.region("footer")},this.contentRegion)}render(){return o`
+var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,a)=>{for(var s=a>1?void 0:a?k(n,e):n,i=l.length-1,u;i>=0;i--)(u=l[i])&&(s=(a?u(n,e,s):u(s))||s);return a&&s&&h(n,e,s),s};import{html as o,LitElement as w,nothing as p}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as b}from"../internal/events.js";import{hasUnslottedChild as f,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 c="data-skdx-reset-password-page-generated",$="data-skdx-reset-password-page-content",m="confirmPassword",y=0,t=class extends w{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-${++y}`;this.handleSubmit=e=>{let a=e.target?.closest("skdx-form");if(!a)return;e.preventDefault();let s=g(a,"password")?.value??"",i=g(a,m);if(i&&i.value!==s){i.setCustomValidity(this.passwordMismatchMessage),i.reportValidity();return}b(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}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-reset-password-page__${e}`)}get contentRegion(){return this.querySelector(`[${$}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){v(this,c,{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
@@ -11,6 +11,7 @@ var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,i
         >
         ${this.error?o`<skdx-alert
                 class="skdx-reset-password-page__error"
+                .role=${"alert"}
                 .status=${"danger"}
                 >${this.error}</skdx-alert
               >`:p}
@@ -66,4 +67,4 @@ var h=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(l,n,e,i
               </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([x("skdx-reset-password-page","reset-password-page","root")],t);function g(l,n){return l.querySelector(`[name="${n}"]`)}export{t as SkdxResetPasswordPage};
+    `}};r([d({type:String,attribute:"heading"})],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([x("skdx-reset-password-page","reset-password-page","root")],t);function g(l,n){return l.querySelector(`[name="${n}"]`)}export{t as SkdxResetPasswordPage};

package/dist/sign-in-page/SignInPage.cjs

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(s,r)=>{for(var e in r)m(s,e,{get:r[e],enumerable:!0})},_=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!h.call(s,t)&&t!==e&&m(s,t,{get:()=>r[t],enumerable:!(i=c(r,t))||i.enumerable});return s};var L=s=>_(m({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,p=s.length-1,a;p>=0;p--)(a=s[p])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&m(r,e,t),t};var y={};f(y,{SkdxSignInPage:()=>d,defaultProviderLabel:()=>k});module.exports=L(y);var n=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/events.cjs"),E=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),q=require("@skdx/web-components/password-input"),M=require("@skdx/web-components/text-field");function k(s){return`Sign in with ${s.name}`}var u=new Set(["credentials","magic-link"]),$=0,d=class extends n.LitElement{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form[data-provider]");if(!i)return;e.preventDefault();let t=i.getAttribute("data-provider")??"",p=b(i,"email");(0,g.emit)(this,"sign-in",t==="credentials"?{providerId:t,email:p,password:b(i,"password")}:{providerId:t,email:p})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(e){(0,g.emit)(this,"sign-in",{providerId:e})}signInForm(e){let i=e.id==="credentials";return n.html`<skdx-form
+"use strict";var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(s,r)=>{for(var e in r)m(s,e,{get:r[e],enumerable:!0})},_=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!h.call(s,t)&&t!==e&&m(s,t,{get:()=>r[t],enumerable:!(i=u(r,t))||i.enumerable});return s};var $=s=>_(m({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?u(r,e):r,p=s.length-1,a;p>=0;p--)(a=s[p])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&m(r,e,t),t};var y={};f(y,{SkdxSignInPage:()=>d,defaultProviderLabel:()=>k});module.exports=$(y);var n=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/events.cjs"),E=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),q=require("@skdx/web-components/password-input"),M=require("@skdx/web-components/text-field");function k(s){return`Sign in with ${s.name}`}var c=new Set(["credentials","magic-link"]),L=0,d=class extends n.LitElement{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++L}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form[data-provider]");if(!i)return;e.preventDefault();let t=i.getAttribute("data-provider")??"",p=b(i,"email");(0,g.emit)(this,"sign-in",t==="credentials"?{providerId:t,email:p,password:b(i,"password")}:{providerId:t,email:p})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(e){(0,g.emit)(this,"sign-in",{providerId:e})}signInForm(e){let i=e.id==="credentials";return n.html`<skdx-form
       class="skdx-sign-in-page__form"
       data-provider=${e.id}
     >
@@ -35,7 +35,7 @@
           >${i?this.submitLabel:this.magicLinkLabel}</skdx-button
         >
       </form>
-    </skdx-form>`}render(){let e=this.providers??[],i=e.filter(a=>!u.has(a.id)),t=e.filter(a=>u.has(a.id)),p=this.getProviderLabel??k;return n.html`
+    </skdx-form>`}render(){let e=this.providers??[],i=e.filter(a=>!c.has(a.id)),t=e.filter(a=>c.has(a.id)),p=this.getProviderLabel??k;return n.html`
       <div class="skdx-sign-in-page__panel">
         <skdx-heading
           class="skdx-sign-in-page__title"
@@ -45,6 +45,7 @@
         >
         ${this.error?n.html`<skdx-alert
                 class="skdx-sign-in-page__error"
+                .role=${"alert"}
                 data-status="danger"
                 >${this.error}</skdx-alert
               >`:n.nothing}
@@ -60,4 +61,4 @@
         ${i.length&&t.length?n.html`<skdx-divider class="skdx-sign-in-page__divider"></skdx-divider>`:n.nothing}
         ${t.map(a=>this.signInForm(a))}
       </div>
-    `}};l([(0,o.property)({type:String})],d.prototype,"title",2),l([(0,o.property)({attribute:!1})],d.prototype,"providers",2),l([(0,o.property)({type:String})],d.prototype,"error",2),l([(0,o.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),l([(0,o.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),l([(0,o.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),l([(0,o.property)({type:String,attribute:"magic-link-label"})],d.prototype,"magicLinkLabel",2),l([(0,o.property)({attribute:!1})],d.prototype,"getProviderLabel",2),d=l([(0,v.customElement)("skdx-sign-in-page","sign-in-page","root")],d);function b(s,r){return s.querySelector(`[name="${r}"]`)?.value??""}0&&(module.exports={SkdxSignInPage,defaultProviderLabel});
+    `}};l([(0,o.property)({type:String,attribute:"heading"})],d.prototype,"title",2),l([(0,o.property)({attribute:!1})],d.prototype,"providers",2),l([(0,o.property)({type:String})],d.prototype,"error",2),l([(0,o.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),l([(0,o.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),l([(0,o.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),l([(0,o.property)({type:String,attribute:"magic-link-label"})],d.prototype,"magicLinkLabel",2),l([(0,o.property)({attribute:!1})],d.prototype,"getProviderLabel",2),d=l([(0,v.customElement)("skdx-sign-in-page","sign-in-page","root")],d);function b(s,r){return s.querySelector(`[name="${r}"]`)?.value??""}0&&(module.exports={SkdxSignInPage,defaultProviderLabel});

package/dist/sign-in-page/SignInPage.d.cts

@@ -49,7 +49,7 @@ export declare class SkdxSignInPage 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Sign in'
      */
     title: string;

package/dist/sign-in-page/SignInPage.d.ts

@@ -49,7 +49,7 @@ export declare class SkdxSignInPage 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Sign in'
      */
     title: string;

package/dist/sign-in-page/SignInPage.js

@@ -1,4 +1,4 @@
-var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,a=l.length-1,r;a>=0;a--)(r=l[a])&&(i=(e?r(o,t,i):r(i))||i);return e&&i&&b(o,t,i),i};import{html as p,LitElement as k,nothing as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as g}from"../internal/events.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";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";function h(l){return`Sign in with ${l.name}`}var c=new Set(["credentials","magic-link"]),f=0,s=class extends k{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++f}`;this.handleSubmit=t=>{let e=t.target?.closest("skdx-form[data-provider]");if(!e)return;t.preventDefault();let i=e.getAttribute("data-provider")??"",a=u(e,"email");g(this,"sign-in",i==="credentials"?{providerId:i,email:a,password:u(e,"password")}:{providerId:i,email:a})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(t){g(this,"sign-in",{providerId:t})}signInForm(t){let e=t.id==="credentials";return p`<skdx-form
+var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,a=l.length-1,r;a>=0;a--)(r=l[a])&&(i=(e?r(o,t,i):r(i))||i);return e&&i&&b(o,t,i),i};import{html as p,LitElement as k,nothing as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as g}from"../internal/events.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";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";function h(l){return`Sign in with ${l.name}`}var u=new Set(["credentials","magic-link"]),f=0,s=class extends k{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++f}`;this.handleSubmit=t=>{let e=t.target?.closest("skdx-form[data-provider]");if(!e)return;t.preventDefault();let i=e.getAttribute("data-provider")??"",a=c(e,"email");g(this,"sign-in",i==="credentials"?{providerId:i,email:a,password:c(e,"password")}:{providerId:i,email:a})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(t){g(this,"sign-in",{providerId:t})}signInForm(t){let e=t.id==="credentials";return p`<skdx-form
       class="skdx-sign-in-page__form"
       data-provider=${t.id}
     >
@@ -35,7 +35,7 @@ var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e
           >${e?this.submitLabel:this.magicLinkLabel}</skdx-button
         >
       </form>
-    </skdx-form>`}render(){let t=this.providers??[],e=t.filter(r=>!c.has(r.id)),i=t.filter(r=>c.has(r.id)),a=this.getProviderLabel??h;return p`
+    </skdx-form>`}render(){let t=this.providers??[],e=t.filter(r=>!u.has(r.id)),i=t.filter(r=>u.has(r.id)),a=this.getProviderLabel??h;return p`
       <div class="skdx-sign-in-page__panel">
         <skdx-heading
           class="skdx-sign-in-page__title"
@@ -45,6 +45,7 @@ var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e
         >
         ${this.error?p`<skdx-alert
                 class="skdx-sign-in-page__error"
+                .role=${"alert"}
                 data-status="danger"
                 >${this.error}</skdx-alert
               >`:m}
@@ -60,4 +61,4 @@ var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e
         ${e.length&&i.length?p`<skdx-divider class="skdx-sign-in-page__divider"></skdx-divider>`:m}
         ${i.map(r=>this.signInForm(r))}
       </div>
-    `}};n([d({type:String})],s.prototype,"title",2),n([d({attribute:!1})],s.prototype,"providers",2),n([d({type:String})],s.prototype,"error",2),n([d({type:String,attribute:"email-label"})],s.prototype,"emailLabel",2),n([d({type:String,attribute:"password-label"})],s.prototype,"passwordLabel",2),n([d({type:String,attribute:"submit-label"})],s.prototype,"submitLabel",2),n([d({type:String,attribute:"magic-link-label"})],s.prototype,"magicLinkLabel",2),n([d({attribute:!1})],s.prototype,"getProviderLabel",2),s=n([x("skdx-sign-in-page","sign-in-page","root")],s);function u(l,o){return l.querySelector(`[name="${o}"]`)?.value??""}export{s as SkdxSignInPage,h as defaultProviderLabel};
+    `}};n([d({type:String,attribute:"heading"})],s.prototype,"title",2),n([d({attribute:!1})],s.prototype,"providers",2),n([d({type:String})],s.prototype,"error",2),n([d({type:String,attribute:"email-label"})],s.prototype,"emailLabel",2),n([d({type:String,attribute:"password-label"})],s.prototype,"passwordLabel",2),n([d({type:String,attribute:"submit-label"})],s.prototype,"submitLabel",2),n([d({type:String,attribute:"magic-link-label"})],s.prototype,"magicLinkLabel",2),n([d({attribute:!1})],s.prototype,"getProviderLabel",2),s=n([x("skdx-sign-in-page","sign-in-page","root")],s);function c(l,o){return l.querySelector(`[name="${o}"]`)?.value??""}export{s as SkdxSignInPage,h as defaultProviderLabel};

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

@@ -1,4 +1,4 @@
-"use strict";var u=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)u(r,e,{get:t[e],enumerable:!0})},L=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of _(t))!w.call(r,s)&&s!==e&&u(r,s,{get:()=>t[s],enumerable:!(a=x(t,s))||a.enumerable});return r};var $=r=>L(u({},"__esModule",{value:!0}),r),n=(r,t,e,a)=>{for(var s=a>1?void 0:a?x(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 C={};y(C,{SkdxSignUpPage:()=>d});module.exports=$(C);var i=require("lit"),l=require("lit/decorators.js"),h=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 k="data-skdx-sign-up-page-generated",E="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=q(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}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${E}]`)}get hasContent(){return(0,m.hasUnslottedChild)(this,k)||(this.contentRegion?.hasChildNodes()??!1)}updated(){(0,m.placeSlotted)(this,k,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){(0,g.emit)(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],a=this.getProviderLabel??f.defaultProviderLabel;return i.html`
+"use strict";var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var L=(a,t)=>{for(var e in t)u(a,e,{get:t[e],enumerable:!0})},_=(a,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of E(t))!y.call(a,i)&&i!==e&&u(a,i,{get:()=>t[i],enumerable:!(s=h(t,i))||s.enumerable});return a};var w=a=>_(u({},"__esModule",{value:!0}),a),n=(a,t,e,s)=>{for(var i=s>1?void 0:s?h(t,e):t,o=a.length-1,p;o>=0;o--)(p=a[o])&&(i=(s?p(t,e,i):p(i))||i);return s&&i&&u(t,e,i),i};var C={};L(C,{SkdxSignUpPage:()=>d});module.exports=w(C);var r=require("lit"),l=require("lit/decorators.js"),b=require("../internal/define.cjs"),g=require("../internal/events.cjs"),m=require("../internal/slots.cjs"),f=require("../sign-in-page/index.cjs"),I=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),H=require("@skdx/web-components/checkbox"),V=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",$="data-skdx-sign-up-page-content",k="confirmPassword",M=0,d=class extends r.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 s=e.target?.closest("skdx-form");if(!s)return;e.preventDefault();let i=c(s,"password"),o=v(s,k);if(o&&o.value!==i){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:c(s,"email"),password:i};this.nameLabel!==void 0&&(p.name=c(s,"name")),this.hasSlotted("terms")&&(p.termsAccepted=q(s)),(0,g.emit)(this,"sign-up",p)};this.termsError="";this.reportInvalid=e=>{let s=e.target;s instanceof HTMLInputElement&&s.name==="terms"&&(this.termsError=s.validationMessage)};this.clearTermsError=()=>{this.termsError=""};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),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${$}]`)}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),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){(0,g.emit)(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],s=this.getProviderLabel??f.defaultProviderLabel;return r.html`
       <div
         class="skdx-sign-up-page__panel"
         data-skdx-sign-up-page-generated
@@ -9,24 +9,25 @@
           id=${this.titleId}
           >${this.title}</skdx-heading
         >
-        ${this.error?i.html`<skdx-alert
+        ${this.error?r.html`<skdx-alert
                 class="skdx-sign-up-page__error"
+                .role=${"alert"}
                 .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
+              >`:r.nothing}
+        ${e.length?r.html`<div class="skdx-sign-up-page__providers">
+                  ${e.map(i=>r.html`<skdx-button
                         class="skdx-sign-up-page__provider"
                         type="button"
-                        data-provider=${s.id}
-                        @click=${()=>this.signUpWithProvider(s.id)}
-                        >${a(s)}</skdx-button
+                        data-provider=${i.id}
+                        @click=${()=>this.signUpWithProvider(i.id)}
+                        >${s(i)}</skdx-button
                       >`)}
                 </div>
-                <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:i.nothing}
+                <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:r.nothing}
         <skdx-form class="skdx-sign-up-page__form">
           <form>
-            ${this.nameLabel===void 0?i.nothing:i.html`<skdx-field
+            ${this.nameLabel===void 0?r.nothing:r.html`<skdx-field
                     class="skdx-sign-up-page__field"
                     label=${this.nameLabel}
                     required
@@ -67,13 +68,13 @@
                 <skdx-password-input-toggle></skdx-password-input-toggle>
               </skdx-password-input>
             </skdx-field>
-            ${this.confirmPasswordLabel===void 0?i.nothing:i.html`<skdx-field
+            ${this.confirmPasswordLabel===void 0?r.nothing:r.html`<skdx-field
                     class="skdx-sign-up-page__field"
                     label=${this.confirmPasswordLabel}
                     required
                   >
                     <skdx-password-input
-                      name=${b}
+                      name=${k}
                       required
                       @value-change=${this.clearMismatch}
                     >
@@ -83,14 +84,18 @@
                       <skdx-password-input-toggle></skdx-password-input-toggle>
                     </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">
+            ${this.hasContent?r.html`<div data-skdx-sign-up-page-content></div>`:r.nothing}
+            ${this.hasSlotted("terms")?r.html`<skdx-field
+                    class="skdx-sign-up-page__terms"
+                    .errors=${this.termsError}
+                  >
                     <skdx-checkbox
                       name="terms"
                       required
+                      @checked-change=${this.clearTermsError}
                     ></skdx-checkbox>
                     <skdx-field-label><span></span></skdx-field-label>
-                  </skdx-field>`:i.nothing}
+                  </skdx-field>`:r.nothing}
             <skdx-button
               class="skdx-sign-up-page__submit"
               type="submit"
@@ -100,6 +105,6 @@
             >
           </form>
         </skdx-form>
-        ${this.hasSlotted("footer")?i.html`<div class="skdx-sign-up-page__footer"></div>`:i.nothing}
+        ${this.hasSlotted("footer")?r.html`<div class="skdx-sign-up-page__footer"></div>`:r.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,h.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 q(r){return r.querySelector('[name="terms"]')?.checked===!0}0&&(module.exports={SkdxSignUpPage});
+    `}};n([(0,l.property)({type:String,attribute:"heading"})],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),n([(0,l.state)()],d.prototype,"termsError",2),d=n([(0,b.customElement)("skdx-sign-up-page","sign-up-page","root")],d);function v(a,t){return a.querySelector(`[name="${t}"]`)}function c(a,t){return v(a,t)?.value??""}function q(a){return a.querySelector('[name="terms"]')?.checked===!0}0&&(module.exports={SkdxSignUpPage});

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

@@ -55,7 +55,7 @@ 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Create account'
      */
     title: string;
@@ -122,6 +122,9 @@ export declare class SkdxSignUpPage extends LitElement {
     private get hasContent();
     protected updated(): void;
     private readonly handleSubmit;
+    private termsError;
+    private readonly reportInvalid;
+    private readonly clearTermsError;
     private readonly clearMismatch;
     private signUpWithProvider;
     render(): TemplateResult;

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

@@ -55,7 +55,7 @@ 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.
+     * Heading text, rendered into a derived `<h1>` that names the section. The JavaScript property is `title`.
      * @default 'Create account'
      */
     title: string;
@@ -122,6 +122,9 @@ export declare class SkdxSignUpPage extends LitElement {
     private get hasContent();
     protected updated(): void;
     private readonly handleSubmit;
+    private termsError;
+    private readonly reportInvalid;
+    private readonly clearTermsError;
     private readonly clearMismatch;
     private signUpWithProvider;
     render(): TemplateResult;

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

@@ -1,4 +1,4 @@
-var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i)=>{for(var s=i>1?void 0:i?h(d,e):d,o=n.length-1,p;o>=0;o--)(p=n[o])&&(s=(i?p(d,e,s):p(s))||s);return i&&s&&b(d,e,s),s};import{html as l,LitElement as f,nothing as u}from"lit";import{property as a}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{hasUnslottedChild as _,placeSlotted as w}from"../internal/slots.js";import{defaultProviderLabel as y}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";var g="data-skdx-sign-up-page-generated",L="data-skdx-sign-up-page-content",x="confirmPassword",$=0,t=class extends f{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-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form");if(!i)return;e.preventDefault();let s=m(i,"password"),o=k(i,x);if(o&&o.value!==s){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:m(i,"email"),password:s};this.nameLabel!==void 0&&(p.name=m(i,"name")),this.hasSlotted("terms")&&(p.termsAccepted=E(i)),c(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}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return _(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){w(this,g,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){c(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],i=this.getProviderLabel??y;return l`
+var k=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var r=(n,d,e,t)=>{for(var i=t>1?void 0:t?b(d,e):d,o=n.length-1,p;o>=0;o--)(p=n[o])&&(i=(t?p(d,e,i):p(i))||i);return t&&i&&k(d,e,i),i};import{html as l,LitElement as f,nothing as u}from"lit";import{property as a,state as v}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as c}from"../internal/events.js";import{hasUnslottedChild as y,placeSlotted as L}from"../internal/slots.js";import{defaultProviderLabel as _}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";var g="data-skdx-sign-up-page-generated",w="data-skdx-sign-up-page-content",h="confirmPassword",$=0,s=class extends f{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-${++$}`;this.handleSubmit=e=>{let t=e.target?.closest("skdx-form");if(!t)return;e.preventDefault();let i=m(t,"password"),o=x(t,h);if(o&&o.value!==i){o.setCustomValidity(this.passwordMismatchMessage),o.reportValidity();return}let p={providerId:"credentials",email:m(t,"email"),password:i};this.nameLabel!==void 0&&(p.name=m(t,"name")),this.hasSlotted("terms")&&(p.termsAccepted=M(t)),c(this,"sign-up",p)};this.termsError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="terms"&&(this.termsError=t.validationMessage)};this.clearTermsError=()=>{this.termsError=""};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),this.addEventListener("invalid",this.reportInvalid,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),this.removeEventListener("invalid",this.reportInvalid,!0),super.disconnectedCallback()}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}region(e){return this.querySelector(`.skdx-sign-up-page__${e}`)}get termsLabel(){return this.querySelector(".skdx-sign-up-page__terms skdx-field-label > span")}get contentRegion(){return this.querySelector(`[${w}]`)}get hasContent(){return y(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){L(this,g,{terms:this.termsLabel,footer:this.region("footer")},this.contentRegion),this.querySelector(".skdx-sign-up-page__terms skdx-checkbox")?.requestUpdate()}signUpWithProvider(e){c(this,"sign-up",{providerId:e})}render(){let e=this.providers??[],t=this.getProviderLabel??_;return l`
       <div
         class="skdx-sign-up-page__panel"
         data-skdx-sign-up-page-generated
@@ -11,16 +11,17 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
         >
         ${this.error?l`<skdx-alert
                 class="skdx-sign-up-page__error"
+                .role=${"alert"}
                 .status=${"danger"}
                 >${this.error}</skdx-alert
               >`:u}
         ${e.length?l`<div class="skdx-sign-up-page__providers">
-                  ${e.map(s=>l`<skdx-button
+                  ${e.map(i=>l`<skdx-button
                         class="skdx-sign-up-page__provider"
                         type="button"
-                        data-provider=${s.id}
-                        @click=${()=>this.signUpWithProvider(s.id)}
-                        >${i(s)}</skdx-button
+                        data-provider=${i.id}
+                        @click=${()=>this.signUpWithProvider(i.id)}
+                        >${t(i)}</skdx-button
                       >`)}
                 </div>
                 <skdx-divider class="skdx-sign-up-page__divider"></skdx-divider>`:u}
@@ -73,7 +74,7 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
                     required
                   >
                     <skdx-password-input
-                      name=${x}
+                      name=${h}
                       required
                       @value-change=${this.clearMismatch}
                     >
@@ -84,10 +85,14 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
                     </skdx-password-input>
                   </skdx-field>`}
             ${this.hasContent?l`<div data-skdx-sign-up-page-content></div>`:u}
-            ${this.hasSlotted("terms")?l`<skdx-field class="skdx-sign-up-page__terms">
+            ${this.hasSlotted("terms")?l`<skdx-field
+                    class="skdx-sign-up-page__terms"
+                    .errors=${this.termsError}
+                  >
                     <skdx-checkbox
                       name="terms"
                       required
+                      @checked-change=${this.clearTermsError}
                     ></skdx-checkbox>
                     <skdx-field-label><span></span></skdx-field-label>
                   </skdx-field>`:u}
@@ -102,4 +107,4 @@ var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var r=(n,d,e,i
         </skdx-form>
         ${this.hasSlotted("footer")?l`<div class="skdx-sign-up-page__footer"></div>`:u}
       </div>
-    `}};r([a({type:String})],t.prototype,"title",2),r([a({attribute:!1})],t.prototype,"providers",2),r([a({type:String})],t.prototype,"error",2),r([a({type:Boolean})],t.prototype,"pending",2),r([a({type:String,attribute:"name-label"})],t.prototype,"nameLabel",2),r([a({type:String,attribute:"email-label"})],t.prototype,"emailLabel",2),r([a({type:String,attribute:"password-label"})],t.prototype,"passwordLabel",2),r([a({type:String,attribute:"confirm-password-label"})],t.prototype,"confirmPasswordLabel",2),r([a({type:String,attribute:"password-mismatch-message"})],t.prototype,"passwordMismatchMessage",2),r([a({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),r([a({attribute:!1})],t.prototype,"getProviderLabel",2),t=r([v("skdx-sign-up-page","sign-up-page","root")],t);function k(n,d){return n.querySelector(`[name="${d}"]`)}function m(n,d){return k(n,d)?.value??""}function E(n){return n.querySelector('[name="terms"]')?.checked===!0}export{t as SkdxSignUpPage};
+    `}};r([a({type:String,attribute:"heading"})],s.prototype,"title",2),r([a({attribute:!1})],s.prototype,"providers",2),r([a({type:String})],s.prototype,"error",2),r([a({type:Boolean})],s.prototype,"pending",2),r([a({type:String,attribute:"name-label"})],s.prototype,"nameLabel",2),r([a({type:String,attribute:"email-label"})],s.prototype,"emailLabel",2),r([a({type:String,attribute:"password-label"})],s.prototype,"passwordLabel",2),r([a({type:String,attribute:"confirm-password-label"})],s.prototype,"confirmPasswordLabel",2),r([a({type:String,attribute:"password-mismatch-message"})],s.prototype,"passwordMismatchMessage",2),r([a({type:String,attribute:"submit-label"})],s.prototype,"submitLabel",2),r([a({attribute:!1})],s.prototype,"getProviderLabel",2),r([v()],s.prototype,"termsError",2),s=r([E("skdx-sign-up-page","sign-up-page","root")],s);function x(n,d){return n.querySelector(`[name="${d}"]`)}function m(n,d){return x(n,d)?.value??""}function M(n){return n.querySelector('[name="terms"]')?.checked===!0}export{s as SkdxSignUpPage};

package/dist/usage-card/UsageCard.cjs

@@ -1,4 +1,4 @@
-"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)m(r,e,{get:t[e],enumerable:!0})},_=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!x.call(r,i)&&i!==e&&m(r,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return r};var k=r=>_(m({},"__esModule",{value:!0}),r),d=(r,t,e,n)=>{for(var i=n>1?void 0:n?c(t,e):t,u=r.length-1,o;u>=0;u--)(o=r[u])&&(i=(n?o(t,e,i):o(i))||i);return n&&i&&m(t,e,i),i};var T={};$(T,{SkdxUsageCard:()=>a});module.exports=k(T);var s=require("lit"),l=require("lit/decorators.js"),h=require("../internal/define.cjs"),f=require("../internal/slots.cjs"),g=require("./usage.cjs"),R=require("@skdx/web-components/progress"),A=require("@skdx/web-components/text");var y="data-skdx-usage-card-generated",L=0;function p(r,t,e){e===void 0?r.removeAttribute(t):r.setAttribute(t,e)}var a=class extends s.LitElement{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++L}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=(0,g.usageMeter)(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){p(this,"data-state",this.reading.overLimit?"over-limit":void 0),p(this,"data-status",this.status),(0,f.placeSlotted)(this,y,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:n}=this.reading,i=this.format,u=this.unit?` ${this.unit}`:"";return s.html`
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var $=(r,t)=>{for(var e in t)m(r,e,{get:t[e],enumerable:!0})},_=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!x.call(r,i)&&i!==e&&m(r,i,{get:()=>t[i],enumerable:!(n=c(t,i))||n.enumerable});return r};var k=r=>_(m({},"__esModule",{value:!0}),r),d=(r,t,e,n)=>{for(var i=n>1?void 0:n?c(t,e):t,u=r.length-1,o;u>=0;u--)(o=r[u])&&(i=(n?o(t,e,i):o(i))||i);return n&&i&&m(t,e,i),i};var T={};$(T,{SkdxUsageCard:()=>a});module.exports=k(T);var s=require("lit"),l=require("lit/decorators.js"),f=require("../internal/define.cjs"),h=require("../internal/slots.cjs"),g=require("./usage.cjs"),A=require("@skdx/web-components/progress"),H=require("@skdx/web-components/text");var y="data-skdx-usage-card-generated",L=0;function p(r,t,e){e===void 0?r.removeAttribute(t):r.setAttribute(t,e)}var a=class extends s.LitElement{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++L}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group"),this.setAttribute("aria-labelledby",this.labelId),queueMicrotask(()=>this.requestUpdate())}region(e){return this.querySelector(`.skdx-usage-card__${e}`)}hasSlotted(e){return this.querySelector(`[slot="${e}"], [data-skdx-slot="${e}"]`)!==null}get format(){return this.formatValue??String}get reading(){if(this.limit===null)return{limitText:this.unlimitedLabel,overLimit:!1,range:null};if(this.limit===void 0)return{limitText:void 0,overLimit:!1,range:null};let e=(0,g.usageMeter)(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){p(this,"data-state",this.reading.overLimit?"over-limit":void 0),p(this,"data-status",this.status),(0,h.placeSlotted)(this,y,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:n}=this.reading,i=this.format,u=(0,g.normalizeUsage)(this.used??0),o=this.unit?` ${this.unit}`:"";return s.html`
       <div
         class="skdx-usage-card__header"
         data-skdx-usage-card-generated
@@ -14,7 +14,7 @@
         class="skdx-usage-card__value"
         data-skdx-usage-card-generated
       >
-        <span class="skdx-usage-card__used">${i((0,g.normalizeUsage)(this.used??0))}</span>
+        <span class="skdx-usage-card__used">${i(u)}</span>
         ${e===void 0?s.nothing:s.html`<span class="skdx-usage-card__limit">${e}</span>`}
         ${this.unit?s.html`<span class="skdx-usage-card__unit">${this.unit}</span>`:s.nothing}
       </div>
@@ -25,7 +25,7 @@
               .max=${n.max}
               .value=${n.value}
               aria-labelledby=${this.labelId}
-              .getValueLabel=${(o,E,b)=>`${i(o)} / ${i(b)}${u}`}
+              .getValueLabel=${(E,M,b)=>`${i(u)} / ${i(b)}${o}`}
               data-skdx-usage-card-generated
             ></skdx-progress>`:s.nothing}
       ${this.description?s.html`<skdx-text
@@ -39,4 +39,4 @@
               class="skdx-usage-card__footer"
               data-skdx-usage-card-generated
             ></div>`:s.nothing}
-    `}};d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:Number})],a.prototype,"used",2),d([(0,l.property)({type:Number})],a.prototype,"limit",2),d([(0,l.property)({type:String})],a.prototype,"unit",2),d([(0,l.property)({attribute:!1})],a.prototype,"formatValue",2),d([(0,l.property)({type:String,attribute:"unlimited-label"})],a.prototype,"unlimitedLabel",2),d([(0,l.property)({type:String})],a.prototype,"description",2),d([(0,l.property)({type:String})],a.prototype,"status",2),a=d([(0,h.customElement)("skdx-usage-card","usage-card","root")],a);0&&(module.exports={SkdxUsageCard});
+    `}};d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:Number})],a.prototype,"used",2),d([(0,l.property)({type:Number})],a.prototype,"limit",2),d([(0,l.property)({type:String})],a.prototype,"unit",2),d([(0,l.property)({attribute:!1})],a.prototype,"formatValue",2),d([(0,l.property)({type:String,attribute:"unlimited-label"})],a.prototype,"unlimitedLabel",2),d([(0,l.property)({type:String})],a.prototype,"description",2),d([(0,l.property)({type:String})],a.prototype,"status",2),a=d([(0,f.customElement)("skdx-usage-card","usage-card","root")],a);0&&(module.exports={SkdxUsageCard});