@prioticket/design-system-web 1.0.5 → 1.0.7

package/dist/component-gallery.html

@@ -26,7 +26,7 @@
     }
     </script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist/theme-only.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist/theme-only.css">
 
     <style>
         :root {
@@ -321,7 +321,7 @@
     </main>
 
     <script type="module">
-        const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.5/dist';
+        const CDN_BASE = 'https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.7/dist';
         const COMPONENT_BASE = CDN_BASE + '/components';
 
         const COMPONENTS = [

package/dist/components/pd-checkbox.cjs.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),r=require("lit/decorators.js");require("@material/web/checkbox/checkbox.js");var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,o=(c,t,e,i)=>{for(var a=i>1?void 0:i?d(t,e):t,n=c.length-1,l;n>=0;n--)(l=c[n])&&(a=(i?l(t,e,a):l(a))||a);return i&&a&&h(t,e,a),a};exports.PdCheckbox=class extends s.LitElement{constructor(){super(...arguments),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.required=!1,this.value="",this.name="",this.label="",this.touchTarget=!1}render(){const t=this.label||"Checkbox",e=this.touchTarget?"wrapper":void 0,i=`checkbox-${Math.random().toString(36).substr(2,9)}`;return this.label?s.html`
-      <label class="checkbox-label" for=${i}>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),d=require("lit/directives/if-defined.js"),i=require("lit/decorators.js");require("@material/web/checkbox/checkbox.js");var h=Object.defineProperty,p=Object.getOwnPropertyDescriptor,r=(c,t,e,a)=>{for(var o=a>1?void 0:a?p(t,e):t,n=c.length-1,l;n>=0;n--)(l=c[n])&&(o=(a?l(t,e,o):l(o))||o);return a&&o&&h(t,e,o),o};exports.PdCheckbox=class extends s.LitElement{constructor(){super(...arguments),this.checked=!1,this.indeterminate=!1,this.disabled=!1,this.required=!1,this.value="",this.name="",this.label="",this.touchTarget=!1,this.inputId=`checkbox-${Math.random().toString(36).slice(2,11)}`}render(){const t=this.label||"Checkbox",e=this.touchTarget?"wrapper":void 0;return this.label?s.html`
+      <label class="checkbox-label" for=${this.inputId}>
         <md-checkbox
-          id=${i}
+          id=${this.inputId}
           ?checked=${this.checked}
           ?indeterminate=${this.indeterminate}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          touch-target=${e||"wrapper"}
+          touch-target=${d.ifDefined(e)}
           aria-label=${t}
           .value=${this.value}
           .name=${this.name}
@@ -21,7 +21,7 @@
         ?indeterminate=${this.indeterminate}
         ?disabled=${this.disabled}
         ?required=${this.required}
-        touch-target=${e||"wrapper"}
+        touch-target=${d.ifDefined(e)}
         aria-label=${t}
         .value=${this.value}
         .name=${this.name}
@@ -82,4 +82,4 @@
     :host([error]) .label-text {
       color: var(--md-sys-color-error);
     }
-  `;o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"checked",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"indeterminate",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"disabled",2);o([r.property({type:Boolean})],exports.PdCheckbox.prototype,"required",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"value",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"name",2);o([r.property({type:String})],exports.PdCheckbox.prototype,"label",2);o([r.property({type:Boolean,attribute:"touch-target"})],exports.PdCheckbox.prototype,"touchTarget",2);exports.PdCheckbox=o([r.customElement("pd-checkbox")],exports.PdCheckbox);
+  `;r([i.property({type:Boolean})],exports.PdCheckbox.prototype,"checked",2);r([i.property({type:Boolean})],exports.PdCheckbox.prototype,"indeterminate",2);r([i.property({type:Boolean})],exports.PdCheckbox.prototype,"disabled",2);r([i.property({type:Boolean})],exports.PdCheckbox.prototype,"required",2);r([i.property({type:String})],exports.PdCheckbox.prototype,"value",2);r([i.property({type:String})],exports.PdCheckbox.prototype,"name",2);r([i.property({type:String})],exports.PdCheckbox.prototype,"label",2);r([i.property({type:Boolean,attribute:"touch-target"})],exports.PdCheckbox.prototype,"touchTarget",2);exports.PdCheckbox=r([i.customElement("pd-checkbox")],exports.PdCheckbox);

package/dist/components/pd-checkbox.es.js

@@ -1,27 +1,28 @@
-import { css as d, LitElement as m, html as h } from "lit";
-import { property as r, customElement as p } from "lit/decorators.js";
+import { css as m, LitElement as p, html as h } from "lit";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { property as s, customElement as u } from "lit/decorators.js";
 import "@material/web/checkbox/checkbox.js";
-var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (a, e, o, c) => {
-  for (var s = c > 1 ? void 0 : c ? b(e, o) : e, n = a.length - 1, l; n >= 0; n--)
-    (l = a[n]) && (s = (c ? l(e, o, s) : l(s)) || s);
-  return c && s && u(e, o, s), s;
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (i, e, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? y(e, o) : e, c = i.length - 1, l; c >= 0; c--)
+    (l = i[c]) && (r = (n ? l(e, o, r) : l(r)) || r);
+  return n && r && b(e, o, r), r;
 };
-let t = class extends m {
+let t = class extends p {
   constructor() {
-    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.value = "", this.name = "", this.label = "", this.touchTarget = !1;
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.required = !1, this.value = "", this.name = "", this.label = "", this.touchTarget = !1, this.inputId = `checkbox-${Math.random().toString(36).slice(2, 11)}`;
   }
   render() {
-    const a = this.label || "Checkbox", e = this.touchTarget ? "wrapper" : void 0, o = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    const i = this.label || "Checkbox", e = this.touchTarget ? "wrapper" : void 0;
     return this.label ? h`
-      <label class="checkbox-label" for=${o}>
+      <label class="checkbox-label" for=${this.inputId}>
         <md-checkbox
-          id=${o}
+          id=${this.inputId}
           ?checked=${this.checked}
           ?indeterminate=${this.indeterminate}
           ?disabled=${this.disabled}
           ?required=${this.required}
-          touch-target=${e || "wrapper"}
-          aria-label=${a}
+          touch-target=${d(e)}
+          aria-label=${i}
           .value=${this.value}
           .name=${this.name}
           @change=${this._handleChange}
@@ -35,8 +36,8 @@ let t = class extends m {
         ?indeterminate=${this.indeterminate}
         ?disabled=${this.disabled}
         ?required=${this.required}
-        touch-target=${e || "wrapper"}
-        aria-label=${a}
+        touch-target=${d(e)}
+        aria-label=${i}
         .value=${this.value}
         .name=${this.name}
         @change=${this._handleChange}
@@ -44,8 +45,8 @@ let t = class extends m {
       ></md-checkbox>
     `;
   }
-  _handleChange(a) {
-    const e = a.target;
+  _handleChange(i) {
+    const e = i.target;
     this.checked = e.checked, this.indeterminate = e.indeterminate, this.dispatchEvent(new CustomEvent("change", {
       detail: {
         checked: e.checked,
@@ -55,8 +56,8 @@ let t = class extends m {
       bubbles: !0
     }));
   }
-  _handleInput(a) {
-    const e = a.target;
+  _handleInput(i) {
+    const e = i.target;
     this.checked = e.checked, this.indeterminate = e.indeterminate, this.dispatchEvent(new CustomEvent("input", {
       detail: {
         checked: e.checked,
@@ -67,7 +68,7 @@ let t = class extends m {
     }));
   }
 };
-t.styles = d`
+t.styles = m`
     :host {
       display: inline-flex;
       align-items: center;
@@ -122,32 +123,32 @@ t.styles = d`
       color: var(--md-sys-color-error);
     }
   `;
-i([
-  r({ type: Boolean })
+a([
+  s({ type: Boolean })
 ], t.prototype, "checked", 2);
-i([
-  r({ type: Boolean })
+a([
+  s({ type: Boolean })
 ], t.prototype, "indeterminate", 2);
-i([
-  r({ type: Boolean })
+a([
+  s({ type: Boolean })
 ], t.prototype, "disabled", 2);
-i([
-  r({ type: Boolean })
+a([
+  s({ type: Boolean })
 ], t.prototype, "required", 2);
-i([
-  r({ type: String })
+a([
+  s({ type: String })
 ], t.prototype, "value", 2);
-i([
-  r({ type: String })
+a([
+  s({ type: String })
 ], t.prototype, "name", 2);
-i([
-  r({ type: String })
+a([
+  s({ type: String })
 ], t.prototype, "label", 2);
-i([
-  r({ type: Boolean, attribute: "touch-target" })
+a([
+  s({ type: Boolean, attribute: "touch-target" })
 ], t.prototype, "touchTarget", 2);
-t = i([
-  p("pd-checkbox")
+t = a([
+  u("pd-checkbox")
 ], t);
 export {
   t as PdCheckbox

package/dist/components/pd-menu.cjs.js

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),e=require("lit/decorators.js");require("@material/web/menu/menu.js");require("@material/web/menu/menu-item.js");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,t=(p,r,s,n)=>{for(var o=n>1?void 0:n?y(r,s):r,i=p.length-1,u;i>=0;i--)(u=p[i])&&(o=(n?u(r,s,o):u(o))||o);return n&&o&&c(r,s,o),o};exports.PdMenu=class extends a.LitElement{constructor(){super(...arguments),this.anchor="",this.open=!1,this.positioning="popover",this.anchorCorner="start-start",this.menuCorner="start-start",this.quick=!1,this.hasOverflow=!1,this.xOffset=0,this.yOffset=0,this.defaultFocus="list-root",this.stayOpenOnFocusout=!1,this.stayOpenOnOutsideClick=!1,this.skipRestoreFocus=!1}updated(r){if(r.has("anchor")&&this.anchor){const s=this.getRootNode();s&&(this.anchorElement=s.getElementById(this.anchor)??void 0)}}render(){return a.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),e=require("lit/decorators.js");require("@material/web/menu/menu.js");require("@material/web/menu/menu-item.js");var c=Object.defineProperty,y=Object.getOwnPropertyDescriptor,t=(p,r,s,n)=>{for(var o=n>1?void 0:n?y(r,s):r,i=p.length-1,u;i>=0;i--)(u=p[i])&&(o=(n?u(r,s,o):u(o))||o);return n&&o&&c(r,s,o),o};exports.PdMenu=class extends a.LitElement{constructor(){super(...arguments),this.anchor="",this.open=!1,this.positioning="popover",this.anchorCorner="start-start",this.menuCorner="start-start",this.quick=!1,this.hasOverflow=!1,this.xOffset=0,this.yOffset=0,this.defaultFocus="list-root",this.stayOpenOnFocusout=!1,this.stayOpenOnOutsideClick=!1,this.skipRestoreFocus=!1}updated(r){if(r.has("anchor")){const s=this.getRootNode();this.anchor&&s?this.anchorElement=s.getElementById(this.anchor)??void 0:this.anchor||(this.anchorElement=void 0)}}render(){return a.html`
       <md-menu
         .anchorElement=${this.anchorElement}
-        ?open=${this.open}
-        positioning=${this.positioning}
-        anchor-corner=${this.anchorCorner}
-        menu-corner=${this.menuCorner}
-        ?quick=${this.quick}
-        ?has-overflow=${this.hasOverflow}
-        x-offset=${this.xOffset}
-        y-offset=${this.yOffset}
-        default-focus=${this.defaultFocus}
-        ?stay-open-on-focusout=${this.stayOpenOnFocusout}
-        ?stay-open-on-outside-click=${this.stayOpenOnOutsideClick}
-        ?skip-restore-focus=${this.skipRestoreFocus}
+        .open=${this.open}
+        .positioning=${this.positioning}
+        .anchorCorner=${this.anchorCorner}
+        .menuCorner=${this.menuCorner}
+        .quick=${this.quick}
+        .hasOverflow=${this.hasOverflow}
+        .xOffset=${this.xOffset}
+        .yOffset=${this.yOffset}
+        .defaultFocus=${this.defaultFocus}
+        .stayOpenOnFocusout=${this.stayOpenOnFocusout}
+        .stayOpenOnOutsideClick=${this.stayOpenOnOutsideClick}
+        .skipRestoreFocus=${this.skipRestoreFocus}
         @closed=${()=>this.open=!1}
       >
         <slot></slot>

package/dist/components/pd-menu.es.js

@@ -2,10 +2,10 @@ import { css as c, LitElement as l, html as h } from "lit";
 import { query as f, property as o, customElement as y } from "lit/decorators.js";
 import "@material/web/menu/menu.js";
 import "@material/web/menu/menu-item.js";
-var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (n, r, p, i) => {
-  for (var s = i > 1 ? void 0 : i ? d(r, p) : r, a = n.length - 1, u; a >= 0; a--)
-    (u = n[a]) && (s = (i ? u(r, p, s) : u(s)) || s);
-  return i && s && m(r, p, s), s;
+var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, e = (n, s, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? d(s, a) : s, p = n.length - 1, u; p >= 0; p--)
+    (u = n[p]) && (r = (i ? u(s, a, r) : u(r)) || r);
+  return i && r && m(s, a, r), r;
 };
 let t = class extends l {
   constructor() {
@@ -18,27 +18,27 @@ let t = class extends l {
    * which correctly handles Shadow DOM boundaries.
    */
   updated(n) {
-    if (n.has("anchor") && this.anchor) {
-      const r = this.getRootNode();
-      r && (this.anchorElement = r.getElementById(this.anchor) ?? void 0);
+    if (n.has("anchor")) {
+      const s = this.getRootNode();
+      this.anchor && s ? this.anchorElement = s.getElementById(this.anchor) ?? void 0 : this.anchor || (this.anchorElement = void 0);
     }
   }
   render() {
     return h`
       <md-menu
         .anchorElement=${this.anchorElement}
-        ?open=${this.open}
-        positioning=${this.positioning}
-        anchor-corner=${this.anchorCorner}
-        menu-corner=${this.menuCorner}
-        ?quick=${this.quick}
-        ?has-overflow=${this.hasOverflow}
-        x-offset=${this.xOffset}
-        y-offset=${this.yOffset}
-        default-focus=${this.defaultFocus}
-        ?stay-open-on-focusout=${this.stayOpenOnFocusout}
-        ?stay-open-on-outside-click=${this.stayOpenOnOutsideClick}
-        ?skip-restore-focus=${this.skipRestoreFocus}
+        .open=${this.open}
+        .positioning=${this.positioning}
+        .anchorCorner=${this.anchorCorner}
+        .menuCorner=${this.menuCorner}
+        .quick=${this.quick}
+        .hasOverflow=${this.hasOverflow}
+        .xOffset=${this.xOffset}
+        .yOffset=${this.yOffset}
+        .defaultFocus=${this.defaultFocus}
+        .stayOpenOnFocusout=${this.stayOpenOnFocusout}
+        .stayOpenOnOutsideClick=${this.stayOpenOnOutsideClick}
+        .skipRestoreFocus=${this.skipRestoreFocus}
         @closed=${() => this.open = !1}
       >
         <slot></slot>

package/dist/components/pd-segmented-stepper.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),i=require("lit/decorators.js");require("@material/web/icon/icon.js");var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,r=(c,e,t,s)=>{for(var o=s>1?void 0:s?d(e,t):e,a=c.length-1,l;a>=0;a--)(l=c[a])&&(o=(s?l(e,t,o):l(o))||o);return s&&o&&n(e,t,o),o};exports.PdSegmentedStepper=class extends p.LitElement{constructor(){super(...arguments),this.activeStep=0,this.completedSteps=[],this.size="medium",this.disabled=!1,this.allowStepNavigation=!0,this.linear=!0,this._steps=[],this._completedStepsSet=new Set}connectedCallback(){super.connectedCallback(),this.addEventListener("stepper-item-click",this._handleStepClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("stepper-item-click",this._handleStepClick)}firstUpdated(){this._updateSteps()}updated(e){super.updated(e),(e.has("activeStep")||e.has("completedSteps")||e.has("disabled")||e.has("allowStepNavigation")||e.has("linear"))&&(this._updateSteps(),e.has("completedSteps")&&(this._completedStepsSet=new Set(this.completedSteps)))}_updateSteps(){const e=this.querySelectorAll("pd-stepper-item");this._steps=Array.from(e),this._steps.forEach((t,s)=>{t.disabled=this.disabled,t.setAttribute("data-step-index",s.toString()),t.stepNumber=s+1;const o=this._completedStepsSet.has(s)||this.completedSteps.includes(s);o?t.state="completed":s===this.activeStep?t.state="active":t.state="pending";const a=!this.linear||s<=this.activeStep||o;t.clickable=this.allowStepNavigation&&a&&!this.disabled})}_handleStepClick(e){if(this.disabled)return;const t=e.target,s=parseInt(t.getAttribute("data-step-index")||"0");t.clickable&&this.allowStepNavigation&&this.goToStep(s)}goToStep(e){if(e>=0&&e<this._steps.length&&e!==this.activeStep){const t=this.activeStep;this.activeStep=e,this._completedStepsSet=new Set(this.completedSteps),this._updateSteps(),this._dispatchStepChange(t)}}_dispatchStepChange(e){this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:this.activeStep,previousStep:e??this.activeStep},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("stepchange",{detail:{activeStep:this.activeStep,previousStep:e??this.activeStep,totalSteps:this._steps.length},bubbles:!0,composed:!0}))}next(){this.activeStep<this._steps.length-1&&(this.completeStep(this.activeStep),this.goToStep(this.activeStep+1))}back(){this.activeStep>0&&this.goToStep(this.activeStep-1)}nextStep(){this.next()}previousStep(){this.back()}completeCurrentStep(){this.completeStep(this.activeStep)}completeStep(e){e>=0&&e<this._steps.length&&!this._completedStepsSet.has(e)&&(this._completedStepsSet.add(e),this.completedSteps=Array.from(this._completedStepsSet).sort((t,s)=>t-s),this._updateSteps(),this.dispatchEvent(new CustomEvent("stepcomplete",{detail:{completedStep:e,completedSteps:this.completedSteps,totalSteps:this._steps.length},bubbles:!0,composed:!0})))}resetStep(e){e>=0&&e<this._steps.length&&this._completedStepsSet.has(e)&&(this._completedStepsSet.delete(e),this.completedSteps=Array.from(this._completedStepsSet).sort((t,s)=>t-s),this._updateSteps())}reset(){this.activeStep=0,this.completedSteps=[],this._completedStepsSet.clear(),this._updateSteps()}render(){return p.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),r=require("lit/decorators.js");require("@material/web/icon/icon.js");var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(c,e,t,s)=>{for(var o=s>1?void 0:s?d(e,t):e,a=c.length-1,l;a>=0;a--)(l=c[a])&&(o=(s?l(e,t,o):l(o))||o);return s&&o&&n(e,t,o),o};exports.PdSegmentedStepper=class extends p.LitElement{constructor(){super(...arguments),this.activeStep=0,this.completedSteps=[],this.size="medium",this.disabled=!1,this.allowStepNavigation=!0,this.linear=!0,this._steps=[],this._completedStepsSet=new Set}connectedCallback(){super.connectedCallback(),this.addEventListener("stepper-item-click",this._handleStepClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("stepper-item-click",this._handleStepClick)}firstUpdated(){this._updateSteps()}updated(e){super.updated(e),(e.has("activeStep")||e.has("completedSteps")||e.has("disabled")||e.has("allowStepNavigation")||e.has("linear"))&&(this._updateSteps(),e.has("completedSteps")&&(this._completedStepsSet=new Set(this.completedSteps)))}_updateSteps(){const e=this.querySelectorAll("pd-stepper-item");this._steps=Array.from(e),this._steps.forEach((t,s)=>{t.disabled=this.disabled,t.setAttribute("data-step-index",s.toString()),t.stepNumber=s+1;const o=this._completedStepsSet.has(s)||this.completedSteps.includes(s);o?t.state="completed":s===this.activeStep?t.state="active":t.state="pending";const a=!this.linear||s<=this.activeStep||o;t.clickable=this.allowStepNavigation&&a&&!this.disabled})}_handleStepClick(e){if(this.disabled)return;const t=e.target,s=parseInt(t.getAttribute("data-step-index")||"0");t.clickable&&this.allowStepNavigation&&this.goToStep(s)}goToStep(e){if(e>=0&&e<this._steps.length&&e!==this.activeStep){const t=this.activeStep;this.activeStep=e,this._completedStepsSet=new Set(this.completedSteps),this._updateSteps(),this._dispatchStepChange(t)}}_dispatchStepChange(e){this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:this.activeStep,previousStep:e??this.activeStep,totalSteps:this._steps.length},bubbles:!0,composed:!0}))}next(){this.activeStep<this._steps.length-1&&(this.completeStep(this.activeStep),this.goToStep(this.activeStep+1))}back(){this.activeStep>0&&this.goToStep(this.activeStep-1)}nextStep(){this.next()}previousStep(){this.back()}completeCurrentStep(){this.completeStep(this.activeStep)}completeStep(e){e>=0&&e<this._steps.length&&!this._completedStepsSet.has(e)&&(this._completedStepsSet.add(e),this.completedSteps=Array.from(this._completedStepsSet).sort((t,s)=>t-s),this._updateSteps(),this.dispatchEvent(new CustomEvent("step-complete",{detail:{completedStep:e,completedSteps:this.completedSteps,totalSteps:this._steps.length},bubbles:!0,composed:!0})))}resetStep(e){e>=0&&e<this._steps.length&&this._completedStepsSet.has(e)&&(this._completedStepsSet.delete(e),this.completedSteps=Array.from(this._completedStepsSet).sort((t,s)=>t-s),this._updateSteps())}reset(){this.activeStep=0,this.completedSteps=[],this._completedStepsSet.clear(),this._updateSteps()}render(){return p.html`
       <div class="segmented-stepper" role="group" aria-label="Progress stepper">
         <slot @slotchange=${this._updateSteps}></slot>
       </div>
@@ -45,7 +45,7 @@
     :host([disabled]) ::slotted(pd-stepper-item) {
       border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
     }
-  `;r([i.property({type:Number,attribute:"active-step"})],exports.PdSegmentedStepper.prototype,"activeStep",2);r([i.property({type:Array,attribute:"completed-steps"})],exports.PdSegmentedStepper.prototype,"completedSteps",2);r([i.property({type:String,reflect:!0})],exports.PdSegmentedStepper.prototype,"size",2);r([i.property({type:Boolean,reflect:!0})],exports.PdSegmentedStepper.prototype,"disabled",2);r([i.property({type:Boolean,attribute:"allow-step-navigation"})],exports.PdSegmentedStepper.prototype,"allowStepNavigation",2);r([i.property({type:Boolean})],exports.PdSegmentedStepper.prototype,"linear",2);r([i.state()],exports.PdSegmentedStepper.prototype,"_steps",2);r([i.state()],exports.PdSegmentedStepper.prototype,"_completedStepsSet",2);exports.PdSegmentedStepper=r([i.customElement("pd-segmented-stepper")],exports.PdSegmentedStepper);exports.PdStepperItem=class extends p.LitElement{constructor(){super(...arguments),this.stepNumber=1,this.state="pending",this.disabled=!1,this.clickable=!1,this.icon=""}_handleClick(){this.disabled||!this.clickable||this.dispatchEvent(new CustomEvent("stepper-item-click",{detail:{stepNumber:this.stepNumber},bubbles:!0,composed:!0}))}render(){const e=this.state==="completed"&&!this.icon,t=this.state!=="completed"&&!this.icon;return p.html`
+  `;i([r.property({type:Number,attribute:"active-step"})],exports.PdSegmentedStepper.prototype,"activeStep",2);i([r.property({type:Array,attribute:"completed-steps"})],exports.PdSegmentedStepper.prototype,"completedSteps",2);i([r.property({type:String,reflect:!0})],exports.PdSegmentedStepper.prototype,"size",2);i([r.property({type:Boolean,reflect:!0})],exports.PdSegmentedStepper.prototype,"disabled",2);i([r.property({type:Boolean,attribute:"allow-step-navigation"})],exports.PdSegmentedStepper.prototype,"allowStepNavigation",2);i([r.property({type:Boolean})],exports.PdSegmentedStepper.prototype,"linear",2);i([r.state()],exports.PdSegmentedStepper.prototype,"_steps",2);i([r.state()],exports.PdSegmentedStepper.prototype,"_completedStepsSet",2);exports.PdSegmentedStepper=i([r.customElement("pd-segmented-stepper")],exports.PdSegmentedStepper);exports.PdStepperItem=class extends p.LitElement{constructor(){super(...arguments),this.stepNumber=1,this.state="pending",this.disabled=!1,this.clickable=!1,this.icon=""}_handleClick(){this.disabled||!this.clickable||this.dispatchEvent(new CustomEvent("stepper-item-click",{detail:{stepNumber:this.stepNumber},bubbles:!0,composed:!0}))}render(){const e=this.state==="completed"&&!this.icon,t=this.state!=="completed"&&!this.icon;return p.html`
       <button
         class="step ${this.state} ${this.clickable?"clickable":""}"
         ?disabled=${this.disabled}
@@ -188,4 +188,4 @@
       outline: 2px solid var(--md-sys-color-primary, #6750a4);
       outline-offset: 2px;
     }
-  `;r([i.property({type:Number,attribute:"step-number"})],exports.PdStepperItem.prototype,"stepNumber",2);r([i.property({type:String,reflect:!0})],exports.PdStepperItem.prototype,"state",2);r([i.property({type:Boolean,reflect:!0})],exports.PdStepperItem.prototype,"disabled",2);r([i.property({type:Boolean})],exports.PdStepperItem.prototype,"clickable",2);r([i.property({type:String})],exports.PdStepperItem.prototype,"icon",2);exports.PdStepperItem=r([i.customElement("pd-stepper-item")],exports.PdStepperItem);
+  `;i([r.property({type:Number,attribute:"step-number"})],exports.PdStepperItem.prototype,"stepNumber",2);i([r.property({type:String,reflect:!0})],exports.PdStepperItem.prototype,"state",2);i([r.property({type:Boolean,reflect:!0})],exports.PdStepperItem.prototype,"disabled",2);i([r.property({type:Boolean})],exports.PdStepperItem.prototype,"clickable",2);i([r.property({type:String})],exports.PdStepperItem.prototype,"icon",2);exports.PdStepperItem=i([r.customElement("pd-stepper-item")],exports.PdStepperItem);

package/dist/components/pd-segmented-stepper.es.js

@@ -1,10 +1,10 @@
 import { css as h, LitElement as m, html as l } from "lit";
 import { property as a, state as u, customElement as b } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, s, c) => {
-  for (var r = c > 1 ? void 0 : c ? S(t, s) : t, n = e.length - 1, d; n >= 0; n--)
+var S = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, t, s, c) => {
+  for (var r = c > 1 ? void 0 : c ? v(t, s) : t, n = e.length - 1, d; n >= 0; n--)
     (d = e[n]) && (r = (c ? d(t, s, r) : d(r)) || r);
-  return c && r && v(t, s, r), r;
+  return c && r && S(t, s, r), r;
 };
 let o = class extends m {
   constructor() {
@@ -48,13 +48,6 @@ let o = class extends m {
     this.dispatchEvent(new CustomEvent("step-change", {
       detail: {
         currentStep: this.activeStep,
-        previousStep: e ?? this.activeStep
-      },
-      bubbles: !0,
-      composed: !0
-    })), this.dispatchEvent(new CustomEvent("stepchange", {
-      detail: {
-        activeStep: this.activeStep,
         previousStep: e ?? this.activeStep,
         totalSteps: this._steps.length
       },
@@ -84,7 +77,7 @@ let o = class extends m {
   }
   /** Mark a specific step as completed. */
   completeStep(e) {
-    e >= 0 && e < this._steps.length && !this._completedStepsSet.has(e) && (this._completedStepsSet.add(e), this.completedSteps = Array.from(this._completedStepsSet).sort((t, s) => t - s), this._updateSteps(), this.dispatchEvent(new CustomEvent("stepcomplete", {
+    e >= 0 && e < this._steps.length && !this._completedStepsSet.has(e) && (this._completedStepsSet.add(e), this.completedSteps = Array.from(this._completedStepsSet).sort((t, s) => t - s), this._updateSteps(), this.dispatchEvent(new CustomEvent("step-complete", {
       detail: {
         completedStep: e,
         completedSteps: this.completedSteps,

package/dist/components/pd-stepper.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),a=require("lit/decorators.js"),n=require("lit/directives/class-map.js");var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(c,e,t,s)=>{for(var r=s>1?void 0:s?y(e,t):e,i=c.length-1,l;i>=0;i--)(l=c[i])&&(r=(s?l(e,t,r):l(r))||r);return s&&r&&u(e,t,r),r};exports.PdStepper=class extends o.LitElement{constructor(){super(...arguments),this.steps=[],this.currentStep=0,this.orientation="horizontal",this.linear=!0,this.showContent=!0,this.alternativeLabel=!1,this._completedSteps=new Set}render(){const e=this.orientation==="vertical",t={stepper:!0,vertical:e,horizontal:!e,"alternative-label":this.alternativeLabel&&!e};return o.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),p=require("lit/decorators.js"),n=require("lit/directives/class-map.js");var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,a=(c,e,t,s)=>{for(var r=s>1?void 0:s?y(e,t):e,i=c.length-1,l;i>=0;i--)(l=c[i])&&(r=(s?l(e,t,r):l(r))||r);return s&&r&&u(e,t,r),r};exports.PdStepper=class extends o.LitElement{constructor(){super(...arguments),this.steps=[],this.currentStep=0,this.orientation="horizontal",this.linear=!0,this.showContent=!0,this.alternativeLabel=!1,this._completedSteps=new Set}render(){const e=this.orientation==="vertical",t={stepper:!0,vertical:e,horizontal:!e,"alternative-label":this.alternativeLabel&&!e};return o.html`
       <div class=${n.classMap(t)}>
         ${this.steps.map((s,r)=>this._renderStep(s,r))}
         ${this.showContent&&!e?this._renderContent():""}
@@ -25,7 +25,7 @@
       <div class="stepper-content">
         ${e.content}
       </div>
-    `:""}_handleStepClick(e,t){if(!t)return;const s=this.currentStep;this.currentStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:e,previousStep:s},bubbles:!0,composed:!0}))}completeStep(e){this._completedSteps.add(e),this.requestUpdate()}resetStep(e){this._completedSteps.delete(e),this.requestUpdate()}next(){this.currentStep<this.steps.length-1&&(this.completeStep(this.currentStep),this.currentStep++,this._dispatchStepChange())}back(){this.currentStep>0&&(this.currentStep--,this._dispatchStepChange())}_dispatchStepChange(){this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:this.currentStep},bubbles:!0,composed:!0}))}};exports.PdStepper.styles=o.css`
+    `:""}_handleStepClick(e,t){if(!t)return;const s=this.currentStep;this.currentStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:e,previousStep:s,totalSteps:this.steps.length},bubbles:!0,composed:!0}))}completeStep(e){this._completedSteps.add(e),this.requestUpdate()}resetStep(e){this._completedSteps.delete(e),this.requestUpdate()}next(){if(this.currentStep<this.steps.length-1){const e=this.currentStep;this.completeStep(this.currentStep),this.currentStep++,this._dispatchStepChange(e)}}back(){if(this.currentStep>0){const e=this.currentStep;this.currentStep--,this._dispatchStepChange(e)}}_dispatchStepChange(e){this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:this.currentStep,previousStep:e??this.currentStep,totalSteps:this.steps.length},bubbles:!0,composed:!0}))}};exports.PdStepper.styles=o.css`
     :host {
       display: block;
       font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
@@ -276,4 +276,4 @@
         align-items: flex-start;
       }
     }
-  `;p([a.property({type:Array})],exports.PdStepper.prototype,"steps",2);p([a.property({type:Number})],exports.PdStepper.prototype,"currentStep",2);p([a.property({type:String})],exports.PdStepper.prototype,"orientation",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"linear",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"showContent",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"alternativeLabel",2);p([a.state()],exports.PdStepper.prototype,"_completedSteps",2);exports.PdStepper=p([a.customElement("pd-stepper")],exports.PdStepper);
+  `;a([p.property({type:Array})],exports.PdStepper.prototype,"steps",2);a([p.property({type:Number})],exports.PdStepper.prototype,"currentStep",2);a([p.property({type:String})],exports.PdStepper.prototype,"orientation",2);a([p.property({type:Boolean})],exports.PdStepper.prototype,"linear",2);a([p.property({type:Boolean})],exports.PdStepper.prototype,"showContent",2);a([p.property({type:Boolean})],exports.PdStepper.prototype,"alternativeLabel",2);a([p.state()],exports.PdStepper.prototype,"_completedSteps",2);exports.PdStepper=a([p.customElement("pd-stepper")],exports.PdStepper);

package/dist/components/pd-stepper.es.js

@@ -65,7 +65,11 @@ let a = class extends y {
     if (!t) return;
     const s = this.currentStep;
     this.currentStep = e, this.dispatchEvent(new CustomEvent("step-change", {
-      detail: { currentStep: e, previousStep: s },
+      detail: {
+        currentStep: e,
+        previousStep: s,
+        totalSteps: this.steps.length
+      },
       bubbles: !0,
       composed: !0
     }));
@@ -80,15 +84,25 @@ let a = class extends y {
   }
   /** Go to next step */
   next() {
-    this.currentStep < this.steps.length - 1 && (this.completeStep(this.currentStep), this.currentStep++, this._dispatchStepChange());
+    if (this.currentStep < this.steps.length - 1) {
+      const e = this.currentStep;
+      this.completeStep(this.currentStep), this.currentStep++, this._dispatchStepChange(e);
+    }
   }
   /** Go to previous step */
   back() {
-    this.currentStep > 0 && (this.currentStep--, this._dispatchStepChange());
+    if (this.currentStep > 0) {
+      const e = this.currentStep;
+      this.currentStep--, this._dispatchStepChange(e);
+    }
   }
-  _dispatchStepChange() {
+  _dispatchStepChange(e) {
     this.dispatchEvent(new CustomEvent("step-change", {
-      detail: { currentStep: this.currentStep },
+      detail: {
+        currentStep: this.currentStep,
+        previousStep: e ?? this.currentStep,
+        totalSteps: this.steps.length
+      },
       bubbles: !0,
       composed: !0
     }));

package/dist/components/pd-tabs.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lit"),i=require("lit/decorators.js");require("@material/web/tabs/tabs.js");require("@material/web/tabs/primary-tab.js");require("@material/web/tabs/secondary-tab.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(l,t,a,e)=>{for(var s=e>1?void 0:e?b(t,a):t,n=l.length-1,c;n>=0;n--)(c=l[n])&&(s=(e?c(t,a,s):c(s))||s);return e&&s&&d(t,a,s),s};exports.PdTabs=class extends r.LitElement{constructor(){super(...arguments),this.activeTabIndex=0,this.autoActivate=!1,this.tabs=[],this.slottedTabs=[]}connectedCallback(){super.connectedCallback(),setTimeout(()=>this.collectTabsFromSlot(),0)}firstUpdated(){this.collectTabsFromSlot(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}collectTabsFromSlot(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;const a=t.assignedElements({flatten:!0}),e=[];a.forEach(s=>{if(s.tagName==="PD-TAB"){const n=s;e.push({label:n.textContent?.trim()||"",icon:n.getAttribute("icon")||void 0,secondary:n.hasAttribute("secondary"),inlineIcon:n.hasAttribute("inline-icon"),ariaLabel:n.getAttribute("aria-label")||void 0})}}),this.slottedTabs=e,this.requestUpdate()}handleSlotChange(){this.collectTabsFromSlot(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}forceActiveTabUpdate(){const t=this.shadowRoot?.querySelector("md-tabs");t&&this.activeTabIndex!==void 0&&(t.activeTabIndex=this.activeTabIndex)}renderTab(t,a){const e=t.icon?r.html`<md-icon slot="icon">${t.icon}</md-icon>`:"";return t.secondary?r.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lit"),a=require("lit/decorators.js");require("@material/web/tabs/tabs.js");require("@material/web/tabs/primary-tab.js");require("@material/web/tabs/secondary-tab.js");require("@material/web/icon/icon.js");var b=Object.defineProperty,c=Object.getOwnPropertyDescriptor,s=(o,t,i,e)=>{for(var n=e>1?void 0:e?c(t,i):t,d=o.length-1,l;d>=0;d--)(l=o[d])&&(n=(e?l(t,i,n):l(n))||n);return e&&n&&b(t,i,n),n};exports.PdTabs=class extends r.LitElement{constructor(){super(...arguments),this.activeTabIndex=0,this.autoActivate=!1,this.tabs=[],this.slottedTabs=[]}firstUpdated(){this.updateTabsFromSlot()}updateTabsFromSlot(){const i=(this.assignedTabs??[]).map(e=>({label:e.textContent?.trim()||"",icon:e.getAttribute("icon")||void 0,secondary:e.hasAttribute("secondary"),inlineIcon:e.hasAttribute("inline-icon"),ariaLabel:e.getAttribute("aria-label")||void 0}));this.slottedTabs=i,this.requestUpdate(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}handleSlotChange(){this.updateTabsFromSlot()}forceActiveTabUpdate(){const t=this.shadowRoot?.querySelector("md-tabs");t&&this.activeTabIndex!==void 0&&(t.activeTabIndex=this.activeTabIndex)}renderTab(t,i){const e=t.icon?r.html`<md-icon slot="icon">${t.icon}</md-icon>`:"";return t.secondary?r.html`
         <md-secondary-tab
           ?inline-icon=${t.inlineIcon}
           aria-label=${t.ariaLabel||t.label}
@@ -20,13 +20,13 @@
         ?auto-activate=${this.autoActivate}
         @change=${this.handleChange}
       >
-        ${t.map((a,e)=>this.renderTab(a,e))}
+        ${t.map((i,e)=>this.renderTab(i,e))}
       </md-tabs>
       <div style="display: none;">
         <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
-    `}handleChange(t){const a=t.target;this.activeTabIndex=a.activeTabIndex,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{activeTabIndex:this.activeTabIndex}}))}};o([i.property({type:Number,attribute:"active-tab-index"})],exports.PdTabs.prototype,"activeTabIndex",2);o([i.property({type:Boolean,attribute:"auto-activate"})],exports.PdTabs.prototype,"autoActivate",2);o([i.property({type:Array})],exports.PdTabs.prototype,"tabs",2);o([i.state()],exports.PdTabs.prototype,"slottedTabs",2);exports.PdTabs=o([i.customElement("pd-tabs")],exports.PdTabs);exports.PdTab=class extends r.LitElement{constructor(){super(...arguments),this.secondary=!1,this.inlineIcon=!1,this.icon="",this.ariaLabel=""}render(){return r.html`<slot></slot>`}};exports.PdTab.styles=r.css`
+    `}handleChange(t){const i=t.target;this.activeTabIndex=i.activeTabIndex,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{activeTabIndex:this.activeTabIndex}}))}};s([a.property({type:Number,attribute:"active-tab-index"})],exports.PdTabs.prototype,"activeTabIndex",2);s([a.property({type:Boolean,attribute:"auto-activate"})],exports.PdTabs.prototype,"autoActivate",2);s([a.property({type:Array})],exports.PdTabs.prototype,"tabs",2);s([a.state()],exports.PdTabs.prototype,"slottedTabs",2);s([a.queryAssignedElements({flatten:!0,selector:"pd-tab"})],exports.PdTabs.prototype,"assignedTabs",2);exports.PdTabs=s([a.customElement("pd-tabs")],exports.PdTabs);exports.PdTab=class extends r.LitElement{constructor(){super(...arguments),this.secondary=!1,this.inlineIcon=!1,this.icon="",this.ariaLabel=""}render(){return r.html`<slot></slot>`}};exports.PdTab.styles=r.css`
     :host {
       display: none;
     }
-  `;o([i.property({type:Boolean})],exports.PdTab.prototype,"secondary",2);o([i.property({type:Boolean,attribute:"inline-icon"})],exports.PdTab.prototype,"inlineIcon",2);o([i.property({type:String})],exports.PdTab.prototype,"icon",2);o([i.property({type:String,attribute:"aria-label"})],exports.PdTab.prototype,"ariaLabel",2);exports.PdTab=o([i.customElement("pd-tab")],exports.PdTab);
+  `;s([a.property({type:Boolean})],exports.PdTab.prototype,"secondary",2);s([a.property({type:Boolean,attribute:"inline-icon"})],exports.PdTab.prototype,"inlineIcon",2);s([a.property({type:String})],exports.PdTab.prototype,"icon",2);s([a.property({type:String,attribute:"aria-label"})],exports.PdTab.prototype,"ariaLabel",2);exports.PdTab=s([a.customElement("pd-tab")],exports.PdTab);