@skdx/web-components-blocks 0.38.0 → 0.40.0

package/dist/usage-card/UsageCard.js

@@ -1,4 +1,4 @@
-var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a)=>{for(var i=a>1?void 0:a?h(r,e):r,o=l.length-1,m;o>=0;o--)(m=l[o])&&(i=(a?m(r,e,i):m(i))||i);return a&&i&&p(r,e,i),i};import{html as d,LitElement as f,nothing as u}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import{normalizeUsage as x,usageMeter as $}from"./usage.js";import"@skdx/web-components/progress";import"@skdx/web-components/text";var _="data-skdx-usage-card-generated",k=0;function g(l,r,e){e===void 0?l.removeAttribute(r):l.setAttribute(r,e)}var t=class extends f{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++k}`}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=$(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){g(this,"data-state",this.reading.overLimit?"over-limit":void 0),g(this,"data-status",this.status),v(this,_,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:a}=this.reading,i=this.format,o=this.unit?` ${this.unit}`:"";return d`
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(l,r,e,a)=>{for(var i=a>1?void 0:a?f(r,e):r,u=l.length-1,m;u>=0;u--)(m=l[u])&&(i=(a?m(r,e,i):m(i))||i);return a&&i&&p(r,e,i),i};import{html as d,LitElement as h,nothing as o}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{placeSlotted as v}from"../internal/slots.js";import{normalizeUsage as x,usageMeter as $}from"./usage.js";import"@skdx/web-components/progress";import"@skdx/web-components/text";var _="data-skdx-usage-card-generated",k=0;function g(l,r,e){e===void 0?l.removeAttribute(r):l.setAttribute(r,e)}var t=class extends h{constructor(){super(...arguments);this.unlimitedLabel="Unlimited";this.labelId=`skdx-usage-card-label-${++k}`}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=$(this.used??0,this.limit);return{limitText:`/ ${this.format(e.limit)}`,overLimit:e.overLimit,range:e.range}}updated(){g(this,"data-state",this.reading.overLimit?"over-limit":void 0),g(this,"data-status",this.status),v(this,_,{actions:this.region("actions"),footer:this.region("footer")},null)}render(){let{limitText:e,range:a}=this.reading,i=this.format,u=x(this.used??0),m=this.unit?` ${this.unit}`:"";return d`
       <div
         class="skdx-usage-card__header"
         data-skdx-usage-card-generated
@@ -8,15 +8,15 @@ var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a
           id=${this.labelId}
           >${this.label??""}</span
         >
-        ${this.hasSlotted("actions")?d`<div class="skdx-usage-card__actions"></div>`:u}
+        ${this.hasSlotted("actions")?d`<div class="skdx-usage-card__actions"></div>`:o}
       </div>
       <div
         class="skdx-usage-card__value"
         data-skdx-usage-card-generated
       >
-        <span class="skdx-usage-card__used">${i(x(this.used??0))}</span>
-        ${e===void 0?u:d`<span class="skdx-usage-card__limit">${e}</span>`}
-        ${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:u}
+        <span class="skdx-usage-card__used">${i(u)}</span>
+        ${e===void 0?o:d`<span class="skdx-usage-card__limit">${e}</span>`}
+        ${this.unit?d`<span class="skdx-usage-card__unit">${this.unit}</span>`:o}
       </div>
       ${a?d`<skdx-progress
               class="skdx-usage-card__progress"
@@ -25,18 +25,18 @@ var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,r,e,a
               .max=${a.max}
               .value=${a.value}
               aria-labelledby=${this.labelId}
-              .getValueLabel=${(m,y,c)=>`${i(m)} / ${i(c)}${o}`}
+              .getValueLabel=${(y,L,c)=>`${i(u)} / ${i(c)}${m}`}
               data-skdx-usage-card-generated
-            ></skdx-progress>`:u}
+            ></skdx-progress>`:o}
       ${this.description?d`<skdx-text
               class="skdx-usage-card__description"
               as="p"
               .tone=${"muted"}
               data-skdx-usage-card-generated
               >${this.description}</skdx-text
-            >`:u}
+            >`:o}
       ${this.hasSlotted("footer")?d`<div
               class="skdx-usage-card__footer"
               data-skdx-usage-card-generated
-            ></div>`:u}
+            ></div>`:o}
     `}};s([n({type:String})],t.prototype,"label",2),s([n({type:Number})],t.prototype,"used",2),s([n({type:Number})],t.prototype,"limit",2),s([n({type:String})],t.prototype,"unit",2),s([n({attribute:!1})],t.prototype,"formatValue",2),s([n({type:String,attribute:"unlimited-label"})],t.prototype,"unlimitedLabel",2),s([n({type:String})],t.prototype,"description",2),s([n({type:String})],t.prototype,"status",2),t=s([b("skdx-usage-card","usage-card","root")],t);export{t as SkdxUsageCard};

package/dist/verification-page/VerificationPage.cjs

@@ -1,4 +1,4 @@
-"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(d,s)=>{for(var e in s)l(d,e,{get:s[e],enumerable:!0})},L=(d,s,e,r)=>{if(s&&typeof s=="object"||typeof s=="function")for(let t of b(s))!E.call(d,t)&&t!==e&&l(d,t,{get:()=>s[t],enumerable:!(r=h(s,t))||r.enumerable});return d};var k=d=>L(l({},"__esModule",{value:!0}),d),a=(d,s,e,r)=>{for(var t=r>1?void 0:r?h(s,e):s,u=d.length-1,c;u>=0;u--)(c=d[u])&&(t=(r?c(s,e,t):c(t))||t);return r&&t&&l(s,e,t),t};var _={};f(_,{SkdxVerificationPage:()=>i});module.exports=k(_);var n=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),p=require("../internal/events.cjs"),v=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),C=require("@skdx/web-components/field"),O=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),D=require("@skdx/web-components/pin-input"),S=require("@skdx/web-components/text");var g="data-skdx-verification-page-generated",x="data-skdx-verification-page-content",y=["resend"],$=0,i=class extends n.LitElement{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++$}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),(0,p.emit)(this,"verify",{code:this.currentValue}))};this.resend=()=>{(0,p.emit)(this,"resend")}}createRenderRoot(){return this}addEventListener(e,r,t){super.addEventListener(e,r,t),this.countListener(e,1)}removeEventListener(e,r,t){super.removeEventListener(e,r,t),this.countListener(e,-1)}countListener(e,r){y.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+r)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}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-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${x}]`)}get hasContent(){return(0,v.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),(0,v.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}setValue(e,r){let t=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,p.emit)(this,"value-change",{value:e,previousValue:t,reason:r})}render(){return n.html`
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(d,s)=>{for(var e in s)l(d,e,{get:s[e],enumerable:!0})},L=(d,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of b(s))!E.call(d,i)&&i!==e&&l(d,i,{get:()=>s[i],enumerable:!(t=h(s,i))||t.enumerable});return d};var k=d=>L(l({},"__esModule",{value:!0}),d),a=(d,s,e,t)=>{for(var i=t>1?void 0:t?h(s,e):s,u=d.length-1,c;u>=0;u--)(c=d[u])&&(i=(t?c(s,e,i):c(i))||i);return t&&i&&l(s,e,i),i};var _={};f(_,{SkdxVerificationPage:()=>r});module.exports=k(_);var n=require("lit"),o=require("lit/decorators.js"),m=require("../internal/define.cjs"),v=require("../internal/events.cjs"),p=require("../internal/slots.cjs"),T=require("@skdx/web-components/alert"),H=require("@skdx/web-components/button"),C=require("@skdx/web-components/field"),O=require("@skdx/web-components/form"),V=require("@skdx/web-components/heading"),D=require("@skdx/web-components/pin-input"),S=require("@skdx/web-components/text");var g="data-skdx-verification-page-generated",x="data-skdx-verification-page-content",y=["resend"],$=0,r=class extends n.LitElement{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++$}`;this.gated=new Map;this.codeError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="code"&&(this.codeError=t.validationMessage)};this.handleValueChange=e=>{e.stopPropagation(),this.codeError="",this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),(0,v.emit)(this,"verify",{code:this.currentValue}))};this.resend=()=>{(0,v.emit)(this,"resend")}}createRenderRoot(){return this}addEventListener(e,t,i){super.addEventListener(e,t,i),this.countListener(e,1)}removeEventListener(e,t,i){super.removeEventListener(e,t,i),this.countListener(e,-1)}countListener(e,t){y.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+t)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}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-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${x}]`)}get hasContent(){return(0,p.hasUnslottedChild)(this,g)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),(0,p.placeSlotted)(this,g,{footer:this.region("footer")},this.contentRegion)}setValue(e,t){let i=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),(0,v.emit)(this,"value-change",{value:e,previousValue:i,reason:t})}render(){return n.html`
       <div
         class="skdx-verification-page__panel"
         data-skdx-verification-page-generated
@@ -11,6 +11,7 @@
         >
         ${this.error?n.html`<skdx-alert
                 class="skdx-verification-page__error"
+                .role=${"alert"}
                 .status=${"danger"}
                 >${this.error}</skdx-alert
               >`:n.nothing}
@@ -22,7 +23,10 @@
               >`:n.nothing}
         <skdx-form class="skdx-verification-page__form">
           <form>
-            <skdx-fieldset class="skdx-verification-page__field">
+            <skdx-fieldset
+              class="skdx-verification-page__field"
+              .errors=${this.codeError}
+            >
               <skdx-field-label>${this.codeLabel}</skdx-field-label>
               <skdx-pin-input
                 class="skdx-verification-page__code"
@@ -33,6 +37,7 @@
                 .value=${this.currentValue}
                 @value-change=${this.handleValueChange}
               ></skdx-pin-input>
+              <skdx-field-error></skdx-field-error>
             </skdx-fieldset>
             ${this.hasContent?n.html`<div data-skdx-verification-page-content></div>`:n.nothing}
             <skdx-button
@@ -58,4 +63,4 @@
               </div>`:n.nothing}
         ${this.hasSlotted("footer")?n.html`<div class="skdx-verification-page__footer"></div>`:n.nothing}
       </div>
-    `}};a([(0,o.property)({type:String})],i.prototype,"title",2),a([(0,o.property)({type:String})],i.prototype,"description",2),a([(0,o.property)({type:String})],i.prototype,"error",2),a([(0,o.property)({type:Boolean})],i.prototype,"pending",2),a([(0,o.property)({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),a([(0,o.property)({type:Number})],i.prototype,"length",2),a([(0,o.property)({type:String})],i.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),a([(0,o.property)({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),a([(0,o.property)({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),a([(0,o.property)({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),a([(0,o.property)({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),i=a([(0,m.customElement)("skdx-verification-page","verification-page","root")],i);0&&(module.exports={SkdxVerificationPage});
+    `}};a([(0,o.property)({type:String,attribute:"heading"})],r.prototype,"title",2),a([(0,o.property)({type:String})],r.prototype,"description",2),a([(0,o.property)({type:String})],r.prototype,"error",2),a([(0,o.property)({type:Boolean})],r.prototype,"pending",2),a([(0,o.property)({type:String,attribute:"code-label"})],r.prototype,"codeLabel",2),a([(0,o.property)({type:Number})],r.prototype,"length",2),a([(0,o.property)({type:String})],r.prototype,"value",2),a([(0,o.property)({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([(0,o.property)({type:String,attribute:"submit-label"})],r.prototype,"submitLabel",2),a([(0,o.property)({type:String,attribute:"resend-label"})],r.prototype,"resendLabel",2),a([(0,o.property)({type:Boolean,attribute:"resend-disabled"})],r.prototype,"resendDisabled",2),a([(0,o.property)({type:String,attribute:"resend-hint"})],r.prototype,"resendHint",2),a([(0,o.state)()],r.prototype,"codeError",2),r=a([(0,m.customElement)("skdx-verification-page","verification-page","root")],r);0&&(module.exports={SkdxVerificationPage});

package/dist/verification-page/VerificationPage.d.cts

@@ -52,7 +52,7 @@ export declare class SkdxVerificationPage 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 'Enter your verification code'
      */
     title: string;
@@ -137,6 +137,8 @@ export declare class SkdxVerificationPage extends LitElement {
     private get hasContent();
     protected updated(): void;
     private setValue;
+    private codeError;
+    private readonly reportInvalid;
     private readonly handleValueChange;
     private readonly handleSubmit;
     private readonly resend;

package/dist/verification-page/VerificationPage.d.ts

@@ -52,7 +52,7 @@ export declare class SkdxVerificationPage 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 'Enter your verification code'
      */
     title: string;
@@ -137,6 +137,8 @@ export declare class SkdxVerificationPage extends LitElement {
     private get hasContent();
     protected updated(): void;
     private setValue;
+    private codeError;
+    private readonly reportInvalid;
     private readonly handleValueChange;
     private readonly handleSubmit;
     private readonly resend;

package/dist/verification-page/VerificationPage.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n)=>{for(var r=n>1?void 0:n?g(d,e):d,p=l.length-1,v;p>=0;p--)(v=l[p])&&(r=(n?v(d,e,r):v(r))||r);return n&&r&&h(d,e,r),r};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as E,placeSlotted as f}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/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",L="data-skdx-verification-page-content",k=["resend"],x=0,t=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++x}`;this.gated=new Map;this.handleValueChange=e=>{e.stopPropagation(),this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,n,r){super.addEventListener(e,n,r),this.countListener(e,1)}removeEventListener(e,n,r){super.removeEventListener(e,n,r),this.countListener(e,-1)}countListener(e,n){k.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+n)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}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-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${L}]`)}get hasContent(){return E(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),f(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,n){let r=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:r,reason:n})}render(){return a`
+var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(l,d,e,t)=>{for(var n=t>1?void 0:t?g(d,e):d,v=l.length-1,p;v>=0;v--)(p=l[v])&&(n=(t?p(d,e,n):p(n))||n);return t&&n&&h(d,e,n),n};import{html as a,LitElement as m,nothing as o}from"lit";import{property as s,state as b}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{hasUnslottedChild as f,placeSlotted as L}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/pin-input";import"@skdx/web-components/text";var c="data-skdx-verification-page-generated",k="data-skdx-verification-page-content",x=["resend"],y=0,i=class extends m{constructor(){super(...arguments);this.title="Enter your verification code";this.pending=!1;this.codeLabel="Verification code";this.length=6;this.defaultValue="";this.submitLabel="Verify";this.resendLabel="Resend code";this.resendDisabled=!1;this.titleId=`skdx-verification-page-title-${++y}`;this.gated=new Map;this.codeError="";this.reportInvalid=e=>{let t=e.target;t instanceof HTMLInputElement&&t.name==="code"&&(this.codeError=t.validationMessage)};this.handleValueChange=e=>{e.stopPropagation(),this.codeError="",this.setValue(e.detail,"keyboard")};this.handleSubmit=e=>{e.target?.closest("skdx-form")&&(e.preventDefault(),u(this,"verify",{code:this.currentValue}))};this.resend=()=>{u(this,"resend")}}createRenderRoot(){return this}addEventListener(e,t,n){super.addEventListener(e,t,n),this.countListener(e,1)}removeEventListener(e,t,n){super.removeEventListener(e,t,n),this.countListener(e,-1)}countListener(e,t){x.includes(e)&&(this.gated.set(e,Math.max(0,(this.gated.get(e)??0)+t)),this.requestUpdate())}handles(e){return(this.gated.get(e)??0)>0}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}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-verification-page__${e}`)}get contentRegion(){return this.querySelector(`[${k}]`)}get hasContent(){return f(this,c)||(this.contentRegion?.hasChildNodes()??!1)}updated(){let e=this.querySelector(".skdx-verification-page__code");e&&(e.value=this.currentValue),L(this,c,{footer:this.region("footer")},this.contentRegion)}setValue(e,t){let n=this.currentValue;this.uncontrolledValue=e,this.requestUpdate(),u(this,"value-change",{value:e,previousValue:n,reason:t})}render(){return a`
       <div
         class="skdx-verification-page__panel"
         data-skdx-verification-page-generated
@@ -11,6 +11,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
         >
         ${this.error?a`<skdx-alert
                 class="skdx-verification-page__error"
+                .role=${"alert"}
                 .status=${"danger"}
                 >${this.error}</skdx-alert
               >`:o}
@@ -22,7 +23,10 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
               >`:o}
         <skdx-form class="skdx-verification-page__form">
           <form>
-            <skdx-fieldset class="skdx-verification-page__field">
+            <skdx-fieldset
+              class="skdx-verification-page__field"
+              .errors=${this.codeError}
+            >
               <skdx-field-label>${this.codeLabel}</skdx-field-label>
               <skdx-pin-input
                 class="skdx-verification-page__code"
@@ -33,6 +37,7 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
                 .value=${this.currentValue}
                 @value-change=${this.handleValueChange}
               ></skdx-pin-input>
+              <skdx-field-error></skdx-field-error>
             </skdx-fieldset>
             ${this.hasContent?a`<div data-skdx-verification-page-content></div>`:o}
             <skdx-button
@@ -58,4 +63,4 @@ var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var i=(l,d,e,n
               </div>`:o}
         ${this.hasSlotted("footer")?a`<div class="skdx-verification-page__footer"></div>`:o}
       </div>
-    `}};i([s({type:String})],t.prototype,"title",2),i([s({type:String})],t.prototype,"description",2),i([s({type:String})],t.prototype,"error",2),i([s({type:Boolean})],t.prototype,"pending",2),i([s({type:String,attribute:"code-label"})],t.prototype,"codeLabel",2),i([s({type:Number})],t.prototype,"length",2),i([s({type:String})],t.prototype,"value",2),i([s({type:String,attribute:"default-value"})],t.prototype,"defaultValue",2),i([s({type:String,attribute:"submit-label"})],t.prototype,"submitLabel",2),i([s({type:String,attribute:"resend-label"})],t.prototype,"resendLabel",2),i([s({type:Boolean,attribute:"resend-disabled"})],t.prototype,"resendDisabled",2),i([s({type:String,attribute:"resend-hint"})],t.prototype,"resendHint",2),t=i([b("skdx-verification-page","verification-page","root")],t);export{t as SkdxVerificationPage};
+    `}};r([s({type:String,attribute:"heading"})],i.prototype,"title",2),r([s({type:String})],i.prototype,"description",2),r([s({type:String})],i.prototype,"error",2),r([s({type:Boolean})],i.prototype,"pending",2),r([s({type:String,attribute:"code-label"})],i.prototype,"codeLabel",2),r([s({type:Number})],i.prototype,"length",2),r([s({type:String})],i.prototype,"value",2),r([s({type:String,attribute:"default-value"})],i.prototype,"defaultValue",2),r([s({type:String,attribute:"submit-label"})],i.prototype,"submitLabel",2),r([s({type:String,attribute:"resend-label"})],i.prototype,"resendLabel",2),r([s({type:Boolean,attribute:"resend-disabled"})],i.prototype,"resendDisabled",2),r([s({type:String,attribute:"resend-hint"})],i.prototype,"resendHint",2),r([b()],i.prototype,"codeError",2),i=r([E("skdx-verification-page","verification-page","root")],i);export{i as SkdxVerificationPage};

package/dist/workspace-switcher/WorkspaceSwitcher.cjs

@@ -1,33 +1,33 @@
-"use strict";var u=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)u(i,e,{get:n[e],enumerable:!0})},x=(i,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of b(n))!f.call(i,s)&&s!==e&&u(i,s,{get:()=>n[s],enumerable:!(t=g(n,s))||t.enumerable});return i};var y=i=>x(u({},"__esModule",{value:!0}),i),o=(i,n,e,t)=>{for(var s=t>1?void 0:t?g(n,e):n,c=i.length-1,d;c>=0;c--)(d=i[c])&&(s=(t?d(n,e,s):d(s))||s);return t&&s&&u(n,e,s),s};var E={};w(E,{SkdxWorkspaceSwitcher:()=>a});module.exports=y(E);var r=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/events.cjs"),k=require("../internal/slots.cjs"),T=require("@skdx/web-components/primitives/command"),q=require("@skdx/web-components/primitives/popover"),M=require("@skdx/web-components/visually-hidden");var $="data-skdx-workspace-switcher-generated",_={fromAttribute:i=>i!=="false"};function m(i){i.stopPropagation()}function L(i,n){let e=n.toLowerCase(),t=new Map([[void 0,[]]]);for(let d of i){let p=t.get(d.group);p?p.push(d):t.set(d.group,[d])}let s=d=>e===""||d.id.toLowerCase().includes(e)||d.label.toLowerCase().includes(e)||(d.description?.toLowerCase().includes(e)??!1),c=[];for(let[d,p]of t)p.some(s)&&c.push({heading:d,items:p});return c}var a=class extends r.LitElement{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),(0,h.emit)(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),(0,h.emit)(this,"value-change",{value:t,previousValue:s,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let s=this.querySelector("skdx-command-input");s?.updateComplete.then(()=>s.querySelector("input")?.setAttribute("aria-label",this.searchLabel)),(0,k.placeSlotted)(this,$,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return r.html`${this.renderLeading&&e?r.html`<span
+"use strict";var h=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var w=(i,n)=>{for(var e in n)h(i,e,{get:n[e],enumerable:!0})},x=(i,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of b(n))!f.call(i,r)&&r!==e&&h(i,r,{get:()=>n[r],enumerable:!(t=g(n,r))||t.enumerable});return i};var y=i=>x(h({},"__esModule",{value:!0}),i),d=(i,n,e,t)=>{for(var r=t>1?void 0:t?g(n,e):n,p=i.length-1,o;p>=0;p--)(o=i[p])&&(r=(t?o(n,e,r):o(r))||r);return t&&r&&h(n,e,r),r};var E={};w(E,{SkdxWorkspaceSwitcher:()=>a});module.exports=y(E);var s=require("lit"),l=require("lit/decorators.js"),v=require("../internal/define.cjs"),u=require("../internal/events.cjs"),k=require("../internal/slots.cjs"),O=require("@skdx/web-components/primitives/command"),T=require("@skdx/web-components/primitives/popover"),q=require("@skdx/web-components/visually-hidden");var $="data-skdx-workspace-switcher-generated",_={fromAttribute:i=>i!=="false"};function m(i){i.stopPropagation()}function L(i,n){let e=n.toLowerCase(),t=new Map([[void 0,[]]]);for(let o of i){let c=t.get(o.group);c?c.push(o):t.set(o.group,[o])}let r=o=>e===""||o.id.toLowerCase().includes(e)||o.label.toLowerCase().includes(e)||(o.description?.toLowerCase().includes(e)??!1),p=[];for(let[o,c]of t)c.some(r)&&p.push({heading:o,items:c});return p}var a=class extends s.LitElement{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),(0,u.emit)(this,"open-change",e)}select(e,t){e.stopPropagation();let r=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),(0,u.emit)(this,"value-change",{value:t,previousValue:r,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let r=this.wasOpen!==void 0&&this.isOpen&&!this.wasOpen;this.wasOpen=this.isOpen;let p=this.querySelector("skdx-command-input");p?.updateComplete.then(()=>{let o=p.querySelector("input");o?.setAttribute("aria-label",this.searchLabel),r&&o?.focus()}),(0,k.placeSlotted)(this,$,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return s.html`${this.renderLeading&&e?s.html`<span
               aria-hidden="true"
               class="skdx-workspace-switcher__leading"
               >${this.renderLeading(e)}</span
-            >`:r.nothing}
+            >`:s.nothing}
       <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
-      ${e?.description?r.html`<span class="skdx-workspace-switcher__description">${e.description}</span>`:r.nothing}`}listedItem(e){let t=e.id===this.currentValue;return r.html`<skdx-command-item
+      ${e?.description?s.html`<span class="skdx-workspace-switcher__description">${e.description}</span>`:s.nothing}`}listedItem(e){let t=e.id===this.currentValue;return s.html`<skdx-command-item
       class="skdx-workspace-switcher__item"
       .value=${e.id}
       .keywords=${e.description?[e.label,e.description]:[e.label]}
       ?disabled=${e.disabled}
-      data-selected=${t?"":r.nothing}
-      @select=${s=>this.select(s,e.id)}
+      data-selected=${t?"":s.nothing}
+      @select=${r=>this.select(r,e.id)}
     >
-      ${this.renderLeading?r.html`<span
+      ${this.renderLeading?s.html`<span
               aria-hidden="true"
               class="skdx-workspace-switcher__item-leading"
               >${this.renderLeading(e)}</span
-            >`:r.nothing}
+            >`:s.nothing}
       <span class="skdx-workspace-switcher__item-label">${e.label}</span>
-      ${e.description?r.html`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:r.nothing}
-      ${t?r.html`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:r.nothing}
-    </skdx-command-item>`}render(){let e=L(this.items??[],this.search);return r.html`
+      ${e.description?s.html`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:s.nothing}
+      ${t?s.html`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:s.nothing}
+    </skdx-command-item>`}render(){let e=L(this.items??[],this.search);return s.html`
       <skdx-popover-root
         data-skdx-workspace-switcher-generated
         modal="none"
         @open-change=${this.handleOpenChange}
       >
         <skdx-popover-trigger
-          >${this.hasTrigger?r.nothing:this.derivedTrigger()}</skdx-popover-trigger
+          >${this.hasTrigger?s.nothing:this.derivedTrigger()}</skdx-popover-trigger
         >
         <skdx-popover-content
           class="skdx-workspace-switcher__content"
@@ -43,17 +43,17 @@
           >
             <skdx-command-input
               class="skdx-workspace-switcher__search"
-              placeholder=${this.searchPlaceholder??r.nothing}
+              placeholder=${this.searchPlaceholder??s.nothing}
             ></skdx-command-input>
             <skdx-command-list
               class="skdx-workspace-switcher__list"
               aria-label=${this.label??this.placeholder}
             >
-              ${e.map(t=>r.html`<skdx-command-group
+              ${e.map(t=>s.html`<skdx-command-group
                     class="skdx-workspace-switcher__group"
-                    heading=${t.heading??r.nothing}
+                    heading=${t.heading??s.nothing}
                   >
-                    ${t.items.map(s=>this.listedItem(s))}
+                    ${t.items.map(r=>this.listedItem(r))}
                   </skdx-command-group>`)}
             </skdx-command-list>
             <skdx-command-loading class="skdx-workspace-switcher__loading"
@@ -63,7 +63,7 @@
               >${this.emptyMessage}</skdx-command-empty
             >
           </skdx-command>
-          ${this.hasActions?r.html`<div class="skdx-workspace-switcher__footer"></div>`:r.nothing}
+          ${this.hasActions?s.html`<div class="skdx-workspace-switcher__footer"></div>`:s.nothing}
         </skdx-popover-content>
       </skdx-popover-root>
-    `}};o([(0,l.property)({attribute:!1})],a.prototype,"items",2),o([(0,l.property)({type:String})],a.prototype,"value",2),o([(0,l.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),o([(0,l.property)({type:String})],a.prototype,"placeholder",2),o([(0,l.property)({type:String})],a.prototype,"label",2),o([(0,l.property)({type:String,attribute:"search-label"})],a.prototype,"searchLabel",2),o([(0,l.property)({type:String,attribute:"search-placeholder"})],a.prototype,"searchPlaceholder",2),o([(0,l.property)({type:String,attribute:"empty-message"})],a.prototype,"emptyMessage",2),o([(0,l.property)({type:String,attribute:"loading-message"})],a.prototype,"loadingMessage",2),o([(0,l.property)({type:Boolean})],a.prototype,"loading",2),o([(0,l.property)({type:String,attribute:"selected-label"})],a.prototype,"selectedLabel",2),o([(0,l.property)({attribute:!1})],a.prototype,"renderLeading",2),o([(0,l.property)({converter:_})],a.prototype,"open",2),o([(0,l.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),a=o([(0,v.customElement)("skdx-workspace-switcher","workspace-switcher","root")],a);0&&(module.exports={SkdxWorkspaceSwitcher});
+    `}};d([(0,l.property)({attribute:!1})],a.prototype,"items",2),d([(0,l.property)({type:String})],a.prototype,"value",2),d([(0,l.property)({type:String,attribute:"default-value"})],a.prototype,"defaultValue",2),d([(0,l.property)({type:String})],a.prototype,"placeholder",2),d([(0,l.property)({type:String})],a.prototype,"label",2),d([(0,l.property)({type:String,attribute:"search-label"})],a.prototype,"searchLabel",2),d([(0,l.property)({type:String,attribute:"search-placeholder"})],a.prototype,"searchPlaceholder",2),d([(0,l.property)({type:String,attribute:"empty-message"})],a.prototype,"emptyMessage",2),d([(0,l.property)({type:String,attribute:"loading-message"})],a.prototype,"loadingMessage",2),d([(0,l.property)({type:Boolean})],a.prototype,"loading",2),d([(0,l.property)({type:String,attribute:"selected-label"})],a.prototype,"selectedLabel",2),d([(0,l.property)({attribute:!1})],a.prototype,"renderLeading",2),d([(0,l.property)({converter:_})],a.prototype,"open",2),d([(0,l.property)({type:Boolean,attribute:"default-open"})],a.prototype,"defaultOpen",2),a=d([(0,v.customElement)("skdx-workspace-switcher","workspace-switcher","root")],a);0&&(module.exports={SkdxWorkspaceSwitcher});

package/dist/workspace-switcher/WorkspaceSwitcher.d.cts

@@ -54,7 +54,6 @@ export interface SkdxWorkspaceSwitcherValueChangeDetail {
  * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; `preventDefault()` keeps it open.
  * @fires focus-outside - Fires when focus moves outside the panel while open; `preventDefault()` keeps it open.
  * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
- * @fires open-auto-focus - Fires before focus moves into the panel on open; `preventDefault()` leaves focus where it is.
  * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
  */
 export declare class SkdxWorkspaceSwitcher extends LitElement {
@@ -139,6 +138,7 @@ export declare class SkdxWorkspaceSwitcher extends LitElement {
     private get currentValue();
     /** Whether the panel is open right now, controlled or not. */
     private get isOpen();
+    private wasOpen;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly notePointer;

package/dist/workspace-switcher/WorkspaceSwitcher.d.ts

@@ -54,7 +54,6 @@ export interface SkdxWorkspaceSwitcherValueChangeDetail {
  * @fires pointer-down-outside - Fires on a pointer-down outside the panel while open; `preventDefault()` keeps it open.
  * @fires focus-outside - Fires when focus moves outside the panel while open; `preventDefault()` keeps it open.
  * @fires interact-outside - Fires for either kind of outside interaction, just before the specific event.
- * @fires open-auto-focus - Fires before focus moves into the panel on open; `preventDefault()` leaves focus where it is.
  * @fires close-auto-focus - Fires before focus returns to the trigger on close; `preventDefault()` suppresses that return.
  */
 export declare class SkdxWorkspaceSwitcher extends LitElement {
@@ -139,6 +138,7 @@ export declare class SkdxWorkspaceSwitcher extends LitElement {
     private get currentValue();
     /** Whether the panel is open right now, controlled or not. */
     private get isOpen();
+    private wasOpen;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private readonly notePointer;

package/dist/workspace-switcher/WorkspaceSwitcher.js

@@ -1,25 +1,25 @@
-var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t)=>{for(var s=t>1?void 0:t?v(c,e):c,p=d.length-1,i;p>=0;p--)(i=d[p])&&(s=(t?i(c,e,s):i(s))||s);return t&&s&&m(c,e,s),s};import{html as o,LitElement as k,nothing as l}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as h}from"../internal/events.js";import{placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/primitives/command";import"@skdx/web-components/primitives/popover";import"@skdx/web-components/visually-hidden";var w="data-skdx-workspace-switcher-generated",x={fromAttribute:d=>d!=="false"};function g(d){d.stopPropagation()}function y(d,c){let e=c.toLowerCase(),t=new Map([[void 0,[]]]);for(let i of d){let u=t.get(i.group);u?u.push(i):t.set(i.group,[i])}let s=i=>e===""||i.id.toLowerCase().includes(e)||i.label.toLowerCase().includes(e)||(i.description?.toLowerCase().includes(e)??!1),p=[];for(let[i,u]of t)u.some(s)&&p.push({heading:i,items:u});return p}var r=class extends k{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),h(this,"open-change",e)}select(e,t){e.stopPropagation();let s=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),h(this,"value-change",{value:t,previousValue:s,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let s=this.querySelector("skdx-command-input");s?.updateComplete.then(()=>s.querySelector("input")?.setAttribute("aria-label",this.searchLabel)),f(this,w,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return o`${this.renderLeading&&e?o`<span
+var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(l,c,e,t)=>{for(var r=t>1?void 0:t?v(c,e):c,p=l.length-1,a;p>=0;p--)(a=l[p])&&(r=(t?a(c,e,r):a(r))||r);return t&&r&&m(c,e,r),r};import{html as o,LitElement as k,nothing as d}from"lit";import{property as n}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{emit as u}from"../internal/events.js";import{placeSlotted as f}from"../internal/slots.js";import"@skdx/web-components/primitives/command";import"@skdx/web-components/primitives/popover";import"@skdx/web-components/visually-hidden";var w="data-skdx-workspace-switcher-generated",x={fromAttribute:l=>l!=="false"};function g(l){l.stopPropagation()}function y(l,c){let e=c.toLowerCase(),t=new Map([[void 0,[]]]);for(let a of l){let h=t.get(a.group);h?h.push(a):t.set(a.group,[a])}let r=a=>e===""||a.id.toLowerCase().includes(e)||a.label.toLowerCase().includes(e)||(a.description?.toLowerCase().includes(e)??!1),p=[];for(let[a,h]of t)h.some(r)&&p.push({heading:a,items:h});return p}var s=class extends k{constructor(){super(...arguments);this.defaultValue="";this.placeholder="Select";this.searchLabel="Search";this.emptyMessage="No results";this.loadingMessage="Loading";this.loading=!1;this.selectedLabel="Current";this.defaultOpen=!1;this.search="";this.reason="programmatic";this.notePointer=()=>{this.reason="pointer"};this.noteKeyboard=()=>{this.reason="keyboard"};this.handleOpenChange=e=>{e.stopPropagation();let t=e.detail;t!==this.isOpen&&this.setOpen(t)};this.handleSearchChange=e=>{e.stopPropagation(),this.search=e.detail,this.requestUpdate()}}createRenderRoot(){return this}get currentValue(){return this.value??this.uncontrolledValue??this.defaultValue}get isOpen(){return this.open??this.uncontrolledOpen??this.defaultOpen}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerdown",this.notePointer,!0),this.addEventListener("keydown",this.noteKeyboard,!0),queueMicrotask(()=>this.requestUpdate())}disconnectedCallback(){this.removeEventListener("pointerdown",this.notePointer,!0),this.removeEventListener("keydown",this.noteKeyboard,!0),super.disconnectedCallback()}get hasTrigger(){return this.querySelector('[slot="trigger"], [data-skdx-slot="trigger"]')!==null}get hasActions(){return this.querySelector('[slot="actions"], [data-skdx-slot="actions"]')!==null}region(e){return this.querySelector(`.skdx-workspace-switcher__${e}`)}setOpen(e){e||(this.search=""),this.uncontrolledOpen=e,this.requestUpdate(),u(this,"open-change",e)}select(e,t){e.stopPropagation();let r=this.currentValue;this.uncontrolledValue=t,this.requestUpdate(),u(this,"value-change",{value:t,previousValue:r,reason:this.reason}),this.setOpen(!1)}nameTrigger(){let e=this.querySelector("skdx-popover-trigger")?.shadowRoot?.querySelector('[part="trigger"]');e&&(this.label?e.setAttribute("aria-label",this.label):e.removeAttribute("aria-label"))}updated(){let e=this.querySelector(":scope > skdx-popover-root");e&&(e.open=this.isOpen),this.querySelector("skdx-popover-trigger")?.updateComplete.then(()=>this.nameTrigger());let r=this.wasOpen!==void 0&&this.isOpen&&!this.wasOpen;this.wasOpen=this.isOpen;let p=this.querySelector("skdx-command-input");p?.updateComplete.then(()=>{let a=p.querySelector("input");a?.setAttribute("aria-label",this.searchLabel),r&&a?.focus()}),f(this,w,{trigger:this.querySelector("skdx-popover-trigger"),actions:this.region("footer")},null)}derivedTrigger(){let e=(this.items??[]).find(t=>t.id===this.currentValue);return o`${this.renderLeading&&e?o`<span
               aria-hidden="true"
               class="skdx-workspace-switcher__leading"
               >${this.renderLeading(e)}</span
-            >`:l}
+            >`:d}
       <span class="skdx-workspace-switcher__current">${e?.label??this.placeholder}</span>
-      ${e?.description?o`<span class="skdx-workspace-switcher__description">${e.description}</span>`:l}`}listedItem(e){let t=e.id===this.currentValue;return o`<skdx-command-item
+      ${e?.description?o`<span class="skdx-workspace-switcher__description">${e.description}</span>`:d}`}listedItem(e){let t=e.id===this.currentValue;return o`<skdx-command-item
       class="skdx-workspace-switcher__item"
       .value=${e.id}
       .keywords=${e.description?[e.label,e.description]:[e.label]}
       ?disabled=${e.disabled}
-      data-selected=${t?"":l}
-      @select=${s=>this.select(s,e.id)}
+      data-selected=${t?"":d}
+      @select=${r=>this.select(r,e.id)}
     >
       ${this.renderLeading?o`<span
               aria-hidden="true"
               class="skdx-workspace-switcher__item-leading"
               >${this.renderLeading(e)}</span
-            >`:l}
+            >`:d}
       <span class="skdx-workspace-switcher__item-label">${e.label}</span>
-      ${e.description?o`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:l}
-      ${t?o`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:l}
+      ${e.description?o`<span class="skdx-workspace-switcher__item-description">${e.description}</span>`:d}
+      ${t?o`<skdx-visually-hidden>${this.selectedLabel}</skdx-visually-hidden>`:d}
     </skdx-command-item>`}render(){let e=y(this.items??[],this.search);return o`
       <skdx-popover-root
         data-skdx-workspace-switcher-generated
@@ -27,7 +27,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
         @open-change=${this.handleOpenChange}
       >
         <skdx-popover-trigger
-          >${this.hasTrigger?l:this.derivedTrigger()}</skdx-popover-trigger
+          >${this.hasTrigger?d:this.derivedTrigger()}</skdx-popover-trigger
         >
         <skdx-popover-content
           class="skdx-workspace-switcher__content"
@@ -43,7 +43,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
           >
             <skdx-command-input
               class="skdx-workspace-switcher__search"
-              placeholder=${this.searchPlaceholder??l}
+              placeholder=${this.searchPlaceholder??d}
             ></skdx-command-input>
             <skdx-command-list
               class="skdx-workspace-switcher__list"
@@ -51,9 +51,9 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
             >
               ${e.map(t=>o`<skdx-command-group
                     class="skdx-workspace-switcher__group"
-                    heading=${t.heading??l}
+                    heading=${t.heading??d}
                   >
-                    ${t.items.map(s=>this.listedItem(s))}
+                    ${t.items.map(r=>this.listedItem(r))}
                   </skdx-command-group>`)}
             </skdx-command-list>
             <skdx-command-loading class="skdx-workspace-switcher__loading"
@@ -63,7 +63,7 @@ var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var a=(d,c,e,t
               >${this.emptyMessage}</skdx-command-empty
             >
           </skdx-command>
-          ${this.hasActions?o`<div class="skdx-workspace-switcher__footer"></div>`:l}
+          ${this.hasActions?o`<div class="skdx-workspace-switcher__footer"></div>`:d}
         </skdx-popover-content>
       </skdx-popover-root>
-    `}};a([n({attribute:!1})],r.prototype,"items",2),a([n({type:String})],r.prototype,"value",2),a([n({type:String,attribute:"default-value"})],r.prototype,"defaultValue",2),a([n({type:String})],r.prototype,"placeholder",2),a([n({type:String})],r.prototype,"label",2),a([n({type:String,attribute:"search-label"})],r.prototype,"searchLabel",2),a([n({type:String,attribute:"search-placeholder"})],r.prototype,"searchPlaceholder",2),a([n({type:String,attribute:"empty-message"})],r.prototype,"emptyMessage",2),a([n({type:String,attribute:"loading-message"})],r.prototype,"loadingMessage",2),a([n({type:Boolean})],r.prototype,"loading",2),a([n({type:String,attribute:"selected-label"})],r.prototype,"selectedLabel",2),a([n({attribute:!1})],r.prototype,"renderLeading",2),a([n({converter:x})],r.prototype,"open",2),a([n({type:Boolean,attribute:"default-open"})],r.prototype,"defaultOpen",2),r=a([b("skdx-workspace-switcher","workspace-switcher","root")],r);export{r as SkdxWorkspaceSwitcher};
+    `}};i([n({attribute:!1})],s.prototype,"items",2),i([n({type:String})],s.prototype,"value",2),i([n({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),i([n({type:String})],s.prototype,"placeholder",2),i([n({type:String})],s.prototype,"label",2),i([n({type:String,attribute:"search-label"})],s.prototype,"searchLabel",2),i([n({type:String,attribute:"search-placeholder"})],s.prototype,"searchPlaceholder",2),i([n({type:String,attribute:"empty-message"})],s.prototype,"emptyMessage",2),i([n({type:String,attribute:"loading-message"})],s.prototype,"loadingMessage",2),i([n({type:Boolean})],s.prototype,"loading",2),i([n({type:String,attribute:"selected-label"})],s.prototype,"selectedLabel",2),i([n({attribute:!1})],s.prototype,"renderLeading",2),i([n({converter:x})],s.prototype,"open",2),i([n({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),s=i([b("skdx-workspace-switcher","workspace-switcher","root")],s);export{s as SkdxWorkspaceSwitcher};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skdx/web-components-blocks",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "description": "Web Components blocks for the SkandaDX design system — page-level compositions of @skdx/web-components styled by @skdx/skins",
   "license": "MIT",
   "publishConfig": {
@@ -343,7 +343,7 @@
   ],
   "peerDependencies": {
     "lit": "^3.3.0",
-    "@skdx/web-components": "^0.38.0"
+    "@skdx/web-components": "^0.40.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.4",
@@ -354,7 +354,7 @@
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "@skdx/web-components": "0.38.0"
+    "@skdx/web-components": "0.40.0"
   },
   "scripts": {
     "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",