@prioticket/design-system-web 1.0.0 → 1.0.2

package/dist/components/pd-icon-button.es.js

@@ -1,100 +1,96 @@
-import { css as m, LitElement as b, html as a, nothing as s } from "lit";
-import { property as i, customElement as h } from "lit/decorators.js";
+import { css as m, LitElement as b, html as c, nothing as a } from "lit";
+import { property as i, state as f, customElement as h } from "lit/decorators.js";
 import "@material/web/iconbutton/icon-button.js";
 import "@material/web/iconbutton/filled-icon-button.js";
 import "@material/web/iconbutton/filled-tonal-icon-button.js";
 import "@material/web/iconbutton/outlined-icon-button.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, p = Object.getOwnPropertyDescriptor, l = (n, t, e, c) => {
-  for (var r = c > 1 ? void 0 : c ? p(t, e) : t, d = n.length - 1, u; d >= 0; d--)
-    (u = n[d]) && (r = (c ? u(t, e, r) : u(r)) || r);
-  return c && r && v(t, e, r), r;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (r, n, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? y(n, s) : n, d = r.length - 1, u; d >= 0; d--)
+    (u = r[d]) && (o = (l ? u(n, s, o) : u(o)) || o);
+  return l && o && v(n, s, o), o;
 };
-let o = class extends b {
+let e = class extends b {
   constructor() {
-    super(...arguments), this.variant = "standard", this.icon = "", this.selectedIcon = "", this.disabled = !1, this.toggle = !1, this.selected = !1, this.href = "", this.target = "", this.ariaLabel = "", this.ariaLabelSelected = "";
+    super(...arguments), this.variant = "standard", this.icon = "", this.selectedIcon = "", this.disabled = !1, this.toggle = !1, this.selected = !1, this.href = "", this.target = "", this.ariaLabel = "", this.ariaLabelSelected = "", this._internalSelected = !1;
+  }
+  // Initialize internal state from selected property
+  connectedCallback() {
+    super.connectedCallback(), this._internalSelected = this.selected;
+  }
+  // Get the current selected state (controlled vs uncontrolled)
+  get isSelected() {
+    return this.toggle ? this._internalSelected : this.selected;
   }
   getIconButtonTemplate() {
-    const n = this.icon ? a`<md-icon>${this.icon}</md-icon>` : a`<slot></slot>`, t = this.selectedIcon ? a`<md-icon slot="selected">${this.selectedIcon}</md-icon>` : s, e = {
+    const r = this.isSelected, n = r && this.selectedIcon ? this.selectedIcon : this.icon, l = n ? c`<md-icon class="${r ? "icon-selected" : "icon-unselected"}">${n}</md-icon>` : c`<slot></slot>`, o = {
       disabled: this.disabled,
       toggle: this.toggle,
-      selected: this.selected,
-      href: this.href || s,
-      target: this.target || s,
-      "aria-label": this.ariaLabel || s,
-      "aria-label-selected": this.ariaLabelSelected || s
+      selected: r,
+      href: this.href || a,
+      target: this.target || a,
+      "aria-label": this.ariaLabel || a,
+      "aria-label-selected": this.ariaLabelSelected || a
     };
     switch (this.variant) {
       case "filled":
-        return a`
+        return c`
           <md-filled-icon-button
-            ?disabled=${e.disabled}
-            ?toggle=${e.toggle}
-            ?selected=${e.selected}
-            .href=${e.href}
-            .target=${e.target}
-            aria-label=${e["aria-label"]}
-            aria-label-selected=${e["aria-label-selected"]}
-            @input=${this._handleInput}
-            @change=${this._handleChange}
+            ?disabled=${o.disabled}
+            ?toggle=${o.toggle}
+            ?selected=${o.selected}
+            .href=${o.href}
+            .target=${o.target}
+            aria-label=${o["aria-label"]}
+            aria-label-selected=${o["aria-label-selected"]}
             @click=${this._handleClick}
           >
-            ${n}
-            ${t}
+            ${l}
           </md-filled-icon-button>
         `;
       case "tonal":
-        return a`
+        return c`
           <md-filled-tonal-icon-button
-            ?disabled=${e.disabled}
-            ?toggle=${e.toggle}
-            ?selected=${e.selected}
-            .href=${e.href}
-            .target=${e.target}
-            aria-label=${e["aria-label"]}
-            aria-label-selected=${e["aria-label-selected"]}
-            @input=${this._handleInput}
-            @change=${this._handleChange}
+            ?disabled=${o.disabled}
+            ?toggle=${o.toggle}
+            ?selected=${o.selected}
+            .href=${o.href}
+            .target=${o.target}
+            aria-label=${o["aria-label"]}
+            aria-label-selected=${o["aria-label-selected"]}
             @click=${this._handleClick}
           >
-            ${n}
-            ${t}
+            ${l}
           </md-filled-tonal-icon-button>
         `;
       case "outlined":
-        return a`
+        return c`
           <md-outlined-icon-button
-            ?disabled=${e.disabled}
-            ?toggle=${e.toggle}
-            ?selected=${e.selected}
-            .href=${e.href}
-            .target=${e.target}
-            aria-label=${e["aria-label"]}
-            aria-label-selected=${e["aria-label-selected"]}
-            @input=${this._handleInput}
-            @change=${this._handleChange}
+            ?disabled=${o.disabled}
+            ?toggle=${o.toggle}
+            ?selected=${o.selected}
+            .href=${o.href}
+            .target=${o.target}
+            aria-label=${o["aria-label"]}
+            aria-label-selected=${o["aria-label-selected"]}
             @click=${this._handleClick}
           >
-            ${n}
-            ${t}
+            ${l}
           </md-outlined-icon-button>
         `;
       default:
-        return a`
+        return c`
           <md-icon-button
-            ?disabled=${e.disabled}
-            ?toggle=${e.toggle}
-            ?selected=${e.selected}
-            .href=${e.href}
-            .target=${e.target}
-            aria-label=${e["aria-label"]}
-            aria-label-selected=${e["aria-label-selected"]}
-            @input=${this._handleInput}
-            @change=${this._handleChange}
+            ?disabled=${o.disabled}
+            ?toggle=${o.toggle}
+            ?selected=${o.selected}
+            .href=${o.href}
+            .target=${o.target}
+            aria-label=${o["aria-label"]}
+            aria-label-selected=${o["aria-label-selected"]}
             @click=${this._handleClick}
           >
-            ${n}
-            ${t}
+            ${l}
           </md-icon-button>
         `;
     }
@@ -102,40 +98,31 @@ let o = class extends b {
   render() {
     return this.getIconButtonTemplate();
   }
-  _handleClick(n) {
-    this.disabled || this.dispatchEvent(new CustomEvent("icon-button-click", {
-      detail: {
-        variant: this.variant,
-        selected: this.selected,
-        toggle: this.toggle
-      },
-      bubbles: !0
-    }));
-  }
-  _handleInput(n) {
+  _handleClick(r) {
     if (this.disabled) return;
-    const t = n.target;
-    this.selected = t.selected, this.dispatchEvent(new CustomEvent("input", {
+    this.toggle && (this._internalSelected = !this._internalSelected);
+    const n = this.isSelected, s = r.target;
+    s && s.blur(), this.dispatchEvent(new CustomEvent("pd-icon-button-click", {
       detail: {
-        selected: t.selected,
-        variant: this.variant
+        variant: this.variant,
+        selected: n,
+        toggle: this.toggle,
+        icon: this.icon,
+        selectedIcon: this.selectedIcon
       },
-      bubbles: !0
-    }));
-  }
-  _handleChange(n) {
-    if (this.disabled) return;
-    const t = n.target;
-    this.selected = t.selected, this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0
+    })), this.toggle && this.dispatchEvent(new CustomEvent("change", {
       detail: {
-        selected: t.selected,
+        selected: n,
         variant: this.variant
       },
-      bubbles: !0
+      bubbles: !0,
+      composed: !0
     }));
   }
 };
-o.styles = m`
+e.styles = m`
     :host {
       display: inline-block;
       --md-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
@@ -144,6 +131,17 @@ o.styles = m`
       --md-outlined-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
     }
 
+    /* Icon fill states - Industry standard approach */
+    .icon-unselected {
+      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+    }
+
+    .icon-selected {
+      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
+    }
+
     :host([variant="standard"]) {
       --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
       --md-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
@@ -201,6 +199,7 @@ o.styles = m`
       --md-outlined-icon-button-container-shape: var(--md-sys-shape-corner-full);
     }
 
+    /* Enhanced visual feedback */
     md-icon-button:hover,
     md-filled-icon-button:hover,
     md-filled-tonal-icon-button:hover,
@@ -215,6 +214,31 @@ o.styles = m`
       transform: scale(0.95);
     }
 
+    /* Remove focus after click to prevent gray state */
+    md-icon-button,
+    md-filled-icon-button,
+    md-filled-tonal-icon-button,
+    md-outlined-icon-button {
+      outline: none;
+    }
+
+    md-icon-button:focus,
+    md-filled-icon-button:focus,
+    md-filled-tonal-icon-button:focus,
+    md-outlined-icon-button:focus {
+      outline: none;
+    }
+
+    /* Only show focus outline for keyboard navigation */
+    md-icon-button:focus-visible,
+    md-filled-icon-button:focus-visible,
+    md-filled-tonal-icon-button:focus-visible,
+    md-outlined-icon-button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+
+    /* Disabled state */
     :host([disabled]) md-icon-button,
     :host([disabled]) md-filled-icon-button,
     :host([disabled]) md-filled-tonal-icon-button,
@@ -229,40 +253,49 @@ o.styles = m`
     :host([disabled]) md-outlined-icon-button:hover {
       transform: none;
     }
+
+    /* Icon accessibility improvements */
+    md-icon {
+      user-select: none;
+      pointer-events: none;
+    }
   `;
-l([
+t([
   i({ type: String })
-], o.prototype, "variant", 2);
-l([
+], e.prototype, "variant", 2);
+t([
   i({ type: String })
-], o.prototype, "icon", 2);
-l([
+], e.prototype, "icon", 2);
+t([
   i({ type: String, attribute: "selected-icon" })
-], o.prototype, "selectedIcon", 2);
-l([
+], e.prototype, "selectedIcon", 2);
+t([
   i({ type: Boolean })
-], o.prototype, "disabled", 2);
-l([
+], e.prototype, "disabled", 2);
+t([
   i({ type: Boolean })
-], o.prototype, "toggle", 2);
-l([
+], e.prototype, "toggle", 2);
+t([
   i({ type: Boolean })
-], o.prototype, "selected", 2);
-l([
+], e.prototype, "selected", 2);
+t([
   i({ type: String })
-], o.prototype, "href", 2);
-l([
+], e.prototype, "href", 2);
+t([
   i({ type: String })
-], o.prototype, "target", 2);
-l([
+], e.prototype, "target", 2);
+t([
   i({ type: String, attribute: "aria-label" })
-], o.prototype, "ariaLabel", 2);
-l([
+], e.prototype, "ariaLabel", 2);
+t([
   i({ type: String, attribute: "aria-label-selected" })
-], o.prototype, "ariaLabelSelected", 2);
-o = l([
+], e.prototype, "ariaLabelSelected", 2);
+t([
+  f()
+], e.prototype, "_internalSelected", 2);
+e = t([
   h("pd-icon-button")
-], o);
+], e);
 export {
-  o as PdIconButton
+  e as PdIconButton
 };

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

@@ -45,7 +45,7 @@
       border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
     }
   `;n([s.property({type:Boolean,attribute:"multi-select"})],exports.PdSegmentedButton.prototype,"multiSelect",2);n([s.property({type:String,reflect:!0})],exports.PdSegmentedButton.prototype,"size",2);n([s.property({type:Boolean,reflect:!0})],exports.PdSegmentedButton.prototype,"disabled",2);n([s.property({type:Array})],exports.PdSegmentedButton.prototype,"selectedValues",2);n([s.state()],exports.PdSegmentedButton.prototype,"_segments",2);exports.PdSegmentedButton=n([s.customElement("pd-segmented-button")],exports.PdSegmentedButton);exports.PdSegmentItem=class extends l.LitElement{constructor(){super(...arguments),this.value="",this.selected=!1,this.disabled=!1,this.icon="",this.iconOnly=!1}_handleClick(){this.disabled||this.dispatchEvent(new CustomEvent("segment-click",{detail:{value:this.value},bubbles:!0,composed:!0}))}render(){return l.html`
-      <button
+      <pd-button
         class="segment ${this.selected?"selected":""} ${this.iconOnly?"icon-only":""}"
         ?disabled=${this.disabled}
         @click=${this._handleClick}
@@ -53,7 +53,7 @@
       >
         ${this.icon?l.html`<md-icon class="segment-icon">${this.icon}</md-icon>`:""}
         ${this.iconOnly?"":l.html`<span class="segment-label"><slot></slot></span>`}
-      </button>
+      </pd-button>
     `}};exports.PdSegmentItem.styles=l.css`
     :host {
       display: inline-flex;

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

@@ -119,7 +119,7 @@ let l = class extends p {
   }
   render() {
     return d`
-      <button
+      <pd-button
         class="segment ${this.selected ? "selected" : ""} ${this.iconOnly ? "icon-only" : ""}"
         ?disabled=${this.disabled}
         @click=${this._handleClick}
@@ -127,7 +127,7 @@ let l = class extends p {
       >
         ${this.icon ? d`<md-icon class="segment-icon">${this.icon}</md-icon>` : ""}
         ${this.iconOnly ? "" : d`<span class="segment-label"><slot></slot></span>`}
-      </button>
+      </pd-button>
     `;
   }
 };

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),r=require("lit/decorators.js");require("@material/web/icon/icon.js");var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,t,s)=>{for(var a=s>1?void 0:s?d(e,t):e,c=p.length-1,l;c>=0;c--)(l=p[c])&&(a=(s?l(e,t,a):l(a))||a);return s&&a&&n(e,t,a),a};exports.PdSegmentedStepper=class extends o.LitElement{constructor(){super(...arguments),this.activeStep=0,this.completedSteps=[],this.size="medium",this.disabled=!1,this.allowStepNavigation=!0,this._steps=[]}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"))&&this._updateSteps()}_updateSteps(){const e=this.querySelectorAll("pd-stepper-item");this._steps=Array.from(e),this._steps.forEach((t,s)=>{t.disabled=this.disabled||t.disabled,t.setAttribute("data-step-index",s.toString()),t.stepNumber=s+1,this.completedSteps.includes(s)?t.state="completed":s===this.activeStep?t.state="active":t.state="pending",t.clickable=this.allowStepNavigation&&(t.state==="completed"||t.state==="active"&&!this.disabled)})}_handleStepClick(e){if(this.disabled)return;const t=e.target,s=parseInt(t.getAttribute("data-step-index")||"0");this.allowStepNavigation&&(this.completedSteps.includes(s)||s===this.activeStep)&&this.goToStep(s)}goToStep(e){if(e>=0&&e<this._steps.length){const t=this.activeStep;this.activeStep=e,this._updateSteps(),this.dispatchEvent(new CustomEvent("stepchange",{detail:{activeStep:this.activeStep,previousStep:t,totalSteps:this._steps.length},bubbles:!0,composed:!0}))}}nextStep(){this.activeStep<this._steps.length-1&&this.goToStep(this.activeStep+1)}previousStep(){this.activeStep>0&&this.goToStep(this.activeStep-1)}completeCurrentStep(){this.completeStep(this.activeStep)}completeStep(e){this.completedSteps.includes(e)||(this.completedSteps=[...this.completedSteps,e].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}))),e===this.activeStep&&this.activeStep<this._steps.length-1&&this.nextStep()}reset(){this.activeStep=0,this.completedSteps=[],this._updateSteps()}render(){return o.html`
+"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`
       <div class="segmented-stepper" role="group" aria-label="Progress stepper">
         <slot @slotchange=${this._updateSteps}></slot>
       </div>
-    `}};exports.PdSegmentedStepper.styles=o.css`
+    `}};exports.PdSegmentedStepper.styles=p.css`
     :host {
       display: inline-flex;
       font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
@@ -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));
     }
-  `;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.state()],exports.PdSegmentedStepper.prototype,"_steps",2);exports.PdSegmentedStepper=i([r.customElement("pd-segmented-stepper")],exports.PdSegmentedStepper);exports.PdStepperItem=class extends o.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 o.html`
+  `;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`
       <button
         class="step ${this.state} ${this.clickable?"clickable":""}"
         ?disabled=${this.disabled}
@@ -54,13 +54,13 @@
         aria-label="Step ${this.stepNumber}: ${this.state}"
       >
         <div class="step-indicator">
-          ${e?o.html`<md-icon class="check-icon">check</md-icon>`:""}
-          ${this.icon?o.html`<md-icon class="step-icon">${this.icon}</md-icon>`:""}
-          ${t?o.html`<span class="step-number">${this.stepNumber}</span>`:""}
+          ${e?p.html`<md-icon class="check-icon">check</md-icon>`:""}
+          ${this.icon?p.html`<md-icon class="step-icon">${this.icon}</md-icon>`:""}
+          ${t?p.html`<span class="step-number">${this.stepNumber}</span>`:""}
         </div>
         <span class="step-label"><slot></slot></span>
       </button>
-    `}};exports.PdStepperItem.styles=o.css`
+    `}};exports.PdStepperItem.styles=p.css`
     :host {
       display: inline-flex;
     }
@@ -188,4 +188,4 @@
       outline: 2px solid var(--md-sys-color-primary, #6750a4);
       outline-offset: 2px;
     }
-  `;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);
+  `;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);